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

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 &&
@@ -2015,10 +1983,13 @@ const CCarousel = vue.defineComponent({
     },
     setup(props, { slots }) {
         const carouselRef = vue.ref();
-        const timeout = vue.ref();
+        const active = vue.ref(props.index);
         const animating = vue.ref(false);
-        const visible = vue.ref();
         const customInterval = vue.ref(props.interval);
+        const direction = vue.ref('next');
+        const items = vue.ref([]);
+        const timeout = vue.ref();
+        const visible = vue.ref();
         const setAnimating = (value) => {
             animating.value = value;
         };
@@ -2034,27 +2005,16 @@ const CCarousel = vue.defineComponent({
                 timeout.value = setTimeout(() => nextItemWhenVisible(), typeof customInterval.value === 'number' ? customInterval.value : props.interval);
             }
         };
-        const state = vue.reactive({
-            items: [],
-            active: props.index,
-            direction: 'next',
-        });
-        vue.onBeforeMount(() => {
-            if (slots.default) {
-                // @ts-expect-error TODO: fix types
-                state.items = slots.default().filter((child) => child.type.name === 'CCarouselItem');
-            }
-        });
-        const handleControlClick = (direction) => {
+        const handleControlClick = (_direction) => {
             if (animating.value) {
                 return;
             }
-            state.direction = direction;
-            if (direction === 'next') {
-                state.active === state.items.length - 1 ? (state.active = 0) : state.active++;
+            direction.value = _direction;
+            if (_direction === 'next') {
+                active.value === items.value.length - 1 ? (active.value = 0) : active.value++;
             }
             else {
-                state.active === 0 ? (state.active = state.items.length - 1) : state.active--;
+                active.value === 0 ? (active.value = items.value.length - 1) : active.value--;
             }
         };
         const nextItemWhenVisible = () => {
@@ -2065,17 +2025,17 @@ const CCarousel = vue.defineComponent({
             }
         };
         const handleIndicatorClick = (index) => {
-            if (state.active === index) {
+            if (active.value === index) {
                 return;
             }
-            if (state.active < index) {
-                state.direction = 'next';
-                state.active = index;
+            if (active.value < index) {
+                direction.value = 'next';
+                active.value = index;
                 return;
             }
-            if (state.active > index) {
-                state.direction = 'prev';
-                state.active = index;
+            if (active.value > index) {
+                direction.value = 'prev';
+                active.value = index;
             }
         };
         const handleScroll = () => {
@@ -2086,6 +2046,15 @@ const CCarousel = vue.defineComponent({
                 visible.value = false;
             }
         };
+        vue.onBeforeMount(() => {
+            if (slots.default) {
+                const children = typeof slots.default()[0].type === 'symbol' ? slots.default()[0].children : slots.default();
+                if (children && Array.isArray(children)) {
+                    // @ts-expect-error TODO: fix types
+                    items.value = children.filter((child) => child.type.name === 'CCarouselItem');
+                }
+            }
+        });
         vue.onMounted(() => {
             window.addEventListener('scroll', handleScroll);
         });
@@ -2095,7 +2064,7 @@ const CCarousel = vue.defineComponent({
                     !animating.value && cycle();
                     return;
                 }
-                if (!props.wrap && state.active < state.items.length - 1) {
+                if (!props.wrap && active.value < items.value.length - 1) {
                     !animating.value && cycle();
                 }
             });
@@ -2116,19 +2085,19 @@ const CCarousel = vue.defineComponent({
             props.indicators &&
                 vue.h('div', {
                     class: 'carousel-indicators',
-                }, state.items.map((_, index) => {
+                }, items.value.map((_, index) => {
                     return vue.h('button', {
                         type: 'button',
                         id: index,
                         'data-coreui-target': '',
-                        ...(state.active === index && { class: 'active' }),
+                        ...(active.value === index && { class: 'active' }),
                         onClick: () => handleIndicatorClick(index),
                     });
                 })),
-            vue.h('div', { class: 'carousel-inner' }, state.items.map((item, index) => {
+            vue.h('div', { class: 'carousel-inner' }, items.value.map((item, index) => {
                 return vue.h(item, {
-                    active: state.active === index ? true : false,
-                    direction: state.direction,
+                    active: active.value === index ? true : false,
+                    direction: direction.value,
                 });
             })),
             props.controls && [
@@ -4847,6 +4816,12 @@ const CFormCheck = vue.defineComponent({
             type: [Boolean, String],
             value: undefined,
         },
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @sinve 4.8.0
+         */
+        reverse: Boolean,
         /**
          * Display validation feedback in a styled tooltip.
          *
@@ -4889,6 +4864,7 @@ const CFormCheck = vue.defineComponent({
             'form-check',
             {
                 'form-check-inline': props.inline,
+                'form-check-reverse': props.reverse,
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
             },
@@ -5586,6 +5562,12 @@ const CFormSwitch = vue.defineComponent({
             type: [Boolean, String],
             value: undefined,
         },
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @sinve 4.8.0
+         */
+        reverse: Boolean,
         /**
          * Size the component large or extra large. Works only with `switch`.
          *
@@ -5633,6 +5615,7 @@ const CFormSwitch = vue.defineComponent({
             class: [
                 'form-check form-switch',
                 {
+                    'form-check-reverse': props.reverse,
                     [`form-switch-${props.size}`]: props.size,
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
@@ -11534,6 +11517,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 +11679,6 @@ const CMultiSelectOptions = vue.defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11553,7 +11688,6 @@ const CMultiSelectOptions = vue.defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11564,7 +11698,6 @@ const CMultiSelectOptions = vue.defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11575,12 +11708,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 +11768,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 +11871,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 +11881,6 @@ const CMultiSelect = vue.defineComponent({
          */
         cleaner: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11751,7 +11888,6 @@ const CMultiSelect = vue.defineComponent({
          */
         disabled: {
             type: Boolean,
-            required: false,
             default: false,
         },
         /**
@@ -11806,7 +11942,6 @@ const CMultiSelect = vue.defineComponent({
         multiple: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * List of option elements.
@@ -11814,7 +11949,6 @@ const CMultiSelect = vue.defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11824,7 +11958,6 @@ const CMultiSelect = vue.defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11835,7 +11968,6 @@ const CMultiSelect = vue.defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11848,7 +11980,6 @@ const CMultiSelect = vue.defineComponent({
         placeholder: {
             type: String,
             default: 'Select...',
-            required: false,
         },
         /**
          * Enables search input element.
@@ -11856,7 +11987,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 +12003,6 @@ const CMultiSelect = vue.defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         /**
          * Enables select all button.
@@ -11882,7 +12011,6 @@ const CMultiSelect = vue.defineComponent({
          */
         selectAll: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11892,7 +12020,6 @@ const CMultiSelect = vue.defineComponent({
          */
         selectAllLabel: {
             type: String,
-            required: false,
             default: 'Select all options',
         },
         /**
@@ -11904,7 +12031,6 @@ const CMultiSelect = vue.defineComponent({
         selectionType: {
             type: String,
             default: 'tags',
-            required: false,
             validator: (value) => {
                 return ['counter', 'tags', 'text'].includes(value);
             },
@@ -11917,7 +12043,6 @@ const CMultiSelect = vue.defineComponent({
         selectionTypeCounterText: {
             type: String,
             default: 'item(s) selected',
-            required: false,
         },
         /**
          * Size the component small or large.
@@ -11926,7 +12051,6 @@ const CMultiSelect = vue.defineComponent({
          */
         size: {
             type: String,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -11951,6 +12075,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 +12089,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 +12115,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 +12138,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 +12184,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 +12275,7 @@ const CMultiSelect = vue.defineComponent({
                                 ref: searchRef,
                             }),
                     ]),
-                    default: () => vue.h('div', {}, [
+                    default: () => visible.value && [
                         props.multiple &&
                             props.selectAll &&
                             vue.h('button', {
@@ -12181,9 +12291,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 +16800,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CToaster: CToaster,
     CTooltip: CTooltip,
     CTooltipPlugin: CTooltipPlugin,
+    CVirtualScroller: CVirtualScroller,
+    CVirtualScrollerPlugin: CVirtualScrollerPlugin,
     CWidgetStatsA: CWidgetStatsA,
     CWidgetStatsB: CWidgetStatsB,
     CWidgetStatsC: CWidgetStatsC,
@@ -17096,6 +17210,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;