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

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

@@ -1,18 +1,27 @@
-import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
+import { computed, defineComponent, h, onBeforeUnmount, PropType, provide, ref, watch } from 'vue'
+
+import { createPopper, Instance } from '@popperjs/core'
 
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
-import { CPicker } from '../picker'
 
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
-import { filterOptionsList, flattenArray, selectOptions } from './utils'
-import type { Option, SelectedOption } from './types'
+import { isRTL } from '../../utils'
+
+import { createOption, filterOptionsList, flattenOptionsArray, selectOptions } from './utils'
+import type { Option, OptionsGroup, SelectedOption } from './types'
 
 const CMultiSelect = defineComponent({
   name: 'CMultiSelect',
   props: {
+    /**
+     * Allow users to create options if they are not in the list of options.
+     *
+     * @since 4.9.0-next.0
+     */
+    allowCreateOptions: Boolean,
     /**
      * Enables selection cleaner element.
      *
@@ -22,43 +31,38 @@ const CMultiSelect = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Clear current search on selecting an item.
+     *
+     * @since 4.9.0-next.0
+     */
+    clearSearchOnSelect: Boolean,
     /**
      * Toggle the disabled state for the component.
      */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    disabled: Boolean,
     /**
      * Provide valuable, actionable feedback.
      *
      * @since 4.6.0
      */
-    feedback: {
-      type: String,
-    },
+    feedback: String,
     /**
      * Provide valuable, actionable feedback.
      *
      * @since 4.6.0
      */
-    feedbackInvalid: {
-      type: String,
-    },
+    feedbackInvalid: 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,
-    },
+    feedbackValid: String,
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      */
-    id: {
-      type: String,
-    },
+    id: String,
     /**
      * Set component validation state to invalid.
      *
@@ -70,9 +74,13 @@ const CMultiSelect = defineComponent({
      *
      * @since 4.6.0
      */
-    label: {
-      type: String,
-    },
+    label: String,
+    /**
+     * When set, the options list will have a loading style: loading spinner and reduced opacity.
+     *
+     * @since 4.9.0-next.0
+     */
+    loading: Boolean,
     /**
      * It specifies that multiple options can be selected at once.
      *
@@ -86,7 +94,7 @@ const CMultiSelect = defineComponent({
      * List of option elements.
      */
     options: {
-      type: Array as PropType<Option[]>,
+      type: Array as PropType<(Option | OptionsGroup)[]>,
       default: () => [],
     },
     /**
@@ -120,6 +128,10 @@ const CMultiSelect = defineComponent({
       type: String,
       default: 'Select...',
     },
+    /**
+     * When it is present, it indicates that the user must choose a value before submitting the form.
+     */
+    required: Boolean,
     /**
      * Enables search input element.
      */
@@ -199,9 +211,7 @@ const CMultiSelect = defineComponent({
      *
      * @since 4.6.0
      */
-    text: {
-      type: String,
-    },
+    text: String,
     /**
      * Display validation feedback in a styled tooltip.
      *
@@ -225,10 +235,7 @@ const CMultiSelect = defineComponent({
      *
      * @default false
      */
-    visible: {
-      type: Boolean,
-      default: false,
-    },
+    visible: Boolean,
     /**
      *
      * Amount of visible items when virtualScroller is set to `true`.
@@ -251,41 +258,66 @@ const CMultiSelect = defineComponent({
      * @since 4.7.0
      */
     'filterChange',
+    /**
+     * The callback is fired when the Multi Select component requests to be hidden.
+     */
+    'hide',
+    /**
+     * The callback is fired when the Multi Select component requests to be shown.
+     */
+    'show',
   ],
-  setup(props, { attrs, emit }) {
+  setup(props, { attrs, emit, slots }) {
+    const multiSelectRef = ref<HTMLDivElement>()
+    const dropdownRef = ref<HTMLDivElement>()
     const nativeSelectRef = ref<HTMLSelectElement>()
-    const options = ref<Option[]>(props.options)
-    const search = ref('')
+    const togglerRef = ref<HTMLDivElement>()
     const searchRef = ref<HTMLInputElement>()
+
+    const options = ref<(Option | OptionsGroup)[]>(props.options)
+    const popper = ref<Instance>()
+    const searchValue = ref('')
     const selected = ref<SelectedOption[]>([])
-    const visible = ref<Boolean>(props.visible)
+    const userOptions = ref<Option[]>([])
+    const visible = ref<boolean>(props.visible)
 
     provide('nativeSelectRef', nativeSelectRef)
 
+    const filteredOptions = computed(() =>
+      flattenOptionsArray(
+        props.search === 'external'
+          ? [...options.value, ...filterOptionsList(searchValue.value, userOptions.value)]
+          : filterOptionsList(searchValue.value, [...options.value, ...userOptions.value]),
+        true,
+      ),
+    )
+
+    const flattenedOptions = computed(() => flattenOptionsArray(props.options))
+
+    const userOption = computed(() => {
+      if (
+        props.allowCreateOptions &&
+        filteredOptions.value.some(
+          (option) => option.text && option.text.toLowerCase() === searchValue.value.toLowerCase(),
+        )
+      ) {
+        return false
+      }
+
+      return searchRef.value && createOption(String(searchValue.value), flattenedOptions.value)
+    })
+
     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
-            })
-
-          const deselected =
-            newValue &&
-            flattenArray(newValue).filter((option: Option) => {
-              if (option.selected === false) {
-                return option
-              }
-
-              return
-            })
+          const _selected = flattenedOptions.value.filter(
+            (option: Option | OptionsGroup) => option.selected === true,
+          )
+          const deselected = flattenedOptions.value.filter(
+            (option: Option | OptionsGroup) => option.selected === false,
+          ) as Option[]
 
           if (_selected) {
             selected.value = selectOptions(_selected, selected.value, deselected)
@@ -298,17 +330,121 @@ const CMultiSelect = defineComponent({
     watch(selected, () => {
       nativeSelectRef.value &&
         nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
+
+      if (popper.value) {
+        popper.value.update()
+      }
     })
 
+    watch(visible, () => {
+      if (visible.value) {
+        emit('show')
+
+        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('keyup', handleKeyUp)
+
+        initPopper()
+
+        // TODO: find better solution
+        setTimeout(() => {
+          searchRef.value && searchRef.value.focus()
+        }, 100)
+
+        return
+      }
+
+      emit('hide')
+
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyUp)
+
+      destroyPopper()
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyUp)
+    })
+
+    const initPopper = () => {
+      if (togglerRef.value && dropdownRef.value) {
+        popper.value = createPopper(togglerRef.value, dropdownRef.value, {
+          placement: isRTL() ? 'bottom-end' : 'bottom-start',
+          modifiers: [
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: 'clippingParents',
+              },
+            },
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 2],
+              },
+            },
+          ],
+        })
+      }
+    }
+
+    const destroyPopper = () => {
+      if (popper.value) {
+        popper.value.destroy()
+      }
+
+      popper.value = undefined
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        visible.value = false
+      }
+    }
+
+    const handleMouseUp = (event: Event) => {
+      if (multiSelectRef.value && multiSelectRef.value.contains(event.target as HTMLElement)) {
+        return
+      }
+
+      visible.value = false
+    }
+
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      search.value = target.value.toLowerCase()
+      searchValue.value = target.value.toLowerCase()
 
       emit('filterChange', target.value)
     }
 
     const handleSearchKeyDown = (event: KeyboardEvent) => {
-      if (search.value.length) {
+      if (event.key === 'Enter' && searchValue.value && props.allowCreateOptions) {
+        event.preventDefault()
+
+        if (!userOption.value) {
+          selected.value = [
+            ...selected.value,
+            filteredOptions.value.find(
+              (option) => String(option.text).toLowerCase() === searchValue.value.toLowerCase(),
+            ) as Option,
+          ]
+        }
+
+        if (userOption.value) {
+          selected.value = [...selected.value, ...userOption.value]
+          userOptions.value = [...userOptions.value, ...userOption.value]
+        }
+
+        searchValue.value = ''
+
+        if (searchRef.value) {
+          searchRef.value.value = ''
+        }
+
+        return
+      }
+
+      if (searchValue.value.length > 0) {
         return
       }
 
@@ -324,7 +460,7 @@ const CMultiSelect = defineComponent({
       if (!props.multiple) {
         selected.value = [{ value: option.value, text: option.text }] as SelectedOption[]
         visible.value = false
-        search.value = ''
+
         if (searchRef.value) {
           searchRef.value.value = ''
         }
@@ -332,6 +468,18 @@ const CMultiSelect = defineComponent({
         return
       }
 
+      if (option.custom && !userOptions.value.some((_option) => _option.value === option.value)) {
+        userOptions.value = [...userOptions.value, option]
+      }
+
+      if (props.clearSearchOnSelect || option.custom) {
+        searchValue.value = ''
+        if (searchRef.value) {
+          searchRef.value.value = ''
+          searchRef.value.focus()
+        }
+      }
+
       if (selected.value.some((_option) => _option.value === option.value)) {
         selected.value = selected.value.filter((_option) => _option.value !== option.value)
       } else {
@@ -344,7 +492,10 @@ const CMultiSelect = defineComponent({
 
     const handleSelectAll = () => {
       selected.value = selectOptions(
-        flattenArray(options.value).filter((option: Option) => !option.disabled),
+        [
+          ...flattenedOptions.value.filter((option: Option | OptionsGroup) => !option.disabled),
+          ...userOptions.value,
+        ],
         selected.value,
       )
     }
@@ -355,11 +506,13 @@ const CMultiSelect = defineComponent({
 
     return () => [
       h(CMultiSelectNativeSelect, {
+        id: props.id,
         multiple: props.multiple,
-        options: options.value,
+        options: selected.value,
+        required: props.required,
         value: props.multiple
-          ? selected.value.map((option: Option) => option.value.toString())
-          : selected.value.map((option: Option) => option.value)[0],
+          ? selected.value.map((option: SelectedOption) => option.value.toString())
+          : selected.value.map((option: SelectedOption) => option.value)[0],
         onChange: () => emit('change', selected.value),
       }),
       h(
@@ -379,102 +532,142 @@ const CMultiSelect = defineComponent({
         {
           default: () =>
             h(
-              CPicker,
+              'div',
               {
                 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,
+                    show: visible.value,
                   },
                 ],
-                disabled: props.disabled,
+                'aria-expanded': visible.value,
                 id: props.id,
-                onHide: () => {
-                  visible.value = false
-                },
-                onShow: () => {
-                  props.search && searchRef.value && searchRef.value.focus()
-                  visible.value = true
-                },
-                visible: visible.value,
+                ref: multiSelectRef,
               },
               {
-                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}`,
-                          }),
-                        ...(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: () =>
-                  visible.value && [
-                    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,
-                      virtualScroller: props.virtualScroller,
-                      visibleItems: props.visibleItems,
-                    }),
-                  ],
+                default: () => [
+                  h(
+                    'div',
+                    {
+                      class: 'form-multi-select-input-group',
+                      onClick: () => {
+                        visible.value = true
+                      },
+                      ref: togglerRef,
+                    },
+                    {
+                      default: () => [
+                        h(
+                          CMultiSelectSelection,
+                          {
+                            multiple: props.multiple,
+                            placeholder: props.placeholder,
+                            onRemove: (option: Option) =>
+                              !props.disabled && handleOptionClick(option),
+                            search: props.search,
+                            selected: selected.value,
+                            selectionType: props.selectionType,
+                            selectionTypeCounterText: props.selectionTypeCounterText,
+                          },
+                          {
+                            default: () =>
+                              props.search &&
+                              h('input', {
+                                type: 'text',
+                                class: 'form-multi-select-search',
+                                disabled: props.disabled,
+                                autocomplete: 'off',
+                                onInput: (event: InputEvent) => handleSearchChange(event),
+                                onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
+                                ...(selected.value.length === 0 && {
+                                  placeholder: props.placeholder,
+                                }),
+                                ...(selected.value.length > 0 &&
+                                  props.selectionType === 'counter' && {
+                                    placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                                  }),
+                                ...(selected.value.length > 0 &&
+                                  !props.multiple && {
+                                    placeholder: selected.value.map((option) => option.text)[0],
+                                  }),
+
+                                ...(props.multiple &&
+                                  selected.value.length > 0 &&
+                                  props.selectionType !== 'counter' && {
+                                    size: searchValue.value.length + 2,
+                                  }),
+                                ref: searchRef,
+                              }),
+                          },
+                        ),
+                        h(
+                          'div',
+                          { class: 'form-multi-select-buttons' },
+                          {
+                            default: () => [
+                              h('button', {
+                                class: 'form-multi-select-cleaner',
+                                onClick: () => handleDeselectAll(),
+                                type: 'button',
+                              }),
+                              h('button', {
+                                class: 'form-multi-select-indicator',
+                                onClick: (event: Event) => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  visible.value = !visible.value
+                                },
+                                type: 'button',
+                              }),
+                            ],
+                          },
+                        ),
+                      ],
+                    },
+                  ),
+                  h(
+                    'div',
+                    {
+                      class: 'form-multi-select-dropdown',
+                      role: 'menu',
+                      ref: dropdownRef,
+                    },
+                    {
+                      default: () => [
+                        props.multiple &&
+                          props.selectAll &&
+                          h(
+                            'button',
+                            {
+                              class: 'form-multi-select-all',
+                              onClick: () => handleSelectAll(),
+                              type: 'button',
+                            },
+                            props.selectAllLabel,
+                          ),
+                        h(CMultiSelectOptions, {
+                          loading: props.loading,
+                          onOptionClick: (option: Option) => handleOptionClick(option),
+                          options:
+                            filteredOptions.value.length === 0 && props.allowCreateOptions
+                              ? userOption.value || []
+                              : filteredOptions.value,
+                          optionsMaxHeight: props.optionsMaxHeight,
+                          optionsStyle: props.optionsStyle,
+                          scopedSlots: slots,
+                          searchNoResultsLabel: props.searchNoResultsLabel,
+                          selected: selected.value,
+                          virtualScroller: props.virtualScroller,
+                          visibleItems: props.visibleItems,
+                        }),
+                      ],
+                    },
+                  ),
+                ],
               },
             ),
         },