free-fe-core-modules 0.0.4 → 0.0.5

package/components/Dialog/BasicDialog.vue

@@ -65,7 +65,7 @@
             :key="index"
             :Field="field"
             :values="fieldsData"
-            :ref="`input_field_validator_${index}`"
+            ref="fieldsToValid"
             @input="onInputFieldInput(field)"
           ></free-field>
         </div>
@@ -101,6 +101,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useFormValidator } from '../../composible/useFormValidator';
 import FreeField from '../../free-field/composible/fieldWrapper';
 import EIcon from '../Basic/EIcon.vue';
 
@@ -153,6 +154,14 @@ export default defineComponent({
     FreeField,
     EIcon,
   },
+  setup(props, { expose }) {
+    const { validate } = useFormValidator('fieldsToValid');
+    expose({
+      validate,
+    })
+
+    return {};
+  },
   data() {
     return {
       timeLeft: 0,

package/composible/useFormValidator.js

@@ -0,0 +1,56 @@
+import { unref, getCurrentInstance, computed } from "vue";
+
+export function useFormValidator(...list) {
+  const { proxy:vm } = getCurrentInstance();
+
+  return {
+    validate: computed(() => {
+      return (...args) => {
+        if (vm.shouldHide) return true;
+      
+        // could have customized validate function in component
+        if (vm.selfValidate && typeof vm.selfValidate === 'function') {
+          return vm.selfValidate();
+        }
+      
+        const refsList = [];
+        for(let i = 0; i < list.length; i += 1) {
+          if (typeof list[i] === 'string') {
+            list[i] = vm.$refs[list[i]];
+          } else if (typeof list[i] === 'function') {
+            list[i] = list[i]();
+          }
+          
+          if (Array.isArray(list[i])) {
+            refsList.push(...list[i])
+          } else {
+            refsList.push(list[i])
+          }
+        }
+  
+        if (refsList.length <= 0) return true;
+      
+        let hasErr = false;
+        for (let i = 0; i < refsList.length; i += 1) {
+          let refi = unref(refsList[i]);
+
+
+          const validFun = unref(refi.validate || refi.methods?.validate || refi.component?.exposed?.validate|| refi.component?.ctx?.validate);
+          const shouldHide = unref(refi.shouldHide || refi.component?.ctx?.shouldHide);
+      
+          if (typeof validFun === 'function' && shouldHide !== true) {
+            hasErr = !validFun() || hasErr;
+
+            if (hasErr) {
+              console.error('got error', args)
+              break;
+            }
+          }
+        }
+      
+        return !hasErr;
+      };
+    }),
+  }
+};
+

package/free-field/Fields/AgreementCheck.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, getCurrentInstance } from 'vue';
-import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { QCheckbox } from 'quasar';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldAgreementCheck',
@@ -21,7 +21,7 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  setup(props, { emit }){
+  setup(props, { emit, expose }){
     if (!props.Field) return {};
 
     const { proxy:vm } = getCurrentInstance();
@@ -106,6 +106,10 @@ export default defineComponent({
       return isValid;
     };
 
+    defineExpose({
+      validate,
+    })
+
     const checkboxNode = () => h(QCheckbox, {
       disable: props.Field?.ReadOnly,
       label: props.Field?.showLabel ? '' : props.Field?.Label,

package/free-field/Fields/Date.js

@@ -1,7 +1,8 @@
 import { ref, defineComponent, getCurrentInstance, h, computed } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldDate',
@@ -40,7 +41,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { proxy: vm } = getCurrentInstance();
@@ -80,7 +81,7 @@ export default defineComponent({
 
     const showPopup = ref(false);
 
-    const DateNode = () => h(QInput, {
+    const DateNode = computed(() => h(QInput, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
@@ -121,12 +122,19 @@ export default defineComponent({
         class: 'cursor-pointer',
         name: 'event'
       }),
-    });
+    }));
+
+    const {
+      validate,
+    } = useFormValidator(DateNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-date row items-center no-wrap',
     }, [
-      props.Field.ReadOnly ? readonlyNode() : DateNode(),
+      props.Field.ReadOnly ? readonlyNode() : DateNode.value,
       slots.warning && slots.warning(),
     ]);
   },

package/free-field/Fields/DateRange.js

@@ -1,7 +1,8 @@
 import { ref, defineComponent, getCurrentInstance, h, computed, watch, watchEffect } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldDateRange',
@@ -40,7 +41,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { proxy: vm } = getCurrentInstance();
@@ -119,7 +120,7 @@ export default defineComponent({
     const showMaxPopup = ref(false);
 
 
-    const minDateNode = () => h(QInput, {
+    const minDateNode = computed(() => h(QInput, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
@@ -162,9 +163,9 @@ export default defineComponent({
         class: 'cursor-pointer',
         name: 'event'
       }),
-    });
+    }));
 
-    const maxDateNode = () => h(QInput, {
+    const maxDateNode = computed(() => h(QInput, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
@@ -206,7 +207,12 @@ export default defineComponent({
         class: 'cursor-pointer',
         name: 'event'
       }),
-    });
+    }));
+
+    const { validate } = useFormValidator(minDateNode, maxDateNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-date row items-center no-wrap',
@@ -214,11 +220,11 @@ export default defineComponent({
       props.Field.ReadOnly ? readonlyNode() : h('div', {
         class: 'row items-center no-wrap'
       }, [
-        minDateNode(),
+        minDateNode.value,
         h('span', {
           class: 'input-field-range-separator'
         },props.Field.Separator || '~'),
-        maxDateNode(),
+        maxDateNode.value,
       ]),
       slots.warning && slots.warning(),
     ]);

package/free-field/Fields/DynamicList.js

@@ -1,8 +1,9 @@
 import { ref, defineComponent, getCurrentInstance, h, computed, watchEffect } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import { QTable, QTh, QTd, QTr, QIcon } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
 import FreeField from '../composible/fieldWrapper';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldDynamicList',
@@ -424,10 +425,16 @@ export default defineComponent({
       }
     };
 
+    const fieldsToValidate = ref([]);
+    const {
+      validate
+    } = useFormValidator(fieldsToValidate);
+
     expose({
       selected,
       addRow,
       deleteRow,
+      validate,
     })
 
     watchEffect(() => {
@@ -456,6 +463,22 @@ export default defineComponent({
     );
 
     const bodyCell = (slotProps) => {
+      fieldsToValidate.value = slotProps.col?.List?.length > 1 ? slotProps.col.List.map((col) =>
+        h(FreeField, {
+          Field: columnField(col, true, slotProps.col),
+          values: slotProps.row,
+          style: "margin: 4px auto",
+          onInput: cellChanged,
+        })
+      ) : [
+        h(FreeField, {
+          Field: columnField(slotProps.col),
+          values: slotProps.row,
+          borderless: true,
+          onInput: cellChanged,
+        }),
+      ];
+      
       if (slotProps.col.name === "listActions") {
         return h(QTd, null, {
           default: () =>
@@ -480,38 +503,15 @@ export default defineComponent({
             rowspan: slotProps.value ? slotProps.value.rowspan || "1" : "1",
             class: "items-center justify-center",
           },
-          {
-            default: () =>
-              slotProps.col.List?.length > 1
-                ? h(
-                    "span",
-                    {
-                      class: "full-height full-width abcClass",
-                    },
-                    slotProps.col.List.map((col) =>
-                      h(FreeField, {
-                        Field: columnField(col, true, slotProps.col),
-                        values: slotProps.row,
-                        style: "margin: 4px auto",
-                        onInput: cellChanged,
-                      })
-                    )
-                  )
-                : h(
-                    "span",
-                    {
-                      class: "full-height full-width defClass",
-                    },
-                    [
-                      h(FreeField, {
-                        Field: columnField(slotProps.col),
-                        values: slotProps.row,
-                        borderless: true,
-                        onInput: cellChanged,
-                      }),
-                    ]
-                  ),
-          }
+          [
+            h(
+              "span",
+              {
+                class: "full-height full-width",
+              },
+              fieldsToValidate.value,
+            )
+          ]
         );
       }
     };

package/free-field/Fields/FixedList.vue

@@ -45,8 +45,7 @@
               :Field="columnField(col, true, props.col)"
               :values="props.row"
               @input="cellChanged()"
-              :ref="`input_field_validator_${
-                columnField(col, true, props.col).Name}-${index}-${props.row.auto__index}`"
+              ref="fieldsToValid"
             ></free-field>
           </span>
           <span v-else class="full-width full-height">
@@ -55,8 +54,7 @@
               :values="props.row"
               @input="cellChanged()"
               borderless
-              :ref="`input_field_validator_${
-                columnField(props.col, false).Name}-${props.row.auto__index}`"
+              ref="fieldToValid"
             ></free-field>
           </span>
         </q-td>
@@ -74,6 +72,7 @@
 <script>
 import { defineComponent, watchEffect, ref, computed } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldFixedList',
@@ -205,7 +204,7 @@ export default defineComponent({
   props: {
     ...freeFieldProps,
   },
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -341,6 +340,11 @@ export default defineComponent({
       setFieldData(tableData.value, emit);
     };
 
+    const { validate } = useFormValidator('fieldsToValid', 'fieldToValid')
+    expose({
+      validate,
+    })
+
     return {
       fieldData,
       tableData,

package/free-field/Fields/Labels.vue

@@ -87,6 +87,7 @@
 <script>
 import { defineComponent } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldLabels',
@@ -114,9 +115,14 @@ export default defineComponent({
       newLabel: '',
     };
   },
-  setup(props) {
+  setup(props, { expose }) {
     const { fieldData, setFieldData } = useFreeField(props);
 
+    const { validate } = useFormValidator('input_field_validator_label');
+    expose({
+      validate,
+    });
+
     return {
       fieldData,
       setFieldData,

package/free-field/Fields/MixedTable.vue

@@ -54,7 +54,7 @@
                 :Field="{...f, ReadOnly: Field.ReadOnly || f.ReadOnly}"
                 :values="fieldData.value"
                 @input="cellChanged(f)"
-                :ref="`input_field_validator_${index}`"
+                ref="fieldsToValid"
               ></free-field>
             </span>
             <span
@@ -66,7 +66,7 @@
                 :values="fieldData.value"
                 @input="cellChanged(r[rk].List[0])"
                 borderless
-                :ref="`input_field_validator_extra_${index}`"
+                ref="fieldToValid"
               ></free-field>
             </span>
           </q-td>
@@ -91,6 +91,7 @@
 <script>
 import { computed, defineComponent } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldMixedTable',
@@ -271,7 +272,7 @@ export default defineComponent({
   props: {
     ...freeFieldProps,
   },
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -342,6 +343,11 @@ export default defineComponent({
       return summaryText;
     });
 
+    const { validate } = useFormValidator('fieldsToValid', 'fieldToValid');
+    expose({
+      validate,
+    });
+
     return {
       fieldData,
       setFieldData,

package/free-field/Fields/Number.js

@@ -1,8 +1,9 @@
-import { defineComponent, h, watch } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { defineComponent, h, watch, computed } from 'vue';
 import { QInput } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import ReadonlyContent from '../composible/readonlyContent';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldNumber',
@@ -95,7 +96,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots , expose }){
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -134,7 +135,7 @@ export default defineComponent({
       class: 'postfix',
     }, props.Field.Options?.Postfix));
 
-    const inputNode = () => h(QInput, {
+    const inputNode = computed(() => h(QInput, {
       type: 'number',
       maxlength: props.Field.Options?.MaxLength,
       autocomplete: 'off',
@@ -155,12 +156,17 @@ export default defineComponent({
       before,
       prepend,
       append,
-    });
+    }));
+
+    const { validate } = useFormValidator(inputNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-number row items-center no-wrap',
     }, [
-      props.Field.ReadOnly ? readonlyNode() : inputNode(),
+      props.Field.ReadOnly ? readonlyNode() : inputNode.value,
       slots.warning && slots.warning(),
     ]);
   },

package/free-field/Fields/Password.js

@@ -1,7 +1,8 @@
-import { defineComponent, h, ref } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { defineComponent, h, ref, computed } from 'vue';
 import { QInput, QIcon } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldPassword',
@@ -31,7 +32,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -49,7 +50,7 @@ export default defineComponent({
       },
     });
 
-    const inputNode = () => h(QInput, {
+    const inputNode = () => computed(h(QInput, {
       type: isPwd.value ?  'password' : 'text',
       maxlength: props.Field.Options?.MaxLength,
       autocomplete: props.Field.Options?.autocomplete ? '' : 'new-password',
@@ -69,12 +70,17 @@ export default defineComponent({
     }, {
       before,
       append,
-    });
+    }));
+
+    const { validate } = useFormValidator(inputNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-password row items-center no-wrap',
     }, [
-      inputNode(),
+      inputNode.value,
       slots.warning && slots.warning(),
     ]);
   },

package/free-field/Fields/Search.vue

@@ -127,7 +127,7 @@
       readonly
       :class="`${Field && Field.Multiple
         ? '' : 'simple-field'} ${searchDisplay ? 'has-data' : 'empty'}`"
-      :ref="`input_field_validator_${Field.Name || Field.Label}`"
+      ref="fieldToValid"
       @click="searchKey = '';searchData = {}; showSearch = true"
     >
       <template v-slot:prepend>
@@ -175,6 +175,7 @@
 <script>
 import { defineComponent } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldSearch',
@@ -286,11 +287,16 @@ export default defineComponent({
     ],
     Description: '',
   },
-  setup(props) {
+  setup(props, { expose }) {
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
 
+    const { validate } = useFormValidator('fieldToValid');
+    expose({
+      validate,
+    })
+
     return {
       fieldData,
       setFieldData,

package/free-field/Fields/Select.vue

@@ -55,7 +55,7 @@
         emit-value
         :multiple="Field.Multiple"
         :readonly="Field.ReadOnly"
-        :ref="`input_field_validator_${Field.Name || Field.Label}`"
+        ref="fieldToValid"
         :use-input="Field && Field.UseInput"
         :use-chip="Field && Field.UseChip"
       >
@@ -156,6 +156,7 @@
 <script>
 import { ref, computed, defineComponent, getCurrentInstance, watch, watchEffect } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldSelect',
@@ -304,8 +305,10 @@ export default defineComponent({
       return true;
     };
 
+    const { validate } = useFormValidator('fieldToValid');
     expose ({
       selfValidate,
+      validate,
     })
 
     const checkChanged = (v) => {

package/free-field/Fields/SelectionChain.vue

@@ -34,7 +34,7 @@
           :label="valuesList[index] ? '' : option.Placeholder"
           emit-value
           @input="selectionChanged(index)"
-          :ref="`input_field_validator_${index}`"
+          ref="fieldsToValid"
         ></q-select>
       </span>
       <span v-if="Field && Field.ReadOnly">
@@ -56,6 +56,7 @@
 <script>
 import { defineComponent, ref, watch, getCurrentInstance, } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldSelectChain',
@@ -113,7 +114,7 @@ export default defineComponent({
     ],
     Description: '',
   },
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
     const { proxy:vm } = getCurrentInstance();
@@ -202,6 +203,11 @@ export default defineComponent({
       initOptions();
     });
 
+    const { validate } = useFormValidator('fieldsToValid');
+    expose ({
+      validate,
+    })
+
     return {
       fieldData,
       setFieldData,

package/free-field/Fields/String.js

@@ -1,8 +1,9 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, computed } from 'vue';
 import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import { QInput } from 'quasar';
 import ReadonlyContent from '../composible/readonlyContent';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldString',
@@ -51,7 +52,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -73,7 +74,7 @@ export default defineComponent({
       class: 'postfix',
     }, props.Field.Options?.Postfix));
 
-    const inputNode = () => h(QInput, {
+    const inputNode = computed(() => h(QInput, {
       maxlength: props.Field.Options?.MaxLength,
       autocomplete: 'off',
       // bottomSlots: true,
@@ -93,12 +94,17 @@ export default defineComponent({
       before,
       prepend,
       append,
-    });
+    }));
+
+    const { validate } = useFormValidator(inputNode);
+    expose({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-string row items-center no-wrap',
     }, [
-      props.Field.ReadOnly ? readonlyNode() : inputNode(),
+      props.Field.ReadOnly ? readonlyNode() : inputNode.value,
       slots.warning && slots.warning(),
     ]);
   },

package/free-field/Fields/Text.js

@@ -1,8 +1,9 @@
-import { defineComponent, h, ref, watchEffect } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { defineComponent, h, ref, watchEffect, computed } from 'vue';
 import { QInput } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import ReadonlyContent from '../composible/readonlyContent';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldText',
@@ -26,7 +27,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -48,7 +49,7 @@ export default defineComponent({
       Field: props.Field,
     });
 
-    const inputNode = () => h(QInput, {
+    const inputNode = computed(() => h(QInput, {
       type: 'textarea',
       maxlength: props.Field.Options?.MaxLength,
       hideBottomSpace: true,
@@ -66,7 +67,12 @@ export default defineComponent({
       },
     }, {
       before,
-    });
+    }));
+
+    const { validate } = useFormValidator(inputNode);
+    expose ({
+      validate,
+    })
 
     return () => h('div', {
       class: 'input-field-text',
@@ -74,7 +80,7 @@ export default defineComponent({
       slots.warning && h('div', {
         class: props.Field.Label ? 'warning-with-label' : 'warning-without-label',
       }, slots.warning()),
-      props.Field.ReadOnly ? readonlyNode() : inputNode(),
+      props.Field.ReadOnly ? readonlyNode() : inputNode.value,
     ]);
   },
 });

package/free-field/Fields/Time.vue

@@ -14,7 +14,7 @@
     <q-input v-else v-model="fieldData.value" hide-bottom-space
       :readonly="Field.ReadOnly"
       @input="$emit('input')"
-      :ref="`input_field_validator_${Field.Name || Field.Label}`">
+      ref="fieldToValid">
       <template v-slot:before v-if="Field.Label !== void 0">
         <span
           :class="`field-label ${(Field.Label && Field.Label.trim().length)
@@ -56,6 +56,7 @@
 <script>
 import { computed, defineComponent, getCurrentInstance } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldTime',
@@ -91,7 +92,7 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits:['input'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
     const { proxy:vm } = getCurrentInstance();
@@ -158,6 +159,11 @@ export default defineComponent({
       };
     });
 
+    const { validate } = useFormValidator('fieldToValid');
+    expose ({
+      validate,
+    })
+
     return {
       fieldData,
       locale,

package/free-field/Fields/TimeRange.vue

@@ -27,7 +27,7 @@
         v-model="min"
         hide-bottom-space
         :readonly="Field.ReadOnly"
-        :ref="`input_field_validator_first`"
+        ref="input_field_validator_first"
       >
         <q-popup-proxy
           v-if="!Field.ReadOnly"
@@ -62,7 +62,7 @@
         v-model="max"
         hide-bottom-space
         :readonly="Field.ReadOnly"
-        :ref="`input_field_validator_second`"
+        ref="input_field_validator_second"
       >
         <q-popup-proxy
           v-if="!Field.ReadOnly"
@@ -98,6 +98,7 @@
 <script>
 import { defineComponent, ref, getCurrentInstance } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldTimeRange',
@@ -155,7 +156,7 @@ export default defineComponent({
     ],
     Description: '',
   },
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
     const { proxy:vm } = getCurrentInstance();
@@ -342,6 +343,11 @@ export default defineComponent({
       };
     });
 
+    const { validate } = useFormValidator('input_field_validator_first', 'input_field_validator_second');
+    expose ({
+      validate,
+    })
+
     return {
       fieldData,
       locale,

package/free-field/Fields/Year.js

@@ -1,7 +1,8 @@
-import { ref, defineComponent, getCurrentInstance, h, computed } from 'vue';
-import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { defineComponent, h, computed } from 'vue';
 import { QSelect } from 'quasar';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
 import freeFieldLabel from '../composible/freeFieldLabel';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldYear',
@@ -74,7 +75,7 @@ export default defineComponent({
   methods: {
     ...useFreeFieldMethods,
   },
-  setup(props, { emit, slots }){
+  setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
@@ -107,7 +108,7 @@ export default defineComponent({
       return options;
     });
 
-    const selectNode = () => h(QSelect, {
+    const selectNode = computed(() => h(QSelect, {
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
       'map-options': true,
@@ -125,12 +126,17 @@ export default defineComponent({
       },
     }, {
       before,
-    });
+    }));
+
+    const { validate } = useFormValidator(selectNode);
+    expose ({
+      validate,
+    })
 
     return () => h('div', {
       class: 'simple-field input-field-year row items-center no-wrap',
     }, [
-      selectNode(),
+      selectNode.value,
       slots.warning && slots.warning(),
     ]);
   },

package/free-field/Fields/YearRange.vue

@@ -19,7 +19,7 @@
         :options="minYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
-        :ref="`input_field_validator_first`"
+        ref="input_field_validator_first"
       >
         <template v-slot:before v-if="Field.Label !== void 0">
           <span
@@ -39,7 +39,7 @@
         :options="maxYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
-        :ref="`input_field_validator_second`"
+        ref="input_field_validator_second"
       />
     </span>
 
@@ -48,8 +48,9 @@
 </template>
 
 <script>
-import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldYearRange',
@@ -85,11 +86,9 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits:['input'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
-    const { proxy:vm } = getCurrentInstance();
-
     const { fieldData, setFieldData } = useFreeField(props);
 
     const min = ref('');
@@ -163,6 +162,10 @@ export default defineComponent({
       return options;
     });
 
+    const { validate } = useFormValidator('input_field_validator_first', 'input_field_validator_second');
+    expose ({
+      validate,
+    })
 
     return {
       fieldData,

package/free-field/composible/fieldWrapper.js

@@ -3,7 +3,7 @@ import {
   getCurrentInstance,
   h,
   ref,
-  reactive,
+  shallowRef,
   watchEffect,
   computed,
   onMounted,
@@ -11,6 +11,8 @@ import {
   isRef,
 } from "vue";
 import { freeFieldProps } from "./useFreeField";
+import { useFormValidator } from '../../composible/useFormValidator';
+
 
 export default defineComponent({
   name: "FreeFieldWrapper",
@@ -111,7 +113,7 @@ export default defineComponent({
       return props.Field.Hidden;
     });
 
-    let realComponent = reactive({});
+    let realComponent = shallowRef(null);
 
     watchEffect(() => {
       const fComponents = vm.ctx.FieldComponents || {};
@@ -131,7 +133,7 @@ export default defineComponent({
         }
       }
 
-      realComponent = field;
+      realComponent.value = field;
     });
 
     if (props.Field && props.Field.Info && props.Field.Info.KeepChanged) {
@@ -153,20 +155,23 @@ export default defineComponent({
     const warningSlot = (!props.noWarning && localField.value.Warning)
       && h('span', {
         class: 'input-field-warning no-wrap',
-      },[
+      },
+      [
         h('span', { class: 'input-field-warning-icon' }),
         h('span', { class: 'input-field-warning-icon-sign-top' }),
         h('span', { class: 'input-field-warning-icon-sign-dot' }),
         h('span', { class: 'input-field-warning-text ellipsis' }, localField.value.Warning),
-      ]);
+      ]
+    );
 
-    if (realComponent) {
-      const compEmits = {};
-      (realComponent.emits || []).forEach((em) => {
-        if (!em || em === 'input') return;
 
+    const compEmits = ref({});
+    watchEffect(() => {
+      (realComponent?.value?.emits || []).forEach((em) => {
+        if (!em || em === 'input') return;
+  
         const captEm = `${em[0].toUpperCase()}${em.substring(1)}`;
-        compEmits[`on${captEm}`] = (...args) => {
+        compEmits.value[`on${captEm}`] = (...args) => {
           // should not emit event directly as we were not inlucde these events in the emits list
           // but we could get any matched handller from the parent component and then call that
           // handller directly
@@ -176,46 +181,49 @@ export default defineComponent({
             outerHandller(...args);
           }
         };
-      })
-
-      const emitsRef = ref(realComponent.emits);
-
-      expose ({
-        emits: emitsRef,
-      })
-
-
-      return () =>
-        h(
-          "div",
-          {
-            class: wrapperClass,
-          },
-          [
-            h(
-              realComponent,
-              {
-                Field: localField.value,
-                values: props.values,
-                style: shouldHide.value ? "display:none;" : "",
-                class: [
-                  props.Field.ReadOnly ? "free-field--readonly" : "",
-                  !shouldHide.value && hasError.value ? "hasError" : "",
-                ],
-                onInput: () => {
-                  emit("input", props.Field);
-                },
-                ...compEmits,
-              },
-              {
-                ...slots,
-                warning: slots.warning ? slots.warning : () => warningSlot,
-              }
-            ),
-          ]
-        );
-    } else {
-      return () => null;
-    }
+      });
+    })
+
+    const readComp = computed(() => realComponent.value && h(
+      realComponent.value,
+      {
+        Field: localField.value,
+        values: props.values,
+        style: shouldHide.value ? "display:none;" : "",
+        class: [
+          props.Field.ReadOnly ? "free-field--readonly" : "",
+          !shouldHide.value && hasError.value ? "hasError" : "",
+        ],
+        onInput: () => {
+          emit("input", props.Field);
+        },
+        ...compEmits,
+      },
+      {
+        ...slots,
+        warning: slots.warning ? slots.warning : () => warningSlot,
+      }
+    ));
+    
+    // const emitsRef = computed(() => realComponent?.value?.emits);
+
+    const {
+      validate,
+    } = useFormValidator(readComp);
+
+    expose ({
+      // emits: emitsRef.value,
+      validate: () => validate.value(props.Field.Name),
+    })
+
+    return realComponent.value ? () => h(
+      "div",
+      {
+        class: wrapperClass,
+      },
+      [
+        readComp.value,
+      ]
+    ) : () => null;
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "index.js",
   "repository": "git@gitlab.com:eis-base/modules/free-fe-core-modules.git",
   "author": "zhiquan",

package/view/menu/index.vue

@@ -56,7 +56,7 @@
             :key="fIndex"
             :values="editingMenu"
             :Field="field"
-            :ref="`input_field_validator_${field.Name || field.Label}`"
+            ref="refsToValid"
           ></free-field>
 
           <div class="action-btns full-width row justify-center q-gutter-md">
@@ -86,12 +86,12 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
+import { useFormValidator } from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'MenuPage',
-  // mixins: [mixins.InputFieldValidator],
   props: {
     ...objectDataProps,
     addMenu: { type: Function, default: () => { } },
@@ -99,24 +99,28 @@ export default defineComponent({
     deleteMenu: { type: Function, default: () => { } },
   },
   setup(props, ctx) {
+    const selectedMenuNode = ref({});
+    const editingMenu = ref({});
+    const menuFields = ref([]);
+
     const {
       data,
       refreshData,
     } = useObjectData(props, ctx);
 
+    const {
+      validate,
+    } = useFormValidator('refsToValid');
+
     return {
+      selectedMenuNode,
+      editingMenu,
+      menuFields,
       data, 
       refreshData,
+      validate,
     };
   },
-  data() {
-    return {
-      selectedMenuNode: {},
-      editingMenu: {},
-      menuFields: [],
-    };
-  },
-  watch: {},
   created() {
     this.menuFields = this.getModule('core-modules').config.menuFields;