@kdcloudjs/shoelace 1.0.50 → 1.0.52

package/dist/chunks/chunk.5KKGTEMD.js

@@ -0,0 +1,745 @@
+import {
+  transfer_styles_default
+} from "./chunk.OCRPY5IB.js";
+import {
+  SlPagination
+} from "./chunk.OXT7C33D.js";
+import {
+  SlMenuItem
+} from "./chunk.KVIIKM7J.js";
+import {
+  SlMenu
+} from "./chunk.2AAWUIDY.js";
+import {
+  SlDropdown
+} from "./chunk.YTT2OBI2.js";
+import {
+  SlInput
+} from "./chunk.4VZPDGMR.js";
+import {
+  SlCheckbox
+} from "./chunk.F3SZAKOJ.js";
+import {
+  SlButton
+} from "./chunk.YIZ5SSNG.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  SlIcon
+} from "./chunk.S3YDHX7E.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.735URR7H.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/transfer/transfer.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var SlTransfer = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "operation",
+      "move-to-target",
+      "move-to-source",
+      "dropdown-icon",
+      "source-empty",
+      "target-empty",
+      "source-item-list",
+      "target-item-list",
+      "source-footer",
+      "target-footer"
+    );
+    this.dataSource = [];
+    this.targetKeys = [];
+    this.disabled = false;
+    this.pagination = false;
+    this.pageSize = 10;
+    this.showSearch = false;
+    this.showSelectAll = true;
+    this.oneWay = false;
+    this.titles = ["\u6E90\u5217\u8868", "\u76EE\u6807\u5217\u8868"];
+    this.status = "normal";
+    this.searchPlaceholder = "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9";
+    this.sourceCurrentPage = 1;
+    this.targetCurrentPage = 1;
+    this._sourceSelectedKeys = [];
+    this._targetSelectedKeys = [];
+    this.sourceSearchValue = "";
+    this.targetSearchValue = "";
+  }
+  /** 是否为受控模式 */
+  get isControlledSelection() {
+    return this.selectedKeys !== void 0;
+  }
+  /** 获取源列表选中 keys（受控优先） */
+  get sourceSelectedKeys() {
+    if (this.isControlledSelection) {
+      const targetKeySet = new Set(this.targetKeys);
+      return this.selectedKeys.filter((key) => !targetKeySet.has(key));
+    }
+    return this._sourceSelectedKeys;
+  }
+  /** 设置源列表选中 keys */
+  set sourceSelectedKeys(keys) {
+    if (!this.isControlledSelection) {
+      this._sourceSelectedKeys = keys;
+    }
+  }
+  /** 获取目标列表选中 keys（受控优先） */
+  get targetSelectedKeys() {
+    if (this.isControlledSelection) {
+      const targetKeySet = new Set(this.targetKeys);
+      return this.selectedKeys.filter((key) => targetKeySet.has(key));
+    }
+    return this._targetSelectedKeys;
+  }
+  /** 设置目标列表选中 keys */
+  set targetSelectedKeys(keys) {
+    if (!this.isControlledSelection) {
+      this._targetSelectedKeys = keys;
+    }
+  }
+  /** 过滤搜索匹配项 */
+  filterItems(items, searchValue, direction) {
+    if (!searchValue) return items;
+    return items.filter((item) => {
+      var _a;
+      if (this.filterOption) {
+        return this.filterOption(searchValue, item, direction);
+      }
+      const keyword = searchValue.toLowerCase();
+      return item.title.toLowerCase().includes(keyword) || ((_a = item.description) == null ? void 0 : _a.toLowerCase().includes(keyword));
+    });
+  }
+  /** 获取源列表数据 */
+  get sourceItems() {
+    const targetKeySet = new Set(this.targetKeys);
+    const items = this.dataSource.filter((item) => !targetKeySet.has(item.key));
+    return this.filterItems(items, this.sourceSearchValue, "left");
+  }
+  /** 获取目标列表数据 */
+  get targetItems() {
+    const targetKeySet = new Set(this.targetKeys);
+    const items = this.dataSource.filter((item) => targetKeySet.has(item.key));
+    return this.filterItems(items, this.targetSearchValue, "right");
+  }
+  /** 获取源列表当前页数据 */
+  get sourcePagedItems() {
+    if (!this.pagination) return this.sourceItems;
+    const start = (this.sourceCurrentPage - 1) * this.pageSize;
+    return this.sourceItems.slice(start, start + this.pageSize);
+  }
+  /** 获取目标列表当前页数据 */
+  get targetPagedItems() {
+    if (!this.pagination) return this.targetItems;
+    const start = (this.targetCurrentPage - 1) * this.pageSize;
+    return this.targetItems.slice(start, start + this.pageSize);
+  }
+  /** 获取源列表可选中的项 */
+  get selectableSourceItems() {
+    return this.sourceItems.filter((item) => !item.disabled);
+  }
+  /** 获取目标列表可选中的项 */
+  get selectableTargetItems() {
+    return this.targetItems.filter((item) => !item.disabled);
+  }
+  /** 源列表是否全选 */
+  get isSourceAllSelected() {
+    const selectableItems = this.selectableSourceItems;
+    return selectableItems.length > 0 && selectableItems.every((item) => this.sourceSelectedKeys.includes(item.key));
+  }
+  /** 目标列表是否全选 */
+  get isTargetAllSelected() {
+    const selectableItems = this.selectableTargetItems;
+    return selectableItems.length > 0 && selectableItems.every((item) => this.targetSelectedKeys.includes(item.key));
+  }
+  /** 源列表是否部分选中 */
+  get isSourceIndeterminate() {
+    const selectableItems = this.selectableSourceItems;
+    const selectedCount = selectableItems.filter((item) => this.sourceSelectedKeys.includes(item.key)).length;
+    return selectedCount > 0 && selectedCount < selectableItems.length;
+  }
+  /** 目标列表是否部分选中 */
+  get isTargetIndeterminate() {
+    const selectableItems = this.selectableTargetItems;
+    const selectedCount = selectableItems.filter((item) => this.targetSelectedKeys.includes(item.key)).length;
+    return selectedCount > 0 && selectedCount < selectableItems.length;
+  }
+  handleTargetKeysChange() {
+    if (this.isControlledSelection) return;
+    const targetKeySet = new Set(this.targetKeys);
+    this._sourceSelectedKeys = this._sourceSelectedKeys.filter((key) => {
+      const item = this.dataSource.find((i) => i.key === key);
+      return item && !targetKeySet.has(key);
+    });
+    this._targetSelectedKeys = this._targetSelectedKeys.filter((key) => targetKeySet.has(key));
+  }
+  /** 处理源列表项点击 */
+  handleSourceItemClick(item) {
+    if (this.disabled || item.disabled) return;
+    const currentKeys = this.sourceSelectedKeys;
+    const index = currentKeys.indexOf(item.key);
+    const newSourceKeys = index > -1 ? currentKeys.filter((k) => k !== item.key) : [...currentKeys, item.key];
+    if (this.isControlledSelection) {
+      this.emit("sl-transfer-select-change", {
+        detail: {
+          sourceSelectedKeys: newSourceKeys,
+          targetSelectedKeys: this.targetSelectedKeys,
+          type: "single"
+        }
+      });
+      return;
+    }
+    this._sourceSelectedKeys = newSourceKeys;
+    this.emitSelectChange("single");
+  }
+  /** 处理目标列表项点击 */
+  handleTargetItemClick(item) {
+    if (this.disabled || item.disabled) return;
+    const currentKeys = this.targetSelectedKeys;
+    const index = currentKeys.indexOf(item.key);
+    const newTargetKeys = index > -1 ? currentKeys.filter((k) => k !== item.key) : [...currentKeys, item.key];
+    if (this.isControlledSelection) {
+      this.emit("sl-transfer-select-change", {
+        detail: {
+          sourceSelectedKeys: this.sourceSelectedKeys,
+          targetSelectedKeys: newTargetKeys,
+          type: "single"
+        }
+      });
+      return;
+    }
+    this._targetSelectedKeys = newTargetKeys;
+    this.emitSelectChange("single");
+  }
+  /** 处理源列表全选 */
+  handleSourceSelectAll() {
+    if (this.disabled) return;
+    const newSourceKeys = this.isSourceAllSelected ? [] : this.selectableSourceItems.map((item) => item.key);
+    if (this.isControlledSelection) {
+      this.emit("sl-transfer-select-change", {
+        detail: {
+          sourceSelectedKeys: newSourceKeys,
+          targetSelectedKeys: this.targetSelectedKeys,
+          type: "selectAll"
+        }
+      });
+      return;
+    }
+    this._sourceSelectedKeys = newSourceKeys;
+    this.emitSelectChange("selectAll");
+  }
+  /** 处理目标列表全选 */
+  handleTargetSelectAll() {
+    if (this.disabled) return;
+    const newTargetKeys = this.isTargetAllSelected ? [] : this.selectableTargetItems.map((item) => item.key);
+    if (this.isControlledSelection) {
+      this.emit("sl-transfer-select-change", {
+        detail: {
+          sourceSelectedKeys: this.sourceSelectedKeys,
+          targetSelectedKeys: newTargetKeys,
+          type: "selectAll"
+        }
+      });
+      return;
+    }
+    this._targetSelectedKeys = newTargetKeys;
+    this.emitSelectChange("selectAll");
+  }
+  /** 移动选中项到目标列表 */
+  moveToTarget() {
+    if (this.disabled || this.sourceSelectedKeys.length === 0) return;
+    const moveKeys = [...this.sourceSelectedKeys];
+    const newTargetKeys = [...this.targetKeys, ...moveKeys];
+    this.targetKeys = newTargetKeys;
+    if (!this.isControlledSelection) {
+      this._sourceSelectedKeys = [];
+    }
+    this.emitChange(newTargetKeys, "right", moveKeys);
+  }
+  /** 移动选中项到源列表 */
+  moveToSource() {
+    if (this.disabled || this.targetSelectedKeys.length === 0) return;
+    const moveKeys = [...this.targetSelectedKeys];
+    const newTargetKeys = this.targetKeys.filter((key) => !moveKeys.includes(key));
+    this.targetKeys = newTargetKeys;
+    if (!this.isControlledSelection) {
+      this._targetSelectedKeys = [];
+    }
+    this.emitChange(newTargetKeys, "left", moveKeys);
+  }
+  /** 设置源列表选中项（供外部调用，用于 source-item-list 自定义列表场景） */
+  setSourceSelectedKeys(keys) {
+    this._sourceSelectedKeys = [...keys];
+    this.emitSelectChange("api");
+  }
+  /** 设置目标列表选中项（供外部调用） */
+  setTargetSelectedKeys(keys) {
+    this._targetSelectedKeys = [...keys];
+    this.emitSelectChange("api");
+  }
+  /** 处理源列表搜索 */
+  handleSourceSearch(e) {
+    const input = e.target;
+    this.sourceSearchValue = input.value;
+    this.emit("sl-transfer-search", {
+      detail: { direction: "left", value: this.sourceSearchValue }
+    });
+  }
+  /** 处理目标列表搜索 */
+  handleTargetSearch(e) {
+    const input = e.target;
+    this.targetSearchValue = input.value;
+    this.emit("sl-transfer-search", {
+      detail: { direction: "right", value: this.targetSearchValue }
+    });
+  }
+  /** 处理列表滚动 */
+  handleScroll(direction, e) {
+    this.emit("sl-transfer-scroll", {
+      detail: { direction, event: e }
+    });
+  }
+  /** 发送变更事件 */
+  emitChange(targetKeys, direction, moveKeys) {
+    this.emit("sl-transfer-change", {
+      detail: { targetKeys, direction, moveKeys }
+    });
+  }
+  /** 发送选中变更事件 */
+  emitSelectChange(type) {
+    this.emit("sl-transfer-select-change", {
+      detail: {
+        sourceSelectedKeys: this.sourceSelectedKeys,
+        targetSelectedKeys: this.targetSelectedKeys,
+        type
+      }
+    });
+  }
+  /** 处理源列表分页变化 */
+  handleSourcePageChange(e) {
+    this.sourceCurrentPage = e.detail.pageNumber;
+    if (e.detail.pageSize !== this.pageSize) {
+      this.pageSize = e.detail.pageSize;
+      this.sourceCurrentPage = 1;
+      this.targetCurrentPage = 1;
+    }
+  }
+  /** 处理目标列表分页变化 */
+  handleTargetPageChange(e) {
+    this.targetCurrentPage = e.detail.pageNumber;
+    if (e.detail.pageSize !== this.pageSize) {
+      this.pageSize = e.detail.pageSize;
+      this.sourceCurrentPage = 1;
+      this.targetCurrentPage = 1;
+    }
+  }
+  /** 处理下拉菜单：全选所有（选中该面板所有可选项，包含搜索过滤外的） */
+  handleDropdownSelectAll(direction) {
+    if (this.disabled) return;
+    const targetKeySet = new Set(this.targetKeys);
+    if (direction === "left") {
+      const allSelectableKeys = this.dataSource.filter((item) => !targetKeySet.has(item.key) && !item.disabled).map((item) => item.key);
+      if (this.isControlledSelection) {
+        this.emit("sl-transfer-select-change", {
+          detail: {
+            sourceSelectedKeys: allSelectableKeys,
+            targetSelectedKeys: this.targetSelectedKeys,
+            type: "selectAllItems"
+          }
+        });
+        return;
+      }
+      this._sourceSelectedKeys = allSelectableKeys;
+    } else {
+      const allSelectableKeys = this.dataSource.filter((item) => targetKeySet.has(item.key) && !item.disabled).map((item) => item.key);
+      if (this.isControlledSelection) {
+        this.emit("sl-transfer-select-change", {
+          detail: {
+            sourceSelectedKeys: this.sourceSelectedKeys,
+            targetSelectedKeys: allSelectableKeys,
+            type: "selectAllItems"
+          }
+        });
+        return;
+      }
+      this._targetSelectedKeys = allSelectableKeys;
+    }
+    this.emitSelectChange("selectAllItems");
+  }
+  /** 处理下拉菜单：反选当页（对当前可见列表中的可选项进行反选） */
+  handleDropdownInvertPage(direction) {
+    if (this.disabled) return;
+    if (direction === "left") {
+      const currentPageKeys = this.selectableSourceItems.map((item) => item.key);
+      const selectedSet = new Set(this.sourceSelectedKeys);
+      const invertedKeys = currentPageKeys.filter((key) => !selectedSet.has(key));
+      if (this.isControlledSelection) {
+        this.emit("sl-transfer-select-change", {
+          detail: { sourceSelectedKeys: invertedKeys, targetSelectedKeys: this.targetSelectedKeys, type: "invertPage" }
+        });
+        return;
+      }
+      this._sourceSelectedKeys = invertedKeys;
+    } else {
+      const currentPageKeys = this.selectableTargetItems.map((item) => item.key);
+      const selectedSet = new Set(this.targetSelectedKeys);
+      const invertedKeys = currentPageKeys.filter((key) => !selectedSet.has(key));
+      if (this.isControlledSelection) {
+        this.emit("sl-transfer-select-change", {
+          detail: { sourceSelectedKeys: this.sourceSelectedKeys, targetSelectedKeys: invertedKeys, type: "invertPage" }
+        });
+        return;
+      }
+      this._targetSelectedKeys = invertedKeys;
+    }
+    this.emitSelectChange("invertPage");
+  }
+  /** 处理下拉菜单：全选当页（选中当前页所有可选项） */
+  handleDropdownSelectPage(direction) {
+    if (this.disabled) return;
+    if (direction === "left") {
+      const pageKeys = this.sourcePagedItems.filter((item) => !item.disabled).map((item) => item.key);
+      const merged = Array.from(/* @__PURE__ */ new Set([...this.sourceSelectedKeys, ...pageKeys]));
+      if (this.isControlledSelection) {
+        this.emit("sl-transfer-select-change", {
+          detail: { sourceSelectedKeys: merged, targetSelectedKeys: this.targetSelectedKeys, type: "selectPage" }
+        });
+        return;
+      }
+      this._sourceSelectedKeys = merged;
+    } else {
+      const pageKeys = this.targetPagedItems.filter((item) => !item.disabled).map((item) => item.key);
+      const merged = Array.from(/* @__PURE__ */ new Set([...this.targetSelectedKeys, ...pageKeys]));
+      if (this.isControlledSelection) {
+        this.emit("sl-transfer-select-change", {
+          detail: { sourceSelectedKeys: this.sourceSelectedKeys, targetSelectedKeys: merged, type: "selectPage" }
+        });
+        return;
+      }
+      this._targetSelectedKeys = merged;
+    }
+    this.emitSelectChange("selectPage");
+  }
+  /** 渲染面板头部 */
+  renderPanelHeader(options) {
+    const { title, selectedCount, totalCount, isAllSelected, isIndeterminate, onSelectAll, direction } = options;
+    return html`
+      <div part="panel-header" class="transfer-panel-header">
+        <div class="transfer-panel-header-left">
+          ${this.showSelectAll ? html`
+                <sl-checkbox
+                  size="small"
+                  class="transfer-select-all-checkbox"
+                  .checked=${isAllSelected}
+                  .indeterminate=${isIndeterminate}
+                  .disabled=${this.disabled || totalCount === 0}
+                  @sl-change=${onSelectAll}
+                ></sl-checkbox>
+                <sl-dropdown
+                  hoist
+                  ?disabled=${this.disabled}
+                  @mouseenter=${(e) => {
+      if (!this.disabled) e.currentTarget.show();
+    }}
+                  @mouseleave=${(e) => {
+      if (!this.disabled) e.currentTarget.hide();
+    }}
+                >
+                  <div
+                    slot="trigger"
+                    class=${classMap({
+      "transfer-panel-dropdown-icon": true,
+      "transfer-panel-dropdown-icon-disabled": this.disabled
+    })}
+                  >
+                    ${this.hasSlotController.test("dropdown-icon") ? html`<slot name="dropdown-icon"></slot>` : html`<sl-icon name="chevron-down"></sl-icon>`}
+                  </div>
+                  <sl-menu>
+                    <sl-menu-item @click=${() => this.handleDropdownSelectAll(direction)}>全选所有</sl-menu-item>
+                    ${this.pagination ? html`<sl-menu-item @click=${() => this.handleDropdownSelectPage(direction)}
+                          >全选当页</sl-menu-item
+                        >` : ""}
+                    <sl-menu-item @click=${() => this.handleDropdownInvertPage(direction)}>反选当页</sl-menu-item>
+                  </sl-menu>
+                </sl-dropdown>
+              ` : ""}
+          <div class="transfer-panel-count-container">
+            ${selectedCount > 0 ? html`
+                  <span class="transfer-panel-count">${selectedCount}</span>
+                  <span>/</span>
+                ` : ""}
+            <span class="transfer-panel-count">${totalCount}</span>
+            <span>项</span>
+          </div>
+        </div>
+        <span class="transfer-panel-title">${title}</span>
+      </div>
+    `;
+  }
+  /** 渲染搜索框 */
+  renderSearch(value, onInput) {
+    return html`
+      <div class="transfer-search">
+        <sl-input
+          part="search-input"
+          class="transfer-search-input"
+          size="medium"
+          placeholder=${this.searchPlaceholder}
+          .value=${value}
+          ?disabled=${this.disabled}
+          @sl-input=${onInput}
+          clearable
+        >
+          <sl-icon name="search" slot="prefix"></sl-icon>
+        </sl-input>
+      </div>
+    `;
+  }
+  /** 渲染列表项 */
+  renderItem(item, isSelected, onClick) {
+    const itemTitle = this.itemRender ? this.itemRender(item) : item.title;
+    return html`
+      <div
+        class=${classMap({
+      "transfer-item": true,
+      "transfer-item-selected": isSelected,
+      "transfer-item-disabled": !!item.disabled || this.disabled
+    })}
+        @click=${onClick}
+      >
+        <sl-checkbox
+          size="small"
+          class="transfer-item-checkbox"
+          .checked=${isSelected}
+          .disabled=${this.disabled || !!item.disabled}
+          tabindex="-1"
+        >
+          <div class="transfer-item-title" title=${itemTitle}>${itemTitle}</div>
+        </sl-checkbox>
+      </div>
+    `;
+  }
+  renderPagination(direction) {
+    const total = direction === "left" ? this.sourceItems.length : this.targetItems.length;
+    const currentPage = direction === "left" ? this.sourceCurrentPage : this.targetCurrentPage;
+    const onPageChange = direction === "left" ? (e) => this.handleSourcePageChange(e) : (e) => this.handleTargetPageChange(e);
+    return html`
+      <div class="transfer-pagination">
+        <sl-pagination
+          simpleMode=${true}
+          .total=${total}
+          .pageSize=${this.pageSize}
+          .defaultCurrentPage=${currentPage}
+          .disabled=${this.disabled}
+          @sl-page-change=${onPageChange}
+        ></sl-pagination>
+      </div>
+    `;
+  }
+  /** 渲染列表 */
+  renderList(items, selectedKeys, direction, onItemClick) {
+    if (items.length === 0) {
+      const slotName = direction === "left" ? "source-empty" : "target-empty";
+      return html`<div class="transfer-empty">
+        ${this.hasSlotController.test(slotName) ? html`<slot name=${slotName}></slot>` : html`<span>暂无数据</span>`}
+      </div>`;
+    }
+    return html`
+      <div
+        part="panel-list"
+        class=${classMap({
+      "transfer-list": true,
+      "transfer-list-nosearch": !this.showSearch
+    })}
+        @scroll=${(e) => this.handleScroll(direction, e)}
+      >
+        ${items.map((item) => this.renderItem(item, selectedKeys.includes(item.key), () => onItemClick(item)))}
+      </div>
+    `;
+  }
+  render() {
+    const sourceSelectedCount = this.sourceSelectedKeys.length;
+    const targetSelectedCount = this.targetSelectedKeys.length;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      transfer: true,
+      "transfer-disabled": this.disabled,
+      "transfer-error": this.status === "error",
+      "transfer-success": this.status === "success"
+    })}
+      >
+        <!-- 源列表面板 -->
+        <div part="source-panel" class="transfer-panel">
+          ${this.renderPanelHeader({
+      title: this.titles[0] || "\u6E90\u5217\u8868",
+      selectedCount: sourceSelectedCount,
+      totalCount: this.sourceItems.length,
+      isAllSelected: this.isSourceAllSelected,
+      isIndeterminate: this.isSourceIndeterminate,
+      onSelectAll: () => this.handleSourceSelectAll(),
+      direction: "left"
+    })}
+          ${this.showSearch ? this.renderSearch(this.sourceSearchValue, (e) => this.handleSourceSearch(e)) : ""}
+          ${this.hasSlotController.test("source-item-list") ? html`<slot name="source-item-list"></slot>` : this.renderList(
+      this.sourcePagedItems,
+      this.sourceSelectedKeys,
+      "left",
+      (item) => this.handleSourceItemClick(item)
+    )}
+          ${this.hasSlotController.test("source-footer") ? html`<div class="transfer-panel-footer"><slot name="source-footer"></slot></div>` : ""}
+          ${this.pagination ? this.renderPagination("left") : ""}
+        </div>
+
+        <!-- 操作按钮 -->
+        <div part="operation" class="transfer-operation">
+          ${this.hasSlotController.test("operation") ? html`<slot name="operation"></slot>` : html`
+                <sl-button
+                  class="transfer-operation-button"
+                  variant=${sourceSelectedCount > 0 ? "primary" : "default"}
+                  size="small"
+                  ?disabled=${this.disabled || sourceSelectedCount === 0}
+                  @click=${() => this.moveToTarget()}
+                  aria-label="移动到右边"
+                >
+                  ${this.hasSlotController.test("move-to-target") ? html`<slot name="move-to-target"></slot>` : html`<sl-icon
+                        name=${this.dir === "rtl" ? "chevron-left" : "chevron-right"}
+                        library="system"
+                      ></sl-icon>`}
+                </sl-button>
+                ${!this.oneWay ? html`
+                      <sl-button
+                        class="transfer-operation-button"
+                        variant=${targetSelectedCount > 0 ? "primary" : "default"}
+                        size="small"
+                        ?disabled=${this.disabled || targetSelectedCount === 0}
+                        @click=${() => this.moveToSource()}
+                        aria-label="移动到左边"
+                      >
+                        ${this.hasSlotController.test("move-to-source") ? html`<slot name="move-to-source"></slot>` : html`<sl-icon
+                              name=${this.dir === "rtl" ? "chevron-right" : "chevron-left"}
+                              library="system"
+                            ></sl-icon>`}
+                        <slot name="move-to-source"> </slot>
+                      </sl-button>
+                    ` : ""}
+              `}
+        </div>
+
+        <!-- 目标列表面板 -->
+        <div part="target-panel" class="transfer-panel">
+          ${this.renderPanelHeader({
+      title: this.titles[1] || "\u76EE\u6807\u5217\u8868",
+      selectedCount: targetSelectedCount,
+      totalCount: this.targetItems.length,
+      isAllSelected: this.isTargetAllSelected,
+      isIndeterminate: this.isTargetIndeterminate,
+      onSelectAll: () => this.handleTargetSelectAll(),
+      direction: "right"
+    })}
+          ${this.showSearch ? this.renderSearch(this.targetSearchValue, (e) => this.handleTargetSearch(e)) : ""}
+          ${this.hasSlotController.test("target-item-list") ? html`<slot name="target-item-list"></slot>` : this.renderList(
+      this.targetPagedItems,
+      this.targetSelectedKeys,
+      "right",
+      (item) => this.handleTargetItemClick(item)
+    )}
+          ${this.hasSlotController.test("target-footer") ? html`<div class="transfer-panel-footer"><slot name="target-footer"></slot></div>` : ""}
+          ${this.pagination ? this.renderPagination("right") : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+SlTransfer.styles = [component_styles_default, transfer_styles_default];
+SlTransfer.dependencies = {
+  "sl-checkbox": SlCheckbox,
+  "sl-dropdown": SlDropdown,
+  "sl-icon": SlIcon,
+  "sl-input": SlInput,
+  "sl-menu": SlMenu,
+  "sl-menu-item": SlMenuItem,
+  "sl-button": SlButton,
+  "sl-pagination": SlPagination
+};
+__decorateClass([
+  property({ type: Array })
+], SlTransfer.prototype, "dataSource", 2);
+__decorateClass([
+  property({ type: Array, attribute: "target-keys" })
+], SlTransfer.prototype, "targetKeys", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTransfer.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTransfer.prototype, "pagination", 2);
+__decorateClass([
+  property({ type: Number, attribute: "page-size" })
+], SlTransfer.prototype, "pageSize", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-search" })
+], SlTransfer.prototype, "showSearch", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-select-all" })
+], SlTransfer.prototype, "showSelectAll", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "one-way" })
+], SlTransfer.prototype, "oneWay", 2);
+__decorateClass([
+  property({ type: Array })
+], SlTransfer.prototype, "titles", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTransfer.prototype, "status", 2);
+__decorateClass([
+  property({ attribute: "search-placeholder" })
+], SlTransfer.prototype, "searchPlaceholder", 2);
+__decorateClass([
+  property({ type: Array, attribute: "selected-keys" })
+], SlTransfer.prototype, "selectedKeys", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlTransfer.prototype, "itemRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlTransfer.prototype, "filterOption", 2);
+__decorateClass([
+  state()
+], SlTransfer.prototype, "sourceCurrentPage", 2);
+__decorateClass([
+  state()
+], SlTransfer.prototype, "targetCurrentPage", 2);
+__decorateClass([
+  state()
+], SlTransfer.prototype, "_sourceSelectedKeys", 2);
+__decorateClass([
+  state()
+], SlTransfer.prototype, "_targetSelectedKeys", 2);
+__decorateClass([
+  state()
+], SlTransfer.prototype, "sourceSearchValue", 2);
+__decorateClass([
+  state()
+], SlTransfer.prototype, "targetSearchValue", 2);
+__decorateClass([
+  watch("targetKeys")
+], SlTransfer.prototype, "handleTargetKeysChange", 1);
+
+export {
+  SlTransfer
+};