@cmstops/pro-compo 0.1.81 → 0.1.82

package/lib/baseFilter/components/FilterGroup.js

@@ -2,7 +2,7 @@
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var icon = require("@arco-design/web-vue/es/icon");
-var core = require("@popperjs/core");
+var usePopper = require("../../hooks/usePopper.js");
 const _hoisted_1 = { class: "filter-view-container" };
 const _hoisted_2 = { class: "more-btn" };
 const _hoisted_3 = { class: "right-prefix" };
@@ -15,120 +15,89 @@ const _hoisted_6 = {
 const _sfc_main = vue.defineComponent({
   __name: "FilterGroup",
   setup(__props) {
-    const documentWidth = vue.ref(0);
-    const overflowWidth = vue.ref(0);
-    vue.watch(
-      () => documentWidth.value,
-      (n) => checkOverflow()
-    );
-    vue.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 = vue.ref();
     const moreBtnRef = vue.ref();
     const dpPannelRef = vue.ref();
-    const initPopper = function() {
-      core.createPopper(moreBtnRef.value, dpPannelRef.value, {
-        placement: "bottom-start"
-      });
+    const { initPopper, show, visible } = usePopper(dpPannelRef, moreBtnRef);
+    const filterItemsRef = vue.ref();
+    const windowWidth = vue.ref(0);
+    const filterWidth = vue.ref(0);
+    const filterBorder = vue.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 = vue.ref(false);
-    function showPopper() {
-      popperShowFlag.value = true;
-      window.onclick = hidePopper;
-    }
-    function hidePopper() {
-      popperShowFlag.value = false;
-    }
-    const itemNodeArr = vue.ref([]);
-    const itemWidthArr = vue.ref([]);
-    const itemArr = vue.ref([]);
-    function checkOverflow() {
-      if (!filterItemsRef.value)
+    const initDocWidthListener = () => window.onresize = () => initWidth();
+    const hideElementList = vue.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 = vue.ref("");
+    };
     vue.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(",");
-    }
     vue.onMounted(() => {
       initDocWidthListener();
       initPopper();
-      setTimeout(() => checkOverflow());
+      initWidth();
+      setTimeout(() => {
+        refreshPanel();
+      });
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -138,7 +107,7 @@ const _sfc_main = vue.defineComponent({
             ref: moreBtnRef
           }, [
             vue.withDirectives(vue.createVNode(vue.unref(webVue.Button), {
-              onClick: vue.withModifiers(showPopper, ["stop"])
+              onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => vue.unref(show)(), ["stop"]))
             }, {
               default: vue.withCtx(() => [
                 vue.createElementVNode("span", _hoisted_3, [
@@ -148,7 +117,7 @@ const _sfc_main = vue.defineComponent({
               ]),
               _: 1
             }, 512), [
-              [vue.vShow, pannelArray.value]
+              [vue.vShow, hideElementList.value.length]
             ])
           ], 512),
           vue.withDirectives(vue.createElementVNode("div", {
@@ -157,7 +126,7 @@ const _sfc_main = vue.defineComponent({
             ref: dpPannelRef,
             class: "filter-pannel"
           }, null, 512), [
-            [vue.vShow, popperShowFlag.value]
+            [vue.vShow, vue.unref(visible)]
           ])
         ]),
         vue.createElementVNode("div", _hoisted_4, [

package/lib/baseFilter/style/filterGroup.less

@@ -1,60 +1,52 @@
 // 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 {
+      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/lib/baseFilter/style/index.css

@@ -1,31 +1,40 @@
 .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 {
   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 +42,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/hooks/usePopper.js

@@ -0,0 +1,26 @@
+"use strict";
+var core = require("@popperjs/core");
+var vue = require("vue");
+function usePopper(pannel, triggerEl) {
+  const visible = vue.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;
+    core.createPopper(triggerEl.value, pannel.value, {
+      placement
+    });
+  };
+  return {
+    initPopper,
+    show,
+    visible
+  };
+}
+module.exports = usePopper;

package/lib/index.css

@@ -3498,32 +3498,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;
-  width: 180px;
-  margin-right: 10px;
+  align-items: center;
+}
+.filter-view-container .more-btn .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);
 }
 .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 +3540,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.1.81",
+  "version": "0.1.82",
   "description": "",
   "keywords": [
     "vue",