daisy-ui-kit 5.0.3 → 5.0.5

package/app/components/Calendar.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import type { CalendarOptions } from '../composables/use-calendar'
-import { computed, watch } from 'vue'
-import { useCalendar } from '../composables/use-calendar'
-
-const props = defineProps<{
-  /** Bound value: Date object or ISO string or null */
-  modelValue?: Date | string | null
-  /** Calendar options */
-  options?: CalendarOptions
-  /** If true, default to today when no value provided */
-  autoDefault?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Date | null): void
-}>()
-
-// Parse initial date from modelValue
-function parseDate(value: Date | string | 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
-}
-
-const initialDate = computed(() => {
-  const parsed = parseDate(props.modelValue)
-  if (parsed) return parsed
-  if (props.autoDefault) return new Date()
-  return null
-})
-
-const {
-  selectedDate,
-  viewMonth,
-  viewYear,
-  monthName,
-  weekdayHeaders,
-  weekdayHeadersFull,
-  calendarDays,
-  prevMonth,
-  nextMonth,
-  selectDate,
-  goToDate,
-} = useCalendar(initialDate.value, props.options)
-
-// Sync selectedDate back to modelValue
-watch(selectedDate, date => {
-  emit('update:modelValue', date)
-})
-
-// Watch for external modelValue changes
-watch(
-  () => props.modelValue,
-  newValue => {
-    const parsed = parseDate(newValue)
-    if (parsed && (!selectedDate.value || parsed.getTime() !== selectedDate.value.getTime())) {
-      selectDate(parsed)
-      goToDate(parsed)
-    }
-  },
-)
-
-function handleDayClick(day: (typeof calendarDays.value)[0]) {
-  if (day.isDisabled) return
-  selectDate(day.date)
-}
-</script>
-
-<template>
-  <div class="pika-single">
-    <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"
-              :data-day="calendarDays[(week - 1) * 7 + dayIndex - 1]?.day"
-            >
-              <button
-                type="button"
-                class="pika-button pika-day"
-                :disabled="calendarDays[(week - 1) * 7 + dayIndex - 1]?.isDisabled"
-                :data-pika-year="calendarDays[(week - 1) * 7 + dayIndex - 1]?.year"
-                :data-pika-month="calendarDays[(week - 1) * 7 + dayIndex - 1]?.month"
-                :data-pika-day="calendarDays[(week - 1) * 7 + dayIndex - 1]?.day"
-                @click="handleDayClick(calendarDays[(week - 1) * 7 + dayIndex - 1]!)"
-              >
-                {{ calendarDays[(week - 1) * 7 + dayIndex - 1]?.day }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>

package/app/components/CalendarInput.vue

@@ -1,275 +0,0 @@
-<script setup lang="ts">
-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
-  /** Calendar options */
-  options?: CalendarOptions
-  /** If true, default to today when no value provided */
-  autoDefault?: boolean
-  placeholder?: string
-  disabled?: boolean
-  validator?: boolean
-  join?: boolean
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  ghost?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Date | null): void
-  (e: 'update:inputValue', v: string | null): void
-}>()
-
-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)
-
-// 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
-}
-
-const initialDate = computed(() => {
-  const parsed = parseDate(props.modelValue)
-  if (parsed) return parsed
-  if (props.autoDefault) return new Date()
-  return null
-})
-
-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,
-  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>
-  <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,87 +0,0 @@
-<script setup lang="ts">
-import Skeleton from './Skeleton.vue'
-
-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="(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,
-      }"
-    >
-      <Flex justify-between items-center class="mb-3 px-2">
-        <span
-          class="size-4 rounded-full bg-base-300 inline-block"
-          :class="{
-            'bg-base-300': idx === 0,
-            'bg-transparent': idx !== 0,
-          }"
-        />
-        <span class="h-5 w-20 rounded-full bg-base-300 inline-block" />
-        <span
-          class="size-4 rounded-full bg-base-300 inline-block"
-          :class="{
-            'bg-base-300': idx === weeksPerMonth.length - 1,
-            'bg-transparent': idx !== weeksPerMonth.length - 1,
-          }"
-        />
-      </Flex>
-      <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-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>
-  </Skeleton>
-</template>

package/app/components/Card.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const { is = 'div', ...props } = defineProps<{
-  is?: string
-  border?: boolean
-  dash?: boolean
-  side?: boolean
-  imageFull?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  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="resolvedComponent"
-    v-bind="$attrs"
-    class="card"
-    :class="{
-      'card-border': props.border,
-      'card-side': props.side,
-      'image-full': props.imageFull,
-
-      'card-xl': props.xl || props.size === 'xl',
-      'card-lg': props.lg || props.size === 'lg',
-      'card-md': props.md || props.size === 'md',
-      'card-sm': props.sm || props.size === 'sm',
-      'card-xs': props.xs || props.size === 'xs',
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/CardActions.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-const { is = 'div' } = defineProps<{
-  is?: string
-}>()
-</script>
-
-<template>
-  <Text :is="is" class="card-actions">
-    <slot />
-  </Text>
-</template>

package/app/components/CardBody.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-const { is = 'div' } = defineProps<{
-  is?: string
-}>()
-</script>
-
-<template>
-  <Text :is="is" class="card-body">
-    <slot />
-  </Text>
-</template>

package/app/components/CardTitle.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-const { is = 'div' } = defineProps<{ is?: string }>()
-</script>
-
-<template>
-  <Text :is="is" class="card-title">
-    <slot />
-  </Text>
-</template>

package/app/components/Carousel.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const { snapTo, center, end, vertical } = defineProps<{
-  snapTo?: 'center' | 'end'
-  center?: boolean
-  end?: boolean
-  orientation?: 'horizontal' | 'vertical'
-  horizontal?: boolean
-  vertical?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="carousel"
-    :class="{
-      'carousel-center': center || snapTo === 'center',
-      'carousel-end': end || snapTo === 'end',
-      'carousel-horizontal': horizontal || orientation === 'horizontal',
-      'carousel-vertical': vertical || orientation === 'vertical',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/CarouselItem.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="carousel-item">
-    <slot />
-  </div>
-</template>

package/app/components/Chat.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const {
-  pre,
-  align = 'start',
-  start,
-  end,
-} = defineProps<{
-  pre?: boolean
-  align?: string
-  start?: boolean
-  end?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="chat"
-    :class="{
-      'chat-start': start || (!end && align === 'start'),
-      'chat-end': end || align === 'end',
-      'whitespace-pre': pre,
-    }"
-  >
-    <slot />
-  </div>
-</template>