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

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

package/components/Text.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  is?: string
-  join?: boolean
-
-  block?: boolean
-  inline?: boolean
-  inlineBlock?: boolean
-
-  color?: | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'primary-content' | 'secondary-content' | 'neutral-content' | 'accent-content' | 'info-content' | 'success-content' | 'warning-content' | 'error-content'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  neutralContent?: boolean
-  primaryContent?: boolean
-  secondaryContent?: boolean
-  accentContent?: boolean
-  infoContent?: boolean
-  successContent?: boolean
-  warningContent?: boolean
-  errorContent?: boolean
-
-  size?: | '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-
-  align?: 'left' | 'center' | 'right' | 'justify'
-  left?: boolean
-  center?: boolean
-  right?: boolean
-  justify?: boolean
-
-  case?: 'upper' | 'lower' | 'capitalize' | 'normal'
-  uppercase?: boolean
-  lowercase?: boolean
-  capitalize?: boolean
-  normalCase?: boolean
-
-  font?: 'sans' | 'serif' | 'mono'
-  sans?: boolean
-  serif?: boolean
-  mono?: boolean
-
-  weight?: | 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
-  thin?: boolean
-  extralight?: boolean
-  light?: boolean
-  normal?: boolean
-  medium?: boolean
-  semibold?: boolean
-  bold?: boolean
-  extrabold?: boolean
-  black?: boolean
-}>()
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'block': props.block,
-    'inline': props.inline,
-    'inline-block': props.inlineBlock,
-
-    'text-primary': props.primary || props.color === 'primary',
-    'text-primary-content':
-      props.primaryContent || props.color === 'primary-content',
-    'text-secondary': props.secondary || props.color === 'secondary',
-    'text-secondary-content':
-      props.secondaryContent || props.color === 'secondary-content',
-    'text-neutral': props.neutral || props.color === 'neutral',
-    'text-neutral-content':
-      props.neutralContent || props.color === 'neutral-content',
-    'text-accent': props.accent || props.color === 'accent',
-    'text-accent-content':
-      props.accentContent || props.color === 'accent-content',
-    'text-info': props.info || props.color === 'info',
-    'text-info-content': props.infoContent || props.color === 'info-content',
-    'text-success': props.success || props.color === 'success',
-    'text-success-content':
-      props.successContent || props.color === 'success-content',
-    'text-warning': props.warning || props.color === 'warning',
-    'text-warning-content':
-      props.warningContent || props.color === 'warning-content',
-    'text-error': props.error || props.color === 'error',
-    'text-error-content': props.errorContent || props.color === 'error-content',
-
-    'text-9xl': props.size === '9xl',
-    'text-8xl': props.size === '8xl',
-    'text-7xl': props.size === '7xl',
-    'text-6xl': props.size === '6xl',
-    'text-5xl': props.size === '5xl',
-    'text-4xl': props.size === '4xl',
-    'text-3xl': props.size === '3xl',
-    'text-2xl': props.size === '2xl',
-    'text-xl': props.xl || props.size === 'xl',
-    'text-lg': props.lg || props.size === 'lg',
-    'text-md': props.md || props.size === 'md',
-    'text-sm': props.sm || props.size === 'sm',
-    'text-xs': props.xs || props.size === 'xs',
-
-    'text-left': props.left || props.align === 'left',
-    'text-center': props.center || props.align === 'center',
-    'text-right': props.right || props.align === 'right',
-    'text-justify': props.justify || props.align === 'justify',
-
-    'uppercase': props.uppercase || props.case === 'upper',
-    'lowercase': props.lowercase || props.case === 'lower',
-    'capitalize': props.capitalize || props.case === 'capitalize',
-    'normal-case': props.normalCase || props.case === 'normal',
-
-    'font-sans': props.sans || props.font === 'sans',
-    'font-serif': props.serif || props.font === 'serif',
-    'font-mono': props.mono || props.font === 'mono',
-
-    'font-thin': props.thin || props.weight === 'thin',
-    'font-extralight': props.extralight || props.weight === 'extralight',
-    'font-light': props.light || props.weight === 'light',
-    'font-normal': props.normal || props.weight === 'normal',
-    'font-medium': props.medium || props.weight === 'medium',
-    'font-semibold': props.semibold || props.weight === 'semibold',
-    'font-bold': props.bold || props.weight === 'bold',
-    'font-extrabold': props.extrabold || props.weight === 'extrabold',
-    'font-black': props.black || props.weight === 'black',
-  }
-})
-</script>
-
-<template>
-  <component :is="is || 'span'" :class="[classes]">
-    <slot />
-  </component>
-</template>

package/components/TextArea.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  modelValue?: string
-  placeholder?: string
-  type?: 'text' | 'phone' | 'email' | 'search'
-
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  bordered?: boolean
-  ghost?: boolean
-  disabled?: boolean
-
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  type: 'text',
-})
-defineEmits(['update:modelValue'])
-
-const classes = computed(() => {
-  return {
-    'textarea-primary': props.primary || props.color === 'primary',
-    'textarea-secondary': props.secondary || props.color === 'secondary',
-    'textarea-accent': props.accent || props.color === 'accent',
-    'textarea-info': props.info || props.color === 'info',
-    'textarea-success': props.success || props.color === 'success',
-    'textarea-warning': props.warning || props.color === 'warning',
-    'textarea-error': props.error || props.color === 'error',
-
-    'textarea-bordered': props.bordered,
-    'textarea-ghost': props.ghost,
-
-    'textarea-lg': props.lg || props.size === 'lg',
-    'textarea-md': props.md || props.size === 'md',
-    'textarea-sm': props.sm || props.size === 'sm',
-    'textarea-xs': props.xs || props.size === 'xs',
-
-  }
-})
-</script>
-
-<template>
-  <textarea
-    :value="modelValue"
-    :type="type"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    class="textarea"
-    :class="classes"
-    @input="$emit('update:modelValue', ($event.target as any).value)"
-  />
-</template>