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

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)
+    })
+  })
+})

package/app/composables/use-calendar.ts

@@ -0,0 +1,288 @@
+import { computed, ref } from 'vue'
+
+export interface CalendarOptions {
+  /** First day of week: 0 = Sunday, 1 = Monday, etc. */
+  firstDay?: number
+  /** Minimum selectable date */
+  minDate?: Date | null
+  /** Maximum selectable date */
+  maxDate?: Date | null
+  /** Locale for formatting (default: 'en-US') */
+  locale?: string
+  /** Short month names */
+  monthsShort?: string[]
+  /** Full month names */
+  months?: string[]
+  /** Short weekday names */
+  weekdaysShort?: string[]
+  /** Full weekday names */
+  weekdays?: string[]
+}
+
+export interface CalendarDay {
+  date: Date
+  day: number
+  month: number
+  year: number
+  isToday: boolean
+  isSelected: boolean
+  isDisabled: boolean
+  isOutsideMonth: boolean
+}
+
+const DEFAULT_MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+const DEFAULT_MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const DEFAULT_WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+const DEFAULT_WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+export function useCalendar(initialDate: Date | null = null, options: CalendarOptions = {}) {
+  const {
+    firstDay = 0,
+    minDate = null,
+    maxDate = null,
+    months = DEFAULT_MONTHS,
+    monthsShort = DEFAULT_MONTHS_SHORT,
+    weekdays = DEFAULT_WEEKDAYS,
+    weekdaysShort = DEFAULT_WEEKDAYS_SHORT,
+  } = options
+
+  // The currently selected date
+  const selectedDate = ref<Date | null>(initialDate)
+
+  // The month/year currently being viewed
+  const viewDate = ref(initialDate ? new Date(initialDate) : new Date())
+
+  // Current view month/year
+  const viewMonth = computed(() => viewDate.value.getMonth())
+  const viewYear = computed(() => viewDate.value.getFullYear())
+
+  // Month/year display strings
+  const monthName = computed(() => months[viewMonth.value])
+  const monthNameShort = computed(() => monthsShort[viewMonth.value])
+
+  // Weekday headers adjusted for firstDay (short names for display)
+  const weekdayHeaders = computed(() => {
+    const headers: string[] = []
+    for (let i = 0; i < 7; i++) {
+      headers.push(weekdaysShort[(i + firstDay) % 7] ?? '')
+    }
+    return headers
+  })
+
+  // Full weekday names for accessibility (title attributes, screen readers)
+  const weekdayHeadersFull = computed(() => {
+    const headers: string[] = []
+    for (let i = 0; i < 7; i++) {
+      headers.push(weekdays[(i + firstDay) % 7] ?? '')
+    }
+    return headers
+  })
+
+  // Get days in a month
+  function getDaysInMonth(year: number, month: number): number {
+    return new Date(year, month + 1, 0).getDate()
+  }
+
+  // Check if two dates are the same day
+  function isSameDay(a: Date | null, b: Date | null): boolean {
+    if (!a || !b) return false
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+  }
+
+  // Check if a date is today
+  function isToday(date: Date): boolean {
+    return isSameDay(date, new Date())
+  }
+
+  // Check if a date is disabled
+  function isDisabled(date: Date): boolean {
+    if (minDate && date < minDate) return true
+    if (maxDate && date > maxDate) return true
+    return false
+  }
+
+  // Generate calendar days for the current view
+  const calendarDays = computed<CalendarDay[]>(() => {
+    const year = viewYear.value
+    const month = viewMonth.value
+    const days: CalendarDay[] = []
+
+    // First day of the month
+    const firstOfMonth = new Date(year, month, 1)
+    const startDayOfWeek = firstOfMonth.getDay()
+
+    // Calculate offset based on firstDay option
+    const offset = (startDayOfWeek - firstDay + 7) % 7
+
+    // Days from previous month
+    const prevMonth = month === 0 ? 11 : month - 1
+    const prevYear = month === 0 ? year - 1 : year
+    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth)
+
+    for (let i = offset - 1; i >= 0; i--) {
+      const day = daysInPrevMonth - i
+      const date = new Date(prevYear, prevMonth, day)
+      days.push({
+        date,
+        day,
+        month: prevMonth,
+        year: prevYear,
+        isToday: isToday(date),
+        isSelected: isSameDay(date, selectedDate.value),
+        isDisabled: isDisabled(date),
+        isOutsideMonth: true,
+      })
+    }
+
+    // Days in current month
+    const daysInMonth = getDaysInMonth(year, month)
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, month, day)
+      days.push({
+        date,
+        day,
+        month,
+        year,
+        isToday: isToday(date),
+        isSelected: isSameDay(date, selectedDate.value),
+        isDisabled: isDisabled(date),
+        isOutsideMonth: false,
+      })
+    }
+
+    // Days from next month to fill the grid (always 6 rows = 42 cells)
+    const nextMonth = month === 11 ? 0 : month + 1
+    const nextYear = month === 11 ? year + 1 : year
+    const remainingDays = 42 - days.length
+
+    for (let day = 1; day <= remainingDays; day++) {
+      const date = new Date(nextYear, nextMonth, day)
+      days.push({
+        date,
+        day,
+        month: nextMonth,
+        year: nextYear,
+        isToday: isToday(date),
+        isSelected: isSameDay(date, selectedDate.value),
+        isDisabled: isDisabled(date),
+        isOutsideMonth: true,
+      })
+    }
+
+    return days
+  })
+
+  // Navigation
+  function prevMonth() {
+    const d = new Date(viewDate.value)
+    d.setMonth(d.getMonth() - 1)
+    viewDate.value = d
+  }
+
+  function nextMonth() {
+    const d = new Date(viewDate.value)
+    d.setMonth(d.getMonth() + 1)
+    viewDate.value = d
+  }
+
+  function goToMonth(month: number) {
+    const d = new Date(viewDate.value)
+    d.setMonth(month)
+    viewDate.value = d
+  }
+
+  function goToYear(year: number) {
+    const d = new Date(viewDate.value)
+    d.setFullYear(year)
+    viewDate.value = d
+  }
+
+  function goToDate(date: Date) {
+    viewDate.value = new Date(date)
+  }
+
+  function goToToday() {
+    viewDate.value = new Date()
+  }
+
+  // Selection
+  function selectDate(date: Date) {
+    if (isDisabled(date)) return
+    selectedDate.value = new Date(date)
+  }
+
+  function clearSelection() {
+    selectedDate.value = null
+  }
+
+  // Format selected date
+  function formatDate(format: string = 'D MMM YYYY'): string {
+    if (!selectedDate.value) return ''
+
+    const d = selectedDate.value
+    const day = d.getDate()
+    const month = d.getMonth()
+    const year = d.getFullYear()
+
+    return format
+      .replace('YYYY', String(year))
+      .replace('YY', String(year).slice(-2))
+      .replace('MMMM', months[month] ?? '')
+      .replace('MMM', monthsShort[month] ?? '')
+      .replace('MM', String(month + 1).padStart(2, '0'))
+      .replace('M', String(month + 1))
+      .replace('DD', String(day).padStart(2, '0'))
+      .replace('D', String(day))
+  }
+
+  return {
+    // State
+    selectedDate,
+    viewDate,
+    viewMonth,
+    viewYear,
+
+    // Display
+    monthName,
+    monthNameShort,
+    weekdayHeaders,
+    weekdayHeadersFull,
+    calendarDays,
+
+    // Navigation
+    prevMonth,
+    nextMonth,
+    goToMonth,
+    goToYear,
+    goToDate,
+    goToToday,
+
+    // Selection
+    selectDate,
+    clearSelection,
+
+    // Formatting
+    formatDate,
+
+    // Utilities
+    isSameDay,
+    isToday,
+    isDisabled,
+  }
+}

package/app/composables/use-daisy-theme.ts

@@ -0,0 +1,140 @@
+import type { Ref } from 'vue'
+import { usePreferredDark } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+// Type for a theme object
+export interface DaisyThemeMeta {
+  theme: string
+  cssVars?: string
+  name?: string
+  [key: string]: any
+}
+
+export type DaisyThemeInput = string | DaisyThemeMeta
+
+interface DaisyThemeOptions {
+  themes: DaisyThemeInput[]
+  defaultTheme?: string
+}
+
+function normalizeTheme(input: DaisyThemeInput): DaisyThemeMeta {
+  if (typeof input === 'string') {
+    return { theme: input }
+  }
+  return { ...input }
+}
+
+// SSR state using Nuxt's useState for proper hydration
+function useSSRState<T>(key: string, init: () => T): Ref<T> {
+  // Use Nuxt's useState if available (works on both server and client with proper hydration)
+  if (typeof useState !== 'undefined') {
+    try {
+      return useState(key, init)
+    } catch {
+      // Fallback if useState is not available
+    }
+  }
+  return ref(init()) as Ref<T>
+}
+
+// Global storage ref - set once in app.vue, reused elsewhere
+let globalStorageRef: Ref<string> | null = null
+
+/**
+ * useDaisyTheme composable
+ * @param storage Optional. Ref factory for persistence (e.g., useCookie, useLocalStorage, or ref). Defaults to ref.
+ * @param options Optional. Theme options (themes, defaultTheme, etc.).
+ *
+ * Calling with arguments (in app.vue/root): initializes global state.
+ * Calling with no arguments (in any component): reuses global state.
+ */
+export function useDaisyTheme(storage?: <T>(key: string, initial: T) => Ref<T>, options?: DaisyThemeOptions) {
+  // Use SSR-safe state that hydrates properly
+  const themes = useSSRState('daisy-themes', () => options?.themes?.map(normalizeTheme) ?? [])
+
+  // If options provided, update themes
+  if (options?.themes) {
+    themes.value = options.themes.map(normalizeTheme)
+  }
+
+  // Theme name - use provided storage or reuse global ref
+  let theme: Ref<string>
+  if (storage) {
+    // Initialize with provided storage (e.g., useCookie in app.vue)
+    theme = storage('theme', options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
+    globalStorageRef = theme
+  } else if (globalStorageRef) {
+    // Reuse the existing storage ref
+    theme = globalStorageRef
+  } else {
+    // Fallback to SSR state if no storage was ever provided
+    theme = useSSRState('daisy-theme', () => options?.defaultTheme ?? themes.value[0]?.theme ?? 'light')
+    globalStorageRef = theme
+  }
+
+  // System dark mode
+  const preferredDark = usePreferredDark()
+
+  // Compute the effective theme for UI/DOM
+  const effectiveTheme = computed(() => {
+    if (theme.value === 'system') {
+      return preferredDark.value ? 'dark' : 'light'
+    }
+    return theme.value
+  })
+
+  // Set theme by name
+  function setTheme(name: string) {
+    if (themes.value.some(t => t.theme === name) || name === 'system') {
+      theme.value = name
+    }
+  }
+
+  // Cycle to next theme
+  function cycleTheme() {
+    const names = themes.value.map(t => t.theme)
+    if (!names.length) {
+      return // Guard: no themes
+    }
+    const idx = names.indexOf(theme.value)
+    const nextIdx = (idx + 1) % names.length
+    // Only set if defined (TypeScript safety)
+    if (typeof names[nextIdx] === 'string') {
+      setTheme(names[nextIdx]!)
+    }
+  }
+
+  // Register a new theme
+  function registerTheme(newTheme: DaisyThemeInput) {
+    const meta = normalizeTheme(newTheme)
+    if (!themes.value.some(t => t.theme === meta.theme)) {
+      themes.value.push(meta)
+    }
+  }
+
+  // Remove a theme by name
+  function removeTheme(name: string) {
+    const idx = themes.value.findIndex(t => t.theme === name)
+    if (idx !== -1) {
+      themes.value.splice(idx, 1)
+      // If current theme was removed, fallback to first
+      if (theme.value === name) {
+        theme.value = themes.value[0]?.theme ?? 'light'
+      }
+    }
+  }
+
+  // Get the current theme object
+  const themeInfo = computed(() => themes.value.find(t => t.theme === theme.value))
+
+  return {
+    themes,
+    theme,
+    effectiveTheme,
+    themeInfo,
+    setTheme,
+    cycleTheme,
+    registerTheme,
+    removeTheme,
+  }
+}