daisy-ui-kit 5.0.10 → 5.0.11

package/app/components/Flex.vue

@@ -1,89 +1,87 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-const { is = 'div', ...props } = defineProps<{
-  is?: string | object
-  join?: boolean
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    is: { type: [String, Object], default: 'div' },
+    join: Boolean,
 
-  // https://tailwindcss.com/docs/flex
-  flex?: boolean
-  flex1?: boolean
-  flexAuto?: boolean
-  flexInitial?: boolean
-  none?: 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
+    // justify
+    justify: String as () => '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
+    // align
+    items: String as () => 'start' | 'end' | 'center' | 'baseline' | 'stretch',
+    itemsStart: Boolean,
+    itemsEnd: Boolean,
+    itemsCenter: Boolean,
+    itemsBaseline: Boolean,
+    itemsStretch: Boolean,
 
-  grow?: 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-direction
+    direction: String as () => '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>
+    // https://tailwindcss.com/docs/flex-wrap
+    wrap: Boolean,
+    nowrap: Boolean,
+    wrapReverse: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => [
+      'flex',
+      {
+        'join-item': props.join,
 
-<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,
 
-      '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,
 
-      '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,
 
-      '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-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-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,
+      },
+    ])
 
-      'flex-wrap': props.wrap,
-      'flex-wrap-reverse': props.wrapReverse,
-      'flex-nowrap': props.nowrap,
-    }"
-  >
-    <slot />
-  </component>
-</template>
+    return () => h(props.is as any, { ...attrs, class: classes.value }, slots.default?.())
+  },
+})
+</script>

package/app/components/FlexItem.vue

@@ -1,62 +1,56 @@
-<script setup lang="ts">
-import { computed } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    is?: any
-    join?: boolean
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'div' },
+    join: Boolean,
 
     // https://tailwindcss.com/docs/flex
-    flex?: boolean
-    flex1?: boolean
-    flexAuto?: boolean
-    flexInitial?: boolean
-    none?: boolean
+    flex: { type: Boolean, default: false },
+    flex1: Boolean,
+    flexAuto: Boolean,
+    flexInitial: Boolean,
+    none: Boolean,
 
-    grow?: boolean
+    grow: Boolean,
 
     // https://tailwindcss.com/docs/flex-direction
-    direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
-    row?: boolean
-    col?: boolean
-    reverse?: boolean
+    direction: String as () => '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,
+    wrap: Boolean,
+    nowrap: Boolean,
+    wrapReverse: Boolean,
+  },
+  setup(props, { slots }) {
+    const classes = computed(() => [
+      'flex',
+      {
+        '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,
+      },
+    ])
+
+    return () => h(props.is as any, { class: classes.value }, slots.default?.())
   },
-)
-
-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/Indicator.vue

@@ -1,20 +1,13 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-withDefaults(
-  defineProps<{
-    is?: string
-  }>(),
-  {
-    is: 'div',
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    is: { type: [String, Object], default: 'div' },
   },
-)
+  setup(props, { slots, attrs }) {
+    return () => h(props.is as any, { ...attrs, class: 'indicator' }, slots.default?.())
+  },
+})
 </script>
-
-<template>
-  <component :is="is" v-bind="$attrs" class="indicator">
-    <slot />
-  </component>
-</template>

package/app/components/IndicatorItem.vue

@@ -1,43 +1,36 @@
-<script setup lang="ts">
-import { computed } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
 
-defineOptions({
+export default defineComponent({
   inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<{
-    is?: string
+  props: {
+    is: { type: [String, Object], default: 'div' },
 
-    align?: 'start' | 'center' | 'end'
-    start?: boolean
-    center?: boolean
-    end?: boolean
+    align: String as () => 'start' | 'center' | 'end',
+    start: Boolean,
+    center: Boolean,
+    end: Boolean,
 
-    vAlign?: 'top' | 'middle' | 'bottom'
-    top?: boolean
-    middle?: boolean
-    bottom?: boolean
-  }>(),
-  {
-    is: 'div',
+    vAlign: String as () => 'top' | 'middle' | 'bottom',
+    top: Boolean,
+    middle: Boolean,
+    bottom: Boolean,
   },
-)
-const classes = computed(() => {
-  return {
-    'indicator-start': props.start || props.align === 'start',
-    'indicator-center': props.center || props.align === 'center',
-    'indicator-end': props.end || props.align === 'end',
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => [
+      'indicator-item',
+      {
+        'indicator-start': props.start || props.align === 'start',
+        'indicator-center': props.center || props.align === 'center',
+        'indicator-end': props.end || props.align === 'end',
+
+        'indicator-top': props.top || props.vAlign === 'top',
+        'indicator-middle': props.middle || props.vAlign === 'middle',
+        'indicator-bottom': props.bottom || props.vAlign === 'bottom',
+      },
+    ])
 
-    'indicator-top': props.top || props.vAlign === 'top',
-    'indicator-middle': props.middle || props.vAlign === 'middle',
-    'indicator-bottom': props.bottom || props.vAlign === 'bottom',
-  }
+    return () => h(props.is as any, { ...attrs, class: classes.value }, slots.default?.())
+  },
 })
 </script>
-
-<template>
-  <component :is="is" v-bind="$attrs" class="indicator-item" :class="classes">
-    <slot />
-  </component>
-</template>

package/app/components/Navbar.vue

@@ -1,12 +1,13 @@
-<script setup lang="ts">
-const { is = 'div', glass = false } = defineProps<{
-  is?: any
-  glass?: boolean
-}>()
-</script>
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-<template>
-  <component :is="is" class="navbar" :class="{ glass }">
-    <slot />
-  </component>
-</template>
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'div' },
+    glass: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    return () => h(props.is as any, { class: ['navbar', { glass: props.glass }] }, slots.default?.())
+  },
+})
+</script>

package/app/components/NavbarCenter.vue

@@ -1,11 +1,12 @@
-<script setup lang="ts">
-const { is = 'div' } = defineProps<{
-  is?: any
-}>()
-</script>
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-<template>
-  <component :is="is" class="navbar-center">
-    <slot />
-  </component>
-</template>
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'div' },
+  },
+  setup(props, { slots }) {
+    return () => h(props.is as any, { class: 'navbar-center' }, slots.default?.())
+  },
+})
+</script>

package/app/components/NavbarEnd.vue

@@ -1,11 +1,12 @@
-<script setup lang="ts">
-const { is = 'div' } = defineProps<{
-  is?: any
-}>()
-</script>
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-<template>
-  <component :is="is" class="navbar-end">
-    <slot />
-  </component>
-</template>
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'div' },
+  },
+  setup(props, { slots }) {
+    return () => h(props.is as any, { class: 'navbar-end' }, slots.default?.())
+  },
+})
+</script>

package/app/components/NavbarStart.vue

@@ -1,11 +1,12 @@
-<script setup lang="ts">
-const { is = 'div' } = defineProps<{
-  is?: any
-}>()
-</script>
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-<template>
-  <component :is="is" class="navbar-start">
-    <slot />
-  </component>
-</template>
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'div' },
+  },
+  setup(props, { slots }) {
+    return () => h(props.is as any, { class: 'navbar-start' }, slots.default?.())
+  },
+})
+</script>

package/app/components/SkeletonText.vue

@@ -1,11 +1,12 @@
-<script setup lang="ts">
-const props = defineProps<{
-  is?: any
-}>()
-</script>
+<script lang="ts">
+import { defineComponent, h } from 'vue'
 
-<template>
-  <component :is="props.is || 'span'" class="skeleton skeleton-text">
-    <slot />
-  </component>
-</template>
+export default defineComponent({
+  props: {
+    is: { type: [String, Object], default: 'span' },
+  },
+  setup(props, { slots }) {
+    return () => h(props.is as any, { class: 'skeleton skeleton-text' }, slots.default?.())
+  },
+})
+</script>

package/app/components/Stack.vue

@@ -1,30 +1,28 @@
-<script setup lang="ts">
-defineOptions({
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
+
+export default defineComponent({
   inheritAttrs: false,
-})
+  props: {
+    is: { type: [String, Object], default: 'div' },
+    direction: String as () => 'top' | 'end' | 'bottom' | 'start',
+    top: Boolean,
+    end: Boolean,
+    bottom: Boolean,
+    start: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => [
+      'stack',
+      {
+        'stack-top': props.top || props.direction === 'top',
+        'stack-end': props.end || props.direction === 'end',
+        'stack-bottom': props.bottom || props.direction === 'bottom',
+        'stack-start': props.start || props.direction === 'start',
+      },
+    ])
 
-const { is = 'div' } = defineProps<{
-  is?: string
-  direction?: 'top' | 'end' | 'bottom' | 'start'
-  top?: boolean
-  end?: boolean
-  bottom?: boolean
-  start?: boolean
-}>()
+    return () => h(props.is as any, { ...attrs, class: classes.value }, slots.default?.())
+  },
+})
 </script>
-
-<template>
-  <component
-    :is="is"
-    v-bind="$attrs"
-    class="stack"
-    :class="{
-      'stack-top': top || direction === 'top',
-      'stack-end': end || direction === 'end',
-      'stack-bottom': bottom || direction === 'bottom',
-      'stack-start': start || direction === 'start',
-    }"
-  >
-    <slot />
-  </component>
-</template>

package/app/components/Tab.vue

@@ -1,52 +1,53 @@
-<script setup lang="ts">
-import { computed, inject, resolveDynamicComponent } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, h, inject } from 'vue'
 
-defineOptions({
+export default defineComponent({
   inheritAttrs: false,
-})
+  props: {
+    is: { type: [String, Object], default: 'label' },
+    name: String,
+    active: Boolean,
+    disabled: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const tabManager: any = inject('tabManager')
+    if (!tabManager.currentTab.value) {
+      tabManager.currentTab.value = props.name
+    }
 
-const {
-  is = 'label',
-  name,
-  ...props
-} = defineProps<{
-  is?: string
-  name?: string
-  active?: boolean
-  disabled?: boolean
-}>()
+    const classes = computed(() => [
+      'tab',
+      {
+        'tab-active': props.active || tabManager.currentTab.value === props.name,
+        'tab-disabled': props.disabled,
+      },
+    ])
 
-const resolvedComponent = computed(() => {
-  if (is === 'label') return 'label'
-  return resolveDynamicComponent(is)
+    return () =>
+      h(
+        props.is as any,
+        {
+          ...attrs,
+          class: classes.value,
+          onKeypress: (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+              tabManager.currentTab.value = props.name
+            }
+          },
+        },
+        [
+          h('input', {
+            type: 'radio',
+            name: tabManager.name,
+            value: props.name,
+            checked: tabManager.currentTab.value === props.name,
+            onChange: () => {
+              tabManager.currentTab.value = props.name
+            },
+          }),
+          ...(slots.default ? slots.default() : [h('span', props.name)]),
+        ],
+      )
+  },
 })
-
-const tabManager: any = inject('tabManager')
-if (!tabManager.currentTab.value) {
-  tabManager.currentTab.value = name
-}
 </script>
-
-<template>
-  <component
-    :is="resolvedComponent"
-    v-bind="$attrs"
-    class="tab"
-    :class="{
-      'tab-active': props.active || tabManager.currentTab.value === name,
-      'tab-disabled': props.disabled,
-    }"
-    @keypress.enter="() => (tabManager.currentTab.value = name)"
-  >
-    <input
-      type="radio"
-      :name="tabManager.name"
-      :value="name"
-      :checked="tabManager.currentTab.value === name"
-      @change="() => (tabManager.currentTab.value = name)"
-    />
-
-    <slot v-if="$slots.default" />
-    <span v-else>{{ name }}</span>
-  </component>
-</template>