@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

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

@@ -5,29 +5,17 @@ import type { Option } from './types'
 const CMultiSelectNativeSelect = defineComponent({
   name: 'CMultiSelectGroupOption',
   props: {
-    /**
-     * It specifies that multiple options can be selected at once.
-     *
-     * @default true
-     */
+    id: String,
     multiple: {
       type: Boolean,
       default: true,
-      required: false,
     },
-    /**
-     * List of option elements.
-     */
     options: {
       type: Array as PropType<Option[]>,
       default: () => [],
-      required: false,
-    },
-    value: {
-      type: [Number, String, Array],
-      default: undefined,
-      require: false,
     },
+    required: Boolean,
+    value: [Number, String, Array],
   },
   emits: ['change'],
   setup(props, { emit }) {
@@ -39,6 +27,7 @@ const CMultiSelectNativeSelect = defineComponent({
           : h('option', { disabled: option.disabled, value: option.value })
       })
     }
+
     const handleChange = (event: Event) => {
       const target = event.target as HTMLSelectElement
       emit('change', Number(target.value))
@@ -48,9 +37,13 @@ const CMultiSelectNativeSelect = defineComponent({
       h(
         'select',
         {
+          className: 'multi-select-new',
+          ...(props.id && { id: `${props.id}-multi-select` }),
+          ...(props.id && { name: `${props.id}-multi-select` }),
           multiple: props.multiple,
           tabIndex: '-1',
           style: { display: 'none' },
+          required: props.required,
           value: props.value,
           ref: nativeSelectRef,
           onChange: handleChange,

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

@@ -1,35 +1,23 @@
 import { defineComponent, h, PropType, VNode } from 'vue'
 
+import { CElementCover } from '../element-cover'
 import { CVirtualScroller } from '../virtual-scroller'
 
 import { getNextSibling, getPreviousSibling } from './utils'
-import type { Option } from './types'
+import type { Option, OptionsGroup } from './types'
 
 const CMultiSelectOptions = defineComponent({
   name: 'CMultiSelectOptions',
   props: {
-    /**
-     * List of option elements.
-     */
+    loading: Boolean,
     options: {
-      type: Array as PropType<Option[]>,
+      type: Array as PropType<(Option | OptionsGroup)[]>,
       default: () => [],
     },
-    /**
-     * Sets maxHeight of options list.
-     *
-     * @default 'auto'
-     */
     optionsMaxHeight: {
       type: [Number, String],
       default: 'auto',
     },
-    /**
-     * Sets option style.
-     *
-     * @values 'checkbox', 'text'
-     * @default 'checkbox'
-     */
     optionsStyle: {
       type: String,
       default: 'checkbox',
@@ -37,9 +25,7 @@ const CMultiSelectOptions = defineComponent({
         return ['checkbox', 'text'].includes(value)
       },
     },
-    /**
-     * Sets the label for no results when filtering.
-     */
+    scopedSlots: Object,
     searchNoResultsLabel: {
       type: String,
       default: 'no items',
@@ -67,18 +53,16 @@ const CMultiSelectOptions = defineComponent({
         event.preventDefault()
         const target = event.target as HTMLElement
         const next = getNextSibling(target, '.form-multi-select-option')
-        if (next) {
-          ;(next as HTMLElement).focus() // eslint-disable-line prettier/prettier
-        }
+
+        next && (next as HTMLElement).focus()
       }
 
       if (event.key === 'Up' || event.key === 'ArrowUp') {
         event.preventDefault()
         const target = event.target as HTMLElement
         const prev = getPreviousSibling(target, '.form-multi-select-option')
-        if (prev) {
-          ;(prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
-        }
+
+        prev && (prev as HTMLElement).focus()
       }
     }
 
@@ -87,15 +71,11 @@ const CMultiSelectOptions = defineComponent({
     }
 
     // TODO: find solution how to remove any
-    const createOptions = (options: Option[]): VNode | VNode[] | any =>
+    const createOptions = (options: (Option | OptionsGroup)[]): VNode | VNode[] | any =>
       options.length > 0
-        ? options.map((option: Option) =>
-            option.options
-              ? [
-                  h('div', { class: 'form-multi-select-optgroup-label' }, option.label),
-                  createOptions(option.options),
-                ]
-              : h(
+        ? options.map((option: Option | OptionsGroup) =>
+            'value' in option
+              ? h(
                   'div',
                   {
                     class: [
@@ -108,16 +88,27 @@ const CMultiSelectOptions = defineComponent({
                         disabled: option.disabled,
                       },
                     ],
-                    onClick: () => handleOptionClick(option),
-                    onKeydown: (event: any) => handleKeyDown(event, option),
+                    onClick: () => handleOptionClick(option as Option),
+                    onKeydown: (event: any) => handleKeyDown(event, option as Option),
                     tabindex: 0,
                   },
-                  option.text,
-                ),
+                  props.scopedSlots && props.scopedSlots['options']
+                    ? h(props.scopedSlots['options'], { option: option })
+                    : option.text,
+                )
+              : [
+                  h(
+                    'div',
+                    { class: 'form-multi-select-optgroup-label' },
+                    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)
 
-    return () =>
+    return () => [
       props.virtualScroller
         ? h(
             CVirtualScroller,
@@ -138,7 +129,9 @@ const CMultiSelectOptions = defineComponent({
               }),
             },
             createOptions(props.options),
-          )
+          ),
+      props.loading && h(CElementCover),
+    ]
   },
 })
 

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

@@ -5,56 +5,30 @@ import type { Option } from './types'
 const CMultiSelectSelection = defineComponent({
   name: 'CMultiSelectSelection',
   props: {
-    /**
-     * It specifies that multiple options can be selected at once.
-     *
-     * @default true
-     */
     multiple: {
       type: Boolean,
       default: true,
-      required: false,
-    },
-    /**
-     * Enables search input element.
-     */
-    search: {
-      type: [Boolean, String],
-      required: false,
-      default: false,
     },
+    placeholder: String,
+    search: [Boolean, String],
     selected: {
       type: Array as PropType<Option[]>,
       default: () => [],
-      required: false,
     },
-    /**
-     * Sets the selection style.
-     *
-     * @values 'counter', 'tags', 'text'
-     * @default 'tags'
-     */
     selectionType: {
       type: String,
       default: 'tags',
-      required: false,
       validator: (value: string) => {
         return ['counter', 'tags', 'text'].includes(value)
       },
     },
-    /**
-     * Sets the counter selection label.
-     *
-     * @default 'item(s) selected'
-     */
     selectionTypeCounterText: {
       type: String,
       default: 'item(s) selected',
-      required: false,
     },
   },
   emits: ['remove'],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const handleRemove = (option: Option) => {
       emit('remove', option as Option)
     }
@@ -62,12 +36,23 @@ const CMultiSelectSelection = defineComponent({
       h(
         'div',
         {
-          class: 'form-multi-select-selection',
+          class: [
+            'form-multi-select-selection',
+            {
+              'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
+            },
+          ],
         },
         [
           props.multiple &&
             props.selectionType === 'counter' &&
             !props.search &&
+            props.selected.length === 0 &&
+            props.placeholder,
+          props.multiple &&
+            props.selectionType === 'counter' &&
+            !props.search &&
+            props.selected.length > 0 &&
             `${props.selected.length} ${props.selectionTypeCounterText}`,
           props.multiple &&
             props.selectionType === 'tags' &&
@@ -76,23 +61,22 @@ const CMultiSelectSelection = defineComponent({
                 return h('span', { class: 'form-multi-select-tag' }, [
                   option.text,
                   !option.disabled &&
-                    h(
-                      'button',
-                      {
-                        class: 'form-multi-select-tag-delete close',
-                        ariaLabel: 'Close',
-                        onClick: () => handleRemove(option),
-                      },
-                      h('span', { ariaHidden: 'true' }, 'x'),
-                    ),
+                    h('button', {
+                      class: 'form-multi-select-tag-delete',
+                      ariaLabel: 'Close',
+                      onClick: () => handleRemove(option),
+                    }),
                 ])
               }
               return
             }),
           props.multiple &&
             props.selectionType === 'text' &&
-            props.selected.map((option) => option.text).join(', '),
+            props.selected.map((option, index) =>
+              h('span', `${option.text}${index === props.selected.length - 1 ? '' : ','}\xA0`),
+            ),
           !props.multiple && !props.search && props.selected.map((option) => option.text)[0],
+          slots.default && slots.default(),
         ],
       )
   },

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

@@ -1,15 +1,21 @@
 export type Option = {
+  custom?: boolean
   disabled?: boolean
-  label?: string
-  options?: Option[]
-  order?: number
   selected?: boolean
-  text: string
+  text: string // TODO: change to label in v5
   value: number | string
+  [key: string]: number | string | any
+}
+
+export type OptionsGroup = {
+  label: string
+  options?: Option[]
+  [key: string]: number | string | any
 }
 
 export type SelectedOption = {
   disabled?: boolean
   text: string
   value: number | string
+  [key: string]: number | string | any
 }

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

@@ -1,32 +1,69 @@
-import type { Option, SelectedOption } from './types'
-
-export const filterOptionsList = (search: string, _options: Option[]) => {
-  return search.length
-    ? _options &&
-        _options.reduce((acc: Option[], val: Option) => {
-          const options =
-            val.options &&
-            val.options.filter(
-              (element) =>
-                element.text && element.text.toLowerCase().includes(search.toLowerCase()),
-            )
-
-          if (
-            (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-            (options && options.length)
-          ) {
-            acc.push(Object.assign({}, val, options && options.length && { options }))
-          }
-
-          return acc
-        }, [])
-    : _options
+import type { Option, OptionsGroup, SelectedOption } from './types'
+
+export const createOption = (text: string, options: (Option | OptionsGroup)[]) => {
+  const value = text.toLowerCase().replace(/\s/g, '-')
+  let uniqueValue = value
+  let i = 1
+
+  while (options.some((option) => String(option.value) === uniqueValue)) {
+    uniqueValue = `${value}-${i}`
+    i++
+  }
+
+  return [
+    {
+      value: uniqueValue,
+      text,
+      custom: true,
+    },
+  ]
 }
 
-export const flattenArray = (options: Option[]): Option[] => {
-  return options.reduce((acc: Option[], val: Option) => {
-    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
-  }, [])
+export const filterOptionsList = (search: string, _options: (Option | OptionsGroup)[]) => {
+  if (search.length > 0 && _options) {
+    const optionsList = []
+
+    for (const option of _options) {
+      const options =
+        option.options &&
+        option.options.filter(
+          (option: Option) =>
+            option.text && option.text.toLowerCase().includes(search.toLowerCase()),
+        )
+      if (
+        (option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+        (options && options.length > 0)
+      ) {
+        optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }))
+      }
+    }
+
+    return optionsList
+  }
+
+  return _options
+}
+
+export const flattenOptionsArray = (
+  options: (Option | OptionsGroup)[],
+  keepGroupLabel?: boolean,
+): (Option | OptionsGroup)[] => {
+  const optionsList: (Option | OptionsGroup)[] = []
+
+  for (const option of options) {
+    if (Array.isArray(option.options)) {
+      const { options, ...rest } = option
+      if (keepGroupLabel) {
+        optionsList.push(rest)
+      }
+
+      optionsList.push(...options)
+    } else {
+      optionsList.push(option)
+    }
+  }
+
+  return optionsList
 }
 
 export const getNextSibling = (elem: HTMLElement, selector?: string) => {
@@ -64,7 +101,7 @@ export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
 }
 
 export const selectOptions = (
-  options: Option[],
+  options: (Option | OptionsGroup)[],
   selected: SelectedOption[],
   deselected?: Option[],
 ) => {
@@ -77,16 +114,13 @@ export const selectOptions = (
     )
   }
 
-  const deduplicated = _selected.reduce((unique: Option[], option) => {
-    if (!unique.some((obj) => obj.value === option.value)) {
-      unique.push({
-        value: option.value,
-        text: option.text,
-        ...(option.disabled && { disabled: option.disabled }),
-      })
+  const deduplicated: SelectedOption[] = []
+
+  for (const option of _selected) {
+    if (!deduplicated.some((obj) => obj.value === option.value)) {
+      deduplicated.push(option as SelectedOption)
     }
-    return unique
-  }, []) as SelectedOption[]
+  }
 
   return deduplicated
 }

package/src/components/nav/CNavGroup.ts

@@ -63,19 +63,23 @@ const CNavGroup = defineComponent({
       navGroupRef.value.classList.add('show')
     }
 
+    // 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`
     }
 
+    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleAfterEnter = (el: RendererElement) => {
       el.style.height = 'auto'
     }
 
+    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleBeforeLeave = (el: RendererElement) => {
       el.style.height = `${el.scrollHeight}px`
     }
 
+    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {

package/src/components/navbar/CNavbar.ts

@@ -85,7 +85,7 @@ const CNavbar = defineComponent({
         props.container
           ? h(
               'div',
-              { class: [`container${props.container !== true ? '-' + props.container : ''}`] },
+              { class: [`container${props.container === true ? '' : '-' + props.container}`] },
               slots.default && slots.default(),
             )
           : slots.default && slots.default(),

package/src/components/navbar/CNavbarBrand.ts

@@ -19,7 +19,7 @@ const CNavbarBrand = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component ? props.component : props.href ? 'a' : 'span',
+        props.component ?? (props.href ? 'a' : 'span'),
         {
           class: 'navbar-brand',
           href: props.href,

package/src/components/offcanvas/COffcanvas.ts

@@ -101,7 +101,6 @@ const COffcanvas = defineComponent({
       },
     )
 
-
     watch(visible, () => {
       if (visible.value && !props.scroll) {
         document.body.style.overflow = 'hidden'
@@ -128,11 +127,13 @@ const COffcanvas = defineComponent({
       offcanvasRef.value.focus()
     }
 
+    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       el.classList.add('hiding')
     }
 
+    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleAfterLeave = (el: RendererElement) => {
       el.classList.remove('show', 'hiding')
     }
@@ -172,7 +173,7 @@ const COffcanvas = defineComponent({
                 class: [
                   {
                     [`offcanvas${
-                      typeof props.responsive !== 'boolean' ? '-' + props.responsive : ''
+                      typeof props.responsive === 'boolean' ? '' : '-' + props.responsive
                     }`]: props.responsive,
                     [`offcanvas-${props.placement}`]: props.placement,
                   },

package/src/components/pagination/CPaginationItem.ts

@@ -24,7 +24,7 @@ const CPaginationItem = defineComponent({
   },
   setup(props, { slots }) {
     return () => {
-      const component = props.component ? props.component : props.active ? 'span' : 'a'
+      const component = props.component ?? (props.active ? 'span' : 'a')
       return h(
         'li',
         {