@coreui/vue-pro 5.3.0 → 5.5.0

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

@@ -14,26 +14,31 @@ export const filterColumns = (
   columnFilter: boolean | ColumnFilter | undefined,
   columnFilterState: ColumnFilterValue,
   itemsDataColumns: string[],
-) => {
+): Item[] => {
   if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
     return items
   }
 
-  Object.entries(columnFilterState).forEach(([key, value]) => {
-    if (value instanceof Function) {
-      items = items.filter((item) => value(item[key]))
-      return
-    }
+  if (Object.entries(columnFilterState).length === 0) {
+    return items
+  }
 
-    const columnFilter = String(value).toLowerCase()
-    if (columnFilter && itemsDataColumns.includes(key)) {
-      items = items.filter((item) => {
-        return String(item[key]).toLowerCase().includes(columnFilter)
-      })
+  let filteredItems = [...items]
+
+  for (const [key, value] of Object.entries(columnFilterState)) {
+    if (typeof value === 'function') {
+      filteredItems = filteredItems.filter((item) => value(item[key]))
+    } else {
+      const columnFilterValue = String(value).toLowerCase()
+      if (columnFilterValue && itemsDataColumns.includes(key)) {
+        filteredItems = filteredItems.filter((item) =>
+          String(item[key]).toLowerCase().includes(columnFilterValue),
+        )
+      }
     }
-  })
+  }
 
-  return items
+  return filteredItems
 }
 
 export const filterTable = (
@@ -41,7 +46,7 @@ export const filterTable = (
   tableFilter: boolean | TableFilter | undefined,
   tableFilterState: string,
   itemsDataColumns: string[],
-) => {
+): Item[] => {
   if (
     !tableFilterState ||
     (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
@@ -50,43 +55,46 @@ export const filterTable = (
   }
 
   const filter = tableFilterState.toLowerCase()
-  const valueContainFilter = (val: any) => String(val).toLowerCase().includes(filter)
-  items = items.filter((item) => {
-    return !!itemsDataColumns.find((key) => valueContainFilter(item[key]))
-  })
 
-  return items
+  return items.filter((item) =>
+    itemsDataColumns.some((key) => String(item[key]).toLowerCase().includes(filter)),
+  )
 }
 
 export const getClickedColumnName = (
-  target: HTMLTextAreaElement,
+  target: HTMLElement,
   columnNames: string[],
-  selectable: boolean | undefined
+  selectable?: boolean,
 ): string => {
-  const closest = target.closest('tr')
-  const children = closest ? Array.from(closest.children) : []
-  const clickedCell = children.filter((child) => child.contains(target))[0]
-  return selectable ? columnNames[children.indexOf(clickedCell) - 1]  : columnNames[children.indexOf(clickedCell)]
-}
+  const clickedCell = target.closest('td')
+  if (!clickedCell) {
+    return ''
+  }
 
-export const getColumnKey = (column: Column | string) =>
-  typeof column === 'object' ? column.key : column
+  const row = clickedCell.closest('tr')
+  if (!row) {
+    return ''
+  }
 
-export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object'
-    ? column.label !== undefined
-      ? column.label
-      : pretifyName(column.key)
-    : pretifyName(column)
+  const cells = Array.from(row.children)
+  let index = cells.indexOf(clickedCell)
 
-export const getColumnName = (column: string | Column) => {
-  if (typeof column === 'object') {
-    return column.key
+  if (selectable) {
+    index -= 1
   }
 
-  return column
+  return columnNames[index] || ''
 }
 
+export const getColumnKey = (column: Column | string): string =>
+  typeof column === 'object' ? column.key : column
+
+export const getColumnLabel = (column: Column | string): string =>
+  typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column)
+
+export const getColumnName = (column: Column | string): string =>
+  typeof column === 'object' ? column.key : column
+
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
   items: Item[],
@@ -128,23 +136,22 @@ export const getColumns = (_columns: (Column | Group | string)[]): (Column | str
   return columns
 }
 
-export const countColumns = (columns: Column[], counter = 0) => {
-  let _counter = counter
-  for (const column of columns) {
-    if (!column.children) {
-      _counter++
-    }
+export const countColumns = (columns: Column[]): number => {
+  let count = 0
 
-    if (column.children) {
-      _counter = countColumns(column.children, _counter)
+  for (const column of columns) {
+    if (!column.children || column.children.length === 0) {
+      count++
+    } else {
+      count += countColumns(column.children)
     }
   }
 
-  return _counter
+  return count
 }
 
-export const getColumnGroups = (columns: (string | Column)[] | undefined) => {
-  const groups = []
+export const getColumnGroups = (columns: (string | Column)[] | undefined): Group[][] => {
+  const groups: Group[][] = []
 
   const traverseColumns = (column: Column, deep = 0, colSpan = 0): Group[] => {
     const groups = []
@@ -205,103 +212,96 @@ export const getColumnGroups = (columns: (string | Column)[] | undefined) => {
   return groups
 }
 
-export const getColumnNamesFromItems = (items: Item[]) =>
+export const getColumnNamesFromItems = (items: Item[]): string[] =>
   Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
 
-export const getColumnSorterState = (
-  key: string,
-  sorterState: SorterValue | undefined,
-): string | number => {
-  if (sorterState && sorterState.column === key) {
-    if (sorterState.state) {
-      return sorterState.state
-    }
-    return 0
+export const getColumnSorterFunction = (column: Column | undefined) => {
+  if (
+    column &&
+    typeof column === 'object' &&
+    column.sorter &&
+    typeof column.sorter === 'function'
+  ) {
+    return column.sorter
   }
 
-  return 0
-}
-
-export const getColumnValues = (items: Item[], key: string) => {
-  return items.map((item) => item[key])
+  return
 }
 
-export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
-  const props = {}
+export const getColumnSorterState = (key: string, sorterState?: SorterValue[]): string | number => {
+  const state = sorterState && sorterState.find((el) => el.column === key)
 
-  if (typeof column === 'object' && column._colProps) {
-    Object.assign(props, column._colProps)
-  }
+  return state ? state.state : 0
+}
 
-  if (item._cellProps && item._cellProps['all']) {
-    Object.assign(props, item._cellProps['all'])
-  }
+export const getColumnValues = (items: Item[], key: string): any[] => items.map((item) => item[key])
 
-  if (item._cellProps && item._cellProps[colName]) {
-    Object.assign(props, item._cellProps[colName])
+export const getTableDataCellProps = (
+  column: Column | string,
+  item: Item,
+  colName: string,
+): Record<string, any> => {
+  const props = {
+    ...(typeof column === 'object' && column._colProps),
+    ...item._cellProps?.all,
+    ...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])
+export const getTableDataCellStyles = (
+  column: Column | string,
+  item: Item,
+  colName: string,
+): Record<string, any> => {
+  const styles = {
+    ...(typeof column === 'object' && column._colStyle),
+    ...item._cellStyle?.all,
+    ...item._cellStyle?.[colName],
   }
 
   return styles
 }
 
-export const getTableHeaderCellProps = (column: Column | string) => {
-  if (typeof column === 'object' && column._props) {
-    return column._props
-  }
-
-  return {}
-}
+export const getTableHeaderCellProps = (column: Column | string) =>
+  typeof column === 'object' && column._props ? column._props : {}
 
 export const getTableHeaderCellStyles = (
   column: Column | string,
   columnSorter: boolean | Sorter | undefined,
-) => {
-  const style = {}
+): Record<string, any> => {
+  const style: Record<string, any> = {}
 
-  if (
+  const isSortable =
     columnSorter &&
     (typeof column !== 'object' ||
       (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
-  ) {
-    (style as { [key: string]: string })['cursor'] = 'pointer'
+
+  if (isSortable) {
+    style.cursor = 'pointer'
   }
 
   if (typeof column === 'object' && column._style) {
-    return { ...style, ...column._style }
+    Object.assign(style, column._style)
   }
+
   return style
 }
 
 export const isSortable = (
-  i: number,
+  index: number,
   columns: (string | Column)[] | undefined,
-  columnSorter: Sorter | boolean | undefined,
+  columnSorter: boolean | Sorter | undefined,
   itemsDataColumns: string[],
   columnNames: string[],
-): boolean | undefined => {
-  const isDataColumn = itemsDataColumns.includes(columnNames[i])
-  let column
-  if (columns) column = columns[i]
+): boolean => {
+  const key = columnNames[index]
+  const isDataColumn = itemsDataColumns.includes(key)
+  const column = columns ? columns[index] : undefined
+
   return (
-    columnSorter &&
+    !!columnSorter &&
     (!columns ||
       typeof column !== 'object' ||
       (typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
@@ -309,7 +309,7 @@ export const isSortable = (
   )
 }
 
-export const pretifyName = (name: string) => {
+export const pretifyName = (name: string): string => {
   return name
     .replace(/[-_.]/g, ' ')
     .replace(/ +/g, ' ')
@@ -319,28 +319,59 @@ export const pretifyName = (name: string) => {
     .join(' ')
 }
 
+export const sortBy = (
+  column: Column | undefined,
+  items: Item[],
+  key: string,
+  order: SorterValue['state'],
+): Item[] => {
+  const sorterFunction = getColumnSorterFunction(column)
+
+  const sortedItems = [...items].sort(
+    sorterFunction ||
+      ((a, b) => {
+        const valA = a[key]
+        const valB = b[key]
+        const aValue = typeof valA === 'number' ? valA : String(valA).toLowerCase()
+        const bValue = typeof valB === 'number' ? valB : String(valB).toLowerCase()
+        return aValue > bValue ? 1 : bValue > aValue ? -1 : 0
+      }),
+  )
+
+  return order === 'desc' ? sortedItems.reverse() : sortedItems
+}
+
 export const sortItems = (
+  columns: (Column | string)[] | undefined,
   columnSorter: boolean | Sorter | undefined,
   items: Item[],
   itemsDataColumns: string[],
-  sorterState: SorterValue,
-) => {
-  const column = sorterState.column
+  sorterState: SorterValue[],
+): Item[] => {
   if (
-    !column ||
-    !itemsDataColumns.includes(column) ||
-    (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
+    (columnSorter && typeof columnSorter === 'object' && columnSorter.external) ||
+    sorterState.length === 0
   ) {
     return items
   }
 
-  const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
-  const sorted = items.slice().sort((item, item2) => {
-    const value = item[column]
-    const value2 = item2[column]
-    const a = typeof value === 'number' ? value : String(value).toLowerCase()
-    const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase()
-    return a > b ? 1 * flip : b > a ? -1 * flip : 0
-  })
-  return sorted
+  let sortedItems = [...items]
+
+  for (const sorter of [...sorterState].reverse()) {
+    const key = sorter.column
+    const order = sorter.state
+    const column =
+      columns &&
+      (columns.find((column) => typeof column === 'object' && column.key === key) as
+        | Column
+        | undefined)
+
+    if (!key || !itemsDataColumns.includes(key)) {
+      continue
+    }
+
+    sortedItems = sortBy(column, sortedItems, key, order)
+  }
+
+  return sortedItems
 }

package/src/components/tabs/CTab.ts

@@ -3,6 +3,12 @@ import { defineComponent, h, inject, Ref } from 'vue'
 const CTab = defineComponent({
   name: 'CTab',
   props: {
+    /**
+     * Toggle the disabled state for the component.
+     *
+     * @since 5.4.0
+     */
+    disabled: Boolean,
     /**
      * Item key.
      */
@@ -13,7 +19,7 @@ const CTab = defineComponent({
   },
   setup(props, { slots }) {
     const activeItemKey = inject('activeItemKey') as Ref<number | string>
-    const id = inject('id') as Ref<number | string>
+    const id = inject('id')
     const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
 
     const isActive = () => props.itemKey === activeItemKey.value
@@ -28,12 +34,13 @@ const CTab = defineComponent({
               active: isActive(),
             },
           ],
-          id: `${props.itemKey}-tab-${id.value}`,
+          id: `${props.itemKey}-tab-${id}`,
           role: 'tab',
           tabindex: isActive() ? 0 : -1,
           type: 'button',
-          'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
+          'aria-controls': `${props.itemKey}-tab-panel-${id}`,
           'aria-selected': isActive(),
+          disabled: props.disabled,
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),
         },

package/src/components/tabs/CTabPanel.ts

@@ -50,8 +50,7 @@ const CTabPanel = defineComponent({
   ],
   setup(props, { slots, emit }) {
     const activeItemKey = inject('activeItemKey') as Ref<number | string>
-    const id = inject('id') as Ref<number | string>
-
+    const id = inject('id')
     const tabPaneRef = ref()
     const firstRender = ref(true)
     const visible = ref()
@@ -112,9 +111,9 @@ const CTabPanel = defineComponent({
                     show: firstRender.value && visible.value,
                   },
                 ],
-                id: `${props.itemKey}-tab-panel-${id.value}`,
+                id: `${props.itemKey}-tab-panel-${id}`,
                 role: 'tabpanel',
-                'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
+                'aria-labelledby': `${props.itemKey}-tab-${id}`,
                 tabindex: 0,
                 ref: tabPaneRef,
               },

package/src/components/tabs/CTabs.ts

@@ -1,5 +1,4 @@
-import { defineComponent, h, provide, ref, watch } from 'vue'
-import { useUniqueId } from '../../composables'
+import { defineComponent, h, provide, ref, useId, watch } from 'vue'
 
 const CTabs = defineComponent({
   name: 'CTabs',
@@ -19,9 +18,8 @@ const CTabs = defineComponent({
     'change',
   ],
   setup(props, { slots, emit }) {
-    const { getUID } = useUniqueId()
-    const uID = ref(getUID())
     const activeItemKey = ref(props.activeItemKey)
+    const uniqueId = useId()
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
     }
@@ -35,7 +33,7 @@ const CTabs = defineComponent({
     )
 
     provide('activeItemKey', activeItemKey)
-    provide('id', uID)
+    provide('id', uniqueId)
     provide('setActiveItemKey', setActiveItemKey)
 
     return () => h('div', { class: 'tabs' }, slots.default && slots.default())

package/src/components/time-picker/CTimePicker.ts

@@ -25,16 +25,15 @@ import { Color } from '../props'
 const CTimePicker = defineComponent({
   name: 'CTimePicker',
   props: {
-    ...CPicker.props,
     /**
      * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
      *
      * @since 4.7.0
      */
     ampm: {
-      type: [Boolean, String],
+      type: [Boolean, String] as PropType<boolean | 'auto'>,
       default: 'auto',
-      validator: (value: boolean | string) => {
+      validator: (value: boolean | 'auto') => {
         if (typeof value == 'string') {
           return ['auto'].includes(value)
         }
@@ -130,6 +129,17 @@ const CTimePicker = defineComponent({
         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,
     /**
      * Provide valuable, actionable feedback.
      *
@@ -170,7 +180,7 @@ const CTimePicker = defineComponent({
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -200,7 +210,7 @@ const CTimePicker = defineComponent({
      */
     locale: {
       type: String,
-      defalut: 'default',
+      default: 'default',
     },
     /**
      * Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.
@@ -602,7 +612,9 @@ const CTimePicker = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/toast/CToastClose.ts

@@ -1,6 +1,12 @@
-import { defineComponent, h, inject } from 'vue'
+import { defineComponent, h, inject, resolveComponent } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
+import type { ComponentProps } from '../../utils/ComponentProps'
+
+interface CCloseButtonProps extends ComponentProps<typeof CCloseButton> {
+  as?: string
+}
+
 const CToastClose = defineComponent({
   name: 'CToastClose',
   props: {
@@ -16,7 +22,7 @@ const CToastClose = defineComponent({
      */
     'close',
   ],
-  setup(props, { slots, emit }) {
+  setup(props: CCloseButtonProps, { slots, emit }) {
     // eslint-disable-next-line no-unused-vars
     const updateVisible = inject('updateVisible') as (visible: boolean) => void
     const handleClose = () => {
@@ -26,7 +32,7 @@ const CToastClose = defineComponent({
     return () =>
       props.as
         ? h(
-            props.as,
+            resolveComponent(props.as),
             {
               onClick: () => {
                 handleClose()

package/src/components/toast/CToastHeader.ts

@@ -9,20 +9,11 @@ const CToastHeader = defineComponent({
      */
     closeButton: Boolean,
   },
-  emits: [
-    /**
-     * Event called after clicking the close button.
-     */
-    'close',
-  ],
-  setup(props, { slots, emit }) {
+  setup(props, { slots }) {
     return () =>
       h('div', { class: 'toast-header' }, [
         slots.default && slots.default(),
-        props.closeButton &&
-          h(CToastClose, {
-            onClose: () => emit('close'),
-          }),
+        props.closeButton && h(CToastClose),
       ])
   },
 })

package/src/components/tooltip/CTooltip.ts

@@ -1,8 +1,8 @@
-import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { useUniqueId, usePopper } from '../../composables'
+import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
 import { getRTLPlacement } from '../../utils'
@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -113,10 +113,10 @@ const CTooltip = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const tooltipRef = ref()
-    const uID = ref()
     const visible = ref(props.visible)
-    const { getUID } = useUniqueId('popover')
+
     const { initPopper, destroyPopper } = usePopper()
+    const uniqueId = `tooltip-${useId()}`
 
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
@@ -145,10 +145,6 @@ const CTooltip = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
-    onMounted(() => {
-      uID.value = getUID()
-    })
-
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -208,7 +204,7 @@ const CTooltip = defineComponent({
                       },
                       attrs.class,
                     ],
-                    id: uID.value,
+                    id: uniqueId,
                     ref: tooltipRef,
                     role: 'tooltip',
                   },
@@ -229,7 +225,7 @@ const CTooltip = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
-          id: visible.value ? uID.value : null,
+          id: visible.value ? uniqueId : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),

package/src/composables/useUniqueId.ts

@@ -7,7 +7,7 @@ export const useUniqueId = (prefix: string = '') => {
     do {
       prefix += Math.floor(Math.random() * 1_000_000)
     } while (ids.value.includes(prefix))
-    
+
     ids.value.push(prefix)
     return prefix
   }