free-fe-core-modules 0.0.16 → 0.0.17

package/free-field/composible/fieldWrapper.js

@@ -13,6 +13,7 @@ import {
 import { freeFieldProps } from "./useFreeField";
 import { useFormValidator } from '../../composible/useFormValidator';
 
+import '../style.scss';
 
 export default defineComponent({
   name: "FreeFieldWrapper",
@@ -71,6 +72,7 @@ export default defineComponent({
         // eslint-disable-next-line no-eval
         return eval(funcStr);
       } catch (ex) {
+        console.error(ex)
         return undefined;
       }
     };
@@ -154,13 +156,13 @@ export default defineComponent({
 
     const warningSlot = (!props.noWarning && localField.value.Warning)
       && h('span', {
-        class: 'input-field-warning no-wrap',
+        class: 'free-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),
+        h('span', { class: 'free-field-warning-icon' }),
+        h('span', { class: 'free-field-warning-icon-sign-top' }),
+        h('span', { class: 'free-field-warning-icon-sign-dot' }),
+        h('span', { class: 'free-field-warning-text ellipsis' }, localField.value.Warning),
       ]
     );
 
@@ -169,7 +171,7 @@ export default defineComponent({
     watchEffect(() => {
       (realComponent?.value?.emits || []).forEach((em) => {
         if (!em || em === 'input') return;
-  
+
         const captEm = `${em[0].toUpperCase()}${em.substring(1)}`;
         compEmits.value[`on${captEm}`] = (...args) => {
           // should not emit event directly as we were not inlucde these events in the emits list
@@ -184,7 +186,7 @@ export default defineComponent({
       });
     })
 
-    const readComp = computed(() => realComponent.value && h(
+    const realComp = computed(() => realComponent.value && h(
       realComponent.value,
       {
         Field: localField.value,
@@ -204,25 +206,149 @@ export default defineComponent({
         warning: slots.warning ? slots.warning : () => warningSlot,
       }
     ));
-    
+
     // const emitsRef = computed(() => realComponent?.value?.emits);
 
     const {
       validate,
-    } = useFormValidator(readComp);
+    } = useFormValidator(realComp);
 
     expose ({
       // emits: emitsRef.value,
       validate: () => validate.value(props.Field.Name),
     })
 
+    const fieldTip = (tip) => {
+      if (!tip || !tip.Text) return '';
+      if (!tip.Links || !Array.isArray(tip.Links) || tip.Links.length <= 0) {
+        return [{ Text: tip.Text }];
+      }
+
+      // process tip with links
+      let linkPos = [];
+      tip.Links.forEach((tl) => {
+        if (!tl || !tl.Text) return;
+
+        const start = tip.Text.indexOf(tl.Text);
+        if (start >= 0) {
+          linkPos.push({
+            ...tl,
+            start,
+            end: start + tl.Text.length,
+          });
+        }
+      });
+
+      const textSplit = [];
+      let start = 0;
+      linkPos = linkPos.sort((a, b) => a.start - b.start);
+      for (let i = 0; i < linkPos.length; i += 1) {
+        const lp = linkPos[i];
+
+        const beforeText = tip.Text.substr(start, lp.start - start);
+        if (beforeText) {
+          textSplit.push({ Text: beforeText });
+        }
+
+        textSplit.push({
+          ...lp,
+          Text: tip.Text.substr(lp.start, lp.end - lp.start),
+          Link:
+            !!lp.File && lp.isFile
+              ? vm.$filter('serverDocument', lp.File)
+              : lp.Link,
+        });
+
+        start = lp.end;
+      }
+
+      const afterText = tip.Text.substr(start);
+      if (afterText) {
+        textSplit.push({
+          Text: afterText,
+        });
+      }
+
+      if (textSplit.length > 0) return textSplit;
+
+      return [{ Text: tip.Text }];
+    };
+
+    const tipsElem = !shouldHide.value && !props.noTips && (localField.value.Tips?.length > 0) && h(
+      "div",
+      {
+        class: "free-field-tips",
+      },
+      [
+        h("span", {
+          class: "free-field-tips-prefix",
+        }),
+        h("span", {
+          class: "tips-list",
+        },
+        [
+          localField.value.Tips.map((tip) => h("span", {
+            class: "free-field-tips-tip",
+          },
+          [
+            h("span", {
+              class: "free-field-tips-tip-prefix",
+            }),
+            fieldTip(tip).map(
+              (t) => h("span", null, [
+                t.Link ? h("span", {
+                  class: "tip-link",
+                  }, [
+                    h("span", {
+                      class: "tip-link-prefix",
+                    }),
+                    t.File ? h("a", {
+                      href: t.Link,
+                      target: t.target || '_blank',
+                      download: `${t.Text}${t.File && t.File.substr(t.File.lastIndexOf('.'))}`,
+                      }, t.Text) : h("a", {
+                        href: t.Link,
+                        target: t.target || '_blank',
+                        }, t.Text),
+                    h("span", {
+                      class: "tip-link-postfix",
+                    }),
+                  ]) : (t.File ? h("span", {
+                    class: "tip-text",
+                    }, [
+                      h("span", {
+                        class: "tip-link-prefix",
+                      }),
+                      t.File,
+                      h("span", {
+                        class: "tip-link-postfix",
+                      }),
+                    ]) : h("span", {
+                      class: "tip-text",
+                      }, t.Text))
+              ])
+            ),
+            h("span", {
+              class: "free-field-tips-tip-postfix",
+            }),
+          ]
+          )),
+        ]),
+        h('span', {
+          class: 'free-field-tips-postfix',
+        })
+      ]
+    );
+
+
     return realComponent.value ? () => h(
       "div",
       {
         class: wrapperClass,
       },
       [
-        readComp.value,
+        realComp.value,
+        tipsElem,
       ]
     ) : () => null;
   },

package/free-field/composible/useFreeField.js

@@ -11,24 +11,28 @@ export function useFreeField(props, ctx) {
 
   watchEffect(() => {
     let realData = void 0;
+    let usingDft = false;
     
     if (!props.Field) {
       return;
     }
     
     if (!props.Field.Name) {
-      realData = props.Field.Value || props.Field.Default || undefined;
+      realData = props.Field.Value || props.Field.Default || void 0;
+      usingDft = true;
     } else {
-      if (props.Field.Info?.Dynamic && props.Field.Value) {
+      if (props.Field.Info?.Dynamic && props.Field.Value !== void 0) {
         realData = props.Field.Value;
+        usingDft = true;
       } else {
         realData = Object.nestValue(props.values, props.Field?.Name);
       }
     }
 
     // set to default if still undefined
-    if ((realData === void 0 || realData === null) && (props.Field.Value || props.Field.Default)) {
+    if ((realData === void 0 || realData === null) && ((props.Field.Value !== void 0) || (props.Field.Default !== void 0))) {
       realData = props.Field.Value || props.Field.Default;
+      usingDft = true;
 
       // for non-dynamic field, which have refer data, we should save this data into the field
       if (props.Field.ReferTo && !props.Field.Info?.Dynamic) {
@@ -52,9 +56,16 @@ export function useFreeField(props, ctx) {
       }
     }
 
-    // show NaN placeholder
-    if ((realData === void 0 || realData === null || realData === '') && props.Field?.Info?.ShowNaN) {
-      return vm.ctx.config.nanPlaceholder || '';
+    // // show NaN placeholder
+    // TODO: return the placeholder here will not work as expected
+    // if ((realData === void 0 || realData === null || realData === '') && props.Field?.Info?.ShowNaN) {
+    //   return vm.ctx.config.nanPlaceholder || '';
+    // }
+
+    // if we are using a default value for this field, we should set the default value to the values object
+    // so that we can get such value from anywhere else immediately
+    if (usingDft) {
+      Object.setValue(props.values, props.Field?.Name, props.Field.Value || props.Field.Default || void 0);
     }
 
     fieldData.value = realData;

package/free-field/composible/useUploader.js

@@ -0,0 +1,320 @@
+import { computed, getCurrentInstance, ref } from "vue";
+import { Notify } from 'quasar';
+
+
+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;
+}
+
+function fileSizeNumberToStr (s) {
+  if (!s) return '0K';
+
+  let sizeNum = Number(s) || 0;
+
+  if (!sizeNum || sizeNum <= 0) return '0K';
+
+  const unitList = ['B', 'K', 'M', 'G'];
+  let unit = 'B';
+  let unitIndex = 0;
+
+  while (sizeNum > 1024) {
+    if (unit === 'G') break;
+
+    unitIndex += 1;
+    unit = unitList[unitIndex];
+    sizeNum /= 1024;
+  }
+
+  return `${sizeNum.toFixed(2)}${unit}`;
+}
+
+// eslint-disable-next-line no-underscore-dangle
+function _getFileType (f) {
+  if (!f) return {};
+
+  if (f.type) {
+    const fTypes = f.type.split('/');
+    const [fType, fExt] = fTypes;
+    return {
+      fType, fExt,
+    };
+  }
+
+  if (f.id) {
+    let extname = f.id.substr(f.id.lastIndexOf('.'));
+    if (extname.startsWith('.')) {
+      extname = extname.substr(1);
+    }
+
+    extname = extname && extname.toLowerCase();
+
+    switch (extname) {
+      case 'png':
+      case 'jpg':
+      case 'jpeg':
+      case 'bmp':
+      case 'gif':
+        return { fType: 'image', fExt: extname };
+      case 'wav':
+      case 'mp3':
+        return { fType: 'audio', fExt: extname };
+      case 'mp4':
+        return { fType: 'video', fExt: extname };
+      case 'txt':
+        return { fType: 'text', fExt: extname };
+      default:
+        return { fType: 'application', fExt: extname };
+    }
+  }
+
+  return {};
+}
+
+export function useUploader(props, ctx) {
+  const { proxy:vm } = getCurrentInstance();
+
+  const showPreview = ref(false);
+  const previewFile = ref(undefined);
+  const previewType = ref(undefined);
+
+  const maxFileSize = computed(() => {
+    return fileSizeStrToNumber(props.Field?.MaxValue || '10m') * 1.1;
+  });
+
+  const maxTotalSize = computed(() => {
+    return fileSizeStrToNumber((props.Field?.Options?.MaxTotal) || '10m') * 1.1;
+  });
+
+  const acceptedFileTypes = computed(() => {
+    if (!props.Field?.Options?.Ext) return '';
+
+    const extList = props.Field.Options.Ext.split(',') || [];
+    const typeList = [];
+
+    const MIME_TYPE_LIST = {
+      mp4: 'video/mp4',
+      avi: 'video/x-msvideo',
+      bmp: 'image/bmp',
+      doc: 'application/msword',
+      docx:
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      gif: 'image/gif',
+      jpe: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      jpg: 'image/jpeg',
+      png: 'image/png',
+      mpeg: 'video/mpeg',
+      pdf: 'application/pdf',
+      ppt: 'application/vnd.ms-powerpoint',
+      pptx:
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      svg: 'image/svg+xml',
+      txt: 'text/plain',
+      wav: 'audio/x-wav',
+      xls: 'application/vnd.ms-excel',
+      xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      zip: 'application/zip',
+    };
+
+    extList.forEach((ext) => {
+      let type = ext.trim().toLowerCase();
+      type = MIME_TYPE_LIST[type] || type;
+
+      if (type && typeList.indexOf(type) < 0) typeList.push(type);
+      if (ext && typeList.indexOf(ext) < 0) typeList.push(ext);
+    });
+
+    return typeList.join(',');
+  });
+
+  const fileThumb = computed(() => (file) => {
+    const unknownType = 'insert_drive_file';
+    if (!file) return unknownType;
+
+    let type = '';
+    // const fTypes = file.type.split('/');
+    // const [fType, fExt] = fTypes;
+    const { fType, fExt } = _getFileType(file);
+
+    switch (fType) {
+      case 'image':
+        // eslint-disable-next-line no-underscore-dangle
+        type = file.id || (file.__img ? file.__img.src : '');
+        break;
+      case 'audio':
+        type = 'far fa-file-audio';
+        break;
+      case 'video':
+        type = 'far fa-file-video';
+        break;
+      case 'text':
+        type = 'far fa-file-text';
+        break;
+      case 'application':
+        switch (fExt) {
+          case 'doc':
+          case 'docx':
+          case 'vnd.openxmlformats-officedocument.wordprocessingml.document':
+            type = 'far fa-file-word';
+            break;
+          case 'xls':
+          case 'xlsx':
+          case 'vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+            type = 'far fa-file-excel';
+            break;
+          case 'ppt':
+          case 'pptx':
+          case 'vnd.openxmlformats-officedocument.presentationml.presentation':
+            type = 'far fa-file-powerpoint';
+            break;
+          case 'pdf':
+            type = 'far fa-file-pdf';
+            // type = 'insert_drive_file';
+            break;
+          case 'zip':
+          case 'rar':
+          case '7z':
+          case 'x-zip-compressed':
+            type = 'far fa-file-archive';
+            break;
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return type || unknownType;
+  });
+
+  const filePreviewType = computed(() => (file) => {
+    if (!file) return '';
+
+    // const fTypes = file.type.split('/');
+    // const [fType, fExt] = fTypes;
+    const { fType, fExt } = _getFileType(file);
+
+    switch (fType) {
+      case 'image':
+        return 'image';
+      case 'application':
+        switch (fExt) {
+          case 'doc':
+          case 'docx':
+          case 'vnd.openxmlformats-officedocument.wordprocessingml.document':
+            return 'word';
+          case 'xls':
+          case 'xlsx':
+          case 'vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+            return 'excel';
+          case 'ppt':
+          case 'pptx':
+          case 'vnd.openxmlformats-officedocument.presentationml.presentation':
+            return 'ppt';
+          case 'pdf':
+            return 'pdf';
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return '';
+  });
+
+  const filePreview = computed(() => (file) => {
+    if (!file) return '';
+    let url = '';
+
+    const type = filePreviewType.value(file);
+    switch (type) {
+      case 'image':
+        if (file.id) {
+          url = vm.$filter('serverImage', file.id);
+        } else {
+          // eslint-disable-next-line no-underscore-dangle
+          url = file.__img ? file.__img.src : '';
+        }
+        break;
+      case 'pdf':
+        if (file.id) {
+          url = vm.$filter('serverDocument', file.id);
+        }
+        break;
+      default:
+        break;
+    }
+
+    return url;
+  });
+
+  return {
+    showPreview,
+    previewType,
+    previewFile,
+    maxFileSize,
+    maxTotalSize,
+    acceptedFileTypes,
+    fileThumb,
+    filePreviewType,
+    filePreview,
+
+    filesRejected (rejectedEntries) {
+      if (rejectedEntries && rejectedEntries.length > 0) {
+        const fName = rejectedEntries[0] && rejectedEntries[0].file && rejectedEntries[0].file.name;
+        const fSize = fileSizeNumberToStr(
+          rejectedEntries[0] && rejectedEntries[0].file && rejectedEntries[0].file.size,
+        );
+        // TODO: i18n
+        Notify.create({ message: `文件格式或大小不符合要求：${fName} （${fSize}）` });
+      }
+    },
+    preview (file) {
+      if (!file) return;
+
+      previewType.value = filePreviewType.value(file);
+
+      const url = filePreview.value(file);
+      if (!url) {
+        return;
+      }
+
+      previewFile.value = url;
+
+      showPreview.value = true;
+    },
+  }
+};