@coreui/vue-pro 4.10.4 → 5.0.0-alpha.1

package/src/components/picker/CPicker.ts

@@ -130,8 +130,6 @@ const CPicker = defineComponent({
             'div',
             {
               class: [
-                'dropdown',
-                'picker',
                 attrs.class,
                 {
                   show: visible.value,
@@ -156,26 +154,13 @@ const CPicker = defineComponent({
                     },
                   }),
                 ),
-              h(
-                'div',
-                {
-                  class: [
-                    'dropdown-menu',
-                    {
-                      show: visible.value,
-                    },
-                    props.dropdownClassNames,
-                  ],
-                  ref: dropdownRef,
-                },
-                [
-                  slots.default && slots.default(),
-                  /**
-                   * @slot Location for the footer element.
-                   */
-                  slots.footer && slots.footer(),
-                ],
-              ),
+              h('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
+                slots.default && slots.default(),
+                /**
+                 * @slot Location for the footer element.
+                 */
+                props.footer && slots.footer && slots.footer(),
+              ]),
             ],
           )
       }

package/src/components/progress/CProgress.ts

@@ -1,25 +1,61 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 
 import { CProgressBar } from './CProgressBar'
+import { Color } from '../../props'
 
 const CProgress = defineComponent({
   name: 'CProgress',
   props: {
+    /**
+     * Use to animate the stripes right to left via CSS3 animations.
+     */
+    animated: Boolean,
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
      */
     height: Number,
+    /**
+     * A string of all className you want applied to the <CProgressBar/> component.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    progressBarClassName: String,
     /**
      * Makes progress bar thinner.
      */
     thin: Boolean,
+    /**
+     * The percent to progress the ProgressBar.
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * Set the progress bar variant to optional striped.
+     *
+     * @values 'striped'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return value === 'striped'
+      },
+    },
     /**
      * Change the default color to white.
      */
     white: Boolean,
-    ...CProgressBar.props,
   },
   setup(props, { slots }) {
+    const stacked = inject('stacked', false) as boolean
+
     return () =>
       h(
         'div',
@@ -31,20 +67,42 @@ const CProgress = defineComponent({
               'progress-white': props.white,
             },
           ],
-          ...(props.height, { style: `height: ${props.height}px` }),
+          style: {
+            ...(props.height ? { height: `${props.height}px` } : {}),
+            ...(stacked ? { width: `${props.value}%` } : {}),
+          },
+          ...(props.value !== undefined && {
+            role: 'progressbar',
+            'aria-valuenow': props.value,
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+          }),
         },
-        props.value
-          ? h(
+        // @ts-expect-error name is defined in component
+        slots.default && slots.default().some((vnode) => vnode.type.name === 'CProgressBar')
+          ? slots.default().map((vnode) => {
+              // @ts-expect-error name is defined in component
+              if (vnode.type.name === 'CProgressBar') {
+                return h(vnode, {
+                  ...(props.animated && { animated: props.animated }),
+                  ...(props.color && { color: props.color }),
+                  ...(props.value && { value: props.value }),
+                  ...(props.variant && { variant: props.variant }),
+                })
+              }
+              return vnode
+            })
+          : h(
               CProgressBar,
               {
-                value: props.value,
+                ...(props.progressBarClassName && { class: props.progressBarClassName }),
                 animated: props.animated,
                 color: props.color,
+                value: props.value,
                 variant: props.variant,
               },
-              slots.default && slots.default(),
-            )
-          : slots.default && slots.default(),
+              () => slots.default && slots.default(),
+            ),
       )
   },
 })

package/src/components/progress/CProgressBar.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 
 import { Color } from '../../props'
 
@@ -35,6 +35,8 @@ const CProgressBar = defineComponent({
     },
   },
   setup(props, { slots }) {
+    const stacked = inject('stacked', false) as boolean
+
     return () =>
       h(
         'div',
@@ -47,11 +49,7 @@ const CProgressBar = defineComponent({
               ['progress-bar-animated']: props.animated,
             },
           ],
-          role: 'progressbar',
-          style: `width: ${props.value}%`,
-          'aria-valuenow': props.value,
-          'aria-valuemin': '0',
-          'aria-valuemax': '100',
+          ...(!stacked && { style: { width: `${props.value}%` } }),
         },
         slots.default && slots.default(),
       )

package/src/components/progress/CProgressStacked.ts

@@ -0,0 +1,19 @@
+import { defineComponent, h, provide } from 'vue'
+
+const CProgressStacked = defineComponent({
+  name: 'CProgressStacked',
+  props: {},
+  setup(_, { slots }) {
+    provide('stacked', true)
+    return () =>
+      h(
+        'div',
+        {
+          class: 'progress-stacked',
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CProgressStacked }

package/src/components/progress/index.ts

@@ -1,12 +1,14 @@
 import { App } from 'vue'
 import { CProgress } from './CProgress'
 import { CProgressBar } from './CProgressBar'
+import { CProgressStacked } from './CProgressStacked'
 
 const CProgressPlugin = {
   install: (app: App): void => {
     app.component(CProgress.name, CProgress)
     app.component(CProgressBar.name, CProgressBar)
+    app.component(CProgressStacked.name, CProgressStacked)
   },
 }
 
-export { CProgressPlugin, CProgress, CProgressBar }
+export { CProgressPlugin, CProgress, CProgressBar, CProgressStacked }

package/src/components/sidebar/CSidebar.ts

@@ -187,7 +187,7 @@ const CSidebar = defineComponent({
       ),
       mobile.value &&
         h(CBackdrop, {
-          class: 'sidebar-backdrop d-none',
+          class: 'sidebar-backdrop',
           visible: props.visible,
           onClick: () => handleHide(),
         }),

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

@@ -156,8 +156,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * 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:
-     * - label (String) - replaces default label text
-     * - values (Array) - custom array of pagination values
      * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
      */
     itemsPerPageSelect: {
@@ -330,7 +328,6 @@ const CSmartTable = defineComponent({
       }),
     )
     const itemsNumber = ref(props.itemsNumber)
-    // eslint-disable-next-line unicorn/explicit-length-check
     const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
     const selected = ref<Item[]>([])
     const selectedAll = ref<boolean | string>()
@@ -375,8 +372,9 @@ const CSmartTable = defineComponent({
         })
 
         if (Array.isArray(props.items)) {
-          items.value = props.items
-          // eslint-disable-next-line unicorn/explicit-length-check
+          items.value = props.items.map((item: Item, index: number) => {
+            return { ...item, _id: index }
+          })
           itemsNumber.value = props.itemsNumber || props.items.length
         }
       },
@@ -458,7 +456,7 @@ const CSmartTable = defineComponent({
       }
     })
 
-    const handleSorterChange = (column: string, index: number) => {
+    const handleSorterChange = (column: string, index: number, order?: 'asc' | 'desc') => {
       if (
         !isSortable(
           index,
@@ -474,8 +472,14 @@ const CSmartTable = defineComponent({
       //if column changed or sort was descending change asc to true
       const state = sorterState.value
 
+      if (order) {
+        state.state = order
+      }
+
       if (state.column === column) {
-        if (state.state === 0) {
+        if (order) {
+          state.state = order
+        } else if (state.state === 0) {
           state.state = 'asc'
         } else if (state.state === 'asc') {
           state.state = 'desc'
@@ -488,7 +492,7 @@ const CSmartTable = defineComponent({
         }
       } else {
         state.column = column
-        state.state = 'asc'
+        state.state = order || 'asc'
       }
 
       sorterState.value.column = state.column
@@ -748,8 +752,8 @@ const CSmartTable = defineComponent({
                           onFilterChange: (key: string, value: string) =>
                             handleColumnFilterChange(key, value, 'change'),
                           onSelectAllChecked: () => handleSelectAllChecked(),
-                          onSortClick: (key: string, index: number) =>
-                            handleSorterChange(key, index),
+                          onSortClick: (key: string, index: number, order: 'asc' | 'desc') =>
+                            handleSorterChange(key, index, order),
                         },
                         {
                           // @slot Sorter icon when items are unsorted.
@@ -772,7 +776,7 @@ const CSmartTable = defineComponent({
                                   class: 'icon',
                                   viewBox: '0 0 512 512',
                                   role: 'img',
-                                  innerHTML: cilArrowBottom[1],
+                                  innerHTML: cilArrowTop[1],
                                 }),
                           // @slot  Sorter icon when items are sorted descending.
                           sortingIconDescending: () =>
@@ -783,13 +787,14 @@ const CSmartTable = defineComponent({
                                   class: 'icon',
                                   viewBox: '0 0 512 512',
                                   role: 'img',
-                                  innerHTML: cilArrowTop[1],
+                                  innerHTML: cilArrowBottom[1],
                                 }),
                         },
                       ),
                     h(CSmartTableBody, {
                       clickableRows: props.clickableRows,
                       columnNames: columnNames.value,
+                      columns: props.columns ?? columnNames.value,
                       currentItems: currentItems.value,
                       firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                       noItemsLabel: props.noItemsLabel,

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

@@ -5,8 +5,13 @@ import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 
 import { isObjectInArray } from '../../utils'
 
-import { getClickedColumnName, getTableDataCellProps } from './utils'
-import type { Item } from './types'
+import {
+  getClickedColumnName,
+  getColumnName,
+  getTableDataCellProps,
+  getTableDataCellStyles,
+} from './utils'
+import type { Column, Item } from './types'
 
 const CSmartTableBody = defineComponent({
   name: 'CSmartTableBody',
@@ -17,6 +22,11 @@ const CSmartTableBody = defineComponent({
       default: () => [],
       require: true,
     },
+    columns: {
+      type: Array as PropType<(Column | string)[]>,
+      default: () => [],
+      require: true,
+    },
     currentItems: {
       type: Array as PropType<Item[]>,
       default: () => [],
@@ -33,9 +43,7 @@ const CSmartTableBody = defineComponent({
   },
   emits: ['rowChecked', 'rowClick'],
   setup(props, { emit }) {
-    const colspan: number = props.selectable
-      ? props.columnNames.length + 1
-      : props.columnNames.length
+    const colspan: number = props.selectable ? props.columns.length + 1 : props.columns.length
     return () =>
       h(
         CTableBody,
@@ -59,6 +67,7 @@ const CSmartTableBody = defineComponent({
                           getClickedColumnName(
                             event.target as HTMLTextAreaElement,
                             props.columnNames,
+                            props.selectable,
                           ),
                           event,
                         )
@@ -81,22 +90,24 @@ const CSmartTableBody = defineComponent({
                               },
                             }),
                           ),
-                        props.columnNames.map((colName) =>
-                          props.scopedSlots &&
-                          props.scopedSlots[colName] &&
-                          typeof props.scopedSlots[colName] === 'function'
+                        props.columns.map((column) => {
+                          const colName = getColumnName(column)
+                          return props.scopedSlots &&
+                            props.scopedSlots[colName] &&
+                            typeof props.scopedSlots[colName] === 'function'
                             ? h(props.scopedSlots[colName], { item: item })
                             : typeof item[colName] !== 'undefined' &&
-                              h(
-                                CTableDataCell,
-                                {
-                                  ...getTableDataCellProps(item, colName),
-                                },
-                                {
-                                  default: () => String(item[colName]),
-                                },
-                              ),
-                        ),
+                                h(
+                                  CTableDataCell,
+                                  {
+                                    ...getTableDataCellProps(column, item, colName),
+                                    style: getTableDataCellStyles(column, item, colName),
+                                  },
+                                  {
+                                    default: () => String(item[colName]),
+                                  },
+                                )
+                        }),
                       ],
                     },
                   ),
@@ -115,18 +126,6 @@ const CSmartTableBody = defineComponent({
                         {
                           class: 'p-0',
                           key: `details${trIndex}`,
-                          onClick: (event: MouseEvent) => {
-                            emit(
-                              'rowClick',
-                              item,
-                              trIndex + props.firstItemOnActivePageIndex,
-                              getClickedColumnName(
-                                event.target as HTMLTextAreaElement,
-                                props.columnNames,
-                              ),
-                              true,
-                            )
-                          },
                         },
                         {
                           default: () =>

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

@@ -115,15 +115,38 @@ const CSmartTableHead = defineComponent({
                         },
                       }),
                     ),
-                  columns.value.map((column, index: number) =>
-                    h(
+                  columns.value.map((column, index: number) => {
+                    const isSortable =
+                    props.columnSorter &&
+                    (typeof column === 'object'
+                      ? column.sorter === undefined
+                        ? true
+                        : column.sorter
+                      : true)
+                    return h(
                       CTableHeaderCell,
                       {
                         ...getTableHeaderCellProps(column),
-                        onClick: () => {
-                          emit('sortClick', getColumnKey(column), index)
-                        },
                         style: getTableHeaderCellStyles(column, props.columnSorter),
+                        ...isSortable && {
+                          tabindex: 0,
+                          onClick: () => emit('sortClick', getColumnKey(column), index),
+                          onKeydown: (event: KeyboardEvent) => {
+                            if (event.key === 'Enter') {
+                              emit('sortClick', getColumnKey(column), index)
+                            }
+        
+                            if (event.key === 'ArrowUp') {
+                              event.preventDefault()
+                              emit('sortClick', getColumnKey(column), index, 'asc')
+                            }
+        
+                            if (event.key === 'ArrowDown') {
+                              event.preventDefault()
+                              emit('sortClick', getColumnKey(column), index, 'desc')
+                            }
+                          },
+                        }
                       },
                       {
                         default: () => [
@@ -143,8 +166,8 @@ const CSmartTableHead = defineComponent({
                             columnSorterIcon(column),
                         ],
                       },
-                    ),
-                  ),
+                    )
+                  }),
                 ],
               },
             ),
@@ -155,8 +178,8 @@ const CSmartTableHead = defineComponent({
                 {
                   default: () => [
                     props.selectable && h(CTableHeaderCell),
-                    columns.value.map((column: Column | string) =>
-                      h(
+                    columns.value.map((column: Column | string) => {
+                      return h(
                         CTableHeaderCell,
                         {
                           ...getTableHeaderCellProps(column),
@@ -203,8 +226,8 @@ const CSmartTableHead = defineComponent({
                                   })
                               : '',
                         },
-                      ),
-                    ),
+                      )
+                    }),
                   ],
                 },
               ),

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

@@ -9,6 +9,8 @@ export type Column = {
   sorter?: boolean
   _style?: any
   _props?: any
+  _colStyle?: any
+  _colProps?: any
 }
 
 export type ColumnFilter = {
@@ -45,8 +47,6 @@ export type Item = {
 
 export type ItemsPerPageSelect = {
   external?: boolean
-  label?: string
-  values?: Array<number>
 }
 
 export type Pagination = {

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

@@ -61,11 +61,12 @@ export const filterTable = (
 export const getClickedColumnName = (
   target: HTMLTextAreaElement,
   columnNames: string[],
+  selectable: boolean | undefined
 ): string => {
   const closest = target.closest('tr')
   const children = closest ? Array.from(closest.children) : []
   const clickedCell = children.filter((child) => child.contains(target))[0]
-  return columnNames[children.indexOf(clickedCell)]
+  return selectable ? columnNames[children.indexOf(clickedCell) - 1]  : columnNames[children.indexOf(clickedCell)]
 }
 
 export const getColumnKey = (column: Column | string) =>
@@ -78,6 +79,14 @@ export const getColumnLabel = (column: Column | string) =>
       : pretifyName(column.key)
     : pretifyName(column)
 
+export const getColumnName = (column: string | Column) => {
+  if (typeof column === 'object') {
+    return column.key
+  }
+
+  return column
+}
+
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
   items: Item[],
@@ -217,15 +226,42 @@ export const getColumnValues = (items: Item[], key: string) => {
   return items.map((item) => item[key])
 }
 
-export const getTableDataCellProps = (item: Item, colName: string) => {
-  const props = item._cellProps && {
-    ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-    ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
+  const props = {}
+
+  if (typeof column === 'object' && column._colProps) {
+    Object.assign(props, column._colProps)
+  }
+
+  if (item._cellProps && item._cellProps['all']) {
+    Object.assign(props, item._cellProps['all'])
+  }
+
+  if (item._cellProps && item._cellProps[colName]) {
+    Object.assign(props, item._cellProps[colName])
   }
 
   return props
 }
 
+export const getTableDataCellStyles = (column: Column | string, item: Item, colName: string) => {
+  const styles = {}
+
+  if (typeof column === 'object' && column._colStyle) {
+    Object.assign(styles, column._colStyle)
+  }
+
+  if (item._cellStyle && item._cellStyle['all']) {
+    Object.assign(styles, item._cellStyle['all'])
+  }
+
+  if (item._cellStyle && item._cellStyle[colName]) {
+    Object.assign(styles, item._cellStyle[colName])
+  }
+
+  return styles
+}
+
 export const getTableHeaderCellProps = (column: Column | string) => {
   if (typeof column === 'object' && column._props) {
     return column._props