@coreui/vue-pro 4.5.0 → 4.7.0-alpha.0

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

@@ -1,5 +1,6 @@
 import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
 
+import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
@@ -15,6 +16,18 @@ export interface Option {
   value: number | string
 }
 
+export interface SelectedOption {
+  disabled?: boolean
+  text: string
+  value: number | string
+}
+
+const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
 const CMultiSelect = defineComponent({
   name: 'CMultiSelect',
   props: {
@@ -36,6 +49,50 @@ const CMultiSelect = defineComponent({
       required: false,
       default: false,
     },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedbackInvalid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.6.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: {
+      type: String,
+    },
+    /**
+     * Set component validation state to invalid.
+     *
+     * @since 4.6.0
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.6.0
+     */
+    label: {
+      type: String,
+    },
     /**
      * It specifies that multiple options can be selected at once.
      *
@@ -92,9 +149,18 @@ const CMultiSelect = defineComponent({
      * Enables search input element.
      */
     search: {
-      type: Boolean,
+      type: [Boolean, String],
       default: true,
       required: false,
+      validator: (value: boolean | string) => {
+        if (typeof value == 'string') {
+          return ['external'].includes(value)
+        }
+        if (typeof value == 'boolean') {
+          return true
+        }
+        return false
+      },
     },
     /**
      * Sets the label for no results when filtering.
@@ -160,6 +226,26 @@ const CMultiSelect = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.6.0
+     */
+    text: {
+      type: String,
+    },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.6.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     *
+     * @since 4.6.0
+     */
+    valid: Boolean,
     /**
      * Toggle the visibility of multi select dropdown.
      *
@@ -176,70 +262,83 @@ const CMultiSelect = defineComponent({
      * Execute a function when a user changes the selected option. [docs]
      */
     'change',
+    /**
+     * Execute a function when the filter value changed.
+     *
+     * @since 4.7.0
+     */
+    'filterChange',
   ],
-  setup(props, { emit }) {
-    const flattenArray = (options: Option[]): Option[] => {
-      return options.reduce((acc: Option[], val: Option) => {
-        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
-      }, [])
-    }
+  setup(props, { attrs, emit }) {
+    const nativeSelectRef = ref<HTMLSelectElement>()
+    provide('nativeSelectRef', nativeSelectRef)
+    const searchRef = ref<HTMLInputElement>()
+
+    const options = ref<Option[]>(props.options)
+    const search = ref('')
+    const selected = ref<SelectedOption[]>([])
+    const visible = ref<Boolean>(props.visible)
 
-    const getSelectedOptions = (options: Option[]) => {
-      return flattenArray(options).filter((option: Option) => {
-        if (option.selected) {
-          return option
+    const selectOptions = (options: Option[], deselected?: Option[]) => {
+      let _selected = [...selected.value, ...options]
+
+      if (deselected) {
+        _selected = _selected.filter(
+          (selectedOption) =>
+            !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
+        )
+      }
+
+      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 }),
+          })
         }
-        return
-      })
+        return unique
+      }, []) as SelectedOption[]
+
+      selected.value = deduplicated
     }
 
-    const updateOptions = (
-      value: number | string,
-      _options: Option[] = options.value,
-    ): Option[] => {
-      return props.multiple && _options
-        ? _options &&
-            _options.map((option: Option) => {
-              count.value = count.value++
-              return option.options
-                ? { ...option, options: updateOptions(value, option.options) }
-                : option.value == value // TODO: find solution
-                ? { ...option, selected: !option.selected, order: count.value }
-                : { ...option }
+    watch(
+      () => props.options,
+      (newValue, oldValue) => {
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+          options.value = newValue
+          const _selected =
+            newValue &&
+            flattenArray(newValue).filter((option: Option) => {
+              if (option.selected) {
+                return option
+              }
+
+              return
             })
-        : _options &&
-            _options.map((option: Option) => {
-              return option.options
-                ? { ...option, options: updateOptions(value, option.options) }
-                : option.value == value // TODO: find solution
-                ? { ...option, selected: true }
-                : { ...option, selected: false }
+
+          const deselected =
+            newValue &&
+            flattenArray(newValue).filter((option: Option) => {
+              if (option.selected === false) {
+                return option
+              }
+
+              return
             })
-    }
 
-    const toggleAllOptions = (
-      options: Option[],
-      selected: boolean,
-      counter: number = count.value,
-    ): Option[] => {
-      return options.map((option: Option) => {
-        !option.selected && counter++
-        count.value = counter
-        if (option.options) {
-          return {
-            ...option,
-            options: toggleAllOptions(option.options, selected, counter),
-          }
+          _selected && selectOptions(_selected, deselected)
         }
-        return option.disabled
-          ? { ...option }
-          : selected && !option.selected
-          ? { ...option, selected: selected, order: counter }
-          : { ...option, selected: selected }
-      })
-    }
+      },
+    )
+
+    watch(selected, () => {
+      nativeSelectRef.value &&
+        nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
+    })
 
-    const filterOptionsList = (search: string, _options = vOptions.value) => {
+    const filterOptionsList = (search: string, _options: Option[]) => {
       return search.length
         ? _options &&
             _options.reduce((acc: Option[], val: Option) => {
@@ -262,76 +361,64 @@ const CMultiSelect = defineComponent({
         : options.value
     }
 
-    const nativeSelectRef = ref<HTMLSelectElement>()
-    provide('nativeSelectRef', nativeSelectRef)
-    const searchRef = ref<HTMLInputElement>()
-
-    const options = ref<Option[]>(props.options)
-    const vOptions = ref<Option[]>(props.options)
-    const search = ref('')
-    const visible = ref<Boolean>(props.visible)
-
-    const selected = ref<Option[]>(getSelectedOptions(props.options))
-    const count = ref<number>(0)
-
-    watch(
-      () => props.options,
-      (newValue, oldValue) => {
-        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
-      },
-    )
+    // watch(
+    //   () => props.options,
+    //   (newValue, oldValue) => {
+    //     console.log(props.options)
+    //     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
+    //   },
+    // )
 
-    watch(options, () => {
-      const _selected = options.value && getSelectedOptions(options.value)
 
-      _selected.sort((a: Option, b: Option) => {
-        if (typeof a.order === 'undefined') {
-          return -1
-        }
-        if (b.order && a.order > b.order) return 1
-        if (b.order && a.order < b.order) return -1
-        return 0
-      })
-
-      selected.value = _selected
-    })
-
-    watch([options, search], () => {
-      vOptions.value = filterOptionsList(search.value, options.value)
-    })
-
-    watch(selected, () => {
-      nativeSelectRef.value &&
-        nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
-    })
 
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       search.value = target.value.toLowerCase()
+
+      emit('filterChange', target.value)
     }
 
     const handleSearchKeyDown = (event: KeyboardEvent) => {
-      if (search.value.length) return
+      if (search.value.length) {
+        return
+      }
+
       if (event.key === 'Backspace' || event.key === 'Delete') {
         const last = selected.value.filter((option: Option) => !option.disabled).pop()
-
         if (last) {
           selected.value = selected.value.filter((option: Option) => option.value !== last.value)
-          options.value = updateOptions(last.value)
         }
       }
     }
 
     const handleOptionClick = (option: Option) => {
-      options.value = updateOptions(option.value)
+      if (!props.multiple) {
+        selected.value = [{ value: option.value, text: option.text }] as SelectedOption[]
+        visible.value = false
+        search.value = ''
+        if (searchRef.value) {
+          searchRef.value.value = ''
+        }
+
+        return
+      }
+
+      if (selected.value.some((_option) => _option.value === option.value)) {
+        selected.value = selected.value.filter((_option) => _option.value !== option.value)
+      } else {
+        selected.value = [
+          ...selected.value,
+          { value: option.value, text: option.text },
+        ] as SelectedOption[]
+      }
     }
 
     const handleSelectAll = () => {
-      options.value = toggleAllOptions(options.value, true)
+      selectOptions(flattenArray(options.value).filter((option: Option) => !option.disabled))
     }
 
     const handleDeselectAll = () => {
-      options.value = toggleAllOptions(options.value, false)
+      selected.value = selected.value.filter((option) => option.disabled)
     }
 
     return () => [
@@ -344,83 +431,118 @@ const CMultiSelect = defineComponent({
         onChange: () => emit('change', selected.value),
       }),
       h(
-        CPicker,
+        CFormControlWrapper,
         {
-          class: [
-            'form-multi-select',
-            {
-              'form-multi-select-with-cleaner': props.cleaner,
-              disabled: props.disabled,
-              [`form-multi-select-${props.size}`]: props.size,
-              'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
-              show: visible.value,
-            },
-          ],
-          disabled: props.disabled,
-          onShow: () => {
-            props.search && searchRef.value && searchRef.value.focus()
-          },
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
         },
         {
-          toggler: () =>
-            h('div', {}, [
-              h(CMultiSelectSelection, {
-                multiple: props.multiple,
-                onRemove: (option: Option) => !props.disabled && handleOptionClick(option),
-                search: props.search,
-                selected: selected.value,
-                selectionType: props.selectionType,
-                selectionTypeCounterText: props.selectionTypeCounterText,
-              }),
-              props.multiple &&
-                props.cleaner &&
-                selected.value.length > 0 &&
-                !props.disabled &&
-                h('button', {
-                  type: 'button',
-                  class: 'form-multi-select-selection-cleaner',
-                  onClick: () => handleDeselectAll(),
-                }),
-              props.search &&
-                h('input', {
-                  type: 'text',
-                  class: 'form-multi-select-search',
-                  autocomplete: 'off',
-                  ...(selected.value.length === 0 && { placeholder: props.placeholder }),
-                  ...(selected.value.length &&
-                    props.selectionType === 'counter' && {
-                      placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+          default: () =>
+            h(
+              CPicker,
+              {
+                class: [
+                  'form-multi-select',
+                  {
+                    'form-multi-select-with-cleaner': props.cleaner,
+                    disabled: props.disabled,
+                    [`form-multi-select-${props.size}`]: props.size,
+                    'form-multi-select-selection-tags':
+                      props.multiple && props.selectionType === 'tags',
+                    show: visible.value,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                  },
+                ],
+                disabled: props.disabled,
+                id: props.id,
+                onHide: () => {
+                  visible.value = false
+                },
+                onShow: () => {
+                  props.search && searchRef.value && searchRef.value.focus()
+                  visible.value = true
+                },
+                visible: visible.value,
+              },
+              {
+                toggler: () =>
+                  h('div', {}, [
+                    h(CMultiSelectSelection, {
+                      multiple: props.multiple,
+                      onRemove: (option: Option) => !props.disabled && handleOptionClick(option),
+                      search: props.search,
+                      selected: selected.value,
+                      selectionType: props.selectionType,
+                      selectionTypeCounterText: props.selectionTypeCounterText,
                     }),
-                  ...(selected.value.length &&
-                    !props.multiple && {
-                      placeholder: selected.value.map((option) => option.text)[0],
+                    props.multiple &&
+                      props.cleaner &&
+                      selected.value.length > 0 &&
+                      !props.disabled &&
+                      h('button', {
+                        type: 'button',
+                        class: 'form-multi-select-selection-cleaner',
+                        onClick: () => handleDeselectAll(),
+                      }),
+                    props.search &&
+                      h('input', {
+                        type: 'text',
+                        class: 'form-multi-select-search',
+                        autocomplete: 'off',
+                        ...(selected.value.length === 0 && { placeholder: props.placeholder }),
+                        ...(selected.value.length &&
+                          props.selectionType === 'counter' && {
+                            placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                          }),
+                        ...(selected.value.length &&
+                          !props.multiple && {
+                            placeholder: selected.value.map((option) => option.text)[0],
+                          }),
+                        disabled: props.disabled,
+                        onInput: (event: InputEvent) => handleSearchChange(event),
+                        onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
+                        ...(props.multiple &&
+                          selected.value.length &&
+                          props.selectionType !== 'counter' && { size: search.value.length + 2 }),
+                        ref: searchRef,
+                      }),
+                  ]),
+                default: () =>
+                  h('div', {}, [
+                    props.multiple &&
+                      props.selectAll &&
+                      h(
+                        'button',
+                        {
+                          class: 'form-multi-select-all',
+                          onClick: () => handleSelectAll(),
+                          type: 'button',
+                        },
+                        props.selectAllLabel,
+                      ),
+                    h(CMultiSelectOptions, {
+                      onOptionClick: (option: Option) => handleOptionClick(option),
+                      options:
+                        props.search === 'external'
+                          ? options.value
+                          : filterOptionsList(search.value, options.value),
+                      optionsMaxHeight: props.optionsMaxHeight,
+                      optionsStyle: props.optionsStyle,
+                      searchNoResultsLabel: props.searchNoResultsLabel,
+                      selected: selected.value
                     }),
-                  disabled: props.disabled,
-                  onInput: (event: InputEvent) => handleSearchChange(event),
-                  onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
-                  ...(props.multiple &&
-                    selected.value.length &&
-                    props.selectionType !== 'counter' && { size: search.value.length + 2 }),
-                  ref: searchRef,
-                }),
-            ]),
-          default: () =>
-            h('div', {}, [
-              props.multiple &&
-                props.selectAll &&
-                h(
-                  'button',
-                  { class: 'form-multi-select-all', onClick: () => handleSelectAll() },
-                  props.selectAllLabel,
-                ),
-              h(CMultiSelectOptions, {
-                onOptionClick: (option: Option) => handleOptionClick(option),
-                options: vOptions.value,
-                optionsMaxHeight: props.optionsMaxHeight,
-                optionsStyle: props.optionsStyle,
-                searchNoResultsLabel: props.searchNoResultsLabel,
-              }),
-            ]),
+                  ]),
+              },
+            ),
         },
       ),
     ]

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

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, VNode } from 'vue'
 import { Option } from './CMultiSelect'
 
+import { getNextSibling, getPreviousSibling } from './../../utils'
+
 const CMultiSelectOptions = defineComponent({
   name: 'CMultiSelectOptions',
   props: {
@@ -44,20 +46,53 @@ const CMultiSelectOptions = defineComponent({
       default: 'no items',
       required: false,
     },
+    selected: {
+      type: Array as PropType<Option[]>,
+      default: () => [],
+      required: false,
+    },
   },
   emits: ['optionClick'],
   setup(props, { emit }) {
+    const handleKeyDown = (event: KeyboardEvent, option: Option) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        handleOptionClick && handleOptionClick(option)
+        return
+      }
+
+      if (event.key === 'Down' || event.key === 'ArrowDown') {
+        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
+        }
+      }
+
+      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
+        }
+      }
+    }
+
     const handleOptionClick = (option: Option) => {
       emit('optionClick', option as Option)
     }
-    const createOptions = (options: Option[]): VNode | VNode[] => {
-      return options.length > 0
-        ? options.map((option: Option) => {
-            return option.options
-              ? h('div', { class: 'form-multi-select-options' }, [
+
+    // TODO: find solution how to remove any
+    const createOptions = (options: Option[]): 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(
                   'div',
                   {
@@ -65,17 +100,20 @@ const CMultiSelectOptions = defineComponent({
                       'form-multi-select-option',
                       {
                         'form-multi-select-option-with-checkbox': props.optionsStyle === 'checkbox',
-                        'form-multi-selected': option.selected,
+                        'form-multi-selected': props.selected.some(
+                          (_option) => _option.value === option.value,
+                        ),
                         disabled: option.disabled,
                       },
                     ],
                     onClick: () => handleOptionClick(option),
+                    onKeydown: (event: any) => handleKeyDown(event, option),
+                    tabindex: 0,
                   },
                   option.text,
-                )
-          })
+                ),
+          )
         : h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel)
-    }
     return () =>
       h(
         'div',

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

@@ -18,7 +18,7 @@ const CMultiSelectSelection = defineComponent({
      * Enables search input element.
      */
     search: {
-      type: Boolean,
+      type: [Boolean, String],
       required: false,
       default: false,
     },

package/src/components/pagination/index.ts

@@ -1,14 +1,12 @@
 import { App } from 'vue'
 import { CPagination } from './CPagination'
 import { CPaginationItem } from './CPaginationItem'
-import { CSmartPagination } from './CSmartPagination'
 
 const CPaginationPlugin = {
   install: (app: App): void => {
     app.component(CPagination.name, CPagination)
     app.component(CPaginationItem.name, CPaginationItem)
-    app.component(CSmartPagination.name, CSmartPagination)
   },
 }
 
-export { CPaginationPlugin, CPagination, CPaginationItem, CSmartPagination }
+export { CPaginationPlugin, CPagination, CPaginationItem }