daisy-ui-kit 5.0.0-pre.10 → 5.0.0-pre.11

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

@@ -8,36 +8,39 @@ 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
+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
+    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',
-})
+    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'])
 
@@ -49,7 +52,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 }
     }
@@ -76,7 +79,7 @@ const normalizedItems = computed(() => {
       :name="name"
       :aria-label="resetLabel"
       :value="null"
-    >
+    />
 
     <!-- Filter items -->
     <template v-for="(item, index) in normalizedItems" :key="index">
@@ -102,7 +105,7 @@ const normalizedItems = computed(() => {
         :name="name"
         :aria-label="item.label"
         :value="item.value"
-      >
+      />
     </template>
 
     <!-- Reset button at end -->
@@ -114,7 +117,7 @@ const normalizedItems = computed(() => {
       :name="name"
       :aria-label="resetLabel"
       :value="null"
-    >
+    />
 
     <!-- Optional slot for custom items -->
     <slot />

package/app/components/Flex.vue

@@ -44,7 +44,9 @@ const { is = 'div', ...props } = defineProps<{
 
 <template>
   <component
-    :is="is" class="flex" :class="{
+    :is="is"
+    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,9 +1,12 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  is?: string
-}>(), {
-  is: 'div',
-})
+withDefaults(
+  defineProps<{
+    is?: string
+  }>(),
+  {
+    is: 'div',
+  },
+)
 </script>
 
 <template>

package/app/components/IndicatorItem.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{
-  is?: string
+const props = withDefaults(
+  defineProps<{
+    is?: string
 
-  align?: 'start' | 'center' | 'end'
-  start?: boolean
-  center?: boolean
-  end?: boolean
+    align?: 'start' | 'center' | 'end'
+    start?: boolean
+    center?: boolean
+    end?: boolean
 
-  vAlign?: 'top' | 'middle' | 'bottom'
-  top?: boolean
-  middle?: boolean
-  bottom?: boolean
-}>(), {
-  is: 'div',
-})
+    vAlign?: 'top' | 'middle' | 'bottom'
+    top?: boolean
+    middle?: boolean
+    bottom?: boolean
+  }>(),
+  {
+    is: 'div',
+  },
+)
 const classes = computed(() => {
   return {
     'indicator-start': props.start || props.align === 'start',

package/app/components/Input.vue

@@ -1,36 +1,49 @@
 <script setup lang="ts">
-import { syncRef } from '@vueuse/core'
-import { computed, inject, ref } from 'vue'
+import { computed, inject } from 'vue'
 
 // Map input type to value type
 type InputType =
-  | 'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'
+  | 'text'
+  | 'password'
+  | 'email'
+  | 'number'
+  | 'date'
+  | 'datetime-local'
+  | 'week'
+  | 'month'
+  | 'tel'
+  | 'url'
+  | 'search'
+  | 'time'
 
-const props = withDefaults(defineProps<{
-  modelValue?: string | number | null
-  type?: InputType
-  placeholder?: string
-  disabled?: boolean
-  validator?: boolean
-  join?: boolean
-  color?: string
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  ghost?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  type: 'text',
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | null
+    type?: InputType
+    placeholder?: string
+    disabled?: boolean
+    validator?: boolean
+    join?: boolean
+    color?: string
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+    ghost?: boolean
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    type: 'text',
+  },
+)
 const emit = defineEmits(['update:modelValue'])
 
 // For slot context
@@ -45,18 +58,17 @@ function handleInput(event: Event) {
   if (props.type === 'number') {
     const inputVal = (event.target as HTMLInputElement).value
     val = inputVal === '' ? null : Number(inputVal)
-  }
-  else {
+  } else {
     val = (event.target as HTMLInputElement).value
   }
   emit('update:modelValue', val)
 
   // Sync checked only on input if it's a checkbox
   if (
-    props.type === 'checkbox'
-    && labelCtx
-    && Object.prototype.hasOwnProperty.call(labelCtx, 'checked')
-    && typeof labelCtx.checked.value === 'boolean'
+    props.type === 'checkbox' &&
+    labelCtx &&
+    Object.prototype.hasOwnProperty.call(labelCtx, 'checked') &&
+    typeof labelCtx.checked.value === 'boolean'
   ) {
     labelCtx.checked.value = Boolean(event.target.checked)
   }
@@ -110,10 +122,5 @@ const inputModel = computed({
       :input-model="inputModel"
     />
   </div>
-  <input
-    v-else
-    v-bind="inputAttrs"
-    :value="inputModel"
-    @input="handleInput"
-  >
+  <input v-else v-bind="inputAttrs" :value="inputModel" @input="handleInput" />
 </template>

package/app/components/Kbd.vue

@@ -11,7 +11,8 @@ defineProps<{
 
 <template>
   <kbd
-    class="kbd" :class="{
+    class="kbd"
+    :class="{
       'kbd-xl': xl || size === 'xl',
       'kbd-lg': lg || size === 'lg',
       'kbd-md': md || size === 'md',

package/app/components/Label.vue

@@ -2,34 +2,37 @@
 import { provide, ref } from 'vue'
 import Text from './Text.vue'
 
-withDefaults(defineProps<{
-  is?: string
-  floating?: boolean
+withDefaults(
+  defineProps<{
+    is?: string
+    floating?: boolean
 
-  input?: boolean
-  select?: boolean
-  toggle?: boolean
+    input?: boolean
+    select?: boolean
+    toggle?: boolean
 
-  join?: boolean
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-  ghost?: boolean
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  is: 'label',
-})
+    join?: boolean
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+    ghost?: boolean
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    is: 'label',
+  },
+)
 
 // Provide label context for child inputs
 const checked = ref(false)
@@ -41,9 +44,9 @@ provide('labelCtx', { checked })
     :is="is"
     :class="[
       {
-        'input': input,
-        'select': select,
-        'toggle': toggle,
+        input,
+        select,
+        toggle,
         'join-item': (input || select || toggle) && join,
         'input-neutral': input && (neutral || color === 'neutral'),
         'input-primary': input && (primary || color === 'primary'),

package/app/components/MenuExpand.vue

@@ -88,13 +88,7 @@ function handleClick(_ev: MouseEvent) {}
 </script>
 
 <template>
-  <details
-    :id="wrapperId"
-    ref="expandEl"
-    class="dropdown menu-expand"
-    :open="isOpen"
-    @click="handleClick"
-  >
+  <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

@@ -8,7 +8,13 @@ const { id, isOpen, toggle } = menuExpandState || {}
 </script>
 
 <template>
-  <summary :id="id" :aria-expanded="isOpen" aria-haspopup="menu" class="menu-expand-toggle" @click.prevent.stop="toggle">
+  <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

@@ -15,12 +15,14 @@ defineProps<{
   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 {
+.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)
+.menu-item.menu-disabled > a,
+.menu-item.menu-disabled > span {
+  background-color: var(--n);
 }
 
 /* Fix padding when putting a Dropdown inside of a menu */
@@ -32,6 +34,6 @@ defineProps<{
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem
+  padding-bottom: 0.5rem;
 }
 </style>