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

package/components/Carousel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  snapTo?: 'center' | 'end'
-  center?: boolean
-  end?: boolean
-  vertical?: boolean
-}>()
-
-const classes = computed(() => {
-  const { snapTo, center, end, vertical } = props
-  return {
-    'carousel-center': center || snapTo === 'center',
-    'carousel-end': end || snapTo === 'end',
-    'carousel-vertical': vertical,
-  }
-})
-</script>
-
-<template>
-  <div class="carousel" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/CarouselItem.vue

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

package/components/Chat.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  pre?: boolean
-  align?: string
-  start?: boolean
-  end?: boolean
-}>(), {
-  align: 'start',
-})
-
-const classes = computed(() => {
-  const { align, start, end } = props
-  return {
-    'chat-start': start || (!end && align === 'start'),
-    'chat-end': end || align === 'end',
-    'whitespace-pre': props.pre,
-  }
-})
-</script>
-
-<template>
-  <div class="chat" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/ChatBubble.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'badge-neutral': props.neutral || props.color === 'neutral',
-    'badge-primary': props.primary || props.color === 'primary',
-    'badge-secondary': props.secondary || props.color === 'secondary',
-    'badge-accent': props.accent || props.color === 'accent',
-    'badge-info': props.info || props.color === 'info',
-    'badge-success': props.success || props.color === 'success',
-    'badge-warning': props.warning || props.color === 'warning',
-    'badge-error': props.error || props.color === 'error',
-  }
-})
-</script>
-
-<template>
-  <div class="chat-bubble" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/ChatFooter.vue

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

package/components/ChatHeader.vue

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

package/components/ChatImage.vue

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

package/components/Checkbox.vue

@@ -1,55 +0,0 @@
-<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 classes = computed(() => {
-  const { color, primary, secondary, accent, success, warning, info, error, size, xs, sm, md, lg } = props
-  return {
-    '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',
-  }
-})
-
-const currentValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val),
-})
-</script>
-
-<template>
-  <input
-    v-model="currentValue"
-    type="checkbox"
-    v-bind="$attrs"
-    class="checkbox"
-    :class="classes"
-  >
-</template>

package/components/Code.vue

@@ -1,92 +0,0 @@
-<script>
-import { computed, onBeforeUpdate, onMounted, ref } from 'vue'
-import Prism from 'prismjs'
-import 'prismjs/themes/prism-okaidia.css'
-import { useClipboard } from '@vueuse/core'
-
-export default {
-  name: 'Code',
-  props: {
-    language: {
-      type: String,
-      default: 'javascript',
-    },
-  },
-  setup(props, context) {
-    const nuxtApp = useNuxtApp()
-
-    const source = ref(null)
-    const lang = computed(() => {
-      if (props.language === 'vue')
-        return 'html'
-      else return props.language
-    })
-    const languageClass = computed(() => `language-${lang.value}`)
-    const { text, copy, copied, isSupported } = useClipboard({ source })
-
-    onMounted(() => {
-      if (!nuxtApp.ssrContext) {
-        setTimeout(() => {
-          Prism.highlightAllUnder(source.value)
-        }, 0)
-      }
-    })
-    onBeforeUpdate(() => {
-      if (typeof context.slots.default[0] === 'string') {
-        const newText = context.slots.default[0].replace(
-          /^[\r\n\s]*|[\r\n\s]*$/g,
-          '',
-        )
-        context.el.querySelector('code').textContent = newText
-        Prism.highlightAllUnder(source.value)
-      }
-    })
-
-    const doCopy = () => {
-      copy(source.value.innerText)
-    }
-
-    return { source, languageClass, text, copy, copied, isSupported, doCopy }
-  },
-}
-</script>
-
-<template>
-  <div class="relative mockup-code">
-    <div class="absolute flex flex-row items-center top-1 right-1">
-      <div v-if="copied" class="pr-2 text-sm">
-        copied
-      </div>
-      <Button sm @click="doCopy">
-        copy
-      </Button>
-    </div>
-    <ClientOnly>
-      <pre
-        ref="source"
-        class="whitespace-pre-wrap daisy-code-highlight"
-        :class="languageClass"
-      ><code><slot /></code></pre>
-
-      <template #fallback>
-        <pre
-          class="whitespace-pre-wrap daisy-code-highlight"
-        ><code><slot /></code></pre>
-      </template>
-    </ClientOnly>
-  </div>
-</template>
-
-<style>
-.mockup-code .daisy-code-highlight {
-  margin-left: 0 !important;
-  background: none;
-  border: none;
-  box-shadow: none;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.mockup-code pre.daisy-code-highlight:before {
-  margin: 0 !important;
-}
-</style>

package/components/Collapse.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue'
-
-const props = defineProps<{
-  style?: 'arrow' | 'plus'
-  arrow?: boolean
-  plus?: boolean
-
-  open?: boolean
-  close?: boolean
-
-  toggle?: boolean
-
-  // for accordion
-  value?: any
-}>()
-
-const accordionValue: any = inject('accordion-value', ref('no-accordion-value'))
-const useAccordion = computed(() => {
-  return accordionValue.value !== 'no-accordion-value'
-})
-const isAccordionSelected = computed(
-  () => {
-    if (!useAccordion.value)
-      return false
-    return accordionValue.value === props.value
-  })
-
-function handleClick() {
-  if (useAccordion.value)
-    accordionValue.value = props.value
-}
-
-const classes = computed(() => {
-  const { style, arrow, plus, open, close } = props
-  return {
-    'collapse-arrow': arrow || style === 'arrow',
-    'collapse-plus': plus || style === 'plus',
-    'collapse-open': (open && !close) || isAccordionSelected.value,
-    'collapse-close': close,
-  }
-})
-</script>
-
-<template>
-  <div tabindex="0" class="collapse" :class="classes" @click="handleClick">
-    <input
-      v-if="toggle || useAccordion"
-      :type="useAccordion ? 'radio' : 'checkbox'"
-      :checked="isAccordionSelected"
-    >
-    <slot />
-  </div>
-</template>

package/components/CollapseContent.vue

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

package/components/CollapseTitle.vue

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

package/components/Countdown.vue

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

package/components/CountdownTimers.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { useIntervalFn } from '@vueuse/core'
-import { computed, watch } from 'vue'
-
-const props = withDefaults(defineProps<{
-  durationInSeconds?: number
-  untilDate?: Date
-}>(), { durationInSeconds: 0 })
-const emit = defineEmits(['done'])
-
-const calculateDate = () => props.untilDate || new Date(Date.now() + props.durationInSeconds * 1000)
-const targetDate = ref<Date>(calculateDate())
-watch(
-  () => props.durationInSeconds,
-  () => {
-    targetDate.value = calculateDate()
-  },
-  { immediate: true },
-)
-
-// The target date
-function calcTimeLeft() {
-  const remaining = targetDate.value.getTime() - Date.now()
-  return remaining < 0 ? 0 : remaining
-}
-const timeLeft = ref(calcTimeLeft())
-useIntervalFn(() => {
-  timeLeft.value = calcTimeLeft()
-}, 1000)
-
-watch(timeLeft, () => {
-  if (timeLeft.value === 0)
-    emit('done')
-})
-
-const totalSeconds = computed(() => Math.round(timeLeft.value / 1000))
-const totalMinutes = computed(() => Math.floor(timeLeft.value / 1000 / 60))
-const totalHours = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60))
-const totalDays = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60 / 24))
-const totalWeeks = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60 / 24 / 7))
-const totalMonths = computed(() => {
-  const today = new Date()
-  let diffMonths = (targetDate.value.getFullYear() - today.getFullYear()) * 12
-  diffMonths -= targetDate.value.getMonth()
-  diffMonths += today.getMonth()
-  return diffMonths
-})
-const split = computed(() => {
-  const days = totalDays.value
-  const hours = totalHours.value - days * 24
-  const minutes = totalMinutes.value - hours * 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/components/Counter.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  value: number
-  is?: string | Function
-}>()
-
-const tag = computed(() => props.is || 'span')
-</script>
-
-<template>
-  <component :is="tag" v-bind="$attrs" :style="`--value:${value};`" />
-</template>

package/components/Crumb.vue

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

package/components/Divider.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  horizontal?: boolean
-  vertical?: boolean
-}>(), {
-  horizontal: false,
-  vertical: false,
-})
-
-const classes = computed(() => {
-  return {
-    'divider-horizontal': props.horizontal,
-    'divider-vertical': props.vertical,
-  }
-})
-</script>
-
-<template>
-  <div class="divider" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Drawer.vue

@@ -1,45 +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/components/DrawerContent.vue

@@ -1,17 +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/components/DrawerSide.vue

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

package/components/Dropdown.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { onMounted, provide, reactive, ref } from 'vue'
-import { autoUpdate, useFloating } from '@floating-ui/vue'
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
-import { randomString } from '../utils/random-string'
-
-const props = withDefaults(defineProps<{
-  // allows passing a custom id to the dropdown. Required for SSR hydration.
-  randomId?: string
-  autoFocus?: boolean
-
-  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
-  strategy?: 'fixed' | 'absolute'
-
-  hover?: boolean
-  delayEnter?: number
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>(), {
-  autoFocus: false,
-  placement: 'bottom-start',
-  hover: false,
-  delayEnter: 0,
-  delayLeave: 300,
-  closeOnClickOutside: true,
-})
-// Dropdown Visibility
-const isOpen = defineModel('open', { local: true })
-provide('isDropdownOpen', isOpen)
-
-const autoFocus = ref(props.autoFocus)
-provide('dropdownAutoFocus', autoFocus)
-
-const randomValue = props.randomId || randomString(12)
-const wrapperId = `dropdown-wrapper-${randomValue}`
-const id = `dropdown-${randomValue}`
-provide('dropdownId', id)
-
-// set up the floating ui instance
-const buttonEl = ref(null)
-const contentEl = ref(null)
-const floatingConfig = reactive({
-  placement: ref(props.placement),
-  strategy: ref(props.strategy),
-  whileElementsMounted: autoUpdate,
-})
-const { floatingStyles } = useFloating(buttonEl, contentEl, floatingConfig)
-
-provide('buttonEl', buttonEl)
-provide('contentEl', contentEl)
-provide('floatingStyles', floatingStyles)
-
-// Visibility Utils
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-function open() {
-  isOpen.value = true
-}
-function close() {
-  isOpen.value = false
-}
-provide('toggleDropdown', toggle)
-provide('openDropdown', open)
-provide('closeDropdown', close)
-
-const dropdownWrapper = ref(null)
-
-onMounted(() => {
-  // Close when clicking outside the element
-  // use a slight delay to avoid conflict with the focus trap in the DropdownContent.
-  onClickOutside(contentEl, () => {
-    if (props.closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 50)
-    }
-  })
-
-  // Sync with top-level isHovered ref. For SSR compatibility.
-  if (props.hover) {
-    const hover = useElementHover(dropdownWrapper, {
-      delayLeave: props.delayLeave,
-      delayEnter: props.delayEnter,
-    })
-    syncRefs(hover, isOpen)
-  }
-})
-</script>
-
-<template>
-  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block floating-dropdown">
-    <slot v-bind="{ toggle, open, close }" />
-  </div>
-</template>

package/components/DropdownButton.vue

@@ -1,16 +0,0 @@
-<script setup>
-import { inject } from 'vue'
-
-const id = inject('dropdownId')
-const isOpen = inject('isDropdownOpen')
-const toggleDropdown = inject('toggleDropdown')
-const buttonEl = inject('buttonEl')
-
-const toggle = toggleDropdown
-</script>
-
-<template>
-  <Button :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-button" @click="toggle">
-    <slot />
-  </Button>
-</template>