daisy-ui-kit 5.0.0-pre.5 → 5.0.0-pre.6

package/app/components/Dropdown.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+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<{
+  // allows passing a custom id to the dropdown. Required for SSR hydration.
+  randomId?: string
+  autoFocus?: boolean
+
+  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
+  strategy?: 'fixed' | 'absolute'
+
+  hover?: boolean
+  delayEnter?: number
+  delayLeave?: number
+  closeOnClickOutside?: boolean
+}>(), {
+  autoFocus: false,
+  placement: 'bottom-start',
+  hover: false,
+  delayEnter: 0,
+  delayLeave: 300,
+  closeOnClickOutside: true,
+})
+// Dropdown Visibility
+const isOpen = defineModel('open')
+provide('isDropdownOpen', isOpen)
+
+const autoFocus = ref(props.autoFocus)
+provide('dropdownAutoFocus', autoFocus)
+
+const randomValue = props.randomId || randomString(12)
+const wrapperId = `dropdown-wrapper-${randomValue}`
+const id = `dropdown-${randomValue}`
+provide('dropdownId', id)
+
+// set up the floating ui instance
+const buttonEl = ref(null)
+const contentEl = ref(null)
+const floatingConfig = reactive({
+  placement: ref(props.placement),
+  strategy: ref(props.strategy),
+  whileElementsMounted: autoUpdate,
+})
+const { floatingStyles } = useFloating(buttonEl, contentEl, floatingConfig)
+
+provide('buttonEl', buttonEl)
+provide('contentEl', contentEl)
+provide('floatingStyles', floatingStyles)
+
+// Visibility Utils
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+function open() {
+  isOpen.value = true
+}
+function close() {
+  isOpen.value = false
+}
+provide('toggleDropdown', toggle)
+provide('openDropdown', open)
+provide('closeDropdown', close)
+
+const dropdownWrapper = ref(null)
+
+onMounted(() => {
+  // Close when clicking outside the element
+  // use a slight delay to avoid conflict with the focus trap in the DropdownContent.
+  onClickOutside(contentEl, () => {
+    if (props.closeOnClickOutside) {
+      setTimeout(() => {
+        isOpen.value = false
+      }, 50)
+    }
+  })
+
+  // Sync with top-level isHovered ref. For SSR compatibility.
+  if (props.hover) {
+    const hover = useElementHover(dropdownWrapper, {
+      delayLeave: props.delayLeave,
+      delayEnter: props.delayEnter,
+    })
+    syncRefs(hover, isOpen)
+  }
+})
+</script>
+
+<template>
+  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block floating-dropdown">
+    <slot v-bind="{ toggle, open, close }" />
+  </div>
+</template>

package/app/components/DropdownButton.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { inject } from 'vue'
+
+const id = inject('dropdownId')
+const isOpen = inject('isDropdownOpen')
+const toggleDropdown = inject('toggleDropdown')
+const buttonEl = inject('buttonEl')
+
+const toggle = toggleDropdown
+</script>
+
+<template>
+  <Button :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-button" @click="toggle">
+    <slot />
+  </Button>
+</template>

package/app/components/DropdownContent.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { inject, nextTick, ref, watchEffect } from 'vue'
+
+const autoFocus = inject('dropdownAutoFocus')
+const id = inject('dropdownId')
+const isOpen = inject('isDropdownOpen')
+const isOpenDelayed = ref(isOpen.value)
+const contentEl = inject('contentEl')
+const floatingStyles = inject('floatingStyles')
+
+// Dropdown Utils
+const toggle = inject('toggleDropdown')
+const open = inject('openDropdown')
+const close = inject('closeDropdown')
+
+let activate
+let deactivate
+
+if (autoFocus.value) {
+  const { activate: _activate, deactivate: _deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
+  activate = _activate
+  deactivate = _deactivate
+
+  // hide the dropdown when the focus-trap drops focus (by pressing escape, for example)
+  watchEffect(() => {
+    if (!hasFocus.value) {
+      close()
+    }
+  })
+}
+// const { activate, deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
+
+// synchronize isOpenDelayed with isOpen
+watchEffect(async () => {
+  if (isOpen.value) {
+    isOpenDelayed.value = true
+    if (autoFocus.value) {
+      await nextTick()
+      activate()
+    }
+  }
+  else {
+    if (autoFocus.value) {
+      deactivate()
+      await nextTick()
+    }
+    isOpenDelayed.value = false
+  }
+})
+</script>
+
+<template>
+  <div v-if="isOpen" ref="contentEl" :style="floatingStyles" :aria-labelledby="id" role="menu">
+    <slot v-bind="{ toggle, open, close }" />
+  </div>
+</template>

package/app/components/DropdownTarget.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { inject } from 'vue'
+
+const id = inject('dropdownId')
+const isOpen = inject('isDropdownOpen')
+const toggle = inject('toggleDropdown')
+const buttonEl = inject('buttonEl')
+</script>
+
+<template>
+  <div :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-target" @click="toggle">
+    <slot />
+  </div>
+</template>

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/app/components/FlexItem.vue

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

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  is?: string
+}>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <component :is="is" class="indicator">
+    <slot />
+  </component>
+</template>

package/app/components/IndicatorItem.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  is?: string
+
+  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',
+    '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',
+  }
+})
+</script>
+
+<template>
+  <component :is="is" class="indicator-item" :class="classes">
+    <slot />
+  </component>
+</template>