@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

package/src/components/picker/CPicker.ts

@@ -1,93 +1,11 @@
-import { defineComponent, h, PropType, ref, watch } from 'vue'
+import { cloneVNode, defineComponent, h, PropType, ref, watch } from 'vue'
+import { createPopper } from '@popperjs/core'
 
-import { CButton } from '../button/'
-import { CDropdown, CDropdownMenu, CDropdownToggle } from '../dropdown/'
-
-import { Color } from '../props'
+import { isRTL } from '../../utils'
 
 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.
      */
@@ -99,6 +17,10 @@ const CPicker = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
+    /**
+     * A string of all className you want applied to the dropdown menu.
+     */
+    dropdownClassNames: String,
     /**
      * Toggle visibility of footer element or set the content of footer.
      */
@@ -109,14 +31,6 @@ const CPicker = defineComponent({
     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.
      */
@@ -126,7 +40,12 @@ const CPicker = defineComponent({
      */
     'show',
   ],
-  setup(props, { emit, slots }) {
+  setup(props, { attrs, emit, slots }) {
+    const pickerRef = ref()
+    const dropdownRef = ref()
+    const togglerRef = ref()
+
+    const popper = ref()
     const visible = ref(props.visible)
 
     watch(
@@ -136,85 +55,115 @@ const CPicker = defineComponent({
       },
     )
 
-    const handleConfirm = () => {
-      emit('confirm')
-      visible.value = false
-    }
+    watch(visible, () => {
+      if (props.container === 'inline') {
+        return
+      }
 
-    const Footer = () =>
-      h('div', { class: 'picker-footer' }, [
-        slots.footer && slots.footer(),
-        props.cancelButton &&
-          h(
-            CButton,
+      if (visible.value) {
+        emit('show')
+        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('keyup', handleKeyUp)
+        initPopper()
+
+        return
+      }
+
+      emit('hide')
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyUp)
+
+      destroyPopper()
+    })
+
+    const initPopper = () => {
+      if (togglerRef.value && dropdownRef.value) {
+        popper.value = createPopper(togglerRef.value, dropdownRef.value, {
+          placement: isRTL(pickerRef.value) ? 'bottom-end' : 'bottom-start',
+          modifiers: [
             {
-              color: props.cancelButtonColor,
-              onClick: () => emit('cancel'),
-              size: props.cancelButtonSize,
-              variant: props.cancelButtonVariant,
+              name: 'preventOverflow',
+              options: {
+                boundary: 'clippingParents',
+              },
             },
-            /**
-             * @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,
+              name: 'offset',
+              options: {
+                offset: [0, 2],
+              },
             },
-            /**
-             * @slot Location for the confirm button content.
-             */
-            () => (slots.confirmButton ? slots.confirmButton() : props.confirmButton),
-          ),
-      ])
+          ],
+        })
+      }
+    }
+
+    const destroyPopper = () => {
+      if (popper.value) {
+        popper.value.destroy()
+      }
+
+      popper.value = undefined
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        visible.value = false
+      }
+    }
+
+    const handleMouseUp = (event: Event) => {
+      if (pickerRef.value && pickerRef.value.contains(event.target as HTMLElement)) {
+        return
+      }
+
+      visible.value = false
+    }
 
     switch (props.container) {
-      case 'inline':
-        return () => h('div', { class: 'picker' }, slots.default && slots.default())
-      default:
+      case 'inline': {
+        return () => h('div', { class: 'picker', ref: pickerRef }, slots.default && slots.default())
+      }
+      default: {
         return () =>
           h(
-            CDropdown,
+            'div',
             {
-              autoClose: 'outside',
-              class: 'picker',
-              onHide: () => {
-                visible.value = false
-                emit('hide')
-              },
-              onShow: () => {
-                visible.value = true
-                emit('show')
-              },
-              variant: 'dropdown',
-              visible: visible.value,
-            },
-            () => [
-              h(
-                CDropdownToggle,
+              class: [
+                attrs.class,
                 {
-                  custom: true,
-                  disabled: visible.value || props.disabled,
+                  show: visible.value,
                 },
-                {
-                  /**
-                   * @slot Location for the toggler element.
-                   */
-                  default: () => slots.toggler && slots.toggler(),
-                },
-              ),
-              h(CDropdownMenu, {}, () => [
+              ],
+              ref: pickerRef,
+            },
+            [
+              /**
+               * @slot Location for the toggler element.
+               */
+              slots.toggler &&
+                slots.toggler().map((slot) =>
+                  cloneVNode(slot, {
+                    onClick: () => {
+                      if (!props.disabled && !visible.value) {
+                        visible.value = true
+                      }
+                    },
+                    ref: (el) => {
+                      togglerRef.value = el
+                    },
+                  }),
+                ),
+              h('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
                 slots.default && slots.default(),
-                props.footer && Footer(),
+                /**
+                 * @slot Location for the footer element.
+                 */
+                slots.footer && slots.footer(),
               ]),
             ],
           )
+      }
     }
   },
 })

package/src/components/popover/CPopover.ts

@@ -2,6 +2,21 @@ import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transitio
 import { createPopper, Placement } from '@popperjs/core'
 
 import { executeAfterTransition } from '../../utils/transition'
+import { isRTL } from '../../utils'
+
+const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
+  switch (placement) {
+    case 'right': {
+      return isRTL(element) ? 'left' : 'right'
+    }
+    case 'left': {
+      return isRTL(element) ? 'right' : 'left'
+    }
+    default: {
+      return placement as Placement
+    }
+  }
+}
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -64,7 +79,7 @@ const CPopover = defineComponent({
      */
     'show',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const popoverRef = ref()
     const popper = ref()
@@ -94,7 +109,7 @@ const CPopover = defineComponent({
     const initPopper = () => {
       if (togglerRef.value) {
         popper.value = createPopper(togglerRef.value, popoverRef.value, {
-          placement: props.placement,
+          placement: getPlacement(props.placement, togglerRef.value),
           modifiers: [
             {
               name: 'offset',
@@ -134,6 +149,7 @@ const CPopover = defineComponent({
                 class: 'popover fade bs-popover-auto',
                 ref: popoverRef,
                 role: 'tooltip',
+                ...attrs,
               },
               [
                 h('div', { class: 'popover-arrow', 'data-popper-arrow': '' }),

package/src/components/props.ts

@@ -79,10 +79,6 @@ export const TextColor = {
 
 export const Breakpoint = {
   validator: (value: boolean | number): boolean => {
-    if (typeof value == 'boolean' || typeof value == 'number') {
-      return true
-    } else {
-      return false
-    }
+    return typeof value == 'boolean' || typeof value == 'number' ? true : false
   },
-}
+}

package/src/components/sidebar/CSidebar.ts

@@ -105,7 +105,7 @@ const CSidebar = defineComponent({
       mobile.value = isOnMobile(sidebarRef.value)
       inViewport.value = isInViewport(sidebarRef.value)
 
-      window.addEventListener('resize', () => handleResize())
+      window.addEventListener('resize', handleResize)
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
@@ -116,11 +116,12 @@ const CSidebar = defineComponent({
     })
 
     onBeforeUnmount(() => {
-      window.removeEventListener('resize', () => handleResize())
+      window.removeEventListener('resize', handleResize)
       window.removeEventListener('mouseup', handleClickOutside)
       window.removeEventListener('keyup', handleKeyup)
 
       sidebarRef.value.removeEventListener('mouseup', handleOnClick)
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
       sidebarRef.value.removeEventListener('transitionend', () => {
         inViewport.value = isInViewport(sidebarRef.value)
       })

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

@@ -11,12 +11,13 @@ import { CTable, CTableDataCell, CTableFoot, CTableRow } from '../table'
 import { CSmartTableBody } from './CSmartTableBody'
 import { CSmartTableHead } from './CSmartTableHead'
 
+import { isObjectInArray } from '../../utils'
+
 import {
   filterColumns,
   filterTable,
   getColumnNames,
   getColumnNamesFromItems,
-  isObjectInArray,
   isSortable,
   sortItems,
 } from './utils'
@@ -49,15 +50,11 @@ const CSmartTable = defineComponent({
      * 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: {
-      type: Boolean,
-    },
+    cleaner: Boolean,
     /**
      * Style table items as clickable.
      */
-    clickableRows: {
-      type: Boolean,
-    },
+    clickableRows: Boolean,
     /**
      * When set, displays additional filter row between table header and items, allowing filtering by specific column.
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
@@ -169,9 +166,7 @@ const CSmartTable = defineComponent({
     /**
      * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
      */
-    loading: {
-      type: Boolean,
-    },
+    loading: Boolean,
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
      */
@@ -188,9 +183,7 @@ const CSmartTable = defineComponent({
     /**
      * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
      */
-    paginationProps: {
-      type: Object,
-    },
+    paginationProps: Object,
     /**
      * Add checkboxes to make table rows selectable.
      */
@@ -227,15 +220,11 @@ const CSmartTable = defineComponent({
     /**
      * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
      */
-    tableBodyProps: {
-      type: Object,
-    },
+    tableBodyProps: Object,
     /**
      * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
      */
-    tableFootProps: {
-      type: Object,
-    },
+    tableFootProps: Object,
     /**
      * When set, displays table filter above table, allowing filtering by specific column.
      *
@@ -263,21 +252,15 @@ const CSmartTable = defineComponent({
     /**
      * Value of table filter.
      */
-    tableFilterValue: {
-      type: String,
-    },
+    tableFilterValue: String,
     /**
      * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
      */
-    tableHeadProps: {
-      type: Object,
-    },
+    tableHeadProps: Object,
     /**
      * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
      */
-    tableProps: {
-      type: Object,
-    },
+    tableProps: Object,
   },
   emits: [
     /**
@@ -340,20 +323,19 @@ const CSmartTable = defineComponent({
   ],
   setup(props, { emit, slots }) {
     const activePage = ref(props.activePage)
-    const columnFilterState = ref<ColumnFilterValue>(
-      props.columnFilterValue ? props.columnFilterValue : {},
-    )
+    const columnFilterState = ref<ColumnFilterValue>(props.columnFilterValue ?? {})
     const items = ref<Item[]>(
       props.items.map((item: Item, index: number) => {
         return { ...item, _id: index }
       }),
     )
     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>()
     const sorterState = ref<SorterValue>(props.sorterValue || {})
-    const tableFilterState = ref(props.tableFilterValue ? props.tableFilterValue : '')
+    const tableFilterState = ref(props.tableFilterValue ?? '')
 
     watch(
       () => props.activePage,
@@ -394,9 +376,13 @@ const CSmartTable = defineComponent({
 
         if (Array.isArray(props.items)) {
           items.value = props.items
+          // eslint-disable-next-line unicorn/explicit-length-check
           itemsNumber.value = props.itemsNumber || props.items.length
         }
       },
+      {
+        immediate: true,
+      },
     )
 
     watch(
@@ -437,23 +423,31 @@ const CSmartTable = defineComponent({
       emit('itemsPerPageChange', itemsPerPage.value)
     })
 
-    watch([selected, itemsNumber], () => {
-      emit('selectedItemsChange', selected)
+    watch(
+      [selected, itemsNumber],
+      () => {
+        if (props.selectable) {
+          emit('selectedItemsChange', selected)
 
-      if (selected.value.length === itemsNumber.value) {
-        selectedAll.value = true
-        return
-      }
+          if (selected.value.length === itemsNumber.value) {
+            selectedAll.value = true
+            return
+          }
 
-      if (selected.value.length === 0) {
-        selectedAll.value = false
-        return
-      }
+          if (selected.value.length === 0) {
+            selectedAll.value = false
+            return
+          }
 
-      if (selected.value.length !== 0 && selected.value.length !== itemsNumber.value) {
-        selectedAll.value = 'indeterminate'
-      }
-    })
+          if (selected.value.length > 0 && selected.value.length !== itemsNumber.value) {
+            selectedAll.value = 'indeterminate'
+          }
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
 
     onMounted(() => {
       if (
@@ -541,11 +535,9 @@ const CSmartTable = defineComponent({
       }
 
       selected.value = items.value.map((item) => {
-        delete item['_cellProps']
-        delete item['_props']
-        delete item['_selected']
-
-        return item
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { _cellProps, _props, _selected, ...rest } = item
+        return rest
       })
     }
 
@@ -738,7 +730,7 @@ const CSmartTable = defineComponent({
                           ...props.tableHeadProps,
                           columnFilter: props.columnFilter,
                           columnFilterValue: columnFilterState.value,
-                          columns: props.columns ? props.columns : columnNames.value,
+                          columns: props.columns ?? columnNames.value,
                           columnSorter: props.columnSorter,
                           items: items.value,
                           selectable: props.selectable,
@@ -820,6 +812,7 @@ const CSmartTable = defineComponent({
                         selectable: props.selectable,
                         selectAll: props.selectAll,
                         selectedAll: selectedAll.value,
+                        showGroups: false,
                         onSelectAllChecked: () => handleSelectAllChecked(),
                       }),
                     Array.isArray(props.footer) &&

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

@@ -3,8 +3,9 @@ import { defineComponent, h, PropType } from 'vue'
 import { CFormCheck } from '../form/'
 import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 
-import { getClickedColumnName, getTableDataCellProps, isObjectInArray } from './utils'
+import { isObjectInArray } from '../../utils'
 
+import { getClickedColumnName, getTableDataCellProps } from './utils'
 import type { Item } from './types'
 
 const CSmartTableBody = defineComponent({
@@ -43,7 +44,7 @@ const CSmartTableBody = defineComponent({
         },
         {
           default: () =>
-            props.currentItems.length
+            props.currentItems.length > 0
               ? props.currentItems.map((item: Item, trIndex) => [
                   h(
                     CTableRow,
@@ -85,7 +86,8 @@ const CSmartTableBody = defineComponent({
                           props.scopedSlots[colName] &&
                           typeof props.scopedSlots[colName] === 'function'
                             ? h(props.scopedSlots[colName], { item: item })
-                            : h(
+                            : typeof item[colName] !== 'undefined' &&
+                              h(
                                 CTableDataCell,
                                 {
                                   ...getTableDataCellProps(item, colName),