@coreui/vue-pro 4.4.2 → 4.6.0

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

@@ -1,4 +1,8 @@
-import { defineComponent, h, onMounted, onUnmounted, PropType, provide, ref, watch } from 'vue'
+import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
+
+import { CFormControlWrapper } from './../form/CFormControlWrapper'
+import { CPicker } from '../picker'
+
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
@@ -25,6 +29,58 @@ const CMultiSelect = defineComponent({
       required: false,
       default: true,
     },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedbackInvalid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.6.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: {
+      type: String,
+    },
+    /**
+     * Set component validation state to invalid.
+     *
+     * @since 4.6.0
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.6.0
+     */
+    label: {
+      type: String,
+    },
     /**
      * It specifies that multiple options can be selected at once.
      *
@@ -137,6 +193,38 @@ 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)
+      },
+    },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.6.0
+     */
+    text: {
+      type: String,
+    },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.6.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     *
+     * @since 4.6.0
+     */
+    valid: Boolean,
     /**
      * Toggle the visibility of multi select dropdown.
      *
@@ -154,7 +242,7 @@ const CMultiSelect = defineComponent({
      */
     'change',
   ],
-  setup(props, { emit }) {
+  setup(props, { attrs, emit }) {
     const flattenArray = (options: Option[]): Option[] => {
       return options.reduce((acc: Option[], val: Option) => {
         return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
@@ -239,7 +327,6 @@ const CMultiSelect = defineComponent({
         : options.value
     }
 
-    const multiSelectRef = ref<HTMLDivElement>()
     const nativeSelectRef = ref<HTMLSelectElement>()
     provide('nativeSelectRef', nativeSelectRef)
     const searchRef = ref<HTMLInputElement>()
@@ -247,15 +334,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 +370,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()
@@ -323,6 +389,14 @@ const CMultiSelect = defineComponent({
 
     const handleOptionClick = (option: Option) => {
       options.value = updateOptions(option.value)
+
+      if (!props.multiple) {
+        visible.value = false
+        search.value = ''
+        if (searchRef.value) {
+          searchRef.value.value = ''
+        }
+      }
     }
 
     const handleSelectAll = () => {
@@ -343,74 +417,111 @@ const CMultiSelect = defineComponent({
         onChange: () => emit('change', selected.value),
       }),
       h(
-        'div',
+        CFormControlWrapper,
+        {
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
+        },
         {
-          class: [
-            'form-multi-select',
-            {
-              show: visible.value,
-              'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
-            },
-          ],
-          onClick: () => {
-            visible.value = true
-            props.search && searchRef.value && searchRef.value.focus()
-          },
-          ref: multiSelectRef,
+          default: () =>
+            h(
+              CPicker,
+              {
+                class: [
+                  'form-multi-select',
+                  {
+                    '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,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                  },
+                ],
+                disabled: props.disabled,
+                id: props.id,
+                onHide: () => {
+                  visible.value = false
+                },
+                onShow: () => {
+                  props.search && searchRef.value && searchRef.value.focus()
+                  visible.value = true
+                },
+                visible: visible.value,
+              },
+              {
+                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,
+                      }),
+                  ]),
+                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,
+                    }),
+                  ]),
+              },
+            ),
         },
-        [
-          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}`,
-                }),
-              ...(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,
-            }),
-          ]),
-        ],
       ),
     ]
   },

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,
                 },
                 {