@coreui/vue-pro 4.0.2 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.0.2",
+  "version": "4.1.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,23 +35,23 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.0"
+    "version_short": "4.1"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.10.2",
+    "@popperjs/core": "^2.11.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
     "@vue/test-utils": "^2.0.0-0",
-    "rollup": "^2.58.3",
+    "rollup": "^2.60.2",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.4.4",
-    "vue": "^3.2.20",
+    "typescript": "^4.5.2",
+    "vue": "^3.2.24",
     "vue-types": "^4.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^4.0.5",
-    "vue": "^3.2.20"
+    "@coreui/coreui-pro": "^4.1.0",
+    "vue": "^3.2.21"
   },
   "standard": {
     "ignore": [

package/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Loads and display CAccordionBody component renders correctly 1`] = `
 "<transition-stub class=\\"accordion-collapse\\">
-  <div class=\\"collapse\\" style=\\"display: none;\\">
+  <div class=\\"collapse\\">
     <div class=\\"accordion-body\\">Default slot</div>
   </div>
 </transition-stub>"

package/src/components/button/CButton.ts

@@ -91,6 +91,7 @@ export const CButton = defineComponent({
           ],
           disabled: props.disabled && props.component !== 'a',
           ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+          ...(props.component === 'a' && props.href && { href: props.href }),
         },
         slots.default && slots.default(),
       )

package/src/components/collapse/CCollapse.ts

@@ -1,8 +1,16 @@
-import { defineComponent, h, Transition, withDirectives, vShow, RendererElement } from 'vue'
+import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue'
+import { vVisible } from '../../directives/v-c-visible'
 
 const CCollapse = defineComponent({
   name: 'CCollapse',
   props: {
+    /**
+     * Set horizontal collapsing to transition the width instead of height.
+     */
+    horizontal: {
+      type: Boolean,
+      required: false,
+    },
     /**
      * Toggle the visibility of component.
      */
@@ -22,46 +30,68 @@ const CCollapse = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const handleBeforeEnter = (el: RendererElement) => {
-      el.classList.remove('collapse')
-      el.classList.add('collapsing')
+    const collapsing = ref(false)
+    const show = ref(props.visible)
+
+    const handleBeforeEnter = () => {
+      collapsing.value = true
     }
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       el.addEventListener('transitionend', () => {
-        el.classList.add('collapse', 'show')
         done()
       })
-      el.style.height = `${el.scrollHeight}px`
+      setTimeout(() => {
+        if (props.horizontal) {
+          el.style.width = `${el.scrollWidth}px`
+          return
+        }
+        el.style.height = `${el.scrollHeight}px`
+      }, 1)
     }
+
     const handleAfterEnter = (el: RendererElement) => {
-      el.classList.remove('collapsing')
-      el.style.removeProperty('height')
+      show.value = true
+      collapsing.value = false
+      props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height')
     }
+
     const handleBeforeLeave = (el: RendererElement) => {
-      el.classList.add('show')
+      collapsing.value = true
+      show.value = false
+      if (props.horizontal) {
+        el.style.width = `${el.scrollWidth}px`
+        return
+      }
       el.style.height = `${el.scrollHeight}px`
     }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
       emit('hide')
-      el.classList.remove('collapse', 'show')
-      el.classList.add('collapsing')
       el.addEventListener('transitionend', () => {
         done()
       })
-      el.style.height = '0px'
+      setTimeout(() => {
+        if (props.horizontal) {
+          el.style.width = '0px'
+          return
+        }
+        el.style.height = '0px'
+      }, 1)
     }
+
     const handleAfterLeave = (el: RendererElement) => {
-      el.classList.remove('collapsing')
-      el.classList.add('collapse')
+      collapsing.value = false
+      props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height')
     }
 
     return () =>
       h(
         Transition,
         {
-          name: 'fade',
-          onBeforeEnter: (el) => handleBeforeEnter(el),
+          css: false,
+          onBeforeEnter: () => handleBeforeEnter(),
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: (el) => handleAfterEnter(el),
           onBeforeLeave: (el) => handleBeforeLeave(el),
@@ -74,15 +104,13 @@ const CCollapse = defineComponent({
               'div',
               {
                 class: [
-                  'collapse',
-                  {
-                    show: props.visible,
-                  },
+                  collapsing.value ? 'collapsing' : 'collapse',
+                  { 'collapse-horizontal': props.horizontal, show: show.value },
                 ],
               },
               slots.default && slots.default(),
             ),
-            [[vShow, props.visible]],
+            [[vVisible, props.visible]],
           ),
       )
   },

package/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Loads and display CCollapse component renders correctly 1`] = `
 "<transition-stub>
-  <div class=\\"collapse\\" style=\\"display: none;\\">Default slot</div>
+  <div class=\\"collapse\\">Default slot</div>
 </transition-stub>"
 `;
 

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

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CElementCover } from './CElementCover'
+
+const CElementCoverPlugin = {
+  install: (app: App): void => {
+    app.component(CElementCover.name, CElementCover)
+  },
+}
+
+export { CElementCoverPlugin, CElementCover }

package/src/components/form/CFormCheck.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, onMounted, watch, ref } from 'vue'
+import { defineComponent, h } from 'vue'
 import { shape } from 'vue-types'
 
 import { Color, Shape } from '../props'
@@ -57,6 +57,10 @@ const CFormCheck = defineComponent({
       default: undefined,
       required: false,
     },
+    /**
+     * Input Checkbox indeterminate Property
+     */
+    indeterminate: Boolean,
     /**
      * Group checkboxes or radios on the same horizontal row by adding.
      */
@@ -116,31 +120,15 @@ const CFormCheck = defineComponent({
     'update:modelValue',
   ],
   setup(props, { attrs, emit, slots }) {
-    const checked = ref(attrs.checked)
-
-    onMounted(() => {
-      if (props.modelValue && typeof props.modelValue === 'boolean') {
-        console.log(props.modelValue)
-      }
-    })
-
-    watch(
-      () => props.modelValue,
-      () => {
-        if (typeof props.modelValue === 'boolean') checked.value = props.modelValue
-      },
-    )
-
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      emit('change', target.checked)
+      emit('change', event)
       emit('update:modelValue', target.checked)
     }
 
     const formControl = () => {
       return h('input', {
-        ...attrs,
-        checked: checked.value,
+        checked: props.modelValue,
         class: [
           props.button ? 'btn-check' : 'form-check-input',
           {
@@ -149,8 +137,10 @@ const CFormCheck = defineComponent({
           },
         ],
         id: props.id,
+        indeterminate: props.indeterminate,
         onChange: (event: InputEvent) => handleChange(event),
         type: props.type,
+        ...attrs,
       })
     }
     const formLabel = () => {

package/src/components/form/CFormInput.ts

@@ -87,12 +87,12 @@ const CFormInput = defineComponent({
   setup(props, { emit, slots }) {
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      emit('change', target.value)
+      emit('change', event)
       emit('update:modelValue', target.value)
     }
     const handleInput = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      emit('input', target.value)
+      emit('input', event)
       emit('update:modelValue', target.value)
     }
 
@@ -100,9 +100,6 @@ const CFormInput = defineComponent({
       h(
         'input',
         {
-          type: props.type,
-          disabled: props.disabled,
-          readonly: props.readonly,
           class: [
             props.plainText ? 'form-control-plaintext' : 'form-control',
             {
@@ -112,8 +109,11 @@ const CFormInput = defineComponent({
               'is-valid': props.valid,
             },
           ],
+          disabled: props.disabled,
           onChange: (event: InputEvent) => handleChange(event),
           onInput: (event: InputEvent) => handleInput(event),
+          readonly: props.readonly,
+          type: props.type,
           value: props.modelValue,
         },
         slots.default && slots.default(),

package/src/components/form/CFormRange.ts

@@ -74,7 +74,7 @@ const CFormRange = defineComponent({
   setup(props, { emit, slots }) {
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      emit('change', target.value)
+      emit('change', event)
       emit('update:modelValue', target.value)
     }
 
@@ -90,7 +90,7 @@ const CFormRange = defineComponent({
           steps: props.steps,
           readonly: props.readonly,
           type: 'range',
-          value: props.modelValue || props.value,
+          value: props.modelValue,
         },
         slots.default && slots.default(),
       )

package/src/components/form/CFormSelect.ts

@@ -77,14 +77,11 @@ const CFormSelect = defineComponent({
   setup(props, { emit, slots }) {
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLSelectElement
-
       const selected = Array.from(target.options)
         .filter((option) => option.selected)
         .map((option) => option.value)
-
       const value = target.multiple ? selected : selected[0]
-
-      emit('change', value)
+      emit('change', event)
       emit('update:modelValue', value)
     }
 
@@ -96,6 +93,8 @@ const CFormSelect = defineComponent({
             'form-select',
             {
               [`form-select-${props.size}`]: props.size,
+              'is-invalid': props.invalid,
+              'is-valid': props.valid,
             },
           ],
           onChange: (event: InputEvent) => handleChange(event),

package/src/components/form/CFormSwitch.ts

@@ -96,7 +96,7 @@ const CFormSwitch = defineComponent({
 
     const handleChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      emit('change', target.checked)
+      emit('change', event)
       emit('update:modelValue', target.checked)
     }
 

package/src/components/form/CFormTextarea.ts

@@ -62,14 +62,9 @@ const CFormTextarea = defineComponent({
     'update:modelValue',
   ],
   setup(props, { emit, slots }) {
-    const handleChange = (event: InputEvent) => {
-      const target = event.target as HTMLInputElement
-      emit('change', target.value)
-      emit('update:modelValue', target.value)
-    }
     const handleInput = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
-      emit('input', target.value)
+      emit('input', event)
       emit('update:modelValue', target.value)
     }
 
@@ -86,7 +81,6 @@ const CFormTextarea = defineComponent({
               'is-valid': props.valid,
             },
           ],
-          onChange: (event: InputEvent) => handleChange(event),
           onInput: (event: InputEvent) => handleInput(event),
           value: props.modelValue,
         },

package/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CFormInput component renders correctly 1`] = `"<input type=\\"color\\" disabled=\\"\\" readonly=\\"\\" class=\\"form-control form-control-color form-control-lg is-invalid is-valid\\">"`;
+exports[`Customize (two) CFormInput component renders correctly 1`] = `"<input class=\\"form-control form-control-color form-control-lg is-invalid is-valid\\" disabled=\\"\\" readonly=\\"\\" type=\\"color\\">"`;
 
-exports[`Customize CFormInput component renders correctly 1`] = `"<input type=\\"color\\" disabled=\\"\\" readonly=\\"\\" class=\\"form-control-plaintext form-control-color form-control-lg is-invalid is-valid\\">"`;
+exports[`Customize CFormInput component renders correctly 1`] = `"<input class=\\"form-control-plaintext form-control-color form-control-lg is-invalid is-valid\\" disabled=\\"\\" readonly=\\"\\" type=\\"color\\">"`;
 
-exports[`Loads and display CFormInput component renders correctly 1`] = `"<input type=\\"text\\" class=\\"form-control\\">"`;
+exports[`Loads and display CFormInput component renders correctly 1`] = `"<input class=\\"form-control\\" type=\\"text\\">"`;

package/src/components/grid/CCol.ts

@@ -84,7 +84,7 @@ const CCol = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
@@ -93,29 +93,29 @@ const CCol = defineComponent({
 
       if (breakpoint) {
         if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-          repsonsiveCLassNames.push(`col${infix}-${breakpoint}`)
+          repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
         }
 
         if (typeof breakpoint === 'boolean') {
-          repsonsiveCLassNames.push(`col${infix}`)
+          repsonsiveClassNames.push(`col${infix}`)
         }
       }
 
       if (breakpoint && typeof breakpoint === 'object') {
         if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-          repsonsiveCLassNames.push(`col${infix}-${breakpoint.span}`)
+          repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`)
         }
 
         if (typeof breakpoint.span === 'boolean') {
-          repsonsiveCLassNames.push(`col${infix}`)
+          repsonsiveClassNames.push(`col${infix}`)
         }
 
         if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-          repsonsiveCLassNames.push(`order${infix}-${breakpoint.order}`)
+          repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`)
         }
 
         if (typeof breakpoint.offset === 'number') {
-          repsonsiveCLassNames.push(`offset${infix}-${breakpoint.offset}`)
+          repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`)
         }
       }
     })
@@ -124,7 +124,7 @@ const CCol = defineComponent({
       h(
         'div',
         {
-          class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col'],
+          class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'col'],
         },
         slots.default && slots.default(),
       )

package/src/components/grid/CContainer.ts

@@ -56,18 +56,18 @@ const CContainer = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
 
-      breakpoint && repsonsiveCLassNames.push(`container-${bp}`)
+      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
     })
     return () =>
       h(
         'div',
         {
-          class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container'],
+          class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'container'],
         },
         slots.default && slots.default(),
       )

package/src/components/grid/CRow.ts

@@ -81,7 +81,7 @@ const CRow = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = props[bp]
@@ -89,16 +89,16 @@ const CRow = defineComponent({
 
       if (typeof breakpoint === 'object') {
         if (breakpoint.cols) {
-          repsonsiveCLassNames.push(`row-cols${infix}-${breakpoint.cols}`)
+          repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`)
         }
         if (typeof breakpoint.gutter === 'number') {
-          repsonsiveCLassNames.push(`g${infix}-${breakpoint.gutter}`)
+          repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`)
         }
         if (typeof breakpoint.gutterX === 'number') {
-          repsonsiveCLassNames.push(`gx${infix}-${breakpoint.gutterX}`)
+          repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`)
         }
         if (typeof breakpoint.gutterY === 'number') {
-          repsonsiveCLassNames.push(`gy${infix}-${breakpoint.gutterY}`)
+          repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`)
         }
       }
     })
@@ -107,7 +107,7 @@ const CRow = defineComponent({
       h(
         'div',
         {
-          class: ['row', repsonsiveCLassNames],
+          class: ['row', repsonsiveClassNames],
         },
         slots.default && slots.default(),
       )

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './carousel'
 export * from './close-button'
 export * from './collapse'
 export * from './dropdown'
+export * from './element-cover'
 export * from './footer'
 export * from './form'
 export * from './grid'
@@ -26,6 +27,7 @@ export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
 export * from './pagination'
+export * from './placeholder'
 export * from './progress'
 export * from './popover'
 export * from './sidebar'

package/src/components/modal/CModal.ts

@@ -133,7 +133,7 @@ const CModal = defineComponent({
       emit('show')
     }
     const handleAfterEnter = () => {
-      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
@@ -144,7 +144,7 @@ const CModal = defineComponent({
       el.classList.remove('show')
     }
     const handleAfterLeave = (el: RendererElement) => {
-      window.removeEventListener('click', handleClickOutside)
+      window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.style.display = 'none'
     }
@@ -168,7 +168,12 @@ const CModal = defineComponent({
         }
       }
     }
-    const handleClickOutside = (event: Event) => {
+
+    const handleMouseDown = (event: Event) => {
+      window.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
+    }
+
+    const handleMouseUp = (event: Event) => {
       if (modalContentRef.value && !modalContentRef.value.contains(event.target as HTMLElement)) {
         if (props.backdrop !== 'static') {
           handleDismiss()

package/src/components/offcanvas/COffcanvas.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h, ref, RendererElement, Transition, watch } from 'vue'
+import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
 import { CBackdrop } from '../backdrop'
+import { vVisible } from '../../directives/v-c-visible'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -96,19 +97,20 @@ const COffcanvas = defineComponent({
       }, 1)
     }
     const handleAfterEnter = () => {
-      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('mousedown', handleMouseDown)
+      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
       el.addEventListener('transitionend', () => {
         done()
       })
+      window.removeEventListener('mousedown', handleMouseDown)
+      window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')
     }
     const handleAfterLeave = (el: RendererElement) => {
       el.style.visibility = 'hidden'
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyUp)
     }
 
     const handleDismiss = () => {
@@ -123,7 +125,12 @@ const COffcanvas = defineComponent({
         }
       }
     }
-    const handleClickOutside = (event: Event) => {
+
+    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()
       }
@@ -133,31 +140,34 @@ const COffcanvas = defineComponent({
       h(
         Transition,
         {
+          css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
           onLeave: (el, done) => handleLeave(el, done),
           onAfterLeave: (el) => handleAfterLeave(el),
         },
         () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'offcanvas',
-                {
-                  [`offcanvas-${props.placement}`]: props.placement,
-                },
-              ],
-              ref: offcanvasRef,
-              role: 'dialog',
-            },
-            slots.default && slots.default(),
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'offcanvas',
+                  {
+                    [`offcanvas-${props.placement}`]: props.placement,
+                  },
+                ],
+                ref: offcanvasRef,
+                role: 'dialog',
+              },
+              slots.default && slots.default(),
+            ),
+            [[vVisible, props.visible]],
           ),
       ),
       props.backdrop &&
         h(CBackdrop, {
-          class: 'modal-backdrop',
+          class: 'offcanvas-backdrop',
           visible: visible.value,
         }),
     ]

package/src/components/offcanvas/__tests__/COffcanvas.spec.ts

@@ -47,6 +47,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.text()).toContain('Default slot')
     expect(customWrapper.find('div').classes('offcanvas')).toBe(true)
     expect(customWrapper.find('div').classes('offcanvas-bottom')).toBe(true)
-    expect(customWrapper.find('.modal-backdrop').classes('modal-backdrop')).toBe(true)
+    expect(customWrapper.find('.offcanvas-backdrop').classes('offcanvas-backdrop')).toBe(true)
   })
 })