daisy-ui-kit 5.2.4 → 5.2.7

package/README.md

@@ -5,9 +5,11 @@ Vue/Nuxt components for DaisyUI 5.
 ## Install
 
 ```bash
-pnpm add daisy-ui-kit daisyui @vueuse/core
+pnpm add daisy-ui-kit daisyui @vueuse/core @vueuse/integrations
 ```
 
+Peer dependencies (not pulled in transitively): `vue`, `daisyui`, `@vueuse/core`, `@vueuse/integrations`. `nuxt` is an optional peer if you use the Nuxt module.
+
 ## Manual Imports
 
 Import components directly from the package:

package/app/components/Avatar.vue

@@ -119,7 +119,7 @@ function hexToRGBArray(color: any) {
   </div>
 </template>
 
-<style lang="postcss">
+<style>
 .avatar-mask > * {
   aspect-ratio: 1/1;
   width: 100%;

package/app/components/MenuItem.vue

@@ -10,19 +10,24 @@ defineProps<{
   </li>
 </template>
 
-<style lang="postcss">
+<style>
 /*
-  Allow adding .active class to the MenuItem element.
+  Allow adding .menu-active to the MenuItem element.
   DaisyUI only supports adding it to the `a` element.
 */
 .menu-item.menu-active > a,
 .menu-item.menu-active > span {
-  background-color: hsl(var(--n) / var(--tw-bg-opacity));
-  color: hsl(var(--nc) / var(--tw-text-opacity));
+  outline-style: none;
+  color: var(--menu-active-fg, var(--color-neutral-content));
+  background-color: var(--menu-active-bg, var(--color-neutral));
+  background-size: auto, calc(var(--noise) * 100%);
+  background-image: none, var(--fx-noise);
+  box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg, var(--color-neutral));
 }
 .menu-item.menu-disabled > a,
 .menu-item.menu-disabled > span {
-  background-color: var(--n);
+  pointer-events: none;
+  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
 }
 
 /* Fix padding when putting a Dropdown inside of a menu */

package/app/components/Prose.vue

@@ -4,25 +4,25 @@
   </article>
 </template>
 
-<style lang="postcss">
+<style>
 .prose.full-width {
   width: 100%;
   max-width: 100%;
 }
 .prose.daisy-prose code:not(pre code) {
-  @apply bg-base-300;
+  background-color: var(--color-base-300);
 }
 .prose .link-primary {
-  @apply text-primary;
+  color: var(--color-primary);
 }
 .prose .link-secondary {
-  @apply text-secondary;
+  color: var(--color-secondary);
 }
 .prose .link-neutral {
-  @apply text-neutral;
+  color: var(--color-neutral);
 }
 .prose .link-accent {
-  @apply text-accent;
+  color: var(--color-accent);
 }
 
 .prose h1 a,
@@ -32,6 +32,6 @@
 .prose h5 a,
 .prose h6 a {
   text-decoration: none;
-  @apply font-bold;
+  font-weight: 700;
 }
 </style>

package/app/composables/use-toast.ts

@@ -122,12 +122,8 @@ export interface UseToastOptions {
  *   // In UI: <Toast name="admin" />
  */
 function normalizeToast(toast: any): Toast {
-  if (toast.originalDuration == null) {
-    toast.originalDuration = toast.duration ?? 0
-  }
-  if (toast.countdown == null) {
-    toast.countdown = toast.originalDuration
-  }
+  toast.originalDuration ??= toast.duration ?? 0
+  toast.countdown ??= toast.originalDuration
   if (typeof toast.intervalId === 'undefined') {
     toast.intervalId = undefined
   }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.2.4",
+  "version": "5.2.7",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {
@@ -30,25 +30,25 @@
   "types": "./src/index.d.ts",
   "files": [
     "README.md",
-    "app/components",
-    "app/composables",
-    "app/utils",
+    "app/components/*.vue",
+    "app/components/*.ts",
+    "app/composables/use-*.ts",
+    "app/utils/*.ts",
     "nuxt.d.ts",
     "nuxt.js",
-    "vue.ts",
-    "src"
+    "src",
+    "vue.ts"
   ],
   "scripts": {
     "import-d1-dumps": "./import-d1-dumps.sh",
-    "prebuild": "cp CHANGELOG.md content/docs/changelog.md",
+    "prebuild": "cp CHANGELOG.md content/docs/changelog.md && nuxt prepare",
     "build": "NODE_OPTIONS='--max-old-space-size=7168' nuxt build",
-    "predev": "cp CHANGELOG.md content/docs/changelog.md",
+    "predev": "cp CHANGELOG.md content/docs/changelog.md && nuxt prepare",
     "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": "node scripts/release.js prerelease",
     "release:patch": "node scripts/release.js patch",
@@ -57,45 +57,53 @@
     "deploy": "pnpm run build && npx wrangler deploy"
   },
   "peerDependencies": {
-    "@vueuse/core": "^13.1.0",
-    "daisyui": "^5"
+    "@vueuse/core": "^14.0.0",
+    "@vueuse/integrations": "^14.0.0",
+    "daisyui": "^5",
+    "nuxt": ">=3.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "nuxt": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.9.0",
-    "@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": "^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": "^4.2.1",
-    "shiki": "^3.3.0",
-    "typescript": "^5.8.3",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.1",
-    "zod": "^3.24.4"
+    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "focus-trap": "^8.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.12.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.5",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/test-utils": "^2.4.6",
-    "daisyui": "^5.5.5",
-    "eslint": "^9.26.0",
+    "@antfu/eslint-config": "^9.0.0",
+    "@formkit/auto-animate": "^0.9.0",
+    "@nuxt/content": "3.14.0",
+    "@nuxt/eslint": "1.15.2",
+    "@nuxt/fonts": "0.14.0",
+    "@nuxt/icon": "2.2.2",
+    "@nuxt/image": "2.0.0",
+    "@nuxt/scripts": "1.1.1",
+    "@nuxt/test-utils": "4.0.3",
+    "@oddbird/css-anchor-positioning": "^0.9.0",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.3.0",
+    "@unhead/vue": "^3.1.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.10",
+    "@vueuse/core": "^14.3.0",
+    "@vueuse/integrations": "^14.3.0",
+    "daisyui": "^5.5.20",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-vue": "^10.5.1",
-    "happy-dom": "^20.0.11",
-    "tailwindcss": "^4.1.5",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.16"
+    "eslint-plugin-vue": "^10.9.1",
+    "happy-dom": "^20.9.0",
+    "nuxt": "^4.4.6",
+    "shiki": "^4.1.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3",
+    "vite": "^7.3.3",
+    "vitest": "^4.1.7",
+    "vue": "^3.5.34",
+    "vue-router": "^5.0.7",
+    "zod": "^4.4.3"
   }
 }

package/app/components/content/CodeWrapper.vue

@@ -1,8 +0,0 @@
-<template>
-  <Collapse arrow toggle class="mb-8 rounded-b-xl rounded-t-none bg-base-200 p-0">
-    <CollapseTitle class="text-lg font-medium"> Code Example </CollapseTitle>
-    <CollapseContent class="overflow-hidden">
-      <slot />
-    </CollapseContent>
-  </Collapse>
-</template>

package/app/components/content/ColorBadge.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  color: string
-}>()
-
-const classes = computed(() => {
-  return {
-    'bg-primary-content text-primary': props.color === 'primary-content',
-    'bg-secondary-content text-secondary': props.color === 'secondary-content',
-    'bg-neutral-content text-neutral': props.color === 'neutral-content',
-    'bg-accent-content text-accent': props.color === 'accent-content',
-    'bg-info-content text-info': props.color === 'info-content',
-    'bg-success-content text-success': props.color === 'success-content',
-    'bg-warning-content text-warning': props.color === 'warning-content',
-    'bg-error-content text-error': props.color === 'error-content',
-  }
-})
-</script>
-
-<template>
-  <Badge :color="color" class="whitespace-nowrap rounded-[0.375rem] px-1 font-mono" :class="classes">
-    {{ color }}
-  </Badge>
-</template>

package/app/components/content/ComponentsTree.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-const { allLinks } = useNav()
-const { componentsByName } = useComponents()
-
-function getLinkToPage(pageName: string, componentName?: string) {
-  const link = allLinks.find(link => link.label === pageName)
-  if (!link) {
-    return ''
-  }
-  // For the main component, add a -1 to the hash
-  const hash = `#${componentName?.toLowerCase()}${componentName === pageName ? '-1' : ''}`
-  return link.to + (componentName ? hash : '')
-}
-</script>
-
-<template>
-  <Flex col class="gap-2 lg:gap-0">
-    <div v-for="(components, key) in componentsByName" :key="key">
-      <Flex
-        class="items-start lg:items-center gap-2 border-2 border-transparent hover:border-primary p-3 rounded-xl -mx-3 cursor-pointer"
-        @click.self="navigateTo(getLinkToPage(key as any))"
-      >
-        <NuxtLink :to="getLinkToPage(key as any)" class="w-28 flex-shrink-0 mr-2 no-underline hover:underline">
-          <Text class="w-24 flex-shrink-0 mr-2"> {{ key }}: </Text>
-        </NuxtLink>
-
-        <Flex wrap col class="gap-1 lg:flex-row">
-          <Tooltip v-for="component in components" :key="component.name" :tip="component.description">
-            <NuxtLink :to="getLinkToPage(key as any, component.name)">
-              <Button sm class="normal-case">
-                {{ component.name }}
-              </Button>
-            </NuxtLink>
-          </Tooltip>
-        </Flex>
-      </Flex>
-    </div>
-  </Flex>
-</template>

package/app/components/content/DarkToggle.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core'
-
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
-</script>
-
-<template>
-  <button class="!outline-none" @click="toggleDark()">
-    <div v-if="isDark" class="i-carbon-moon" />
-    <div v-else class="i-carbon-sun" />
-  </button>
-</template>

package/app/components/content/DemoExampleResponsive.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-import { useElementBounding, useMouse, useMousePressed } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps({
-  iframeClasses: {
-    type: String,
-    default: '',
-  },
-  allowProse: Boolean,
-})
-// @ts-expect-error useTheme is provided by the app
-const { theme } = useTheme() as { theme: Ref<string> }
-
-const iframe = ref()
-const { pressed } = useMousePressed()
-const { x: mouseX } = useMouse()
-const { width } = useElementBounding(iframe)
-
-const referenceX = ref(0)
-const _width = ref('100%')
-
-watch(pressed, val => {
-  if (val) referenceX.value = mouseX.value
-})
-watch(mouseX, val => {
-  if (pressed.value) {
-    const delta = val - referenceX.value
-    referenceX.value = mouseX.value
-    _width.value = `${width.value + delta * 1.2}px`
-  }
-})
-
-const classes = computed(() => {
-  return `${props.iframeClasses} not-prose ${pressed ? 'pointer-events-none' : ''}`
-})
-</script>
-
-<template>
-  <div
-    class="flex flex-row flex-wrap items-center mt-4 border-4 rounded-t-xl border-base-200 overflow-hidden"
-    :class="classes"
-  >
-    <div class="flex flex-row w-full bg-black/50">
-      <IframeRenderer
-        ref="iframe"
-        :style="{ width: _width }"
-        class="w-full min-h-full"
-        :classes="classes"
-        :iframe-classes="iframeClasses"
-        :theme="theme"
-      >
-        <slot />
-      </IframeRenderer>
-      <Tooltip
-        draggable
-        primary
-        tip="Drag to Resize"
-        left
-        class="flex items-center justify-center bg-primary cursor-move"
-      >
-        <Icon name="radix-icons:drag-handle-vertical" class="text-primary-content" />
-      </Tooltip>
-    </div>
-  </div>
-</template>

package/app/components/content/IframeRenderer.ts

@@ -1,57 +0,0 @@
-import { createApp, h, onMounted, ref, watch } from 'vue'
-
-export default {
-  name: 'RenderToIFrame',
-  props: {
-    classes: { type: String },
-    iframeClasses: { type: String },
-    theme: { type: String },
-  },
-  setup(props: any, { slots }: any) {
-    const iframeRef = ref()
-    const iframeBody = ref()
-    const iframeHead = ref()
-    const iframeStyle = ref()
-
-    onMounted(() => {
-      iframeBody.value = iframeRef.value.contentDocument.body
-      iframeHead.value = iframeRef.value.contentDocument.head
-      const el = document.createElement('div')
-      iframeBody.value.appendChild(el)
-      iframeStyle.value = document.createElement('style')
-      iframeStyle.value.innerHTML = props.css
-      iframeHead.value.appendChild(iframeStyle.value)
-
-      createApp({
-        name: 'IframeRender',
-        setup() {
-          const script = iframeRef.value.contentDocument.createElement('script')
-          script.type = 'text/javascript'
-          // create dynamic script
-          script.text = `const oHead = document.getElementsByTagName('head')[0]
-            const arrStyleSheets = parent.document.getElementsByTagName('style')
-            for (let i = 0; i < arrStyleSheets.length; i++)
-            oHead.appendChild(arrStyleSheets[i].cloneNode(true))
-          `
-
-          if (props.iframeClasses.length) iframeRef.value.classList.add(props.iframeClasses)
-          iframeBody.value.classList.add('p-6')
-          iframeHead.value.appendChild(script)
-
-          watch(
-            () => props.theme,
-            theme => {
-              iframeBody.value.setAttribute('data-theme', theme)
-            },
-            { immediate: true },
-          )
-          return () => slots.default()
-        },
-      }).mount(el)
-    })
-    return () =>
-      h('iframe', {
-        ref: iframeRef,
-      })
-  },
-}

package/app/components/content/Indent.vue

@@ -1,3 +0,0 @@
-<template>
-  <span>&nbsp;&nbsp;&nbsp;</span>
-</template>

package/app/components/content/LocalLinks.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  values: string
-}>()
-const links = computed(() => {
-  const values = props.values.split(',').map(name => name.trim())
-  return values.map(value => {
-    if (value.includes('#')) {
-      const [name, url] = value.split('#')
-      return {
-        name,
-        url: `#${url}`,
-      }
-    } else {
-      return {
-        name: value,
-        url: `#${value.toLowerCase()}`,
-      }
-    }
-  })
-})
-</script>
-
-<template>
-  <ul>
-    <li v-for="link in links" :key="link.name">
-      <a :href="link.url" class="link link-primary">{{ link.name }}</a>
-    </li>
-  </ul>
-</template>

package/app/components/content/Logo.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="">
-    <Text class="font-bold whitespace-nowrap">
-      <span class="text-primary">Daisy</span>UI Kit
-      <span>🌼</span>
-    </Text>
-  </div>
-</template>

package/app/components/content/NotFound.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { useFuse } from '@vueuse/integrations/useFuse'
-
-const _props = defineProps({
-  error: Object,
-})
-
-const route = useRoute()
-const { allLinks } = useNav()
-
-const lastPathSegment = computed(() => {
-  const segments = route.path.split('/')
-  return segments[segments.length - 1] || ''
-})
-
-const { results } = useFuse(lastPathSegment, allLinks, {
-  fuseOptions: { keys: ['label', 'tags'], includeScore: true, distance: 3 },
-  resultLimit: 5,
-})
-</script>
-
-<template>
-  <Hero class="not-prose h-[32rem]">
-    <HeroContent center>
-      <div class="max-w-md">
-        <Text is="h1" size="5xl" bold class="mb-5"> 404 </Text>
-        <Text is="p" class="mb-5"> We couldn't find that page. Did you mean one of these pages? </Text>
-        <Menu class="border border-base-300 rounded-xl">
-          <MenuItem v-for="result in results" :key="result.item.label">
-            <NuxtLink :to="result.item.to">
-              {{ result.item.label }}
-            </NuxtLink>
-          </MenuItem>
-        </Menu>
-      </div>
-    </HeroContent>
-  </Hero>
-</template>

package/app/components/content/PageNext.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  url: string
-  title: string
-}>()
-</script>
-
-<template>
-  <NuxtLink :to="url" class="btn md:btn-lg gap-2 normal-case lg:gap-3 leading-none btn-primary">
-    <Flex col items-start>
-      <Text class="text-primary-content/60 hidden text-xs font-normal md:block"> Next </Text>
-      <Text>{{ title }}</Text>
-    </Flex>
-
-    <svg
-      class="h-6 w-6 fill-current md:h-8 md:w-8"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
-    </svg>
-  </NuxtLink>
-</template>

package/app/components/content/PagePrevious.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  url: string
-  title: string
-}>()
-</script>
-
-<template>
-  <NuxtLink :to="url" class="btn md:btn-lg gap-2 normal-case lg:gap-3 leading-none btn-primary">
-    <svg
-      class="h-6 w-6 fill-current md:h-8 md:w-8"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
-    </svg>
-
-    <Flex col items-start>
-      <Text class="text-primary-content/60 hidden text-xs font-normal md:block"> Prev </Text>
-      <Text>{{ title }}</Text>
-    </Flex>
-  </NuxtLink>
-</template>

package/app/components/content/ProseA.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  href: {
-    type: String,
-    default: '',
-  },
-  target: {
-    type: String,
-    default: undefined,
-    required: false,
-  },
-})
-</script>
-
-<template>
-  <NuxtLink :href="href" :target="target" class="daisy-link link-primary">
-    <slot />
-  </NuxtLink>
-</template>

package/app/components/content/ProseAlert.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  type?: 'info' | 'success' | 'warning' | 'error'
-}>()
-</script>
-
-<template>
-  <Alert class="not-prose" v-bind="$props">
-    <slot />
-  </Alert>
-</template>

package/app/components/content/ProseBlockquote.vue

@@ -1,11 +0,0 @@
-<template>
-  <Alert>
-    <slot />
-  </Alert>
-</template>
-
-<style>
-.alert p {
-  margin: 0;
-}
-</style>

package/app/components/content/ProseCode.vue

@@ -1,3 +0,0 @@
-<template>
-  <code class="rounded-md py-1 px-1 whitespace-nowrap badge badge-soft my-1"><slot /></code>
-</template>

package/app/components/content/ProseEm.vue

@@ -1,5 +0,0 @@
-<template>
-  <em>
-    <slot />
-  </em>
-</template>