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

package/app/components/Countdown.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-const { is = 'span' } = defineProps<{
+const props = defineProps<{
   is?: any
 }>()
 
-const tag = computed(() => is)
+const tag = computed(() => props.is || 'span')
 </script>
 
 <template>

package/app/components/CountdownTimers.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useIntervalFn } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 const { durationInSeconds = 0, untilDate } = defineProps<{
   durationInSeconds?: number
@@ -29,7 +29,7 @@ useIntervalFn(() => {
   timeLeft.value = calcTimeLeft()
 }, 1000)
 
-watch(timeLeft, (val) => {
+watch(timeLeft, val => {
   if (val === 0) {
     emit('done')
   }
@@ -42,10 +42,7 @@ const totalDays = computed(() => Math.floor(totalHours.value / 24))
 const totalWeeks = computed(() => Math.floor(totalDays.value / 7))
 const totalMonths = computed(() => {
   const now = new Date()
-  return (
-    (targetDate.value.getFullYear() - now.getFullYear()) * 12
-    + (targetDate.value.getMonth() - now.getMonth())
-  )
+  return (targetDate.value.getFullYear() - now.getFullYear()) * 12 + (targetDate.value.getMonth() - now.getMonth())
 })
 const split = computed(() => {
   const days = totalDays.value

package/app/components/Counter.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
-const { is = 'span' } = defineProps<{
-  value: number
+import { computed } from 'vue'
+
+const props = defineProps<{
+  value: number | string
   is?: any
+  digits?: 2 | 3 | '2' | '3'
 }>()
+
+const style = computed(() => {
+  let css = `--value:${props.value};`
+  if (props.digits) {
+    css += `--digits:${props.digits};`
+  }
+  return css
+})
 </script>
 
 <template>
-  <component :is="is" v-bind="$attrs" :style="`--value:${value};`" />
+  <component :is="props.is || 'span'" v-bind="$attrs" :style="style" />
 </template>

package/app/components/DaisyLink.vue

@@ -1,25 +1,43 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string
-  hover?: boolean
+import { computed, resolveComponent } from 'vue'
 
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-}>(), {
-  is: 'a',
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    hover?: boolean
+
+    color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    success?: boolean
+    info?: boolean
+    warning?: boolean
+    error?: boolean
+  }>(),
+  {
+    is: 'a',
+  },
+)
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is
 })
 </script>
 
 <template>
   <component
-    :is="is"
+    :is="resolvedComponent"
+    v-bind="$attrs"
     class="link"
     :class="{
       'link-neutral': neutral || color === 'neutral',

package/app/components/Dock.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { randomString } from '../utils/random-string';
+import type { Ref } from 'vue'
+import { provide, ref } from 'vue'
 
 const { size, xl, lg, md, sm, xs } = defineProps<{
   size?: string
@@ -13,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) {
@@ -31,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,12 +1,14 @@
 <script setup lang="ts">
-import type { DockState } from './Dock.vue';
+import type { DockState } from './Dock.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()
@@ -17,7 +19,7 @@ onUnmounted(() => {
   <div
     :id="`dock-item-${itemId}`"
     class="dock-item"
-    :class="{ 'dock-active': active || (activeItemId === itemId) }"
+    :class="{ 'dock-active': active || activeItemId === itemId }"
     @click="setActiveItemId(itemId)"
   >
     <slot />

package/app/components/Drawer.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
-import { createDrawerState } from '../utils/drawer-utils';
+import { computed, watch } from 'vue'
+import { createDrawerState } from '../utils/drawer-utils'
 
-const props = withDefaults(defineProps<{
-  open?: boolean
-  name?: string
-  end?: boolean
-}>(), {
-  name: 'drawer',
-})
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    name?: string
+    end?: boolean
+  }>(),
+  {
+    name: 'drawer',
+  },
+)
 const emit = defineEmits(['update:open'])
 
 // sync `open` prop with drawerState.isDrawerOpen
 const drawerState = createDrawerState(props.name)
 watch(
   () => props.open,
-  (value) => {
+  value => {
     if (drawerState.isDrawerOpen !== value) {
       drawerState.isDrawerOpen = value
     }
@@ -24,7 +27,7 @@ watch(
 )
 watch(
   () => drawerState.isDrawerOpen,
-  (value) => {
+  value => {
     if (props.open !== value) {
       emit('update:open', value)
     }
@@ -41,7 +44,7 @@ const classes = computed(() => {
 
 <template>
   <div class="drawer" :class="classes">
-    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle">
+    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle" />
     <slot v-bind="drawerState" />
   </div>
 </template>

package/app/components/DrawerContent.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils';
+import { createDrawerState } from '../utils/drawer-utils'
 
-const props = withDefaults(defineProps<{
-  name?: string
-}>(), {
-  name: 'drawer',
-})
+const props = withDefaults(
+  defineProps<{
+    name?: string
+  }>(),
+  {
+    name: 'drawer',
+  },
+)
 
 const drawerState = createDrawerState(props.name)
 </script>

package/app/components/DrawerSide.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils';
+import { createDrawerState } from '../utils/drawer-utils'
 
-const props = withDefaults(defineProps<{
-  name?: string
-}>(), {
-  name: 'drawer',
-})
+const props = withDefaults(
+  defineProps<{
+    name?: string
+  }>(),
+  {
+    name: 'drawer',
+  },
+)
 
 const drawerState = createDrawerState(props.name)
 </script>

package/app/components/Dropdown.vue

@@ -1,54 +1,69 @@
 <script setup lang="ts">
-import { autoUpdate, useFloating } from '@floating-ui/vue'
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
-import { onMounted, provide, reactive, ref } from 'vue'
-import { randomString } from '../utils/random-string'
-
-const props = withDefaults(defineProps<{
-  // allows passing a custom id to the dropdown. Required for SSR hydration.
-  randomId?: string
-  autoFocus?: boolean
-
-  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
-  strategy?: 'fixed' | 'absolute'
-
-  hover?: boolean
-  delayEnter?: number
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>(), {
-  autoFocus: false,
-  placement: 'bottom-start',
-  hover: false,
-  delayEnter: 0,
-  delayLeave: 300,
-  closeOnClickOutside: true,
-})
+import { useId } from 'vue'
+import { useElementHover } from '@vueuse/core'
+import { onMounted, provide, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    autoFocus?: boolean
+
+    placement?:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+
+    hover?: boolean
+    delayEnter?: number
+    delayLeave?: number
+    closeOnClickOutside?: boolean
+  }>(),
+  {
+    autoFocus: false,
+    placement: 'bottom-start',
+    hover: false,
+    delayEnter: 0,
+    delayLeave: 300,
+    closeOnClickOutside: true,
+  },
+)
+
 // Dropdown Visibility
-const isOpen = defineModel('open')
+const isOpen = defineModel('open', { default: false })
 provide('isDropdownOpen', isOpen)
 
 const autoFocus = ref(props.autoFocus)
 provide('dropdownAutoFocus', autoFocus)
 
-const randomValue = props.randomId || randomString(12)
-const wrapperId = `dropdown-wrapper-${randomValue}`
-const id = `dropdown-${randomValue}`
+// Use Nuxt's useId() for unique IDs
+const uniqueId = useId()
+const wrapperId = `dropdown-wrapper-${uniqueId}`
+const id = `dropdown-${uniqueId}`
 provide('dropdownId', id)
 
-// set up the floating ui instance
+// Provide placement for CSS anchor positioning
+provide('dropdownPlacement', ref(props.placement))
+
+// Provide closeOnClickOutside for popover mode selection
+provide('dropdownCloseOnClickOutside', ref(props.closeOnClickOutside))
+
+// Provide hover mode for button behavior
+provide('dropdownHover', ref(props.hover))
+
+// References
 const buttonEl = ref(null)
 const contentEl = ref(null)
-const floatingConfig = reactive({
-  placement: ref(props.placement),
-  strategy: ref(props.strategy),
-  whileElementsMounted: autoUpdate,
-})
-const { floatingStyles } = useFloating(buttonEl, contentEl, floatingConfig)
 
 provide('buttonEl', buttonEl)
 provide('contentEl', contentEl)
-provide('floatingStyles', floatingStyles)
 
 // Visibility Utils
 function toggle() {
@@ -67,29 +82,25 @@ provide('closeDropdown', close)
 const dropdownWrapper = ref(null)
 
 onMounted(() => {
-  // Close when clicking outside the element
-  // use a slight delay to avoid conflict with the focus trap in the DropdownContent.
-  onClickOutside(contentEl, () => {
-    if (props.closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 50)
-    }
-  })
-
-  // Sync with top-level isHovered ref. For SSR compatibility.
+  // Note: closeOnClickOutside is handled automatically by popover="auto"
+  // The popover API provides "light dismiss" behavior by default
+
+  // Sync with hover state for SSR compatibility
   if (props.hover) {
     const hover = useElementHover(dropdownWrapper, {
       delayLeave: props.delayLeave,
       delayEnter: props.delayEnter,
     })
-    syncRefs(hover, isOpen)
+
+    watch(hover, newValue => {
+      isOpen.value = newValue
+    })
   }
 })
 </script>
 
 <template>
-  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block floating-dropdown">
+  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block">
     <slot v-bind="{ toggle, open, close }" />
   </div>
 </template>

package/app/components/DropdownButton.vue

@@ -3,14 +3,21 @@ import { inject } from 'vue'
 
 const id = inject('dropdownId')
 const isOpen = inject('isDropdownOpen')
-const toggleDropdown = inject('toggleDropdown')
 const buttonEl = inject('buttonEl')
-
-const toggle = toggleDropdown
+const isHover = inject('dropdownHover')
 </script>
 
 <template>
-  <Button :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-button" @click="toggle">
+  <Button
+    :id="id"
+    ref="buttonEl"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :popovertarget="`${id}-content`"
+    :popovertargetaction="isHover ? 'show' : undefined"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="dropdown-button"
+  >
     <slot />
   </Button>
 </template>

package/app/components/DropdownContent.vue

@@ -1,19 +1,27 @@
 <script setup>
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import { inject, nextTick, ref, watchEffect } from 'vue'
+import { computed, inject, nextTick, watch, watchEffect } from 'vue'
+import { getPositionArea, getPositionFallbacks } from '../utils/position-area'
 
 const autoFocus = inject('dropdownAutoFocus')
 const id = inject('dropdownId')
 const isOpen = inject('isDropdownOpen')
-const isOpenDelayed = ref(isOpen.value)
 const contentEl = inject('contentEl')
-const floatingStyles = inject('floatingStyles')
+const placement = inject('dropdownPlacement')
+const closeOnClickOutside = inject('dropdownCloseOnClickOutside')
 
 // Dropdown Utils
 const toggle = inject('toggleDropdown')
 const open = inject('openDropdown')
 const close = inject('closeDropdown')
 
+// Compute CSS position-area value based on placement
+const positionArea = computed(() => getPositionArea(placement.value))
+const positionFallbacks = computed(() => getPositionFallbacks(placement.value))
+
+// Determine popover mode: "auto" for light dismiss, "manual" to disable it
+const popoverMode = computed(() => (closeOnClickOutside.value ? 'auto' : 'manual'))
+
 let activate
 let deactivate
 
@@ -29,29 +37,91 @@ if (autoFocus.value) {
     }
   })
 }
-// const { activate, deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
-
-// synchronize isOpenDelayed with isOpen
-watchEffect(async () => {
-  if (isOpen.value) {
-    isOpenDelayed.value = true
-    if (autoFocus.value) {
-      await nextTick()
-      activate()
+
+// Sync popover state with isOpen model (for programmatic control)
+watch(
+  isOpen,
+  async newValue => {
+    if (contentEl.value) {
+      try {
+        // Check current popover state
+        const isPopoverOpen = contentEl.value.matches(':popover-open')
+
+        // Only programmatically control if state differs
+        if (newValue && !isPopoverOpen) {
+          contentEl.value.showPopover()
+          if (autoFocus.value) {
+            await nextTick()
+            activate?.()
+          }
+        } else if (!newValue && isPopoverOpen) {
+          contentEl.value.hidePopover()
+          if (autoFocus.value) {
+            deactivate?.()
+            await nextTick()
+          }
+        }
+      } catch (e) {
+        // Silently handle if popover API is not supported
+        console.warn('Popover API not supported:', e)
+      }
     }
-  }
-  else {
-    if (autoFocus.value) {
-      deactivate()
-      await nextTick()
+  },
+  { flush: 'post' },
+)
+
+// Listen to popover toggle events to sync back to isOpen model
+function handleToggle(event) {
+  const newState = event.newState === 'open'
+
+  if (isOpen.value !== newState) {
+    isOpen.value = newState
+
+    if (newState && autoFocus.value) {
+      nextTick().then(() => activate?.())
+    } else if (!newState && autoFocus.value) {
+      deactivate?.()
     }
-    isOpenDelayed.value = false
   }
-})
+}
 </script>
 
 <template>
-  <div v-if="isOpen" ref="contentEl" :style="floatingStyles" :aria-labelledby="id" role="menu">
+  <div
+    :id="`${id}-content`"
+    ref="contentEl"
+    :anchor="id"
+    :aria-labelledby="id"
+    role="menu"
+    :popover="popoverMode"
+    class="dropdown-content dropdown-popover"
+    :style="{
+      'position-anchor': `--${id}`,
+      'position-area': positionArea,
+      'position-try-fallbacks': positionFallbacks,
+    }"
+    @toggle="handleToggle"
+  >
     <slot v-bind="{ toggle, open, close }" />
   </div>
 </template>
+
+<style>
+@layer components {
+  /* Reset default popover styles - in components layer so utilities can override */
+  .dropdown-popover[popover] {
+    border: none;
+    color: inherit;
+    overflow: visible;
+    /* Use auto for inset to allow anchor positioning to work */
+    inset: auto;
+    margin: 0;
+    background-color: transparent;
+  }
+
+  /* Position anchoring support */
+  .dropdown-popover[popover]:popover-open {
+    position: fixed;
+  }
+}
+</style>

package/app/components/DropdownTarget.vue

@@ -3,12 +3,19 @@ import { inject } from 'vue'
 
 const id = inject('dropdownId')
 const isOpen = inject('isDropdownOpen')
-const toggle = inject('toggleDropdown')
 const buttonEl = inject('buttonEl')
 </script>
 
 <template>
-  <div :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-target" @click="toggle">
+  <button
+    :id="id"
+    ref="buttonEl"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :popovertarget="`${id}-content`"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="dropdown-target"
+  >
     <slot />
-  </div>
+  </button>
 </template>

package/app/components/Fab.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  flower?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="fab"
+    :class="{
+      'fab-flower': flower,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/FabClose.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+function handleMouseDown(event: MouseEvent) {
+  event.preventDefault()
+  const fab = (event.currentTarget as HTMLElement)?.closest('.fab')
+  if (fab instanceof HTMLElement) {
+    fab.blur()
+  }
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur()
+  }
+}
+</script>
+
+<template>
+  <div class="fab-close" @mousedown="handleMouseDown">
+    <slot />
+  </div>
+</template>

package/app/components/FabMainAction.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="fab-main-action">
+    <slot />
+  </div>
+</template>