daisy-ui-kit 5.0.3 → 5.0.5

package/app/components/LoadingBars.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-</script>
-
-<template>
-  <span
-    class="loading loading-bars"
-    :class="{
-      '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-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  />
-</template>

package/app/components/LoadingDots.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-</script>
-
-<template>
-  <span
-    class="loading loading-dots"
-    :class="{
-      '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-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  />
-</template>

package/app/components/LoadingInfinity.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-</script>
-
-<template>
-  <span
-    class="loading loading-infinity"
-    :class="{
-      '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-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  />
-</template>

package/app/components/LoadingRing.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-</script>
-
-<template>
-  <span
-    class="loading loading-ring"
-    :class="{
-      '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-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  />
-</template>

package/app/components/LoadingSpinner.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-</script>
-
-<template>
-  <span
-    class="loading loading-spinner"
-    :class="{
-      '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-xl': props.xl || props.size === 'xl',
-      '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',
-    }"
-  />
-</template>

package/app/components/Mask.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  shape?: string
-  squircle?: boolean
-  heart?: boolean
-  hexagon?: boolean
-  hexagon2?: boolean
-  decagon?: boolean
-  pentagon?: boolean
-  diamond?: boolean
-  square?: boolean
-  circle?: boolean
-  star?: boolean
-  star2?: boolean
-  triangle?: boolean
-  triangle2?: boolean
-  triangle3?: boolean
-  triangle4?: boolean
-  half1?: boolean
-  half2?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="mask"
-    :class="{
-      'mask-squircle': props.squircle || props.shape === 'squircle',
-      'mask-heart': props.heart || props.shape === 'heart',
-      'mask-hexagon': props.hexagon || props.shape === 'hexagon',
-      'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
-      'mask-decagon': props.decagon || props.shape === 'decagon',
-      'mask-pentagon': props.pentagon || props.shape === 'pentagon',
-      'mask-diamond': props.diamond || props.shape === 'diamond',
-      'mask-square': props.square || props.shape === 'square',
-      'mask-circle': props.circle || props.shape === 'circle',
-      'mask-star': props.star || props.shape === 'star',
-      'mask-star-2': props.star2 || props.shape === 'star-2',
-      'mask-triangle': props.triangle || props.shape === 'triangle',
-      'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
-      'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
-      'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
-      'mask-half-1': props.half1 || props.shape === 'half-1',
-      'mask-half-2': props.half2 || props.shape === 'half-2',
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Menu.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  align?: 'vertical' | 'horizontal'
-  vertical?: boolean
-  horizontal?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-</script>
-
-<template>
-  <ul
-    class="menu"
-    :class="{
-      'menu-vertical': props.vertical || props.align === 'vertical',
-      'menu-horizontal': props.horizontal || props.align === 'horizontal',
-      'menu-xl': props.xl || props.size === 'xl',
-      'menu-lg': props.lg || props.size === 'lg',
-      'menu-md': props.md || props.size === 'md',
-      'menu-sm': props.sm || props.size === 'sm',
-      'menu-xs': props.xs || props.size === 'xs',
-    }"
-  >
-    <slot />
-  </ul>
-</template>

package/app/components/MenuExpand.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-
-import { onClickOutside, useElementHover } from '@vueuse/core'
-import { onMounted, provide, ref, useId } from 'vue'
-
-// Define the MenuExpandState interface
-export interface MenuExpandState {
-  id: string
-  isOpen: Ref<boolean>
-  toggle: () => void
-  open: () => void
-  close: () => void
-}
-
-// Props with defaults
-const {
-  hover = false,
-  delayLeave = 300,
-  closeOnClickOutside = false,
-} = defineProps<{
-  hover?: boolean
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>()
-
-// v-model for open state
-const isOpen = defineModel('open', { default: false, type: Boolean })
-
-// Generate IDs for accessibility and targeting
-const uniqueId = useId()
-const wrapperId = `expand-wrapper-${uniqueId}`
-const id = `expand-${uniqueId}`
-
-// Element reference for click outside detection
-const expandEl = ref()
-
-// Control functions
-function toggle() {
-  setTimeout(() => {
-    isOpen.value = !isOpen.value
-  }, 50)
-}
-
-function open() {
-  isOpen.value = true
-}
-
-function close() {
-  isOpen.value = false
-}
-
-// Create and provide the menu expand state object
-const menuExpandState: MenuExpandState = {
-  id,
-  isOpen,
-  toggle,
-  open,
-  close,
-}
-
-// Provide the state to child components
-provide('menuExpandState', menuExpandState)
-
-// Setup event handlers
-onMounted(() => {
-  // Handle clicks outside the component
-  onClickOutside(expandEl, () => {
-    if (closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 500)
-    }
-  })
-
-  // Setup hover behavior if enabled
-  if (hover) {
-    useElementHover(expandEl, {
-      delayLeave,
-    })
-  }
-})
-
-// Empty click handler for internal use
-function handleClick(_ev: MouseEvent) {}
-</script>
-
-<template>
-  <details :id="wrapperId" ref="expandEl" class="dropdown menu-expand" :open="isOpen" @click="handleClick">
-    <slot v-bind="{ toggle, open, close }" />
-  </details>
-</template>

package/app/components/MenuExpandToggle.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { MenuExpandState } from './MenuExpand.vue'
-
-import { inject } from 'vue'
-
-const menuExpandState = inject<MenuExpandState>('menuExpandState')
-const { id, isOpen, toggle } = menuExpandState || {}
-</script>
-
-<template>
-  <summary
-    :id="id"
-    :aria-expanded="isOpen"
-    aria-haspopup="menu"
-    class="menu-expand-toggle"
-    @click.prevent.stop="toggle"
-  >
-    <slot />
-  </summary>
-</template>

package/app/components/MenuItem.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  disabled?: boolean
-}>()
-</script>
-
-<template>
-  <li class="menu-item" :class="{ 'menu-disabled': disabled }">
-    <slot />
-  </li>
-</template>
-
-<style lang="postcss">
-/*
-  Allow adding .active class to the MenuItem element.
-  DaisyUI only supports adding it to the `a` element.
-*/
-.menu-item.menu-active > a,
-.menu-item.menu-active > span {
-  background-color: hsl(var(--n) / var(--tw-bg-opacity));
-  color: hsl(var(--nc) / var(--tw-text-opacity));
-}
-.menu-item.menu-disabled > a,
-.menu-item.menu-disabled > span {
-  background-color: var(--n);
-}
-
-/* Fix padding when putting a Dropdown inside of a menu */
-.menu-item > .floating-dropdown {
-  padding: 0;
-}
-.menu-item > .floating-dropdown > .dropdown-button,
-.menu-item > .floating-dropdown > .dropdown-target {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-</style>

package/app/components/MenuTitle.vue

@@ -1,5 +0,0 @@
-<template>
-  <li class="menu-title">
-    <slot />
-  </li>
-</template>

package/app/components/MockupBrowser.vue

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

package/app/components/MockupBrowserToolbar.vue

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

package/app/components/MockupCode.vue

@@ -1,4 +0,0 @@
-<template>
-  <!-- eslint-disable vue/singleline-html-element-content-newline -->
-  <div class="mockup-code"><slot /></div>
-</template>

package/app/components/MockupPhone.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  displayClasses?: string
-}>()
-</script>
-
-<template>
-  <div class="mockup-phone">
-    <div class="mockup-phone-camera" />
-    <div class="mockup-phone-display" :class="displayClasses">
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/MockupWindow.vue

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

package/app/components/Modal.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    closeOnClickOutside?: boolean
-    placement?: 'top' | 'bottom' | 'start' | 'end'
-    top?: boolean
-    bottom?: boolean
-    start?: boolean
-    end?: boolean
-  }>(),
-  {
-    closeOnClickOutside: true,
-  },
-)
-const emit = defineEmits(['update:modelValue'])
-
-const is = 'div'
-
-// defineModel 'open'
-const _isOpen = ref(props.modelValue)
-watch(
-  () => props.modelValue,
-  val => {
-    _isOpen.value = val
-  },
-)
-const isOpen = computed({
-  get: () => _isOpen.value,
-  set: val => {
-    _isOpen.value = val
-    if (props.modelValue !== val) {
-      emit('update:modelValue', val)
-    }
-  },
-})
-
-function handleClick() {
-  if (props.closeOnClickOutside) {
-    isOpen.value = false
-  }
-}
-</script>
-
-<template>
-  <input v-model="isOpen" type="checkbox" class="modal-toggle" />
-  <Component
-    :is="is"
-    v-bind="{ ...$attrs, ...$props }"
-    class="modal"
-    :class="{
-      'modal-top': props.top,
-      'modal-bottom': props.bottom,
-      'modal-start': props.start,
-      'modal-end': props.end,
-    }"
-    @click.self="handleClick"
-  >
-    <slot />
-  </Component>
-</template>

package/app/components/ModalAction.vue

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

package/app/components/ModalBox.vue

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

package/app/components/NavButton.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const { active = false, disabled = false } = defineProps<{
-  active?: boolean
-  disabled?: boolean
-}>()
-</script>
-
-<template>
-  <button class="nav-button" :class="{ active, disabled }">
-    <slot />
-  </button>
-</template>

package/app/components/Navbar.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const { is = 'div', glass = false } = defineProps<{
-  is?: any
-  glass?: boolean
-}>()
-</script>
-
-<template>
-  <component :is="is" class="navbar" :class="{ glass }">
-    <slot />
-  </component>
-</template>

package/app/components/NavbarCenter.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const { is = 'div' } = defineProps<{
-  is?: any
-}>()
-</script>
-
-<template>
-  <component :is="is" class="navbar-center">
-    <slot />
-  </component>
-</template>

package/app/components/NavbarEnd.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const { is = 'div' } = defineProps<{
-  is?: any
-}>()
-</script>
-
-<template>
-  <component :is="is" class="navbar-end">
-    <slot />
-  </component>
-</template>

package/app/components/NavbarStart.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const { is = 'div' } = defineProps<{
-  is?: any
-}>()
-</script>
-
-<template>
-  <component :is="is" class="navbar-start">
-    <slot />
-  </component>
-</template>