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

package/app/components/Label.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import Text from './Text.vue'
+
+withDefaults(defineProps<{
+  is?: string
+  floating?: boolean
+
+  input?: boolean
+  select?: boolean
+  toggle?: boolean
+
+  join?: boolean
+  color?: string
+  neutral?: boolean
+  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
+const checked = ref(false)
+provide('labelCtx', { checked })
+</script>
+
+<template>
+  <Text
+    :is="is"
+    :class="[
+      {
+        'input': input,
+        'select': select,
+        'toggle': toggle,
+        'join-item': (input || select || toggle) && join,
+        'input-neutral': input && (neutral || color === 'neutral'),
+        '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),
+        'select-neutral': select && (neutral || color === 'neutral'),
+        'select-primary': select && (primary || color === 'primary'),
+        'select-secondary': select && (secondary || color === 'secondary'),
+        'select-accent': select && (accent || color === 'accent'),
+        'select-info': select && (info || color === 'info'),
+        'select-success': select && (success || color === 'success'),
+        'select-warning': select && (warning || color === 'warning'),
+        'select-error': select && (error || color === 'error'),
+        'select-ghost': select && ghost,
+        'select-xl': select && (size === 'xl' || xl),
+        'select-lg': select && (size === 'lg' || lg),
+        'select-md': select && (size === 'md' || md),
+        'select-sm': select && (size === 'sm' || sm),
+        'select-xs': select && (size === 'xs' || xs),
+        'text-neutral': toggle && checked && (neutral || color === 'neutral'),
+        'text-primary': toggle && checked && (primary || color === 'primary'),
+        'text-secondary': toggle && checked && (secondary || color === 'secondary'),
+        'text-accent': toggle && checked && (accent || color === 'accent'),
+        'text-info': toggle && checked && (info || color === 'info'),
+        'text-success': toggle && checked && (success || color === 'success'),
+        'text-warning': toggle && checked && (warning || color === 'warning'),
+        'text-error': toggle && checked && (error || color === 'error'),
+        'text-ghost': toggle && ghost,
+        'toggle-xl': toggle && (size === 'xl' || xl),
+        'toggle-lg': toggle && (size === 'lg' || lg),
+        'toggle-md': toggle && (size === 'md' || md),
+        'toggle-sm': toggle && (size === 'sm' || sm),
+        'toggle-xs': toggle && (size === 'xs' || xs),
+      },
+      { label: !floating && !(input || toggle) },
+      { '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/{components/FormControl.vue → app/components/ListColGrow.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-control">
+  <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/{components/Stat.vue → app/components/ListRow.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="stat">
+  <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/{components → app/components}/MenuExpandToggle.vue

@@ -1,9 +1,10 @@
-<script setup>
+<script setup lang="ts">
+import type { MenuExpandState } from './MenuExpand.vue'
+
 import { inject } from 'vue'
 
-const id = inject('expandId')
-const isOpen = inject('isExpandOpen')
-const toggle = inject('toggleExpand')
+const menuExpandState = inject<MenuExpandState>('menuExpandState')
+const { id, isOpen, toggle } = menuExpandState || {}
 </script>
 
 <template>

package/{components → app/components}/MenuItem.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 defineProps<{
-  active?: boolean
   disabled?: boolean
 }>()
 </script>
 
 <template>
-  <li class="menu-item" :class="{ active, disabled }">
+  <li class="menu-item" :class="{ 'menu-disabled': disabled }">
     <slot />
   </li>
 </template>
@@ -16,11 +15,11 @@ defineProps<{
   Allow adding .active class to the MenuItem element.
   DaisyUI only supports adding it to the `a` element.
 */
-.menu-item.active > a, .menu-item.active > span {
+.menu-item.menu-active > a, .menu-item.menu-active > span {
   background-color: hsl(var(--n) / var(--tw-bg-opacity));
   color: hsl(var(--nc) / var(--tw-text-opacity));
 }
-.menu-item.disabled > a, .menu-item.disabled > span {
+.menu-item.menu-disabled > a, .menu-item.menu-disabled > span {
   background-color: var(--n)
 }
 

package/app/components/MockupPhone.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps<{
+  displayClasses?: string
+}>()
+</script>
+
+<template>
+  <div class="mockup-phone">
+    <div class="mockup-phone-camera" />
+    <div class="mockup-phone-display" :class="displayClasses">
+      <slot />
+    </div>
+  </div>
+</template>

package/{components → app/components}/Modal.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   modelValue?: boolean
   closeOnClickOutside?: boolean
+  placement?: 'top' | 'bottom' | 'start' | 'end'
   top?: boolean
   bottom?: boolean
-}>()
+  start?: boolean
+  end?: boolean
+}>(), {
+  closeOnClickOutside: true,
+})
 const emit = defineEmits(['update:modelValue'])
 
 const is = 'div'
@@ -20,14 +25,16 @@ const isOpen = computed({
   get: () => _isOpen.value,
   set: (val) => {
     _isOpen.value = val
-    if (props.modelValue !== val)
+    if (props.modelValue !== val) {
       emit('update:modelValue', val)
+    }
   },
 })
 
 function handleClick() {
-  if (props.closeOnClickOutside)
+  if (props.closeOnClickOutside) {
     isOpen.value = false
+  }
 }
 </script>
 
@@ -40,6 +47,8 @@ function handleClick() {
     :class="{
       'modal-top': props.top,
       'modal-bottom': props.bottom,
+      'modal-start': props.start,
+      'modal-end': props.end,
     }"
     @click.self="handleClick"
   >