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

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, cloneVNode, nextTick, vShow, Teleport, onBeforeUnmount, computed } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, cloneVNode, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -1905,38 +1905,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 &&
@@ -11530,6 +11498,159 @@ const CMultiSelectNativeSelect = defineComponent({
     },
 });
 
+const CVirtualScroller = defineComponent({
+    name: 'CVirtualScroller',
+    props: {
+        /**
+         * Amount of visible items
+         */
+        visibleItems: {
+            type: Number,
+            default: 10,
+        },
+    },
+    setup(props, { slots }) {
+        const virtualScrollRef = ref();
+        const virtualScrollContentRef = ref();
+        const currentItemIndex = ref(1);
+        const itemHeight = ref(0);
+        const itemsNumber = ref(0);
+        const viewportPadding = ref(0);
+        const buffer = computed(() => Math.floor(props.visibleItems / 2));
+        const maxHeight = computed(() => itemsNumber.value * itemHeight.value + 2 * viewportPadding.value);
+        const viewportHeight = computed(() => props.visibleItems * itemHeight.value + 2 * viewportPadding.value);
+        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 h$1('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,
+            }, h$1('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 &&
+                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 = defineComponent({
     name: 'CMultiSelectOptions',
     props: {
@@ -11539,7 +11660,6 @@ const CMultiSelectOptions = defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11549,7 +11669,6 @@ const CMultiSelectOptions = defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11560,7 +11679,6 @@ const CMultiSelectOptions = defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11571,12 +11689,15 @@ const CMultiSelectOptions = defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         selected: {
             type: Array,
             default: () => [],
-            required: false,
+        },
+        virtualScroller: Boolean,
+        visibleItems: {
+            type: Number,
+            default: 10,
         },
     },
     emits: ['optionClick'],
@@ -11628,12 +11749,19 @@ const CMultiSelectOptions = defineComponent({
                     tabindex: 0,
                 }, option.text))
             : h$1('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel);
-        return () => h$1('div', {
-            class: 'form-multi-select-options',
-            ...(props.optionsMaxHeight !== 'auto' && {
-                style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
-            }),
-        }, createOptions(props.options));
+        return () => props.virtualScroller
+            ? h$1(CVirtualScroller, {
+                class: 'form-multi-select-options',
+                visibleItems: props.visibleItems,
+            }, {
+                default: () => createOptions(props.options),
+            })
+            : h$1('div', {
+                class: 'form-multi-select-options',
+                ...(props.optionsMaxHeight !== 'auto' && {
+                    style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
+                }),
+            }, createOptions(props.options));
     },
 });
 
@@ -11724,11 +11852,6 @@ const CMultiSelectSelection = defineComponent({
     },
 });
 
-const flattenArray = (options) => {
-    return options.reduce((acc, val) => {
-        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
-    }, []);
-};
 const CMultiSelect = defineComponent({
     name: 'CMultiSelect',
     props: {
@@ -11739,7 +11862,6 @@ const CMultiSelect = defineComponent({
          */
         cleaner: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11747,7 +11869,6 @@ const CMultiSelect = defineComponent({
          */
         disabled: {
             type: Boolean,
-            required: false,
             default: false,
         },
         /**
@@ -11802,7 +11923,6 @@ const CMultiSelect = defineComponent({
         multiple: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * List of option elements.
@@ -11810,7 +11930,6 @@ const CMultiSelect = defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11820,7 +11939,6 @@ const CMultiSelect = defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11831,7 +11949,6 @@ const CMultiSelect = defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11844,7 +11961,6 @@ const CMultiSelect = defineComponent({
         placeholder: {
             type: String,
             default: 'Select...',
-            required: false,
         },
         /**
          * Enables search input element.
@@ -11852,7 +11968,6 @@ const CMultiSelect = defineComponent({
         search: {
             type: [Boolean, String],
             default: true,
-            required: false,
             validator: (value) => {
                 if (typeof value == 'string') {
                     return ['external'].includes(value);
@@ -11869,7 +11984,6 @@ const CMultiSelect = defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         /**
          * Enables select all button.
@@ -11878,7 +11992,6 @@ const CMultiSelect = defineComponent({
          */
         selectAll: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11888,7 +12001,6 @@ const CMultiSelect = defineComponent({
          */
         selectAllLabel: {
             type: String,
-            required: false,
             default: 'Select all options',
         },
         /**
@@ -11900,7 +12012,6 @@ const CMultiSelect = defineComponent({
         selectionType: {
             type: String,
             default: 'tags',
-            required: false,
             validator: (value) => {
                 return ['counter', 'tags', 'text'].includes(value);
             },
@@ -11913,7 +12024,6 @@ const CMultiSelect = defineComponent({
         selectionTypeCounterText: {
             type: String,
             default: 'item(s) selected',
-            required: false,
         },
         /**
          * Size the component small or large.
@@ -11922,7 +12032,6 @@ const CMultiSelect = defineComponent({
          */
         size: {
             type: String,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -11947,6 +12056,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.
          *
@@ -11955,7 +12070,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: [
@@ -11972,29 +12096,12 @@ const CMultiSelect = defineComponent({
     ],
     setup(props, { attrs, emit }) {
         const nativeSelectRef = ref();
-        provide('nativeSelectRef', nativeSelectRef);
-        const searchRef = ref();
         const options = ref(props.options);
         const search = ref('');
+        const searchRef = ref();
         const selected = ref([]);
         const visible = 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;
-        };
+        provide('nativeSelectRef', nativeSelectRef);
         watch(() => props.options, (newValue, oldValue) => {
             if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
                 options.value = newValue;
@@ -12012,27 +12119,15 @@ const CMultiSelect = defineComponent({
                         }
                         return;
                     });
-                _selected && selectOptions(_selected, deselected);
+                if (_selected) {
+                    selected.value = selectOptions(_selected, selected.value, deselected);
+                }
             }
-        });
+        }, { immediate: true });
         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();
@@ -12070,7 +12165,7 @@ const CMultiSelect = 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);
@@ -12161,7 +12256,7 @@ const CMultiSelect = defineComponent({
                                 ref: searchRef,
                             }),
                     ]),
-                    default: () => h$1('div', {}, [
+                    default: () => visible.value && [
                         props.multiple &&
                             props.selectAll &&
                             h$1('button', {
@@ -12177,9 +12272,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,
                         }),
-                    ]),
+                    ],
                 }),
             }),
         ];
@@ -16684,6 +16781,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CToaster: CToaster,
     CTooltip: CTooltip,
     CTooltipPlugin: CTooltipPlugin,
+    CVirtualScroller: CVirtualScroller,
+    CVirtualScrollerPlugin: CVirtualScrollerPlugin,
     CWidgetStatsA: CWidgetStatsA,
     CWidgetStatsB: CWidgetStatsB,
     CWidgetStatsC: CWidgetStatsC,
@@ -16922,5 +17021,5 @@ const CoreuiVue = {
     },
 };
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCalendar, CCalendarPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDatePicker, CDatePickerPlugin, CDateRangePicker, CDateRangePickerPlugin, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPicker, CPickerPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartPaginationPlugin, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CTimePicker, CTimePickerPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, vcplaceholder, vcpopover, vctooltip };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCalendar, CCalendarPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDatePicker, CDatePickerPlugin, CDateRangePicker, CDateRangePickerPlugin, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPicker, CPickerPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartPaginationPlugin, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CTimePicker, CTimePickerPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CVirtualScroller, CVirtualScrollerPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, vcplaceholder, vcpopover, vctooltip };
 //# sourceMappingURL=index.es.js.map