daisy-ui-kit 5.0.0-pre.5 → 5.0.0-pre.6

package/app/components/Input.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+// Map input type to value type
+type InputType =
+  | 'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number | null
+  type?: InputType
+  placeholder?: string
+  disabled?: boolean
+  validator?: boolean
+  join?: boolean
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+  ghost?: boolean
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>(), {
+  type: 'text',
+})
+const emit = defineEmits(['update:modelValue'])
+
+// For slot context
+function setValue(val: string | number | null) {
+  emit('update:modelValue', val)
+}
+
+const labelCtx = inject('labelCtx', false)
+
+const inputAttrs = computed(() => {
+  if (labelCtx) {
+    return {
+      type: props.type,
+      placeholder: props.placeholder,
+      disabled: props.disabled,
+    }
+  }
+  return {
+    type: props.type,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    class: [
+      'input',
+      { validator: props.validator },
+      { 'input-primary': props.primary || props.color === 'primary' },
+      { 'input-secondary': props.secondary || props.color === 'secondary' },
+      { 'input-accent': props.accent || props.color === 'accent' },
+      { 'input-info': props.info || props.color === 'info' },
+      { 'input-success': props.success || props.color === 'success' },
+      { 'input-warning': props.warning || props.color === 'warning' },
+      { 'input-error': props.error || props.color === 'error' },
+      { 'input-ghost': props.ghost },
+      { 'input-xl': props.xl || props.size === 'xl' },
+      { 'input-lg': props.lg || props.size === 'lg' },
+      { 'input-md': props.md || props.size === 'md' },
+      { 'input-sm': props.sm || props.size === 'sm' },
+      { 'input-xs': props.xs || props.size === 'xs' },
+      { 'join-item': props.join },
+    ],
+  }
+})
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: setValue,
+})
+</script>
+
+<template>
+  <div v-if="$slots.default">
+    <slot
+      :value="inputModel"
+      :set-value="setValue"
+      :input-attrs="inputAttrs"
+      :props="props"
+      :input-model="inputModel"
+    />
+  </div>
+  <input
+    v-else
+    v-bind="inputAttrs"
+    :value="inputModel"
+    @input="
+      $emit('update:modelValue',
+            props.type === 'number'
+              ? ($event.target as HTMLInputElement).value === '' ? null : Number(($event.target as HTMLInputElement).value)
+              : ($event.target as HTMLInputElement).value,
+      )
+    "
+  >
+</template>

package/app/components/Join.vue

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

package/app/components/Kbd.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+</script>
+
+<template>
+  <kbd
+    class="kbd" :class="{
+      'kbd-xl': xl || size === 'xl',
+      'kbd-lg': lg || size === 'lg',
+      'kbd-md': md || size === 'md',
+      'kbd-sm': sm || size === 'sm',
+      'kbd-xs': xs || size === 'xs',
+    }"
+  >
+    <slot />
+  </kbd>
+</template>

package/app/components/Label.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+import Text from './Text.vue'
+
+withDefaults(defineProps<{
+  is?: string
+  floating?: boolean
+  input?: boolean
+
+  join?: boolean
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+  ghost?: boolean
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>(), {
+  is: 'label',
+})
+
+// Provide label context for child inputs
+provide('labelCtx', true)
+</script>
+
+<template>
+  <Text
+    :is="is"
+    :class="[
+      {
+        'input': input,
+        'join-item': input && join,
+        'input-primary': input && (primary || color === 'primary'),
+        'input-secondary': input && (secondary || color === 'secondary'),
+        'input-accent': input && (accent || color === 'accent'),
+        'input-info': input && (info || color === 'info'),
+        'input-success': input && (success || color === 'success'),
+        'input-warning': input && (warning || color === 'warning'),
+        'input-error': input && (error || color === 'error'),
+        'input-ghost': input && ghost,
+        'input-xl': input && (size === 'xl' || xl),
+        'input-lg': input && (size === 'lg' || lg),
+        'input-md': input && (size === 'md' || md),
+        'input-sm': input && (size === 'sm' || sm),
+        'input-xs': input && (size === 'xs' || xs),
+      },
+      { label: !floating && !input },
+      { 'floating-label': floating },
+    ]"
+  >
+    <slot />
+  </Text>
+</template>

package/app/components/List.vue

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

package/app/components/ListColGrow.vue

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

package/app/components/ListColWrap.vue

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

package/app/components/ListRow.vue

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

package/app/components/LoadingBall.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  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
+}>()
+</script>
+
+<template>
+  <span
+    class="loading loading-ball"
+    :class="{
+      'text-primary': props.primary || props.color === 'primary',
+      'text-secondary': props.secondary || props.color === 'secondary',
+      'text-neutral': props.neutral || props.color === 'neutral',
+      'text-accent': props.accent || props.color === 'accent',
+      'text-info': props.info || props.color === 'info',
+      'text-success': props.success || props.color === 'success',
+      'text-warning': props.warning || props.color === 'warning',
+      'text-error': props.error || props.color === 'error',
+
+      'loading-xl': props.xl || props.size === 'xl',
+      'loading-lg': props.lg || props.size === 'lg',
+      'loading-md': props.md || props.size === 'md',
+      'loading-sm': props.sm || props.size === 'sm',
+      'loading-xs': props.xs || props.size === 'xs',
+    }"
+  />
+</template>

package/app/components/LoadingBars.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  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
+}>()
+</script>
+
+<template>
+  <span
+    class="loading loading-bars"
+    :class="{
+      'text-primary': props.primary || props.color === 'primary',
+      'text-secondary': props.secondary || props.color === 'secondary',
+      'text-neutral': props.neutral || props.color === 'neutral',
+      'text-accent': props.accent || props.color === 'accent',
+      'text-info': props.info || props.color === 'info',
+      'text-success': props.success || props.color === 'success',
+      'text-warning': props.warning || props.color === 'warning',
+      'text-error': props.error || props.color === 'error',
+
+      'loading-xl': props.xl || props.size === 'xl',
+      'loading-lg': props.lg || props.size === 'lg',
+      'loading-md': props.md || props.size === 'md',
+      'loading-sm': props.sm || props.size === 'sm',
+      'loading-xs': props.xs || props.size === 'xs',
+    }"
+  />
+</template>

package/app/components/LoadingDots.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  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
+}>()
+</script>
+
+<template>
+  <span
+    class="loading loading-dots"
+    :class="{
+      'text-primary': props.primary || props.color === 'primary',
+      'text-secondary': props.secondary || props.color === 'secondary',
+      'text-neutral': props.neutral || props.color === 'neutral',
+      'text-accent': props.accent || props.color === 'accent',
+      'text-info': props.info || props.color === 'info',
+      'text-success': props.success || props.color === 'success',
+      'text-warning': props.warning || props.color === 'warning',
+      'text-error': props.error || props.color === 'error',
+
+      'loading-xl': props.xl || props.size === 'xl',
+      'loading-lg': props.lg || props.size === 'lg',
+      'loading-md': props.md || props.size === 'md',
+      'loading-sm': props.sm || props.size === 'sm',
+      'loading-xs': props.xs || props.size === 'xs',
+    }"
+  />
+</template>

package/app/components/LoadingInfinity.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  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
+}>()
+</script>
+
+<template>
+  <span
+    class="loading loading-infinity"
+    :class="{
+      'text-primary': props.primary || props.color === 'primary',
+      'text-secondary': props.secondary || props.color === 'secondary',
+      'text-neutral': props.neutral || props.color === 'neutral',
+      'text-accent': props.accent || props.color === 'accent',
+      'text-info': props.info || props.color === 'info',
+      'text-success': props.success || props.color === 'success',
+      'text-warning': props.warning || props.color === 'warning',
+      'text-error': props.error || props.color === 'error',
+
+      'loading-xl': props.xl || props.size === 'xl',
+      'loading-lg': props.lg || props.size === 'lg',
+      'loading-md': props.md || props.size === 'md',
+      'loading-sm': props.sm || props.size === 'sm',
+      'loading-xs': props.xs || props.size === 'xs',
+    }"
+  />
+</template>

package/app/components/LoadingRing.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  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
+}>()
+</script>
+
+<template>
+  <span
+    class="loading loading-ring"
+    :class="{
+      'text-primary': props.primary || props.color === 'primary',
+      'text-secondary': props.secondary || props.color === 'secondary',
+      'text-neutral': props.neutral || props.color === 'neutral',
+      'text-accent': props.accent || props.color === 'accent',
+      'text-info': props.info || props.color === 'info',
+      'text-success': props.success || props.color === 'success',
+      'text-warning': props.warning || props.color === 'warning',
+      'text-error': props.error || props.color === 'error',
+
+      'loading-xl': props.xl || props.size === 'xl',
+      'loading-lg': props.lg || props.size === 'lg',
+      'loading-md': props.md || props.size === 'md',
+      'loading-sm': props.sm || props.size === 'sm',
+      'loading-xs': props.xs || props.size === 'xs',
+    }"
+  />
+</template>

package/app/components/LoadingSpinner.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  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
+}>()
+</script>
+
+<template>
+  <span
+    class="loading loading-spinner"
+    :class="{
+      'text-primary': props.primary || props.color === 'primary',
+      'text-secondary': props.secondary || props.color === 'secondary',
+      'text-neutral': props.neutral || props.color === 'neutral',
+      'text-accent': props.accent || props.color === 'accent',
+      'text-info': props.info || props.color === 'info',
+      'text-success': props.success || props.color === 'success',
+      'text-warning': props.warning || props.color === 'warning',
+      'text-error': props.error || props.color === 'error',
+
+      'loading-xl': props.xl || props.size === 'xl',
+      'loading-lg': props.lg || props.size === 'lg',
+      'loading-md': props.md || props.size === 'md',
+      'loading-sm': props.sm || props.size === 'sm',
+      'loading-xs': props.xs || props.size === 'xs',
+    }"
+  />
+</template>

package/app/components/Mask.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = defineProps<{
+  shape?: string
+  squircle?: boolean
+  heart?: boolean
+  hexagon?: boolean
+  hexagon2?: boolean
+  decagon?: boolean
+  pentagon?: boolean
+  diamond?: boolean
+  square?: boolean
+  circle?: boolean
+  star?: boolean
+  star2?: boolean
+  triangle?: boolean
+  triangle2?: boolean
+  triangle3?: boolean
+  triangle4?: boolean
+  half1?: boolean
+  half2?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="mask"
+    :class="{
+      'mask-squircle': props.squircle || props.shape === 'squircle',
+      'mask-heart': props.heart || props.shape === 'heart',
+      'mask-hexagon': props.hexagon || props.shape === 'hexagon',
+      'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
+      'mask-decagon': props.decagon || props.shape === 'decagon',
+      'mask-pentagon': props.pentagon || props.shape === 'pentagon',
+      'mask-diamond': props.diamond || props.shape === 'diamond',
+      'mask-square': props.square || props.shape === 'square',
+      'mask-circle': props.circle || props.shape === 'circle',
+      'mask-star': props.star || props.shape === 'star',
+      'mask-star-2': props.star2 || props.shape === 'star-2',
+      'mask-triangle': props.triangle || props.shape === 'triangle',
+      'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
+      'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
+      'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
+      'mask-half-1': props.half1 || props.shape === 'half-1',
+      'mask-half-2': props.half2 || props.shape === 'half-2',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Menu.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  align?: 'vertical' | 'horizontal'
+  vertical?: boolean
+  horizontal?: boolean
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+</script>
+
+<template>
+  <ul
+    class="menu"
+    :class="{
+      'menu-vertical': props.vertical || props.align === 'vertical',
+      'menu-horizontal': props.horizontal || props.align === 'horizontal',
+      'menu-xl': props.xl || props.size === 'xl',
+      'menu-lg': props.lg || props.size === 'lg',
+      'menu-md': props.md || props.size === 'md',
+      'menu-sm': props.sm || props.size === 'sm',
+      'menu-xs': props.xs || props.size === 'xs',
+    }"
+  >
+    <slot />
+  </ul>
+</template>

package/app/components/MenuExpand.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+
+import { onClickOutside, useElementHover } from '@vueuse/core'
+import { onMounted, provide, ref } from 'vue'
+import { randomString } from '../utils/random-string'
+
+// Define the MenuExpandState interface
+export interface MenuExpandState {
+  id: string
+  isOpen: Ref<boolean>
+  toggle: () => void
+  open: () => void
+  close: () => void
+}
+
+// Props with defaults
+const {
+  randomId = randomString(12),
+  hover = false,
+  delayLeave = 300,
+  closeOnClickOutside = false,
+} = defineProps<{
+  randomId?: string
+  hover?: boolean
+  delayLeave?: number
+  closeOnClickOutside?: boolean
+}>()
+
+// v-model for open state
+const isOpen = defineModel('open', { default: false, type: Boolean })
+
+// Generate IDs for accessibility and targeting
+const wrapperId = `expand-wrapper-${randomId}`
+const id = `expand-${randomId}`
+
+// Element reference for click outside detection
+const expandEl = ref()
+
+// Control functions
+function toggle() {
+  setTimeout(() => {
+    isOpen.value = !isOpen.value
+  }, 50)
+}
+
+function open() {
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+// Create and provide the menu expand state object
+const menuExpandState: MenuExpandState = {
+  id,
+  isOpen,
+  toggle,
+  open,
+  close,
+}
+
+// Provide the state to child components
+provide('menuExpandState', menuExpandState)
+
+// Setup event handlers
+onMounted(() => {
+  // Handle clicks outside the component
+  onClickOutside(expandEl, () => {
+    if (closeOnClickOutside) {
+      setTimeout(() => {
+        isOpen.value = false
+      }, 500)
+    }
+  })
+
+  // Setup hover behavior if enabled
+  if (hover) {
+    useElementHover(expandEl, {
+      delayLeave,
+    })
+  }
+})
+
+// Empty click handler for internal use
+function handleClick(_ev: MouseEvent) {}
+</script>
+
+<template>
+  <details
+    :id="wrapperId"
+    ref="expandEl"
+    class="dropdown menu-expand"
+    :open="isOpen"
+    @click="handleClick"
+  >
+    <slot v-bind="{ toggle, open, close }" />
+  </details>
+</template>

package/app/components/MenuExpandToggle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { MenuExpandState } from './MenuExpand.vue'
+
+import { inject } from 'vue'
+
+const menuExpandState = inject<MenuExpandState>('menuExpandState')
+const { id, isOpen, toggle } = menuExpandState || {}
+</script>
+
+<template>
+  <summary :id="id" :aria-expanded="isOpen" aria-haspopup="menu" class="menu-expand-toggle" @click.prevent.stop="toggle">
+    <slot />
+  </summary>
+</template>