@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-beta.0

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

@@ -1,6 +1,6 @@
-import { computed, defineComponent, h, PropType } from 'vue'
+import { computed, defineComponent, h, PropType, ref, watch } from 'vue'
 
-import { CFormCheck, CFormInput } from '../form/'
+import { CFormInput } from '../form/'
 import { CTableFoot, CTableHead, CTableHeaderCell, CTableRow } from '../table/'
 
 import {
@@ -45,9 +45,40 @@ const CSmartTableHead = defineComponent({
   },
   emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
   setup(props, { slots, emit }) {
+    const selectedAll = ref()
+    const seleactAllCheckboxRef = ref<HTMLInputElement>()
     const columns = computed(() => getColumns(props.columns))
     const groups = computed(() => getColumnGroups(props.columns))
 
+    watch(
+      () => props.selectedAll,
+      () => {
+        selectedAll.value = props.selectedAll
+      },
+      {
+        immediate: true
+      }
+    )
+
+    watch([selectedAll, seleactAllCheckboxRef], () => {
+      if (seleactAllCheckboxRef.value && props.selectedAll === true) {
+        seleactAllCheckboxRef.value.indeterminate = false
+        seleactAllCheckboxRef.value.checked = true
+        return
+      }
+
+      if (seleactAllCheckboxRef.value && props.selectedAll === 'indeterminate') {
+        seleactAllCheckboxRef.value.checked = false
+        seleactAllCheckboxRef.value.indeterminate = true
+        return
+      }
+
+      if (seleactAllCheckboxRef.value) {
+        seleactAllCheckboxRef.value.indeterminate = false
+        seleactAllCheckboxRef.value.checked = false
+      }
+    })
+
     const columnSorterIcon = (column: Column | string) => {
       if (getColumnSorterState(getColumnKey(column), props.sorterState) === 0) {
         return h(
@@ -99,7 +130,7 @@ const CSmartTableHead = defineComponent({
                     ),
                   ),
                 ]),
-              ]),
+              ]), 
             h(
               CTableRow,
               {},
@@ -107,23 +138,53 @@ const CSmartTableHead = defineComponent({
                 default: () => [
                   props.selectable &&
                     h(CTableHeaderCell, {}, () =>
-                      h(CFormCheck, {
-                        checked: typeof props.selectedAll === 'boolean' ? props.selectedAll : false,
-                        indeterminate: props.selectedAll === 'indeterminate' ? true : false,
-                        onChange: () => {
+                      h('input', {
+                        class: 'form-check-input',
+                        type: 'checkbox',
+                        ref: seleactAllCheckboxRef,
+                        onClick: () => {
+                          if (selectedAll.value !== 'reset') {
+                            selectedAll.value = 'reset'
+                          } else {
+                            selectedAll.value = ''
+                          }
+          
                           emit('selectAllChecked')
                         },
                       }),
                     ),
-                  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 +204,8 @@ const CSmartTableHead = defineComponent({
                             columnSorterIcon(column),
                         ],
                       },
-                    ),
-                  ),
+                    )
+                  }),
                 ],
               },
             ),
@@ -155,8 +216,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),
@@ -187,7 +248,11 @@ const CSmartTableHead = defineComponent({
                                       )
                                     },
                                     onChange: (event: Event) => {
-                                      emit('filterChange', (event.target as HTMLInputElement).value)
+                                      emit(
+                                        'filterChange',
+                                        getColumnKey(column),
+                                        (event.target as HTMLInputElement).value,
+                                      )
                                     },
                                     'aria-label': `column name: '${getColumnLabel(
                                       column,
@@ -199,8 +264,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 = {
@@ -40,13 +42,12 @@ export type Item = {
   [key: string]: number | string | any
   _cellProps?: any
   _props?: any
+  _selectable?: boolean
   _selected?: boolean
 }
 
 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
@@ -245,7 +281,7 @@ export const getTableHeaderCellStyles = (
     (typeof column !== 'object' ||
       (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
   ) {
-    style['cursor'] = 'pointer'
+    (style as { [key: string]: string })['cursor'] = 'pointer'
   }
 
   if (typeof column === 'object' && column._style) {

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

@@ -293,7 +293,9 @@ const CTimePicker = defineComponent({
       listOfSeconds: [],
       hour12: false,
     })
-    const isValid = ref(props.valid || (props.invalid && false))
+    const isValid = ref<boolean | undefined>(
+      props.valid ?? (props.invalid === true ? false : undefined),
+    )
 
     watch(
       () => props.time,
@@ -305,7 +307,7 @@ const CTimePicker = defineComponent({
     watch(
       () => [props.valid, props.invalid],
       () => {
-        isValid.value = props.valid || (props.invalid && false)
+        isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
       },
     )
 

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

@@ -1,4 +1,6 @@
-import { defineComponent, h, onUpdated, PropType, ref } from 'vue'
+import { defineComponent, h, onUpdated, PropType, ref, watch } from 'vue'
+
+import { useIsVisible } from '../../composables'
 
 export interface Element {
   value: number | string
@@ -19,17 +21,29 @@ const CTimePickerRollCol = defineComponent({
   emits: ['click'],
   setup(props, { emit }) {
     const init = ref(true)
-    const colRef = ref<HTMLDivElement>()
+    const colRef = ref<HTMLElement>()
+    const isVisible = useIsVisible(colRef)
 
-    onUpdated(() => {
+    const scrollToSelectedElement = () => {
       const nodeEl = colRef.value?.querySelector('.selected')
-      if (nodeEl && nodeEl instanceof HTMLElement) {
+      if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.value?.scrollTo({
           top: nodeEl.offsetTop,
           behavior: init.value ? 'auto' : 'smooth',
         })
       }
-      init.value = false
+    }
+
+    watch(isVisible, () => {
+      scrollToSelectedElement()
+
+      if (isVisible.value) {
+        init.value = false
+      }
+    })
+    
+    onUpdated(() => {
+      scrollToSelectedElement()
     })
 
     const handleKeyDown = (event: KeyboardEvent, value: number | string) => {

package/src/components/tooltip/CTooltip.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
@@ -18,6 +19,17 @@ const CTooltip = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * 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-beta.0
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -104,7 +116,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
-    
+
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
 
@@ -164,45 +176,49 @@ const CTooltip = defineComponent({
 
     return () => [
       h(
-        Teleport,
+        CConditionalTeleport,
         {
-          to: 'body',
+          container: props.container,
+          teleport: true,
         },
-        h(
-          Transition,
-          {
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-          },
-          () =>
-            visible.value &&
+        {
+          default: () =>
             h(
-              'div',
+              Transition,
               {
-                class: [
-                  'tooltip',
-                  'bs-tooltip-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    class: [
+                      'tooltip',
+                      'bs-tooltip-auto',
+                      {
+                        fade: props.animation,
+                      },
+                    ],
+                    ref: tooltipRef,
+                    role: 'tooltip',
+                    ...attrs,
                   },
-                ],
-                ref: tooltipRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'tooltip-arrow' }),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'tooltip-inner' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'tooltip-arrow' }),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'tooltip-inner' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({

package/src/components/widgets/CWidgetStatsA.ts

@@ -33,9 +33,7 @@ const CWidgetStatsA = defineComponent({
       h(
         CCard,
         {
-          class: [
-            { [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
-          ],
+          class: [{ [`bg-${props.color}`]: props.color, 'text-white': props.color }],
         },
         () => [
           h(

package/src/components/widgets/CWidgetStatsB.ts

@@ -57,7 +57,7 @@ const CWidgetStatsB = defineComponent({
         {
           class: [
             {
-              'text-high-emphasis-inverse': props.inverse,
+              'text-white': props.inverse,
             },
           ],
           color: props.color,
@@ -98,9 +98,7 @@ const CWidgetStatsB = defineComponent({
                 h(
                   'small',
                   {
-                    class: [
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
-                    ],
+                    class: [props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary'],
                   },
                   {
                     default: () => (slots.text && slots.text()) || props.text,

package/src/components/widgets/CWidgetStatsC.ts

@@ -75,7 +75,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-end mb-4',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   slots.icon && slots.icon(),
@@ -96,7 +96,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-uppercase fw-semibold small',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   {

package/src/components/widgets/CWidgetStatsD.ts

@@ -74,7 +74,7 @@ const CWidgetStatsD = defineComponent({
                           h(CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
                           h(
                             CCol,
-                            { class: 'text-uppercase text-medium-emphasis small' },
+                            { class: 'text-uppercase text-body-secondary small' },
                             () => value.title,
                           ),
                         ],

package/src/components/widgets/CWidgetStatsE.ts

@@ -35,7 +35,7 @@ const CWidgetStatsE = defineComponent({
               h(
                 'div',
                 {
-                  class: 'text-muted small text-uppercase font-weight-bold',
+                  class: 'text-body-secondary small text-uppercase font-weight-bold',
                 },
                 {
                   default: () => (slots.title && slots.title()) || props.title,

package/src/components/widgets/CWidgetStatsF.ts

@@ -81,7 +81,7 @@ const CWidgetStatsF = defineComponent({
                     h(
                       'div',
                       {
-                        class: 'text-medium-emphasis text-uppercase fw-semibold small',
+                        class: 'text-body-secondary text-uppercase fw-semibold small',
                       },
                       {
                         default: () => (slots.title && slots.title()) || props.title,

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`Loads and display CWidgetStatsE component renders correctly 1`] = `
 "<div class="card">
   <div class="card-body text-center">
-    <div class="text-muted small text-uppercase font-weight-bold">title</div>
+    <div class="text-body-secondary small text-uppercase font-weight-bold">title</div>
     <div class="h2 py-3">value</div>chartdefault
   </div>
 </div>"

package/src/composables/index.ts

@@ -1,4 +1,6 @@
 import { useColorModes } from './useColorModes'
+import { useDebouncedCallback } from './useDebouncedCallback'
+import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 
-export { useColorModes, usePopper }
+export { useColorModes, useDebouncedCallback, useIsVisible, usePopper }

package/src/composables/useDebouncedCallback.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+
+export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
+  const timeout = ref<ReturnType<typeof setTimeout>>()
+  const debouncedFn = (...args: any[]) => {
+    const handler = () => {
+      clearTimeout(timeout.value)
+      callback(...args)
+    }
+
+    clearTimeout(timeout.value)
+    timeout.value = setTimeout(handler, delay)
+  }
+
+  return debouncedFn()
+}

package/src/composables/useIsVisible.ts

@@ -0,0 +1,20 @@
+import { onMounted, onUnmounted, ref, Ref } from 'vue'
+
+export const useIsVisible = (el: Ref<HTMLElement | undefined>) => {
+  const isIntersecting = ref(false)
+  const observer = ref()
+
+  onMounted(() => {
+    observer.value = new IntersectionObserver(([entry]) => {
+      isIntersecting.value = entry.isIntersecting
+    })
+
+    el.value && observer.value.observe(el.value)
+  })
+
+  onUnmounted(() => {
+    observer.value.disconnect()
+  })
+
+  return isIntersecting
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { App } from 'vue'
 import * as Components from './components'
 import * as Directives from './directives'
@@ -5,11 +6,14 @@ import * as Directives from './directives'
 const CoreuiVue = {
   install: (app: App): void => {
     for (const key in Components) {
-      app.component(key, Components[key])
+      app.component(key, (Components as { [key: string]: any })[key])
     }
 
     for (const key in Directives) {
-      app.directive(Directives[key]['name'], Directives[key])
+      app.directive(
+        (Directives as { [key: string]: any })[key]['name'],
+        (Directives as { [key: string]: any })[key],
+      )
     }
   },
 }

package/src/utils/isObjectInArray.ts

@@ -1,7 +1,7 @@
 const isObjectInArray = <T>(array: T[], item: T, ignore: string[] = []) =>
   array.some((_item: T) => {
     let result = true
-    for (const key in item) {
+    for (const key in _item) {
       if (!ignore.includes(key) && item[key] !== _item[key]) {
         result = false
         break