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

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>

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

package/components/Mask.config.ts

@@ -1,77 +0,0 @@
-import { computed } from 'vue'
-
-export const maskProps = {
-  shape: { type: 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,
-}
-
-export function makeMaskClasses(props: any) {
-  const classes = computed(() => {
-    return {
-      '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-parallelogram':
-        props.parallelogram || props.shape === 'parallelogram',
-      'mask-parallelogram-2':
-        props.parallelogram2 || props.shape === 'parallelogram-2',
-      'mask-parallelogram-3':
-        props.parallelogram3 || props.shape === 'parallelogram-3',
-      'mask-parallelogram-4':
-        props.parallelogram4 || props.shape === 'parallelogram-4',
-      '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',
-    }
-  })
-  return classes
-}
-
-export const shapes = [
-  'squircle',
-  'heart',
-  'hexagon',
-  'hexagon-2',
-  'decagon',
-  'pentagon',
-  'diamond',
-  'square',
-  'circle',
-  'parallelogram',
-  'parallelogram-2',
-  'parallelogram-3',
-  'parallelogram-4',
-  'star',
-  'star-2',
-  'triangle',
-  'triangle-2',
-  'triangle-3',
-  'triangle-4',
-]

package/components/Mask.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { makeMaskClasses, maskProps } from './Mask.config'
-
-const props = defineProps({
-  ...maskProps,
-})
-const classes = makeMaskClasses(props)
-</script>
-
-<template>
-  <div class="mask" :class="[classes]">
-    <slot />
-  </div>
-</template>

package/components/Menu.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { computed, provide } from 'vue'
-
-const props = defineProps<{
-  align?: 'vertical' | 'horizontal'
-  vertical?: boolean
-  horizontal?: boolean
-
-  size?: | 'lg' | 'md' | 'sm' | 'xs'
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>()
-
-provide('withinExpand', false)
-
-// `normal` and `compact` provide backwards compatibility with DaisyUI 2.x
-const classes = computed(() => {
-  return {
-    'menu-vertical': props.vertical || props.align === 'vertical',
-    'menu-horizontal': props.horizontal || props.align === 'horizontal',
-    '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',
-  }
-})
-</script>
-
-<template>
-  <ul class="menu" :class="classes">
-    <slot />
-  </ul>
-</template>

package/components/MenuExpand.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { onMounted, provide, ref } from 'vue'
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
-import { randomString } from '../utils/random-string'
-
-const props = withDefaults(defineProps<{
-  randomId?: string
-  hover?: boolean
-  delayEnter?: number
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>(), {
-  randomId: randomString(12),
-  position: 'bottom',
-  end: false,
-  hover: false,
-  delayEnter: 0,
-  delayLeave: 300,
-  closeOnClickOutside: false,
-})
-// "Expand" Visibility
-const isOpen = defineModel('open', { local: true, default: false, type: Boolean })
-provide('isExpandOpen', isOpen)
-
-// ids for accessibility
-const wrapperId = `expand-wrapper-${props.randomId}`
-const id = `expand-${props.randomId}`
-provide('expandId', id)
-
-// Visibility Utils
-function toggle() {
-  setTimeout(() => {
-    isOpen.value = !isOpen.value
-  }, 50)
-}
-function open() {
-  isOpen.value = true
-}
-function close() {
-  isOpen.value = false
-}
-provide('toggleExpand', toggle)
-provide('openExpand', open)
-provide('closeExpand', close)
-
-const expandEl = ref()
-
-onMounted(() => {
-  // Close when clicking outside the element
-  onClickOutside(expandEl, () => {
-    if (props.closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 500)
-    }
-  })
-
-  if (props.hover) {
-    // Sync with top-level isHovered ref. For SSR compatibility.
-    const hover = useElementHover(expandEl, {
-      delayLeave: props.delayLeave,
-      delayEnter: props.delayEnter,
-    })
-    syncRefs(hover, isOpen)
-  }
-})
-
-function handleClick(ev: MouseEvent) {
-  ev.preventDefault()
-  if (ev.target === expandEl.value.children[0])
-    isOpen.value = !isOpen.value
-}
-</script>
-
-<template>
-  <details :id="wrapperId" ref="expandEl" class="dropdown menu-expand" :open="isOpen" @click="handleClick">
-    <slot v-bind="{ toggle, open, close }" />
-  </details>
-</template>

package/components/MenuExpandToggle.vue

@@ -1,13 +0,0 @@
-<script setup>
-import { inject } from 'vue'
-
-const id = inject('expandId')
-const isOpen = inject('isExpandOpen')
-const toggle = inject('toggleExpand')
-</script>
-
-<template>
-  <summary :id="id" :aria-expanded="isOpen" aria-haspopup="menu" class="menu-expand-toggle" @click.prevent.stop="toggle">
-    <slot />
-  </summary>
-</template>

package/components/MenuItem.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  active?: boolean
-  disabled?: boolean
-}>()
-</script>
-
-<template>
-  <li class="menu-item" :class="{ active, 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.active > a, .menu-item.active > span {
-  background-color: hsl(var(--n) / var(--tw-bg-opacity));
-  color: hsl(var(--nc) / var(--tw-text-opacity));
-}
-.menu-item.disabled > a, .menu-item.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/components/MenuTitle.vue

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

package/components/MockupBrowser.vue

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

package/components/MockupBrowserToolbar.vue

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

package/components/MockupCode.vue

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

package/components/MockupPhone.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="mockup-phone">
-    <div class="camera" />
-    <div class="display">
-      <slot />
-    </div>
-  </div>
-</template>

package/components/MockupWindow.vue

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

package/components/Modal.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps<{
-  modelValue?: boolean
-  closeOnClickOutside?: boolean
-  top?: boolean
-  bottom?: boolean
-}>()
-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,
-    }"
-    @click.self="handleClick"
-  >
-    <slot />
-  </Component>
-</template>

package/components/ModalAction.vue

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

package/components/ModalBox.vue

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

package/components/NavButton.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  active?: boolean
-  disabled?: boolean
-}>()
-const classes = computed(() => {
-  return {
-    active: props.active,
-    disabled: props.disabled,
-  }
-})
-</script>
-
-<template>
-  <button class="nav-button" :class="classes">
-    <slot />
-  </button>
-</template>

package/components/Navbar.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string | Object | Function
-  glass?: boolean
-}>(), {
-  is: 'div',
-})
-</script>
-
-<template>
-  <component :is="is" class="navbar" :class="{ glass }">
-    <slot />
-  </component>
-</template>

package/components/NavbarCenter.vue

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

package/components/NavbarEnd.vue

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

package/components/NavbarStart.vue

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

package/components/Progress.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  value: any
-  max?: any
-
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-}>(), {
-  value: 0,
-  max: 100,
-})
-
-const classes = computed(() => {
-  const { color, primary, secondary, accent, success, info, warning, error } = props
-  return {
-    'progress-primary': primary || color === 'primary',
-    'progress-secondary': secondary || color === 'secondary',
-    'progress-accent': accent || color === 'accent',
-    'progress-success': success || color === 'success',
-    'progress-info': info || color === 'info',
-    'progress-warning': warning || color === 'warning',
-    'progress-error': error || color === 'error',
-  }
-})
-</script>
-
-<template>
-  <progress
-    :value="value"
-    :max="max"
-    class="progress"
-    :class="classes"
-  />
-</template>

package/components/Prose.vue

@@ -1,32 +0,0 @@
-<template>
-  <article class="prose daisy-prose max-w-none">
-    <slot />
-  </article>
-</template>
-
-<style lang="postcss">
-.prose.full-width {
-  width: 100%;
-  max-width: 100%;
-}
-.prose.daisy-prose code:not(pre code) {
-  @apply bg-base-300;
-}
-.prose .link-primary {
-  @apply text-primary;
-}
-.prose .link-secondary {
-  @apply text-secondary;
-}
-.prose .link-neutral {
-  @apply text-neutral;
-}
-.prose .link-accent {
-  @apply text-accent;
-}
-
-.prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
-  text-decoration: none;
-  @apply font-bold
-}
-</style>