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

package/dist/index.js

@@ -1909,38 +1909,6 @@ const CCardPlugin = {
     },
 };
 
-const getNextSibling = (elem, selector) => {
-    // Get the next sibling element
-    let sibling = elem.nextElementSibling;
-    // If there's no selector, return the first sibling
-    if (!selector)
-        return sibling;
-    // If the sibling matches our selector, use it
-    // If not, jump to the next sibling and continue the loop
-    while (sibling) {
-        if (sibling.matches(selector))
-            return sibling;
-        sibling = sibling.nextElementSibling;
-    }
-    return;
-};
-
-const getPreviousSibling = (elem, selector) => {
-    // Get the next sibling element
-    let sibling = elem.previousElementSibling;
-    // If there's no selector, return the first sibling
-    if (!selector)
-        return sibling;
-    // If the sibling matches our selector, use it
-    // If not, jump to the next sibling and continue the loop
-    while (sibling) {
-        if (sibling.matches(selector))
-            return sibling;
-        sibling = sibling.previousElementSibling;
-    }
-    return;
-};
-
 const isInViewport = (element) => {
     const rect = element.getBoundingClientRect();
     return (Math.floor(rect.top) >= 0 &&
@@ -11534,6 +11502,159 @@ const CMultiSelectNativeSelect = vue.defineComponent({
     },
 });
 
+const CVirtualScroller = vue.defineComponent({
+    name: 'CVirtualScroller',
+    props: {
+        /**
+         * Amount of visible items
+         */
+        visibleItems: {
+            type: Number,
+            default: 10,
+        },
+    },
+    setup(props, { slots }) {
+        const virtualScrollRef = vue.ref();
+        const virtualScrollContentRef = vue.ref();
+        const currentItemIndex = vue.ref(1);
+        const itemHeight = vue.ref(0);
+        const itemsNumber = vue.ref(0);
+        const viewportPadding = vue.ref(0);
+        const buffer = vue.computed(() => Math.floor(props.visibleItems / 2));
+        const maxHeight = vue.computed(() => itemsNumber.value * itemHeight.value + 2 * viewportPadding.value);
+        const viewportHeight = vue.computed(() => props.visibleItems * itemHeight.value + 2 * viewportPadding.value);
+        vue.onMounted(() => {
+            if (virtualScrollRef.value) {
+                viewportPadding.value = parseFloat(getComputedStyle(virtualScrollRef.value).paddingTop);
+                // It's necessary to calculate heights of items
+                virtualScrollRef.value.dispatchEvent(new CustomEvent('scroll'));
+            }
+        });
+        const handleScroll = (scrollTop) => {
+            currentItemIndex.value =
+                itemHeight.value && Math.max(Math.ceil(scrollTop / itemHeight.value), 1);
+        };
+        return () => {
+            const children = slots.default
+                ? Array.isArray(slots.default()[0].children)
+                    ? slots.default()[0].children
+                    : slots.default()
+                : [];
+            itemsNumber.value = children && children.length ? children.length : 0;
+            return vue.h('div', {
+                class: ['virtual-scroller'],
+                onScroll: (event) => handleScroll(event.target.scrollTop),
+                style: {
+                    height: `${maxHeight.value > viewportHeight.value ? viewportHeight.value : maxHeight.value}px`,
+                    overflowY: 'auto',
+                },
+                ref: virtualScrollRef,
+            }, vue.h('div', {
+                class: 'virtual-scroller-content',
+                style: {
+                    height: `${maxHeight.value}px`,
+                },
+                ref: virtualScrollContentRef,
+            }, children.map((slot, index) => index + 1 > Math.max(currentItemIndex.value - buffer.value, 0) &&
+                index + 1 <= currentItemIndex.value + props.visibleItems + buffer.value &&
+                vue.cloneVNode(slot, {
+                    class: [
+                        {
+                            'virtual-scroller-item-preload': index + 1 > currentItemIndex.value + props.visibleItems ||
+                                index + 1 < currentItemIndex.value,
+                        },
+                    ],
+                    style: {
+                        ...(currentItemIndex.value > buffer.value && {
+                            transform: `translateY(${(currentItemIndex.value - buffer.value) * itemHeight.value}px)`,
+                        }),
+                    },
+                    ref: (node) => {
+                        if (node && node.offsetHeight) {
+                            itemHeight.value =
+                                node.offsetHeight +
+                                    parseFloat(getComputedStyle(node).marginTop) +
+                                    parseFloat(getComputedStyle(node).marginBottom);
+                        }
+                    },
+                }))));
+        };
+    },
+});
+
+const CVirtualScrollerPlugin = {
+    install: (app) => {
+        app.component(CVirtualScroller.name, CVirtualScroller);
+    },
+};
+
+const filterOptionsList = (search, _options) => {
+    return search.length
+        ? _options &&
+            _options.reduce((acc, val) => {
+                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;
+};
+const flattenArray = (options) => {
+    return options.reduce((acc, val) => {
+        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
+    }, []);
+};
+const getNextSibling = (elem, selector) => {
+    // Get the next sibling element
+    let sibling = elem.nextElementSibling;
+    // If there's no selector, return the first sibling
+    if (!selector)
+        return sibling;
+    // If the sibling matches our selector, use it
+    // If not, jump to the next sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector))
+            return sibling;
+        sibling = sibling.nextElementSibling;
+    }
+    return;
+};
+const getPreviousSibling = (elem, selector) => {
+    // Get the next sibling element
+    let sibling = elem.previousElementSibling;
+    // If there's no selector, return the first sibling
+    if (!selector)
+        return sibling;
+    // If the sibling matches our selector, use it
+    // If not, jump to the next sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector))
+            return sibling;
+        sibling = sibling.previousElementSibling;
+    }
+    return;
+};
+const selectOptions = (options, selected, deselected) => {
+    let _selected = [...selected, ...options];
+    if (deselected) {
+        _selected = _selected.filter((selectedOption) => !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value));
+    }
+    const deduplicated = _selected.reduce((unique, option) => {
+        if (!unique.some((obj) => obj.value === option.value)) {
+            unique.push({
+                value: option.value,
+                text: option.text,
+                ...(option.disabled && { disabled: option.disabled }),
+            });
+        }
+        return unique;
+    }, []);
+    return deduplicated;
+};
+
 const CMultiSelectOptions = vue.defineComponent({
     name: 'CMultiSelectOptions',
     props: {
@@ -11543,7 +11664,6 @@ const CMultiSelectOptions = vue.defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11553,7 +11673,6 @@ const CMultiSelectOptions = vue.defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11564,7 +11683,6 @@ const CMultiSelectOptions = vue.defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11575,12 +11693,15 @@ const CMultiSelectOptions = vue.defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         selected: {
             type: Array,
             default: () => [],
-            required: false,
+        },
+        virtualScroller: Boolean,
+        visibleItems: {
+            type: Number,
+            default: 10,
         },
     },
     emits: ['optionClick'],
@@ -11632,12 +11753,19 @@ const CMultiSelectOptions = vue.defineComponent({
                     tabindex: 0,
                 }, option.text))
             : vue.h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel);
-        return () => vue.h('div', {
-            class: 'form-multi-select-options',
-            ...(props.optionsMaxHeight !== 'auto' && {
-                style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
-            }),
-        }, createOptions(props.options));
+        return () => props.virtualScroller
+            ? vue.h(CVirtualScroller, {
+                class: 'form-multi-select-options',
+                visibleItems: props.visibleItems,
+            }, {
+                default: () => createOptions(props.options),
+            })
+            : vue.h('div', {
+                class: 'form-multi-select-options',
+                ...(props.optionsMaxHeight !== 'auto' && {
+                    style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
+                }),
+            }, createOptions(props.options));
     },
 });
 
@@ -11728,11 +11856,6 @@ const CMultiSelectSelection = vue.defineComponent({
     },
 });
 
-const flattenArray = (options) => {
-    return options.reduce((acc, val) => {
-        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
-    }, []);
-};
 const CMultiSelect = vue.defineComponent({
     name: 'CMultiSelect',
     props: {
@@ -11743,7 +11866,6 @@ const CMultiSelect = vue.defineComponent({
          */
         cleaner: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11751,7 +11873,6 @@ const CMultiSelect = vue.defineComponent({
          */
         disabled: {
             type: Boolean,
-            required: false,
             default: false,
         },
         /**
@@ -11806,7 +11927,6 @@ const CMultiSelect = vue.defineComponent({
         multiple: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * List of option elements.
@@ -11814,7 +11934,6 @@ const CMultiSelect = vue.defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11824,7 +11943,6 @@ const CMultiSelect = vue.defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11835,7 +11953,6 @@ const CMultiSelect = vue.defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11848,7 +11965,6 @@ const CMultiSelect = vue.defineComponent({
         placeholder: {
             type: String,
             default: 'Select...',
-            required: false,
         },
         /**
          * Enables search input element.
@@ -11856,7 +11972,6 @@ const CMultiSelect = vue.defineComponent({
         search: {
             type: [Boolean, String],
             default: true,
-            required: false,
             validator: (value) => {
                 if (typeof value == 'string') {
                     return ['external'].includes(value);
@@ -11873,7 +11988,6 @@ const CMultiSelect = vue.defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         /**
          * Enables select all button.
@@ -11882,7 +11996,6 @@ const CMultiSelect = vue.defineComponent({
          */
         selectAll: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11892,7 +12005,6 @@ const CMultiSelect = vue.defineComponent({
          */
         selectAllLabel: {
             type: String,
-            required: false,
             default: 'Select all options',
         },
         /**
@@ -11904,7 +12016,6 @@ const CMultiSelect = vue.defineComponent({
         selectionType: {
             type: String,
             default: 'tags',
-            required: false,
             validator: (value) => {
                 return ['counter', 'tags', 'text'].includes(value);
             },
@@ -11917,7 +12028,6 @@ const CMultiSelect = vue.defineComponent({
         selectionTypeCounterText: {
             type: String,
             default: 'item(s) selected',
-            required: false,
         },
         /**
          * Size the component small or large.
@@ -11926,7 +12036,6 @@ const CMultiSelect = vue.defineComponent({
          */
         size: {
             type: String,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -11951,6 +12060,12 @@ const CMultiSelect = vue.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.
          *
@@ -11959,7 +12074,16 @@ const CMultiSelect = vue.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: [
@@ -11976,29 +12100,12 @@ const CMultiSelect = vue.defineComponent({
     ],
     setup(props, { attrs, emit }) {
         const nativeSelectRef = vue.ref();
-        vue.provide('nativeSelectRef', nativeSelectRef);
-        const searchRef = vue.ref();
         const options = vue.ref(props.options);
         const search = vue.ref('');
+        const searchRef = vue.ref();
         const selected = vue.ref([]);
         const visible = vue.ref(props.visible);
-        const selectOptions = (options, deselected) => {
-            let _selected = [...selected.value, ...options];
-            if (deselected) {
-                _selected = _selected.filter((selectedOption) => !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value));
-            }
-            const deduplicated = _selected.reduce((unique, option) => {
-                if (!unique.some((obj) => obj.value === option.value)) {
-                    unique.push({
-                        value: option.value,
-                        text: option.text,
-                        ...(option.disabled && { disabled: option.disabled }),
-                    });
-                }
-                return unique;
-            }, []);
-            selected.value = deduplicated;
-        };
+        vue.provide('nativeSelectRef', nativeSelectRef);
         vue.watch(() => props.options, (newValue, oldValue) => {
             if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
                 options.value = newValue;
@@ -12016,27 +12123,15 @@ const CMultiSelect = vue.defineComponent({
                         }
                         return;
                     });
-                _selected && selectOptions(_selected, deselected);
+                if (_selected) {
+                    selected.value = selectOptions(_selected, selected.value, deselected);
+                }
             }
-        });
+        }, { immediate: true });
         vue.watch(selected, () => {
             nativeSelectRef.value &&
                 nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }));
         });
-        const filterOptionsList = (search, _options) => {
-            return search.length
-                ? _options &&
-                    _options.reduce((acc, val) => {
-                        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;
-        };
         const handleSearchChange = (event) => {
             const target = event.target;
             search.value = target.value.toLowerCase();
@@ -12074,7 +12169,7 @@ const CMultiSelect = vue.defineComponent({
             }
         };
         const handleSelectAll = () => {
-            selectOptions(flattenArray(options.value).filter((option) => !option.disabled));
+            selected.value = selectOptions(flattenArray(options.value).filter((option) => !option.disabled), selected.value);
         };
         const handleDeselectAll = () => {
             selected.value = selected.value.filter((option) => option.disabled);
@@ -12165,7 +12260,7 @@ const CMultiSelect = vue.defineComponent({
                                 ref: searchRef,
                             }),
                     ]),
-                    default: () => vue.h('div', {}, [
+                    default: () => visible.value && [
                         props.multiple &&
                             props.selectAll &&
                             vue.h('button', {
@@ -12181,9 +12276,11 @@ const CMultiSelect = vue.defineComponent({
                             optionsMaxHeight: props.optionsMaxHeight,
                             optionsStyle: props.optionsStyle,
                             searchNoResultsLabel: props.searchNoResultsLabel,
-                            selected: selected.value
+                            selected: selected.value,
+                            virtualScroller: props.virtualScroller,
+                            visibleItems: props.visibleItems,
                         }),
-                    ]),
+                    ],
                 }),
             }),
         ];
@@ -16688,6 +16785,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CToaster: CToaster,
     CTooltip: CTooltip,
     CTooltipPlugin: CTooltipPlugin,
+    CVirtualScroller: CVirtualScroller,
+    CVirtualScrollerPlugin: CVirtualScrollerPlugin,
     CWidgetStatsA: CWidgetStatsA,
     CWidgetStatsB: CWidgetStatsB,
     CWidgetStatsC: CWidgetStatsC,
@@ -17096,6 +17195,8 @@ exports.CToastPlugin = CToastPlugin;
 exports.CToaster = CToaster;
 exports.CTooltip = CTooltip;
 exports.CTooltipPlugin = CTooltipPlugin;
+exports.CVirtualScroller = CVirtualScroller;
+exports.CVirtualScrollerPlugin = CVirtualScrollerPlugin;
 exports.CWidgetStatsA = CWidgetStatsA;
 exports.CWidgetStatsB = CWidgetStatsB;
 exports.CWidgetStatsC = CWidgetStatsC;