free-fe-core-modules 0.0.3 → 0.0.5

package/components/Basic/SummaryHead.vue

@@ -76,15 +76,26 @@
 
 <script>
 import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SummaryHead',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     has_multiple_head: { type: Boolean, default: false },
     values: {type: Object, default: () => ({})},
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   created() {
     if (this.values) {
       this.data = this.values;

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>
@@ -100,14 +100,14 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useFormValidator } from '../../composible/useFormValidator';
 import FreeField from '../../free-field/composible/fieldWrapper';
 import EIcon from '../Basic/EIcon.vue';
 
 export default defineComponent({
   name: 'BasicDialog',
-  mixins: [mixins.InputFieldValidator],
+  // mixins: [mixins.InputFieldValidator],
   emits: ['hide', 'ok', 'cancel'],
   props: {
     persistent: { type: Boolean, default: true },
@@ -154,6 +154,14 @@ export default defineComponent({
     FreeField,
     EIcon,
   },
+  setup(props, { expose }) {
+    const { validate } = useFormValidator('fieldsToValid');
+    expose({
+      validate,
+    })
+
+    return {};
+  },
   data() {
     return {
       timeLeft: 0,

package/components/SlidingCarousel/index.vue

@@ -26,13 +26,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SlidingCarousel',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '220px' },
     width: { type: String, default: '100%' },
@@ -42,6 +42,17 @@ export default defineComponent({
     swipeable: { type: Boolean, default: true },
     thumbnails: { type: Boolean, default: true },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       slide: 0,

package/components/SlidingNews/index.vue

@@ -65,13 +65,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SlidingNews',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '40px' },
     width: { type: String, default: '100%' },
@@ -83,6 +83,17 @@ export default defineComponent({
     transitionPrev: { type: String, default: 'slide-up' },
     transitionNext: { type: String, default: 'slide-down' },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       visible: true,

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/PermissionEditor.vue

@@ -137,7 +137,6 @@ export default defineComponent({
     })
 
     watch(hasThis, (v) => {
-      console.log('hasThis changed', v)
       if (v) {
         // checked from unchecked
         fieldData.value = fieldData.value || {};