@saasmakers/ui 1.4.35 → 1.4.36

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/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.36",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",