daisy-ui-kit 5.0.0-pre.26 → 5.0.0-pre.29

package/app/components/CalendarInput.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { CalendarOptions } from '../composables/use-calendar'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useId, watch } from 'vue'
 import { useCalendar } from '../composables/use-calendar'
-import { randomString } from '../utils/random-string'
 
 const props = defineProps<{
   /** Bound value: Date object or ISO string or null */
@@ -37,8 +36,9 @@ const emit = defineEmits<{
   (e: 'update:inputValue', v: string | null): void
 }>()
 
-const popoverId = `calendar-popover-${randomString()}`
-const anchorName = `--calendar-anchor-${randomString()}`
+const uniqueId = useId()
+const popoverId = `calendar-popover-${uniqueId}`
+const anchorName = `--calendar-anchor-${uniqueId}`
 const inputRef = ref<HTMLInputElement | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
 

package/app/components/Dock.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { provide, ref } from 'vue'
-import { randomString } from '../utils/random-string'
 
 const { size, xl, lg, md, sm, xs } = defineProps<{
   size?: string
@@ -15,16 +14,14 @@ const { size, xl, lg, md, sm, xs } = defineProps<{
 const activeItemId = ref<string | null>(null)
 const itemIds = ref<string[]>([])
 
-function registerItem() {
-  const itemId = randomString()
+function registerItem(itemId: string) {
   itemIds.value.push(itemId)
-  function unregister() {
+  return function unregister() {
     itemIds.value = itemIds.value.filter(id => id !== itemId)
     if (activeItemId.value === itemId) {
       activeItemId.value = null
     }
   }
-  return { id: itemId, unregister }
 }
 
 function setActiveItemId(itemId: string) {
@@ -33,7 +30,7 @@ function setActiveItemId(itemId: string) {
 
 export interface DockState {
   activeItemId: Ref<string | null>
-  registerItem: () => { id: string; unregister: () => void }
+  registerItem: (itemId: string) => () => void
   setActiveItemId: (itemId: string) => void
 }
 

package/app/components/DockItem.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { DockState } from './Dock.vue'
-import { inject, onUnmounted } from 'vue'
+import { inject, onUnmounted, useId } from 'vue'
 
 const { active } = defineProps<{
   active?: boolean
 }>()
 
+const itemId = useId()
 const { registerItem, setActiveItemId, activeItemId } = inject<DockState>('dockState')!
-const { id: itemId, unregister } = registerItem()
+const unregister = registerItem(itemId)
 
 onUnmounted(() => {
   unregister()

package/app/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useId } from '#imports'
+import { useId } from 'vue'
 import { useElementHover } from '@vueuse/core'
 import { onMounted, provide, ref, watch } from 'vue'
 

package/app/components/MenuExpand.vue

@@ -2,8 +2,7 @@
 import type { Ref } from 'vue'
 
 import { onClickOutside, useElementHover } from '@vueuse/core'
-import { onMounted, provide, ref } from 'vue'
-import { randomString } from '../utils/random-string'
+import { onMounted, provide, ref, useId } from 'vue'
 
 // Define the MenuExpandState interface
 export interface MenuExpandState {
@@ -16,12 +15,10 @@ export interface MenuExpandState {
 
 // Props with defaults
 const {
-  randomId = randomString(12),
   hover = false,
   delayLeave = 300,
   closeOnClickOutside = false,
 } = defineProps<{
-  randomId?: string
   hover?: boolean
   delayLeave?: number
   closeOnClickOutside?: boolean
@@ -31,8 +28,9 @@ const {
 const isOpen = defineModel('open', { default: false, type: Boolean })
 
 // Generate IDs for accessibility and targeting
-const wrapperId = `expand-wrapper-${randomId}`
-const id = `expand-${randomId}`
+const uniqueId = useId()
+const wrapperId = `expand-wrapper-${uniqueId}`
+const id = `expand-${uniqueId}`
 
 // Element reference for click outside detection
 const expandEl = ref()

package/app/components/Range.vue

@@ -1,61 +1,201 @@
 <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 props = withDefaults(
+  defineProps<{
+    modelValue?: number | [number, number]
+    min?: number
+    max?: number
+    step?: number
+    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,
+  },
+)
 const emit = defineEmits(['update:modelValue'])
 
-const currentValue = computed({
-  get: () => props.modelValue,
-  set: val => emit('update:modelValue', val),
+const isRange = computed(() => {
+  return Array.isArray(props.modelValue)
+})
+
+const singleValue = computed({
+  get: () => (isRange.value ? 0 : (props.modelValue as number)),
+  set: val => emit('update:modelValue', Number(val)),
+})
+
+const lowValue = computed({
+  get: () => (isRange.value ? (props.modelValue as [number, number])[0] : 0),
+  set: val => {
+    const v = Number(val)
+    const high = (props.modelValue as [number, number])[1]
+    emit('update:modelValue', [Math.min(v, high), high])
+  },
+})
+
+const highValue = computed({
+  get: () => (isRange.value ? (props.modelValue as [number, number])[1] : 100),
+  set: val => {
+    const v = Number(val)
+    const low = (props.modelValue as [number, number])[0]
+    emit('update:modelValue', [low, Math.max(v, low)])
+  },
+})
+
+const rangeClasses = computed(() => ({
+  'range-neutral': props.neutral || props.color === 'neutral',
+  'range-primary': props.primary || props.color === 'primary',
+  'range-secondary': props.secondary || props.color === 'secondary',
+  'range-accent': props.accent || props.color === 'accent',
+  'range-success': props.success || props.color === 'success',
+  'range-info': props.info || props.color === 'info',
+  'range-warning': props.warning || props.color === 'warning',
+  'range-error': props.error || props.color === 'error',
+  'range-xl': props.xl || props.size === 'xl',
+  'range-lg': props.lg || props.size === 'lg',
+  'range-md': props.md || props.size === 'md',
+  'range-sm': props.sm || props.size === 'sm',
+  'range-xs': props.xs || props.size === 'xs',
+}))
+
+// Calculate percentage positions for the filled track
+const lowPercent = computed(() => {
+  const range = props.max - props.min
+  return ((lowValue.value - props.min) / range) * 100
+})
+
+const highPercent = computed(() => {
+  const range = props.max - props.min
+  return ((highValue.value - props.min) / range) * 100
 })
 </script>
 
 <template>
+  <!-- Single value mode -->
   <input
-    v-model="currentValue"
+    v-if="!isRange"
+    v-model="singleValue"
     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',
-    }"
+    :class="rangeClasses"
     :min="min"
     :max="max"
     :step="step"
     :disabled="disabled"
   />
+
+  <!-- Dual handle range mode -->
+  <div v-else class="range range-slider-wrapper" :class="rangeClasses">
+    <div class="range-slider-track" />
+    <div
+      class="range-slider-fill"
+      :style="{
+        left: `calc(${lowPercent}% + (var(--range-thumb-size, 1.5rem) / 2) - (${lowPercent} * var(--range-thumb-size, 1.5rem) / 100))`,
+        width: `calc(${highPercent - lowPercent}% - (${highPercent - lowPercent} * var(--range-thumb-size, 1.5rem) / 100))`,
+      }"
+    />
+    <input
+      v-model="lowValue"
+      type="range"
+      class="range range-slider-input"
+      :class="rangeClasses"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+    />
+    <input
+      v-model="highValue"
+      type="range"
+      class="range range-slider-input"
+      :class="rangeClasses"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+    />
+  </div>
 </template>
+
+<style>
+.range-slider-wrapper {
+  position: relative;
+  width: 100%;
+  height: var(--range-thumb-size, 1.5rem);
+}
+
+.range-slider-track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: calc(var(--range-thumb-size, 1.5rem) / 3);
+  transform: translateY(-50%);
+  background: color-mix(in oklab, currentColor 10%, transparent);
+  border-radius: var(--radius-selector, 1rem);
+}
+
+.range-slider-fill {
+  position: absolute;
+  top: 50%;
+  height: var(--range-thumb-size, 1.5rem);
+  transform: translateY(-50%);
+  background: currentColor;
+  border-radius: 0;
+  z-index: 1;
+}
+
+.range-slider-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: transparent;
+  --range-fill: 0 !important;
+}
+
+/* Hide both tracks - we draw our own */
+.range-slider-input::-webkit-slider-runnable-track {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.range-slider-input::-moz-range-track {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Enable pointer events only on thumbs */
+.range-slider-input::-webkit-slider-thumb {
+  pointer-events: auto;
+  position: relative;
+  z-index: 3;
+}
+
+.range-slider-input::-moz-range-thumb {
+  pointer-events: auto;
+  position: relative;
+  z-index: 3;
+}
+</style>

package/app/components/TextArea.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from 'vue'
+
 const props = withDefaults(
   defineProps<{
     modelValue?: string
     placeholder?: string
     type?: 'text' | 'phone' | 'email' | 'search'
+    rows?: number
+    autoExpand?: boolean
 
     color?: string
     neutral?: boolean
@@ -28,15 +32,48 @@ const props = withDefaults(
   }>(),
   {
     type: 'text',
+    rows: 2,
   },
 )
 defineEmits(['update:modelValue'])
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+let minHeight = 0
+
+function adjustHeight() {
+  if (!props.autoExpand || !textareaRef.value) return
+  const el = textareaRef.value
+
+  // Capture the initial rendered height as minimum (respects rows attribute)
+  if (minHeight === 0) {
+    minHeight = el.offsetHeight
+  }
+
+  el.style.height = 'auto'
+  el.style.height = `${Math.max(el.scrollHeight, minHeight)}px`
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    nextTick(adjustHeight)
+  },
+)
+
+onMounted(() => {
+  if (props.autoExpand) {
+    nextTick(adjustHeight)
+  }
+})
 </script>
 
 <template>
   <textarea
+    ref="textareaRef"
     :value="modelValue"
     :type="type"
+    :rows="rows"
     :placeholder="placeholder"
     :disabled="disabled"
     class="textarea"
@@ -59,6 +96,11 @@ defineEmits(['update:modelValue'])
       'textarea-sm': props.sm || props.size === 'sm',
       'textarea-xs': props.xs || props.size === 'xs',
     }"
-    @input="event => $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
+    @input="
+      event => {
+        $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
+        adjustHeight()
+      }
+    "
   />
 </template>

package/app/components/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useId } from '#imports'
+import { useId } from 'vue'
 import { useElementHover } from '@vueuse/core'
 import { computed, onMounted, provide, ref, watch } from 'vue'
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.26",
+  "version": "5.0.0-pre.29",
   "packageManager": "pnpm@10.10.0",
   "author": "feathers.dev",
   "exports": {
@@ -39,10 +39,10 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "publish": "git push origin --tags && git push origin",
-    "release:pre": "npm version prerelease && npm publish --tag pre",
-    "release:patch": "npm version patch && npm publish",
-    "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish",
+    "release:pre": "node scripts/release.js prerelease",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major",
     "deploy": "pnpm run build && npx wrangler deploy"
   },
   "peerDependencies": {

package/app/utils/random-string.ts

@@ -1,19 +0,0 @@
-/**
- * Generate a random string of `length` characters
- *
- * Usage:
- * const myString = randomString(15);  // This will give you a random string of 15 characters
- * @param length The length of the string to generate
- * @returns A random string of `length` characters
- */
-export function randomString(length: number = 10): string {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  let result = ''
-
-  for (let i = 0; i < length; i++) {
-    const randomIndex = Math.floor(Math.random() * characters.length)
-    result += characters[randomIndex]
-  }
-
-  return result
-}