daisy-ui-kit 5.0.0-pre.4 → 5.0.0-pre.6

package/app/components/Card.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const { is = 'div', ...props } = defineProps<{
+  is?: any
+  border?: boolean
+  dash?: boolean
+  side?: boolean
+  imageFull?: boolean
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+</script>
+
+<template>
+  <component
+    :is="is" 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

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

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

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

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

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

package/app/components/Chat.vue

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

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

package/app/components/ChatHeader.vue

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

package/app/components/ChatImage.vue

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

package/app/components/Checkbox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any
+
+  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',
+    }"
+  >
+</template>

package/app/components/Collapse.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+
+const props = defineProps<{
+  variant?: 'arrow' | 'plus'
+  arrow?: boolean
+  plus?: boolean
+  open?: boolean
+  close?: boolean
+  toggle?: boolean
+  value?: any
+}>()
+
+const accordionValue = inject('accordion-value', ref(null))
+const useAccordion = accordionValue.value !== null
+
+function handleClick() {
+  if (useAccordion) {
+    accordionValue.value = props.value
+  }
+}
+</script>
+
+<template>
+  <div
+    tabindex="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="handleClick"
+  >
+    <input
+      v-if="props.toggle || useAccordion"
+      :type="useAccordion ? 'radio' : 'checkbox'"
+      :checked="useAccordion ? accordionValue === props.value : undefined"
+    >
+    <slot />
+  </div>
+</template>

package/app/components/CollapseContent.vue

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

package/app/components/CollapseTitle.vue

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

package/app/components/Countdown.vue

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

package/app/components/CountdownTimers.vue

@@ -0,0 +1,72 @@
+<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,10 @@
+<script setup lang="ts">
+const { is = 'span' } = defineProps<{
+  value: number
+  is?: any
+}>()
+</script>
+
+<template>
+  <component :is="is" v-bind="$attrs" :style="`--value:${value};`" />
+</template>

package/app/components/Crumb.vue

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

package/app/components/DaisyLink.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+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',
+})
+</script>
+
+<template>
+  <component
+    :is="is"
+    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

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

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { randomString } from '../utils/random-string';
+
+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() {
+  const itemId = randomString()
+  itemIds.value.push(itemId)
+  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) {
+  activeItemId.value = itemId
+}
+
+export interface DockState {
+  activeItemId: Ref<string | null>
+  registerItem: () => { id: string, unregister: () => 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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { DockState } from './Dock.vue';
+
+const { active } = defineProps<{
+  active?: boolean
+}>()
+
+const { registerItem, setActiveItemId, activeItemId } = inject<DockState>('dockState')!
+const { id: itemId, unregister } = registerItem()
+
+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

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

package/app/components/Drawer.vue

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

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

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