zartui 3.1.7 → 3.1.9

package/lib/zartui.js

@@ -639,7 +639,8 @@
   function callInterceptor(interceptor, {
     args = [],
     done,
-    canceled
+    canceled,
+    error
   }) {
     if (interceptor) {
       const returnVal = interceptor.apply(null, args);
@@ -650,7 +651,7 @@
           } else if (canceled) {
             canceled();
           }
-        }).catch(noop);
+        }).catch(error || noop);
       } else if (returnVal) {
         done();
       } else if (canceled) {
@@ -767,32 +768,53 @@
     }
   });
   const Badge = withInstall(stdin_default$1P);
+  let globalZIndex = 2e3;
+  const useGlobalZIndex = () => ++globalZIndex;
+  const setGlobalZIndex = (val) => {
+    globalZIndex = val;
+  };
   const [name$1k, bem$1g] = createNamespace("config-provider");
   const CONFIG_PROVIDER_KEY = Symbol(name$1k);
   const configProviderProps = {
     tag: makeStringProp("div"),
     theme: makeStringProp("light"),
+    zIndex: Number,
     themeVars: Object,
+    themeVarsDark: Object,
+    themeVarsLight: Object,
+    themeVarsScope: makeStringProp("local"),
     iconPrefix: String
   };
+  function insertDash(str) {
+    return str.replace(/([a-zA-Z])(\d)/g, "$1-$2");
+  }
   function mapThemeVarsToCSSVars(themeVars) {
     const cssVars = {};
     Object.keys(themeVars).forEach((key) => {
-      cssVars[`--zt-${kebabCase(key)}`] = themeVars[key];
+      const formattedKey = insertDash(kebabCase(key));
+      cssVars[`--zt-${formattedKey}`] = themeVars[key];
     });
     return cssVars;
   }
+  function syncThemeVarsOnRoot(newStyle = {}, oldStyle = {}) {
+    Object.keys(newStyle).forEach((key) => {
+      if (newStyle[key] !== oldStyle[key]) {
+        document.documentElement.style.setProperty(key, newStyle[key]);
+      }
+    });
+    Object.keys(oldStyle).forEach((key) => {
+      if (!newStyle[key]) {
+        document.documentElement.style.removeProperty(key);
+      }
+    });
+  }
   var stdin_default$1O = vue.defineComponent({
     name: name$1k,
     props: configProviderProps,
     setup(props, {
       slots
     }) {
-      const style = vue.computed(() => {
-        if (props.themeVars) {
-          return mapThemeVarsToCSSVars(props.themeVars);
-        }
-      });
+      const style = vue.computed(() => mapThemeVarsToCSSVars(extend({}, props.themeVars, props.theme === "dark" ? props.themeVarsDark : props.themeVarsLight)));
       if (inBrowser$1) {
         const addTheme = () => {
           document.documentElement.classList.add(`zt-theme-${props.theme}`);
@@ -811,11 +833,32 @@
         vue.onActivated(addTheme);
         vue.onDeactivated(removeTheme);
         vue.onBeforeUnmount(removeTheme);
+        vue.watch(style, (newStyle, oldStyle) => {
+          if (props.themeVarsScope === "global") {
+            syncThemeVarsOnRoot(newStyle, oldStyle);
+          }
+        });
+        vue.watch(() => props.themeVarsScope, (newScope, oldScope) => {
+          if (oldScope === "global") {
+            syncThemeVarsOnRoot({}, style.value);
+          }
+          if (newScope === "global") {
+            syncThemeVarsOnRoot(style.value, {});
+          }
+        });
+        if (props.themeVarsScope === "global") {
+          syncThemeVarsOnRoot(style.value, {});
+        }
       }
       vue.provide(CONFIG_PROVIDER_KEY, props);
+      vue.watchEffect(() => {
+        if (props.zIndex !== void 0) {
+          setGlobalZIndex(props.zIndex);
+        }
+      });
       return () => vue.createVNode(props.tag, {
         "class": bem$1g(),
-        "style": style.value
+        "style": props.themeVarsScope === "local" ? style.value : void 0
       }, {
         default: () => {
           var _a;
@@ -1042,6 +1085,11 @@
       });
     }
   }
+  const useScopeId = () => {
+    var _a;
+    const { scopeId } = ((_a = vue.getCurrentInstance()) == null ? void 0 : _a.vnode) || {};
+    return scopeId ? { [scopeId]: "" } : null;
+  };
   const [name$1i, bem$1e] = createNamespace("overlay");
   const overlayProps = {
     show: Boolean,
@@ -1101,7 +1149,6 @@
     slideable: Boolean
   });
   const [name$1h, bem$1d] = createNamespace("popup");
-  let globalZIndex = 2e3;
   var stdin_default$1K = vue.defineComponent({
     name: name$1h,
     inheritAttrs: false,
@@ -1138,11 +1185,8 @@
           contentStyle.value = `height:${props.sliderContentHeight}px;`;
         }
         if (!opened) {
-          if (props.zIndex !== void 0) {
-            globalZIndex = +props.zIndex;
-          }
           opened = true;
-          zIndex.value = ++globalZIndex;
+          zIndex.value = props.zIndex !== void 0 ? +props.zIndex : useGlobalZIndex();
           emit("open");
         }
       };
@@ -1199,14 +1243,15 @@
       });
       const renderOverlay = () => {
         if (props.overlay) {
-          return vue.createVNode(Overlay, {
+          return vue.createVNode(Overlay, vue.mergeProps({
             "show": props.show,
             "class": props.overlayClass,
             "zIndex": zIndex.value,
             "duration": props.duration,
-            "customStyle": props.overlayStyle,
+            "customStyle": props.overlayStyle
+          }, useScopeId(), {
             "onClick": onClickOverlay
-          }, {
+          }), {
             default: slots["overlay-content"]
           });
         }
@@ -1249,7 +1294,7 @@
             "zt-safe-area-bottom": safeAreaInsetBottom
           }],
           "onKeydown": onKeydown
-        }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vue.vShow, props.show]]);
+        }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vue.vShow, props.show]]);
       });
       const sliderRenderPopup = lazyRender(() => {
         var _a, _b;
@@ -2095,6 +2140,7 @@
     duration: makeNumberProp(2e3),
     position: makeStringProp("middle"),
     teleport: [String, Object],
+    wordBreak: String,
     className: unknownProp,
     iconPrefix: String,
     transition: makeStringProp("zt-fade"),
@@ -2180,7 +2226,7 @@
       vue.onMounted(toggleClickable);
       vue.onUnmounted(toggleClickable);
       return () => vue.createVNode(Popup, vue.mergeProps({
-        "class": [bem$16([props.position, {
+        "class": [bem$16([props.position, props.wordBreak === "normal" ? "break-normal" : props.wordBreak, {
           [props.type]: !props.icon
         }]), props.className],
         "lockScroll": false,
@@ -3680,7 +3726,7 @@
       const trackStyle = vue.computed(() => {
         const style = {
           transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
-          transform: `translate${props.vertical ? "Y" : "X"}(${state.offset}px)`
+          transform: `translate${props.vertical ? "Y" : "X"}(${+state.offset.toFixed(2)}px)`
         };
         if (size.value) {
           const mainAxis = props.vertical ? "height" : "width";
@@ -5075,7 +5121,7 @@
           }), {
             [BORDER_TOP_BOTTOM]: props.border && !props.inset
           }]
-        }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+        }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
       };
       const renderTitle = () => vue.createVNode("div", {
         "class": bem$X("title", {
@@ -5169,7 +5215,11 @@
       role: String,
       parent: Object,
       checked: Boolean,
-      bindGroup: truthProp
+      bindGroup: truthProp,
+      indeterminate: {
+        type: Boolean,
+        default: null
+      }
     }),
     emits: ["click", "toggle"],
     setup(props, {
@@ -5208,14 +5258,16 @@
         const {
           bem: bem2,
           shape,
-          checked
+          checked,
+          indeterminate
         } = props;
         const iconSize = props.iconSize || getParentProp("iconSize");
         return vue.createVNode("div", {
           "ref": iconRef,
           "class": bem2("icon", [shape, {
             disabled: disabled.value,
-            checked
+            checked,
+            indeterminate
           }]),
           "style": {
             fontSize: addUnit(iconSize)
@@ -5223,14 +5275,8 @@
         }, [slots.icon ? slots.icon({
           checked,
           disabled: disabled.value
-        }) : props.role === "radio" ? vue.createVNode(Icon, {
-          "style": iconStyle.value
-        }, {
-          default: () => [checked ? vue.createVNode("div", {
-            "class": bem2("dot")
-          }, null) : ""]
         }) : vue.createVNode(Icon, {
-          "name": "checkbox-select",
+          "name": indeterminate ? "minus" : "checkbox-select",
           "style": iconStyle.value
         }, null)]);
       };
@@ -5260,7 +5306,11 @@
   });
   const [name$W, bem$V] = createNamespace("checkbox");
   const checkboxProps = extend({}, checkerProps, {
-    bindGroup: truthProp
+    bindGroup: truthProp,
+    indeterminate: {
+      type: Boolean,
+      default: null
+    }
   });
   var stdin_default$1h = vue.defineComponent({
     name: name$W,
@@ -5311,9 +5361,16 @@
           setParentValue(newValue);
         } else {
           emit("update:modelValue", newValue);
+          if (props.indeterminate !== null) {
+            emit("change", newValue);
+          }
         }
       };
-      vue.watch(() => props.modelValue, (value) => emit("change", value));
+      vue.watch(() => props.modelValue, (value) => {
+        if (props.indeterminate === null) {
+          emit("change", value);
+        }
+      });
       useExpose({
         toggle,
         props,
@@ -7407,7 +7464,7 @@
   }
   function showDialog(options) {
     if (!inBrowser$1) {
-      return Promise.resolve();
+      return Promise.resolve(void 0);
     }
     return new Promise((resolve, reject) => {
       if (!instance$2) {
@@ -7720,7 +7777,7 @@
         if (props.multiSelect) {
           return vue.createVNode(Cell, {
             "role": "menuitem",
-            "key": option.value,
+            "key": String(option.value),
             "title-icon": option.icon,
             "title": option.text,
             "direction": "horizontal",
@@ -7739,7 +7796,7 @@
         }
         return vue.createVNode(Cell, {
           "role": "menuitem",
-          "key": option.value,
+          "key": String(option.value),
           "title-icon": option.icon,
           "title": option.text,
           "direction": "horizontal",
@@ -9403,6 +9460,7 @@
       });
       return () => {
         const disabled = getProp("disabled");
+        const readonly = getProp("readonly");
         const labelAlign = getProp("labelAlign");
         const Label = renderLabel();
         const TitleIcon = renderTitleIcon();
@@ -9414,6 +9472,7 @@
           "class": bem$G({
             error: showError.value,
             disabled,
+            readonly,
             [`label-${labelAlign}`]: labelAlign,
             "error-message": props.errorMessage !== "" && typeof props.errorMessage !== "undefined",
             description: props.description !== "" && typeof props.description !== "undefined",
@@ -9859,12 +9918,27 @@
       }, [item[props.textKey]])]))])]);
     }
   });
+  const useSyncPropRef = (getProp, setProp) => {
+    const propRef = vue.ref(getProp());
+    vue.watch(getProp, (value) => {
+      if (value !== propRef.value) {
+        propRef.value = value;
+      }
+    });
+    vue.watch(propRef, (value) => {
+      if (value !== getProp()) {
+        setProp(value);
+      }
+    });
+    return propRef;
+  };
   const [name$B, bem$B] = createNamespace("hierarchy-select");
   const hierarchySelectProps = {
     treeData: {
       type: Array,
       default: () => []
     },
+    checkedList: makeArrayProp([]),
     disableParent: {
       type: Boolean,
       default: false
@@ -9884,11 +9958,12 @@
   var stdin_default$T = vue.defineComponent({
     name: name$B,
     props: hierarchySelectProps,
-    emits: ["asyncGetter", "selected", "change"],
+    emits: ["asyncGetter", "selected", "change", "update:checkedList"],
     setup(props, {
-      emit
+      emit,
+      slots
     }) {
-      const checkedList = vue.ref([]);
+      const checkedList = useSyncPropRef(() => props.checkedList, (value) => emit("update:checkedList", value));
       const choosedValue = vue.ref();
       const dataList = vue.ref(deepClone(props.treeData));
       const breadcrumbData = vue.ref([]);
@@ -10057,7 +10132,7 @@
         "onClick": () => {
           selected(item);
         }
-      }, [item[props.textKey]]), vue.createVNode("div", {
+      }, [slots.content ? slots.content(item) : item[props.textKey]]), vue.createVNode("div", {
         "class": bem$B("item-nav"),
         "onClick": () => {
           toNextLevel(item, index);
@@ -10080,7 +10155,9 @@
       minZoom: makeRequiredProp(numericProp),
       maxZoom: makeRequiredProp(numericProp),
       rootWidth: makeRequiredProp(Number),
-      rootHeight: makeRequiredProp(Number)
+      rootHeight: makeRequiredProp(Number),
+      disableZoom: Boolean,
+      closeOnClickOverlay: Boolean
     },
     emits: ["scale", "close", "longPress"],
     setup(props, {
@@ -10218,7 +10295,8 @@
           setScale(scale);
         }
       };
-      const checkTap = () => {
+      const checkTap = (event) => {
+        var _a;
         if (fingerNum > 1) {
           return;
         }
@@ -10236,6 +10314,9 @@
               doubleTapTimer = null;
               toggleScale();
             } else {
+              if (!props.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
+                return;
+              }
               doubleTapTimer = setTimeout(() => {
                 emit("close");
                 doubleTapTimer = null;
@@ -10273,7 +10354,7 @@
           }
         }
         preventDefault(event, stopPropagation2);
-        checkTap();
+        checkTap(event);
         touch.reset();
       };
       const onLoad = (event) => {
@@ -10327,7 +10408,7 @@
     }
   });
   const [name$A, bem$z] = createNamespace("image-preview");
-  const popupProps$1 = ["show", "transition", "overlayStyle", "closeOnPopstate"];
+  const popupProps$1 = ["show", "transition", "overlayStyle", "closeOnPopstate", "teleport"];
   const imagePreviewProps = {
     show: Boolean,
     loop: truthProp,
@@ -10347,7 +10428,9 @@
     startPosition: makeNumericProp(0),
     showIndicators: Boolean,
     closeOnPopstate: truthProp,
-    closeIconPosition: makeStringProp("top-right")
+    closeOnClickOverlay: truthProp,
+    closeIconPosition: makeStringProp("top-right"),
+    teleport: [String, Object]
   };
   var stdin_default$R = vue.defineComponent({
     name: name$A,
@@ -10361,7 +10444,8 @@
       const state = vue.reactive({
         active: 0,
         rootWidth: 0,
-        rootHeight: 0
+        rootHeight: 0,
+        disableZoom: false
       });
       const resize2 = () => {
         if (swipeRef.value) {
@@ -10417,6 +10501,12 @@
           }, [slots.cover()]);
         }
       };
+      const onDragStart = () => {
+        state.disableZoom = true;
+      };
+      const onDragEnd = () => {
+        state.disableZoom = false;
+      };
       const renderImages = () => vue.createVNode(Swipe, {
         "ref": swipeRef,
         "lazyRender": true,
@@ -10426,7 +10516,9 @@
         "initialSwipe": props.startPosition,
         "showIndicators": props.showIndicators,
         "indicatorColor": "white",
-        "onChange": setActive
+        "onChange": setActive,
+        "onDragEnd": onDragEnd,
+        "onDragStart": onDragStart
       }, {
         default: () => [props.images.map((image, index) => vue.createVNode(stdin_default$S, {
           "src": image.url,
@@ -10436,6 +10528,8 @@
           "minZoom": props.minZoom,
           "rootWidth": state.rootWidth,
           "rootHeight": state.rootHeight,
+          "disableZoom": state.disableZoom,
+          "closeOnClickOverlay": props.closeOnClickOverlay,
           "onScale": emitScale,
           "onClose": emitClose,
           "onLongPress": () => emit("longPress", {
@@ -10518,6 +10612,7 @@
     swipeDuration: 300,
     showIndicators: false,
     closeOnPopstate: true,
+    closeOnClickOverlay: true,
     closeIconPosition: "top-right"
   };
   function initInstance$1() {
@@ -10575,6 +10670,7 @@
   const indexBarProps = {
     sticky: truthProp,
     zIndex: numericProp,
+    activeAnchor: makeNumericProp(""),
     teleport: [String, Object],
     highlightColor: String,
     stickyOffsetTop: makeNumberProp(0),
@@ -10587,14 +10683,14 @@
   var stdin_default$Q = vue.defineComponent({
     name: name$z,
     props: indexBarProps,
-    emits: ["select", "change"],
+    emits: ["select", "change", "anchorClick", "update:activeAnchor"],
     setup(props, {
       emit,
       slots
     }) {
       const root = vue.ref();
       const sidebar = vue.ref();
-      const activeAnchor = vue.ref("");
+      const activeAnchor = useSyncPropRef(() => props.activeAnchor, (value) => emit("update:activeAnchor", value));
       const touchIndex = vue.ref("");
       const touch = useTouch();
       const scrollParent = useScrollParent(root);
@@ -10696,6 +10792,7 @@
         }
       });
       const scrollTo = (index) => {
+        emit("anchorClick", index);
         selectActiveIndex = String(index);
         const match = getMatchAnchor(selectActiveIndex);
         if (match) {
@@ -10912,6 +11009,7 @@
     offset: makeNumericProp(300),
     loading: Boolean,
     finished: Boolean,
+    scroller: Object,
     errorText: String,
     direction: makeStringProp("down"),
     loadingText: String,
@@ -10931,6 +11029,7 @@
       const placeholder = vue.ref();
       const tabStatus = useTabStatus();
       const scrollParent = useScrollParent(root);
+      const scroller = vue.computed(() => props.scroller || scrollParent.value);
       const check = () => {
         vue.nextTick(() => {
           if (loading.value || props.finished || props.error || // skip check when inside an inactive tab
@@ -10941,7 +11040,7 @@
             direction
           } = props;
           const offset2 = +props.offset;
-          const scrollParentRect = useRect(scrollParent);
+          const scrollParentRect = useRect(scroller);
           if (!scrollParentRect.height || isHidden(root)) {
             return;
           }
@@ -11022,7 +11121,7 @@
         check
       });
       useEventListener("scroll", check, {
-        target: scrollParent,
+        target: scroller,
         passive: true
       });
       return () => {
@@ -14145,13 +14244,10 @@
       };
       const renderTitle = () => {
         const {
-          title,
-          theme,
-          closeButtonText
+          title
         } = props;
         const leftSlot = slots["title-left"];
-        const showClose = closeButtonText && theme === "default";
-        const showTitle = title || showClose || leftSlot;
+        const showTitle = title || leftSlot;
         if (!showTitle) {
           return;
         }
@@ -14159,7 +14255,7 @@
           "class": bem$n("header")
         }, [leftSlot && vue.createVNode("span", {
           "class": bem$n("title-left")
-        }, [leftSlot()]), title && vue.createVNode("h2", {
+        }, [leftSlot()]), title && vue.createVNode("div", {
           "class": bem$n("title")
         }, [title])]);
       };
@@ -14214,11 +14310,8 @@
       return () => {
         const Title = renderTitle();
         const {
-          theme,
-          closeButtonText,
           title
         } = props;
-        const showClose = closeButtonText && theme === "default";
         const Content = vue.createVNode(vue.Transition, {
           "name": props.transition ? "zt-slide-up" : ""
         }, {
@@ -14235,15 +14328,7 @@
             "class": [bem$n("body"), title ? "" : bem$n("body-no-title")]
           }, [vue.createVNode("div", {
             "class": bem$n("keys")
-          }, [renderKeys()]), renderSidebar()]), showClose && vue.createVNode("div", {
-            "class": bem$n("finish-button-box")
-          }, [vue.createVNode(stdin_default$1B, {
-            "type": "primary",
-            "block": true,
-            "text": closeButtonText,
-            "class": [bem$n("finish-button"), HAPTICS_FEEDBACK],
-            "onClick": onClose
-          }, null)])]), [[vue.vShow, props.show]])]
+          }, [renderKeys()]), renderSidebar()])]), [[vue.vShow, props.show]])]
         });
         if (props.teleport) {
           return vue.createVNode(vue.Teleport, {
@@ -15675,7 +15760,7 @@
     });
   };
   const [name$m, bem$l] = createNamespace("popover");
-  const popupProps = ["show", "overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
+  const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
   const popoverProps = {
     show: Boolean,
     theme: makeStringProp("light"),
@@ -15718,6 +15803,7 @@
       const wrapperRef = vue.ref();
       const popoverRef = vue.ref();
       const arrowRef = vue.ref();
+      const show = useSyncPropRef(() => props.show, (value) => emit("update:show", value));
       const getPopoverOptions = () => ({
         placement: props.placement,
         modifiers: [{
@@ -15740,7 +15826,7 @@
       };
       const updateLocation = () => {
         vue.nextTick(() => {
-          if (!props.show) {
+          if (!show.value) {
             return;
           }
           if (!popper) {
@@ -15754,10 +15840,12 @@
           }
         });
       };
-      const updateShow = (value) => emit("update:show", value);
+      const updateShow = (value) => {
+        show.value = value;
+      };
       const onClickWrapper = () => {
         if (props.trigger === "click") {
-          updateShow(!props.show);
+          show.value = !show.value;
         }
       };
       const onClickAction = (action, index) => {
@@ -15770,12 +15858,12 @@
         action.selected = true;
         emit("select", action, index);
         if (props.closeOnClickAction) {
-          updateShow(false);
+          show.value = false;
         }
       };
       const onClickAway = () => {
-        if (props.show && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
-          updateShow(false);
+        if (show.value && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
+          show.value = false;
         }
       };
       const renderActionContent = (action, index) => {
@@ -15892,7 +15980,7 @@
           popper = null;
         }
       });
-      vue.watch(() => [props.show, props.offset, props.placement], updateLocation);
+      vue.watch(() => [show.value, props.offset, props.placement], updateLocation);
       useClickAway(wrapperRef, onClickAway, {
         eventName: "touchstart"
       });
@@ -15904,14 +15992,13 @@
           "onClick": onClickWrapper
         }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), vue.createVNode(Popup, vue.mergeProps({
           "ref": popoverRef,
-          "class": bem$l([props.theme, props.show ? "show" : "hidden"]),
+          "show": show.value,
+          "class": bem$l([props.theme, show.value ? "show" : "hidden"]),
           "position": "",
           "transition": "zt-popover-zoom",
           "lockScroll": false,
           "onUpdate:show": updateShow
-        }, attrs, pick(props, popupProps), {
-          "show": true
-        }), {
+        }, attrs, useScopeId(), pick(props, popupProps)), {
           default: () => [props.showArrow && vue.createVNode("div", {
             "class": bem$l("arrow"),
             "ref": arrowRef
@@ -18024,6 +18111,7 @@
       let opened;
       let lockClick2;
       let startOffset;
+      let isInBeforeClosing;
       const root = vue.ref();
       const leftRef = vue.ref();
       const rightRef = vue.ref();
@@ -18100,14 +18188,22 @@
         }
       };
       const onClick = (position = "outside") => {
+        if (isInBeforeClosing)
+          return;
         emit("click", position);
         if (opened && !lockClick2) {
+          isInBeforeClosing = true;
           callInterceptor(props.beforeClose, {
             args: [{
               name: props.name,
               position
             }],
-            done: () => close(position)
+            done: () => {
+              isInBeforeClosing = false;
+              close(position);
+            },
+            canceled: () => isInBeforeClosing = false,
+            error: () => isInBeforeClosing = false
           });
         }
       };
@@ -18776,10 +18872,11 @@
   const [name$2, bem$2] = createNamespace("text-ellipsis");
   const textEllipsisProps = {
     rows: makeNumericProp(1),
+    dots: makeStringProp("..."),
     content: makeStringProp(""),
     expandText: makeStringProp(""),
     collapseText: makeStringProp(""),
-    highlight: makeStringProp("")
+    position: makeStringProp("end")
   };
   var stdin_default$7 = vue.defineComponent({
     name: name$2,
@@ -18792,6 +18889,7 @@
       const expanded = vue.ref(false);
       const hasAction = vue.ref(false);
       const root = vue.ref();
+      const actionText = vue.computed(() => expanded.value ? props.collapseText : props.expandText);
       const pxToNum = (value) => {
         if (!value)
           return 0;
@@ -18821,23 +18919,52 @@
         const calcEllipsisText = (container2, maxHeight2) => {
           const {
             content,
-            expandText
+            position,
+            dots
           } = props;
-          const dot = "...";
-          let left2 = 0;
-          let right2 = content.length;
-          let res = -1;
-          while (left2 <= right2) {
-            const mid = Math.floor((left2 + right2) / 2);
-            container2.innerText = content.slice(0, mid) + dot + expandText;
-            if (container2.offsetHeight <= maxHeight2) {
-              left2 = mid + 1;
-              res = mid;
-            } else {
-              right2 = mid - 1;
+          const end2 = content.length;
+          const calcEllipse = () => {
+            const tail = (left2, right2) => {
+              if (right2 - left2 <= 1) {
+                if (position === "end") {
+                  return content.slice(0, left2) + dots;
+                }
+                return dots + content.slice(right2, end2);
+              }
+              const middle2 = Math.round((left2 + right2) / 2);
+              if (position === "end") {
+                container2.innerText = content.slice(0, middle2) + dots + actionText.value;
+              } else {
+                container2.innerText = dots + content.slice(middle2, end2) + actionText.value;
+              }
+              if (container2.offsetHeight > maxHeight2) {
+                if (position === "end") {
+                  return tail(left2, middle2);
+                }
+                return tail(middle2, right2);
+              }
+              if (position === "end") {
+                return tail(middle2, right2);
+              }
+              return tail(left2, middle2);
+            };
+            container2.innerText = tail(0, end2);
+          };
+          const middleTail = (leftPart, rightPart) => {
+            if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
+              return content.slice(0, leftPart[0]) + dots + content.slice(rightPart[1], end2);
             }
-          }
-          return content.slice(0, res) + dot;
+            const leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+            const rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
+            container2.innerText = props.content.slice(0, leftMiddle) + props.dots + props.content.slice(rightMiddle, end2) + props.expandText;
+            if (container2.offsetHeight >= maxHeight2) {
+              return middleTail([leftPart[0], leftMiddle], [rightMiddle, rightPart[1]]);
+            }
+            return middleTail([leftMiddle, leftPart[1]], [rightPart[0], rightMiddle]);
+          };
+          const middle = 0 + end2 >> 1;
+          props.position === "middle" ? container2.innerText = middleTail([0, middle], [middle, end2]) : calcEllipse();
+          return container2.innerText;
         };
         const container = cloneContainer();
         if (!container)
@@ -18847,7 +18974,7 @@
           paddingTop,
           lineHeight
         } = container.style;
-        const maxHeight = (Number(props.rows) + 0.5) * pxToNum(lineHeight) + pxToNum(paddingTop) + pxToNum(paddingBottom);
+        const maxHeight = Math.ceil((Number(props.rows) + 0.5) * pxToNum(lineHeight) + pxToNum(paddingTop) + pxToNum(paddingBottom));
         if (maxHeight < container.offsetHeight) {
           hasAction.value = true;
           text.value = calcEllipsisText(container, maxHeight);
@@ -18861,26 +18988,17 @@
         expanded.value = !expanded.value;
         emit("clickAction", event);
       };
-      const formatSearchKeyword = (keywords, text2) => {
-        if (!keywords)
-          return text2;
-        const replaceReg = new RegExp(keywords, "ig");
-        const replaceString = `<span style="color: #0091FA; background: rgba(0, 145, 250, 0.1);">${keywords}</span>`;
-        return text2.replace(replaceReg, replaceString);
-      };
       const renderAction = () => vue.createVNode("span", {
         "class": bem$2("action"),
         "onClick": onClickAction
-      }, [expanded.value ? props.collapseText : props.expandText]);
+      }, [actionText.value]);
       vue.onMounted(calcEllipsised);
-      vue.watch(() => [props.content, props.rows], calcEllipsised);
+      vue.watch(() => [props.content, props.rows, props.position], calcEllipsised);
       useEventListener("resize", calcEllipsised);
       return () => vue.createVNode("div", {
         "ref": root,
         "class": bem$2()
-      }, [vue.createVNode("span", {
-        "innerHTML": formatSearchKeyword(props.highlight, expanded.value ? props.content : text.value)
-      }, null), hasAction.value ? renderAction() : null]);
+      }, [expanded.value ? props.content : text.value, hasAction.value ? renderAction() : null]);
     }
   });
   const TextEllipsis = withInstall(stdin_default$7);
@@ -20463,7 +20581,7 @@
       });
     }
   };
-  const version = "3.1.7";
+  const version = "3.1.9";
   function install(app) {
     const components = [
       ActionSheet,