daisy-ui-kit 5.0.9 → 5.0.11

package/app/components/Badge.vue

@@ -1,68 +1,59 @@
-<script setup lang="ts">
-import { computed, resolveDynamicComponent } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-defineOptions({
+export default defineComponent({
   inheritAttrs: false,
-})
-
-const { is = 'div', ...props } = defineProps<{
-  is?: string
-  outline?: boolean
-  soft?: boolean
-  dash?: boolean
-  ghost?: boolean
-
-  size?: string
-  xl?: boolean
-  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
-}>()
-
-const resolvedComponent = computed(() => {
-  if (is === 'div' || is === 'span') return is
-  return resolveDynamicComponent(is)
+  props: {
+    is: { type: [String, Object], default: 'div' },
+    outline: Boolean,
+    soft: Boolean,
+    dash: Boolean,
+    ghost: Boolean,
+
+    size: String as () => string,
+    xl: Boolean,
+    lg: Boolean,
+    md: Boolean,
+    sm: Boolean,
+    xs: Boolean,
+
+    color: String as () => string,
+    neutral: Boolean,
+    primary: Boolean,
+    secondary: Boolean,
+    accent: Boolean,
+    info: Boolean,
+    success: Boolean,
+    warning: Boolean,
+    error: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => [
+      'badge',
+      {
+        'badge-outline': props.outline,
+        'badge-ghost': props.ghost,
+        'badge-soft': props.soft,
+        'badge-dash': props.dash,
+
+        'badge-xl': props.xl || props.size === 'xl',
+        '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',
+      },
+    ])
+
+    return () => h(props.is as any, { ...attrs, class: classes.value }, slots.default?.())
+  },
 })
 </script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    class="badge"
-    :class="{
-      'badge-outline': props.outline,
-      'badge-ghost': props.ghost,
-      'badge-soft': props.soft,
-      'badge-dash': props.dash,
-
-      'badge-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Button.vue

@@ -1,138 +1,126 @@
-<script setup lang="ts">
-import { computed, resolveDynamicComponent } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-defineOptions({
+export default defineComponent({
   inheritAttrs: false,
-})
-
-const props = withDefaults(
-  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
-    dash?: boolean
-    soft?: 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' | 'xl'
-    xl?: boolean
-    lg?: boolean
-    md?: boolean
-    sm?: boolean
-    xs?: boolean
-
-    type?: 'button' | 'submit' | 'reset'
-  }>(),
-  {
-    type: 'button',
+  props: {
+    is: String,
+    join: Boolean,
+
+    color: String as () => 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,
+    dash: Boolean,
+    soft: Boolean,
+    disabled: Boolean,
+
+    shape: String as () => 'circle' | 'square' | 'wide' | 'block',
+    circle: Boolean,
+    square: Boolean,
+    wide: Boolean,
+    block: Boolean,
+
+    noAnimation: Boolean,
+    active: Boolean,
+
+    size: String as () => 'lg' | 'md' | 'sm' | 'xs' | 'xl',
+    xl: Boolean,
+    lg: Boolean,
+    md: Boolean,
+    sm: Boolean,
+    xs: Boolean,
+
+    type: { type: String as () => 'button' | 'submit' | 'reset', default: 'button' },
+  },
+  setup(props, { slots, attrs }) {
+    const isButton = computed(() => (props.is || 'button') === 'button')
+
+    const classes = computed(() => [
+      'btn',
+      {
+        'join-item': props.join,
+
+        'btn-neutral': !props.disabled && (props.neutral || props.color === 'neutral'),
+        'btn-primary': !props.disabled && (props.primary || props.color === 'primary'),
+        'btn-secondary': !props.disabled && (props.secondary || props.color === 'secondary'),
+        '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-xl': props.xl || props.size === 'xl',
+        '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-dash': !props.disabled && props.dash,
+        'btn-ghost': !props.disabled && props.ghost,
+        'btn-soft': !props.disabled && props.soft,
+        'btn-link': !props.disabled && props.link,
+        'btn-disabled': props.disabled,
+
+        'no-animation': props.noAnimation,
+        'btn-active': !props.disabled && props.active,
+      },
+    ])
+
+    function onKeydown(e: KeyboardEvent) {
+      if (props.disabled) return
+      if (e.code === 'Space' || e.code === 'Enter' || e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault()
+        ;(e.currentTarget as HTMLElement)?.click?.()
+      }
+    }
+
+    return () => {
+      const tag = props.is || 'button'
+      const isBtnEl = isButton.value
+
+      return h(
+        tag as any,
+        {
+          ...attrs,
+          type: isBtnEl ? props.type : undefined,
+          disabled: isBtnEl && props.disabled ? true : undefined,
+          'aria-disabled': !isBtnEl && props.disabled ? true : undefined,
+          tabindex: !isBtnEl ? (props.disabled ? -1 : 0) : undefined,
+          role: !isBtnEl ? 'button' : undefined,
+          class: classes.value,
+          onKeydown: !isBtnEl ? onKeydown : undefined,
+        },
+        slots.default?.(),
+      )
+    }
   },
-)
-// Accessibility: Determine if rendering a native button
-const isButton = computed(() => (props.is || 'button') === 'button')
-
-// Resolve the component to render
-const resolvedComponent = computed(() => {
-  const tag = props.is || 'button'
-  // For HTML elements, return the string directly
-  if (tag === 'button' || tag === 'a') {
-    return tag
-  }
-  // For component names, resolve from global registry
-  return resolveDynamicComponent(tag)
 })
-
-// Accessibility: Keyboard event handler for custom elements
-function onKeydown(e: KeyboardEvent) {
-  if (props.disabled) {
-    return
-  }
-  if (e.code === 'Space' || e.code === 'Enter' || e.key === ' ' || e.key === 'Enter') {
-    e.preventDefault()
-    // @ts-expect-error: $el may not exist yet
-    e.currentTarget?.click?.()
-  }
-}
 </script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    :type="isButton ? type : undefined"
-    :disabled="isButton && disabled ? true : undefined"
-    :aria-disabled="!isButton && disabled ? true : undefined"
-    :tabindex="!isButton ? (disabled ? -1 : 0) : undefined"
-    :role="!isButton ? 'button' : undefined"
-    class="btn"
-    :class="{
-      'join-item': join,
-
-      'btn-neutral': !disabled && (neutral || color === 'neutral'),
-      'btn-primary': !disabled && (primary || color === 'primary'),
-      'btn-secondary': !disabled && (secondary || color === 'secondary'),
-      'btn-accent': !disabled && (accent || color === 'accent'),
-      'btn-info': !disabled && (info || color === 'info'),
-      'btn-success': !disabled && (success || color === 'success'),
-      'btn-warning': !disabled && (warning || color === 'warning'),
-      'btn-error': !disabled && (error || color === 'error'),
-
-      'text-primary': !disabled && (primary || color === 'primary') && link,
-      'text-secondary': !disabled && (secondary || color === 'secondary') && link,
-      'text-neutral': !disabled && (neutral || color === 'neutral') && link,
-      'text-accent': !disabled && (accent || color === 'accent') && link,
-      'text-info': !disabled && (info || color === 'info') && link,
-      'text-success': !disabled && (success || color === 'success') && link,
-      'text-warning': !disabled && (warning || color === 'warning') && link,
-      'text-error': !disabled && (error || color === 'error') && link,
-
-      glass: !disabled && glass,
-
-      'btn-circle': circle || shape === 'circle',
-      'btn-square': square || shape === 'square',
-      'btn-wide': wide || shape === 'wide',
-      'btn-block': block || shape === 'block',
-
-      'btn-xl': xl || size === 'xl',
-      'btn-lg': lg || size === 'lg',
-      'btn-md': md || size === 'md',
-      'btn-sm': sm || size === 'sm',
-      'btn-xs': xs || size === 'xs',
-
-      'btn-outline': !disabled && outline,
-      'btn-dash': !disabled && dash,
-      'btn-ghost': !disabled && ghost,
-      'btn-soft': !disabled && soft,
-      'btn-link': !disabled && link,
-      'btn-disabled': disabled,
-
-      'no-animation': noAnimation,
-      'btn-active': !disabled && active,
-    }"
-    @keydown="!isButton ? onKeydown : undefined"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Card.vue

@@ -1,47 +1,38 @@
-<script setup lang="ts">
-import { computed, resolveDynamicComponent } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-defineOptions({
+export default defineComponent({
   inheritAttrs: false,
-})
+  props: {
+    is: { type: [String, Object], default: 'div' },
+    border: Boolean,
+    dash: Boolean,
+    side: Boolean,
+    imageFull: Boolean,
+    size: String as () => 'xl' | 'lg' | 'md' | 'sm' | 'xs',
+    xl: Boolean,
+    lg: Boolean,
+    md: Boolean,
+    sm: Boolean,
+    xs: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => [
+      'card',
+      {
+        'card-border': props.border,
+        'card-side': props.side,
+        'image-full': props.imageFull,
 
-const { is = 'div', ...props } = defineProps<{
-  is?: string
-  border?: boolean
-  dash?: boolean
-  side?: boolean
-  imageFull?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
+        'card-xl': props.xl || props.size === 'xl',
+        'card-lg': props.lg || props.size === 'lg',
+        'card-md': props.md || props.size === 'md',
+        'card-sm': props.sm || props.size === 'sm',
+        'card-xs': props.xs || props.size === 'xs',
+      },
+    ])
 
-const resolvedComponent = computed(() => {
-  if (is === 'div') return 'div'
-  return resolveDynamicComponent(is)
+    return () => h(props.is as any, { ...attrs, class: classes.value }, slots.default?.())
+  },
 })
 </script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    class="card"
-    :class="{
-      'card-border': props.border,
-      'card-side': props.side,
-      'image-full': props.imageFull,
-
-      'card-xl': props.xl || props.size === 'xl',
-      'card-lg': props.lg || props.size === 'lg',
-      'card-md': props.md || props.size === 'md',
-      'card-sm': props.sm || props.size === 'sm',
-      'card-xs': props.xs || props.size === 'xs',
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Countdown.vue

@@ -1,15 +1,12 @@
-<script setup lang="ts">
-import { computed } from 'vue'
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-const props = defineProps<{
-  is?: any
-}>()
-
-const tag = computed(() => props.is || 'span')
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'span' },
+  },
+  setup(props, { slots }) {
+    return () => h(props.is as any, { class: 'countdown' }, slots.default?.())
+  },
+})
 </script>
-
-<template>
-  <component :is="tag" class="countdown">
-    <slot />
-  </component>
-</template>

package/app/components/DaisyLink.vue

@@ -1,52 +1,39 @@
-<script setup lang="ts">
-import { computed, resolveDynamicComponent } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-defineOptions({
+export default defineComponent({
   inheritAttrs: false,
-})
+  props: {
+    is: { type: [String, Object], default: 'a' },
+    hover: Boolean,
 
-const props = withDefaults(
-  defineProps<{
-    is?: string
-    hover?: boolean
+    color: String as () => 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error',
+    neutral: Boolean,
+    primary: Boolean,
+    secondary: Boolean,
+    accent: Boolean,
+    success: Boolean,
+    info: Boolean,
+    warning: Boolean,
+    error: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => [
+      'link',
+      {
+        'link-neutral': props.neutral || props.color === 'neutral',
+        'link-primary': props.primary || props.color === 'primary',
+        'link-secondary': props.secondary || props.color === 'secondary',
+        'link-accent': props.accent || props.color === 'accent',
+        'link-success': props.success || props.color === 'success',
+        'link-info': props.info || props.color === 'info',
+        'link-warning': props.warning || props.color === 'warning',
+        'link-error': props.error || props.color === 'error',
+        'link-hover': props.hover,
+      },
+    ])
 
-    color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
-    neutral?: boolean
-    primary?: boolean
-    secondary?: boolean
-    accent?: boolean
-    success?: boolean
-    info?: boolean
-    warning?: boolean
-    error?: boolean
-  }>(),
-  {
-    is: 'a',
+    return () => h(props.is as any, { ...attrs, class: classes.value }, slots.default?.())
   },
-)
-const resolvedComponent = computed(() => {
-  if (props.is === 'a') return 'a'
-  return resolveDynamicComponent(props.is!)
 })
 </script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    class="link"
-    :class="{
-      'link-neutral': neutral || color === 'neutral',
-      'link-primary': primary || color === 'primary',
-      'link-secondary': secondary || color === 'secondary',
-      'link-accent': accent || color === 'accent',
-      'link-success': success || color === 'success',
-      'link-info': info || color === 'info',
-      'link-warning': warning || color === 'warning',
-      'link-error': error || color === 'error',
-      'link-hover': hover,
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Fieldset.vue

@@ -1,20 +1,18 @@
-<script setup lang="ts">
-defineOptions({
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
   inheritAttrs: false,
+  props: {
+    is: { type: [String, Object], default: 'fieldset' },
+    legend: String,
+  },
+  setup(props, { slots, attrs }) {
+    return () =>
+      h(props.is as any, { ...attrs, class: 'fieldset bg-base-200 border-base-300 rounded-box border p-4' }, [
+        props.legend ? h('legend', { class: 'fieldset-legend' }, props.legend) : slots.legend?.(),
+        slots.default?.(),
+      ])
+  },
 })
-
-const { is = 'fieldset', legend } = defineProps<{
-  is?: string
-  legend?: string
-}>()
 </script>
-
-<template>
-  <component :is="is" v-bind="$attrs" class="fieldset bg-base-200 border-base-300 rounded-box border p-4">
-    <legend v-if="legend" class="fieldset-legend">
-      {{ legend }}
-    </legend>
-    <slot v-else name="legend" />
-    <slot />
-  </component>
-</template>