daisy-ui-kit 5.0.0-pre.9 → 5.0.1

package/app/components/ThemeProvider.vue

@@ -19,7 +19,12 @@ function cssVarToCamel(str: string): string {
 function dataAttrToCamel(str: string): string {
   return str.replace(/-([a-z0-9])/g, (_, c: string) => c.toUpperCase())
 }
-function parseThemeString(themeString?: string): { style: Record<string, string>, dataAttrs: Record<string, string>, dataTheme: string | undefined, allAttrs: Record<string, string> } {
+function parseThemeString(themeString?: string): {
+  style: Record<string, string>
+  dataAttrs: Record<string, string>
+  dataTheme: string | undefined
+  allAttrs: Record<string, string>
+} {
   if (!themeString) {
     return { style: {}, dataAttrs: {}, dataTheme: undefined, allAttrs: {} }
   }
@@ -33,10 +38,14 @@ function parseThemeString(themeString?: string): { style: Record<string, string>
   const allAttrs: Record<string, string> = {}
 
   // Remove @plugin ... { and closing } if present
-  const str = themeString.trim().replace(/^@plugin[^{}]*\{/, '').replace(/\}$/, '').trim()
+  const str = themeString
+    .trim()
+    .replace(/^@plugin[^{}]*\{/, '')
+    .replace(/\}$/, '')
+    .trim()
 
   // works with or without newline characters
-  str.split(/[\n;]/).forEach((line) => {
+  str.split(/[\n;]/).forEach(line => {
     const trimmed = line.trim()
     if (!trimmed || trimmed.startsWith('//')) {
       return
@@ -57,12 +66,10 @@ function parseThemeString(themeString?: string): { style: Record<string, string>
     if (varNamePattern.test(key)) {
       style[key] = value
       allAttrs[cssVarToCamel(key)] = value
-    }
-    else if (key === 'name') {
+    } else if (key === 'name') {
       dataTheme = value.replace(/"/g, '')
       allAttrs.dataTheme = dataTheme
-    }
-    else if (attrNamePattern.test(key)) {
+    } else if (attrNamePattern.test(key)) {
       const attrKey = `data-${key.replace(/[^\w-]/g, '')}`
       const attrVal = value.replace(/"/g, '')
       dataAttrs[attrKey] = attrVal
@@ -78,7 +85,7 @@ const parsed = computed(() => parseThemeString(props.dataTheme ?? props.cssVars)
 
 const themeVars = ref<Record<string, string>>({})
 let observers: MutationObserver[] = []
-let themeControllerInputs: Array<{ el: HTMLInputElement, listener: () => void }> = []
+let themeControllerInputs: Array<{ el: HTMLInputElement; listener: () => void }> = []
 let themeControllerDomObserver: MutationObserver | null = null
 
 // Converts a themeAttrs object to a DaisyUI theme string
@@ -88,15 +95,16 @@ function toThemeString(attrs: Record<string, string>, opts?: { asPlugin?: boolea
   for (const [key, value] of Object.entries(attrs)) {
     if (key === 'dataTheme') {
       lines.push(`name: "${value}";`)
-    }
-    else if (key.startsWith('data')) {
+    } else if (key.startsWith('data')) {
       // Convert dataFooBar -> foo-bar
-      const attr = key.slice(4).replace(/([A-Z])/g, '-$1').toLowerCase()
+      const attr = key
+        .slice(4)
+        .replace(/([A-Z])/g, '-$1')
+        .toLowerCase()
       if (attr !== 'theme') {
         lines.push(`${attr}: ${value};`)
       }
-    }
-    else {
+    } else {
       // Convert camelCase to --kebab-case
       const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`
       lines.push(`${cssVar}: ${value};`)
@@ -207,8 +215,10 @@ function setupSnoop(rootEl: HTMLElement): void {
     })
     themeControllerInputs = []
     // Find all matching inputs in the document
-    const inputs = Array.from(document.querySelectorAll('input[type="checkbox"].theme-controller, input[type="radio"].theme-controller')) as HTMLInputElement[]
-    inputs.forEach((el) => {
+    const inputs = Array.from(
+      document.querySelectorAll('input[type="checkbox"].theme-controller, input[type="radio"].theme-controller'),
+    ) as HTMLInputElement[]
+    inputs.forEach(el => {
       const listener = () => updateVars()
       el.addEventListener('change', listener)
       themeControllerInputs.push({ el, listener })
@@ -226,9 +236,13 @@ function setupSnoop(rootEl: HTMLElement): void {
   themeControllerDomObserver.observe(document.body, { childList: true, subtree: true })
 
   // Watch for applied style changes (parsed.style)
-  watch(() => parsed.value.style, () => {
-    nextTick(() => updateVars())
-  }, { immediate: false, deep: true })
+  watch(
+    () => parsed.value.style,
+    () => {
+      nextTick(() => updateVars())
+    },
+    { immediate: false, deep: true },
+  )
   updateVars()
 }
 
@@ -236,21 +250,22 @@ const rootEl = ref<HTMLElement | null>(null)
 
 const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
 
-watch([
-  () => props.snoop,
-  () => rootEl.value,
-], ([snoop, el]) => {
-  if (isClient) {
-    // Clean up previous observers if any
-    observers.forEach((o: MutationObserver) => o.disconnect())
-    observers = []
-    if (snoop && el) {
-      nextTick(() => {
-        setupSnoop(el)
-      })
+watch(
+  [() => props.snoop, () => rootEl.value],
+  ([snoop, el]) => {
+    if (isClient) {
+      // Clean up previous observers if any
+      observers.forEach((o: MutationObserver) => o.disconnect())
+      observers = []
+      if (snoop && el) {
+        nextTick(() => {
+          setupSnoop(el)
+        })
+      }
     }
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 onUnmounted(() => {
   observers.forEach((o: MutationObserver) => o.disconnect())

package/app/components/TimelineLine.vue

@@ -25,5 +25,5 @@ defineProps<{
       'bg-warning': warning || color === 'warning',
       'bg-error': error || color === 'error',
     }"
-  >
+  />
 </template>

package/app/components/TimelineStart.vue

@@ -4,7 +4,8 @@ defineProps<{ box?: boolean }>()
 
 <template>
   <div
-    class="timeline-start" :class="{
+    class="timeline-start"
+    :class="{
       'timeline-box': box,
     }"
   >

package/app/components/Toast.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Toast } from '~/composables/use-toast'
+import type { Toast } from '../composables/use-toast'
 import { computed } from 'vue'
-import { useToast } from '~/composables/use-toast'
+import { useToast } from '../composables/use-toast'
 
 // Explicit slot typing (Vue 3.4+ / Volar)
 interface ToastSlotProps {
@@ -61,12 +61,7 @@ const visibleToasts = computed(() => toasts.value ?? [])
       'toast-bottom': props.bottom || props.vAlign === 'bottom',
     }"
   >
-    <slot
-      v-for="toast in visibleToasts"
-      :key="toast.id"
-      :toast="toast"
-      :remove-toast="removeToast"
-    />
+    <slot v-for="toast in visibleToasts" :key="toast.id" :toast="toast" :remove-toast="removeToast" />
     <slot />
   </div>
 </template>

package/app/components/Toggle.vue

@@ -40,7 +40,7 @@ const currentValue = computed({
     class="toggle"
     :disabled="disabled"
     :class="{
-      'validator': validator,
+      validator,
       'toggle-neutral': neutral || color === 'neutral',
       'toggle-primary': primary || color === 'primary',
       'toggle-secondary': secondary || color === 'secondary',
@@ -56,5 +56,5 @@ const currentValue = computed({
       'toggle-xl': xl || size === 'xl',
       'theme-controller': themeController,
     }"
-  >
+  />
 </template>

package/app/components/Tooltip.vue

@@ -1,30 +1,115 @@
 <script setup lang="ts">
-const props = defineProps<{
-  tip?: string | number
-  open?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  position?: 'top' | 'right' | 'bottom' | 'left'
-  top?: boolean
-  right?: boolean
-  bottom?: boolean
-  left?: boolean
-}>()
+import { useId } from 'vue'
+import { useElementHover } from '@vueuse/core'
+import { computed, onMounted, provide, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    tip?: string | number
+    open?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    position?: 'top' | 'right' | 'bottom' | 'left'
+    top?: boolean
+    right?: boolean
+    bottom?: boolean
+    left?: boolean
+
+    // Popover mode props
+    delayEnter?: number
+    delayLeave?: number
+  }>(),
+  {
+    delayEnter: 200,
+    delayLeave: 100,
+  },
+)
+
+// Detect if using popover mode (when TooltipTarget/TooltipContent are used)
+const isPopoverMode = computed(() => {
+  return !props.tip
+})
+
+// Popover mode setup
+const isOpen = defineModel('open', { default: false })
+provide('isTooltipOpen', isOpen)
+
+const uniqueId = useId()
+const id = `tooltip-${uniqueId}`
+provide('tooltipId', id)
+
+// Compute placement for CSS anchor positioning
+const placement = computed(() => {
+  if (props.top || props.position === 'top') return 'top'
+  if (props.right || props.position === 'right') return 'right'
+  if (props.left || props.position === 'left') return 'left'
+  return 'bottom' // default
+})
+provide('tooltipPlacement', placement)
+
+// Provide color for TooltipContent
+const color = computed(() => {
+  if (props.color) return props.color
+  if (props.neutral) return 'neutral'
+  if (props.primary) return 'primary'
+  if (props.secondary) return 'secondary'
+  if (props.accent) return 'accent'
+  if (props.info) return 'info'
+  if (props.success) return 'success'
+  if (props.warning) return 'warning'
+  if (props.error) return 'error'
+  return null
+})
+provide('tooltipColor', color)
+
+// References
+const targetEl = ref(null)
+const contentEl = ref(null)
+provide('targetEl', targetEl)
+provide('contentEl', contentEl)
+
+// Visibility utils
+function open() {
+  isOpen.value = true
+}
+function close() {
+  isOpen.value = false
+}
+provide('openTooltip', open)
+provide('closeTooltip', close)
+
+const tooltipWrapper = ref(null)
+
+onMounted(() => {
+  if (isPopoverMode.value) {
+    const hover = useElementHover(tooltipWrapper, {
+      delayLeave: props.delayLeave,
+      delayEnter: props.delayEnter,
+    })
+
+    watch(hover, newValue => {
+      isOpen.value = newValue
+    })
+  }
+})
 </script>
 
 <template>
+  <!-- CSS-only mode (when tip prop is provided) -->
   <div
+    v-if="!isPopoverMode"
     :data-tip="tip"
-    class="tooltip" :class="{
+    class="tooltip"
+    :class="{
       'tooltip-open': props.open,
 
       'tooltip-top': props.top || props.position === 'top',
@@ -44,4 +129,9 @@ const props = defineProps<{
   >
     <slot />
   </div>
+
+  <!-- Popover API mode (when using TooltipTarget/TooltipContent) -->
+  <div v-else ref="tooltipWrapper" class="tooltip-wrapper inline-block">
+    <slot />
+  </div>
 </template>

package/app/components/TooltipContent.vue

@@ -1,5 +1,283 @@
+<script setup>
+import { computed, inject, ref, watch } from 'vue'
+import { getPositionArea, getPositionFallbacks } from '../utils/position-area'
+
+const id = inject('tooltipId', null)
+const isOpen = inject('isTooltipOpen', ref(false))
+const contentEl = inject('contentEl', ref(null))
+const placement = inject('tooltipPlacement', ref('bottom'))
+const color = inject('tooltipColor', ref(null))
+
+// Check if we're in popover mode (inside a Tooltip wrapper with context)
+const isPopoverMode = computed(() => id !== null)
+
+// Compute CSS position-area value based on placement
+const positionArea = computed(() => getPositionArea(placement.value))
+const positionFallbacks = computed(() => getPositionFallbacks(placement.value))
+
+// Color classes for the tooltip
+const colorClass = computed(() => {
+  if (!color.value) return ''
+  const colorMap = {
+    neutral: 'tooltip-neutral',
+    primary: 'tooltip-primary',
+    secondary: 'tooltip-secondary',
+    accent: 'tooltip-accent',
+    info: 'tooltip-info',
+    success: 'tooltip-success',
+    warning: 'tooltip-warning',
+    error: 'tooltip-error',
+  }
+  return colorMap[color.value] || ''
+})
+
+// Sync popover state with isOpen model
+watch(
+  isOpen,
+  newValue => {
+    if (!isPopoverMode.value || !contentEl.value) return
+
+    try {
+      const isPopoverOpen = contentEl.value.matches(':popover-open')
+
+      if (newValue && !isPopoverOpen) {
+        contentEl.value.showPopover()
+      } else if (!newValue && isPopoverOpen) {
+        contentEl.value.hidePopover()
+      }
+    } catch (e) {
+      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
+  }
+}
+</script>
+
 <template>
-  <div class="tooltip-content">
+  <!-- Popover mode -->
+  <div
+    v-if="isPopoverMode"
+    :id="`${id}-content`"
+    ref="contentEl"
+    :anchor="id"
+    :data-placement="placement"
+    role="tooltip"
+    popover="manual"
+    class="tooltip-popover"
+    :class="colorClass"
+    :style="{
+      'position-anchor': `--${id}`,
+      'position-area': positionArea,
+      'position-try-fallbacks': positionFallbacks,
+    }"
+    @toggle="handleToggle"
+  >
+    <slot />
+  </div>
+
+  <!-- Simple mode (no Tooltip wrapper context) -->
+  <div v-else class="tooltip-content">
     <slot />
   </div>
 </template>
+
+<style>
+@layer components {
+  .tooltip-popover[popover] {
+    border: none;
+    overflow: visible;
+    inset: auto;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-radius: var(--radius-selector, 0.25rem);
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    max-width: 20rem;
+  }
+
+  .tooltip-popover[popover]:popover-open {
+    position: fixed;
+  }
+
+  /* Arrow base styles */
+  .tooltip-popover[popover]::before {
+    content: '';
+    position: absolute;
+    border: 6px solid transparent;
+  }
+
+  /* Bottom placement - arrow points up */
+  .tooltip-popover[data-placement='bottom'] {
+    margin-top: 6px;
+  }
+  .tooltip-popover[data-placement='bottom']::before {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: var(--color-neutral);
+  }
+
+  /* Top placement - arrow points down */
+  .tooltip-popover[data-placement='top'] {
+    margin-bottom: 6px;
+  }
+  .tooltip-popover[data-placement='top']::before {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--color-neutral);
+  }
+
+  /* Right placement - arrow points left */
+  .tooltip-popover[data-placement='right'] {
+    margin-left: 6px;
+  }
+  .tooltip-popover[data-placement='right']::before {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: var(--color-neutral);
+  }
+
+  /* Left placement - arrow points right */
+  .tooltip-popover[data-placement='left'] {
+    margin-right: 6px;
+  }
+  .tooltip-popover[data-placement='left']::before {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: var(--color-neutral);
+  }
+
+  /* Color variants */
+  .tooltip-popover.tooltip-primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+  .tooltip-popover.tooltip-primary[data-placement='bottom']::before {
+    border-bottom-color: var(--color-primary);
+  }
+  .tooltip-popover.tooltip-primary[data-placement='top']::before {
+    border-top-color: var(--color-primary);
+  }
+  .tooltip-popover.tooltip-primary[data-placement='right']::before {
+    border-right-color: var(--color-primary);
+  }
+  .tooltip-popover.tooltip-primary[data-placement='left']::before {
+    border-left-color: var(--color-primary);
+  }
+
+  .tooltip-popover.tooltip-secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+  }
+  .tooltip-popover.tooltip-secondary[data-placement='bottom']::before {
+    border-bottom-color: var(--color-secondary);
+  }
+  .tooltip-popover.tooltip-secondary[data-placement='top']::before {
+    border-top-color: var(--color-secondary);
+  }
+  .tooltip-popover.tooltip-secondary[data-placement='right']::before {
+    border-right-color: var(--color-secondary);
+  }
+  .tooltip-popover.tooltip-secondary[data-placement='left']::before {
+    border-left-color: var(--color-secondary);
+  }
+
+  .tooltip-popover.tooltip-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+  .tooltip-popover.tooltip-accent[data-placement='bottom']::before {
+    border-bottom-color: var(--color-accent);
+  }
+  .tooltip-popover.tooltip-accent[data-placement='top']::before {
+    border-top-color: var(--color-accent);
+  }
+  .tooltip-popover.tooltip-accent[data-placement='right']::before {
+    border-right-color: var(--color-accent);
+  }
+  .tooltip-popover.tooltip-accent[data-placement='left']::before {
+    border-left-color: var(--color-accent);
+  }
+
+  .tooltip-popover.tooltip-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+  .tooltip-popover.tooltip-info[data-placement='bottom']::before {
+    border-bottom-color: var(--color-info);
+  }
+  .tooltip-popover.tooltip-info[data-placement='top']::before {
+    border-top-color: var(--color-info);
+  }
+  .tooltip-popover.tooltip-info[data-placement='right']::before {
+    border-right-color: var(--color-info);
+  }
+  .tooltip-popover.tooltip-info[data-placement='left']::before {
+    border-left-color: var(--color-info);
+  }
+
+  .tooltip-popover.tooltip-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+  }
+  .tooltip-popover.tooltip-success[data-placement='bottom']::before {
+    border-bottom-color: var(--color-success);
+  }
+  .tooltip-popover.tooltip-success[data-placement='top']::before {
+    border-top-color: var(--color-success);
+  }
+  .tooltip-popover.tooltip-success[data-placement='right']::before {
+    border-right-color: var(--color-success);
+  }
+  .tooltip-popover.tooltip-success[data-placement='left']::before {
+    border-left-color: var(--color-success);
+  }
+
+  .tooltip-popover.tooltip-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+  }
+  .tooltip-popover.tooltip-warning[data-placement='bottom']::before {
+    border-bottom-color: var(--color-warning);
+  }
+  .tooltip-popover.tooltip-warning[data-placement='top']::before {
+    border-top-color: var(--color-warning);
+  }
+  .tooltip-popover.tooltip-warning[data-placement='right']::before {
+    border-right-color: var(--color-warning);
+  }
+  .tooltip-popover.tooltip-warning[data-placement='left']::before {
+    border-left-color: var(--color-warning);
+  }
+
+  .tooltip-popover.tooltip-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+  }
+  .tooltip-popover.tooltip-error[data-placement='bottom']::before {
+    border-bottom-color: var(--color-error);
+  }
+  .tooltip-popover.tooltip-error[data-placement='top']::before {
+    border-top-color: var(--color-error);
+  }
+  .tooltip-popover.tooltip-error[data-placement='right']::before {
+    border-right-color: var(--color-error);
+  }
+  .tooltip-popover.tooltip-error[data-placement='left']::before {
+    border-left-color: var(--color-error);
+  }
+}
+</style>

package/app/components/TooltipTarget.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { inject } from 'vue'
+
+const id = inject('tooltipId')
+const targetEl = inject('targetEl')
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="targetEl"
+    :aria-describedby="`${id}-content`"
+    :popovertarget="`${id}-content`"
+    popovertargetaction="toggle"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="tooltip-target inline-block"
+  >
+    <slot />
+  </div>
+</template>