daisy-ui-kit 1.0.7 → 2.0.0

package/components/Accordion.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+
+const value = defineModel({
+  required: true,
+  local: true,
+})
+
+provide('accordion-value', value)
+</script>
+
+<template>
+  <div class="daisy-ui-kit-accordion">
+    <slot />
+  </div>
+</template>

package/components/Alert.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 const props: any = defineProps<{
-  state?: string
+  type?: string
   info?: boolean
   success?: boolean
   warning?: boolean
@@ -10,18 +10,16 @@ const props: any = defineProps<{
 }>()
 const classes = computed(() => {
   return {
-    'alert-info': props.info || props.state === 'info',
-    'alert-success': props.success || props.state === 'success',
-    'alert-warning': props.warning || props.state === 'warning',
-    'alert-error': props.error || props.state === 'error',
+    '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',
   }
 })
 </script>
 
 <template>
   <div class="alert" :class="classes">
-    <div>
-      <slot />
-    </div>
+    <slot />
   </div>
 </template>

package/components/Artboard.vue

@@ -2,9 +2,9 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-  size?: string
   demo?: boolean
   horizontal?: boolean
+  size?: string
   phone1?: boolean
   phone2?: boolean
   phone3?: boolean

package/components/Avatar.vue

@@ -4,11 +4,8 @@ import { makeMaskClasses, maskProps } from './Mask.config'
 import Mask from './Mask.vue'
 
 const props = defineProps({
-  text: { type: String },
-  charCount: { type: Number, default: 1 },
   backgroundColor: { type: String, default: '#BBB' },
-  size: { type: [Number, String], default: 6 },
-  innerClass: String,
+  maskClasses: String,
   showStatus: Boolean,
   online: Boolean,
   ...maskProps,
@@ -20,54 +17,42 @@ const classes = computed(() => {
   }
 })
 
-const maskClasses = makeMaskClasses(props)
+const internalMaskClasses = makeMaskClasses(props)
 const allMaskClasses = computed(() => {
-  const classes = maskClasses.value
+  const classes = internalMaskClasses.value
   const hasMaskClass = Object.values(classes).find(v => v)
   // Enable rounded-btn class only if no mask classes are applied
   Object.assign(classes, { 'rounded-btn': !hasMaskClass })
   return classes
 })
 
-const initials = computed(() => {
-  const parts = (props.text || '').split(' ')
-  return parts.reduce((chars: string, part: string) => {
-    if (props.charCount === chars.length)
-      return chars
-
-    const char = part.slice(0, 1).toUpperCase()
-
-    return chars + char
-  }, '')
-})
-
 const color = computed(() => {
   return `#${contrastingColor(props.backgroundColor.replace('#', ''))}`
 })
 
-function contrastingColor(color) {
+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) {
+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) {
+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] = parseInt(color.substr(i * 2, 2), 16)
+    rgb[i] = Number.parseInt(color.substr(i * 2, 2), 16)
   return rgb
 }
 </script>
 
 <template>
   <div class="avatar" :class="classes">
-    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[allMaskClasses, innerClass]">
+    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[allMaskClasses, maskClasses]">
       <slot />
     </Mask>
   </div>

package/components/Badge.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   xs?: boolean
 
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
@@ -18,15 +19,19 @@ const props = defineProps<{
   success?: boolean
   warning?: boolean
   error?: boolean
+
+  ghost?: boolean
 }>()
 
 const classes = computed(() => {
   return {
     'badge-outline': props.outline,
+    'badge-ghost': props.ghost,
     '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',

package/components/BottomNav.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
+const props = defineProps<{
   size?: string
   lg?: boolean
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-
-const props = defineProps<Props>()
+}>()
 const classes = computed(() => {
   return {
     'btm-nav-lg': props.lg || props.size === 'lg',

package/components/Button.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
 interface Props {
   is?: string
+  join?: boolean
 
   color?: string
   neutral?: boolean
@@ -26,7 +25,6 @@ interface Props {
   wide?: boolean
   block?: boolean
 
-  loading?: boolean
   noAnimation?: boolean
   active?: boolean
 
@@ -43,6 +41,8 @@ const props = defineProps<Props>()
 
 const classes = computed(() => {
   return {
+    'join-item': props.join,
+
     'btn-primary': !props.disabled && (props.primary || props.color === 'primary'),
     'btn-secondary': !props.disabled && (props.secondary || props.color === 'secondary'),
     'btn-neutral': !props.disabled && (props.neutral || props.color === 'neutral'),
@@ -52,6 +52,15 @@ const classes = computed(() => {
     'btn-warning': !props.disabled && (props.warning || props.color === 'warning'),
     'btn-error': !props.disabled && (props.error || props.color === 'error'),
 
+    'text-primary': !props.disabled && (props.primary || props.color === 'primary') && props.link,
+    'text-secondary': !props.disabled && (props.secondary || props.color === 'secondary') && props.link,
+    'text-neutral': !props.disabled && (props.neutral || props.color === 'neutral') && props.link,
+    'text-accent': !props.disabled && (props.accent || props.color === 'accent') && props.link,
+    'text-info': !props.disabled && (props.info || props.color === 'info') && props.link,
+    'text-success': !props.disabled && (props.success || props.color === 'success') && props.link,
+    'text-warning': !props.disabled && (props.warning || props.color === 'warning') && props.link,
+    'text-error': !props.disabled && (props.error || props.color === 'error') && props.link,
+
     'glass': !props.disabled && props.glass,
 
     'btn-circle': props.circle || props.shape === 'circle',
@@ -69,7 +78,6 @@ const classes = computed(() => {
     'btn-link': !props.disabled && props.link,
     'btn-disabled': props.disabled,
 
-    'loading': props.loading,
     'no-animation': props.noAnimation,
     'btn-active': !props.disabled && props.active,
   }

package/components/Card.vue

@@ -2,8 +2,8 @@
 import { computed } from 'vue'
 
 interface Props {
-  bordered?: boolean
   is?: string | Object | Function
+  bordered?: boolean
   compact?: boolean
   side?: boolean
   imageFull?: boolean

package/components/Chat.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  pre?: boolean
+  align?: string
+  start?: boolean
+  end?: boolean
+}>(), {
+  align: 'start',
+})
+
+const classes = computed(() => {
+  const { align, start, end } = props
+  return {
+    'chat-start': start || (!end && align === 'start'),
+    'chat-end': end || align === 'end',
+    'whitespace-pre': props.pre,
+  }
+})
+</script>
+
+<template>
+  <div class="chat" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/ChatBubble.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    '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',
+  }
+})
+</script>
+
+<template>
+  <div class="chat-bubble" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/ChatFooter.vue

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

package/components/ChatHeader.vue

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

package/components/ChatImage.vue

@@ -0,0 +1,5 @@
+<template>
+  <Avatar class="chat-image">
+    <slot />
+  </Avatar>
+</template>

package/components/Checkbox.vue

@@ -8,21 +8,29 @@ const props = defineProps<{
   primary?: boolean
   secondary?: boolean
   accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
 
   size?: string
-  xs?: boolean
-  sm?: boolean
-  md?: boolean
   lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
 }>()
 const emit = defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
-  const { color, primary, secondary, accent, size, xs, sm, md, lg } = props
+  const { color, primary, secondary, accent, success, warning, info, error, size, xs, sm, md, lg } = props
   return {
     'checkbox-primary': primary || color === 'primary',
     'checkbox-secondary': secondary || color === 'secondary',
     'checkbox-accent': accent || color === 'accent',
+    'checkbox-success': success || color === 'success',
+    'checkbox-warning': warning || color === 'warning',
+    'checkbox-info': info || color === 'info',
+    'checkbox-error': error || color === 'error',
     'checkbox-xs': xs || size === 'xs',
     'checkbox-sm': sm || size === 'sm',
     'checkbox-md': md || size === 'md',

package/components/Code.vue

@@ -17,7 +17,8 @@ export default {
 
     const source = ref(null)
     const lang = computed(() => {
-      if (props.language === 'vue') return 'html'
+      if (props.language === 'vue')
+        return 'html'
       else return props.language
     })
     const languageClass = computed(() => `language-${lang.value}`)

package/components/CodeWrapper.vue

@@ -1,9 +1,9 @@
 <template>
-  <Collapse arrow toggle class="mb-8 rounded-b-xl bg-neutral/20 not-prose">
+  <Collapse arrow toggle class="mb-8 rounded-b-xl rounded-t-none bg-base-200 p-0">
     <CollapseTitle class="text-lg font-medium">
       Code Example
     </CollapseTitle>
-    <CollapseContent>
+    <CollapseContent class="overflow-hidden">
       <slot />
     </CollapseContent>
   </Collapse>

package/components/Collapse.vue

@@ -7,27 +7,49 @@ interface Props {
   plus?: boolean
 
   open?: boolean
-  closed?: boolean
+  close?: boolean
 
   toggle?: boolean
+
+  // for accordion
+  value?: any
 }
 const props = defineProps<Props>()
 
+const accordionValue: any = inject('accordion-value', ref('no-accordion-value'))
+const useAccordion = computed(() => {
+  return accordionValue.value !== 'no-accordion-value'
+})
+const isAccordionSelected = computed(
+  () => {
+    if (!useAccordion.value)
+      return false
+    return accordionValue.value === props.value
+  })
+
+function handleClick() {
+  if (useAccordion.value)
+    accordionValue.value = props.value
+}
+
 const classes = computed(() => {
-  const { style, arrow, plus, open, closed } = props
+  const { style, arrow, plus, open, close } = props
   return {
     'collapse-arrow': arrow || style === 'arrow',
-    'carousel-plus': plus || style === 'plus',
-    'carousel-open': open && !closed,
-    'carousel-closed': closed,
+    'collapse-plus': plus || style === 'plus',
+    'collapse-open': (open && !close) || isAccordionSelected.value,
+    'collapse-close': close,
   }
 })
 </script>
 
 <template>
-  <div tabindex="0" class="collapse" :class="classes">
-    <input v-if="toggle" type="checkbox">
-
+  <div tabindex="0" class="collapse" :class="classes" @click="handleClick">
+    <input
+      v-if="toggle || useAccordion"
+      :type="useAccordion ? 'radio' : 'checkbox'"
+      :checked="isAccordionSelected"
+    >
     <slot />
   </div>
 </template>

package/components/CountdownTimers.vue

@@ -5,9 +5,9 @@ import { computed } from 'vue'
 interface Props {
   durationInSeconds?: number
   untilDate?: Date
-  interval?: number
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), { durationInSeconds: 0 })
+const emit = defineEmits(['done'])
 
 const calculateDate = () => props.untilDate || new Date(Date.now() + props.durationInSeconds * 1000)
 const targetDate = ref<Date>(calculateDate())
@@ -20,7 +20,7 @@ watch(
 )
 
 // The target date
-const calcTimeLeft = () => {
+function calcTimeLeft() {
   const remaining = targetDate.value.getTime() - Date.now()
   return remaining < 0 ? 0 : remaining
 }
@@ -29,6 +29,11 @@ useIntervalFn(() => {
   timeLeft.value = calcTimeLeft()
 }, 1000)
 
+watch(timeLeft, () => {
+  if (timeLeft.value === 0)
+    emit('done')
+})
+
 const totalSeconds = computed(() => Math.round(timeLeft.value / 1000))
 const totalMinutes = computed(() => Math.floor(timeLeft.value / 1000 / 60))
 const totalHours = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60))

package/components/Divider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   horizontal?: boolean

package/components/Drawer.vue

@@ -1,20 +1,44 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { drawerStateKey } from './drawer-utils'
+import { createDrawerState } from '../utils/drawer-utils'
 
-interface DrawerState {
-  isDrawerOpen: boolean
-  openDrawer: () => void
-  closeDrawer: () => void
-  toggleDrawer: () => void
-}
+const props = withDefaults(defineProps<{
+  open?: boolean
+  name?: string
+  end?: boolean
+}>(), {
+  name: 'drawer',
+})
+const emit = defineEmits(['update:open'])
 
-const drawerState: DrawerState | undefined = inject(drawerStateKey)
+// sync `open` prop with drawerState.isDrawerOpen
+const drawerState = createDrawerState(props.name)
+watch(
+  () => props.open,
+  (value) => {
+    if (drawerState.isDrawerOpen !== value)
+      drawerState.isDrawerOpen = value
+  },
+  { immediate: true },
+)
+watch(
+  () => drawerState.isDrawerOpen,
+  (value) => {
+    if (props.open !== value)
+      emit('update:open', value)
+  },
+  { immediate: true },
+)
+
+const classes = computed(() => {
+  return {
+    'drawer-end': props.end,
+  }
+})
 </script>
 
 <template>
-  <div class="drawer-side">
-    <div class="drawer-overlay" @click="() => drawerState?.closeDrawer()" />
+  <div class="drawer" :class="classes">
+    <input :id="name" v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle">
     <slot v-bind="drawerState" />
   </div>
 </template>

package/components/DrawerContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  name?: string
+}>(), {
+  name: 'drawer',
+})
+
+const drawerState = createDrawerState(props.name)
+</script>
+
+<template>
+  <div class="drawer-content">
+    <slot v-bind="drawerState" />
+  </div>
+</template>

package/components/DrawerSide.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  name?: string
+}>(), {
+  name: 'drawer',
+})
+
+const drawerState = createDrawerState(props.name)
+</script>
+
+<template>
+  <div class="drawer-side">
+    <div class="drawer-overlay" @click="() => drawerState?.closeDrawer()" />
+    <slot v-bind="drawerState" />
+  </div>
+</template>

package/components/Dropdown.vue

@@ -1,30 +1,79 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
 
 interface Props {
+  position?: string
   top?: boolean
+  bottom?: boolean
   right?: boolean
   left?: boolean
+
   end?: boolean
   hover?: boolean
+  delayEnter?: number
+  delayLeave?: number
   open?: boolean
+  closeOnClickOutside?: boolean
 }
+const props = withDefaults(defineProps<Props>(), {
+  position: 'bottom',
+  end: false,
+  hover: false,
+  delayEnter: 0,
+  delayLeave: 300,
+  closeOnClickOutside: false,
+})
+const isOpen = defineModel<boolean>('open', {
+  local: true,
+  default: false,
+})
 
-const props = defineProps<Props>()
 const classes = computed(() => {
   return {
-    'dropdown-top': props.top,
-    'dropdown-left': props.left,
-    'dropdown-right': props.right,
+    'dropdown-top': props.top || props.position === 'top',
+    'dropdown-bottom': props.bottom || props.position === 'bottom',
+    'dropdown-left': props.left || props.position === 'left',
+    'dropdown-right': props.right || props.position === 'right',
     'dropdown-end': props.end,
     'dropdown-hover': props.hover,
-    'dropdown-open': props.open,
   }
 })
+
+// const isOpen = ref(props.open)
+watch(() => props.open, value => isOpen.value = value)
+
+const dropdown = ref()
+const isHovered = ref(false)
+
+onMounted(() => {
+  // Close when clicking outside the element
+  onClickOutside(dropdown, () => {
+    if (props.closeOnClickOutside)
+      isOpen.value = false
+  })
+
+  // Sync with top-level isHovered ref. For SSR compatibility.
+  const hover = useElementHover(dropdown, {
+    delayLeave: props.delayLeave,
+    delayEnter: props.delayEnter,
+  })
+  syncRefs(hover, isHovered)
+})
+
+const shouldBeOpen = computed(() => {
+  return isOpen.value || (props.hover && isHovered.value)
+})
+
+function handleClick(ev: MouseEvent) {
+  ev.preventDefault()
+  if (ev.target === dropdown.value.children[0])
+    isOpen.value = !isOpen.value
+}
 </script>
 
 <template>
-  <div class="dropdown" :class="classes">
+  <details ref="dropdown" class="dropdown" :open="shouldBeOpen" :class="classes" @click="handleClick">
     <slot />
-  </div>
+  </details>
 </template>

package/components/DropdownContent.vue

@@ -1,3 +1,5 @@
 <template>
-  <div class="dropdown-content"><slot /></div>
+  <div class="dropdown-content">
+    <slot />
+  </div>
 </template>