@saasmakers/ui 2.0.38 → 2.0.40

package/app/components/bases/BaseEmoji.vue

@@ -65,7 +65,7 @@ function onKeyDown(event: KeyboardEvent) {
         'h-2.5 w-2.5': size === '3xs',
         'h-3 w-3': size === '2xs',
         'h-3.5 w-3.5': size === 'xs',
-        'h-4 w-4': size === 'sm',
+        'h-4.5 w-4.5': size === 'sm',
         'h-5 w-5': size === 'base',
         'h-5.5 w-5.5': size === 'lg',
         'h-6 w-6': size === 'xl',

package/app/components/bases/BaseToast.vue

@@ -38,7 +38,15 @@ function onClose(event: KeyboardEvent | MouseEvent) {
     @keydown.space.prevent="onClose"
   >
     <div class="pointer-events-none flex items-center flex-initial">
+      <BaseEmoji
+        v-if="emoji"
+        :clickable="false"
+        :emoji="emoji"
+        size="sm"
+      />
+
       <BaseIcon
+        v-else
         size="xl"
         :status="status"
       />
@@ -79,7 +87,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
     <template v-if="hasClose">
       <BaseIcon
-        class="ml-2 text-gray-400 transition-colors flex-initial dark:text-gray-500"
+        class="ml-1.5 text-gray-400 transition-colors 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',

package/app/components/layout/LayoutBottomSheet.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LayoutBottomSheet } from '../../types/layout'
 
-withDefaults(defineProps<LayoutBottomSheet>(), { ariaLabel: undefined })
+const props = withDefaults(defineProps<LayoutBottomSheet>(), { 'aria-label': undefined })
 
 defineSlots<{
   default?: () => VNode[]
@@ -199,7 +199,7 @@ watch(visible, (isVisible) => {
         <div
           v-if="visible"
           ref="panelRef"
-          :aria-label="ariaLabel"
+          :aria-label="props['aria-label']"
           aria-modal="true"
           class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 app-text shadow-lg outline-none safe-bottom dark:bg-gray-900 dark:text-gray-100"
           :class="{

package/app/components/layout/LayoutModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LayoutModal } from '../../types/layout'
 
-withDefaults(defineProps<LayoutModal>(), { ariaLabel: undefined })
+const props = withDefaults(defineProps<LayoutModal>(), { 'aria-label': undefined })
 
 defineSlots<{
   default?: () => VNode[]
@@ -39,7 +39,7 @@ function onClose() {
         >
           <div
             ref="panelRef"
-            :aria-label="ariaLabel"
+            :aria-label="props['aria-label']"
             aria-modal="true"
             class="scroll-y-stable pointer-events-auto max-h-[85dvh] max-w-md w-full rounded-2xl bg-white p-5 text-gray-900 app-text shadow-lg outline-none dark:bg-gray-900 dark:text-gray-100"
             role="dialog"

package/app/components/layout/LayoutToasts.vue

@@ -30,6 +30,7 @@ function onToastClose(_event: KeyboardEvent | MouseEvent, toast: BaseToast) {
           :id="toast.id"
           :key="toast.id"
           :action="toast.action"
+          :emoji="toast.emoji"
           :has-active-shortcut="toast.id === activeShortcutToastId"
           :status="toast.status"
           :text="toast.text"

package/app/composables/useToasts.ts

@@ -19,6 +19,7 @@ export default function useToast() {
 
   const createToast = (params: {
     action?: BaseToastAction
+    emoji?: string
     i18nParams?: Record<string, number | string>
     message: string
     replaceAll?: boolean
@@ -36,8 +37,18 @@ export default function useToast() {
       ? params.message
       : nuxtApp.$i18n.t(`toasts.${params.message}`, params.i18nParams ?? {})
 
-    const fingerprint = getFingerprint(params.status, text, params.action?.label)
-    const existingToast = toasts.value.find(item => getFingerprint(item.status, item.text, item.action?.label) === fingerprint)
+    const fingerprint = getFingerprint({
+      actionLabel: params.action?.label,
+      emoji: params.emoji,
+      status: params.status,
+      text,
+    })
+    const existingToast = toasts.value.find(item => getFingerprint({
+      actionLabel: item.action?.label,
+      emoji: item.emoji,
+      status: item.status,
+      text: item.text,
+    }) === fingerprint)
 
     if (existingToast) {
       if (params.action) {
@@ -51,6 +62,7 @@ export default function useToast() {
 
     const toast: BaseToast = {
       action: params.action,
+      emoji: params.emoji,
       id: crypto.randomUUID(),
       status: params.status ?? 'success',
       text,
@@ -86,10 +98,28 @@ function closeToast(toastId: string) {
   toasts.value = toasts.value.filter(item => item.id !== toastId)
 }
 
-function getFingerprint(status: BaseStatus | undefined, text: BaseTextText, actionLabel?: BaseTextText): string {
-  const normalize = (t: BaseTextText) => typeof t === 'string' ? t : JSON.stringify(t)
+function getFingerprint(params: {
+  actionLabel?: BaseTextText
+  emoji?: string
+  status?: BaseStatus
+  text: BaseTextText
+}): string {
+  const normalize = (value: BaseTextText) => typeof value === 'string' ? value : JSON.stringify(value)
+
+  const parts = [
+    params.status ?? 'success',
+    normalize(params.text),
+  ]
+
+  if (params.actionLabel) {
+    parts.push(normalize(params.actionLabel))
+  }
+
+  if (params.emoji) {
+    parts.push(params.emoji)
+  }
 
-  return `${status ?? 'success'}:${normalize(text)}:${actionLabel ? normalize(actionLabel) : ''}`
+  return parts.join(':')
 }
 
 function scheduleDismiss(toastId: string, hasAction: boolean) {

package/app/types/bases.d.ts

@@ -398,6 +398,7 @@ export type BaseTextText = string | {
 
 export interface BaseToast {
   action?: BaseToastAction
+  emoji?: string
   hasActiveShortcut?: boolean
   hasClose?: boolean
   id: string

package/app/types/layout.d.ts

@@ -11,9 +11,9 @@ export interface LayoutBackdrop {
 }
 
 export interface LayoutBottomSheet {
-  ariaLabel?: string
+  'aria-label'?: string
 }
 
 export interface LayoutModal {
-  ariaLabel?: string
+  'aria-label'?: string
 }

package/package.json

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