free-fe-core-modules 0.0.4 → 0.0.6

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,27 @@ export default defineComponent({
     );
 
     const bodyCell = (slotProps) => {
+      const fields = ref([]);
+      fields.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,
+        }),
+      ];
+
+      // add fields from the current cell to validate list
+      fieldsToValidate.value.push(...fields.value);
+
+
       if (slotProps.col.name === "listActions") {
         return h(QTd, null, {
           default: () =>
@@ -480,38 +508,13 @@ 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",
+            },
+            fields.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"
@@ -96,8 +96,9 @@
 </template>
 
 <script>
-import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { defineComponent, ref, getCurrentInstance, watch, watchEffect, computed } 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();
@@ -299,7 +300,7 @@ export default defineComponent({
     const objOptions = computed(() => props.Field.Options || undefined);
 
     const timeOptions = computed(() => {
-      if (objOptions.values) return undefined;
+      if (objOptions.value) return undefined;
 
       if (!props.Field.MinValue && !props.Field.MaxValue) {
         return undefined;
@@ -342,7 +343,14 @@ export default defineComponent({
       };
     });
 
+    const { validate } = useFormValidator('input_field_validator_first', 'input_field_validator_second');
+    expose ({
+      validate,
+    })
+
     return {
+      min,
+      max,
       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(),
     ]);
   },