free-fe-core-modules 0.0.2 → 0.0.4

package/free-field/Fields/Check.js

@@ -0,0 +1,106 @@
+import { defineComponent, h, ref } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QCheckbox } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldCheck',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '勾选',
+    Value: 'Check',
+    Extra: [
+      {
+        Type: 'FixedList',
+        Label: '选项',
+        Name: 'Options',
+        Options: {
+          Columns: [
+            {
+              Label: 'Label',
+              Name: 'Label',
+              ReadOnly: true,
+            },
+            {
+              Label: 'Value',
+              Name: 'Value',
+              ReadOnly: true,
+            },
+            {
+              Label: 'Extra',
+              Name: 'Extra',
+              Type: 'FieldList',
+              Options: {
+                Columns: [
+                  {
+                    Label: '#',
+                    Name: 'Index',
+                  },
+                  {
+                    Label: '名称',
+                    Name: 'Name',
+                  },
+                  {
+                    Label: '标题',
+                    Name: 'Label',
+                  },
+                ],
+              },
+            },
+          ],
+          Default: [
+            {
+              Label: '选中',
+              Value: true,
+              Extra: [],
+            },
+            {
+              Label: '未选',
+              Value: false,
+              Extra: [],
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.showLabel && !props.Field.dense && props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const checkboxNode = () => h(QCheckbox, {
+      disable: props.Field?.ReadOnly,
+      label: props.Field?.showLabel ? '' : props.Field?.Label,
+
+      style: props.Field.Info?.Style,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    })
+
+    return () => h('div', {
+      class: 'simple-field input-field-check row items-center no-wrap',
+    }, [
+      before(),
+      checkboxNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Customize.js

@@ -0,0 +1,87 @@
+import { defineComponent, h, computed } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldCustomize',
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '自定义模板',
+    Value: 'Customize',
+    Extra: [
+      {
+        Type: 'Rich',
+        Label: '模板',
+        enableField: true,
+        Name: 'Options.Template',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  setup(props, { slots }){
+    if (!props.Field) return {};
+
+    const { fieldData } = useFreeField(props);
+
+    const htmlContent = computed(() => {
+      const template = props.Field && props.Field.Options ? props.Field.Options.Template : '';
+      if (!template) return '';
+
+      if (!fieldData.value) return template;
+
+      const replaced = template.replace(
+        /<efield>{([^<]*)}<\/efield>/g,
+        (match, name) => {
+          if (fieldData.value[name]) {
+            // could be options
+            if (fieldData.value.StepsDefinition) {
+              const cStep = fieldData.value.StepsDefinition.find(
+                (s) => s.Index === fieldData.value.CurrentStep,
+              );
+              if (cStep && cStep.Fields) {
+                const fld = cStep.Fields.find((f) => f.Name === name);
+
+                if (fld && fld.Options && Array.isArray(fld.Options)) {
+                  const fVal = fld.Options.find(
+                    (o) => o.Value === fieldData.value[name],
+                  );
+
+                  if (fVal && fVal.Label) {
+                    return fVal.Label;
+                  }
+                }
+              }
+            }
+
+            // otherwise.
+            return fieldData.value[name];
+          }
+          return '';
+        },
+      );
+
+      return replaced;
+    });
+
+    const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const contentNode = () => h('span', {
+      innerHTML: htmlContent.value,
+    }, );
+
+    return () => h('div', {
+      class: 'input-field-customize',
+    }, [
+      before(),
+      contentNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Date.js

@@ -0,0 +1,133 @@
+import { ref, defineComponent, getCurrentInstance, h, computed } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldDate',
+  fieldInfo: {
+    Category: 'DateTime',
+    Label: '日期',
+    Value: 'Date',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最大至“现在”',
+        Name: 'Info.TillNow',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最小从“现在”',
+        Name: 'Info.FromNow',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { proxy: vm } = getCurrentInstance();
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const dateOptions = computed(() => {
+      if (props.Field.Options && (typeof props.Field.Options === 'function' || Array.isArray(props.Field.Options))) return props.Field.Options;
+
+      let minDate = '1900/01/01';
+      let maxDate = '2100/12/31';
+
+      if (props.Field.MinValue) {
+        minDate = props.Field.MinValue;
+      }
+
+      if (props.Field.MaxValue === 'now') {
+        maxDate = new Date().toLocaleDateString();
+      } else if (props.Field.MaxValue) {
+        maxDate = props.Field.MaxValue;
+      }
+
+      return (date) => date >= minDate && date <= maxDate;
+    });
+
+    const locale = vm.ctx.config.locales.find(
+      (l) => l.locale === (vm.ctx.config.locale || vm.ctx.config.defaultLocale),
+    )?.calendar;
+
+    const localDate = computed(() => vm.$filter('normalDate', fieldData.value));
+
+    const showPopup = ref(false);
+
+    const DateNode = () => h(QInput, {
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      modelValue: localDate.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    }, {
+      default: () => h(QPopupProxy, {
+        transitionShow: "scale",
+        transitionHide: "scale",
+        modelValue: showPopup.value,
+      },() => h('span', {
+        class: 'row'
+      }, [
+        h(QDate, {
+          modelValue: localDate.value,
+
+          options: dateOptions.value,
+          todayTtn: true,
+          mask: 'YYYY-MM-DD',
+          locale,
+
+          'onUpdate:modelValue': (v) => {
+            setFieldData(v, emit);
+
+            // TODO: not working, should close the popup but not
+            showPopup.value = false;
+          },
+        })
+      ])),
+      before,
+      append: () => h(QIcon, {
+        class: 'cursor-pointer',
+        name: 'event'
+      }),
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-date row items-center no-wrap',
+    }, [
+      props.Field.ReadOnly ? readonlyNode() : DateNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/DateRange.js

@@ -0,0 +1,226 @@
+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 freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldDateRange',
+  fieldInfo: {
+    Category: 'DateTime',
+    Label: '日期范围',
+    Value: 'DateRange',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最大至“现在”',
+        Name: 'Info.TillNow',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最小从“现在”',
+        Name: 'Info.FromNow',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { proxy: vm } = getCurrentInstance();
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const updateFieldDate = () => {
+      setFieldData([min.value, max.value].join(props.Field.Separator || '~'), emit);
+    };
+
+    const min = ref('');
+    const max = ref('');
+
+    watch(min, () => updateFieldDate());
+    watch(max, () => updateFieldDate());
+
+    watchEffect(() => {
+      const yl = (fieldData.value || '').split(props.Field.Separator || '~');
+      min.value = yl[0] && yl[0].trim();
+      max.value = yl[1] && yl[1].trim();
+    });
+
+    const readonlyNode = () => h(ReadonlyContent, {
+      Field: props.Field,
+      Content: fieldData.value,
+    });
+
+    const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : undefined;
+
+    const minDateOptions = computed(() => {
+      let minDate = '1900/01/01';
+      let maxDate = '2100/12/31';
+
+      if (props.Field.MinValue) {
+        minDate = props.Field.MinValue.replace(/-/g, '/');
+      }
+
+      if (props.Field.TillNow) {
+        maxDate = new Date().toLocaleDateString();
+      } else if (props.Field.MaxValue) {
+        maxDate = props.Field.MaxValue.replace(/-/g, '/');
+      }
+
+      if (max.value && max.value.replace(/-/g, '/') < maxDate) return (date) => date >= minDate && date < max.value.replace(/-/g, '/');
+
+      return (date) => date >= minDate && date <= maxDate;
+    });
+
+    const maxDateOptions = computed(() => {
+      let minDate = '1900/01/01';
+      let maxDate = '2100/12/31';
+
+      if (props.Field.MinValue) {
+        minDate = props.Field.MinValue.replace(/-/g, '/');
+      }
+
+      if (props.Field.TillNow) {
+        maxDate = new Date().toLocaleDateString();
+      } else if (props.Field.MaxValue) {
+        maxDate = props.Field.MaxValue.replace(/-/g, '/');
+      }
+
+      if (min.value && min.value.replace(/-/g, '/') > minDate) {
+        return (date) => date > min.value.replace(/-/g, '/') && date <= maxDate;
+      }
+      return (date) => date >= minDate && date <= maxDate;
+    });
+
+    const locale = vm.ctx.config.locales.find(
+      (l) => l.locale === (vm.ctx.config.locale || vm.ctx.config.defaultLocale),
+    )?.calendar;
+
+    const showMinPopup = ref(false);
+    const showMaxPopup = ref(false);
+
+
+    const minDateNode = () => h(QInput, {
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      modelValue: min.value,
+      'onUpdate:modelValue': (v) => {
+        min.value = v;
+        emit('input', v);
+      },
+    }, {
+      default: () => h(QPopupProxy, {
+        transitionShow: "scale",
+        transitionHide: "scale",
+        modelValue: showMinPopup.value,
+      },() => h('span', {
+        class: 'row'
+      }, [
+        h(QDate, {
+          modelValue: min.value,
+
+          options: minDateOptions.value,
+          todayTtn: true,
+          mask: 'YYYY-MM-DD',
+          locale,
+
+          'onUpdate:modelValue': (v) => {
+            min.value = v;
+
+            // TODO: not working, should close the popup but not
+            showMinPopup.value = false;
+            emit('input', v);
+          },
+        })
+      ])),
+      before,
+      append: () => h(QIcon, {
+        class: 'cursor-pointer',
+        name: 'event'
+      }),
+    });
+
+    const maxDateNode = () => h(QInput, {
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      modelValue: max.value,
+      'onUpdate:modelValue': (v) => {
+        max.value = v;
+        emit('input', v);
+      },
+    }, {
+      default: () => h(QPopupProxy, {
+        transitionShow: "scale",
+        transitionHide: "scale",
+        modelValue: showMaxPopup.value,
+      },() => h('span', {
+        class: 'row'
+      }, [
+        h(QDate, {
+          modelValue: max.value,
+
+          options: maxDateOptions.value,
+          todayTtn: true,
+          mask: 'YYYY-MM-DD',
+          locale,
+
+          'onUpdate:modelValue': (v) => {
+            max.value = v;
+
+            // TODO: not working, should close the popup but not
+            showMaxPopup.value = false;
+            emit('input', v);
+          },
+        })
+      ])),
+      append: () => h(QIcon, {
+        class: 'cursor-pointer',
+        name: 'event'
+      }),
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-date row items-center no-wrap',
+    }, [
+      props.Field.ReadOnly ? readonlyNode() : h('div', {
+        class: 'row items-center no-wrap'
+      }, [
+        minDateNode(),
+        h('span', {
+          class: 'input-field-range-separator'
+        },props.Field.Separator || '~'),
+        maxDateNode(),
+      ]),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});