@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/dropdown-item/mf.js

@@ -3,12 +3,11 @@ import { omitText } from "../common/string";
 const api = ["dataStore", "handleClick", "dataStore", "mouseEnter", "mouseLeave"];
 const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   const api2 = {};
-  const dropdownMenuVm = inject("dropdownMenuVm");
-  const multiStage = inject("multiStage");
+  const dropdownMenuVm = inject("dropdownMenuVm", null);
   let dataStore = reactive({
-    checkedStatus: dropdownMenuVm.checkedStatus,
+    checkedStatus: dropdownMenuVm == null ? void 0 : dropdownMenuVm.checkedStatus,
     multiStageMenu: "",
-    multiStage: "",
+    multiStage: inject("multiStage", null),
     itemData: "",
     itemLabel: "",
     showContent: false,
@@ -16,9 +15,6 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
     currentIndex: props.currentIndex,
     level: props.level
   });
-  if (multiStage) {
-    dataStore.multiStageMenu = true;
-  }
   const handleClick = ({ dataStore: dataStore2, props: props2, vm: vm2 }) => () => {
     if (props2.disabled) {
       dataStore2.checkedStatus = false;
@@ -31,7 +27,7 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
     } else {
       dataStore2.currentIndex = `${props2.currentIndex}`;
     }
-    dispatch("TinyDropdown", "selectedIndex", [dataStore2.currentIndex]);
+    dispatch("TinyDropdown", "selected-index", [dataStore2.currentIndex]);
     const data = {
       itemData: dataStore2.itemData,
       vm: vm2,
@@ -69,8 +65,8 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   Object.assign(api2, {
     dataStore,
     handleClick: handleClick({ dataStore, props, vm }),
-    mouseEnter: mouseEnter({ dataStore, vm, props }),
-    mouseLeave: mouseLeave({ dataStore, props })
+    mouseEnter: mouseEnter({ dataStore, vm }),
+    mouseLeave: mouseLeave({ dataStore })
   });
   return api2;
 };

package/dropdown-item/vue.js

@@ -39,6 +39,7 @@ const api = [
 ];
 const initState = ({ reactive, computed, api: api2, props, parent, dropdownMenuVm }) => {
   const state = reactive({
+    checkedStatus: dropdownMenuVm == null ? void 0 : dropdownMenuVm.checkedStatus,
     sort: props.modelValue,
     transition: true,
     getTitle: false,
@@ -52,9 +53,12 @@ const initState = ({ reactive, computed, api: api2, props, parent, dropdownMenuV
     itemStyle: computed(() => api2.getItemStyle()),
     activeColor: computed(() => parent.activeColor),
     closeOnClickOverlay: computed(() => parent.closeOnClickOverlay),
+    dropdownMenuVm,
+    currentIndex: props.currentIndex,
     textField: (dropdownMenuVm == null ? void 0 : dropdownMenuVm.textField) || props.textField,
     popperClass: (dropdownMenuVm == null ? void 0 : dropdownMenuVm.popperClass) || "",
-    getIcon: computed(() => api2.computedGetIcon())
+    getIcon: computed(() => api2.computedGetIcon()),
+    children: []
   });
   return state;
 };
@@ -77,21 +81,30 @@ const initApi = ({ api: api2, state, emit, props, parent, dispatch, vm, constant
     getItemStyle: getItemStyle({ parent, state }),
     bindScroll: bindScroll({ api: api2, parent }),
     confirm: confirm({ emit, props, state }),
-    handleClick: handleClick({ props, dispatch, vm, emit }),
+    handleClick: handleClick({ state, props, dispatch, vm, emit }),
     computedGetIcon: computedGetIcon({ constants, designConfig }),
     getTip: getTip({ props, vm })
   });
 };
-const renderless = (props, { computed, reactive, watch, inject }, { parent, emit, vm, dispatch, mode, constants, designConfig }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, inject }, { parent, emit, vm, dispatch, constants, designConfig }) => {
   const api2 = {};
-  const dropdownMenuVm = inject("dropdownMenuVm");
-  if (mode === "mobile" && dropdownMenuVm) {
-    dropdownMenuVm.state.children = [...dropdownMenuVm.state.children, vm];
-  }
-  parent = parent.$parent;
+  const dropdownMenuVm = inject("dropdownMenuVm", null);
   const state = initState({ reactive, computed, api: api2, props, parent, dropdownMenuVm });
   initApi({ api: api2, state, emit, props, parent, dispatch, vm, constants, designConfig });
   watch(() => state.showPopup, api2.bindScroll);
+  onMounted(() => {
+    const realParent = parent.$parent.$parent || {};
+    if (realParent.state && realParent.state.children) {
+      realParent.state.children.push(vm);
+    } else {
+      if (dropdownMenuVm) {
+        dropdownMenuVm.state.children = [...dropdownMenuVm.state.children, vm];
+      }
+    }
+    if (props.disabled) {
+      state.checkedStatus = false;
+    }
+  });
   return api2;
 };
 export {

package/dropdown-menu/index.js

@@ -6,7 +6,7 @@ const toggleItem = (state) => (active, item) => {
   if (item.disabled) {
     return;
   }
-  if (item.type == "sort") {
+  if (item.type === "sort") {
     if (!item.modelValue || item.modelValue === "desc") {
       item.state.sort = "asc";
       item.$emit("update:modelValue", "asc");
@@ -64,21 +64,34 @@ const getScroller = (el, root) => {
   }
   return root || null;
 };
-const useVuePopper = ({ api, props, hooks, instance, state, dropdownVm }) => {
+const useVuePopper = ({
+  api,
+  props,
+  hooks,
+  instance,
+  state,
+  dropdownVm,
+  designConfig
+}) => {
+  var _a, _b;
   const { nextTick, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch } = hooks;
-  const { emit, refs, slots, vm, parent } = instance;
+  const { emit, slots, vm, parent } = instance;
+  const designProps = {
+    placement: props.placement || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.placement) || "bottom-end",
+    visibleArrow: props.visibleArrow || ((_b = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _b.visibleArrow) || false
+  };
   const popper = userPopper({
     emit,
     nextTick,
     onBeforeUnmount,
     onDeactivated,
-    props: __spreadValues({
+    props: __spreadValues(__spreadValues({
       popperOptions: { boundariesPadding: 0, gpuAcceleration: false },
       offset: 0,
       boundariesPadding: 5
-    }, props),
+    }, props), designProps),
     reactive,
-    refs,
+    vm,
     slots,
     toRefs,
     watch
@@ -118,7 +131,7 @@ const useVuePopper = ({ api, props, hooks, instance, state, dropdownVm }) => {
   );
 };
 const mounted = ({ api, parent, state }) => () => {
-  parent.$on("menuselectedIndex", (selectedIndex) => {
+  parent.$on("menu-selected-index", (selectedIndex) => {
     state.selectedIndex = selectedIndex;
   });
   parent.$on("menu-item-click", api.handleMenuItemClick);

package/dropdown-menu/vue.js

@@ -22,7 +22,7 @@ const api = [
 const renderless = (props, hooks, instance) => {
   const api2 = {};
   const { reactive, provide, onMounted, inject } = hooks;
-  const { nextTick, mode, vm, parent, dispatch, emit } = instance;
+  const { nextTick, mode, vm, parent, dispatch, emit, designConfig } = instance;
   const state = reactive({
     offset: 0,
     scroller: null,
@@ -32,7 +32,8 @@ const renderless = (props, hooks, instance) => {
     label: "",
     showContent: false,
     selected: false,
-    selectedIndex: -1
+    selectedIndex: -1,
+    canvasHeight: inject("change-size", null)
   });
   provide("dropdownMenuVm", vm);
   provide("multiStage", props.multiStage);
@@ -42,7 +43,7 @@ const renderless = (props, hooks, instance) => {
       state.scroller = getScroller(vm.$refs.menu);
     });
   } else {
-    useVuePopper({ api: api2, hooks, props, instance, state, dropdownVm });
+    useVuePopper({ api: api2, hooks, props, instance, state, dropdownVm, designConfig });
   }
   Object.assign(api2, {
     state,

package/exception/index.js

@@ -1,10 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-const create = (emit) => () => emit("btn-click");
-const getMessage = ({ props, t }) => () => {
-  const types = ["build", "weaknet", "pcview", "busy", "noperm"];
-  return props.message || t(`ui.exception.${~types.indexOf(props.type) ? props.type : "nodata"}`);
-};
+const emitClick = (emit) => () => emit("click");
 export {
-  create,
-  getMessage
+  emitClick
 };

package/exception/vue.js

@@ -1,17 +1,14 @@
 import "../chunk-G2ADBYYC.js";
-import { create, getMessage } from "./index";
+import { emitClick } from "./index";
 const api = ["state", "create"];
-const renderless = (props, { computed, reactive }, { t, emit }, { images }) => {
-  const api2 = {
-    create: create(emit),
-    getMessage: getMessage({ props, t })
-  };
+const renderless = (props, { reactive }, { emit }) => {
   const state = reactive({
-    urlType: props.type,
-    images,
-    message: computed(() => api2.getMessage({ props, t }))
+    urlType: props.type
   });
-  api2.state = state;
+  const api2 = {
+    state,
+    create: emitClick(emit)
+  };
   return api2;
 };
 export {

package/fall-menu/index.js

@@ -33,7 +33,11 @@ const computePx = ({ props, refs, state }) => () => {
   const list = refs.list;
   const width = list.parentElement.clientWidth;
   const arr = list.querySelectorAll("li");
-  const set = { data: [], offset: [], index: [] };
+  const set = {
+    data: [],
+    offset: [],
+    index: []
+  };
   const liWidth = [];
   let innerwidth = 0;
   let start = 0;

package/fall-menu/vue.js

@@ -12,7 +12,12 @@ import {
   computeData
 } from "./index";
 const api = ["state", "fall", "arrowClick", "mouseover", "mouseout", "overContent", "reRender", "left"];
-const initState = ({ reactive, computed, api: api2, props }) => {
+const initState = ({
+  reactive,
+  computed,
+  api: api2,
+  props
+}) => {
   const state = reactive({
     pager: 1,
     level2data: [],
@@ -24,7 +29,13 @@ const initState = ({ reactive, computed, api: api2, props }) => {
   });
   return state;
 };
-const initApi = ({ api: api2, state, fall, props, refs }) => {
+const initApi = ({
+  api: api2,
+  state,
+  fall,
+  props,
+  refs
+}) => {
   Object.assign(api2, {
     fall,
     state,

package/file-upload/index.js

@@ -77,7 +77,7 @@ const watchListType = ({ constants, state, api }) => (type) => {
         try {
           file.url = URL.createObjectURL(file.raw);
         } catch (err) {
-          return;
+          return null;
         }
       }
       return file;
@@ -412,7 +412,8 @@ const getFileHash = ({
     };
   });
 };
-const handleHwh5Files = (files) => {
+const handleHwh5Files = (files, hwh5) => {
+  const fileMap = hwh5 && hwh5.fileMap;
   return files.map((file) => {
     if (file instanceof File)
       return file;
@@ -427,7 +428,8 @@ const handleHwh5Files = (files) => {
     const [name, index] = url.match(/[^/]*$/);
     const [type] = url.match(/\.[^.]*$/);
     const filePath = url.substring(0, index);
-    return __spreadProps(__spreadValues({}, f), { type, name, filePath, webkitRelativePath: filePath });
+    const updateFile2 = __spreadProps(__spreadValues({}, f), { type, name, filePath, webkitRelativePath: filePath });
+    return typeof fileMap === "function" ? fileMap(updateFile2) : updateFile2;
   });
 };
 const handleStart = ({
@@ -438,7 +440,7 @@ const handleStart = ({
   vm
 }) => (rawFiles, updateId, reUpload = false) => {
   if (state.isHwh5) {
-    rawFiles = handleHwh5Files(rawFiles);
+    rawFiles = handleHwh5Files(rawFiles, props.hwh5);
   }
   state.currentUploadingFileUids = [];
   rawFiles.forEach((rawFile) => api.addFileToList(rawFile, updateId, reUpload));
@@ -481,14 +483,14 @@ const handleStart = ({
   }
   if (!state.isEdm && props.autoUpload) {
     if (props.multiple && props.mergeService) {
-      const handler = (file) => (vm.$refs[constants.UPLOAD_INNER].$refs[constants.UPLOAD_INNER_TEMPLATE].upload(file.raw), void 0);
+      const handler = (file) => vm.$refs[constants.UPLOAD_INNER].$refs[constants.UPLOAD_INNER_TEMPLATE].upload(file.raw);
       rawFiles.length && api.beforeUpload({ raw: rawFiles }, true, handler);
     } else {
       rawFiles.forEach((rawFile) => {
         const file = api.getFile(rawFile);
         if (!file)
           return;
-        const handler = (file2) => (vm.$refs[constants.UPLOAD_INNER].$refs[constants.UPLOAD_INNER_TEMPLATE].upload(file2.raw), void 0);
+        const handler = (file2) => vm.$refs[constants.UPLOAD_INNER].$refs[constants.UPLOAD_INNER_TEMPLATE].upload(file2.raw);
         api.beforeUpload(file, true, handler);
       });
     }
@@ -560,6 +562,7 @@ const handleSuccess = ({
   Modal,
   t
 }) => (res, rawFile) => {
+  var _a;
   const currentUploadFiles = state.uploadFiles.filter((file) => state.currentUploadingFileUids.includes(file.uid));
   if (Array.isArray(rawFile)) {
     state.uploadFiles.forEach((file) => {
@@ -574,7 +577,7 @@ const handleSuccess = ({
     });
   } else {
     const file = api.getFile(rawFile);
-    const status = res.data && res.data.status;
+    const status = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a.status;
     const { STATUS_SPECIAL_CHARACTERS, NOT_SUPPORT_SPECIAL_CHARACTERS } = constants.EDM;
     delete file.cancelToken;
     if (props.edm.upload && file && res.data && status !== 200) {
@@ -1179,9 +1182,9 @@ const getDownloadFileInfo = ({ api, state, props, service }) => ({ docId }) => {
         cancelToken: api.createDownloadCancelToken({ docId }),
         data: { docInfoVO: { ids: [docId], docType: "", docVersion: "" } }
       }).then((res) => {
-        const { data, outDocQueryList } = res || {};
+        const { data } = res || {};
         if (data && data.status === 200) {
-          const fileInfo = outDocQueryList && outDocQueryList[0].verInfo[0].docInfo[0];
+          const fileInfo = data.result.outDocQueryList && data.result.outDocQueryList[0].verInfo[0].docInfo[0];
           resolve(fileInfo);
         } else {
           reject(res);
@@ -1867,7 +1870,7 @@ const getPreviewUrlSync = ({ constants, props, state }) => (file, batch) => {
         authToken: edmToken,
         jslibhtml: html,
         docId: file.docId,
-        docVersion: file.docVersion || file.version || "V1",
+        docVersion: file.docVersion || file.version || "",
         type: "doc",
         pageNum: "1"
       });
@@ -1937,7 +1940,7 @@ const previewImageBatch = ({ service, api }) => ({ url, file }) => {
   });
   return service.all(promises);
 };
-const getDialogConfigObj = ({ props, state }) => () => {
+const getDialogConfigObj = ({ props, state, t, constants }) => () => {
   const dialogConfigDefault = {
     class: "single-download-modal single-download-modal1",
     style: "",
@@ -1945,7 +1948,7 @@ const getDialogConfigObj = ({ props, state }) => () => {
       lockScroll: true,
       visible: state.showPreview,
       dragable: true,
-      title: "\u6587\u6863\u9884\u89C8",
+      title: t(constants.EDM.DOC_PREVIEW),
       width: "60%"
     },
     on: {
@@ -1985,6 +1988,7 @@ const computeDocChunkSize = ({ props, state, constants }) => () => {
         chunkSize = Math.max(size, SIZE_2M);
         return true;
       }
+      return false;
     });
   }
   state.docSize = docSize * 1024;
@@ -2067,6 +2071,35 @@ const encryptDialogConfirm = ({ state }) => () => {
   state.encryptDialogConfig.show = false;
   typeof selectFileMethod === "function" && selectFileMethod();
 };
+const closeRecordPanel = ({ vm, constants, state, props }) => () => {
+  const { PICTURE_CARD } = constants.LIST_TYPE;
+  const { isHwh5 } = state;
+  const { listType } = props;
+  if (listType === PICTURE_CARD && isHwh5) {
+    vm.$refs[constants.UPLOAD_LIST_INNER].$refs[constants.UPLOAD_LIST_INNER_TEMPLATE].state.showAudioPanel = false;
+  }
+};
+const getTipMessage = ({ t, api, constants }) => ({ accept, fileSize, limit }) => {
+  let acceptTip = accept ? t(constants.ONLY_SUPPORT, {
+    type: accept.split(",").map((item) => item.trim().replace(/^\./, "")).join(t(constants.COMMA))
+  }) : "";
+  if (fileSize && acceptTip.length !== 0) {
+    acceptTip += `${t(constants.COMMA)} `;
+  }
+  let fileSizeTip = "";
+  let kibibyte = 1024;
+  if (typeof fileSize === "number") {
+    fileSizeTip = `${t(constants.FILE_NOT_LESS_THAN)}${api.formatFileSize(fileSize * kibibyte)}`;
+  } else if (Array.isArray(fileSize)) {
+    fileSizeTip += !isNaN(fileSize[0]) ? `${t(constants.FILE_NOT_LESS_THAN)}${api.formatFileSize(Number(fileSize[0]) * kibibyte)}${t(constants.COMMA)}` : "";
+    fileSizeTip += !isNaN(fileSize[1]) ? `${t(constants.FILE_NOT_MORE_THAN)}${api.formatFileSize(Number(fileSize[1]) * kibibyte)}` : "";
+  }
+  let limitTip = limit ? t(constants.NUMBER_LIMIT, { number: limit }) : "";
+  if ((fileSize || acceptTip.length !== 0) && limit) {
+    limitTip = `${t(constants.COMMA)} ` + limitTip;
+  }
+  return acceptTip + fileSizeTip + limitTip;
+};
 export {
   abort,
   abortDownload,
@@ -2078,6 +2111,7 @@ export {
   calcUploadingFilesInfo,
   clearFiles,
   clearUploadingFiles,
+  closeRecordPanel,
   computeDocChunkSize,
   computedSourcetype,
   computedUploadDisabled,
@@ -2103,6 +2137,7 @@ export {
   getKiaScanTip,
   getNewTabPreviewUrl,
   getPreviewUrlSync,
+  getTipMessage,
   getToken,
   handleChange,
   handleClick,

package/file-upload/vue.js

@@ -71,7 +71,9 @@ import {
   computedSourcetype,
   getFileSourceType,
   encryptDialogConfirm,
-  handleTriggerClick
+  handleTriggerClick,
+  closeRecordPanel,
+  getTipMessage
 } from "./index";
 import { isEmptyObject } from "../common/type";
 const api = [
@@ -99,10 +101,24 @@ const api = [
   "abortDownload",
   "handleClickFileList",
   "handleTriggerClick",
+  "closeRecordPanel",
   "encryptDialogConfirm",
-  "formatFileSize"
+  "formatFileSize",
+  "getTipMessage"
 ];
-const initState = ({ api: api2, reactive, computed, inject, ref, vm, props, httpRequest, service }) => {
+const initState = ({
+  api: api2,
+  reactive,
+  computed,
+  inject,
+  ref,
+  vm,
+  props,
+  httpRequest,
+  service,
+  useBreakpoint
+}) => {
+  const { current } = useBreakpoint();
   const state = reactive({
     url: "",
     updateId: "",
@@ -165,7 +181,8 @@ const initState = ({ api: api2, reactive, computed, inject, ref, vm, props, http
     encryptDialogConfig: {
       show: false,
       selectFileMethod: null
-    }
+    },
+    current
   });
   return state;
 };
@@ -185,7 +202,7 @@ const initApi = ({ api: api2, state, props, constants, vm, $service, t, Modal })
     computedUploadingSize: computedUploadingSize({ state, constants }),
     getFileUploadUrl: getFileUploadUrl($service),
     getToken: getToken({ constants, props, state, t, Modal }),
-    getDialogConfigObj: getDialogConfigObj({ props, state }),
+    getDialogConfigObj: getDialogConfigObj({ props, state, t, constants }),
     computeDocChunkSize: computeDocChunkSize({ props, state, constants }),
     updateFile: updateFile({ constants, vm }),
     getPreviewUrlSync: getPreviewUrlSync({ constants, props, state }),
@@ -203,6 +220,7 @@ const initApi = ({ api: api2, state, props, constants, vm, $service, t, Modal })
     computedSourcetype: computedSourcetype({ props, constants }),
     getFileSourceType: getFileSourceType({ state, props, constants }),
     encryptDialogConfirm: encryptDialogConfirm({ state }),
+    getTipMessage: getTipMessage({ t, api: api2, constants }),
     formatFileSize
   });
 };
@@ -246,7 +264,8 @@ const mergeApi = ({ api: api2, props, $service, state, constants, emit, mode, Mo
     validateDownloadStatus: validateDownloadStatus({ state, Modal }),
     handleChange: handleChange({ vm, constants }),
     handleClickFileList: handleClickFileList({ state, emit }),
-    handleTriggerClick: handleTriggerClick({ vm, state, constants, props, emit })
+    handleTriggerClick: handleTriggerClick({ vm, state, constants, props, emit }),
+    closeRecordPanel: closeRecordPanel({ vm, constants, state, props })
   });
 };
 const initWatch = ({ watch, state, api: api2, props, $service }) => {
@@ -278,11 +297,22 @@ const initWatch = ({ watch, state, api: api2, props, $service }) => {
   watch(() => props.edm, api2.computeDocChunkSize, { deep: true, immediate: true });
 };
 let getApi = () => ({});
-const renderless = (props, { computed, inject, onBeforeUnmount, provide, reactive, ref, watch, onMounted }, { t, vm, parent, emit, service, mode, constants }, { Modal, CryptoJS, Streamsaver }) => {
+const renderless = (props, { computed, inject, onBeforeUnmount, provide, reactive, ref, watch, onMounted }, { t, vm, parent, emit, service, mode, constants, useBreakpoint }, { Modal, CryptoJS, Streamsaver }) => {
   let api2 = {};
   const $service = initService({ props, service });
   const httpRequest = $service.httpRequest;
-  const state = initState({ reactive, computed, api: api2, inject, ref, vm, props, httpRequest, service });
+  const state = initState({
+    reactive,
+    computed,
+    api: api2,
+    inject,
+    ref,
+    vm,
+    props,
+    httpRequest,
+    service,
+    useBreakpoint
+  });
   initApi({ api: api2, state, props, constants, vm, $service, t, Modal });
   mergeApi({ api: api2, props, $service, state, constants, emit, mode, Modal, t, vm, CryptoJS, Streamsaver });
   getApi = () => api2;

package/filter-box/index.js

@@ -3,6 +3,7 @@ const handleClear = ({ dispatch, emit }) => ($event) => {
   dispatch("Picker", "handle-clear", $event);
   dispatch("Select", "handle-clear", $event);
   dispatch("Cascader", "handle-clear", $event);
+  dispatch("Amount", "handle-clear", $event);
   emit("handle-clear");
 };
 const handeClick = ({ props, emit }) => ($event) => {

package/floating-button/index.js

@@ -1,10 +1,11 @@
 import "../chunk-G2ADBYYC.js";
+import { off, on } from "../common/deps/dom";
 const getClientWidth = ({ state, vm }) => () => {
-  if (vm.$el) {
-    state.centerSpace = (document.documentElement.clientWidth - vm.$el.clientWidth) / 2;
+  if (vm.$refs.floatingButton) {
+    state.centerSpace = (document.documentElement.clientWidth - vm.$refs.floatingButton.clientWidth) / 2;
   }
 };
-const handleClick = ({ props, state, emit }) => (event) => {
+const handleClick = ({ props, state, emit }) => (event, index) => {
   if (state.disabled)
     return;
   if (props.resetTime > 0) {
@@ -13,33 +14,56 @@ const handleClick = ({ props, state, emit }) => (event) => {
       state.disabled = false;
     }, props.resetTime);
   }
-  emit("touchstart", event);
+  if (state.isExpand) {
+    state.isExpand = !state.isExpand;
+  } else if (props.isExpand) {
+    state.isExpand = true;
+  }
+  emit("click", event, index);
 };
-const clearTimer = (state) => () => clearTimeout(state.initTimer);
-const useTouchEvent = ({ state, vm, props }) => () => {
-  const screenHeight = window.innerHeight;
-  state.scrolling = false;
-  window.addEventListener("scroll", function() {
-    clearTimeout(state.stayTime);
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+const clearTimer = ({ state, api }) => () => {
+  clearTimeout(state.initTimer);
+  off(window, "resize", api.getClientWidth);
+  off(window, "scroll", api.onScroll);
+  off(window, "scroll", api.getScrollListener);
+};
+const getScrollListener = ({ vm, props, state }) => () => {
+  const scrollElement = props.elementSelector ? state.scrollElement : window;
+  const screenHeight = props.elementSelector ? state.elementHeight : state.screenHeight;
+  clearTimeout(state.stayTime);
+  const scrollTop = props.elementSelector ? scrollElement.scrollTop : document.documentElement.scrollTop || document.body.scrollTop;
+  if (vm.$refs.floatingButton) {
     if (props.animated && scrollTop > screenHeight / 2) {
-      state.commHiddenSpace = vm.$el.clientWidth * 0.7;
+      state.commHiddenSpace = vm.$refs.floatingButton.clientWidth * 0.7;
       state.centerSpace = -state.commHiddenSpace;
-      state.specialHiddenSpace = window.innerWidth - vm.$el.clientWidth * 0.3;
+      state.specialHiddenSpace = -vm.$refs.floatingButton.clientWidth * 0.7;
       state.stayTime = setTimeout(function() {
         if (scrollTop === state.lastScrollTop) {
-          state.centerSpace = (document.documentElement.clientWidth - vm.$el.clientWidth) / 2;
+          state.centerSpace = (document.documentElement.clientWidth - vm.$refs.floatingButton.clientWidth) / 2;
           state.commHiddenSpace = "";
           state.specialHiddenSpace = "";
         }
       }, 1e3);
       state.lastScrollTop = scrollTop;
     } else {
-      state.centerSpace = (document.documentElement.clientWidth - vm.$el.clientWidth) / 2;
+      state.centerSpace = (document.documentElement.clientWidth - vm.$refs.floatingButton.clientWidth) / 2;
       state.commHiddenSpace = "";
       state.specialHiddenSpace = "";
     }
-  });
+  }
+};
+const useTouchEvent = ({ state, props, nextTick, api }) => () => {
+  state.scrolling = false;
+  if (props.elementSelector) {
+    nextTick(() => {
+      state.scrollElement = document.querySelector(props.elementSelector);
+      state.elementHeight = state.scrollElement.scrollHeight;
+      state.scrollElement.addEventListener("scroll", api.getScrollListener);
+    });
+  } else {
+    state.screenHeight = window.innerHeight;
+    window.addEventListener("scroll", api.getScrollListener);
+  }
 };
 const onScroll = ({ state, api }) => () => {
   if (state.scrolling) {
@@ -63,11 +87,33 @@ const computedStyle = ({ props, state }) => () => {
   }
   return styleObj;
 };
+const getExpandList = ({ props, state }) => () => {
+  if (props.expandList && props.expandList.length > 0) {
+    const expandList = props.expandList.map((item) => {
+      item.title = item.title.slice(0, 4);
+      return item;
+    });
+    if (props.expandList.length > 3) {
+      state.expandList = expandList.slice(0, 3);
+    } else {
+      state.expandList = expandList;
+    }
+  }
+};
+const mounted = (api) => () => {
+  api.getClientWidth();
+  api.onScroll();
+  api.getExpandList();
+  on(window, "resize", api.getClientWidth);
+};
 export {
   clearTimer,
   computedStyle,
   getClientWidth,
+  getExpandList,
+  getScrollListener,
   handleClick,
+  mounted,
   onScroll,
   useTouchEvent
 };