@coreui/vue-pro 4.7.0 → 4.8.0-next.0

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",
+  "version": "4.8.0-next.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,15 +35,15 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.2.7",
+    "@vue/test-utils": "^2.2.10",
     "date-fns": "^2.29.3",
-    "rollup": "^3.10.0",
+    "rollup": "^3.15.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.9.4",
-    "vue": "^3.2.45",
+    "typescript": "^4.9.5",
+    "vue": "^3.2.47",
     "vue-types": "^5.0.2"
   },
   "peerDependencies": {

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('')

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

@@ -84,23 +84,23 @@ const CElementCover = defineComponent({
           style: { ...coverStyles, ...customBoundaries.value },
           ref: elementCoverRef,
         },
-        slots.default
-          ? slots.default()
-          : h(
-              'div',
-              {
-                style: {
-                  position: 'absolute',
-                  top: '50%',
-                  left: '50%',
-                  transform: 'translateX(-50%) translateY(-50%)',
-                },
-              },
-              h(CSpinner, {
+        h(
+          'div',
+          {
+            style: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translateX(-50%) translateY(-50%)',
+            },
+          },
+          slots.default
+            ? slots.default()
+            : h(CSpinner, {
                 variant: 'grow',
                 color: 'primary',
               }),
-            ),
+        ),
       )
   },
 })

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,
         }),
     ]