free-fe-core-modules 0.0.2 → 0.0.3

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

@@ -3,7 +3,7 @@
     <span
       :class="`field-label ${(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"
@@ -51,9 +51,8 @@
               <free-field
                 v-for="(f,fIndex) in r[rk].List"
                 :key="fIndex"
-                :Field="cellField(f)"
-                v-bind="cellField(f)"
-                :values="fieldData"
+                :Field="{...f, ReadOnly: Field.ReadOnly || f.ReadOnly}"
+                :values="fieldData.value"
                 @input="cellChanged(f)"
                 :ref="`input_field_validator_${index}`"
               ></free-field>
@@ -63,10 +62,9 @@
               class="full-width full-height"
             >
               <free-field
-                :Field="cellField(r[rk].List[0])"
-                :values="fieldData"
+                :Field="{...r[rk].List[0], ReadOnly: Field.ReadOnly || r[rk].List[0].ReadOnly}"
+                :values="fieldData.value"
                 @input="cellChanged(r[rk].List[0])"
-                v-bind="cellField(r[rk].List[0])"
                 borderless
                 :ref="`input_field_validator_extra_${index}`"
               ></free-field>
@@ -91,12 +89,11 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { computed, defineComponent } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldMixedTable',
-  mixins: [mixins.InputFieldMixin],
   emits:['input'],
   fieldInfo: {
     Category: 'Table',
@@ -271,34 +268,31 @@ export default defineComponent({
       }
     },
   },
-  computed: {
-    rowCells() {
-      return (r) => {
-        if (!r) return [];
-        return Object.keys(r).filter(
-          (rkk) => {
-            if (!rkk) return false;
-
-            // eslint-disable-next-line no-restricted-globals
-            return !isNaN(Number(rkk)) && Number(rkk) < r.rowSize;
-          },
-        );
-      };
-    },
-    cellField() {
-      return (f) => {
-        if (!f) return {};
-        f.ReadOnly = this.Field.ReadOnly || f.ReadOnly;
+  props: {
+    ...freeFieldProps,
+  },
+  setup(props, { emit }) {
+    if (!props.Field) return () => null;
 
-        return f;
-      };
-    },
-    columns() {
-      if (!this.Field.Options || !this.Field.Options.Rows) return [];
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const rowCells = (r) => {
+      if (!r) return [];
+      return Object.keys(r).filter(
+        (rkk) => {
+          if (!rkk) return false;
+
+          return !isNaN(Number(rkk)) && Number(rkk) < r.rowSize;
+        },
+      );
+    };
+
+    const columns = computed(() => {
+      if (!props.Field.Options?.Rows) return [];
 
       let cols = 0;
-      for (let i = 0; i < this.Field.Options.Rows.length; i += 1) {
-        const r = this.Field.Options.Rows[i];
+      for (let i = 0; i < props.Field.Options.Rows.length; i += 1) {
+        const r = props.Field.Options.Rows[i];
 
         for (let j = 0; j < Object.keys(r).length; j += 1) {
           const rk = Number(Object.keys(r)[j]);
@@ -317,51 +311,49 @@ export default defineComponent({
       }
 
       return ret;
-    },
-    summaryContent() {
+    })
+
+    const summaryContent = computed(() => {
       if (
-        !this.fieldData
-        || !this.Field
-        || !this.Field.Options
-        || !this.Field.Options.Summary
-        || !this.Field.Options.Summary.Pattern
+        !fieldData.value
+        || !props.Field.Options?.Summary?.Pattern
       ) {
         return '';
       }
-      let summaryText = this.Field.Options.Summary.Pattern;
+      let summaryText = props.Field.Options.Summary.Pattern;
 
-      for (let i = 0; i < this.Field.Options.Summary.Fields.length; i += 1) {
-        const sf = this.Field.Options.Summary.Fields[i];
+      for (let i = 0; i < props.Field.Options.Summary.Fields.length; i += 1) {
+        const sf = props.Field.Options.Summary.Fields[i];
         const fList = (sf || '').Field.split(',');
         let vi = 0;
         for (let j = 0; j < fList.length; j += 1) {
           const ff = fList[j];
 
-          vi += Number(Object.nestValue(this.fieldData, ff.trim())) || 0;
+          vi += Number(Object.nestValue(fieldData.value, ff.trim())) || 0;
         }
 
         // round vi
         vi = vi.toFixed(
-          (this.Field
-          && this.Field.Options
-          && this.Field.Options.Summary
-          && this.Field.Options.Summary.Digits)
-          || 2,
+          props.Field.Options?.Summary?.Digits || 2,
         );
 
         summaryText = summaryText.replace(`$\{${i + 1}}`, vi);
       }
       return summaryText;
-    },
-  },
-  created() {
-    this.fieldData = this.fieldData || {};
-  },
-  methods: {
-    cellChanged(f) {
-      this.$emit('input', f);
-      this.$emit('input');
-    },
+    });
+
+    return {
+      fieldData,
+      setFieldData,
+
+      rowCells,
+      columns,
+      summaryContent,
+
+      cellChanged: (f) => {
+        emit('input', f);
+      },
+    }
   },
 });
 </script>

package/free-field/Fields/Number.js

@@ -0,0 +1,167 @@
+import { defineComponent, h, watch } 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: 'InputFieldNumber',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '数字',
+    Value: 'Number',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '前缀',
+        Name: 'Options.Prefix',
+      },
+      {
+        Type: 'String',
+        Label: '后缀',
+        Name: 'Options.Postfix',
+      },
+      {
+        Type: 'Number',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'Number',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+      {
+        Type: 'DynamicList',
+        Label: '附加字段',
+        Name: 'Options.Extra',
+        Options: {
+          Columns: [
+            {
+              Label: '值范围',
+              Name: 'Value',
+              Type: 'Labels',
+              Options: {
+                Batch: true,
+              },
+            },
+            {
+              Label: '不在其中时',
+              Type: 'Boolean',
+              Name: 'WhenNotIn',
+              Default: false,
+            },
+            {
+              Label: '字段',
+              Name: 'List',
+              Type: 'FieldList',
+              Options: {
+                Columns: [
+                  {
+                    Label: '#',
+                    Name: 'Index',
+                    sortable: true,
+                  },
+                  {
+                    Label: '名称',
+                    Name: 'Name',
+                    style: 'max-width: 200px;',
+                    sortable: true,
+                  },
+                  {
+                    Label: '标题',
+                    Name: 'Label',
+                    style: 'max-width: 200px;',
+                    sortable: true,
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    // keep between the min and max value
+    watch(fieldData, (d) => {
+      if (!d) return;
+
+      if (!Number(d) && Number(d) !== 0) return;
+
+      let v = d;
+      if (props.Field.MinValue !== void 0 && Number(props.Field.MinValue) > v) {
+        v = Number(props.Field.MinValue);
+      }
+      if (props.Field.MaxValue !== void 0 && Number(props.Field.MaxValue) < v) {
+        v = Number(props.Field.MaxValue);
+      }
+
+      setFieldData(v);
+    })
+
+    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, {
+      type: 'number',
+      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-number row items-center no-wrap',
+    }, [
+      props.Field.ReadOnly ? readonlyNode() : inputNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Password.js

@@ -0,0 +1,81 @@
+import { defineComponent, h, ref } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QInput, QIcon } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldPassword',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '密码',
+    Value: 'Password',
+    Description: '',
+    Extra: [
+      {
+        Type: 'Boolean',
+        Label: '自动填入',
+        Name: 'Options.autocomplete',
+        Default: 'false',
+      },
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+    ],
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+    const isPwd = ref(true);
+
+    const before = () => h(freeFieldLabel, {
+      Field: props.Field,
+    });
+
+    const append = () => h(QIcon,{
+      class: 'cursor-pointer',
+      name: isPwd.value ? 'visibility_off' : 'visibility',
+      onClick: () => {
+        isPwd.value = !isPwd.value;
+      },
+    });
+
+    const inputNode = () => h(QInput, {
+      type: isPwd.value ?  'password' : 'text',
+      maxlength: props.Field.Options?.MaxLength,
+      autocomplete: props.Field.Options?.autocomplete ? '' : 'new-password',
+      // 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,
+      append,
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-password row items-center no-wrap',
+    }, [
+      inputNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

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

@@ -3,10 +3,10 @@
     <slot name="warning"></slot>
     <div class="buttons relative-position" v-if="Field && Field.ShowButtons">
       <span class="q-ml-lg select-all-btn">
-        <q-btn round icon="check" @click="fieldData = Object.assign({},serviceList)"></q-btn>
+        <q-btn round icon="check" @click="setFieldData(Object.assign({},serviceList))"></q-btn>
       </span>
       <span class="q-ml-md clear-btn">
-        <q-btn round icon="clear" @click="fieldData = {}"></q-btn>
+        <q-btn round icon="clear" @click="setFieldData({})"></q-btn>
       </span>
     </div>
     <div class="roles relative-position row items-center">
@@ -17,12 +17,12 @@
         :key="idx"
         :val="r.Name"
         :label="r.Name || idx"
-        @input="fieldData = r.Permission || {};$emit('input')"/>
+        @input="setFieldData(r.Permission || {})"/>
     </div>
     <permission-editor
       v-if="Field && !Field.HideEditor"
       class="permission-editor"
-      :Permission="fieldData"
+      :Permission="fieldData.value"
       :Service="serviceList"
       :readonly="Field.ReadOnly"
       @changed="permissionChanged"
@@ -33,12 +33,14 @@
 
 <script>
 import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import PermissionEditor from './PermissionEditor';
 
 export default defineComponent({
   name: 'InputFieldPermission',
-  mixins: [mixins.InputFieldMixin],
+  props: {
+    ...freeFieldProps,
+  },
   emits:['input'],
   fieldInfo: {
     Category: 'Advanced',
@@ -53,6 +55,14 @@ export default defineComponent({
       currentRole: null
     };
   },
+  setup(props) {
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    return {
+      fieldData,
+      setFieldData,
+    }
+  },
   created() {
     // get all service list
     if (this.Field.Type === 'Permission' && !!this.Field.ServiceList) {
@@ -65,13 +75,7 @@ export default defineComponent({
   },
   methods: {
     permissionChanged(v) {
-      if (!v && this.data) {
-        this.data[this.Field.Name] = {};
-      } else if (v) {
-        this.data[this.Field.Name] = v;
-      }
-
-      this.$emit('input');
+      this.setFieldData(v);
     },
   },
 });