daisy-ui-kit 5.0.0-pre.9 → 5.0.1

package/app/components/Prose.vue

@@ -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

@@ -20,14 +20,14 @@ defineProps<{
   <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'),
+      '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)'};`"
   >

package/app/components/Radio.vue

@@ -65,5 +65,5 @@ const currentValue = computed({
     }"
     :disabled="props.disabled"
     :value="props.value"
-  >
+  />
 </template>

package/app/components/RadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, reactive } from 'vue';
+import { computed, provide, reactive } from 'vue'
 
 const props = defineProps<{
   modelValue?: any
@@ -28,7 +28,7 @@ const currentValue = computed({
   get: () => {
     return props.modelValue
   },
-  set: (val) => {
+  set: val => {
     emit('update:modelValue', val)
   },
 })

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
-}>()
+import { computed } from 'vue'
+
+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/RangeMeasure.vue

@@ -1,37 +1,40 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  modelValue?: number | string
-  min?: number | string
-  max?: number | string
-  step?: number | string
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string
+    min?: number | string
+    max?: number | string
+    step?: number | string
 
-  numbered?: boolean
-  asButtons?: boolean
-  disabled?: boolean
+    numbered?: boolean
+    asButtons?: boolean
+    disabled?: boolean
 
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: 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,
-})
+    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(() => {
@@ -76,7 +79,7 @@ const values = computed(() => {
       :as-button="asButtons"
       :is-hidden="!tick.isVisible"
       :disabled="disabled"
-      @update:model-value="(val) => !disabled && $emit('update:modelValue', val)"
+      @update:model-value="val => !disabled && $emit('update:modelValue', val)"
     >
       {{ numbered ? tick : '|' }}
     </RangeMeasureTick>

package/app/components/RangeMeasureTick.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTimeoutFn } from '@vueuse/core';
-import { computed, watch } from 'vue';
+import { useTimeoutFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps<{
   tick: number
@@ -18,12 +18,11 @@ const { isPending, start, stop } = useTimeoutFn(() => {
 }, 1000)
 watch(
   () => props.modelValue,
-  (val) => {
+  val => {
     if (val) {
       start()
       hasChanged.value = true
-    }
-    else if (!isPending.value) {
+    } else if (!isPending.value) {
       stop()
     }
   },

package/app/components/Rating.vue

@@ -1,52 +1,55 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  modelValue?: number | string
-  count?: number | string
-  half?: boolean
-
-  disabled?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  bg?: string
-
-  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
-
-  size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  count: 5,
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string
+    count?: number | string
+    half?: boolean
+
+    disabled?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    bg?: string
+
+    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
+
+    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    count: 5,
+  },
+)
 const emit = defineEmits(['update:modelValue'])
 
 const max = computed(() => Number.parseInt(props.count as string))
@@ -66,10 +69,24 @@ function handleValue(digit: number, half = false) {
 
 // Check if any shape prop is set
 const hasShape = computed(() => {
-  return props.shape || props.squircle || props.heart || props.hexagon
-    || props.hexagon2 || props.decagon || props.pentagon || props.diamond
-    || props.square || props.circle || props.star || props.star2
-    || props.triangle || props.triangle2 || props.triangle3 || props.triangle4
+  return (
+    props.shape ||
+    props.squircle ||
+    props.heart ||
+    props.hexagon ||
+    props.hexagon2 ||
+    props.decagon ||
+    props.pentagon ||
+    props.diamond ||
+    props.square ||
+    props.circle ||
+    props.star ||
+    props.star2 ||
+    props.triangle ||
+    props.triangle2 ||
+    props.triangle3 ||
+    props.triangle4
+  )
 })
 </script>
 
@@ -93,7 +110,7 @@ const hasShape = computed(() => {
       class="rating-hidden"
       :checked="modelValue === 0"
       @change="$emit('update:modelValue', 0)"
-    >
+    />
     <template v-for="digit in max" :key="digit">
       <input
         type="radio"
@@ -134,7 +151,7 @@ const hasShape = computed(() => {
         ]"
         :checked="half ? modelValue === digit - 0.5 : modelValue === digit"
         @change="() => handleValue(digit, true)"
-      >
+      />
       <input
         v-if="half"
         type="radio"
@@ -174,7 +191,7 @@ const hasShape = computed(() => {
         ]"
         :checked="modelValue === digit"
         @change="() => handleValue(digit)"
-      >
+      />
     </template>
   </div>
 </template>