@opentiny/vue-renderless 3.13.1 → 3.14.0

package/types/{upload-list.type-343e8c11.d.ts → upload-list.type-a29aea50.d.ts}

@@ -7,6 +7,11 @@ declare const $constants: {
     UPLOAD_INNER_TEMPLATE: string;
     UPLOAD_LIST_INNER: string;
     UPLOAD_LIST_INNER_TEMPLATE: string;
+    ONLY_SUPPORT: string;
+    COMMA: string;
+    FILE_NOT_LESS_THAN: string;
+    FILE_NOT_MORE_THAN: string;
+    NUMBER_LIMIT: string;
     FILE_STATUS: {
         READY: string;
         SUCESS: string;
@@ -21,6 +26,7 @@ declare const $constants: {
         THUMB: string;
         PICTURE_SINGLE: string;
         DRAG_SINGLE: string;
+        SAAS: string;
     };
     EDM: {
         CHUNKINIT: string;
@@ -68,6 +74,7 @@ declare const $constants: {
         NOT_SUPPORT_NO_SUFFIX: string;
         STATUS_SPECIAL_CHARACTERS: number;
         NOT_SUPPORT_SPECIAL_CHARACTERS: string;
+        DOC_PREVIEW: string;
     };
     IMAGE_TYPE: string;
     FILE_TYPE: {
@@ -100,6 +107,11 @@ declare const fileUploadProps: {
             UPLOAD_INNER_TEMPLATE: string;
             UPLOAD_LIST_INNER: string;
             UPLOAD_LIST_INNER_TEMPLATE: string;
+            ONLY_SUPPORT: string;
+            COMMA: string;
+            FILE_NOT_LESS_THAN: string;
+            FILE_NOT_MORE_THAN: string;
+            NUMBER_LIMIT: string;
             FILE_STATUS: {
                 READY: string;
                 SUCESS: string;
@@ -114,6 +126,7 @@ declare const fileUploadProps: {
                 THUMB: string;
                 PICTURE_SINGLE: string;
                 DRAG_SINGLE: string;
+                SAAS: string;
             };
             EDM: {
                 CHUNKINIT: string;
@@ -161,6 +174,7 @@ declare const fileUploadProps: {
                 NOT_SUPPORT_NO_SUFFIX: string;
                 STATUS_SPECIAL_CHARACTERS: number;
                 NOT_SUPPORT_SPECIAL_CHARACTERS: string;
+                DOC_PREVIEW: string;
             };
             IMAGE_TYPE: string;
             FILE_TYPE: {
@@ -322,7 +336,7 @@ declare const fileUploadProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+    customClass: (ArrayConstructor | StringConstructor | ObjectConstructor)[];
     hwh5: ObjectConstructor;
     mode: {
         type: StringConstructor;
@@ -337,6 +351,10 @@ declare const fileUploadProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     beforeAddFile: FunctionConstructor;
     encryptConfig: {
         type: ObjectConstructor;
@@ -506,7 +524,7 @@ declare const previewImageBatch: ({ service, api }: Pick<IFileUploadRenderlessPa
     url: string;
     file: IFileUploadFile;
 }) => any;
-declare const getDialogConfigObj: ({ props, state }: Pick<IFileUploadRenderlessParams, 'props' | 'state'>) => () => object;
+declare const getDialogConfigObj: ({ props, state, t, constants }: Pick<IFileUploadRenderlessParams, 'props' | 'state' | 't' | 'constants'>) => () => object;
 declare const computeDocChunkSize: ({ props, state, constants }: Pick<IFileUploadRenderlessParams, 'props' | 'state' | 'constants'>) => () => void;
 declare const computedSourcetype: ({ props, constants }: Pick<IFileUploadRenderlessParams, 'props' | 'constants'>) => () => string[];
 declare const getFileSourceType: ({ state, props, constants }: Pick<IFileUploadRenderlessParams, 'state' | 'props' | 'constants'>) => ({ file }: {
@@ -536,7 +554,9 @@ declare const handleClick$1: ({ props, api, parent }: Pick<IUploadListRenderless
 declare const downloadFile: (service: IUploadListRenderlessParams['service']) => (file: IFileUploadFile) => void;
 declare const picturefilePreview: (state: IUploadListRenderlessParams['state']) => (index: number) => void;
 declare const getDeleteData: (emit: IUploadListRenderlessParams['emit']) => (data: string[]) => void;
-declare const showOperatePanel: ({ state }: Pick<IUploadListRenderlessParams, 'state'>) => (file: IFileUploadFile) => void;
+declare const showOperatePanel: ({ state }: Pick<IUploadListRenderlessParams, 'state'>) => ({ file }: {
+    file: IFileUploadFile;
+}) => void;
 declare const reUpload: ({ emit, props, parent }: Pick<IUploadListRenderlessParams, 'emit' | 'props' | 'parent'>) => (file: IFileUploadFile) => void;
 declare const play: ({ vm, api, props }: Pick<IUploadListRenderlessParams, 'vm' | 'api' | 'props'>) => ({ file, index, type }: {
     file: IFileUploadFile;
@@ -574,7 +594,7 @@ declare const getNotSuccessFiles: ({ props, constants }: Pick<IUploadListRenderl
 declare const chooseFile: ({ state, constants }: Pick<IUploadListRenderlessParams, 'state' | 'constants'>) => (type: string) => void;
 declare const handleTriggerClick: ({ state, props }: Pick<IUploadListRenderlessParams, 'state' | 'props'>) => ($event: Event, type: string) => Promise<unknown>;
 declare const mounted$1: ({ api, vm }: Pick<IUploadListRenderlessParams, 'api' | 'vm'>) => () => void;
-declare const destroyed: ({ api, props, vm }: Pick<IUploadListRenderlessParams, 'api' | 'props' | 'vm'>) => () => void;
+declare const destroyed: ({ props, vm }: Pick<IUploadListRenderlessParams, 'props' | 'vm'>) => () => void;
 
 declare const uploadProps: {
     accept: StringConstructor;
@@ -644,12 +664,17 @@ declare const uploadProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+    customClass: (ArrayConstructor | StringConstructor | ObjectConstructor)[];
     handleTriggerClick: {
         type: FunctionConstructor;
         default: () => void;
     };
     mode: StringConstructor;
+    showTitle: BooleanConstructor;
+    isHwh5: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
@@ -682,7 +707,7 @@ declare const uploadFiles: ({ state, constants, Modal, props, t }: Pick<IUploadR
 declare const upload: ({ api, props, refs }: Pick<IUploadRenderlessParams, 'api' | 'props' | 'refs'>) => (rawFile: File) => void;
 declare const abort: ({ state, props, constants }: Pick<IUploadRenderlessParams, 'state' | 'props' | 'constants'>) => (file: IFileUploadFile) => void;
 declare const post: ({ api, constants, props, state, service }: Pick<IUploadRenderlessParams, 'api' | 'constants' | 'props' | 'state' | 'service'>) => (rawFile: IFileUploadFile) => void;
-declare const handleClick: ({ props, refs }: Pick<IUploadRenderlessParams, 'props' | 'refs'>) => ($event: Event, type: string) => void;
+declare const handleClick: ({ props, refs, state }: Pick<IUploadRenderlessParams, 'props' | 'refs' | 'state'>) => ($event: Event, type: string) => void;
 declare const handleKeydown: (api: IUploadRenderlessParams['api']) => (event: KeyboardEvent) => void;
 declare const handleUpdate: ({ props, state }: Pick<IUploadRenderlessParams, 'props' | 'state'>) => (file: IFileUploadFile) => void;
 declare const mounted: ({ state, props, api }: Pick<IUploadRenderlessParams, 'state' | 'props' | 'api'>) => () => void;
@@ -1079,8 +1104,6 @@ declare const uploadListProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    reUploadable: BooleanConstructor;
-    reUploadTip: FunctionConstructor;
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];

package/types/upload-list.type.d.ts

@@ -1,3 +1,3 @@
 import 'vue';
-export { H as IUploadListApi, J as IUploadListProps, K as IUploadListRenderlessParamUtils, L as IUploadListRenderlessParams, G as IUploadListState, M as IUploadListVideoParam } from './upload-list.type-343e8c11.js';
+export { H as IUploadListApi, J as IUploadListProps, K as IUploadListRenderlessParamUtils, L as IUploadListRenderlessParams, G as IUploadListState, M as IUploadListVideoParam } from './upload-list.type-a29aea50.js';
 import './shared.type.js';

package/types/upload.type.d.ts

@@ -1,3 +1,3 @@
 import 'vue';
-export { d as IUploadApi, i as IUploadFormData, k as IUploadOptionsOfHwh5, j as IUploadOptionsOfPost, e as IUploadProps, h as IUploadRenderlessOtherParams, f as IUploadRenderlessParamUtils, g as IUploadRenderlessParams, c as IUploadState, b as IUploadStateHeader } from './upload-list.type-343e8c11.js';
+export { d as IUploadApi, i as IUploadFormData, k as IUploadOptionsOfHwh5, j as IUploadOptionsOfPost, e as IUploadProps, h as IUploadRenderlessOtherParams, f as IUploadRenderlessParamUtils, g as IUploadRenderlessParams, c as IUploadState, b as IUploadStateHeader } from './upload-list.type-a29aea50.js';
 import './shared.type.js';

package/types/user-head.type.d.ts

@@ -1,2 +1,147 @@
+import { ExtractPropTypes } from 'vue';
+import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
-export { }
+declare const $constants: {
+    ITEM_NAME: string;
+};
+declare const userHeadProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            ITEM_NAME: string;
+        };
+    };
+    /**
+     * @property {Boolean} [min=false] - 小尺寸模式
+     */
+    min: BooleanConstructor;
+    /**
+     * @property {Boolean} [round=true] - 圆形模式
+     */
+    round: BooleanConstructor;
+    /**
+     * @property {String} [color=#ffffff] - 文字颜色
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @property {String} [backgroundColor=#BBBBBB] - 背景色
+     */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @property {String} [type=label] - 头像类型，icon|image|label 可选
+     */
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * @property {String} - 头像资源
+     * type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径
+     */
+    value: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    /**
+     * @property {String} - 头像资源
+     * type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径
+     */
+    modelValue: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    /**
+     * @property {Number} - 消息计数
+     */
+    messageTotal: NumberConstructor;
+    /**
+     * @property {String} [messageType=details] - 消息类型 details|basic 可选
+     */
+    messageType: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * @property {Number} [messageUpperLimit=0] - 消息显示上限
+     */
+    messageUpperLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+declare const computedStyle: ({ state, props }: Pick<IUserHeadRenderlessParams, 'state' | 'props'>) => () => {
+    fill: string;
+    color: string;
+    backgroundColor: string;
+    backgroundImage: string;
+};
+declare const computedMessage: ({ props }: Pick<IUserHeadRenderlessParams, 'props'>) => () => string;
+declare const computedFontSize: ({ props, state, mode }: Pick<IUserHeadRenderlessParams, 'props' | 'state' | 'mode'>) => () => {
+    fontSize: string;
+};
+declare const computedLabel: ({ state, props }: Pick<IUserHeadRenderlessParams, 'state' | 'props'>) => () => any;
+declare const getInternalValue: ({ props }: Pick<IUserHeadRenderlessParams, 'props'>) => () => string | Record<string, any>;
+
+interface IUserHeadState {
+    internalValue: string | Record<string, any>;
+    label: string;
+    style: ReturnType<ReturnType<typeof computedStyle>>;
+    message: string;
+    fontSize: {
+        fontSize: string;
+    };
+    size: number;
+    color: string;
+    backgroundColor: string;
+}
+type IUserHeadProps = ExtractPropTypes<typeof userHeadProps>;
+type IUserHeadConstants = typeof $constants;
+type IUserHeadRenderlessParams = ISharedRenderlessFunctionParams<IUserHeadConstants> & {
+    api: IUserHeadApi;
+    state: IUserHeadState;
+    props: IUserHeadProps;
+};
+interface IUserHeadApi {
+    state: IUserHeadState;
+    computedLabel: ReturnType<typeof computedLabel>;
+    computedStyle: ReturnType<typeof computedStyle>;
+    computedMessage: ReturnType<typeof computedMessage>;
+    computedFontSize: ReturnType<typeof computedFontSize>;
+    getInternalValue: ReturnType<typeof getInternalValue>;
+    handleClick: (event: Event) => void;
+    mouseEnter: (event: Event) => void;
+}
+type IUserHeadRenderlessParamUtils = ISharedRenderlessParamUtils<IUserHeadConstants>;
+
+export { IUserHeadApi, IUserHeadConstants, IUserHeadProps, IUserHeadRenderlessParamUtils, IUserHeadRenderlessParams, IUserHeadState };

package/types/wizard.type.d.ts

@@ -62,6 +62,7 @@ interface IWizardState {
     doing: string;
     ready: string;
     wait: string;
+    iconYes: 'tiny-icon-yes' | 'tiny-icon-successful';
 }
 type IWizardConstants = typeof $constants;
 type IWizardRenderlessParams = ISharedRenderlessFunctionParams<IWizardConstants> & {

package/upload/index.js

@@ -95,11 +95,8 @@ const uploadFiles = ({
       }
       return folderAry.length < 7;
     });
-  }
-  if (!props.isFolder) {
-    if (!props.multiple) {
-      postFiles = postFiles.slice(0, 1);
-    }
+  } else if (!props.multiple) {
+    postFiles = postFiles.slice(0, 1);
   }
   if (postFiles.length === 0) {
     return;
@@ -147,16 +144,17 @@ const upload = ({ api, props, refs }) => (rawFile) => {
 const abort = ({ state, props, constants }) => (file) => {
   const { reqs } = state;
   const cancel = function(uid) {
-    if (reqs[uid]) {
-      reqs[uid].abort();
+    var _a;
+    if ((_a = reqs[uid]) == null ? void 0 : _a.abort) {
+      reqs[uid].abort("");
     } else if (state.cancelToken[uid]) {
-      state.cancelToken[uid]();
+      state.cancelToken[uid]("");
     }
     delete reqs[uid];
     delete state.cancelToken[uid];
   };
   if (file && file.isLargeFile && file.cancelToken) {
-    file.cancelToken && file.cancelToken.forEach((cancel2) => cancel2());
+    file.cancelToken && file.cancelToken.forEach((cancel2) => cancel2(""));
     delete file.cancelToken;
   } else if (file) {
     let uid = file;
@@ -166,9 +164,9 @@ const abort = ({ state, props, constants }) => (file) => {
     cancel(uid);
   } else {
     const { READY, UPLOADING, FAIL } = constants.FILE_STATUS;
-    Object.keys(reqs).forEach((uid) => cancel(uid));
+    Object.keys(reqs).forEach((uid) => cancel(uid || ""));
     props.fileList.forEach((file2) => {
-      file2.cancelToken && file2.cancelToken.forEach((cancel2) => cancel2());
+      file2.cancelToken && file2.cancelToken.forEach((cancel2) => cancel2(""));
       if ([READY, UPLOADING].includes(file2.status)) {
         file2.status = FAIL;
       }
@@ -265,31 +263,32 @@ const getOptionsOfHwh5 = ({
   uploaderInner,
   uid
 }) => {
-  return {
-    edmAuth: {
-      edmToken: props.edmToken.edmToken,
-      appId: uploaderInner.hwh5.appId
+  const edm = uploaderInner.edm;
+  const params = edm && edm.upload && edm.upload.params || {};
+  return Object.assign(
+    {
+      edmAuth: {
+        edmToken: props.edmToken.edmToken,
+        appId: uploaderInner.hwh5.appId
+      },
+      filePath: rawFile.filePath,
+      progress: 1
     },
-    filePath: rawFile.filePath,
-    progress: 1,
-    onProgress: (data) => {
-      if (props.onProgress) {
+    params,
+    {
+      onProgress: (data) => {
         props.onProgress(data, rawFile);
-      }
-    },
-    onSuccess: (res) => {
-      if (props.onSuccess) {
+      },
+      onSuccess: (res) => {
         props.onSuccess(res, rawFile);
+        delete state.reqs[uid];
+      },
+      onError: (error) => {
+        props.onError(error, rawFile);
+        delete state.reqs[uid];
       }
-      delete state.reqs[uid];
-    },
-    onError: (error) => {
-      if (props.onProgress) {
-        props.onProgress(error, rawFile);
-      }
-      delete state.reqs[uid];
     }
-  };
+  );
 };
 const post = ({
   api,
@@ -325,11 +324,42 @@ const post = ({
     excuteReq(options);
   }
 };
-const handleClick = ({ props, refs }) => ($event, type) => {
-  if (!props.disabled && !props.displayOnly) {
-    props.handleTriggerClick($event, type);
+const handleClick = ({ props, refs, state }) => ($event, type) => {
+  if (props.disabled || props.displayOnly || state.isStopPropagation) {
+    return;
+  }
+  const { uploader, uploadInner } = state;
+  const { encryptConfig = {} } = uploader;
+  const fileUploadVm = uploadInner.$parent;
+  const inputHandler = () => {
+    typeof props.handleTriggerClick === "function" && props.handleTriggerClick($event, type);
+    if (props.isHwh5) {
+      return;
+    }
     refs.input.value = null;
+    state.isStopPropagation = true;
     refs.input.click();
+    state.isStopPropagation = false;
+  };
+  if (typeof uploader.beforeAddFile === "function") {
+    $event.preventDefault();
+    let isPromise;
+    const promise = uploader.beforeAddFile(() => {
+      !isPromise && inputHandler();
+    });
+    isPromise = promise && typeof promise.then === "function";
+    if (isPromise) {
+      promise.then(() => inputHandler()).catch(() => null);
+    } else if (promise) {
+      inputHandler();
+    }
+  } else if (encryptConfig && encryptConfig.enabled && fileUploadVm) {
+    fileUploadVm.state.encryptDialogConfig.show = true;
+    fileUploadVm.state.encryptDialogConfig.selectFileMethod = () => {
+      inputHandler();
+    };
+  } else {
+    inputHandler();
   }
 };
 const handleKeydown = (api) => (event) => {

package/upload/vue.js

@@ -27,17 +27,20 @@ const api = [
   "handleKeydown",
   "handleUpdate"
 ];
-const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmount }, { refs, service, t }, { Modal }) => {
+const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmount }, { refs, service, t, useBreakpoint }, { Modal }) => {
   const api2 = {};
   const uploader = inject("uploader");
   const constants = uploader.$constants;
+  const { current } = useBreakpoint();
   const state = reactive({
+    currentBreakpoint: current,
     mouseover: false,
     reqs: {},
     uploader,
     accecpt: "",
-    isEdm: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE].state.isEdm),
-    openEdmDownload: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE].edm.download),
+    uploadInner: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE]),
+    isEdm: computed(() => state.uploadInner.state.isEdm),
+    openEdmDownload: computed(() => state.uploadInner.edm.download),
     headers: computed(() => {
       if (state.isEdm) {
         return {
@@ -49,14 +52,15 @@ const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmo
     formData: {},
     cancelToken: {},
     updateId: "",
-    updateInput: null
+    updateInput: null,
+    isStopPropagation: false
   });
   Object.assign(api2, {
     state,
     isImage,
     abort: abort({ state, props, constants }),
     getFormData: getFormData({ state, constants, props }),
-    handleClick: handleClick({ props, refs }),
+    handleClick: handleClick({ props, refs, state }),
     onBeforeDestroy: onBeforeDestroy(state),
     handleUpdate: handleUpdate({ state, props }),
     uploadFiles: uploadFiles({ constants, Modal, props, state, t }),

package/upload-dragger/index.js

@@ -13,27 +13,29 @@ const onDrop = ({ emit, props, state }) => (event) => {
     return;
   }
   const notAcceptedFiles = [];
-  const filteredFile = [].slice.call(files).filter((file) => {
-    const { type, name } = file;
-    const extension = name.includes(".") ? `.${name.split(".").pop()}` : "";
-    const baseType = type.replace(/\/.*$/, "");
-    let isValid = accept.split(",").map((type2) => type2.trim()).filter((type2) => type2).some((type2) => {
-      if (/\..+$/.test(type2)) {
-        return extension === type2;
-      }
-      if (/\/\*$/.test(type2)) {
-        return baseType === type2.replace(/\/\*$/, "");
-      }
-      if (/^[^/]+\/[^/]+$/.test(type2)) {
-        return true;
-      }
-      return false;
+  if (files) {
+    Array.from(files).filter((file) => {
+      const { type, name } = file;
+      const extension = name.includes(".") ? `.${name.split(".").pop()}` : "";
+      const baseType = type.replace(/\/.*$/, "");
+      let isValid = accept.split(",").map((type2) => type2.trim()).filter((type2) => type2).some((type2) => {
+        if (/\..+$/.test(type2)) {
+          return extension === type2;
+        }
+        if (/\/\*$/.test(type2)) {
+          return baseType === type2.replace(/\/\*$/, "");
+        }
+        if (/^[^/]+\/[^/]+$/.test(type2)) {
+          return true;
+        }
+        return false;
+      });
+      !isValid && notAcceptedFiles.push(file);
+      return isValid;
     });
-    !isValid && notAcceptedFiles.push(file);
-    return isValid;
-  });
-  notAcceptedFiles.length && state.uploader.$emit("drop-error", notAcceptedFiles);
-  emit("file", filteredFile);
+    notAcceptedFiles.length && state.uploader.$emit("drop-error", notAcceptedFiles);
+  }
+  emit("file", files);
 };
 const watchDragover = ({ state, constants }) => () => {
   state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE].$emit("drag-over", state.dragover);

package/upload-list/index.js

@@ -40,7 +40,7 @@ const picturefilePreview = (state) => (index) => {
 const getDeleteData = (emit) => (data) => {
   emit("remove", data);
 };
-const showOperatePanel = ({ state }) => (file) => {
+const showOperatePanel = ({ state }) => ({ file }) => {
   state.currentFile = file;
   state.showPanel = true;
 };
@@ -96,43 +96,43 @@ const getFileIcon = ({ constants }) => ({ type }) => {
   let iconTypes = {
     [EXCEL]: {
       name: "icon-excel-type",
-      color: "#00A2B5"
+      color: "#09AA71"
     },
     [FILE]: {
       name: "icon-file-type",
-      color: "#71C14C"
+      color: "#09AA71"
     },
     [PDF]: {
       name: "icon-pdf-type",
-      color: "#FC916E"
+      color: "#E02128"
     },
     [PICTURE]: {
       name: "icon-picture-type",
-      color: "#2E94FF"
+      color: "#5531EB"
     },
     [PPT]: {
       name: "icon-ppt-type",
-      color: "#F46087"
+      color: "#E02128"
     },
     [TEXT]: {
       name: "icon-text-type",
-      color: "#9185F0"
+      color: "#2CB8C9"
     },
     [WORD]: {
       name: "icon-word-type",
-      color: "#2070F3"
+      color: "#0067D1"
     },
     [ZIP]: {
       name: "icon-zip-type",
-      color: "#FDC000"
+      color: "#2CB8C9"
     },
     [VIDEO]: {
       name: "icon-video-type",
-      color: "#2E94FF"
+      color: "#0067D1"
     },
     [AUDIO]: {
       name: "icon-audio",
-      color: "#2E94FF"
+      color: "#5531EB"
     },
     default: {
       name: "icon-other-type",
@@ -153,11 +153,11 @@ const calcUploadListLiWidth = ({ vm, nextTick, props, constants }) => () => {
   const { listType } = props;
   const { LIST_TYPE } = constants;
   nextTick(() => {
-    const uploadListEle = vm.$refs["upload-list"];
-    const uploadListLiEle = vm.$refs["upload-list-li"];
+    const uploadListEle = vm.$refs.uploadList;
+    const uploadListLiEle = uploadListEle && uploadListEle.querySelectorAll('[data-tag="tiny-upload-list-item"]');
     if (!uploadListEle || !(uploadListLiEle && uploadListLiEle[0]))
       return;
-    if (listType === LIST_TYPE.TEXT) {
+    if (listType === LIST_TYPE.TEXT || listType === LIST_TYPE.SAAS) {
       const { minWidth } = window.getComputedStyle(uploadListLiEle && uploadListLiEle[0]);
       const marginRight = 8;
       const num = Math.floor(uploadListEle.offsetWidth / (parseFloat(minWidth) + marginRight));
@@ -213,11 +213,17 @@ const handleTriggerClick = ({ state, props }) => ($event, type) => {
   });
 };
 const mounted = ({ api, vm }) => () => {
-  const el = vm.$refs["upload-list"];
-  el && addResizeListener(el, api.calcUploadListLiWidth);
+  const el = vm.$refs.uploadList;
+  if (el) {
+    addResizeListener(el, api.calcUploadListLiWidth);
+    vm._removeResizeListener = () => removeResizeListener(el, api.calcUploadListLiWidth);
+  }
 };
-const destroyed = ({ api, props, vm }) => () => {
-  removeResizeListener(vm.$refs["upload-list"], api.calcUploadListLiWidth);
+const destroyed = ({ props, vm }) => () => {
+  if (vm._removeResizeListener) {
+    vm._removeResizeListener();
+    vm._removeResizeListener = null;
+  }
   props.files.forEach((file) => {
     removePlayEventListener({ type: "ended", el: file.el }, file.playEvent);
     delete file.playEvent;