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

package/app/components/CalendarInput.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { CalendarOptions } from '../composables/use-calendar'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useId, watch } from 'vue'
 import { useCalendar } from '../composables/use-calendar'
-import { randomString } from '../utils/random-string'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */
@@ -37,8 +36,9 @@ const emit = defineEmits<{
   (e: 'update:inputValue', v: string | null): void
 }>()
 
-const popoverId = `calendar-popover-${randomString()}`
-const anchorName = `--calendar-anchor-${randomString()}`
+const uniqueId = useId()
+const popoverId = `calendar-popover-${uniqueId}`
+const anchorName = `--calendar-anchor-${uniqueId}`
 const inputRef = ref<HTMLInputElement | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
 

package/app/components/Dock.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { provide, ref } from 'vue'
-import { randomString } from '../utils/random-string'
 
 const { size, xl, lg, md, sm, xs } = defineProps<{
   size?: string
@@ -15,16 +14,14 @@ const { size, xl, lg, md, sm, xs } = defineProps<{
 const activeItemId = ref<string | null>(null)
 const itemIds = ref<string[]>([])
 
-function registerItem() {
-  const itemId = randomString()
+function registerItem(itemId: string) {
   itemIds.value.push(itemId)
-  function unregister() {
+  return function unregister() {
     itemIds.value = itemIds.value.filter(id => id !== itemId)
     if (activeItemId.value === itemId) {
       activeItemId.value = null
     }
   }
-  return { id: itemId, unregister }
 }
 
 function setActiveItemId(itemId: string) {
@@ -33,7 +30,7 @@ function setActiveItemId(itemId: string) {
 
 export interface DockState {
   activeItemId: Ref<string | null>
-  registerItem: () => { id: string; unregister: () => void }
+  registerItem: (itemId: string) => () => void
   setActiveItemId: (itemId: string) => void
 }
 

package/app/components/DockItem.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { DockState } from './Dock.vue'
-import { inject, onUnmounted } from 'vue'
+import { inject, onUnmounted, useId } from 'vue'
 
 const { active } = defineProps<{
   active?: boolean
 }>()
 
+const itemId = useId()
 const { registerItem, setActiveItemId, activeItemId } = inject<DockState>('dockState')!
-const { id: itemId, unregister } = registerItem()
+const unregister = registerItem(itemId)
 
 onUnmounted(() => {
   unregister()

package/app/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useId } from '#imports'
+import { useId } from 'vue'
 import { useElementHover } from '@vueuse/core'
 import { onMounted, provide, ref, watch } from 'vue'
 

package/app/components/MenuExpand.vue

@@ -2,8 +2,7 @@
 import type { Ref } from 'vue'
 
 import { onClickOutside, useElementHover } from '@vueuse/core'
-import { onMounted, provide, ref } from 'vue'
-import { randomString } from '../utils/random-string'
+import { onMounted, provide, ref, useId } from 'vue'
 
 // Define the MenuExpandState interface
 export interface MenuExpandState {
@@ -16,12 +15,10 @@ export interface MenuExpandState {
 
 // Props with defaults
 const {
-  randomId = randomString(12),
   hover = false,
   delayLeave = 300,
   closeOnClickOutside = false,
 } = defineProps<{
-  randomId?: string
   hover?: boolean
   delayLeave?: number
   closeOnClickOutside?: boolean
@@ -31,8 +28,9 @@ const {
 const isOpen = defineModel('open', { default: false, type: Boolean })
 
 // Generate IDs for accessibility and targeting
-const wrapperId = `expand-wrapper-${randomId}`
-const id = `expand-${randomId}`
+const uniqueId = useId()
+const wrapperId = `expand-wrapper-${uniqueId}`
+const id = `expand-${uniqueId}`
 
 // Element reference for click outside detection
 const expandEl = ref()

package/app/components/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useId } from '#imports'
+import { useId } from 'vue'
 import { useElementHover } from '@vueuse/core'
 import { computed, onMounted, provide, ref, watch } from 'vue'
 

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,15 +1,17 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.25",
+  "version": "5.0.0-pre.27",
   "packageManager": "pnpm@10.10.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"
     },
@@ -19,11 +21,13 @@
   },
   "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",
@@ -35,10 +39,10 @@
     "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",
+    "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"
   },
   "peerDependencies": {

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
-}