easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-transfer.js

@@ -0,0 +1,949 @@
+var wt = Object.defineProperty;
+var bt = (u) => {
+  throw TypeError(u);
+};
+var At = (u, c, t) => c in u ? wt(u, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[c] = t;
+var F = (u, c, t) => At(u, typeof c != "symbol" ? c + "" : c, t), pt = (u, c, t) => c.has(u) || bt("Cannot " + t);
+var e = (u, c, t) => (pt(u, c, "read from private field"), t ? t.call(u) : c.get(u)), r = (u, c, t) => c.has(u) ? bt("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(u) : c.set(u, t), g = (u, c, t, s) => (pt(u, c, "write to private field"), s ? s.call(u, t) : c.set(u, t), t), b = (u, c, t) => (pt(u, c, "access private method"), t);
+import { F as xt } from "../core/FormBase.js";
+import { n as ut } from "./ea-calendar2.js";
+import { i as D } from "../utils/I18nManager.js";
+import { s as Pt, a as Mt } from "../css/ea-transfer.style.js";
+import { B as Dt } from "./Base.js";
+import "./ea-checkbox.js";
+import "./ea-button.js";
+import "./ea-icon.js";
+import "./ea-input.js";
+class mt extends Event {
+  constructor(c) {
+    super("ea-left-check-change", { bubbles: !0, composed: !0 }), this.detail = c;
+  }
+}
+class yt extends Event {
+  constructor(c) {
+    super("ea-right-check-change", { bubbles: !0, composed: !0 }), this.detail = c;
+  }
+}
+var U, k, Y, v, R, B, O, $, N, A, m, x, Z, tt, w, gt, vt, K, et, st, L, at, j, H, X;
+class Kt extends Dt {
+  constructor() {
+    super();
+    r(this, w);
+    /** @type {HTMLElement} */
+    r(this, U);
+    /** @type {HTMLElement} */
+    r(this, k);
+    /** @type {HTMLElement} */
+    r(this, Y);
+    /** @type {HTMLElement} */
+    r(this, v);
+    /** @type {HTMLElement} */
+    r(this, R);
+    /** @type {HTMLElement} */
+    r(this, B);
+    /** @type {HTMLElement} */
+    r(this, O);
+    /** @type {HTMLElement} */
+    r(this, $);
+    /** @type {HTMLSlotElement} */
+    r(this, N);
+    /** @type {AbortController} */
+    r(this, A, new AbortController());
+    r(this, m, {
+      isEaInputDefined: !1,
+      selectedKeys: /* @__PURE__ */ new Set(),
+      filterText: "",
+      filteredData: []
+    });
+    r(this, x, {
+      /** @type {AbortController} */
+      filter: new AbortController()
+    });
+    F(this, "state", this.properties({
+      "data-title": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, R) && (e(this, R).textContent = t || "");
+        }
+      },
+      filterable: {
+        type: Boolean,
+        default: !1,
+        observer: async (t) => {
+          var s;
+          e(this, m).isEaInputDefined || (await customElements.whenDefined("ea-input"), e(this, m).isEaInputDefined = !0), e(this, st).call(this, t), (s = e(this, x).filter) == null || s.abort(), t && (e(this, x).filter = new AbortController(), e(this, $).addEventListener(
+            "input",
+            (a) => {
+              a.stopImmediatePropagation();
+              const i = a.target.value.trim();
+              e(this, L).call(this, i);
+            },
+            {
+              signal: e(this, x).filter.signal
+            }
+          ), e(this, $).addEventListener(
+            "ea-clear",
+            (a) => {
+              a.stopImmediatePropagation(), e(this, L).call(this, "");
+            },
+            {
+              signal: e(this, x).filter.signal
+            }
+          ));
+        }
+      },
+      "filter-placeholder": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          this.filterable && b(this, w, X).call(this, t);
+        }
+      },
+      type: {
+        type: ["source", "target"],
+        default: "source",
+        observer: (t) => {
+        }
+      }
+    }));
+    F(this, "propStates", this.properties({
+      data: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (t) => {
+          e(this, et).call(this, t);
+        }
+      },
+      filterMethod: {
+        props: !0,
+        type: Function,
+        rawFunction: !0,
+        default: null
+      },
+      dataProps: {
+        props: !0,
+        type: Object,
+        default: () => ({
+          key: "key",
+          label: "label",
+          disabled: "disabled"
+        })
+      },
+      dataMap: {
+        props: !0,
+        type: Object,
+        default: () => /* @__PURE__ */ new Map()
+      }
+    }));
+    /**
+     * 处理单个项目选中变化
+     */
+    r(this, Z, (t) => {
+      t.stopImmediatePropagation();
+      const s = t.target.closest(".ea-transfer-panel__item"), a = !!t.target.checked;
+      a ? e(this, m).selectedKeys.add(s) : e(this, m).selectedKeys.delete(s), e(this, j).call(this), this.emit("ea-transfer-panel-select-change", {
+        detail: {
+          type: this.type,
+          selectedKey: s,
+          isChecked: a
+        },
+        bubbles: !0,
+        composed: !0
+      }), e(this, K).call(this);
+    });
+    /**
+     * 处理全选变化
+     */
+    r(this, tt, (t) => {
+      t.stopImmediatePropagation();
+      const s = !!t.target.checked, a = e(this, m).filterText && e(this, m).filterText.trim() !== "", i = b(this, w, gt).call(this, a);
+      t.target.indeterminate = !1, i.forEach((n) => {
+        const d = n.querySelector(
+          ".ea-transfer-panel__item-checkbox:not([disabled])"
+        );
+        d && (d.checked = s, s ? e(this, m).selectedKeys.add(n) : e(this, m).selectedKeys.delete(n));
+      }), this.emit("ea-transfer-panel-select-all", {
+        detail: {
+          type: this.type,
+          selectedKeys: i,
+          isChecked: s,
+          isFiltering: a
+        },
+        bubbles: !0,
+        composed: !0
+      }), e(this, K).call(this);
+    });
+    /**
+     * 更新计数显示
+     */
+    r(this, K, () => {
+      if (!e(this, B)) return;
+      const t = e(this, k).querySelectorAll(
+        ".ea-transfer-panel__item"
+      ).length, s = e(this, m).selectedKeys.size;
+      e(this, B).textContent = `${s}/${t}`;
+    });
+    /**
+     * 处理数据更新
+     * @param {Array} newData
+     */
+    r(this, et, (t) => {
+      this.clearList(), t.forEach((s) => {
+        e(this, k).appendChild(s);
+      }), e(this, H).call(this), t.length === 0 ? (e(this, v).disabled = !0, e(this, v).checked = !1, e(this, v).indeterminate = !1) : e(this, v).disabled = !1;
+    });
+    /**
+     * 处理可筛选状态更新
+     * @param {boolean} filterable
+     */
+    r(this, st, (t) => {
+      e(this, O) && (t ? b(this, w, X).call(this, this["filter-placeholder"]) : e(this, L).call(this, ""), this.updateContainerClasslist());
+    });
+    /**
+     * 处理筛选条件变化
+     * @param {string} filterText
+     */
+    r(this, L, (t) => {
+      e(this, m).filterText = t, e(this, H).call(this), e(this, j).call(this);
+    });
+    /**
+     * 计算全选状态
+     * @returns {{isAllChecked: boolean, isSomeChecked: boolean}}
+     */
+    r(this, at, () => {
+      const t = e(this, m).filterText && e(this, m).filterText.trim() !== "";
+      let s, a;
+      if (t) {
+        const i = e(this, k).querySelectorAll(
+          ".ea-transfer-panel__item:not(.is-disabled):not(.is-filtered-out)"
+        ).length, n = [...e(this, m).selectedKeys].filter(
+          (d) => !d.classList.contains("is-filtered-out")
+        ).length;
+        s = n >= i, a = n > 0;
+      } else {
+        const i = e(this, k).querySelectorAll(
+          ".ea-transfer-panel__item:not(.is-disabled)"
+        ).length;
+        s = e(this, m).selectedKeys.size >= i, a = e(this, m).selectedKeys.size > 0;
+      }
+      return { isAllChecked: s, isSomeChecked: a };
+    });
+    /**
+     * 更新全选状态
+     */
+    r(this, j, () => {
+      if (!e(this, v)) return;
+      const { isAllChecked: t, isSomeChecked: s } = e(this, at).call(this);
+      t ? (e(this, v).checked = !0, e(this, v).indeterminate = !1) : s ? (e(this, v).checked = !1, e(this, v).indeterminate = !0) : (e(this, v).checked = !1, e(this, v).indeterminate = !1);
+    });
+    /**
+     * 执行数据筛选
+     */
+    r(this, H, () => {
+      const { key: t, label: s, disabled: a } = this.dataProps, i = e(this, m).filterText || "", n = i.toLowerCase(), d = [
+        ...e(this, k).querySelectorAll(".ea-transfer-panel__item")
+      ];
+      if (!i) {
+        d.forEach((p) => {
+          p.classList.remove("is-filtered-out");
+        }), e(this, K).call(this);
+        return;
+      }
+      this.filterMethod && typeof this.filterMethod == "function" ? d.forEach((p) => {
+        var S;
+        const y = ((S = this.dataMap) == null ? void 0 : S.get(p)) || {}, C = this.filterMethod(i, y);
+        p.classList.toggle("is-filtered-out", !C);
+      }) : d.forEach((p) => {
+        var _;
+        const S = ((((_ = this.dataMap) == null ? void 0 : _.get(p)) || {})[s] || "").toLowerCase().includes(n);
+        p.classList.toggle("is-filtered-out", !S);
+      }), e(this, K).call(this);
+    });
+    this.stylesheet = Pt, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "data-title",
+      "type",
+      "filterable",
+      "filter-placeholder"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    var a, i;
+    const t = e(this, N).assignedElements()[0], s = this.computedClasslist(
+      "ea-transfer-panel",
+      {},
+      {
+        filterable: this.filterable,
+        "has-footer": ((i = (a = t == null ? void 0 : t.assignedElements) == null ? void 0 : a.call(t)) == null ? void 0 : i.length) > 0
+      }
+    );
+    return e(this, U).className = s, s;
+  }
+  $render() {
+    const t = ut("transfer-panel");
+    this.ns = t, D.locale = this.locale, this.shadowRoot.innerHTML = this.html(`
+      <div class='${t.b()}' part='container'>
+        <div class='${t.e("header")}' part='header'>
+          <ea-checkbox class='${t.e("checkbox")}' part='checkbox'>
+            <span class='${t.e("title")}' part='title'></span>
+          </ea-checkbox>
+          <span class='${t.e("count")}' part='count'></span>
+        </div>
+        <div class='${t.e("body")}' part='body'>
+          <div class='${t.e("filter-wrapper")}' part='filter-wrapper'>
+            <ea-input 
+              class='${t.e("filter")}'
+              placeholder="${D.t("transfer.filterPlaceholder")}"
+              part='filter'
+              prefix-icon="icon-search"
+              clearable
+            ></ea-input>
+          </div>
+          <div class='${t.e("empty")}' part='empty'>
+            <slot name="empty"></slot>
+          </div>
+          <ul class='${t.e("list")}' part='list'></ul>
+          <div class='${t.e("footer")}' part='footer'>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `), g(this, U, this.shadowRoot.querySelector(t.cb())), g(this, Y, this.shadowRoot.querySelector(t.ce("header"))), g(this, v, this.shadowRoot.querySelector(t.ce("checkbox"))), g(this, R, this.shadowRoot.querySelector(t.ce("title"))), g(this, B, this.shadowRoot.querySelector(t.ce("count"))), g(this, k, this.shadowRoot.querySelector(t.ce("list"))), g(this, O, this.shadowRoot.querySelector(
+      t.ce("filter-wrapper")
+    )), g(this, $, this.shadowRoot.querySelector(t.ce("filter"))), g(this, N, this.shadowRoot.querySelector("slot[name='footer']")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback(), b(this, w, vt).call(this), this.updateContainerClasslist();
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = e(this, A)) == null || t.abort();
+    for (const s of Object.values(e(this, x)))
+      s == null || s.abort();
+  }
+  /**
+   * 清空列表项
+   */
+  clearList() {
+    e(this, k).innerHTML = "";
+  }
+  /**
+   * 清空搜索关键词
+   */
+  clearQuery() {
+    e(this, $) && (e(this, $).value = "", e(this, L).call(this, ""));
+  }
+  $updateLocalization(t) {
+    D.locale = t, b(this, w, X).call(this);
+  }
+}
+U = new WeakMap(), k = new WeakMap(), Y = new WeakMap(), v = new WeakMap(), R = new WeakMap(), B = new WeakMap(), O = new WeakMap(), $ = new WeakMap(), N = new WeakMap(), A = new WeakMap(), m = new WeakMap(), x = new WeakMap(), Z = new WeakMap(), tt = new WeakMap(), w = new WeakSet(), /**
+ * 获取可选择的项目列表
+ */
+gt = function(t) {
+  return t ? [
+    ...e(this, k).querySelectorAll(
+      ".ea-transfer-panel__item:not(.is-disabled):not(.is-filtered-out)"
+    )
+  ] : [
+    ...e(this, k).querySelectorAll(
+      ".ea-transfer-panel__item:not(.is-disabled)"
+    )
+  ];
+}, /**
+ * 绑定事件
+ */
+vt = function() {
+  var t;
+  (t = e(this, A)) == null || t.abort(), g(this, A, new AbortController()), e(this, k).addEventListener("change", e(this, Z), {
+    signal: e(this, A).signal
+  }), e(this, v).addEventListener("change", e(this, tt), {
+    signal: e(this, A).signal
+  });
+}, K = new WeakMap(), et = new WeakMap(), st = new WeakMap(), L = new WeakMap(), at = new WeakMap(), j = new WeakMap(), H = new WeakMap(), /**
+ * 更新搜索框占位符
+ * @param {string} newPlaceholder
+ */
+X = function(t) {
+  e(this, $) && (this.hasAttribute("filter-placeholder") || (e(this, $).placeholder = t || D.t("transfer.filterPlaceholder")));
+};
+window.customElements.get("ea-transfer-panel") || window.customElements.define("ea-transfer-panel", Kt);
+var T, h, o, P, M, E, Q, l, it, rt, lt, q, nt, ot, ht, f, V, W, z, kt, Ct, St, $t, G, J, I, dt, ct, Et;
+class Lt extends xt {
+  constructor() {
+    super();
+    r(this, f);
+    /** @type {HTMLElement} */
+    r(this, T);
+    /** @type {HTMLElement} */
+    r(this, h);
+    /** @type {HTMLElement} */
+    r(this, o);
+    /** @type {HTMLElement} */
+    r(this, P);
+    /** @type {HTMLElement} */
+    r(this, M);
+    /** @type {AbortController} */
+    r(this, E, new AbortController());
+    r(this, Q, {});
+    r(this, l, {
+      isPanelDefined: !1,
+      sourceSelectedKeys: /* @__PURE__ */ new Set(),
+      targetSelectedKeys: /* @__PURE__ */ new Set(),
+      dataMap: /* @__PURE__ */ new Map()
+    });
+    F(this, "state", this.properties({
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          this.updateContainerClasslist();
+        }
+      },
+      filterable: {
+        type: Boolean,
+        default: !1,
+        observer: async (t) => {
+          e(this, ot).call(this, t);
+        }
+      },
+      "filter-placeholder": {
+        type: String,
+        default: "请输入搜索内容",
+        observer: async (t) => {
+          e(this, ht).call(this, t);
+        }
+      },
+      required: {
+        type: Boolean,
+        default: !1
+      }
+    }));
+    F(this, "propStates", this.properties({
+      data: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: async (t) => {
+          e(this, l).isPanelDefined || (await customElements.whenDefined("ea-transfer-panel"), e(this, l).isPanelDefined = !0), e(this, rt).call(this, t);
+        }
+      },
+      value: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: async (t) => {
+          e(this, l).isPanelDefined || (await customElements.whenDefined("ea-transfer-panel"), e(this, l).isPanelDefined = !0), e(this, lt).call(this, t), this.setValue(t), this.emit("change", { detail: { value: t } });
+        }
+      },
+      dataProps: {
+        props: !0,
+        type: Object,
+        default: () => ({
+          key: "key",
+          label: "label",
+          disabled: "disabled"
+        }),
+        observer: (t) => {
+          e(this, it).call(this, t);
+        }
+      },
+      titles: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (t) => {
+          e(this, W).call(this, t);
+        }
+      },
+      buttonTexts: {
+        props: !0,
+        type: Array,
+        default: () => [],
+        observer: (t) => {
+          e(this, nt).call(this, t);
+        }
+      },
+      filterMethod: {
+        props: !0,
+        type: Function,
+        rawFunction: !0,
+        default: null,
+        observer: async (t) => {
+          e(this, l).isPanelDefined || (await customElements.whenDefined("ea-transfer-panel"), e(this, l).isPanelDefined = !0);
+        }
+      },
+      leftDefaultChecked: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (t) => {
+        }
+      },
+      rightDefaultChecked: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (t) => {
+        }
+      }
+    }));
+    /**
+     * 更新字段映射
+     * @param {Object} newProps
+     */
+    r(this, it, (t) => {
+      e(this, h) && (e(this, h).dataProps = t), e(this, o) && (e(this, o).dataProps = t);
+    });
+    /**
+     * 处理数据更新
+     * @param {Array} newData
+     */
+    r(this, rt, (t) => {
+      const { key: s } = this.dataProps;
+      if (e(this, h)) {
+        const a = t.filter((i) => {
+          const n = i[s];
+          return !this.value.includes(n);
+        });
+        e(this, h).clearList(), e(this, h).data = e(this, q).call(this, a, this.leftDefaultChecked), e(this, h).selected = this.leftDefaultChecked, e(this, h).originalData = t, e(this, h).dataMap = e(this, l).dataMap, e(this, h).dataProps = this.dataProps;
+      }
+      if (e(this, o)) {
+        const a = t.filter((i) => {
+          const n = i[s];
+          return this.value.includes(n);
+        });
+        e(this, o).clearList(), e(this, o).data = e(this, q).call(this, a, this.rightDefaultChecked), e(this, o).selected = this.rightDefaultChecked, e(this, o).originalData = t, e(this, o).dataMap = e(this, l).dataMap, e(this, o).dataProps = this.dataProps;
+      }
+    });
+    /**
+     * 处理 value 值更新，确保数据一致性
+     * @param {Array} newValue - 新的 value 值
+     */
+    r(this, lt, (t) => {
+      const { key: s } = this.dataProps;
+      if (!(!this.data || this.data.length === 0)) {
+        if (e(this, h)) {
+          const a = this.data.filter((i) => {
+            const n = i[s];
+            return !t.includes(n);
+          });
+          e(this, h).clearList(), e(this, h).data = e(this, q).call(this, a, this.leftDefaultChecked), e(this, h).selected = this.leftDefaultChecked, e(this, h).originalData = this.data, e(this, h).dataMap = e(this, l).dataMap, e(this, h).dataProps = this.dataProps;
+        }
+        if (e(this, o)) {
+          const a = this.data.filter((i) => {
+            const n = i[s];
+            return t.includes(n);
+          }).sort((i, n) => {
+            const d = t.indexOf(i[s]), p = t.indexOf(n[s]);
+            return d - p;
+          });
+          e(this, o).clearList(), e(this, o).data = e(this, q).call(this, a, this.rightDefaultChecked), e(this, o).selected = this.rightDefaultChecked, e(this, o).originalData = this.data, e(this, o).dataMap = e(this, l).dataMap, e(this, o).dataProps = this.dataProps;
+        }
+      }
+    });
+    /**
+     * 创建面板数据
+     * @param {Array} data - 数据数组
+     * @param {Array} defaultChecked - 默认选中项数组
+     * @returns {Array} 列表项数组
+     */
+    r(this, q, (t, s) => {
+      const { key: a, label: i, disabled: n } = this.dataProps, d = ut("transfer-panel");
+      return Array.from({ length: t.length }, (p, y) => {
+        const C = document.createElement("li"), S = t[y], _ = S[n], ft = s.includes(S[a]);
+        return C.className = this.computedClasslist(
+          d.e("item"),
+          {},
+          {
+            disabled: _,
+            checked: ft
+          }
+        ), C.innerHTML = this.html(`
+        <ea-checkbox 
+          class="${d.e("item-checkbox")}"
+          ${_ ? "disabled" : ""}
+          ${ft && !_ ? "checked" : ""}
+          part="item-checkbox"
+        >
+          <span class="${d.e("item-label")}" part="item-label">${S[i]}</span>
+        </ea-checkbox>
+      `), e(this, l).dataMap.set(C, S), C;
+      }).sort((p, y) => {
+        const C = e(this, l).dataMap.get(p)[a], S = e(this, l).dataMap.get(y)[a];
+        return C - S;
+      });
+    });
+    /**
+     * 更新按钮文本
+     * @param {Array} buttonTexts
+     */
+    r(this, nt, (t) => {
+      if (Array.isArray(t) && t.length >= 2) {
+        const [s, a] = t;
+        if (e(this, P)) {
+          const i = e(this, P).querySelector(
+            ".ea-transfer__button-text"
+          );
+          i && (i.textContent = s, i.style.display = "inline");
+        }
+        if (e(this, M)) {
+          const i = e(this, M).querySelector(
+            ".ea-transfer__button-text"
+          );
+          i && (i.textContent = a, i.style.display = "inline");
+        }
+      }
+    });
+    /**
+     * 处理可过滤更新
+     * @param {boolean} filterable
+     */
+    r(this, ot, (t) => {
+      this.filterable && (e(this, h) && e(this, h).toggleAttribute("filterable", t), e(this, o) && e(this, o).toggleAttribute("filterable", t));
+    });
+    /**
+     * 更新过滤占位符
+     * @param {string} placeholder
+     */
+    r(this, ht, (t) => {
+      this.filterable && (e(this, h) && e(this, h).setAttribute("filter-placeholder", t), e(this, o) && e(this, o).setAttribute("filter-placeholder", t));
+    });
+    /**
+     * 更新标题
+     * @param {Array} titles
+     */
+    r(this, W, (t) => {
+      if (Array.isArray(t) && t.length >= 2) {
+        const [s, a] = t;
+        e(this, h) && e(this, h).setAttribute("data-title", s), e(this, o) && e(this, o).setAttribute("data-title", a);
+      }
+    });
+    /**
+     * 获取可移动的选中项
+     * @param {NodeList} selectedKeys 选中项
+     * @param {string} disabledField 禁用字段
+     * @returns {NodeList} 可移动的选中项
+     */
+    r(this, G, (t, s) => t.filter((a) => {
+      const i = e(this, l).dataMap.get(a);
+      return !i || !i[s];
+    }));
+    /**
+     * 处理可移动的选中项
+     * @param {NodeList} movableKeys 可移动的选中项
+     */
+    r(this, J, (t) => {
+      t.forEach((s) => {
+        const a = s.querySelector(".ea-transfer-panel__item-checkbox");
+        a.checked = !1, a.dispatchEvent(
+          new CustomEvent("change", {
+            bubbles: !0,
+            composed: !0,
+            detail: {
+              checkbox: !1
+            }
+          })
+        ), e(this, l).sourceSelectedKeys.delete(s);
+      });
+    });
+    /**
+     * 处理面板数据排序
+     * @param {string} keyField 排序字段
+     * @returns {function} 排序函数
+     */
+    r(this, I, (t) => (s, a) => {
+      const i = e(this, l).dataMap.get(s), n = e(this, l).dataMap.get(a);
+      return i[t] - n[t] || 0;
+    });
+    /**
+     * 处理向右移动
+     * @param {Event} e 事件对象
+     */
+    r(this, dt, (t) => {
+      t.stopImmediatePropagation();
+      const { key: s, label: a, disabled: i } = this.dataProps, n = [...e(this, l).sourceSelectedKeys], d = e(this, G).call(this, n, i);
+      e(this, J).call(this, d), e(this, o).data = [
+        ...new Set(
+          [...e(this, o).data, ...d].sort(
+            e(this, I).call(this, s)
+          )
+        )
+      ], e(this, h).data = e(this, h).data.filter((y) => !d.includes(y)).sort(e(this, I).call(this, s));
+      const p = e(this, o).data.map((y) => e(this, l).dataMap.get(y)[s]);
+      this.value = p, b(this, f, z).call(this);
+    });
+    /**
+     * 处理向左移动
+     * @param {Event} e 事件对象
+     */
+    r(this, ct, (t) => {
+      t.stopImmediatePropagation();
+      const { key: s, label: a, disabled: i } = this.dataProps, n = [...e(this, l).targetSelectedKeys], d = e(this, G).call(this, n, i);
+      e(this, J).call(this, d), e(this, h).data = [
+        ...new Set(
+          [...e(this, h).data, ...d].sort(
+            e(this, I).call(this, s)
+          )
+        )
+      ], e(this, o).data = e(this, o).data.filter((y) => !d.includes(y)).sort(e(this, I).call(this, s));
+      const p = e(this, o).data.map((y) => e(this, l).dataMap.get(y)[s]);
+      this.value = p, b(this, f, z).call(this);
+    });
+    this.stylesheet = Mt, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "disabled",
+      "filterable",
+      "filter-placeholder",
+      "required"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-transfer",
+      {},
+      {
+        disabled: this.disabled
+      }
+    );
+    return e(this, T).className = t, t;
+  }
+  $render() {
+    const t = ut("transfer");
+    this.ns = t, D.locale = this.locale, this.shadowRoot.innerHTML = this.html(`
+      <div class='${t.b()}' part='container'>
+        <ea-transfer-panel 
+          class='${t.e("panel")} ${t.m("panel", "source")}' 
+          part='panel source-panel'
+          type="source"
+          data-title="${b(this, f, V).call(this, "source")}"
+          filter-placeholder="${this["filter-placeholder"]}"
+        >
+          <slot name="left-empty" slot="empty"></slot>
+          <slot name="left-footer" slot="footer"></slot>
+        </ea-transfer-panel>
+
+        <div class='${t.e("buttons")}' part='buttons'>
+          <ea-button 
+            class='${t.e("button")} ${t.e("move-to-right-btn")}' 
+            part='button move-to-right-btn'
+            type="primary" 
+            size="small" 
+            disabled
+          >
+            <ea-icon icon="icon-angle-right"></ea-icon>
+            <span class="${t.e("button-text")}"></span>
+          </ea-button>
+          <ea-button 
+            class='${t.e("button")} ${t.e("move-to-left-btn")}' 
+            part='button move-to-left-btn'
+            type="primary" 
+            size="small" 
+            disabled
+          >
+            <ea-icon icon="icon-angle-left"></ea-icon>
+            <span class="${t.e("button-text")}"></span>
+          </ea-button>
+        </div>
+
+        <ea-transfer-panel 
+          class='${t.e("panel")} ${t.m("panel", "target")}' 
+          part='panel target-panel'
+          type="target"
+          data-title="${b(this, f, V).call(this, "target")}"
+          filter-placeholder="${this["filter-placeholder"]}"
+        >
+          <slot name="right-empty" slot="empty"></slot>
+          <slot name="right-footer" slot="footer"></slot>
+        </ea-transfer-panel>
+      </div>
+    `), g(this, T, this.shadowRoot.querySelector(t.cb())), g(this, h, this.shadowRoot.querySelector(
+      `${t.ce("panel")}${t.cm("source")}`
+    )), g(this, o, this.shadowRoot.querySelector(
+      `${t.ce("panel")}${t.cm("target")}`
+    )), g(this, P, this.shadowRoot.querySelector(
+      `${t.ce("button")}${t.ce("move-to-right-btn")}`
+    )), g(this, M, this.shadowRoot.querySelector(
+      `${t.ce("button")}${t.ce("move-to-left-btn")}`
+    ));
+  }
+  $updateLocalization(t) {
+    this.locale = t, D.locale = t, (!this.titles || this.titles.length === 0) && e(this, W).call(this, [
+      b(this, f, V).call(this, "source"),
+      b(this, f, V).call(this, "target")
+    ]);
+  }
+  connectedCallback() {
+    super.connectedCallback(), b(this, f, Et).call(this);
+  }
+  $beforeUnmounted() {
+    var t, s;
+    (t = e(this, E)) == null || t.abort();
+    for (const a in e(this, Q))
+      (s = e(this, Q)[a]) == null || s.abort();
+  }
+  /**
+   * 清空指定面板的搜索关键词
+   * @param {'left' | 'right'} which - 面板类型
+   */
+  clearQuery(t) {
+    t === "left" && e(this, h) ? e(this, h).clearQuery() : t === "right" && e(this, o) && e(this, o).clearQuery();
+  }
+  /**
+   * 获取验证目标元素
+   * @returns {HTMLElement}
+   */
+  get validationTarget() {
+    return this;
+  }
+  /**
+   * 更新表单验证状态
+   */
+  updateValidity() {
+    const t = this.value, s = !t || Array.isArray(t) && t.length === 0;
+    this.required && s ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请至少选择一项",
+      this
+    ) : this.internals.setValidity({}, "", this);
+  }
+  /**
+   * 检查表单字段的有效性
+   * @returns {boolean} 如果字段有效返回 true，否则返回 false
+   */
+  checkValidity() {
+    return this.updateValidity(), this.internals.checkValidity();
+  }
+  /**
+   * 报告表单字段的有效性（显示验证提示）
+   * @returns {boolean} 如果字段有效返回 true，否则返回 false
+   */
+  reportValidity() {
+    return this.updateValidity(), this.internals.reportValidity();
+  }
+}
+T = new WeakMap(), h = new WeakMap(), o = new WeakMap(), P = new WeakMap(), M = new WeakMap(), E = new WeakMap(), Q = new WeakMap(), l = new WeakMap(), it = new WeakMap(), rt = new WeakMap(), lt = new WeakMap(), q = new WeakMap(), nt = new WeakMap(), ot = new WeakMap(), ht = new WeakMap(), f = new WeakSet(), /**
+ * 获取默认标题
+ * @param {"source" | "target"} type - 面板类型
+ * @returns {string} 默认标题
+ */
+V = function(t) {
+  return t === "source" ? D.t("transfer.list1") : D.t("transfer.list2");
+}, W = new WeakMap(), /**
+ * 更新按钮状态
+ */
+z = function() {
+  e(this, P).disabled = e(this, l).sourceSelectedKeys.size === 0, e(this, M).disabled = e(this, l).targetSelectedKeys.size === 0;
+}, /**
+ * 触发check-change事件
+ * @param {string} type 面板类型
+ * @param {Node} selectedKey 选中项
+ */
+kt = function(t, s) {
+  const a = [...e(this, l)[`${t}SelectedKeys`]], { key: i } = this.dataProps, d = {
+    value: a.map((p) => {
+      const y = e(this, l).dataMap.get(p);
+      return y ? y[i] : null;
+    }).filter(Boolean),
+    movedKeys: [e(this, l).dataMap.get(s)[i]]
+  };
+  if (t === "source") {
+    const p = new mt(d);
+    this.dispatchEvent(p);
+  } else if (t === "target") {
+    const p = new yt(d);
+    this.dispatchEvent(p);
+  }
+}, /**
+ * 触发check-all-change事件
+ * @param {string} type 面板类型
+ * @param {NodeList} selectedKeys 选中项
+ */
+Ct = function(t, s) {
+  const { key: a } = this.dataProps, i = s.map((d) => {
+    const p = e(this, l).dataMap.get(d);
+    return p ? p[a] : null;
+  }).filter(Boolean), n = [...e(this, l)[`${t}SelectedKeys`]].map((d) => {
+    const p = e(this, l).dataMap.get(d);
+    return p ? p[a] : null;
+  }).filter(Boolean);
+  t === "source" ? this.dispatchEvent(
+    new mt({
+      value: n,
+      movedKeys: i
+    })
+  ) : t === "target" && this.dispatchEvent(
+    new yt({
+      value: n,
+      movedKeys: i
+    })
+  );
+}, /**
+ * 处理选中项变化
+ * @param {string} type 面板类型
+ * @param {NodeList} selectedKey 选中项
+ * @param {boolean} isChecked 是否选中
+ */
+St = function(t, s, a) {
+  a ? e(this, l)[`${t}SelectedKeys`].add(s) : e(this, l)[`${t}SelectedKeys`].delete(s), b(this, f, z).call(this), b(this, f, kt).call(this, t, s);
+}, /**
+ * 处理全选变化
+ * @param {string} type 面板类型
+ * @param {NodeList} selectedKeys 选中项
+ * @param {boolean} isChecked 是否选中
+ */
+$t = function(t, s, a) {
+  a ? s.forEach((i) => e(this, l)[`${t}SelectedKeys`].add(i)) : s.forEach(
+    (i) => e(this, l)[`${t}SelectedKeys`].delete(i)
+  ), b(this, f, z).call(this), b(this, f, Ct).call(this, t, s);
+}, G = new WeakMap(), J = new WeakMap(), I = new WeakMap(), dt = new WeakMap(), ct = new WeakMap(), /**
+ * 绑定事件
+ */
+Et = function() {
+  var t;
+  (t = e(this, E)) == null || t.abort(), g(this, E, new AbortController()), e(this, T).addEventListener(
+    "ea-transfer-panel-select-change",
+    (s) => {
+      s.stopImmediatePropagation();
+      const { type: a, selectedKey: i, isChecked: n } = s.detail;
+      b(this, f, St).call(this, a, i, n);
+    },
+    {
+      signal: e(this, E).signal
+    }
+  ), e(this, T).addEventListener(
+    "ea-transfer-panel-select-all",
+    (s) => {
+      s.stopImmediatePropagation();
+      const { type: a, selectedKeys: i, isChecked: n } = s.detail;
+      b(this, f, $t).call(this, a, i, n);
+    },
+    {
+      signal: e(this, E).signal
+    }
+  ), e(this, P).addEventListener("click", e(this, dt), {
+    signal: e(this, E).signal
+  }), e(this, M).addEventListener("click", e(this, ct), {
+    signal: e(this, E).signal
+  });
+};
+customElements.get("ea-transfer") || customElements.define("ea-transfer", Lt);
+export {
+  Lt as EaTransfer
+};