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

package/components/DropdownContent.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { inject, nextTick, ref, watchEffect } from 'vue'
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-
-const autoFocus = inject('dropdownAutoFocus')
-const id = inject('dropdownId')
-const isOpen = inject('isDropdownOpen')
-const isOpenDelayed = ref(isOpen.value)
-const contentEl = inject('contentEl')
-const floatingStyles = inject('floatingStyles')
-
-// Dropdown Utils
-const toggle = inject('toggleDropdown')
-const open = inject('openDropdown')
-const close = inject('closeDropdown')
-
-let activate
-let deactivate
-
-if (autoFocus.value) {
-  const { activate: _activate, deactivate: _deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
-  activate = _activate
-  deactivate = _deactivate
-
-  // hide the dropdown when the focus-trap drops focus (by pressing escape, for example)
-  watchEffect(() => {
-    if (!hasFocus.value)
-      close()
-  })
-}
-// const { activate, deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
-
-// synchronize isOpenDelayed with isOpen
-watchEffect(async () => {
-  if (isOpen.value) {
-    isOpenDelayed.value = true
-    if (autoFocus.value) {
-      await nextTick()
-      activate()
-    }
-  }
-  else {
-    if (autoFocus.value) {
-      deactivate()
-      await nextTick()
-    }
-    isOpenDelayed.value = false
-  }
-})
-</script>
-
-<template>
-  <div v-if="isOpen" ref="contentEl" :style="floatingStyles" :aria-labelledby="id" role="menu">
-    <slot v-bind="{ toggle, open, close }" />
-  </div>
-</template>

package/components/DropdownTarget.vue

@@ -1,14 +0,0 @@
-<script setup>
-import { inject } from 'vue'
-
-const id = inject('dropdownId')
-const isOpen = inject('isDropdownOpen')
-const toggle = inject('toggleDropdown')
-const buttonEl = inject('buttonEl')
-</script>
-
-<template>
-  <div :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-target" @click="toggle">
-    <slot />
-  </div>
-</template>

package/components/FileInput.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  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
-}>()
-defineEmits(['files'])
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'file-input-primary': props.primary || props.color === 'primary',
-    'file-input-secondary': props.secondary || props.color === 'secondary',
-    'file-input-accent': props.accent || props.color === 'accent',
-    'file-input-info': props.info || props.color === 'info',
-    'file-input-success': props.success || props.color === 'success',
-    'file-input-warning': props.warning || props.color === 'warning',
-    'file-input-error': props.error || props.color === 'error',
-
-    'file-input-lg': props.lg || props.size === 'lg',
-    'file-input-md': props.md || props.size === 'md',
-    'file-input-sm': props.sm || props.size === 'sm',
-    'file-input-xs': props.xs || props.size === 'xs',
-
-    'file-input-bordered': props.bordered,
-    'file-input-ghost': props.ghost,
-  }
-})
-</script>
-
-<template>
-  <input
-    type="file"
-    :disabled="disabled"
-    class="file-input"
-    :class="classes"
-    @input="$emit('files', ($event.target as any).value)"
-  >
-</template>

package/components/Flex.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  join?: boolean
-
-  // https://tailwindcss.com/docs/flex
-  flex?: boolean
-  flex1?: boolean
-  flexAuto?: boolean
-  flexInitial?: boolean
-  none?: boolean
-
-  grow?: boolean
-
-  // https://tailwindcss.com/docs/flex-direction
-  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
-  row?: boolean
-  col?: boolean
-  reverse?: boolean
-
-  // https://tailwindcss.com/docs/flex-wrap
-  wrap?: boolean
-  nowrap?: boolean
-  wrapReverse?: boolean
-}>(), {
-  is: 'div',
-  flex: true,
-})
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'flex-1': props.flex1,
-    'flex-auto': props.flexAuto,
-    'flex-initial': props.flexInitial,
-    'flex-none': props.none,
-
-    'flex-grow': props.grow,
-
-    'flex-row': props.direction === 'row' || props.row,
-    'flex-col': props.direction === 'col' || props.col,
-    'flex-row-reverse': props.direction === 'row-reverse' || (props.row && props.reverse),
-    'flex-col-reverse': props.direction === 'col-reverse' || (props.col && props.reverse),
-
-    'flex-wrap': props.wrap,
-    'flex-wrap-reverse': props.wrapReverse,
-    'flex-nowrap': props.nowrap,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="flex" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/FlexItem.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string | Object | Function
-  join?: boolean
-
-  // https://tailwindcss.com/docs/flex
-  flex?: boolean
-  flex1?: boolean
-  flexAuto?: boolean
-  flexInitial?: boolean
-  none?: boolean
-
-  grow?: boolean
-
-  // https://tailwindcss.com/docs/flex-direction
-  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
-  row?: boolean
-  col?: boolean
-  reverse?: boolean
-
-  // https://tailwindcss.com/docs/flex-wrap
-  wrap?: boolean
-  nowrap?: boolean
-  wrapReverse?: boolean
-}>(), {
-  is: 'div',
-  flex: false,
-})
-
-const classes = computed(() => {
-  return {
-    'join-item': props.join,
-
-    'flex-1': props.flex1,
-    'flex-auto': props.flexAuto,
-    'flex-initial': props.flexInitial,
-    'flex-none': props.none,
-
-    'flex-grow': props.grow,
-
-    'flex-row': props.direction === 'row' || props.row,
-    'flex-col': props.direction === 'col' || props.col,
-    'flex-row-reverse': props.direction === 'row-reverse' || (props.row && props.reverse),
-    'flex-col-reverse': props.direction === 'col-reverse' || (props.col && props.reverse),
-
-    'flex-wrap': props.wrap,
-    'flex-wrap-reverse': props.wrapReverse,
-    'flex-nowrap': props.nowrap,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="flex" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/Footer.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Text from './Text.vue'
-
-const props = withDefaults(defineProps<{
-  center?: boolean
-  is?: string
-}>(), {
-  center: false,
-  is: 'footer',
-})
-
-const classes = computed(() => {
-  return {
-    'divider-center': props.center,
-  }
-})
-</script>
-
-<template>
-  <Text :is="is" class="footer" :class="classes">
-    <slot />
-  </Text>
-</template>

package/components/FooterTitle.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'span',
-})
-</script>
-
-<template>
-  <Text :is="is" class="footer-title">
-    <slot />
-  </Text>
-</template>

package/components/FormControl.vue

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

package/components/Hero.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <Text :is="is" class="hero">
-    <slot />
-  </Text>
-</template>

package/components/HeroContent.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <Text :is="is" class="hero-content">
-    <slot />
-  </Text>
-</template>

package/components/HeroOverlay.vue

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

package/components/Indicator.vue

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

package/components/IndicatorItem.vue

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

package/components/Join.vue

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

package/components/Kbd.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-const classes = computed(() => {
-  const { size, lg, md, sm, xs } = props
-  return {
-    'kbd-lg': lg || size === 'lg',
-    'kbd-md': md || size === 'md',
-    'kbd-sm': sm || size === 'sm',
-    'kbd-xs': xs || size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <kbd class="kbd" :class="classes"><slot /></kbd>
-</template>

package/components/Label.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'label',
-})
-</script>
-
-<template>
-  <Text :is="is" class="label">
-    <slot />
-  </Text>
-</template>

package/components/LabelText.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'span',
-})
-</script>
-
-<template>
-  <Text :is="is" class="label-text">
-    <slot />
-  </Text>
-</template>

package/components/LabelTextAlt.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Text from './Text.vue'
-
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'span',
-})
-</script>
-
-<template>
-  <Text :is="is" class="label-text-alt">
-    <slot />
-  </Text>
-</template>

package/components/Link.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  is?: string
-  hover?: boolean
-
-  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-}>(), {
-  is: 'a',
-})
-
-const classes = computed(() => {
-  return {
-    'link-neutral': props.neutral || props.color === 'neutral',
-    'link-primary': props.primary || props.color === 'primary',
-    'link-secondary': props.secondary || props.color === 'secondary',
-    'link-accent': props.accent || props.color === 'accent',
-    'link-success': props.success || props.color === 'success',
-    'link-info': props.info || props.color === 'info',
-    'link-warning': props.warning || props.color === 'warning',
-    'link-error': props.error || props.color === 'error',
-    'link-hover': props.hover,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="link" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/LoadingBall.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  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 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',
-
-    'loading-lg': props.lg || props.size === 'lg',
-    'loading-md': props.md || props.size === 'md',
-    'loading-sm': props.sm || props.size === 'sm',
-    'loading-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <span class="loading loading-ball" :class="classes" />
-</template>

package/components/LoadingBars.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  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 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',
-
-    'loading-lg': props.lg || props.size === 'lg',
-    'loading-md': props.md || props.size === 'md',
-    'loading-sm': props.sm || props.size === 'sm',
-    'loading-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <span class="loading loading-bars" :class="classes" />
-</template>

package/components/LoadingDots.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  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 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',
-
-    'loading-lg': props.lg || props.size === 'lg',
-    'loading-md': props.md || props.size === 'md',
-    'loading-sm': props.sm || props.size === 'sm',
-    'loading-xs': props.xs || props.size === 'xs',
-  }
-})
-</script>
-
-<template>
-  <span class="loading loading-dots" :class="classes" />
-</template>