@coreui/vue-pro 4.4.1 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,7 +35,7 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.4"
+    "version_short": "4.5"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -662,7 +662,7 @@ const CDateRangePicker = defineComponent({
                       maxDate: maxDate.value,
                       minDate: minDate.value,
                       navigation: props.navigation,
-                      range: true,
+                      range: props.range,
                       selectEndDate: selectEndDate.value,
                       ...(startDate.value && { startDate: startDate.value }),
                       onCalendarCellHover: (date: Date | null) => handleCalendarCellHover(date),

package/src/components/form/CFormInput.ts

@@ -188,7 +188,7 @@ const CFormInput = defineComponent({
                 onInput: (event: InputEvent) => handleInput(event),
                 readonly: props.readonly,
                 type: props.type,
-                ...(props.modelValue && { value: props.modelValue }),
+                ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue })
               },
               slots.default && slots.default(),
             ),

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

@@ -1,4 +1,7 @@
-import { defineComponent, h, onMounted, onUnmounted, PropType, provide, ref, watch } from 'vue'
+import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
+
+import { CPicker } from '../picker'
+
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
@@ -25,6 +28,14 @@ const CMultiSelect = defineComponent({
       required: false,
       default: true,
     },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * It specifies that multiple options can be selected at once.
      *
@@ -137,6 +148,18 @@ const CMultiSelect = defineComponent({
       default: 'item(s) selected',
       required: false,
     },
+    /**
+     * Size the component small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      required: false,
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
     /**
      * Toggle the visibility of multi select dropdown.
      *
@@ -239,7 +262,6 @@ const CMultiSelect = defineComponent({
         : options.value
     }
 
-    const multiSelectRef = ref<HTMLDivElement>()
     const nativeSelectRef = ref<HTMLSelectElement>()
     provide('nativeSelectRef', nativeSelectRef)
     const searchRef = ref<HTMLInputElement>()
@@ -247,15 +269,15 @@ const CMultiSelect = defineComponent({
     const options = ref<Option[]>(props.options)
     const vOptions = ref<Option[]>(props.options)
     const search = ref('')
-    const visible = ref(props.visible)
+    const visible = ref<Boolean>(props.visible)
 
     const selected = ref<Option[]>(getSelectedOptions(props.options))
     const count = ref<number>(0)
 
     watch(
       () => props.options,
-      () => {
-        options.value = props.options
+      (newValue, oldValue) => {
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
       },
     )
 
@@ -283,27 +305,6 @@ const CMultiSelect = defineComponent({
         nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
     })
 
-    onMounted(() => {
-      window.addEventListener('click', handleClickOutside)
-      window.addEventListener('keyup', handleKeyup)
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyup)
-    })
-
-    const handleKeyup = (event: Event) => {
-      if (multiSelectRef.value && !multiSelectRef.value.contains(event.target as HTMLElement)) {
-        visible.value = false
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (multiSelectRef.value && !multiSelectRef.value.contains(event.target as HTMLElement)) {
-        visible.value = false
-      }
-    }
-
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       search.value = target.value.toLowerCase()
@@ -343,74 +344,84 @@ const CMultiSelect = defineComponent({
         onChange: () => emit('change', selected.value),
       }),
       h(
-        'div',
+        CPicker,
         {
           class: [
             'form-multi-select',
             {
-              show: visible.value,
+              'form-multi-select-with-cleaner': props.cleaner,
+              disabled: props.disabled,
+              [`form-multi-select-${props.size}`]: props.size,
               'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
+              show: visible.value,
             },
           ],
-          onClick: () => {
-            visible.value = true
+          disabled: props.disabled,
+          onShow: () => {
             props.search && searchRef.value && searchRef.value.focus()
           },
-          ref: multiSelectRef,
         },
-        [
-          h(CMultiSelectSelection, {
-            multiple: props.multiple,
-            onRemove: (option: Option) => handleOptionClick(option),
-            search: props.search,
-            selected: selected.value,
-            selectionType: props.selectionType,
-            selectionTypeCounterText: props.selectionTypeCounterText,
-          }),
-          props.multiple &&
-            props.cleaner &&
-            selected.value.length > 0 &&
-            h('button', {
-              type: 'button',
-              class: 'form-multi-select-selection-cleaner',
-              onClick: () => handleDeselectAll(),
-            }),
-          props.search &&
-            h('input', {
-              type: 'text',
-              class: 'form-multi-select-search',
-              autocomplete: 'off',
-              ...(selected.value.length === 0 && { placeholder: props.placeholder }),
-              ...(selected.value.length &&
-                props.selectionType === 'counter' && {
-                  placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+        {
+          toggler: () =>
+            h('div', {}, [
+              h(CMultiSelectSelection, {
+                multiple: props.multiple,
+                onRemove: (option: Option) => !props.disabled && handleOptionClick(option),
+                search: props.search,
+                selected: selected.value,
+                selectionType: props.selectionType,
+                selectionTypeCounterText: props.selectionTypeCounterText,
+              }),
+              props.multiple &&
+                props.cleaner &&
+                selected.value.length > 0 &&
+                !props.disabled &&
+                h('button', {
+                  type: 'button',
+                  class: 'form-multi-select-selection-cleaner',
+                  onClick: () => handleDeselectAll(),
+                }),
+              props.search &&
+                h('input', {
+                  type: 'text',
+                  class: 'form-multi-select-search',
+                  autocomplete: 'off',
+                  ...(selected.value.length === 0 && { placeholder: props.placeholder }),
+                  ...(selected.value.length &&
+                    props.selectionType === 'counter' && {
+                      placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                    }),
+                  ...(selected.value.length &&
+                    !props.multiple && {
+                      placeholder: selected.value.map((option) => option.text)[0],
+                    }),
+                  disabled: props.disabled,
+                  onInput: (event: InputEvent) => handleSearchChange(event),
+                  onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
+                  ...(props.multiple &&
+                    selected.value.length &&
+                    props.selectionType !== 'counter' && { size: search.value.length + 2 }),
+                  ref: searchRef,
                 }),
-              ...(selected.value.length &&
-                !props.multiple && { placeholder: selected.value.map((option) => option.text)[0] }),
-              onInput: (event: InputEvent) => handleSearchChange(event),
-              onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
-              ...(props.multiple &&
-                selected.value.length &&
-                props.selectionType !== 'counter' && { size: search.value.length + 2 }),
-              ref: searchRef,
-            }),
-          h('div', { class: 'form-multi-select-dropdown' }, [
-            props.multiple &&
-              props.selectAll &&
-              h(
-                'button',
-                { class: 'form-multi-select-all', onClick: () => handleSelectAll() },
-                props.selectAllLabel,
-              ),
-            h(CMultiSelectOptions, {
-              onOptionClick: (option: Option) => handleOptionClick(option),
-              options: vOptions.value,
-              optionsMaxHeight: props.optionsMaxHeight,
-              optionsStyle: props.optionsStyle,
-              searchNoResultsLabel: props.searchNoResultsLabel,
-            }),
-          ]),
-        ],
+            ]),
+          default: () =>
+            h('div', {}, [
+              props.multiple &&
+                props.selectAll &&
+                h(
+                  'button',
+                  { class: 'form-multi-select-all', onClick: () => handleSelectAll() },
+                  props.selectAllLabel,
+                ),
+              h(CMultiSelectOptions, {
+                onOptionClick: (option: Option) => handleOptionClick(option),
+                options: vOptions.value,
+                optionsMaxHeight: props.optionsMaxHeight,
+                optionsStyle: props.optionsStyle,
+                searchNoResultsLabel: props.searchNoResultsLabel,
+              }),
+            ]),
+        },
       ),
     ]
   },

package/src/components/smart-table/CSmartTable.ts

@@ -388,6 +388,9 @@ const CSmartTable = defineComponent({
 
     // functions
 
+    const isLazy = (columnFilter?: boolean | { lazy?: boolean; external?: boolean }) =>
+      columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true
+
     const isSortable = (i: number): boolean | undefined => {
       const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i])
       let column
@@ -470,12 +473,9 @@ const CSmartTable = defineComponent({
       })
     }
 
-    const columnFilterChange = (colName: string, value: string, type: string): void => {
-      const isLazy =
-        props.columnFilter &&
-        typeof props.columnFilter === 'object' &&
-        props.columnFilter.lazy === true
-      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+    const columnFilterChange = (colName: string, value: any, type?: string): void => {
+      const _isLazy = isLazy(props.columnFilter)
+      if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
         return
       }
       activePage.value = 1
@@ -484,11 +484,8 @@ const CSmartTable = defineComponent({
     }
 
     const tableFilterChange = (value: string, type: string): void => {
-      const isLazy =
-        props.columnFilter &&
-        typeof props.columnFilter === 'object' &&
-        props.columnFilter.lazy === true
-      if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+      const _isLazy = isLazy(props.columnFilter)
+      if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
         return
       }
       activePage.value = 1
@@ -524,7 +521,7 @@ const CSmartTable = defineComponent({
 
     // variables
 
-    const columnFiltered = () => {
+    const filteredColumns = computed(() => {
       let _items = items.value
       if (
         props.columnFilter &&
@@ -534,6 +531,11 @@ const CSmartTable = defineComponent({
         return _items
       }
       Object.entries(columnFilterState.value).forEach(([key, value]) => {
+        if (value instanceof Function) {
+          _items = _items.filter((item) => value(item[key]))
+          return
+        }
+
         const columnFilter = String(value).toLowerCase()
         if (columnFilter && itemsDataColumns.value.includes(key)) {
           _items = _items.filter((item) => {
@@ -542,10 +544,10 @@ const CSmartTable = defineComponent({
         }
       })
       return _items
-    }
+    })
 
-    const tableFiltered = computed(() => {
-      let items = columnFiltered()
+    const filteredTable = computed(() => {
+      let items = filteredColumns.value
       if (
         !tableFilterState.value ||
         (props.tableFilter && typeof props.tableFilter === 'object' && props.tableFilter.external)
@@ -570,12 +572,12 @@ const CSmartTable = defineComponent({
           typeof props.columnSorter === 'object' &&
           props.columnSorter.external)
       ) {
-        return tableFiltered.value
+        return filteredTable.value
       }
       //if values in column are to be sorted by numeric value they all have to be type number
       // const flip = sorterState.asc ? 1 : -1
       const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
-      const sorted = tableFiltered.value.slice().sort((item, item2) => {
+      const sorted = filteredTable.value.slice().sort((item, item2) => {
         const value = item[col]
         const value2 = item2[col]
         const a = typeof value === 'number' ? value : String(value).toLowerCase()
@@ -683,9 +685,12 @@ const CSmartTable = defineComponent({
                           columnFilterValue: columnFilterState.value,
                           columns: props.columns ? props.columns : rawColumnNames.value,
                           columnSorter: props.columnSorter,
+                          items: items.value,
                           selectable: props.selectable,
                           selectAll: selectedAll.value,
                           sorterState: sorterState,
+                          onCustomFilterChange: (key: string, value: any) =>
+                            columnFilterChange(key, value),
                           onFilterInput: (key: string, value: string) =>
                             columnFilterChange(key, value, 'input'),
                           onFilterChange: (key: string, value: string) =>
@@ -757,10 +762,6 @@ const CSmartTable = defineComponent({
                         columns: props.columns ? props.columns : rawColumnNames.value,
                         selectable: props.selectable,
                         selectAll: selectedAll.value,
-                        onFilterInput: (key: string, value: string) =>
-                          columnFilterChange(key, value, 'input'),
-                        onFilterChange: (key: string, value: string) =>
-                          columnFilterChange(key, value, 'change'),
                         onSelectAllChecked: () => handleSelectAllChecked(),
                       }),
                   ],

package/src/components/smart-table/CSmartTableHead.ts

@@ -9,6 +9,7 @@ import {
   Column,
   ColumnFilter,
   ColumnFilterValue,
+  Item,
   Sorter,
   SorterValue,
 } from './CSmartTableInterface'
@@ -44,6 +45,11 @@ const CSmartTableHead = defineComponent({
       default: () => [],
       required: false,
     },
+    items: {
+      type: Array as PropType<Item[]>,
+      default: () => [],
+      required: false,
+    },
     selectable: Boolean,
     selectAll: [Boolean, String],
     sorterState: {
@@ -52,7 +58,7 @@ const CSmartTableHead = defineComponent({
       require: false,
     },
   },
-  emits: ['filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
+  emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
   setup(props, { slots, emit }) {
     const handleSortClick = (key: string, index: number) => {
       emit('sortClick', key, index)
@@ -110,6 +116,10 @@ const CSmartTableHead = defineComponent({
       return 0
     }
 
+    const getValues = (items: Item[], key: string) => {
+      return items.map((a) => a[key])
+    }
+
     const columnSorterIcon = (column: Column | string) => {
       if (getColumnSorterState(key(column)) === 0) {
         return h(
@@ -135,6 +145,10 @@ const CSmartTableHead = defineComponent({
       return
     }
 
+    const handleOnCustomFilterChange = (key: string, value: any) => {
+      emit('customFilterChange', key, value)
+    }
+
     const handleFilterInput = (key: string, value: string) => {
       emit('filterInput', key, value)
     }
@@ -212,29 +226,36 @@ const CSmartTableHead = defineComponent({
                         },
                         {
                           default: () =>
-                            (typeof column !== 'object'
-                              ? true
-                              : typeof column.filter === 'undefined'
-                              ? true
-                              : column.filter) &&
-                            h(CFormInput, {
-                              size: 'sm',
-                              onInput: (event: Event) =>
-                                handleFilterInput(
-                                  key(column),
-                                  (event.target as HTMLInputElement).value,
-                                ),
-                              onChange: (event: Event) =>
-                                handleFilterChange(
-                                  key(column),
-                                  (event.target as HTMLInputElement).value,
-                                ),
-                              'aria-label': `column name: '${label(column)}' filter input`,
-                              ...(props.columnFilterValue &&
-                                props.columnFilterValue[key(column)] && {
-                                  value: props.columnFilterValue[key(column)],
-                                }),
-                            }),
+                            (
+                              typeof column !== 'object'
+                                ? true
+                                : typeof column.filter === 'undefined'
+                                ? true
+                                : column.filter
+                            )
+                              ? typeof column !== 'string' && typeof column.filter === 'function'
+                                ? column.filter(getValues(props.items, key(column)), (value: any) =>
+                                    handleOnCustomFilterChange(key(column), value),
+                                  )
+                                : h(CFormInput, {
+                                    size: 'sm',
+                                    onInput: (event: Event) =>
+                                      handleFilterInput(
+                                        key(column),
+                                        (event.target as HTMLInputElement).value,
+                                      ),
+                                    onChange: (event: Event) =>
+                                      handleFilterChange(
+                                        key(column),
+                                        (event.target as HTMLInputElement).value,
+                                      ),
+                                    'aria-label': `column name: '${label(column)}' filter input`,
+                                    ...(props.columnFilterValue &&
+                                      props.columnFilterValue[key(column)] && {
+                                        value: props.columnFilterValue[key(column)],
+                                      }),
+                                  })
+                              : '',
                         },
                       ),
                     ),

package/src/components/smart-table/CSmartTableInterface.ts

@@ -4,7 +4,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable @typescript-eslint/ban-types */
 export interface Column {
-  filter?: boolean
+  filter?: boolean | ((values: any[], onChange: (value: any) => void) => VNode)
   key: string
   label?: string
   sorter?: boolean

package/src/components/smart-table/CSmartTableItemsPerPageSelector.ts

@@ -54,7 +54,7 @@ const CSmartTableItemsPerPageSelector = defineComponent({
               h(
                 CFormSelect,
                 {
-                  defaultValue: props.itemsPerPage,
+                  value: props.itemsPerPage,
                   onChange: handleChange,
                 },
                 {