@coreui/vue-pro 5.6.0 → 5.7.0

package/src/components/multi-select/types.ts

@@ -13,6 +13,15 @@ export type OptionsGroup = {
   [key: string]: number | string | any
 }
 
+export type Search =
+  | boolean
+  | 'external'
+  | 'global'
+  | {
+      external?: boolean
+      global?: boolean
+    }
+
 export type SelectedOption = {
   disabled?: boolean
   label: string

package/src/components/multi-select/utils.ts

@@ -1,4 +1,4 @@
-import type { Option, OptionsGroup, SelectedOption } from './types'
+import type { Option, OptionsGroup, Search, SelectedOption } from './types'
 
 export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
   const value = label.toLowerCase().replace(/\s/g, '-')
@@ -83,6 +83,12 @@ export const getNextSibling = (elem: HTMLElement, selector?: string) => {
   return
 }
 
+export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
+  return Array.from(
+    container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
+  )
+}
+
 export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
   // Get the next sibling element
   let sibling = elem.previousElementSibling
@@ -100,11 +106,30 @@ export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
   return
 }
 
+export const isExternalSearch = (search: Search): boolean => {
+  return (
+    (typeof search === 'string' && search === 'external') ||
+    (typeof search === 'object' && search.external === true)
+  )
+}
+
+export const isGlobalSearch = (search: Search): boolean => {
+  return (
+    (typeof search === 'string' && search === 'global') ||
+    (typeof search === 'object' && search.global === true)
+  )
+}
+
 export const selectOptions = (
+  multiple: boolean,
   options: (Option | OptionsGroup)[],
   selected: SelectedOption[],
   deselected?: Option[],
 ) => {
+  if (!multiple) {
+    return [options[0]] as SelectedOption[]
+  }
+
   let _selected = [...selected, ...options]
 
   if (deselected) {

package/src/components/nav/CNavItem.ts

@@ -10,7 +10,10 @@ interface CNavItemProps extends ComponentProps<typeof CNavLink> {
 const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
-    ...CNavLink.props,
+    /**
+     * Toggle the active state for the component.
+     */
+    active: Boolean,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
@@ -18,6 +21,14 @@ const CNavItem = defineComponent({
       type: String,
       default: 'li',
     },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * @ignore
+     */
+    href: String,
   },
   setup(props: CNavItemProps, { slots }) {
     return () =>

package/src/composables/index.ts

@@ -1,7 +1,15 @@
 import { useColorModes } from './useColorModes'
 import { useDebouncedCallback } from './useDebouncedCallback'
+import { useDropdownWithPopper } from './useDropdownWithPopper'
 import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 import { useUniqueId } from './useUniqueId'
 
-export { useColorModes, useDebouncedCallback, useIsVisible, usePopper, useUniqueId }
+export {
+  useColorModes,
+  useDebouncedCallback,
+  useDropdownWithPopper,
+  useIsVisible,
+  usePopper,
+  useUniqueId,
+}

package/src/composables/useDropdownWithPopper.ts

@@ -0,0 +1,130 @@
+import { ref, computed, watch, onUnmounted } from 'vue'
+import type { Options, Placement } from '@popperjs/core'
+
+import { usePopper } from './usePopper'
+import { isRTL } from '../utils'
+
+export const useDropdownWithPopper = <T extends HTMLElement = never>(
+  popperConfig?: Partial<Options>,
+) => {
+  // References to the dropdown elements
+  const dropdownRefElement = ref<T | null>(null)
+  const dropdownMenuElement = ref<HTMLDivElement | null>(null)
+
+  // Reactive state to control dropdown visibility
+  const isOpen = ref<boolean>(false)
+
+  // Popper.js integration
+  const { popper, initPopper, destroyPopper } = usePopper()
+
+  // Computed Popper configuration based on RTL and user-provided settings
+  const _popperConfig = computed(() => ({
+    placement: (isRTL(dropdownRefElement.value) ? 'bottom-end' : 'bottom-start') as Placement,
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: 'clippingParents',
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 2],
+        },
+      },
+    ],
+    ...popperConfig,
+  }))
+
+  // Methods to control dropdown state
+  const closeDropdown = () => {
+    isOpen.value = false
+  }
+
+  const openDropdown = () => {
+    isOpen.value = true
+  }
+
+  const toggleDropdown = () => {
+    isOpen.value = !isOpen.value
+  }
+
+  const updatePopper = () => {
+    if (popper) {
+      popper.update()
+    }
+  }
+
+  // Event handlers
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      isOpen.value = false
+      return
+    }
+
+    if (event.key === 'Tab') {
+      const activeElement = document.activeElement as HTMLElement
+
+      if (
+        dropdownRefElement.value?.contains(activeElement) ||
+        dropdownMenuElement.value?.contains(activeElement)
+      ) {
+        return
+      }
+
+      isOpen.value = false
+    }
+  }
+
+  const handleMouseUp = (event: Event) => {
+    const target = event.target as HTMLElement
+
+    if (dropdownMenuElement.value?.contains(target) || dropdownRefElement.value?.contains(target)) {
+      return
+    }
+
+    isOpen.value = false
+  }
+
+  // Utility functions to manage event listeners
+  const addEventListeners = () => {
+    window.addEventListener('mouseup', handleMouseUp)
+    window.addEventListener('keyup', handleKeyUp)
+  }
+
+  const removeEventListeners = () => {
+    window.removeEventListener('mouseup', handleMouseUp)
+    window.removeEventListener('keyup', handleKeyUp)
+  }
+
+  // Watcher to handle side effects when `isOpen` changes
+  watch(isOpen, (open) => {
+    if (open) {
+      addEventListeners()
+
+      if (dropdownRefElement.value && dropdownMenuElement.value) {
+        initPopper(dropdownRefElement.value, dropdownMenuElement.value, _popperConfig.value)
+      }
+    } else {
+      removeEventListeners()
+      destroyPopper()
+    }
+  })
+
+  // Cleanup on component unmount
+  onUnmounted(() => {
+    removeEventListeners()
+    destroyPopper()
+  })
+
+  return {
+    dropdownRefElement,
+    dropdownMenuElement,
+    isOpen,
+    closeDropdown,
+    openDropdown,
+    toggleDropdown,
+    updatePopper,
+  }
+}