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

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>

package/app/components/ThemeTile.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  theme?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+const size = computed(() => props.size ?? 'md')
+
+const squareClass = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'w-full h-full rounded-[2px]'
+    case 'sm':
+      return 'w-full h-full rounded-[2px]'
+    case 'md':
+      return 'w-full h-full rounded-xs'
+    case 'lg':
+      return 'w-full h-full rounded-sm'
+    case 'xl':
+      return 'w-full h-full rounded'
+    default:
+      return 'w-full h-full rounded-xs'
+  }
+})
+</script>
+
+<template>
+  <div
+    :data-theme="theme"
+    class="grid grid-cols-2 bg-white rounded-sm"
+    :class="{
+      '!size-4 p-0.5 gap-px': xs || size === 'xs',
+      '!size-5 p-0.5 gap-px': sm || size === 'sm',
+      'size-6 p-0.5 gap-0.5': md || size === 'md' || !size,
+      'size-8 p-0.75 gap-0.5': lg || size === 'lg',
+      'size-10 h-10 p-1 gap-0.75': xl || size === 'xl',
+    }"
+  >
+    <div class="bg-neutral" :class="squareClass" />
+    <div class="bg-primary" :class="squareClass" />
+    <div class="bg-secondary" :class="squareClass" />
+    <div class="bg-accent" :class="squareClass" />
+  </div>
+</template>

package/app/components/Timeline.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  vertical?: boolean
+  horizontal?: boolean
+  compact?: boolean
+  snapIcon?: boolean
+}>()
+</script>
+
+<template>
+  <ul
+    class="timeline"
+    :class="{
+      'timeline-vertical': vertical,
+      'timeline-horizontal': horizontal,
+      'timeline-compact': compact,
+      'timeline-snap-icon': snapIcon,
+    }"
+  >
+    <slot />
+  </ul>
+</template>

package/app/components/TimelineEnd.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ box?: boolean }>()
+</script>
+
+<template>
+  <div
+    class="timeline-end"
+    :class="{
+      'timeline-box': box,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/TimelineItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <li class="timeline-item">
+    <slot />
+  </li>
+</template>

package/app/components/TimelineLine.vue

@@ -0,0 +1,29 @@
+<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
+}>()
+</script>
+
+<template>
+  <hr
+    class="timeline-line"
+    :class="{
+      'bg-neutral': neutral || color === 'neutral',
+      'bg-primary': primary || color === 'primary',
+      'bg-secondary': secondary || color === 'secondary',
+      'bg-accent': accent || color === 'accent',
+      'bg-info': info || color === 'info',
+      'bg-success': success || color === 'success',
+      'bg-warning': warning || color === 'warning',
+      'bg-error': error || color === 'error',
+    }"
+  />
+</template>

package/app/components/TimelineMiddle.vue

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

package/app/components/TimelineStart.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ box?: boolean }>()
+</script>
+
+<template>
+  <div
+    class="timeline-start"
+    :class="{
+      'timeline-box': box,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Toast.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Toast } from '../composables/use-toast'
+import { computed } from 'vue'
+import { useToast } from '../composables/use-toast'
+
+// Explicit slot typing (Vue 3.4+ / Volar)
+interface ToastSlotProps {
+  toast?: Toast
+  removeToast?: (id: number) => void
+  [key: string]: unknown
+}
+const props = defineProps<{
+  /**
+   * Horizontal alignment (start, center, end)
+   */
+  hAlign?: 'start' | 'center' | 'end'
+  start?: boolean
+  center?: boolean
+  end?: boolean
+  /**
+   * Vertical alignment (top, middle, bottom)
+   */
+  vAlign?: 'top' | 'middle' | 'bottom'
+  top?: boolean
+  middle?: boolean
+  bottom?: boolean
+  /**
+   * Toast channel name (for named channels)
+   */
+  name?: string
+  /**
+   * Default toast settings for this channel (merged into every toast)
+   * Example: { duration: 6000, type: 'info', position: 'top-center' }
+   */
+  defaults?: Partial<Toast>
+}>()
+
+defineSlots<{
+  default: (props: ToastSlotProps) => any
+}>()
+
+// Extract useToast options from props (name, defaults, future-proof)
+const toastOptions = computed(() => {
+  const { name, defaults } = props
+  return { name, defaults }
+})
+
+const { toasts, removeToast } = useToast(toastOptions.value)
+const visibleToasts = computed(() => toasts.value ?? [])
+</script>
+
+<template>
+  <div
+    class="toast"
+    :class="{
+      'toast-start': props.start || props.hAlign === 'start',
+      'toast-center': props.center || props.hAlign === 'center',
+      'toast-end': props.end || props.hAlign === 'end',
+      'toast-top': props.top || props.vAlign === 'top',
+      'toast-middle': props.middle || props.vAlign === 'middle',
+      'toast-bottom': props.bottom || props.vAlign === 'bottom',
+    }"
+  >
+    <slot v-for="toast in visibleToasts" :key="toast.id" :toast="toast" :remove-toast="removeToast" />
+    <slot />
+  </div>
+</template>

package/app/components/Toggle.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any
+  disabled?: boolean
+  validator?: boolean
+  themeController?: boolean
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: string
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <input
+    v-model="currentValue"
+    type="checkbox"
+    v-bind="$attrs"
+    class="toggle"
+    :disabled="disabled"
+    :class="{
+      validator,
+      'toggle-neutral': neutral || color === 'neutral',
+      'toggle-primary': primary || color === 'primary',
+      'toggle-secondary': secondary || color === 'secondary',
+      'toggle-accent': accent || color === 'accent',
+      'toggle-success': success || color === 'success',
+      'toggle-info': info || color === 'info',
+      'toggle-warning': warning || color === 'warning',
+      'toggle-error': error || color === 'error',
+      'toggle-xs': xs || size === 'xs',
+      'toggle-sm': sm || size === 'sm',
+      'toggle-md': md || size === 'md',
+      'toggle-lg': lg || size === 'lg',
+      'toggle-xl': xl || size === 'xl',
+      'theme-controller': themeController,
+    }"
+  />
+</template>