@saasmakers/ui 0.1.108 → 0.1.110

package/app/components/bases/BaseAvatar.vue

@@ -68,9 +68,9 @@ function onFocus() {
   hovered.value = true
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && isClickable.value) {
-    onClick(event as unknown as MouseEvent)
+function onKeyDown(event: KeyboardEvent) {
+  if (isClickable.value) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 
@@ -109,7 +109,8 @@ function onMouseLeave() {
       :aria-disabled="!isClickable"
       tabindex="0"
       @click="onClick"
-      @keydown.prevent="onKeydown"
+      @keydown.enter="onKeyDown"
+      @keydown.space.prevent="onKeyDown"
     >
       <img
         class="h-full w-full object-cover drag-none"

package/app/components/bases/BaseEmoji.vue

@@ -22,9 +22,9 @@ function onClick(event: MouseEvent) {
   emit('click', event, props.emoji)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && props.clickable) {
-    onClick(event as unknown as MouseEvent)
+function onKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 </script>
@@ -52,7 +52,8 @@ function onKeydown(event: KeyboardEvent) {
     role="button"
     tabindex="0"
     @click="onClick"
-    @keydown.prevent="onKeydown"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <img
       v-if="emoji"

package/app/components/bases/BaseIcon.vue

@@ -99,9 +99,9 @@ function onClick(event: MouseEvent) {
   emit('click', event)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && isClickable.value) {
-    onClick(event as unknown as MouseEvent)
+function onKeyDown(event: KeyboardEvent) {
+  if (isClickable.value) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 </script>
@@ -117,7 +117,8 @@ function onKeydown(event: KeyboardEvent) {
     role="button"
     tabindex="0"
     @click="onClick"
-    @keydown.prevent="onKeydown"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <component
       :is="to ? NuxtLinkLocale : 'span'"

package/app/components/bases/BaseOverlay.vue

@@ -37,9 +37,9 @@ function onClose(event: KeyboardEvent | MouseEvent) {
   emit('close', event)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && isClickable.value) {
-    onClick(event as unknown as MouseEvent)
+function onKeyDown(event: KeyboardEvent) {
+  if (isClickable.value) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 
@@ -59,7 +59,8 @@ onKeyStroke('Escape', (event) => {
     role="button"
     tabindex="0"
     @click="onClick"
-    @keydown.prevent="onKeydown"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <BaseIcon
       v-if="hasClose"

package/app/components/bases/BaseQuote.vue

@@ -52,9 +52,9 @@ function onBubbleClick(event: MouseEvent) {
   emit('click', event)
 }
 
-function onBubbleKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && props.clickable) {
-    onBubbleClick(event as unknown as MouseEvent)
+function onBubbleKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 
@@ -111,7 +111,8 @@ function onClose(event: MouseEvent) {
         :aria-disabled="!clickable"
         tabindex="0"
         @click="onBubbleClick"
-        @keydown.prevent="onBubbleKeydown"
+        @keydown.enter="onBubbleKeyDown"
+        @keydown.space.prevent="onBubbleKeyDown"
       >
         <div class="flex items-center">
           <div

package/app/components/bases/BaseSpinner.vue

@@ -19,9 +19,9 @@ function onClick(event: MouseEvent) {
   emit('click', event, props.id)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && props.clickable) {
-    onClick(event as unknown as MouseEvent)
+function onKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 </script>
@@ -38,7 +38,8 @@ function onKeydown(event: KeyboardEvent) {
     :aria-disabled="!clickable"
     tabindex="0"
     @click="onClick"
-    @keydown.prevent="onKeydown"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <div
       class="relative inline-block cursor-wait flex-initial"

package/app/components/bases/BaseTag.vue

@@ -74,9 +74,9 @@ function onInputSubmit(event: KeyboardEvent) {
   emit('inputSubmit', event, form.name.trim(), props.id)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && props.clickable) {
-    onClick(event as unknown as MouseEvent)
+function onKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 
@@ -100,7 +100,8 @@ function onRemove(event: MouseEvent) {
     :aria-disabled="!clickable"
     tabindex="0"
     @click.stop="onClick"
-    @keydown.prevent="onKeydown"
+    @keydown.enter.stop="onKeyDown"
+    @keydown.space.prevent.stop="onKeyDown"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
     @focusin="onFocus"

package/app/components/bases/BaseToast.vue

@@ -14,15 +14,9 @@ const emit = defineEmits<{
 
 const { getIcon } = useLayerIcons()
 
-function onClose(event: MouseEvent) {
+function onClose(event: KeyboardEvent | MouseEvent) {
   if (props.hasClose) {
-    emit('close', event, props)
-  }
-}
-
-function onKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && props.hasClose) {
-    onClose(event as unknown as MouseEvent)
+    emit('close', event as MouseEvent, props)
   }
 }
 </script>
@@ -34,7 +28,8 @@ function onKeydown(event: KeyboardEvent) {
     role="button"
     tabindex="0"
     @click="onClose"
-    @keydown.prevent="onKeydown"
+    @keydown.enter="onClose"
+    @keydown.space.prevent="onClose"
   >
     <BaseIcon
       class="pointer-events-none flex-initial"

package/app/components/fields/FieldLabel.vue

@@ -24,15 +24,11 @@ const isClickable = computed(() => {
 })
 
 function onClick(event: MouseEvent) {
-  if (isClickable.value) {
-    emit('click', event)
-  }
+  emit('click', event)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    onClick(event as unknown as MouseEvent)
-  }
+function onKeyDown(event: KeyboardEvent) {
+  (event.currentTarget as HTMLElement).click()
 }
 </script>
 
@@ -61,7 +57,8 @@ function onKeydown(event: KeyboardEvent) {
     :tabindex="isClickable && !forField ? 0 : undefined"
     :type="isClickable && !forField ? 'button' : undefined"
     @click="isClickable ? onClick : undefined"
-    @keydown.prevent="isClickable ? onKeydown : undefined"
+    @keydown.enter="isClickable ? onKeyDown : undefined"
+    @keydown.space.prevent="isClickable ? onKeyDown : undefined"
   >
     <BaseIcon
       :icon="icon"

package/app/components/fields/FieldSelect.vue

@@ -70,12 +70,6 @@ const selectedOption = computed(() => {
   })
 })
 
-function onBlur() {
-  if (props.openOnHover && !props.disabled) {
-    opened.value = false
-  }
-}
-
 function onClose() {
   reset()
 }
@@ -96,26 +90,20 @@ function onContainerKeypress(event: KeyboardEvent) {
   }
 }
 
-function onFocus() {
-  if (props.openOnHover && !props.disabled) {
-    opened.value = true
-  }
-}
-
 function onLabelClick() {
   if (!props.disabled) {
     opened.value = !opened.value
   }
 }
 
-function onMouseEnter() {
+function onMouseEnterOrFocus() {
   if (props.openOnHover && !props.disabled) {
     opened.value = true
   }
 }
 
-function onMouseLeave() {
-  if (props.openOnHover) {
+function onMouseLeaveOrBlur() {
+  if (props.openOnHover && !props.disabled) {
     opened.value = false
   }
 }
@@ -134,9 +122,9 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
   }
 }
 
-function onOptionKeydown(event: KeyboardEvent, option: FieldSelectOption) {
-  if ((event.key === 'Enter' || event.key === ' ') && !props.disabled) {
-    onOptionClick(event as unknown as MouseEvent, option)
+function onOptionKeyDown(event: KeyboardEvent) {
+  if (!props.disabled) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 
@@ -198,10 +186,10 @@ function selectOption(event: MouseEvent, value: string) {
           tabindex="0"
           @click="onContainerClick"
           @keypress.prevent="onContainerKeypress"
-          @mouseenter="onMouseEnter"
-          @mouseleave="onMouseLeave"
-          @focusin="onFocus"
-          @focusout="onBlur"
+          @mouseenter="onMouseEnterOrFocus"
+          @mouseleave="onMouseLeaveOrBlur"
+          @focusin="onMouseEnterOrFocus"
+          @focusout="onMouseLeaveOrBlur"
         >
           <template v-if="selectedOption">
             <BaseIcon
@@ -283,7 +271,8 @@ function selectOption(event: MouseEvent, value: string) {
                 role="button"
                 tabindex="0"
                 @click="onOptionClick($event, option)"
-                @keydown.prevent="onOptionKeydown($event, option)"
+                @keydown.enter.prevent="onOptionKeyDown"
+                @keydown.space.prevent="onOptionKeyDown"
               >
                 <BaseIcon
                   v-if="option.text"

package/app/components/fields/FieldTime.vue

@@ -33,10 +33,9 @@ function onContainerClick() {
   }
 }
 
-function onContainerKeydown(event: KeyboardEvent) {
-  if ((event.key === 'Enter' || event.key === ' ') && !props.disabled && inputRef.value) {
-    inputRef.value.focus()
-    inputRef.value.showPicker()
+function onContainerKeyDown(event: KeyboardEvent) {
+  if (!props.disabled) {
+    (event.currentTarget as HTMLElement).click()
   }
 }
 
@@ -74,7 +73,8 @@ function onFieldBlur(event: FocusEvent) {
       :aria-disabled="disabled"
       tabindex="0"
       @click="onContainerClick"
-      @keydown.prevent="onContainerKeydown"
+      @keydown.enter="onContainerKeyDown"
+      @keydown.space.prevent="onContainerKeyDown"
     >
       <BaseIcon
         :icon="getIcon('clock')"

package/app/composables/useChartist.ts

@@ -50,6 +50,7 @@ export default function useChartist() {
           // Clean up the dash attributes after it finishes
           const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
 
+          // eslint-disable-next-line sonarjs/no-nested-functions
           globalThis.setTimeout(() => {
             lineCtx.element.attr({
               'stroke-dasharray': undefined,

package/app/composables/useToasts.ts

@@ -1,3 +1,5 @@
+import { randomUUID } from 'node:crypto'
+
 const toasts = ref<BaseToast[]>([])
 
 export default function useToast() {
@@ -20,7 +22,7 @@ export default function useToast() {
   const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>) => {
     if (import.meta.client) {
       const toast: BaseToast = {
-        id: Math.floor((1 + Math.random()) * 0x1_00_00).toString(16),
+        id: randomUUID(),
         status: status || 'success',
         text: message.includes(' ') ? message : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams || {}),
       }

package/nuxt.config.ts

@@ -6,26 +6,21 @@ import uno from './uno.config.js'
 const currentDir = path.dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
-  // --> BUILD <--
-
-  compatibilityDate: '2025-09-24',
-
-  experimental: { typedPages: true },
-
-  typescript: {
-    strict: true,
-
-    tsConfig: {
-      compilerOptions: {
-        noUncheckedIndexedAccess: false,
-        noUnusedParameters: true,
-      },
-
-      vueCompilerOptions: { strictTemplates: true },
-    },
-  },
-
-  // --> COMPONENTS, CSS & MODULES <--
+  modules: [
+    '@nuxt/icon',
+    '@nuxt/scripts',
+    '@nuxtjs/color-mode',
+    '@nuxtjs/i18n',
+    '@nuxtjs/plausible',
+    '@nuxtjs/robots',
+    '@nuxtjs/sitemap',
+    '@nuxtjs/storybook',
+    '@pinia/nuxt',
+    '@unocss/nuxt',
+    '@vueuse/nuxt',
+    'floating-vue/nuxt',
+    'motion-v/nuxt',
+  ],
 
   components: [
     {
@@ -42,6 +37,8 @@ export default defineNuxtConfig({
     },
   ],
 
+  devtools: { enabled: true },
+
   css: [
     '@unocss/reset/tailwind.css',
     path.join(currentDir, './app/assets/styles/chartist.css'),
@@ -49,31 +46,28 @@ export default defineNuxtConfig({
     path.join(currentDir, './app/assets/styles/v-popper.css'),
   ],
 
-  modules: [
-    '@nuxt/icon',
-    '@nuxt/scripts',
-    '@nuxtjs/color-mode',
-    '@nuxtjs/i18n',
-    '@nuxtjs/plausible',
-    '@nuxtjs/robots',
-    '@nuxtjs/sitemap',
-    '@nuxtjs/storybook',
-    '@pinia/nuxt',
-    '@unocss/nuxt',
-    '@vueuse/nuxt',
-    'floating-vue/nuxt',
-    'motion-v/nuxt',
-  ],
-
-  // --> MODULES <--
-
   colorMode: {
     classSuffix: '',
     fallback: 'light',
     preference: 'system',
   },
 
-  devtools: { enabled: true },
+  experimental: { typedPages: true },
+
+  compatibilityDate: '2025-09-24',
+
+  typescript: {
+    strict: true,
+
+    tsConfig: {
+      compilerOptions: {
+        noUncheckedIndexedAccess: false,
+        noUnusedParameters: true,
+      },
+
+      vueCompilerOptions: { strictTemplates: true },
+    },
+  },
 
   i18n: {
     defaultLocale: 'en',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "0.1.108",
+  "version": "0.1.110",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "repository": {
@@ -55,10 +55,10 @@
   "devDependencies": {
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.1.15"
+    "@saasmakers/shared": "0.1.16"
   },
   "peerDependencies": {
-    "@saasmakers/shared": "^0.1.15",
+    "@saasmakers/shared": "^0.1.16",
     "nuxt": "4.2.2"
   },
   "publishConfig": {

package/uno.config.ts

@@ -187,9 +187,11 @@ export const theme = {
   /* eslint-enable perfectionist/sort-objects */
 }
 
+/* eslint-disable nuxt/nuxt-config-keys-order */
 export default defineConfig({
   presets,
   rules,
   shortcuts,
   theme,
 })
+/* eslint-enable nuxt/nuxt-config-keys-order */