fix(textfield): validate on blur only

Remove update on update:modelValue to fix bug preventing typing
non integer values in TextField
Remove condition on dirty call in validate to replace the call in
update
Uniformize TextField template.html structure

Author: Jo-Byr

vue3-components/src/widgets/TextField/script.js

@@ -174,30 +174,21 @@ export default {
     };
 
     const validate = function validate(component = 0) {
-      // console.log('validate', component, this.size);
-      let isDirty = false;
-      // let useInitial = false;
       const value = component ? model.value[component - 1] : model.value;
+      const newValue = convert.value(value);
       if (Number(props.size) !== 1) {
-        isDirty = model.value[component - 1] !== convert.value(value);
-        model.value[component - 1] = convert.value(value);
-        if (model.value[component - 1] === null) {
+        model.value[component - 1] = newValue;
+        if (newValue === null) {
           model.value[component - 1] = props.initial?.[component - 1];
-          // useInitial = true;
         }
         model.value = model.value.slice();
       } else {
-        isDirty = model.value !== convert.value(value);
-        model.value = convert.value(value);
+        model.value = newValue;
         if (model.value === null) {
           model.value = props.initial;
-          // useInitial = true;
         }
       }
-      // console.log('validate', component, isDirty, useInitial);
-      if (isDirty) {
-        dirty(props.name);
-      }
+      dirty(props.name);
     };
 
     const refresh = function refresh() {
@@ -281,7 +272,6 @@ export default {
     };
 
     const update = function update(component = 0) {
-      // console.log('update', component, this.size);
       const value = component ? model.value[component - 1] : model.value;
       // must test against bool since it can be a string in case of error
       if (rule.value(value) === true) {

vue3-components/src/widgets/TextField/template.html

@@ -20,7 +20,6 @@
         :name="`${data().type}:${name}:${i}`"
         :bg-color="color()"
         v-model="model"
-        @update:modelValue="update()"
         :label="label"
         :hint="help"
         density="compact"
@@ -51,10 +50,9 @@
           :name="`${data().type}:${name}:${i}`"
           :bg-color="color(i)"
           v-model="model[i - 1]"
-          @update:modelValue="update(i)"
           density="compact"
           :rules="[rule]"
-          @update:focused="validate(i)"
+          @blur="validate(i)"
           @keydown.enter="validate(i)"
           hide-details
           :disabled="disabled || !decorator.enable"