@saasmakers/ui 2.0.43 → 2.0.45

package/app/components/fields/FieldSelect.vue

@@ -100,6 +100,19 @@ const selectedOption = computed(() => {
   })
 })
 
+const textSize = computed<BaseSize>(() => {
+  switch (props.size) {
+    case 'base':
+      return 'sm'
+    case 'lg':
+      return 'base'
+    case 'sm':
+      return 'xs'
+    default:
+      return 'sm'
+  }
+})
+
 watch(opened, (isOpened) => {
   if (isOpened && props.searchable) {
     nextTick(() => {
@@ -266,6 +279,7 @@ function selectOption(event: MouseEvent, value: string) {
               :class="{ 'mr-2': !hideLabel && !square }"
               :color="selectedOption.iconColor"
               :icon="selectedOption.icon"
+              :size="textSize"
             />
 
             <span
@@ -351,7 +365,7 @@ function selectOption(event: MouseEvent, value: string) {
                 class="pointer-events-none"
                 color="gray"
                 :icon="getLayerIcon('infoCircle')"
-                :size="size"
+                :size="textSize"
                 :text="t('noResults')"
               />
             </div>
@@ -371,7 +385,10 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="flex cursor-pointer items-center outline-none"
                 :class="{
-                  'base-border-b p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'base-border-b px-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'h-10': size === 'sm' && computedColumns.length < 2,
+                  'h-12': size === 'base' && computedColumns.length < 2,
+                  'h-14': size === 'lg' && computedColumns.length < 2,
                   'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,
                   'font-medium underline': option.value === selectedOption?.value,
                   'text-gray-900 dark:text-gray-100': option.value === selectedOption?.value,
@@ -401,7 +418,7 @@ function selectOption(event: MouseEvent, value: string) {
                   class="pointer-events-none mr-2 flex-initial"
                   :color="option.iconColor"
                   :icon="option.icon"
-                  :size="size"
+                  :size="textSize"
                   :text="option.text"
                 />
               </div>

package/app/composables/useToasts.ts

@@ -19,6 +19,7 @@ export default function useToast() {
 
   const createToast = (params: {
     action?: BaseToastAction
+    durationMs?: number
     emoji?: string
     i18nParams?: Record<string, number | string>
     message: string
@@ -56,7 +57,10 @@ export default function useToast() {
         existingToast.action = params.action
       }
 
-      scheduleDismiss(existingToast.id, !!existingToast.action)
+      scheduleDismiss(existingToast.id, {
+        durationMs: params.durationMs,
+        hasAction: !!existingToast.action,
+      })
 
       return
     }
@@ -70,7 +74,10 @@ export default function useToast() {
     }
 
     toasts.value.push(toast)
-    scheduleDismiss(toast.id, !!params.action)
+    scheduleDismiss(toast.id, {
+      durationMs: params.durationMs,
+      hasAction: !!params.action,
+    })
   }
 
   return {
@@ -123,10 +130,24 @@ function getFingerprint(params: {
   return parts.join(':')
 }
 
-function scheduleDismiss(toastId: string, hasAction: boolean) {
+function getDismissDuration(params: {
+  durationMs?: number
+  hasAction: boolean
+}): number {
+  if (params.durationMs !== undefined) {
+    return params.durationMs
+  }
+
+  return (params.hasAction ? 8 : 5) * 1000
+}
+
+function scheduleDismiss(toastId: string, params: {
+  durationMs?: number
+  hasAction: boolean
+}) {
   clearDismissTimer(toastId)
 
-  const duration = (hasAction ? 8 : 5) * 1000
+  const duration = getDismissDuration(params)
   const timer = setTimeout(() => closeToast(toastId), duration)
 
   dismissTimers.set(toastId, timer)

package/nuxt.config.ts

@@ -140,11 +140,6 @@ export default defineNuxtConfig({
   },
 
   unocss: {
-    nuxtLayers: true,
-    presets: uno.presets,
-    rules: uno.rules,
-    shortcuts: uno.shortcuts,
-    theme: uno.theme,
     content: {
       // Force consumers to scan layer classes even when resolved from node_modules,
       // otherwise transition utilities used only here are purged during their prod build.
@@ -152,5 +147,10 @@ export default defineNuxtConfig({
         path.join(currentDir, 'app/**/*.{vue,ts}'),
       ],
     },
+    nuxtLayers: true,
+    presets: uno.presets,
+    rules: uno.rules,
+    shortcuts: uno.shortcuts,
+    theme: uno.theme,
   },
 })

package/package.json

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