zartui 3.1.7 → 3.1.8

package/lib/zartui.cjs.js

@@ -369,7 +369,8 @@ const LONG_PRESS_START_TIME = 500;
 function callInterceptor(interceptor, {
   args = [],
   done,
-  canceled
+  canceled,
+  error
 }) {
   if (interceptor) {
     const returnVal = interceptor.apply(null, args);
@@ -380,7 +381,7 @@ function callInterceptor(interceptor, {
         } else if (canceled) {
           canceled();
         }
-      }).catch(noop);
+      }).catch(error || noop);
     } else if (returnVal) {
       done();
     } else if (canceled) {
@@ -497,32 +498,53 @@ var stdin_default$1P = vue.defineComponent({
   }
 });
 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) {
       const addTheme = () => {
         document.documentElement.classList.add(`zt-theme-${props.theme}`);
@@ -541,11 +563,32 @@ var stdin_default$1O = vue.defineComponent({
       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;
@@ -772,6 +815,11 @@ function onPopupReopen(callback) {
     });
   }
 }
+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,
@@ -831,7 +879,6 @@ const popupProps$2 = extend({}, popupSharedProps, {
   slideable: Boolean
 });
 const [name$1h, bem$1d] = createNamespace("popup");
-let globalZIndex = 2e3;
 var stdin_default$1K = vue.defineComponent({
   name: name$1h,
   inheritAttrs: false,
@@ -868,11 +915,8 @@ var stdin_default$1K = vue.defineComponent({
         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");
       }
     };
@@ -929,14 +973,15 @@ var stdin_default$1K = vue.defineComponent({
     });
     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"]
         });
       }
@@ -979,7 +1024,7 @@ var stdin_default$1K = vue.defineComponent({
           "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;
@@ -1825,6 +1870,7 @@ const toastProps = {
   duration: makeNumberProp(2e3),
   position: makeStringProp("middle"),
   teleport: [String, Object],
+  wordBreak: String,
   className: unknownProp,
   iconPrefix: String,
   transition: makeStringProp("zt-fade"),
@@ -1910,7 +1956,7 @@ var stdin_default$1z = vue.defineComponent({
     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,
@@ -3413,7 +3459,7 @@ var stdin_default$1s = vue.defineComponent({
     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";
@@ -4814,7 +4860,7 @@ var stdin_default$1k = vue.defineComponent({
         }), {
           [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", {
@@ -4908,7 +4954,11 @@ var stdin_default$1i = vue.defineComponent({
     role: String,
     parent: Object,
     checked: Boolean,
-    bindGroup: truthProp
+    bindGroup: truthProp,
+    indeterminate: {
+      type: Boolean,
+      default: null
+    }
   }),
   emits: ["click", "toggle"],
   setup(props, {
@@ -4947,14 +4997,16 @@ var stdin_default$1i = vue.defineComponent({
       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)
@@ -4962,14 +5014,8 @@ var stdin_default$1i = vue.defineComponent({
       }, [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)]);
     };
@@ -4999,7 +5045,11 @@ var stdin_default$1i = vue.defineComponent({
 });
 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,
@@ -5050,9 +5100,16 @@ var stdin_default$1h = vue.defineComponent({
         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,
@@ -7163,7 +7220,7 @@ function initInstance$2() {
 }
 function showDialog(options) {
   if (!inBrowser) {
-    return Promise.resolve();
+    return Promise.resolve(void 0);
   }
   return new Promise((resolve, reject) => {
     if (!instance$2) {
@@ -7479,7 +7536,7 @@ var stdin_default$10 = vue.defineComponent({
       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",
@@ -7498,7 +7555,7 @@ var stdin_default$10 = vue.defineComponent({
       }
       return vue.createVNode(Cell, {
         "role": "menuitem",
-        "key": option.value,
+        "key": String(option.value),
         "title-icon": option.icon,
         "title": option.text,
         "direction": "horizontal",
@@ -9842,7 +9899,9 @@ var stdin_default$S = vue.defineComponent({
     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, {
@@ -9980,7 +10039,8 @@ var stdin_default$S = vue.defineComponent({
         setScale(scale);
       }
     };
-    const checkTap = () => {
+    const checkTap = (event) => {
+      var _a;
       if (fingerNum > 1) {
         return;
       }
@@ -9998,6 +10058,9 @@ var stdin_default$S = vue.defineComponent({
             doubleTapTimer = null;
             toggleScale();
           } else {
+            if (!props.closeOnClickOverlay && event.target === ((_a = swipeItem.value) == null ? void 0 : _a.$el)) {
+              return;
+            }
             doubleTapTimer = setTimeout(() => {
               emit("close");
               doubleTapTimer = null;
@@ -10035,7 +10098,7 @@ var stdin_default$S = vue.defineComponent({
         }
       }
       preventDefault(event, stopPropagation2);
-      checkTap();
+      checkTap(event);
       touch.reset();
     };
     const onLoad = (event) => {
@@ -10089,7 +10152,7 @@ var stdin_default$S = vue.defineComponent({
   }
 });
 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,
@@ -10109,7 +10172,9 @@ const imagePreviewProps = {
   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,
@@ -10123,7 +10188,8 @@ var stdin_default$R = vue.defineComponent({
     const state = vue.reactive({
       active: 0,
       rootWidth: 0,
-      rootHeight: 0
+      rootHeight: 0,
+      disableZoom: false
     });
     const resize2 = () => {
       if (swipeRef.value) {
@@ -10179,6 +10245,12 @@ var stdin_default$R = vue.defineComponent({
         }, [slots.cover()]);
       }
     };
+    const onDragStart = () => {
+      state.disableZoom = true;
+    };
+    const onDragEnd = () => {
+      state.disableZoom = false;
+    };
     const renderImages = () => vue.createVNode(Swipe, {
       "ref": swipeRef,
       "lazyRender": true,
@@ -10188,7 +10260,9 @@ var stdin_default$R = vue.defineComponent({
       "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,
@@ -10198,6 +10272,8 @@ var stdin_default$R = vue.defineComponent({
         "minZoom": props.minZoom,
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
+        "disableZoom": state.disableZoom,
+        "closeOnClickOverlay": props.closeOnClickOverlay,
         "onScale": emitScale,
         "onClose": emitClose,
         "onLongPress": () => emit("longPress", {
@@ -10280,6 +10356,7 @@ const defaultConfig = {
   swipeDuration: 300,
   showIndicators: false,
   closeOnPopstate: true,
+  closeOnClickOverlay: true,
   closeIconPosition: "top-right"
 };
 function initInstance$1() {
@@ -10677,6 +10754,7 @@ const listProps = {
   offset: makeNumericProp(300),
   loading: Boolean,
   finished: Boolean,
+  scroller: Object,
   errorText: String,
   direction: makeStringProp("down"),
   loadingText: String,
@@ -10696,6 +10774,7 @@ var stdin_default$O = vue.defineComponent({
     const placeholder = vue.ref();
     const tabStatus = useTabStatus();
     const scrollParent = use.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
@@ -10706,7 +10785,7 @@ var stdin_default$O = vue.defineComponent({
           direction
         } = props;
         const offset = +props.offset;
-        const scrollParentRect = use.useRect(scrollParent);
+        const scrollParentRect = use.useRect(scroller);
         if (!scrollParentRect.height || isHidden(root)) {
           return;
         }
@@ -10787,7 +10866,7 @@ var stdin_default$O = vue.defineComponent({
       check
     });
     use.useEventListener("scroll", check, {
-      target: scrollParent,
+      target: scroller,
       passive: true
     });
     return () => {
@@ -14013,6 +14092,20 @@ var stdin_default$u = vue.defineComponent({
   }
 });
 const PasswordInput = withInstall(stdin_default$u);
+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;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -14034,7 +14127,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 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"),
@@ -14077,6 +14170,7 @@ var stdin_default$t = vue.defineComponent({
     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: [{
@@ -14099,7 +14193,7 @@ var stdin_default$t = vue.defineComponent({
     };
     const updateLocation = () => {
       vue.nextTick(() => {
-        if (!props.show) {
+        if (!show.value) {
           return;
         }
         if (!popper) {
@@ -14113,10 +14207,12 @@ var stdin_default$t = vue.defineComponent({
         }
       });
     };
-    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) => {
@@ -14129,12 +14225,12 @@ var stdin_default$t = vue.defineComponent({
       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) => {
@@ -14251,7 +14347,7 @@ var stdin_default$t = vue.defineComponent({
         popper = null;
       }
     });
-    vue.watch(() => [props.show, props.offset, props.placement], updateLocation);
+    vue.watch(() => [show.value, props.offset, props.placement], updateLocation);
     use.useClickAway(wrapperRef, onClickAway, {
       eventName: "touchstart"
     });
@@ -14263,14 +14359,13 @@ var stdin_default$t = vue.defineComponent({
         "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
@@ -16386,6 +16481,7 @@ var stdin_default$e = vue.defineComponent({
     let opened;
     let lockClick2;
     let startOffset;
+    let isInBeforeClosing;
     const root = vue.ref();
     const leftRef = vue.ref();
     const rightRef = vue.ref();
@@ -16462,14 +16558,22 @@ var stdin_default$e = vue.defineComponent({
       }
     };
     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
         });
       }
     };
@@ -17141,10 +17245,11 @@ const Tag = withInstall(stdin_default$8);
 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,
@@ -17157,6 +17262,7 @@ var stdin_default$7 = vue.defineComponent({
     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;
@@ -17186,23 +17292,52 @@ var stdin_default$7 = vue.defineComponent({
       const calcEllipsisText = (container2, maxHeight2) => {
         const {
           content,
-          expandText
+          position,
+          dots
         } = props;
-        const dot = "...";
-        let left = 0;
-        let right = content.length;
-        let res = -1;
-        while (left <= right) {
-          const mid = Math.floor((left + right) / 2);
-          container2.innerText = content.slice(0, mid) + dot + expandText;
-          if (container2.offsetHeight <= maxHeight2) {
-            left = mid + 1;
-            res = mid;
-          } else {
-            right = mid - 1;
+        const end = content.length;
+        const calcEllipse = () => {
+          const tail = (left, right) => {
+            if (right - left <= 1) {
+              if (position === "end") {
+                return content.slice(0, left) + dots;
+              }
+              return dots + content.slice(right, end);
+            }
+            const middle2 = Math.round((left + right) / 2);
+            if (position === "end") {
+              container2.innerText = content.slice(0, middle2) + dots + actionText.value;
+            } else {
+              container2.innerText = dots + content.slice(middle2, end) + actionText.value;
+            }
+            if (container2.offsetHeight > maxHeight2) {
+              if (position === "end") {
+                return tail(left, middle2);
+              }
+              return tail(middle2, right);
+            }
+            if (position === "end") {
+              return tail(middle2, right);
+            }
+            return tail(left, middle2);
+          };
+          container2.innerText = tail(0, end);
+        };
+        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], end);
           }
-        }
-        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, end) + 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 + end >> 1;
+        props.position === "middle" ? container2.innerText = middleTail([0, middle], [middle, end]) : calcEllipse();
+        return container2.innerText;
       };
       const container = cloneContainer();
       if (!container)
@@ -17212,7 +17347,7 @@ var stdin_default$7 = vue.defineComponent({
         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);
@@ -17226,26 +17361,17 @@ var stdin_default$7 = vue.defineComponent({
       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);
     use.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);
@@ -18845,7 +18971,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.7";
+const version = "3.1.8";
 function install(app) {
   const components = [
     ActionSheet,