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

package/app/components/Accordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch } from 'vue';
+import { provide, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -7,10 +7,13 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 
 const value = ref(props.modelValue)
-watch(() => props.modelValue, (val) => {
-  value.value = val
-})
-watch(value, (val) => {
+watch(
+  () => props.modelValue,
+  val => {
+    value.value = val
+  },
+)
+watch(value, val => {
   if (props.modelValue !== val) {
     emit('update:modelValue', val)
   }

package/app/components/Alert.vue

@@ -16,7 +16,8 @@ const props = defineProps<{
 
 <template>
   <div
-    class="alert" :class="{
+    class="alert"
+    :class="{
       'alert-outline': props.outline,
       'alert-dash': props.dash,
       'alert-soft': props.soft,

package/app/components/Avatar.vue

@@ -51,7 +51,7 @@ const maskShapeKeys = [
   'mask-half-2',
 ] as const
 
-type AvatarClassKey = typeof maskShapeKeys[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
+type AvatarClassKey = (typeof maskShapeKeys)[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
 
 const avatarClasses = computed<Record<AvatarClassKey, boolean>>(() => {
   const mask: Record<AvatarClassKey, boolean> = {
@@ -86,18 +86,17 @@ const color = computed(() => {
 })
 
 function contrastingColor(color: any) {
-  return (luma(color) >= 155) ? '000' : 'fff'
+  return luma(color) >= 155 ? '000' : 'fff'
 }
 // color can be a hx string or an array of RGB values 0-255
 function luma(color: any) {
-  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
-  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
+  const rgb = typeof color === 'string' ? hexToRGBArray(color) : color
+  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2] // SMPTE C, Rec. 709 weightings
 }
 function hexToRGBArray(color: any) {
   if (color.length === 3) {
     color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
-  }
-  else if (color.length !== 6) {
+  } else if (color.length !== 6) {
     throw new Error(`Invalid hex color: ${color}`)
   }
   const rgb = []
@@ -110,7 +109,11 @@ function hexToRGBArray(color: any) {
 
 <template>
   <div class="avatar">
-    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[avatarClasses, maskClasses]">
+    <Mask
+      :style="{ backgroundColor, color }"
+      class="w-full h-full avatar-mask aspect-square"
+      :class="[avatarClasses, maskClasses]"
+    >
       <slot />
     </Mask>
   </div>

package/app/components/AvatarGroup.vue

@@ -8,8 +8,12 @@ const props = defineProps<{
 
 <template>
   <div
-    class="avatar-group" :class="{
-      'flex-row': props.orientation === 'horizontal' || props.horizontal || (!props.orientation && !props.vertical && !props.horizontal),
+    class="avatar-group"
+    :class="{
+      'flex-row':
+        props.orientation === 'horizontal' ||
+        props.horizontal ||
+        (!props.orientation && !props.vertical && !props.horizontal),
       'flex-col': props.orientation === 'vertical' || props.vertical,
     }"
   >

package/app/components/Badge.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'div', ...props } = defineProps<{
   is?: string
   outline?: boolean
@@ -23,11 +29,23 @@ const { is = 'div', ...props } = defineProps<{
   warning?: boolean
   error?: 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="badge" :class="{
+    :is="resolvedComponent"
+    v-bind="$attrs"
+    class="badge"
+    :class="{
       'badge-outline': props.outline,
       'badge-ghost': props.ghost,
       'badge-soft': props.soft,

package/app/components/Button.vue

@@ -1,50 +1,71 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  is?: string
-  join?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  link?: boolean
-  glass?: boolean
-  outline?: boolean
-  dash?: boolean
-  soft?: boolean
-  disabled?: boolean
-
-  shape?: 'circle' | 'square' | 'wide' | 'block'
-  circle?: boolean
-  square?: boolean
-  wide?: boolean
-  block?: boolean
-
-  noAnimation?: boolean
-  active?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  type?: 'button' | 'submit' | 'reset'
-}>()
+import { computed, resolveComponent } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    join?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    ghost?: boolean
+    link?: boolean
+    glass?: boolean
+    outline?: boolean
+    dash?: boolean
+    soft?: boolean
+    disabled?: boolean
+
+    shape?: 'circle' | 'square' | 'wide' | 'block'
+    circle?: boolean
+    square?: boolean
+    wide?: boolean
+    block?: boolean
+
+    noAnimation?: boolean
+    active?: boolean
+
+    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    type: 'button',
+  },
+)
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
 
 // Accessibility: Determine if rendering a native button
 const isButton = computed(() => (props.is || 'button') === 'button')
 
+// Resolve the component to render
+const resolvedComponent = computed(() => {
+  if (!props.is || props.is === 'button' || props.is === 'a') {
+    return props.is || 'button'
+  }
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is
+})
+
 // Accessibility: Keyboard event handler for custom elements
 function onKeydown(e: KeyboardEvent) {
   if (props.disabled) {
@@ -60,8 +81,9 @@ function onKeydown(e: KeyboardEvent) {
 
 <template>
   <component
-    :is="is || 'button'"
-    :type="type"
+    :is="resolvedComponent"
+    v-bind="$attrs"
+    :type="isButton ? type : undefined"
     :disabled="isButton && disabled ? true : undefined"
     :aria-disabled="!isButton && disabled ? true : undefined"
     :tabindex="!isButton ? (disabled ? -1 : 0) : undefined"
@@ -88,7 +110,7 @@ function onKeydown(e: KeyboardEvent) {
       'text-warning': !disabled && (warning || color === 'warning') && link,
       'text-error': !disabled && (error || color === 'error') && link,
 
-      'glass': !disabled && glass,
+      glass: !disabled && glass,
 
       'btn-circle': circle || shape === 'circle',
       'btn-square': square || shape === 'square',

package/app/components/Calendar.vue

@@ -1,66 +1,175 @@
 <script setup lang="ts">
-import type { PikadayOptions } from 'pikaday'
-import { onMounted, ref } from 'vue'
-import { usePikaday } from '~/composables/use-pikaday'
-import CalendarSkeleton from './CalendarSkeleton.vue'
+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
-  /** All Pikaday options (except `container` and `bound`) */
-  options?: Omit<PikadayOptions, 'container' | 'bound'>
+  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
 }>()
 
-const containerRef = ref<HTMLElement | null>(null)
-const loading = ref(true)
-
-const defaultOptions: Partial<PikadayOptions> = {
-  format: 'D MMM YYYY',
+// 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
 }
 
-function handleSelect(date: Date) {
+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)
-}
+})
 
-const { createPicker } = usePikaday(
-  {
-    ...defaultOptions,
-    ...props.options,
-    bound: false,
+// 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)
+    }
   },
-  handleSelect,
 )
 
-onMounted(async () => {
-  if (containerRef.value) {
-    const picker = await createPicker(containerRef.value)
-    if (picker && picker.el && !containerRef.value.contains(picker.el)) {
-      containerRef.value.appendChild(picker.el)
-    }
-    loading.value = false
-  }
-})
+function handleDayClick(day: (typeof calendarDays.value)[0]) {
+  if (day.isDisabled) return
+  selectDate(day.date)
+}
 </script>
 
 <template>
-  <div class="relative w-[270px] h-[270px]">
-    <div class="absolute inset-0">
-      <CalendarSkeleton :number-of-months="options?.numberOfMonths ?? 1" :class="loading ? '' : 'opacity-0 pointer-events-none transition-opacity duration-300'" />
+  <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 ref="containerRef" class="absolute inset-0 inline-block w-full h-full" />
-    <span class="pika-single hidden" />
   </div>
 </template>
-
-<style>
-.has-event {
-  .pika-button {
-    color: var(--color-primary);
-  }
-}
-</style>