zartui 3.1.7 → 3.1.9

package/lib/zartui.es.js

@@ -1,4 +1,4 @@
-import { unref, ref, reactive, defineComponent, computed, createVNode, watch, onActivated, onDeactivated, onBeforeUnmount, provide, inject, mergeProps, getCurrentInstance, Transition, withDirectives, vShow, nextTick, onMounted, Teleport, Fragment, resolveDirective, onBeforeUpdate, onUnmounted, createApp, createTextVNode, watchEffect, withKeys, onUpdated, h } from "vue";
+import { unref, ref, reactive, defineComponent, computed, createVNode, watch, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, inject, mergeProps, getCurrentInstance, Transition, withDirectives, vShow, nextTick, onMounted, Teleport, Fragment, resolveDirective, onBeforeUpdate, onUnmounted, createApp, createTextVNode, withKeys, onUpdated, h } from "vue";
 import { useWindowSize, useRect, onMountedOrActivated, getScrollParent, useEventListener, useToggle, raf, useScrollParent, useChildren, usePageVisibility, doubleRaf, useParent, useCustomFieldValue, useClickAway, CUSTOM_FIELD_INJECTION_KEY, inBrowser as inBrowser$1 } from "@zartui/use";
 import { DATE_FORMAT, formatDate } from "@zartui/date-utils";
 import { autoUpdate, computePosition, offset, shift, limitShift, flip, hide, arrow } from "@floating-ui/vue";
@@ -367,7 +367,8 @@ const LONG_PRESS_START_TIME = 500;
 function callInterceptor(interceptor, {
   args = [],
   done,
-  canceled
+  canceled,
+  error
 }) {
   if (interceptor) {
     const returnVal = interceptor.apply(null, args);
@@ -378,7 +379,7 @@ function callInterceptor(interceptor, {
         } else if (canceled) {
           canceled();
         }
-      }).catch(noop);
+      }).catch(error || noop);
     } else if (returnVal) {
       done();
     } else if (canceled) {
@@ -495,32 +496,53 @@ var stdin_default$1P = 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 = defineComponent({
   name: name$1k,
   props: configProviderProps,
   setup(props, {
     slots
   }) {
-    const style = computed(() => {
-      if (props.themeVars) {
-        return mapThemeVarsToCSSVars(props.themeVars);
-      }
-    });
+    const style = computed(() => mapThemeVarsToCSSVars(extend({}, props.themeVars, props.theme === "dark" ? props.themeVarsDark : props.themeVarsLight)));
     if (inBrowser) {
       const addTheme = () => {
         document.documentElement.classList.add(`zt-theme-${props.theme}`);
@@ -539,11 +561,32 @@ var stdin_default$1O = defineComponent({
       onActivated(addTheme);
       onDeactivated(removeTheme);
       onBeforeUnmount(removeTheme);
+      watch(style, (newStyle, oldStyle) => {
+        if (props.themeVarsScope === "global") {
+          syncThemeVarsOnRoot(newStyle, oldStyle);
+        }
+      });
+      watch(() => props.themeVarsScope, (newScope, oldScope) => {
+        if (oldScope === "global") {
+          syncThemeVarsOnRoot({}, style.value);
+        }
+        if (newScope === "global") {
+          syncThemeVarsOnRoot(style.value, {});
+        }
+      });
+      if (props.themeVarsScope === "global") {
+        syncThemeVarsOnRoot(style.value, {});
+      }
     }
     provide(CONFIG_PROVIDER_KEY, props);
+    watchEffect(() => {
+      if (props.zIndex !== void 0) {
+        setGlobalZIndex(props.zIndex);
+      }
+    });
     return () => createVNode(props.tag, {
       "class": bem$1g(),
-      "style": style.value
+      "style": props.themeVarsScope === "local" ? style.value : void 0
     }, {
       default: () => {
         var _a;
@@ -770,6 +813,11 @@ function onPopupReopen(callback) {
     });
   }
 }
+const useScopeId = () => {
+  var _a;
+  const { scopeId } = ((_a = getCurrentInstance()) == null ? void 0 : _a.vnode) || {};
+  return scopeId ? { [scopeId]: "" } : null;
+};
 const [name$1i, bem$1e] = createNamespace("overlay");
 const overlayProps = {
   show: Boolean,
@@ -829,7 +877,6 @@ const popupProps$2 = extend({}, popupSharedProps, {
   slideable: Boolean
 });
 const [name$1h, bem$1d] = createNamespace("popup");
-let globalZIndex = 2e3;
 var stdin_default$1K = defineComponent({
   name: name$1h,
   inheritAttrs: false,
@@ -866,11 +913,8 @@ var stdin_default$1K = 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");
       }
     };
@@ -927,14 +971,15 @@ var stdin_default$1K = defineComponent({
     });
     const renderOverlay = () => {
       if (props.overlay) {
-        return createVNode(Overlay, {
+        return createVNode(Overlay, 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"]
         });
       }
@@ -977,7 +1022,7 @@ var stdin_default$1K = defineComponent({
           "zt-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vShow, props.show]]);
+      }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vShow, props.show]]);
     });
     const sliderRenderPopup = lazyRender(() => {
       var _a, _b;
@@ -1823,6 +1868,7 @@ const toastProps = {
   duration: makeNumberProp(2e3),
   position: makeStringProp("middle"),
   teleport: [String, Object],
+  wordBreak: String,
   className: unknownProp,
   iconPrefix: String,
   transition: makeStringProp("zt-fade"),
@@ -1908,7 +1954,7 @@ var stdin_default$1z = defineComponent({
     onMounted(toggleClickable);
     onUnmounted(toggleClickable);
     return () => createVNode(Popup, 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,
@@ -3411,7 +3457,7 @@ var stdin_default$1s = defineComponent({
     const trackStyle = 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";
@@ -4812,7 +4858,7 @@ var stdin_default$1k = 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 = () => createVNode("div", {
       "class": bem$X("title", {
@@ -4906,7 +4952,11 @@ var stdin_default$1i = defineComponent({
     role: String,
     parent: Object,
     checked: Boolean,
-    bindGroup: truthProp
+    bindGroup: truthProp,
+    indeterminate: {
+      type: Boolean,
+      default: null
+    }
   }),
   emits: ["click", "toggle"],
   setup(props, {
@@ -4945,14 +4995,16 @@ var stdin_default$1i = defineComponent({
       const {
         bem: bem2,
         shape,
-        checked
+        checked,
+        indeterminate
       } = props;
       const iconSize = props.iconSize || getParentProp("iconSize");
       return createVNode("div", {
         "ref": iconRef,
         "class": bem2("icon", [shape, {
           disabled: disabled.value,
-          checked
+          checked,
+          indeterminate
         }]),
         "style": {
           fontSize: addUnit(iconSize)
@@ -4960,14 +5012,8 @@ var stdin_default$1i = defineComponent({
       }, [slots.icon ? slots.icon({
         checked,
         disabled: disabled.value
-      }) : props.role === "radio" ? createVNode(Icon, {
-        "style": iconStyle.value
-      }, {
-        default: () => [checked ? createVNode("div", {
-          "class": bem2("dot")
-        }, null) : ""]
       }) : createVNode(Icon, {
-        "name": "checkbox-select",
+        "name": indeterminate ? "minus" : "checkbox-select",
         "style": iconStyle.value
       }, null)]);
     };
@@ -4997,7 +5043,11 @@ var stdin_default$1i = 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 = defineComponent({
   name: name$W,
@@ -5048,9 +5098,16 @@ var stdin_default$1h = defineComponent({
         setParentValue(newValue);
       } else {
         emit("update:modelValue", newValue);
+        if (props.indeterminate !== null) {
+          emit("change", newValue);
+        }
       }
     };
-    watch(() => props.modelValue, (value) => emit("change", value));
+    watch(() => props.modelValue, (value) => {
+      if (props.indeterminate === null) {
+        emit("change", value);
+      }
+    });
     useExpose({
       toggle,
       props,
@@ -7161,7 +7218,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) {
@@ -7477,7 +7534,7 @@ var stdin_default$10 = defineComponent({
       if (props.multiSelect) {
         return createVNode(Cell, {
           "role": "menuitem",
-          "key": option.value,
+          "key": String(option.value),
           "title-icon": option.icon,
           "title": option.text,
           "direction": "horizontal",
@@ -7496,7 +7553,7 @@ var stdin_default$10 = defineComponent({
       }
       return createVNode(Cell, {
         "role": "menuitem",
-        "key": option.value,
+        "key": String(option.value),
         "title-icon": option.icon,
         "title": option.text,
         "direction": "horizontal",
@@ -9160,6 +9217,7 @@ var stdin_default$_ = defineComponent({
     });
     return () => {
       const disabled = getProp("disabled");
+      const readonly = getProp("readonly");
       const labelAlign = getProp("labelAlign");
       const Label = renderLabel();
       const TitleIcon = renderTitleIcon();
@@ -9171,6 +9229,7 @@ var stdin_default$_ = defineComponent({
         "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",
@@ -9619,12 +9678,27 @@ var stdin_default$U = defineComponent({
     }, [item[props.textKey]])]))])]);
   }
 });
+const useSyncPropRef = (getProp, setProp) => {
+  const propRef = ref(getProp());
+  watch(getProp, (value) => {
+    if (value !== propRef.value) {
+      propRef.value = value;
+    }
+  });
+  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
@@ -9644,11 +9718,12 @@ const hierarchySelectProps = {
 var stdin_default$T = defineComponent({
   name: name$B,
   props: hierarchySelectProps,
-  emits: ["asyncGetter", "selected", "change"],
+  emits: ["asyncGetter", "selected", "change", "update:checkedList"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
-    const checkedList = ref([]);
+    const checkedList = useSyncPropRef(() => props.checkedList, (value) => emit("update:checkedList", value));
     const choosedValue = ref();
     const dataList = ref(deepClone(props.treeData));
     const breadcrumbData = ref([]);
@@ -9817,7 +9892,7 @@ var stdin_default$T = defineComponent({
       "onClick": () => {
         selected(item);
       }
-    }, [item[props.textKey]]), createVNode("div", {
+    }, [slots.content ? slots.content(item) : item[props.textKey]]), createVNode("div", {
       "class": bem$B("item-nav"),
       "onClick": () => {
         toNextLevel(item, index);
@@ -9840,7 +9915,9 @@ var stdin_default$S = 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, {
@@ -9978,7 +10055,8 @@ var stdin_default$S = defineComponent({
         setScale(scale);
       }
     };
-    const checkTap = () => {
+    const checkTap = (event) => {
+      var _a;
       if (fingerNum > 1) {
         return;
       }
@@ -9996,6 +10074,9 @@ var stdin_default$S = 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;
@@ -10033,7 +10114,7 @@ var stdin_default$S = defineComponent({
         }
       }
       preventDefault(event, stopPropagation2);
-      checkTap();
+      checkTap(event);
       touch.reset();
     };
     const onLoad = (event) => {
@@ -10087,7 +10168,7 @@ var stdin_default$S = 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,
@@ -10107,7 +10188,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 = defineComponent({
   name: name$A,
@@ -10121,7 +10204,8 @@ var stdin_default$R = defineComponent({
     const state = reactive({
       active: 0,
       rootWidth: 0,
-      rootHeight: 0
+      rootHeight: 0,
+      disableZoom: false
     });
     const resize2 = () => {
       if (swipeRef.value) {
@@ -10177,6 +10261,12 @@ var stdin_default$R = defineComponent({
         }, [slots.cover()]);
       }
     };
+    const onDragStart = () => {
+      state.disableZoom = true;
+    };
+    const onDragEnd = () => {
+      state.disableZoom = false;
+    };
     const renderImages = () => createVNode(Swipe, {
       "ref": swipeRef,
       "lazyRender": true,
@@ -10186,7 +10276,9 @@ var stdin_default$R = defineComponent({
       "initialSwipe": props.startPosition,
       "showIndicators": props.showIndicators,
       "indicatorColor": "white",
-      "onChange": setActive
+      "onChange": setActive,
+      "onDragEnd": onDragEnd,
+      "onDragStart": onDragStart
     }, {
       default: () => [props.images.map((image, index) => createVNode(stdin_default$S, {
         "src": image.url,
@@ -10196,6 +10288,8 @@ var stdin_default$R = defineComponent({
         "minZoom": props.minZoom,
         "rootWidth": state.rootWidth,
         "rootHeight": state.rootHeight,
+        "disableZoom": state.disableZoom,
+        "closeOnClickOverlay": props.closeOnClickOverlay,
         "onScale": emitScale,
         "onClose": emitClose,
         "onLongPress": () => emit("longPress", {
@@ -10278,6 +10372,7 @@ const defaultConfig = {
   swipeDuration: 300,
   showIndicators: false,
   closeOnPopstate: true,
+  closeOnClickOverlay: true,
   closeIconPosition: "top-right"
 };
 function initInstance$1() {
@@ -10335,6 +10430,7 @@ const [name$z, bem$y] = createNamespace("index-bar");
 const indexBarProps = {
   sticky: truthProp,
   zIndex: numericProp,
+  activeAnchor: makeNumericProp(""),
   teleport: [String, Object],
   highlightColor: String,
   stickyOffsetTop: makeNumberProp(0),
@@ -10347,14 +10443,14 @@ const INDEX_BAR_KEY = Symbol(name$z);
 var stdin_default$Q = defineComponent({
   name: name$z,
   props: indexBarProps,
-  emits: ["select", "change"],
+  emits: ["select", "change", "anchorClick", "update:activeAnchor"],
   setup(props, {
     emit,
     slots
   }) {
     const root = ref();
     const sidebar = ref();
-    const activeAnchor = ref("");
+    const activeAnchor = useSyncPropRef(() => props.activeAnchor, (value) => emit("update:activeAnchor", value));
     const touchIndex = ref("");
     const touch = useTouch();
     const scrollParent = useScrollParent(root);
@@ -10456,6 +10552,7 @@ var stdin_default$Q = defineComponent({
       }
     });
     const scrollTo = (index) => {
+      emit("anchorClick", index);
       selectActiveIndex = String(index);
       const match = getMatchAnchor(selectActiveIndex);
       if (match) {
@@ -10675,6 +10772,7 @@ const listProps = {
   offset: makeNumericProp(300),
   loading: Boolean,
   finished: Boolean,
+  scroller: Object,
   errorText: String,
   direction: makeStringProp("down"),
   loadingText: String,
@@ -10694,6 +10792,7 @@ var stdin_default$O = defineComponent({
     const placeholder = ref();
     const tabStatus = useTabStatus();
     const scrollParent = useScrollParent(root);
+    const scroller = computed(() => props.scroller || scrollParent.value);
     const check = () => {
       nextTick(() => {
         if (loading.value || props.finished || props.error || // skip check when inside an inactive tab
@@ -10704,7 +10803,7 @@ var stdin_default$O = defineComponent({
           direction
         } = props;
         const offset2 = +props.offset;
-        const scrollParentRect = useRect(scrollParent);
+        const scrollParentRect = useRect(scroller);
         if (!scrollParentRect.height || isHidden(root)) {
           return;
         }
@@ -10785,7 +10884,7 @@ var stdin_default$O = defineComponent({
       check
     });
     useEventListener("scroll", check, {
-      target: scrollParent,
+      target: scroller,
       passive: true
     });
     return () => {
@@ -13826,13 +13925,10 @@ var stdin_default$v = defineComponent({
     };
     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;
       }
@@ -13840,7 +13936,7 @@ var stdin_default$v = defineComponent({
         "class": bem$n("header")
       }, [leftSlot && createVNode("span", {
         "class": bem$n("title-left")
-      }, [leftSlot()]), title && createVNode("h2", {
+      }, [leftSlot()]), title && createVNode("div", {
         "class": bem$n("title")
       }, [title])]);
     };
@@ -13895,11 +13991,8 @@ var stdin_default$v = defineComponent({
     return () => {
       const Title = renderTitle();
       const {
-        theme,
-        closeButtonText,
         title
       } = props;
-      const showClose = closeButtonText && theme === "default";
       const Content = createVNode(Transition, {
         "name": props.transition ? "zt-slide-up" : ""
       }, {
@@ -13916,15 +14009,7 @@ var stdin_default$v = defineComponent({
           "class": [bem$n("body"), title ? "" : bem$n("body-no-title")]
         }, [createVNode("div", {
           "class": bem$n("keys")
-        }, [renderKeys()]), renderSidebar()]), showClose && createVNode("div", {
-          "class": bem$n("finish-button-box")
-        }, [createVNode(stdin_default$1B, {
-          "type": "primary",
-          "block": true,
-          "text": closeButtonText,
-          "class": [bem$n("finish-button"), HAPTICS_FEEDBACK],
-          "onClick": onClose
-        }, null)])]), [[vShow, props.show]])]
+        }, [renderKeys()]), renderSidebar()])]), [[vShow, props.show]])]
       });
       if (props.teleport) {
         return createVNode(Teleport, {
@@ -14032,7 +14117,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"),
@@ -14075,6 +14160,7 @@ var stdin_default$t = defineComponent({
     const wrapperRef = ref();
     const popoverRef = ref();
     const arrowRef = ref();
+    const show = useSyncPropRef(() => props.show, (value) => emit("update:show", value));
     const getPopoverOptions = () => ({
       placement: props.placement,
       modifiers: [{
@@ -14097,7 +14183,7 @@ var stdin_default$t = defineComponent({
     };
     const updateLocation = () => {
       nextTick(() => {
-        if (!props.show) {
+        if (!show.value) {
           return;
         }
         if (!popper) {
@@ -14111,10 +14197,12 @@ var stdin_default$t = 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) => {
@@ -14127,12 +14215,12 @@ var stdin_default$t = 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) => {
@@ -14249,7 +14337,7 @@ var stdin_default$t = defineComponent({
         popper = null;
       }
     });
-    watch(() => [props.show, props.offset, props.placement], updateLocation);
+    watch(() => [show.value, props.offset, props.placement], updateLocation);
     useClickAway(wrapperRef, onClickAway, {
       eventName: "touchstart"
     });
@@ -14261,14 +14349,13 @@ var stdin_default$t = defineComponent({
         "onClick": onClickWrapper
       }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), createVNode(Popup, 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 && createVNode("div", {
           "class": bem$l("arrow"),
           "ref": arrowRef
@@ -16384,6 +16471,7 @@ var stdin_default$e = defineComponent({
     let opened;
     let lockClick2;
     let startOffset;
+    let isInBeforeClosing;
     const root = ref();
     const leftRef = ref();
     const rightRef = ref();
@@ -16460,14 +16548,22 @@ var stdin_default$e = 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
         });
       }
     };
@@ -17139,10 +17235,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 = defineComponent({
   name: name$2,
@@ -17155,6 +17252,7 @@ var stdin_default$7 = defineComponent({
     const expanded = ref(false);
     const hasAction = ref(false);
     const root = ref();
+    const actionText = computed(() => expanded.value ? props.collapseText : props.expandText);
     const pxToNum = (value) => {
       if (!value)
         return 0;
@@ -17184,23 +17282,52 @@ var stdin_default$7 = 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)
@@ -17210,7 +17337,7 @@ var stdin_default$7 = 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);
@@ -17224,26 +17351,17 @@ var stdin_default$7 = 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 = () => createVNode("span", {
       "class": bem$2("action"),
       "onClick": onClickAction
-    }, [expanded.value ? props.collapseText : props.expandText]);
+    }, [actionText.value]);
     onMounted(calcEllipsised);
-    watch(() => [props.content, props.rows], calcEllipsised);
+    watch(() => [props.content, props.rows, props.position], calcEllipsised);
     useEventListener("resize", calcEllipsised);
     return () => createVNode("div", {
       "ref": root,
       "class": bem$2()
-    }, [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);
@@ -18843,7 +18961,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.7";
+const version = "3.1.9";
 function install(app) {
   const components = [
     ActionSheet,