@coreui/vue-pro 4.8.0-next.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.8.0-next.0",
+  "version": "4.8.0-next.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

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/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,29 +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
-    }
-
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       search.value = target.value.toLowerCase()
@@ -404,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 = () => {
@@ -507,7 +449,7 @@ const CMultiSelect = defineComponent({
                       }),
                   ]),
                 default: () =>
-                  h('div', {}, [
+                  visible.value && [
                     props.multiple &&
                       props.selectAll &&
                       h(
@@ -528,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
+}

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

@@ -0,0 +1,92 @@
+import type { Option, SelectedOption } from './types'
+
+export 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
+}
+
+export const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
+export const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // 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
+}
+
+export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // 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
+}
+
+export const selectOptions = (
+  options: Option[],
+  selected: SelectedOption[],
+  deselected?: Option[],
+) => {
+  let _selected = [...selected, ...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[]
+
+  return deduplicated
+}

package/src/components/virtual-scroller/CVirtualScroller.ts

@@ -0,0 +1,109 @@
+import { cloneVNode, computed, defineComponent, h, onMounted, ref, VNode } from 'vue'
+
+const CVirtualScroller = defineComponent({
+  name: 'CVirtualScroller',
+  props: {
+    /**
+     * Amount of visible items
+     */
+    visibleItems: {
+      type: Number,
+      default: 10,
+    },
+  },
+  setup(props, { slots }) {
+    const virtualScrollRef = ref<HTMLDivElement>()
+    const virtualScrollContentRef = ref<HTMLDivElement>()
+
+    const currentItemIndex = ref(1)
+    const itemHeight = ref<number>(0)
+    const itemsNumber = ref<number>(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: number) => {
+      currentItemIndex.value =
+        itemHeight.value && Math.max(Math.ceil(scrollTop / itemHeight.value), 1)
+    }
+
+    return () => {
+      const children: any = slots.default
+        ? Array.isArray(slots.default()[0].children)
+          ? slots.default()[0].children
+          : slots.default()
+        : []
+      itemsNumber.value = children && children.length ? children.length : 0
+      return h(
+        'div',
+        {
+          class: ['virtual-scroller'],
+          onScroll: (event: any) => handleScroll((event.target as HTMLDivElement).scrollTop),
+          style: {
+            height: `${
+              maxHeight.value > viewportHeight.value ? viewportHeight.value : maxHeight.value
+            }px`,
+            overflowY: 'auto',
+          },
+          ref: virtualScrollRef,
+        },
+        h(
+          'div',
+          {
+            class: 'virtual-scroller-content',
+            style: {
+              height: `${maxHeight.value}px`,
+            },
+            ref: virtualScrollContentRef,
+          },
+          children.map(
+            (slot: VNode, index: number) =>
+              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 as HTMLElement).offsetHeight) {
+                    itemHeight.value =
+                      (node as HTMLElement).offsetHeight +
+                      parseFloat(getComputedStyle(node as HTMLElement).marginTop) +
+                      parseFloat(getComputedStyle(node as HTMLElement).marginBottom)
+                  }
+                },
+              }),
+          ),
+        ),
+      )
+    }
+  },
+})
+export { CVirtualScroller }

package/src/components/virtual-scroller/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CVirtualScroller } from './CVirtualScroller'
+
+const CVirtualScrollerPlugin = {
+  install: (app: App): void => {
+    app.component(CVirtualScroller.name, CVirtualScroller)
+  },
+}
+
+export { CVirtualScroller, CVirtualScrollerPlugin }

package/src/utils/index.ts

@@ -1,5 +1,3 @@
-import getNextSibling from './getNextSibling'
-import getPreviousSibling from './getPreviousSibling'
 import isInViewport from './isInViewport'
 
-export { getNextSibling, getPreviousSibling, isInViewport }
+export { isInViewport }

package/src/utils/getNextSibling.ts

@@ -1,18 +0,0 @@
-const getNextSibling = (elem: HTMLElement, selector?: string) => {
-  // 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
-}
-
-export default getNextSibling

package/src/utils/getPreviousSibling.ts

@@ -1,18 +0,0 @@
-const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
-  // 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
-}
-
-export default getPreviousSibling