@saasmakers/ui 1.4.35 → 1.4.37

package/app/components/bases/BaseButton.vue

@@ -58,7 +58,6 @@ function onClick(event: MouseEvent) {
     :is="to ? NuxtLinkLocale : 'button'"
     class="relative inline-block select-none appearance-none border focus-visible:outline-none"
     :class="{
-      'inline-block': !circular,
       'flex items-center justify-center': circular,
       'cursor-not-allowed opacity-50': disabled,
       'cursor-wait': loading,
@@ -131,7 +130,7 @@ function onClick(event: MouseEvent) {
 
     <BaseSpinner
       v-if="loading"
-      class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
       :color="!background ? 'black' : light ? color : color === 'white' ? 'indigo' : 'white'"
       :size="size"
     />

package/app/components/bases/BaseMessage.vue

@@ -45,7 +45,7 @@ defineSlots<{
 
       <div
         v-if="$slots.default"
-        class="mt-6 flex flex-col items-center justify-center sm:flex-row sm:items-center"
+        class="mt-6 flex flex-col items-center justify-center sm:flex-row"
       >
         <slot />
       </div>

package/app/components/bases/BaseMetric.vue

@@ -36,7 +36,7 @@ const performanceIcon = computed<string | undefined>(() => {
     :class="{
       'items-start': alignment === 'left',
       'items-center': alignment === 'center',
-      'items-right': alignment === 'right',
+      'items-end': alignment === 'right',
     }"
   >
     <BaseText
@@ -62,7 +62,7 @@ const performanceIcon = computed<string | undefined>(() => {
 
       <BaseIcon
         v-if="performanceIcon"
-        class="absolute right-0 translate-x-4 transform"
+        class="absolute right-0 translate-x-4"
         :class="{
           '-mt-0.5': performance === 'down',
           'mt-0.25': performance === 'up',

package/app/components/bases/BaseShortcut.stories.ts

@@ -0,0 +1,24 @@
+import BaseShortcut from './BaseShortcut.vue'
+
+export default {
+  component: BaseShortcut,
+  title: 'Bases/BaseShortcut',
+
+  argTypes: {
+    active: { control: 'boolean' },
+    shortcut: { control: 'text' },
+  },
+} satisfies Meta<typeof BaseShortcut>
+
+export const Enter: StoryObj<typeof BaseShortcut> = { args: { shortcut: 'Enter' } satisfies Partial<BaseShortcut> }
+
+export const Letter: StoryObj<typeof BaseShortcut> = { args: { shortcut: 'y' } satisfies Partial<BaseShortcut> }
+
+export const Escape: StoryObj<typeof BaseShortcut> = { args: { shortcut: 'Escape' } satisfies Partial<BaseShortcut> }
+
+export const Inactive: StoryObj<typeof BaseShortcut> = {
+  args: {
+    active: false,
+    shortcut: 'Enter',
+  } satisfies Partial<BaseShortcut>,
+}

package/app/components/bases/BaseShortcut.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { onKeyStroke } from '@vueuse/core'
+import type { BaseShortcut } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseShortcut>(), {
+  active: true,
+  shortcut: 'Enter',
+})
+
+const emit = defineEmits<{
+  trigger: [event: KeyboardEvent]
+}>()
+
+const { getIcon } = useLayerIcons()
+
+function isTypingTarget(target: EventTarget | null) {
+  const element = target as HTMLElement | null
+  const typingTags = ['INPUT', 'SELECT', 'TEXTAREA']
+
+  if (!element) {
+    return false
+  }
+
+  if (element.isContentEditable) {
+    return true
+  }
+
+  return typingTags.includes(element.tagName)
+}
+
+onKeyStroke(
+  event => event.key.toLowerCase() === props.shortcut.toLowerCase(),
+  (event) => {
+    if (!props.active) {
+      return
+    }
+
+    if (isTypingTarget(event.target)) {
+      return
+    }
+
+    event.preventDefault()
+    emit('trigger', event)
+  },
+)
+</script>
+
+<template>
+  <kbd
+    class="h-3.5 min-w-3.5 inline-flex items-center justify-center border border-current/50 rounded px-0.5 text-2xs leading-none"
+    :class="{ 'font-mono uppercase': shortcut.toLowerCase() !== 'enter' }"
+  >
+    <Icon
+      v-if="shortcut.toLowerCase() === 'enter'"
+      class="size-2"
+      :name="getIcon('enter')"
+    />
+
+    <template v-else>
+      {{ shortcut === 'Escape' ? 'esc' : shortcut }}
+    </template>
+  </kbd>
+</template>

package/app/components/bases/BaseToast.stories.ts

@@ -40,3 +40,31 @@ export const WithAction: StoryObj<typeof BaseToast> = {
     text: 'Toast message',
   } satisfies Partial<BaseToast>,
 }
+
+export const WithActionShortcutEnter: StoryObj<typeof BaseToast> = {
+  args: {
+    action: {
+      label: 'Yes',
+      // eslint-disable-next-line no-console
+      onClick: () => console.log('action clicked'),
+      shortcut: 'Enter',
+    },
+    id: 'toast-3',
+    status: 'success',
+    text: 'Confirm this action?',
+  } satisfies Partial<BaseToast>,
+}
+
+export const WithActionShortcutY: StoryObj<typeof BaseToast> = {
+  args: {
+    action: {
+      label: 'Yes',
+      // eslint-disable-next-line no-console
+      onClick: () => console.log('action clicked'),
+      shortcut: 'y',
+    },
+    id: 'toast-4',
+    status: 'info',
+    text: 'Confirm this action?',
+  } satisfies Partial<BaseToast>,
+}

package/app/components/bases/BaseToast.vue

@@ -2,6 +2,7 @@
 import type { BaseToast } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseToast>(), {
+  hasActiveShortcut: true,
   hasClose: true,
   id: '',
   status: 'info',
@@ -9,21 +10,21 @@ const props = withDefaults(defineProps<BaseToast>(), {
 })
 
 const emit = defineEmits<{
-  action: [event: MouseEvent, toast: BaseToast]
-  close: [event: MouseEvent, toast: BaseToast]
+  action: [event: KeyboardEvent | MouseEvent, toast: BaseToast]
+  close: [event: KeyboardEvent | MouseEvent, toast: BaseToast]
 }>()
 
 const { getIcon } = useLayerIcons()
 
 function onAction(event: KeyboardEvent | MouseEvent) {
   if (props.action) {
-    emit('action', event as MouseEvent, props)
+    emit('action', event, props)
   }
 }
 
 function onClose(event: KeyboardEvent | MouseEvent) {
   if (props.hasClose) {
-    emit('close', event as MouseEvent, props)
+    emit('close', event, props)
   }
 }
 </script>
@@ -46,7 +47,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
     <button
       v-if="action"
-      class="ml-1.5 min-h-6 inline-flex items-center justify-center 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-1.5 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="{
         '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',
@@ -64,6 +65,12 @@ function onClose(event: KeyboardEvent | MouseEvent) {
         :text="action.label"
         uppercase
       />
+
+      <BaseShortcut
+        :active="hasActiveShortcut"
+        :shortcut="action.shortcut ?? 'Enter'"
+        @trigger="onAction"
+      />
     </button>
 
     <template v-if="hasClose">

package/app/components/fields/FieldSelect.vue

@@ -267,7 +267,7 @@ function selectOption(event: MouseEvent, value: string) {
           <BaseIcon
             v-if="caret"
             class="ml-2 flex-initial"
-            :class="{ 'rotate-180 transform': opened }"
+            :class="{ 'rotate-180': opened }"
             color="gray"
             :icon="getIcon('arrowDown')"
           />
@@ -344,7 +344,7 @@ function selectOption(event: MouseEvent, value: string) {
               <div
                 v-for="option in column.options"
                 :key="option.value"
-                class="group flex cursor-pointer items-center outline-none"
+                class="flex cursor-pointer items-center outline-none"
                 :class="{
                   'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
                   'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,

package/app/components/layout/LayoutToasts.vue

@@ -2,13 +2,17 @@
 const { fadeInUp } = useMotion()
 const toasts = useToasts()
 
-async function onToastAction(_event: MouseEvent, toast: BaseToast) {
+const activeShortcutToastId = computed(() => {
+  return [...toasts.toasts.value].reverse().find(item => item.action)?.id
+})
+
+async function onToastAction(_event: KeyboardEvent | MouseEvent, toast: BaseToast) {
   toasts.closeToast(toast.id)
 
   await toast.action?.onClick()
 }
 
-function onToastClose(_event: MouseEvent, toast: BaseToast) {
+function onToastClose(_event: KeyboardEvent | MouseEvent, toast: BaseToast) {
   toasts.closeToast(toast.id)
 }
 </script>
@@ -27,6 +31,7 @@ function onToastClose(_event: MouseEvent, toast: BaseToast) {
           :id="toast.id"
           :key="toast.id"
           :action="toast.action"
+          :has-active-shortcut="toast.id === activeShortcutToastId"
           :status="toast.status"
           :text="toast.text"
           @action="onToastAction"

package/app/composables/useLayerIcons.ts

@@ -21,6 +21,7 @@ const icons = {
   closeCircle: 'hugeicons:cancel-circle',
   default: 'hugeicons:help-circle',
   drag: 'mdi:drag-horizontal-variant',
+  enter: 'mdi:keyboard-return',
   exclamationCircle: 'hugeicons:alert-circle',
   infoCircle: 'hugeicons:information-circle',
   plus: 'hugeicons:add-01',

package/app/types/bases.d.ts

@@ -275,6 +275,11 @@ export type BaseQuoteBackground = 'gray' | 'gray-light' | 'white'
 
 export type BaseQuoteSize = 'base' | 'sm' | 'xs'
 
+export interface BaseShortcut {
+  active?: boolean
+  shortcut?: string
+}
+
 export type BaseSize
   = | '2xl'
     | '2xs'
@@ -365,6 +370,7 @@ export type BaseTextText = string | {
 
 export interface BaseToast {
   action?: BaseToastAction
+  hasActiveShortcut?: boolean
   hasClose?: boolean
   id: string
   status?: BaseStatus
@@ -374,4 +380,5 @@ export interface BaseToast {
 export interface BaseToastAction {
   label: BaseTextText
   onClick: () => Promise<void> | void
+  shortcut?: string
 }

package/app/types/global.d.ts

@@ -45,6 +45,7 @@ declare global {
   type BaseQuote = import('./bases').BaseQuote
   type BaseQuoteBackground = import('./bases').BaseQuoteBackground
   type BaseQuoteSize = import('./bases').BaseQuoteSize
+  type BaseShortcut = import('./bases').BaseShortcut
   type BaseSize = import('./bases').BaseSize
   type BaseSpinner = import('./bases').BaseSpinner
   type BaseStatus = import('./bases').BaseStatus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.35",
+  "version": "1.4.37",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -18,32 +18,32 @@
     "uno.config.ts"
   ],
   "dependencies": {
-    "@capacitor/preferences": "8.0.0",
-    "@nuxt/icon": "2.1.1",
+    "@capacitor/preferences": "8.0.1",
+    "@nuxt/icon": "2.2.3",
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "3.5.2",
-    "@nuxtjs/i18n": "10.2.1",
+    "@nuxtjs/i18n": "10.4.0",
     "@nuxtjs/plausible": "2.0.1",
     "@nuxtjs/robots": "5.6.7",
     "@nuxtjs/sitemap": "7.5.0",
     "@nuxtjs/storybook": "9.0.1",
     "@pinia/nuxt": "0.11.3",
     "@unhead/vue": "2.0.19",
-    "@unocss/nuxt": "66.5.10",
-    "@unocss/reset": "66.5.10",
+    "@unocss/nuxt": "66.7.0",
+    "@unocss/reset": "66.7.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/components": "14.1.0",
-    "@vueuse/core": "14.1.0",
-    "@vueuse/nuxt": "14.1.0",
+    "@vueuse/components": "14.3.0",
+    "@vueuse/core": "14.3.0",
+    "@vueuse/nuxt": "14.3.0",
     "chartist": "1.5.0",
     "floating-vue": "5.2.2",
     "motion-v": "1.7.4",
     "numbro": "2.5.0",
     "snarkdown": "2.0.0",
     "storybook": "9.0.5",
-    "unocss": "66.5.10",
-    "vue": "3.5.26",
+    "unocss": "66.7.0",
+    "vue": "3.5.35",
     "vue-router": "4.6.4"
   },
   "devDependencies": {