fix(events): intercept of change event and textareafield factory

Author: alvarosabu

dev/typescript/App.vue

@@ -81,6 +81,7 @@ import {
   pattern,
   ValidatorTrigger,
   ValidationTriggerTypes,
+  TextAreaField,
 } from '../../src';
 /* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
@@ -118,6 +119,7 @@ export default defineComponent({
         'name',
         'email',
         'password',
+        'bio',
         'console',
         'games',
         'stock',
@@ -151,6 +153,11 @@ export default defineComponent({
           autocomplete: 'current-password',
           validations: [passwordValidator],
         }),
+        bio: TextAreaField({
+          label: 'Bio',
+          cols: 30,
+          rows: 4,
+        }),
         stock: NumberField({
           label: 'Stock',
           customClass: 'w-1/2 pr-4',
@@ -246,7 +253,7 @@ export default defineComponent({
 
     function valueChanged(values) {
       Object.assign(formValues, values);
-      /* console.log('Values', values); */
+      console.log('Values', values);
     }
 
     function handleError(errors) {

src/components/dynamic-form/DynamicForm.vue

@@ -63,7 +63,12 @@ import {
   InputEvent,
 } from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
-import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
+import {
+  deepClone,
+  hasValue,
+  isEvent,
+  removeEmpty,
+} from '@/core/utils/helpers';
 import { FieldControl } from '@/core/factories';
 
 const props = {
@@ -192,8 +197,8 @@ export default defineComponent({
       return updatedCtrl;
     }
 
-    function valueChange(event: Record<string, unknown>) {
-      if (event && hasValue(event.value)) {
+    function valueChange(event: any) {
+      if (hasValue(event.value)) {
         const updatedCtrl = findControlByName(event.name);
         if (updatedCtrl) {
           updatedCtrl.value = event.value as string;

src/components/dynamic-input/DynamicInput.vue

@@ -28,7 +28,7 @@ import {
   InputEvent,
 } from '@/core/models';
 
-import { isArray, isObject } from '@/core/utils/helpers';
+import { isArray, isEvent, isObject } from '@/core/utils/helpers';
 import { useInputEvents } from '@/composables/input-events';
 
 const components = {
@@ -106,8 +106,8 @@ export default defineComponent({
       return [classes, props?.control?.customClass];
     });
 
-    function valueChange($event) {
-      emit('change', $event);
+    function valueChange(event) {
+      emit('change', event);
     }
 
     return () => {

src/components/number-input/NumberInput.vue

@@ -16,7 +16,7 @@ export default defineComponent({
   name: 'asNumberInput',
   props,
   setup(props, { emit }) {
-    const { onInput, onFocus, onBlur } = useInputEvents(props, emit);
+    const { onInput, onChange, onFocus, onBlur } = useInputEvents(props, emit);
     const {
       isRequired,
       errorMessages,
@@ -44,6 +44,7 @@ export default defineComponent({
         onFocus,
         onBlur,
         onInput,
+        onChange,
       }),
       isPendingValidation.value
         ? null

src/components/radio-input/RadioInput.vue

@@ -16,7 +16,7 @@ export default defineComponent({
   name: 'asRadioInput',
   props,
   setup(props, { emit }) {
-    const { onInput, onFocus, onBlur } = useInputEvents(props, emit);
+    const { onChange, onInput, onFocus, onBlur } = useInputEvents(props, emit);
 
     const { errorMessages, isPendingValidation } = useInputValidation(
       props,
@@ -35,6 +35,7 @@ export default defineComponent({
           onFocus,
           onBlur,
           onInput,
+          onChange,
         }),
         h(
           'label',

src/components/select-input/SelectInput.vue

@@ -18,7 +18,10 @@ export default defineComponent({
   props,
   setup(props, { emit }) {
     return () => {
-      const { onInput, onFocus, onBlur } = useInputEvents(props, emit);
+      const { onInput, onChange, onFocus, onBlur } = useInputEvents(
+        props,
+        emit,
+      );
       const {
         isRequired,
         errorMessages,
@@ -61,6 +64,7 @@ export default defineComponent({
             onFocus,
             onBlur,
             onInput,
+            onChange,
           },
           options,
         ),

src/components/text-area-input/TextAreaInput.vue

@@ -15,7 +15,7 @@ export default defineComponent({
   name: 'asTextAreaInput',
   props,
   setup(props, { emit }) {
-    const { onInput, onFocus, onBlur } = useInputEvents(props, emit);
+    const { onInput, onChange, onFocus, onBlur } = useInputEvents(props, emit);
     const {
       isRequired,
       errorMessages,
@@ -41,6 +41,7 @@ export default defineComponent({
         onFocus,
         onBlur,
         onInput,
+        onChange,
       }),
       isPendingValidation.value
         ? null

src/components/text-input/TextInput.vue

@@ -25,7 +25,7 @@ export default defineComponent({
   name: 'asTextInput',
   props,
   setup(props, { emit }) {
-    const { onInput, onFocus, onBlur, getClasses } = useInputEvents(
+    const { onInput, onChange, onFocus, onBlur, getClasses } = useInputEvents(
       props,
       emit,
     );
@@ -52,6 +52,7 @@ export default defineComponent({
         onFocus,
         onBlur,
         onInput,
+        onChange,
       }),
       isPendingValidation.value
         ? null

src/composables/input-events.ts

@@ -6,6 +6,7 @@ import { ValidationTriggerTypes } from '@/core/models';
 
 interface InputEventsComposition {
   onInput: ($event: Event) => void;
+  onChange: ($event: Event) => void;
   onCheck: ($event: Event) => void;
   onFocus: () => void;
   onBlur: () => void;
@@ -18,9 +19,8 @@ export function useInputEvents(props: any, emit: any): InputEventsComposition {
   function onInput($event: Event): void {
     const element = $event.target as HTMLInputElement;
 
+    $event.stopImmediatePropagation();
     if (props.control && hasValue(element.value)) {
-      $event.stopImmediatePropagation();
-
       if (
         (!props.control.valid &&
           props.control.validationTrigger.type ===
@@ -37,6 +37,10 @@ export function useInputEvents(props: any, emit: any): InputEventsComposition {
       });
     }
   }
+  function onChange($event: Event): void {
+    $event.stopImmediatePropagation();
+    $event.preventDefault();
+  }
   function onCheck($event: Event): void {
     const element = $event.target as HTMLInputElement;
     if (props.control) {
@@ -68,7 +72,7 @@ export function useInputEvents(props: any, emit: any): InputEventsComposition {
   watch(
     () => props?.control?.value,
     (curr, prev) => {
-      if (prev === undefined && hasValue(curr)) {
+      if (prev !== undefined && hasValue(curr) && curr !== prev) {
         emit('change', {
           name: props.control.name,
           value: props.control.value,
@@ -80,6 +84,7 @@ export function useInputEvents(props: any, emit: any): InputEventsComposition {
   return {
     onFocus,
     onInput,
+    onChange,
     onBlur,
     onCheck,
     getClasses,

src/core/factories.ts

@@ -14,6 +14,7 @@ import {
   FormValidator,
   ValidationTriggerTypes,
   ValidationTrigger,
+  TextAreaInput,
 } from './models';
 
 const EMPTY_CONTROL = {
@@ -62,6 +63,19 @@ export const TextField = ({
   type: FieldTypes.TEXT,
 });
 
+export const TextAreaField = ({
+  value,
+  cols,
+  rows,
+  ...rest
+}: Partial<TextAreaInput>): TextAreaInput => ({
+  ...FieldBase(rest),
+  value,
+  cols,
+  rows,
+  type: FieldTypes.TEXTAREA,
+});
+
 export const EmailField = ({
   value,
   ...rest