daisy-ui-kit 5.0.3 → 5.0.4

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>

package/app/components/Progress.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-const {
-  value = 0,
-  max = 100,
-  color,
-  neutral,
-  primary,
-  secondary,
-  accent,
-  success,
-  info,
-  warning,
-  error,
-} = defineProps<{
-  value?: string | number
-  max?: string | number
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  info?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-</script>
-
-<template>
-  <progress
-    :value="value"
-    :max="max"
-    class="progress"
-    :class="{
-      'progress-neutral': neutral || color === 'neutral',
-      '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',
-    }"
-  />
-</template>

package/app/components/Prose.vue

@@ -1,37 +0,0 @@
-<template>
-  <article class="prose daisy-prose">
-    <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>

package/app/components/RadialProgress.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  value: number | string
-  size?: string
-  thickness?: string
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-}>()
-</script>
-
-<template>
-  <div
-    class="radial-progress"
-    :class="{
-      'text-neutral': neutral || color === 'neutral',
-      'text-primary': primary || color === 'primary',
-      'text-secondary': secondary || color === 'secondary',
-      'text-accent': accent || color === 'accent',
-      'text-info': info || color === 'info',
-      'text-success': success || color === 'success',
-      'text-warning': warning || color === 'warning',
-      'text-error': error || color === 'error',
-    }"
-    :style="`--value:${value}; --size:${size || '4rem'}; --thickness:${thickness || 'calc(var(--size) / 10)'};`"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/Radio.vue

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

package/app/components/RadioGroup.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, reactive } from 'vue'
-
-const props = defineProps<{
-  modelValue?: any
-  name: string
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  success?: boolean
-  warning?: boolean
-  info?: boolean
-  error?: boolean
-
-  size?: string
-  xs?: boolean
-  sm?: boolean
-  md?: boolean
-  lg?: boolean
-  xl?: boolean
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const currentValue = computed({
-  get: () => {
-    return props.modelValue
-  },
-  set: val => {
-    emit('update:modelValue', val)
-  },
-})
-
-const state = reactive({
-  currentValue,
-  props,
-})
-provide('radio-group', state)
-</script>
-
-<template>
-  <div class="radio-group">
-    <slot />
-  </div>
-</template>