refactor: update events

Author: mrholek

packages/coreui-vue/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'
@@ -120,21 +120,6 @@ 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', event)
@@ -143,8 +128,7 @@ const CFormCheck = defineComponent({
 
     const formControl = () => {
       return h('input', {
-        ...attrs,
-        checked: checked.value,
+        checked: props.modelValue,
         class: [
           props.button ? 'btn-check' : 'form-check-input',
           {
@@ -156,6 +140,7 @@ const CFormCheck = defineComponent({
         indeterminate: props.indeterminate,
         onChange: (event: InputEvent) => handleChange(event),
         type: props.type,
+        ...attrs,
       })
     }
     const formLabel = () => {

packages/coreui-vue/src/components/form/CFormInput.ts

@@ -85,11 +85,11 @@ const CFormInput = defineComponent({
     '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 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)
@@ -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,
             },
           ],
-          onChange: (event: InputEvent) => handleChange(event),
+          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(),

packages/coreui-vue/src/components/form/CFormRange.ts

@@ -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(),
       )

packages/coreui-vue/src/components/form/CFormTextarea.ts

@@ -62,11 +62,6 @@ const CFormTextarea = defineComponent({
     '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)
@@ -86,7 +81,6 @@ const CFormTextarea = defineComponent({
               'is-valid': props.valid,
             },
           ],
-          onChange: (event: InputEvent) => handleChange(event),
           onInput: (event: InputEvent) => handleInput(event),
           value: props.modelValue,
         },

packages/coreui-vue/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\\">"`;