daisy-ui-kit 3.0.11 → 5.0.0-pre.3

package/components/StatValue.vue

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

package/components/Stats.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="stats">
-    <slot />
-  </div>
-</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/TabContent.vue

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

package/components/TextInput.vue

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

package/components/Toast.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  hAlign?: 'start' | 'center' | 'end'
-  start?: boolean
-  center?: boolean
-  end?: boolean
-
-  vAlign?: 'top' | 'middle' | 'bottom'
-  top?: boolean
-  middle?: boolean
-  bottom?: boolean
-}>()
-const classes = computed(() => {
-  return {
-    'toast-start': props.start || props.hAlign === 'start',
-    'toast-center': props.center || props.hAlign === 'center',
-    'toast-end': props.end || props.hAlign === 'end',
-    'toast-top': props.top || props.vAlign === 'top',
-    'toast-middle': props.middle || props.vAlign === 'middle',
-    'toast-bottom': props.bottom || props.vAlign === 'bottom',
-  }
-})
-</script>
-
-<template>
-  <div class="toast" :class="classes">
-    <slot />
-  </div>
-</template>

package/components/Toggle.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  modelValue?: any
-  disabled?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: string
-  xs?: boolean
-  sm?: boolean
-  md?: boolean
-  lg?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const classes = computed(() => {
-  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, xs, sm, md, lg } = props
-  return {
-    'toggle-neutral': neutral || color === 'neutral',
-    'toggle-primary': primary || color === 'primary',
-    'toggle-secondary': secondary || color === 'secondary',
-    'toggle-accent': accent || color === 'accent',
-    'toggle-success': success || color === 'success',
-    'toggle-info': info || color === 'info',
-    'toggle-warning': warning || color === 'warning',
-    'toggle-error': error || color === 'error',
-    'toggle-xs': xs || size === 'xs',
-    'toggle-sm': sm || size === 'sm',
-    'toggle-md': md || size === 'md',
-    'toggle-lg': lg || size === 'lg',
-  }
-})
-
-const currentValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val),
-})
-</script>
-
-<template>
-  <input
-    v-model="currentValue"
-    type="checkbox"
-    v-bind="$attrs"
-    class="toggle"
-    :disabled="disabled"
-    :class="classes"
-  >
-</template>