easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-transfer.js

@@ -1,949 +1,984 @@
-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 { a as K } from "../core/EaFormAssociatedBase.ts.js";
+import { E as T } from "../core/EaBase.ts.js";
+import { q as _, a as y, p as f, l as P, C as D } from "../core/decorator.js";
+import { i as g } from "../utils/I18nManager.ts.js";
+import { E as L } from "../utils/Enum.ts.js";
 import "./ea-checkbox.js";
+import "./ea-input.js";
+import { s as B, a as F } from "../css/ea-transfer.style.js";
+import { c as $ } from "../utils/bem.ts.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 A extends Event {
+  constructor(e) {
+    super("ea-left-check-change", { bubbles: !0, composed: !0 }), this.detail = e;
   }
 }
-class yt extends Event {
-  constructor(c) {
-    super("ea-right-check-change", { bubbles: !0, composed: !0 }), this.detail = c;
+class x extends Event {
+  constructor(e) {
+    super("ea-right-check-change", { bubbles: !0, composed: !0 }), this.detail = e;
   }
 }
-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 {
+var w = Object.defineProperty, q = Object.getOwnPropertyDescriptor, d = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? q(e, i) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && w(e, i, a), a;
+};
+const E = "ea-transfer-panel", r = $(E);
+let h = class extends T {
   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, {
+    super(...arguments), this._uniqueId = h._idCounter++, this._states = {
       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"
-    ];
+      filterText: ""
+    }, this.disabled = !1, this.dataTitle = "", this.type = "source", this.filterable = !1, this.filterPlaceholder = "", this.data = [], this.filterMethod = null, this.dataProps = {
+      key: "key",
+      label: "label",
+      disabled: "disabled"
+    }, this.dataMap = /* @__PURE__ */ new Map();
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    var a, i;
-    const t = e(this, N).assignedElements()[0], s = this.computedClasslist(
-      "ea-transfer-panel",
+    var s, a, l, n, p;
+    const t = (l = (a = (s = this._footerSlot) == null ? void 0 : s.assignedElements) == null ? void 0 : a.call(s)) == null ? void 0 : l[0], e = ((p = (n = t == null ? void 0 : t.assignedElements) == null ? void 0 : n.call(t)) == null ? void 0 : p.length) > 0, i = r(
       {},
       {
         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
+        "has-footer": e,
+        disabled: this.disabled
       }
     );
-    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>
+    return this._container && (this._container.className = i), i;
+  }
+  html() {
+    g.locale = this.locale;
+    const t = `ea-transfer-panel-title-${this._uniqueId}`;
+    return `
+      <div class='${r()}' part='container'>
+        <div class='${r.e("header")}' part='header'>
+          <ea-checkbox class='${r.e("checkbox")}' part='checkbox'>
+            <span class='${r.e("title")}' part='title' id='${t}'></span>
           </ea-checkbox>
-          <span class='${t.e("count")}' part='count'></span>
+          <span class='${r.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")}"
+        <div class='${r.e("body")}' part='body'>
+          <div class='${r.e("filter-wrapper")}' part='filter-wrapper'>
+            <ea-input
+              class='${r.e("filter")}'
+              placeholder="${g.t("transfer.filterPlaceholder")}"
               part='filter'
-              prefix-icon="icon-search"
+              prefix-icon="magnifying-glass"
               clearable
             ></ea-input>
           </div>
-          <div class='${t.e("empty")}' part='empty'>
+          <ul class='${r.e("list")}' part='list' role='listbox' tabindex='0' aria-labelledby='${t}' aria-multiselectable='true' aria-activedescendant=''></ul>
+          <div class='${r.e("empty")}' part='empty'>
             <slot name="empty"></slot>
           </div>
-          <ul class='${t.e("list")}' part='list'></ul>
-          <div class='${t.e("footer")}' part='footer'>
+          <div class='${r.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();
+  $updateLocalization(t) {
+    this.locale = t, g.locale = t, this._updateFilterPlaceholder();
   }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, A)) == null || t.abort();
-    for (const s of Object.values(e(this, x)))
-      s == null || s.abort();
+  $mount() {
+    this.updateContainerClasslist(), this._bindEvents();
   }
-  /**
-   * 清空列表项
-   */
+  $beforeUnmount() {
+    var t, e;
+    (t = this._abortController) == null || t.abort(), (e = this._filterAbortController) == null || e.abort();
+  }
+  /** 清空列表项 */
   clearList() {
-    e(this, k).innerHTML = "";
+    this._list && (this._list.innerHTML = "");
   }
-  /**
-   * 清空搜索关键词
-   */
+  /** 清空搜索关键词并重置过滤 */
   clearQuery() {
-    e(this, $) && (e(this, $).value = "", e(this, L).call(this, ""));
+    this._filterInput && (this._filterInput.value = "", this._handleFilterChange(""));
   }
-  $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);
-        }
+  /** 处理列表项选中变化 */
+  _handleItemChange(t) {
+    if (t.stopImmediatePropagation(), this.disabled) return;
+    const e = t.target.closest(
+      `.${r.e("item")}`
+    );
+    if (!e) return;
+    const i = !!t.target.checked;
+    i ? this._states.selectedKeys.add(e) : this._states.selectedKeys.delete(e), e.setAttribute("aria-selected", String(i)), this._updateSelectAllState(), this.emit("ea-transfer-panel-select-change", {
+      detail: {
+        type: this.type,
+        selectedKey: e,
+        isChecked: i
       },
-      required: {
-        type: Boolean,
-        default: !1
+      bubbles: !0,
+      composed: !0
+    }), this._updateCount();
+  }
+  _handleListKeydown(t) {
+    if (this.disabled) return;
+    const e = this._getVisibleItems();
+    if (e.length === 0) return;
+    const i = this._list.getAttribute("aria-activedescendant") || "", s = e.findIndex((a) => a.id === i);
+    switch (t.key) {
+      case "ArrowDown": {
+        t.preventDefault();
+        const a = s < e.length - 1 ? s + 1 : 0;
+        this._setActiveDescendant(e[a]);
+        break;
       }
-    }));
-    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) => {
-        }
+      case "ArrowUp": {
+        t.preventDefault();
+        const a = s > 0 ? s - 1 : e.length - 1;
+        this._setActiveDescendant(e[a]);
+        break;
       }
-    }));
-    /**
-     * 更新字段映射
-     * @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;
+      case "Home": {
+        t.preventDefault(), this._setActiveDescendant(e[0]);
+        break;
       }
-      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;
+      case "End": {
+        t.preventDefault(), this._setActiveDescendant(e[e.length - 1]);
+        break;
       }
-    });
-    /**
-     * 处理 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;
-        }
+      case " ": {
+        t.preventDefault(), s >= 0 && this._toggleItemSelection(e[s]);
+        break;
       }
-    });
-    /**
-     * 创建面板数据
-     * @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;
+    }
+  }
+  _handleListFocus() {
+    if (this._list.getAttribute("aria-activedescendant")) return;
+    const e = this._getVisibleItems();
+    if (e.length === 0) return;
+    const i = e.find(
+      (s) => s.getAttribute("aria-selected") === "true"
+    );
+    this._setActiveDescendant(i || e[0]);
+  }
+  _handleListBlur() {
+    const t = this._list.getAttribute("aria-activedescendant");
+    if (t) {
+      const e = this._list.querySelector(`#${t}`);
+      e && e.classList.remove("is-active");
+    }
+  }
+  /** 设置 aria-activedescendant 指向的当前活动选项 */
+  _setActiveDescendant(t) {
+    const e = this._list.getAttribute("aria-activedescendant");
+    if (e) {
+      const i = this._list.querySelector(`#${e}`);
+      i && i.classList.remove("is-active");
+    }
+    this._list.setAttribute("aria-activedescendant", t.id), t.classList.add("is-active"), t.scrollIntoView({ block: "nearest" });
+  }
+  /** 切换列表项的选中状态 */
+  _toggleItemSelection(t) {
+    const e = t.querySelector(
+      `.${r.e("item-checkbox")}:not([disabled])`
+    );
+    e && (e.checked = !e.checked, e.dispatchEvent(
+      new CustomEvent("change", { bubbles: !0, composed: !0 })
+    ));
+  }
+  /** 获取当前可见且可交互的列表项 */
+  _getVisibleItems() {
+    return [
+      ...this._list.querySelectorAll(
+        `.${r.e("item")}:not(.is-disabled):not(.is-filtered-out)`
+      )
+    ];
+  }
+  /** 处理全选复选框变化 */
+  _handleSelectAllChange(t) {
+    if (t.stopImmediatePropagation(), this.disabled) return;
+    const e = !!t.target.checked, i = !!(this._states.filterText && this._states.filterText.trim() !== ""), s = this._getSelectableItems(i);
+    t.target.indeterminate = !1, s.forEach((a) => {
+      const l = a.querySelector(
+        `.${r.e("item-checkbox")}:not([disabled])`
+      );
+      l && (l.checked = e, e ? this._states.selectedKeys.add(a) : this._states.selectedKeys.delete(a), a.setAttribute("aria-selected", String(e)));
+    }), this.emit("ea-transfer-panel-select-all", {
+      detail: {
+        type: this.type,
+        selectedKeys: s,
+        isChecked: e,
+        isFiltering: i
+      },
+      bubbles: !0,
+      composed: !0
+    }), this._updateCount();
+  }
+  /** 获取当前可选择的列表项 */
+  _getSelectableItems(t) {
+    return t ? [
+      ...this._list.querySelectorAll(
+        `.${r.e("item")}:not(.is-disabled):not(.is-filtered-out)`
+      )
+    ] : [
+      ...this._list.querySelectorAll(`.${r.e("item")}:not(.is-disabled)`)
+    ];
+  }
+  /** 绑定列表和全选复选框事件 */
+  _bindEvents() {
+    var t;
+    (t = this._abortController) == null || t.abort(), this._abortController = new AbortController(), this._list.addEventListener("change", (e) => this._handleItemChange(e), {
+      signal: this._abortController.signal
+    }), this._checkbox.addEventListener(
+      "change",
+      (e) => this._handleSelectAllChange(e),
+      {
+        signal: this._abortController.signal
+      }
+    );
+  }
+  /** 更新选中计数显示 */
+  _updateCount() {
+    if (!this._count) return;
+    const t = this._list.querySelectorAll(`.${r.e("item")}`).length, e = this._states.selectedKeys.size;
+    this._count.textContent = `${e}/${t}`;
+  }
+  /** 处理数据更新，重新渲染列表 */
+  _handleDataUpdate(t) {
+    this.clearList();
+    const e = new Set(t);
+    for (const i of this._states.selectedKeys)
+      e.has(i) || this._states.selectedKeys.delete(i);
+    t.forEach((i) => {
+      this._list.appendChild(i);
+    }), this._removeCheckboxFromTabSequence(), this._filterData(), t.length === 0 ? (this._checkbox.disabled = !0, this._checkbox.checked = !1, this._checkbox.indeterminate = !1) : this._checkbox.disabled = !1, this._updateCount(), this._updateSelectAllState();
+  }
+  /** 将列表项内 checkbox 从 Tab 序列中移除，由 listbox 统一管理焦点 */
+  _removeCheckboxFromTabSequence() {
+    requestAnimationFrame(() => {
+      this._list.querySelectorAll(
+        `.${r.e("item-checkbox")}`
+      ).forEach((e) => {
+        e.tabIndex = -1;
       });
     });
-    /**
-     * 更新按钮文本
-     * @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");
-        }
+  }
+  /** 处理 filterable 属性内部更新 */
+  _handleFilterableUpdateInternal(t) {
+    var e;
+    this._filterWrapper && (t ? (this._updateFilterPlaceholder(this.filterPlaceholder), this._bindFilterEvents()) : ((e = this._filterAbortController) == null || e.abort(), this._handleFilterChange("")), this.updateContainerClasslist());
+  }
+  /** 处理 disabled 属性更新 */
+  _handleDisabledUpdate() {
+    this._checkbox && (this._checkbox.disabled = this.disabled), this._filterInput && (this._filterInput.disabled = this.disabled);
+  }
+  /** 绑定搜索框输入和清除事件 */
+  _bindFilterEvents() {
+    var t;
+    (t = this._filterAbortController) == null || t.abort(), this._filterAbortController = new AbortController(), this._filterInput && (this._filterInput.addEventListener(
+      "input",
+      (e) => {
+        e.stopImmediatePropagation();
+        const i = e.target.value.trim();
+        this._handleFilterChange(i);
+      },
+      {
+        signal: this._filterAbortController.signal
       }
-    });
-    /**
-     * 处理可过滤更新
-     * @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);
+    ), this._filterInput.addEventListener(
+      "ea-clear",
+      (e) => {
+        e.stopImmediatePropagation(), this._handleFilterChange("");
+      },
+      {
+        signal: this._filterAbortController.signal
       }
-    });
-    /**
-     * 获取可移动的选中项
-     * @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"
+  /** 处理搜索关键词变化 */
+  _handleFilterChange(t) {
+    this._states.filterText = t, this._filterData(), this._updateSelectAllState();
+  }
+  /** 计算全选复选框状态 */
+  _calculateSelectAllState() {
+    const t = this._states.filterText && this._states.filterText.trim() !== "";
+    let e, i;
+    if (t) {
+      const s = this._list.querySelectorAll(
+        `.${r.e("item")}:not(.is-disabled):not(.is-filtered-out)`
+      ).length, a = [...this._states.selectedKeys].filter(
+        (l) => !l.classList.contains("is-filtered-out")
+      ).length;
+      e = s > 0 && a >= s, i = a > 0;
+    } else {
+      const s = this._list.querySelectorAll(
+        `.${r.e("item")}:not(.is-disabled)`
+      ).length;
+      e = s > 0 && this._states.selectedKeys.size >= s, i = this._states.selectedKeys.size > 0;
+    }
+    return { isAllChecked: e, isSomeChecked: i };
+  }
+  /** 更新全选复选框的选中/半选状态 */
+  _updateSelectAllState() {
+    if (!this._checkbox) return;
+    const { isAllChecked: t, isSomeChecked: e } = this._calculateSelectAllState();
+    t ? (this._checkbox.checked = !0, this._checkbox.indeterminate = !1) : e ? (this._checkbox.checked = !1, this._checkbox.indeterminate = !0) : (this._checkbox.checked = !1, this._checkbox.indeterminate = !1);
+  }
+  /** 根据搜索关键词过滤列表项 */
+  _filterData() {
+    const { label: t } = this.dataProps, e = this._states.filterText || "", i = e.toLowerCase(), s = [
+      ...this._list.querySelectorAll(`.${r.e("item")}`)
     ];
+    if (!e) {
+      s.forEach((a) => {
+        a.classList.remove("is-filtered-out");
+      }), this._updateCount();
+      return;
+    }
+    this.filterMethod && typeof this.filterMethod == "function" ? s.forEach((a) => {
+      var p;
+      const l = ((p = this.dataMap) == null ? void 0 : p.get(a)) || {}, n = this.filterMethod(e, l);
+      a.classList.toggle("is-filtered-out", !n);
+    }) : s.forEach((a) => {
+      var m;
+      const p = ((((m = this.dataMap) == null ? void 0 : m.get(a)) || {})[t] || "").toLowerCase().includes(i);
+      a.classList.toggle("is-filtered-out", !p);
+    }), this._updateCount();
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-transfer",
-      {},
-      {
-        disabled: this.disabled
+  /** 更新搜索框占位符文本 */
+  _updateFilterPlaceholder(t) {
+    this._filterInput && (this.hasAttribute("filter-placeholder") || (this._filterInput.placeholder = t || g.t("transfer.filterPlaceholder")));
+  }
+};
+h._idCounter = 0;
+d([
+  _(r.cb())
+], h.prototype, "_container", 2);
+d([
+  _(r.ce("checkbox"))
+], h.prototype, "_checkbox", 2);
+d([
+  _(r.ce("title"))
+], h.prototype, "_title", 2);
+d([
+  _(r.ce("count"))
+], h.prototype, "_count", 2);
+d([
+  _(r.ce("list"))
+], h.prototype, "_list", 2);
+d([
+  _(r.ce("filter-wrapper"))
+], h.prototype, "_filterWrapper", 2);
+d([
+  _(r.ce("filter"))
+], h.prototype, "_filterInput", 2);
+d([
+  _("slot[name='footer']")
+], h.prototype, "_footerSlot", 2);
+d([
+  y({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._handleDisabledUpdate();
+    }
+  })
+], h.prototype, "disabled", 2);
+d([
+  y({
+    type: String,
+    default: "",
+    observer(t) {
+      this._title && (this._title.textContent = t || "");
+    }
+  })
+], h.prototype, "dataTitle", 2);
+d([
+  y({
+    type: L(["source", "target"]),
+    default: "source"
+  })
+], h.prototype, "type", 2);
+d([
+  y({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      if (!this._states.isEaInputDefined) {
+        customElements.whenDefined("ea-input").then(() => {
+          this._states.isEaInputDefined = !0, this._handleFilterableUpdateInternal(t);
+        });
+        return;
       }
-    );
-    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")}' 
+      this._handleFilterableUpdateInternal(t);
+    }
+  })
+], h.prototype, "filterable", 2);
+d([
+  y({
+    type: String,
+    default: "",
+    observer(t) {
+      this.filterable && this._updateFilterPlaceholder(t);
+    }
+  })
+], h.prototype, "filterPlaceholder", 2);
+d([
+  f({
+    type: Array,
+    default: [],
+    observer(t) {
+      this._handleDataUpdate(t);
+    }
+  })
+], h.prototype, "data", 2);
+d([
+  f({
+    type: Function,
+    default: null,
+    rawFunction: !0
+  })
+], h.prototype, "filterMethod", 2);
+d([
+  f({
+    type: Object,
+    default: { key: "key", label: "label", disabled: "disabled" }
+  })
+], h.prototype, "dataProps", 2);
+d([
+  f({
+    type: Object,
+    default: /* @__PURE__ */ new Map()
+  })
+], h.prototype, "dataMap", 2);
+d([
+  P("keydown", r.ce("list"))
+], h.prototype, "_handleListKeydown", 1);
+d([
+  P("focus", r.ce("list"))
+], h.prototype, "_handleListFocus", 1);
+d([
+  P("blur", r.ce("list"))
+], h.prototype, "_handleListBlur", 1);
+h = d([
+  D(E, { styles: [B] })
+], h);
+var U = Object.defineProperty, O = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? O(e, i) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && U(e, i, a), a;
+};
+const I = "ea-transfer", o = $(I);
+let c = class extends K {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.filterable = !1, this.filterPlaceholder = "请输入搜索内容", this.data = [], this.value = [], this.dataProps = {
+      key: "key",
+      label: "label",
+      disabled: "disabled"
+    }, this.titles = [], this.buttonTexts = [], this.filterMethod = null, this.leftDefaultChecked = [], this.rightDefaultChecked = [], this._states = {
+      isPanelDefined: !1,
+      sourceSelectedKeys: /* @__PURE__ */ new Set(),
+      targetSelectedKeys: /* @__PURE__ */ new Set(),
+      dataMap: /* @__PURE__ */ new Map()
+    };
+  }
+  updateContainerClasslist() {
+    const t = o({}, { disabled: this.disabled });
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    return g.locale = this.locale, `
+      <div class='${o()}' part='container' role='group' aria-label='Transfer'>
+        <ea-transfer-panel
+          class='${o.e("panel")} ${o.e("panel")}--source'
           part='panel source-panel'
           type="source"
-          data-title="${b(this, f, V).call(this, "source")}"
-          filter-placeholder="${this["filter-placeholder"]}"
+          data-title="${this._getDefaultTitle("source")}"
+          filter-placeholder="${this.filterPlaceholder}"
         >
           <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")}' 
+        <div class='${o.e("buttons")}' part='buttons'>
+          <ea-button
+            class='${o.e("button")} ${o.e("move-to-right-btn")}'
             part='button move-to-right-btn'
-            type="primary" 
-            size="small" 
+            variant="primary"
+            size="small"
             disabled
           >
             <ea-icon name="angle-right"></ea-icon>
-            <span class="${t.e("button-text")}"></span>
+            <span class="${o.e("button-text")}"></span>
           </ea-button>
-          <ea-button 
-            class='${t.e("button")} ${t.e("move-to-left-btn")}' 
+          <ea-button
+            class='${o.e("button")} ${o.e("move-to-left-btn")}'
             part='button move-to-left-btn'
-            type="primary" 
-            size="small" 
+            variant="primary"
+            size="small"
             disabled
           >
             <ea-icon name="angle-left"></ea-icon>
-            <span class="${t.e("button-text")}"></span>
+            <span class="${o.e("button-text")}"></span>
           </ea-button>
         </div>
 
-        <ea-transfer-panel 
-          class='${t.e("panel")} ${t.m("panel", "target")}' 
+        <ea-transfer-panel
+          class='${o.e("panel")} ${o.e("panel")}--target'
           part='panel target-panel'
           type="target"
-          data-title="${b(this, f, V).call(this, "target")}"
-          filter-placeholder="${this["filter-placeholder"]}"
+          data-title="${this._getDefaultTitle("target")}"
+          filter-placeholder="${this.filterPlaceholder}"
         >
           <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")
+    this.locale = t, g.locale = t, (!this.titles || this.titles.length === 0) && this._updateTitles([
+      this._getDefaultTitle("source"),
+      this._getDefaultTitle("target")
     ]);
   }
-  connectedCallback() {
-    super.connectedCallback(), b(this, f, Et).call(this);
+  $mount() {
+    this.updateContainerClasslist(), this._bindEvents();
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._abortController) == null || t.abort();
+  }
+  /** 处理 disabled 属性更新，同步到子面板 */
+  _handleDisabledUpdate() {
+    this._sourcePanel && this._sourcePanel.toggleAttribute("disabled", this.disabled), this._targetPanel && this._targetPanel.toggleAttribute("disabled", this.disabled);
+  }
+  /** 更新字段映射配置到子面板 */
+  _updateFieldMapping(t) {
+    this._sourcePanel && (this._sourcePanel.dataProps = t), this._targetPanel && (this._targetPanel.dataProps = t);
+  }
+  /** 处理数据源更新，将数据分配到左右面板 */
+  _handleDataUpdate(t) {
+    const { key: e } = this.dataProps;
+    if (this._sourcePanel) {
+      const i = t.filter((s) => {
+        const a = s[e];
+        return !this.value.includes(a);
+      });
+      this._sourcePanel.clearList(), this._sourcePanel.data = this._createPanelData(
+        i,
+        this.leftDefaultChecked
+      ), this._sourcePanel.selected = this.leftDefaultChecked, this._sourcePanel.originalData = t, this._sourcePanel.dataMap = this._states.dataMap, this._sourcePanel.dataProps = this.dataProps;
+    }
+    if (this._targetPanel) {
+      const i = t.filter((s) => {
+        const a = s[e];
+        return this.value.includes(a);
+      });
+      this._targetPanel.clearList(), this._targetPanel.data = this._createPanelData(
+        i,
+        this.rightDefaultChecked
+      ), this._targetPanel.selected = this.rightDefaultChecked, this._targetPanel.originalData = t, this._targetPanel.dataMap = this._states.dataMap, this._targetPanel.dataProps = this.dataProps;
+    }
+  }
+  /** 处理选中值更新，重新分配面板数据 */
+  _handleValueUpdate(t) {
+    const { key: e } = this.dataProps;
+    if (!(!this.data || this.data.length === 0)) {
+      if (this._sourcePanel) {
+        const i = this.data.filter((s) => {
+          const a = s[e];
+          return !t.includes(a);
+        });
+        this._sourcePanel.clearList(), this._sourcePanel.data = this._createPanelData(
+          i,
+          this.leftDefaultChecked
+        ), this._sourcePanel.selected = this.leftDefaultChecked, this._sourcePanel.originalData = this.data, this._sourcePanel.dataMap = this._states.dataMap, this._sourcePanel.dataProps = this.dataProps;
+      }
+      if (this._targetPanel) {
+        const i = this.data.filter((s) => {
+          const a = s[e];
+          return t.includes(a);
+        }).sort((s, a) => {
+          const l = t.indexOf(s[e]), n = t.indexOf(a[e]);
+          return l - n;
+        });
+        this._targetPanel.clearList(), this._targetPanel.data = this._createPanelData(
+          i,
+          this.rightDefaultChecked
+        ), this._targetPanel.selected = this.rightDefaultChecked, this._targetPanel.originalData = this.data, this._targetPanel.dataMap = this._states.dataMap, this._targetPanel.dataProps = this.dataProps;
+      }
+    }
+  }
+  /** 根据数据创建面板列表项元素 */
+  _createPanelData(t, e) {
+    const { key: i, label: s, disabled: a } = this.dataProps, l = $("ea-transfer-panel");
+    return Array.from(
+      { length: t.length },
+      (p, m) => {
+        const b = document.createElement("li"), v = t[m], C = v[a], k = e.includes(v[i]), M = `ea-transfer-option-${c._optionIdCounter++}`, S = [];
+        return C && S.push("is-disabled"), k && S.push("is-checked"), b.className = [l.e("item"), ...S].join(" "), b.id = M, b.setAttribute("role", "option"), b.setAttribute("aria-selected", String(k)), b.innerHTML = `
+        <ea-checkbox
+          class="${l.e("item-checkbox")}"
+          ${C ? "disabled" : ""}
+          ${k && !C ? "checked" : ""}
+          part="item-checkbox"
+        >
+          <span class="${l.e("item-label")}" part="item-label">${v[s]}</span>
+        </ea-checkbox>
+      `, this._states.dataMap.set(b, v), b;
+      }
+    ).sort((p, m) => {
+      const b = this._states.dataMap.get(p)[i], v = this._states.dataMap.get(m)[i];
+      return b - v;
+    });
+  }
+  /** 更新移动按钮的文本内容 */
+  _updateButtonTexts(t) {
+    if (Array.isArray(t) && t.length >= 2) {
+      const [e, i] = t;
+      if (this._moveToRightBtn) {
+        const s = this._moveToRightBtn.querySelector(
+          `.${o.e("button-text")}`
+        );
+        s && (s.textContent = e, s.style.display = "inline");
+      }
+      if (this._moveToLeftBtn) {
+        const s = this._moveToLeftBtn.querySelector(
+          `.${o.e("button-text")}`
+        );
+        s && (s.textContent = i, s.style.display = "inline");
+      }
+    }
+  }
+  /** 处理 filterable 属性更新，同步到子面板 */
+  _handleFilterableUpdate(t) {
+    t && (this._sourcePanel && this._sourcePanel.toggleAttribute("filterable", t), this._targetPanel && this._targetPanel.toggleAttribute("filterable", t));
   }
-  $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();
+  /** 更新搜索框占位符到子面板 */
+  _updateFilterPlaceholder(t) {
+    this.filterable && (this._sourcePanel && this._sourcePanel.setAttribute("filter-placeholder", t), this._targetPanel && this._targetPanel.setAttribute("filter-placeholder", t));
   }
-  /**
-   * 清空指定面板的搜索关键词
-   * @param {'left' | 'right'} which - 面板类型
-   */
+  /** 获取面板默认标题 */
+  _getDefaultTitle(t) {
+    return t === "source" ? g.t("transfer.list1") : g.t("transfer.list2");
+  }
+  /** 更新面板标题 */
+  _updateTitles(t) {
+    if (Array.isArray(t) && t.length >= 2) {
+      const [e, i] = t;
+      this._sourcePanel && this._sourcePanel.setAttribute("data-title", e), this._targetPanel && this._targetPanel.setAttribute("data-title", i);
+    }
+  }
+  /** 更新移动按钮的启用/禁用状态 */
+  _updateButtonStates() {
+    const { disabled: t } = this.dataProps;
+    if (this._moveToRightBtn) {
+      const e = this._getMovableKeys(
+        [...this._states.sourceSelectedKeys],
+        t
+      );
+      this._moveToRightBtn.disabled = e.length === 0;
+    }
+    if (this._moveToLeftBtn) {
+      const e = this._getMovableKeys(
+        [...this._states.targetSelectedKeys],
+        t
+      );
+      this._moveToLeftBtn.disabled = e.length === 0;
+    }
+  }
+  /** 清空指定面板的搜索关键词 */
   clearQuery(t) {
-    t === "left" && e(this, h) ? e(this, h).clearQuery() : t === "right" && e(this, o) && e(this, o).clearQuery();
+    t === "left" && this._sourcePanel ? this._sourcePanel.clearQuery() : t === "right" && this._targetPanel && this._targetPanel.clearQuery();
+  }
+  /** 触发面板选中项变化事件 */
+  _triggerCheckChangeEvent(t, e) {
+    const i = [
+      ...this._states[`${t}SelectedKeys`]
+    ], { key: s } = this.dataProps, l = {
+      value: i.map((n) => {
+        const p = this._states.dataMap.get(n);
+        return p ? p[s] : null;
+      }).filter(Boolean),
+      movedKeys: [this._states.dataMap.get(e)[s]]
+    };
+    if (t === "source") {
+      const n = new A(l);
+      this.dispatchEvent(n);
+    } else if (t === "target") {
+      const n = new x(l);
+      this.dispatchEvent(n);
+    }
+  }
+  /** 触发全选变化事件 */
+  _triggerCheckAllChangeEvent(t, e) {
+    const { key: i } = this.dataProps, s = e.map((l) => {
+      const n = this._states.dataMap.get(l);
+      return n ? n[i] : null;
+    }).filter(Boolean), a = [
+      ...this._states[`${t}SelectedKeys`]
+    ].map((l) => {
+      const n = this._states.dataMap.get(l);
+      return n ? n[i] : null;
+    }).filter(Boolean);
+    t === "source" ? this.dispatchEvent(
+      new A({
+        value: a,
+        movedKeys: s
+      })
+    ) : t === "target" && this.dispatchEvent(
+      new x({
+        value: a,
+        movedKeys: s
+      })
+    );
+  }
+  /** 处理面板选中项变化 */
+  _handleSelectionChange(t, e, i) {
+    const s = `${t}SelectedKeys`, a = this._states[s];
+    i ? a.add(e) : a.delete(e), this._updateButtonStates(), this._triggerCheckChangeEvent(t, e);
+  }
+  /** 处理全选变化 */
+  _handleSelectAllChange(t, e, i) {
+    const s = `${t}SelectedKeys`, a = this._states[s];
+    i ? e.forEach((l) => a.add(l)) : e.forEach((l) => a.delete(l)), this._updateButtonStates(), this._triggerCheckAllChangeEvent(t, e);
+  }
+  /** 获取可移动的选中项（排除禁用项） */
+  _getMovableKeys(t, e) {
+    return t.filter((i) => {
+      const s = this._states.dataMap.get(i);
+      return !s || !s[e];
+    });
+  }
+  /** 处理移动后清除选中状态 */
+  _handleMovableKeys(t, e) {
+    const i = `${e}SelectedKeys`, s = this._states[i];
+    t.forEach((a) => {
+      const l = a.querySelector(".ea-transfer-panel__item-checkbox");
+      l && (l.checked = !1, l.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            checkbox: !1
+          }
+        })
+      )), s.delete(a);
+    });
+  }
+  /** 生成面板数据排序函数 */
+  _handlePanelDataSort(t) {
+    return (e, i) => {
+      const s = this._states.dataMap.get(e), a = this._states.dataMap.get(i);
+      return s[t] - a[t] || 0;
+    };
+  }
+  _onMoveToRight(t) {
+    if (t.stopImmediatePropagation(), this.disabled) return;
+    const { key: e, disabled: i } = this.dataProps, s = [...this._states.sourceSelectedKeys], a = this._getMovableKeys(s, i);
+    if (a.length !== 0) {
+      if (this._handleMovableKeys(a, "source"), this._targetPanel && (this._targetPanel.data = [
+        ...new Set(
+          [...this._targetPanel.data, ...a].sort(
+            this._handlePanelDataSort(e)
+          )
+        )
+      ]), this._sourcePanel && (this._sourcePanel.data = this._sourcePanel.data.filter((l) => !a.includes(l)).sort(this._handlePanelDataSort(e))), this._targetPanel) {
+        const l = this._targetPanel.data.map((n) => this._states.dataMap.get(n)[e]);
+        this.value = l;
+      }
+      this._updateButtonStates();
+    }
+  }
+  _onMoveToLeft(t) {
+    if (t.stopImmediatePropagation(), this.disabled) return;
+    const { key: e, disabled: i } = this.dataProps, s = [...this._states.targetSelectedKeys], a = this._getMovableKeys(s, i);
+    if (a.length !== 0) {
+      if (this._handleMovableKeys(a, "target"), this._sourcePanel && (this._sourcePanel.data = [
+        ...new Set(
+          [...this._sourcePanel.data, ...a].sort(
+            this._handlePanelDataSort(e)
+          )
+        )
+      ]), this._targetPanel && (this._targetPanel.data = this._targetPanel.data.filter((l) => !a.includes(l)).sort(this._handlePanelDataSort(e))), this._targetPanel) {
+        const l = this._targetPanel.data.map((n) => this._states.dataMap.get(n)[e]);
+        this.value = l;
+      }
+      this._updateButtonStates();
+    }
+  }
+  /** 绑定面板内部通信事件 */
+  _bindEvents() {
+    var t;
+    (t = this._abortController) == null || t.abort(), this._abortController = new AbortController(), this._container.addEventListener(
+      "ea-transfer-panel-select-change",
+      (e) => {
+        e.stopImmediatePropagation();
+        const { type: i, selectedKey: s, isChecked: a } = e.detail;
+        this._handleSelectionChange(i, s, a);
+      },
+      {
+        signal: this._abortController.signal
+      }
+    ), this._container.addEventListener(
+      "ea-transfer-panel-select-all",
+      (e) => {
+        e.stopImmediatePropagation();
+        const { type: i, selectedKeys: s, isChecked: a } = e.detail;
+        this._handleSelectAllChange(i, s, a);
+      },
+      {
+        signal: this._abortController.signal
+      }
+    );
   }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
   get validationTarget() {
-    return this;
+    var t, e;
+    return ((e = (t = this._targetPanel) == null ? void 0 : t.shadowRoot) == null ? void 0 : e.querySelector(
+      ".ea-transfer-panel__list"
+    )) || null;
   }
-  /**
-   * 更新表单验证状态
-   */
   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
-   */
+    const t = this.value, e = !t || Array.isArray(t) && t.length === 0;
+    this.required && e ? this.internals.setValidity({ valueMissing: !0 }, "请至少选择一项") : this.internals.setValidity({}, "");
+  }
   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);
+};
+c._optionIdCounter = 0;
+u([
+  _(o.cb())
+], c.prototype, "_container", 2);
+u([
+  _(`.${o.e("panel")}.${o.e("panel")}--source`)
+], c.prototype, "_sourcePanel", 2);
+u([
+  _(`.${o.e("panel")}.${o.e("panel")}--target`)
+], c.prototype, "_targetPanel", 2);
+u([
+  _(`${o.ce("button")}${o.ce("move-to-right-btn")}`)
+], c.prototype, "_moveToRightBtn", 2);
+u([
+  _(`${o.ce("button")}${o.ce("move-to-left-btn")}`)
+], c.prototype, "_moveToLeftBtn", 2);
+u([
+  y({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
     },
-    {
-      signal: e(this, E).signal
+    observer() {
+      this.updateContainerClasslist(), this._handleDisabledUpdate();
     }
-  ), 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
+  })
+], c.prototype, "disabled", 2);
+u([
+  y({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._handleFilterableUpdate(t);
     }
-  ), 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);
+  })
+], c.prototype, "filterable", 2);
+u([
+  y({
+    type: String,
+    default: "请输入搜索内容",
+    observer(t) {
+      this._updateFilterPlaceholder(t);
+    }
+  })
+], c.prototype, "filterPlaceholder", 2);
+u([
+  f({
+    type: Array,
+    default: [],
+    observer(t) {
+      if (!this._states.isPanelDefined) {
+        customElements.whenDefined("ea-transfer-panel").then(() => {
+          this._states.isPanelDefined = !0, this._handleDataUpdate(t);
+        });
+        return;
+      }
+      this._handleDataUpdate(t);
+    }
+  })
+], c.prototype, "data", 2);
+u([
+  f({
+    type: Array,
+    default: [],
+    observer(t) {
+      if (!this._states.isPanelDefined) {
+        customElements.whenDefined("ea-transfer-panel").then(() => {
+          this._states.isPanelDefined = !0, this._handleValueUpdate(t), this.setValue(t), this.emit("change", { detail: { value: t } });
+        });
+        return;
+      }
+      this._handleValueUpdate(t), this.setValue(t), this.emit("change", { detail: { value: t } });
+    }
+  })
+], c.prototype, "value", 2);
+u([
+  f({
+    type: Object,
+    default: { key: "key", label: "label", disabled: "disabled" },
+    observer(t) {
+      this._updateFieldMapping(t);
+    }
+  })
+], c.prototype, "dataProps", 2);
+u([
+  f({
+    type: Array,
+    default: [],
+    observer(t) {
+      this._updateTitles(t);
+    }
+  })
+], c.prototype, "titles", 2);
+u([
+  f({
+    type: Array,
+    default: [],
+    observer(t) {
+      this._updateButtonTexts(t);
+    }
+  })
+], c.prototype, "buttonTexts", 2);
+u([
+  f({
+    type: Function,
+    default: null,
+    rawFunction: !0
+  })
+], c.prototype, "filterMethod", 2);
+u([
+  f({
+    type: Array,
+    default: []
+  })
+], c.prototype, "leftDefaultChecked", 2);
+u([
+  f({
+    type: Array,
+    default: []
+  })
+], c.prototype, "rightDefaultChecked", 2);
+u([
+  P("click", `.${o.e("move-to-right-btn")}`)
+], c.prototype, "_onMoveToRight", 1);
+u([
+  P("click", `.${o.e("move-to-left-btn")}`)
+], c.prototype, "_onMoveToLeft", 1);
+c = u([
+  D(I, { styles: [F] })
+], c);
 export {
-  Lt as EaTransfer
+  c as EaTransfer
 };