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

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 == null) {
+        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/Stack.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'div' } = defineProps<{
   is?: string
   direction?: 'top' | 'end' | 'bottom' | 'start'
@@ -12,6 +16,7 @@ const { is = 'div' } = defineProps<{
 <template>
   <component
     :is="is"
+    v-bind="$attrs"
     class="stack"
     :class="{
       'stack-top': top || direction === 'top',

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