@coreui/vue-pro 4.4.1 → 4.5.0

package/dist/index.es.js

@@ -8467,7 +8467,7 @@ const CFormInput = defineComponent({
                 onInput: (event) => 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()),
             ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
             ...(slots.feedbackInvalid && {
@@ -12888,7 +12888,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) => handleCalendarCellHover(date),
@@ -14573,6 +14573,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.
          *
@@ -14685,6 +14693,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) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
         /**
          * Toggle the visibility of multi select dropdown.
          *
@@ -14767,7 +14787,6 @@ const CMultiSelect = defineComponent({
                     }, [])
                 : options.value;
         };
-        const multiSelectRef = ref();
         const nativeSelectRef = ref();
         provide('nativeSelectRef', nativeSelectRef);
         const searchRef = ref();
@@ -14777,8 +14796,9 @@ const CMultiSelect = defineComponent({
         const visible = ref(props.visible);
         const selected = ref(getSelectedOptions(props.options));
         const count = ref(0);
-        watch(() => props.options, () => {
-            options.value = props.options;
+        watch(() => props.options, (newValue, oldValue) => {
+            if (JSON.stringify(newValue) !== JSON.stringify(oldValue))
+                options.value = newValue;
         });
         watch(options, () => {
             const _selected = options.value && getSelectedOptions(options.value);
@@ -14801,24 +14821,6 @@ const CMultiSelect = defineComponent({
             nativeSelectRef.value &&
                 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) => {
-            if (multiSelectRef.value && !multiSelectRef.value.contains(event.target)) {
-                visible.value = false;
-            }
-        };
-        const handleClickOutside = (event) => {
-            if (multiSelectRef.value && !multiSelectRef.value.contains(event.target)) {
-                visible.value = false;
-            }
-        };
         const handleSearchChange = (event) => {
             const target = event.target;
             search.value = target.value.toLowerCase();
@@ -14852,56 +14854,64 @@ const CMultiSelect = defineComponent({
                     : selected.value.map((option) => option.value)[0],
                 onChange: () => emit('change', selected.value),
             }),
-            h$1('div', {
+            h$1(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$1(CMultiSelectSelection, {
-                    multiple: props.multiple,
-                    onRemove: (option) => handleOptionClick(option),
-                    search: props.search,
-                    selected: selected.value,
-                    selectionType: props.selectionType,
-                    selectionTypeCounterText: props.selectionTypeCounterText,
-                }),
-                props.multiple &&
-                    props.cleaner &&
-                    selected.value.length > 0 &&
-                    h$1('button', {
-                        type: 'button',
-                        class: 'form-multi-select-selection-cleaner',
-                        onClick: () => handleDeselectAll(),
+            }, {
+                toggler: () => h$1('div', {}, [
+                    h$1(CMultiSelectSelection, {
+                        multiple: props.multiple,
+                        onRemove: (option) => !props.disabled && handleOptionClick(option),
+                        search: props.search,
+                        selected: selected.value,
+                        selectionType: props.selectionType,
+                        selectionTypeCounterText: props.selectionTypeCounterText,
                     }),
-                props.search &&
-                    h$1('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}`,
+                    props.multiple &&
+                        props.cleaner &&
+                        selected.value.length > 0 &&
+                        !props.disabled &&
+                        h$1('button', {
+                            type: 'button',
+                            class: 'form-multi-select-selection-cleaner',
+                            onClick: () => handleDeselectAll(),
                         }),
-                        ...(selected.value.length &&
-                            !props.multiple && { placeholder: selected.value.map((option) => option.text)[0] }),
-                        onInput: (event) => handleSearchChange(event),
-                        onKeydown: (event) => handleSearchKeyDown(event),
-                        ...(props.multiple &&
-                            selected.value.length &&
-                            props.selectionType !== 'counter' && { size: search.value.length + 2 }),
-                        ref: searchRef,
-                    }),
-                h$1('div', { class: 'form-multi-select-dropdown' }, [
+                    props.search &&
+                        h$1('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) => handleSearchChange(event),
+                            onKeydown: (event) => handleSearchKeyDown(event),
+                            ...(props.multiple &&
+                                selected.value.length &&
+                                props.selectionType !== 'counter' && { size: search.value.length + 2 }),
+                            ref: searchRef,
+                        }),
+                ]),
+                default: () => h$1('div', {}, [
                     props.multiple &&
                         props.selectAll &&
                         h$1('button', { class: 'form-multi-select-all', onClick: () => handleSelectAll() }, props.selectAllLabel),
@@ -14913,7 +14923,7 @@ const CMultiSelect = defineComponent({
                         searchNoResultsLabel: props.searchNoResultsLabel,
                     }),
                 ]),
-            ]),
+            }),
         ];
     },
 });
@@ -16572,142 +16582,6 @@ const CSidebarPlugin = {
     },
 };
 
-const CTable = defineComponent({
-    name: 'CTable',
-    props: {
-        /**
-         * Set the vertical aligment.
-         *
-         * @values 'bottom', 'middle', 'top'
-         */
-        align: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return ['bottom', 'middle', 'top'].includes(value);
-            },
-        },
-        /**
-         * Sets the border color of the component to one of CoreUI’s themed colors.
-         *
-         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-         */
-        borderColor: Color,
-        /**
-         * Add borders on all sides of the table and cells.
-         */
-        bordered: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Remove borders on all sides of the table and cells.
-         */
-        borderless: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Put the `<caption>` on the top of the table.
-         *
-         * @values 'top'
-         */
-        caption: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return value === 'top';
-            },
-        },
-        /**
-         * Sets the color context of the component to one of CoreUI’s themed colors.
-         *
-         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
-         */
-        color: Color,
-        /**
-         * Enable a hover state on table rows within a `<CTableBody>`.
-         */
-        hover: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
-         *
-         * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
-         */
-        responsive: {
-            type: [Boolean, String],
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                if (typeof value == 'string') {
-                    return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
-                }
-                if (typeof value == 'boolean') {
-                    return true;
-                }
-                return false;
-            },
-        },
-        /**
-         * Make table more compact by cutting all cell `padding` in half.
-         */
-        small: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Add zebra-striping to any table row within the `<CTableBody>`.
-         */
-        striped: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Add zebra-striping to any table column.
-         *
-         * @since 4.4.0
-         */
-        stripedColumns: {
-            type: Boolean,
-            required: false,
-        },
-    },
-    setup(props, { slots, attrs }) {
-        const table = () => h$1('table', {
-            class: [
-                'table',
-                {
-                    [`align-${props.align}`]: props.align,
-                    [`caption-${props.caption}`]: props.caption,
-                    [`border-${props.borderColor}`]: props.borderColor,
-                    'table-bordered': props.bordered,
-                    'table-borderless': props.borderless,
-                    [`table-${props.color}`]: props.color,
-                    'table-hover': props.hover,
-                    'table-sm': props.small,
-                    'table-striped': props.striped,
-                    'table-striped-columns': props.stripedColumns,
-                },
-                attrs.class,
-            ],
-        }, slots.default && slots.default());
-        return () => [
-            props.responsive
-                ? h$1('div', {
-                    class: typeof props.responsive === 'boolean'
-                        ? 'table-responsive'
-                        : `table-responsive-${props.responsive}`,
-                }, table())
-                : table(),
-        ];
-    },
-});
-
 const CTableBody = defineComponent({
     name: 'CTableBody',
     props: {
@@ -16766,9 +16640,16 @@ const CTableDataCell = defineComponent({
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
         color: Color,
+        /**
+         * @ignore
+         */
+        scope: {
+            type: String,
+            required: false,
+        },
     },
     setup(props, { slots }) {
-        return () => h$1('td', {
+        return () => h$1(props.scope ? 'th' : 'td', {
             class: [
                 {
                     [`align-${props.align}`]: props.align,
@@ -16776,6 +16657,7 @@ const CTableDataCell = defineComponent({
                     [`table-${props.color}`]: props.color,
                 },
             ],
+            ...(props.scope && { scope: props.scope }),
         }, slots.default && slots.default());
     },
 });
@@ -16886,6 +16768,293 @@ const CTableRow = defineComponent({
     },
 });
 
+const pretifyName = (name) => {
+    return name
+        .replace(/[-_.]/g, ' ')
+        .replace(/ +/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+};
+const label = (column) => typeof column === 'object'
+    ? column.label !== undefined
+        ? column.label
+        : pretifyName(column.key)
+    : pretifyName(column);
+const CTable = defineComponent({
+    name: 'CTable',
+    props: {
+        /**
+         * Set the vertical aligment.
+         *
+         * @values 'bottom', 'middle', 'top'
+         */
+        align: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['bottom', 'middle', 'top'].includes(value);
+            },
+        },
+        /**
+         * Sets the border color of the component to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        borderColor: Color,
+        /**
+         * Add borders on all sides of the table and cells.
+         */
+        bordered: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Remove borders on all sides of the table and cells.
+         */
+        borderless: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Put the `<caption>` on the top of the table.
+         *
+         * @values 'top' | string
+         */
+        caption: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Set the text of the table caption and the caption on the top of the table.
+         *
+         * @since 4.5.0
+         */
+        captionTop: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
+         *
+         * In columns prop each array item represents one column. Item might be specified in two ways:
+         * String: each item define column name equal to item value.
+         * Object: item is object with following keys available as column configuration:
+         * - key (required)(String) - define column name equal to item key.
+         * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
+         * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },
+         * - _style (Object) - adds styles to the column header (useful for defining widths)
+         *
+         * @since 4.5.0
+         */
+        columns: {
+            type: Array,
+            required: false,
+        },
+        /**
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
+         */
+        color: Color,
+        /**
+         * Array of objects or strings, where each element represents one cell in the table footer.
+         *
+         * Example items:
+         * ['FooterCell', 'FooterCell', 'FooterCell']
+         * or
+         * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+         *
+         * @since 4.5.0
+         */
+        footer: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
+        /**
+         * Enable a hover state on table rows within a `<CTableBody>`.
+         */
+        hover: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
+         *
+         * Example item:
+         * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+         *
+         * @since 4.5.0
+         */
+        items: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
+        responsive: {
+            type: [Boolean, String],
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                if (typeof value == 'string') {
+                    return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * Make table more compact by cutting all cell `padding` in half.
+         */
+        small: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Add zebra-striping to any table row within the `<CTableBody>`.
+         */
+        striped: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Add zebra-striping to any table column.
+         *
+         * @since 4.4.0
+         */
+        stripedColumns: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Properties that will be passed to the table footer component.
+         *
+         * Properties to [CTableFoot](#ctablefoot) component.
+         * @since 4.5.0
+         */
+        tableFootProps: {
+            type: Object,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Properties that will be passed to the table head component.
+         *
+         *  Properties to [CTableHead](#ctablehead) component.
+         * @since 4.5.0
+         */
+        tableHeadProps: {
+            type: Object,
+            default: undefined,
+            required: false,
+        },
+    },
+    setup(props, { slots, attrs }) {
+        const rawColumnNames = computed(() => props.columns
+            ? props.columns.map((column) => {
+                if (typeof column === 'object')
+                    return column.key;
+                else
+                    return column;
+            })
+            : Object.keys(props.items[0] || {}).filter((el) => el.charAt(0) !== '_'));
+        const table = () => h$1('table', {
+            class: [
+                'table',
+                {
+                    [`align-${props.align}`]: props.align,
+                    [`caption-top`]: props.captionTop || props.caption === 'top',
+                    [`border-${props.borderColor}`]: props.borderColor,
+                    'table-bordered': props.bordered,
+                    'table-borderless': props.borderless,
+                    [`table-${props.color}`]: props.color,
+                    'table-hover': props.hover,
+                    'table-sm': props.small,
+                    'table-striped': props.striped,
+                    'table-striped-columns': props.stripedColumns,
+                },
+                attrs.class,
+            ],
+        }, {
+            default: () => [
+                ((props.caption && props.caption !== 'top') || props.captionTop) &&
+                    h$1(CTableCaption, {}, {
+                        default: () => props.caption || props.captionTop,
+                    }),
+                props.columns &&
+                    h$1(CTableHead, {
+                        ...props.tableHeadProps,
+                    }, {
+                        default: () => h$1(CTableRow, {}, {
+                            default: () => [
+                                props.columns &&
+                                    props.columns.map((column) => h$1(CTableHeaderCell, {
+                                        ...(typeof column === 'object' &&
+                                            column._props && { ...column._props }),
+                                        ...(typeof column === 'object' &&
+                                            column._style && { style: { ...column._style } }),
+                                    }, {
+                                        default: () => label(column),
+                                    })),
+                            ],
+                        }),
+                    }),
+                props.items &&
+                    h$1(CTableBody, {}, {
+                        default: () => [
+                            props.items.map((item) => h$1(CTableRow, {
+                                ...(item._props && { ...item._props }),
+                            }, {
+                                default: () => [
+                                    rawColumnNames.value.map((colName) => item[colName] &&
+                                        h$1(CTableDataCell, {
+                                            ...(item._cellProps &&
+                                                item._cellProps['all'] && { ...item._cellProps['all'] }),
+                                            ...(item._cellProps &&
+                                                item._cellProps[colName] && { ...item._cellProps[colName] }),
+                                        }, {
+                                            default: () => item[colName],
+                                        })),
+                                ],
+                            })),
+                        ],
+                    }),
+                slots.default && slots.default(),
+                props.footer &&
+                    h$1(CTableFoot, {
+                        ...props.tableFootProps,
+                    }, {
+                        default: () => h$1(CTableRow, {}, {
+                            default: () => [
+                                props.footer.map((item) => h$1(CTableDataCell, {
+                                    ...(typeof item === 'object' && item._props && { ...item._props }),
+                                }, {
+                                    default: () => (typeof item === 'object' ? item.label : item),
+                                })),
+                            ],
+                        }),
+                    }),
+            ],
+        });
+        return () => [
+            props.responsive
+                ? h$1('div', {
+                    class: typeof props.responsive === 'boolean'
+                        ? 'table-responsive'
+                        : `table-responsive-${props.responsive}`,
+                }, table())
+                : table(),
+        ];
+    },
+});
+
 const CTablePlugin = {
     install: (app) => {
         app.component(CTable.name, CTable);
@@ -17048,6 +17217,11 @@ const CSmartTableHead = defineComponent({
             default: () => [],
             required: false,
         },
+        items: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
         selectable: Boolean,
         selectAll: [Boolean, String],
         sorterState: {
@@ -17056,7 +17230,7 @@ const CSmartTableHead = defineComponent({
             require: false,
         },
     },
-    emits: ['filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
+    emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
     setup(props, { slots, emit }) {
         const handleSortClick = (key, index) => {
             emit('sortClick', key, index);
@@ -17103,6 +17277,9 @@ const CSmartTableHead = defineComponent({
             }
             return 0;
         };
+        const getValues = (items, key) => {
+            return items.map((a) => a[key]);
+        };
         const columnSorterIcon = (column) => {
             if (getColumnSorterState(key(column)) === 0) {
                 return h$1('span', { class: 'opacity-25 float-end me-1' }, slots.sortingIcon && slots.sortingIcon());
@@ -17115,6 +17292,9 @@ const CSmartTableHead = defineComponent({
             }
             return;
         };
+        const handleOnCustomFilterChange = (key, value) => {
+            emit('customFilterChange', key, value);
+        };
         const handleFilterInput = (key, value) => {
             emit('filterInput', key, value);
         };
@@ -17165,17 +17345,20 @@ const CSmartTableHead = defineComponent({
                                     ? true
                                     : typeof column.filter === 'undefined'
                                         ? true
-                                        : column.filter) &&
-                                    h$1(CFormInput, {
-                                        size: 'sm',
-                                        onInput: (event) => handleFilterInput(key(column), event.target.value),
-                                        onChange: (event) => handleFilterChange(key(column), event.target.value),
-                                        'aria-label': `column name: '${label(column)}' filter input`,
-                                        ...(props.columnFilterValue &&
-                                            props.columnFilterValue[key(column)] && {
-                                            value: props.columnFilterValue[key(column)],
-                                        }),
-                                    }),
+                                        : column.filter)
+                                    ? typeof column !== 'string' && typeof column.filter === 'function'
+                                        ? column.filter(getValues(props.items, key(column)), (value) => handleOnCustomFilterChange(key(column), value))
+                                        : h$1(CFormInput, {
+                                            size: 'sm',
+                                            onInput: (event) => handleFilterInput(key(column), event.target.value),
+                                            onChange: (event) => handleFilterChange(key(column), event.target.value),
+                                            'aria-label': `column name: '${label(column)}' filter input`,
+                                            ...(props.columnFilterValue &&
+                                                props.columnFilterValue[key(column)] && {
+                                                value: props.columnFilterValue[key(column)],
+                                            }),
+                                        })
+                                    : '',
                             })),
                         ],
                     }),
@@ -17296,7 +17479,7 @@ const CSmartTableItemsPerPageSelector = defineComponent({
                 h$1('div', {
                     class: 'col-auto',
                 }, h$1(CFormSelect, {
-                    defaultValue: props.itemsPerPage,
+                    value: props.itemsPerPage,
                     onChange: handleChange,
                 }, {
                     default: () => props.itemsPerPageOptions &&
@@ -17788,6 +17971,7 @@ const CSmartTable = defineComponent({
             }
         });
         // functions
+        const isLazy = (columnFilter) => columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true;
         const isSortable = (i) => {
             const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i]);
             let column;
@@ -17859,10 +18043,8 @@ const CSmartTable = defineComponent({
             });
         };
         const columnFilterChange = (colName, value, type) => {
-            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;
@@ -17870,10 +18052,8 @@ const CSmartTable = defineComponent({
             emit('columnFilterChange', columnFilterState.value);
         };
         const tableFilterChange = (value, type) => {
-            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;
@@ -17898,7 +18078,7 @@ const CSmartTable = defineComponent({
             : genCols.value); //! || el
         const itemsDataColumns = computed(() => rawColumnNames.value.filter((name) => genCols.value.includes(name)));
         // variables
-        const columnFiltered = () => {
+        const filteredColumns = computed(() => {
             let _items = items.value;
             if (props.columnFilter &&
                 typeof props.columnFilter === 'object' &&
@@ -17906,6 +18086,10 @@ 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) => {
@@ -17914,9 +18098,9 @@ 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)) {
                 return items;
@@ -17936,12 +18120,12 @@ const CSmartTable = defineComponent({
                 (props.columnSorter &&
                     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();
@@ -18004,9 +18188,11 @@ 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, value) => columnFilterChange(key, value),
                                     onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
                                     onFilterChange: (key, value) => columnFilterChange(key, value, 'change'),
                                     onSelectAllChecked: () => handleSelectAllChecked(),
@@ -18066,8 +18252,6 @@ const CSmartTable = defineComponent({
                                     columns: props.columns ? props.columns : rawColumnNames.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
-                                    onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
-                                    onFilterChange: (key, value) => columnFilterChange(key, value, 'change'),
                                     onSelectAllChecked: () => handleSelectAllChecked(),
                                 }),
                         ],