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

package/app/components/MenuExpand.vue

@@ -0,0 +1,94 @@
+<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,20 @@
+<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>

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,12 +15,14 @@ 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 {
-  background-color: var(--n)
+.menu-item.menu-disabled > a,
+.menu-item.menu-disabled > span {
+  background-color: var(--n);
 }
 
 /* Fix padding when putting a Dropdown inside of a menu */
@@ -33,6 +34,6 @@ defineProps<{
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem
+  padding-bottom: 0.5rem;
 }
 </style>

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,38 +1,51 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
-const props = defineProps<{
-  modelValue?: boolean
-  closeOnClickOutside?: boolean
-  top?: boolean
-  bottom?: boolean
-}>()
+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'
 
 // defineModel 'open'
 const _isOpen = ref(props.modelValue)
-watch(() => props.modelValue, (val) => {
-  _isOpen.value = val
-})
+watch(
+  () => props.modelValue,
+  val => {
+    _isOpen.value = val
+  },
+)
 const isOpen = computed({
   get: () => _isOpen.value,
-  set: (val) => {
+  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>
 
 <template>
-  <input v-model="isOpen" type="checkbox" class="modal-toggle">
+  <input v-model="isOpen" type="checkbox" class="modal-toggle" />
   <Component
     :is="is"
     v-bind="{ ...$attrs, ...$props }"
@@ -40,6 +53,8 @@ function handleClick() {
     :class="{
       'modal-top': props.top,
       'modal-bottom': props.bottom,
+      'modal-start': props.start,
+      'modal-end': props.end,
     }"
     @click.self="handleClick"
   >

package/app/components/NavButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { active = false, disabled = false } = defineProps<{
+  active?: boolean
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <button class="nav-button" :class="{ active, disabled }">
+    <slot />
+  </button>
+</template>

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

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string | Object | Function
+const { is = 'div', glass = false } = defineProps<{
+  is?: any
   glass?: boolean
-}>(), {
-  is: 'div',
-})
+}>()
 </script>
 
 <template>

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string | Object | Function
-}>(), {
-  is: 'div',
-})
+const { is = 'div' } = defineProps<{
+  is?: any
+}>()
 </script>
 
 <template>

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string | Object | Function
-}>(), {
-  is: 'div',
-})
+const { is = 'div' } = defineProps<{
+  is?: any
+}>()
 </script>
 
 <template>

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string | Object | Function
-}>(), {
-  is: 'div',
-})
+const { is = 'div' } = defineProps<{
+  is?: any
+}>()
 </script>
 
 <template>

package/app/components/Progress.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const {
+  value = 0,
+  max = 100,
+  color,
+  neutral,
+  primary,
+  secondary,
+  accent,
+  success,
+  info,
+  warning,
+  error,
+} = defineProps<{
+  value?: string | number
+  max?: string | number
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <progress
+    :value="value"
+    :max="max"
+    class="progress"
+    :class="{
+      'progress-neutral': neutral || color === 'neutral',
+      'progress-primary': primary || color === 'primary',
+      'progress-secondary': secondary || color === 'secondary',
+      'progress-accent': accent || color === 'accent',
+      'progress-success': success || color === 'success',
+      'progress-info': info || color === 'info',
+      'progress-warning': warning || color === 'warning',
+      'progress-error': error || color === 'error',
+    }"
+  />
+</template>

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

@@ -1,5 +1,5 @@
 <template>
-  <article class="prose daisy-prose max-w-none">
+  <article class="prose daisy-prose">
     <slot />
   </article>
 </template>
@@ -25,8 +25,13 @@
   @apply text-accent;
 }
 
-.prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
   text-decoration: none;
-  @apply font-bold
+  @apply font-bold;
 }
 </style>

package/app/components/RadialProgress.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  value: number | string
+  size?: string
+  thickness?: string
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="radial-progress"
+    :class="{
+      'text-neutral': neutral || color === 'neutral',
+      'text-primary': primary || color === 'primary',
+      'text-secondary': secondary || color === 'secondary',
+      'text-accent': accent || color === 'accent',
+      'text-info': info || color === 'info',
+      'text-success': success || color === 'success',
+      'text-warning': warning || color === 'warning',
+      'text-error': error || color === 'error',
+    }"
+    :style="`--value:${value}; --size:${size || '4rem'}; --thickness:${thickness || 'calc(var(--size) / 10)'};`"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Radio.vue

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

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

@@ -20,6 +20,7 @@ const props = defineProps<{
   sm?: boolean
   md?: boolean
   lg?: boolean
+  xl?: boolean
 }>()
 const emit = defineEmits(['update:modelValue'])
 
@@ -27,7 +28,7 @@ const currentValue = computed({
   get: () => {
     return props.modelValue
   },
-  set: (val) => {
+  set: val => {
     emit('update:modelValue', val)
   },
 })

package/app/components/Range.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue?: number | string
+  min?: number | string
+  max?: number | string
+  step?: number | string
+  disabled?: boolean
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
+
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <input
+    v-model="currentValue"
+    type="range"
+    class="range"
+    :class="{
+      'range-neutral': neutral || color === 'neutral',
+      'range-primary': primary || color === 'primary',
+      'range-secondary': secondary || color === 'secondary',
+      'range-accent': accent || color === 'accent',
+      'range-success': success || color === 'success',
+      'range-info': info || color === 'info',
+      'range-warning': warning || color === 'warning',
+      'range-error': error || color === 'error',
+      'range-xl': xl || size === 'xl',
+      'range-lg': lg || size === 'lg',
+      'range-md': md || size === 'md',
+      'range-sm': sm || size === 'sm',
+      'range-xs': xs || size === 'xs',
+    }"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+  />
+</template>

package/app/components/RangeMeasure.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string
+    min?: number | string
+    max?: number | string
+    step?: number | string
+
+    numbered?: boolean
+    asButtons?: boolean
+    disabled?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    success?: boolean
+    warning?: boolean
+    info?: boolean
+    error?: boolean
+
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+  },
+)
+defineEmits(['update:modelValue'])
+
+const values = computed(() => {
+  const vals = []
+  for (let index = Number.parseInt(props.min as string); index < Number.parseInt(props.max as string) + 1; index++) {
+    vals.push({
+      value: index,
+      isVisible: index % Number.parseInt(props.step as string) === 0,
+    })
+  }
+  return vals
+})
+// const count = computed(() => Number.parseInt(props.max as string) - Number.parseInt(props.min as string))
+</script>
+
+<template>
+  <div
+    class="flex justify-between select-none"
+    :class="{
+      'text-neutral': neutral || color === 'neutral',
+      'text-primary': primary || color === 'primary',
+      'text-secondary': secondary || color === 'secondary',
+      'text-accent': accent || color === 'accent',
+      'text-success': success || color === 'success',
+      'text-info': info || color === 'info',
+      'text-warning': warning || color === 'warning',
+      'text-error': error || color === 'error',
+      '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',
+      'opacity-50': disabled,
+    }"
+  >
+    <RangeMeasureTick
+      v-for="tick in values"
+      :key="tick.value"
+      :tick="tick.value"
+      :model-value="modelValue"
+      :numbered="numbered"
+      :as-button="asButtons"
+      :is-hidden="!tick.isVisible"
+      :disabled="disabled"
+      @update:model-value="val => !disabled && $emit('update:modelValue', val)"
+    >
+      {{ numbered ? tick : '|' }}
+    </RangeMeasureTick>
+  </div>
+</template>