@cmstops/pro-compo/lib/baseFilter/components/FilterGroup.js

[物料平台文档中心](https://arco.design/docs/material/guide)

"use strict";
var vue = require("vue");
var webVue = require("@arco-design/web-vue");
var icon = require("@arco-design/web-vue/es/icon");
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" };
const _hoisted_4 = { class: "filter-content" };
const _hoisted_5 = { class: "right" };
const _hoisted_6 = {
  ref: "tempNode",
  style: { "display": "none" }
};
const _sfc_main = vue.defineComponent({
  __name: "FilterGroup",
  setup(__props, { expose: __expose }) {
    const getRect = (el) => {
      if (!el || !el.getClientRects())
        return { right: 0, width: 0 };
      const [{ right, width }] = el.getClientRects();
      return {
        right,
        width
      };
    };
    const moreBtnRef = vue.ref();
    const dpPannelRef = vue.ref();
    const { initPopper, show, visible, hide } = 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, _b;
      windowWidth.value = ((_a = document.body) == null ? void 0 : _a.clientWidth) || 0;
      if (filterItemsRef.value) {
        filterWidth.value = filterItemsRef.value.clientWidth || 0;
        filterBorder.value = (_b = getRect(filterItemsRef.value)) == null ? void 0 : _b.right;
      }
    };
    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 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) => {
        var _a;
        if (!((_a = item.className) == null ? void 0 : _a.includes("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();
        }
      }
    };
    vue.watch(
      () => windowWidth.value,
      () => refreshPanel()
    );
    vue.onMounted(() => {
      initDocWidthListener();
      initPopper();
      initWidth();
      setTimeout(() => {
        refreshPanel();
      });
    });
    __expose({
      refreshPanel
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          vue.createElementVNode("div", {
            ref_key: "moreBtnRef",
            ref: moreBtnRef
          }, [
            vue.withDirectives(vue.createVNode(vue.unref(webVue.Button), {
              style: { marginRight: "10px" },
              onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => vue.unref(visible) ? vue.unref(hide)() : vue.unref(show)(), ["stop"]))
            }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("span", _hoisted_3, [
                  _cache[1] || (_cache[1] = vue.createTextVNode(" \u66F4\u591A\u7B5B\u9009 ")),
                  vue.createVNode(vue.unref(icon.IconCaretDown))
                ])
              ]),
              _: 1
            }, 512), [
              [vue.vShow, hideElementList.value.length]
            ])
          ], 512),
          vue.withDirectives(vue.createElementVNode("div", {
            id: "dpPannelRef",
            ref_key: "dpPannelRef",
            ref: dpPannelRef,
            class: "filter-pannel"
          }, null, 512), [
            [vue.vShow, vue.unref(visible)]
          ])
        ]),
        vue.createElementVNode("div", _hoisted_4, [
          vue.createElementVNode("div", {
            ref_key: "filterItemsRef",
            ref: filterItemsRef,
            class: "left"
          }, [
            vue.renderSlot(_ctx.$slots, "left")
          ], 512),
          vue.createElementVNode("div", _hoisted_5, [
            vue.renderSlot(_ctx.$slots, "right")
          ])
        ]),
        vue.createElementVNode("div", _hoisted_6, null, 512)
      ]);
    };
  }
});
module.exports = _sfc_main;