daisy-ui-kit 5.0.0-pre.3 → 5.0.0-pre.30

package/app/components/CollapseContent.vue

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

package/app/components/CollapseTitle.vue

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,69 @@
+<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

@@ -0,0 +1,21 @@
+<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

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

package/app/components/DaisyLink.vue

@@ -0,0 +1,56 @@
+<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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,57 @@
+<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

@@ -0,0 +1,27 @@
+<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

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

package/app/components/Drawer.vue

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,106 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,127 @@
+<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>