@coreui/vue-pro 5.1.0 → 5.3.0

package/src/components/dropdown/utils.ts

@@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   return classNames
 }
 
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
 export const getPlacement = (
   placement: Placement,
   direction: string | undefined,

package/src/components/footer/CFooter.ts

@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CFooter = defineComponent({
   name: 'CFooter',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Place footer in non-static positions.
      *
@@ -18,7 +25,7 @@ const CFooter = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['footer', { [`footer-${props.position}`]: props.position }] },
         slots.default && slots.default(),
       )

package/src/components/footer/__tests__/CFooter.spec.ts

@@ -19,6 +19,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'footer',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('footer-fixed')).toBe(true)
   })
 })
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('FOOTER')
+  })
+})

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

@@ -60,7 +60,10 @@ const CMultiSelect = defineComponent({
      */
     feedbackValid: String,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * Set the id attribute for the native select element.
+     *
+     * **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property:
+     * - `<select name="\{id\}-multi-select" />`
      */
     id: String,
     /**
@@ -90,6 +93,12 @@ const CMultiSelect = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * The name attribute for the select element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * List of option elements.
      */
@@ -132,6 +141,12 @@ const CMultiSelect = defineComponent({
      * When it is present, it indicates that the user must choose a value before submitting the form.
      */
     required: Boolean,
+    /**
+     * Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.
+     *
+     * @since 5.3.0
+     */
+    resetSelectionOnOptionsChange: Boolean,
     /**
      * Enables search input element.
      */
@@ -298,7 +313,8 @@ const CMultiSelect = defineComponent({
       if (
         props.allowCreateOptions &&
         filteredOptions.value.some(
-          (option) => option.label && option.label.toLowerCase() === searchValue.value.toLowerCase(),
+          (option) =>
+            option.label && option.label.toLowerCase() === searchValue.value.toLowerCase(),
         )
       ) {
         return false
@@ -312,6 +328,12 @@ const CMultiSelect = defineComponent({
       (newValue, oldValue) => {
         if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
           options.value = newValue
+
+          if (props.resetSelectionOnOptionsChange) {
+            selected.value = []
+            return
+          }
+
           const _selected = flattenedOptions.value.filter(
             (option: Option | OptionsGroup) => option.selected === true,
           )
@@ -355,6 +377,12 @@ const CMultiSelect = defineComponent({
 
       emit('hide')
 
+      searchValue.value = ''
+
+      if (searchRef.value) {
+        searchRef.value.value = ''
+      }
+
       window.removeEventListener('mouseup', handleMouseUp)
       window.removeEventListener('keyup', handleKeyUp)
 
@@ -505,6 +533,7 @@ const CMultiSelect = defineComponent({
       h(CMultiSelectNativeSelect, {
         id: props.id,
         multiple: props.multiple,
+        name: props.name,
         options: selected.value,
         required: props.required,
         value: props.multiple
@@ -542,7 +571,6 @@ const CMultiSelect = defineComponent({
                   },
                 ],
                 'aria-expanded': visible.value,
-                id: props.id,
                 ref: multiSelectRef,
               },
               {

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

@@ -10,6 +10,7 @@ const CMultiSelectNativeSelect = defineComponent({
       type: Boolean,
       default: true,
     },
+    name: String,
     options: {
       type: Array as PropType<Option[]>,
       default: () => [],
@@ -38,8 +39,9 @@ const CMultiSelectNativeSelect = defineComponent({
         'select',
         {
           className: 'multi-select-new',
-          ...(props.id && { id: `${props.id}-multi-select` }),
-          ...(props.id && { name: `${props.id}-multi-select` }),
+          id: props.id,
+          ...(props.id && !props.name && { name: `${props.id}-multi-select` }), // TODO: remove in v6
+          ...(props.name && { name: props.name }), // TODO: change to `name: props.name` in v6
           multiple: props.multiple,
           tabIndex: '-1',
           style: { display: 'none' },

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

@@ -63,6 +63,7 @@ const CMultiSelectSelection = defineComponent({
                   !option.disabled &&
                     h('button', {
                       class: 'form-multi-select-tag-delete',
+                      type: 'button',
                       ariaLabel: 'Close',
                       onClick: () => handleRemove(option),
                     }),

package/src/components/popover/CPopover.ts

@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -119,6 +119,7 @@ const CPopover = defineComponent({
     const popoverRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -149,7 +150,7 @@ const CPopover = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('popover')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {

package/src/components/tabs/CTab.ts

@@ -0,0 +1,45 @@
+import { defineComponent, h, inject, Ref } from 'vue'
+
+const CTab = defineComponent({
+  name: 'CTab',
+  props: {
+    /**
+     * Item key.
+     */
+    itemKey: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const activeItemKey = inject('activeItemKey') as Ref<number | string>
+    const id = inject('id') as Ref<number | string>
+    const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
+
+    const isActive = () => props.itemKey === activeItemKey.value
+
+    return () =>
+      h(
+        'button',
+        {
+          class: [
+            'nav-link',
+            {
+              active: isActive(),
+            },
+          ],
+          id: `${props.itemKey}-tab-${id.value}`,
+          role: 'tab',
+          tabindex: isActive() ? 0 : -1,
+          type: 'button',
+          'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
+          'aria-selected': isActive(),
+          onClick: () => setActiveItemKey(props.itemKey),
+          onFocus: () => setActiveItemKey(props.itemKey),
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CTab }

package/src/components/tabs/CTabList.ts

@@ -0,0 +1,89 @@
+import { defineComponent, h, ref } from 'vue'
+import { getNextActiveElement } from '../../utils'
+
+const CTabList = defineComponent({
+  name: 'CTabList',
+  props: {
+    /**
+     * Specify a layout type for component.
+     *
+     * @values 'fill', 'justified'
+     */
+    layout: {
+      type: String,
+      validator: (value: string) => {
+        return ['fill', 'justified'].includes(value)
+      },
+    },
+    /**
+     * Set the nav variant to tabs or pills.
+     *
+     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+      },
+    },
+  },
+  setup(props, { slots }) {
+    const tabListRef = ref<HTMLDivElement>()
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        tabListRef.value &&
+        (event.key === 'ArrowDown' ||
+          event.key === 'ArrowUp' ||
+          event.key === 'ArrowLeft' ||
+          event.key === 'ArrowRight' ||
+          event.key === 'Home' ||
+          event.key === 'End')
+      ) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        // eslint-disable-next-line unicorn/prefer-spread
+        const items: HTMLElement[] = Array.from(
+          tabListRef.value.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+        )
+
+        let nextActiveElement
+
+        if (event.key === 'Home' || event.key === 'End') {
+          nextActiveElement = event.key === 'End' ? items.at(-1) : items[0]
+        } else {
+          nextActiveElement = getNextActiveElement(
+            items,
+            target,
+            event.key === 'ArrowDown' || event.key === 'ArrowRight',
+            true,
+          )
+        }
+
+        if (nextActiveElement) {
+          nextActiveElement.focus({ preventScroll: true })
+        }
+      }
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          class: [
+            'nav',
+            {
+              [`nav-${props.layout}`]: props.layout,
+              [`nav-${props.variant}`]: props.variant,
+            },
+          ],
+          role: 'tablist',
+          onKeydown: (event) => handleKeydown(event),
+          ref: tabListRef,
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CTabList }

package/src/components/tabs/CTabPane.ts

@@ -5,6 +5,15 @@ import { executeAfterTransition } from '../../utils/transition'
 const CTabPane = defineComponent({
   name: 'CTabPane',
   props: {
+    /**
+     * Enable fade in and fade out transition.
+     *
+     * @since 5.1.0
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Toggle the visibility of component.
      */
@@ -57,9 +66,9 @@ const CTabPane = defineComponent({
               {
                 class: [
                   'tab-pane',
-                  'fade',
                   {
                     active: props.visible,
+                    fade: props.transition,
                     show: firstRender.value && props.visible,
                   },
                 ],

package/src/components/tabs/CTabPanel.ts

@@ -0,0 +1,129 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  ref,
+  Ref,
+  RendererElement,
+  Transition,
+  vShow,
+  watch,
+  withDirectives,
+} from 'vue'
+
+import { executeAfterTransition } from '../../utils/transition'
+
+const CTabPanel = defineComponent({
+  name: 'CTabPanel',
+  props: {
+    /**
+     * Item key.
+     */
+    itemKey: {
+      type: [Number, String],
+      required: true,
+    },
+    /**
+     * Enable fade in and fade out transition.
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Toggle the visibility of component.
+     */
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { slots, emit }) {
+    const activeItemKey = inject('activeItemKey') as Ref<number | string>
+    const id = inject('id') as Ref<number | string>
+
+    const tabPaneRef = ref()
+    const firstRender = ref(true)
+    const visible = ref()
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    watch(
+      activeItemKey,
+      () => {
+        visible.value = Boolean(activeItemKey.value === props.itemKey)
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    const handleEnter = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('show')
+      setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
+        el.classList.add('show')
+      }, 1)
+    }
+
+    const handleLeave = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('hide')
+      el.classList.remove('show')
+      executeAfterTransition(() => done(), el as HTMLElement)
+    }
+
+    return () =>
+      h(
+        Transition,
+        {
+          onEnter: (el, done) => handleEnter(el, done),
+          onLeave: (el, done) => handleLeave(el, done),
+        },
+        () =>
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'tab-pane',
+                  {
+                    active: visible.value,
+                    fade: props.transition,
+                    show: firstRender.value && visible.value,
+                  },
+                ],
+                id: `${props.itemKey}-tab-panel-${id.value}`,
+                role: 'tabpanel',
+                'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
+                tabindex: 0,
+                ref: tabPaneRef,
+              },
+              slots.default && slots.default(),
+            ),
+            [[vShow, visible.value]],
+          ),
+      )
+  },
+})
+
+export { CTabPanel }

package/src/components/tabs/CTabs.ts

@@ -0,0 +1,45 @@
+import { defineComponent, h, provide, ref, watch } from 'vue'
+import { useUniqueId } from '../../composables'
+
+const CTabs = defineComponent({
+  name: 'CTabs',
+  props: {
+    /**
+     * The active item key.
+     */
+    activeItemKey: {
+      type: [Number, String],
+      required: true,
+    }
+  },
+  emits: [
+    /**
+     * The callback is fired when the active tab changes.
+     */
+    'change',
+  ],
+  setup(props, { slots, emit }) {
+    const { getUID } = useUniqueId()
+    const uID = ref(getUID())
+    const activeItemKey = ref(props.activeItemKey)
+    const setActiveItemKey = (key: string | number) => {
+      activeItemKey.value = key
+    }
+
+    watch(
+      () => props.activeItemKey,
+      (value) => {
+        activeItemKey.value = value
+        emit('change', value)
+      },
+    )
+
+    provide('activeItemKey', activeItemKey)
+    provide('id', uID)
+    provide('setActiveItemKey', setActiveItemKey)
+
+    return () => h('div', { class: 'tabs' }, slots.default && slots.default())
+  },
+})
+
+export { CTabs }

package/src/components/tabs/index.ts

@@ -1,12 +1,20 @@
 import { App } from 'vue'
+import { CTab } from './CTab'
 import { CTabContent } from './CTabContent'
+import { CTabList } from './CTabList'
 import { CTabPane } from './CTabPane'
+import { CTabPanel } from './CTabPanel'
+import { CTabs } from './CTabs'
 
 const CTabsPlugin = {
   install: (app: App): void => {
+    app.component(CTab.name as string, CTab)
     app.component(CTabContent.name as string, CTabContent)
+    app.component(CTabList.name as string, CTabList)
     app.component(CTabPane.name as string, CTabPane)
+    app.component(CTabPanel.name as string, CTabPanel)
+    app.component(CTabs.name as string, CTabs)
   },
 }
 
-export { CTabsPlugin, CTabContent, CTabPane }
+export { CTabsPlugin, CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs }

package/src/components/time-picker/CTimePicker.ts

@@ -213,6 +213,12 @@ const CTimePicker = defineComponent({
       >,
       default: true,
     },
+    /**
+     * Set the name attribute for the input element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -436,6 +442,8 @@ const CTimePicker = defineComponent({
           autocomplete: 'off',
           class: 'time-picker-input',
           disabled: props.disabled,
+          id: props.id,
+          name: props.name,
           onInput: (event: Event) =>
             useDebouncedCallback(() => {
               if (isValidTime((event.target as HTMLInputElement).value)) {

package/src/components/tooltip/CTooltip.ts

@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -115,6 +115,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -145,7 +146,7 @@ const CTooltip = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('tooltip')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {

package/src/composables/index.ts

@@ -2,5 +2,6 @@ import { useColorModes } from './useColorModes'
 import { useDebouncedCallback } from './useDebouncedCallback'
 import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
+import { useUniqueId } from './useUniqueId'
 
-export { useColorModes, useDebouncedCallback, useIsVisible, usePopper }
+export { useColorModes, useDebouncedCallback, useIsVisible, usePopper, useUniqueId }

package/src/composables/useUniqueId.ts

@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+export const useUniqueId = (prefix: string = '') => {
+  const ids = ref<string[]>([])
+
+  const getUID = () => {
+    do {
+      prefix += Math.floor(Math.random() * 1_000_000)
+    } while (ids.value.includes(prefix))
+    
+    ids.value.push(prefix)
+    return prefix
+  }
+
+  return {
+    getUID,
+  }
+}