fancy-plugins-components 1.0.32 → 1.0.34

package/dist/es/fancy-select-table/index.vue.js

@@ -0,0 +1,502 @@
+import { ElTooltip as Oe, ElTag as We, ElIcon as He } from "element-plus/es";
+import "element-plus/es/components/base/style/index";
+import "element-plus/es/components/tooltip/style/index";
+import { EleLoading as $e } from "ele-admin-plus/es";
+import "ele-admin-plus/es/ele-loading/style/index";
+import "element-plus/es/components/icon/style/index";
+import "element-plus/es/components/tag/style/index";
+import { defineComponent as Ne, mergeModels as ee, useModel as Ue, useSlots as je, ref as f, computed as c, reactive as Ge, onMounted as qe, nextTick as d, watch as z, resolveComponent as te, resolveDirective as Je, withDirectives as le, createElementBlock as A, openBlock as k, createVNode as R, withCtx as x, createElementVNode as g, normalizeStyle as ae, renderSlot as E, mergeProps as Qe, toHandlers as Xe, createSlots as Ye, renderList as oe, normalizeProps as Ze, guardReactiveProps as et, withModifiers as I, normalizeClass as P, createCommentVNode as M, Fragment as tt, createTextVNode as lt, toDisplayString as O, unref as y, withKeys as at, vModelText as ot, createBlock as ne } from "vue";
+import { CircleClose as nt, ArrowDown as rt } from "@element-plus/icons-vue";
+import { useEventListener as W, useResizeObserver as H } from "../node_modules/.pnpm/@vueuse_core@14.2.1_vue@3.5.28_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.js";
+import { useFormItem as re, useComposition as st } from "element-plus";
+import "vxe-table";
+import it from "../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/debounce.js";
+const ut = { class: "select-table__selection" }, ct = ["readonly", "disabled", "onKeydown"], dt = ["textContent"], pt = { class: "select-table__dropown-wrapper" }, ft = { class: "pager_content" }, vt = 11, Tt = /* @__PURE__ */ Ne({
+  __name: "index",
+  props: /* @__PURE__ */ ee({
+    datasource: {},
+    vxeProps: {},
+    valueKey: {},
+    labelKey: {},
+    cacheData: {},
+    disabled: { type: Boolean },
+    clearable: { type: Boolean, default: !1 },
+    filterable: { type: Boolean, default: !0 },
+    placeholder: { default: "请选择" },
+    effect: { default: "light" },
+    showArrow: { type: Boolean, default: !0 },
+    fitInputWidth: { type: Boolean },
+    persistent: { type: Boolean, default: !0 },
+    fallbackPlacements: { default: () => ["bottom-start", "top-start", "right", "left"] },
+    popperContentWidth: { default: 900 },
+    popperClass: {},
+    loadingText: {},
+    inputDelay: { default: 500 },
+    autoFoucsDropdown: { type: Boolean, default: !0 },
+    closeTooltipOnClickClear: { type: Boolean, default: !0 },
+    keepLabelSearch: { type: Boolean, default: !0 },
+    upAndDownArrowLoop: { type: Boolean },
+    multiple: { type: Boolean },
+    tagType: {},
+    beforeSelect: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ee(["focus", "blur", "visible-change", "data-error", "select", "clear"], ["update:modelValue"]),
+  setup(u, { expose: se, emit: ie }) {
+    const a = u, m = ie, i = Ue(u, "modelValue"), { formItem: $ } = re(), N = je(), U = f(), K = f(), v = f(), S = f(), h = f(), T = f(), ue = c(() => T.value?.popperRef?.contentRef), e = Ge({
+      inputHovering: !1,
+      isFocused: !1,
+      expanded: !1,
+      inputValue: "",
+      calculatorWidth: 0,
+      tableActiveIndex: 0,
+      currentLabel: "",
+      currentValue: "",
+      tooltipVisibleOnFocus: !1,
+      selected: []
+    }), { isComposing: j, handleCompositionStart: G, handleCompositionUpdate: q, handleCompositionEnd: J } = st({
+      afterComposition: (t) => Y(t)
+    }), ce = c({
+      get() {
+        return e.expanded;
+      },
+      set(t) {
+        e.expanded = t;
+      }
+    }), { form: de } = re(), V = c(() => a.disabled || de?.disabled), F = () => {
+      V.value || (e.tooltipVisibleOnFocus ? e.tooltipVisibleOnFocus = !1 : e.expanded = !e.expanded);
+    }, pe = (t) => {
+      t.target === U.value?.$el && a.autoFoucsDropdown || V.value || e.isFocused || d(() => {
+        e.isFocused = !0, m("focus", t), a.autoFoucsDropdown && !e.expanded && (e.expanded = !0, e.tooltipVisibleOnFocus = !0);
+      });
+    }, fe = (t) => T.value?.isFocusInsideContent(t), Q = (t) => {
+      fe(t) || t.target && v.value?.contains(t.target) || t.relatedTarget && v.value?.contains(t.relatedTarget) || (e.isFocused = !1, m("blur", t), e.expanded = !1, e.tooltipVisibleOnFocus = !1);
+    }, ve = () => {
+      v.value?.contains(document.activeElement) && v.value !== document.activeElement || h.value?.focus();
+    };
+    W(v, "focus", pe, !0), W(v, "blur", Q, !0), W(v, "click", ve, !0), c(() => a.fitInputWidth);
+    const be = f(""), X = () => {
+      be.value = `${K.value?.offsetWidth}px`;
+    };
+    qe(() => {
+      X(), H(K, X);
+    });
+    const ge = (t) => {
+      if (e.expanded = !1, e.isFocused) {
+        const l = new FocusEvent("focus", t);
+        d(() => Q(l));
+      }
+    }, me = it(() => {
+      n.value.currentPage = 1, w();
+    }, a.inputDelay), Y = (t) => {
+      e.inputValue = t.target.value, e.expanded || (e.expanded = !0), me();
+    }, xe = () => {
+      e.expanded ? Ke() : F();
+    }, ye = c(() => ({
+      width: `${Math.max(e.calculatorWidth, vt)}px`
+    })), he = () => {
+      e.calculatorWidth = S.value?.getBoundingClientRect().width || 0;
+    }, we = () => {
+      T.value?.updatePopper?.();
+    };
+    H(S, he), H(v, we);
+    const Ce = c(() => a.multiple ? !e.selected.length : !e.inputValue), ke = c(() => e.currentLabel ? e.currentLabel : a.placeholder ? a.placeholder : "请选择"), Re = c(() => a.multiple && e.selected.length && a.clearable && e.inputHovering && !V.value ? !0 : a.clearable && e.inputHovering && i.value && !Array.isArray(i.value) && !V.value), Ve = c(() => !!N.header), Ae = c(() => Object.keys(N).filter((t) => !["header", "footer"].includes(t))), Ie = c(() => "select-table__popper vxe-table--ignore-clear " + (a.popperClass ?? "") + (Ve.value ? " has-header" : "")), _ = f(!1), p = f(), Te = f(), _e = c(() => {
+      const t = {
+        height: 350,
+        rowConfig: {
+          isCurrent: !0,
+          isHover: !0
+        },
+        columnConfig: {
+          resizable: !0
+        },
+        ...a.vxeProps
+      };
+      return a.multiple && (t.columns = [
+        { type: "checkbox", align: "center", width: 50 },
+        ...a.vxeProps?.columns || []
+      ], t.checkboxConfig = {
+        trigger: "row",
+        ...t.checkboxConfig
+        // reserve: true,
+      }, t.rowConfig = {
+        ...t.rowConfig,
+        keyField: a.valueKey.toString()
+      }), t;
+    }), n = f({
+      total: 0,
+      currentPage: 1,
+      pageSize: 20,
+      gridTableData: []
+    }), De = () => {
+      e.selected.forEach((t) => {
+        const l = n.value.gridTableData.find(
+          (o) => o[a.valueKey] === t[a.valueKey]
+        );
+        l && p.value?.setCheckboxRow(l, !0);
+      });
+    }, w = async () => {
+      if (!j.value) {
+        e.tableActiveIndex = 0, _.value = !0;
+        try {
+          console.log(e, "ss");
+          const { currentPage: t, pageSize: l } = n.value, o = await a.datasource({
+            page: t,
+            size: l,
+            filter: e.inputValue
+          });
+          if (!o) {
+            n.value.total = 0, n.value.gridTableData = [];
+            return;
+          }
+          n.value.total = o.total, n.value.gridTableData = o.list, d(() => {
+            d(() => {
+              p.value?.focus();
+            });
+            let b = n.value.gridTableData?.[0];
+            if (e.currentValue) {
+              const C = o.list.findIndex((B) => B[a.valueKey] === e.currentValue);
+              C > -1 && (b = o.list[C], e.tableActiveIndex = C);
+            }
+            p.value?.setCurrentRow(b), setTimeout(() => {
+              p.value?.scrollToRow(b);
+            }, 0), d(() => {
+              De();
+            });
+          });
+        } catch (t) {
+          m("data-error", t);
+        } finally {
+          _.value = !1;
+        }
+      }
+    };
+    z(
+      () => e.expanded,
+      (t) => {
+        t ? j.value || w() : (a.keepLabelSearch || (e.inputValue = ""), e.tableActiveIndex = 0, n.value = {
+          pageSize: n.value.pageSize,
+          currentPage: 1,
+          total: 0,
+          gridTableData: []
+        }), m("visible-change", t);
+      }
+    );
+    const Pe = c(() => Math.ceil(n.value.total / n.value.pageSize)), Z = c(() => n.value.currentPage === Pe.value), D = (t) => {
+      const l = n.value.gridTableData[t];
+      p.value?.setCurrentRow(l), d(() => {
+        p.value?.scrollToRow(l);
+      });
+    }, Ke = async () => {
+      const t = e.tableActiveIndex, l = n.value.gridTableData?.[t];
+      if (a.multiple) {
+        const o = e.selected.indexOf(l);
+        o > -1 ? (e.selected.splice(o, 1), i.value.splice(o, 1)) : (e.selected.push(l), i.value.push(l?.[a.valueKey])), p.value?.setCheckboxRow(l, o === -1);
+      } else {
+        if (a.beforeSelect && !await a.beforeSelect(l))
+          return;
+        e.currentLabel = l?.[a.labelKey], e.inputValue = l?.[a.labelKey], i.value = e.currentValue = l?.[a.valueKey], e.expanded = !1, m("select", l);
+      }
+      d(() => {
+        $?.validate("change");
+      });
+    }, Se = (t) => {
+      if (_.value) return;
+      const l = t, { currentPage: o, gridTableData: r } = n.value;
+      if (l.key === "ArrowDown") {
+        if (e.tableActiveIndex + 1 === r.length)
+          if (a.upAndDownArrowLoop) {
+            e.tableActiveIndex = 0, D(e.tableActiveIndex);
+            return;
+          } else {
+            if (Z.value)
+              return;
+            n.value.currentPage++, w();
+            return;
+          }
+        e.tableActiveIndex++, D(e.tableActiveIndex);
+        return;
+      } else if (l.key === "ArrowUp") {
+        if (e.tableActiveIndex === 0)
+          if (a.upAndDownArrowLoop) {
+            e.tableActiveIndex = n.value.gridTableData.length - 1, D(e.tableActiveIndex);
+            return;
+          } else {
+            if (o === 1)
+              return;
+            n.value.currentPage--, w();
+            return;
+          }
+        e.tableActiveIndex--, D(e.tableActiveIndex);
+        return;
+      } else if (l.key === "ArrowLeft") {
+        if (o === 1)
+          return;
+        n.value.currentPage--, w();
+        return;
+      } else if (l.key === "ArrowRight") {
+        if (Z.value)
+          return;
+        n.value.currentPage++, w();
+        return;
+      }
+    }, Fe = {
+      keydown({ $event: t }) {
+        Se(t);
+      },
+      async cellClick({ row: t, rowIndex: l }) {
+        if (a.multiple) {
+          const o = e.selected.indexOf(t);
+          o > -1 ? (e.selected.splice(o, 1), i.value.splice(o, 1)) : (e.selected.push(t), i.value.push(t?.[a.valueKey]));
+        } else {
+          if (a.beforeSelect && !await a.beforeSelect(t))
+            return;
+          e.currentLabel = t[a.labelKey], e.inputValue = t[a.labelKey], i.value = e.currentValue = t?.[a.valueKey], e.expanded = !1, m("select", t);
+        }
+        e.tableActiveIndex = l, d(() => {
+          $?.validate("change");
+        });
+      },
+      checkboxAll({ checked: t }) {
+        const l = i.value, o = n.value.gridTableData.map((r) => r[a.valueKey]);
+        t ? (o.forEach((r) => {
+          l.includes(r) || i.value.push(r);
+        }), n.value.gridTableData.forEach((r) => {
+          e.selected.findIndex(
+            (C) => r[a.valueKey] === C[a.valueKey]
+          ) > -1 || e.selected.push(r);
+        })) : (i.value = l.filter((r) => !o.includes(r)), e.selected = e.selected.filter((r) => !o.includes(r[a.valueKey]))), d(() => {
+          h.value?.focus();
+        });
+      },
+      checkboxChange() {
+        d(() => {
+          h.value?.focus();
+        });
+      }
+    }, Be = async () => {
+      await w(), d(() => {
+        h.value?.focus();
+      });
+    }, Le = (t) => {
+      t.preventDefault(), t.stopPropagation(), a.multiple ? (e.selected = [], i.value = [], p.value?.setAllCheckboxRow(!1)) : (e.currentLabel = "", e.currentValue = "", i.value = ""), e.tableActiveIndex = 0, a.closeTooltipOnClickClear && (e.expanded = !1), e.isFocused = !0, d(() => {
+        h.value?.focus(), m("clear");
+      });
+    };
+    z(
+      () => a.cacheData,
+      (t) => {
+        if (!i.value) return;
+        const l = t || [], o = a.labelKey, r = a.valueKey;
+        if (a.multiple)
+          e.selected = [...l];
+        else {
+          const b = l?.[0];
+          e.currentLabel = b?.[o] ?? "", e.currentValue = b?.[r] ?? "", a.keepLabelSearch && (e.inputValue = e.currentLabel);
+        }
+      },
+      {
+        immediate: !0
+      }
+    ), z(
+      () => i.value,
+      (t) => {
+        t || (e.currentLabel = "", e.currentValue = "", e.inputValue = "");
+      }
+    );
+    const ze = (t, l) => {
+      i.value = i.value.filter((r) => l[a.valueKey] !== r), p.value?.setCheckboxRow(l, !1);
+      const o = e.selected.indexOf(l);
+      o > -1 && e.selected.splice(o, 1), m("select", l), t.stopPropagation(), d(() => {
+        p.value?.focus();
+      });
+    };
+    return se({
+      inputRef: h,
+      gridRef: p
+    }), (t, l) => {
+      const o = We, r = He, b = te("vxe-pager"), C = te("vxe-grid"), B = $e, Ee = Oe, Me = Je("click-outside");
+      return le((k(), A("div", {
+        ref_key: "selectRef",
+        ref: K,
+        class: "select-table",
+        onMouseenter: l[8] || (l[8] = (s) => e.inputHovering = !0),
+        onMouseleave: l[9] || (l[9] = (s) => e.inputHovering = !1)
+      }, [
+        R(Ee, {
+          ref_key: "tooltipRef",
+          ref: T,
+          visible: ce.value,
+          effect: u.effect,
+          pure: "",
+          "fallback-placements": u.fallbackPlacements,
+          persistent: u.persistent,
+          trigger: "click",
+          "show-arrow": u.showArrow,
+          "stop-popper-mouse-event": !1,
+          "gpu-acceleration": !1,
+          transition: "el-zoom-in-top",
+          "popper-class": Ie.value
+        }, {
+          default: x(() => [
+            g("div", {
+              ref_key: "wrapperRef",
+              ref: v,
+              tabindex: "-1",
+              class: P(["select-table__wrapper", {
+                "is-filterable": u.filterable,
+                "is-hovering": e.inputHovering,
+                "is-focused": e.isFocused,
+                "is-disabled": V.value
+              }]),
+              onClick: I(F, ["prevent"])
+            }, [
+              g("div", ut, [
+                u.multiple ? (k(!0), A(tt, { key: 0 }, oe(e.selected, (s) => (k(), A("div", {
+                  class: "select-table__selected-item",
+                  key: s[u.valueKey]
+                }, [
+                  R(o, {
+                    "disable-transitions": "",
+                    closable: "",
+                    onClose: (L) => ze(L, s)
+                  }, {
+                    default: x(() => [
+                      lt(O(s[u.labelKey]), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["onClose"])
+                ]))), 128)) : M("", !0),
+                g("div", {
+                  class: P(["select-table__selected-item select-table__input-wrapper", { "is-hidden": !u.filterable }])
+                }, [
+                  le(g("input", {
+                    ref_key: "inputRef",
+                    ref: h,
+                    type: "text",
+                    "onUpdate:modelValue": l[0] || (l[0] = (s) => e.inputValue = s),
+                    class: "select-table__input",
+                    readonly: !u.filterable,
+                    style: ae(ye.value),
+                    disabled: V.value,
+                    onInput: Y,
+                    onKeydown: at(I(xe, ["stop", "prevent"]), ["enter"]),
+                    onCompositionstart: l[1] || (l[1] = //@ts-ignore
+                    (...s) => y(G) && y(G)(...s)),
+                    onCompositionend: l[2] || (l[2] = //@ts-ignore
+                    (...s) => y(J) && y(J)(...s)),
+                    onCompositionupdate: l[3] || (l[3] = //@ts-ignore
+                    (...s) => y(q) && y(q)(...s)),
+                    onClick: I(F, ["stop"])
+                  }, null, 44, ct), [
+                    [ot, e.inputValue]
+                  ]),
+                  u.filterable ? (k(), A("span", {
+                    key: 0,
+                    ref_key: "calculatorRef",
+                    ref: S,
+                    "aria-hidden": "true",
+                    class: "select-table__input-calculator",
+                    textContent: O(e.inputValue)
+                  }, null, 8, dt)) : M("", !0)
+                ], 2),
+                Ce.value ? (k(), A("div", {
+                  key: 1,
+                  class: P(["select-table__selected-item select-table__placeholder", { "is-transparent": e.expanded }])
+                }, [
+                  g("span", null, O(ke.value), 1)
+                ], 2)) : M("", !0)
+              ]),
+              g("div", {
+                class: "select-table__suffix",
+                onClick: l[5] || (l[5] = I(() => {
+                }, ["stop"]))
+              }, [
+                Re.value ? (k(), ne(r, {
+                  key: 0,
+                  ref_key: "clearIconRef",
+                  ref: U,
+                  tabindex: "-1",
+                  onFocus: l[4] || (l[4] = I(() => {
+                  }, ["stop", "prevent"])),
+                  class: "select-table__clear",
+                  onClick: Le
+                }, {
+                  default: x(() => [
+                    R(y(nt))
+                  ]),
+                  _: 1
+                }, 512)) : (k(), ne(r, {
+                  key: 1,
+                  class: P(["select-table__caret", { "is-reverse": e.expanded }])
+                }, {
+                  default: x(() => [
+                    R(y(rt))
+                  ]),
+                  _: 1
+                }, 8, ["class"]))
+              ])
+            ], 2)
+          ]),
+          content: x(() => [
+            g("div", pt, [
+              g("div", {
+                class: "select-table__dropown",
+                style: ae({ width: `${u.popperContentWidth ? u.popperContentWidth + "px" : "100%"}` })
+              }, [
+                R(B, {
+                  loading: _.value,
+                  blur: "",
+                  text: u.loadingText
+                }, {
+                  default: x(() => [
+                    E(t.$slots, "header"),
+                    R(C, Qe({
+                      ref_key: "gridRef",
+                      ref: p
+                    }, _e.value, Xe(Fe), {
+                      data: n.value.gridTableData
+                    }), Ye({
+                      pager: x(() => [
+                        g("div", ft, [
+                          R(b, {
+                            ref_key: "pagerRef",
+                            ref: Te,
+                            "current-page": n.value.currentPage,
+                            "onUpdate:currentPage": l[6] || (l[6] = (s) => n.value.currentPage = s),
+                            "page-size": n.value.pageSize,
+                            "onUpdate:pageSize": l[7] || (l[7] = (s) => n.value.pageSize = s),
+                            total: n.value.total,
+                            onPageChange: Be
+                          }, null, 8, ["current-page", "page-size", "total"])
+                        ])
+                      ]),
+                      _: 2
+                    }, [
+                      oe(Ae.value, (s) => ({
+                        name: s,
+                        fn: x(({ ...L }) => [
+                          E(t.$slots, s, Ze(et(L)))
+                        ])
+                      }))
+                    ]), 1040, ["data"]),
+                    E(t.$slots, "footer")
+                  ]),
+                  _: 3
+                }, 8, ["loading", "text"])
+              ], 4)
+            ])
+          ]),
+          _: 3
+        }, 8, ["visible", "effect", "fallback-placements", "persistent", "show-arrow", "popper-class"])
+      ], 32)), [
+        [Me, ge, ue.value]
+      ]);
+    };
+  }
+});
+export {
+  Tt as default
+};

package/dist/es/fancy-select-table/index.vue2.js

@@ -0,0 +1,4 @@
+import f from "./index.vue.js";
+export {
+  f as default
+};

package/dist/es/fancy-select-table/styles/index.js

@@ -0,0 +1 @@
+import './index.scss'

package/dist/es/fancy-select-table/styles/index.scss

@@ -0,0 +1,155 @@
+.select-table {
+  width: 100%;
+  .select-table__wrapper {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    padding: 4px 12px;
+    box-sizing: border-box;
+    font-size: 14px;
+    border: 1px solid #d9d9d9;
+    // border: var(--el-border);
+    border-radius: var(--el-border-radius-base);
+    background-color: var(--el-fill-color-blank);
+    transition: var(--el-transition-duration);
+    transform: translateZ(0);
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &.is-filterable {
+      cursor: text;
+    }
+    &:not(.is-disabled):hover {
+      border-color: #004aff;
+    }
+    &.is-hovering:not(.is-focused) {
+      // box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
+    }
+    &.is-focused {
+      box-shadow: 0 0 0 2px rgb(204, 219, 255);
+      border-color: #004aff;
+    }
+    &.is-disabled {
+      cursor: not-allowed;
+      // background-color: var(--el-fill-color-light);
+      background: #f5f5f5;
+      color: var(--el-text-color-placeholder);
+      border-color: #e8e8e8;
+      // box-shadow: 0 0 0 1px #e4e7ed inset;
+      box-shadow: none;
+      &:hover {
+        // box-shadow: 0 0 0 1px #e4e7ed inset;
+      }
+    }
+    .select-table__selection {
+      flex: 1;
+      position: relative;
+      min-width: 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+      .select-table__selected-item {
+        user-select: none;
+        color: #606266;
+      }
+      .select-table__input-wrapper {
+        .select-table__input {
+          border: none;
+          outline: none;
+          padding: 0;
+          // color: var(--el-select-multiple-input-color);
+          color: rgba(0, 0, 0, 0.88);
+          appearance: none;
+          height: 24px;
+          max-width: 100%;
+          background-color: transparent;
+        }
+        .select-table__input-calculator {
+          position: absolute;
+          left: 0;
+          top: 0;
+          max-width: 100%;
+          visibility: hidden;
+          white-space: pre;
+          overflow: hidden;
+        }
+      }
+      .is-transparent {
+        color: #a8abb2;
+      }
+      .is-hidden {
+        position: absolute;
+        opacity: 0;
+      }
+      .select-table__placeholder {
+        position: absolute;
+        display: block;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: rgba(0, 0, 0, 0.36);
+      }
+    }
+    .select-table__suffix {
+      color: rgba(0, 0, 0, 0.36);
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      .select-table__clear {
+        cursor: pointer;
+      }
+      .select-table__caret {
+        transition: var(--el-transition-duration);
+        transform: rotate(0);
+        cursor: pointer;
+      }
+      .is-reverse {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+.select-table__popper {
+  border: 1px solid #004aff !important;
+  .select-table__dropown-wrapper {
+    .select-table__dropown {
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+  &.is-light {
+    .el-popper__arrow {
+      &::before {
+        border: 1px solid #004aff !important;
+      }
+    }
+  }
+  &[data-popper-placement^='bottom'] {
+    &.is-light {
+      .el-popper__arrow {
+        &::before {
+          background-color: #e8eefe !important;
+        }
+      }
+    }
+  }
+}
+// body .el-popper.is-light > .el-popper__arrow::before {
+//   border: 1px solid var(--el-border-color-light);
+// }
+
+// .has-header {
+//   &.is-light {
+//     .el-popper__arrow {
+//       &::before {
+//         background-color: #ffffff !important;
+//         box-shadow: none !important;
+//       }
+//     }
+//   }
+// }