daisy-ui-kit 0.4.4

package/components/Prose.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+interface Props {
+  fullWidth?: boolean
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <article class="prose daisy-prose" :class="{ 'full-width': fullWidth }">
+    <slot />
+  </article>
+</template>
+
+<style lang="postcss">
+.prose.full-width {
+  width: 100%;
+  max-width: 100%;
+}
+.prose.daisy-prose code:not(pre code) {
+  @apply bg-base-300;
+}
+.prose .link-primary {
+  @apply text-primary;
+}
+.prose .link-secondary {
+  @apply text-secondary;
+}
+.prose .link-neutral {
+  @apply text-neutral;
+}
+.prose .link-accent {
+  @apply text-accent;
+}
+</style>

package/components/RadialProgress.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  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
+}
+const props = defineProps<Props>()
+
+const calculatedSize = computed(() => props.size || '4rem')
+const calculatedThickness = computed(() => props.thickness || 'calc(var(--size) / 10)')
+
+const classes = computed(() => {
+  return {
+    'text-primary': (props.primary || props.color === 'primary'),
+    'text-secondary': (props.secondary || props.color === 'secondary'),
+    'text-neutral': (props.neutral || props.color === 'neutral'),
+    'text-accent': (props.accent || props.color === 'accent'),
+    'text-info': (props.info || props.color === 'info'),
+    'text-success': (props.success || props.color === 'success'),
+    'text-warning': (props.warning || props.color === 'warning'),
+    'text-error': (props.error || props.color === 'error'),
+  }
+})
+</script>
+
+<template>
+  <div class="radial-progress" :class="classes" :style="`--value:${value}; --size:${calculatedSize}; --thickness:${calculatedThickness};`">
+    <slot />
+  </div>
+</template>

package/components/Radio.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, inject } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any
+  value: any
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+
+  size?: string
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const radioGroup = inject('radio-group', null)
+
+const _props = computed(() => {
+  if (radioGroup) return Object.assign({}, radioGroup.props, props)
+  else return props
+})
+
+const classes = computed(() => {
+  const { color, primary, secondary, accent, size, xs, sm, md, lg } = _props.value
+  return {
+    'radio-primary': primary || color === 'primary',
+    'radio-secondary': secondary || color === 'secondary',
+    'radio-accent': accent || color === 'accent',
+    'radio-xs': xs || size === 'xs',
+    'radio-sm': sm || size === 'sm',
+    'radio-md': md || size === 'md',
+    'radio-lg': lg || size === 'lg',
+  }
+})
+
+const currentValue = computed({
+  get() {
+    if (radioGroup) return radioGroup.currentValue
+    return props.modelValue
+  },
+  set(val: string) {
+    radioGroup && (radioGroup.currentValue = val)
+    emit('update:modelValue', val)
+  },
+})
+
+</script>
+
+<template>
+  <input
+    v-model="currentValue"
+    type="radio"
+    v-bind="{..._props, ...$attrs}"
+    class="radio"
+    :class="classes"
+    :value="props.value"
+  >
+</template>

package/components/RadioGroup.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, provide, reactive } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any
+  name: string
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+
+  size?: string
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (val) => {
+    emit('update:modelValue', val)
+  },
+})
+
+const state = reactive({
+  currentValue,
+  props,
+})
+provide('radio-group', state)
+</script>
+
+<template>
+  <div class="radio-group">
+    <slot />
+  </div>
+</template>

package/components/Range.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps } from 'vue'
+
+interface Props {
+  min?: number | string
+  max?: number | string
+  step?: number | string
+  modelValue?: number | string
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = defineProps<Props>()
+defineEmits(['update:modelValue'])
+
+const classes = computed(() => {
+  const { color, primary, secondary, accent, size, lg, md, sm, xs } = props
+  return {
+    'range-primary': primary || color === 'primary',
+    'range-secondary': secondary || color === 'secondary',
+    'range-accent': accent || color === 'accent',
+    'range-lg': lg || size === 'lg',
+    'range-md': md || size === 'md',
+    'range-sm': sm || size === 'sm',
+    'range-xs': xs || size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <input
+    type="range"
+    class="range"
+    :class="classes"
+    :min="min"
+    :max="max"
+    :step="step"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target as any).value)"
+  >
+</template>

package/components/RangeMeasure.vue

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

package/components/RangeMeasureTick.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps } from 'vue'
+import { useTimeoutFn } from '@vueuse/core'
+
+interface Props {
+  tick: number
+  modelValue?: number | string
+  numbered?: boolean
+  asButton?: boolean
+  isHidden?: boolean
+}
+const props = defineProps<Props>()
+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)
+
+const classes = computed(() => {
+  return {
+    'font-bold': isCurrent.value,
+  }
+})
+</script>
+
+<template>
+  <Button
+    v-if="asButton && !isHidden" xs :ghost="!isCurrent" circle :class="classes"
+    @click="$emit('update:modelValue', tick)"
+  >
+    {{ numbered ? tick : '|' }}
+  </Button>
+  <Tooltip
+    v-else
+    :tip="tick"
+    :open="hasChanged && isCurrent"
+    position="bottom"
+    class="cursor-pointer"
+    :class="{ 'px-[2px]': !asButton }"
+    @click="$emit('update:modelValue', tick)"
+  >
+    <Text v-if="!isHidden" :black="isCurrent">
+      {{ numbered ? tick : '|' }}
+    </Text>
+  </Tooltip>
+</template>

package/components/Rating.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  modelValue?: number | string
+  count?: number | string
+  half?: 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
+  parallelogram?: boolean
+  parallelogram2?: boolean
+  parallelogram3?: boolean
+  parallelogram4?: boolean
+  star?: boolean
+  star2?: boolean
+  triangle?: boolean
+  triangle2?: boolean
+  triangle3?: boolean
+  triangle4?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  count: 5,
+})
+defineEmits(['update:modelValue'])
+
+const shapes = [
+  'squircle',
+  'heart',
+  'hexagon',
+  'hexagon2',
+  'decagon',
+  'pentagon',
+  'diamond',
+  'square',
+  'circle',
+  'parallelogram',
+  'parallelogram2',
+  'parallelogram3',
+  'parallelogram4',
+  'star',
+  'star2',
+  'triangle',
+  'triangle2',
+  'triangle3',
+  'triangle4',
+]
+
+const ratingClasses = computed(() => {
+  return {
+    'rating-half': props.half,
+    'rating-lg': props.lg || props.size === 'lg',
+    'rating-md': props.md || props.size === 'md',
+    'rating-sm': props.sm || props.size === 'sm',
+    'rating-xs': props.xs || props.size === 'xs',
+  }
+})
+
+const maskClasses = computed(() => {
+  const hasShape = shapes.reduce((acc, current) => {
+    return acc || props.shape || props[current]
+  }, false)
+  return {
+    'bg-neutral': props.neutral || props.color === 'neutral',
+    'bg-primary': props.primary || props.color === 'primary',
+    'bg-secondary': props.secondary || props.color === 'secondary',
+    'bg-accent': props.accent || props.color === 'accent',
+    'bg-info': props.info || props.color === 'info',
+    'bg-success': props.success || props.color === 'success',
+    'bg-warning': props.warning || props.color === 'warning',
+    'bg-error': props.error || props.color === 'error',
+
+    'mask-squircle': props.squircle || props.shape === 'squircle',
+    'mask-heart': props.heart || props.shape === 'heart',
+    'mask-hexagon': props.hexagon || props.shape === 'hexagon',
+    'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
+    'mask-decagon': props.decagon || props.shape === 'decagon',
+    'mask-pentagon': props.pentagon || props.shape === 'pentagon',
+    'mask-diamond': props.diamond || props.shape === 'diamond',
+    'mask-square': props.square || props.shape === 'square',
+    'mask-circle': props.circle || props.shape === 'circle',
+    'mask-parallelogram': props.parallelogram || props.shape === 'parallelogram',
+    'mask-parallelogram-2': props.parallelogram2 || props.shape === 'parallelogram-2',
+    'mask-parallelogram-3': props.parallelogram3 || props.shape === 'parallelogram-3',
+    'mask-parallelogram-4': props.parallelogram4 || props.shape === 'parallelogram-4',
+    'mask-star': props.star || props.shape === 'star',
+    'mask-star-2': props.star2 || props.shape === 'star-2' || !hasShape,
+    'mask-triangle': props.triangle || props.shape === 'triangle',
+    'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
+    'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
+    'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
+  }
+})
+const max = computed(() => parseInt(props.count as string))
+</script>
+
+<template>
+  <div class="rating" :class="ratingClasses">
+    <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"
+        class="mask"
+        :class="[maskClasses, { 'mask-half-1': half }, bg]"
+        :checked="half ? modelValue == digit - 0.5 : modelValue == digit"
+        @change="$emit('update:modelValue', half ? digit - 0.5 : digit)"
+      >
+      <input
+        v-if="half"
+        type="radio"
+        :value="digit"
+        class="mask"
+        :class="[maskClasses, 'mask-half-2', bg]"
+        :checked="modelValue == digit"
+        @change="$emit('update:modelValue', digit)"
+      >
+    </template>
+  </div>
+</template>

package/components/Select.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, withDefaults } from 'vue'
+
+type Value = string | Record<string, any>
+type Color =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+interface Props {
+  modelValue: any
+  options: Record<string, any>[] | any[]
+  value?: <T extends Value>(val: T) => keyof T
+  label?: <T extends Value>(val: T) => keyof T
+  resultAsObject?: boolean
+
+  bordered?: boolean
+  ghost?: boolean
+
+  color?: Color
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: <T extends Value>(val: T) => {
+    if (!val)
+      return null
+
+    return typeof val === 'string'
+      ? (val as string)
+      : val?.value || val?.id || val?._id
+  },
+  label: <T extends Value>(val: T) =>
+    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)
+  },
+})
+
+const classes = computed(() => {
+  return {
+    '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-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',
+
+    'select-bordered': props.bordered,
+    'select-ghost': props.ghost,
+  }
+})
+</script>
+
+<template>
+  <select v-model="computedVModel" class="select" :class="classes">
+    <option
+      v-for="option in options"
+      :key="value(option)"
+      :value="value(option)"
+      :disabled="option.disabled"
+    >
+      {{ label(option) }}
+    </option>
+  </select>
+</template>