daisy-ui-kit 5.0.0-pre.4 → 5.0.0-pre.6

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>

package/app/components/Select.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+type Color = | '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
+
+  color?: Color
+  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) {
+      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,
+      '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/Stack.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { is = 'div' } = defineProps<{
+  is?: string
+  direction?: 'top' | 'end' | 'bottom' | 'start'
+  top?: boolean
+  end?: boolean
+  bottom?: boolean
+  start?: boolean
+}>()
+</script>
+
+<template>
+  <component
+    :is="is"
+    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>

package/app/components/Stat.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  orientation?: 'vertical' | 'horizontal'
+  vertical?: boolean
+  horizontal?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="stat"
+    :class="{
+      'stat-vertical': vertical || orientation === 'vertical',
+      'stat-horizontal': horizontal || orientation === 'horizontal',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/StatActions.vue

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

package/app/components/StatDesc.vue

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

package/app/components/StatFigure.vue

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

package/app/components/StatTitle.vue

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

package/app/components/StatValue.vue

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

package/app/components/Stats.vue

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

package/app/components/Status.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="status"
+    :class="[
+      neutral || color === 'neutral' ? 'status-neutral' : '',
+      primary || color === 'primary' ? 'status-primary' : '',
+      secondary || color === 'secondary' ? 'status-secondary' : '',
+      accent || color === 'accent' ? 'status-accent' : '',
+      info || color === 'info' ? 'status-info' : '',
+      success || color === 'success' ? 'status-success' : '',
+      warning || color === 'warning' ? 'status-warning' : '',
+      error || color === 'error' ? 'status-error' : '',
+      xs || size === 'xs' ? 'status-xs' : '',
+      sm || size === 'sm' ? 'status-sm' : '',
+      md || size === 'md' || (!xs && !sm && !lg && !xl && !size) ? 'status-md' : '',
+      lg || size === 'lg' ? 'status-lg' : '',
+      xl || size === 'xl' ? 'status-xl' : '',
+    ]"
+  >
+    <slot />
+  </span>
+</template>

package/app/components/Step.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  glyph?: string
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <li
+    class="step"
+    :class="{
+      'step-neutral': props.neutral || props.color === 'neutral',
+      'step-primary': props.primary || props.color === 'primary',
+      'step-secondary': props.secondary || props.color === 'secondary',
+      'step-accent': props.accent || props.color === 'accent',
+      'step-info': props.info || props.color === 'info',
+      'step-success': props.success || props.color === 'success',
+      'step-warning': props.warning || props.color === 'warning',
+      'step-error': props.error || props.color === 'error',
+    }"
+    :data-content="glyph"
+  >
+    <slot />
+  </li>
+</template>

package/app/components/StepIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="step-icon">
+    <slot />
+  </span>
+</template>

package/app/components/Steps.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { orientation, vertical = false, horizontal = false } = defineProps<{
+  orientation?: 'vertical' | 'horizontal'
+  vertical?: boolean
+  horizontal?: boolean
+}>()
+</script>
+
+<template>
+  <ul
+    class="steps" :class="{
+      'steps-vertical': orientation === 'vertical' || vertical,
+      'steps-horizontal': orientation === 'horizontal' || horizontal,
+    }"
+  >
+    <slot />
+  </ul>
+</template>

package/app/components/Swap.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue';
+
+const props = defineProps<{
+  modelValue?: boolean | null
+  rotate?: boolean
+  flip?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const checkbox = ref<HTMLInputElement | null>(null)
+
+// Keep the checkbox's indeterminate property in sync with modelValue
+watch(
+  () => props.modelValue,
+  (val) => {
+    nextTick(() => {
+      if (checkbox.value) {
+        checkbox.value.indeterminate = val === null
+      }
+    })
+  },
+  { immediate: true },
+)
+
+function updateValue(event: Event) {
+  const input = event.target as HTMLInputElement
+  // If indeterminate, toggle to checked
+  if (props.modelValue === null) {
+    emit('update:modelValue', true)
+  }
+  else {
+    emit('update:modelValue', input.checked)
+  }
+}
+</script>
+
+<template>
+  <label
+    class="swap"
+    :class="{
+      'swap-rotate': rotate,
+      'swap-flip': flip,
+    }"
+  >
+    <input
+      ref="checkbox"
+      type="checkbox"
+      :checked="modelValue === true"
+      @change="updateValue"
+    >
+    <div class="swap-indeterminate">
+      <slot name="indeterminate" />
+    </div>
+    <div class="swap-on">
+      <slot name="swap" />
+    </div>
+    <div class="swap-off">
+      <slot />
+    </div>
+  </label>
+</template>

package/app/components/Tab.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const { is = 'label', name, ...props } = defineProps<{
+  is?: any
+  name?: string
+  active?: boolean
+  disabled?: boolean
+}>()
+
+const tabManager: any = inject('tabManager')
+if (!tabManager.currentTab.value) {
+  tabManager.currentTab.value = name
+}
+</script>
+
+<template>
+  <component
+    :is="is"
+    class="tab"
+    :class="{
+      'tab-active': props.active || tabManager.currentTab.value === name,
+      'tab-disabled': props.disabled,
+    }"
+    @keypress.enter="() => (tabManager.currentTab.value = name)"
+  >
+    <input
+      type="radio"
+      :name="tabManager.name"
+      :value="name"
+      :checked="tabManager.currentTab.value === name"
+      @change="() => (tabManager.currentTab.value = name)"
+    >
+
+    <slot v-if="$slots.default" />
+    <span v-else>{{ name }}</span>
+  </component>
+</template>

package/app/components/TabContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+const { is = 'div', name } = defineProps<{
+  is?: any
+  name: string
+}>()
+
+const tabManager: any = inject('tabManager')
+
+const isCurrentTab = computed(() => {
+  return tabManager.currentTab.value === name
+})
+
+if (!tabManager?.currentTab.value) {
+  tabManager.currentTab.value = name
+}
+
+const existing = tabManager?.tabs?.find((t: string) => t === name)
+if (!existing) {
+  tabManager.tabs.push(name)
+}
+</script>
+
+<template>
+  <component :is="is" v-show="isCurrentTab" class="tab-content">
+    <slot />
+  </component>
+</template>

package/app/components/Table.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  zebra?: boolean
+  pinRows?: boolean
+  pinCols?: boolean
+
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+</script>
+
+<template>
+  <table
+    class="table"
+    :class="[
+      zebra ? 'table-zebra' : '',
+      pinRows ? 'table-pin-rows' : '',
+      pinCols ? 'table-pin-cols' : '',
+      xs || size === 'xs' ? 'table-xs' : '',
+      sm || size === 'sm' ? 'table-sm' : '',
+      md || size === 'md' || (!xs && !sm && !lg && !xl && !size) ? 'table-md' : '',
+      lg || size === 'lg' ? 'table-lg' : '',
+      xl || size === 'xl' ? 'table-xl' : '',
+    ]"
+  >
+    <slot />
+  </table>
+</template>