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

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>

package/app/composables/__tests__/use-calendar.test.ts

@@ -0,0 +1,239 @@
+import { describe, expect, it } from 'vitest'
+import { useCalendar } from '../use-calendar'
+
+describe('useCalendar', () => {
+  describe('initialization', () => {
+    it('initializes with null date by default', () => {
+      const { selectedDate } = useCalendar()
+      expect(selectedDate.value).toBeNull()
+    })
+
+    it('initializes with provided date', () => {
+      const date = new Date(2025, 5, 15) // June 15, 2025
+      const { selectedDate } = useCalendar(date)
+      expect(selectedDate.value?.getFullYear()).toBe(2025)
+      expect(selectedDate.value?.getMonth()).toBe(5)
+      expect(selectedDate.value?.getDate()).toBe(15)
+    })
+
+    it('sets viewDate to today when no initial date provided', () => {
+      const { viewDate } = useCalendar()
+      const today = new Date()
+      expect(viewDate.value.getFullYear()).toBe(today.getFullYear())
+      expect(viewDate.value.getMonth()).toBe(today.getMonth())
+    })
+
+    it('sets viewDate to initial date when provided', () => {
+      const date = new Date(2025, 5, 15)
+      const { viewDate } = useCalendar(date)
+      expect(viewDate.value.getFullYear()).toBe(2025)
+      expect(viewDate.value.getMonth()).toBe(5)
+    })
+  })
+
+  describe('weekday headers', () => {
+    it('returns weekday headers starting with Sunday by default', () => {
+      const { weekdayHeaders } = useCalendar()
+      expect(weekdayHeaders.value).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
+    })
+
+    it('returns weekday headers starting with Monday when firstDay is 1', () => {
+      const { weekdayHeaders } = useCalendar(null, { firstDay: 1 })
+      expect(weekdayHeaders.value).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
+    })
+
+    it('returns full weekday names for accessibility', () => {
+      const { weekdayHeadersFull } = useCalendar()
+      expect(weekdayHeadersFull.value).toEqual([
+        'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
+      ])
+    })
+  })
+
+  describe('month display', () => {
+    it('returns correct month name', () => {
+      const date = new Date(2025, 5, 15) // June
+      const { monthName } = useCalendar(date)
+      expect(monthName.value).toBe('June')
+    })
+
+    it('returns correct short month name', () => {
+      const date = new Date(2025, 11, 25) // December
+      const { monthNameShort } = useCalendar(date)
+      expect(monthNameShort.value).toBe('Dec')
+    })
+  })
+
+  describe('calendar days', () => {
+    it('generates 42 days (6 weeks)', () => {
+      const { calendarDays } = useCalendar(new Date(2025, 5, 15))
+      expect(calendarDays.value).toHaveLength(42)
+    })
+
+    it('marks days outside current month', () => {
+      const { calendarDays } = useCalendar(new Date(2025, 5, 15)) // June 2025
+      const outsideDays = calendarDays.value.filter(d => d.isOutsideMonth)
+      expect(outsideDays.length).toBeGreaterThan(0)
+    })
+
+    it('marks the selected date', () => {
+      const date = new Date(2025, 5, 15)
+      const { calendarDays } = useCalendar(date)
+      const selectedDays = calendarDays.value.filter(d => d.isSelected)
+      expect(selectedDays).toHaveLength(1)
+      expect(selectedDays[0]?.day).toBe(15)
+    })
+
+    it('marks today correctly', () => {
+      const today = new Date()
+      const { calendarDays, goToDate } = useCalendar()
+      goToDate(today)
+      const todayDays = calendarDays.value.filter(d => d.isToday && !d.isOutsideMonth)
+      expect(todayDays).toHaveLength(1)
+      expect(todayDays[0]?.day).toBe(today.getDate())
+    })
+  })
+
+  describe('navigation', () => {
+    it('navigates to next month', () => {
+      const { viewMonth, viewYear, nextMonth } = useCalendar(new Date(2025, 5, 15))
+      expect(viewMonth.value).toBe(5)
+      nextMonth()
+      expect(viewMonth.value).toBe(6)
+      expect(viewYear.value).toBe(2025)
+    })
+
+    it('navigates to previous month', () => {
+      const { viewMonth, viewYear, prevMonth } = useCalendar(new Date(2025, 5, 15))
+      expect(viewMonth.value).toBe(5)
+      prevMonth()
+      expect(viewMonth.value).toBe(4)
+      expect(viewYear.value).toBe(2025)
+    })
+
+    it('handles year rollover when navigating forward', () => {
+      const { viewMonth, viewYear, nextMonth } = useCalendar(new Date(2025, 11, 15))
+      expect(viewMonth.value).toBe(11)
+      nextMonth()
+      expect(viewMonth.value).toBe(0)
+      expect(viewYear.value).toBe(2026)
+    })
+
+    it('handles year rollover when navigating backward', () => {
+      const { viewMonth, viewYear, prevMonth } = useCalendar(new Date(2025, 0, 15))
+      expect(viewMonth.value).toBe(0)
+      prevMonth()
+      expect(viewMonth.value).toBe(11)
+      expect(viewYear.value).toBe(2024)
+    })
+
+    it('goes to specific month', () => {
+      const { viewMonth, goToMonth } = useCalendar(new Date(2025, 5, 15))
+      goToMonth(10)
+      expect(viewMonth.value).toBe(10)
+    })
+
+    it('goes to specific year', () => {
+      const { viewYear, goToYear } = useCalendar(new Date(2025, 5, 15))
+      goToYear(2030)
+      expect(viewYear.value).toBe(2030)
+    })
+
+    it('goes to today', () => {
+      const { viewMonth, viewYear, goToToday } = useCalendar(new Date(2020, 0, 1))
+      const today = new Date()
+      goToToday()
+      expect(viewMonth.value).toBe(today.getMonth())
+      expect(viewYear.value).toBe(today.getFullYear())
+    })
+  })
+
+  describe('selection', () => {
+    it('selects a date', () => {
+      const { selectedDate, selectDate } = useCalendar()
+      const date = new Date(2025, 5, 20)
+      selectDate(date)
+      expect(selectedDate.value?.getDate()).toBe(20)
+      expect(selectedDate.value?.getMonth()).toBe(5)
+    })
+
+    it('clears selection', () => {
+      const { selectedDate, clearSelection } = useCalendar(new Date(2025, 5, 15))
+      expect(selectedDate.value).not.toBeNull()
+      clearSelection()
+      expect(selectedDate.value).toBeNull()
+    })
+
+    it('does not select disabled dates', () => {
+      const minDate = new Date(2025, 5, 10)
+      const { selectedDate, selectDate } = useCalendar(null, { minDate })
+      selectDate(new Date(2025, 5, 5)) // Before minDate
+      expect(selectedDate.value).toBeNull()
+    })
+  })
+
+  describe('date constraints', () => {
+    it('marks dates before minDate as disabled', () => {
+      const minDate = new Date(2025, 5, 15)
+      const { calendarDays } = useCalendar(new Date(2025, 5, 20), { minDate })
+      const june14 = calendarDays.value.find(d => d.day === 14 && d.month === 5)
+      const june15 = calendarDays.value.find(d => d.day === 15 && d.month === 5)
+      expect(june14?.isDisabled).toBe(true)
+      expect(june15?.isDisabled).toBe(false)
+    })
+
+    it('marks dates after maxDate as disabled', () => {
+      const maxDate = new Date(2025, 5, 15)
+      const { calendarDays } = useCalendar(new Date(2025, 5, 10), { maxDate })
+      const june15 = calendarDays.value.find(d => d.day === 15 && d.month === 5)
+      const june16 = calendarDays.value.find(d => d.day === 16 && d.month === 5)
+      expect(june15?.isDisabled).toBe(false)
+      expect(june16?.isDisabled).toBe(true)
+    })
+  })
+
+  describe('formatting', () => {
+    it('formats date with default format', () => {
+      const { formatDate } = useCalendar(new Date(2025, 5, 15))
+      expect(formatDate()).toBe('15 Jun 2025')
+    })
+
+    it('formats date with custom format', () => {
+      const { formatDate } = useCalendar(new Date(2025, 5, 15))
+      expect(formatDate('YYYY-MM-DD')).toBe('2025-06-15')
+    })
+
+    it('formats date with full month name', () => {
+      const { formatDate } = useCalendar(new Date(2025, 5, 15))
+      expect(formatDate('MMMM D, YYYY')).toBe('June 15, 2025')
+    })
+
+    it('returns empty string when no date selected', () => {
+      const { formatDate } = useCalendar()
+      expect(formatDate()).toBe('')
+    })
+  })
+
+  describe('utility functions', () => {
+    it('isSameDay returns true for same day', () => {
+      const { isSameDay } = useCalendar()
+      const a = new Date(2025, 5, 15, 10, 30)
+      const b = new Date(2025, 5, 15, 20, 45)
+      expect(isSameDay(a, b)).toBe(true)
+    })
+
+    it('isSameDay returns false for different days', () => {
+      const { isSameDay } = useCalendar()
+      const a = new Date(2025, 5, 15)
+      const b = new Date(2025, 5, 16)
+      expect(isSameDay(a, b)).toBe(false)
+    })
+
+    it('isSameDay handles null values', () => {
+      const { isSameDay } = useCalendar()
+      expect(isSameDay(null, new Date())).toBe(false)
+      expect(isSameDay(new Date(), null)).toBe(false)
+      expect(isSameDay(null, null)).toBe(false)
+    })
+  })
+})