@coreui/vue-pro 4.7.0-alpha.1 → 4.8.0-next.0

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Column, ColumnFilter, ColumnFilterValue, Item, ItemsPerPageSelect, Pagination, Sorter, SorterValue, TableFilter } from './CSmartTableInterface';
+import type { Column, ColumnFilter, ColumnFilterValue, Item, ItemsPerPageSelect, FooterItem, Pagination, Sorter, SorterValue, TableFilter } from './types';
 declare const CSmartTable: import("vue").DefineComponent<{
     /**
      * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
@@ -7,7 +7,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
     activePage: {
         type: NumberConstructor;
         default: number;
-        required: false;
     };
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
@@ -16,14 +15,12 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     cleaner: {
         type: BooleanConstructor;
-        required: false;
     };
     /**
      * Style table items as clickable.
      */
     clickableRows: {
         type: BooleanConstructor;
-        required: false;
     };
     /**
      * When set, displays additional filter row between table header and items, allowing filtering by specific column.
@@ -33,7 +30,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnFilter: {
         type: PropType<boolean | ColumnFilter>;
-        required: false;
     };
     /**
      * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
@@ -41,8 +37,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnFilterValue: {
         type: PropType<ColumnFilterValue>;
-        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')
@@ -58,8 +52,7 @@ declare const CSmartTable: import("vue").DefineComponent<{
      * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      */
     columns: {
-        type: PropType<string[] | Column[]>;
-        required: false;
+        type: PropType<(string | Column)[]>;
     };
     /**
      * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
@@ -70,22 +63,24 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnSorter: {
         type: PropType<boolean | Sorter>;
-        default: undefined;
-        required: false;
     };
     /**
-     * Displays table footer, which mirrors table header. (without column filter).
+     * If `true` Displays table footer, which mirrors table header. (without column filter).
+     * Or 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' }, ...]`
      */
     footer: {
-        type: BooleanConstructor;
-        required: false;
+        type: PropType<boolean | (string | FooterItem)[]>;
     };
     /**
      * Set to false to remove table header.
      */
     header: {
         type: BooleanConstructor;
-        required: false;
         default: boolean;
     };
     /**
@@ -98,22 +93,25 @@ declare const CSmartTable: import("vue").DefineComponent<{
     items: {
         type: PropType<Item[]>;
         default: () => never[];
-        required: false;
     };
+    /**
+     * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+     *
+     * @since 4.8.0
+     */
+    itemsNumber: NumberConstructor;
     /**
      * Number of items per site, when pagination is enabled.
      */
     itemsPerPage: {
         type: NumberConstructor;
         default: number;
-        required: false;
     };
     /**
      * Label for items per page selector.
      */
     itemsPerPageLabel: {
         type: StringConstructor;
-        required: false;
         default: string;
     };
     /**
@@ -122,7 +120,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
     itemsPerPageOptions: {
         type: PropType<number[]>;
         default: () => number[];
-        required: false;
     };
     /**
      * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
@@ -132,15 +129,12 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     itemsPerPageSelect: {
         type: PropType<boolean | ItemsPerPageSelect>;
-        default: undefined;
-        required: false;
     };
     /**
      * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
      */
     loading: {
         type: BooleanConstructor;
-        required: false;
     };
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
@@ -148,51 +142,65 @@ declare const CSmartTable: import("vue").DefineComponent<{
     noItemsLabel: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     /**
      * Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.
      */
     pagination: {
         type: PropType<boolean | Pagination>;
-        required: false;
     };
     /**
      * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
      */
     paginationProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Add checkboxes to make table rows selectable.
      */
     selectable: BooleanConstructor;
+    /**
+     * Enables select all checkbox displayed in the header of the table.
+     *
+     * Can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic selection inside the component.
+     *
+     * @since 4.8.0
+     */
+    selectAll: {
+        type: PropType<boolean | {
+            external?: boolean | undefined;
+        }>;
+    };
+    /**
+     * Array of selected objects, where each object represents one item - row in table.
+     *
+     * Example item: `{ name: 'John' , age: 12 }`
+     *
+     * @since 4.8.0
+     */
+    selected: {
+        type: PropType<Item[]>;
+        default: () => never[];
+    };
     /**
      * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
      * { column: 'status', state: 'asc' }
      */
     sorterValue: {
         type: PropType<SorterValue>;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
      */
     tableBodyProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
      */
     tableFootProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * When set, displays table filter above table, allowing filtering by specific column.
@@ -203,7 +211,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     tableFilter: {
         type: PropType<boolean | TableFilter>;
-        required: false;
     };
     /**
      * The element represents a caption for a component.
@@ -211,7 +218,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
     tableFilterLabel: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     /**
      * Specifies a short hint that is visible in the search input.
@@ -219,42 +225,34 @@ declare const CSmartTable: import("vue").DefineComponent<{
     tableFilterPlaceholder: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     /**
      * Value of table filter.
      */
     tableFilterValue: {
         type: StringConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
      */
     tableHeadProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
      */
     tableProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("activePageChange" | "rowClick" | "columnFilterChange" | "filteredItemsChange" | "itemsPerPageChange" | "selectedItemsChange" | "sorterChange" | "tableFilterChange")[], "activePageChange" | "rowClick" | "columnFilterChange" | "filteredItemsChange" | "itemsPerPageChange" | "selectedItemsChange" | "sorterChange" | "tableFilterChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectAll" | "activePageChange" | "rowClick" | "columnFilterChange" | "filteredItemsChange" | "itemsPerPageChange" | "selectedItemsChange" | "sorterChange" | "tableFilterChange")[], "selectAll" | "activePageChange" | "rowClick" | "columnFilterChange" | "filteredItemsChange" | "itemsPerPageChange" | "selectedItemsChange" | "sorterChange" | "tableFilterChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
      */
     activePage: {
         type: NumberConstructor;
         default: number;
-        required: false;
     };
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
@@ -263,14 +261,12 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     cleaner: {
         type: BooleanConstructor;
-        required: false;
     };
     /**
      * Style table items as clickable.
      */
     clickableRows: {
         type: BooleanConstructor;
-        required: false;
     };
     /**
      * When set, displays additional filter row between table header and items, allowing filtering by specific column.
@@ -280,7 +276,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnFilter: {
         type: PropType<boolean | ColumnFilter>;
-        required: false;
     };
     /**
      * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
@@ -288,8 +283,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnFilterValue: {
         type: PropType<ColumnFilterValue>;
-        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')
@@ -305,8 +298,7 @@ declare const CSmartTable: import("vue").DefineComponent<{
      * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      */
     columns: {
-        type: PropType<string[] | Column[]>;
-        required: false;
+        type: PropType<(string | Column)[]>;
     };
     /**
      * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
@@ -317,22 +309,24 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     columnSorter: {
         type: PropType<boolean | Sorter>;
-        default: undefined;
-        required: false;
     };
     /**
-     * Displays table footer, which mirrors table header. (without column filter).
+     * If `true` Displays table footer, which mirrors table header. (without column filter).
+     * Or 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' }, ...]`
      */
     footer: {
-        type: BooleanConstructor;
-        required: false;
+        type: PropType<boolean | (string | FooterItem)[]>;
     };
     /**
      * Set to false to remove table header.
      */
     header: {
         type: BooleanConstructor;
-        required: false;
         default: boolean;
     };
     /**
@@ -345,22 +339,25 @@ declare const CSmartTable: import("vue").DefineComponent<{
     items: {
         type: PropType<Item[]>;
         default: () => never[];
-        required: false;
     };
+    /**
+     * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+     *
+     * @since 4.8.0
+     */
+    itemsNumber: NumberConstructor;
     /**
      * Number of items per site, when pagination is enabled.
      */
     itemsPerPage: {
         type: NumberConstructor;
         default: number;
-        required: false;
     };
     /**
      * Label for items per page selector.
      */
     itemsPerPageLabel: {
         type: StringConstructor;
-        required: false;
         default: string;
     };
     /**
@@ -369,7 +366,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
     itemsPerPageOptions: {
         type: PropType<number[]>;
         default: () => number[];
-        required: false;
     };
     /**
      * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
@@ -379,15 +375,12 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     itemsPerPageSelect: {
         type: PropType<boolean | ItemsPerPageSelect>;
-        default: undefined;
-        required: false;
     };
     /**
      * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
      */
     loading: {
         type: BooleanConstructor;
-        required: false;
     };
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
@@ -395,51 +388,65 @@ declare const CSmartTable: import("vue").DefineComponent<{
     noItemsLabel: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     /**
      * Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.
      */
     pagination: {
         type: PropType<boolean | Pagination>;
-        required: false;
     };
     /**
      * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
      */
     paginationProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Add checkboxes to make table rows selectable.
      */
     selectable: BooleanConstructor;
+    /**
+     * Enables select all checkbox displayed in the header of the table.
+     *
+     * Can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic selection inside the component.
+     *
+     * @since 4.8.0
+     */
+    selectAll: {
+        type: PropType<boolean | {
+            external?: boolean | undefined;
+        }>;
+    };
+    /**
+     * Array of selected objects, where each object represents one item - row in table.
+     *
+     * Example item: `{ name: 'John' , age: 12 }`
+     *
+     * @since 4.8.0
+     */
+    selected: {
+        type: PropType<Item[]>;
+        default: () => never[];
+    };
     /**
      * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
      * { column: 'status', state: 'asc' }
      */
     sorterValue: {
         type: PropType<SorterValue>;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
      */
     tableBodyProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
      */
     tableFootProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * When set, displays table filter above table, allowing filtering by specific column.
@@ -450,7 +457,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
      */
     tableFilter: {
         type: PropType<boolean | TableFilter>;
-        required: false;
     };
     /**
      * The element represents a caption for a component.
@@ -458,7 +464,6 @@ declare const CSmartTable: import("vue").DefineComponent<{
     tableFilterLabel: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     /**
      * Specifies a short hint that is visible in the search input.
@@ -466,35 +471,29 @@ declare const CSmartTable: import("vue").DefineComponent<{
     tableFilterPlaceholder: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     /**
      * Value of table filter.
      */
     tableFilterValue: {
         type: StringConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
      */
     tableHeadProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
     /**
      * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
      */
     tableProps: {
         type: ObjectConstructor;
-        default: undefined;
-        required: false;
     };
 }>> & {
     onActivePageChange?: ((...args: any[]) => any) | undefined;
     onRowClick?: ((...args: any[]) => any) | undefined;
+    onSelectAll?: ((...args: any[]) => any) | undefined;
     onColumnFilterChange?: ((...args: any[]) => any) | undefined;
     onFilteredItemsChange?: ((...args: any[]) => any) | undefined;
     onItemsPerPageChange?: ((...args: any[]) => any) | undefined;
@@ -503,28 +502,18 @@ declare const CSmartTable: import("vue").DefineComponent<{
     onTableFilterChange?: ((...args: any[]) => any) | undefined;
 }, {
     items: Item[];
-    footer: boolean;
+    selected: Item[];
     header: boolean;
     cleaner: boolean;
     loading: boolean;
     activePage: number;
-    tableFootProps: Record<string, any>;
-    tableHeadProps: Record<string, any>;
     clickableRows: boolean;
+    noItemsLabel: string;
     selectable: boolean;
-    columnFilterValue: ColumnFilterValue;
-    columnSorter: boolean | Sorter;
     itemsPerPage: number;
     itemsPerPageLabel: string;
     itemsPerPageOptions: number[];
-    itemsPerPageSelect: boolean | ItemsPerPageSelect;
-    noItemsLabel: string;
-    paginationProps: Record<string, any>;
-    sorterValue: SorterValue;
-    tableBodyProps: Record<string, any>;
     tableFilterLabel: string;
     tableFilterPlaceholder: string;
-    tableFilterValue: string;
-    tableProps: Record<string, any>;
 }>;
 export { CSmartTable };

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

@@ -1,79 +1,55 @@
 import { PropType } from 'vue';
-import { Item } from './CSmartTableInterface';
+import type { Item } from './types';
 declare const CSmartTableBody: import("vue").DefineComponent<{
-    clickableRows: {
-        type: BooleanConstructor;
+    clickableRows: BooleanConstructor;
+    columnNames: {
+        type: PropType<string[]>;
+        default: () => never[];
         require: boolean;
     };
     currentItems: {
         type: PropType<Item[]>;
         default: () => never[];
-        required: false;
     };
     firstItemOnActivePageIndex: {
         type: NumberConstructor;
         require: boolean;
         default: number;
     };
-    noItemLabel: {
-        type: StringConstructor;
-        default: undefined;
-        require: boolean;
-    };
-    rawColumnNames: {
-        type: PropType<string[]>;
-        default: () => never[];
-        require: boolean;
-    };
-    scopedSlots: {
-        type: ObjectConstructor;
-        default: undefined;
-        require: boolean;
-    };
+    noItemsLabel: StringConstructor;
+    scopedSlots: ObjectConstructor;
     selectable: BooleanConstructor;
+    selected: PropType<Item[]>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("rowChecked" | "rowClick")[], "rowChecked" | "rowClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    clickableRows: {
-        type: BooleanConstructor;
+    clickableRows: BooleanConstructor;
+    columnNames: {
+        type: PropType<string[]>;
+        default: () => never[];
         require: boolean;
     };
     currentItems: {
         type: PropType<Item[]>;
         default: () => never[];
-        required: false;
     };
     firstItemOnActivePageIndex: {
         type: NumberConstructor;
         require: boolean;
         default: number;
     };
-    noItemLabel: {
-        type: StringConstructor;
-        default: undefined;
-        require: boolean;
-    };
-    rawColumnNames: {
-        type: PropType<string[]>;
-        default: () => never[];
-        require: boolean;
-    };
-    scopedSlots: {
-        type: ObjectConstructor;
-        default: undefined;
-        require: boolean;
-    };
+    noItemsLabel: StringConstructor;
+    scopedSlots: ObjectConstructor;
     selectable: BooleanConstructor;
+    selected: PropType<Item[]>;
 }>> & {
     onRowChecked?: ((...args: any[]) => any) | undefined;
     onRowClick?: ((...args: any[]) => any) | undefined;
 }, {
     clickableRows: boolean;
+    columnNames: string[];
     currentItems: Item[];
     firstItemOnActivePageIndex: number;
-    noItemLabel: string;
-    rawColumnNames: string[];
-    scopedSlots: Record<string, any>;
     selectable: boolean;
 }>;
 export { CSmartTableBody };