daisy-ui-kit 3.0.12 → 5.0.0-pre.11

package/app/components/DaisyLink.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+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 resolvedComponent = computed(() => {
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is
+})
+</script>
+
+<template>
+  <component
+    :is="resolvedComponent"
+    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,60 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { provide, ref } from 'vue'
+import { randomString } from '../utils/random-string'
+
+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() {
+  const itemId = randomString()
+  itemIds.value.push(itemId)
+  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) {
+  activeItemId.value = itemId
+}
+
+export interface DockState {
+  activeItemId: Ref<string | null>
+  registerItem: () => { id: string; unregister: () => 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,26 @@
+<script setup lang="ts">
+import type { DockState } from './Dock.vue'
+import { inject, onUnmounted } from 'vue'
+
+const { active } = defineProps<{
+  active?: boolean
+}>()
+
+const { registerItem, setActiveItemId, activeItemId } = inject<DockState>('dockState')!
+const { id: itemId, unregister } = registerItem()
+
+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/{components → app/components}/Drawer.vue

@@ -2,30 +2,35 @@
 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) => {
-    if (drawerState.isDrawerOpen !== value)
+  value => {
+    if (drawerState.isDrawerOpen !== value) {
       drawerState.isDrawerOpen = value
+    }
   },
   { immediate: true },
 )
 watch(
   () => drawerState.isDrawerOpen,
-  (value) => {
-    if (props.open !== value)
+  value => {
+    if (props.open !== value) {
       emit('update:open', value)
+    }
   },
   { immediate: true },
 )
@@ -39,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/{components → app/components}/DrawerContent.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 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/{components → app/components}/DrawerSide.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useId } from '#imports'
+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>

package/{components → 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">
+  <div
+    :id="id"
+    ref="buttonEl"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :popovertarget="`${id}-content`"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="dropdown-target"
+  >
     <slot />
   </div>
 </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>