vue-devui 1.6.14 → 1.6.16

package/select/index.es.js

@@ -33,10 +33,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance, render, resolveDirective } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, computed, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance, render, resolveDirective } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import "clipboard";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, flip, arrow, computePosition } from "@floating-ui/dom";
 function className(classStr, classOpt) {
   let classname = classStr;
   if (typeof classOpt === "object") {
@@ -3916,7 +3916,7 @@ var lodash = { exports: {} };
       var delay = baseRest(function(func, wait, args) {
         return baseDelay(func, toNumber(wait) || 0, args);
       });
-      function flip(func) {
+      function flip2(func) {
         return createWrap(func, WRAP_FLIP_FLAG);
       }
       function memoize(func, resolver) {
@@ -5040,7 +5040,7 @@ var lodash = { exports: {} };
       lodash2.flatten = flatten;
       lodash2.flattenDeep = flattenDeep;
       lodash2.flattenDepth = flattenDepth;
-      lodash2.flip = flip;
+      lodash2.flip = flip2;
       lodash2.flow = flow;
       lodash2.flowRight = flowRight;
       lodash2.fromPairs = fromPairs;
@@ -5833,18 +5833,12 @@ const flexibleOverlayProps = {
   clickEventBubble: {
     type: Boolean,
     default: false
+  },
+  fitOriginWidth: {
+    type: Boolean,
+    default: false
   }
 };
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
 function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   let { x, y } = point;
   if (!isArrowCenter) {
@@ -5865,9 +5859,18 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
   return { x, y };
 }
 function useOverlay(props, emit) {
+  const { fitOriginWidth, position, showArrow } = toRefs(props);
   const overlayRef = ref();
   const arrowRef = ref();
-  let originParent = null;
+  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 = {
@@ -5888,54 +5891,67 @@ function useOverlay(props, emit) {
     const hostEl = props.origin;
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    if (!overlayEl) {
-      return;
+    const [mainPosition, ...fallbackPosition] = position.value;
+    const middleware = [offset(props.offset)];
+    middleware.push(fallbackPosition.length ? flip({ fallbackPlacements: fallbackPosition }) : flip());
+    if (showArrow.value) {
+      middleware.push(arrow({ element: arrowRef.value }));
     }
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
+      placement: mainPosition,
       middleware
     });
     let applyX = x;
     let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
     emit("positionChange", placement);
     Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
+  const scrollCallback = (e) => {
+    var _a, _b;
+    const scrollElement = e.target;
+    if (scrollElement == null ? void 0 : scrollElement.contains((_b = (_a = props.origin) == null ? void 0 : _a.$el) != null ? _b : props.origin)) {
+      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) {
-      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("scroll", scrollCallback, true);
       window.addEventListener("resize", updatePosition);
+      observeOrigin();
     } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("scroll", scrollCallback, true);
       window.removeEventListener("resize", updatePosition);
+      unobserveOrigin();
     }
   });
   onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("scroll", scrollCallback, true);
     window.removeEventListener("resize", updatePosition);
+    unobserveOrigin();
   });
-  return { arrowRef, overlayRef, updatePosition };
+  return { arrowRef, overlayRef, styles, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -5956,6 +5972,7 @@ const FlexibleOverlay = defineComponent({
     const {
       arrowRef,
       overlayRef,
+      styles,
       updatePosition
     } = useOverlay(props, emit);
     expose({
@@ -5965,7 +5982,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"])
@@ -8242,6 +8260,13 @@ const selectProps = {
   showGlowStyle: {
     type: Boolean,
     default: true
+  },
+  menuClass: {
+    type: String,
+    default: ""
+  },
+  maxLength: {
+    type: Number
   }
 };
 const optionProps = {
@@ -9232,6 +9257,7 @@ function useSelectContent() {
     }
   };
   return {
+    select: select2,
     searchQuery,
     selectedData,
     isSelectDisable,
@@ -9267,6 +9293,7 @@ var SelectContent = defineComponent({
     const multipleCls = ns2.e("multiple");
     const multipleInputCls = ns2.em("multiple", "input");
     const {
+      select: select2,
       searchQuery,
       selectedData,
       isSelectDisable,
@@ -9330,6 +9357,7 @@ var SelectContent = defineComponent({
         "placeholder": placeholder.value,
         "readonly": isReadOnly.value,
         "disabled": isSelectDisable.value,
+        "maxlength": select2 == null ? void 0 : select2.maxLength,
         "onInput": queryFilter,
         "onFocus": onFocus,
         "onBlur": onBlur
@@ -9341,6 +9369,7 @@ var SelectContent = defineComponent({
         "placeholder": placeholder.value,
         "readonly": isReadOnly.value,
         "disabled": isSelectDisable.value,
+        "maxlength": select2 == null ? void 0 : select2.maxLength,
         "onFocus": onFocus,
         "onBlur": onBlur,
         "onInput": queryFilter
@@ -9639,7 +9668,6 @@ var Select = defineComponent({
     const isRender = ref(false);
     const currentPosition = ref("bottom");
     const position = ref(["bottom-start", "top-start"]);
-    const dropdownWidth = ref("0");
     const handlePositionChange = (pos) => {
       currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
     };
@@ -9647,14 +9675,9 @@ var Select = defineComponent({
       transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
       "z-index": "var(--devui-z-index-dropdown, 1052)"
     }));
-    const updateDropdownWidth = () => {
-      var _a;
-      dropdownWidth.value = ((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth) ? originRef.value.clientWidth + "px" : "100%";
-    };
     watch(selectRef, (val) => {
       if (val) {
         originRef.value = val.$el;
-        updateDropdownWidth();
       }
     });
     const scrollToBottom = () => {
@@ -9666,15 +9689,11 @@ var Select = defineComponent({
     };
     onMounted(() => {
       isRender.value = true;
-      updateDropdownWidth();
-      window.addEventListener("resize", updateDropdownWidth);
       nextTick(() => {
-        dropdownContainer.value.addEventListener("scroll", scrollToBottom);
+        var _a;
+        (_a = dropdownContainer.value) == null ? void 0 : _a.addEventListener("scroll", scrollToBottom);
       });
     });
-    onUnmounted(() => {
-      window.removeEventListener("resize", updateDropdownWidth);
-    });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
       selectSize,
@@ -9710,17 +9729,16 @@ var Select = defineComponent({
             "origin": originRef.value,
             "align": "start",
             "offset": 4,
+            "fit-origin-width": true,
             "position": position.value,
             "onPositionChange": handlePositionChange,
-            "style": styles.value
+            "style": styles.value,
+            "class": props.menuClass
           }, {
             default: () => {
               var _a, _b, _c, _d;
               return [withDirectives(createVNode("div", {
-                "class": dropdownCls,
-                "style": {
-                  width: `${dropdownWidth.value}`
-                }
+                "class": dropdownCls
               }, [withDirectives(createVNode("ul", {
                 "class": listCls,
                 "ref": dropdownContainer