daisy-ui-kit 5.0.3 → 5.0.5

package/app/components/ChatBubble.vue

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

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

package/app/components/ChatHeader.vue

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

package/app/components/ChatImage.vue

@@ -1,5 +0,0 @@
-<template>
-  <Avatar class="chat-image">
-    <slot />
-  </Avatar>
-</template>

package/app/components/Checkbox.vue

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

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, provide, ref, useId, watch } from 'vue'
-
-const props = defineProps<{
-  id?: string
-  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 = 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="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/CollapseContent.vue

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

package/app/components/CollapseTitle.vue

@@ -1,15 +0,0 @@
-<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/app/components/Countdown.vue

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

package/app/components/CountdownTimers.vue

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

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-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="props.is || 'span'" v-bind="$attrs" :style="style" />
-</template>

package/app/components/Crumb.vue

@@ -1,5 +0,0 @@
-<template>
-  <li class="crumb">
-    <slot />
-  </li>
-</template>

package/app/components/DaisyLink.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
-
-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="resolvedComponent"
-    v-bind="$attrs"
-    class="link"
-    :class="{
-      'link-neutral': neutral || color === 'neutral',
-      'link-primary': primary || color === 'primary',
-      'link-secondary': secondary || color === 'secondary',
-      'link-accent': accent || color === 'accent',
-      'link-success': success || color === 'success',
-      'link-info': info || color === 'info',
-      'link-warning': warning || color === 'warning',
-      'link-error': error || color === 'error',
-      'link-hover': hover,
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Diff.vue

@@ -1,11 +0,0 @@
-<template>
-  <figure class="diff" tabindex="0">
-    <div class="diff-item-1" role="img" tabindex="0">
-      <slot name="one" />
-    </div>
-    <div class="diff-item-2" role="img">
-      <slot name="two" />
-    </div>
-    <div class="diff-resizer" />
-  </figure>
-</template>

package/app/components/Divider.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  orientation?: 'horizontal' | 'vertical'
-  horizontal?: boolean
-  vertical?: boolean
-  align?: 'center' | 'start' | 'end'
-  center?: boolean
-  start?: boolean
-  end?: boolean
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="divider"
-    :class="{
-      'divider-vertical': orientation === 'vertical' || vertical,
-      'divider-horizontal': orientation !== 'vertical' || horizontal,
-      'divider-neutral': color === 'neutral' || neutral,
-      'divider-primary': color === 'primary' || primary,
-      'divider-secondary': color === 'secondary' || secondary,
-      'divider-accent': color === 'accent' || accent,
-      'divider-success': color === 'success' || success,
-      'divider-warning': color === 'warning' || warning,
-      'divider-info': color === 'info' || info,
-      'divider-error': color === 'error' || error,
-      'divider-start': align === 'start' || start,
-      'divider-center': align === 'center' || center,
-      'divider-end': align === 'end' || end,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Dock.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-import { provide, ref } from 'vue'
-
-const { size, xl, lg, md, sm, xs } = defineProps<{
-  size?: string
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const activeItemId = ref<string | null>(null)
-const itemIds = ref<string[]>([])
-
-function registerItem(itemId: string) {
-  itemIds.value.push(itemId)
-  return function unregister() {
-    itemIds.value = itemIds.value.filter(id => id !== itemId)
-    if (activeItemId.value === itemId) {
-      activeItemId.value = null
-    }
-  }
-}
-
-function setActiveItemId(itemId: string) {
-  activeItemId.value = itemId
-}
-
-export interface DockState {
-  activeItemId: Ref<string | null>
-  registerItem: (itemId: string) => () => void
-  setActiveItemId: (itemId: string) => void
-}
-
-provide<DockState>('dockState', {
-  activeItemId,
-  registerItem,
-  setActiveItemId,
-})
-</script>
-
-<template>
-  <div
-    class="dock"
-    :class="{
-      'dock-xl': xl || size === 'xl',
-      'dock-lg': lg || size === 'lg',
-      'dock-md': md || size === 'md',
-      'dock-sm': sm || size === 'sm',
-      'dock-xs': xs || size === 'xs',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/DockItem.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-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 unregister = registerItem(itemId)
-
-onUnmounted(() => {
-  unregister()
-})
-</script>
-
-<template>
-  <div
-    :id="`dock-item-${itemId}`"
-    class="dock-item"
-    :class="{ 'dock-active': active || activeItemId === itemId }"
-    @click="setActiveItemId(itemId)"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/DockLabel.vue

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

package/app/components/Drawer.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed, watch } from 'vue'
-import { createDrawerState } from '../utils/drawer-utils'
-
-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 => {
-    if (drawerState.isDrawerOpen !== value) {
-      drawerState.isDrawerOpen = value
-    }
-  },
-  { immediate: true },
-)
-watch(
-  () => drawerState.isDrawerOpen,
-  value => {
-    if (props.open !== value) {
-      emit('update:open', value)
-    }
-  },
-  { immediate: true },
-)
-
-const classes = computed(() => {
-  return {
-    'drawer-end': props.end,
-  }
-})
-</script>
-
-<template>
-  <div class="drawer" :class="classes">
-    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle" />
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/app/components/DrawerContent.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils'
-
-const props = withDefaults(
-  defineProps<{
-    name?: string
-  }>(),
-  {
-    name: 'drawer',
-  },
-)
-
-const drawerState = createDrawerState(props.name)
-</script>
-
-<template>
-  <div class="drawer-content">
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/app/components/DrawerSide.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils'
-
-const props = withDefaults(
-  defineProps<{
-    name?: string
-  }>(),
-  {
-    name: 'drawer',
-  },
-)
-
-const drawerState = createDrawerState(props.name)
-</script>
-
-<template>
-  <div class="drawer-side">
-    <div class="drawer-overlay" @click="() => drawerState?.closeDrawer()" />
-    <slot v-bind="drawerState" />
-  </div>
-</template>