@coreui/vue-pro 4.7.0 → 4.8.0-next.1

package/dist/utils/index.d.ts

@@ -1,4 +1,2 @@
-import getNextSibling from './getNextSibling';
-import getPreviousSibling from './getPreviousSibling';
 import isInViewport from './isInViewport';
-export { getNextSibling, getPreviousSibling, isInViewport };
+export { isInViewport };

package/dist/utils/isObjectInArray.d.ts

@@ -0,0 +1,2 @@
+declare const isObjectInArray: <T>(array: T[], item: T, ignore?: string[]) => boolean;
+export default isObjectInArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.7.0",
+  "version": "4.8.0-next.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,15 +35,15 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.2.7",
+    "@vue/test-utils": "^2.2.10",
     "date-fns": "^2.29.3",
-    "rollup": "^3.10.0",
+    "rollup": "^3.15.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.9.4",
-    "vue": "^3.2.45",
+    "typescript": "^4.9.5",
+    "vue": "^3.2.47",
     "vue-types": "^5.0.2"
   },
   "peerDependencies": {

package/src/components/calendar/CCalendar.ts

@@ -16,7 +16,7 @@ import {
   isToday,
   isStartDate,
   isEndDate,
-} from '../../utils/calendar'
+} from './utils'
 
 const CCalendar = defineComponent({
   name: 'CCalendar',

package/src/{utils/calendar.ts → components/calendar/utils.ts}

@@ -4,7 +4,7 @@ export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
 export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
   d.toLocaleTimeString(locale, options)
 
-export const createGroupsInArray = (arr: any[], numberOfGroups: number) => {
+export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][] => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
   return new Array(numberOfGroups)
     .fill('')

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -9,7 +9,7 @@ import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
-import { getLocalDateFromString } from '../../utils/calendar'
+import { getLocalDateFromString } from '../calendar/utils'
 
 import { Color } from '../props'
 

package/src/components/element-cover/CElementCover.ts

@@ -84,23 +84,23 @@ const CElementCover = defineComponent({
           style: { ...coverStyles, ...customBoundaries.value },
           ref: elementCoverRef,
         },
-        slots.default
-          ? slots.default()
-          : h(
-              'div',
-              {
-                style: {
-                  position: 'absolute',
-                  top: '50%',
-                  left: '50%',
-                  transform: 'translateX(-50%) translateY(-50%)',
-                },
-              },
-              h(CSpinner, {
+        h(
+          'div',
+          {
+            style: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translateX(-50%) translateY(-50%)',
+            },
+          },
+          slots.default
+            ? slots.default()
+            : h(CSpinner, {
                 variant: 'grow',
                 color: 'primary',
               }),
-            ),
+        ),
       )
   },
 })

package/src/components/index.ts

@@ -43,4 +43,5 @@ export * from './tabs'
 export * from './time-picker'
 export * from './toast'
 export * from './tooltip'
+export * from './virtual-scroller'
 export * from './widgets'

package/src/components/modal/CModal.ts

@@ -25,7 +25,6 @@ const CModal = defineComponent({
      */
     alignment: {
       default: 'top',
-      required: false,
       validator: (value: string) => {
         return ['top', 'center'].includes(value)
       },
@@ -33,12 +32,20 @@ const CModal = defineComponent({
     /**
      * Apply a backdrop on body while offcanvas is open.
      *
-     * @values 'static'
+     * @values boolean | 'static'
      */
     backdrop: {
       type: [Boolean, String],
       default: true,
-      require: false,
+      validator: (value: boolean | string) => {
+        if (typeof value == 'string') {
+          return ['static'].includes(value)
+        }
+        if (typeof value == 'boolean') {
+          return true
+        }
+        return false
+      },
     },
     /**
      * A string of all className you want applied to the modal content component.
@@ -46,7 +53,6 @@ const CModal = defineComponent({
     contentClassName: {
       type: String,
       default: undefined,
-      required: false,
     },
     /**
      * Set modal to covers the entire user viewport
@@ -56,7 +62,6 @@ const CModal = defineComponent({
     fullscreen: {
       type: [Boolean, String],
       default: undefined,
-      required: false,
       validator: (value: boolean | string) => {
         if (typeof value == 'string') {
           return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
@@ -73,14 +78,12 @@ const CModal = defineComponent({
     keyboard: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * Create a scrollable modal that allows scrolling the modal body.
      */
     scrollable: {
       type: Boolean,
-      required: false,
     },
     /**
      * Size the component small, large, or extra large.
@@ -90,7 +93,6 @@ const CModal = defineComponent({
     size: {
       type: String,
       default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['sm', 'lg', 'xl'].includes(value)
       },
@@ -101,7 +103,6 @@ const CModal = defineComponent({
     transition: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
@@ -109,7 +110,6 @@ const CModal = defineComponent({
     unmountOnClose: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * Toggle the visibility of alert component.

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

@@ -6,27 +6,9 @@ import { CPicker } from '../picker'
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
-export interface Option {
-  disabled?: boolean
-  label?: string
-  options?: Option[]
-  order?: number
-  selected?: boolean
-  text: string
-  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)
-  }, [])
-}
+import { filterOptionsList, flattenArray, selectOptions } from './utils'
+import type { Option, SelectedOption } from './types'
 
 const CMultiSelect = defineComponent({
   name: 'CMultiSelect',
@@ -38,7 +20,6 @@ const CMultiSelect = defineComponent({
      */
     cleaner: {
       type: Boolean,
-      required: false,
       default: true,
     },
     /**
@@ -46,7 +27,6 @@ const CMultiSelect = defineComponent({
      */
     disabled: {
       type: Boolean,
-      required: false,
       default: false,
     },
     /**
@@ -101,7 +81,6 @@ const CMultiSelect = defineComponent({
     multiple: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * List of option elements.
@@ -109,7 +88,6 @@ const CMultiSelect = defineComponent({
     options: {
       type: Array as PropType<Option[]>,
       default: () => [],
-      required: false,
     },
     /**
      * Sets maxHeight of options list.
@@ -119,7 +97,6 @@ const CMultiSelect = defineComponent({
     optionsMaxHeight: {
       type: [Number, String],
       default: 'auto',
-      required: false,
     },
     /**
      * Sets option style.
@@ -130,7 +107,6 @@ const CMultiSelect = defineComponent({
     optionsStyle: {
       type: String,
       default: 'checkbox',
-      required: false,
       validator: (value: string) => {
         return ['checkbox', 'text'].includes(value)
       },
@@ -143,7 +119,6 @@ const CMultiSelect = defineComponent({
     placeholder: {
       type: String,
       default: 'Select...',
-      required: false,
     },
     /**
      * Enables search input element.
@@ -151,7 +126,6 @@ const CMultiSelect = defineComponent({
     search: {
       type: [Boolean, String],
       default: true,
-      required: false,
       validator: (value: boolean | string) => {
         if (typeof value == 'string') {
           return ['external'].includes(value)
@@ -168,7 +142,6 @@ const CMultiSelect = defineComponent({
     searchNoResultsLabel: {
       type: String,
       default: 'no items',
-      required: false,
     },
     /**
      * Enables select all button.
@@ -177,7 +150,6 @@ const CMultiSelect = defineComponent({
      */
     selectAll: {
       type: Boolean,
-      required: false,
       default: true,
     },
     /**
@@ -187,7 +159,6 @@ const CMultiSelect = defineComponent({
      */
     selectAllLabel: {
       type: String,
-      required: false,
       default: 'Select all options',
     },
     /**
@@ -199,7 +170,6 @@ const CMultiSelect = defineComponent({
     selectionType: {
       type: String,
       default: 'tags',
-      required: false,
       validator: (value: string) => {
         return ['counter', 'tags', 'text'].includes(value)
       },
@@ -212,7 +182,6 @@ const CMultiSelect = defineComponent({
     selectionTypeCounterText: {
       type: String,
       default: 'item(s) selected',
-      required: false,
     },
     /**
      * Size the component small or large.
@@ -221,7 +190,6 @@ const CMultiSelect = defineComponent({
      */
     size: {
       type: String,
-      required: false,
       validator: (value: string) => {
         return ['sm', 'lg'].includes(value)
       },
@@ -246,6 +214,12 @@ const CMultiSelect = defineComponent({
      * @since 4.6.0
      */
     valid: Boolean,
+    /**
+     * Enable virtual scroller for the options list.
+     *
+     * @since 4.8.0
+     */
+    virtualScroller: Boolean,
     /**
      * Toggle the visibility of multi select dropdown.
      *
@@ -254,7 +228,16 @@ const CMultiSelect = defineComponent({
     visible: {
       type: Boolean,
       default: false,
-      required: false,
+    },
+    /**
+     *
+     * Amount of visible items when virtualScroller is set to `true`.
+     *
+     * @since 4.8.0
+     */
+    visibleItems: {
+      type: Number,
+      default: 10,
     },
   },
   emits: [
@@ -271,37 +254,13 @@ const CMultiSelect = defineComponent({
   ],
   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 searchRef = ref<HTMLInputElement>()
     const selected = ref<SelectedOption[]>([])
     const visible = ref<Boolean>(props.visible)
 
-    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 unique
-      }, []) as SelectedOption[]
-
-      selected.value = deduplicated
-    }
+    provide('nativeSelectRef', nativeSelectRef)
 
     watch(
       () => props.options,
@@ -328,9 +287,12 @@ const CMultiSelect = defineComponent({
               return
             })
 
-          _selected && selectOptions(_selected, deselected)
+          if (_selected) {
+            selected.value = selectOptions(_selected, selected.value, deselected)
+          }
         }
       },
+      { immediate: true },
     )
 
     watch(selected, () => {
@@ -338,39 +300,6 @@ const CMultiSelect = defineComponent({
         nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
     })
 
-    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.value
-    }
-
-    // watch(
-    //   () => props.options,
-    //   (newValue, oldValue) => {
-    //     console.log(props.options)
-    //     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
-    //   },
-    // )
-
-
-
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       search.value = target.value.toLowerCase()
@@ -414,7 +343,10 @@ const CMultiSelect = defineComponent({
     }
 
     const handleSelectAll = () => {
-      selectOptions(flattenArray(options.value).filter((option: Option) => !option.disabled))
+      selected.value = selectOptions(
+        flattenArray(options.value).filter((option: Option) => !option.disabled),
+        selected.value,
+      )
     }
 
     const handleDeselectAll = () => {
@@ -517,7 +449,7 @@ const CMultiSelect = defineComponent({
                       }),
                   ]),
                 default: () =>
-                  h('div', {}, [
+                  visible.value && [
                     props.multiple &&
                       props.selectAll &&
                       h(
@@ -538,9 +470,11 @@ const CMultiSelect = defineComponent({
                       optionsMaxHeight: props.optionsMaxHeight,
                       optionsStyle: props.optionsStyle,
                       searchNoResultsLabel: props.searchNoResultsLabel,
-                      selected: selected.value
+                      selected: selected.value,
+                      virtualScroller: props.virtualScroller,
+                      visibleItems: props.visibleItems,
                     }),
-                  ]),
+                  ],
               },
             ),
         },

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

@@ -1,5 +1,6 @@
 import { defineComponent, h, inject, PropType, VNode } from 'vue'
-import { Option } from './CMultiSelect'
+
+import type { Option } from './types'
 
 const CMultiSelectNativeSelect = defineComponent({
   name: 'CMultiSelectGroupOption',

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

@@ -1,7 +1,9 @@
 import { defineComponent, h, PropType, VNode } from 'vue'
-import { Option } from './CMultiSelect'
 
-import { getNextSibling, getPreviousSibling } from './../../utils'
+import { CVirtualScroller } from '../virtual-scroller'
+
+import { getNextSibling, getPreviousSibling } from './utils'
+import type { Option } from './types'
 
 const CMultiSelectOptions = defineComponent({
   name: 'CMultiSelectOptions',
@@ -12,7 +14,6 @@ const CMultiSelectOptions = defineComponent({
     options: {
       type: Array as PropType<Option[]>,
       default: () => [],
-      required: false,
     },
     /**
      * Sets maxHeight of options list.
@@ -22,7 +23,6 @@ const CMultiSelectOptions = defineComponent({
     optionsMaxHeight: {
       type: [Number, String],
       default: 'auto',
-      required: false,
     },
     /**
      * Sets option style.
@@ -33,7 +33,6 @@ const CMultiSelectOptions = defineComponent({
     optionsStyle: {
       type: String,
       default: 'checkbox',
-      required: false,
       validator: (value: string) => {
         return ['checkbox', 'text'].includes(value)
       },
@@ -44,12 +43,15 @@ const CMultiSelectOptions = defineComponent({
     searchNoResultsLabel: {
       type: String,
       default: 'no items',
-      required: false,
     },
     selected: {
       type: Array as PropType<Option[]>,
       default: () => [],
-      required: false,
+    },
+    virtualScroller: Boolean,
+    visibleItems: {
+      type: Number,
+      default: 10,
     },
   },
   emits: ['optionClick'],
@@ -114,17 +116,29 @@ const CMultiSelectOptions = defineComponent({
                 ),
           )
         : h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel)
+
     return () =>
-      h(
-        'div',
-        {
-          class: 'form-multi-select-options',
-          ...(props.optionsMaxHeight !== 'auto' && {
-            style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
-          }),
-        },
-        createOptions(props.options),
-      )
+      props.virtualScroller
+        ? h(
+            CVirtualScroller,
+            {
+              class: 'form-multi-select-options',
+              visibleItems: props.visibleItems,
+            },
+            {
+              default: () => createOptions(props.options),
+            },
+          )
+        : h(
+            'div',
+            {
+              class: 'form-multi-select-options',
+              ...(props.optionsMaxHeight !== 'auto' && {
+                style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
+              }),
+            },
+            createOptions(props.options),
+          )
   },
 })
 

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

@@ -1,5 +1,6 @@
 import { defineComponent, h, PropType } from 'vue'
-import { Option } from './CMultiSelect'
+
+import type { Option } from './types'
 
 const CMultiSelectSelection = defineComponent({
   name: 'CMultiSelectSelection',

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

@@ -0,0 +1,15 @@
+export type Option = {
+  disabled?: boolean
+  label?: string
+  options?: Option[]
+  order?: number
+  selected?: boolean
+  text: string
+  value: number | string
+}
+
+export type SelectedOption = {
+  disabled?: boolean
+  text: string
+  value: number | string
+}