@saasmakers/ui 1.5.2 → 1.5.4

package/app/components/bases/BaseProgress.vue

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

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,11 +282,17 @@ 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 {
   background?: BaseQuoteBackground
   character?: BaseCharacterCharacter

package/package.json

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