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

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,30 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject, resolveComponent } from 'vue'
 
-const { is = 'label', name, ...props } = defineProps<{
-  is?: any
+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
@@ -16,7 +33,8 @@ if (!tabManager.currentTab.value) {
 
 <template>
   <component
-    :is="is"
+    :is="resolvedComponent"
+    v-bind="$attrs"
     class="tab"
     :class="{
       'tab-active': props.active || tabManager.currentTab.value === name,
@@ -30,7 +48,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>

package/app/components/Text.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   is?: string
   join?: boolean
@@ -8,7 +14,23 @@ const props = defineProps<{
   inlineBlock?: boolean
   label?: boolean
 
-  color?: | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'primary-content' | 'secondary-content' | 'neutral-content' | 'accent-content' | 'info-content' | 'success-content' | 'warning-content' | 'error-content'
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'primary-content'
+    | 'secondary-content'
+    | 'neutral-content'
+    | 'accent-content'
+    | 'info-content'
+    | 'success-content'
+    | 'warning-content'
+    | 'error-content'
   neutral?: boolean
   primary?: boolean
   secondary?: boolean
@@ -26,7 +48,7 @@ const props = defineProps<{
   warningContent?: boolean
   errorContent?: boolean
 
-  size?: | '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  size?: '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
   xl?: boolean
   lg?: boolean
   md?: boolean
@@ -50,7 +72,7 @@ const props = defineProps<{
   serif?: boolean
   mono?: boolean
 
-  weight?: | 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
+  weight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
   thin?: boolean
   extralight?: boolean
   light?: boolean
@@ -61,40 +83,42 @@ const props = defineProps<{
   extrabold?: boolean
   black?: boolean
 }>()
+const NuxtLink = resolveComponent('NuxtLink')
+const RouterLink = resolveComponent('RouterLink')
+
+const resolvedComponent = computed(() => {
+  if (props.is === 'NuxtLink') return NuxtLink
+  if (props.is === 'RouterLink') return RouterLink
+  return props.is || 'span'
+})
 </script>
 
 <template>
   <component
-    :is="is || 'span'"
-    v-bind="label ? { 'data-role': 'label' } : {}"
+    :is="resolvedComponent"
+    v-bind="{ ...$attrs, ...(label ? { 'data-role': 'label' } : {}) }"
     :class="{
       'join-item': join,
 
-      'block': block,
-      'inline': inline,
+      block,
+      inline,
       'inline-block': inlineBlock,
-      'label': label,
+      label,
 
       'text-primary': primary || color === 'primary',
-      'text-primary-content':
-        primaryContent || color === 'primary-content',
+      'text-primary-content': primaryContent || color === 'primary-content',
       'text-secondary': secondary || color === 'secondary',
-      'text-secondary-content':
-        secondaryContent || color === 'secondary-content',
+      'text-secondary-content': secondaryContent || color === 'secondary-content',
       'text-neutral': neutral || color === 'neutral',
-      'text-neutral-content':
-        neutralContent || color === 'neutral-content',
+      'text-neutral-content': neutralContent || color === 'neutral-content',
       'text-accent': accent || color === 'accent',
-      'text-accent-content':
-        accentContent || color === 'accent-content',
+      'text-accent-content': accentContent || color === 'accent-content',
       'text-info': info || color === 'info',
       'text-info-content': infoContent || color === 'info-content',
       'text-success': success || color === 'success',
-      'text-success-content':
-        successContent || color === 'success-content',
+      'text-success-content': successContent || color === 'success-content',
       'text-warning': warning || color === 'warning',
-      'text-warning-content':
-        warningContent || color === 'warning-content',
+      'text-warning-content': warningContent || color === 'warning-content',
       'text-error': error || color === 'error',
       'text-error-content': errorContent || color === 'error-content',
 
@@ -117,9 +141,9 @@ const props = defineProps<{
       'text-right': right || align === 'right',
       'text-justify': justify || align === 'justify',
 
-      'uppercase': uppercase || props.case === 'upper',
-      'lowercase': lowercase || props.case === 'lower',
-      'capitalize': capitalize || props.case === 'capitalize',
+      uppercase: uppercase || props.case === 'upper',
+      lowercase: lowercase || props.case === 'lower',
+      capitalize: capitalize || props.case === 'capitalize',
       'normal-case': normalCase || props.case === 'normal',
 
       'font-sans': sans || font === 'sans',

package/app/components/TextArea.vue

@@ -1,39 +1,79 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  modelValue?: string
-  placeholder?: string
-  type?: 'text' | 'phone' | 'email' | 'search'
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  ghost?: boolean
-  disabled?: boolean
-  validator?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  type: 'text',
-})
+import { nextTick, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    type?: 'text' | 'phone' | 'email' | 'search'
+    rows?: number
+    autoExpand?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    ghost?: boolean
+    disabled?: boolean
+    validator?: boolean
+
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    type: 'text',
+    rows: 2,
+  },
+)
 defineEmits(['update:modelValue'])
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+let minHeight = 0
+
+function adjustHeight() {
+  if (!props.autoExpand || !textareaRef.value) return
+  const el = textareaRef.value
+
+  // Capture the initial rendered height as minimum (respects rows attribute)
+  if (minHeight === 0) {
+    minHeight = el.offsetHeight
+  }
+
+  el.style.height = 'auto'
+  el.style.height = `${Math.max(el.scrollHeight, minHeight)}px`
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    nextTick(adjustHeight)
+  },
+)
+
+onMounted(() => {
+  if (props.autoExpand) {
+    nextTick(adjustHeight)
+  }
+})
 </script>
 
 <template>
   <textarea
+    ref="textareaRef"
     :value="modelValue"
     :type="type"
+    :rows="rows"
     :placeholder="placeholder"
     :disabled="disabled"
     class="textarea"
@@ -48,7 +88,7 @@ defineEmits(['update:modelValue'])
       'textarea-error': props.error || props.color === 'error',
 
       'textarea-ghost': props.ghost,
-      'validator': props.validator,
+      validator: props.validator,
 
       'textarea-xl': props.xl || props.size === 'xl',
       'textarea-lg': props.lg || props.size === 'lg',
@@ -56,6 +96,11 @@ defineEmits(['update:modelValue'])
       'textarea-sm': props.sm || props.size === 'sm',
       'textarea-xs': props.xs || props.size === 'xs',
     }"
-    @input="(event) => $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
+    @input="
+      event => {
+        $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
+        adjustHeight()
+      }
+    "
   />
 </template>

package/app/components/TextRotate.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  is?: any
+  center?: boolean
+  duration?: number
+}>()
+
+const style = computed(() => {
+  if (props.duration) {
+    return { animationDuration: `${props.duration}ms` }
+  }
+  return undefined
+})
+</script>
+
+<template>
+  <component :is="props.is || 'span'" class="text-rotate" :style="style">
+    <span :class="{ 'justify-items-center': props.center }">
+      <slot />
+    </span>
+  </component>
+</template>

package/app/components/ThemeController.vue

@@ -18,16 +18,15 @@ const props = defineProps<{
   storage?: <T>(key: string, initial: T) => import('vue').Ref<T>
 }>()
 
-const themeOptions = props.themes || props.defaultTheme
-  ? { themes: props.themes || [], defaultTheme: props.defaultTheme }
-  : undefined
+const themeOptions =
+  props.themes || props.defaultTheme ? { themes: props.themes || [], defaultTheme: props.defaultTheme } : undefined
 
 const { theme, effectiveTheme, themes, setTheme, cycleTheme, registerTheme, removeTheme } = useDaisyTheme(
   props.storage,
   themeOptions,
 )
 
-const availableThemes = computed(() => themes.value.map(t => typeof t === 'string' ? t : t.theme))
+const availableThemes = computed(() => themes.value.map(t => (typeof t === 'string' ? t : t.theme)))
 </script>
 
 <template>

package/app/components/ThemeProvider.vue

@@ -19,7 +19,12 @@ function cssVarToCamel(str: string): string {
 function dataAttrToCamel(str: string): string {
   return str.replace(/-([a-z0-9])/g, (_, c: string) => c.toUpperCase())
 }
-function parseThemeString(themeString?: string): { style: Record<string, string>, dataAttrs: Record<string, string>, dataTheme: string | undefined, allAttrs: Record<string, string> } {
+function parseThemeString(themeString?: string): {
+  style: Record<string, string>
+  dataAttrs: Record<string, string>
+  dataTheme: string | undefined
+  allAttrs: Record<string, string>
+} {
   if (!themeString) {
     return { style: {}, dataAttrs: {}, dataTheme: undefined, allAttrs: {} }
   }
@@ -33,10 +38,14 @@ function parseThemeString(themeString?: string): { style: Record<string, string>
   const allAttrs: Record<string, string> = {}
 
   // Remove @plugin ... { and closing } if present
-  const str = themeString.trim().replace(/^@plugin[^{}]*\{/, '').replace(/\}$/, '').trim()
+  const str = themeString
+    .trim()
+    .replace(/^@plugin[^{}]*\{/, '')
+    .replace(/\}$/, '')
+    .trim()
 
   // works with or without newline characters
-  str.split(/[\n;]/).forEach((line) => {
+  str.split(/[\n;]/).forEach(line => {
     const trimmed = line.trim()
     if (!trimmed || trimmed.startsWith('//')) {
       return
@@ -57,12 +66,10 @@ function parseThemeString(themeString?: string): { style: Record<string, string>
     if (varNamePattern.test(key)) {
       style[key] = value
       allAttrs[cssVarToCamel(key)] = value
-    }
-    else if (key === 'name') {
+    } else if (key === 'name') {
       dataTheme = value.replace(/"/g, '')
       allAttrs.dataTheme = dataTheme
-    }
-    else if (attrNamePattern.test(key)) {
+    } else if (attrNamePattern.test(key)) {
       const attrKey = `data-${key.replace(/[^\w-]/g, '')}`
       const attrVal = value.replace(/"/g, '')
       dataAttrs[attrKey] = attrVal
@@ -78,7 +85,7 @@ const parsed = computed(() => parseThemeString(props.dataTheme ?? props.cssVars)
 
 const themeVars = ref<Record<string, string>>({})
 let observers: MutationObserver[] = []
-let themeControllerInputs: Array<{ el: HTMLInputElement, listener: () => void }> = []
+let themeControllerInputs: Array<{ el: HTMLInputElement; listener: () => void }> = []
 let themeControllerDomObserver: MutationObserver | null = null
 
 // Converts a themeAttrs object to a DaisyUI theme string
@@ -88,15 +95,16 @@ function toThemeString(attrs: Record<string, string>, opts?: { asPlugin?: boolea
   for (const [key, value] of Object.entries(attrs)) {
     if (key === 'dataTheme') {
       lines.push(`name: "${value}";`)
-    }
-    else if (key.startsWith('data')) {
+    } else if (key.startsWith('data')) {
       // Convert dataFooBar -> foo-bar
-      const attr = key.slice(4).replace(/([A-Z])/g, '-$1').toLowerCase()
+      const attr = key
+        .slice(4)
+        .replace(/([A-Z])/g, '-$1')
+        .toLowerCase()
       if (attr !== 'theme') {
         lines.push(`${attr}: ${value};`)
       }
-    }
-    else {
+    } else {
       // Convert camelCase to --kebab-case
       const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`
       lines.push(`${cssVar}: ${value};`)
@@ -207,8 +215,10 @@ function setupSnoop(rootEl: HTMLElement): void {
     })
     themeControllerInputs = []
     // Find all matching inputs in the document
-    const inputs = Array.from(document.querySelectorAll('input[type="checkbox"].theme-controller, input[type="radio"].theme-controller')) as HTMLInputElement[]
-    inputs.forEach((el) => {
+    const inputs = Array.from(
+      document.querySelectorAll('input[type="checkbox"].theme-controller, input[type="radio"].theme-controller'),
+    ) as HTMLInputElement[]
+    inputs.forEach(el => {
       const listener = () => updateVars()
       el.addEventListener('change', listener)
       themeControllerInputs.push({ el, listener })
@@ -226,9 +236,13 @@ function setupSnoop(rootEl: HTMLElement): void {
   themeControllerDomObserver.observe(document.body, { childList: true, subtree: true })
 
   // Watch for applied style changes (parsed.style)
-  watch(() => parsed.value.style, () => {
-    nextTick(() => updateVars())
-  }, { immediate: false, deep: true })
+  watch(
+    () => parsed.value.style,
+    () => {
+      nextTick(() => updateVars())
+    },
+    { immediate: false, deep: true },
+  )
   updateVars()
 }
 
@@ -236,21 +250,22 @@ const rootEl = ref<HTMLElement | null>(null)
 
 const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
 
-watch([
-  () => props.snoop,
-  () => rootEl.value,
-], ([snoop, el]) => {
-  if (isClient) {
-    // Clean up previous observers if any
-    observers.forEach((o: MutationObserver) => o.disconnect())
-    observers = []
-    if (snoop && el) {
-      nextTick(() => {
-        setupSnoop(el)
-      })
+watch(
+  [() => props.snoop, () => rootEl.value],
+  ([snoop, el]) => {
+    if (isClient) {
+      // Clean up previous observers if any
+      observers.forEach((o: MutationObserver) => o.disconnect())
+      observers = []
+      if (snoop && el) {
+        nextTick(() => {
+          setupSnoop(el)
+        })
+      }
     }
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 onUnmounted(() => {
   observers.forEach((o: MutationObserver) => o.disconnect())

package/app/components/TimelineLine.vue

@@ -25,5 +25,5 @@ defineProps<{
       'bg-warning': warning || color === 'warning',
       'bg-error': error || color === 'error',
     }"
-  >
+  />
 </template>

package/app/components/TimelineStart.vue

@@ -4,7 +4,8 @@ defineProps<{ box?: boolean }>()
 
 <template>
   <div
-    class="timeline-start" :class="{
+    class="timeline-start"
+    :class="{
       'timeline-box': box,
     }"
   >

package/app/components/Toast.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Toast } from '~/composables/use-toast'
+import type { Toast } from '../composables/use-toast'
 import { computed } from 'vue'
-import { useToast } from '~/composables/use-toast'
+import { useToast } from '../composables/use-toast'
 
 // Explicit slot typing (Vue 3.4+ / Volar)
 interface ToastSlotProps {
@@ -61,12 +61,7 @@ const visibleToasts = computed(() => toasts.value ?? [])
       'toast-bottom': props.bottom || props.vAlign === 'bottom',
     }"
   >
-    <slot
-      v-for="toast in visibleToasts"
-      :key="toast.id"
-      :toast="toast"
-      :remove-toast="removeToast"
-    />
+    <slot v-for="toast in visibleToasts" :key="toast.id" :toast="toast" :remove-toast="removeToast" />
     <slot />
   </div>
 </template>

package/app/components/Toggle.vue

@@ -40,7 +40,7 @@ const currentValue = computed({
     class="toggle"
     :disabled="disabled"
     :class="{
-      'validator': validator,
+      validator,
       'toggle-neutral': neutral || color === 'neutral',
       'toggle-primary': primary || color === 'primary',
       'toggle-secondary': secondary || color === 'secondary',
@@ -56,5 +56,5 @@ const currentValue = computed({
       'toggle-xl': xl || size === 'xl',
       'theme-controller': themeController,
     }"
-  >
+  />
 </template>