@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

package/src/components/dropdown/CDropdownToggle.ts

@@ -30,7 +30,7 @@ const CDropdownToggle = defineComponent({
      */
     component: {
       type: String,
-      default: 'button'
+      default: 'button',
     },
     /**
      * Create a custom toggler which accepts any content.

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

@@ -68,6 +68,7 @@ const CElementCover = defineComponent({
     const coverStyles = {
       ...containerCoords,
       position: 'absolute',
+      'z-index': 2,
       'background-color': `rgba(255,255,255,${props.opacity})`,
     }
 

package/src/components/form/CFormCheck.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue'
+import { computed, defineComponent, h } from 'vue'
 
 import { CButton } from '../button'
 import { CFormControlValidation } from './CFormControlValidation'
@@ -94,6 +94,10 @@ const CFormCheck = defineComponent({
      * Set component validation state to valid.
      */
     valid: Boolean,
+    /**
+     * The value attribute of component.
+     */
+    value: String,
   },
   emits: [
     /**
@@ -107,9 +111,8 @@ const CFormCheck = defineComponent({
   ],
   setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
-      const target = event.target as HTMLInputElement
       emit('change', event)
-      emit('update:modelValue', target.checked)
+      emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
 
     const className = [
@@ -132,15 +135,18 @@ const CFormCheck = defineComponent({
       },
     ]
 
+    const isChecked = computed(() => props.modelValue == props.value)
+
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...(props.modelValue && { checked: props.modelValue }),
+        ...(props.modelValue && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
         onChange: (event: InputEvent) => handleChange(event),
         type: props.type,
+        value: props.value,
       })
     }
 

package/src/components/form/CFormInput.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue'
 import { CFormControlWrapper } from './CFormControlWrapper'
 
-export const File = typeof window !== 'undefined' ? window.File : class File extends Object {}
+export const File = typeof window === 'undefined' ? class File extends Object {} : window.File
 
 const CFormInput = defineComponent({
   name: 'CFormInput',
@@ -164,7 +164,7 @@ const CFormInput = defineComponent({
                 onInput: (event: InputEvent) => handleInput(event),
                 readonly: props.readonly,
                 type: props.type,
-                ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue })
+                ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue }),
               },
               slots.default && slots.default(),
             ),

package/src/components/form/CFormLabel.ts

@@ -13,7 +13,7 @@ const CFormLabel = defineComponent({
       h(
         'label',
         {
-          class: props.customClassName ? props.customClassName : 'form-label',
+          class: props.customClassName ?? 'form-label',
         },
         slots.default && slots.default(),
       )

package/src/components/form/CFormSelect.ts

@@ -160,7 +160,7 @@ const CFormSelect = defineComponent({
                         ...(typeof option === 'object' && {
                           ...(option.disabled && { disabled: option.disabled }),
                           ...(option.selected && { selected: option.selected }),
-                          ...(option.value && {
+                          ...(option.value !== undefined && {
                             value: option.value,
                             ...(props.modelValue &&
                               props.multiple &&

package/src/components/grid/CCol.ts

@@ -112,7 +112,7 @@ const CCol = defineComponent({
       h(
         'div',
         {
-          class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'col'],
+          class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col'],
         },
         slots.default && slots.default(),
       )

package/src/components/grid/CContainer.ts

@@ -49,7 +49,7 @@ const CContainer = defineComponent({
       h(
         'div',
         {
-          class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'container'],
+          class: [repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container'],
         },
         slots.default && slots.default(),
       )

package/src/components/header/CHeader.ts

@@ -36,7 +36,7 @@ const CHeader = defineComponent({
         props.container
           ? h(
               'div',
-              { class: `container${props.container !== true ? '-' + props.container : ''}` },
+              { class: `container${props.container === true ? '' : '-' + props.container}` },
               slots.default && slots.default(),
             )
           : slots.default && slots.default(),

package/src/components/modal/CModal.ts

@@ -152,6 +152,7 @@ const CModal = defineComponent({
       window.addEventListener('keyup', handleKeyUp)
     }
 
+    // eslint-disable-next-line unicorn/consistent-function-scoping
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.remove('modal-open')