daisy-ui-kit 5.0.3 → 5.0.5

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>

package/app/components/DropdownTarget.vue

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

package/app/components/Fab.vue

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

package/app/components/FabClose.vue

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

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

package/app/components/FabTrigger.vue

@@ -1,117 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<{
-    btn?: boolean
-    join?: boolean
-    close?: boolean
-
-    color?: string
-    neutral?: boolean
-    primary?: boolean
-    secondary?: boolean
-    accent?: boolean
-    info?: boolean
-    success?: boolean
-    warning?: boolean
-    error?: boolean
-
-    ghost?: boolean
-    link?: boolean
-    glass?: boolean
-    outline?: boolean
-    dash?: boolean
-    soft?: boolean
-
-    shape?: 'circle' | 'square' | 'wide' | 'block'
-    circle?: boolean
-    square?: boolean
-    wide?: boolean
-    block?: boolean
-
-    noAnimation?: boolean
-    active?: boolean
-
-    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
-    xl?: boolean
-    lg?: boolean
-    md?: boolean
-    sm?: boolean
-    xs?: boolean
-  }>(),
-  {
-    btn: true,
-  },
-)
-
-function handleMouseDown(event: MouseEvent) {
-  if (!props.close) return
-  const fab = (event.currentTarget as HTMLElement)?.closest('.fab')
-  // Only close if FAB is already open (has focus within)
-  if (fab instanceof HTMLElement && fab.matches(':focus-within')) {
-    event.preventDefault()
-    fab.blur()
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur()
-    }
-  }
-}
-</script>
-
-<template>
-  <div
-    tabindex="0"
-    role="button"
-    v-bind="$attrs"
-    :class="{
-      btn,
-      'join-item': join,
-
-      'btn-neutral': neutral || color === 'neutral',
-      'btn-primary': primary || color === 'primary',
-      'btn-secondary': secondary || color === 'secondary',
-      'btn-accent': accent || color === 'accent',
-      'btn-info': info || color === 'info',
-      'btn-success': success || color === 'success',
-      'btn-warning': warning || color === 'warning',
-      'btn-error': error || color === 'error',
-
-      'text-primary': (primary || color === 'primary') && link,
-      'text-secondary': (secondary || color === 'secondary') && link,
-      'text-neutral': (neutral || color === 'neutral') && link,
-      'text-accent': (accent || color === 'accent') && link,
-      'text-info': (info || color === 'info') && link,
-      'text-success': (success || color === 'success') && link,
-      'text-warning': (warning || color === 'warning') && link,
-      'text-error': (error || color === 'error') && link,
-
-      glass,
-
-      'btn-circle': circle || shape === 'circle',
-      'btn-square': square || shape === 'square',
-      'btn-wide': wide || shape === 'wide',
-      'btn-block': block || shape === 'block',
-
-      'btn-xl': xl || size === 'xl',
-      'btn-lg': lg || size === 'lg',
-      'btn-md': md || size === 'md',
-      'btn-sm': sm || size === 'sm',
-      'btn-xs': xs || size === 'xs',
-
-      'btn-outline': outline,
-      'btn-dash': dash,
-      'btn-ghost': ghost,
-      'btn-soft': soft,
-      'btn-link': link,
-
-      'no-animation': noAnimation,
-      'btn-active': active,
-    }"
-    @mousedown="handleMouseDown"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Fieldset.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-const { is = 'fieldset', legend } = defineProps<{
-  is?: string
-  legend?: string
-}>()
-</script>
-
-<template>
-  <component :is="is" v-bind="$attrs" class="fieldset bg-base-200 border-base-300 rounded-box border p-4">
-    <legend v-if="legend" class="fieldset-legend">
-      {{ legend }}
-    </legend>
-    <slot v-else name="legend" />
-    <slot />
-  </component>
-</template>

package/app/components/FileInput.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  join?: boolean
-
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  disabled?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-defineEmits(['files'])
-</script>
-
-<template>
-  <input
-    type="file"
-    :disabled="disabled"
-    class="file-input"
-    :class="{
-      'join-item': join,
-
-      'file-input-primary': primary || color === 'primary',
-      'file-input-secondary': secondary || color === 'secondary',
-      'file-input-accent': accent || color === 'accent',
-      'file-input-info': info || color === 'info',
-      'file-input-success': success || color === 'success',
-      'file-input-warning': warning || color === 'warning',
-      'file-input-error': error || color === 'error',
-
-      'file-input-xl': xl || size === 'xl',
-      'file-input-lg': lg || size === 'lg',
-      'file-input-md': md || size === 'md',
-      'file-input-sm': sm || size === 'sm',
-      'file-input-xs': xs || size === 'xs',
-
-      'file-input-ghost': ghost,
-    }"
-    @input="$emit('files', ($event.target as any).value)"
-  />
-</template>

package/app/components/Filter.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<{
-    is?: string
-    name: string
-    items: FilterItemInput[]
-    modelValue?: any
-    resetLabel?: string
-    position?: 'start' | 'end'
-    start?: boolean
-    end?: boolean
-
-    color?: string
-    neutral?: boolean
-    primary?: boolean
-    secondary?: boolean
-    accent?: boolean
-    info?: boolean
-    success?: boolean
-    warning?: boolean
-    error?: boolean
-
-    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-    xl?: boolean
-    lg?: boolean
-    md?: boolean
-    sm?: boolean
-    xs?: boolean
-  }>(),
-  {
-    resetLabel: 'All',
-    is: 'div',
-  },
-)
-
-const emit = defineEmits(['update:modelValue'])
-
-interface FilterItem {
-  label: string
-  value: any
-}
-
-type FilterItemInput = string | FilterItem
-
-const currentValue = computed({
-  get: () => props.modelValue,
-  set(val) {
-    emit('update:modelValue', val)
-  },
-})
-
-const normalizedItems = computed(() => {
-  return props.items.map(item => {
-    if (typeof item === 'string') {
-      return { label: item, value: item }
-    }
-    return item
-  })
-})
-</script>
-
-<template>
-  <component :is="props.is" v-bind="$attrs" class="filter">
-    <!-- Reset button at start -->
-    <input
-      v-if="resetLabel && (start || position === 'start')"
-      v-model="currentValue"
-      class="btn filter-reset"
-      type="radio"
-      :class="{
-        'btn-xl': size === 'xl' || xl,
-        'btn-lg': size === 'lg' || lg,
-        'btn-md': size === 'md' || md,
-        'btn-sm': size === 'sm' || sm,
-        'btn-xs': size === 'xs' || xs,
-      }"
-      :name="name"
-      :aria-label="resetLabel"
-      :value="null"
-    />
-
-    <!-- Filter items -->
-    <template v-for="(item, index) in normalizedItems" :key="index">
-      <input
-        v-model="currentValue"
-        class="btn"
-        :class="{
-          'btn-neutral': color === 'neutral' || neutral,
-          'btn-primary': color === 'primary' || primary,
-          'btn-secondary': color === 'secondary' || secondary,
-          'btn-accent': color === 'accent' || accent,
-          'btn-info': color === 'info' || info,
-          'btn-success': color === 'success' || success,
-          'btn-warning': color === 'warning' || warning,
-          'btn-error': color === 'error' || error,
-          'btn-xl': size === 'xl' || xl,
-          'btn-lg': size === 'lg' || lg,
-          'btn-md': size === 'md' || md,
-          'btn-sm': size === 'sm' || sm,
-          'btn-xs': size === 'xs' || xs,
-        }"
-        type="radio"
-        :name="name"
-        :aria-label="item.label"
-        :value="item.value"
-      />
-    </template>
-
-    <!-- Reset button at end -->
-    <input
-      v-if="resetLabel && (end || position === 'end')"
-      v-model="currentValue"
-      class="btn filter-reset"
-      type="radio"
-      :name="name"
-      :aria-label="resetLabel"
-      :value="null"
-    />
-
-    <!-- Optional slot for custom items -->
-    <slot />
-  </component>
-</template>