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

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,34 @@
+<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>

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

@@ -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
@@ -20,6 +20,7 @@ const props = defineProps<{
   sm?: boolean
   md?: boolean
   lg?: boolean
+  xl?: boolean
 }>()
 const emit = defineEmits(['update:modelValue'])
 

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/{components → app/components}/RangeMeasure.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<{
   modelValue?: number | string
@@ -21,7 +21,8 @@ const props = withDefaults(defineProps<{
   info?: boolean
   error?: boolean
 
-  size?: 'lg' | 'md' | 'sm' | 'xs'
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
   lg?: boolean
   md?: boolean
   sm?: boolean
@@ -33,24 +34,6 @@ const props = withDefaults(defineProps<{
 })
 defineEmits(['update:modelValue'])
 
-const classes = computed(() => {
-  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, lg, md, sm, xs, disabled } = props
-  return {
-    '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-lg': lg || size === 'lg',
-    'text-md': md || size === 'md',
-    'text-sm': sm || size === 'sm',
-    'text-xs': xs || size === 'xs',
-    'opacity-50': disabled,
-  }
-})
 const values = computed(() => {
   const vals = []
   for (let index = Number.parseInt(props.min as string); index < Number.parseInt(props.max as string) + 1; index++) {
@@ -65,7 +48,25 @@ const values = computed(() => {
 </script>
 
 <template>
-  <div class="flex justify-between select-none" :class="classes">
+  <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"

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-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()
     }
   },
@@ -31,15 +30,6 @@ watch(
 
 // eslint-disable-next-line eqeqeq
 const isCurrent = computed(() => props.modelValue == props.tick)
-
-const classes = computed(() => {
-  return {
-    'font-bold': isCurrent.value,
-    'opacity-50': props.disabled,
-    'cursor-pointer': !props.disabled,
-    'cursor-not-allowed': props.disabled,
-  }
-})
 </script>
 
 <template>
@@ -48,7 +38,12 @@ const classes = computed(() => {
     xs
     :ghost="!isCurrent"
     circle
-    :class="classes"
+    :class="{
+      'font-bold': isCurrent,
+      'opacity-50': props.disabled,
+      'cursor-pointer': !props.disabled,
+      'cursor-not-allowed': props.disabled,
+    }"
     :disabled="disabled"
     @click="$emit('update:modelValue', tick)"
   >

package/app/components/Rating.vue

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