free-fe-core-modules 0.0.2 → 0.0.4

package/{field-components → free-field}/Fields/Rich.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"
@@ -55,55 +55,21 @@
         :disabled="Field.ReadOnly"
         toolbar
         value
-        v-model="fieldData"
-        @onChange="validate();$emit('input')"
+        v-model="fieldData.value"
+        @update:model-value="tinyChanged"
       />
     </span>
   </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, watchEffect, ref } from 'vue';
 import tiny from '@tinymce/tinymce-vue';
-
-function fileSizeStrToNumber(s) {
-  if (!s) return undefined;
-
-  const sizeMatch = s.match(/^([0-9]*)(k|m|g*)(b*)/);
-
-  if (sizeMatch) {
-    // eslint-disable-next-line no-unused-vars
-    // const [tmp, num, unit] = sizeMatch;
-    const num = sizeMatch[1];
-    const unit = sizeMatch[2];
-    if (!num || !Number(num)) return '';
-
-    let multi = 1;
-    switch (unit) {
-      case 'k':
-        multi = 1024;
-        break;
-      case 'm':
-        multi = 1024 * 1024;
-        break;
-      case 'g':
-        multi = 1024 * 1024 * 1024;
-        break;
-      default:
-        multi = 1024;
-        break;
-    }
-
-    return Number(num) * multi;
-  }
-
-  return undefined;
-}
+import { fileSizeStrToNumber } from '../composible/useFileSizeUtils';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldRich',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'Advanced',
     Label: '所见即所得',
@@ -144,12 +110,24 @@ export default defineComponent({
     tiny,
   },
   props: {
+    ...freeFieldProps,
     enableField: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      isValid: true,
-      plugins: [
+  setup(props, { expose, emit })  {
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const readonlyContent = ref(null);
+    const tiny = ref(null);
+
+    // TODO: 设置默认warning信息不生效
+    if (props.Field.Warning) {
+      Object.setValue(props.Field, 'Warning', `可嵌入图片、视频、超级链接。内容不可超过${(props.Field.Options?.MaxLength) || 1000}字，内容总大小不可超过${(props.Field.Options?.MaxSize) || '5m'}。较大图片或视频请使用超链接！`);
+    }
+
+    const isValid = ref(true);
+    const plugins = [
         'print',
         // 'preview',
         'paste',
@@ -186,9 +164,9 @@ export default defineComponent({
         // 'charmap',
         'quickbars',
         'emoticons',
-      ],
-      menubar: ['insert', 'format', 'table'],
-      toolbar: [
+      ];
+    const menubar = ['insert', 'format', 'table'];
+    const toolbar = [
         'undo',
         'redo',
         '|',
@@ -221,8 +199,8 @@ export default defineComponent({
         '|',
         'code',
         'insertFieldButton',
-      ],
-      quickbars_selection_toolbar: [
+      ];
+    const quickbars_selection_toolbar = [
         'bold',
         'italic',
         '|',
@@ -234,49 +212,39 @@ export default defineComponent({
         'quicktable',
         '|',
         'insertFieldButton',
-      ],
-      contextmenu: ['link', 'image', 'table'],
-    };
-  },
-  watch: {
-    fieldData() {
-      if (this.$refs.readonlyContent && this.Field.ReadOnly && this.fieldData) {
-        this.$refs.readonlyContent.innerHTML = this.fieldData;
-      }
-    },
-  },
-  created() {
-    if (this.$refs.readonlyContent && this.Field.ReadOnly) {
-      this.$refs.readonlyContent.innerHTML = this.fieldData;
+      ];
+    const contextmenu = ['link', 'image', 'table'];
+
+    if (props.Field.ReadOnly) {
+      watchEffect(() => {
+        readonlyContent.value.innerHTML = fieldData.value;
+      });
     }
 
-    this.Field.Warning = this.Field.Warning
-    || `可嵌入图片、视频、超级链接。内容不可超过${(this.Field.Options && this.Field.Options.MaxLength) || 1000}字，内容总大小不可超过${(this.Field.Options && this.Field.Options.MaxSize) || '5m'}。较大图片或视频请使用超链接！`;
-  },
-  methods: {
-    validate() {
-      let isValid = true;
-      if (this.$refs.tiny) {
-        if (this.Field.Required) isValid = !!this.fieldData;
+    const validate = () => {
+      let isVal = true;
+      if (tiny.value) {
+        if (props.Field.Required) isVal = !!fieldData.value;
 
-        const rules = Array.isArray(typeof this.Field.Rules)
-          ? this.Field.Rules : [this.Field.Rules];
+        const rules = Array.isArray(typeof props.Field.Rules)
+          ? props.Field.Rules : [props.Field.Rules];
 
         for (let i = 0; i < rules.length; i += 1) {
           const r = rules[i];
 
           if (typeof r === 'function') {
-            isValid = isValid && r(this.fieldData);
+            isVal = isVal && r(fieldData.value);
           }
         }
       }
 
-      this.isValid = isValid;
+      isValid.value = isVal;
 
-      return isValid;
-    },
-    tinySetup(editor) {
-      if (this.enableField) {
+      return isVal;
+    };
+
+    const tinySetup = (editor) => {
+      if (props.enableField) {
         editor.ui.registry.addButton('insertFieldButton', {
           text: '数据字段',
           tooltip: '插入数据字段',
@@ -289,49 +257,71 @@ export default defineComponent({
         });
       }
 
-      if (this.Field && this.Field.Options) {
-        if (this.Field.Options.MaxLength) {
-          editor.on('keydown', (e) => {
-            const allowedKeys = [8, 37, 38, 39, 40, 46];
-            if (allowedKeys.indexOf(e.keyCode) >= 0) return true;
-
-            const selectedText = editor.selection.getContent({
-              format: 'text',
-            });
+      if (props.Field.Options?.MaxLength) {
+        editor.on('keydown', (e) => {
+          const allowedKeys = [8, 37, 38, 39, 40, 46];
+          if (allowedKeys.indexOf(e.keyCode) >= 0) return true;
 
-            if (selectedText.length <= 0
-            && editor.getContent({ format: 'text' }).length >= this.Field.Options.MaxLength) {
-              e.preventDefault();
-              e.stopPropagation();
-              return false;
-            }
-
-            return true;
+          const selectedText = editor.selection.getContent({
+            format: 'text',
           });
-        }
-        if (this.Field.Options.MaxSize) {
-          const maxSize = fileSizeStrToNumber(this.Field.Options.MaxSize);
 
-          editor.on('keydown', (e) => {
-            const allowedKeys = [8, 37, 38, 39, 40, 46];
-            if (allowedKeys.indexOf(e.keyCode) >= 0) return true;
+          if (selectedText.length <= 0
+          && editor.getContent({ format: 'text' }).length >= props.Field.Options.MaxLength) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+          }
 
-            const selectedText = editor.selection.getContent({
-              format: 'text',
-            });
+          return true;
+        });
+      }
+      if (props.Field.Options?.MaxSize) {
+        const maxSize = fileSizeStrToNumber(props.Field.Options.MaxSize);
 
-            if (selectedText.length <= 0
-            && editor.getContent({ format: 'html' }).length >= maxSize) {
-              e.preventDefault();
-              e.stopPropagation();
-              return false;
-            }
+        editor.on('keydown', (e) => {
+          const allowedKeys = [8, 37, 38, 39, 40, 46];
+          if (allowedKeys.indexOf(e.keyCode) >= 0) return true;
 
-            return true;
+          const selectedText = editor.selection.getContent({
+            format: 'text',
           });
-        }
+
+          if (selectedText.length <= 0
+          && editor.getContent({ format: 'html' }).length >= maxSize) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+          }
+
+          return true;
+        });
       }
-    },
+    };
+
+    const tinyChanged = (v) => {
+      validate();
+      setFieldData(v, emit);
+    };
+
+    expose({
+      validate,
+    })
+
+    return {
+      isValid,
+      fieldData,
+      readonlyContent,
+      tiny,
+      tinySetup,
+      tinyChanged,
+
+      plugins,
+      menubar,
+      toolbar,
+      quickbars_selection_toolbar,
+      contextmenu,
+    };
   },
 });
 </script>

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

@@ -32,7 +32,8 @@
             row-key="id"
             :pagination="searchPagination"
             :selection="Field.Multiple ? 'multiple' : 'single'"
-            v-model:selected="searchSelected"
+            :selected="searchSelected"
+            @update:selected="searchSelected = $event"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -108,7 +109,7 @@
         :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 || ''}}
@@ -120,11 +121,10 @@
     </span>
     <q-input
       v-else
-      v-model="searchDisplay"
+      modelValue=""
       :type="`${Field && Field.Multiple ? 'textarea' : ''}`"
       hide-bottom-space
       readonly
-      v-bind="$attrs"
       :class="`${Field && Field.Multiple
         ? '' : 'simple-field'} ${searchDisplay ? 'has-data' : 'empty'}`"
       :ref="`input_field_validator_${Field.Name || Field.Label}`"
@@ -150,7 +150,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" anchor="top right">{{Field.Description}}</q-tooltip>
           {{Field.Label || ''}}
@@ -174,12 +174,14 @@
 
 <script>
 import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldSearch',
-  mixins: [mixins.InputFieldMixin],
   emits:['input'],
+  props: {
+    ...freeFieldProps,
+  },
   fieldInfo: {
     Category: 'Advanced',
     Label: '搜索',
@@ -284,6 +286,16 @@ export default defineComponent({
     ],
     Description: '',
   },
+  setup(props) {
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    return {
+      fieldData,
+      setFieldData,
+    };
+  },
   data() {
     return {
       searchKey: '',
@@ -302,16 +314,12 @@ export default defineComponent({
   },
   computed: {
     searchColumns() {
-      if (
-        !this.Field
-        || !this.Field.Options
-        || !this.Field.Options.SearchColumns
-      ) {
+      if (!this.Field?.Options?.SearchColumns) {
         return [];
       }
 
       const cls = [];
-      this.Field.Options.SearchColumns.forEach((c) => {
+      (this.Field?.Options?.SearchColumns || []).forEach((c) => {
         const newC = { ...c };
         newC.name = c.Name;
         newC.label = c.Label;
@@ -336,14 +344,14 @@ export default defineComponent({
     },
   },
   watch: {
-    data(n, o) {
+    fieldData(n, o) {
       // init search data from exist id
-      if (typeof this.fieldData === 'undefined') {
+      if (typeof this.fieldData.value === 'undefined') {
         this.searchSelected = [];
         this.searchData = {};
         this.searchDisplay = '';
         this.searchKey = '';
-      } else if (this.Field.Type === 'Search' && this.data) {
+      } else if (this.Field.Type === 'Search' && this.fieldData.value) {
         if (n && o) {
           const nV = Object.nestValue(n, this.Field.Name);
           const oV = Object.nestValue(o, this.Field.Name);
@@ -354,8 +362,8 @@ export default defineComponent({
         if (this.Field.Options && this.Field.Options.SearchUrl) {
           const paramObj = {};
           paramObj[this.Field.Options.SearchField || 'id'] = this.Field.Multiple
-            ? JSON.stringify(Object.nestValue(this.data, this.Field.Name))
-            : Object.nestValue(this.data, this.Field.Name);
+            ? JSON.stringify(this.fieldData.value)
+            : this.fieldData.value;
 
           this.getRequest(
               `${this.Field.Options.SearchUrl}`,
@@ -404,9 +412,8 @@ export default defineComponent({
   methods: {
     search(p) {
       if (
-        !this.Field.Options
-        || !this.Field.Options.SearchUrl
-        || (!this.searchKey && !this.Field.Options.AllowEmptySearch)
+        !this.Field?.Options?.SearchUrl
+        || (!this.searchKey && !this.Field?.Options?.AllowEmptySearch)
       ) {
         return;
       }
@@ -419,7 +426,7 @@ export default defineComponent({
           if (d && d.msg === 'OK') {
             const { data } = d;
             if (data) {
-              for (let i = 0; i < data.docs.length; i += 1) {
+              for (let i = 0; i < data.docs?.length; i += 1) {
                 const dc = data.docs[i];
 
                 dc.index = (data.page - 1) * data.limit + i + 1;
@@ -439,11 +446,13 @@ export default defineComponent({
           ? this.searchSelected : [this.searchSelected[0]];
 
         const sFieldName = this.Field.SearchField || 'id';
-        this.fieldData = selected.map(
+
+        this.setFieldData(selected.map(
           (ss) => Object.nestValue(ss, sFieldName),
-        ).filter((ss) => !!ss);
+        ).filter((ss) => !!ss));
+
         if (!this.Field || !this.Field.Multiple) {
-          [this.fieldData] = this.fieldData;
+        this.setFieldData(this.fieldData.value[0]);
         }
 
         const sdFieldName = this.Field.Options.SearchDisplayField || 'id';
@@ -459,7 +468,7 @@ export default defineComponent({
 
       if (!this.Field || !this.Field.Multiple) {
         this.searchSelected = [];
-        this.fieldData = undefined;
+        this.setFieldData(undefined);
 
         this.$emit('input');