daisy-ui-kit 5.0.0-pre.9 → 5.0.0

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/app/utils/drawer-utils.ts

@@ -14,19 +14,21 @@ export interface Drawers {
 export const drawers = reactive<Drawers>({})
 
 export function createDrawerState(name: string) {
-  const drawerState = drawers[name] || reactive<DrawerState>({
-    name,
-    isDrawerOpen: false,
-    openDrawer() {
-      drawerState.isDrawerOpen = true
-    },
-    closeDrawer() {
-      drawerState.isDrawerOpen = false
-    },
-    toggleDrawer() {
-      drawerState.isDrawerOpen = !drawerState.isDrawerOpen
-    },
-  })
+  const drawerState =
+    drawers[name] ||
+    reactive<DrawerState>({
+      name,
+      isDrawerOpen: false,
+      openDrawer() {
+        drawerState.isDrawerOpen = true
+      },
+      closeDrawer() {
+        drawerState.isDrawerOpen = false
+      },
+      toggleDrawer() {
+        drawerState.isDrawerOpen = !drawerState.isDrawerOpen
+      },
+    })
   drawers[name] = drawerState
   return drawerState
 }

package/app/utils/position-area.ts

@@ -0,0 +1,40 @@
+/**
+ * Maps placement values to CSS position-area values for anchor positioning
+ *
+ * Using span to align edges:
+ * - "bottom span-right" = below anchor, aligned to left edge (spans from left to center)
+ * - "bottom span-left" = below anchor, aligned to right edge (spans from center to right)
+ */
+export function getPositionArea(placement: string): string {
+  const positionMap: Record<string, string> = {
+    // Top positions
+    top: 'center top', // centered above
+    'top-start': 'top span-right', // above, left edge aligned
+    'top-end': 'top span-left', // above, right edge aligned
+
+    // Right positions
+    right: 'center right', // centered to right
+    'right-start': 'right span-bottom', // right, top edge aligned
+    'right-end': 'right span-top', // right, bottom edge aligned
+
+    // Bottom positions (most common for dropdowns)
+    bottom: 'center bottom', // centered below
+    'bottom-start': 'bottom span-right', // below, left edge aligned
+    'bottom-end': 'bottom span-left', // below, right edge aligned
+
+    // Left positions
+    left: 'center left', // centered to left
+    'left-start': 'left span-bottom', // left, top edge aligned
+    'left-end': 'left span-top', // left, bottom edge aligned
+  }
+
+  return positionMap[placement] || 'bottom span-right'
+}
+
+/**
+ * Gets position-try-fallbacks for automatic repositioning
+ */
+export function getPositionFallbacks(_placement: string): string {
+  // Simple flip fallbacks - flip to opposite side on same axis
+  return 'flip-block, flip-inline'
+}

package/nuxt.d.ts

@@ -0,0 +1,13 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+export interface ModuleOptions {
+  /**
+   * Prefix for all DaisyUI Kit components
+   * @default ''
+   */
+  prefix?: string
+}
+
+declare const module: NuxtModule<ModuleOptions>
+
+export default module

package/nuxt.js

@@ -1,28 +1,31 @@
-import { fileURLToPath } from 'node:url'
-import { defineNuxtModule } from '@nuxt/kit'
+import { addImports, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: 'daisy-ui-kit',
     configKey: 'daisy',
+    compatibility: {
+      nuxt: '>=3.0.0',
+    },
   },
   defaults: {
     prefix: '',
   },
   setup(moduleOptions, nuxt) {
     const { prefix } = moduleOptions
+    const { resolve } = createResolver(import.meta.url)
 
-    nuxt.hook('components:dirs', (dirs) => {
+    nuxt.hook('components:dirs', dirs => {
       dirs.push({
-        path: fileURLToPath(new URL('./app/components', import.meta.url)),
+        path: resolve('./app/components'),
         prefix,
       })
     })
 
-    nuxt.hook('composables:dirs', (dirs) => {
-      dirs.push({
-        path: fileURLToPath(new URL('./app/composables-docs', import.meta.url)),
-      })
-    })
+    addImports([
+      { name: 'useCalendar', from: resolve('./app/composables/use-calendar') },
+      { name: 'useDaisyTheme', from: resolve('./app/composables/use-daisy-theme') },
+      { name: 'useToast', from: resolve('./app/composables/use-toast') },
+    ])
   },
 })

package/package.json

@@ -1,63 +1,52 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.9",
-  "packageManager": "pnpm@10.10.0",
-  "main": "./nuxt.js",
-  "module": "./nuxt.js",
+  "version": "5.0.0",
+  "author": "feathers.dev",
   "exports": {
     ".": {
+      "types": "./nuxt.d.ts",
       "import": "./nuxt.js",
       "require": "./nuxt.js"
     },
     "./nuxt": {
+      "types": "./nuxt.d.ts",
       "import": "./nuxt.js",
       "require": "./nuxt.js"
     },
     "./components/*": "./app/components/*",
+    "./composables/*": "./app/composables/*",
     "./utils/*": "./app/utils/*"
   },
+  "main": "./nuxt.js",
+  "module": "./nuxt.js",
+  "types": "./nuxt.d.ts",
   "files": [
     "app/components/*.vue",
+    "app/composables/*",
     "app/utils/*",
-    "nuxt.js"
+    "nuxt.js",
+    "nuxt.d.ts"
   ],
-  "scripts": {
-    "import-d1-dumps": "./import-d1-dumps.sh",
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "publish": "git push origin --tags && git push origin",
-    "release:pre": "npm version prerelease && npm publish --tag pre",
-    "release:patch": "npm version patch && npm publish",
-    "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish",
-    "deploy": "pnpm run build && npx wrangler pages deploy dist"
-  },
   "peerDependencies": {
     "@vueuse/core": "^13.1.0",
     "daisyui": "^5"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.6",
     "@nuxt/content": "3.5.1",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
-    "@nuxt/kit": "^3.17.2",
+    "@nuxt/kit": "^4.2.1",
     "@nuxt/scripts": "0.11.6",
     "@nuxt/test-utils": "3.18.0",
+    "@oddbird/css-anchor-positioning": "^0.7.0",
     "@unhead/vue": "^2.0.8",
     "@vueuse/core": "^13.1.0",
     "@vueuse/integrations": "^13.1.0",
     "focus-trap": "^7.6.4",
-    "nuxt": "^3.17.2",
-    "pikaday": "^1.8.2",
+    "nuxt": "^4.2.1",
     "shiki": "^3.3.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
@@ -69,9 +58,31 @@
     "@stylistic/eslint-plugin": "^4.2.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.5",
-    "@types/pikaday": "^1.7.9",
-    "daisyui": "^5.0.35",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "daisyui": "^5.5.5",
     "eslint": "^9.26.0",
-    "tailwindcss": "^4.1.5"
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
+    "happy-dom": "^20.0.11",
+    "tailwindcss": "^4.1.5",
+    "vitest": "^4.0.16"
+  },
+  "scripts": {
+    "import-d1-dumps": "./import-d1-dumps.sh",
+    "prebuild": "cp CHANGELOG.md content/docs/changelog.md",
+    "build": "NODE_OPTIONS='--max-old-space-size=7168' nuxt build",
+    "predev": "cp CHANGELOG.md content/docs/changelog.md",
+    "dev": "nuxt dev",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "release:pre": "node scripts/release.js prerelease",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major",
+    "deploy": "pnpm run build && npx wrangler deploy"
   }
-}
+}

package/app/utils/random-string.ts

@@ -1,19 +0,0 @@
-/**
- * Generate a random string of `length` characters
- *
- * Usage:
- * const myString = randomString(15);  // This will give you a random string of 15 characters
- * @param length The length of the string to generate
- * @returns A random string of `length` characters
- */
-export function randomString(length: number = 10): string {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  let result = ''
-
-  for (let i = 0; i < length; i++) {
-    const randomIndex = Math.floor(Math.random() * characters.length)
-    result += characters[randomIndex]
-  }
-
-  return result
-}