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

package/components/LoadingSpinner.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-spinner" :class="classes" />
-</template>

package/components/Mask.config.ts

@@ -1,77 +0,0 @@
-import { computed } from 'vue'
-
-export const maskProps = {
-  shape: { type: String },
-  squircle: Boolean,
-  heart: Boolean,
-  hexagon: Boolean,
-  hexagon2: Boolean,
-  decagon: Boolean,
-  pentagon: Boolean,
-  diamond: Boolean,
-  square: Boolean,
-  circle: Boolean,
-  parallelogram: Boolean,
-  parallelogram2: Boolean,
-  parallelogram3: Boolean,
-  parallelogram4: Boolean,
-  star: Boolean,
-  star2: Boolean,
-  triangle: Boolean,
-  triangle2: Boolean,
-  triangle3: Boolean,
-  triangle4: Boolean,
-}
-
-export function makeMaskClasses(props: any) {
-  const classes = computed(() => {
-    return {
-      'mask-squircle': props.squircle || props.shape === 'squircle',
-      'mask-heart': props.heart || props.shape === 'heart',
-      'mask-hexagon': props.hexagon || props.shape === 'hexagon',
-      'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
-      'mask-decagon': props.decagon || props.shape === 'decagon',
-      'mask-pentagon': props.pentagon || props.shape === 'pentagon',
-      'mask-diamond': props.diamond || props.shape === 'diamond',
-      'mask-square': props.square || props.shape === 'square',
-      'mask-circle': props.circle || props.shape === 'circle',
-      'mask-parallelogram':
-        props.parallelogram || props.shape === 'parallelogram',
-      'mask-parallelogram-2':
-        props.parallelogram2 || props.shape === 'parallelogram-2',
-      'mask-parallelogram-3':
-        props.parallelogram3 || props.shape === 'parallelogram-3',
-      'mask-parallelogram-4':
-        props.parallelogram4 || props.shape === 'parallelogram-4',
-      'mask-star': props.star || props.shape === 'star',
-      'mask-star-2': props.star2 || props.shape === 'star-2',
-      'mask-triangle': props.triangle || props.shape === 'triangle',
-      'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
-      'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
-      'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
-    }
-  })
-  return classes
-}
-
-export const shapes = [
-  'squircle',
-  'heart',
-  'hexagon',
-  'hexagon-2',
-  'decagon',
-  'pentagon',
-  'diamond',
-  'square',
-  'circle',
-  'parallelogram',
-  'parallelogram-2',
-  'parallelogram-3',
-  'parallelogram-4',
-  'star',
-  'star-2',
-  'triangle',
-  'triangle-2',
-  'triangle-3',
-  'triangle-4',
-]

package/components/Mask.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { makeMaskClasses, maskProps } from './Mask.config'
-
-const props = defineProps({
-  ...maskProps,
-})
-const classes = makeMaskClasses(props)
-</script>
-
-<template>
-  <div class="mask" :class="[classes]">
-    <slot />
-  </div>
-</template>

package/components/Menu.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { computed, provide } from 'vue'
-
-const props = defineProps<{
-  align?: 'vertical' | 'horizontal'
-  vertical?: boolean
-  horizontal?: boolean
-
-  size?: | 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-provide('withinExpand', false)
-
-// `normal` and `compact` provide backwards compatibility with DaisyUI 2.x
-const classes = computed(() => {
-  return {
-    'menu-vertical': props.vertical || props.align === 'vertical',
-    'menu-horizontal': props.horizontal || props.align === 'horizontal',
-    'menu-lg': props.lg || props.size === 'lg',
-    'menu-md': props.md || props.size === 'md',
-    'menu-sm': props.sm || props.size === 'sm',
-    'menu-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <ul class="menu" :class="classes">
-    <slot />
-  </ul>
-</template>

package/components/MenuExpand.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { onMounted, provide, ref } from 'vue'
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
-import { randomString } from '../utils/random-string'
-
-const props = withDefaults(defineProps<{
-  randomId?: string
-  hover?: boolean
-  delayEnter?: number
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>(), {
-  randomId: randomString(12),
-  position: 'bottom',
-  end: false,
-  hover: false,
-  delayEnter: 0,
-  delayLeave: 300,
-  closeOnClickOutside: false,
-})
-// "Expand" Visibility
-const isOpen = defineModel('open', { local: true, default: false, type: Boolean })
-provide('isExpandOpen', isOpen)
-
-// ids for accessibility
-const wrapperId = `expand-wrapper-${props.randomId}`
-const id = `expand-${props.randomId}`
-provide('expandId', id)
-
-// Visibility Utils
-function toggle() {
-  setTimeout(() => {
-    isOpen.value = !isOpen.value
-  }, 50)
-}
-function open() {
-  isOpen.value = true
-}
-function close() {
-  isOpen.value = false
-}
-provide('toggleExpand', toggle)
-provide('openExpand', open)
-provide('closeExpand', close)
-
-const expandEl = ref()
-
-onMounted(() => {
-  // Close when clicking outside the element
-  onClickOutside(expandEl, () => {
-    if (props.closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 500)
-    }
-  })
-
-  if (props.hover) {
-    // Sync with top-level isHovered ref. For SSR compatibility.
-    const hover = useElementHover(expandEl, {
-      delayLeave: props.delayLeave,
-      delayEnter: props.delayEnter,
-    })
-    syncRefs(hover, isOpen)
-  }
-})
-
-function handleClick(ev: MouseEvent) {
-  ev.preventDefault()
-  if (ev.target === expandEl.value.children[0])
-    isOpen.value = !isOpen.value
-}
-</script>
-
-<template>
-  <details :id="wrapperId" ref="expandEl" class="dropdown menu-expand" :open="isOpen" @click="handleClick">
-    <slot v-bind="{ toggle, open, close }" />
-  </details>
-</template>

package/components/MenuExpandToggle.vue

@@ -1,13 +0,0 @@
-<script setup>
-import { inject } from 'vue'
-
-const id = inject('expandId')
-const isOpen = inject('isExpandOpen')
-const toggle = inject('toggleExpand')
-</script>
-
-<template>
-  <summary :id="id" :aria-expanded="isOpen" aria-haspopup="menu" class="menu-expand-toggle" @click.prevent.stop="toggle">
-    <slot />
-  </summary>
-</template>

package/components/MockupPhone.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="mockup-phone">
-    <div class="camera" />
-    <div class="display">
-      <slot />
-    </div>
-  </div>
-</template>

package/components/NavButton.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  active?: boolean
-  disabled?: boolean
-}>()
-const classes = computed(() => {
-  return {
-    active: props.active,
-    disabled: props.disabled,
-  }
-})
-</script>
-
-<template>
-  <button class="nav-button" :class="classes">
-    <slot />
-  </button>
-</template>

package/components/Progress.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  value: any
-  max?: any
-
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-}>(), {
-  value: 0,
-  max: 100,
-})
-
-const classes = computed(() => {
-  const { color, primary, secondary, accent, success, info, warning, error } = props
-  return {
-    'progress-primary': primary || color === 'primary',
-    'progress-secondary': secondary || color === 'secondary',
-    'progress-accent': accent || color === 'accent',
-    'progress-success': success || color === 'success',
-    'progress-info': info || color === 'info',
-    'progress-warning': warning || color === 'warning',
-    'progress-error': error || color === 'error',
-  }
-})
-</script>
-
-<template>
-  <progress
-    :value="value"
-    :max="max"
-    class="progress"
-    :class="classes"
-  />
-</template>

package/components/RadialProgress.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  value: number | string
-  size?: string
-  thickness?: string
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-
-const calculatedSize = computed(() => props.size || '4rem')
-const calculatedThickness = computed(() => props.thickness || 'calc(var(--size) / 10)')
-
-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'),
-  }
-})
-</script>
-
-<template>
-  <div class="radial-progress" :class="classes" :style="`--value:${value}; --size:${calculatedSize}; --thickness:${calculatedThickness};`">
-    <slot />
-  </div>
-</template>

package/components/Radio.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue'
-
-const props = defineProps<{
-  modelValue?: any
-  value: any
-  disabled?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
-
-  size?: string
-  xs?: boolean
-  sm?: boolean
-  md?: boolean
-  lg?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const radioGroup: any = inject('radio-group', null)
-
-const _props = computed(() => {
-  if (radioGroup)
-    return Object.assign({}, radioGroup.props, props)
-  else return props
-})
-
-const classes = computed(() => {
-  const { color, neutral, primary, secondary, accent, success, warning, info, error, size, xs, sm, md, lg } = _props.value
-  return {
-    'radio-neutral': neutral || color === 'neutral',
-    'radio-primary': primary || color === 'primary',
-    'radio-secondary': secondary || color === 'secondary',
-    'radio-accent': accent || color === 'accent',
-    'radio-success': success || color === 'success',
-    'radio-warning': warning || color === 'warning',
-    'radio-info': info || color === 'info',
-    'radio-error': error || color === 'error',
-    'radio-xs': xs || size === 'xs',
-    'radio-sm': sm || size === 'sm',
-    'radio-md': md || size === 'md',
-    'radio-lg': lg || size === 'lg',
-  }
-})
-
-const currentValue = computed({
-  get() {
-    if (radioGroup)
-      return radioGroup.currentValue
-    return props.modelValue
-  },
-  set(val: string) {
-    radioGroup && (radioGroup.currentValue = val)
-    emit('update:modelValue', val)
-  },
-})
-</script>
-
-<template>
-  <input
-    v-model="currentValue"
-    type="radio"
-    v-bind="{ ..._props, ...$attrs }"
-    class="radio"
-    :class="classes"
-    :disabled="disabled"
-    :value="props.value"
-  >
-</template>

package/components/Range.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  modelValue?: number | string
-  min?: number | string
-  max?: number | string
-  step?: number | string
-  disabled?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-defineEmits(['update:modelValue'])
-
-const classes = computed(() => {
-  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, lg, md, sm, xs } = props
-  return {
-    'range-neutral': neutral || color === 'neutral',
-    'range-primary': primary || color === 'primary',
-    'range-secondary': secondary || color === 'secondary',
-    'range-accent': accent || color === 'accent',
-    'range-success': success || color === 'success',
-    'range-info': info || color === 'info',
-    'range-warning': warning || color === 'warning',
-    'range-error': error || color === 'error',
-    'range-lg': lg || size === 'lg',
-    'range-md': md || size === 'md',
-    'range-sm': sm || size === 'sm',
-    'range-xs': xs || size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <input
-    type="range"
-    class="range"
-    :class="classes"
-    :min="min"
-    :max="max"
-    :step="step"
-    :disabled="disabled"
-    :value="modelValue"
-    @input="$emit('update:modelValue', ($event.target as any).value)"
-  >
-</template>

package/components/RangeMeasure.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  modelValue?: number | string
-  min?: number | string
-  max?: number | string
-  step?: number | string
-
-  numbered?: boolean
-  asButtons?: boolean
-  disabled?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  min: 0,
-  max: 100,
-  step: 1,
-})
-defineEmits(['update:modelValue'])
-
-const classes = computed(() => {
-  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, lg, md, sm, xs, disabled } = props
-  return {
-    'text-neutral': neutral || color === 'neutral',
-    'text-primary': primary || color === 'primary',
-    'text-secondary': secondary || color === 'secondary',
-    'text-accent': accent || color === 'accent',
-    'text-success': success || color === 'success',
-    'text-info': info || color === 'info',
-    'text-warning': warning || color === 'warning',
-    'text-error': error || color === 'error',
-    'text-lg': lg || size === 'lg',
-    'text-md': md || size === 'md',
-    'text-sm': sm || size === 'sm',
-    'text-xs': xs || size === 'xs',
-    'opacity-50': disabled,
-  }
-})
-const values = computed(() => {
-  const vals = []
-  for (let index = Number.parseInt(props.min as string); index < Number.parseInt(props.max as string) + 1; index++) {
-    vals.push({
-      value: index,
-      isVisible: index % Number.parseInt(props.step as string) === 0,
-    })
-  }
-  return vals
-})
-// const count = computed(() => Number.parseInt(props.max as string) - Number.parseInt(props.min as string))
-</script>
-
-<template>
-  <div class="flex justify-between select-none" :class="classes">
-    <RangeMeasureTick
-      v-for="tick in values"
-      :key="tick.value"
-      :tick="tick.value"
-      :model-value="modelValue"
-      :numbered="numbered"
-      :as-button="asButtons"
-      :is-hidden="!tick.isVisible"
-      :disabled="disabled"
-      @update:model-value="(val) => !disabled && $emit('update:modelValue', val)"
-    >
-      {{ numbered ? tick : '|' }}
-    </RangeMeasureTick>
-  </div>
-</template>