@coreui/vue-pro 4.4.1 → 4.5.0

package/dist/components/table/CTable.d.ts

@@ -1,3 +1,18 @@
+import { PropType } from 'vue';
+export interface Column {
+    label?: string;
+    key: string;
+    _style?: any;
+    _props?: any;
+}
+export interface FooterItem {
+    label?: string;
+    _props?: any;
+}
+export declare type Item = {
+    [key: string]: number | string | any;
+    _props?: any;
+};
 declare const CTable: import("vue").DefineComponent<{
     /**
      * Set the vertical aligment.
@@ -36,13 +51,39 @@ declare const CTable: import("vue").DefineComponent<{
     /**
      * Put the `<caption>` on the top of the table.
      *
-     * @values 'top'
+     * @values 'top' | string
      */
     caption: {
         type: StringConstructor;
         default: undefined;
         required: false;
-        validator: (value: string) => boolean;
+    };
+    /**
+     * Set the text of the table caption and the caption on the top of the table.
+     *
+     * @since 4.5.0
+     */
+    captionTop: {
+        type: StringConstructor;
+        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: PropType<string[] | Column[]>;
+        required: false;
     };
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -53,6 +94,21 @@ declare const CTable: import("vue").DefineComponent<{
         type: StringConstructor;
         validator: (value: string) => boolean;
     };
+    /**
+     * 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: PropType<FooterItem[]>;
+        default: () => never[];
+        required: false;
+    };
     /**
      * Enable a hover state on table rows within a `<CTableBody>`.
      */
@@ -61,10 +117,18 @@ declare const CTable: import("vue").DefineComponent<{
         required: false;
     };
     /**
-     * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+     * 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'}}}
      *
-     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+     * @since 4.5.0
      */
+    items: {
+        type: PropType<Item[]>;
+        default: () => never[];
+        required: false;
+    };
     responsive: {
         type: (StringConstructor | BooleanConstructor)[];
         default: undefined;
@@ -94,6 +158,28 @@ declare const CTable: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * Properties that will be passed to the table footer component.
+     *
+     * Properties to [CTableFoot](#ctablefoot) component.
+     * @since 4.5.0
+     */
+    tableFootProps: {
+        type: ObjectConstructor;
+        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: ObjectConstructor;
+        default: undefined;
+        required: false;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -134,13 +220,39 @@ declare const CTable: import("vue").DefineComponent<{
     /**
      * Put the `<caption>` on the top of the table.
      *
-     * @values 'top'
+     * @values 'top' | string
      */
     caption: {
         type: StringConstructor;
         default: undefined;
         required: false;
-        validator: (value: string) => boolean;
+    };
+    /**
+     * Set the text of the table caption and the caption on the top of the table.
+     *
+     * @since 4.5.0
+     */
+    captionTop: {
+        type: StringConstructor;
+        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: PropType<string[] | Column[]>;
+        required: false;
     };
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -151,6 +263,21 @@ declare const CTable: import("vue").DefineComponent<{
         type: StringConstructor;
         validator: (value: string) => boolean;
     };
+    /**
+     * 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: PropType<FooterItem[]>;
+        default: () => never[];
+        required: false;
+    };
     /**
      * Enable a hover state on table rows within a `<CTableBody>`.
      */
@@ -159,10 +286,18 @@ declare const CTable: import("vue").DefineComponent<{
         required: false;
     };
     /**
-     * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+     * 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'}}}
      *
-     * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+     * @since 4.5.0
      */
+    items: {
+        type: PropType<Item[]>;
+        default: () => never[];
+        required: false;
+    };
     responsive: {
         type: (StringConstructor | BooleanConstructor)[];
         default: undefined;
@@ -192,15 +327,42 @@ declare const CTable: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * Properties that will be passed to the table footer component.
+     *
+     * Properties to [CTableFoot](#ctablefoot) component.
+     * @since 4.5.0
+     */
+    tableFootProps: {
+        type: ObjectConstructor;
+        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: ObjectConstructor;
+        default: undefined;
+        required: false;
+    };
 }>>, {
     small: boolean;
     hover: boolean;
+    items: Item[];
+    footer: FooterItem[];
     caption: string;
     align: string;
     striped: boolean;
     bordered: boolean;
     borderless: boolean;
+    captionTop: string;
     responsive: string | boolean;
     stripedColumns: boolean;
+    tableFootProps: Record<string, any>;
+    tableHeadProps: Record<string, any>;
 }>;
 export { CTable };

package/dist/components/table/CTableDataCell.d.ts

@@ -26,6 +26,13 @@ declare const CTableDataCell: import("vue").DefineComponent<{
         type: StringConstructor;
         validator: (value: string) => boolean;
     };
+    /**
+     * @ignore
+     */
+    scope: {
+        type: StringConstructor;
+        required: false;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -56,6 +63,13 @@ declare const CTableDataCell: import("vue").DefineComponent<{
         type: StringConstructor;
         validator: (value: string) => boolean;
     };
+    /**
+     * @ignore
+     */
+    scope: {
+        type: StringConstructor;
+        required: false;
+    };
 }>>, {
     active: boolean;
     align: string;