daisy-ui-kit 5.0.2 → 5.0.4

package/app/components/CollapseContent.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="collapse-content">
-    <slot />
-  </div>
-</template>

package/app/components/CollapseTitle.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-
-const checkboxId = inject('collapseCheckboxId', null)
-const hasToggle = inject('collapseToggle', false)
-</script>
-
-<template>
-  <label v-if="hasToggle && checkboxId" :for="checkboxId" class="collapse-title">
-    <slot />
-  </label>
-  <div v-else class="collapse-title">
-    <slot />
-  </div>
-</template>

package/app/components/Countdown.vue

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

package/app/components/CountdownTimers.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { useIntervalFn } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-
-const { durationInSeconds = 0, untilDate } = defineProps<{
-  durationInSeconds?: number
-  untilDate?: Date
-}>()
-const emit = defineEmits(['done'])
-
-function getTargetDate() {
-  return untilDate || new Date(Date.now() + durationInSeconds * 1000)
-}
-
-const targetDate = ref(getTargetDate())
-
-watch(
-  () => [durationInSeconds, untilDate],
-  () => {
-    targetDate.value = getTargetDate()
-  },
-  { immediate: true },
-)
-
-const timeLeft = ref(0)
-const calcTimeLeft = () => Math.max(0, targetDate.value.getTime() - Date.now())
-
-useIntervalFn(() => {
-  timeLeft.value = calcTimeLeft()
-}, 1000)
-
-watch(timeLeft, val => {
-  if (val === 0) {
-    emit('done')
-  }
-})
-
-const totalSeconds = computed(() => Math.round(timeLeft.value / 1000))
-const totalMinutes = computed(() => Math.floor(totalSeconds.value / 60))
-const totalHours = computed(() => Math.floor(totalMinutes.value / 60))
-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())
-})
-const split = computed(() => {
-  const days = totalDays.value
-  const hours = totalHours.value - days * 24
-  const minutes = totalMinutes.value - totalHours.value * 60
-  const seconds = totalSeconds.value - totalMinutes.value * 60
-  return { days, hours, minutes, seconds }
-})
-</script>
-
-<template>
-  <slot
-    v-bind="{
-      totalSeconds,
-      totalMinutes,
-      totalHours,
-      totalDays,
-      totalWeeks,
-      totalMonths,
-      targetDate,
-      split,
-    }"
-  />
-</template>

package/app/components/Counter.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-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="props.is || 'span'" v-bind="$attrs" :style="style" />
-</template>

package/app/components/Crumb.vue

@@ -1,5 +0,0 @@
-<template>
-  <li class="crumb">
-    <slot />
-  </li>
-</template>

package/app/components/DaisyLink.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
-
-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="resolvedComponent"
-    v-bind="$attrs"
-    class="link"
-    :class="{
-      'link-neutral': neutral || color === 'neutral',
-      'link-primary': primary || color === 'primary',
-      'link-secondary': secondary || color === 'secondary',
-      'link-accent': accent || color === 'accent',
-      'link-success': success || color === 'success',
-      'link-info': info || color === 'info',
-      'link-warning': warning || color === 'warning',
-      'link-error': error || color === 'error',
-      'link-hover': hover,
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Diff.vue

@@ -1,11 +0,0 @@
-<template>
-  <figure class="diff" tabindex="0">
-    <div class="diff-item-1" role="img" tabindex="0">
-      <slot name="one" />
-    </div>
-    <div class="diff-item-2" role="img">
-      <slot name="two" />
-    </div>
-    <div class="diff-resizer" />
-  </figure>
-</template>

package/app/components/Divider.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  orientation?: 'horizontal' | 'vertical'
-  horizontal?: boolean
-  vertical?: boolean
-  align?: 'center' | 'start' | 'end'
-  center?: boolean
-  start?: boolean
-  end?: boolean
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="divider"
-    :class="{
-      'divider-vertical': orientation === 'vertical' || vertical,
-      'divider-horizontal': orientation !== 'vertical' || horizontal,
-      'divider-neutral': color === 'neutral' || neutral,
-      'divider-primary': color === 'primary' || primary,
-      'divider-secondary': color === 'secondary' || secondary,
-      'divider-accent': color === 'accent' || accent,
-      'divider-success': color === 'success' || success,
-      'divider-warning': color === 'warning' || warning,
-      'divider-info': color === 'info' || info,
-      'divider-error': color === 'error' || error,
-      'divider-start': align === 'start' || start,
-      'divider-center': align === 'center' || center,
-      'divider-end': align === 'end' || end,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Dock.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-import { provide, ref } from 'vue'
-
-const { size, xl, lg, md, sm, xs } = defineProps<{
-  size?: string
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const activeItemId = ref<string | null>(null)
-const itemIds = ref<string[]>([])
-
-function registerItem(itemId: string) {
-  itemIds.value.push(itemId)
-  return function unregister() {
-    itemIds.value = itemIds.value.filter(id => id !== itemId)
-    if (activeItemId.value === itemId) {
-      activeItemId.value = null
-    }
-  }
-}
-
-function setActiveItemId(itemId: string) {
-  activeItemId.value = itemId
-}
-
-export interface DockState {
-  activeItemId: Ref<string | null>
-  registerItem: (itemId: string) => () => void
-  setActiveItemId: (itemId: string) => void
-}
-
-provide<DockState>('dockState', {
-  activeItemId,
-  registerItem,
-  setActiveItemId,
-})
-</script>
-
-<template>
-  <div
-    class="dock"
-    :class="{
-      'dock-xl': xl || size === 'xl',
-      'dock-lg': lg || size === 'lg',
-      'dock-md': md || size === 'md',
-      'dock-sm': sm || size === 'sm',
-      'dock-xs': xs || size === 'xs',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/DockItem.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-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 unregister = registerItem(itemId)
-
-onUnmounted(() => {
-  unregister()
-})
-</script>
-
-<template>
-  <div
-    :id="`dock-item-${itemId}`"
-    class="dock-item"
-    :class="{ 'dock-active': active || activeItemId === itemId }"
-    @click="setActiveItemId(itemId)"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/DockLabel.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="dock-label">
-    <slot />
-  </div>
-</template>

package/app/components/Drawer.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed, watch } from 'vue'
-import { createDrawerState } from '../utils/drawer-utils'
-
-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 => {
-    if (drawerState.isDrawerOpen !== value) {
-      drawerState.isDrawerOpen = value
-    }
-  },
-  { immediate: true },
-)
-watch(
-  () => drawerState.isDrawerOpen,
-  value => {
-    if (props.open !== value) {
-      emit('update:open', value)
-    }
-  },
-  { immediate: true },
-)
-
-const classes = computed(() => {
-  return {
-    'drawer-end': props.end,
-  }
-})
-</script>
-
-<template>
-  <div class="drawer" :class="classes">
-    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle" />
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/app/components/DrawerContent.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils'
-
-const props = withDefaults(
-  defineProps<{
-    name?: string
-  }>(),
-  {
-    name: 'drawer',
-  },
-)
-
-const drawerState = createDrawerState(props.name)
-</script>
-
-<template>
-  <div class="drawer-content">
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/app/components/DrawerSide.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils'
-
-const props = withDefaults(
-  defineProps<{
-    name?: string
-  }>(),
-  {
-    name: 'drawer',
-  },
-)
-
-const drawerState = createDrawerState(props.name)
-</script>
-
-<template>
-  <div class="drawer-side">
-    <div class="drawer-overlay" @click="() => drawerState?.closeDrawer()" />
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/app/components/Dropdown.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-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', { default: false })
-provide('isDropdownOpen', isOpen)
-
-const autoFocus = ref(props.autoFocus)
-provide('dropdownAutoFocus', autoFocus)
-
-// Use Nuxt's useId() for unique IDs
-const uniqueId = useId()
-const wrapperId = `dropdown-wrapper-${uniqueId}`
-const id = `dropdown-${uniqueId}`
-provide('dropdownId', id)
-
-// 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)
-
-provide('buttonEl', buttonEl)
-provide('contentEl', contentEl)
-
-// Visibility Utils
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-function open() {
-  isOpen.value = true
-}
-function close() {
-  isOpen.value = false
-}
-provide('toggleDropdown', toggle)
-provide('openDropdown', open)
-provide('closeDropdown', close)
-
-const dropdownWrapper = ref(null)
-
-onMounted(() => {
-  // 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,
-    })
-
-    watch(hover, newValue => {
-      isOpen.value = newValue
-    })
-  }
-})
-</script>
-
-<template>
-  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block">
-    <slot v-bind="{ toggle, open, close }" />
-  </div>
-</template>

package/app/components/DropdownButton.vue

@@ -1,23 +0,0 @@
-<script setup>
-import { inject } from 'vue'
-
-const id = inject('dropdownId')
-const isOpen = inject('isDropdownOpen')
-const buttonEl = inject('buttonEl')
-const isHover = inject('dropdownHover')
-</script>
-
-<template>
-  <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,127 +0,0 @@
-<script setup>
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-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 contentEl = inject('contentEl')
-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
-
-if (autoFocus.value) {
-  const { activate: _activate, deactivate: _deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
-  activate = _activate
-  deactivate = _deactivate
-
-  // hide the dropdown when the focus-trap drops focus (by pressing escape, for example)
-  watchEffect(() => {
-    if (!hasFocus.value) {
-      close()
-    }
-  })
-}
-
-// 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)
-      }
-    }
-  },
-  { 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?.()
-    }
-  }
-}
-</script>
-
-<template>
-  <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>