@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

package/lib/editor/upload/ibiz-file-upload/ibiz-file-upload.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-file-upload.css');
+var useIviewUpload = require('../use/use-iview-upload.cjs');
+
+"use strict";
+const IBizFileUpload = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFileUpload",
+  props: vue3Util.getUploadProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("file-upload");
+    const c = props.controller;
+    const {
+      uploadUrl,
+      headers,
+      files,
+      limit,
+      onDownload,
+      onError,
+      onRemove,
+      onSuccess,
+      beforeUpload
+    } = useIviewUpload.useIViewUpload(props, (value) => {
+      emit("change", value);
+    }, c);
+    const noUploadIcon = vue.computed(() => {
+      var _a;
+      return limit.value === 1 && ((_a = files.value) == null ? void 0 : _a.length) === 1;
+    });
+    const isGridEditor = vue.computed(() => {
+      return !!c.parent.model.columnType;
+    });
+    return {
+      ns,
+      c,
+      uploadUrl,
+      headers,
+      files,
+      limit,
+      noUploadIcon,
+      onDownload,
+      onError,
+      onRemove,
+      onSuccess,
+      beforeUpload,
+      isGridEditor
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [vue.createVNode(vue.resolveComponent("el-upload"), {
+      "class": [this.ns.b("icon"), this.ns.is("not-show", this.noUploadIcon)],
+      "file-list": this.files,
+      "action": this.uploadUrl,
+      "headers": this.headers,
+      "disabled": this.disabled,
+      "multiple": this.c.multiple,
+      "limit": this.limit,
+      "drag": !!this.c.isDrag,
+      "accept": this.c.accept,
+      "before-upload": this.beforeUpload,
+      "onSuccess": this.onSuccess,
+      "onError": this.onError,
+      "onRemove": this.onRemove,
+      "onPreview": this.onDownload
+    }, {
+      default: () => [this.noUploadIcon ? null : vue.createVNode(vue.resolveComponent("el-button"), {
+        "class": [this.ns.b("button")],
+        "size": this.isGridEditor ? "small" : "default"
+      }, {
+        default: () => [vue.createTextVNode("\u4E0A\u4F20\u6587\u4EF6")]
+      })]
+    })]);
+  }
+});
+
+exports.IBizFileUpload = IBizFileUpload;

package/lib/editor/upload/ibiz-file-upload/ibiz-file-upload.css

@@ -0,0 +1 @@
+.ibiz-file-upload{width:100%}.ibiz-file-upload .ibiz-file-upload-button span{font-size:var(--ibiz-form-item-font-size)}.ibiz-file-upload .el-upload-list{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start}.ibiz-file-upload .el-upload-list__item{display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto}.ibiz-file-upload .el-upload-list__item .el-upload-list__item-info .el-upload-list__item-name{color:var(--ibiz-form-item-text-color)}.ibiz-file-upload .el-upload-list__item:hover{display:flex;align-items:center;justify-content:flex-start;background:var(--ibiz-form-item-disabled-bg-color)}.ibiz-file-upload .el-upload-list__item:hover span{color:var(--ibiz-form-item-text-color)}.ibiz-file-upload--disabled .el-upload-list__item>span{color:var(--ibiz-form-item-disabled-color)}.ibiz-file-upload--readonly .el-upload-list__item>span{color:var(--ibiz-form-item-readonly-color)}.ibiz-file-upload--readonly .ibiz-file-upload-button{display:none}.ibiz-file-upload-icon.is-not-show .el-upload--text{display:none}.ibiz-grid-field-edit-column__editor.ibiz-file-upload .ibiz-file-upload-icon{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.ibiz-grid-field-edit-column__editor.ibiz-file-upload .ibiz-file-upload-icon .el-upload-list--text{width:100%}

package/lib/editor/upload/ibiz-image-preview/ibiz-image-preview.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-image-preview.css');
+
+"use strict";
+const IBizImagePreview = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizImagePreview",
+  props: vue3Util.getUploadProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props) {
+    const ns = vue3Util.useNamespace("image-preview");
+    const c = props.controller;
+    return {
+      ns,
+      c
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()],
+      "onClick": (e) => {
+        e.stopPropagation();
+      }
+    }, [vue.createVNode(vue.resolveComponent("el-image"), {
+      "fit": "contain",
+      "src": this.value,
+      "preview-src-list": [this.value]
+    }, null)]);
+  }
+});
+
+exports.IBizImagePreview = IBizImagePreview;

package/lib/editor/upload/ibiz-image-preview/ibiz-image-preview.css

@@ -0,0 +1 @@
+.ibiz-image-preview{width:100%;height:100%;overflow:hidden}.ibiz-image-preview>.el-image{width:100%;height:100%}

package/lib/editor/upload/ibiz-image-upload/ibiz-image-upload.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-image-upload.css');
+var useIviewUpload = require('../use/use-iview-upload.cjs');
+
+"use strict";
+const IBizImageUpload = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizImageUpload",
+  props: vue3Util.getUploadProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("image-upload");
+    const c = props.controller;
+    const {
+      uploadUrl,
+      headers,
+      files,
+      limit,
+      onDownload,
+      onError,
+      onRemove,
+      onSuccess,
+      beforeUpload
+    } = useIviewUpload.useIViewUpload(props, (value) => {
+      emit("change", value);
+    }, c);
+    const dialogImageUrl = vue.ref("");
+    const dialogVisible = vue.ref(false);
+    const onDialogVisibleChange = (value) => {
+      dialogVisible.value = value;
+    };
+    const onPreview = (file) => {
+      dialogImageUrl.value = file.url;
+      dialogVisible.value = true;
+    };
+    const noUploadIcon = vue.computed(() => {
+      return limit.value === 1 && files.value.length === 1;
+    });
+    return {
+      ns,
+      c,
+      files,
+      limit,
+      headers,
+      uploadUrl,
+      dialogImageUrl,
+      dialogVisible,
+      noUploadIcon,
+      beforeUpload,
+      onSuccess,
+      onError,
+      onRemove,
+      onDownload,
+      onDialogVisibleChange,
+      onPreview
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("image-upload-list")
+    }, [this.files.map((item) => vue.createVNode("div", {
+      "key": item.id,
+      "class": this.ns.e("list-item")
+    }, [vue.createVNode("img", {
+      "src": item.url
+    }, null), vue.createVNode("div", {
+      "class": this.ns.e("list-item-cover")
+    }, [vue.createVNode("ion-icon", {
+      "class": this.ns.e("preview-icon"),
+      "onClick": () => this.onPreview(item),
+      "name": "search"
+    }, null), vue.createVNode("ion-icon", {
+      "class": this.ns.e("download-icon"),
+      "onClick": () => this.onDownload(item),
+      "name": "download"
+    }, null), vue.createVNode("ion-icon", {
+      "class": this.ns.e("remove-icon"),
+      "onClick": () => this.onRemove(item),
+      "name": "remove"
+    }, null)])]))]), vue.createVNode(vue.resolveComponent("el-upload"), {
+      "ref": "imageUpload",
+      "class": [this.ns.b("icon"), this.ns.is("not-show", this.noUploadIcon)],
+      "file-list": this.files,
+      "action": this.uploadUrl,
+      "headers": this.headers,
+      "disabled": this.disabled,
+      "multiple": this.c.multiple,
+      "limit": this.limit,
+      "show-file-list": false,
+      "accept": this.c.accept,
+      "list-type": "picture-card",
+      "before-upload": this.beforeUpload,
+      "onSuccess": this.onSuccess,
+      "onError": this.onError,
+      "onRemove": this.onRemove,
+      "onPreview": this.onDownload
+    }, {
+      default: () => [vue.createVNode("ion-icon", {
+        "name": "add-outline",
+        "class": this.ns.e("image-upload-add")
+      }, null)]
+    }), this.dialogVisible ? vue.createVNode(vue.resolveComponent("el-image-viewer"), {
+      "onClose": () => this.onDialogVisibleChange(false),
+      "url-list": [this.dialogImageUrl],
+      "hide-on-click-modal": true,
+      "close-on-press-escape": true,
+      "teleported": true,
+      "z-index": 9999
+    }, null) : null]);
+  }
+});
+
+exports.IBizImageUpload = IBizImageUpload;

package/lib/editor/upload/ibiz-image-upload/ibiz-image-upload.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-image-upload{--ibiz-image-upload-box-width:120px;--ibiz-image-upload-box-height:120px;--ibiz-image-upload-list-item-margin:5px;--ibiz-image-upload-list-item-bg-color:var(--ibiz-bg-color);--ibiz-image-upload-list-item-border:1px solid var(--ibiz-border-color-light);--ibiz-image-upload-list-item-border-radius:var(--ibiz-border-radius-base);--ibiz-image-upload-list-item-box-shadow:var(--ibiz-box-shadow);--ibiz-image-upload-list-item-cover-bg-color:rgba(0, 0, 0, 0.6);--ibiz-image-upload-list-item-cover-i-color:var(--ibiz-color-white);--ibiz-image-upload-list-item-cover-i-size:var(--ibiz-font-size-extra-large);--ibiz-image-upload-list-item-cover-i-margin:0 2px;--ibiz-grid-image-upload-box-width:80px;--ibiz-grid-image-upload-box-height:32px;display:flex;align-items:center}.ibiz-image-upload .el-upload--picture-card{width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height)}.ibiz-image-upload__btn{width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height);line-height:var(--ibiz-image-upload-box-height)}.ibiz-image-upload__list-item{position:relative;display:inline-block;width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height);margin-right:var(--ibiz-image-upload-list-item-margin);line-height:var(--ibiz-image-upload-box-height);text-align:center;background:var(--ibiz-image-upload-list-item-bg-color);border:var(--ibiz-image-upload-list-item-border);border-radius:var(--ibiz-image-upload-list-item-border-radius);box-shadow:var(--ibiz-image-upload-list-item-box-shadow)}.ibiz-image-upload__list-item img{width:100%;height:100%;vertical-align:top;-o-object-fit:contain;object-fit:contain}.ibiz-image-upload__list-item:hover .ibiz-image-upload__list-item-cover{display:block}.ibiz-image-upload__list-item-cover{position:absolute;inset:0;display:none;background:var(--ibiz-image-upload-list-item-cover-bg-color)}.ibiz-image-upload__list-item-cover ion-icon{margin:var(--ibiz-image-upload-list-item-cover-i-margin);font-size:var(--ibiz-image-upload-list-item-cover-i-size);color:var(--ibiz-image-upload-list-item-cover-i-color);cursor:pointer}.ibiz-image-upload__list-item-cover img{width:100%;height:100%;vertical-align:top}.ibiz-image-upload__image-upload-add{font-size:var(--ibiz-font-size-header-2);color:var(--ibiz-color-text-3)}.ibiz-image-upload--disabled .ibiz-image-upload__download-icon{display:none}.ibiz-image-upload--disabled .ibiz-image-upload__remove-icon{display:none}.ibiz-image-upload--readonly .ibiz-image-upload__remove-icon{display:none}.ibiz-image-upload--readonly .el-upload--picture-card{display:none}.ibiz-image-upload-modal__img{width:100%}.ibiz-image-upload-icon.is-not-show{display:none}.ibiz-grid-field-edit-column__editor.ibiz-image-upload{flex-wrap:wrap}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .el-upload--picture-card{width:var(--ibiz-grid-image-upload-box-width);height:var(--ibiz-grid-image-upload-box-height)}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-upload__image-upload-list{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-upload__list-item{width:var(--ibiz-grid-image-upload-box-width);height:var(--ibiz-grid-image-upload-box-height);margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0;line-height:var(--ibiz-grid-image-upload-box-height)}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-upload__list-item img{-o-object-fit:fill;object-fit:fill}

package/lib/editor/upload/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var ibizFileUpload = require('./ibiz-file-upload/ibiz-file-upload.cjs');
+var ibizImageUpload = require('./ibiz-image-upload/ibiz-image-upload.cjs');
+var ibizImagePreview = require('./ibiz-image-preview/ibiz-image-preview.cjs');
+var uploadEditor_controller = require('./upload-editor.controller.cjs');
+var uploadEditor_provider = require('./upload-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizFileUpload = ibizFileUpload.IBizFileUpload;
+exports.IBizImageUpload = ibizImageUpload.IBizImageUpload;
+exports.IBizImagePreview = ibizImagePreview.IBizImagePreview;
+exports.UploadEditorController = uploadEditor_controller.UploadEditorController;
+exports.FileUploaderEditorProvider = uploadEditor_provider.FileUploaderEditorProvider;

package/lib/editor/upload/upload-editor.controller.cjs

@@ -0,0 +1,145 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
+var qs = require('qs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class UploadEditorController extends runtime.EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 是否支持拖拽
+     */
+    __publicField(this, "isDrag", false);
+    /**
+     * 是否多选
+     */
+    __publicField(this, "multiple", true);
+    /**
+     * 接受上传的文件类型
+     */
+    __publicField(this, "accept", "");
+    /**
+     * 上传参数
+     */
+    __publicField(this, "uploadParams");
+    /**
+     * 下载参数
+     */
+    __publicField(this, "exportParams");
+  }
+  async onInit() {
+    var _a;
+    await super.onInit();
+    if ((_a = this.model.editorType) == null ? void 0 : _a.includes("PICTURE")) {
+      this.accept = "image/*";
+    }
+    if (["FILEUPLOADER_ONE", "PICTURE_ONE", "PICTURE_ONE_RAW"].includes(
+      this.model.editorType
+    )) {
+      this.multiple = false;
+    }
+    if (this.editorParams) {
+      const { isDrag, multiple, accept, uploadParams, exportParams } = this.editorParams;
+      if (isDrag) {
+        this.isDrag = Boolean(isDrag);
+      }
+      if (multiple) {
+        this.multiple = Boolean(multiple);
+      }
+      if (accept) {
+        this.accept = accept;
+      }
+      if (uploadParams) {
+        try {
+          this.uploadParams = JSON.parse(uploadParams);
+        } catch (error) {
+          throw new core.RuntimeModelError(
+            uploadParams,
+            `\u914D\u7F6EuploadParams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F`
+          );
+        }
+      }
+      if (exportParams) {
+        try {
+          this.exportParams = JSON.parse(exportParams);
+        } catch (error) {
+          throw new core.RuntimeModelError(
+            exportParams,
+            `\u914D\u7F6EexportParams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F`
+          );
+        }
+      }
+    }
+  }
+  /**
+   * 计算文件的上传路径和下载路径
+   * 下载路径文件id用%fileId%占位，替换即可
+   * 配置编辑器参数uploadParams和exportParams时，会像导航参数一样动态添加对应的参数到url上
+   *
+   * @author lxm
+   * @date 2022-11-17 13:11:43
+   * @param {IData} data
+   * @returns {*}  {{ uploadUrl: string; downloadUrl: string }}
+   */
+  calcBaseUrl(data) {
+    let uploadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.uploadFileUrl}`;
+    let downloadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.downloadFileUrl}/%fileId%`;
+    let uploadParams = {};
+    let exportParams = {};
+    if (this.uploadParams) {
+      uploadParams = runtime.convertNavData(
+        this.uploadParams,
+        data,
+        this.params,
+        this.context
+      );
+    }
+    if (this.exportParams) {
+      exportParams = runtime.convertNavData(
+        this.exportParams,
+        data,
+        this.params,
+        this.context
+      );
+    }
+    uploadUrl += qs.stringify(uploadParams, { addQueryPrefix: true });
+    downloadUrl += qs.stringify(exportParams, { addQueryPrefix: true });
+    return { uploadUrl, downloadUrl };
+  }
+  /**
+   * 请求url获取文件流，并用JS触发文件下载
+   *
+   * @author lxm
+   * @date 2022-11-17 14:11:09
+   * @param {string} url
+   * @param {IData} file
+   */
+  fileDownload(file) {
+    ibiz.net.request(file.url, {
+      method: "get",
+      responseType: "blob",
+      baseURL: ""
+      // 已经有baseURL了，这里无需再写
+    }).then((response) => {
+      if (response.status !== 200) {
+        throw new core.RuntimeError("\u4E0B\u8F7D\u6587\u4EF6\u5931\u8D25");
+      }
+      if (!response.data) {
+        throw new core.RuntimeError("\u6587\u4EF6\u6D41\u6570\u636E\u4E0D\u5B58\u5728");
+      } else {
+        const fileName = file.name;
+        core.downloadFileFromBlob(response.data, fileName);
+      }
+    });
+  }
+}
+
+exports.UploadEditorController = UploadEditorController;

package/lib/editor/upload/upload-editor.provider.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var uploadEditor_controller = require('./upload-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FileUploaderEditorProvider {
+  constructor(editorType) {
+    __publicField(this, "formEditor", "IBizFileUpload");
+    __publicField(this, "gridEditor", "IBizFileUpload");
+    let componentName = "IBizFileUpload";
+    switch (editorType) {
+      case "PICTURE":
+      case "PICTURE_ONE":
+        componentName = "IBizImageUpload";
+        break;
+      case "PICTURE_ONE_RAW":
+        componentName = "IBizImagePreview";
+        break;
+      default:
+    }
+    this.formEditor = componentName;
+    this.gridEditor = componentName;
+  }
+  async createController(editorModel, parentController) {
+    const c = new uploadEditor_controller.UploadEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.FileUploaderEditorProvider = FileUploaderEditorProvider;

package/lib/editor/upload/use/use-ibiz-upload.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var vue = require('vue');
+
+"use strict";
+function formatFileInfo(file, downloadUrl) {
+  file.url = downloadUrl.replace("%fileId%", file.id);
+  if (!file.status) {
+    file.status = "finished";
+  }
+  if (!file.fileName) {
+    const index = file.name.lastIndexOf(".");
+    file.fileName = file.name.substring(0, index);
+    file.fileExt = file.name.substring(index);
+    file.isImage = core.isImage(file.name);
+  }
+  return file;
+}
+function useIBizUploadInit(props) {
+  const uploadUrl = vue.ref("");
+  const downloadUrl = vue.ref("");
+  const valueList = vue.ref([]);
+  vue.watch(
+    props.data,
+    (newVal) => {
+      if (newVal) {
+        const urls = props.controller.value.calcBaseUrl(newVal);
+        uploadUrl.value = urls.uploadUrl;
+        downloadUrl.value = urls.downloadUrl;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  vue.watch(
+    props.value,
+    (newVal) => {
+      valueList.value = !newVal ? [] : JSON.parse(newVal);
+      if (valueList.value.length && downloadUrl.value) {
+        valueList.value.forEach((file) => {
+          formatFileInfo(file, downloadUrl.value);
+        });
+      }
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    downloadUrl,
+    (newVal) => {
+      if (newVal && valueList.value.length) {
+        valueList.value.forEach((file) => {
+          formatFileInfo(file, newVal);
+        });
+      }
+    },
+    { immediate: true }
+  );
+  return {
+    downloadUrl,
+    uploadUrl,
+    valueList
+  };
+}
+function useIBizUpload(opts) {
+  const uploadState = vue.ref("undo");
+  const fileList = vue.ref([]);
+  const { downloadUrl, value, uploadUrl } = opts;
+  vue.watch(
+    value,
+    (newVal) => {
+      if (newVal.length > 0) {
+        fileList.value = [];
+        newVal.forEach((item) => {
+          fileList.value.push(formatFileInfo(item, downloadUrl.value));
+        });
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  const beforeUpload = (fileData, files) => {
+    files.forEach((file) => {
+      fileList.value.push({
+        name: file.name,
+        status: file.status,
+        percentage: file.percentage,
+        id: file.uid,
+        url: ""
+      });
+    });
+    return true;
+  };
+  const onProgress = (files) => {
+    files.forEach((file) => {
+      fileList.value.find((item) => {
+        if (item.id === file.uid) {
+          item.percentage = file.percentage;
+          return true;
+        }
+        return false;
+      });
+    });
+  };
+  const onSuccess = (resultFiles, res) => {
+    resultFiles.forEach((file) => {
+      fileList.value.find((item) => {
+        if (item.id === file.uid) {
+          item.status = file.status;
+          item.id = res.data.fileid;
+          item.name = res.data.filename;
+          formatFileInfo(item, downloadUrl.value);
+          return true;
+        }
+        return false;
+      });
+    });
+  };
+  const onError = (resultFiles, error) => {
+    resultFiles.forEach((file) => {
+      fileList.value.find((item) => {
+        if (item.id === file.uid) {
+          item.status = file.status;
+          return true;
+        }
+        return false;
+      });
+    });
+    console.error(error);
+  };
+  const onFinish = (_resultFiles) => {
+    fileList.value = fileList.value.filter((file) => file.status === "finished");
+    uploadState.value = "done";
+  };
+  const selectFile = () => {
+    core.uploadFile({
+      multiple: opts.multiple,
+      accept: opts.accept,
+      uploadUrl: uploadUrl.value,
+      beforeUpload,
+      progress: onProgress,
+      success: onSuccess,
+      error: onError,
+      finish: onFinish
+    });
+  };
+  return {
+    selectFile,
+    fileList,
+    uploadState
+  };
+}
+function openImagePreview(file) {
+  return ibiz.overlay.modal(
+    "ImagePreview",
+    { file },
+    {
+      width: "auto",
+      height: "auto",
+      placement: "center",
+      modalClass: "ibiz-image-preview-modal"
+    }
+  );
+}
+
+exports.formatFileInfo = formatFileInfo;
+exports.openImagePreview = openImagePreview;
+exports.useIBizUpload = useIBizUpload;
+exports.useIBizUploadInit = useIBizUploadInit;