daisy-ui-kit 5.0.0-pre.21 → 5.0.0-pre.25

package/app/composables/use-toast.ts

@@ -0,0 +1,345 @@
+import type { Ref } from 'vue'
+import { computed, reactive, ref, toRef } from 'vue'
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning' | string
+
+export type ToastPosition =
+  | 'top-start'
+  | 'top-center'
+  | 'top-end'
+  | 'middle-start'
+  | 'middle-center'
+  | 'middle-end'
+  | 'bottom-start'
+  | 'bottom-center'
+  | 'bottom-end'
+
+export type ToastStatus = 'pending' | 'success' | 'error' | 'info' | 'warning' | 'default'
+
+export interface Toast {
+  id: number
+  message: string
+  name?: string // toast channel name, optional but always set by logic
+  type?: ToastType
+  duration?: number
+  position: ToastPosition
+  countdown?: number
+  status?: ToastStatus
+  progress?: number // 0-1 for progress bar
+  promiseId?: string // for async/promise support
+  ariaLive?: 'polite' | 'assertive' // accessibility
+  [key: string]: any
+}
+
+/**
+ * State for a single toast channel (internal use)
+ */
+export interface ToastChannelState {
+  toasts: Ref<Toast[]>
+  toastQueue: Toast[]
+  toastLimit: number | null
+}
+
+let globalToastChannels: Ref<Record<string, ToastChannelState & { defaults?: Partial<Toast> }>> | null = null
+let globalNextToastId: Ref<number> | null = null
+
+function getGlobalToastChannels() {
+  if (!globalToastChannels) {
+    globalToastChannels = ref({})
+  }
+  return globalToastChannels
+}
+function getGlobalNextToastId() {
+  if (!globalNextToastId) {
+    globalNextToastId = ref(1)
+  }
+  return globalNextToastId
+}
+
+function getOrCreateChannel(name: string, defaults?: Partial<Toast>, limit?: number | null) {
+  const channels = getGlobalToastChannels().value
+  if (!channels[name]) {
+    channels[name] = {
+      toasts: ref<Toast[]>([]),
+      toastQueue: [],
+      toastLimit: typeof limit === 'number' ? limit : null,
+      defaults,
+    }
+  }
+  return toRef(channels[name])
+}
+
+/**
+ * Clear all toast queues for all channels (useful for logout or channel switch)
+ */
+export function clearAllToastQueues() {
+  const channels = getGlobalToastChannels().value
+  Object.values(channels).forEach(channel => {
+    channel.toastQueue.length = 0
+  })
+}
+
+/**
+ * Global toast notification composable supporting named channels.
+ *
+ * - Each toast has an optional `name` property (defaults to 'default').
+ * - All toast state (toasts, queue, limit) is isolated per channel.
+ * - UI and logic can independently manage/display different channels.
+ * - Defensive dev warnings if name is missing/invalid.
+ *
+ * Example usage:
+ *   const { toasts, addToast } = useToast({ name: 'admin' })
+ *   addToast({ message: 'Hi', name: 'admin' })
+ *   // In UI: <Toast name="admin" />
+ */
+/**
+ * Options for useToast composable.
+ * - name: channel name (default: 'default')
+ * - defaults: default toast settings for this channel (merged into each toast)
+ */
+export interface UseToastOptions {
+  name?: string
+  defaults?: Partial<Toast>
+  limit?: number // per-channel toast limit
+}
+
+/**
+ * Global toast notification composable supporting named channels and customizable defaults.
+ *
+ * - Each toast has an optional `name` property (defaults to 'default').
+ * - All toast state (toasts, queue, limit) is isolated per channel.
+ * - UI and logic can independently manage/display different channels.
+ * - Defensive dev warnings if name is missing/invalid.
+ * - You can provide `defaults` to set default toast settings for all toasts in this channel.
+ *
+ * Example usage:
+ *   const { toasts, addToast } = useToast({ name: 'admin', defaults: { duration: 6000, type: 'info' } })
+ *   addToast({ message: 'Hi' }) // will use defaults
+ *   // In UI: <Toast name="admin" />
+ */
+function normalizeToast(toast: any): Toast & { countdown: number; originalDuration: number; intervalId?: number } {
+  if (toast.originalDuration == null) {
+    toast.originalDuration = toast.duration ?? 0
+  }
+  if (toast.countdown == null) {
+    toast.countdown = toast.originalDuration
+  }
+  if (typeof toast.intervalId === 'undefined') {
+    toast.intervalId = undefined
+  }
+  return toast as Toast & { countdown: number; originalDuration: number; intervalId?: number }
+}
+
+export function useToast(options?: UseToastOptions) {
+  const name = options?.name?.trim() || 'default'
+  const defaults = options?.defaults || {}
+  const limit = typeof options?.limit === 'number' ? options.limit : null
+
+  // Always get or create the channel (init only once)
+  const channel = getOrCreateChannel(name, defaults, limit)
+
+  function addToast(
+    toast: { message: string; position?: ToastPosition; name?: string } & Partial<Omit<Toast, 'id' | 'name'>>,
+  ) {
+    const toastName = toast.name?.trim() || name
+    const nextToastIdRef = getGlobalNextToastId()
+    // Always get or create the target channel for this toast, using the correct limit if provided
+    const channelLimit = typeof options?.limit === 'number' ? options.limit : null
+    const channel = getOrCreateChannel(toastName, defaults, channelLimit)
+    const merged = { ...channel.value.defaults, ...defaults, ...toast }
+    const position = merged.position ?? 'bottom-center'
+    const duration = merged.duration ?? 0
+    const status = merged.status ?? 'default'
+    if (import.meta.env.NODE_ENV !== 'production' && !toastName) {
+      console.warn('[addToast] Toast channel name is empty or invalid. Falling back to "default".')
+    }
+    const id = nextToastIdRef.value++
+    const newToast = normalizeToast(
+      reactive({
+        id,
+        ...merged,
+        name: toastName,
+        position,
+        countdown: duration,
+        originalDuration: duration,
+        status,
+        progress: typeof merged.progress === 'number' ? merged.progress : undefined,
+        ariaLive: merged.ariaLive ?? 'polite',
+        intervalId: undefined as number | undefined,
+      }),
+    )
+
+    // If limit is set and reached, queue the toast
+    if (channel.value.toastLimit && channel.value.toasts.length >= channel.value.toastLimit) {
+      ;(channel.value.toastQueue ??= []).push(newToast)
+      return id
+    }
+    channel.value.toasts.push(newToast)
+    // Ensure timer always starts for visible toasts
+    if (channel.value.toasts.includes(newToast)) {
+      startToastTimer(newToast)
+    }
+    return id
+  }
+
+  function removeToast(id: number) {
+    const idx = channel.value.toasts.findIndex(t => t.id === id)
+    if (idx !== -1) {
+      // Defensive: clear countdown timer if present
+      const toast = channel.value.toasts[idx] as Toast & { intervalId?: number }
+      if (toast.intervalId) {
+        clearInterval(toast.intervalId)
+      }
+      channel.value.toasts.splice(idx, 1)
+      // If queue exists, pop next toast
+      if (channel.value.toastLimit && (channel.value.toastQueue?.length ?? 0) > 0) {
+        const next = channel.value.toastQueue!.shift()
+        if (next) {
+          const norm = normalizeToast(next)
+          channel.value.toasts.push(norm)
+          // Ensure timer always starts for visible toasts
+          if (channel.value.toasts.includes(norm)) {
+            startToastTimer(norm)
+          }
+        }
+      }
+    }
+  }
+
+  function clearToasts() {
+    channel.value.toasts = []
+    if (channel.value.toastQueue) {
+      channel.value.toastQueue.length = 0
+    }
+  }
+
+  /**
+   * Update or replace a toast by id
+   */
+  function updateToast(id: number, updates: Partial<Toast>) {
+    const toast = channel.value.toasts.find(t => t.id === id)
+    if (toast) {
+      Object.assign(toast, updates)
+      normalizeToast(toast)
+      // If updating countdown/duration, recalculate progress
+      if (typeof toast.countdown === 'number' && typeof toast.duration === 'number' && toast.duration > 0) {
+        toast.progress = Math.max(0, toast.countdown / toast.duration)
+      }
+    }
+  }
+
+  /**
+   * Show a toast for the duration of a promise
+   * Sets status to 'pending', then 'success' or 'error' on resolve/reject
+   */
+  function toastPromise<T>(
+    promise: Promise<T>,
+    options: {
+      pending: Omit<Toast, 'id'>
+      success: Omit<Toast, 'id'>
+      error: Omit<Toast, 'id'>
+      name?: string
+    },
+  ): Promise<T> {
+    const toastName = options.name?.trim() || name
+    if (import.meta.env.NODE_ENV !== 'production' && !toastName) {
+      console.warn('[toastPromise] Toast channel name is empty or invalid. Falling back to "default".')
+    }
+    const promiseId = `promise-${Date.now()}-${Math.random()}`
+    const pendingId = addToast({
+      ...options.pending,
+      status: 'pending',
+      promiseId,
+      message: options.pending.message,
+      name: toastName,
+    })
+    return promise.then(
+      result => {
+        updateToast(pendingId, {
+          ...options.success,
+          status: 'success',
+          promiseId,
+          message: options.success.message,
+          name: toastName,
+        })
+        return result
+      },
+      err => {
+        updateToast(pendingId, {
+          ...options.error,
+          status: 'error',
+          promiseId,
+          message: options.error.message,
+          name: toastName,
+        })
+        throw err
+      },
+    )
+  }
+
+  /**
+   * Set a maximum number of visible toasts (queue extras)
+   */
+  function setToastLimit(limit: number) {
+    channel.value.toastLimit = limit
+    if (channel.value.toastLimit) {
+      // If over limit, move extras to queue
+      while (channel.value.toasts.length > channel.value.toastLimit) {
+        const removed = channel.value.toasts.pop()
+        if (removed) {
+          // Stop timer for toast leaving visible list
+          if (removed.intervalId) {
+            clearInterval(removed.intervalId)
+            removed.intervalId = undefined
+          }
+          ;(channel.value.toastQueue ??= []).unshift(removed)
+        }
+      }
+      // If under limit and queue has items, fill up
+      while (channel.value.toasts.length < channel.value.toastLimit && (channel.value.toastQueue?.length ?? 0) > 0) {
+        const next = channel.value.toastQueue!.shift()
+        if (next) {
+          const norm = normalizeToast(next)
+          channel.value.toasts.push(norm)
+          // Ensure timer always starts for visible toasts
+          if (channel.value.toasts.includes(norm)) {
+            startToastTimer(norm)
+          }
+        }
+      }
+    }
+  }
+
+  function startToastTimer(
+    toast: Toast & { countdown: number; originalDuration: number; intervalId?: number; startTime?: number },
+  ) {
+    if (toast.originalDuration > 0) {
+      if (toast.intervalId) {
+        clearInterval(toast.intervalId)
+      }
+      const start = Date.now()
+      toast.startTime = start
+
+      toast.intervalId = setInterval(() => {
+        const elapsed = Date.now() - (toast.startTime ?? start)
+        toast.countdown = Math.max(0, toast.originalDuration - elapsed)
+        toast.progress = Math.max(0, toast.countdown / toast.originalDuration)
+        if (toast.countdown <= 0) {
+          clearInterval(toast.intervalId)
+          removeToast(toast.id)
+        }
+      }, 16) as unknown as number // 60fps for smooth animation
+    }
+  }
+
+  return {
+    toasts: computed(() => channel.value.toasts),
+    addToast,
+    removeToast,
+    clearToasts,
+    updateToast,
+    toastPromise,
+    setToastLimit,
+    name,
+  }
+}

package/app/composables/useSearch.ts

@@ -0,0 +1,22 @@
+const isSearchOpen = ref(false)
+
+export function useSearch() {
+  function openSearch() {
+    isSearchOpen.value = true
+  }
+
+  function closeSearch() {
+    isSearchOpen.value = false
+  }
+
+  function toggleSearch() {
+    isSearchOpen.value = !isSearchOpen.value
+  }
+
+  return {
+    isSearchOpen,
+    openSearch,
+    closeSearch,
+    toggleSearch,
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.21",
+  "version": "5.0.0-pre.25",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {
@@ -14,12 +14,14 @@
       "require": "./nuxt.js"
     },
     "./components/*": "./app/components/*",
+    "./composables/*": "./app/composables/*",
     "./utils/*": "./app/utils/*"
   },
   "main": "./nuxt.js",
   "module": "./nuxt.js",
   "files": [
     "app/components/*.vue",
+    "app/composables/*",
     "app/utils/*",
     "nuxt.js"
   ],
@@ -58,7 +60,6 @@
     "@vueuse/integrations": "^13.1.0",
     "focus-trap": "^7.6.4",
     "nuxt": "^4.2.1",
-    "pikaday": "^1.8.2",
     "shiki": "^3.3.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
@@ -70,11 +71,14 @@
     "@stylistic/eslint-plugin": "^4.2.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.5",
-    "@types/pikaday": "^1.7.9",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
     "daisyui": "^5.5.5",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.5.1",
-    "tailwindcss": "^4.1.5"
+    "happy-dom": "^20.0.11",
+    "tailwindcss": "^4.1.5",
+    "vitest": "^4.0.16"
   }
 }