free-fe-core-modules 0.0.2 → 0.0.4

package/free-field/Fields/Year.js

@@ -0,0 +1,137 @@
+import { ref, defineComponent, getCurrentInstance, h, computed } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QSelect } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldYear',
+  fieldInfo: {
+    Category: 'DateTime',
+    Label: '年份',
+    Value: 'Year',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最大至“现在”',
+        Name: 'Info.TillNow',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最小从“现在”',
+        Name: 'Info.FromNow',
+      },
+      {
+        Type: 'DynamicList',
+        Label: '选项',
+        Name: 'Options',
+        Options: {
+          Columns: [
+            {
+              Label: 'Year',
+              Name: 'Value',
+            },
+            {
+              Label: 'Extra',
+              Name: 'Extra',
+              Type: 'FieldList',
+              Options: {
+                Columns: [
+                  {
+                    Label: '#',
+                    Name: 'Index',
+                  },
+                  {
+                    Label: '名称',
+                    Name: 'Name',
+                  },
+                  {
+                    Label: '标题',
+                    Name: 'Label',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : undefined;
+
+    const yearOptions = computed(() => {
+      if (props.Field.Type !== 'Year') return [];
+
+      if (props.Field.Options && Array.isArray(props.Field.Options)) {
+        return props.Field.Options;
+      }
+
+      let minYear = 1900;
+      let maxYear = Date.now().year;
+
+      if (props.Field.MinValue && Number(props.Field.MinValue)) {
+        minYear = Number(props.Field.MinValue);
+      }
+      if (props.Field.MaxValue && Number(props.Field.MaxValue)) {
+        maxYear = Number(props.Field.MaxValue);
+      }
+
+      const options = [];
+      for (let i = minYear; i <= maxYear; i += 1) {
+        options.push(i);
+      }
+      return options;
+    });
+
+    const selectNode = () => h(QSelect, {
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+      'map-options': true,
+      label: props.Field.Placeholder,
+
+      class: 'full-width',
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      options: yearOptions.value,
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    }, {
+      before,
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-year row items-center no-wrap',
+    }, [
+      selectNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/{field-components → free-field}/Fields/YearRange.vue

@@ -10,7 +10,7 @@
         {{Field.Label || ''}}
         <span v-if="Field.Required" class="required-mark">*</span>
       </span>
-      <span class="readonly-content">{{fieldData}}</span>
+      <span class="readonly-content">{{fieldData.value}}</span>
     </span>
     <span v-else class="row items-center no-wrap">
       <q-select
@@ -18,11 +18,10 @@
         hide-bottom-space
         :options="minYearOptions"
         :readonly="Field.ReadOnly"
-        v-bind="$attrs"
         @input="rangeChanged"
         :ref="`input_field_validator_first`"
       >
-        <template v-slot:before v-if="typeof Field.Label !== 'undefined'">
+        <template v-slot:before v-if="Field.Label !== void 0">
           <span
             :class="`field-label ${(Field.Label && Field.Label.trim().length)
             ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
@@ -40,7 +39,6 @@
         :options="maxYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
-        v-bind="$attrs"
         :ref="`input_field_validator_second`"
       />
     </span>
@@ -50,12 +48,11 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldYearRange',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'DateTime',
     Label: '年份范围',
@@ -84,62 +81,51 @@ export default defineComponent({
     ],
     Description: '',
   },
-  data() {
-    return {
-      range: {
-        min: '',
-        max: '',
-      },
-    };
+  props: {
+    ...freeFieldProps,
   },
-  watch: {
-    fieldData() {
-      const yl = (this.fieldData || '').split(this.Field.Separator || '~');
-      [this.range.min, this.range.max] = yl;
-
-      // if (!this.range.min) {
-      //   this.$set(this.range, 'min', Number(this.Field.MinValue) || 1900);
-      // }
-      // if (!this.range.max) {
-      //   this.$set(this.range, 'max', Number(this.Field.MaxValue)
-      //   || (this.Field.TillNow ? Date.now().year : 2050));
-      // }
-    },
-    range() {
-      if (this.range.min && this.range.max) return;
-      this.fieldData = [this.range.min, this.range.max].join(
-        this.Field.Separator || '~',
-      );
-      this.$emit('input');
-    },
-  },
-  created() {
-    // if (!this.range.min) {
-    //   this.$set(this.range, 'min', Number(this.Field.MinValue) || 1900);
-    // }
-    // if (!this.range.max) {
-    //   this.$set(this.range, 'max', Number(this.Field.MaxValue)
-    //     || (this.Field.TillNow ? Date.now().year : 2050));
-    // }
-  },
-  computed: {
-    minYearOptions() {
-      if (this.Field.Options && Array.isArray(this.Field.Options)) {
-        return this.Field.Options;
+  emits:['input'],
+  setup(props, { emit }) {
+    if (!props.Field) return () => null;
+
+    const { proxy:vm } = getCurrentInstance();
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const min = ref('');
+    const max = ref('');
+
+    const rangeChanged = () => {
+      setFieldData([min.value, max.value].join(props.Field.Separator || '~'), emit);
+    };
+
+    watchEffect(() => {
+      const yl = (fieldData.value || '').split(props.Field.Separator || '~');
+      min.value = yl[0] && yl[0].trim();
+      max.value = yl[1] && yl[1].trim();
+    });
+
+    watch(range, () => {
+      rangeChanged();
+    })
+
+    const minYearOptions = computed(() => {
+      if (props.Field.Options && Array.isArray(props.Field.Options)) {
+        return props.Field.Options;
       }
 
       let minYear = 1900;
       let maxYear = Date.now().year;
 
-      if (this.Field.MinValue && Number(this.Field.MinValue)) {
-        minYear = Number(this.Field.MinValue);
+      if (props.Field.MinValue && Number(props.Field.MinValue)) {
+        minYear = Number(props.Field.MinValue);
       }
-      if (this.Field.MaxValue && Number(this.Field.MaxValue)) {
-        maxYear = Number(this.Field.MaxValue);
+      if (props.Field.MaxValue && Number(props.Field.MaxValue)) {
+        maxYear = Number(props.Field.MaxValue);
       }
 
-      if (this.range.max && this.range.max < maxYear.toString()) {
-        maxYear = Number(this.range.max) - 1;
+      if (max.value && max.value < maxYear.toString()) {
+        maxYear = Number(max.value) - 1;
       }
 
       const options = [];
@@ -148,24 +134,25 @@ export default defineComponent({
       }
 
       return options;
-    },
-    maxYearOptions() {
-      if (this.Field.Options && Array.isArray(this.Field.Options)) {
-        return this.Field.Options;
+    });
+
+    const maxYearOptions = computed(() => {
+      if (props.Field.Options && Array.isArray(props.Field.Options)) {
+        return props.Field.Options;
       }
 
       let minYear = 1900;
       let maxYear = Date.now().year;
 
-      if (this.Field.MinValue && Number(this.Field.MinValue)) {
-        minYear = Number(this.Field.MinValue);
+      if (props.Field.MinValue && Number(props.Field.MinValue)) {
+        minYear = Number(props.Field.MinValue);
       }
-      if (this.Field.MaxValue && Number(this.Field.MaxValue)) {
-        maxYear = Number(this.Field.MaxValue);
+      if (props.Field.MaxValue && Number(props.Field.MaxValue)) {
+        maxYear = Number(props.Field.MaxValue);
       }
 
-      if (this.range.min && this.range.min > minYear.toString()) {
-        minYear = Number(this.range.min) + 1;
+      if (min.value && min.value > minYear.toString()) {
+        minYear = Number(min.value) + 1;
       }
 
       const options = [];
@@ -174,15 +161,18 @@ export default defineComponent({
       }
 
       return options;
-    },
-  },
-  methods: {
-    rangeChanged() {
-      this.fieldData = [this.range.min, this.range.max].join(
-        this.Field.Separator || '~',
-      );
-      this.$emit('input');
-    },
+    });
+
+
+    return {
+      fieldData,
+      range,
+
+      minYearOptions,
+      maxYearOptions,
+
+      rangeChanged,
+    };
   },
 });
 </script>

package/{field-components → free-field}/Fields/index.js

@@ -1,41 +1,40 @@
-import fStatic from './Static.vue';
+import fStatic from './Static.js';
 import fSelect from './Select.vue';
-import fString from './String.vue';
-import fPassword from './Password.vue';
-import fCategory from './Category.vue';
-import fCheck from './Check.vue';
+import fString from './String.js';
+import fPassword from './Password.js';
+import fCategory from './Category.js';
+import fCheck from './Check.js';
 import fLabels from './Labels.vue';
-import fNumber from './Number.vue';
+import fNumber from './Number.js';
 import fPermission from './Permission.vue';
 import fSearch from './Search.vue';
-import fText from './Text.vue';
+import fText from './Text.js';
 import fTime from './Time.vue';
 import fTimeRange from './TimeRange.vue';
-import fDate from './Date.vue';
-import fDateRange from './DateRange.vue';
-import fYear from './Year.vue';
+import fDate from './Date.js';
+import fDateRange from './DateRange.js';
+import fYear from './Year.js';
 import fYearRange from './YearRange.vue';
 import fRadioList from './RadioList.vue';
-import fBoolean from './Boolean.vue';
-import fFile from './File.vue';
-import fFileList from './FileList.vue';
-import fImage from './Image.vue';
-import fImageList from './ImageList.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 fFixedList from './FixedList.vue';
-import fDynamicList from './DynamicList.vue';
+import fDynamicList from './DynamicList.js';
 import fSingleList from './SingleList.vue';
 import fSelectChain from './SelectionChain.vue';
 import fRich from './Rich.vue';
-import fFieldEditor from './FieldEditor.vue';
 import fFieldList from './InputFieldList.vue';
 import fMixedTable from './MixedTable.vue';
-import fCustomize from './Customize.vue';
-import fAgreementCheck from './AgreementCheck.vue';
-import fSeparator from './Separator.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.vue';
+// import fFileListCombined from './FileListCombined.vue';
+// import fImageListCombined from './ImageListCombined.vue';
+import fApiCall from './ApiCall.js';
 
 export default {
   Static: fStatic,
@@ -57,24 +56,23 @@ 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,
   SelectionChain: fSelectChain,
   Rich: fRich,
-  FieldEditor: fFieldEditor,
   FieldList: fFieldList,
   MixedTable: fMixedTable,
   Customize: fCustomize,
   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

@@ -0,0 +1,221 @@
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+  reactive,
+  watchEffect,
+  computed,
+  onMounted,
+  nextTick,
+  isRef,
+} from "vue";
+import { freeFieldProps } from "./useFreeField";
+
+export default defineComponent({
+  name: "FreeFieldWrapper",
+  props: {
+    ...freeFieldProps,
+    noExtra: { type: Boolean, default: false },
+    noWarning: { type: Boolean, default: false },
+    noTips: { type: Boolean, default: false },
+  },
+  emits: ['input'],
+  setup(props, { slots, emit, expose, attrs }) {
+    if (!props.Field) return {};
+
+    const { proxy: vm } = getCurrentInstance();
+
+    const localField = computed(() => {
+      const lField = { ...props.Field };
+      lField.Rules = lField.Rules || [];
+      for (let i = 0; i < lField.Rules.length; i += 1) {
+        const rule = lField.Rules[i];
+
+        if (
+          typeof rule === "string" &&
+          vm.ctx.validators[rule] &&
+          vm.ctx.validators[rule].validator
+        ) {
+          lField.Rules[i] = (val) =>
+            vm.ctx.validators[rule].validator(isRef(val) ? val.value : val);
+        }
+      }
+
+      if (lField.Required) {
+        lField.Rules.push(
+          (val) => {
+            const pVal = isRef(val) ? val.value : val;
+            return typeof pVal !== "undefined" && pVal !== "";
+          }
+        );
+      }
+
+      return lField;
+    });
+
+    const dashedName = (props.Field.Name || "").replace(/\./g, "-");
+    const hasError = ref(false);
+
+    // TODO: any other solution to replace the eval??
+    const evalFunc = (cond, pName = "data") => {
+      const funcStr = `
+      (${pName}) => {
+        return ${cond};
+      }
+      `;
+
+      try {
+        // eslint-disable-next-line no-eval
+        return eval(funcStr);
+      } catch (ex) {
+        return undefined;
+      }
+    };
+
+    const shouldHide = computed(() => {
+      // show when
+      if (props.Field.Info && props.Field.Info.ShowWhen) {
+        const theFunc = evalFunc(props.Field.Info.ShowWhen);
+        if (typeof theFunc !== "function") {
+          return true;
+        }
+        const condResult = theFunc(props.values);
+        if (!condResult) return true;
+      }
+
+      // hide (when)
+      if (
+        props.Field.Hidden &&
+        props.Field.Info &&
+        props.Field.Info.HideWhenUndefined
+      ) {
+        const checkField =
+          props.Field.Info.HideWhenUndefinedField || props.Field.Name;
+        if (checkField) {
+          const fList = checkField.split(",");
+          for (let i = 0; i < fList.length; i += 1) {
+            const fl = fList[i];
+
+            const flv = Object.nestValue(vm.data, fl.trim());
+            if (typeof flv === "undefined") return true;
+
+            if (props.Field.Info.IncludeEmptyObject) {
+              return !Object.hasValue(flv);
+            }
+          }
+          return false;
+        }
+      }
+
+      return props.Field.Hidden;
+    });
+
+    let realComponent = reactive({});
+
+    watchEffect(() => {
+      const fComponents = vm.ctx.FieldComponents || {};
+      let field;
+
+      // for some specified types
+      if (props.Field.Component) {
+        field = props.Field.Component;
+        // TODO: make select and radio as two diff components
+        // } else if (props.Field.Type === 'Select' && props.Field.AsRadio) {
+        //   field = fComponents.RadioList;
+      } else {
+        if (typeof props.Field.Type === "undefined") {
+          field = fComponents.String;
+        } else {
+          field = fComponents[props.Field.Type] || props.Field.Type;
+        }
+      }
+
+      realComponent = field;
+    });
+
+    if (props.Field && props.Field.Info && props.Field.Info.KeepChanged) {
+      onMounted(() => {
+        nextTick(() => {
+          props.$emit("input", props.Field);
+        });
+      });
+    }
+
+    const wrapperClass = `free-field-wrapper ${
+      props.Field.Label && props.Field.Label.trim().length
+        ? "with-label"
+        : "without-label"
+    } ${props.Field.Label ? "free-field-wrapper-" + props.Field.Label : ""} ${
+      props.Field.Name ? "free-field-wrapper-" + dashedName : ""
+    } ${props.Field.Info?.Classes || ""}`;
+
+    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 captEm = `${em[0].toUpperCase()}${em.substring(1)}`;
+        compEmits[`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
+          // emit(em, ...args);
+          const outerHandller = attrs[`on${captEm}`];
+          if (typeof outerHandller === 'function') {
+            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;
+    }
+  },
+});

package/free-field/composible/freeFieldLabel.js

@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'FreeFieldLabel',
+  props: {
+    Field: { type: Object },
+  },
+  setup(props){
+    return () => (props.Field?.Label === void 0) ? null : h('span', {
+      class:`field-label field-label-readonly ${(props.Field.Label && props.Field.Label.trim().length)
+          ? '' : 'field-label-empty'} ${props.Field.Required ? 'required' : ''}`,
+    }, [
+      props.Field.Description && h(QTooltip, {
+        anchor: "top right",
+      }, props.Field.Description),
+      props.Field.Label || '',
+      props.Field.Required && h('span', {
+        class: 'required-mark',
+      }, '*'),
+    ]);
+  },
+});