@coreui/vue-pro 4.7.0-alpha.1 → 4.8.0-next.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/dist/utils/isObjectInArray.d.ts

@@ -0,0 +1,2 @@
+declare const isObjectInArray: <T>(array: T[], item: T, ignore?: string[]) => boolean;
+export default isObjectInArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.7.0-alpha.1",
+  "version": "4.8.0-next.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.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.2.10",
     "date-fns": "^2.29.3",
-    "rollup": "^2.79.0",
+    "rollup": "^3.15.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.8.3",
-    "vue": "^3.2.39",
-    "vue-types": "^4.2.1"
+    "typescript": "^4.9.5",
+    "vue": "^3.2.47",
+    "vue-types": "^5.0.2"
   },
   "peerDependencies": {
     "@coreui/coreui-pro": "^4.3.4",

package/src/components/calendar/CCalendar.ts

@@ -16,7 +16,7 @@ import {
   isToday,
   isStartDate,
   isEndDate,
-} from '../../utils/calendar'
+} from './utils'
 
 const CCalendar = defineComponent({
   name: 'CCalendar',

package/src/{utils/calendar.ts → components/calendar/utils.ts}

@@ -4,7 +4,7 @@ export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
 export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
   d.toLocaleTimeString(locale, options)
 
-export const createGroupsInArray = (arr: any[], numberOfGroups: number) => {
+export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][] => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
   return new Array(numberOfGroups)
     .fill('')
@@ -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/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/date-range-picker/CDateRangePicker.ts

@@ -9,7 +9,7 @@ import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
-import { getLocalDateFromString } from '../../utils/calendar'
+import { getLocalDateFromString } from '../calendar/utils'
 
 import { Color } from '../props'
 

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,15 +81,11 @@ 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
+          'div',
           {
             style: {
               position: 'absolute',
@@ -81,10 +94,12 @@ const CElementCover = defineComponent({
               transform: 'translateX(-50%) translateY(-50%)',
             },
           },
-          h(CSpinner, {
-            variant: 'grow',
-            color: 'primary',
-          }),
+          slots.default
+            ? slots.default()
+            : 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/modal/CModal.ts

@@ -25,7 +25,6 @@ const CModal = defineComponent({
      */
     alignment: {
       default: 'top',
-      required: false,
       validator: (value: string) => {
         return ['top', 'center'].includes(value)
       },
@@ -33,12 +32,20 @@ const CModal = defineComponent({
     /**
      * Apply a backdrop on body while offcanvas is open.
      *
-     * @values 'static'
+     * @values boolean | 'static'
      */
     backdrop: {
       type: [Boolean, String],
       default: true,
-      require: false,
+      validator: (value: boolean | string) => {
+        if (typeof value == 'string') {
+          return ['static'].includes(value)
+        }
+        if (typeof value == 'boolean') {
+          return true
+        }
+        return false
+      },
     },
     /**
      * A string of all className you want applied to the modal content component.
@@ -46,7 +53,6 @@ const CModal = defineComponent({
     contentClassName: {
       type: String,
       default: undefined,
-      required: false,
     },
     /**
      * Set modal to covers the entire user viewport
@@ -56,7 +62,6 @@ const CModal = defineComponent({
     fullscreen: {
       type: [Boolean, String],
       default: undefined,
-      required: false,
       validator: (value: boolean | string) => {
         if (typeof value == 'string') {
           return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
@@ -73,14 +78,12 @@ const CModal = defineComponent({
     keyboard: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * Create a scrollable modal that allows scrolling the modal body.
      */
     scrollable: {
       type: Boolean,
-      required: false,
     },
     /**
      * Size the component small, large, or extra large.
@@ -90,7 +93,6 @@ const CModal = defineComponent({
     size: {
       type: String,
       default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['sm', 'lg', 'xl'].includes(value)
       },
@@ -101,7 +103,6 @@ const CModal = defineComponent({
     transition: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
@@ -109,7 +110,6 @@ const CModal = defineComponent({
     unmountOnClose: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * Toggle the visibility of alert component.

package/src/components/multi-select/CMultiSelect.ts

@@ -361,16 +361,6 @@ const CMultiSelect = defineComponent({
         : options.value
     }
 
-    // watch(
-    //   () => props.options,
-    //   (newValue, oldValue) => {
-    //     console.log(props.options)
-    //     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
-    //   },
-    // )
-
-
-
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       search.value = target.value.toLowerCase()

package/src/components/offcanvas/COffcanvas.ts

@@ -10,11 +10,21 @@ const COffcanvas = defineComponent({
   props: {
     /**
      * Apply a backdrop on body while offcanvas is open.
+     *
+     * @values boolean | 'static'
      */
     backdrop: {
-      type: Boolean,
+      type: [Boolean, String],
       default: true,
-      require: false,
+      validator: (value: boolean | string) => {
+        if (typeof value === 'string') {
+          return ['static'].includes(value)
+        }
+        if (typeof value === 'boolean') {
+          return true
+        }
+        return false
+      },
     },
     /**
      * Closes the offcanvas when escape key is pressed.
@@ -22,7 +32,6 @@ const COffcanvas = defineComponent({
     keyboard: {
       type: Boolean,
       default: true,
-      require: false,
     },
     /**
      * Components placement, there’s no default placement.
@@ -37,21 +46,36 @@ const COffcanvas = defineComponent({
         return ['start', 'end', 'top', 'bottom'].includes(value)
       },
     },
+    /**
+     * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+     *
+     * @values boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+     * @since 4.7.0
+     */
+    responsive: {
+      type: [Boolean, String],
+      default: true,
+      validator: (value: boolean | string) => {
+        if (typeof value === 'string') {
+          return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
+        }
+        if (typeof value === 'boolean') {
+          return true
+        }
+        return false
+      },
+    },
     /**
      * Allow body scrolling while offcanvas is open
      */
     scroll: {
       type: Boolean,
       default: false,
-      required: false,
     },
     /**
      * Toggle the visibility of offcanvas component.
      */
-    visible: {
-      type: Boolean,
-      require: false,
-    },
+    visible: Boolean,
   },
   emits: [
     /**
@@ -93,22 +117,21 @@ const COffcanvas = defineComponent({
       emit('show')
       executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
-        el.style.visibility = 'visible'
         el.classList.add('show')
       }, 1)
     }
+
     const handleAfterEnter = () => {
-      window.addEventListener('mousedown', handleMouseDown)
-      window.addEventListener('keyup', handleKeyUp)
+      offcanvasRef.value.focus()
     }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
-      window.removeEventListener('mousedown', handleMouseDown)
-      window.removeEventListener('keyup', handleKeyUp)
-      el.classList.remove('show')
+      el.classList.add('hiding')
     }
+
     const handleAfterLeave = (el: RendererElement) => {
-      el.style.visibility = 'hidden'
+      el.classList.remove('show', 'hiding')
     }
 
     const handleDismiss = () => {
@@ -116,21 +139,15 @@ const COffcanvas = defineComponent({
       emit('hide')
     }
 
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
-        if (event.key === 'Escape' && props.keyboard && props.backdrop) {
-          return handleDismiss()
-        }
+    const handleBackdropDismiss = () => {
+      if (props.backdrop !== 'static') {
+        handleDismiss()
       }
     }
 
-    const handleMouseDown = (event: Event) => {
-      window.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
-    }
-
-    const handleMouseUp = (event: Event) => {
-      if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
-        props.backdrop && handleDismiss()
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && props.keyboard) {
+        handleDismiss()
       }
     }
 
@@ -150,13 +167,17 @@ const COffcanvas = defineComponent({
               'div',
               {
                 class: [
-                  'offcanvas',
                   {
+                    [`offcanvas${
+                      typeof props.responsive !== 'boolean' ? '-' + props.responsive : ''
+                    }`]: props.responsive,
                     [`offcanvas-${props.placement}`]: props.placement,
                   },
                 ],
+                onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
                 ref: offcanvasRef,
                 role: 'dialog',
+                tabindex: -1,
               },
               slots.default && slots.default(),
             ),
@@ -166,6 +187,7 @@ const COffcanvas = defineComponent({
       props.backdrop &&
         h(CBackdrop, {
           class: 'offcanvas-backdrop',
+          onClick: handleBackdropDismiss,
           visible: visible.value,
         }),
     ]

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) => {