diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue index 69117a4081..577da9d569 100644 --- a/src/runtime/components/Progress.vue +++ b/src/runtime/components/Progress.vue @@ -122,9 +122,8 @@ const indicatorStyle = computed(() => { }) const statusStyle = computed(() => { - return { - [props.orientation === 'vertical' ? 'height' : 'width']: percent.value ? `${percent.value}%` : 'fit-content' - } + const value = `${Math.max(percent.value ?? 0, 0)}%` + return props.orientation === 'vertical' ? { height: value } : { width: value } }) function isActive(index: number) { diff --git a/src/theme/progress.ts b/src/theme/progress.ts index 08a7460484..1a4df2314a 100644 --- a/src/theme/progress.ts +++ b/src/theme/progress.ts @@ -5,7 +5,7 @@ export default (options: Required) => ({ root: 'gap-2', base: 'relative overflow-hidden rounded-full bg-accented', indicator: 'rounded-full size-full transition-transform duration-200 ease-out', - status: 'flex justify-end text-dimmed transition-[width] duration-200', + status: 'flex text-dimmed transition-[width] duration-200', steps: 'grid items-end', step: 'truncate text-end row-start-1 col-start-1 transition-opacity' }, @@ -74,12 +74,12 @@ export default (options: Required) => ({ horizontal: { root: 'w-full flex flex-col', base: 'w-full', - status: 'flex-row' + status: 'flex-row items-center justify-end min-w-fit' }, vertical: { root: 'h-full flex flex-row-reverse', base: 'h-full', - status: 'flex-col' + status: 'flex-col justify-end min-h-fit' } }, inverted: { diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap index afdb6237a7..135d9929fc 100644 --- a/test/components/__snapshots__/Progress-vue.spec.ts.snap +++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap @@ -72,7 +72,7 @@ exports[`Progress > renders with color neutral correctly 1`] = ` exports[`Progress > renders with max correctly 1`] = ` "
-
50%
+
50%
@@ -88,7 +88,7 @@ exports[`Progress > renders with max correctly 1`] = ` exports[`Progress > renders with max inverted correctly 1`] = ` "
-
50%
+
50%
@@ -204,7 +204,7 @@ exports[`Progress > renders with size xs correctly 1`] = ` exports[`Progress > renders with status correctly 1`] = ` "
-
50%
+
50%
@@ -214,7 +214,7 @@ exports[`Progress > renders with status correctly 1`] = ` exports[`Progress > renders with status inverted correctly 1`] = ` "
-
50%
+
50%
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap index afdb6237a7..135d9929fc 100644 --- a/test/components/__snapshots__/Progress.spec.ts.snap +++ b/test/components/__snapshots__/Progress.spec.ts.snap @@ -72,7 +72,7 @@ exports[`Progress > renders with color neutral correctly 1`] = ` exports[`Progress > renders with max correctly 1`] = ` "
-
50%
+
50%
@@ -88,7 +88,7 @@ exports[`Progress > renders with max correctly 1`] = ` exports[`Progress > renders with max inverted correctly 1`] = ` "
-
50%
+
50%
@@ -204,7 +204,7 @@ exports[`Progress > renders with size xs correctly 1`] = ` exports[`Progress > renders with status correctly 1`] = ` "
-
50%
+
50%
@@ -214,7 +214,7 @@ exports[`Progress > renders with status correctly 1`] = ` exports[`Progress > renders with status inverted correctly 1`] = ` "
-
50%
+
50%