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

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",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

package/src/components/carousel/CCarousel.ts

@@ -1,7 +1,6 @@
 import {
   defineComponent,
   h,
-  reactive,
   ref,
   VNode,
   onBeforeMount,
@@ -79,10 +78,15 @@ const CCarousel = defineComponent({
   },
   setup(props, { slots }) {
     const carouselRef = ref()
-    const timeout = ref()
+
+    const active = ref(props.index)
     const animating = ref(false)
-    const visible = ref()
     const customInterval = ref<boolean | number>(props.interval)
+    const direction = ref('next')
+    const items = ref<VNode[]>([])
+    const timeout = ref()
+    const visible = ref()
+    
     const setAnimating = (value: boolean) => {
       animating.value = value
     }
@@ -105,28 +109,15 @@ const CCarousel = defineComponent({
       }
     }
 
-    const state = reactive({
-      items: [] as VNode[],
-      active: props.index,
-      direction: 'next',
-    })
-
-    onBeforeMount(() => {
-      if (slots.default) {
-        // @ts-expect-error TODO: fix types
-        state.items = slots.default().filter((child) => child.type.name === 'CCarouselItem')
-      }
-    })
-
-    const handleControlClick = (direction: string) => {
+    const handleControlClick = (_direction: string) => {
       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--
       }
     }
 
@@ -139,19 +130,19 @@ const CCarousel = defineComponent({
     }
 
     const handleIndicatorClick = (index: number) => {
-      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
       }
     }
 
@@ -163,6 +154,17 @@ const CCarousel = defineComponent({
       }
     }
 
+    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')
+        }
+      }
+    })
+
     onMounted(() => {
       window.addEventListener('scroll', handleScroll)
     })
@@ -174,7 +176,7 @@ const CCarousel = defineComponent({
           return
         }
 
-        if (!props.wrap && state.active < state.items.length - 1) {
+        if (!props.wrap && active.value < items.value.length - 1) {
           !animating.value && cycle()
         }
       })
@@ -204,12 +206,12 @@ const CCarousel = defineComponent({
               {
                 class: 'carousel-indicators',
               },
-              state.items.map((_, index) => {
+              items.value.map((_, index) => {
                 return h('button', {
                   type: 'button',
                   id: index,
                   'data-coreui-target': '',
-                  ...(state.active === index && { class: 'active' }),
+                  ...(active.value === index && { class: 'active' }),
                   onClick: () => handleIndicatorClick(index),
                 })
               }),
@@ -217,10 +219,10 @@ const CCarousel = defineComponent({
           h(
             'div',
             { class: 'carousel-inner' },
-            state.items.map((item, index) => {
+            items.value.map((item, index) => {
               return h(item, {
-                active: state.active === index ? true : false,
-                direction: state.direction,
+                active: active.value === index ? true : false,
+                direction: direction.value,
               })
             }),
           ),

package/src/components/form/CFormCheck.ts

@@ -83,6 +83,12 @@ const CFormCheck = 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.
      *
@@ -126,6 +132,7 @@ const CFormCheck = defineComponent({
       'form-check',
       {
         'form-check-inline': props.inline,
+        'form-check-reverse': props.reverse,
         'is-invalid': props.invalid,
         'is-valid': props.valid,
       },

package/src/components/form/CFormSwitch.ts

@@ -31,6 +31,12 @@ const CFormSwitch = 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`.
      *
@@ -82,6 +88,7 @@ const CFormSwitch = 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,

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
+}