@coreui/vue-pro 4.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -31,26 +31,27 @@
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "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.1",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.4.4",
-    "vue": "^3.2.20",
+    "typescript": "^4.5.2",
+    "vue": "^3.2.23",
     "vue-types": "^4.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^4.0.5",
-    "vue": "^3.2.20"
+    "@coreui/coreui": "^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

@@ -74,12 +74,11 @@ export const CButton = defineComponent({
       },
     },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots }) {
     return () =>
       h(
         props.component,
         {
-          ...attrs,
           class: [
             'btn',
             props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
@@ -92,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/card/CCardImage.ts

@@ -25,13 +25,12 @@ const CCardImage = defineComponent({
       },
     },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots }) {
     return () =>
       h(
         props.component,
         {
-          ...attrs,
-          class: [props.orientation ? `card-img-${props.orientation}` : 'card-img'],
+          class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
         },
         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

@@ -6,6 +6,7 @@ import { CFormLabel } from './CFormLabel'
 
 const CFormCheck = defineComponent({
   name: 'CFormCheck',
+  inheritAttrs: false,
   props: {
     /**
      * Create button-like checkboxes and radio buttons.
@@ -56,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.
      */
@@ -78,6 +83,14 @@ const CFormCheck = defineComponent({
       default: undefined,
       required: false,
     },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: {
+      type: [Boolean, String],
+      value: undefined,
+      required: false,
+    },
     /**
      * Specifies the type of component.
      *
@@ -96,10 +109,26 @@ const CFormCheck = defineComponent({
       required: false,
     },
   },
-  setup(props, { slots, attrs }) {
+  emits: [
+    /**
+     * Event occurs when the checked value has been changed.
+     */
+    'change',
+    /**
+     * Emit the new value whenever there’s a change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { attrs, emit, slots }) {
+    const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('change', event)
+      emit('update:modelValue', target.checked)
+    }
+
     const formControl = () => {
       return h('input', {
-        ...attrs,
+        checked: props.modelValue,
         class: [
           props.button ? 'btn-check' : 'form-check-input',
           {
@@ -108,7 +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

@@ -17,6 +17,14 @@ const CFormInput = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: {
+      type: String,
+      default: undefined,
+      require: false,
+    },
     /**
      * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
      */
@@ -62,15 +70,36 @@ const CFormInput = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs, slots }) {
+  emits: [
+    /**
+     * Event occurs when the element loses focus, after the content has been changed.
+     */
+    'change',
+    /**
+     * Event occurs immediately after the value of a component has changed.
+     */
+    'input',
+    /**
+     * Emit the new value whenever there’s an input or change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { emit, slots }) {
+    const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('change', event)
+      emit('update:modelValue', target.value)
+    }
+    const handleInput = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('input', event)
+      emit('update:modelValue', target.value)
+    }
+
     return () =>
       h(
         'input',
         {
-          type: props.type,
-          disabled: props.disabled,
-          readonly: props.readonly,
-          ...attrs,
           class: [
             props.plainText ? 'form-control-plaintext' : 'form-control',
             {
@@ -80,6 +109,12 @@ 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/CFormLabel.ts

@@ -12,12 +12,11 @@ const CFormLabel = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { slots }) {
     return () =>
       h(
         'label',
         {
-          ...attrs,
           class: props.customClassName ? props.customClassName : 'form-label',
         },
         slots.default && slots.default(),

package/src/components/form/CFormRange.ts

@@ -27,6 +27,14 @@ const CFormRange = defineComponent({
       default: undefined,
       required: false,
     },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: {
+      type: String,
+      value: undefined,
+      required: false,
+    },
     /**
      * Toggle the readonly state for the component.
      */
@@ -53,15 +61,36 @@ const CFormRange = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs, slots }) {
+  emits: [
+    /**
+     * Event occurs when the value has been changed.
+     */
+    'change',
+    /**
+     * Emit the new value whenever there’s a change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { emit, slots }) {
+    const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('change', event)
+      emit('update:modelValue', target.value)
+    }
+
     return () =>
       h(
         'input',
         {
           class: 'form-range',
+          disabled: props.disabled,
+          max: props.max,
+          min: props.min,
+          onChange: (event: InputEvent) => handleChange(event),
+          steps: props.steps,
+          readonly: props.readonly,
           type: 'range',
-          ...attrs,
-          ...props,
+          value: props.modelValue,
         },
         slots.default && slots.default(),
       )

package/src/components/form/CFormSelect.ts

@@ -1,4 +1,10 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, PropType } from 'vue'
+
+type Option = {
+  disabled?: boolean
+  label?: string
+  value?: string
+}
 
 const CFormSelect = defineComponent({
   name: 'CFormSelect',
@@ -18,6 +24,25 @@ const CFormSelect = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: {
+      type: String,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+     * Examples:
+     * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
+     * - `:options="['js', 'html']"`
+     */
+    options: {
+      type: Array as PropType<Option[] | string[]>,
+      default: undefined,
+      required: false,
+    },
     /**
      * Size the component small or large.
      *
@@ -39,21 +64,55 @@ const CFormSelect = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs, slots }) {
+  emits: [
+    /**
+     * Event occurs when when a user changes the selected option of a `<select>` element.
+     */
+    'change',
+    /**
+     * Emit the new value whenever there’s a change event.
+     */
+    'update:modelValue',
+  ],
+  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', event)
+      emit('update:modelValue', value)
+    }
+
     return () =>
       h(
         'select',
         {
-          ...attrs,
           class: [
             'form-select',
             {
               [`form-select-${props.size}`]: props.size,
+              'is-invalid': props.invalid,
+              'is-valid': props.valid,
             },
           ],
+          onChange: (event: InputEvent) => handleChange(event),
           size: props.htmlSize,
         },
-        slots.default && slots.default(),
+        props.options
+          ? props.options.map((option: Option | string) => {
+              return h(
+                'option',
+                {
+                  ...(typeof option === 'object' &&
+                    option.disabled && { disabled: option.disabled }),
+                  ...(typeof option === 'object' && option.value && { value: option.value }),
+                },
+                typeof option === 'string' ? option : option.label,
+              )
+            })
+          : slots.default && slots.default(),
       )
   },
 })

package/src/components/form/CFormSwitch.ts

@@ -1,9 +1,10 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, onMounted, watch, ref } from 'vue'
 
 import { CFormLabel } from './CFormLabel'
 
 const CFormSwitch = defineComponent({
   name: 'CFormSwitch',
+  inheritAttrs: false,
   props: {
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document
@@ -28,6 +29,14 @@ const CFormSwitch = defineComponent({
       default: undefined,
       required: false,
     },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: {
+      type: [Boolean, String],
+      value: undefined,
+      required: false,
+    },
     /**
      * Size the component large or extra large. Works only with `switch`.
      *
@@ -59,7 +68,38 @@ const CFormSwitch = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs }) {
+  emits: [
+    /**
+     * Event occurs when the checked value has been changed.
+     */
+    'change',
+    /**
+     * Emit the new value whenever there’s a change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { attrs, emit }) {
+    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', event)
+      emit('update:modelValue', target.checked)
+    }
+
     return () =>
       h(
         'div',
@@ -76,8 +116,7 @@ const CFormSwitch = defineComponent({
         [
           h('input', {
             ...attrs,
-            id: props.id,
-            type: props.type,
+            checked: checked.value,
             class: [
               'form-check-input',
               {
@@ -85,6 +124,9 @@ const CFormSwitch = defineComponent({
                 'is-valid': props.valid,
               },
             ],
+            id: props.id,
+            onChange: (event: InputEvent) => handleChange(event),
+            type: props.type,
           }),
           props.label &&
             h(

package/src/components/form/CFormTextarea.ts

@@ -17,6 +17,14 @@ const CFormTextarea = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: {
+      type: String,
+      default: undefined,
+      require: false,
+    },
     /**
      * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
      */
@@ -39,12 +47,31 @@ const CFormTextarea = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs, slots }) {
+  emits: [
+    /**
+     * Event occurs when the element loses focus, after the content has been changed.
+     */
+    'change',
+    /**
+     * Event occurs immediately after the value of a component has changed.
+     */
+    'input',
+    /**
+     * Emit the new value whenever there’s an input or change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { emit, slots }) {
+    const handleInput = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('input', event)
+      emit('update:modelValue', target.value)
+    }
+
     return () =>
       h(
         'textarea',
         {
-          ...attrs,
           disabled: props.disabled,
           readonly: props.readonly,
           class: [
@@ -54,6 +81,8 @@ const CFormTextarea = defineComponent({
               'is-valid': props.valid,
             },
           ],
+          onInput: (event: InputEvent) => handleInput(event),
+          value: props.modelValue,
         },
         slots.default && slots.default(),
       )