free-fe-core-modules 0.0.3 → 0.0.5

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/Fields/index.js

@@ -17,10 +17,10 @@ import fYear from './Year.js';
 import fYearRange from './YearRange.vue';
 import fRadioList from './RadioList.vue';
 import fBoolean from './Boolean.js';
-import fFile from './File.vue';
-import fFileList from './FileList.vue';
-import fImage from './Image.vue';
-import fImageList from './ImageList.vue';
+// import fFile from './File.vue';
+// import fFileList from './FileList.vue';
+// import fImage from './Image.vue';
+// import fImageList from './ImageList.vue';
 import fFixedList from './FixedList.vue';
 import fDynamicList from './DynamicList.js';
 import fSingleList from './SingleList.vue';
@@ -32,8 +32,8 @@ import fCustomize from './Customize.js';
 import fAgreementCheck from './AgreementCheck.js';
 import fSeparator from './Separator.js';
 import fQueryFilters from './QueryFilters.vue';
-import fFileListCombined from './FileListCombined.vue';
-import fImageListCombined from './ImageListCombined.vue';
+// import fFileListCombined from './FileListCombined.vue';
+// import fImageListCombined from './ImageListCombined.vue';
 import fApiCall from './ApiCall.js';
 
 export default {
@@ -56,10 +56,10 @@ export default {
   YearRange: fYearRange,
   RadioList: fRadioList,
   Boolean: fBoolean,
-  File: fFile,
-  FileList: fFileList,
-  Image: fImage,
-  ImageList: fImageList,
+  // File: fFile,
+  // FileList: fFileList,
+  // Image: fImage,
+  // ImageList: fImageList,
   FixedList: fFixedList,
   DynamicList: fDynamicList,
   SingleList: fSingleList,
@@ -71,8 +71,8 @@ export default {
   AgreementCheck: fAgreementCheck,
   Separator: fSeparator,
   QueryFilters: fQueryFilters,
-  FileListCombined: fFileListCombined,
-  ImageListCombined: fImageListCombined,
+  // FileListCombined: fFileListCombined,
+  // ImageListCombined: fImageListCombined,
   ApiCall: fApiCall,
   // Static: () => import('./Static.vue'),
   // Select: () => import('./Select.vue'),

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,11 +1,11 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "index.js",
   "repository": "git@gitlab.com:eis-base/modules/free-fe-core-modules.git",
   "author": "zhiquan",
   "license": "UNLICENSED",
   "dependencies": {
-    "@tinymce/tinymce-vue": "^5.0.0"
+    "@tinymce/tinymce-vue": "^5.0.1"
   }
 }

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;