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

package/components/Avatar.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { makeMaskClasses, maskProps } from './Mask.config'
-import Mask from './Mask.vue'
-
-const props = defineProps({
-  backgroundColor: { type: String, default: '#BBB' },
-  maskClasses: String,
-  showStatus: Boolean,
-  online: Boolean,
-  ...maskProps,
-})
-
-const classes = computed(() => {
-  return {
-    online: props.showStatus && props.online,
-  }
-})
-
-const internalMaskClasses = makeMaskClasses(props)
-const allMaskClasses = computed(() => {
-  const classes = internalMaskClasses.value
-  const hasMaskClass = Object.values(classes).find(v => v)
-  // Enable rounded-btn class only if no mask classes are applied
-  Object.assign(classes, { 'rounded-btn': !hasMaskClass })
-  return classes
-})
-
-const color = computed(() => {
-  return `#${contrastingColor(props.backgroundColor.replace('#', ''))}`
-})
-
-function contrastingColor(color: any) {
-  return (luma(color) >= 155) ? '000' : 'fff'
-}
-// color can be a hx string or an array of RGB values 0-255
-function luma(color: any) {
-  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
-  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
-}
-function hexToRGBArray(color: any) {
-  if (color.length === 3)
-    color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
-  else if (color.length !== 6)
-    throw new Error(`Invalid hex color: ${color}`)
-  const rgb = []
-  for (let i = 0; i <= 2; i++)
-    rgb[i] = Number.parseInt(color.substr(i * 2, 2), 16)
-  return rgb
-}
-</script>
-
-<template>
-  <div class="avatar" :class="classes">
-    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[allMaskClasses, maskClasses]">
-      <slot />
-    </Mask>
-  </div>
-</template>
-
-<style lang="postcss">
-.avatar-mask > * {
-  aspect-ratio: 1/1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

package/components/AvatarGroup.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  vertical: Boolean,
-})
-const classes = computed(() => {
-  return {
-    'flex-col': props.vertical,
-    'flex-row': !props.vertical,
-  }
-})
-</script>
-
-<template>
-  <div class="avatar-group" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Badge.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  outline?: boolean
-
-  size?: string
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'badge-outline': props.outline,
-    'badge-ghost': props.ghost,
-    'badge-lg': props.lg || props.size === 'lg',
-    'badge-md': props.md || props.size === 'md',
-    'badge-sm': props.sm || props.size === 'sm',
-    'badge-xs': props.xs || props.size === 'xs',
-    '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="badge" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/BottomNav.vue

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

package/components/Button.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  is?: string
-  join?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  link?: boolean
-  glass?: boolean
-  outline?: boolean
-  disabled?: boolean
-
-  shape?: 'circle' | 'square' | 'wide' | 'block'
-  circle?: boolean
-  square?: boolean
-  wide?: boolean
-  block?: boolean
-
-  noAnimation?: boolean
-  active?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  type?: 'button' | 'submit' | 'reset'
-}>()
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'btn-primary': !props.disabled && (props.primary || props.color === 'primary'),
-    'btn-secondary': !props.disabled && (props.secondary || props.color === 'secondary'),
-    'btn-neutral': !props.disabled && (props.neutral || props.color === 'neutral'),
-    'btn-accent': !props.disabled && (props.accent || props.color === 'accent'),
-    'btn-info': !props.disabled && (props.info || props.color === 'info'),
-    'btn-success': !props.disabled && (props.success || props.color === 'success'),
-    'btn-warning': !props.disabled && (props.warning || props.color === 'warning'),
-    'btn-error': !props.disabled && (props.error || props.color === 'error'),
-
-    'text-primary': !props.disabled && (props.primary || props.color === 'primary') && props.link,
-    'text-secondary': !props.disabled && (props.secondary || props.color === 'secondary') && props.link,
-    'text-neutral': !props.disabled && (props.neutral || props.color === 'neutral') && props.link,
-    'text-accent': !props.disabled && (props.accent || props.color === 'accent') && props.link,
-    'text-info': !props.disabled && (props.info || props.color === 'info') && props.link,
-    'text-success': !props.disabled && (props.success || props.color === 'success') && props.link,
-    'text-warning': !props.disabled && (props.warning || props.color === 'warning') && props.link,
-    'text-error': !props.disabled && (props.error || props.color === 'error') && props.link,
-
-    'glass': !props.disabled && props.glass,
-
-    'btn-circle': props.circle || props.shape === 'circle',
-    'btn-square': props.square || props.shape === 'square',
-    'btn-wide': props.wide || props.shape === 'wide',
-    'btn-block': props.block || props.shape === 'block',
-
-    'btn-lg': props.lg || props.size === 'lg',
-    'btn-md': props.md || props.size === 'md',
-    'btn-sm': props.sm || props.size === 'sm',
-    'btn-xs': props.xs || props.size === 'xs',
-
-    'btn-outline': !props.disabled && props.outline,
-    'btn-ghost': !props.disabled && props.ghost,
-    'btn-link': !props.disabled && props.link,
-    'btn-disabled': props.disabled,
-
-    'no-animation': props.noAnimation,
-    'btn-active': !props.disabled && props.active,
-  }
-})
-
-// Accessibility-friendly attributes for disabling the button
-const disabledAttrs = computed(() => {
-  if (props.disabled) {
-    return {
-      'tabindex': -1,
-      'role': 'button',
-      'aria-disabled': true,
-    }
-  }
-  else {
-    return {}
-  }
-})
-</script>
-
-<template>
-  <component
-    :is="is || 'button'"
-    :type="type"
-    class="btn"
-    :class="[classes]"
-    v-bind="{ ...disabledAttrs, ...$attrs }"
-  >
-    <slot />
-  </component>
-</template>

package/components/Card.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  bordered?: boolean
-  compact?: boolean
-  side?: boolean
-  imageFull?: boolean
-  glass?: boolean
-}>(), {
-  is: 'div',
-})
-
-const classes = computed(() => {
-  return {
-    'card-bordered': props.bordered,
-    'card-compact': props.compact,
-    'card-side': props.side,
-    'image-full': props.imageFull,
-    'glass': props.glass,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="card" :class="classes">
-    <slot />
-  </component>
-</template>

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/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/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/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>