daisy-ui-kit 5.0.0-pre.8 → 5.0.0

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'fieldset', legend } = defineProps<{
   is?: string
   legend?: string
@@ -6,10 +10,7 @@ const { is = 'fieldset', legend } = defineProps<{
 </script>
 
 <template>
-  <component
-    :is="is"
-    class="fieldset bg-base-200 border-base-300 rounded-box border p-4"
-  >
+  <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>

package/app/components/FileInput.vue

@@ -49,5 +49,5 @@ defineEmits(['files'])
       'file-input-ghost': ghost,
     }"
     @input="$emit('files', ($event.target as any).value)"
-  >
+  />
 </template>

package/app/components/Filter.vue

@@ -1,6 +1,46 @@
 <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
@@ -8,39 +48,6 @@ interface FilterItem {
 
 type FilterItemInput = string | FilterItem
 
-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'])
-
 const currentValue = computed({
   get: () => props.modelValue,
   set(val) {
@@ -49,7 +56,7 @@ const currentValue = computed({
 })
 
 const normalizedItems = computed(() => {
-  return props.items.map((item) => {
+  return props.items.map(item => {
     if (typeof item === 'string') {
       return { label: item, value: item }
     }
@@ -59,7 +66,7 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <component :is="props.is" class="filter">
+  <component :is="props.is" v-bind="$attrs" class="filter">
     <!-- Reset button at start -->
     <input
       v-if="resetLabel && (start || position === 'start')"
@@ -76,7 +83,7 @@ const normalizedItems = computed(() => {
       :name="name"
       :aria-label="resetLabel"
       :value="null"
-    >
+    />
 
     <!-- Filter items -->
     <template v-for="(item, index) in normalizedItems" :key="index">
@@ -102,7 +109,7 @@ const normalizedItems = computed(() => {
         :name="name"
         :aria-label="item.label"
         :value="item.value"
-      >
+      />
     </template>
 
     <!-- Reset button at end -->
@@ -114,7 +121,7 @@ const normalizedItems = computed(() => {
       :name="name"
       :aria-label="resetLabel"
       :value="null"
-    >
+    />
 
     <!-- Optional slot for custom items -->
     <slot />

package/app/components/Flex.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'div', ...props } = defineProps<{
   is?: string | object
   join?: boolean
@@ -44,7 +48,10 @@ const { is = 'div', ...props } = defineProps<{
 
 <template>
   <component
-    :is="is" class="flex" :class="{
+    :is="is"
+    v-bind="$attrs"
+    class="flex"
+    :class="{
       'join-item': props.join,
 
       'flex-1': props.flex1,

package/app/components/FlexItem.vue

@@ -1,33 +1,36 @@
 <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 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 {

package/app/components/Footer.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
-const props = withDefaults(defineProps<{
-  center?: boolean
-  is?: string
-  orientation?: 'horizontal' | 'vertical'
-  horizontal?: boolean
-  vertical?: boolean
-}>(), {
-  center: false,
-  is: 'footer',
-})
+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"
+    :is="is"
+    class="footer"
     :class="{
       'divider-center': props.center,
       'divider-horizontal': props.horizontal || props.orientation === 'horizontal',

package/app/components/FooterTitle.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import Text from './Text.vue'
 
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'span',
-})
+withDefaults(
+  defineProps<{
+    is?: string
+  }>(),
+  {
+    is: 'span',
+  },
+)
 </script>
 
 <template>

package/app/components/Hero.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
-})
+withDefaults(
+  defineProps<{
+    is?: string
+  }>(),
+  {
+    is: 'div',
+  },
+)
 </script>
 
 <template>

package/app/components/HeroContent.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import Text from './Text.vue';
+import Text from './Text.vue'
 
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
-})
+withDefaults(
+  defineProps<{
+    is?: string
+  }>(),
+  {
+    is: 'div',
+  },
+)
 </script>
 
 <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>

package/app/components/Indicator.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
+defineOptions({
+  inheritAttrs: false,
 })
+
+withDefaults(
+  defineProps<{
+    is?: string
+  }>(),
+  {
+    is: 'div',
+  },
+)
 </script>
 
 <template>
-  <component :is="is" class="indicator">
+  <component :is="is" v-bind="$attrs" class="indicator">
     <slot />
   </component>
 </template>

package/app/components/IndicatorItem.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  is?: string
+defineOptions({
+  inheritAttrs: false,
+})
 
-  align?: 'start' | 'center' | 'end'
-  start?: boolean
-  center?: boolean
-  end?: boolean
+const props = withDefaults(
+  defineProps<{
+    is?: string
 
-  vAlign?: 'top' | 'middle' | 'bottom'
-  top?: boolean
-  middle?: boolean
-  bottom?: boolean
-}>(), {
-  is: 'div',
-})
+    align?: 'start' | 'center' | 'end'
+    start?: boolean
+    center?: boolean
+    end?: boolean
+
+    vAlign?: 'top' | 'middle' | 'bottom'
+    top?: boolean
+    middle?: boolean
+    bottom?: boolean
+  }>(),
+  {
+    is: 'div',
+  },
+)
 const classes = computed(() => {
   return {
     'indicator-start': props.start || props.align === 'start',
@@ -30,7 +37,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <component :is="is" class="indicator-item" :class="classes">
+  <component :is="is" v-bind="$attrs" class="indicator-item" :class="classes">
     <slot />
   </component>
 </template>