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

package/src/components/dropdown/CDropdownMenu.ts

@@ -1,9 +1,11 @@
 import { defineComponent, h, inject, Ref } from 'vue'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { getAlignmentClassNames } from './utils'
 
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
+  inheritAttrs: false,
   props: {
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
@@ -15,27 +17,43 @@ const CDropdownMenu = defineComponent({
       default: 'div',
     },
   },
-  setup(props, { slots }) {
+  setup(props, { attrs, slots }) {
     const dropdownMenuRef = inject('dropdownMenuRef') as Ref<HTMLElement>
     const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
     const visible = inject('visible') as Ref<boolean>
 
-    const { alignment, dark, popper } = config
+    const { alignment, container, dark, popper, teleport } = config
 
     return () =>
       h(
-        props.component,
+        CConditionalTeleport,
         {
-          class: ['dropdown-menu', { show: visible.value }, getAlignmentClassNames(alignment)],
-          ...((typeof alignment === 'object' || !popper) && {
-            'data-coreui-popper': 'static',
-          }),
-          ...(dark && { 'data-coreui-theme': 'dark' }),
-          ref: dropdownMenuRef,
+          container: container,
+          teleport: teleport,
+        },
+        {
+          default: () =>
+            h(
+              props.component,
+              {
+                ...attrs,
+                class: [
+                  'dropdown-menu',
+                  { show: visible.value },
+                  getAlignmentClassNames(alignment),
+                  attrs.class,
+                ],
+                ...((typeof alignment === 'object' || !popper) && {
+                  'data-coreui-popper': 'static',
+                }),
+                ...(dark && { 'data-coreui-theme': 'dark' }),
+                ref: dropdownMenuRef,
+              },
+              props.component === 'ul'
+                ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
+                : slots.default && slots.default(),
+            ),
         },
-        props.component === 'ul'
-          ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
-          : slots.default && slots.default(),
       )
   },
 })

package/src/components/dropdown/CDropdownToggle.ts

@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-alpha.1
+     * @since v5.0.0-beta.1
      */
     navLink: {
       type: Boolean,

package/src/components/dropdown/utils.ts

@@ -1,13 +1,15 @@
 import type { Placement } from '@popperjs/core'
 import type { Placements } from '../../types'
-import type { Alignments } from './types'
+import type { Alignments, Breakpoints } from './types'
 
-export const getAlignmentClassNames = (alignment: object | string) => {
+export const getAlignmentClassNames = (alignment: Alignments) => {
   const classNames: string[] = []
   if (typeof alignment === 'object') {
-    Object.keys(alignment).map((key) => {
-      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-    })
+    for (const key in alignment) {
+      classNames.push(
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+      )
+    }
   }
 
   if (typeof alignment === 'string') {

package/src/components/element-cover/CElementCover.ts

@@ -41,15 +41,15 @@ const CElementCover = defineComponent({
         return {}
       }
 
-      const parentCoords = parent.getBoundingClientRect()
-      const customBoundaries = {}
+      const parentCoords: {[key: string]: any} = parent.getBoundingClientRect()
+      const customBoundaries: {[key: string]: string} = {}
       props.boundaries.forEach(({ sides, query }) => {
         const element = parent.querySelector(query)
         if (!element || !sides) {
           return
         }
 
-        const coords = element.getBoundingClientRect()
+        const coords: {[key: string]: any} = element.getBoundingClientRect()
         sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
           customBoundaries[side] = `${sideMargin}px`

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './conditional-teleport'
 export * from './date-picker'
 export * from './date-range-picker'
 export * from './dropdown'

package/src/components/link/CLink.ts

@@ -30,8 +30,12 @@ const CLink = defineComponent({
     'click',
   ],
   setup(props, { slots, emit }) {
-    const handleClick = () => {
+    const handleClick = (event: Event) => {
       emit('click', props.href)
+
+      if (props.href === '' || props.href === '#') {
+        event.preventDefault()
+      }
     }
     return () =>
       h(

package/src/components/modal/CModal.ts

@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-alpha.1
+     * @since v5.0.0-beta.1
      */
     focus: {
       type: Boolean,

package/src/components/nav/CNav.ts

@@ -24,12 +24,12 @@ const CNav = defineComponent({
     /**
      * Set the nav variant to tabs or pills.
      *
-     * @values 'tabs', 'pills', 'underline'
+     * @values 'pills', 'tabs', 'underline', 'underline-border'
      */
     variant: {
       type: String,
       validator: (value: string) => {
-        return ['tabs', 'pills', 'underline'].includes(value)
+        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
       },
     },
   },

package/src/components/popover/CPopover.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'
@@ -8,6 +9,7 @@ import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the popover.
@@ -18,6 +20,15 @@ const CPopover = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Appends the vue popover 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.1
+     */
+    container: {
+      type: [Object, 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>`
      */
@@ -168,53 +179,58 @@ const CPopover = 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: [
-                  'popover',
-                  'bs-popover-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    ...attrs,
+                    class: [
+                      'popover',
+                      'bs-popover-auto',
+                      {
+                        fade: props.animation,
+                      },
+                      attrs.class,
+                    ],
+                    ref: popoverRef,
+                    role: 'tooltip',
                   },
-                ],
-                ref: popoverRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'popover-arrow' }),
-                (props.title || slots.title) &&
-                  h(
-                    'div',
-                    { class: 'popover-header' },
-                    {
-                      default: () => (slots.title && slots.title()) || props.title,
-                    },
-                  ),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'popover-body' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'popover-arrow' }),
+                    (props.title || slots.title) &&
+                      h(
+                        'div',
+                        { class: 'popover-header' },
+                        {
+                          default: () => (slots.title && slots.title()) || props.title,
+                        },
+                      ),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'popover-body' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({

package/src/components/progress/CProgress.ts

@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.1
      */
     progressBarClassName: String,
     /**

package/src/components/sidebar/CSidebar.ts

@@ -87,10 +87,16 @@ const CSidebar = defineComponent({
     'visible-change',
   ],
   setup(props, { attrs, slots, emit }) {
-    const mobile = ref()
-    const inViewport = ref()
     const sidebarRef = ref()
-    const visible = ref(props.visible)
+
+    const inViewport = ref()
+    const mobile = ref()
+    const visibleMobile = ref(false)
+    const visibleDesktop = ref(
+      props.visible !== undefined ? props.visible : props.overlaid ? false : true,
+    )
+
+    // const visible = ref(props.visible)
 
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
@@ -99,11 +105,14 @@ const CSidebar = defineComponent({
 
     watch(
       () => props.visible,
-      () => (visible.value = props.visible),
+      () => props.visible !== undefined && handleVisibleChange(props.visible),
     )
 
     watch(mobile, () => {
-      if (mobile.value && visible.value) visible.value = false
+      if (mobile.value) {
+        console.log('mobile')
+        visibleMobile.value = false
+      }
     })
 
     onMounted(() => {
@@ -132,8 +141,17 @@ const CSidebar = defineComponent({
       })
     })
 
+    const handleVisibleChange = (visible: boolean) => {
+      if (mobile.value) {
+        visibleMobile.value = visible
+        return
+      }
+
+      visibleDesktop.value = visible
+    }
+
     const handleHide = () => {
-      visible.value = false
+      handleVisibleChange(false)
       emit('visible-change', false)
     }
 
@@ -176,8 +194,8 @@ const CSidebar = defineComponent({
               [`sidebar-${props.position}`]: props.position,
               [`sidebar-${props.size}`]: props.size,
               'sidebar-narrow-unfoldable': props.unfoldable,
-              show: visible.value === true && mobile.value,
-              hide: visible.value === false && !mobile.value,
+              show: (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
+              hide: visibleDesktop.value === false && !mobile.value && !props.overlaid,
             },
             attrs.class,
           ],
@@ -188,7 +206,7 @@ const CSidebar = defineComponent({
       mobile.value &&
         h(CBackdrop, {
           class: 'sidebar-backdrop',
-          visible: props.visible,
+          visible: visibleMobile.value,
           onClick: () => handleHide(),
         }),
     ]

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

@@ -13,6 +13,7 @@ import { CSmartTableHead } from './CSmartTableHead'
 
 import { isObjectInArray } from '../../utils'
 
+import { ITEM_INTERNAL_KEYS } from './consts'
 import {
   filterColumns,
   filterTable,
@@ -21,7 +22,6 @@ import {
   isSortable,
   sortItems,
 } from './utils'
-
 import type {
   Column,
   ColumnFilter,
@@ -363,9 +363,9 @@ const CSmartTable = defineComponent({
         props.items.forEach((item: Item) => {
           if (item._selected) {
             const _item = { ...item }
-            delete _item['_cellProps']
-            delete _item['_props']
-            delete _item['_selected']
+            for (const key of ITEM_INTERNAL_KEYS) {
+              delete _item[key]
+            }
 
             selected.value = [...selected.value, _item]
           }
@@ -516,19 +516,19 @@ const CSmartTable = defineComponent({
     }
 
     const handleRowChecked = (item: Item, value: boolean) => {
-      if (value && !isObjectInArray(selected.value, item, ['_cellProps', '_props', '_selected'])) {
+      if (value && !isObjectInArray(selected.value, item, ITEM_INTERNAL_KEYS)) {
         selected.value = [...selected.value, item]
         return
       }
 
       selected.value = selected.value.filter(
-        (_item: Item) => !isObjectInArray([_item], item, ['_cellProps', '_props', '_selected']),
+        (_item: Item) => !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS),
       )
     }
 
     const handleSelectAllChecked = () => {
       if (selectedAll.value === true) {
-        selected.value = []
+        selected.value = items.value.filter((item) => item._selectable === false)
         return
       }
 
@@ -538,10 +538,27 @@ const CSmartTable = defineComponent({
         return
       }
 
-      selected.value = items.value.map((item) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { _cellProps, _props, _selected, ...rest } = item
-        return rest
+      const selectable = items.value.filter(
+        (item) => item._selectable !== false || item._selected === true,
+      )
+
+      if (selectable.length === selected.value.length) {
+        selected.value = items.value.filter(
+          (item) => item._selectable === false && item._selected === true,
+        )
+        return
+      }
+
+      const _selected = selectable.map((item) => {
+        return { ...item }
+      })
+
+      selected.value = _selected.map((item) => {
+        for (const key of ITEM_INTERNAL_KEYS) {
+          delete item[key]
+        }
+
+        return item
       })
     }
 
@@ -890,7 +907,8 @@ const CSmartTable = defineComponent({
                 {
                   class: 'col',
                 },
-                (props.pagination && numberOfPages.value > 1) || props.paginationProps
+                (props.pagination && numberOfPages.value > 1) ||
+                  (props.paginationProps && props.paginationProps.pages > 1)
                   ? h(CSmartPagination, {
                       pages: numberOfPages.value,
                       activePage: activePage.value,

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

@@ -5,6 +5,7 @@ import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 
 import { isObjectInArray } from '../../utils'
 
+import { ITEM_INTERNAL_KEYS } from './consts'
 import {
   getClickedColumnName,
   getColumnName,
@@ -80,11 +81,8 @@ const CSmartTableBody = defineComponent({
                             h(CFormCheck, {
                               checked:
                                 props.selected &&
-                                isObjectInArray(props.selected, item, [
-                                  '_cellProps',
-                                  '_props',
-                                  '_selected',
-                                ]),
+                                isObjectInArray(props.selected, item, ITEM_INTERNAL_KEYS),
+                              disabled: item._selectable === false,
                               onChange: (event: Event) => {
                                 emit('rowChecked', item, (event.target as HTMLInputElement).checked)
                               },

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,46 +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) => {
                     const isSortable =
-                    props.columnSorter &&
-                    (typeof column === 'object'
-                      ? column.sorter === undefined
-                        ? true
-                        : column.sorter
-                      : true)
+                      props.columnSorter &&
+                      (typeof column === 'object'
+                        ? column.sorter === undefined
+                          ? true
+                          : column.sorter
+                        : true)
                     return h(
                       CTableHeaderCell,
                       {
                         ...getTableHeaderCellProps(column),
                         style: getTableHeaderCellStyles(column, props.columnSorter),
-                        ...isSortable && {
+                        ...(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: () => [

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

@@ -0,0 +1 @@
+export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']

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

@@ -42,6 +42,7 @@ export type Item = {
   [key: string]: number | string | any
   _cellProps?: any
   _props?: any
+  _selectable?: boolean
   _selected?: boolean
 }
 

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

@@ -281,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) {