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

package/app/components/Modal.vue

@@ -1,29 +1,35 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue'
 
-const props = withDefaults(defineProps<{
-  modelValue?: boolean
-  closeOnClickOutside?: boolean
-  placement?: 'top' | 'bottom' | 'start' | 'end'
-  top?: boolean
-  bottom?: boolean
-  start?: boolean
-  end?: boolean
-}>(), {
-  closeOnClickOutside: true,
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    closeOnClickOutside?: boolean
+    placement?: 'top' | 'bottom' | 'start' | 'end'
+    top?: boolean
+    bottom?: boolean
+    start?: boolean
+    end?: boolean
+  }>(),
+  {
+    closeOnClickOutside: true,
+  },
+)
 const emit = defineEmits(['update:modelValue'])
 
 const is = 'div'
 
 // defineModel 'open'
 const _isOpen = ref(props.modelValue)
-watch(() => props.modelValue, (val) => {
-  _isOpen.value = val
-})
+watch(
+  () => props.modelValue,
+  val => {
+    _isOpen.value = val
+  },
+)
 const isOpen = computed({
   get: () => _isOpen.value,
-  set: (val) => {
+  set: val => {
     _isOpen.value = val
     if (props.modelValue !== val) {
       emit('update:modelValue', val)
@@ -39,7 +45,7 @@ function handleClick() {
 </script>
 
 <template>
-  <input v-model="isOpen" type="checkbox" class="modal-toggle">
+  <input v-model="isOpen" type="checkbox" class="modal-toggle" />
   <Component
     :is="is"
     v-bind="{ ...$attrs, ...$props }"

package/app/components/Progress.vue

@@ -1,5 +1,17 @@
 <script setup lang="ts">
-const { value = 0, max = 100, color, neutral, primary, secondary, accent, success, info, warning, error } = defineProps<{
+const {
+  value = 0,
+  max = 100,
+  color,
+  neutral,
+  primary,
+  secondary,
+  accent,
+  success,
+  info,
+  warning,
+  error,
+} = defineProps<{
   value?: string | number
   max?: string | number
 

package/app/components/Prose.vue

@@ -25,8 +25,13 @@
   @apply text-accent;
 }
 
-.prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
   text-decoration: none;
-  @apply font-bold
+  @apply font-bold;
 }
 </style>

package/app/components/RadialProgress.vue

@@ -20,14 +20,14 @@ defineProps<{
   <div
     class="radial-progress"
     :class="{
-      'text-neutral': (neutral || color === 'neutral'),
-      'text-primary': (primary || color === 'primary'),
-      'text-secondary': (secondary || color === 'secondary'),
-      'text-accent': (accent || color === 'accent'),
-      'text-info': (info || color === 'info'),
-      'text-success': (success || color === 'success'),
-      'text-warning': (warning || color === 'warning'),
-      'text-error': (error || color === 'error'),
+      'text-neutral': neutral || color === 'neutral',
+      'text-primary': primary || color === 'primary',
+      'text-secondary': secondary || color === 'secondary',
+      'text-accent': accent || color === 'accent',
+      'text-info': info || color === 'info',
+      'text-success': success || color === 'success',
+      'text-warning': warning || color === 'warning',
+      'text-error': error || color === 'error',
     }"
     :style="`--value:${value}; --size:${size || '4rem'}; --thickness:${thickness || 'calc(var(--size) / 10)'};`"
   >

package/app/components/Radio.vue

@@ -65,5 +65,5 @@ const currentValue = computed({
     }"
     :disabled="props.disabled"
     :value="props.value"
-  >
+  />
 </template>

package/app/components/RadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, reactive } from 'vue';
+import { computed, provide, reactive } from 'vue'
 
 const props = defineProps<{
   modelValue?: any
@@ -28,7 +28,7 @@ const currentValue = computed({
   get: () => {
     return props.modelValue
   },
-  set: (val) => {
+  set: val => {
     emit('update:modelValue', val)
   },
 })

package/app/components/Range.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 const props = defineProps<{
   modelValue?: number | string
@@ -57,5 +57,5 @@ const currentValue = computed({
     :max="max"
     :step="step"
     :disabled="disabled"
-  >
+  />
 </template>

package/app/components/RangeMeasure.vue

@@ -1,37 +1,40 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  modelValue?: number | string
-  min?: number | string
-  max?: number | string
-  step?: number | string
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string
+    min?: number | string
+    max?: number | string
+    step?: number | string
 
-  numbered?: boolean
-  asButtons?: boolean
-  disabled?: boolean
+    numbered?: boolean
+    asButtons?: boolean
+    disabled?: boolean
 
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    success?: boolean
+    warning?: boolean
+    info?: boolean
+    error?: boolean
 
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  min: 0,
-  max: 100,
-  step: 1,
-})
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+  },
+)
 defineEmits(['update:modelValue'])
 
 const values = computed(() => {
@@ -76,7 +79,7 @@ const values = computed(() => {
       :as-button="asButtons"
       :is-hidden="!tick.isVisible"
       :disabled="disabled"
-      @update:model-value="(val) => !disabled && $emit('update:modelValue', val)"
+      @update:model-value="val => !disabled && $emit('update:modelValue', val)"
     >
       {{ numbered ? tick : '|' }}
     </RangeMeasureTick>

package/app/components/Rating.vue

@@ -1,52 +1,55 @@
 <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 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))
@@ -66,10 +69,24 @@ function handleValue(digit: number, half = false) {
 
 // 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
+  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>
 
@@ -93,7 +110,7 @@ const hasShape = computed(() => {
       class="rating-hidden"
       :checked="modelValue === 0"
       @change="$emit('update:modelValue', 0)"
-    >
+    />
     <template v-for="digit in max" :key="digit">
       <input
         type="radio"
@@ -134,7 +151,7 @@ const hasShape = computed(() => {
         ]"
         :checked="half ? modelValue === digit - 0.5 : modelValue === digit"
         @change="() => handleValue(digit, true)"
-      >
+      />
       <input
         v-if="half"
         type="radio"
@@ -174,7 +191,7 @@ const hasShape = computed(() => {
         ]"
         :checked="modelValue === digit"
         @change="() => handleValue(digit)"
-      >
+      />
     </template>
   </div>
 </template>

package/app/components/Select.vue

@@ -1,51 +1,51 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-type Color = | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+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
+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
+    ghost?: boolean
+    disabled?: boolean
+    validator?: boolean
+    native?: boolean
 
-  color?: Color
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: 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) {
-      return null
-    }
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    value: (val: any) => {
+      if (!val) {
+        return null
+      }
 
-    return typeof val === 'string'
-      ? (val as string)
-      : (val?.value || val?.id || val?._id || val)
+      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,
   },
-  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({
@@ -56,7 +56,7 @@ const computedVModel = computed({
 
     return props.modelValue
   },
-  set: (val) => {
+  set: val => {
     if (val === undefined) {
       val = null
     }
@@ -75,8 +75,10 @@ const computedVModel = computed({
     class="select"
     :class="{
       'join-item': props.join,
-      'validator': props.validator,
+      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',
@@ -92,12 +94,7 @@ const computedVModel = computed({
     }"
     :disabled="disabled"
   >
-    <option
-      v-for="option in options"
-      :key="value(option)"
-      :value="value(option)"
-      :disabled="option.disabled"
-    >
+    <option v-for="option in options" :key="value(option)" :value="value(option)" :disabled="option.disabled">
       {{ label(option) }}
     </option>
   </select>

package/app/components/SkeletonText.vue

@@ -0,0 +1,11 @@
+<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/Steps.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { orientation, vertical = false, horizontal = false } = defineProps<{
+const {
+  orientation,
+  vertical = false,
+  horizontal = false,
+} = defineProps<{
   orientation?: 'vertical' | 'horizontal'
   vertical?: boolean
   horizontal?: boolean
@@ -8,7 +12,8 @@ const { orientation, vertical = false, horizontal = false } = defineProps<{
 
 <template>
   <ul
-    class="steps" :class="{
+    class="steps"
+    :class="{
       'steps-vertical': orientation === 'vertical' || vertical,
       'steps-horizontal': orientation === 'horizontal' || horizontal,
     }"

package/app/components/Swap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue?: boolean | null
@@ -13,7 +13,7 @@ const checkbox = ref<HTMLInputElement | null>(null)
 // Keep the checkbox's indeterminate property in sync with modelValue
 watch(
   () => props.modelValue,
-  (val) => {
+  val => {
     nextTick(() => {
       if (checkbox.value) {
         checkbox.value.indeterminate = val === null
@@ -28,8 +28,7 @@ function updateValue(event: Event) {
   // If indeterminate, toggle to checked
   if (props.modelValue === null) {
     emit('update:modelValue', true)
-  }
-  else {
+  } else {
     emit('update:modelValue', input.checked)
   }
 }
@@ -43,12 +42,7 @@ function updateValue(event: Event) {
       'swap-flip': flip,
     }"
   >
-    <input
-      ref="checkbox"
-      type="checkbox"
-      :checked="modelValue === true"
-      @change="updateValue"
-    >
+    <input ref="checkbox" type="checkbox" :checked="modelValue === true" @change="updateValue" />
     <div class="swap-indeterminate">
       <slot name="indeterminate" />
     </div>

package/app/components/Tab.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 
-const { is = 'label', name, ...props } = defineProps<{
-  is?: any
+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
@@ -16,7 +29,7 @@ if (!tabManager.currentTab.value) {
 
 <template>
   <component
-    :is="is"
+    :is="resolvedComponent"
     class="tab"
     :class="{
       'tab-active': props.active || tabManager.currentTab.value === name,
@@ -30,7 +43,7 @@ if (!tabManager.currentTab.value) {
       :value="name"
       :checked="tabManager.currentTab.value === name"
       @change="() => (tabManager.currentTab.value = name)"
-    >
+    />
 
     <slot v-if="$slots.default" />
     <span v-else>{{ name }}</span>