free-fe-core-modules 0.0.16 → 0.0.18

package/free-field/Fields/Time.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="simple-field input-field-time row items-center no-wrap">
+  <span class="simple-field free-field-time row items-center no-wrap">
     <span v-if="Field.ReadOnly">
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
@@ -14,6 +14,7 @@
     <q-input v-else v-model="fieldData.value" hide-bottom-space
       :readonly="Field.ReadOnly"
       @input="$emit('input')"
+      v-bind="inputControlSettings"
       ref="fieldToValid">
       <template v-slot:before v-if="Field.Label !== void 0">
         <span
@@ -97,7 +98,7 @@ export default defineComponent({
 
     const { proxy:vm } = getCurrentInstance();
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const locale = vm.ctx.config.locales.find(
       (l) => l.locale === (vm.ctx.config.locale || vm.ctx.config.defaultLocale),
@@ -175,7 +176,8 @@ export default defineComponent({
 
       changed: (v) => {
         setFieldData(v, emit);
-      }
+      },
+      inputControlSettings,
     };
   },
 });

package/free-field/Fields/TimeRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="simple-field input-field-time-range row items-center no-wrap">
+  <span class="simple-field free-field-time-range row items-center no-wrap">
     <span v-if="Field.ReadOnly">
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
@@ -27,6 +27,7 @@
         v-model="min"
         hide-bottom-space
         :readonly="Field.ReadOnly"
+        v-bind="inputControlSettings"
         ref="input_field_validator_first"
       >
         <q-popup-proxy
@@ -56,12 +57,13 @@
         </template>
       </q-input>
 
-      <span class="input-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
+      <span class="free-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
 
       <q-input
         v-model="max"
         hide-bottom-space
         :readonly="Field.ReadOnly"
+        v-bind="inputControlSettings"
         ref="input_field_validator_second"
       >
         <q-popup-proxy
@@ -161,7 +163,7 @@ export default defineComponent({
 
     const { proxy:vm } = getCurrentInstance();
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const updateFieldDate = () => {
       setFieldData([min.value, max.value].join(props.Field.Separator || '~'), emit);
@@ -364,7 +366,8 @@ export default defineComponent({
 
       changed: (v) => {
         setFieldData(v, emit);
-      }
+      },
+      inputControlSettings,
     };
   },
 });

package/free-field/Fields/Year.js

@@ -75,7 +75,7 @@ export default defineComponent({
   setup(props, { emit, slots, expose }){
     if (!props.Field) return {};
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
       Field: props.Field,
@@ -111,6 +111,8 @@ export default defineComponent({
       'map-options': true,
       label: props.Field.Placeholder,
 
+      ...inputControlSettings.value,
+
       class: 'full-width',
       style: props.Field.Info?.Style,
 
@@ -131,7 +133,7 @@ export default defineComponent({
     })
 
     return () => h('div', {
-      class: 'simple-field input-field-year row items-center no-wrap',
+      class: 'simple-field free-field-year row items-center no-wrap',
     }, [
       selectNode.value,
       slots.warning && slots.warning(),

package/free-field/Fields/YearRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="input-field-year-range simple-field">
+  <span class="free-field-year-range simple-field">
     <span v-if="Field.ReadOnly">
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
@@ -19,6 +19,7 @@
         :options="minYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
+        v-bind="inputControlSettings"
         ref="input_field_validator_first"
       >
         <template v-slot:before v-if="Field.Label !== void 0">
@@ -32,13 +33,14 @@
           </span>
         </template>
       </q-select>
-      <span class="input-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
+      <span class="free-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
       <q-select
         v-model="range.max"
         hide-bottom-space
         :options="maxYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
+        v-bind="inputControlSettings"
         ref="input_field_validator_second"
       />
     </span>
@@ -89,7 +91,7 @@ export default defineComponent({
   setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const min = ref('');
     const max = ref('');
@@ -175,6 +177,7 @@ export default defineComponent({
       maxYearOptions,
 
       rangeChanged,
+      inputControlSettings,
     };
   },
 });

package/free-field/Fields/index.js

@@ -6,6 +6,7 @@ import fCategory from './Category.js';
 import fCheck from './Check.js';
 import fLabels from './Labels.vue';
 import fNumber from './Number.js';
+import fNumberRange from './NumberRange.vue';
 import fPermission from './Permission.vue';
 import fSearch from './Search.vue';
 import fText from './Text.js';
@@ -17,25 +18,27 @@ 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 fFileListCombined from './FileListCombined.vue';
+import fImage from './Image.vue';
+import fImageList from './ImageList.vue';
+import fImageListCombined from './ImageListCombined.vue';
 import fFixedList from './FixedList.vue';
 import fDynamicList from './DynamicList.js';
 import fSingleList from './SingleList.vue';
 import fSelectChain from './SelectionChain.vue';
 import fRich from './Rich.vue';
-import fFieldList from './InputFieldList.vue';
+import fFieldList from './FreeFieldList.vue';
 import fMixedTable from './MixedTable.vue';
 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 fApiCall from './ApiCall.js';
 import fTabs from './Tabs.vue';
+import fRow from './Row.vue';
+import fColumn from './Column.vue';
 
 export default {
   Static: fStatic,
@@ -46,6 +49,7 @@ export default {
   Check: fCheck,
   Labels: fLabels,
   Number: fNumber,
+  NumberRange: fNumberRange,
   Permission: fPermission,
   Search: fSearch,
   Text: fText,
@@ -57,10 +61,12 @@ export default {
   YearRange: fYearRange,
   RadioList: fRadioList,
   Boolean: fBoolean,
-  // File: fFile,
-  // FileList: fFileList,
-  // Image: fImage,
-  // ImageList: fImageList,
+  File: fFile,
+  FileList: fFileList,
+  FileListCombined: fFileListCombined,
+  Image: fImage,
+  ImageList: fImageList,
+  ImageListCombined: fImageListCombined,
   FixedList: fFixedList,
   DynamicList: fDynamicList,
   SingleList: fSingleList,
@@ -72,8 +78,9 @@ export default {
   AgreementCheck: fAgreementCheck,
   Separator: fSeparator,
   QueryFilters: fQueryFilters,
-  // FileListCombined: fFileListCombined,
-  // ImageListCombined: fImageListCombined,
   ApiCall: fApiCall,
+
   Tabs: fTabs,
+  Row: fRow,
+  Column: fColumn,
 };

package/free-field/composible/fieldWrapper.js

@@ -13,6 +13,7 @@ import {
 import { freeFieldProps } from "./useFreeField";
 import { useFormValidator } from '../../composible/useFormValidator';
 
+import '../style.scss';
 
 export default defineComponent({
   name: "FreeFieldWrapper",
@@ -48,7 +49,7 @@ export default defineComponent({
         lField.Rules.push(
           (val) => {
             const pVal = isRef(val) ? val.value : val;
-            return typeof pVal !== "undefined" && pVal !== "";
+            return !!pVal;
           }
         );
       }
@@ -71,6 +72,7 @@ export default defineComponent({
         // eslint-disable-next-line no-eval
         return eval(funcStr);
       } catch (ex) {
+        console.error(ex)
         return undefined;
       }
     };
@@ -154,13 +156,13 @@ export default defineComponent({
 
     const warningSlot = (!props.noWarning && localField.value.Warning)
       && h('span', {
-        class: 'input-field-warning no-wrap',
+        class: 'free-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),
+        h('span', { class: 'free-field-warning-icon' }),
+        h('span', { class: 'free-field-warning-icon-sign-top' }),
+        h('span', { class: 'free-field-warning-icon-sign-dot' }),
+        h('span', { class: 'free-field-warning-text ellipsis' }, localField.value.Warning),
       ]
     );
 
@@ -169,7 +171,7 @@ export default defineComponent({
     watchEffect(() => {
       (realComponent?.value?.emits || []).forEach((em) => {
         if (!em || em === 'input') return;
-  
+
         const captEm = `${em[0].toUpperCase()}${em.substring(1)}`;
         compEmits.value[`on${captEm}`] = (...args) => {
           // should not emit event directly as we were not inlucde these events in the emits list
@@ -184,7 +186,7 @@ export default defineComponent({
       });
     })
 
-    const readComp = computed(() => realComponent.value && h(
+    const realComp = computed(() => realComponent.value && h(
       realComponent.value,
       {
         Field: localField.value,
@@ -204,25 +206,149 @@ export default defineComponent({
         warning: slots.warning ? slots.warning : () => warningSlot,
       }
     ));
-    
+
     // const emitsRef = computed(() => realComponent?.value?.emits);
 
     const {
       validate,
-    } = useFormValidator(readComp);
+    } = useFormValidator(realComp);
 
     expose ({
       // emits: emitsRef.value,
       validate: () => validate.value(props.Field.Name),
     })
 
+    const fieldTip = (tip) => {
+      if (!tip || !tip.Text) return '';
+      if (!tip.Links || !Array.isArray(tip.Links) || tip.Links.length <= 0) {
+        return [{ Text: tip.Text }];
+      }
+
+      // process tip with links
+      let linkPos = [];
+      tip.Links.forEach((tl) => {
+        if (!tl || !tl.Text) return;
+
+        const start = tip.Text.indexOf(tl.Text);
+        if (start >= 0) {
+          linkPos.push({
+            ...tl,
+            start,
+            end: start + tl.Text.length,
+          });
+        }
+      });
+
+      const textSplit = [];
+      let start = 0;
+      linkPos = linkPos.sort((a, b) => a.start - b.start);
+      for (let i = 0; i < linkPos.length; i += 1) {
+        const lp = linkPos[i];
+
+        const beforeText = tip.Text.substr(start, lp.start - start);
+        if (beforeText) {
+          textSplit.push({ Text: beforeText });
+        }
+
+        textSplit.push({
+          ...lp,
+          Text: tip.Text.substr(lp.start, lp.end - lp.start),
+          Link:
+            !!lp.File && lp.isFile
+              ? vm.$filter('serverDocument', lp.File)
+              : lp.Link,
+        });
+
+        start = lp.end;
+      }
+
+      const afterText = tip.Text.substr(start);
+      if (afterText) {
+        textSplit.push({
+          Text: afterText,
+        });
+      }
+
+      if (textSplit.length > 0) return textSplit;
+
+      return [{ Text: tip.Text }];
+    };
+
+    const tipsElem = !shouldHide.value && !props.noTips && (localField.value.Tips?.length > 0) && h(
+      "div",
+      {
+        class: "free-field-tips",
+      },
+      [
+        h("span", {
+          class: "free-field-tips-prefix",
+        }),
+        h("span", {
+          class: "tips-list",
+        },
+        [
+          localField.value.Tips.map((tip) => h("span", {
+            class: "free-field-tips-tip",
+          },
+          [
+            h("span", {
+              class: "free-field-tips-tip-prefix",
+            }),
+            fieldTip(tip).map(
+              (t) => h("span", null, [
+                t.Link ? h("span", {
+                  class: "tip-link",
+                  }, [
+                    h("span", {
+                      class: "tip-link-prefix",
+                    }),
+                    t.File ? h("a", {
+                      href: t.Link,
+                      target: t.target || '_blank',
+                      download: `${t.Text}${t.File && t.File.substr(t.File.lastIndexOf('.'))}`,
+                      }, t.Text) : h("a", {
+                        href: t.Link,
+                        target: t.target || '_blank',
+                        }, t.Text),
+                    h("span", {
+                      class: "tip-link-postfix",
+                    }),
+                  ]) : (t.File ? h("span", {
+                    class: "tip-text",
+                    }, [
+                      h("span", {
+                        class: "tip-link-prefix",
+                      }),
+                      t.File,
+                      h("span", {
+                        class: "tip-link-postfix",
+                      }),
+                    ]) : h("span", {
+                      class: "tip-text",
+                      }, t.Text))
+              ])
+            ),
+            h("span", {
+              class: "free-field-tips-tip-postfix",
+            }),
+          ]
+          )),
+        ]),
+        h('span', {
+          class: 'free-field-tips-postfix',
+        })
+      ]
+    );
+
+
     return realComponent.value ? () => h(
       "div",
       {
         class: wrapperClass,
       },
       [
-        readComp.value,
+        realComp.value,
+        tipsElem,
       ]
     ) : () => null;
   },

package/free-field/composible/readonlyContent.js

@@ -11,7 +11,7 @@ export default defineComponent({
     if (!props.Field) return {};
 
     const readonlyNode = () => h('span', {
-      class: 'full-width',
+      class: 'full-width row no-wrap',
     }, [
       (props.Field.Label !== void 0) && h(FieldLabel, {
         Field: props.Field,

package/free-field/composible/useFreeField.js

@@ -1,4 +1,4 @@
-import { reactive, getCurrentInstance, watchEffect } from "vue";
+import { reactive, getCurrentInstance, watchEffect, computed } from "vue";
 
 export const freeFieldProps = {
   values: { type: Object },
@@ -11,24 +11,28 @@ export function useFreeField(props, ctx) {
 
   watchEffect(() => {
     let realData = void 0;
-    
+    let usingDft = false;
+
     if (!props.Field) {
       return;
     }
-    
+
     if (!props.Field.Name) {
-      realData = props.Field.Value || props.Field.Default || undefined;
+      realData = props.Field.Value || props.Field.Default || void 0;
+      usingDft = true;
     } else {
-      if (props.Field.Info?.Dynamic && props.Field.Value) {
+      if (props.Field.Info?.Dynamic && props.Field.Value !== void 0) {
         realData = props.Field.Value;
+        usingDft = true;
       } else {
         realData = Object.nestValue(props.values, props.Field?.Name);
       }
     }
 
     // set to default if still undefined
-    if ((realData === void 0 || realData === null) && (props.Field.Value || props.Field.Default)) {
+    if ((realData === void 0 || realData === null) && ((props.Field.Value !== void 0) || (props.Field.Default !== void 0))) {
       realData = props.Field.Value || props.Field.Default;
+      usingDft = true;
 
       // for non-dynamic field, which have refer data, we should save this data into the field
       if (props.Field.ReferTo && !props.Field.Info?.Dynamic) {
@@ -52,14 +56,25 @@ export function useFreeField(props, ctx) {
       }
     }
 
-    // show NaN placeholder
-    if ((realData === void 0 || realData === null || realData === '') && props.Field?.Info?.ShowNaN) {
-      return vm.ctx.config.nanPlaceholder || '';
+    // // show NaN placeholder
+    // TODO: return the placeholder here will not work as expected
+    // if ((realData === void 0 || realData === null || realData === '') && props.Field?.Info?.ShowNaN) {
+    //   return vm.ctx.config.nanPlaceholder || '';
+    // }
+
+    // if we are using a default value for this field, we should set the default value to the values object
+    // so that we can get such value from anywhere else immediately
+    if (usingDft) {
+      Object.setValue(props.values, props.Field?.Name, props.Field.Value || props.Field.Default || void 0);
     }
 
     fieldData.value = realData;
   });
 
+  const inputControlSettings = computed(() => {
+    return vm.ctx.config['core-modules']?.inputControlSettings || {};
+  });
+
   return {
     fieldData,
     getFieldData: (n) => Object.nestValue(props.values, n),
@@ -72,5 +87,6 @@ export function useFreeField(props, ctx) {
     setData: (n, v) => {
       Object.setValue(props.values, n, v);
     },
+    inputControlSettings,
   }
 };