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

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>

package/app/components/Countdown.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-const { is = 'span' } = defineProps<{
+const props = defineProps<{
   is?: any
 }>()
 
-const tag = computed(() => is)
+const tag = computed(() => props.is || 'span')
 </script>
 
 <template>

package/app/components/CountdownTimers.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useIntervalFn } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 const { durationInSeconds = 0, untilDate } = defineProps<{
   durationInSeconds?: number
@@ -29,7 +29,7 @@ useIntervalFn(() => {
   timeLeft.value = calcTimeLeft()
 }, 1000)
 
-watch(timeLeft, (val) => {
+watch(timeLeft, val => {
   if (val === 0) {
     emit('done')
   }
@@ -42,10 +42,7 @@ const totalDays = computed(() => Math.floor(totalHours.value / 24))
 const totalWeeks = computed(() => Math.floor(totalDays.value / 7))
 const totalMonths = computed(() => {
   const now = new Date()
-  return (
-    (targetDate.value.getFullYear() - now.getFullYear()) * 12
-    + (targetDate.value.getMonth() - now.getMonth())
-  )
+  return (targetDate.value.getFullYear() - now.getFullYear()) * 12 + (targetDate.value.getMonth() - now.getMonth())
 })
 const split = computed(() => {
   const days = totalDays.value

package/app/components/Counter.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
-const { is = 'span' } = defineProps<{
-  value: number
+import { computed } from 'vue'
+
+const props = defineProps<{
+  value: number | string
   is?: any
+  digits?: 2 | 3 | '2' | '3'
 }>()
+
+const style = computed(() => {
+  let css = `--value:${props.value};`
+  if (props.digits) {
+    css += `--digits:${props.digits};`
+  }
+  return css
+})
 </script>
 
 <template>
-  <component :is="is" v-bind="$attrs" :style="`--value:${value};`" />
+  <component :is="props.is || 'span'" v-bind="$attrs" :style="style" />
 </template>

package/app/components/DaisyLink.vue

@@ -1,25 +1,43 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string
-  hover?: boolean
+import { computed, resolveComponent } from 'vue'
 
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-}>(), {
-  is: 'a',
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    hover?: boolean
+
+    color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    success?: boolean
+    info?: boolean
+    warning?: boolean
+    error?: boolean
+  }>(),
+  {
+    is: 'a',
+  },
+)
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is
 })
 </script>
 
 <template>
   <component
-    :is="is"
+    :is="resolvedComponent"
+    v-bind="$attrs"
     class="link"
     :class="{
       'link-neutral': neutral || color === 'neutral',

package/app/components/Dock.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { randomString } from '../utils/random-string';
+import type { Ref } from 'vue'
+import { provide, ref } from 'vue'
 
 const { size, xl, lg, md, sm, xs } = defineProps<{
   size?: string
@@ -13,16 +14,14 @@ const { size, xl, lg, md, sm, xs } = defineProps<{
 const activeItemId = ref<string | null>(null)
 const itemIds = ref<string[]>([])
 
-function registerItem() {
-  const itemId = randomString()
+function registerItem(itemId: string) {
   itemIds.value.push(itemId)
-  function unregister() {
+  return function unregister() {
     itemIds.value = itemIds.value.filter(id => id !== itemId)
     if (activeItemId.value === itemId) {
       activeItemId.value = null
     }
   }
-  return { id: itemId, unregister }
 }
 
 function setActiveItemId(itemId: string) {
@@ -31,7 +30,7 @@ function setActiveItemId(itemId: string) {
 
 export interface DockState {
   activeItemId: Ref<string | null>
-  registerItem: () => { id: string, unregister: () => void }
+  registerItem: (itemId: string) => () => void
   setActiveItemId: (itemId: string) => void
 }
 

package/app/components/DockItem.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import type { DockState } from './Dock.vue';
+import type { DockState } from './Dock.vue'
+import { inject, onUnmounted, useId } from 'vue'
 
 const { active } = defineProps<{
   active?: boolean
 }>()
 
+const itemId = useId()
 const { registerItem, setActiveItemId, activeItemId } = inject<DockState>('dockState')!
-const { id: itemId, unregister } = registerItem()
+const unregister = registerItem(itemId)
 
 onUnmounted(() => {
   unregister()
@@ -17,7 +19,7 @@ onUnmounted(() => {
   <div
     :id="`dock-item-${itemId}`"
     class="dock-item"
-    :class="{ 'dock-active': active || (activeItemId === itemId) }"
+    :class="{ 'dock-active': active || activeItemId === itemId }"
     @click="setActiveItemId(itemId)"
   >
     <slot />

package/app/components/Drawer.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
-import { createDrawerState } from '../utils/drawer-utils';
+import { computed, watch } from 'vue'
+import { createDrawerState } from '../utils/drawer-utils'
 
-const props = withDefaults(defineProps<{
-  open?: boolean
-  name?: string
-  end?: boolean
-}>(), {
-  name: 'drawer',
-})
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    name?: string
+    end?: boolean
+  }>(),
+  {
+    name: 'drawer',
+  },
+)
 const emit = defineEmits(['update:open'])
 
 // sync `open` prop with drawerState.isDrawerOpen
 const drawerState = createDrawerState(props.name)
 watch(
   () => props.open,
-  (value) => {
+  value => {
     if (drawerState.isDrawerOpen !== value) {
       drawerState.isDrawerOpen = value
     }
@@ -24,7 +27,7 @@ watch(
 )
 watch(
   () => drawerState.isDrawerOpen,
-  (value) => {
+  value => {
     if (props.open !== value) {
       emit('update:open', value)
     }
@@ -41,7 +44,7 @@ const classes = computed(() => {
 
 <template>
   <div class="drawer" :class="classes">
-    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle">
+    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle" />
     <slot v-bind="drawerState" />
   </div>
 </template>

package/app/components/DrawerContent.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils';
+import { createDrawerState } from '../utils/drawer-utils'
 
-const props = withDefaults(defineProps<{
-  name?: string
-}>(), {
-  name: 'drawer',
-})
+const props = withDefaults(
+  defineProps<{
+    name?: string
+  }>(),
+  {
+    name: 'drawer',
+  },
+)
 
 const drawerState = createDrawerState(props.name)
 </script>

package/app/components/DrawerSide.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils';
+import { createDrawerState } from '../utils/drawer-utils'
 
-const props = withDefaults(defineProps<{
-  name?: string
-}>(), {
-  name: 'drawer',
-})
+const props = withDefaults(
+  defineProps<{
+    name?: string
+  }>(),
+  {
+    name: 'drawer',
+  },
+)
 
 const drawerState = createDrawerState(props.name)
 </script>