@saasmakers/ui 1.4.34 → 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

@@ -1,102 +1,100 @@
 import type { Directive } from 'vue'
-import type { LayerIconIcon as LayerIconIconType, LayerIconValue as LayerIconValueType } from '../composables/useLayerIcons'
-import type * as Bases from './bases'
-import type * as Fields from './fields'
 
 declare global {
   // Bases
-  type BaseAlert = Bases.BaseAlert
-  type BaseAlignment = Bases.BaseAlignment
-
-  type BaseAvatar = Bases.BaseAvatar
-  type BaseBackground = Bases.BaseBackground
-  type BaseBordered = Bases.BaseBordered
-  type BaseBorderedColor = Bases.BaseBorderedColor
-  type BaseButton = Bases.BaseButton
-  type BaseButtonRounded = Bases.BaseButtonRounded
-  type BaseButtonSize = Bases.BaseButtonSize
-  type BaseButtonType = Bases.BaseButtonType
-  type BaseCharacter = Bases.BaseCharacter
-  type BaseCharacterCharacter = Bases.BaseCharacterCharacter
-  type BaseCharacterSize = Bases.BaseCharacterSize
-  type BaseChart = Bases.BaseChart
-  type BaseChartType = Bases.BaseChartType
-  type BaseColor = Bases.BaseColor
-  type BaseDivider = Bases.BaseDivider
-  type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
-  type BaseDividerNavigateDirection = Bases.BaseDividerNavigateDirection
-  type BaseDividerSize = Bases.BaseDividerSize
-  type BaseEmoji = Bases.BaseEmoji
-  type BaseHeading = Bases.BaseHeading
-  type BaseHeadingAlignment = Bases.BaseHeadingAlignment
-  type BaseHeadingSize = Bases.BaseHeadingSize
-  type BaseHeadingTag = Bases.BaseHeadingTag
-  type BaseIcon = Bases.BaseIcon
-  type BaseMessage = Bases.BaseMessage
-  type BaseMetric = Bases.BaseMetric
-  type BaseMetricAlignment = Bases.BaseMetricAlignment
-  type BaseMetricPerformance = Bases.BaseMetricPerformance
-  type BaseMetricSize = Bases.BaseMetricSize
-  type BaseOverlay = Bases.BaseOverlay
-  type BaseOverlayOpacity = Bases.BaseOverlayOpacity
-  type BaseOverlayPosition = Bases.BaseOverlayPosition
-  type BaseParagraph = Bases.BaseParagraph
-  type BaseParagraphAlignment = Bases.BaseParagraphAlignment
-  type BaseParagraphSize = Bases.BaseParagraphSize
-  type BasePower = Bases.BasePower
-  type BasePowerPower = Bases.BasePowerPower
-  type BasePowerSize = Bases.BasePowerSize
-  type BaseQuote = Bases.BaseQuote
-  type BaseQuoteBackground = Bases.BaseQuoteBackground
-  type BaseQuoteSize = Bases.BaseQuoteSize
-  type BaseSize = Bases.BaseSize
-  type BaseSpinner = Bases.BaseSpinner
-  type BaseStatus = Bases.BaseStatus
-  type BaseTag = Bases.BaseTag
-  type BaseTags = Bases.BaseTags
-  type BaseTagSize = Bases.BaseTagSize
-  type BaseText = Bases.BaseText
-  type BaseTextText = Bases.BaseTextText
-  type BaseToast = Bases.BaseToast
-  type BaseToastAction = Bases.BaseToastAction
+  type BaseAlert = import('./bases').BaseAlert
+  type BaseAlignment = import('./bases').BaseAlignment
+  type BaseAvatar = import('./bases').BaseAvatar
+  type BaseBackground = import('./bases').BaseBackground
+  type BaseBordered = import('./bases').BaseBordered
+  type BaseBorderedColor = import('./bases').BaseBorderedColor
+  type BaseButton = import('./bases').BaseButton
+  type BaseButtonRounded = import('./bases').BaseButtonRounded
+  type BaseButtonSize = import('./bases').BaseButtonSize
+  type BaseButtonType = import('./bases').BaseButtonType
+  type BaseCharacter = import('./bases').BaseCharacter
+  type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
+  type BaseCharacterSize = import('./bases').BaseCharacterSize
+  type BaseChart = import('./bases').BaseChart
+  type BaseChartType = import('./bases').BaseChartType
+  type BaseColor = import('./bases').BaseColor
+  type BaseDivider = import('./bases').BaseDivider
+  type BaseDividerBorderStyle = import('./bases').BaseDividerBorderStyle
+  type BaseDividerNavigateDirection = import('./bases').BaseDividerNavigateDirection
+  type BaseDividerSize = import('./bases').BaseDividerSize
+  type BaseEmoji = import('./bases').BaseEmoji
+  type BaseHeading = import('./bases').BaseHeading
+  type BaseHeadingAlignment = import('./bases').BaseHeadingAlignment
+  type BaseHeadingSize = import('./bases').BaseHeadingSize
+  type BaseHeadingTag = import('./bases').BaseHeadingTag
+  type BaseIcon = import('./bases').BaseIcon
+  type BaseMessage = import('./bases').BaseMessage
+  type BaseMetric = import('./bases').BaseMetric
+  type BaseMetricAlignment = import('./bases').BaseMetricAlignment
+  type BaseMetricPerformance = import('./bases').BaseMetricPerformance
+  type BaseMetricSize = import('./bases').BaseMetricSize
+  type BaseOverlay = import('./bases').BaseOverlay
+  type BaseOverlayOpacity = import('./bases').BaseOverlayOpacity
+  type BaseOverlayPosition = import('./bases').BaseOverlayPosition
+  type BaseParagraph = import('./bases').BaseParagraph
+  type BaseParagraphAlignment = import('./bases').BaseParagraphAlignment
+  type BaseParagraphSize = import('./bases').BaseParagraphSize
+  type BasePower = import('./bases').BasePower
+  type BasePowerPower = import('./bases').BasePowerPower
+  type BasePowerSize = import('./bases').BasePowerSize
+  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
+  type BaseTag = import('./bases').BaseTag
+  type BaseTags = import('./bases').BaseTags
+  type BaseTagSize = import('./bases').BaseTagSize
+  type BaseText = import('./bases').BaseText
+  type BaseTextText = import('./bases').BaseTextText
+  type BaseToast = import('./bases').BaseToast
+  type BaseToastAction = import('./bases').BaseToastAction
 
   // Libraries
   type ChartistBarChartData = import('chartist').BarChartData
   type ChartistLineChartData = import('chartist').LineChartData
-
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
+
   // Fields
-  type FieldAvatar = Fields.FieldAvatar
-  type FieldBackground = Fields.FieldBackground
-  type FieldCheckbox = Fields.FieldCheckbox
-  type FieldDays = Fields.FieldDays
-  type FieldEmojis = Fields.FieldEmojis
-  type FieldInput = Fields.FieldInput
-  type FieldInputAlignment = Fields.FieldInputAlignment
-  type FieldInputBorder = Fields.FieldInputBorder
-  type FieldInputType = Fields.FieldInputType
-  type FieldLabel = Fields.FieldLabel
-  type FieldMessage = Fields.FieldMessage
-  type FieldSelect = Fields.FieldSelect
-  type FieldSelectBorder = Fields.FieldSelectBorder
-  type FieldSelectColumn = Fields.FieldSelectColumn
-  type FieldSelectDirection = Fields.FieldSelectDirection
-  type FieldSelectMaxHeight = Fields.FieldSelectMaxHeight
-  type FieldSelectOption = Fields.FieldSelectOption
-  type FieldSize = Fields.FieldSize
-  type FieldStatus = Fields.FieldStatus
-  type FieldTabs = Fields.FieldTabs
-  type FieldTabsAction = Fields.FieldTabsAction
-  type FieldTabsTab = Fields.FieldTabsTab
-  type FieldTabsTheme = Fields.FieldTabsTheme
+  type FieldAvatar = import('./fields').FieldAvatar
+  type FieldBackground = import('./fields').FieldBackground
+  type FieldCheckbox = import('./fields').FieldCheckbox
+  type FieldDays = import('./fields').FieldDays
+  type FieldEmojis = import('./fields').FieldEmojis
+  type FieldInput = import('./fields').FieldInput
+  type FieldInputAlignment = import('./fields').FieldInputAlignment
+  type FieldInputBorder = import('./fields').FieldInputBorder
+  type FieldInputType = import('./fields').FieldInputType
+  type FieldLabel = import('./fields').FieldLabel
+  type FieldMessage = import('./fields').FieldMessage
+  type FieldSelect = import('./fields').FieldSelect
+  type FieldSelectBorder = import('./fields').FieldSelectBorder
+  type FieldSelectColumn = import('./fields').FieldSelectColumn
+  type FieldSelectDirection = import('./fields').FieldSelectDirection
+  type FieldSelectMaxHeight = import('./fields').FieldSelectMaxHeight
+  type FieldSelectOption = import('./fields').FieldSelectOption
+  type FieldSize = import('./fields').FieldSize
+  type FieldStatus = import('./fields').FieldStatus
+  type FieldTabs = import('./fields').FieldTabs
+  type FieldTabsAction = import('./fields').FieldTabsAction
+  type FieldTabsTab = import('./fields').FieldTabsTab
+  type FieldTabsTheme = import('./fields').FieldTabsTheme
+  type FieldTextarea = import('./fields').FieldTextarea
+  type FieldTime = import('./fields').FieldTime
 
-  type FieldTextarea = Fields.FieldTextarea
-  type FieldTime = Fields.FieldTime
   // Project
-  type LayerIconIcon = LayerIconIconType
-  type LayerIconValue = LayerIconValueType
+  type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
+  type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue
   type Meta<T> = import('@nuxtjs/storybook').Meta<T>
+
   // Navigator
   interface Navigator {
     userAgentData?: {
@@ -108,9 +106,9 @@ declare global {
       platform?: string
     }
   }
+
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
   type StoryObj<T> = import('@nuxtjs/storybook').StoryObj<T>
-
   type VuelidateValidation = import('@vuelidate/core').BaseValidation
 }
 

package/package.json

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