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

package/app/components/CalendarInput.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import type { PikadayOptions } from 'pikaday'
-import type { ComponentPublicInstance } from 'vue'
-import { onMounted, ref, watch } from 'vue'
-
-import { usePikaday } from '~/composables/use-pikaday'
+import type { CalendarOptions } from '../composables/use-calendar'
+import { computed, ref, useId, watch } from 'vue'
+import { useCalendar } from '../composables/use-calendar'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */
-  modelValue: Date | string | number | null
-  /** All Pikaday options (except `field`) */
-  options?: Omit<PikadayOptions, 'field'>
+  modelValue?: Date | string | number | null
+  /** Calendar options */
+  options?: CalendarOptions
   /** If true, default to today when no value provided */
   autoDefault?: boolean
   placeholder?: string
@@ -32,145 +30,246 @@ const props = defineProps<{
   sm?: boolean
   xs?: boolean
 }>()
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Date | null): void
   (e: 'update:inputValue', v: string | null): void
 }>()
-const inputRef = ref<ComponentPublicInstance | null>(null)
-const inputValue = ref<string | null>(null)
-const visible = ref(false)
 
-const defaultOptions: Partial<PikadayOptions> = {
-  format: 'D MMM YYYY',
-}
-
-const { picker, createPicker } = usePikaday(
-  {
-    ...defaultOptions,
-    ...props.options,
-    bound: true,
-    field: undefined, // will be set below
-  },
-  handleSelect,
-  handleOpen,
-  handleClose,
-)
+const uniqueId = useId()
+const popoverId = `calendar-popover-${uniqueId}`
+const anchorName = `--calendar-anchor-${uniqueId}`
+const inputRef = ref<HTMLInputElement | null>(null)
+const popoverRef = ref<HTMLElement | null>(null)
 
-function handleSelect(date: Date) {
-  emit('update:modelValue', date)
-  inputValue.value = picker.value?.toString() ?? ''
-  emit('update:inputValue', inputValue.value)
-}
-function handleOpen() {
-  visible.value = true
-}
-function handleClose() {
-  visible.value = false
+// Parse date from various input types
+function parseDate(value: Date | string | number | null | undefined): Date | null {
+  if (!value) return null
+  if (value instanceof Date) return value
+  const d = new Date(value)
+  return Number.isNaN(d.getTime()) ? null : d
 }
 
-onMounted(async () => {
-  const inputEl = inputRef.value as HTMLInputElement | null
-  // Format and set the initial input value BEFORE initializing Pikaday
-  if (props.modelValue) {
-    let d: Date | null = null
-    if (props.modelValue instanceof Date) {
-      d = props.modelValue
-    }
-    else if (typeof props.modelValue === 'string') {
-      const tmp = new Date(props.modelValue)
-      if (!Number.isNaN(tmp.getTime())) {
-        d = tmp
-      }
-    }
-    if (d) {
-      const day = d.getDate()
-      const month = d.toLocaleString('en-US', { month: 'short' })
-      const year = d.getFullYear()
-      inputValue.value = `${day} ${month} ${year}`
-    }
-  }
-  if (inputEl) {
-    picker.value = await createPicker(inputEl)
-    // Do not call setDate here
-    if (picker.value && (picker.value as any).config?.bound === false) {
-      picker.value.hide()
-    }
-  }
+const initialDate = computed(() => {
+  const parsed = parseDate(props.modelValue)
+  if (parsed) return parsed
+  if (props.autoDefault) return new Date()
+  return null
 })
 
-function onFocus() {
-  if (picker.value) {
-    let d: Date | null = null
-    if (props.modelValue instanceof Date) {
-      d = props.modelValue
-    }
-    else if (typeof props.modelValue === 'string') {
-      const tmp = new Date(props.modelValue)
-      if (!Number.isNaN(tmp.getTime())) {
-        d = tmp
-      }
-    }
-    picker.value.setDate(d, true)
-  }
-}
+const {
+  selectedDate,
+  viewMonth,
+  viewYear,
+  monthName,
+  weekdayHeaders,
+  weekdayHeadersFull,
+  calendarDays,
+  prevMonth,
+  nextMonth,
+  selectDate,
+  goToDate,
+  formatDate,
+} = useCalendar(initialDate.value, props.options)
 
+// Input display value
+const inputValue = computed(() => formatDate('D MMM YYYY'))
+
+// Sync selectedDate back to modelValue
+watch(selectedDate, date => {
+  emit('update:modelValue', date)
+  emit('update:inputValue', formatDate('D MMM YYYY'))
+})
+
+// Watch for external modelValue changes
 watch(
   () => props.modelValue,
-  (val) => {
-    if (!picker.value) {
-      return
-    }
-    if (!visible.value) {
-      if (val instanceof Date) {
-        picker.value.setDate(val, true)
-        inputValue.value = picker.value.toString()
-      }
-      else if (typeof val === 'string') {
-        const d = new Date(val)
-        if (!Number.isNaN(d.getTime())) {
-          picker.value.setDate(d, true)
-          inputValue.value = picker.value.toString()
-        }
-      }
-      else {
-        picker.value.setDate(null, true)
-        inputValue.value = ''
-      }
+  newValue => {
+    const parsed = parseDate(newValue)
+    if (parsed && (!selectedDate.value || parsed.getTime() !== selectedDate.value.getTime())) {
+      selectDate(parsed)
+      goToDate(parsed)
+    } else if (!newValue && selectedDate.value) {
+      selectedDate.value = null
     }
   },
 )
+
+function handleDayClick(day: (typeof calendarDays.value)[0]) {
+  if (day.isDisabled) return
+  selectDate(day.date)
+  popoverRef.value?.hidePopover()
+}
+
+function handleClick() {
+  // Sync view to selected date when opening
+  if (selectedDate.value) {
+    goToDate(selectedDate.value)
+  }
+  popoverRef.value?.togglePopover()
+}
 </script>
 
 <template>
-  <input
-    ref="inputRef"
-    type="text"
-    :value="inputValue"
-    :placeholder="props.placeholder"
-    :disabled="props.disabled"
-    class="input"
-    :class="[
-      { validator: props.validator },
-      { 'input-primary': props.primary || props.color === 'primary' },
-      { 'input-secondary': props.secondary || props.color === 'secondary' },
-      { 'input-accent': props.accent || props.color === 'accent' },
-      { 'input-info': props.info || props.color === 'info' },
-      { 'input-success': props.success || props.color === 'success' },
-      { 'input-warning': props.warning || props.color === 'warning' },
-      { 'input-error': props.error || props.color === 'error' },
-      { 'input-ghost': props.ghost },
-      { 'input-xl': props.xl || props.size === 'xl' },
-      { 'input-lg': props.lg || props.size === 'lg' },
-      { 'input-md': props.md || props.size === 'md' },
-      { 'input-sm': props.sm || props.size === 'sm' },
-      { 'input-xs': props.xs || props.size === 'xs' },
-      { 'join-item': props.join },
-    ]"
-    v-bind="$attrs"
-    @focus="onFocus"
-    @input="e => {
-      const val = (e.target as HTMLInputElement).value
-      emit('update:inputValue', val)
-    }"
-  >
+  <div class="relative inline-block">
+    <input
+      ref="inputRef"
+      type="text"
+      readonly
+      :value="inputValue"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      class="input cursor-pointer"
+      :class="[
+        { validator: props.validator },
+        { 'input-primary': props.primary || props.color === 'primary' },
+        { 'input-secondary': props.secondary || props.color === 'secondary' },
+        { 'input-accent': props.accent || props.color === 'accent' },
+        { 'input-info': props.info || props.color === 'info' },
+        { 'input-success': props.success || props.color === 'success' },
+        { 'input-warning': props.warning || props.color === 'warning' },
+        { 'input-error': props.error || props.color === 'error' },
+        { 'input-ghost': props.ghost },
+        { 'input-xl': props.xl || props.size === 'xl' },
+        { 'input-lg': props.lg || props.size === 'lg' },
+        { 'input-md': props.md || props.size === 'md' },
+        { 'input-sm': props.sm || props.size === 'sm' },
+        { 'input-xs': props.xs || props.size === 'xs' },
+        { 'join-item': props.join },
+      ]"
+      :style="{ 'anchor-name': anchorName } as any"
+      v-bind="$attrs"
+      @click="handleClick"
+    />
+
+    <!-- Dropdown calendar using Popover API -->
+    <div
+      :id="popoverId"
+      ref="popoverRef"
+      popover="auto"
+      class="pika-single calendar-popover"
+      :style="{ 'position-anchor': anchorName } as any"
+    >
+      <div class="pika-lendar">
+        <!-- Header with navigation -->
+        <div class="pika-title">
+          <div class="pika-label">
+            {{ monthName }}
+            <select
+              class="pika-select pika-select-month"
+              :value="viewMonth"
+              @change="
+                e => {
+                  const target = e.target as HTMLSelectElement
+                  const newMonth = parseInt(target.value, 10)
+                  const d = new Date(viewYear, newMonth, 1)
+                  goToDate(d)
+                }
+              "
+            >
+              <option
+                v-for="(m, i) in [
+                  'January',
+                  'February',
+                  'March',
+                  'April',
+                  'May',
+                  'June',
+                  'July',
+                  'August',
+                  'September',
+                  'October',
+                  'November',
+                  'December',
+                ]"
+                :key="i"
+                :value="i"
+              >
+                {{ m }}
+              </option>
+            </select>
+          </div>
+          <div class="pika-label">
+            {{ viewYear }}
+            <select
+              class="pika-select pika-select-year"
+              :value="viewYear"
+              @change="
+                e => {
+                  const target = e.target as HTMLSelectElement
+                  const newYear = parseInt(target.value, 10)
+                  const d = new Date(newYear, viewMonth, 1)
+                  goToDate(d)
+                }
+              "
+            >
+              <option v-for="y in Array.from({ length: 21 }, (_, i) => viewYear - 10 + i)" :key="y" :value="y">
+                {{ y }}
+              </option>
+            </select>
+          </div>
+          <button type="button" class="pika-prev" @click="prevMonth">Previous Month</button>
+          <button type="button" class="pika-next" @click="nextMonth">Next Month</button>
+        </div>
+
+        <!-- Calendar grid -->
+        <table class="pika-table" role="grid">
+          <thead>
+            <tr>
+              <th v-for="(day, i) in weekdayHeaders" :key="i" scope="col">
+                <abbr :title="weekdayHeadersFull[i]">{{ day }}</abbr>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="week in 6" :key="week" class="pika-row">
+              <td
+                v-for="dayIndex in 7"
+                :key="dayIndex"
+                :class="{
+                  'is-today': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isToday,
+                  'is-selected': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected,
+                  'is-disabled': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled,
+                  'is-outside-current-month': calendarDays[(week - 1) * 7 + dayIndex - 1]?.isOutsideMonth,
+                }"
+                :aria-selected="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isSelected"
+              >
+                <button
+                  type="button"
+                  class="pika-button pika-day"
+                  :disabled="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled"
+                  @click="handleDayClick(calendarDays[(week - 1) * 7 + dayIndex - 1]!)"
+                >
+                  {{ calendarDays[(week - 1) * 7 + dayIndex - 1]?.day }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style>
+.calendar-popover[popover] {
+  position-area: block-end span-inline-end;
+  position-try-fallbacks:
+    flip-block,
+    flip-inline,
+    flip-block flip-inline;
+  margin: 0;
+  margin-top: 0.25rem;
+  /* Reset default popover styles */
+  border: none;
+  inset: auto;
+}
+
+.calendar-popover[popover]:popover-open {
+  position: fixed;
+}
+
+.calendar-popover[popover]:not(:popover-open) {
+  display: none;
+}
+</style>

package/app/components/CalendarSkeleton.vue

@@ -1,17 +1,58 @@
 <script setup lang="ts">
 import Skeleton from './Skeleton.vue'
 
-const { numberOfMonths = 1 } = defineProps<{
+const props = defineProps<{
   numberOfMonths?: number
+  date?: Date
+  firstDay?: number // 0 = Sunday, 1 = Monday, etc. (matches Pikaday's firstDay option)
 }>()
+
+// Calculate the number of weeks needed for a given month
+function getWeeksInMonth(date: Date, weekStartDay: number = 0): number {
+  const year = date.getFullYear()
+  const month = date.getMonth()
+
+  // Get first day of month
+  const firstDay = new Date(year, month, 1)
+  const firstDayOfWeek = firstDay.getDay()
+
+  // Get last day of month
+  const lastDay = new Date(year, month + 1, 0)
+  const daysInMonth = lastDay.getDate()
+
+  // Calculate offset based on what day the week starts on
+  // If week starts on Monday (1) and month starts on Sunday (0), offset is 6
+  // If week starts on Sunday (0) and month starts on Sunday (0), offset is 0
+  const offset = (firstDayOfWeek - weekStartDay + 7) % 7
+
+  // Calculate total cells needed (days in month + offset from first day)
+  const totalCells = daysInMonth + offset
+
+  // Return number of weeks (rows) needed
+  return Math.ceil(totalCells / 7)
+}
+
+// Calculate weeks for each month being displayed
+const weeksPerMonth = computed(() => {
+  const baseDate = props.date || new Date()
+  const weekStartDay = props.firstDay ?? 0
+  const weeks: number[] = []
+
+  for (let i = 0; i < (props.numberOfMonths || 1); i++) {
+    const monthDate = new Date(baseDate.getFullYear(), baseDate.getMonth() + i, 1)
+    weeks.push(getWeeksInMonth(monthDate, weekStartDay))
+  }
+
+  return weeks
+})
 </script>
 
 <template>
   <Skeleton col class="bg-base-200 rounded-box">
     <div
-      v-for="(month, idx) in numberOfMonths"
-      :key="`calendar-${month}`"
-      class="w-[270px] h-[270px] p-3 mx-auto flex flex-col gap-2"
+      v-for="(weeks, idx) in weeksPerMonth"
+      :key="`calendar-${idx}`"
+      class="w-[270px] px-3 py-[14px] mx-auto flex flex-col gap-2"
       :class="{
         '-mt-3.5': idx > 0,
       }"
@@ -28,17 +69,17 @@ const { numberOfMonths = 1 } = defineProps<{
         <span
           class="size-4 rounded-full bg-base-300 inline-block"
           :class="{
-            'bg-base-300': idx === numberOfMonths - 1,
-            'bg-transparent': idx !== numberOfMonths - 1,
+            'bg-base-300': idx === weeksPerMonth.length - 1,
+            'bg-transparent': idx !== weeksPerMonth.length - 1,
           }"
         />
       </Flex>
-      <Flex col grow justify-between class="h-full">
-        <div class="grid grid-cols-7 gap-[4px] mb-4 flex-shrink-0">
+      <Flex col class="h-full">
+        <div class="grid grid-cols-7 gap-[4px] mb-3 flex-shrink-0">
           <span v-for="d in 7" :key="`dow-${d}`" class="size-4 rounded-full bg-base-300 mx-auto block" />
         </div>
-        <div class="grid grid-cols-7 gap-[4px] flex-grow items-center">
-          <span v-for="i in 35" :key="`day-${i}`" class="size-7 rounded-full bg-base-300 block mx-auto" />
+        <div class="grid grid-cols-7 gap-y-[8px] gap-x-[4px]">
+          <span v-for="i in weeks * 7" :key="`day-${i}`" class="size-7 rounded-full bg-base-300 block mx-auto" />
         </div>
       </Flex>
     </div>

package/app/components/Card.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'div', ...props } = defineProps<{
-  is?: any
+  is?: string
   border?: boolean
   dash?: boolean
   side?: boolean
@@ -12,11 +18,23 @@ const { is = 'div', ...props } = defineProps<{
   sm?: boolean
   xs?: boolean
 }>()
+
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (is === 'NuxtLink') return NuxtLink
+  if (is === 'RouterLink') return RouterLink
+  return is
+})
 </script>
 
 <template>
   <component
-    :is="is" class="card" :class="{
+    :is="resolvedComponent"
+    v-bind="$attrs"
+    class="card"
+    :class="{
       'card-border': props.border,
       'card-side': props.side,
       'image-full': props.imageFull,

package/app/components/CardActions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
 const { is = 'div' } = defineProps<{
   is?: string

package/app/components/CardBody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
 const { is = 'div' } = defineProps<{
   is?: string

package/app/components/CardTitle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
 const { is = 'div' } = defineProps<{ is?: string }>()
 </script>

package/app/components/Carousel.vue

@@ -11,7 +11,8 @@ const { snapTo, center, end, vertical } = defineProps<{
 
 <template>
   <div
-    class="carousel" :class="{
+    class="carousel"
+    :class="{
       'carousel-center': center || snapTo === 'center',
       'carousel-end': end || snapTo === 'end',
       'carousel-horizontal': horizontal || orientation === 'horizontal',

package/app/components/Chat.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const { pre, align = 'start', start, end } = defineProps<{
+const {
+  pre,
+  align = 'start',
+  start,
+  end,
+} = defineProps<{
   pre?: boolean
   align?: string
   start?: boolean

package/app/components/Checkbox.vue

@@ -47,5 +47,5 @@ const currentValue = computed({
       'checkbox-lg': lg || size === 'lg',
       'theme-controller': themeController,
     }"
-  >
+  />
 </template>

package/app/components/Collapse.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { computed, inject, provide, ref, useId, watch } from 'vue'
 
 const props = defineProps<{
+  id?: string
   variant?: 'arrow' | 'plus'
   arrow?: boolean
   plus?: boolean
@@ -11,19 +12,49 @@ const props = defineProps<{
   value?: any
 }>()
 
+const isOpen = defineModel('open', { default: false })
+
 const accordionValue = inject('accordion-value', ref(null))
 const useAccordion = accordionValue.value !== null
 
+// Internal state for toggle mode
+const internalChecked = ref(props.open || false)
+
+// Generate unique ID for checkbox
+const checkboxId = props.id || `collapse-${useId()}`
+provide('collapseCheckboxId', checkboxId)
+provide('collapseToggle', props.toggle || useAccordion)
+
+// Sync internal state with modelValue
+watch(
+  () => isOpen.value,
+  newVal => {
+    internalChecked.value = newVal
+  },
+)
+
+watch(internalChecked, newVal => {
+  isOpen.value = newVal
+})
+
 function handleClick() {
+  // Only handle clicks for accordion mode
   if (useAccordion) {
     accordionValue.value = props.value
   }
 }
+
+const isChecked = computed(() => {
+  if (useAccordion) {
+    return accordionValue.value === props.value
+  }
+  return internalChecked.value
+})
 </script>
 
 <template>
   <div
-    tabindex="0"
+    :tabindex="props.toggle || useAccordion ? undefined : 0"
     class="collapse"
     :class="[
       { 'collapse-arrow': props.arrow || props.variant === 'arrow' },
@@ -31,13 +62,15 @@ function handleClick() {
       { 'collapse-open': (props.open && !props.close) || (useAccordion && accordionValue === props.value) },
       { 'collapse-close': props.close },
     ]"
-    @click="handleClick"
+    @click="useAccordion ? handleClick : undefined"
   >
     <input
       v-if="props.toggle || useAccordion"
+      :id="checkboxId"
+      v-model="internalChecked"
       :type="useAccordion ? 'radio' : 'checkbox'"
-      :checked="useAccordion ? accordionValue === props.value : undefined"
-    >
+      :checked="useAccordion ? isChecked : undefined"
+    />
     <slot />
   </div>
 </template>

package/app/components/CollapseTitle.vue

@@ -1,5 +1,15 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const checkboxId = inject('collapseCheckboxId', null)
+const hasToggle = inject('collapseToggle', false)
+</script>
+
 <template>
-  <div class="collapse-title">
+  <label v-if="hasToggle && checkboxId" :for="checkboxId" class="collapse-title">
+    <slot />
+  </label>
+  <div v-else class="collapse-title">
     <slot />
   </div>
 </template>