daisy-ui-kit 3.0.12 → 5.0.0-pre.11

package/app/components/CalendarInput.vue

@@ -0,0 +1,174 @@
+<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'
+
+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'>
+  /** 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 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,
+)
+
+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
+}
+
+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()
+    }
+  }
+})
+
+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)
+  }
+}
+
+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 = ''
+      }
+    }
+  },
+)
+</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)
+      }
+    "
+  />
+</template>

package/app/components/CalendarSkeleton.vue

@@ -0,0 +1,87 @@
+<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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+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"
+    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/{components → app/components}/CardActions.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import Text from './Text.vue'
 
-interface Props {
+const { is = 'div' } = defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
-  is: 'div',
-})
+}>()
 </script>
 
 <template>

package/{components → app/components}/CardBody.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import Text from './Text.vue'
 
-interface Props {
+const { is = 'div' } = defineProps<{
   is?: string
-}
-withDefaults(defineProps<Props>(), {
-  is: 'div',
-})
+}>()
 </script>
 
 <template>

package/{components → app/components}/CardTitle.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import Text from './Text.vue'
 
-interface Props {
-  is?: string
-}
-withDefaults(defineProps<Props>(), {
-  is: 'div',
-})
+const { is = 'div' } = defineProps<{ is?: string }>()
 </script>
 
 <template>

package/app/components/Carousel.vue

@@ -0,0 +1,24 @@
+<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/Chat.vue

@@ -0,0 +1,26 @@
+<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>

package/app/components/ChatBubble.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { color, neutral, primary, secondary, accent, info, success, warning, error } = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="chat-bubble"
+    :class="{
+      'chat-bubble-neutral': neutral || color === 'neutral',
+      'chat-bubble-primary': primary || color === 'primary',
+      'chat-bubble-secondary': secondary || color === 'secondary',
+      'chat-bubble-accent': accent || color === 'accent',
+      'chat-bubble-info': info || color === 'info',
+      'chat-bubble-success': success || color === 'success',
+      'chat-bubble-warning': warning || color === 'warning',
+      'chat-bubble-error': error || color === 'error',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Checkbox.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any
+  themeController?: boolean
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
+
+  size?: string
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <input
+    v-model="currentValue"
+    type="checkbox"
+    class="checkbox"
+    :class="{
+      'checkbox-primary': primary || color === 'primary',
+      'checkbox-secondary': secondary || color === 'secondary',
+      'checkbox-accent': accent || color === 'accent',
+      'checkbox-success': success || color === 'success',
+      'checkbox-warning': warning || color === 'warning',
+      'checkbox-info': info || color === 'info',
+      'checkbox-error': error || color === 'error',
+      'checkbox-xs': xs || size === 'xs',
+      'checkbox-sm': sm || size === 'sm',
+      'checkbox-md': md || size === 'md',
+      'checkbox-lg': lg || size === 'lg',
+      'theme-controller': themeController,
+    }"
+  />
+</template>

package/app/components/Collapse.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { inject, provide, ref, watch } from 'vue'
+
+const props = defineProps<{
+  variant?: 'arrow' | 'plus'
+  arrow?: boolean
+  plus?: boolean
+  open?: boolean
+  close?: boolean
+  toggle?: boolean
+  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 = `collapse-${Math.random().toString(36).substr(2, 9)}`
+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="props.toggle || useAccordion ? undefined : 0"
+    class="collapse"
+    :class="[
+      { 'collapse-arrow': props.arrow || props.variant === 'arrow' },
+      { 'collapse-plus': props.plus || props.variant === 'plus' },
+      { 'collapse-open': (props.open && !props.close) || (useAccordion && accordionValue === props.value) },
+      { 'collapse-close': props.close },
+    ]"
+    @click="useAccordion ? handleClick : undefined"
+  >
+    <input
+      v-if="props.toggle || useAccordion"
+      :id="checkboxId"
+      v-model="internalChecked"
+      :type="useAccordion ? 'radio' : 'checkbox'"
+      :checked="useAccordion ? isChecked : undefined"
+    />
+    <slot />
+  </div>
+</template>

package/app/components/CollapseTitle.vue

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

package/{components → app/components}/Countdown.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-  is?: string | Function | Object
+  is?: any
 }>()
 
 const tag = computed(() => props.is || 'span')

package/app/components/CountdownTimers.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+const { durationInSeconds = 0, untilDate } = defineProps<{
+  durationInSeconds?: number
+  untilDate?: Date
+}>()
+const emit = defineEmits(['done'])
+
+function getTargetDate() {
+  return untilDate || new Date(Date.now() + durationInSeconds * 1000)
+}
+
+const targetDate = ref(getTargetDate())
+
+watch(
+  () => [durationInSeconds, untilDate],
+  () => {
+    targetDate.value = getTargetDate()
+  },
+  { immediate: true },
+)
+
+const timeLeft = ref(0)
+const calcTimeLeft = () => Math.max(0, targetDate.value.getTime() - Date.now())
+
+useIntervalFn(() => {
+  timeLeft.value = calcTimeLeft()
+}, 1000)
+
+watch(timeLeft, val => {
+  if (val === 0) {
+    emit('done')
+  }
+})
+
+const totalSeconds = computed(() => Math.round(timeLeft.value / 1000))
+const totalMinutes = computed(() => Math.floor(totalSeconds.value / 60))
+const totalHours = computed(() => Math.floor(totalMinutes.value / 60))
+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())
+})
+const split = computed(() => {
+  const days = totalDays.value
+  const hours = totalHours.value - days * 24
+  const minutes = totalMinutes.value - totalHours.value * 60
+  const seconds = totalSeconds.value - totalMinutes.value * 60
+  return { days, hours, minutes, seconds }
+})
+</script>
+
+<template>
+  <slot
+    v-bind="{
+      totalSeconds,
+      totalMinutes,
+      totalHours,
+      totalDays,
+      totalWeeks,
+      totalMonths,
+      targetDate,
+      split,
+    }"
+  />
+</template>

package/app/components/Counter.vue

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