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

package/components/Divider.vue

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

package/components/Dropdown.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { onMounted, provide, reactive, ref } from 'vue'
-import { autoUpdate, useFloating } from '@floating-ui/vue'
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
-import { randomString } from '../utils/random-string'
-
-const props = withDefaults(defineProps<{
-  // allows passing a custom id to the dropdown. Required for SSR hydration.
-  randomId?: string
-  autoFocus?: boolean
-
-  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
-  strategy?: 'fixed' | 'absolute'
-
-  hover?: boolean
-  delayEnter?: number
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>(), {
-  autoFocus: false,
-  placement: 'bottom-start',
-  hover: false,
-  delayEnter: 0,
-  delayLeave: 300,
-  closeOnClickOutside: true,
-})
-// Dropdown Visibility
-const isOpen = defineModel('open', { local: true })
-provide('isDropdownOpen', isOpen)
-
-const autoFocus = ref(props.autoFocus)
-provide('dropdownAutoFocus', autoFocus)
-
-const randomValue = props.randomId || randomString(12)
-const wrapperId = `dropdown-wrapper-${randomValue}`
-const id = `dropdown-${randomValue}`
-provide('dropdownId', id)
-
-// set up the floating ui instance
-const buttonEl = ref(null)
-const contentEl = ref(null)
-const floatingConfig = reactive({
-  placement: ref(props.placement),
-  strategy: ref(props.strategy),
-  whileElementsMounted: autoUpdate,
-})
-const { floatingStyles } = useFloating(buttonEl, contentEl, floatingConfig)
-
-provide('buttonEl', buttonEl)
-provide('contentEl', contentEl)
-provide('floatingStyles', floatingStyles)
-
-// Visibility Utils
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-function open() {
-  isOpen.value = true
-}
-function close() {
-  isOpen.value = false
-}
-provide('toggleDropdown', toggle)
-provide('openDropdown', open)
-provide('closeDropdown', close)
-
-const dropdownWrapper = ref(null)
-
-onMounted(() => {
-  // Close when clicking outside the element
-  // use a slight delay to avoid conflict with the focus trap in the DropdownContent.
-  onClickOutside(contentEl, () => {
-    if (props.closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 50)
-    }
-  })
-
-  // Sync with top-level isHovered ref. For SSR compatibility.
-  if (props.hover) {
-    const hover = useElementHover(dropdownWrapper, {
-      delayLeave: props.delayLeave,
-      delayEnter: props.delayEnter,
-    })
-    syncRefs(hover, isOpen)
-  }
-})
-</script>
-
-<template>
-  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block floating-dropdown">
-    <slot v-bind="{ toggle, open, close }" />
-  </div>
-</template>

package/components/DropdownButton.vue

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

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

package/components/LoadingInfinity.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-infinity" :class="classes" />
-</template>

package/components/LoadingRing.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-ring" :class="classes" />
-</template>