@opentiny/vue-renderless 3.6.8 → 3.8.2

package/time-picker-mobile/index.js

@@ -0,0 +1,30 @@
+import "../chunk-PKUHTIDK.js";
+const optionMethod = (value) => {
+  const val = ("0" + value).slice(-2);
+  return { id: val, label: val };
+};
+const watchModelValue = ({ props, state }) => () => {
+  const { modelValue } = props;
+  state.dateArr = modelValue ? modelValue.slice() : [];
+};
+const watchVisible = ({ api, state }) => (value) => {
+  state.visible = value;
+  value && api.watchModelValue();
+};
+const updateVisible = ({ state, emit }) => (value) => {
+  state.visible = value;
+  emit("update:visible", value);
+};
+const confirm = ({ emit, state }) => (value) => {
+  const dateArr = value.map((item) => ("0" + item).slice(-2));
+  state.dateArr = dateArr;
+  emit("update:modelValue", dateArr);
+  emit("confirm", dateArr);
+};
+export {
+  confirm,
+  optionMethod,
+  updateVisible,
+  watchModelValue,
+  watchVisible
+};

package/time-picker-mobile/vue.js

@@ -0,0 +1,30 @@
+import "../chunk-PKUHTIDK.js";
+import { optionMethod, watchModelValue, watchVisible, confirm, updateVisible } from "./index";
+const api = ["state", "confirm", "updateVisible"];
+const renderless = (props, { reactive, watch }, { emit }) => {
+  const api2 = {};
+  const state = reactive({
+    visible: false,
+    dateArr: [],
+    optionList: [
+      { range: [0, 23], optionMethod },
+      { range: [0, 59], optionMethod },
+      { range: [0, 59], optionMethod }
+    ]
+  });
+  Object.assign(api2, {
+    state,
+    watchModelValue: watchModelValue({ props, state }),
+    watchVisible: watchVisible({ api: api2, state }),
+    confirm: confirm({ emit, state }),
+    updateVisible: updateVisible({ emit, state }),
+    optionMethod
+  });
+  watch(() => props.visible, api2.watchVisible);
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/time-range/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { clearMilliseconds, timeWithinRange, limitTimeRange, modifyDate } from "@opentiny/vue-renderless/common/deps/date-util";
+import { clearMilliseconds, timeWithinRange, limitTimeRange, modifyDate } from "../common/deps/date-util";
 const minTimeOfDay = ({ MIN_TIME }) => (date) => modifyDate(MIN_TIME, date.getFullYear(), date.getMonth(), date.getDate());
 const maxTimeOfDay = ({ MAX_TIME }) => (date) => modifyDate(MAX_TIME, date.getFullYear(), date.getMonth(), date.getDate());
 const advanceTime = (api) => (date, amount) => new Date(Math.min(date.getTime() + amount, api.maxTimeOfDay(date).getTime()));

package/time-range/vue.js

@@ -18,7 +18,7 @@ import {
   advanceTime,
   compuAmPmMode
 } from "./index";
-import { parseDate } from "@opentiny/vue-renderless/common/deps/date-util";
+import { parseDate } from "../common/deps/date-util";
 const api = ["state", "handleMinChange", "handleConfirm", "setMinSelectionRange", "handleCancel", "setMaxSelectionRange", "handleMaxChange"];
 const initState = ({ reactive, computed, refs, api: api2 }) => {
   const state = reactive({

package/time-spinner/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { modifyTime } from "@opentiny/vue-renderless/common/deps/date-util";
-import { DATEPICKER } from "@opentiny/vue-renderless/common";
+import { modifyTime } from "../common/deps/date-util";
+import { DATEPICKER } from "../common";
 const getArrowHourList = (state) => () => {
   const hours = state.hours;
   return [hours > 0 ? hours - 1 : void 0, hours, hours < 23 ? hours + 1 : void 0];

package/time-spinner/vue.js

@@ -18,7 +18,7 @@ import {
   handleClick,
   emitSelectRange
 } from "./index";
-import { getRangeHours, getRangeMinutes } from "@opentiny/vue-renderless/common/deps/date-util";
+import { getRangeHours, getRangeMinutes } from "../common/deps/date-util";
 const api = ["state", "emitSelectRange", "adjustCurrentSpinner", "handleClick", "decrease", "increase", "amPm", "adjustSpinners"];
 const initState = ({ reactive, computed, props, api: api2 }) => {
   const state = reactive({

package/toggle-menu/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { xss } from "@opentiny/vue-renderless/common/xss.js";
-import { isObject } from "@opentiny/vue-renderless/common/type";
+import { xss } from "../common/xss.js";
+import { isObject } from "../common/type";
 const filterNode = (props) => (value, data) => {
   const node = data[props.props.label || "label"] || "";
   return node.includes(value);

package/toggle-menu/vue.js

@@ -16,7 +16,7 @@ import {
   nodeDrop,
   clickA
 } from "./index";
-import { setMenuKey } from "@opentiny/vue-renderless/tree-menu";
+import { setMenuKey } from "../tree-menu";
 const api = [
   "state",
   "setMenuKey",

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import debounce from "@opentiny/vue-renderless/common/deps/debounce";
-import { on, off, addClass, removeClass } from "@opentiny/vue-renderless/common/deps/dom";
+import debounce from "../common/deps/debounce";
+import { on, off, addClass, removeClass } from "../common/deps/dom";
 const show = ({ api, state, props }) => () => {
   if (props.visible === "auto") {
     const { clientWidth, scrollWidth } = state.referenceElm;
@@ -112,9 +112,14 @@ const bindEvent = ({ api, state, vm }) => (reference) => {
   on(referenceElm, "blur", api.handleBlur);
   on(referenceElm, "click", api.removeFocusing);
 };
-const bindPopper = ({ vm, refs, nextTick }) => (el) => {
+const bindPopper = ({ vm, refs, nextTick, popperVmRef }) => (el) => {
   nextTick(() => vm.bindEvent(el));
   if (vm.popperVM) {
+    if (!vm.$refs.popper) {
+      popperVmRef.popper = vm.popperVM.$el;
+    } else {
+      popperVmRef.popper = vm.$refs.popper;
+    }
     refs.popper || (refs.popper = vm.popperVM.$el);
     nextTick(() => {
       if (vm.modelValue) {
@@ -123,6 +128,26 @@ const bindPopper = ({ vm, refs, nextTick }) => (el) => {
     });
   }
 };
+const observeCallback = ({ state, popperVmRef }) => (mutationsList) => {
+  for (let mutation of mutationsList) {
+    if (mutation.type === "attributes" && mutation.attributeName === "x-placement") {
+      state.xPlacement = popperVmRef.popper.getAttribute("x-placement") || "bottom";
+    }
+  }
+};
+const handleDocumentClick = ({ props, api, state, popperVmRef }) => (event) => {
+  if (props.manual)
+    return;
+  const reference = state.referenceElm;
+  const $el = popperVmRef.popper;
+  if (!$el || !reference || $el.contains(event.target) || reference.contains(event.target)) {
+    return;
+  }
+  if (state.showPopper) {
+    api.setExpectedState(false);
+    api.debounceClose();
+  }
+};
 export {
   bindEvent,
   bindPopper,
@@ -131,9 +156,11 @@ export {
   focusHandler,
   handleBlur,
   handleClosePopper,
+  handleDocumentClick,
   handleFocus,
   handleShowPopper,
   hide,
+  observeCallback,
   removeFocusing,
   setExpectedState,
   show,

package/tooltip/vue.js

@@ -13,10 +13,12 @@ import {
   debounceClose,
   watchFocusing,
   bindPopper,
-  focusHandler
+  focusHandler,
+  observeCallback,
+  handleDocumentClick
 } from "./index";
-import userPopper from "@opentiny/vue-renderless/common/deps/vue-popper";
-import { guid } from "@opentiny/vue-renderless/common/string";
+import userPopper from "../common/deps/vue-popper";
+import { guid } from "../common/string";
 const api = [
   "state",
   "bindEvent",
@@ -29,9 +31,10 @@ const api = [
   "handleClosePopper",
   "setExpectedState",
   "updatePopper",
-  "focusHandler"
+  "focusHandler",
+  "markRaw"
 ];
-const initState = ({ reactive, showPopper, popperElm, referenceElm, props }) => reactive({
+const initState = ({ reactive, showPopper, popperElm, referenceElm, props, markRaw, inject }) => reactive({
   showPopper,
   popperElm,
   referenceElm,
@@ -40,22 +43,28 @@ const initState = ({ reactive, showPopper, popperElm, referenceElm, props }) =>
   expectedState: void 0,
   mounted: false,
   tooltipId: guid("tiny-tooltip-", 4),
-  tabindex: props.tabindex
+  tabindex: props.tabindex,
+  xPlacement: "bottom",
+  poppers: markRaw([]),
+  showContent: inject("showContent", null),
+  tipsMaxWidth: inject("tips-max-width", null)
 });
-const renderless = (props, { watch, toRefs, reactive, onBeforeUnmount, onDeactivated, onMounted, onUnmounted }, { vm, emit, refs, slots, nextTick, parent }) => {
+const renderless = (props, { watch, toRefs, reactive, onBeforeUnmount, onDeactivated, onMounted, onUnmounted, markRaw, inject }, { vm, emit, refs, slots, nextTick, parent }) => {
   const api2 = {};
-  const popperParam = { emit, props, nextTick, toRefs, reactive, parent, refs };
+  const popperParam = { emit, props, nextTick, toRefs, reactive, parent: parent.$parent, refs };
+  const popperVmRef = {};
   Object.assign(popperParam, { slots, onBeforeUnmount, onDeactivated, watch });
   const { showPopper, updatePopper, popperElm, referenceElm, doDestroy } = userPopper(popperParam);
-  const state = initState({ reactive, showPopper, popperElm, referenceElm, props });
+  const state = initState({ reactive, showPopper, popperElm, referenceElm, props, markRaw, inject });
   Object.assign(api2, {
     state,
+    markRaw,
     doDestroy,
     updatePopper,
     show: show({ api: api2, state, props }),
     hide: hide(api2),
     destroyed: destroyed({ state, api: api2 }),
-    bindPopper: bindPopper({ vm, refs, nextTick }),
+    bindPopper: bindPopper({ vm, refs, nextTick, popperVmRef }),
     watchFocusing: watchFocusing(state),
     removeFocusing: removeFocusing(state),
     handleBlur: handleBlur({ api: api2, state }),
@@ -65,16 +74,28 @@ const renderless = (props, { watch, toRefs, reactive, onBeforeUnmount, onDeactiv
     handleShowPopper: handleShowPopper({ props, state }),
     handleClosePopper: handleClosePopper({ api: api2, props, state }),
     bindEvent: bindEvent({ api: api2, state, vm }),
-    focusHandler: focusHandler({ slots, api: api2 })
+    focusHandler: focusHandler({ slots, api: api2 }),
+    handleDocumentClick: handleDocumentClick({ props, api: api2, state, popperVmRef }),
+    observeCallback: observeCallback({ state, popperVmRef })
   });
   watch(() => state.focusing, api2.watchFocusing);
   watch(
     () => props.modelValue,
     (val) => nextTick(() => props.manual && (state.showPopper = val))
   );
-  onMounted(api2.bindPopper);
+  onMounted(() => {
+    api2.bindPopper();
+    if (props.genArrowByHtml) {
+      const config = { attributes: true, childList: false, subtree: false };
+      api2.observer = new MutationObserver(api2.observeCallback);
+      api2.observer.observe(popperVmRef.popper, config);
+    }
+  });
   vm.$on("tooltip-update", api2.bindPopper);
-  onUnmounted(api2.destroyed);
+  onUnmounted(() => {
+    api2.destroyed();
+    api2.observer && api2.observer.disconnect();
+  });
   return api2;
 };
 export {

package/top-box/index.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
-import PopupManager from "@opentiny/vue-renderless/common/deps/popup-manager";
+import { KEY_CODE } from "../common";
+import { on, off } from "../common/deps/dom";
+import PopupManager from "../common/deps/popup-manager";
 const handleAfterLeave = (api) => () => api.destroy();
 const destroy = (parent) => () => {
   parent.$el.parentNode.removeChild(parent.$el);

package/transfer/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { copyArray } from "@opentiny/vue-renderless/common/object";
+import { copyArray } from "../common/object";
 const getObj = (props) => () => props.data.reduce((o, cur) => (o[cur[props.props.key]] = cur) && o, {});
 const getSourceData = ({ props, Tree }) => () => {
   if (props.render && props.render.plugin.name === Tree) {

package/transfer-panel/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { copyArray } from "@opentiny/vue-renderless/common/object";
-import { getFlatData } from "@opentiny/vue-renderless/transfer";
+import { copyArray } from "../common/object";
+import { getFlatData } from "../transfer";
 const showFilterData = (data, sign) => {
   const getChild = (data2, sign2) => data2.filter((node) => {
     if (node.children && node.children.length > 0) {

package/tree/index.js

@@ -1,10 +1,10 @@
 import "../chunk-PKUHTIDK.js";
-import { getNodeKey as innerGetNodekey } from "@opentiny/vue-renderless/common/deps/tree-model/util";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
-import TreeStore from "@opentiny/vue-renderless/common/deps/tree-model/tree-store";
-import { addClass, removeClass } from "@opentiny/vue-renderless/common/deps/dom";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
-import { getDataset } from "@opentiny/vue-renderless/common/dataset";
+import { getNodeKey as innerGetNodekey } from "../common/deps/tree-model/util";
+import { KEY_CODE } from "../common";
+import TreeStore from "../common/deps/tree-model/tree-store";
+import { addClass, removeClass } from "../common/deps/dom";
+import { on, off } from "../common/deps/dom";
+import { getDataset } from "../common/dataset";
 const setChildren = (props) => (data) => props.data = data;
 const getChildren = () => (props) => props.data;
 const computedTreeItemArray = () => (props, state) => Array.prototype.slice.call(state.treeItems);

package/tree/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import debounce from "@opentiny/vue-renderless/common/deps/debounce";
+import debounce from "../common/deps/debounce";
 import {
   computedShowEmptyText,
   closeMenu,

package/tree-node/index.js

@@ -1,7 +1,7 @@
 import {
   __spreadValues
 } from "../chunk-PKUHTIDK.js";
-import { getNodeKey as getTreeNodeKey } from "@opentiny/vue-renderless/common/deps/tree-model/util";
+import { getNodeKey as getTreeNodeKey } from "../common/deps/tree-model/util";
 const watchIndeterminate = ({ api, props }) => (value) => api.handleSelectChange(props.node.checked, value);
 const watchChecked = ({ api, props }) => (value) => api.handleSelectChange(value, props.node.indeterminate);
 const watchExpanded = ({ state }) => (value) => {

package/upload/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
+import { KEY_CODE } from "../common";
 const isImage = (str) => str.includes("image");
 const handleChange = (api) => (event) => {
   const files = event.target.files;

package/upload/vue.js

@@ -22,8 +22,8 @@ const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmo
     reqs: {},
     uploader: inject("uploader"),
     accecpt: "",
-    isEdm: computed(() => parent.state.isEdm),
-    openEdmDownload: computed(() => parent.edm.download),
+    isEdm: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER].state.isEdm),
+    openEdmDownload: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER].edm.download),
     headers: computed(() => {
       if (state.isEdm) {
         return {

package/upload-dragger/index.js

@@ -33,7 +33,11 @@ const onDrop = ({ emit, props, state }) => (event) => {
   notAcceptedFiles.length && state.uploader.$emit("drop-error", notAcceptedFiles);
   emit("file", filteredFile);
 };
+const watchDragover = ({ state, constants }) => () => {
+  state.uploader.$refs[constants.FILE_UPLOAD_INNER].$emit("drag-over", state.dragover);
+};
 export {
   onDragOver,
-  onDrop
+  onDrop,
+  watchDragover
 };

package/upload-dragger/vue.js

@@ -1,16 +1,22 @@
 import "../chunk-PKUHTIDK.js";
-import { onDragOver, onDrop } from "./index";
+import { onDragOver, onDrop, watchDragover } from "./index";
 const api = ["state", "onDragOver", "onDrop"];
-const renderless = (props, { inject, reactive, ref }, { emit }) => {
+const renderless = (props, { inject, reactive, ref, watch }, { emit }) => {
   const state = reactive({
     dragover: false,
     uploader: inject("uploader") || ref({ default: "" })
   });
+  const constants = state.uploader.$constants || {};
   const api2 = {
     state,
     onDragOver: onDragOver({ props, state }),
-    onDrop: onDrop({ emit, props, state })
+    onDrop: onDrop({ emit, props, state }),
+    watchDragover: watchDragover({ state, constants })
   };
+  watch(
+    () => state.dragover,
+    () => api2.watchDragover()
+  );
   return api2;
 };
 export {

package/upload-list/index.js

@@ -1,8 +1,11 @@
 import "../chunk-PKUHTIDK.js";
+import { xss } from "../common/xss";
+import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 const parsePercentage = () => (val) => parseInt(val, 10);
 const handleClick = ({ props, api, parent }) => (file) => {
   if (parent.state.isEdm) {
-    props.openDownloadFile && api.edmDownloadFile(file);
+    const { downloadFile: downloadFile2 } = api.getApi();
+    props.openDownloadFile && downloadFile2 && downloadFile2(file);
   } else {
     props.openDownloadFile && api.downloadFile(file);
   }
@@ -14,20 +17,19 @@ const downloadFile = (service) => (file) => {
   if (Array.isArray(data)) {
     responseFile = data[0];
   } else if (data && typeof data === "object") {
-    for (let key of Object.keys(data)) {
+    for (let key in data) {
       responseFile = data[key];
       break;
     }
   }
   if (responseFile) {
-    const getFileDownloadUrl = service && service.common && service.common.getFileDownloadUrl;
-    getFileDownloadUrl && getFileDownloadUrl().then((url) => {
-      window.open(url + "&id=" + responseFile.attachmentId + "&type=AttachmentDemo").opener = null;
+    service.getFileDownloadUrl().then((url) => {
+      window.open(xss.filterUrl(url + "&id=" + responseFile.attachmentId + "&type=AttachmentDemo")).opener = null;
     });
   } else if (file.url) {
-    window.open(file.url).opener = null;
+    window.open(xss.filterUrl(file.url)).opener = null;
   } else {
-    throw new Error("[tiny Error][FileUpload]file.url must not be empty");
+    throw new Error("[TINY Error][FileUpload]file.url must not be empty");
   }
 };
 const picturefilePreview = (state) => (index) => {
@@ -37,10 +39,158 @@ const picturefilePreview = (state) => (index) => {
 const getDeleteData = (emit) => (data) => {
   emit("remove", data);
 };
+const showOperatePanel = ({ state }) => ({ file }) => {
+  state.currentFile = file;
+  state.showPanel = true;
+};
+const reUpload = ({ emit, props, parent }) => (file) => {
+  parent.state.isEdm ? emit("start", [file && file.raw], "", true) : props.handleReUpload && props.handleReUpload(file);
+};
+const addPlayEventListener = ({ type, el }, fn) => el && el.addEventListener(type, fn);
+const removePlayEventListener = ({ type, el }, fn) => el && el.removeEventListener(type, fn);
+const play = ({ vm, api }) => ({ file, index, type }) => {
+  const videoOrAudioEle = vm.$refs[type + (file.uid || index)] && vm.$refs[type + (file.uid || index)][index];
+  if (file.isPlay)
+    return api.pause({ file, index, type });
+  if (videoOrAudioEle && videoOrAudioEle.play) {
+    file.playEvent = () => {
+      if (file) {
+        file.isPlay = false;
+        removePlayEventListener({ type: "ended", el: videoOrAudioEle }, file.playEvent);
+      }
+    };
+    file.el = videoOrAudioEle;
+    removePlayEventListener({ type: "ended", el: videoOrAudioEle }, file.playEvent);
+    addPlayEventListener({ type: "ended", el: videoOrAudioEle }, file.playEvent);
+    vm.$set(file, "isPlay", true);
+    videoOrAudioEle.play();
+  }
+};
+const pause = ({ vm }) => ({ file, index, type }) => {
+  const videoOrAudioEle = vm.$refs[type + (file.uid || index)] && vm.$refs[type + (file.uid || index)][index];
+  if (videoOrAudioEle && videoOrAudioEle.pause) {
+    removePlayEventListener({ type: "ended", el: videoOrAudioEle }, file.playEvent);
+    file.isPlay = false;
+    videoOrAudioEle.pause();
+  }
+};
+const handleLoadedmetadata = ({ vm }) => ({ e, file }) => {
+  vm.$set(file, "totalSecond", parseInt(e.target.duration));
+  vm.$set(file, "currentSecond", parseInt(e.target.currentTime));
+};
+const handleTimeupdate = () => ({ e, file }) => {
+  file.currentSecond = parseInt(e.target.currentTime);
+};
+const getFileType = () => ({ file }) => file.name && file.name.split(".")[file.name.split(".").length - 1].toLowerCase();
+const getFileIcon = () => ({ type }) => {
+  let iconTypes = {
+    "xls/xlsx": {
+      name: "icon-excel-type",
+      color: "#00A2B5"
+    },
+    file: {
+      name: "icon-file-type",
+      color: "#71C14C"
+    },
+    pdf: {
+      name: "icon-pdf-type",
+      color: "#FC916E"
+    },
+    "png/jpg/jpeg/gif/svg/webp/bmp/tif/pjp/apng/xbm/jxl/svgz/ico/tiff/jfif/pjpeg/avif": {
+      name: "icon-picture-type",
+      color: "#2E94FF"
+    },
+    "ppt/pptx": {
+      name: "icon-ppt-type",
+      color: "#F46087"
+    },
+    txt: {
+      name: "icon-text-type",
+      color: "#9185F0"
+    },
+    "doc/docx": {
+      name: "icon-word-type",
+      color: "#2070F3"
+    },
+    "zip/rar/arj/z/jar/lzh": {
+      name: "icon-zip-type",
+      color: "#FDC000"
+    },
+    "mp4/ogg/webm": {
+      name: "icon-video-type",
+      color: "#2E94FF"
+    },
+    "mp3/ogg/wav": {
+      name: "icon-audio",
+      color: "#2E94FF"
+    },
+    default: {
+      name: "icon-other-type",
+      color: "#9185F0"
+    }
+  };
+  for (const typeName in iconTypes) {
+    if (Object.hasOwnProperty.call(iconTypes, typeName)) {
+      const typeValue = iconTypes[typeName];
+      delete iconTypes[typeName];
+      typeName.split("/").forEach((type2) => iconTypes[type2] = typeValue);
+    }
+  }
+  return iconTypes[type] || iconTypes["default"];
+};
+const remove = ({ emit }) => ({ file }) => emit("remove", file);
+const calcUploadListLiWidth = ({ vm, nextTick, props, constants }) => () => {
+  const { listType } = props, { LIST_TYPE } = constants;
+  nextTick(() => {
+    const uploadListEle = vm.$refs["upload-list"];
+    const uploadListLiEle = vm.$refs["upload-list-li"];
+    if (!uploadListEle || !(uploadListLiEle && uploadListLiEle[0]))
+      return;
+    if (listType === LIST_TYPE.TEXT) {
+      const { minWidth } = window.getComputedStyle(uploadListLiEle && uploadListLiEle[0]);
+      const marginRight = 8;
+      const num = Math.floor(uploadListEle.offsetWidth / (parseFloat(minWidth) + marginRight));
+      Array.from(uploadListLiEle).forEach((li, index) => {
+        if (!((index + 1) % num) || num === 1) {
+          li.style.marginRight = 0;
+          li.style.width = `${100 / num}%`;
+        } else {
+          li.style.marginRight = `${marginRight}px`;
+          li.style.width = `calc(${100 / num}% - ${marginRight}px)`;
+        }
+      });
+    }
+  });
+};
+const mounted = ({ api, vm }) => () => {
+  const el = vm.$refs["upload-list"];
+  el && addResizeListener(el, api.calcUploadListLiWidth);
+};
+const destroyed = ({ api, props, vm }) => () => {
+  removeResizeListener(vm.$refs["upload-list"], api.calcUploadListLiWidth);
+  props.files.forEach((file) => {
+    removePlayEventListener({ type: "ended", el: file.el }, file.playEvent);
+    delete file.playEvent;
+    delete file.isPlay;
+    delete file.el;
+  });
+};
 export {
+  calcUploadListLiWidth,
+  destroyed,
   downloadFile,
   getDeleteData,
+  getFileIcon,
+  getFileType,
   handleClick,
+  handleLoadedmetadata,
+  handleTimeupdate,
+  mounted,
   parsePercentage,
-  picturefilePreview
+  pause,
+  picturefilePreview,
+  play,
+  reUpload,
+  remove,
+  showOperatePanel
 };