@saasmakers/ui 1.3.9 → 1.4.1

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

@@ -27,3 +27,16 @@ export const Default: StoryObj<typeof BaseToast> = {
     text: 'Toast message',
   } satisfies Partial<BaseToast>,
 }
+
+export const WithAction: StoryObj<typeof BaseToast> = {
+  args: {
+    action: {
+      label: 'Undo',
+      // eslint-disable-next-line no-console
+      onClick: () => console.log('action clicked'),
+    },
+    id: 'toast-2',
+    status: 'success',
+    text: 'Toast message',
+  } satisfies Partial<BaseToast>,
+}

package/app/components/bases/BaseToast.vue

@@ -9,11 +9,73 @@ const props = withDefaults(defineProps<BaseToast>(), {
 })
 
 const emit = defineEmits<{
+  action: [event: MouseEvent, toast: BaseToast]
   close: [event: MouseEvent, toast: BaseToast]
 }>()
 
 const { getIcon } = useLayerIcons()
 
+const actionPillClasses = computed(() => {
+  switch (props.status) {
+    case 'error':
+      return 'bg-red-600/20 text-red-400 hover:bg-red-600/30 focus-visible:ring-red-500 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25'
+    case 'info':
+      return 'bg-indigo-600/20 text-indigo-400 hover:bg-indigo-600/30 focus-visible:ring-indigo-500 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25'
+    case 'success':
+      return 'bg-green-600/20 text-green-400 hover:bg-green-600/30 focus-visible:ring-green-500 dark:bg-green-400/15 dark:text-green-400 dark:hover:bg-green-400/25'
+    case 'warning':
+      return 'bg-orange-600/20 text-orange-400 hover:bg-orange-600/30 focus-visible:ring-orange-500 dark:bg-orange-400/15 dark:text-orange-400 dark:hover:bg-orange-400/25'
+    default:
+      return ''
+  }
+})
+
+const closeHoverClasses = computed(() => {
+  switch (props.status) {
+    case 'error':
+      return 'hover:text-red-600 dark:hover:text-red-400'
+    case 'info':
+      return 'hover:text-indigo-600 dark:hover:text-indigo-400'
+    case 'success':
+      return 'hover:text-green-600 dark:hover:text-green-400'
+    case 'warning':
+      return 'hover:text-orange-600 dark:hover:text-orange-400'
+    default:
+      return ''
+  }
+})
+
+const isDismissibleByClick = computed(() => {
+  return props.hasClose && !props.action
+})
+
+const rootInteractiveBindings = computed(() => {
+  if (!isDismissibleByClick.value) {
+    return {}
+  }
+
+  return {
+    onClick: onClose,
+    onKeydown: (event: KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        if (event.key === ' ') {
+          event.preventDefault()
+        }
+
+        onClose(event)
+      }
+    },
+    role: 'button' as const,
+    tabindex: 0,
+  }
+})
+
+function onAction(event: KeyboardEvent | MouseEvent) {
+  if (props.action) {
+    emit('action', event as MouseEvent, props)
+  }
+}
+
 function onClose(event: KeyboardEvent | MouseEvent) {
   if (props.hasClose) {
     emit('close', event as MouseEvent, props)
@@ -23,13 +85,9 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
 <template>
   <div
-    class="group flex select-none items-center rounded-full bg-gray-900 px-3 py-2 text-base text-white font-normal dark:bg-gray-100 dark:text-black"
-    :class="{ 'cursor-pointer': hasClose }"
-    role="button"
-    tabindex="0"
-    @click="onClose"
-    @keydown.enter="onClose"
-    @keydown.space.prevent="onClose"
+    v-bind="rootInteractiveBindings"
+    class="group flex select-none items-center rounded-full bg-gray-900 px-3 py-2 text-base text-white font-normal dark:bg-gray-800 dark:text-gray-100 dark:ring-1 dark:ring-gray-700"
+    :class="{ 'cursor-pointer': isDismissibleByClick }"
   >
     <BaseIcon
       class="pointer-events-none flex-initial"
@@ -37,16 +95,46 @@ function onClose(event: KeyboardEvent | MouseEvent) {
       :text="text"
     />
 
+    <button
+      v-if="action"
+      class="ml-2 rounded-full px-2.5 py-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900 dark:focus-visible:ring-offset-gray-800"
+      :class="actionPillClasses"
+      type="button"
+      @click.stop="onAction"
+    >
+      <BaseText
+        bold
+        class="pointer-events-none"
+        no-wrap
+        :text="action.label"
+        uppercase
+      />
+    </button>
+
     <template v-if="hasClose">
-      <div class="ml-2 mr-1.5 h-5 border-l border-gray-700 flex-initial dark:border-gray-300" />
+      <div class="ml-2 mr-1.5 h-5 border-l border-gray-700 flex-initial dark:border-gray-600" />
+
+      <button
+        v-if="action"
+        class="cursor-pointer bg-transparent text-gray-500 flex-initial dark:text-gray-500"
+        :class="closeHoverClasses"
+        type="button"
+        @click.stop="onClose"
+      >
+        <BaseIcon
+          class="pointer-events-none"
+          :icon="getIcon('close')"
+        />
+      </button>
 
       <BaseIcon
+        v-else
         class="text-gray-500 flex-initial dark:text-gray-500"
         :class="{
           'group-hover:text-red-600 dark:group-hover:text-red-400': status === 'error',
           'group-hover:text-indigo-600 dark:group-hover:text-indigo-400': status === 'info',
+          'group-hover:text-green-600 dark:group-hover:text-green-400': status === 'success',
           'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
-          'group-hover:text-teal-600 dark:group-hover:text-teal-400': status === 'success',
         }"
         :icon="getIcon('close')"
       />

package/app/components/fields/FieldInput.vue

@@ -67,14 +67,11 @@ function focus() {
   }
 }
 
-function trimModelValue() {
+function onFieldBlur(event: FocusEvent) {
   if (props.trim) {
     modelValue.value = modelValue.value.toString().trim()
   }
-}
 
-function onFieldBlur(event: FocusEvent) {
-  trimModelValue()
   emit('blur', event)
 }
 
@@ -107,8 +104,11 @@ function onFieldKeyDown(event: KeyboardEvent) {
   }
 
   else if (event.key === 'Enter' && modelValue.value) {
-    trimModelValue()
-    emit('submit', event, (event.target as HTMLInputElement).value)
+    if (props.trim) {
+      modelValue.value = modelValue.value.toString().trim()
+    }
+
+    emit('submit', event, modelValue.value.toString())
   }
 
   else if (props.type === 'number' && [

package/app/components/layout/LayoutToasts.vue

@@ -2,6 +2,12 @@
 const { fadeInUp } = useMotion()
 const toasts = useToasts()
 
+async function onToastAction(_event: MouseEvent, toast: BaseToast) {
+  toasts.closeToast(toast.id)
+
+  await toast.action?.onClick()
+}
+
 function onToastClose(_event: MouseEvent, toast: BaseToast) {
   toasts.closeToast(toast.id)
 }
@@ -20,8 +26,10 @@ function onToastClose(_event: MouseEvent, toast: BaseToast) {
         <BaseToast
           :id="toast.id"
           :key="toast.id"
+          :action="toast.action"
           :status="toast.status"
           :text="toast.text"
+          @action="onToastAction"
           @close="onToastClose"
         />
       </Motion>

package/app/composables/useToasts.ts

@@ -17,9 +17,10 @@ export default function useToast() {
     }
   }
 
-  const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>) => {
+  const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>, action?: BaseToastAction) => {
     if (import.meta.client) {
       const toast: BaseToast = {
+        action,
         id: crypto.randomUUID(),
         status: status || 'success',
         text: message.includes(' ') ? message : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams || {}),
@@ -27,8 +28,8 @@ export default function useToast() {
 
       toasts.value.push(toast)
 
-      // Remove toast after 5 seconds
-      setTimeout(() => closeToast(toast.id), 5 * 1000)
+      // Give more time to interact when the toast offers an action
+      setTimeout(() => closeToast(toast.id), (action ? 8 : 5) * 1000)
     }
   }
 

package/app/types/bases.d.ts

@@ -358,8 +358,14 @@ export type BaseTextText = string | {
 }
 
 export interface BaseToast {
+  action?: BaseToastAction
   hasClose?: boolean
   id: string
   status?: BaseStatus
   text: BaseTextText
 }
+
+export interface BaseToastAction {
+  label: BaseTextText
+  onClick: () => Promise<void> | void
+}

package/app/types/global.d.ts

@@ -57,6 +57,8 @@ declare global {
   type BaseText = Bases.BaseText
   type BaseTextText = Bases.BaseTextText
   type BaseToast = Bases.BaseToast
+  type BaseToastAction = Bases.BaseToastAction
+
   // Libraries
   type ChartistBarChartData = import('chartist').BarChartData
   type ChartistLineChartData = import('chartist').LineChartData

package/package.json

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