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

package/app/components/Accordion.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
+
+const props = defineProps<{
+  modelValue?: string | number
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const value = ref(props.modelValue)
+watch(() => props.modelValue, (val) => {
+  value.value = val
+})
+watch(value, (val) => {
+  if (props.modelValue !== val) {
+    emit('update:modelValue', val)
+  }
+})
+
+provide('accordion-value', value)
+</script>
+
+<template>
+  <div class="daisy-ui-kit-accordion">
+    <slot />
+  </div>
+</template>

package/app/components/Alert.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps<{
+  outline?: boolean
+  dash?: boolean
+  soft?: boolean
+  type?: 'info' | 'success' | 'warning' | 'error'
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+  orientation?: 'vertical' | 'horizontal'
+  vertical?: boolean
+  horizontal?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="alert" :class="{
+      'alert-outline': props.outline,
+      'alert-dash': props.dash,
+      'alert-soft': props.soft,
+
+      'alert-info': props.info || props.type === 'info',
+      'alert-success': props.success || props.type === 'success',
+      'alert-warning': props.warning || props.type === 'warning',
+      'alert-error': props.error || props.type === 'error',
+
+      'alert-vertical': props.vertical || props.orientation === 'vertical',
+      'alert-horizontal': props.horizontal || props.orientation === 'horizontal',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Avatar.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Mask from './Mask.vue'
+
+const props = defineProps({
+  backgroundColor: { type: String, default: '#BBB' },
+  maskClasses: String,
+  showStatus: Boolean,
+  // Presence props
+  presence: String,
+  online: Boolean,
+  offline: Boolean,
+  // Mask shape props (self-contained, no Mask.config.ts dependency)
+  shape: String,
+  squircle: Boolean,
+  heart: Boolean,
+  hexagon: Boolean,
+  hexagon2: Boolean,
+  decagon: Boolean,
+  pentagon: Boolean,
+  diamond: Boolean,
+  square: Boolean,
+  circle: Boolean,
+  star: Boolean,
+  star2: Boolean,
+  triangle: Boolean,
+  triangle2: Boolean,
+  triangle3: Boolean,
+  triangle4: Boolean,
+  half1: Boolean,
+  half2: Boolean,
+})
+
+const maskShapeKeys = [
+  'mask-squircle',
+  'mask-heart',
+  'mask-hexagon',
+  'mask-hexagon-2',
+  'mask-decagon',
+  'mask-pentagon',
+  'mask-diamond',
+  'mask-square',
+  'mask-circle',
+  'mask-star',
+  'mask-star-2',
+  'mask-triangle',
+  'mask-triangle-2',
+  'mask-triangle-3',
+  'mask-triangle-4',
+  'mask-half-1',
+  'mask-half-2',
+] as const
+
+type AvatarClassKey = typeof maskShapeKeys[number] | 'rounded-box' | 'avatar-online' | 'avatar-offline'
+
+const avatarClasses = computed<Record<AvatarClassKey, boolean>>(() => {
+  const mask: Record<AvatarClassKey, boolean> = {
+    'mask-squircle': props.squircle || props.shape === 'squircle',
+    'mask-heart': props.heart || props.shape === 'heart',
+    'mask-hexagon': props.hexagon || props.shape === 'hexagon',
+    'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
+    'mask-decagon': props.decagon || props.shape === 'decagon',
+    'mask-pentagon': props.pentagon || props.shape === 'pentagon',
+    'mask-diamond': props.diamond || props.shape === 'diamond',
+    'mask-square': props.square || props.shape === 'square',
+    'mask-circle': props.circle || props.shape === 'circle',
+    'mask-star': props.star || props.shape === 'star',
+    'mask-star-2': props.star2 || props.shape === 'star-2',
+    'mask-triangle': props.triangle || props.shape === 'triangle',
+    'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
+    'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
+    'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
+    'mask-half-1': props.half1 || props.shape === 'half-1',
+    'mask-half-2': props.half2 || props.shape === 'half-2',
+    'rounded-box': false,
+    'avatar-online': props.presence === 'online' || props.online,
+    'avatar-offline': props.presence === 'offline' || props.offline,
+  }
+  const hasMask = maskShapeKeys.some(k => mask[k])
+  mask['rounded-box'] = !hasMask
+  return mask
+})
+
+const color = computed(() => {
+  return `#${contrastingColor(props.backgroundColor.replace('#', ''))}`
+})
+
+function contrastingColor(color: any) {
+  return (luma(color) >= 155) ? '000' : 'fff'
+}
+// color can be a hx string or an array of RGB values 0-255
+function luma(color: any) {
+  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
+  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
+}
+function hexToRGBArray(color: any) {
+  if (color.length === 3) {
+    color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
+  }
+  else if (color.length !== 6) {
+    throw new Error(`Invalid hex color: ${color}`)
+  }
+  const rgb = []
+  for (let i = 0; i <= 2; i++) {
+    rgb[i] = Number.parseInt(color.substr(i * 2, 2), 16)
+  }
+  return rgb
+}
+</script>
+
+<template>
+  <div class="avatar">
+    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[avatarClasses, maskClasses]">
+      <slot />
+    </Mask>
+  </div>
+</template>
+
+<style lang="postcss">
+.avatar-mask > * {
+  aspect-ratio: 1/1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/app/components/AvatarGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  orientation: string
+  horizontal: boolean
+  vertical: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="avatar-group" :class="{
+      'flex-row': props.orientation === 'horizontal' || props.horizontal || (!props.orientation && !props.vertical && !props.horizontal),
+      'flex-col': props.orientation === 'vertical' || props.vertical,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Badge.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const { is = 'div', ...props } = defineProps<{
+  is?: string
+  outline?: boolean
+  soft?: boolean
+  dash?: boolean
+  ghost?: boolean
+
+  size?: string
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <component
+    :is="is" class="badge" :class="{
+      'badge-outline': props.outline,
+      'badge-ghost': props.ghost,
+      'badge-soft': props.soft,
+      'badge-dash': props.dash,
+
+      'badge-xl': props.xl || props.size === 'xl',
+      'badge-lg': props.lg || props.size === 'lg',
+      'badge-md': props.md || props.size === 'md',
+      'badge-sm': props.sm || props.size === 'sm',
+      'badge-xs': props.xs || props.size === 'xs',
+
+      'badge-neutral': props.neutral || props.color === 'neutral',
+      'badge-primary': props.primary || props.color === 'primary',
+      'badge-secondary': props.secondary || props.color === 'secondary',
+      'badge-accent': props.accent || props.color === 'accent',
+      'badge-info': props.info || props.color === 'info',
+      'badge-success': props.success || props.color === 'success',
+      'badge-warning': props.warning || props.color === 'warning',
+      'badge-error': props.error || props.color === 'error',
+    }"
+  >
+    <slot />
+  </component>
+</template>

package/app/components/Breadcrumbs.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="breadcrumbs">
+    <ul>
+      <slot />
+    </ul>
+  </div>
+</template>

package/app/components/Button.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  is?: string
+  join?: 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
+  disabled?: 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
+
+  type?: 'button' | 'submit' | 'reset'
+}>()
+
+// Accessibility-friendly attributes for disabling the button
+const disabledAttrs = computed(() => {
+  if (props.disabled) {
+    return {
+      'tabindex': -1,
+      'role': 'button',
+      'aria-disabled': true,
+    }
+  }
+  else {
+    return {}
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="is || 'button'"
+    :type="type"
+    class="btn"
+    :class="{
+      'join-item': join,
+
+      'btn-neutral': !disabled && (neutral || color === 'neutral'),
+      'btn-primary': !disabled && (primary || color === 'primary'),
+      'btn-secondary': !disabled && (secondary || color === 'secondary'),
+      'btn-accent': !disabled && (accent || color === 'accent'),
+      'btn-info': !disabled && (info || color === 'info'),
+      'btn-success': !disabled && (success || color === 'success'),
+      'btn-warning': !disabled && (warning || color === 'warning'),
+      'btn-error': !disabled && (error || color === 'error'),
+
+      'text-primary': !disabled && (primary || color === 'primary') && link,
+      'text-secondary': !disabled && (secondary || color === 'secondary') && link,
+      'text-neutral': !disabled && (neutral || color === 'neutral') && link,
+      'text-accent': !disabled && (accent || color === 'accent') && link,
+      'text-info': !disabled && (info || color === 'info') && link,
+      'text-success': !disabled && (success || color === 'success') && link,
+      'text-warning': !disabled && (warning || color === 'warning') && link,
+      'text-error': !disabled && (error || color === 'error') && link,
+
+      'glass': !disabled && 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': !disabled && outline,
+      'btn-dash': !disabled && dash,
+      'btn-ghost': !disabled && ghost,
+      'btn-soft': !disabled && soft,
+      'btn-link': !disabled && link,
+      'btn-disabled': disabled,
+
+      'no-animation': noAnimation,
+      'btn-active': !disabled && active,
+    }"
+    v-bind="{ ...disabledAttrs, ...$attrs }"
+  >
+    <slot />
+  </component>
+</template>

package/app/components/Calendar.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { PikadayOptions } from 'pikaday'
+import { onMounted, ref } from 'vue'
+import { usePikaday } from '~/composables/usePikaday'
+import CalendarSkeleton from './CalendarSkeleton.vue'
+
+const props = defineProps<{
+  /** Bound value: Date object or ISO string or null */
+  modelValue: Date | string | null
+  /** All Pikaday options (except `container` and `bound`) */
+  options?: Omit<PikadayOptions, 'container' | 'bound'>
+  /** If true, default to today when no value provided */
+  autoDefault?: boolean
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Date | null): void
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const loading = ref(true)
+
+const defaultOptions: Partial<PikadayOptions> = {
+  format: 'D MMM YYYY',
+}
+
+function handleSelect(date: Date) {
+  emit('update:modelValue', date)
+}
+
+const { createPicker } = usePikaday(
+  {
+    ...defaultOptions,
+    ...props.options,
+    bound: false,
+  },
+  handleSelect,
+)
+
+onMounted(async () => {
+  if (containerRef.value) {
+    const picker = await createPicker(containerRef.value)
+    if (picker && picker.el && !containerRef.value.contains(picker.el)) {
+      containerRef.value.appendChild(picker.el)
+    }
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="relative w-[270px] h-[270px]">
+    <div class="absolute inset-0">
+      <CalendarSkeleton :number-of-months="options?.numberOfMonths ?? 1" :class="loading ? '' : 'opacity-0 pointer-events-none transition-opacity duration-300'" />
+    </div>
+    <div ref="containerRef" class="absolute inset-0 inline-block w-full h-full" />
+    <span class="pika-single hidden" />
+  </div>
+</template>
+
+<style>
+.has-event {
+  .pika-button {
+    color: var(--color-primary);
+  }
+}
+</style>

package/app/components/CalendarInput.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { PikadayOptions } from 'pikaday'
+import type { ComponentPublicInstance } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+
+import { usePikaday } from '~/composables/usePikaday'
+
+const props = defineProps<{
+  /** Bound value: Date object or ISO string or null */
+  modelValue: Date | string | number | null
+  /** All Pikaday options (except `field`) */
+  options?: Omit<PikadayOptions, 'field'>
+  /** If true, default to today when no value provided */
+  autoDefault?: boolean
+  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
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Date | null): void
+  (e: 'update:inputValue', v: string | null): void
+}>()
+const inputRef = ref<ComponentPublicInstance | null>(null)
+const inputValue = ref<string | null>(null)
+const visible = ref(false)
+
+const defaultOptions: Partial<PikadayOptions> = {
+  format: 'D MMM YYYY',
+}
+
+const { picker, createPicker } = usePikaday(
+  {
+    ...defaultOptions,
+    ...props.options,
+    bound: true,
+    field: undefined, // will be set below
+  },
+  handleSelect,
+  handleOpen,
+  handleClose,
+)
+
+function handleSelect(date: Date) {
+  emit('update:modelValue', date)
+  inputValue.value = picker.value?.toString() ?? ''
+  emit('update:inputValue', inputValue.value)
+}
+function handleOpen() {
+  visible.value = true
+}
+function handleClose() {
+  visible.value = false
+}
+
+onMounted(async () => {
+  const inputEl = inputRef.value as HTMLInputElement | null
+  // Format and set the initial input value BEFORE initializing Pikaday
+  if (props.modelValue) {
+    let d: Date | null = null
+    if (props.modelValue instanceof Date) {
+      d = props.modelValue
+    }
+    else if (typeof props.modelValue === 'string') {
+      const tmp = new Date(props.modelValue)
+      if (!Number.isNaN(tmp.getTime())) {
+        d = tmp
+      }
+    }
+    if (d) {
+      const day = d.getDate()
+      const month = d.toLocaleString('en-US', { month: 'short' })
+      const year = d.getFullYear()
+      inputValue.value = `${day} ${month} ${year}`
+    }
+  }
+  if (inputEl) {
+    picker.value = await createPicker(inputEl)
+    // Do not call setDate here
+    if (picker.value && (picker.value as any).config?.bound === false) {
+      picker.value.hide()
+    }
+  }
+})
+
+function onFocus() {
+  if (picker.value) {
+    let d: Date | null = null
+    if (props.modelValue instanceof Date) {
+      d = props.modelValue
+    }
+    else if (typeof props.modelValue === 'string') {
+      const tmp = new Date(props.modelValue)
+      if (!Number.isNaN(tmp.getTime())) {
+        d = tmp
+      }
+    }
+    picker.value.setDate(d, true)
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!picker.value) {
+      return
+    }
+    if (!visible.value) {
+      if (val instanceof Date) {
+        picker.value.setDate(val, true)
+        inputValue.value = picker.value.toString()
+      }
+      else if (typeof val === 'string') {
+        const d = new Date(val)
+        if (!Number.isNaN(d.getTime())) {
+          picker.value.setDate(d, true)
+          inputValue.value = picker.value.toString()
+        }
+      }
+      else {
+        picker.value.setDate(null, true)
+        inputValue.value = ''
+      }
+    }
+  },
+)
+</script>
+
+<template>
+  <input
+    ref="inputRef"
+    type="text"
+    :value="inputValue"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    class="input"
+    :class="[
+      { 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 },
+    ]"
+    v-bind="$attrs"
+    @focus="onFocus"
+    @input="e => {
+      const val = (e.target as HTMLInputElement).value
+      emit('update:inputValue', val)
+    }"
+  >
+</template>

package/app/components/CalendarSkeleton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Skeleton from './Skeleton.vue'
+
+const { numberOfMonths = 1 } = defineProps<{
+  numberOfMonths?: number
+}>()
+</script>
+
+<template>
+  <Skeleton col class="bg-base-200 rounded-box">
+    <div
+      v-for="(month, idx) in numberOfMonths"
+      :key="`calendar-${month}`"
+      class="w-[270px] h-[270px] p-3 mx-auto flex flex-col gap-2"
+      :class="{
+        '-mt-3.5': idx > 0,
+      }"
+    >
+      <Flex justify-between items-center class="mb-3 px-2">
+        <span
+          class="size-4 rounded-full bg-base-300 inline-block"
+          :class="{
+            'bg-base-300': idx === 0,
+            'bg-transparent': idx !== 0,
+          }"
+        />
+        <span class="h-5 w-20 rounded-full bg-base-300 inline-block" />
+        <span
+          class="size-4 rounded-full bg-base-300 inline-block"
+          :class="{
+            'bg-base-300': idx === numberOfMonths - 1,
+            'bg-transparent': idx !== numberOfMonths - 1,
+          }"
+        />
+      </Flex>
+      <Flex col grow justify-between class="h-full">
+        <div class="grid grid-cols-7 gap-[4px] mb-4 flex-shrink-0">
+          <span v-for="d in 7" :key="`dow-${d}`" class="size-4 rounded-full bg-base-300 mx-auto block" />
+        </div>
+        <div class="grid grid-cols-7 gap-[4px] flex-grow items-center">
+          <span v-for="i in 35" :key="`day-${i}`" class="size-7 rounded-full bg-base-300 block mx-auto" />
+        </div>
+      </Flex>
+    </div>
+  </Skeleton>
+</template>