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

package/app/components/DropdownTarget.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { inject } from 'vue'
+
+const id = inject('dropdownId')
+const isOpen = inject('isDropdownOpen')
+const buttonEl = inject('buttonEl')
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="buttonEl"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :popovertarget="`${id}-content`"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="dropdown-target"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Fab.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  flower?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="fab"
+    :class="{
+      'fab-flower': flower,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/FabClose.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+function handleMouseDown(event: MouseEvent) {
+  event.preventDefault()
+  const fab = (event.currentTarget as HTMLElement)?.closest('.fab')
+  if (fab instanceof HTMLElement) {
+    fab.blur()
+  }
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur()
+  }
+}
+</script>
+
+<template>
+  <div class="fab-close" @mousedown="handleMouseDown">
+    <slot />
+  </div>
+</template>

package/app/components/FabMainAction.vue

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

package/app/components/FabTrigger.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    btn?: boolean
+    join?: boolean
+    close?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    ghost?: boolean
+    link?: boolean
+    glass?: boolean
+    outline?: boolean
+    dash?: boolean
+    soft?: boolean
+
+    shape?: 'circle' | 'square' | 'wide' | 'block'
+    circle?: boolean
+    square?: boolean
+    wide?: boolean
+    block?: boolean
+
+    noAnimation?: boolean
+    active?: boolean
+
+    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    btn: true,
+  },
+)
+
+function handleMouseDown(event: MouseEvent) {
+  if (!props.close) return
+  const fab = (event.currentTarget as HTMLElement)?.closest('.fab')
+  // Only close if FAB is already open (has focus within)
+  if (fab instanceof HTMLElement && fab.matches(':focus-within')) {
+    event.preventDefault()
+    fab.blur()
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    tabindex="0"
+    role="button"
+    v-bind="$attrs"
+    :class="{
+      btn,
+      'join-item': join,
+
+      'btn-neutral': neutral || color === 'neutral',
+      'btn-primary': primary || color === 'primary',
+      'btn-secondary': secondary || color === 'secondary',
+      'btn-accent': accent || color === 'accent',
+      'btn-info': info || color === 'info',
+      'btn-success': success || color === 'success',
+      'btn-warning': warning || color === 'warning',
+      'btn-error': error || color === 'error',
+
+      'text-primary': (primary || color === 'primary') && link,
+      'text-secondary': (secondary || color === 'secondary') && link,
+      'text-neutral': (neutral || color === 'neutral') && link,
+      'text-accent': (accent || color === 'accent') && link,
+      'text-info': (info || color === 'info') && link,
+      'text-success': (success || color === 'success') && link,
+      'text-warning': (warning || color === 'warning') && link,
+      'text-error': (error || color === 'error') && link,
+
+      glass,
+
+      'btn-circle': circle || shape === 'circle',
+      'btn-square': square || shape === 'square',
+      'btn-wide': wide || shape === 'wide',
+      'btn-block': block || shape === 'block',
+
+      'btn-xl': xl || size === 'xl',
+      'btn-lg': lg || size === 'lg',
+      'btn-md': md || size === 'md',
+      'btn-sm': sm || size === 'sm',
+      'btn-xs': xs || size === 'xs',
+
+      'btn-outline': outline,
+      'btn-dash': dash,
+      'btn-ghost': ghost,
+      'btn-soft': soft,
+      'btn-link': link,
+
+      'no-animation': noAnimation,
+      'btn-active': active,
+    }"
+    @mousedown="handleMouseDown"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Fieldset.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { is = 'fieldset', legend } = defineProps<{
+  is?: string
+  legend?: string
+}>()
+</script>
+
+<template>
+  <component :is="is" v-bind="$attrs" class="fieldset bg-base-200 border-base-300 rounded-box border p-4">
+    <legend v-if="legend" class="fieldset-legend">
+      {{ legend }}
+    </legend>
+    <slot v-else name="legend" />
+    <slot />
+  </component>
+</template>

package/app/components/FileInput.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineProps<{
+  join?: boolean
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  ghost?: boolean
+  disabled?: boolean
+
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+defineEmits(['files'])
+</script>
+
+<template>
+  <input
+    type="file"
+    :disabled="disabled"
+    class="file-input"
+    :class="{
+      'join-item': join,
+
+      'file-input-primary': primary || color === 'primary',
+      'file-input-secondary': secondary || color === 'secondary',
+      'file-input-accent': accent || color === 'accent',
+      'file-input-info': info || color === 'info',
+      'file-input-success': success || color === 'success',
+      'file-input-warning': warning || color === 'warning',
+      'file-input-error': error || color === 'error',
+
+      'file-input-xl': xl || size === 'xl',
+      'file-input-lg': lg || size === 'lg',
+      'file-input-md': md || size === 'md',
+      'file-input-sm': sm || size === 'sm',
+      'file-input-xs': xs || size === 'xs',
+
+      'file-input-ghost': ghost,
+    }"
+    @input="$emit('files', ($event.target as any).value)"
+  />
+</template>

package/app/components/Filter.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    name: string
+    items: FilterItemInput[]
+    modelValue?: any
+    resetLabel?: string
+    position?: 'start' | 'end'
+    start?: boolean
+    end?: boolean
+
+    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
+  }>(),
+  {
+    resetLabel: 'All',
+    is: 'div',
+  },
+)
+
+const emit = defineEmits(['update:modelValue'])
+
+interface FilterItem {
+  label: string
+  value: any
+}
+
+type FilterItemInput = string | FilterItem
+
+const currentValue = computed({
+  get: () => props.modelValue,
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const normalizedItems = computed(() => {
+  return props.items.map(item => {
+    if (typeof item === 'string') {
+      return { label: item, value: item }
+    }
+    return item
+  })
+})
+</script>
+
+<template>
+  <component :is="props.is" v-bind="$attrs" class="filter">
+    <!-- Reset button at start -->
+    <input
+      v-if="resetLabel && (start || position === 'start')"
+      v-model="currentValue"
+      class="btn filter-reset"
+      type="radio"
+      :class="{
+        'btn-xl': size === 'xl' || xl,
+        'btn-lg': size === 'lg' || lg,
+        'btn-md': size === 'md' || md,
+        'btn-sm': size === 'sm' || sm,
+        'btn-xs': size === 'xs' || xs,
+      }"
+      :name="name"
+      :aria-label="resetLabel"
+      :value="null"
+    />
+
+    <!-- Filter items -->
+    <template v-for="(item, index) in normalizedItems" :key="index">
+      <input
+        v-model="currentValue"
+        class="btn"
+        :class="{
+          'btn-neutral': color === 'neutral' || neutral,
+          'btn-primary': color === 'primary' || primary,
+          'btn-secondary': color === 'secondary' || secondary,
+          'btn-accent': color === 'accent' || accent,
+          'btn-info': color === 'info' || info,
+          'btn-success': color === 'success' || success,
+          'btn-warning': color === 'warning' || warning,
+          'btn-error': color === 'error' || error,
+          'btn-xl': size === 'xl' || xl,
+          'btn-lg': size === 'lg' || lg,
+          'btn-md': size === 'md' || md,
+          'btn-sm': size === 'sm' || sm,
+          'btn-xs': size === 'xs' || xs,
+        }"
+        type="radio"
+        :name="name"
+        :aria-label="item.label"
+        :value="item.value"
+      />
+    </template>
+
+    <!-- Reset button at end -->
+    <input
+      v-if="resetLabel && (end || position === 'end')"
+      v-model="currentValue"
+      class="btn filter-reset"
+      type="radio"
+      :name="name"
+      :aria-label="resetLabel"
+      :value="null"
+    />
+
+    <!-- Optional slot for custom items -->
+    <slot />
+  </component>
+</template>

package/app/components/Flex.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { is = 'div', ...props } = defineProps<{
+  is?: string | object
+  join?: boolean
+
+  // https://tailwindcss.com/docs/flex
+  flex?: boolean
+  flex1?: boolean
+  flexAuto?: boolean
+  flexInitial?: boolean
+  none?: boolean
+
+  // justify
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
+  justifyStart?: boolean
+  justifyEnd?: boolean
+  justifyCenter?: boolean
+  justifyBetween?: boolean
+  justifyAround?: boolean
+  justifyEvenly?: boolean
+
+  // align
+  items?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
+  itemsStart?: boolean
+  itemsEnd?: boolean
+  itemsCenter?: boolean
+  itemsBaseline?: boolean
+  itemsStretch?: 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
+}>()
+</script>
+
+<template>
+  <component
+    :is="is"
+    v-bind="$attrs"
+    class="flex"
+    :class="{
+      'join-item': props.join,
+
+      'flex-1': props.flex1,
+      'flex-auto': props.flexAuto,
+      'flex-initial': props.flexInitial,
+      'flex-none': props.none,
+
+      'justify-start': props.justifyStart,
+      'justify-end': props.justifyEnd,
+      'justify-center': props.justifyCenter,
+      'justify-between': props.justifyBetween,
+      'justify-around': props.justifyAround,
+      'justify-evenly': props.justifyEvenly,
+
+      'items-start': props.itemsStart,
+      'items-end': props.itemsEnd,
+      'items-center': props.itemsCenter,
+      'items-baseline': props.itemsBaseline,
+      'items-stretch': props.itemsStretch,
+
+      '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,
+    }"
+  >
+    <slot />
+  </component>
+</template>

package/app/components/FlexItem.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    is?: any
+    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/app/components/Footer.vue

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

package/app/components/FooterTitle.vue

@@ -0,0 +1,18 @@
+<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/app/components/FormControl.vue

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

package/app/components/Hero.vue

@@ -0,0 +1,18 @@
+<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/app/components/HeroContent.vue

@@ -0,0 +1,18 @@
+<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/app/components/HeroOverlay.vue

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

package/app/components/Hover3D.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps<{
+  is?: any
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <component :is="props.is || 'div'" :class="{ 'hover-3d': !props.disabled }">
+    <slot />
+    <template v-if="!props.disabled">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </template>
+  </component>
+</template>

package/app/components/HoverGallery.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  is?: any
+}>()
+</script>
+
+<template>
+  <component :is="props.is || 'figure'" class="hover-gallery">
+    <slot />
+  </component>
+</template>