@opentiny/vue-renderless 3.13.2 → 3.14.1

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/float-button/index.js

@@ -0,0 +1,42 @@
+import "../chunk-G2ADBYYC.js";
+const handleScroll = ({ props, state }) => {
+  if (props.element) {
+    const beforeHeight = props.element.scrollTop || document.documentElement.scrollTop || document.body.scrollTop;
+    if (beforeHeight <= props.visibilityHeight) {
+      state.show = false;
+    }
+    props.element.onscroll = function() {
+      state.show = true;
+      const height = props.element.scrollTop || document.documentElement.scrollTop || document.body.scrollTop;
+      if (height <= props.visibilityHeight) {
+        state.show = false;
+      }
+    };
+  }
+};
+const handleClick = ({ emit, props, state }) => (event) => {
+  var _a;
+  if (props.trigger === "click" && props.resetTime > 0 && !props.backTop) {
+    state.disabled = true;
+    state.open = !state.open;
+    state.timer = window.setTimeout(() => {
+      state.disabled = false;
+    }, props.resetTime);
+  }
+  if (!props.trigger && (props.href || props.target) && !props.backTop) {
+    window.open(props.href, props.target);
+  }
+  if (props.backTop) {
+    (_a = props.element) == null ? void 0 : _a.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }
+  emit("click", event);
+};
+const clearTimer = (state) => () => clearTimeout(state.timer);
+export {
+  clearTimer,
+  handleClick,
+  handleScroll
+};

package/float-button/vue.js

@@ -0,0 +1,101 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, clearTimer, handleScroll } from "./index";
+const api = ["state", "handleClick"];
+const watchVariable = ({ watch, props, state, nextTick, vm, emit }) => {
+  watch(
+    () => props.disabled,
+    (value) => {
+      state.disabled = value;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.open,
+    (value) => {
+      state.open = value;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => state.open,
+    (value) => {
+      if (value) {
+        let beforeRootDom = vm.$refs.tinyFloatButton;
+        let beforeRootDomStyle = (beforeRootDom == null ? void 0 : beforeRootDom.getClientRects()[0]) || 0;
+        nextTick(() => {
+          if (!beforeRootDomStyle) {
+            beforeRootDom = vm.$refs.tinyFloatButton;
+            beforeRootDomStyle = beforeRootDom.getClientRects()[0];
+          }
+          const dom = vm.$refs.tinyFloatButtonOpen;
+          const style = `left:0px;bottom:${beforeRootDomStyle.height + 4 + "px"};`;
+          dom == null ? void 0 : dom.setAttribute("style", style);
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.trigger,
+    (value) => {
+      if (value === "hover" && !state.hasEvent) {
+        nextTick(() => {
+          const dom = vm.$refs.tinyFloatButton;
+          dom.addEventListener("mouseover", (event) => {
+            state.open = true;
+            emit("mouseover", event);
+          });
+          dom.addEventListener("mouseout", (event) => {
+            state.open = false;
+            emit("mouseout", event);
+          });
+          state.hasEvent = true;
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.backTop,
+    (value) => {
+      if (value) {
+        handleScroll({ props, vm, state });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.element,
+    () => {
+      if (props.backTop) {
+        handleScroll({ props, vm, state });
+      }
+    }
+  );
+};
+const renderless = (props, { computed, onBeforeUnmount, reactive, watch, inject, nextTick }, { emit, parent, vm }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    timer: 0,
+    disabled: props.disabled,
+    open: props.open,
+    hasEvent: false,
+    show: true,
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    buttonDisabled: computed(
+      () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled
+    )
+  });
+  watchVariable({ props, vm, watch, state, nextTick, emit });
+  const api2 = {
+    state,
+    clearTimer: clearTimer(state),
+    handleClick: handleClick({ emit, props, state })
+  };
+  onBeforeUnmount(api2.clearTimer);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

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
 };

package/floating-button/vue.js

@@ -1,7 +1,17 @@
 import "../chunk-G2ADBYYC.js";
-import { getClientWidth, handleClick, clearTimer, useTouchEvent, onScroll, computedStyle } from "./index";
+import {
+  getClientWidth,
+  handleClick,
+  clearTimer,
+  useTouchEvent,
+  onScroll,
+  computedStyle,
+  getExpandList,
+  mounted,
+  getScrollListener
+} from "./index";
 const api = ["state", "handleClick"];
-const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, { vm, emit }) => {
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, watch }, { vm, emit, nextTick }) => {
   const state = reactive({
     centerSpace: 0,
     disabled: false,
@@ -11,22 +21,30 @@ const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, {
     specialHiddenSpace: "",
     stayTime: null,
     lastScrollTop: 0,
-    style: computed(() => api2.computedStyle())
+    style: computed(() => api2.computedStyle()),
+    expandList: null,
+    itemTitle: "",
+    isExpand: false,
+    scrollElement: "",
+    elementHeight: 0,
+    screenHeight: 0
   });
   const api2 = {};
   Object.assign(api2, {
     state,
     getClientWidth: getClientWidth({ state, vm }),
     handleClick: handleClick({ props, state, emit }),
-    clearTimer: clearTimer(state),
-    useTouchEvent: useTouchEvent({ state, vm, props }),
+    clearTimer: clearTimer({ state, api: api2 }),
+    useTouchEvent: useTouchEvent({ state, props, nextTick, api: api2 }),
     onScroll: onScroll({ state, api: api2 }),
-    computedStyle: computedStyle({ props, state })
-  });
-  onMounted(() => {
-    api2.getClientWidth(), api2.onScroll();
+    computedStyle: computedStyle({ props, state }),
+    getExpandList: getExpandList({ state, props }),
+    mounted: mounted(api2),
+    getScrollListener: getScrollListener({ vm, props, state })
   });
+  onMounted(api2.mounted);
   onBeforeUnmount(api2.clearTimer);
+  watch(() => props.expandList, api2.getExpandList);
   return api2;
 };
 export {