@saasmakers/ui 1.5.3 → 1.5.5

package/app/components/bases/BaseProgress.vue

@@ -2,6 +2,7 @@
 import type { BaseProgress } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseProgress>(), {
+  labelFormat: 'fraction',
   max: 100,
   showLabel: false,
   size: 'base',
@@ -17,7 +18,7 @@ const percent = computed(() => {
 })
 
 const label = computed(() => {
-  if (props.max === 100) {
+  if (props.labelFormat === 'percent') {
     return `${Math.round(percent.value)} %`
   }
 
@@ -28,12 +29,18 @@ const label = computed(() => {
 <template>
   <div
     class="flex items-center"
-    :class="size === 'base' ? 'gap-2.5' : 'gap-2'"
+    :class="{
+      'gap-2.5': size === 'base',
+      'gap-2': !(size === 'base'),
+    }"
   >
     <div
       role="progressbar"
       class="min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
-      :class="size === 'base' ? 'h-1.5' : 'h-1'"
+      :class="{
+        'h-1.5': size === 'base',
+        'h-1': !(size === 'base'),
+      }"
       :aria-label="label"
       :aria-valuemax="max"
       :aria-valuemin="0"

package/app/components/bases/BaseToast.vue

@@ -47,7 +47,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
     <button
       v-if="action"
-      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
+      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 uppercase transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
       :class="{
         'bg-red-100 text-red-700 hover:bg-red-200 focus-visible:ring-red-500 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25': status === 'error',
         'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus-visible:ring-indigo-500 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25': status === 'info',

package/app/components/layout/LayoutBottomSheet.vue

@@ -243,7 +243,10 @@ watch(visible, (isVisible) => {
           <div
             ref="contentRef"
             class="min-h-0 flex-1 overflow-y-auto px-5"
-            :class="$slots.footer ? 'pb-4' : 'pb-6'"
+            :class="{
+              'pb-4': $slots.footer,
+              'pb-6': !($slots.footer),
+            }"
             @pointercancel="onPointerUp"
             @pointerdown="onContentPointerDown"
             @pointermove="onPointerMove"

package/app/types/bases.d.ts

@@ -282,12 +282,15 @@ export type BasePowerPower
 export type BasePowerSize = 'base' | 'lg' | 'sm' | 'xs'
 
 export interface BaseProgress {
+  labelFormat?: BaseProgressLabelFormat
   max?: number
   showLabel?: boolean
   size?: BaseProgressSize
   value?: number
 }
 
+export type BaseProgressLabelFormat = 'fraction' | 'percent'
+
 export type BaseProgressSize = 'base' | 'sm'
 
 export interface BaseQuote {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",