@saasmakers/ui 0.1.108 → 0.1.109

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

@@ -134,9 +134,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()
   }
 }
 
@@ -283,7 +283,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "repository": {