@coreui/vue-pro 4.3.0-beta.0 → 4.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.3.0-beta.0",
+  "version": "4.3.0-beta.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

package/src/components/pagination/CSmartPagination.ts

@@ -225,7 +225,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(1)
+                    activePage.value !== 1 && setPage(1)
                   },
                   'aria-label': 'Go to first page',
                   ...(activePage.value === 1 && {
@@ -247,7 +247,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(activePage.value - 1)
+                    activePage.value !== 1 && setPage(activePage.value - 1)
                   },
                   'aria-label': 'Go to previous page',
                   ...(activePage.value === 1 && {
@@ -304,7 +304,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(activePage.value + 1)
+                    activePage.value !== pages.value && setPage(activePage.value + 1)
                   },
                   'aria-label': 'Go to next page',
                   ...(activePage.value === pages.value && {
@@ -326,7 +326,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(pages.value)
+                    activePage.value !== pages.value && setPage(pages.value)
                   },
                   'aria-label': 'Go to last page',
                   ...(activePage.value === pages.value && {

package/src/components/smart-table/CSmartTable.ts

@@ -31,8 +31,6 @@ const CSmartTable = defineComponent({
   props: {
     /**
      * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
-     *
-     * @default 1
      */
     activePage: {
       type: Number,
@@ -41,7 +39,7 @@ const CSmartTable = defineComponent({
     },
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
-     * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
+     * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleanerIcon` slot.
      *
      */
     cleaner: {
@@ -50,8 +48,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Style table items as clickable.
-     *
-     * @type boolean
      */
     clickableRows: {
       type: Boolean,
@@ -62,8 +58,6 @@ const CSmartTable = defineComponent({
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
-     *
-     * @type boolean | ColumnFilter
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
@@ -72,7 +66,6 @@ const CSmartTable = defineComponent({
     /**
      * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
      * { user: 'John', age: 12 }
-     * You can track state of this prop by setting .sync modifier.
      */
     columnFilterValue: {
       type: Object as PropType<ColumnFilterValue>,
@@ -80,17 +73,17 @@ const CSmartTable = defineComponent({
       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. '_classes')
+     * 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.
+     * - filter (Boolean) - removes filter from column when set to false.
      * - 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.
-     * - _classes (String/Array/Object) - adds classes to all cels in column
-     * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      * - sorter (Boolean) - disables sorting of the column when set to false
-     * - filter (Boolean) - removes filter from column when set to false.
+     * - [_props](https://coreui.io/vue/docs/components/table.html#ctableheadercell) (String/Array/Object) - add props to `CTableHeaderCell`.
+     * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      */
     columns: {
       type: Array as PropType<Column[] | string[]>,
@@ -102,8 +95,6 @@ const CSmartTable = defineComponent({
      * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
      * - external (Boolean) - Disables automatic sorting inside component.
      * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
-     *
-     * @type boolean | Sorter
      */
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
@@ -119,8 +110,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Set to false to remove table header.
-     *
-     * @default true
      */
     header: {
       type: Boolean,
@@ -128,7 +117,11 @@ const CSmartTable = defineComponent({
       default: true,
     },
     /**
-     * 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 '_classes' key and to single cell by '_cellClasses'.
+     * Array of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by [_props](http://coreui.io/vue/docs/components/table.html#ctablerow) key and single cell by [_cellProps](http://coreui.io/vue/docs/components/table.html#ctabledatacell).
+     *
+     * Examples:
+     * - `_props: { color: 'primary', align: 'middle'}`
+     * - `_cellProps: { all: { class: 'fw-semibold'}, 'name': { color: 'info' }}`
      */
     items: {
       type: Array as PropType<Item[]>,
@@ -137,8 +130,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Number of items per site, when pagination is enabled.
-     *
-     * @default 10
      */
     itemsPerPage: {
       type: Number,
@@ -146,8 +137,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Label for items per page selector.
-     *
-     * @default 'Items per page:'
      */
     itemsPerPageLabel: {
       type: String,
@@ -156,8 +145,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Items per page selector options.
-     *
-     * @default [5, 10, 20, 50]
      */
     itemsPerPageOptions: {
       type: Array as PropType<number[]>,
@@ -184,7 +171,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
-     * @default 'No items found'
      */
     noItemsLabel: {
       type: String,
@@ -199,9 +185,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CSmartPagination` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/smart-pagination#csmartpagination
+     * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
      */
     paginationProps: {
       type: Object,
@@ -213,10 +197,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. eg.:
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
      * { column: 'status', state: 'asc' }
-     *
-     * @type SorterValue
      */
     sorterValue: {
       type: Object as PropType<SorterValue>,
@@ -224,9 +206,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTableBody` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctablebody
+     * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
      */
     tableBodyProps: {
       type: Object,
@@ -234,9 +214,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTableFoot` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctablefoot
+     * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
      */
     tableFootProps: {
       type: Object,
@@ -247,8 +225,6 @@ const CSmartTable = defineComponent({
      * When set, displays table filter above table, allowing filtering by specific column.
      *
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
-     * - placeholder (String) - Sets custom table filter placeholder.
-     * - label (String) - Sets custom table filter label.
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
      */
@@ -266,8 +242,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'type string...'
      */
     tableFilterPlaceholder: {
       type: String,
@@ -275,9 +249,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Value of table filter. Set .sync modifier to track changes.
-     *
-     * @default 'Filter:'
+     * Value of table filter.
      */
     tableFilterValue: {
       type: String,
@@ -285,9 +257,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTableHead` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctablehead
+     * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
      */
     tableHeadProps: {
       type: Object,
@@ -295,9 +265,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTable` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctable
+     * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
      */
     tableProps: {
       type: Object,

package/src/components/smart-table/CSmartTableInterface.ts

@@ -4,10 +4,10 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable @typescript-eslint/ban-types */
 export interface Column {
-  sorter?: boolean
+  filter?: boolean
   key: string
   label?: string
-  filter?: boolean
+  sorter?: boolean
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _style?: any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,9 +53,11 @@ export interface SorterValue {
 }
 
 export interface TableFilter {
-  lazy?: boolean
   external?: boolean
+  lazy?: boolean
+  // TODO: depracated, remove in v5
   label?: string
+  // TODO: depracated, remove in v5
   placeholder?: string
 }