@coreui/vue-pro 5.17.1 → 5.19.0

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

@@ -14,6 +14,14 @@ const CMultiSelectOptions = defineComponent({
       type: Array as PropType<(Option | OptionsGroup)[]>,
       default: () => [],
     },
+    optionsGroupsSelectable: Boolean,
+    optionsGroupsStyle: {
+      type: String,
+      default: 'checkbox',
+      validator: (value: string) => {
+        return ['checkbox', 'text'].includes(value)
+      },
+    },
     optionsMaxHeight: {
       type: [Number, String],
       default: 'auto',
@@ -40,7 +48,7 @@ const CMultiSelectOptions = defineComponent({
       default: 10,
     },
   },
-  emits: ['optionClick'],
+  emits: ['groupClick', 'optionClick'],
   setup(props, { emit }) {
     const handleKeyDown = (event: KeyboardEvent, option: Option) => {
       if (event.code === 'Space' || event.key === 'Enter') {
@@ -66,10 +74,49 @@ const CMultiSelectOptions = defineComponent({
       }
     }
 
+    const handleGroupKeyDown = (event: KeyboardEvent, group: OptionsGroup) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        emit('groupClick', group)
+        return
+      }
+
+      if (event.key === 'Down' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        const next = getNextSibling(event.target as HTMLElement, '.form-multi-select-option')
+
+        next && (next as HTMLElement).focus()
+      }
+
+      if (event.key === 'Up' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        const prev = getPreviousSibling(event.target as HTMLElement, '.form-multi-select-option')
+
+        prev && (prev as HTMLElement).focus()
+      }
+    }
+
+    const getGroupCheckboxState = (group: OptionsGroup) => {
+      const groupOptions = (group.options ?? []).filter((option) => !option.disabled)
+      const selectedCount = groupOptions.filter((option) =>
+        props.selected.some((_option) => _option.value === option.value),
+      ).length
+
+      if (groupOptions.length > 0 && selectedCount >= groupOptions.length) {
+        return 'all'
+      }
+
+      return selectedCount === 0 ? 'none' : 'indeterminate'
+    }
+
     const handleOptionClick = (option: Option) => {
       emit('optionClick', option as Option)
     }
 
+    const handleGroupClick = (group: OptionsGroup) => {
+      emit('groupClick', group as OptionsGroup)
+    }
+
     // TODO: find solution how to remove any
     const createOptions = (options: (Option | OptionsGroup)[]): VNode | VNode[] | any =>
       options.length > 0
@@ -103,14 +150,41 @@ const CMultiSelectOptions = defineComponent({
               : [
                   h(
                     'div',
-                    { class: 'form-multi-select-optgroup-label' },
+                    {
+                      class: [
+                        'form-multi-select-optgroup-label',
+                        {
+                          'form-multi-select-optgroup-label-with-checkbox':
+                            props.optionsGroupsSelectable && props.optionsGroupsStyle === 'checkbox',
+                          'form-multi-selected':
+                            props.optionsGroupsSelectable &&
+                            props.optionsGroupsStyle === 'checkbox' &&
+                            getGroupCheckboxState(option) === 'all',
+                          'form-multi-select-indeterminate':
+                            props.optionsGroupsSelectable &&
+                            props.optionsGroupsStyle === 'checkbox' &&
+                            getGroupCheckboxState(option) === 'indeterminate',
+                        },
+                      ],
+                      ...(props.optionsGroupsSelectable &&
+                        props.optionsGroupsStyle === 'checkbox' && {
+                          onClick: () => handleGroupClick(option as OptionsGroup),
+                          onKeydown: (event: any) => handleGroupKeyDown(event, option as OptionsGroup),
+                          tabindex: 0,
+                          role: 'button',
+                        }),
+                    },
                     props.scopedSlots && props.scopedSlots['options-groups']
                       ? h(props.scopedSlots['options-groups'], { option: option })
                       : option.label,
                   ),
                 ],
           )
-        : h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel)
+        : h(
+            'div',
+            { class: 'form-multi-select-options-empty', role: 'status' },
+            props.searchNoResultsLabel,
+          )
 
     return () => [
       props.virtualScroller

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

@@ -5,6 +5,10 @@ import type { Option, Search } from './types'
 const CMultiSelectSelection = defineComponent({
   name: 'CMultiSelectSelection',
   props: {
+    ariaTagDeleteLabel: {
+      type: String,
+      default: 'Remove',
+    },
     disabled: Boolean,
     multiple: {
       type: Boolean,
@@ -70,6 +74,7 @@ const CMultiSelectSelection = defineComponent({
               'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
             },
           ],
+          'aria-live': 'polite',
         },
         [
           props.multiple &&
@@ -93,7 +98,7 @@ const CMultiSelectSelection = defineComponent({
                     h('button', {
                       class: 'form-multi-select-tag-delete',
                       type: 'button',
-                      ariaLabel: 'Close',
+                      ariaLabel: `${props.ariaTagDeleteLabel} ${option.label}`.trim(),
                       onClick: () => handleRemove(option),
                     }),
                 ])

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

@@ -28,7 +28,7 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
         option.options &&
         option.options.filter(
           (option: Option) =>
-            option.label && option.label.toLowerCase().includes(search.toLowerCase()),
+            option.label && option.label.toLowerCase().includes(search.toLowerCase())
         )
       if (
         (option.label && option.label.toLowerCase().includes(search.toLowerCase())) ||
@@ -46,7 +46,7 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
 
 export const flattenOptionsArray = (
   options: (Option | OptionsGroup)[],
-  keepGroupLabel?: boolean,
+  keepGroupLabel?: boolean
 ): (Option | OptionsGroup)[] => {
   const optionsList: (Option | OptionsGroup)[] = []
 
@@ -68,7 +68,7 @@ export const flattenOptionsArray = (
 
 export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
   return Array.from(
-    container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
+    container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)')
   )
 }
 
@@ -90,10 +90,10 @@ export const selectOptions = (
   multiple: boolean,
   options: (Option | OptionsGroup)[],
   selected: SelectedOption[],
-  deselected?: Option[],
+  deselected?: Option[]
 ) => {
   if (!multiple) {
-    return [options[0]] as SelectedOption[]
+    return options.length > 0 ? ([options[0]] as SelectedOption[]) : []
   }
 
   let _selected = [...selected, ...options]
@@ -101,7 +101,7 @@ export const selectOptions = (
   if (deselected) {
     _selected = _selected.filter(
       (selectedOption) =>
-        !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
+        !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value)
     )
   }
 

package/src/components/nav/CNav.ts

@@ -29,7 +29,14 @@ const CNav = defineComponent({
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['enclosed', 'enclosed-pills', 'pills', 'tabs', 'underline', 'underline-border'].includes(value)
+        return [
+          'enclosed',
+          'enclosed-pills',
+          'pills',
+          'tabs',
+          'underline',
+          'underline-border',
+        ].includes(value)
       },
     },
   },
@@ -48,7 +55,7 @@ const CNav = defineComponent({
           ],
           role: 'navigation',
         },
-        slots.default && slots.default(),
+        slots.default && slots.default()
       )
   },
 })

package/src/components/nav/CNavGroup.ts

@@ -1,4 +1,15 @@
-import { defineComponent, h, onMounted, ref, RendererElement, Transition, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject,
+  provide,
+  Ref,
+  ref,
+  useId,
+  watch,
+} from 'vue'
 
 import { executeAfterTransition } from '../../utils/transition'
 
@@ -17,149 +28,186 @@ const CNavGroup = defineComponent({
      */
     compact: Boolean,
     /**
-     * Show nav group items.
+     * Show nav group items. Acts as the initial state on its own, or as the controlled value
+     * when paired with a `v-model:visible` / `@update:visible` listener.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: undefined,
+    },
   },
-  emits: ['visible-change'],
+  emits: ['update:visible', 'visible-change'],
   setup(props, { slots, emit }) {
-    const visible = ref()
-    const navGroupRef = ref()
-    const visibleGroup = ref()
+    const key = useId()
+    const instance = getCurrentInstance()
+    const hasUpdateListener = Boolean(instance?.vnode.props?.['onUpdate:visible'])
 
-    const handleVisibleChange = (visible: boolean, index: number) => {
-      if (visible) {
-        visibleGroup.value = index
-      } else {
-        if (visibleGroup.value === index) {
-          visibleGroup.value = 0
-        }
-      }
-    }
+    const navGroupItemsRef = ref<HTMLElement>()
 
-    const isVisible = (index: number) => Boolean(visibleGroup.value === index)
+    const parentActiveKey = inject<Ref<string | undefined> | undefined>(
+      'cNavGroupActiveKey',
+      undefined
+    )
+    const parentSetActiveKey = inject<((key?: string) => void) | undefined>(
+      'cNavGroupSetActiveKey',
+      undefined
+    )
+    const parentOpenBranch = inject<(() => void) | undefined>('cNavGroupOpenBranch', undefined)
+
+    const controlled = computed(() => props.visible !== undefined && hasUpdateListener)
+
+    const internal = ref(Boolean(props.visible))
+
+    const visible = computed(() => {
+      if (controlled.value) {
+        return props.visible as boolean
+      }
 
-    onMounted(() => {
-      visible.value = props.visible
-      if (props.visible) {
-        navGroupRef.value.classList.add('show')
+      if (parentActiveKey) {
+        return parentActiveKey.value === key
       }
 
-      emit('visible-change', visible.value)
+      return internal.value
     })
 
+    const activeGroupKey = ref<string>()
+    provide('cNavGroupActiveKey', activeGroupKey)
+    provide('cNavGroupSetActiveKey', (value?: string) => {
+      activeGroupKey.value = value
+    })
+
+    const openBranch = () => {
+      parentSetActiveKey?.(key)
+      parentOpenBranch?.()
+    }
+    provide('cNavGroupOpenBranch', openBranch)
+
+    // Seed the accordion / local state from the `visible` prop: opens default-open groups and
+    // follows later changes (and keeps controlled groups in sync). Watching `props.visible`
+    // keeps this from re-running on accordion changes, so a default-open group can be collapsed
+    // manually.
     watch(
       () => props.visible,
-      () => {
-        visible.value = props.visible
+      (value) => {
+        if (value === undefined) {
+          return
+        }
 
-        if (visible.value === false) {
-          visibleGroup.value = undefined
+        if (parentSetActiveKey) {
+          if (value) {
+            parentSetActiveKey(key)
+          } else if (parentActiveKey && parentActiveKey.value === key) {
+            parentSetActiveKey(undefined)
+          }
+        } else {
+          internal.value = value
         }
       },
+      { immediate: true }
     )
 
-    watch(visible, () => {
-      emit('visible-change', visible.value)
-    })
+    // Accordion: when another branch opens, a controlled group must close too. As its
+    // visibility is owned by the parent, request the change through `update:visible`.
+    watch(
+      () => parentActiveKey?.value,
+      (activeKey) => {
+        if (!controlled.value || !props.visible) {
+          return
+        }
 
-    const handleTogglerClick = (event: Event) => {
-      event.preventDefault()
-      visible.value = !visible.value
-      emit('visible-change', visible.value)
-    }
+        if (activeKey !== undefined && activeKey !== key) {
+          emit('update:visible', false)
+        }
+      }
+    )
 
-    const handleBeforeEnter = (el: RendererElement) => {
-      el.style.height = '0px'
-      navGroupRef.value.classList.add('show')
-    }
+    // Animate the height of the always-mounted items, after the `show` class (driven straight
+    // from `visible`, so the toggler indicator reacts immediately). `display` is forced while
+    // collapsing to override the `.nav-group:not(.show) .nav-group-items { display: none }` rule.
+    watch(
+      visible,
+      (value) => {
+        emit('visible-change', value)
 
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const handleEnter = (el: RendererElement, done: () => void) => {
-      executeAfterTransition(() => done(), el as HTMLElement)
-      el.style.height = `${el.scrollHeight}px`
-    }
+        const el = navGroupItemsRef.value
+        if (!el) {
+          return
+        }
 
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const handleAfterEnter = (el: RendererElement) => {
-      el.style.height = 'auto'
-    }
+        el.style.display = 'block'
+
+        // Each branch sets the starting height, forces a reflow by reading `offsetHeight`, then
+        // sets the target height. The reflow makes the browser commit the starting value, so the
+        // CSS height transition runs instead of both writes collapsing into a single frame.
+        if (value) {
+          el.style.height = '0px'
+          el.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions
+          el.style.height = `${el.scrollHeight}px`
+          executeAfterTransition(() => {
+            el.style.height = 'auto'
+          }, el)
+        } else {
+          el.style.height = `${el.scrollHeight}px`
+          el.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions
+          el.style.height = '0px'
+          executeAfterTransition(() => {
+            el.style.display = ''
+            el.style.height = ''
+          }, el)
+        }
+      },
+      { flush: 'post' }
+    )
 
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const handleBeforeLeave = (el: RendererElement) => {
-      el.style.height = `${el.scrollHeight}px`
-    }
+    const handleTogglerClick = (event: Event) => {
+      event.preventDefault()
 
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const handleLeave = (el: RendererElement, done: () => void) => {
-      executeAfterTransition(() => done(), el as HTMLElement)
-      setTimeout(() => {
-        el.style.height = '0px'
-      }, 1)
-    }
+      const next = !visible.value
+      emit('update:visible', next)
+
+      if (controlled.value) {
+        return
+      }
 
-    const handleAfterLeave = () => {
-      navGroupRef.value.classList.remove('show')
+      if (parentSetActiveKey) {
+        parentSetActiveKey(next ? key : undefined)
+      } else {
+        internal.value = next
+      }
     }
 
     return () =>
       h(
         props.as,
         {
-          class: 'nav-group',
-          ref: navGroupRef,
+          class: ['nav-group', { show: visible.value }],
         },
         [
           slots.togglerContent &&
             h(
               'a',
               {
+                'aria-expanded': visible.value,
                 class: ['nav-link', 'nav-group-toggle'],
                 href: '#',
                 onClick: handleTogglerClick,
               },
-              slots.togglerContent && slots.togglerContent(),
+              slots.togglerContent && slots.togglerContent({ visible: visible.value })
             ),
           h(
-            Transition,
-            {
-              css: false,
-              onBeforeEnter: (el) => handleBeforeEnter(el),
-              onEnter: (el, done) => handleEnter(el, done),
-              onAfterEnter: (el) => handleAfterEnter(el),
-              onBeforeLeave: (el) => handleBeforeLeave(el),
-              onLeave: (el, done) => handleLeave(el, done),
-              onAfterLeave: () => handleAfterLeave(),
-            },
+            props.as === 'div' ? 'div' : 'ul',
             {
-              default: () =>
-                visible.value &&
-                h(
-                  props.as === 'div' ? 'div' : 'ul',
-                  {
-                    class: [
-                      'nav-group-items',
-                      {
-                        compact: props.compact,
-                      },
-                    ],
-                  },
-                  slots.default &&
-                    slots.default().map((vnode, index) => {
-                      // @ts-expect-error name is defined in component
-                      if (vnode.type.name === 'CNavGroup') {
-                        return h(vnode, {
-                          onVisibleChange: (visible: boolean) =>
-                            handleVisibleChange(visible, index + 1),
-                          ...(visibleGroup.value && { visible: isVisible(index + 1) }),
-                        })
-                      }
-                      return vnode
-                    }),
-                ),
+              class: [
+                'nav-group-items',
+                {
+                  compact: props.compact,
+                },
+              ],
+              ref: navGroupItemsRef,
             },
+            slots.default && slots.default()
           ),
-        ],
+        ]
       )
   },
 })

package/src/components/nav/CNavItem.ts

@@ -54,9 +54,9 @@ const CNavItem = defineComponent({
               },
               {
                 default: () => slots.default && slots.default(),
-              },
+              }
             )
-          : slots.default && slots.default(),
+          : slots.default && slots.default()
       )
   },
 })

package/src/components/nav/CNavLink.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject, onMounted, watch } from 'vue'
 
 import { CLink } from '../link/CLink'
 
@@ -26,6 +26,23 @@ const CNavLink = defineComponent({
     href: String,
   },
   setup(props, { slots }) {
+    const openBranch = inject<(() => void) | undefined>('cNavGroupOpenBranch', undefined)
+
+    onMounted(() => {
+      if (props.active && openBranch) {
+        openBranch()
+      }
+    })
+
+    watch(
+      () => props.active,
+      (active, previous) => {
+        if (active && !previous && openBranch) {
+          openBranch()
+        }
+      }
+    )
+
     return () =>
       h(
         CLink,
@@ -38,7 +55,7 @@ const CNavLink = defineComponent({
         },
         {
           default: () => slots.default && slots.default(),
-        },
+        }
       )
   },
 })