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

package/src/components/picker/CPicker.ts

@@ -0,0 +1,220 @@
+import { defineComponent, h, PropType, ref, watch } from 'vue'
+
+import { CButton } from '../button/'
+import { CDropdown, CDropdownMenu, CDropdownToggle } from '../dropdown/'
+
+import { Color } from '../props'
+
+const CPicker = defineComponent({
+  name: 'CPicker',
+  props: {
+    ...CDropdown.props,
+    /**
+     * Toggle visibility or set the content of cancel button.
+     */
+    cancelButton: {
+      type: [Boolean, String],
+      default: 'Cancel',
+    },
+    /**
+     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    cancelButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the cancel button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    cancelButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the cancel button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    cancelButtonVariant: {
+      type: String,
+      default: 'ghost',
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Toggle visibility or set the content of confirm button.
+     */
+    confirmButton: {
+      type: [Boolean, String],
+      default: 'OK',
+    },
+    /**
+     * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    confirmButtonColor: {
+      ...Color,
+      default: 'primary',
+    },
+    /**
+     * Size the confirm button small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    confirmButtonSize: {
+      type: String,
+      default: 'sm',
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Set the confirm button variant to an outlined button or a ghost button.
+     *
+     * @values 'ghost', 'outline'
+     */
+    confirmButtonVariant: {
+      type: String,
+      validator: (value: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Set container type for the component.
+     */
+    container: {
+      type: String as PropType<'dropdown' | 'inline'>,
+      default: 'dropdown',
+    },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: Boolean,
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: Boolean,
+  },
+  emits: [
+    /**
+     * Callback fired when the cancel button has been clicked.
+     */
+    'cancel',
+    /**
+     * Callback fired when the confirm button has been clicked.
+     */
+    'confirm',
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { emit, slots }) {
+    const visible = ref(props.visible)
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+    )
+
+    const handleConfirm = () => {
+      emit('confirm')
+      visible.value = false
+    }
+
+    const Footer = () =>
+      h('div', { class: 'picker-footer' }, [
+        props.cancelButton &&
+          h(
+            CButton,
+            {
+              color: props.cancelButtonColor,
+              onClick: () => emit('cancel'),
+              size: props.cancelButtonSize,
+              variant: props.cancelButtonVariant,
+            },
+            /**
+             * @slot Location for the cancel button content.
+             */
+            () => (slots.cancelButton ? slots.cancelButton() : props.cancelButton),
+          ),
+        props.confirmButton &&
+          h(
+            CButton,
+            {
+              color: props.confirmButtonColor,
+              onClick: handleConfirm,
+              size: props.confirmButtonSize,
+              variant: props.confirmButtonVariant,
+            },
+            /**
+             * @slot Location for the confirm button content.
+             */
+            () => (slots.confirmButton ? slots.confirmButton() : props.confirmButton),
+          ),
+      ])
+
+    switch (props.container) {
+      case 'inline':
+        return () => h('div', { class: 'picker' }, slots.default && slots.default())
+      default:
+        return () =>
+          h(
+            CDropdown,
+            {
+              autoClose: 'outside',
+              class: 'picker',
+              onHide: () => {
+                visible.value = false
+                emit('hide')
+              },
+              onShow: () => {
+                visible.value = true
+                emit('show')
+              },
+              variant: 'dropdown',
+              visible: visible.value,
+            },
+            () => [
+              h(
+                CDropdownToggle,
+                {
+                  custom: true,
+                  disabled: visible.value || props.disabled,
+                },
+                {
+                  /**
+                   * @slot Location for the toggler element.
+                   */
+                  default: () => slots.toggler && slots.toggler(),
+                },
+              ),
+              h(CDropdownMenu, {}, () => [
+                slots.default && slots.default(),
+                props.footer && Footer(),
+              ]),
+            ],
+          )
+    }
+  },
+})
+export { CPicker }

package/src/components/picker/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CPicker } from './CPicker'
+
+const CPickerPlugin = {
+  install: (app: App): void => {
+    app.component(CPicker.name, CPicker)
+  },
+}
+
+export { CPicker, CPickerPlugin }

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>"`;
+exports[`Customize CSidebar component renders correctly 1`] = `
+"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>
+<!---->"
+`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class=\\"sidebar hide\\">Default slot</div>"`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `
+"<div class=\\"sidebar hide\\">Default slot</div>
+<!---->"
+`;

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
 }