daisy-ui-kit 5.0.0-pre.8 → 5.0.0

package/app/components/Input.vue

@@ -1,36 +1,49 @@
 <script setup lang="ts">
-import { syncRef } from '@vueuse/core'
-import { computed, inject, ref } from 'vue'
+import { computed, inject } from 'vue'
 
 // Map input type to value type
 type InputType =
-  | 'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'
+  | 'text'
+  | 'password'
+  | 'email'
+  | 'number'
+  | 'date'
+  | 'datetime-local'
+  | 'week'
+  | 'month'
+  | 'tel'
+  | 'url'
+  | 'search'
+  | 'time'
 
-const props = withDefaults(defineProps<{
-  modelValue?: string | number | null
-  type?: InputType
-  placeholder?: string
-  disabled?: boolean
-  validator?: boolean
-  join?: boolean
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  ghost?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  type: 'text',
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | null
+    type?: InputType
+    placeholder?: string
+    disabled?: boolean
+    validator?: boolean
+    join?: boolean
+    color?: string
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+    ghost?: boolean
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    type: 'text',
+  },
+)
 const emit = defineEmits(['update:modelValue'])
 
 // For slot context
@@ -38,28 +51,17 @@ function setValue(val: string | number | null) {
   emit('update:modelValue', val)
 }
 
-const labelCtx = inject('labelCtx')
+const labelCtx = inject('labelCtx', null)
 
 function handleInput(event: Event) {
   let val: string | number | null
   if (props.type === 'number') {
     const inputVal = (event.target as HTMLInputElement).value
     val = inputVal === '' ? null : Number(inputVal)
-  }
-  else {
+  } else {
     val = (event.target as HTMLInputElement).value
   }
   emit('update:modelValue', val)
-
-  // Sync checked only on input if it's a checkbox
-  if (
-    props.type === 'checkbox'
-    && labelCtx
-    && Object.prototype.hasOwnProperty.call(labelCtx, 'checked')
-    && typeof labelCtx.checked.value === 'boolean'
-  ) {
-    labelCtx.checked.value = Boolean(event.target.checked)
-  }
 }
 
 const inputAttrs = computed(() => {
@@ -110,10 +112,5 @@ const inputModel = computed({
       :input-model="inputModel"
     />
   </div>
-  <input
-    v-else
-    v-bind="inputAttrs"
-    :value="inputModel"
-    @input="handleInput"
-  >
+  <input v-else v-bind="inputAttrs" :value="inputModel" @input="handleInput" />
 </template>

package/app/components/Kbd.vue

@@ -11,7 +11,8 @@ defineProps<{
 
 <template>
   <kbd
-    class="kbd" :class="{
+    class="kbd"
+    :class="{
       'kbd-xl': xl || size === 'xl',
       'kbd-lg': lg || size === 'lg',
       'kbd-md': md || size === 'md',

package/app/components/Label.vue

@@ -2,34 +2,37 @@
 import { provide, ref } from 'vue'
 import Text from './Text.vue'
 
-withDefaults(defineProps<{
-  is?: string
-  floating?: boolean
+withDefaults(
+  defineProps<{
+    is?: string
+    floating?: boolean
 
-  input?: boolean
-  select?: boolean
-  toggle?: boolean
+    input?: boolean
+    select?: boolean
+    toggle?: boolean
 
-  join?: boolean
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  ghost?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  is: 'label',
-})
+    join?: boolean
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+    ghost?: boolean
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    is: 'label',
+  },
+)
 
 // Provide label context for child inputs
 const checked = ref(false)
@@ -41,9 +44,9 @@ provide('labelCtx', { checked })
     :is="is"
     :class="[
       {
-        'input': input,
-        'select': select,
-        'toggle': toggle,
+        input,
+        select,
+        toggle,
         'join-item': (input || select || toggle) && join,
         'input-neutral': input && (neutral || color === 'neutral'),
         'input-primary': input && (primary || color === 'primary'),

package/app/components/MenuExpand.vue

@@ -2,8 +2,7 @@
 import type { Ref } from 'vue'
 
 import { onClickOutside, useElementHover } from '@vueuse/core'
-import { onMounted, provide, ref } from 'vue'
-import { randomString } from '../utils/random-string'
+import { onMounted, provide, ref, useId } from 'vue'
 
 // Define the MenuExpandState interface
 export interface MenuExpandState {
@@ -16,12 +15,10 @@ export interface MenuExpandState {
 
 // Props with defaults
 const {
-  randomId = randomString(12),
   hover = false,
   delayLeave = 300,
   closeOnClickOutside = false,
 } = defineProps<{
-  randomId?: string
   hover?: boolean
   delayLeave?: number
   closeOnClickOutside?: boolean
@@ -31,8 +28,9 @@ const {
 const isOpen = defineModel('open', { default: false, type: Boolean })
 
 // Generate IDs for accessibility and targeting
-const wrapperId = `expand-wrapper-${randomId}`
-const id = `expand-${randomId}`
+const uniqueId = useId()
+const wrapperId = `expand-wrapper-${uniqueId}`
+const id = `expand-${uniqueId}`
 
 // Element reference for click outside detection
 const expandEl = ref()
@@ -88,13 +86,7 @@ function handleClick(_ev: MouseEvent) {}
 </script>
 
 <template>
-  <details
-    :id="wrapperId"
-    ref="expandEl"
-    class="dropdown menu-expand"
-    :open="isOpen"
-    @click="handleClick"
-  >
+  <details :id="wrapperId" ref="expandEl" class="dropdown menu-expand" :open="isOpen" @click="handleClick">
     <slot v-bind="{ toggle, open, close }" />
   </details>
 </template>

package/app/components/MenuExpandToggle.vue

@@ -8,7 +8,13 @@ const { id, isOpen, toggle } = menuExpandState || {}
 </script>
 
 <template>
-  <summary :id="id" :aria-expanded="isOpen" aria-haspopup="menu" class="menu-expand-toggle" @click.prevent.stop="toggle">
+  <summary
+    :id="id"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    class="menu-expand-toggle"
+    @click.prevent.stop="toggle"
+  >
     <slot />
   </summary>
 </template>

package/app/components/MenuItem.vue

@@ -15,12 +15,14 @@ defineProps<{
   Allow adding .active class to the MenuItem element.
   DaisyUI only supports adding it to the `a` element.
 */
-.menu-item.menu-active > a, .menu-item.menu-active > span {
+.menu-item.menu-active > a,
+.menu-item.menu-active > span {
   background-color: hsl(var(--n) / var(--tw-bg-opacity));
   color: hsl(var(--nc) / var(--tw-text-opacity));
 }
-.menu-item.menu-disabled > a, .menu-item.menu-disabled > span {
-  background-color: var(--n)
+.menu-item.menu-disabled > a,
+.menu-item.menu-disabled > span {
+  background-color: var(--n);
 }
 
 /* Fix padding when putting a Dropdown inside of a menu */
@@ -32,6 +34,6 @@ defineProps<{
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem
+  padding-bottom: 0.5rem;
 }
 </style>

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)
   },
 })