@coreui/vue-pro 4.7.0-alpha.1 → 4.7.0

package/dist/utils/calendar.d.ts

@@ -11,8 +11,8 @@ export declare const getMonthDetails: (year: number, month: number, firstDayOfWe
     date: Date;
     month: string;
 }[][];
-export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][]) => boolean;
-export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][]) => boolean | undefined;
+export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean;
+export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean | undefined;
 export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
 import getNextSibling from './getNextSibling';
 import getPreviousSibling from './getPreviousSibling';
-import isVisible from './isVisible';
-export { getNextSibling, getPreviousSibling, isVisible };
+import isInViewport from './isInViewport';
+export { getNextSibling, getPreviousSibling, isInViewport };

package/dist/utils/isInViewport.d.ts

@@ -0,0 +1,2 @@
+declare const isInViewport: (element: HTMLElement) => boolean;
+export default isInViewport;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.7.0-alpha.1",
+  "version": "4.7.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -31,24 +31,20 @@
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c -w"
-  },
-  "config": {
-    "version_short": "4.6"
+    "build": "rollup -c --bundleConfigAsCjs"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.5.0",
-    "@vue/test-utils": "^2.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.2.7",
     "date-fns": "^2.29.3",
-    "rollup": "^2.79.0",
+    "rollup": "^3.10.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.8.3",
-    "vue": "^3.2.39",
-    "vue-types": "^4.2.1"
+    "typescript": "^4.9.4",
+    "vue": "^3.2.45",
+    "vue-types": "^5.0.2"
   },
   "peerDependencies": {
     "@coreui/coreui-pro": "^4.3.4",

package/src/components/carousel/CCarousel.ts

@@ -11,7 +11,7 @@ import {
   watch,
 } from 'vue'
 
-import { isVisible } from './../../utils'
+import { isInViewport } from './../../utils'
 
 const CCarousel = defineComponent({
   name: 'CCarousel',
@@ -133,7 +133,7 @@ const CCarousel = defineComponent({
     const nextItemWhenVisible = () => {
       // Don't call next when the page isn't visible
       // or the carousel or its parent isn't visible
-      if (!document.hidden && isVisible(carouselRef.value)) {
+      if (!document.hidden && isInViewport(carouselRef.value)) {
         handleControlClick('next')
       }
     }
@@ -156,7 +156,7 @@ const CCarousel = defineComponent({
     }
 
     const handleScroll = () => {
-      if (!document.hidden && isVisible(carouselRef.value)) {
+      if (!document.hidden && isInViewport(carouselRef.value)) {
         visible.value = true
       } else {
         visible.value = false

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

@@ -1,4 +1,4 @@
-import { defineComponent, h, onMounted, nextTick, ref, Ref } from 'vue'
+import { defineComponent, h, onMounted, nextTick, ref, PropType, Ref } from 'vue'
 import { CSpinner } from '../spinner'
 
 const CElementCover = defineComponent({
@@ -11,11 +11,7 @@ const CElementCover = defineComponent({
      *
      * @type {sides: string[], query: string}[]
      */
-    boundaries: {
-      // TODO: check if this is correct, TJ
-      type: Array,
-      require: true,
-    },
+    boundaries: Array as PropType<{ sides: string[]; query: string }[]>,
     /**
      * Opacity of the cover. [docs]
      *
@@ -23,30 +19,38 @@ const CElementCover = defineComponent({
      */
     opacity: {
       type: Number,
-      require: false,
+      default: 0.4,
     },
   },
-  setup(props) {
-    let containerCoords = {}
-    const elementRef = ref() as Ref<HTMLElement>
+  /**
+   * Location for custom content.
+   *
+   * @slot default
+   */
+  setup(props, { slots }) {
+    const elementCoverRef = ref() as Ref<HTMLElement>
+    const customBoundaries = ref({})
 
     const getCustomBoundaries = () => {
-      if (!props.boundaries || elementRef === null) {
+      if (!props.boundaries || elementCoverRef === null) {
         return {}
       }
-      const parent = elementRef.value.parentElement
+
+      const parent = elementCoverRef.value.parentElement
       if (!parent) {
         return {}
       }
+
       const parentCoords = parent.getBoundingClientRect()
       const customBoundaries = {}
-      props.boundaries.forEach((value: any) => {
-        const element = parent.querySelector(value.query)
-        if (!element || !value.sides) {
+      props.boundaries.forEach(({ sides, query }) => {
+        const element = parent.querySelector(query)
+        if (!element || !sides) {
           return
         }
+
         const coords = element.getBoundingClientRect()
-        value.sides.forEach((side: string) => {
+        sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
           customBoundaries[side] = `${sideMargin}px`
         })
@@ -54,9 +58,22 @@ const CElementCover = defineComponent({
       return customBoundaries
     }
 
-    onMounted(function () {
-      nextTick(function () {
-        containerCoords = getCustomBoundaries()
+    const containerCoords = {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    }
+
+    const coverStyles = {
+      ...containerCoords,
+      position: 'absolute',
+      'background-color': `rgba(255,255,255,${props.opacity})`,
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        customBoundaries.value = getCustomBoundaries()
       })
     })
 
@@ -64,28 +81,26 @@ const CElementCover = defineComponent({
       h(
         'div',
         {
-          style: {
-            ...containerCoords,
-            position: 'absolute',
-            'background-color': `rgb(255,255,255,${props.opacity})`,
-          },
-          ref: elementRef,
+          style: { ...coverStyles, ...customBoundaries.value },
+          ref: elementCoverRef,
         },
-        h(
-          'div', // TODO: use slot to override this
-          {
-            style: {
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translateX(-50%) translateY(-50%)',
-            },
-          },
-          h(CSpinner, {
-            variant: 'grow',
-            color: 'primary',
-          }),
-        ),
+        slots.default
+          ? slots.default()
+          : h(
+              'div',
+              {
+                style: {
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translateX(-50%) translateY(-50%)',
+                },
+              },
+              h(CSpinner, {
+                variant: 'grow',
+                color: 'primary',
+              }),
+            ),
       )
   },
 })

package/src/components/form/CFormControlWrapper.ts

@@ -41,6 +41,30 @@ const CFormControlWrapper = defineComponent({
     },
   },
   setup(props, { slots }) {
+    const formControlValidation = () =>
+      h(
+        CFormControlValidation,
+        {
+          describedby: props.describedby,
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          floatingLabel: props.floatingLabel,
+          invalid: props.invalid,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
+        },
+        {
+          ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
+          ...(slots.feedbackInvalid && {
+            feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+          }),
+          ...(slots.feedbackValid && {
+            feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+          }),
+        },
+      )
+
     return () =>
       props.floatingLabel
         ? h(CFormFloating, () => [
@@ -54,6 +78,17 @@ const CFormControlWrapper = defineComponent({
                 default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
               },
             ),
+            (props.text || slots.text) &&
+              h(
+                CFormText,
+                {
+                  id: props.describedby,
+                },
+                {
+                  default: () => (slots.text && slots.text()) || props.text,
+                },
+              ),
+            formControlValidation(),
           ])
         : [
             (props.label || slots.label) &&
@@ -77,28 +112,7 @@ const CFormControlWrapper = defineComponent({
                   default: () => (slots.text && slots.text()) || props.text,
                 },
               ),
-            h(
-              CFormControlValidation,
-              {
-                describedby: props.describedby,
-                feedback: props.feedback,
-                feedbackInvalid: props.feedbackInvalid,
-                feedbackValid: props.feedbackValid,
-                floatingLabel: props.floatingLabel,
-                invalid: props.invalid,
-                tooltipFeedback: props.tooltipFeedback,
-                valid: props.valid,
-              },
-              {
-                ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
-                ...(slots.feedbackInvalid && {
-                  feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
-                }),
-                ...(slots.feedbackValid && {
-                  feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
-                }),
-              },
-            ),
+            formControlValidation(),
           ]
   },
 })

package/src/components/sidebar/CSidebar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { CBackdrop } from '../backdrop'
 
-import { isVisible } from './../../utils'
+import { isInViewport } from './../../utils'
 
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
@@ -111,7 +111,7 @@ const CSidebar = defineComponent({
 
     onMounted(() => {
       mobile.value = isOnMobile(sidebarRef.value)
-      inViewport.value = isVisible(sidebarRef.value)
+      inViewport.value = isInViewport(sidebarRef.value)
 
       window.addEventListener('resize', () => handleResize())
       window.addEventListener('mouseup', handleClickOutside)
@@ -119,7 +119,7 @@ const CSidebar = defineComponent({
 
       sidebarRef.value.addEventListener('mouseup', handleOnClick)
       sidebarRef.value.addEventListener('transitionend', () => {
-        inViewport.value = isVisible(sidebarRef.value)
+        inViewport.value = isInViewport(sidebarRef.value)
       })
     })
 
@@ -130,7 +130,7 @@ const CSidebar = defineComponent({
 
       sidebarRef.value.removeEventListener('mouseup', handleOnClick)
       sidebarRef.value.removeEventListener('transitionend', () => {
-        inViewport.value = isVisible(sidebarRef.value)
+        inViewport.value = isInViewport(sidebarRef.value)
       })
     })
 
@@ -141,7 +141,7 @@ const CSidebar = defineComponent({
 
     const handleResize = () => {
       mobile.value = isOnMobile(sidebarRef.value)
-      inViewport.value = isVisible(sidebarRef.value)
+      inViewport.value = isInViewport(sidebarRef.value)
     }
 
     const handleKeyup = (event: Event) => {

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

@@ -3,7 +3,7 @@ import { computed, defineComponent, h, reactive, ref, PropType, watch, onMounted
 import { CElementCover } from '../element-cover/CElementCover'
 import { CSmartPagination } from '../smart-pagination/CSmartPagination'
 
-import { CTable } from '../table/CTable'
+import { CTable, CTableDataCell, CTableFoot, CTableRow } from '../table/'
 
 import { CSmartTableBody } from './CSmartTableBody'
 import { CSmartTableHead } from './CSmartTableHead'
@@ -21,6 +21,7 @@ import {
   ColumnFilterValue,
   Item,
   ItemsPerPageSelect,
+  FooterItem,
   Pagination,
   Sorter,
   SorterValue,
@@ -87,7 +88,7 @@ const CSmartTable = defineComponent({
      * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      */
     columns: {
-      type: Array as PropType<Column[] | string[]>,
+      type: Array as PropType<(Column | string)[]>,
       required: false,
     },
     /**
@@ -103,10 +104,16 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Displays table footer, which mirrors table header. (without column filter).
+     * If `true` Displays table footer, which mirrors table header. (without column filter).
+     * Or Array of objects or strings, where each element represents one cell in the table footer.
+     *
+     * Example items:
+     * `['FooterCell', 'FooterCell', 'FooterCell']`
+     * or
+     * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
      */
     footer: {
-      type: Boolean,
+      type: [Boolean, Array] as PropType<boolean | (FooterItem | string)[]>,
       required: false,
     },
     /**
@@ -755,7 +762,8 @@ const CSmartTable = defineComponent({
                       clickableRows: props.clickableRows,
                       ...props.tableBodyProps,
                     }),
-                    props.footer &&
+                    typeof props.footer === 'boolean' &&
+                      props.footer &&
                       h(CSmartTableHead, {
                         component: 'footer',
                         ...props.tableFootProps,
@@ -766,13 +774,45 @@ const CSmartTable = defineComponent({
                         selectAll: selectedAll.value,
                         onSelectAllChecked: () => handleSelectAllChecked(),
                       }),
+                    Array.isArray(props.footer) &&
+                      h(
+                        CTableFoot,
+                        {
+                          ...props.tableFootProps,
+                        },
+                        {
+                          default: () =>
+                            h(
+                              CTableRow,
+                              {},
+                              {
+                                default: () => [
+                                  Array.isArray(props.footer) &&
+                                    props.footer.map((item: FooterItem | string) =>
+                                      h(
+                                        CTableDataCell,
+                                        {
+                                          ...(typeof item === 'object' &&
+                                            item._props && { ...item._props }),
+                                        },
+                                        {
+                                          default: () =>
+                                            typeof item === 'object' ? item.label : item,
+                                        },
+                                      ),
+                                    ),
+                                ],
+                              },
+                            ),
+                        },
+                      ),
                   ],
                 },
               ),
               props.loading &&
                 h(CElementCover, {
                   boundaries: [
-                    { sides: ['top'], query: 'td' },
+                    { sides: ['top'], query: 'tbody' },
                     { sides: ['bottom'], query: 'tbody' },
                   ],
                 }),

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

@@ -41,7 +41,7 @@ const CSmartTableHead = defineComponent({
       require: false,
     },
     columns: {
-      type: Array as PropType<Column[] | string[]>,
+      type: Array as PropType<(Column | string)[]>,
       default: () => [],
       required: false,
     },

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

@@ -25,6 +25,12 @@ export interface ColumnFilterValue {
   [key: string]: number | string | any
 }
 
+export type FooterItem = {
+  label?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _props?: any
+}
+
 export type Item = {
   [key: string]: number | string | any
   _id: number

package/src/components/table/CTable.ts

@@ -117,7 +117,7 @@ const CTable = defineComponent({
      * @since 4.5.0
      */
     columns: {
-      type: Array as PropType<Column[] | string[]>,
+      type: Array as PropType<(Column | string)[]>,
       required: false,
     },
     /**
@@ -137,8 +137,7 @@ const CTable = defineComponent({
      * @since 4.5.0
      */
     footer: {
-      type: Array as PropType<FooterItem[]>,
-      default: () => [],
+      type: Array as PropType<(FooterItem | string)[]>,
       required: false,
     },
     /**
@@ -158,7 +157,6 @@ const CTable = defineComponent({
      */
     items: {
       type: Array as PropType<Item[]>,
-      default: () => [],
       required: false,
     },
     responsive: {
@@ -228,7 +226,7 @@ const CTable = defineComponent({
             if (typeof column === 'object') return column.key
             else return column
           })
-        : Object.keys(props.items[0] || {}).filter((el) => el.charAt(0) !== '_'),
+        : Object.keys((props.items && props.items[0]) || {}).filter((el) => el.charAt(0) !== '_'),
     )
 
     const table = () =>
@@ -301,34 +299,37 @@ const CTable = defineComponent({
                 {},
                 {
                   default: () => [
-                    props.items.map((item: Item) =>
-                      h(
-                        CTableRow,
-                        {
-                          ...(item._props && { ...item._props }),
-                        },
-                        {
-                          default: () => [
-                            rawColumnNames.value.map(
-                              (colName: string) =>
-                                item[colName] &&
-                                h(
-                                  CTableDataCell,
-                                  {
-                                    ...(item._cellProps &&
-                                      item._cellProps['all'] && { ...item._cellProps['all'] }),
-                                    ...(item._cellProps &&
-                                      item._cellProps[colName] && { ...item._cellProps[colName] }),
-                                  },
-                                  {
-                                    default: () => item[colName],
-                                  },
-                                ),
-                            ),
-                          ],
-                        },
+                    props.items &&
+                      props.items.map((item: Item) =>
+                        h(
+                          CTableRow,
+                          {
+                            ...(item._props && { ...item._props }),
+                          },
+                          {
+                            default: () => [
+                              rawColumnNames.value.map(
+                                (colName: string) =>
+                                  item[colName] &&
+                                  h(
+                                    CTableDataCell,
+                                    {
+                                      ...(item._cellProps &&
+                                        item._cellProps['all'] && { ...item._cellProps['all'] }),
+                                      ...(item._cellProps &&
+                                        item._cellProps[colName] && {
+                                          ...item._cellProps[colName],
+                                        }),
+                                    },
+                                    {
+                                      default: () => item[colName],
+                                    },
+                                  ),
+                              ),
+                            ],
+                          },
+                        ),
                       ),
-                    ),
                   ],
                 },
               ),
@@ -346,17 +347,19 @@ const CTable = defineComponent({
                       {},
                       {
                         default: () => [
-                          props.footer.map((item: FooterItem | string) =>
-                            h(
-                              CTableDataCell,
-                              {
-                                ...(typeof item === 'object' && item._props && { ...item._props }),
-                              },
-                              {
-                                default: () => (typeof item === 'object' ? item.label : item),
-                              },
+                          props.footer &&
+                            props.footer.map((item: FooterItem | string) =>
+                              h(
+                                CTableDataCell,
+                                {
+                                  ...(typeof item === 'object' &&
+                                    item._props && { ...item._props }),
+                                },
+                                {
+                                  default: () => (typeof item === 'object' ? item.label : item),
+                                },
+                              ),
                             ),
-                          ),
                         ],
                       },
                     ),

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

@@ -319,7 +319,7 @@ const CTimePicker = defineComponent({
       }
 
       if (set === 'hours') {
-        if ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) {
+        if ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm === true) {
           _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
         } else {
           _date.setHours(parseInt(value))
@@ -354,7 +354,8 @@ const CTimePicker = defineComponent({
           value: date.value
             ? date.value.toLocaleTimeString(props.locale, {
                 hour12:
-                  (props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm ? true : false,
+                  (props.ampm === 'auto' && isAmPm(props.locale)) ||
+                  (props.ampm === 'boolean' && props.ampm),
                 ...(!props.seconds && { timeStyle: 'short' }),
               })
             : '',
@@ -447,7 +448,7 @@ const CTimePicker = defineComponent({
           onClick: (index: number) => handleTimeChange('seconds', index.toString()),
           selected: getSelectedSeconds(date.value),
         }),
-      ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) &&
+      ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm === true) &&
         h(CTimePickerRollCol, {
           elements: [
             { value: 'am', label: 'AM' },

package/src/utils/calendar.ts

@@ -164,7 +164,7 @@ export const getMonthDetails = (year: number, month: number, firstDayOfWeek: num
 export const isDisableDateInRange = (
   startDate?: Date | null,
   endDate?: Date | null,
-  dates?: Date[] | Date[][],
+  dates?: Date[] | Date[][] | (Date | Date[])[],
 ) => {
   if (startDate && endDate) {
     const date = new Date(startDate)
@@ -188,7 +188,7 @@ export const isDateDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  dates?: Date[] | Date[][],
+  dates?: Date[] | Date[][] | (Date | Date[])[],
 ) => {
   let disabled
   if (dates) {

package/src/utils/index.ts

@@ -1,5 +1,5 @@
 import getNextSibling from './getNextSibling'
 import getPreviousSibling from './getPreviousSibling'
-import isVisible from './isVisible'
+import isInViewport from './isInViewport'
 
-export { getNextSibling, getPreviousSibling, isVisible }
+export { getNextSibling, getPreviousSibling, isInViewport }