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

package/app/components/Dock.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref, provide } from 'vue'
+import type { Ref } from 'vue'
+import { randomString } from '../utils/random-string'
+
+const { size, xl, lg, md, sm, xs } = defineProps<{
+  size?: string
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const activeItemId = ref<string | null>(null)
+const itemIds = ref<string[]>([])
+
+function registerItem() {
+  const itemId = randomString()
+  itemIds.value.push(itemId)
+  function unregister() {
+    itemIds.value = itemIds.value.filter(id => id !== itemId)
+    if (activeItemId.value === itemId) {
+      activeItemId.value = null
+    }
+  }
+  return { id: itemId, unregister }
+}
+
+function setActiveItemId(itemId: string) {
+  activeItemId.value = itemId
+}
+
+export interface DockState {
+  activeItemId: Ref<string | null>
+  registerItem: () => { id: string; unregister: () => void }
+  setActiveItemId: (itemId: string) => void
+}
+
+provide<DockState>('dockState', {
+  activeItemId,
+  registerItem,
+  setActiveItemId,
+})
+</script>
+
+<template>
+  <div
+    class="dock"
+    :class="{
+      'dock-xl': xl || size === 'xl',
+      'dock-lg': lg || size === 'lg',
+      'dock-md': md || size === 'md',
+      'dock-sm': sm || size === 'sm',
+      'dock-xs': xs || size === 'xs',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/DockItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { inject, onUnmounted } from 'vue'
+import type { DockState } from './Dock.vue'
+
+const { active } = defineProps<{
+  active?: boolean
+}>()
+
+const { registerItem, setActiveItemId, activeItemId } = inject<DockState>('dockState')!
+const { id: itemId, unregister } = registerItem()
+
+onUnmounted(() => {
+  unregister()
+})
+</script>
+
+<template>
+  <div
+    :id="`dock-item-${itemId}`"
+    class="dock-item"
+    :class="{ 'dock-active': active || activeItemId === itemId }"
+    @click="setActiveItemId(itemId)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/DockLabel.vue

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

package/{components → app/components}/Drawer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
-import { createDrawerState } from '../utils/drawer-utils'
+import { computed, watch } from 'vue';
+import { createDrawerState } from '../utils/drawer-utils';
 
 const props = withDefaults(defineProps<{
   open?: boolean
@@ -16,16 +16,18 @@ const drawerState = createDrawerState(props.name)
 watch(
   () => props.open,
   (value) => {
-    if (drawerState.isDrawerOpen !== value)
+    if (drawerState.isDrawerOpen !== value) {
       drawerState.isDrawerOpen = value
+    }
   },
   { immediate: true },
 )
 watch(
   () => drawerState.isDrawerOpen,
   (value) => {
-    if (props.open !== value)
+    if (props.open !== value) {
       emit('update:open', value)
+    }
   },
   { immediate: true },
 )

package/{components → app/components}/DrawerContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils'
+import { createDrawerState } from '../utils/drawer-utils';
 
 const props = withDefaults(defineProps<{
   name?: string

package/{components → app/components}/DrawerSide.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createDrawerState } from '../utils/drawer-utils'
+import { createDrawerState } from '../utils/drawer-utils';
 
 const props = withDefaults(defineProps<{
   name?: string

package/{components → app/components}/Dropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, provide, reactive, ref } from 'vue'
 import { autoUpdate, useFloating } from '@floating-ui/vue'
 import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
+import { onMounted, provide, reactive, ref } from 'vue'
 import { randomString } from '../utils/random-string'
 
 const props = withDefaults(defineProps<{
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<{
   closeOnClickOutside: true,
 })
 // Dropdown Visibility
-const isOpen = defineModel('open', { local: true })
+const isOpen = defineModel('open')
 provide('isDropdownOpen', isOpen)
 
 const autoFocus = ref(props.autoFocus)

package/{components → app/components}/DropdownContent.vue

@@ -24,8 +24,9 @@ if (autoFocus.value) {
 
   // hide the dropdown when the focus-trap drops focus (by pressing escape, for example)
   watchEffect(() => {
-    if (!hasFocus.value)
+    if (!hasFocus.value) {
       close()
+    }
   })
 }
 // const { activate, deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
@@ -38,8 +39,7 @@ watchEffect(async () => {
       await nextTick()
       activate()
     }
-  }
-  else {
+  } else {
     if (autoFocus.value) {
       deactivate()
       await nextTick()

package/app/components/Fieldset.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { is = 'fieldset', legend } = defineProps<{
+  is?: string
+  legend?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="is"
+    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,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface FilterItem {
+  label: string
+  value: any
+}
+
+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) {
+    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" 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,82 @@
+<script setup lang="ts">
+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" 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/{components → app/components}/FlexItem.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
-  is?: string | Object | Function
+  is?: any
   join?: boolean
 
   // https://tailwindcss.com/docs/flex

package/app/components/Footer.vue

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

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

package/{components → app/components}/Hero.vue

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

package/{components → app/components}/HeroContent.vue

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

package/app/components/Input.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { syncRef } from '@vueuse/core'
+import { computed, inject, ref } from 'vue'
+
+// Map input type to value type
+type InputType =
+  | '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 emit = defineEmits(['update:modelValue'])
+
+// For slot context
+function setValue(val: string | number | null) {
+  emit('update:modelValue', val)
+}
+
+const labelCtx = inject('labelCtx')
+
+function handleInput(event: Event) {
+  let val: string | number | null
+  if (props.type === 'number') {
+    const inputVal = (event.target as HTMLInputElement).value
+    val = inputVal === '' ? null : Number(inputVal)
+  }
+  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'
+  ) {
+    labelCtx.checked.value = Boolean(event.target.checked)
+  }
+}
+
+const inputAttrs = computed(() => {
+  if (labelCtx) {
+    return {
+      type: props.type,
+      placeholder: props.placeholder,
+      disabled: props.disabled,
+    }
+  }
+  return {
+    type: props.type,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    class: [
+      'input',
+      { validator: props.validator },
+      { 'input-primary': props.primary || props.color === 'primary' },
+      { 'input-secondary': props.secondary || props.color === 'secondary' },
+      { 'input-accent': props.accent || props.color === 'accent' },
+      { 'input-info': props.info || props.color === 'info' },
+      { 'input-success': props.success || props.color === 'success' },
+      { 'input-warning': props.warning || props.color === 'warning' },
+      { 'input-error': props.error || props.color === 'error' },
+      { 'input-ghost': props.ghost },
+      { 'input-xl': props.xl || props.size === 'xl' },
+      { 'input-lg': props.lg || props.size === 'lg' },
+      { 'input-md': props.md || props.size === 'md' },
+      { 'input-sm': props.sm || props.size === 'sm' },
+      { 'input-xs': props.xs || props.size === 'xs' },
+      { 'join-item': props.join },
+    ],
+  }
+})
+const inputModel = computed({
+  get: () => props.modelValue,
+  set: setValue,
+})
+</script>
+
+<template>
+  <div v-if="$slots.default">
+    <slot
+      :value="inputModel"
+      :set-value="setValue"
+      :input-attrs="inputAttrs"
+      :props="props"
+      :input-model="inputModel"
+    />
+  </div>
+  <input
+    v-else
+    v-bind="inputAttrs"
+    :value="inputModel"
+    @input="handleInput"
+  >
+</template>

package/app/components/Kbd.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+</script>
+
+<template>
+  <kbd
+    class="kbd" :class="{
+      'kbd-xl': xl || size === 'xl',
+      'kbd-lg': lg || size === 'lg',
+      'kbd-md': md || size === 'md',
+      'kbd-sm': sm || size === 'sm',
+      'kbd-xs': xs || size === 'xs',
+    }"
+  >
+    <slot />
+  </kbd>
+</template>