daisy-ui-kit 5.0.3 → 5.0.5

package/app/components/Rating.vue

@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: number | string
-    count?: number | string
-    half?: boolean
-
-    disabled?: boolean
-
-    color?: string
-    neutral?: boolean
-    primary?: boolean
-    secondary?: boolean
-    accent?: boolean
-    info?: boolean
-    success?: boolean
-    warning?: boolean
-    error?: boolean
-
-    bg?: string
-
-    shape?: string
-    squircle?: boolean
-    heart?: boolean
-    hexagon?: boolean
-    hexagon2?: boolean
-    decagon?: boolean
-    pentagon?: boolean
-    diamond?: boolean
-    square?: boolean
-    circle?: boolean
-
-    star?: boolean
-    star2?: boolean
-    triangle?: boolean
-    triangle2?: boolean
-    triangle3?: boolean
-    triangle4?: boolean
-
-    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
-    xl?: boolean
-    lg?: boolean
-    md?: boolean
-    sm?: boolean
-    xs?: boolean
-  }>(),
-  {
-    count: 5,
-  },
-)
-const emit = defineEmits(['update:modelValue'])
-
-const max = computed(() => Number.parseInt(props.count as string))
-
-function handleValue(digit: number, half = false) {
-  if (props.disabled) {
-    return
-  }
-
-  if (props.half) {
-    emit('update:modelValue', half ? digit - 0.5 : digit)
-    return
-  }
-
-  emit('update:modelValue', digit)
-}
-
-// Check if any shape prop is set
-const hasShape = computed(() => {
-  return (
-    props.shape ||
-    props.squircle ||
-    props.heart ||
-    props.hexagon ||
-    props.hexagon2 ||
-    props.decagon ||
-    props.pentagon ||
-    props.diamond ||
-    props.square ||
-    props.circle ||
-    props.star ||
-    props.star2 ||
-    props.triangle ||
-    props.triangle2 ||
-    props.triangle3 ||
-    props.triangle4
-  )
-})
-</script>
-
-<template>
-  <div
-    class="rating"
-    :class="{
-      'rating-half': half,
-      'rating-xl': xl || size === 'xl',
-      'rating-lg': lg || size === 'lg',
-      'rating-md': md || size === 'md',
-      'rating-sm': sm || size === 'sm',
-      'rating-xs': xs || size === 'xs',
-      'opacity-60': disabled,
-      'cursor-not-allowed': disabled,
-    }"
-  >
-    <input
-      type="radio"
-      :value="0"
-      class="rating-hidden"
-      :checked="modelValue === 0"
-      @change="$emit('update:modelValue', 0)"
-    />
-    <template v-for="digit in max" :key="digit">
-      <input
-        type="radio"
-        :value="half ? digit - 0.5 : digit"
-        :disabled="disabled"
-        class="mask"
-        :class="[
-          bg,
-          { 'mask-half-1': half },
-          { 'cursor-not-allowed opacity-50': disabled },
-
-          // Color classes
-          { 'bg-neutral': neutral || color === 'neutral' },
-          { 'bg-primary': primary || color === 'primary' },
-          { 'bg-secondary': secondary || color === 'secondary' },
-          { 'bg-accent': accent || color === 'accent' },
-          { 'bg-info': info || color === 'info' },
-          { 'bg-success': success || color === 'success' },
-          { 'bg-warning': warning || color === 'warning' },
-          { 'bg-error': error || color === 'error' },
-
-          // Shape classes
-          { 'mask-squircle': squircle || shape === 'squircle' },
-          { 'mask-heart': heart || shape === 'heart' },
-          { 'mask-hexagon': hexagon || shape === 'hexagon' },
-          { 'mask-hexagon-2': hexagon2 || shape === 'hexagon-2' },
-          { 'mask-decagon': decagon || shape === 'decagon' },
-          { 'mask-pentagon': pentagon || shape === 'pentagon' },
-          { 'mask-diamond': diamond || shape === 'diamond' },
-          { 'mask-square': square || shape === 'square' },
-          { 'mask-circle': circle || shape === 'circle' },
-          { 'mask-star': star || shape === 'star' },
-          { 'mask-star-2': star2 || shape === 'star-2' || !hasShape },
-          { 'mask-triangle': triangle || shape === 'triangle' },
-          { 'mask-triangle-2': triangle2 || shape === 'triangle-2' },
-          { 'mask-triangle-3': triangle3 || shape === 'triangle-3' },
-          { 'mask-triangle-4': triangle4 || shape === 'triangle-4' },
-        ]"
-        :checked="half ? modelValue === digit - 0.5 : modelValue === digit"
-        @change="() => handleValue(digit, true)"
-      />
-      <input
-        v-if="half"
-        type="radio"
-        :value="digit"
-        class="mask mask-half-2"
-        :disabled="disabled"
-        :class="[
-          bg,
-          { 'cursor-not-allowed opacity-50': disabled },
-
-          // Color classes
-          { 'bg-neutral': neutral || color === 'neutral' },
-          { 'bg-primary': primary || color === 'primary' },
-          { 'bg-secondary': secondary || color === 'secondary' },
-          { 'bg-accent': accent || color === 'accent' },
-          { 'bg-info': info || color === 'info' },
-          { 'bg-success': success || color === 'success' },
-          { 'bg-warning': warning || color === 'warning' },
-          { 'bg-error': error || color === 'error' },
-
-          // Shape classes
-          { 'mask-squircle': squircle || shape === 'squircle' },
-          { 'mask-heart': heart || shape === 'heart' },
-          { 'mask-hexagon': hexagon || shape === 'hexagon' },
-          { 'mask-hexagon-2': hexagon2 || shape === 'hexagon-2' },
-          { 'mask-decagon': decagon || shape === 'decagon' },
-          { 'mask-pentagon': pentagon || shape === 'pentagon' },
-          { 'mask-diamond': diamond || shape === 'diamond' },
-          { 'mask-square': square || shape === 'square' },
-          { 'mask-circle': circle || shape === 'circle' },
-          { 'mask-star': star || shape === 'star' },
-          { 'mask-star-2': star2 || shape === 'star-2' || !hasShape },
-          { 'mask-triangle': triangle || shape === 'triangle' },
-          { 'mask-triangle-2': triangle2 || shape === 'triangle-2' },
-          { 'mask-triangle-3': triangle3 || shape === 'triangle-3' },
-          { 'mask-triangle-4': triangle4 || shape === 'triangle-4' },
-        ]"
-        :checked="modelValue === digit"
-        @change="() => handleValue(digit)"
-      />
-    </template>
-  </div>
-</template>

package/app/components/Select.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type Color = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: any
-    options: Record<string, any>[] | any[]
-    value?: (val: any) => any
-    label?: (val: any) => any
-    resultAsObject?: boolean
-    join?: boolean
-
-    ghost?: boolean
-    disabled?: boolean
-    validator?: boolean
-    native?: boolean
-
-    color?: Color
-    neutral?: boolean
-    primary?: boolean
-    secondary?: boolean
-    accent?: boolean
-    info?: boolean
-    success?: boolean
-    warning?: boolean
-    error?: boolean
-
-    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-    xl?: boolean
-    lg?: boolean
-    md?: boolean
-    sm?: boolean
-    xs?: boolean
-  }>(),
-  {
-    value: (val: any) => {
-      if (val == null) {
-        return null
-      }
-
-      return typeof val === 'string' ? (val as string) : (val?.value ?? val?.id ?? val?._id ?? val)
-    },
-    label: (val: any) => (typeof val === 'string' ? (val as string) : val.label || val.name || val.title),
-    resultAsObject: false,
-  },
-)
-const emit = defineEmits(['update:modelValue'])
-
-const computedVModel = computed({
-  get: () => {
-    if (props.resultAsObject && props.modelValue != null) {
-      return props.value(props.modelValue)
-    }
-
-    return props.modelValue
-  },
-  set: val => {
-    if (val === undefined) {
-      val = null
-    }
-    if (props.resultAsObject && val != null) {
-      val = props.options.find(o => props.value(o) === val)
-    }
-
-    emit('update:modelValue', val)
-  },
-})
-</script>
-
-<template>
-  <select
-    v-model="computedVModel"
-    class="select"
-    :class="{
-      'join-item': props.join,
-      validator: props.validator,
-      'select-ghost': props.ghost,
-      'appearance-none': props.native,
-      'select-neutral': props.neutral || props.color === 'neutral',
-      'select-primary': props.primary || props.color === 'primary',
-      'select-secondary': props.secondary || props.color === 'secondary',
-      'select-accent': props.accent || props.color === 'accent',
-      'select-info': props.info || props.color === 'info',
-      'select-success': props.success || props.color === 'success',
-      'select-warning': props.warning || props.color === 'warning',
-      'select-error': props.error || props.color === 'error',
-      'select-xl': props.xl || props.size === 'xl',
-      'select-lg': props.lg || props.size === 'lg',
-      'select-md': props.md || props.size === 'md',
-      'select-sm': props.sm || props.size === 'sm',
-      'select-xs': props.xs || props.size === 'xs',
-    }"
-    :disabled="disabled"
-  >
-    <option v-for="option in options" :key="value(option)" :value="value(option)" :disabled="option.disabled">
-      {{ label(option) }}
-    </option>
-  </select>
-</template>

package/app/components/Skeleton.vue

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

package/app/components/SkeletonText.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  is?: any
-}>()
-</script>
-
-<template>
-  <component :is="props.is || 'span'" class="skeleton skeleton-text">
-    <slot />
-  </component>
-</template>

package/app/components/Stack.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
-const { is = 'div' } = defineProps<{
-  is?: string
-  direction?: 'top' | 'end' | 'bottom' | 'start'
-  top?: boolean
-  end?: boolean
-  bottom?: boolean
-  start?: boolean
-}>()
-</script>
-
-<template>
-  <component
-    :is="is"
-    v-bind="$attrs"
-    class="stack"
-    :class="{
-      'stack-top': top || direction === 'top',
-      'stack-end': end || direction === 'end',
-      'stack-bottom': bottom || direction === 'bottom',
-      'stack-start': start || direction === 'start',
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Stat.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  orientation?: 'vertical' | 'horizontal'
-  vertical?: boolean
-  horizontal?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="stat"
-    :class="{
-      'stat-vertical': vertical || orientation === 'vertical',
-      'stat-horizontal': horizontal || orientation === 'horizontal',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/StatActions.vue

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

package/app/components/StatDesc.vue

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

package/app/components/StatFigure.vue

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

package/app/components/StatTitle.vue

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

package/app/components/StatValue.vue

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

package/app/components/Stats.vue

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

package/app/components/Status.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  xs?: boolean
-  sm?: boolean
-  md?: boolean
-  lg?: boolean
-  xl?: boolean
-}>()
-</script>
-
-<template>
-  <span
-    class="status"
-    :class="[
-      neutral || color === 'neutral' ? 'status-neutral' : '',
-      primary || color === 'primary' ? 'status-primary' : '',
-      secondary || color === 'secondary' ? 'status-secondary' : '',
-      accent || color === 'accent' ? 'status-accent' : '',
-      info || color === 'info' ? 'status-info' : '',
-      success || color === 'success' ? 'status-success' : '',
-      warning || color === 'warning' ? 'status-warning' : '',
-      error || color === 'error' ? 'status-error' : '',
-      xs || size === 'xs' ? 'status-xs' : '',
-      sm || size === 'sm' ? 'status-sm' : '',
-      md || size === 'md' || (!xs && !sm && !lg && !xl && !size) ? 'status-md' : '',
-      lg || size === 'lg' ? 'status-lg' : '',
-      xl || size === 'xl' ? 'status-xl' : '',
-    ]"
-  >
-    <slot />
-  </span>
-</template>

package/app/components/Step.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  glyph?: string
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-</script>
-
-<template>
-  <li
-    class="step"
-    :class="{
-      'step-neutral': props.neutral || props.color === 'neutral',
-      'step-primary': props.primary || props.color === 'primary',
-      'step-secondary': props.secondary || props.color === 'secondary',
-      'step-accent': props.accent || props.color === 'accent',
-      'step-info': props.info || props.color === 'info',
-      'step-success': props.success || props.color === 'success',
-      'step-warning': props.warning || props.color === 'warning',
-      'step-error': props.error || props.color === 'error',
-    }"
-    :data-content="glyph"
-  >
-    <slot />
-  </li>
-</template>

package/app/components/StepIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <span class="step-icon">
-    <slot />
-  </span>
-</template>

package/app/components/Steps.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const {
-  orientation,
-  vertical = false,
-  horizontal = false,
-} = defineProps<{
-  orientation?: 'vertical' | 'horizontal'
-  vertical?: boolean
-  horizontal?: boolean
-}>()
-</script>
-
-<template>
-  <ul
-    class="steps"
-    :class="{
-      'steps-vertical': orientation === 'vertical' || vertical,
-      'steps-horizontal': orientation === 'horizontal' || horizontal,
-    }"
-  >
-    <slot />
-  </ul>
-</template>

package/app/components/Swap.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-
-const props = defineProps<{
-  modelValue?: boolean | null
-  rotate?: boolean
-  flip?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const checkbox = ref<HTMLInputElement | null>(null)
-
-// Keep the checkbox's indeterminate property in sync with modelValue
-watch(
-  () => props.modelValue,
-  val => {
-    nextTick(() => {
-      if (checkbox.value) {
-        checkbox.value.indeterminate = val === null
-      }
-    })
-  },
-  { immediate: true },
-)
-
-function updateValue(event: Event) {
-  const input = event.target as HTMLInputElement
-  // If indeterminate, toggle to checked
-  if (props.modelValue === null) {
-    emit('update:modelValue', true)
-  } else {
-    emit('update:modelValue', input.checked)
-  }
-}
-</script>
-
-<template>
-  <label
-    class="swap"
-    :class="{
-      'swap-rotate': rotate,
-      'swap-flip': flip,
-    }"
-  >
-    <input ref="checkbox" type="checkbox" :checked="modelValue === true" @change="updateValue" />
-    <div class="swap-indeterminate">
-      <slot name="indeterminate" />
-    </div>
-    <div class="swap-on">
-      <slot name="swap" />
-    </div>
-    <div class="swap-off">
-      <slot />
-    </div>
-  </label>
-</template>

package/app/components/Tab.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, resolveComponent } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const {
-  is = 'label',
-  name,
-  ...props
-} = defineProps<{
-  is?: string
-  name?: string
-  active?: boolean
-  disabled?: boolean
-}>()
-
-const NuxtLink = resolveComponent('NuxtLink')
-const RouterLink = resolveComponent('RouterLink')
-
-const resolvedComponent = computed(() => {
-  if (is === 'NuxtLink') return NuxtLink
-  if (is === 'RouterLink') return RouterLink
-  return is
-})
-
-const tabManager: any = inject('tabManager')
-if (!tabManager.currentTab.value) {
-  tabManager.currentTab.value = name
-}
-</script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    class="tab"
-    :class="{
-      'tab-active': props.active || tabManager.currentTab.value === name,
-      'tab-disabled': props.disabled,
-    }"
-    @keypress.enter="() => (tabManager.currentTab.value = name)"
-  >
-    <input
-      type="radio"
-      :name="tabManager.name"
-      :value="name"
-      :checked="tabManager.currentTab.value === name"
-      @change="() => (tabManager.currentTab.value = name)"
-    />
-
-    <slot v-if="$slots.default" />
-    <span v-else>{{ name }}</span>
-  </component>
-</template>

package/app/components/TabContent.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue'
-
-const { is = 'div', name } = defineProps<{
-  is?: any
-  name: string
-}>()
-
-const tabManager: any = inject('tabManager')
-
-const isCurrentTab = computed(() => {
-  return tabManager.currentTab.value === name
-})
-
-if (!tabManager?.currentTab.value) {
-  tabManager.currentTab.value = name
-}
-
-const existing = tabManager?.tabs?.find((t: string) => t === name)
-if (!existing) {
-  tabManager.tabs.push(name)
-}
-</script>
-
-<template>
-  <component :is="is" v-show="isCurrentTab" class="tab-content">
-    <slot />
-  </component>
-</template>