@cmstops/pro-compo 0.1.81 → 0.1.83

package/es/baseFilter/components/FilterGroup.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, onMounted, openBlock, createElementBlock, createElementVNode, withDirectives, createVNode, unref, withModifiers, withCtx, createTextVNode, vShow, renderSlot } from "vue";
 import { Button } from "@arco-design/web-vue";
 import { IconCaretDown } from "@arco-design/web-vue/es/icon";
-import { createPopper } from "@popperjs/core";
+import usePopper from "../../hooks/usePopper.js";
 const _hoisted_1 = { class: "filter-view-container" };
 const _hoisted_2 = { class: "more-btn" };
 const _hoisted_3 = { class: "right-prefix" };
@@ -14,120 +14,89 @@ const _hoisted_6 = {
 const _sfc_main = defineComponent({
   __name: "FilterGroup",
   setup(__props) {
-    const documentWidth = ref(0);
-    const overflowWidth = ref(0);
-    watch(
-      () => documentWidth.value,
-      (n) => checkOverflow()
-    );
-    watch(
-      () => overflowWidth.value,
-      (n) => setPannelItem()
-    );
-    const initDocWidthListener = function() {
-      window.onresize = (() => {
-        return () => {
-          documentWidth.value = document.body.clientWidth;
-        };
-      })();
+    const getRect = (el) => {
+      if (!el || !el.getClientRects())
+        return { right: 0, width: 0 };
+      const [{ right, width }] = el.getClientRects();
+      return {
+        right,
+        width
+      };
     };
-    const filterItemsRef = ref();
     const moreBtnRef = ref();
     const dpPannelRef = ref();
-    const initPopper = function() {
-      createPopper(moreBtnRef.value, dpPannelRef.value, {
-        placement: "bottom-start"
-      });
+    const { initPopper, show, visible } = usePopper(dpPannelRef, moreBtnRef);
+    const filterItemsRef = ref();
+    const windowWidth = ref(0);
+    const filterWidth = ref(0);
+    const filterBorder = ref(0);
+    const initWidth = () => {
+      var _a;
+      windowWidth.value = ((_a = document.body) == null ? void 0 : _a.clientWidth) || 0;
+      if (filterItemsRef.value) {
+        filterWidth.value = filterItemsRef.value.clientWidth || 0;
+        filterBorder.value = getRect(filterItemsRef.value).right;
+      }
     };
-    const popperShowFlag = ref(false);
-    function showPopper() {
-      popperShowFlag.value = true;
-      window.onclick = hidePopper;
-    }
-    function hidePopper() {
-      popperShowFlag.value = false;
-    }
-    const itemNodeArr = ref([]);
-    const itemWidthArr = ref([]);
-    const itemArr = ref([]);
-    function checkOverflow() {
-      if (!filterItemsRef.value)
+    const initDocWidthListener = () => window.onresize = () => initWidth();
+    const hideElementList = ref([]);
+    const inNode = (el) => {
+      var _a, _b;
+      hideElementList.value.push({ width: getRect(el).width, el });
+      (_a = filterItemsRef.value) == null ? void 0 : _a.removeChild(el);
+      (_b = dpPannelRef.value) == null ? void 0 : _b.appendChild(el);
+    };
+    const outNode = () => {
+      var _a, _b;
+      if (!hideElementList.value.length || !filterItemsRef.value)
         return;
-      const parent = filterItemsRef.value.parentNode;
-      if (!itemNodeArr.value.length) {
-        itemNodeArr.value = mapNodes(filterItemsRef.value.childNodes);
-        itemWidthArr.value = itemNodeArr.value.map((node) => node.clientWidth + 10);
-        itemArr.value = itemWidthArr.value.map((_, idx) => idx);
-      }
-      const parentWidth = parent.clientWidth;
-      const leftWidth = getArrWidth(itemWidthArr.value);
-      const rightWidth = parent.childNodes[parent.childNodes.length - 1].clientWidth;
-      overflowWidth.value = leftWidth + rightWidth - parentWidth;
-    }
-    function mapNodes(nodes) {
-      const nodeArr = [];
-      for (let i = 0; i < nodes.length; i++) {
-        const element = nodes[i];
-        nodeArr.push(element);
+      const popEl = hideElementList.value.pop();
+      if (!popEl)
+        return;
+      const { width, el } = popEl;
+      el.style.width = `${width}px`;
+      (_a = dpPannelRef.value) == null ? void 0 : _a.removeChild(el);
+      (_b = filterItemsRef.value) == null ? void 0 : _b.appendChild(el);
+      hideElementList.value.splice(-1, 0);
+    };
+    const checkOverflow = () => {
+      if (!filterItemsRef.value)
+        return -1;
+      const elements = Array.from(filterItemsRef.value.childNodes);
+      let rightBorder = 0;
+      elements.forEach((item) => {
+        if (item.className !== "filter-item-view")
+          return;
+        const { right } = getRect(item);
+        if (right <= filterBorder.value) {
+          rightBorder = right;
+          return;
+        }
+        inNode(item);
+      });
+      return rightBorder;
+    };
+    const refreshPanel = () => {
+      const border = checkOverflow();
+      if (hideElementList.value.length && border !== -1) {
+        const spaceWidth = filterBorder.value - border;
+        const { width } = hideElementList.value[hideElementList.value.length - 1];
+        if (spaceWidth > width + 20) {
+          outNode();
+        }
       }
-      return nodeArr.filter((item) => item.clientWidth);
-    }
-    function getArrWidth(arr) {
-      return arr.reduce((prev, cur) => prev + cur, 0);
-    }
-    const pannelArray = ref("");
+    };
     watch(
-      () => pannelArray.value,
-      (n, o) => refreshPannel(n, o)
+      () => windowWidth.value,
+      () => refreshPanel()
     );
-    function refreshPannel(newStr, oldStr) {
-      const nArr = newStr ? newStr.split(",") : [];
-      const oArr = oldStr ? oldStr.split(",") : [];
-      if (nArr.length && nArr.length > oArr.length) {
-        diff(nArr, oArr).forEach((index) => inNode(parseInt(index, 10)));
-      } else if (nArr.length >= 0 && nArr.length < oArr.length) {
-        diff(oArr, nArr).forEach((index) => outNode(parseInt(index, 10)));
-      }
-    }
-    const diff = (arr1, arr2) => {
-      const diff2 = [];
-      for (let i = 0; i < arr1.length; i++) {
-        const item = arr1[i];
-        if (!arr2.includes(item))
-          diff2.push(item);
-      }
-      return diff2;
-    };
-    function inNode(index) {
-      var _a, _b, _c;
-      const node = mapNodes((_a = filterItemsRef.value) == null ? void 0 : _a.childNodes)[index];
-      const temp = document.createElement("div");
-      temp.style.width = `${itemWidthArr.value[index]}px`;
-      temp.style.position = "absolute";
-      temp.style.left = `${50}px`;
-      (_b = filterItemsRef.value) == null ? void 0 : _b.replaceChild(temp, node);
-      (_c = dpPannelRef.value) == null ? void 0 : _c.appendChild(node);
-    }
-    function outNode(index) {
-      var _a;
-      const node = itemNodeArr.value[index];
-      (_a = filterItemsRef.value) == null ? void 0 : _a.replaceChild(
-        node,
-        mapNodes(filterItemsRef.value.childNodes)[index]
-      );
-    }
-    function setPannelItem() {
-      let inPannelNum = 0;
-      if (overflowWidth.value > 0) {
-        const avgWidth = 120;
-        inPannelNum = Math.ceil((overflowWidth.value + 200) / avgWidth);
-      }
-      pannelArray.value = itemArr.value.slice(0, inPannelNum).join(",");
-    }
     onMounted(() => {
       initDocWidthListener();
       initPopper();
-      setTimeout(() => checkOverflow());
+      initWidth();
+      setTimeout(() => {
+        refreshPanel();
+      });
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -137,7 +106,7 @@ const _sfc_main = defineComponent({
             ref: moreBtnRef
           }, [
             withDirectives(createVNode(unref(Button), {
-              onClick: withModifiers(showPopper, ["stop"])
+              onClick: _cache[0] || (_cache[0] = withModifiers(() => unref(show)(), ["stop"]))
             }, {
               default: withCtx(() => [
                 createElementVNode("span", _hoisted_3, [
@@ -147,7 +116,7 @@ const _sfc_main = defineComponent({
               ]),
               _: 1
             }, 512), [
-              [vShow, pannelArray.value]
+              [vShow, hideElementList.value.length]
             ])
           ], 512),
           withDirectives(createElementVNode("div", {
@@ -156,7 +125,7 @@ const _sfc_main = defineComponent({
             ref: dpPannelRef,
             class: "filter-pannel"
           }, null, 512), [
-            [vShow, popperShowFlag.value]
+            [vShow, unref(visible)]
           ])
         ]),
         createElementVNode("div", _hoisted_4, [

package/es/baseFilter/style/filterGroup.less

@@ -1,60 +1,53 @@
 // FilterGroup 内部样式
 .filter-view-container {
   display: flex;
+  gap: 10px;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
   margin-bottom: 10px;
   font-size: 14px;
 
-  .filter-search {
-    display: flex;
-    gap: 10px;
-    width: 180px;
-    margin-right: 10px;
+  .more-btn {
+    .right-prefix {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .filter-pannel {
+      z-index: 1002;
+      display: flex;
+      gap: 10px;
+      padding: 10px;
+      background-color: white;
+      border-radius: 6px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
   }
 
   .filter-content {
-    position: relative;
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: space-between;
-  }
 
-  .left {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
+    .left {
+      display: flex;
+      flex: 1;
+      gap: 10px;
+      width: 100px;
+      overflow: hidden;
+      background-color: #fff;
+    }
 
-  .right {
-    position: absolute;
-    right: 0;
-    z-index: 1;
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    height: 100%;
-    padding-left: 20px;
-    background: white;
-  }
-
-  .more-btn {
-    z-index: 10;
-    margin-right: 10px;
-  }
-
-  .right-prefix {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
-
-  .filter-pannel {
-    display: flex;
-    gap: 10px;
-    padding: 10px;
-    background-color: white;
-    border-radius: 6px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    .right {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      height: 100%;
+      padding-left: 20px;
+      background: white;
+    }
   }
 }

package/es/baseFilter/style/index.css

@@ -1,31 +1,41 @@
 .filter-view-container {
   display: flex;
+  gap: 10px;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
   margin-bottom: 10px;
   font-size: 14px;
 }
-.filter-view-container .filter-search {
+.filter-view-container .more-btn .right-prefix {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.filter-view-container .more-btn .filter-pannel {
+  z-index: 1002;
   display: flex;
   gap: 10px;
-  width: 180px;
-  margin-right: 10px;
+  padding: 10px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 .filter-view-container .filter-content {
-  position: relative;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: space-between;
 }
-.filter-view-container .left {
+.filter-view-container .filter-content .left {
   display: flex;
+  flex: 1;
   gap: 10px;
-  align-items: center;
+  width: 100px;
+  overflow: hidden;
+  background-color: #fff;
 }
-.filter-view-container .right {
-  position: absolute;
-  right: 0;
-  z-index: 1;
+.filter-view-container .filter-content .right {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -33,23 +43,6 @@
   padding-left: 20px;
   background: white;
 }
-.filter-view-container .more-btn {
-  z-index: 10;
-  margin-right: 10px;
-}
-.filter-view-container .right-prefix {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-.filter-view-container .filter-pannel {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
 .base-filter-container {
   display: flex;
   align-items: center;

package/es/baseFilter/useCalcWidth.d.ts

@@ -1,4 +1,11 @@
 import { Ref } from 'vue';
+/**
+ * @deprecated 改为其他方式实现
+ * @param filterItemsRef
+ * @param dpPannelRef
+ * @param moreBtnRef
+ * @returns
+ */
 export default function useCalcWidth(filterItemsRef: Ref<HTMLElement | undefined>, dpPannelRef: Ref<HTMLElement | undefined>, moreBtnRef: Ref<HTMLElement | undefined>): {
     pannelArray: Ref<string>;
     popperShowFlag: Ref<boolean>;

package/es/hooks/usePopper.d.ts

@@ -0,0 +1,7 @@
+import { Placement } from '@popperjs/core';
+import { Ref } from 'vue';
+export default function usePopper(pannel: Ref<HTMLElement | undefined>, triggerEl: Ref<HTMLElement | undefined>): {
+    initPopper: (placement?: Placement) => void;
+    show: () => void;
+    visible: Ref<boolean>;
+};

package/es/hooks/usePopper.js

@@ -0,0 +1,25 @@
+import { createPopper } from "@popperjs/core";
+import { ref } from "vue";
+function usePopper(pannel, triggerEl) {
+  const visible = ref(false);
+  const show = () => {
+    visible.value = true;
+    window.onclick = (e) => {
+      visible.value = false;
+      window.onclick = null;
+    };
+  };
+  const initPopper = (placement = "bottom-start") => {
+    if (!pannel.value || !triggerEl.value)
+      return;
+    createPopper(triggerEl.value, pannel.value, {
+      placement
+    });
+  };
+  return {
+    initPopper,
+    show,
+    visible
+  };
+}
+export { usePopper as default };

package/es/index.css

@@ -3498,32 +3498,42 @@
 }
 .filter-view-container {
   display: flex;
+  gap: 10px;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
   margin-bottom: 10px;
   font-size: 14px;
 }
-.filter-view-container .filter-search {
+.filter-view-container .more-btn .right-prefix {
   display: flex;
   gap: 10px;
-  width: 180px;
-  margin-right: 10px;
+  align-items: center;
+}
+.filter-view-container .more-btn .filter-pannel {
+  z-index: 1002;
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 .filter-view-container .filter-content {
-  position: relative;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: space-between;
 }
-.filter-view-container .left {
+.filter-view-container .filter-content .left {
   display: flex;
+  flex: 1;
   gap: 10px;
-  align-items: center;
+  width: 100px;
+  overflow: hidden;
+  background-color: #fff;
 }
-.filter-view-container .right {
-  position: absolute;
-  right: 0;
-  z-index: 1;
+.filter-view-container .filter-content .right {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -3531,23 +3541,6 @@
   padding-left: 20px;
   background: white;
 }
-.filter-view-container .more-btn {
-  z-index: 10;
-  margin-right: 10px;
-}
-.filter-view-container .right-prefix {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-.filter-view-container .filter-pannel {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
 .base-filter-container {
   display: flex;
   align-items: center;

package/lib/baseFilter/component.js

@@ -126,6 +126,12 @@ const _sfc_main = vue.defineComponent({
     );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", {
+          id: "base-filter-popup-container",
+          style: { "position": "relative", "z-index": "1001" },
+          onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+          }, ["stop"]))
+        }),
         vue.createVNode(FilterGroup, null, {
           left: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(renderColumns.value, (item, index) => {
@@ -147,6 +153,7 @@ const _sfc_main = vue.defineComponent({
                     key: 1,
                     modelValue: form.value[item.key],
                     "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
+                    "popup-container": "#base-filter-popup-container",
                     "allow-clear": "",
                     style: vue.normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
                     placeholder: `\u8BF7\u9009\u62E9${item.label}`
@@ -168,7 +175,8 @@ const _sfc_main = vue.defineComponent({
                     "onUpdate:modelValue": ($event) => form.value[item.key].range = $event,
                     style: vue.normalizeStyle({ width: styleWidth(form.value[item.key]) }),
                     "value-format": "timestamp",
-                    onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                    "popup-container": "#base-filter-popup-container",
+                    onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
                     }, ["stop"]))
                   }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : vue.createCommentVNode("v-if", true)
                 ]),
@@ -180,9 +188,8 @@ const _sfc_main = vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "right")
           ]),
           _: 3
-        }),
-        vue.createCommentVNode(' <div class="base-filter-container">\n    <div class="left">\n      <div v-if="render" class="form-ul">\n        <template v-for="(item, index) in renderColumns" :key="index">\n          <filter-item :active="hasValue(item.key)">\n            <a-input-search\n              v-if="item.component === \'input\'"\n              v-model="form[item.key]"\n              :style="{ width: styleWidth(columnsMap[item.key]) }"\n              allow-clear\n              size="medium"\n              :placeholder="`\u8BF7\u8F93\u5165${item.label}`"\n            />\n            <a-select\n              v-if="item.component === \'select\'"\n              v-model="form[item.key]"\n              allow-clear\n              :style="{ width: styleWidth(columnsMap[item.key]) }"\n              :placeholder="`\u8BF7\u9009\u62E9${item.label}`"\n            >\n              <template v-for="opt in getOptions(item)" :key="opt.value">\n                <a-option :label="opt.label" :value="opt.value"></a-option\n              ></template>\n            </a-select>\n            <a-range-picker\n              v-if="item.component === \'range-picker\'"\n              v-model="form[item.key].range"\n              :style="{ width: styleWidth(form[item.key]) }"\n              value-format="timestamp"\n              @click.stop\n            />\n          </filter-item>\n        </template>\n      </div>\n    </div>\n    <div class="right">\n      <slot name="right"></slot>\n    </div>\n  </div> ')
-      ], 2112);
+        })
+      ], 64);
     };
   }
 });