daisy-ui-kit 3.0.11 → 5.0.0-pre.10

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/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/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/FileInput.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  join?: boolean
-
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  bordered?: boolean
-  ghost?: boolean
-  disabled?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-defineEmits(['files'])
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'file-input-primary': props.primary || props.color === 'primary',
-    'file-input-secondary': props.secondary || props.color === 'secondary',
-    'file-input-accent': props.accent || props.color === 'accent',
-    'file-input-info': props.info || props.color === 'info',
-    'file-input-success': props.success || props.color === 'success',
-    'file-input-warning': props.warning || props.color === 'warning',
-    'file-input-error': props.error || props.color === 'error',
-
-    'file-input-lg': props.lg || props.size === 'lg',
-    'file-input-md': props.md || props.size === 'md',
-    'file-input-sm': props.sm || props.size === 'sm',
-    'file-input-xs': props.xs || props.size === 'xs',
-
-    'file-input-bordered': props.bordered,
-    'file-input-ghost': props.ghost,
-  }
-})
-</script>
-
-<template>
-  <input
-    type="file"
-    :disabled="disabled"
-    class="file-input"
-    :class="classes"
-    @input="$emit('files', ($event.target as any).value)"
-  >
-</template>

package/components/Flex.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  join?: boolean
-
-  // https://tailwindcss.com/docs/flex
-  flex?: boolean
-  flex1?: boolean
-  flexAuto?: boolean
-  flexInitial?: boolean
-  none?: boolean
-
-  grow?: boolean
-
-  // https://tailwindcss.com/docs/flex-direction
-  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
-  row?: boolean
-  col?: boolean
-  reverse?: boolean
-
-  // https://tailwindcss.com/docs/flex-wrap
-  wrap?: boolean
-  nowrap?: boolean
-  wrapReverse?: boolean
-}>(), {
-  is: 'div',
-  flex: true,
-})
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'flex-1': props.flex1,
-    'flex-auto': props.flexAuto,
-    'flex-initial': props.flexInitial,
-    'flex-none': props.none,
-
-    'flex-grow': props.grow,
-
-    'flex-row': props.direction === 'row' || props.row,
-    'flex-col': props.direction === 'col' || props.col,
-    'flex-row-reverse': props.direction === 'row-reverse' || (props.row && props.reverse),
-    'flex-col-reverse': props.direction === 'col-reverse' || (props.col && props.reverse),
-
-    'flex-wrap': props.wrap,
-    'flex-wrap-reverse': props.wrapReverse,
-    'flex-nowrap': props.nowrap,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="flex" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/Footer.vue

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

package/components/Kbd.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const classes = computed(() => {
-  const { size, lg, md, sm, xs } = props
-  return {
-    'kbd-lg': lg || size === 'lg',
-    'kbd-md': md || size === 'md',
-    'kbd-sm': sm || size === 'sm',
-    'kbd-xs': xs || size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <kbd class="kbd" :class="classes"><slot /></kbd>
-</template>

package/components/Label.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'label',
-})
-</script>
-
-<template>
-  <Text :is="is" class="label">
-    <slot />
-  </Text>
-</template>

package/components/LabelText.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'span',
-})
-</script>
-
-<template>
-  <Text :is="is" class="label-text">
-    <slot />
-  </Text>
-</template>

package/components/LabelTextAlt.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'span',
-})
-</script>
-
-<template>
-  <Text :is="is" class="label-text-alt">
-    <slot />
-  </Text>
-</template>

package/components/Link.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-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 classes = computed(() => {
-  return {
-    'link-neutral': props.neutral || props.color === 'neutral',
-    'link-primary': props.primary || props.color === 'primary',
-    'link-secondary': props.secondary || props.color === 'secondary',
-    'link-accent': props.accent || props.color === 'accent',
-    'link-success': props.success || props.color === 'success',
-    'link-info': props.info || props.color === 'info',
-    'link-warning': props.warning || props.color === 'warning',
-    'link-error': props.error || props.color === 'error',
-    'link-hover': props.hover,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="link" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/LoadingBall.vue

@@ -1,43 +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
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'text-primary': props.primary || props.color === 'primary',
-    'text-secondary': props.secondary || props.color === 'secondary',
-    'text-neutral': props.neutral || props.color === 'neutral',
-    'text-accent': props.accent || props.color === 'accent',
-    'text-info': props.info || props.color === 'info',
-    'text-success': props.success || props.color === 'success',
-    'text-warning': props.warning || props.color === 'warning',
-    'text-error': props.error || props.color === 'error',
-
-    'loading-lg': props.lg || props.size === 'lg',
-    'loading-md': props.md || props.size === 'md',
-    'loading-sm': props.sm || props.size === 'sm',
-    'loading-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <span class="loading loading-ball" :class="classes" />
-</template>

package/components/LoadingBars.vue

@@ -1,43 +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
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'text-primary': props.primary || props.color === 'primary',
-    'text-secondary': props.secondary || props.color === 'secondary',
-    'text-neutral': props.neutral || props.color === 'neutral',
-    'text-accent': props.accent || props.color === 'accent',
-    'text-info': props.info || props.color === 'info',
-    'text-success': props.success || props.color === 'success',
-    'text-warning': props.warning || props.color === 'warning',
-    'text-error': props.error || props.color === 'error',
-
-    'loading-lg': props.lg || props.size === 'lg',
-    'loading-md': props.md || props.size === 'md',
-    'loading-sm': props.sm || props.size === 'sm',
-    'loading-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <span class="loading loading-bars" :class="classes" />
-</template>