daisy-ui-kit 5.0.0-pre.3 → 5.0.0-pre.30

package/app/components/Stat.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  orientation?: 'vertical' | 'horizontal'
+  vertical?: boolean
+  horizontal?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="stat"
+    :class="{
+      'stat-vertical': vertical || orientation === 'vertical',
+      'stat-horizontal': horizontal || orientation === 'horizontal',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/StatActions.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="stat-actions">
+    <slot />
+  </div>
+</template>

package/app/components/StatDesc.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="stat-desc">
+    <slot />
+  </div>
+</template>

package/app/components/StatFigure.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="stat-figure">
+    <slot />
+  </div>
+</template>

package/app/components/StatTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="stat-title">
+    <slot />
+  </div>
+</template>

package/app/components/StatValue.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="stat-value">
+    <slot />
+  </div>
+</template>

package/app/components/Stats.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="stats">
+    <slot />
+  </div>
+</template>

package/app/components/Status.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="status"
+    :class="[
+      neutral || color === 'neutral' ? 'status-neutral' : '',
+      primary || color === 'primary' ? 'status-primary' : '',
+      secondary || color === 'secondary' ? 'status-secondary' : '',
+      accent || color === 'accent' ? 'status-accent' : '',
+      info || color === 'info' ? 'status-info' : '',
+      success || color === 'success' ? 'status-success' : '',
+      warning || color === 'warning' ? 'status-warning' : '',
+      error || color === 'error' ? 'status-error' : '',
+      xs || size === 'xs' ? 'status-xs' : '',
+      sm || size === 'sm' ? 'status-sm' : '',
+      md || size === 'md' || (!xs && !sm && !lg && !xl && !size) ? 'status-md' : '',
+      lg || size === 'lg' ? 'status-lg' : '',
+      xl || size === 'xl' ? 'status-xl' : '',
+    ]"
+  >
+    <slot />
+  </span>
+</template>

package/app/components/Step.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  glyph?: string
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <li
+    class="step"
+    :class="{
+      'step-neutral': props.neutral || props.color === 'neutral',
+      'step-primary': props.primary || props.color === 'primary',
+      'step-secondary': props.secondary || props.color === 'secondary',
+      'step-accent': props.accent || props.color === 'accent',
+      'step-info': props.info || props.color === 'info',
+      'step-success': props.success || props.color === 'success',
+      'step-warning': props.warning || props.color === 'warning',
+      'step-error': props.error || props.color === 'error',
+    }"
+    :data-content="glyph"
+  >
+    <slot />
+  </li>
+</template>

package/app/components/StepIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="step-icon">
+    <slot />
+  </span>
+</template>

package/app/components/Steps.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const {
+  orientation,
+  vertical = false,
+  horizontal = false,
+} = defineProps<{
+  orientation?: 'vertical' | 'horizontal'
+  vertical?: boolean
+  horizontal?: boolean
+}>()
+</script>
+
+<template>
+  <ul
+    class="steps"
+    :class="{
+      'steps-vertical': orientation === 'vertical' || vertical,
+      'steps-horizontal': orientation === 'horizontal' || horizontal,
+    }"
+  >
+    <slot />
+  </ul>
+</template>

package/app/components/Swap.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue?: boolean | null
+  rotate?: boolean
+  flip?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const checkbox = ref<HTMLInputElement | null>(null)
+
+// Keep the checkbox's indeterminate property in sync with modelValue
+watch(
+  () => props.modelValue,
+  val => {
+    nextTick(() => {
+      if (checkbox.value) {
+        checkbox.value.indeterminate = val === null
+      }
+    })
+  },
+  { immediate: true },
+)
+
+function updateValue(event: Event) {
+  const input = event.target as HTMLInputElement
+  // If indeterminate, toggle to checked
+  if (props.modelValue === null) {
+    emit('update:modelValue', true)
+  } else {
+    emit('update:modelValue', input.checked)
+  }
+}
+</script>
+
+<template>
+  <label
+    class="swap"
+    :class="{
+      'swap-rotate': rotate,
+      'swap-flip': flip,
+    }"
+  >
+    <input ref="checkbox" type="checkbox" :checked="modelValue === true" @change="updateValue" />
+    <div class="swap-indeterminate">
+      <slot name="indeterminate" />
+    </div>
+    <div class="swap-on">
+      <slot name="swap" />
+    </div>
+    <div class="swap-off">
+      <slot />
+    </div>
+  </label>
+</template>

package/app/components/Tab.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, inject, resolveComponent } from 'vue'
+
+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
+}
+</script>
+
+<template>
+  <component
+    :is="resolvedComponent"
+    v-bind="$attrs"
+    class="tab"
+    :class="{
+      'tab-active': props.active || tabManager.currentTab.value === name,
+      'tab-disabled': props.disabled,
+    }"
+    @keypress.enter="() => (tabManager.currentTab.value = name)"
+  >
+    <input
+      type="radio"
+      :name="tabManager.name"
+      :value="name"
+      :checked="tabManager.currentTab.value === name"
+      @change="() => (tabManager.currentTab.value = name)"
+    />
+
+    <slot v-if="$slots.default" />
+    <span v-else>{{ name }}</span>
+  </component>
+</template>

package/app/components/TabContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+const { is = 'div', name } = defineProps<{
+  is?: any
+  name: string
+}>()
+
+const tabManager: any = inject('tabManager')
+
+const isCurrentTab = computed(() => {
+  return tabManager.currentTab.value === name
+})
+
+if (!tabManager?.currentTab.value) {
+  tabManager.currentTab.value = name
+}
+
+const existing = tabManager?.tabs?.find((t: string) => t === name)
+if (!existing) {
+  tabManager.tabs.push(name)
+}
+</script>
+
+<template>
+  <component :is="is" v-show="isCurrentTab" class="tab-content">
+    <slot />
+  </component>
+</template>

package/app/components/Table.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  zebra?: boolean
+  pinRows?: boolean
+  pinCols?: boolean
+
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+</script>
+
+<template>
+  <table
+    class="table"
+    :class="[
+      zebra ? 'table-zebra' : '',
+      pinRows ? 'table-pin-rows' : '',
+      pinCols ? 'table-pin-cols' : '',
+      xs || size === 'xs' ? 'table-xs' : '',
+      sm || size === 'sm' ? 'table-sm' : '',
+      md || size === 'md' || (!xs && !sm && !lg && !xl && !size) ? 'table-md' : '',
+      lg || size === 'lg' ? 'table-lg' : '',
+      xl || size === 'xl' ? 'table-xl' : '',
+    ]"
+  >
+    <slot />
+  </table>
+</template>

package/app/components/Tabs.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+
+const { name } = defineProps<{
+  is?: any
+  name: string
+
+  variant?: 'box' | 'border' | 'lift'
+  box?: boolean
+  border?: boolean
+  lift?: boolean
+
+  placement?: 'top' | 'bottom'
+  top?: boolean
+  bottom?: boolean
+
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const currentTab = defineModel<string>('currentTab')
+
+const tabManager = {
+  name,
+  currentTab,
+  tabs: [],
+}
+provide('tabManager', tabManager)
+</script>
+
+<template>
+  <div
+    class="tabs"
+    :class="{
+      'tabs-box': variant === 'box' || box,
+      'tabs-border': variant === 'border' || border,
+      'tabs-lift': variant === 'lift' || lift,
+      'tabs-top': placement === 'top' || top,
+      'tabs-bottom': placement === 'bottom' || bottom,
+      'tabs-xl': size === 'xl' || xl,
+      'tabs-lg': size === 'lg' || lg,
+      'tabs-md': size === 'md' || md,
+      'tabs-sm': size === 'sm' || sm,
+      'tabs-xs': size === 'xs' || xs,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Text.vue

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

package/app/components/TextArea.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+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"
+    :class="{
+      'textarea-neutral': props.neutral || props.color === 'neutral',
+      'textarea-primary': props.primary || props.color === 'primary',
+      'textarea-secondary': props.secondary || props.color === 'secondary',
+      'textarea-accent': props.accent || props.color === 'accent',
+      'textarea-info': props.info || props.color === 'info',
+      'textarea-success': props.success || props.color === 'success',
+      'textarea-warning': props.warning || props.color === 'warning',
+      'textarea-error': props.error || props.color === 'error',
+
+      'textarea-ghost': props.ghost,
+      validator: props.validator,
+
+      'textarea-xl': props.xl || props.size === 'xl',
+      'textarea-lg': props.lg || props.size === 'lg',
+      'textarea-md': props.md || props.size === 'md',
+      'textarea-sm': props.sm || props.size === 'sm',
+      'textarea-xs': props.xs || props.size === 'xs',
+    }"
+    @input="
+      event => {
+        $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
+        adjustHeight()
+      }
+    "
+  />
+</template>