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

package/app/components/Calendar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PikadayOptions } from 'pikaday'
 import { onMounted, ref } from 'vue'
-import { usePikaday } from '~/composables/use-pikaday'
+import { usePikaday } from '../composables/use-pikaday'
 import CalendarSkeleton from './CalendarSkeleton.vue'
 
 const props = defineProps<{

package/app/components/CalendarInput.vue

@@ -3,7 +3,7 @@ import type { PikadayOptions } from 'pikaday'
 import type { ComponentPublicInstance } from 'vue'
 import { onMounted, ref, watch } from 'vue'
 
-import { usePikaday } from '~/composables/use-pikaday'
+import { usePikaday } from '../composables/use-pikaday'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */

package/app/components/Toast.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Toast } from '~/composables/use-toast'
+import type { Toast } from '../composables/use-toast'
 import { computed } from 'vue'
-import { useToast } from '~/composables/use-toast'
+import { useToast } from '../composables/use-toast'
 
 // Explicit slot typing (Vue 3.4+ / Volar)
 interface ToastSlotProps {

package/app/composables/use-daisy-theme.ts

@@ -0,0 +1,131 @@
+import type { Ref } from 'vue'
+import { usePreferredDark } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+// Type for a theme object
+export interface DaisyThemeMeta {
+  theme: string
+  cssVars?: string
+  name?: string
+  [key: string]: any
+}
+
+export type DaisyThemeInput = string | DaisyThemeMeta
+
+interface DaisyThemeOptions {
+  themes: DaisyThemeInput[]
+  defaultTheme?: string
+}
+
+// Global state (client only)
+let globalThemes: Ref<DaisyThemeMeta[]> | null = null
+let globalTheme: Ref<string> | null = null
+
+function normalizeTheme(input: DaisyThemeInput): DaisyThemeMeta {
+  if (typeof input === 'string') {
+    return { theme: input }
+  }
+  return { ...input }
+}
+
+// Provide a default storage implementation (plain ref)
+function defaultStorage<T>(_: string, initial: T): Ref<T> {
+  return ref(initial) as Ref<T>
+}
+
+/**
+ * useDaisyTheme composable
+ * @param storage Optional. Ref factory for persistence (e.g., useCookie, useLocalStorage, or ref). Defaults to ref.
+ * @param options Optional. Theme options (themes, defaultTheme, etc.).
+ *
+ * Calling with arguments (in app.vue/root): initializes global state (client) or per-call state (server).
+ * Calling with no arguments (in any component): reuses global state (client) or per-call state (server).
+ */
+export function useDaisyTheme(storage?: <T>(key: string, initial: T) => Ref<T>, options?: DaisyThemeOptions) {
+  // On client, always use global state for reactivity across consumers
+  // On server, always use per-call state
+  const isClient = typeof window !== 'undefined'
+
+  // Only initialize global state if provided options (themes, etc.)
+  if (isClient && options) {
+    globalThemes = ref(options.themes?.map(normalizeTheme) ?? [])
+    globalTheme = null // reset theme so it will be re-initialized below
+  }
+
+  // Themes list
+  const themes = isClient
+    ? (globalThemes ??= ref(options?.themes?.map(normalizeTheme) ?? []))
+    : ref(options?.themes?.map(normalizeTheme) ?? [])
+
+  // Theme name (persisted)
+  const _storage = storage ?? defaultStorage
+  const theme = isClient
+    ? (globalTheme ??= _storage('theme', options?.defaultTheme ?? themes.value[0]?.theme ?? 'light'))
+    : _storage('theme', options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
+
+  // System dark mode
+  const preferredDark = usePreferredDark()
+
+  // Compute the effective theme for UI/DOM
+  const effectiveTheme = computed(() => {
+    if (theme.value === 'system') {
+      return preferredDark.value ? 'dark' : 'light'
+    }
+    return theme.value
+  })
+
+  // Set theme by name
+  function setTheme(name: string) {
+    if (themes.value.some(t => t.theme === name) || name === 'system') {
+      theme.value = name
+    }
+  }
+
+  // Cycle to next theme
+  function cycleTheme() {
+    const names = themes.value.map(t => t.theme)
+    if (!names.length) {
+      return // Guard: no themes
+    }
+    const idx = names.indexOf(theme.value)
+    const nextIdx = (idx + 1) % names.length
+    // Only set if defined (TypeScript safety)
+    if (typeof names[nextIdx] === 'string') {
+      setTheme(names[nextIdx]!)
+    }
+  }
+
+  // Register a new theme
+  function registerTheme(newTheme: DaisyThemeInput) {
+    const meta = normalizeTheme(newTheme)
+    if (!themes.value.some(t => t.theme === meta.theme)) {
+      themes.value.push(meta)
+    }
+  }
+
+  // Remove a theme by name
+  function removeTheme(name: string) {
+    const idx = themes.value.findIndex(t => t.theme === name)
+    if (idx !== -1) {
+      themes.value.splice(idx, 1)
+      // If current theme was removed, fallback to first
+      if (theme.value === name) {
+        theme.value = themes.value[0]?.theme ?? 'light'
+      }
+    }
+  }
+
+  // Get the current theme object
+  const themeInfo = computed(() => themes.value.find(t => t.theme === theme.value))
+
+  return {
+    themes,
+    theme,
+    effectiveTheme,
+    themeInfo,
+    setTheme,
+    cycleTheme,
+    registerTheme,
+    removeTheme,
+  }
+}

package/app/composables/use-pikaday.ts

@@ -0,0 +1,35 @@
+import type Pikaday from 'pikaday'
+import type { PikadayOptions } from 'pikaday'
+import { onBeforeUnmount, ref } from 'vue'
+
+export function usePikaday(
+  options: PikadayOptions,
+  onSelect: (date: Date) => void,
+  onOpen?: () => void,
+  onClose?: () => void,
+) {
+  const picker = ref<Pikaday | null>(null)
+
+  async function createPicker(fieldOrContainer: HTMLElement) {
+    const { default: PikadayLib } = await import('pikaday')
+    picker.value = new PikadayLib({
+      ...options,
+      field: options.bound !== false ? fieldOrContainer : undefined,
+      container: options.bound === false ? fieldOrContainer : undefined,
+      onSelect,
+      onOpen,
+      onClose,
+    })
+    return picker.value
+  }
+
+  onBeforeUnmount(() => {
+    picker.value?.destroy()
+    picker.value = null
+  })
+
+  return {
+    picker,
+    createPicker,
+  }
+}

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.24",
   "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"
   ],