daisy-ui-kit 5.0.0-pre.3 → 5.0.0-pre.31

package/app/components/Range.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+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 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-if="!isRange"
+    v-model="singleValue"
+    type="range"
+    class="range"
+    :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

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

package/app/components/RangeMeasureTick.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  tick: number
+  modelValue?: number | string
+  numbered?: boolean
+  asButton?: boolean
+  isHidden?: boolean
+  disabled?: boolean
+}>()
+defineEmits(['update:modelValue'])
+
+const hasChanged = ref(false)
+const { isPending, start, stop } = useTimeoutFn(() => {
+  hasChanged.value = false
+}, 1000)
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      start()
+      hasChanged.value = true
+    } else if (!isPending.value) {
+      stop()
+    }
+  },
+)
+
+// eslint-disable-next-line eqeqeq
+const isCurrent = computed(() => props.modelValue == props.tick)
+</script>
+
+<template>
+  <Button
+    v-if="asButton && !isHidden"
+    xs
+    :ghost="!isCurrent"
+    circle
+    :class="{
+      'font-bold': isCurrent,
+      'opacity-50': props.disabled,
+      'cursor-pointer': !props.disabled,
+      'cursor-not-allowed': props.disabled,
+    }"
+    :disabled="disabled"
+    @click="$emit('update:modelValue', tick)"
+  >
+    {{ numbered ? tick : '|' }}
+  </Button>
+  <Tooltip
+    v-else
+    :tip="tick"
+    :open="hasChanged && isCurrent && !disabled"
+    position="bottom"
+    :class="{
+      'px-[2px]': !asButton,
+      'opacity-50': disabled,
+      'cursor-pointer': !disabled,
+      'cursor-not-allowed': disabled,
+    }"
+    @click="$emit('update:modelValue', tick)"
+  >
+    <Text v-if="!isHidden" :black="isCurrent">
+      {{ numbered ? tick : '|' }}
+    </Text>
+  </Tooltip>
+</template>

package/app/components/Rating.vue

@@ -0,0 +1,197 @@
+<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 emit = defineEmits(['update:modelValue'])
+
+const max = computed(() => Number.parseInt(props.count as string))
+
+function handleValue(digit: number, half = false) {
+  if (props.disabled) {
+    return
+  }
+
+  if (props.half) {
+    emit('update:modelValue', half ? digit - 0.5 : digit)
+    return
+  }
+
+  emit('update:modelValue', digit)
+}
+
+// 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
+  )
+})
+</script>
+
+<template>
+  <div
+    class="rating"
+    :class="{
+      'rating-half': half,
+      'rating-xl': xl || size === 'xl',
+      'rating-lg': lg || size === 'lg',
+      'rating-md': md || size === 'md',
+      'rating-sm': sm || size === 'sm',
+      'rating-xs': xs || size === 'xs',
+      'opacity-60': disabled,
+      'cursor-not-allowed': disabled,
+    }"
+  >
+    <input
+      type="radio"
+      :value="0"
+      class="rating-hidden"
+      :checked="modelValue === 0"
+      @change="$emit('update:modelValue', 0)"
+    />
+    <template v-for="digit in max" :key="digit">
+      <input
+        type="radio"
+        :value="half ? digit - 0.5 : digit"
+        :disabled="disabled"
+        class="mask"
+        :class="[
+          bg,
+          { 'mask-half-1': half },
+          { 'cursor-not-allowed opacity-50': disabled },
+
+          // Color classes
+          { 'bg-neutral': neutral || color === 'neutral' },
+          { 'bg-primary': primary || color === 'primary' },
+          { 'bg-secondary': secondary || color === 'secondary' },
+          { 'bg-accent': accent || color === 'accent' },
+          { 'bg-info': info || color === 'info' },
+          { 'bg-success': success || color === 'success' },
+          { 'bg-warning': warning || color === 'warning' },
+          { 'bg-error': error || color === 'error' },
+
+          // Shape classes
+          { 'mask-squircle': squircle || shape === 'squircle' },
+          { 'mask-heart': heart || shape === 'heart' },
+          { 'mask-hexagon': hexagon || shape === 'hexagon' },
+          { 'mask-hexagon-2': hexagon2 || shape === 'hexagon-2' },
+          { 'mask-decagon': decagon || shape === 'decagon' },
+          { 'mask-pentagon': pentagon || shape === 'pentagon' },
+          { 'mask-diamond': diamond || shape === 'diamond' },
+          { 'mask-square': square || shape === 'square' },
+          { 'mask-circle': circle || shape === 'circle' },
+          { 'mask-star': star || shape === 'star' },
+          { 'mask-star-2': star2 || shape === 'star-2' || !hasShape },
+          { 'mask-triangle': triangle || shape === 'triangle' },
+          { 'mask-triangle-2': triangle2 || shape === 'triangle-2' },
+          { 'mask-triangle-3': triangle3 || shape === 'triangle-3' },
+          { 'mask-triangle-4': triangle4 || shape === 'triangle-4' },
+        ]"
+        :checked="half ? modelValue === digit - 0.5 : modelValue === digit"
+        @change="() => handleValue(digit, true)"
+      />
+      <input
+        v-if="half"
+        type="radio"
+        :value="digit"
+        class="mask mask-half-2"
+        :disabled="disabled"
+        :class="[
+          bg,
+          { 'cursor-not-allowed opacity-50': disabled },
+
+          // Color classes
+          { 'bg-neutral': neutral || color === 'neutral' },
+          { 'bg-primary': primary || color === 'primary' },
+          { 'bg-secondary': secondary || color === 'secondary' },
+          { 'bg-accent': accent || color === 'accent' },
+          { 'bg-info': info || color === 'info' },
+          { 'bg-success': success || color === 'success' },
+          { 'bg-warning': warning || color === 'warning' },
+          { 'bg-error': error || color === 'error' },
+
+          // Shape classes
+          { 'mask-squircle': squircle || shape === 'squircle' },
+          { 'mask-heart': heart || shape === 'heart' },
+          { 'mask-hexagon': hexagon || shape === 'hexagon' },
+          { 'mask-hexagon-2': hexagon2 || shape === 'hexagon-2' },
+          { 'mask-decagon': decagon || shape === 'decagon' },
+          { 'mask-pentagon': pentagon || shape === 'pentagon' },
+          { 'mask-diamond': diamond || shape === 'diamond' },
+          { 'mask-square': square || shape === 'square' },
+          { 'mask-circle': circle || shape === 'circle' },
+          { 'mask-star': star || shape === 'star' },
+          { 'mask-star-2': star2 || shape === 'star-2' || !hasShape },
+          { 'mask-triangle': triangle || shape === 'triangle' },
+          { 'mask-triangle-2': triangle2 || shape === 'triangle-2' },
+          { 'mask-triangle-3': triangle3 || shape === 'triangle-3' },
+          { 'mask-triangle-4': triangle4 || shape === 'triangle-4' },
+        ]"
+        :checked="modelValue === digit"
+        @change="() => handleValue(digit)"
+      />
+    </template>
+  </div>
+</template>

package/app/components/Select.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Color = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: any
+    options: Record<string, any>[] | any[]
+    value?: (val: any) => any
+    label?: (val: any) => any
+    resultAsObject?: boolean
+    join?: boolean
+
+    ghost?: boolean
+    disabled?: boolean
+    validator?: boolean
+    native?: boolean
+
+    color?: Color
+    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
+  }>(),
+  {
+    value: (val: any) => {
+      if (val == null) {
+        return null
+      }
+
+      return typeof val === 'string' ? (val as string) : (val?.value ?? val?.id ?? val?._id ?? val)
+    },
+    label: (val: any) => (typeof val === 'string' ? (val as string) : val.label || val.name || val.title),
+    resultAsObject: false,
+  },
+)
+const emit = defineEmits(['update:modelValue'])
+
+const computedVModel = computed({
+  get: () => {
+    if (props.resultAsObject && props.modelValue != null) {
+      return props.value(props.modelValue)
+    }
+
+    return props.modelValue
+  },
+  set: val => {
+    if (val === undefined) {
+      val = null
+    }
+    if (props.resultAsObject && val != null) {
+      val = props.options.find(o => props.value(o) === val)
+    }
+
+    emit('update:modelValue', val)
+  },
+})
+</script>
+
+<template>
+  <select
+    v-model="computedVModel"
+    class="select"
+    :class="{
+      'join-item': props.join,
+      validator: props.validator,
+      'select-ghost': props.ghost,
+      'appearance-none': props.native,
+      'select-neutral': props.neutral || props.color === 'neutral',
+      'select-primary': props.primary || props.color === 'primary',
+      'select-secondary': props.secondary || props.color === 'secondary',
+      'select-accent': props.accent || props.color === 'accent',
+      'select-info': props.info || props.color === 'info',
+      'select-success': props.success || props.color === 'success',
+      'select-warning': props.warning || props.color === 'warning',
+      'select-error': props.error || props.color === 'error',
+      'select-xl': props.xl || props.size === 'xl',
+      'select-lg': props.lg || props.size === 'lg',
+      'select-md': props.md || props.size === 'md',
+      'select-sm': props.sm || props.size === 'sm',
+      'select-xs': props.xs || props.size === 'xs',
+    }"
+    :disabled="disabled"
+  >
+    <option v-for="option in options" :key="value(option)" :value="value(option)" :disabled="option.disabled">
+      {{ label(option) }}
+    </option>
+  </select>
+</template>

package/app/components/Skeleton.vue

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

package/app/components/SkeletonText.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  is?: any
+}>()
+</script>
+
+<template>
+  <component :is="props.is || 'span'" class="skeleton skeleton-text">
+    <slot />
+  </component>
+</template>

package/app/components/Stack.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { is = 'div' } = defineProps<{
+  is?: string
+  direction?: 'top' | 'end' | 'bottom' | 'start'
+  top?: boolean
+  end?: boolean
+  bottom?: boolean
+  start?: boolean
+}>()
+</script>
+
+<template>
+  <component
+    :is="is"
+    v-bind="$attrs"
+    class="stack"
+    :class="{
+      'stack-top': top || direction === 'top',
+      'stack-end': end || direction === 'end',
+      'stack-bottom': bottom || direction === 'bottom',
+      'stack-start': start || direction === 'start',
+    }"
+  >
+    <slot />
+  </component>
+</template>