free-fe-core-modules 0.0.2 → 0.0.4

package/free-field/Fields/String.js

@@ -0,0 +1,105 @@
+import { defineComponent, h } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QInput } from 'quasar';
+import ReadonlyContent from '../composible/readonlyContent';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldString',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '字符串',
+    Value: 'String',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '前缀',
+        Name: 'Options.Prefix',
+      },
+      {
+        Type: 'String',
+        Label: '后缀',
+        Name: 'Options.Postfix',
+      },
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+      {
+        Type: 'Labels',
+        Label: '类型检查',
+        Name: 'rules',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const readonlyNode = () => h(ReadonlyContent, {
+      Field: props.Field,
+      Content: fieldData.value,
+    });
+
+    const before = () => h(freeFieldLabel, {
+      Field: props.Field,
+    });
+
+    const prepend = slots.prepend ? slots.prepend() : (props.Field.Options?.Prefix && h('span',{
+      class: 'prefix',
+    }, props.Field.Options?.Prefix));
+
+    const append = slots.append ? slots.append() : (props.Field.Options?.Postfix && h('span',{
+      class: 'postfix',
+    }, props.Field.Options?.Postfix));
+
+    const inputNode = () => h(QInput, {
+      maxlength: props.Field.Options?.MaxLength,
+      autocomplete: 'off',
+      // bottomSlots: true,
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+
+      class: 'full-width',
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    }, {
+      before,
+      prepend,
+      append,
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-string row items-center no-wrap',
+    }, [
+      props.Field.ReadOnly ? readonlyNode() : inputNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Text.js

@@ -0,0 +1,80 @@
+import { defineComponent, h, ref, watchEffect } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QInput } from 'quasar';
+import ReadonlyContent from '../composible/readonlyContent';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldText',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '文本',
+    Value: 'Text',
+    Extra: [
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const rows = ref(3);
+
+    watchEffect(()  => {
+      const fVal = fieldData.value;
+      const contentLines = (fVal && typeof fVal === 'string') ? Math.max((fVal.match(/\n/g) || '').length + 1, fVal.length / 20) : 8;
+      rows.value = (props.Field.ReadOnly) ? Math.min(contentLines, 20) : 8;
+    })
+
+    const readonlyNode = () => h(ReadonlyContent, {
+      Field: props.Field,
+      Content: fieldData.value,
+    });
+
+    const before = () => h(freeFieldLabel, {
+      Field: props.Field,
+    });
+
+    const inputNode = () => h(QInput, {
+      type: 'textarea',
+      maxlength: props.Field.Options?.MaxLength,
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+      rows: rows.value,
+
+      class: 'full-width',
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    }, {
+      before,
+    });
+
+    return () => h('div', {
+      class: 'input-field-text',
+    }, [
+      slots.warning && h('div', {
+        class: props.Field.Label ? 'warning-with-label' : 'warning-without-label',
+      }, slots.warning()),
+      props.Field.ReadOnly ? readonlyNode() : inputNode(),
+    ]);
+  },
+});

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

@@ -4,18 +4,18 @@
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
           ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-        v-if="typeof Field.Label !== 'undefined'">
+        v-if="Field.Label !== void 0">
         <q-tooltip v-if="Field.Description" anchor="top right">{{Field.Description}}</q-tooltip>
         {{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>
-    <q-input v-else v-model="fieldData" hide-bottom-space
+    <q-input v-else v-model="fieldData.value" hide-bottom-space
       :readonly="Field.ReadOnly"
-      v-bind="$attrs" @input="$emit('input')"
+      @input="$emit('input')"
       :ref="`input_field_validator_${Field.Name || Field.Label}`">
-      <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' : ''}`">
@@ -27,20 +27,20 @@
       <q-popup-proxy v-if="!Field.ReadOnly" transition-show="scale" transition-hide="scale">
         <span class="row">
           <q-date
-            v-model="fieldData"
+            :modelValue="fieldData.value"
             mask="YYYY-MM-DD HH:mm:ss"
             :hour-options="hourOptions"
             :minute-options="minuteOptions"
             :second-options="secondOptions"
             :options="timeOptions"
-            @input="$emit('input')"
+            @update:modelValue="changed"
             :locale="locale"
           />
           <q-time
-            v-model="fieldData"
+            :modelValue="fieldData.value"
             mask="YYYY-MM-DD HH:mm:ss"
             format24h
-            @input="$emit('input')"
+            @update:modelValue="changed"
           />
         </span>
       </q-popup-proxy>
@@ -54,12 +54,11 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { computed, defineComponent, getCurrentInstance } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldTime',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'DateTime',
     Label: '时间',
@@ -88,34 +87,37 @@ export default defineComponent({
     ],
     Description: '',
   },
-  data() {
-    return {};
+  props: {
+    ...freeFieldProps,
   },
-  computed: {
-    locale() {
-      return this.ctx.config.locales.find(
-        (l) => l.locale === (this.ctx.config.locale || this.ctx.config.defaultLocale),
-      ).calendar;
-    },
-    hourOptions() {
-      return this.objOptions ? this.objOptions[0] : undefined;
-    },
-    minuteOptions() {
-      return this.objOptions ? this.objOptions[1] : undefined;
-    },
-    secondOptions() {
-      return this.objOptions ? this.objOptions[2] : undefined;
-    },
-    objOptions() {
-      if (this.Field.Options) {
-        return this.Field.Options;
-      }
-      return undefined;
-    },
-    timeOptions() {
-      if (this.objOptions) return undefined;
+  emits:['input'],
+  setup(props, { emit }) {
+    if (!props.Field) return () => null;
+
+    const { proxy:vm } = getCurrentInstance();
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const locale = vm.ctx.config.locales.find(
+      (l) => l.locale === (vm.ctx.config.locale || vm.ctx.config.defaultLocale),
+    )?.calendar;
+
+
+    const hourOptions = computed(() => {
+      return objOptions.value ? objOptions.value[0] : undefined;
+    });
+    const minuteOptions = computed(() => {
+      return objOptions.value ? objOptions.value[1] : undefined;
+    });
+    const secondOptions = computed(() => {
+      return objOptions.value ? objOptions.value[2] : undefined;
+    });
+    const objOptions = computed(() => props.Field.Options || undefined);
 
-      if (!this.Field.MinValue && !this.Field.MaxValue) {
+    const timeOptions = computed(() => {
+      if (objOptions.value) return undefined;
+
+      if (!props.Field.MinValue && !props.Field.MaxValue) {
         return undefined;
       }
 
@@ -123,15 +125,15 @@ export default defineComponent({
       let minM;
       let minS;
 
-      if (this.Field.MinValue) {
-        [minH, minM, minS] = this.Field.MinValue;
+      if (props.Field.MinValue) {
+        [minH, minM, minS] = props.Field.MinValue;
       }
 
       let maxH;
       let maxM;
       let maxS;
-      if (this.Field.MaxValue) {
-        [maxH, maxM, maxS] = this.Field.MaxValue;
+      if (props.Field.MaxValue) {
+        [maxH, maxM, maxS] = props.Field.MaxValue;
       }
 
       minH = minH || 0;
@@ -154,7 +156,21 @@ export default defineComponent({
         }
         return true;
       };
-    },
+    });
+
+    return {
+      fieldData,
+      locale,
+
+      hourOptions,
+      minuteOptions,
+      secondOptions,
+      timeOptions,
+
+      changed: (v) => {
+        setFieldData(v, emit);
+      }
+    };
   },
 });
 </script>

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

@@ -4,16 +4,16 @@
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
             ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-        v-if="typeof Field.Label !== 'undefined'"
+        v-if="Field.Label !== void 0"
       >
         <q-tooltip v-if="Field.Description" anchor="top right">{{Field.Description}}</q-tooltip>
         {{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">
-      <span v-if="typeof Field.Label !== 'undefined'" class="q-field__before">
+      <span v-if="Field.Label !== void 0" class="q-field__before">
         <span
           :class="`field-label ${(Field.Label && Field.Label.trim().length)
           ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
@@ -25,7 +25,6 @@
       </span>
       <q-input
         v-model="min"
-        v-bind="$attrs"
         hide-bottom-space
         :readonly="Field.ReadOnly"
         :ref="`input_field_validator_first`"
@@ -61,7 +60,6 @@
 
       <q-input
         v-model="max"
-        v-bind="$attrs"
         hide-bottom-space
         :readonly="Field.ReadOnly"
         :ref="`input_field_validator_second`"
@@ -98,12 +96,14 @@
 </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: 'InputFieldTimeRange',
-  mixins: [mixins.InputFieldMixin],
+  props: {
+    ...freeFieldProps,
+  },
   emits:['input'],
   fieldInfo: {
     Category: 'DateTime',
@@ -155,84 +155,85 @@ export default defineComponent({
     ],
     Description: '',
   },
-  data() {
-    return {
-      min: '',
-      max: '',
+  setup(props, { emit }) {
+    if (!props.Field) return () => null;
+
+    const { proxy:vm } = getCurrentInstance();
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const updateFieldDate = () => {
+      setFieldData([min.value, max.value].join(props.Field.Separator || '~'), emit);
     };
-  },
-  watch: {
-    fieldData() {
-      const yl = (this.fieldData || '').split(this.Field.Separator || '~');
-      this.min = yl[0] && yl[0].trim();
-      this.max = yl[1] && yl[1].trim();
-    },
-    min() {
-      this.fieldData = [this.min, this.max].join(this.Field.Separator || '~');
-      this.$emit('input');
-    },
-    max() {
-      this.fieldData = [this.min, this.max].join(this.Field.Separator || '~');
-      this.$emit('input');
-    },
-  },
-  computed: {
-    locale() {
-      return this.ctx.config.locales.find(
-        (l) => l.locale === (this.ctx.config.locale || this.ctx.config.defaultLocale),
-      ).calendar;
-    },
-    minDateOptions() {
+
+    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 locale = vm.ctx.config.locales.find(
+      (l) => l.locale === (vm.ctx.config.locale || vm.ctx.config.defaultLocale),
+    )?.calendar;
+
+
+    const minDateOptions = computed(() => {
       let minDate = '1900/01/01';
       let maxDate = '2050/12/31';
 
-      if (this.Field.MinValue) {
-        minDate = this.Field.MinValue.replace(/-/g, '/');
+      if (props.Field.MinValue) {
+        minDate = props.Field.MinValue.replace(/-/g, '/');
         [minDate] = minDate.split(' ');
       }
 
-      if (this.Field.TillNow) {
+      if (props.Field.TillNow) {
         maxDate = new Date().toLocaleDateString();
-      } else if (this.Field.MaxValue) {
-        maxDate = this.Field.MaxValue.replace(/-/g, '/');
+      } else if (props.Field.MaxValue) {
+        maxDate = props.Field.MaxValue.replace(/-/g, '/');
         [maxDate] = maxDate.split(' ');
       }
 
-      if (this.max && this.max.replace(/-/g, '/') < maxDate) {
-        return (date) => date >= minDate && date <= this.max.replace(/-/g, '/').split(' ')[0];
+      if (max.value && max.value.replace(/-/g, '/') < maxDate) {
+        return (date) => date >= minDate && date <= max.value.replace(/-/g, '/').split(' ')[0];
       }
 
       return (date) => date >= minDate && date <= maxDate;
-    },
-    maxDateOptions() {
+    });
+    const maxDateOptions = computed(() => {
       let minDate = '1900/01/01';
       let maxDate = '2050/12/31';
 
-      if (this.Field.MinValue) {
-        minDate = this.Field.MinValue.replace(/-/g, '/');
+      if (props.Field.MinValue) {
+        minDate = props.Field.MinValue.replace(/-/g, '/');
         [minDate] = minDate.split(' ');
       }
 
-      if (this.Field.TillNow) {
+      if (props.Field.TillNow) {
         maxDate = new Date().toLocaleDateString();
-      } else if (this.Field.MaxValue) {
-        maxDate = this.Field.MaxValue.replace(/-/g, '/');
+      } else if (props.Field.MaxValue) {
+        maxDate = props.Field.MaxValue.replace(/-/g, '/');
         [maxDate] = maxDate.split(' ');
       }
 
-      if (this.min && this.min.replace(/-/g, '/') > minDate) {
-        return (date) => date >= this.min.replace(/-/g, '/').split(' ')[0] && date <= maxDate;
+      if (min.value && min.value.replace(/-/g, '/') > minDate) {
+        return (date) => date >= min.value.replace(/-/g, '/').split(' ')[0] && date <= maxDate;
       }
 
       return (date) => date >= minDate && date <= maxDate;
-    },
-    minTimeLimit() {
-      if (this.min && this.Field.MinValue) {
+    });
+    const minTimeLimit = computed(() => {
+      if (min.value && props.Field.MinValue) {
         try {
-          const dSplit = this.Field.MinValue.split(' ');
+          const dSplit = props.Field.MinValue.split(' ');
           const mD = dSplit[0];
 
-          if (this.min.split(' ')[0] <= mD) {
+          if (min.value.split(' ')[0] <= mD) {
             const [mH, mM] = dSplit[1].split(':');
 
             if (mH && mM) {
@@ -251,14 +252,14 @@ export default defineComponent({
         hour: (t) => t >= 0,
         minute: (t) => t >= 0,
       };
-    },
-    maxTimeLimit() {
-      if (this.max && this.Field.MaxValue) {
+    });
+    const maxTimeLimit = computed(() => {
+      if (max.value && props.Field.MaxValue) {
         try {
-          const dSplit = this.Field.MaxValue.split(' ');
+          const dSplit = props.Field.MaxValue.split(' ');
           const mD = dSplit[0];
 
-          if (this.max.split(' ')[0] >= mD) {
+          if (max.value.split(' ')[0] >= mD) {
             const [mH, mM] = dSplit[1].split(':');
 
             if (mH && mM) {
@@ -277,33 +278,30 @@ export default defineComponent({
         hour: (t) => t >= 0,
         minute: (t) => t >= 0,
       };
-    },
-    minHourOptions() {
-      return this.objOptions
-        ? (this.objOptions.hour || []).filter(this.minTimeLimit.hour) : undefined;
-    },
-    minMinuteOptions() {
-      return this.objOptions
-        ? (this.objOptions.minute || []).filter(this.minTimeLimit.minute) : undefined;
-    },
-    maxHourOptions() {
-      return this.objOptions
-        ? (this.objOptions.hour || []).filter(this.maxTimeLimit.hour) : undefined;
-    },
-    maxMinuteOptions() {
-      return this.objOptions
-        ? (this.objOptions.minute || []).filter(this.maxTimeLimit.minute) : undefined;
-    },
-    objOptions() {
-      if (this.Field.Options) {
-        return this.Field.Options;
-      }
-      return undefined;
-    },
-    timeOptions() {
-      if (this.objOptions) return undefined;
+    });
+    const minHourOptions = computed(() => {
+      return objOptions.value
+        ? (objOptions.value.hour || []).filter(minTimeLimit.value.hour) : undefined;
+    });
+    const minMinuteOptions = computed(() => {
+      return objOptions.value
+        ? (objOptions.value.minute || []).filter(minTimeLimit.value.minute) : undefined;
+    });
+    const maxHourOptions = computed(() => {
+      return objOptions.value
+        ? (objOptions.value.hour || []).filter(maxTimeLimit.value.hour) : undefined;
+    });
+    const maxMinuteOptions = computed(() => {
+      return objOptions.value
+        ? (objOptions.value.minute || []).filter(maxTimeLimit.value.minute) : undefined;
+    });
 
-      if (!this.Field.MinValue && !this.Field.MaxValue) {
+    const objOptions = computed(() => props.Field.Options || undefined);
+
+    const timeOptions = computed(() => {
+      if (objOptions.values) return undefined;
+
+      if (!props.Field.MinValue && !props.Field.MaxValue) {
         return undefined;
       }
 
@@ -311,15 +309,15 @@ export default defineComponent({
       let minM;
       let minS;
 
-      if (this.Field.MinValue) {
-        [minH, minM, minS] = this.Field.MinValue;
+      if (props.Field.MinValue) {
+        [minH, minM, minS] = props.Field.MinValue;
       }
 
       let maxH;
       let maxM;
       let maxS;
-      if (this.Field.MaxValue) {
-        [maxH, maxM, maxS] = this.Field.MaxValue;
+      if (props.Field.MaxValue) {
+        [maxH, maxM, maxS] = props.Field.MaxValue;
       }
 
       minH = minH || 0;
@@ -342,7 +340,24 @@ export default defineComponent({
         }
         return true;
       };
-    },
+    });
+
+    return {
+      fieldData,
+      locale,
+
+      minDateOptions,
+      maxDateOptions,
+      minHourOptions,
+      minMinuteOptions,
+      maxHourOptions,
+      maxMinuteOptions,
+      timeOptions,
+
+      changed: (v) => {
+        setFieldData(v, emit);
+      }
+    };
   },
 });
 </script>