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

package/components/Rating.vue

@@ -1,167 +0,0 @@
-<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
-  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
-}>(), {
-  count: 5,
-})
-const emit = 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 as any)[current]
-  }, false)
-  const { color, shape, disabled } = props
-  return {
-    'bg-neutral': props.neutral || color === 'neutral',
-    'bg-primary': props.primary || color === 'primary',
-    'bg-secondary': props.secondary || color === 'secondary',
-    'bg-accent': props.accent || color === 'accent',
-    'bg-info': props.info || color === 'info',
-    'bg-success': props.success || color === 'success',
-    'bg-warning': props.warning || color === 'warning',
-    'bg-error': props.error || color === 'error',
-
-    'cursor-not-allowed': disabled,
-    'opacity-50': disabled,
-
-    'mask-squircle': props.squircle || shape === 'squircle',
-    'mask-heart': props.heart || shape === 'heart',
-    'mask-hexagon': props.hexagon || shape === 'hexagon',
-    'mask-hexagon-2': props.hexagon2 || shape === 'hexagon-2',
-    'mask-decagon': props.decagon || shape === 'decagon',
-    'mask-pentagon': props.pentagon || shape === 'pentagon',
-    'mask-diamond': props.diamond || shape === 'diamond',
-    'mask-square': props.square || shape === 'square',
-    'mask-circle': props.circle || shape === 'circle',
-    'mask-parallelogram': props.parallelogram || shape === 'parallelogram',
-    'mask-parallelogram-2': props.parallelogram2 || shape === 'parallelogram-2',
-    'mask-parallelogram-3': props.parallelogram3 || shape === 'parallelogram-3',
-    'mask-parallelogram-4': props.parallelogram4 || shape === 'parallelogram-4',
-    'mask-star': props.star || shape === 'star',
-    'mask-star-2': props.star2 || shape === 'star-2' || !hasShape,
-    'mask-triangle': props.triangle || shape === 'triangle',
-    'mask-triangle-2': props.triangle2 || shape === 'triangle-2',
-    'mask-triangle-3': props.triangle3 || shape === 'triangle-3',
-    'mask-triangle-4': props.triangle4 || shape === 'triangle-4',
-  }
-})
-const max = computed(() => Number.parseInt(props.count as string))
-
-function handleValue(digit: number, half = false) {
-  if (props.disabled)
-    return
-
-  if (props.half)
-    return emit('update:modelValue', half ? digit - 0.5 : digit)
-
-  return emit('update:modelValue', digit)
-}
-</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, bg, { 'mask-half-1': half }]"
-        :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"
-        :class="[maskClasses, bg]"
-        :checked="modelValue === digit"
-        @change="() => handleValue(digit)"
-      >
-    </template>
-  </div>
-</template>

package/components/Select.vue

@@ -1,100 +0,0 @@
-<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
-
-  bordered?: boolean
-  ghost?: boolean
-  disabled?: 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
-}>(), {
-  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)
-  },
-})
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    '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" :disabled="disabled">
-    <option
-      v-for="option in options"
-      :key="value(option)"
-      :value="value(option)"
-      :disabled="option.disabled"
-    >
-      {{ label(option) }}
-    </option>
-  </select>
-</template>

package/components/Stack.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <component :is="is" class="stack">
-    <slot />
-  </component>
-</template>

package/components/Step.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  glyph?: string
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    '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',
-  }
-})
-</script>
-
-<template>
-  <li class="step" :class="classes" :data-content="glyph">
-    <slot />
-  </li>
-</template>

package/components/Steps.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  vertical?: boolean
-  horizontal?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'steps-vertical': props.vertical,
-    'steps-horizontal': props.horizontal,
-  }
-})
-</script>
-
-<template>
-  <ul class="steps" :class="classes">
-    <slot />
-  </ul>
-</template>

package/components/Swap.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-
-const props = defineProps<{
-  modelValue?: boolean | null
-  indeterminate?: boolean
-  rotate?: boolean
-  flip?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-const classes = computed(() => {
-  return {
-    'swap-rotate': props.rotate,
-    'swap-flip': props.flip,
-  }
-})
-
-const checkbox = ref(null)
-
-// Allow internal or external control
-const isChecked = ref<any>(props.modelValue)
-watch(isChecked, val => emit('update:modelValue', val))
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (isChecked.value !== val)
-      isChecked.value = val
-  },
-)
-
-// When the indeterminate prop updates, manually update the checkbox element.
-watch(
-  () => [props.indeterminate, checkbox.value],
-  ([val]) => {
-    nextTick(() => {
-      if (checkbox.value != null)
-        (checkbox.value as any).indeterminate = val
-      isChecked.value = null
-    })
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <label class="swap" :class="classes">
-    <input ref="checkbox" v-model="isChecked" type="checkbox">
-    <div class="swap-off">
-      <slot />
-    </div>
-    <div class="swap-on">
-      <slot name="swap" />
-    </div>
-    <div v-if="indeterminate" class="swap-indeterminate">
-      <slot name="indeterminate" />
-    </div>
-  </label>
-</template>

package/components/Tab.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  name?: string
-  active?: boolean
-
-  variant?: 'bordered' | 'lifted'
-  bordered?: boolean
-  lifted?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  is: 'a',
-})
-
-const manager: any = inject('tabManager')
-
-const classes = computed(() => {
-  return {
-    'tab-active': props.active || manager.currentTab === props.name,
-
-    'tab-lg': props.size === 'lg' || props.lg,
-    'tab-md': props.size === 'md' || props.md,
-    'tab-sm': props.size === 'sm' || props.sm,
-    'tab-xs': props.size === 'xs' || props.xs,
-
-    'tab-bordered': props.variant === 'bordered' || props.bordered,
-    'tab-lifted': props.variant === 'lifted' || props.lifted,
-  }
-})
-</script>
-
-<template>
-  <component
-    :is="is" class="tab" :class="classes" tabindex="0"
-    @click="() => (manager.currentTab = name)"
-    @keypress.enter="() => (manager.currentTab = name)"
-  >
-    <slot v-if="$slots.default" />
-    <span v-else>{{ name }}</span>
-  </component>
-</template>

package/components/Tabs.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue'
-import Tab from './Tab.vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  tabs?: string[]
-
-  variant?: 'bordered' | 'lifted' | 'boxed' | 'inline-boxed'
-  bordered?: boolean
-  lifted?: boolean
-  boxed?: boolean
-  inlineBoxed?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  is: 'a',
-  tabs: [] as any,
-})
-
-const tabManager: any = inject('tabManager')
-
-const _variant = computed(() => {
-  if (props.bordered || props.variant === 'bordered')
-    return 'bordered'
-  if (props.lifted || props.variant === 'lifted')
-    return 'lifted'
-  return undefined
-})
-const _size = computed(() => {
-  if (props.size)
-    return props.size
-  if (props.lg)
-    return 'lg'
-  if (props.md)
-    return 'md'
-  if (props.sm)
-    return 'sm'
-  if (props.xs)
-    return 'xs'
-  return 'md'
-})
-
-const classes = computed(() => {
-  return {
-    'tabs-boxed':
-      props.variant === 'boxed'
-      || props.variant === 'inline-boxed'
-      || props.boxed
-      || props.inlineBoxed,
-    'inline-block': props.variant === 'inline-boxed' || props.inlineBoxed,
-  }
-})
-</script>
-
-<template>
-  <div class="tabs" :class="classes">
-    <slot v-if="$slots.default" />
-    <template v-for="tabName in tabs" v-else :key="tabName">
-      <Tab
-        :is="is"
-        :name="tabName"
-        :variant="_variant"
-        :size="_size"
-        :active="tabManager.currentTab === tabName"
-        @click="() => (tabManager.currentTab = tabName)"
-      >
-        {{ tabName }}
-      </Tab>
-    </template>
-    <div v-if="variant === 'lifted' || lifted" class="flex-1 cursor-default tab tab-lifted" />
-  </div>
-</template>

package/components/TabsManager.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { provide, reactive, watch } from 'vue'
-
-const props = defineProps<{
-  tab?: string
-}>()
-const emit = defineEmits(['update:tab'])
-
-const manager = reactive({
-  currentTab: props.tab,
-  tabs: [],
-})
-provide('tabManager', manager)
-
-// If the tab changes from outside, update the internal value.
-watch(
-  () => props.tab,
-  (val) => {
-    if (val !== manager.currentTab)
-      manager.currentTab = val
-  },
-)
-
-// If the internal tab value changes, update the tab
-watch(
-  () => manager.currentTab,
-  (val) => {
-    if (val !== props.tab)
-      emit('update:tab', val)
-  },
-)
-</script>
-
-<template>
-  <div class="tabs-manager">
-    <slot />
-  </div>
-</template>