@coreui/vue-pro 4.1.0 → 4.1.1

package/README.md

@@ -43,7 +43,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.1.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.1.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue-pro.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue-pro`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue-pro`

package/dist/components/smart-table/CSmartTable.d.ts

@@ -39,7 +39,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnFilter: {
         type: PropType<boolean | ColumnFilter>;
-        default: undefined;
         required: false;
     };
     /**
@@ -116,7 +115,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     itemsPerPage: {
         type: NumberConstructor;
-        default: number;
         required: false;
     };
     /**
@@ -188,7 +186,8 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     selectable: BooleanConstructor;
     /**
-     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes.
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes. eg.:
+     * { column: 'status', state: 'asc' }
      *
      * @type SorterValue
      */
@@ -320,7 +319,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
     clickableRows: boolean;
     columns: string[] | Column[];
     selectable: boolean;
-    itemsPerPage: number;
     itemsPerPageLabel: string;
     itemsPerPageOptions: number[];
     noItemsLabel: string;
@@ -328,8 +326,9 @@ declare const CSmartTable: import("vue").DefineComponent<{
     tableFilterPlaceholder: string;
 } & {
     columnFilter?: boolean | ColumnFilter | undefined;
-    columnSorter?: boolean | Sorter | undefined;
     columnFilterValue?: ColumnFilterValue | undefined;
+    columnSorter?: boolean | Sorter | undefined;
+    itemsPerPage?: number | undefined;
     itemsPerPageSelect?: boolean | ItemsPerPageSelect | undefined;
     paginationProps?: Record<string, any> | undefined;
     sorterValue?: SorterValue | undefined;
@@ -359,12 +358,10 @@ declare const CSmartTable: import("vue").DefineComponent<{
     clickableRows: boolean;
     columns: string[] | Column[];
     selectable: boolean;
-    columnFilter: boolean | ColumnFilter;
+    columnFilterValue: ColumnFilterValue;
     columnSorter: boolean | Sorter;
-    itemsPerPage: number;
     itemsPerPageLabel: string;
     itemsPerPageOptions: number[];
-    columnFilterValue: ColumnFilterValue;
     itemsPerPageSelect: boolean | ItemsPerPageSelect;
     noItemsLabel: string;
     paginationProps: Record<string, any>;

package/dist/components/smart-table/CSmartTableHead.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Column, ColumnFilter, Sorter, SorterValue } from './CSmartTableInterface';
+import { Column, ColumnFilter, ColumnFilterValue, Sorter, SorterValue } from './CSmartTableInterface';
 declare const CSmartTableHead: import("vue").DefineComponent<{
     clearSorterAndFilter: {
         type: StringConstructor;
@@ -8,9 +8,12 @@ declare const CSmartTableHead: import("vue").DefineComponent<{
     };
     columnFilter: {
         type: PropType<boolean | ColumnFilter>;
-        default: undefined;
         require: boolean;
     };
+    columnFilterValue: {
+        type: PropType<ColumnFilterValue>;
+        required: false;
+    };
     columnSorter: {
         type: PropType<boolean | Sorter>;
         default: undefined;
@@ -38,6 +41,7 @@ declare const CSmartTableHead: import("vue").DefineComponent<{
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("filterInput" | "filterChange" | "selectAllChecked" | "sortClick")[], "filterInput" | "filterChange" | "selectAllChecked" | "sortClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clearSorterAndFilter?: unknown;
     columnFilter?: unknown;
+    columnFilterValue?: unknown;
     columnSorter?: unknown;
     component?: unknown;
     columns?: unknown;
@@ -52,6 +56,7 @@ declare const CSmartTableHead: import("vue").DefineComponent<{
 } & {
     selectAll?: string | boolean | undefined;
     columnFilter?: boolean | ColumnFilter | undefined;
+    columnFilterValue?: ColumnFilterValue | undefined;
     columnSorter?: boolean | Sorter | undefined;
     sorterState?: SorterValue | undefined;
 }> & {
@@ -64,7 +69,6 @@ declare const CSmartTableHead: import("vue").DefineComponent<{
     columns: string[] | Column[];
     selectable: boolean;
     clearSorterAndFilter: string;
-    columnFilter: boolean | ColumnFilter;
     columnSorter: boolean | Sorter;
     sorterState: SorterValue;
 }>;

package/dist/index.es.js

@@ -5776,7 +5776,7 @@ const CModal = defineComponent({
             emit('show');
         };
         const handleAfterEnter = () => {
-            window.addEventListener('click', handleClickOutside);
+            window.addEventListener('mousedown', handleMouseDown);
             window.addEventListener('keyup', handleKeyUp);
         };
         const handleLeave = (el, done) => {
@@ -5787,7 +5787,7 @@ const CModal = defineComponent({
             el.classList.remove('show');
         };
         const handleAfterLeave = (el) => {
-            window.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('mousedown', handleMouseDown);
             window.removeEventListener('keyup', handleKeyUp);
             el.style.display = 'none';
         };
@@ -5809,7 +5809,10 @@ const CModal = defineComponent({
                 }
             }
         };
-        const handleClickOutside = (event) => {
+        const handleMouseDown = (event) => {
+            window.addEventListener('mouseup', () => handleMouseUp(event), { once: true });
+        };
+        const handleMouseUp = (event) => {
             if (modalContentRef.value && !modalContentRef.value.contains(event.target)) {
                 if (props.backdrop !== 'static') {
                     handleDismiss();
@@ -7018,19 +7021,20 @@ const COffcanvas = defineComponent({
             }, 1);
         };
         const handleAfterEnter = () => {
-            window.addEventListener('click', handleClickOutside);
+            window.addEventListener('mousedown', handleMouseDown);
+            // window.addEventListener('click', handleClickOutside)
             window.addEventListener('keyup', handleKeyUp);
         };
         const handleLeave = (el, done) => {
             el.addEventListener('transitionend', () => {
                 done();
             });
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('keyup', handleKeyUp);
             el.classList.remove('show');
         };
         const handleAfterLeave = (el) => {
             el.style.visibility = 'hidden';
-            window.removeEventListener('click', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyUp);
         };
         const handleDismiss = () => {
             visible.value = false;
@@ -7043,13 +7047,17 @@ const COffcanvas = defineComponent({
                 }
             }
         };
-        const handleClickOutside = (event) => {
+        const handleMouseDown = (event) => {
+            window.addEventListener('mouseup', () => handleMouseUp(event), { once: true });
+        };
+        const handleMouseUp = (event) => {
             if (offcanvasRef.value && !offcanvasRef.value.contains(event.target)) {
                 props.backdrop && handleDismiss();
             }
         };
         return () => [
             h$1(Transition, {
+                css: false,
                 onEnter: (el, done) => handleEnter(el, done),
                 onAfterEnter: () => handleAfterEnter(),
                 onLeave: (el, done) => handleLeave(el, done),
@@ -8611,9 +8619,12 @@ const CSmartTableHead = defineComponent({
         },
         columnFilter: {
             type: [Boolean, Object],
-            default: undefined,
             require: false,
         },
+        columnFilterValue: {
+            type: Object,
+            required: false,
+        },
         columnSorter: {
             type: [Boolean, Object],
             default: undefined,
@@ -8752,9 +8763,9 @@ const CSmartTableHead = defineComponent({
                                         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.columnFilter &&
-                                            props.columnFilter[key(column)] && {
-                                            value: props.columnFilter[key(column)],
+                                        ...(props.columnFilterValue &&
+                                            props.columnFilterValue[key(column)] && {
+                                            value: props.columnFilterValue[key(column)],
                                         }),
                                     }),
                             })),
@@ -9068,7 +9079,6 @@ const CSmartTable = defineComponent({
          */
         columnFilter: {
             type: [Boolean, Object],
-            default: undefined,
             required: false,
         },
         /**
@@ -9145,7 +9155,6 @@ const CSmartTable = defineComponent({
          */
         itemsPerPage: {
             type: Number,
-            default: 10,
             required: false,
         },
         /**
@@ -9217,7 +9226,8 @@ const CSmartTable = defineComponent({
          */
         selectable: Boolean,
         /**
-         * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes.
+         * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes. eg.:
+         * { column: 'status', state: 'asc' }
          *
          * @type SorterValue
          */
@@ -9391,7 +9401,7 @@ const CSmartTable = defineComponent({
                 selectedAll.value = 'indeterminate';
             }
         });
-        const itemsPerPage = ref(props.itemsPerPage);
+        const itemsPerPage = ref(props.itemsPerPage || items.value.length);
         const activePage = ref(props.activePage);
         const sorterState = reactive(props.sorterValue || {});
         const columnFilterState = ref(props.columnFilterValue ? props.columnFilterValue : {});
@@ -9584,6 +9594,8 @@ const CSmartTable = defineComponent({
                             class: 'col-auto p-0',
                         }, props.tableFilter &&
                             h$1(CSmartTableFilter, {
+                                filterLabel: props.tableFilterLabel,
+                                filterPlaceholder: props.tableFilterPlaceholder,
                                 onFilterInput: (value) => tableFilterChange(value, 'input'),
                                 onFilterChange: (value) => tableFilterChange(value, 'change'),
                                 value: tableFilterState.value,
@@ -9613,7 +9625,8 @@ const CSmartTable = defineComponent({
                                 h$1(CSmartTableHead, {
                                     component: 'head',
                                     ...props.tableHeadProps,
-                                    columnFilter: columnFilterState.value,
+                                    columnFilter: props.columnFilter,
+                                    columnFilterValue: columnFilterState.value,
                                     columns: props.columns,
                                     columnSorter: props.columnSorter,
                                     selectable: props.selectable,