daisy-ui-kit 3.0.12 → 5.0.0-pre.11

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,162 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+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="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,64 @@
+<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',
+  },
+)
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <textarea
+    :value="modelValue"
+    :type="type"
+    :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)"
+  />
+</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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { DaisyThemeInput } from '@/composables/use-daisy-theme'
+import { useDaisyTheme } from '@/composables/use-daisy-theme'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  /**
+   * Optional: List of themes to provide (string or DaisyThemeMeta)
+   */
+  themes?: DaisyThemeInput[]
+  /**
+   * Optional: Default theme name (string or 'default')
+   */
+  defaultTheme?: string
+  /**
+   * Optional: Storage function for persistence (e.g., useCookie, useLocalStorage, or ref)
+   */
+  storage?: <T>(key: string, initial: T) => import('vue').Ref<T>
+}>()
+
+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)))
+</script>
+
+<template>
+  <div class="theme-controller">
+    <slot
+      :theme="theme"
+      :effective-theme="effectiveTheme"
+      :themes="themes"
+      :available-themes="availableThemes"
+      :set-theme="setTheme"
+      :cycle-theme="cycleTheme"
+      :register-theme="registerTheme"
+      :remove-theme="removeTheme"
+    />
+  </div>
+</template>

package/app/components/ThemeProvider.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import type { ComputedThemeVarsSlot } from './ThemeProvider.inject.js'
+import { computed, nextTick, onUnmounted, provide, ref, watch } from 'vue'
+import { daisyUiThemeKey } from './ThemeProvider.inject.js'
+
+const props = defineProps<{
+  /**
+   * DaisyUI theme string (recommended prop name)
+   */
+  dataTheme?: string
+
+  cssVars?: string
+  snoop?: boolean
+}>()
+
+function cssVarToCamel(str: string): string {
+  return str.replace(/^--/, '').replace(/-([a-z0-9])/g, (_, c: string) => c.toUpperCase())
+}
+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>
+} {
+  if (!themeString) {
+    return { style: {}, dataAttrs: {}, dataTheme: undefined, allAttrs: {} }
+  }
+  const varNamePattern = /^--[\w-]+$/
+  const attrNamePattern = /^[a-z_][\w-]*$/i
+  const forbiddenChars = /[<>{};]/g
+
+  const style: Record<string, string> = {}
+  const dataAttrs: Record<string, string> = {}
+  let dataTheme: string | undefined
+  const allAttrs: Record<string, string> = {}
+
+  // Remove @plugin ... { and closing } if present
+  const str = themeString
+    .trim()
+    .replace(/^@plugin[^{}]*\{/, '')
+    .replace(/\}$/, '')
+    .trim()
+
+  // works with or without newline characters
+  str.split(/[\n;]/).forEach(line => {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('//')) {
+      return
+    }
+    const colonIdx = trimmed.indexOf(':')
+    if (colonIdx === -1) {
+      return
+    }
+    const key = trimmed.slice(0, colonIdx).trim()
+    let value = trimmed.slice(colonIdx + 1).trim()
+    if (value.endsWith(';')) {
+      value = value.slice(0, -1).trim()
+    }
+    value = value.replace(forbiddenChars, '')
+    if (!value) {
+      return
+    }
+    if (varNamePattern.test(key)) {
+      style[key] = value
+      allAttrs[cssVarToCamel(key)] = value
+    } else if (key === 'name') {
+      dataTheme = value.replace(/"/g, '')
+      allAttrs.dataTheme = dataTheme
+    } else if (attrNamePattern.test(key)) {
+      const attrKey = `data-${key.replace(/[^\w-]/g, '')}`
+      const attrVal = value.replace(/"/g, '')
+      dataAttrs[attrKey] = attrVal
+      if (attrKey.startsWith('data-')) {
+        allAttrs[dataAttrToCamel(attrKey)] = attrVal
+      }
+    }
+  })
+  return { style, dataAttrs, dataTheme, allAttrs }
+}
+
+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 themeControllerDomObserver: MutationObserver | null = null
+
+// Converts a themeAttrs object to a DaisyUI theme string
+function toThemeString(attrs: Record<string, string>, opts?: { asPlugin?: boolean }) {
+  const lines: string[] = []
+  // Map camelCase back to DaisyUI keys
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key === 'dataTheme') {
+      lines.push(`name: "${value}";`)
+    } else if (key.startsWith('data')) {
+      // Convert dataFooBar -> foo-bar
+      const attr = key
+        .slice(4)
+        .replace(/([A-Z])/g, '-$1')
+        .toLowerCase()
+      if (attr !== 'theme') {
+        lines.push(`${attr}: ${value};`)
+      }
+    } else {
+      // Convert camelCase to --kebab-case
+      const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`
+      lines.push(`${cssVar}: ${value};`)
+    }
+  }
+  const inner = lines.join('\n')
+  if (opts?.asPlugin) {
+    return `@plugin \"daisyui/theme\" {\n${inner}\n}`
+  }
+  return inner
+}
+
+// Returns the slot data object depending on snoop mode
+const slotData: ComputedThemeVarsSlot = computed(() => {
+  // Access both dependencies so Vue always tracks them for reactivity
+  void themeVars.value
+  void parsed.value.allAttrs
+  if (props.snoop) {
+    return {
+      vars: themeVars.value,
+      toThemeString: (attrs = themeVars.value, opts) => toThemeString(attrs, opts),
+    }
+  }
+  return {
+    vars: parsed.value.allAttrs,
+    toThemeString: (attrs = parsed.value.allAttrs, opts) => toThemeString(attrs, opts),
+  }
+})
+
+// Provide the slotData as 'daisyUiTheme' for child consumers
+provide(daisyUiThemeKey, slotData)
+
+// DaisyUI variable names
+const daisyVars = [
+  '--color-primary',
+  '--color-primary-content',
+  '--color-secondary',
+  '--color-secondary-content',
+  '--color-accent',
+  '--color-accent-content',
+  '--color-neutral',
+  '--color-neutral-content',
+  '--color-base-100',
+  '--color-base-200',
+  '--color-base-300',
+  '--color-base-content',
+  '--color-info',
+  '--color-info-content',
+  '--color-success',
+  '--color-success-content',
+  '--color-warning',
+  '--color-warning-content',
+  '--color-error',
+  '--color-error-content',
+  '--radius-selector',
+  '--radius-field',
+  '--radius-box',
+  '--size-selector',
+  '--size-field',
+  '--border',
+  '--depth',
+  '--noise',
+]
+
+function getDaisyVarsFromEl(el: HTMLElement): Record<string, string> {
+  const vars: Record<string, string> = {}
+  const style = getComputedStyle(el)
+  for (const varName of daisyVars) {
+    const val = style.getPropertyValue(varName)
+    if (val) {
+      vars[cssVarToCamel(varName)] = val.trim()
+    }
+  }
+  return vars
+}
+
+let prefersColorSchemeMql: MediaQueryList | null = null
+let prefersColorSchemeCleanup: (() => void) | null = null
+
+function setupSnoop(rootEl: HTMLElement): void {
+  function updateVars(): void {
+    themeVars.value = getDaisyVarsFromEl(rootEl)
+  }
+  // Observe the current element for data-theme changes
+  const obs = new MutationObserver(() => updateVars())
+  obs.observe(rootEl, { attributes: true, attributeFilter: ['data-theme'] })
+
+  // Also observe the <html> element for data-theme changes
+  const htmlEl = document.documentElement
+  const htmlObs = new MutationObserver(() => updateVars())
+  htmlObs.observe(htmlEl, { attributes: true, attributeFilter: ['data-theme'] })
+
+  observers = [obs, htmlObs]
+
+  // Listen for prefers-color-scheme changes
+  prefersColorSchemeMql = window.matchMedia('(prefers-color-scheme: dark)')
+  const prefersColorSchemeListener = () => updateVars()
+  prefersColorSchemeMql.addEventListener('change', prefersColorSchemeListener)
+  prefersColorSchemeCleanup = () => {
+    prefersColorSchemeMql?.removeEventListener('change', prefersColorSchemeListener)
+  }
+
+  // --- Observe theme-controller checkboxes/radios, including dynamic changes ---
+  function bindThemeControllerInputs() {
+    // Remove any previous listeners
+    themeControllerInputs.forEach(({ el, listener }) => {
+      el.removeEventListener('change', listener)
+    })
+    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 listener = () => updateVars()
+      el.addEventListener('change', listener)
+      themeControllerInputs.push({ el, listener })
+    })
+  }
+  bindThemeControllerInputs()
+  // Observe DOM for dynamic addition/removal of theme-controller inputs
+  if (themeControllerDomObserver) {
+    themeControllerDomObserver.disconnect()
+    themeControllerDomObserver = null
+  }
+  themeControllerDomObserver = new MutationObserver(() => {
+    bindThemeControllerInputs()
+  })
+  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 },
+  )
+  updateVars()
+}
+
+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)
+        })
+      }
+    }
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  observers.forEach((o: MutationObserver) => o.disconnect())
+  observers = []
+  // Remove prefers-color-scheme listener if present
+  if (prefersColorSchemeCleanup) {
+    prefersColorSchemeCleanup()
+    prefersColorSchemeCleanup = null
+    prefersColorSchemeMql = null
+  }
+  // Remove theme-controller listeners
+  themeControllerInputs.forEach(({ el, listener }) => {
+    el.removeEventListener('change', listener)
+  })
+  themeControllerInputs = []
+  // Disconnect theme-controller DOM observer
+  if (themeControllerDomObserver) {
+    themeControllerDomObserver.disconnect()
+    themeControllerDomObserver = null
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    v-bind="parsed.dataAttrs"
+    :data-theme="dataTheme"
+    :style="parsed.style"
+    class="[background-color:unset] theme-provider"
+  >
+    <slot v-bind="slotData" />
+  </div>
+</template>