fix: improve status position theme

Author: Charfeddine Hamrouni

docs/content/3.components/progress.md

@@ -57,6 +57,20 @@ props:
 ---
 ::
 
+### Variant
+
+Use the `variant` prop to change the style of the Progress. Defaults to `linear`.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 50
+  variant: linear
+---
+::
+
 ### Status
 
 Use the `status` prop to display the current Progress value above the bar.
@@ -78,11 +92,12 @@ Use the `statusPosition` prop to define where the status text is displayed. Defa
 ::component-code
 ---
 external:
-- modelValue
-  props:
+  - modelValue
+props:
   modelValue: 50
+  variant: circular
   status: true
-  statusPosition: inside
+  statusPosition: 'inside'
 ---
 ::
 
@@ -132,11 +147,11 @@ Use the `variant` prop to change the style of the Progress. Defaults to `linear`
 ---
 prettier: true
 ignore:
-- modelValue
-- max
-  external:
-- modelValue
-  props:
+  - modelValue
+  - max
+external:
+  - modelValue
+props:
   variant: circular
   modelValue: 50
   max: 100

src/runtime/components/Progress.vue

@@ -201,7 +201,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!isIndeterminate && (statusPosition === 'outside') && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+    <div v-if="!isIndeterminate && (variant !== 'circular' || statusPosition === 'outside') && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
@@ -231,7 +231,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
             />
           </ProgressIndicator>
         </svg>
-        <div v-if="!isIndeterminate && (statusPosition === 'inside') && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })">
+        <div v-if="!isIndeterminate && variant === 'circular' && statusPosition === 'inside' && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })">
           <slot name="status" :percent="percent">
             {{ percent }}%
           </slot>

src/theme/progress.ts

@@ -24,12 +24,8 @@ export default (options: Required<ModuleOptions>) => ({
       }
     },
     statusPosition: {
-      inside: {
-        status: 'absolute inset-0'
-      },
-      outside: {
-        status: ''
-      }
+      inside: {},
+      outside: {}
     },
     animation: {
       'carousel': '',