feat: add event listeners to all wrapped form components

Author: woothu

src/components/form/CInput.vue

@@ -156,11 +156,6 @@ export default {
     //   }
     // }
 
-    listeners () {
-      const { input, change, ...listeners } = this.$listeners; // eslint-disable-line no-unused-vars
-      return listeners;
-    },
-
     //wrapperComputedProps mixin
     // isHorizontal () {
     //   return Boolean(this.horizontal)

src/components/form/CInputCheckbox.vue

@@ -3,6 +3,7 @@
                        description, class: computedClasses}">
     <template #input>
       <input
+        v-on="listeners"
         v-bind="$attrs"
         :id="safeId"
         :type="$options.type"
@@ -33,15 +34,15 @@
 </template>
 
 <script>
-import { safeId, validationComputedProps } from './form-mixins'
+import { sharedComputedProps } from './form-mixins'
 import { inputCheckboxProps as props } from './form-props'
 import CFormGroup from './CFormGroup'
 
 export default {
   name: 'CInputCheckbox',
   inheritAttrs: false,
   components: { CFormGroup },
-  mixins: [safeId, validationComputedProps],
+  mixins: [sharedComputedProps],
   props,
   // {
     // validFeedback: String,

src/components/form/CInputFile.vue

@@ -15,6 +15,7 @@
     <template #input>
       <input
         v-bind="$attrs"
+        v-on="listeners"
         :id="safeId"
         :class="inputClasses"
         :multiple="multiple"

src/components/form/CSelect.vue

@@ -16,6 +16,7 @@
     <template #input>
       <select
         v-bind="$attrs"
+        v-on="listeners"
         :id="safeId"
         :class="inputClasses"
         @input="onSelect($event)"

src/components/form/CTextarea.vue

@@ -13,6 +13,7 @@
     <template #input>
       <textarea
         v-bind="$attrs"
+        v-on="listeners"
         :id="safeId"
         :class="inputClasses"
         :readonly="readonly || plaintext"
@@ -33,7 +34,7 @@
 
 <script>
 import CFormGroup from './CFormGroup'
-import { textareaProps as props} from './form-props'
+import { textareaProps as props } from './form-props'
 import * as allFormMixins from './form-mixins'
 const mixins = Object.values(allFormMixins)
 

src/components/form/form-mixins.js

@@ -1,12 +1,27 @@
 import { makeUid } from '@coreui/utils/src'
 
-export const safeId = {
+export const sharedComputedProps = {
   computed: {
-    safeId () {
+    computedIsValid() {
+      if (typeof this.isValid === 'function') {
+        return this.isValid(this.state)
+      }
+      return this.isValid
+    },
+    validationClass() {
+      if (typeof this.computedIsValid === 'boolean') {
+        return this.computedIsValid ? 'is-valid' : 'is-invalid'
+      }
+    },
+    safeId() {
       if (this.id || this.$attrs.id) {
         return this.id || this.$attrs.id
       }
       return makeUid()
+    },
+    listeners () {
+      const { input, change, ...listeners } = this.$listeners // eslint-disable-line no-unused-vars
+      return listeners
     }
   }
 }
@@ -45,22 +60,6 @@ export const wrapperComputedProps = {
   }
 }
 
-export const validationComputedProps = {
-  computed: {
-    computedIsValid () {
-      if (typeof this.isValid === 'function') {
-        return this.isValid(this.state)
-      }
-      return this.isValid
-    },
-    validationClass () {
-      if (typeof this.computedIsValid === 'boolean') {
-        return this.computedIsValid ? 'is-valid' : 'is-invalid'
-      }
-    }
-  }
-}
-
 export const watchValue = {
   watch: {
     value (val) {