daisy-ui-kit 2.1.17 → 3.0.0

package/components/Dropdown.vue

@@ -1,96 +1,93 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { provide, ref } from 'vue'
+import { autoUpdate, useFloating } from '@floating-ui/vue'
 import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
+import { randomString } from '../utils/random-string'
 
 const props = withDefaults(defineProps<{
-  open?: boolean
+  autoFocus?: boolean
 
-  position?: string
-  top?: boolean
-  bottom?: boolean
-  right?: boolean
-  left?: 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'
 
-  end?: boolean
   hover?: boolean
   delayEnter?: number
   delayLeave?: number
   closeOnClickOutside?: boolean
 }>(), {
-  position: 'bottom',
-  end: false,
+  autoFocus: false,
+  placement: 'bottom-start',
   hover: false,
   delayEnter: 0,
   delayLeave: 300,
-  closeOnClickOutside: false,
+  closeOnClickOutside: true,
 })
-const emit = defineEmits(['update:open'])
+// Dropdown Visibility
+const isOpen = defineModel('open', { local: true })
+provide('isDropdownOpen', isOpen)
 
-// defineModel 'open'
-const _isOpen = ref(props.open)
-watch(() => props.open, (val) => {
-  _isOpen.value = val
-})
-const isOpen = computed({
-  get: () => _isOpen.value,
-  set: (val) => {
-    _isOpen.value = val
-    if (props.open !== val)
-      emit('update:open', val)
-  },
-})
+const autoFocus = ref(props.autoFocus)
+provide('dropdownAutoFocus', autoFocus)
 
-const classes = computed(() => {
-  return {
-    '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,
-  }
+const randomValue = 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)
 
-// const isOpen = ref(props.open)
-watch(() => props.open, value => isOpen.value = value)
+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 dropdown = ref()
-const isHovered = ref(false)
+const dropdownWrapper = ref(null)
 
 onMounted(() => {
   // Close when clicking outside the element
-  onClickOutside(dropdown, () => {
-    if (props.closeOnClickOutside)
-      isOpen.value = false
+  // 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.
-  const hover = useElementHover(dropdown, {
-    delayLeave: props.delayLeave,
-    delayEnter: props.delayEnter,
-  })
-  syncRefs(hover, isHovered)
-})
-
-const shouldBeOpen = computed(() => {
-  return isOpen.value || (props.hover && isHovered.value)
+  if (props.hover) {
+    const hover = useElementHover(dropdownWrapper, {
+      delayLeave: props.delayLeave,
+      delayEnter: props.delayEnter,
+    })
+    syncRefs(hover, isOpen)
+  }
 })
-
-function handleClick(ev: MouseEvent) {
-  ev.preventDefault()
-  if (ev.target === dropdown.value.children[0])
-    isOpen.value = !isOpen.value
-}
 </script>
 
 <template>
-  <details ref="dropdown" class="dropdown" :open="shouldBeOpen" :class="classes" @click="handleClick">
-    <slot />
-  </details>
+  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block floating-dropdown">
+    <slot v-bind="{ toggle, open, close }" />
+  </div>
 </template>
-
-<style>
-.dropdown > :first-child > * {
-  pointer-events: none;
-}
-</style>

package/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/components/DropdownContent.vue

@@ -1,5 +1,56 @@
+<script setup>
+import { inject } from 'vue'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
+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 class="dropdown-content">
-    <slot />
+  <div v-if="isOpen" ref="contentEl" :style="floatingStyles" :aria-labelledby="id" role="menu">
+    <slot v-bind="{ toggle, open, close }" />
   </div>
 </template>

package/components/DropdownTarget.vue

@@ -1,5 +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>
-  <summary class="list-none">
+  <div :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-target" @click="toggle">
     <slot />
-  </summary>
+  </div>
 </template>

package/components/Menu.vue

@@ -13,6 +13,8 @@ const props = defineProps<{
   xs?: boolean
 }>()
 
+provide('withinExpand', false)
+
 // `normal` and `compact` provide backwards compatibility with DaisyUI 2.x
 const classes = computed(() => {
   return {

package/components/MenuExpand.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { onMounted, provide, ref } from 'vue'
+import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
+import { randomString } from '../utils/random-string'
+
+const props = withDefaults(defineProps<{
+  hover?: boolean
+  delayEnter?: number
+  delayLeave?: number
+  closeOnClickOutside?: boolean
+}>(), {
+  position: 'bottom',
+  end: false,
+  hover: false,
+  delayEnter: 0,
+  delayLeave: 300,
+  closeOnClickOutside: false,
+})
+// "Expand" Visibility
+const isOpen = defineModel('open', { local: true, default: false, type: Boolean })
+provide('isExpandOpen', isOpen)
+
+// ids for accessibility
+const randomValue = randomString(12)
+const wrapperId = `expand-wrapper-${randomValue}`
+const id = `expand-${randomValue}`
+provide('expandId', id)
+
+// Visibility Utils
+function toggle() {
+  setTimeout(() => {
+    isOpen.value = !isOpen.value
+  }, 50)
+}
+function open() {
+  isOpen.value = true
+}
+function close() {
+  isOpen.value = false
+}
+provide('toggleExpand', toggle)
+provide('openExpand', open)
+provide('closeExpand', close)
+
+const expandEl = ref()
+
+onMounted(() => {
+  // Close when clicking outside the element
+  onClickOutside(expandEl, () => {
+    if (props.closeOnClickOutside) {
+      setTimeout(() => {
+        isOpen.value = false
+      }, 500)
+    }
+  })
+
+  if (props.hover) {
+    // Sync with top-level isHovered ref. For SSR compatibility.
+    const hover = useElementHover(expandEl, {
+      delayLeave: props.delayLeave,
+      delayEnter: props.delayEnter,
+    })
+    syncRefs(hover, isOpen)
+  }
+})
+
+function handleClick(ev: MouseEvent) {
+  ev.preventDefault()
+  if (ev.target === expandEl.value.children[0])
+    isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <details :id="wrapperId" ref="expandEl" class="dropdown menu-expand" :open="isOpen" @click="handleClick">
+    <slot v-bind="{ toggle, open, close }" />
+  </details>
+</template>

package/components/MenuExpandToggle.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { inject } from 'vue'
+
+const id = inject('expandId')
+const isOpen = inject('isExpandOpen')
+const toggle = inject('toggleExpand')
+</script>
+
+<template>
+  <summary :id="id" :aria-expanded="isOpen" aria-haspopup="menu" class="menu-expand-toggle" @click.prevent.stop="toggle">
+    <slot />
+  </summary>
+</template>

package/components/MenuItem.vue

@@ -12,6 +12,10 @@ defineProps<{
 </template>
 
 <style lang="postcss">
+/*
+  Allow adding .active class to the MenuItem element.
+  DaisyUI only supports adding it to the `a` element.
+*/
 .menu-item.active > a, .menu-item.active > span {
   background-color: hsl(var(--n) / var(--tw-bg-opacity));
   color: hsl(var(--nc) / var(--tw-text-opacity));
@@ -19,4 +23,16 @@ defineProps<{
 .menu-item.disabled > a, .menu-item.disabled > span {
   background-color: var(--n)
 }
+
+/* Fix padding when putting a Dropdown inside of a menu */
+.menu-item > .floating-dropdown {
+  padding: 0;
+}
+.menu-item > .floating-dropdown > .dropdown-button,
+.menu-item > .floating-dropdown > .dropdown-target {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem
+}
 </style>

package/index.ts

@@ -32,6 +32,7 @@ export { default as DrawerContent } from './components/DrawerContent.vue'
 export { default as DrawerSide } from './components/DrawerSide.vue'
 export { default as Dropdown } from './components/Dropdown.vue'
 export { default as DropdownContent } from './components/DropdownContent.vue'
+export { default as DropdownButton } from './components/DropdownButton.vue'
 export { default as DropdownTarget } from './components/DropdownTarget.vue'
 export { default as FileInput } from './components/FileInput.vue'
 export { default as Flex } from './components/Flex.vue'
@@ -60,6 +61,8 @@ export { default as Mask } from './components/Mask.vue'
 export { default as Menu } from './components/Menu.vue'
 export { default as MenuItem } from './components/MenuItem.vue'
 export { default as MenuTitle } from './components/MenuTitle.vue'
+export { default as MenuExpand } from './components/MenuExpand.vue'
+export { default as MenuExpandToggle } from './components/MenuExpandToggle.vue'
 export { default as MockupCode } from './components/MockupCode.vue'
 export { default as MockupBrowser } from './components/MockupBrowser.vue'
 export { default as MockupBrowserToolbar } from './components/MockupBrowserToolbar.vue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisy-ui-kit",
-  "version": "2.1.17",
+  "version": "3.0.0",
   "description": "",
   "scripts": {
     "build": "nuxi build",
@@ -20,6 +20,11 @@
     "utils/*",
     "nuxt.js"
   ],
+  "dependencies": {
+    "@floating-ui/vue": "^1.0.2",
+    "@vueuse/integrations": "^10.4.0",
+    "focus-trap": "^7.5.2"
+  },
   "peerDependencies": {
     "@vueuse/core": "^10.2.1",
     "daisyui": "^3",
@@ -29,10 +34,10 @@
     "prismjs": "^1.29.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.40.2",
+    "@antfu/eslint-config": "^0.41.0",
     "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "^2.0.18",
-    "@iconify/json": "^2.2.102",
+    "@iconify/json": "^2.2.106",
     "@nuxt/content": "^2.7.2",
     "@nuxt/kit": "link:@nuxt/kit",
     "@nuxtjs/color-mode": "^3.3.0",
@@ -41,26 +46,25 @@
     "@popperjs/core": "^2.11.8",
     "@rovit/popper": "^3.9.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.4",
+    "@tailwindcss/forms": "^0.5.5",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/integrations": "^10.3.0",
-    "@vueuse/nuxt": "^10.3.0",
+    "@vueuse/core": "^10.4.0",
+    "@vueuse/nuxt": "^10.4.0",
     "autoprefixer": "^10.4.15",
     "cookie": "^0.5.0",
-    "daisyui": "^3.5.1",
-    "eslint": "^8.47.0",
-    "feathers-pinia": "^3.0.7",
+    "daisyui": "^3.6.3",
+    "eslint": "^8.48.0",
+    "feathers-pinia": "^4.0.0",
     "fuse.js": "^6.6.2",
     "mobile-detect": "^1.4.5",
-    "nuxt": "^3.6.5",
+    "nuxt": "^3.7.0",
     "nuxt-icon": "^0.5.0",
     "ohmyfetch": "^0.4.21",
     "pinia": "^2.1.6",
     "postcss": "^8.4.28",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "unplugin-icons": "^0.16.5",
     "vue": "^3.3.4"
   }

package/utils/random-string.ts

@@ -0,0 +1,19 @@
+/**
+ * Generate a random string of `length` characters
+ *
+ * Usage:
+ * const myString = randomString(15);  // This will give you a random string of 15 characters
+ * @param length The length of the string to generate
+ * @returns A random string of `length` characters
+ */
+export function randomString(length: number = 10): string {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length)
+    result += characters[randomIndex]
+  }
+
+  return result
+}