vue-devui 1.6.15 → 1.6.17

package/editor-md/index.es.js

@@ -8028,6 +8028,10 @@ const flexibleOverlayProps = {
   clickEventBubble: {
     type: Boolean,
     default: false
+  },
+  fitOriginWidth: {
+    type: Boolean,
+    default: false
   }
 };
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
@@ -8050,9 +8054,18 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
-  const { position, showArrow } = toRefs(props);
+  const { fitOriginWidth, position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
+  const overlayWidth = ref(0);
+  let originObserver;
+  const styles = computed(() => {
+    if (fitOriginWidth.value) {
+      return { width: overlayWidth.value + "px" };
+    } else {
+      return {};
+    }
+  });
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -8097,21 +8110,43 @@ function useOverlay(props, emit) {
       updatePosition();
     }
   };
+  const updateWidth = (originEl) => {
+    overlayWidth.value = originEl.getBoundingClientRect().width;
+    updatePosition();
+  };
+  const observeOrigin = () => {
+    var _a, _b;
+    if (fitOriginWidth.value && typeof window !== "undefined") {
+      const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
+      if (originEl) {
+        originObserver = new window.ResizeObserver(() => updateWidth(originEl));
+        originObserver.observe(originEl);
+      }
+    }
+  };
+  const unobserveOrigin = () => {
+    var _a, _b;
+    const originEl = (_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin;
+    originEl && (originObserver == null ? void 0 : originObserver.unobserve(originEl));
+  };
   watch(() => props.modelValue, () => {
     if (props.modelValue && props.origin) {
       nextTick(updatePosition);
       window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
+      observeOrigin();
     } else {
       window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
+      unobserveOrigin();
     }
   });
   onUnmounted(() => {
     window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
+    unobserveOrigin();
   });
-  return { arrowRef, overlayRef, updatePosition };
+  return { arrowRef, overlayRef, styles, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -8132,6 +8167,7 @@ const FlexibleOverlay = defineComponent({
     const {
       arrowRef,
       overlayRef,
+      styles,
       updatePosition
     } = useOverlay(props, emit);
     expose({
@@ -8141,7 +8177,8 @@ const FlexibleOverlay = defineComponent({
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": ns2.b()
+        "class": ns2.b(),
+        "style": styles.value
       }, attrs, {
         "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
         "onPointerup": withModifiers(() => ({}), ["stop"])
@@ -9244,6 +9281,13 @@ var EditorMd = defineComponent({
       fullscreenZIndex
     } = toRefs(props);
     const showFullscreen = ref(false);
+    const finalModelValue = computed(() => {
+      if (typeof maxlength.value === "number") {
+        return modelValue.value.substring(0, maxlength.value);
+      } else {
+        return modelValue.value;
+      }
+    });
     const {
       editorRef,
       overlayRef,
@@ -9301,7 +9345,7 @@ var EditorMd = defineComponent({
         }, [createVNode("textarea", {
           "ref": editorRef,
           "placeholder": placeholder.value
-        }, [modelValue.value]), createVNode(FlexibleOverlay, {
+        }, [finalModelValue.value]), createVNode(FlexibleOverlay, {
           "ref": overlayRef,
           "modelValue": isHintShow.value,
           "onUpdate:modelValue": ($event) => isHintShow.value = $event,
@@ -9317,11 +9361,11 @@ var EditorMd = defineComponent({
           }
         }), Boolean(maxlength == null ? void 0 : maxlength.value) && createVNode("div", {
           "class": "dp-md-count"
-        }, [modelValue.value.length || 0, createTextVNode("/"), maxlength.value])]), createVNode(MdRender, {
+        }, [finalModelValue.value.length || 0, createTextVNode("/"), maxlength.value])]), createVNode(MdRender, {
           "ref": renderRef,
           "base-url": baseUrl.value,
           "breaks": breaks.value,
-          "content": modelValue.value,
+          "content": finalModelValue.value,
           "custom-parse": customParse.value,
           "render-parse": renderParse.value,
           "md-rules": mdRules.value,