@element-plus/nightly 0.0.20260611 → 0.0.20260613

package/lib/components/transfer/src/composables/use-check.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-check.js","names":["usePropsAlias","CHECKED_CHANGE_EVENT"],"sources":["../../../../../../../packages/components/transfer/src/composables/use-check.ts"],"sourcesContent":["import { computed, watch } from 'vue'\nimport { isFunction } from '@element-plus/utils'\nimport { CHECKED_CHANGE_EVENT } from '../transfer-panel'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { SetupContext } from 'vue'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\nimport type { TransferDataItem, TransferKey } from '../transfer'\nimport type {\n  TransferPanelEmits,\n  TransferPanelProps,\n  TransferPanelState,\n} from '../transfer-panel'\n\nexport const useCheck = <T extends TransferDataItem = TransferDataItem>(\n  props: Required<\n    Pick<\n      TransferPanelProps<T>,\n      'data' | 'format' | 'defaultChecked' | 'props' // 'props' needed by usePropsAlias\n    >\n  > & { filterMethod: TransferPanelProps<T>['filterMethod'] },\n  panelState: TransferPanelState,\n  emit: SetupContext<TransferPanelEmits>['emit']\n) => {\n  const propsAlias = usePropsAlias(props)\n\n  const filteredData = computed(() => {\n    return props.data.filter((item) => {\n      if (isFunction(props.filterMethod)) {\n        return props.filterMethod(panelState.query, item)\n      } else {\n        const label = String(\n          item[propsAlias.value.label] || item[propsAlias.value.key]\n        )\n        return label.toLowerCase().includes(panelState.query.toLowerCase())\n      }\n    })\n  })\n\n  const checkableData = computed(() =>\n    filteredData.value.filter((item) => !item[propsAlias.value.disabled])\n  )\n\n  const checkedSummary = computed(() => {\n    const checkedLength = panelState.checked.length\n    const dataLength = props.data.length\n    const { noChecked, hasChecked } = props.format\n\n    if (noChecked && hasChecked) {\n      return checkedLength > 0\n        ? hasChecked\n            .replace(/\\${checked}/g, checkedLength.toString())\n            .replace(/\\${total}/g, dataLength.toString())\n        : noChecked.replace(/\\${total}/g, dataLength.toString())\n    } else {\n      return `${checkedLength}/${dataLength}`\n    }\n  })\n\n  const isIndeterminate = computed(() => {\n    const checkedLength = panelState.checked.length\n    return checkedLength > 0 && checkedLength < checkableData.value.length\n  })\n\n  const updateAllChecked = () => {\n    const checkableDataKeys = checkableData.value.map(\n      (item) => item[propsAlias.value.key]\n    )\n    panelState.allChecked =\n      checkableDataKeys.length > 0 &&\n      checkableDataKeys.every((item) => panelState.checked.includes(item))\n  }\n\n  const handleAllCheckedChange = (value: CheckboxValueType) => {\n    panelState.checked = value\n      ? checkableData.value.map((item) => item[propsAlias.value.key])\n      : []\n  }\n\n  watch(\n    () => panelState.checked,\n    (val, oldVal) => {\n      updateAllChecked()\n\n      if (panelState.checkChangeByUser) {\n        const movedKeys = val\n          .concat(oldVal)\n          .filter((v) => !val.includes(v) || !oldVal.includes(v))\n        emit(CHECKED_CHANGE_EVENT, val, movedKeys)\n      } else {\n        emit(CHECKED_CHANGE_EVENT, val)\n        panelState.checkChangeByUser = true\n      }\n    }\n  )\n\n  watch(checkableData, () => {\n    updateAllChecked()\n  })\n\n  watch(\n    () => props.data,\n    () => {\n      const checked: TransferKey[] = []\n      const filteredDataKeys = filteredData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n      panelState.checked.forEach((item) => {\n        if (filteredDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    }\n  )\n\n  watch(\n    () => props.defaultChecked,\n    (val, oldVal) => {\n      if (\n        oldVal &&\n        val.length === oldVal.length &&\n        val.every((item) => oldVal.includes(item))\n      )\n        return\n\n      const checked: TransferKey[] = []\n      const checkableDataKeys = checkableData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n\n      val.forEach((item) => {\n        if (checkableDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  return {\n    filteredData,\n    checkableData,\n    checkedSummary,\n    isIndeterminate,\n    updateAllChecked,\n    handleAllCheckedChange,\n  }\n}\n"],"mappings":";;;;;;;AAcA,MAAa,YACX,OAMA,YACA,SACG;CACH,MAAM,aAAaA,wBAAAA,cAAc,MAAM;CAEvC,MAAM,gBAAA,GAAA,IAAA,gBAA8B;EAClC,OAAO,MAAM,KAAK,QAAQ,SAAS;GACjC,KAAA,GAAA,YAAA,YAAe,MAAM,aAAa,EAChC,OAAO,MAAM,aAAa,WAAW,OAAO,KAAK;QAKjD,OAHc,OACZ,KAAK,WAAW,MAAM,UAAU,KAAK,WAAW,MAAM,KAE5C,CAAC,aAAa,CAAC,SAAS,WAAW,MAAM,aAAa,CAAC;IAErE;GACF;CAEF,MAAM,iBAAA,GAAA,IAAA,gBACJ,aAAa,MAAM,QAAQ,SAAS,CAAC,KAAK,WAAW,MAAM,UAAU,CACtE;CAED,MAAM,kBAAA,GAAA,IAAA,gBAAgC;EACpC,MAAM,gBAAgB,WAAW,QAAQ;EACzC,MAAM,aAAa,MAAM,KAAK;EAC9B,MAAM,EAAE,WAAW,eAAe,MAAM;EAExC,IAAI,aAAa,YACf,OAAO,gBAAgB,IACnB,WACG,QAAQ,gBAAgB,cAAc,UAAU,CAAC,CACjD,QAAQ,cAAc,WAAW,UAAU,CAAC,GAC/C,UAAU,QAAQ,cAAc,WAAW,UAAU,CAAC;OAE1D,OAAO,GAAG,cAAc,GAAG;GAE7B;CAEF,MAAM,mBAAA,GAAA,IAAA,gBAAiC;EACrC,MAAM,gBAAgB,WAAW,QAAQ;EACzC,OAAO,gBAAgB,KAAK,gBAAgB,cAAc,MAAM;GAChE;CAEF,MAAM,yBAAyB;EAC7B,MAAM,oBAAoB,cAAc,MAAM,KAC3C,SAAS,KAAK,WAAW,MAAM,KACjC;EACD,WAAW,aACT,kBAAkB,SAAS,KAC3B,kBAAkB,OAAO,SAAS,WAAW,QAAQ,SAAS,KAAK,CAAC;;CAGxE,MAAM,0BAA0B,UAA6B;EAC3D,WAAW,UAAU,QACjB,cAAc,MAAM,KAAK,SAAS,KAAK,WAAW,MAAM,KAAK,GAC7D,EAAE;;CAGR,CAAA,GAAA,IAAA,aACQ,WAAW,UAChB,KAAK,WAAW;EACf,kBAAkB;EAElB,IAAI,WAAW,mBAIb,KAAKC,uBAAAA,sBAAsB,KAHT,IACf,OAAO,OAAO,CACd,QAAQ,MAAM,CAAC,IAAI,SAAS,EAAE,IAAI,CAAC,OAAO,SAAS,EAAE,CACf,CAAC;OACrC;GACL,KAAKA,uBAAAA,sBAAsB,IAAI;GAC/B,WAAW,oBAAoB;;GAGpC;CAED,CAAA,GAAA,IAAA,OAAM,qBAAqB;EACzB,kBAAkB;GAClB;CAEF,CAAA,GAAA,IAAA,aACQ,MAAM,YACN;EACJ,MAAM,UAAyB,EAAE;EACjC,MAAM,mBAAmB,aAAa,MAAM,KACzC,SAAS,KAAK,WAAW,MAAM,KACjC;EACD,WAAW,QAAQ,SAAS,SAAS;GACnC,IAAI,iBAAiB,SAAS,KAAK,EACjC,QAAQ,KAAK,KAAK;IAEpB;EACF,WAAW,oBAAoB;EAC/B,WAAW,UAAU;GAExB;CAED,CAAA,GAAA,IAAA,aACQ,MAAM,iBACX,KAAK,WAAW;EACf,IACE,UACA,IAAI,WAAW,OAAO,UACtB,IAAI,OAAO,SAAS,OAAO,SAAS,KAAK,CAAC,EAE1C;EAEF,MAAM,UAAyB,EAAE;EACjC,MAAM,oBAAoB,cAAc,MAAM,KAC3C,SAAS,KAAK,WAAW,MAAM,KACjC;EAED,IAAI,SAAS,SAAS;GACpB,IAAI,kBAAkB,SAAS,KAAK,EAClC,QAAQ,KAAK,KAAK;IAEpB;EACF,WAAW,oBAAoB;EAC/B,WAAW,UAAU;IAEvB,EACE,WAAW,MACZ,CACF;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-check.js","names":["usePropsAlias","CHECKED_CHANGE_EVENT"],"sources":["../../../../../../../packages/components/transfer/src/composables/use-check.ts"],"sourcesContent":["import { computed, ref, watch } from 'vue'\nimport { isFunction } from '@element-plus/utils'\nimport { useElementSize } from '@vueuse/core'\nimport { CHECKED_CHANGE_EVENT } from '../transfer-panel'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { SetupContext } from 'vue'\nimport type {\n  CheckboxGroupInstance,\n  CheckboxValueType,\n} from '@element-plus/components/checkbox'\nimport type { TransferDataItem, TransferKey } from '../transfer'\nimport type {\n  TransferPanelEmits,\n  TransferPanelProps,\n  TransferPanelState,\n} from '../transfer-panel'\nimport type { FixedSizeListInstance } from '@element-plus/components/virtual-list'\n\nexport const useCheck = <T extends TransferDataItem = TransferDataItem>(\n  props: Required<\n    Pick<\n      TransferPanelProps<T>,\n      'data' | 'format' | 'defaultChecked' | 'props' | 'virtualScroll' // 'props' needed by usePropsAlias\n    >\n  > & { filterMethod: TransferPanelProps<T>['filterMethod'] },\n  panelState: TransferPanelState,\n  emit: SetupContext<TransferPanelEmits>['emit']\n) => {\n  const propsAlias = usePropsAlias(props)\n\n  const filteredData = computed(() => {\n    return props.data.filter((item) => {\n      if (isFunction(props.filterMethod)) {\n        return props.filterMethod(panelState.query, item)\n      } else {\n        const label = String(\n          item[propsAlias.value.label] || item[propsAlias.value.key]\n        )\n        return label.toLowerCase().includes(panelState.query.toLowerCase())\n      }\n    })\n  })\n\n  const checkableData = computed(() =>\n    filteredData.value.filter((item) => !item[propsAlias.value.disabled])\n  )\n\n  const checkedSummary = computed(() => {\n    const checkedLength = panelState.checked.length\n    const dataLength = props.data.length\n    const { noChecked, hasChecked } = props.format\n\n    if (noChecked && hasChecked) {\n      return checkedLength > 0\n        ? hasChecked\n            .replace(/\\${checked}/g, checkedLength.toString())\n            .replace(/\\${total}/g, dataLength.toString())\n        : noChecked.replace(/\\${total}/g, dataLength.toString())\n    } else {\n      return `${checkedLength}/${dataLength}`\n    }\n  })\n\n  const isIndeterminate = computed(() => {\n    const checkedLength = panelState.checked.length\n    return checkedLength > 0 && checkedLength < checkableData.value.length\n  })\n\n  const updateAllChecked = () => {\n    const checkableDataKeys = checkableData.value.map(\n      (item) => item[propsAlias.value.key]\n    )\n    panelState.allChecked =\n      checkableDataKeys.length > 0 &&\n      checkableDataKeys.every((item) => panelState.checked.includes(item))\n  }\n\n  const handleAllCheckedChange = (value: CheckboxValueType) => {\n    panelState.checked = value\n      ? checkableData.value.map((item) => item[propsAlias.value.key])\n      : []\n  }\n\n  const checkboxGroupRef = ref<CheckboxGroupInstance>()\n  const { height: virtualListHeight } = useElementSize(\n    computed(() => checkboxGroupRef.value?.$el)\n  )\n\n  const virtualListRef = ref<FixedSizeListInstance>()\n\n  watch(\n    () => panelState.checked,\n    (val, oldVal) => {\n      updateAllChecked()\n\n      if (panelState.checkChangeByUser) {\n        const movedKeys = val\n          .concat(oldVal)\n          .filter((v) => !val.includes(v) || !oldVal.includes(v))\n        emit(CHECKED_CHANGE_EVENT, val, movedKeys)\n      } else {\n        emit(CHECKED_CHANGE_EVENT, val)\n        panelState.checkChangeByUser = true\n      }\n    }\n  )\n\n  watch(checkableData, () => {\n    updateAllChecked()\n  })\n\n  watch(\n    () => props.data,\n    () => {\n      const checked: TransferKey[] = []\n      const filteredDataKeys = filteredData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n      panelState.checked.forEach((item) => {\n        if (filteredDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    }\n  )\n\n  watch(\n    () => props.defaultChecked,\n    (val, oldVal) => {\n      if (\n        oldVal &&\n        val.length === oldVal.length &&\n        val.every((item) => oldVal.includes(item))\n      )\n        return\n\n      const checked: TransferKey[] = []\n      const checkableDataKeys = checkableData.value.map(\n        (item) => item[propsAlias.value.key]\n      )\n\n      val.forEach((item) => {\n        if (checkableDataKeys.includes(item)) {\n          checked.push(item)\n        }\n      })\n      panelState.checkChangeByUser = false\n      panelState.checked = checked\n    },\n    {\n      immediate: true,\n    }\n  )\n\n  watch(\n    () => panelState.query,\n    () => {\n      if (!props.virtualScroll) {\n        return\n      }\n      virtualListRef.value?.scrollToItem(0)\n    },\n    { flush: 'post' }\n  )\n\n  return {\n    filteredData,\n    checkableData,\n    checkedSummary,\n    virtualListRef,\n    isIndeterminate,\n    checkboxGroupRef,\n    virtualListHeight,\n    updateAllChecked,\n    handleAllCheckedChange,\n  }\n}\n"],"mappings":"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"}

package/lib/components/transfer/src/transfer-panel.d.ts

@@ -24,6 +24,8 @@ interface TransferPanelProps<T extends TransferDataItem = TransferDataItem> {
   filterMethod?: (query: string, item: T) => boolean;
   defaultChecked?: TransferKey[];
   props?: TransferPropsAlias;
+  virtualScroll?: boolean;
+  itemSize?: number;
 }
 /**
  * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.
@@ -52,6 +54,8 @@ declare const transferPanelProps: {
     readonly key: "key";
     readonly disabled: "disabled";
   }>, boolean>;
+  readonly virtualScroll: BooleanConstructor;
+  readonly itemSize: EpPropFinalized<NumberConstructor, unknown, unknown, 30, boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.

package/lib/components/transfer/src/transfer-panel.js

@@ -15,7 +15,9 @@ const transferPanelProps = require_runtime.buildProps({
 	format: require_transfer.transferProps.format,
 	filterMethod: require_transfer.transferProps.filterMethod,
 	defaultChecked: require_transfer.transferProps.leftDefaultChecked,
-	props: require_transfer.transferProps.props
+	props: require_transfer.transferProps.props,
+	virtualScroll: require_transfer.transferProps.virtualScroll,
+	itemSize: require_transfer.transferProps.itemSize
 });
 const transferPanelEmits = { [CHECKED_CHANGE_EVENT]: require_transfer.transferCheckedChangeFn };
 //#endregion

package/lib/components/transfer/src/transfer-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.js","names":["buildProps","transferProps","definePropType","transferCheckedChangeFn"],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { transferCheckedChangeFn, transferProps } from './transfer'\n\nimport type { ComponentInstance, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type {\n  TransferDataItem,\n  TransferFormat,\n  TransferKey,\n  TransferPropsAlias,\n} from './transfer'\nimport type TransferPanel from './transfer-panel.vue'\n\nexport interface TransferPanelState {\n  checked: TransferKey[]\n  allChecked: boolean\n  query: string\n  checkChangeByUser: boolean\n}\n\nexport const CHECKED_CHANGE_EVENT = 'checked-change'\n\nexport interface TransferPanelProps<\n  T extends TransferDataItem = TransferDataItem,\n> {\n  data?: T[]\n  optionRender?: (option: T) => VNode | VNode[]\n  placeholder?: string\n  title?: string\n  filterable?: boolean\n  format?: TransferFormat\n  filterMethod?: (query: string, item: T) => boolean\n  defaultChecked?: TransferKey[]\n  props?: TransferPropsAlias\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport const transferPanelProps = buildProps({\n  data: transferProps.data,\n  optionRender: {\n    type: definePropType<(option: TransferDataItem) => VNode | VNode[]>(\n      Function\n    ),\n  },\n  placeholder: String,\n  title: String,\n  filterable: Boolean,\n  format: transferProps.format,\n  filterMethod: transferProps.filterMethod,\n  defaultChecked: transferProps.leftDefaultChecked,\n  props: transferProps.props,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport type TransferPanelPropsPublic = ExtractPublicPropTypes<\n  typeof transferPanelProps\n>\n\nexport const transferPanelEmits = {\n  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferPanelEmits = typeof transferPanelEmits\n\nexport type TransferPanelInstance = ComponentInstance<typeof TransferPanel> &\n  ComponentExposed<typeof TransferPanel>\n"],"mappings":";;;;AAoBA,MAAa,uBAAuB;;;;AAmBpC,MAAa,qBAAqBA,gBAAAA,WAAW;CAC3C,MAAMC,iBAAAA,cAAc;CACpB,cAAc,EACZ,MAAMC,gBAAAA,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQD,iBAAAA,cAAc;CACtB,cAAcA,iBAAAA,cAAc;CAC5B,gBAAgBA,iBAAAA,cAAc;CAC9B,OAAOA,iBAAAA,cAAc;CACtB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuBE,iBAAAA,yBACzB"}
+{"version":3,"file":"transfer-panel.js","names":["buildProps","transferProps","definePropType","transferCheckedChangeFn"],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { transferCheckedChangeFn, transferProps } from './transfer'\n\nimport type { ComponentInstance, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type {\n  TransferDataItem,\n  TransferFormat,\n  TransferKey,\n  TransferPropsAlias,\n} from './transfer'\nimport type TransferPanel from './transfer-panel.vue'\n\nexport interface TransferPanelState {\n  checked: TransferKey[]\n  allChecked: boolean\n  query: string\n  checkChangeByUser: boolean\n}\n\nexport const CHECKED_CHANGE_EVENT = 'checked-change'\n\nexport interface TransferPanelProps<\n  T extends TransferDataItem = TransferDataItem,\n> {\n  data?: T[]\n  optionRender?: (option: T) => VNode | VNode[]\n  placeholder?: string\n  title?: string\n  filterable?: boolean\n  format?: TransferFormat\n  filterMethod?: (query: string, item: T) => boolean\n  defaultChecked?: TransferKey[]\n  props?: TransferPropsAlias\n  virtualScroll?: boolean\n  itemSize?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport const transferPanelProps = buildProps({\n  data: transferProps.data,\n  optionRender: {\n    type: definePropType<(option: TransferDataItem) => VNode | VNode[]>(\n      Function\n    ),\n  },\n  placeholder: String,\n  title: String,\n  filterable: Boolean,\n  format: transferProps.format,\n  filterMethod: transferProps.filterMethod,\n  defaultChecked: transferProps.leftDefaultChecked,\n  props: transferProps.props,\n  virtualScroll: transferProps.virtualScroll,\n  itemSize: transferProps.itemSize,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport type TransferPanelPropsPublic = ExtractPublicPropTypes<\n  typeof transferPanelProps\n>\n\nexport const transferPanelEmits = {\n  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferPanelEmits = typeof transferPanelEmits\n\nexport type TransferPanelInstance = ComponentInstance<typeof TransferPanel> &\n  ComponentExposed<typeof TransferPanel>\n"],"mappings":";;;;AAoBA,MAAa,uBAAuB;;;;AAqBpC,MAAa,qBAAqBA,gBAAAA,WAAW;CAC3C,MAAMC,iBAAAA,cAAc;CACpB,cAAc,EACZ,MAAMC,gBAAAA,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQD,iBAAAA,cAAc;CACtB,cAAcA,iBAAAA,cAAc;CAC5B,gBAAgBA,iBAAAA,cAAc;CAC9B,OAAOA,iBAAAA,cAAc;CACrB,eAAeA,iBAAAA,cAAc;CAC7B,UAAUA,iBAAAA,cAAc;CACzB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuBE,iBAAAA,yBACzB"}

package/lib/components/transfer/src/transfer-panel.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ const require_types = require("../../../utils/types.js");
 const require_index = require("../../../hooks/use-locale/index.js");
 const require_index$1 = require("../../../hooks/use-namespace/index.js");
 const require_index$2 = require("../../input/index.js");
+const require_fixed_size_list = require("../../virtual-list/src/components/fixed-size-list.js");
 const require_index$3 = require("../../checkbox/index.js");
 const require_transfer_panel = require("./transfer-panel.js");
 const require_use_props_alias = require("./composables/use-props-alias.js");
@@ -29,7 +30,7 @@ var transfer_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			checkChangeByUser: true
 		});
 		const propsAlias = require_use_props_alias.usePropsAlias(props);
-		const { filteredData, checkedSummary, isIndeterminate, handleAllCheckedChange } = require_use_check.useCheck(props, panelState, emit);
+		const { filteredData, checkedSummary, virtualListRef, isIndeterminate, checkboxGroupRef, virtualListHeight, handleAllCheckedChange } = require_use_check.useCheck(props, panelState, emit);
 		const hasNoMatch = (0, vue.computed)(() => !require_types.isEmpty(panelState.query) && require_types.isEmpty(filteredData.value));
 		const hasFooter = (0, vue.computed)(() => !require_types.isEmpty(slots.default()[0].children));
 		const { checked, allChecked, query } = (0, vue.toRefs)(panelState);
@@ -70,12 +71,14 @@ query });
 						"prefix-icon"
 					])) : (0, vue.createCommentVNode)("v-if", true),
 					(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$3.ElCheckboxGroup), {
+						ref_key: "checkboxGroupRef",
+						ref: checkboxGroupRef,
 						modelValue: (0, vue.unref)(checked),
 						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => (0, vue.isRef)(checked) ? checked.value = $event : null),
 						"validate-event": false,
 						class: (0, vue.normalizeClass)([(0, vue.unref)(ns).is("filterable", __props.filterable), (0, vue.unref)(ns).be("panel", "list")])
 					}, {
-						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(filteredData), (item) => {
+						default: (0, vue.withCtx)(() => [!__props.virtualScroll ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)((0, vue.unref)(filteredData), (item) => {
 							return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$3.ElCheckbox), {
 								key: item[(0, vue.unref)(propsAlias).key],
 								class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "item")),
@@ -90,7 +93,38 @@ query });
 								"value",
 								"disabled"
 							]);
-						}), 128))]),
+						}), 128)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_fixed_size_list.default), {
+							key: 1,
+							ref_key: "virtualListRef",
+							ref: virtualListRef,
+							data: (0, vue.unref)(filteredData),
+							total: (0, vue.unref)(filteredData).length,
+							"item-size": __props.itemSize,
+							height: (0, vue.unref)(virtualListHeight)
+						}, {
+							default: (0, vue.withCtx)(({ data, index, style }) => [((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+								key: data[index][(0, vue.unref)(propsAlias).key],
+								style: (0, vue.normalizeStyle)(style)
+							}, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElCheckbox), {
+								class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "item")),
+								value: data[index][(0, vue.unref)(propsAlias).key],
+								disabled: data[index][(0, vue.unref)(propsAlias).disabled],
+								"validate-event": false
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)(OptionContent, { option: __props.optionRender?.(data[index]) }, null, 8, ["option"])]),
+								_: 2
+							}, 1032, [
+								"class",
+								"value",
+								"disabled"
+							])], 4))]),
+							_: 1
+						}, 8, [
+							"data",
+							"total",
+							"item-size",
+							"height"
+						]))]),
 						_: 1
 					}, 8, ["modelValue", "class"]), [[vue.vShow, !hasNoMatch.value && !(0, vue.unref)(require_types.isEmpty)(__props.data)]]),
 					(0, vue.withDirectives)((0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "empty")) }, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(hasNoMatch.value ? (0, vue.unref)(t)("el.transfer.noMatch") : (0, vue.unref)(t)("el.transfer.noData")), 1)])], 2), [[vue.vShow, hasNoMatch.value || (0, vue.unref)(require_types.isEmpty)(__props.data)]])

package/lib/components/transfer/src/transfer-panel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b('panel')\">\n    <p :class=\"ns.be('panel', 'header')\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        :validate-event=\"false\"\n        @change=\"handleAllCheckedChange\"\n      >\n        <span :class=\"ns.be('panel', 'header-title')\">{{ title }}</span>\n        <span :class=\"ns.be('panel', 'header-count')\">\n          {{ checkedSummary }}\n        </span>\n      </el-checkbox>\n    </p>\n\n    <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        :class=\"ns.be('panel', 'filter')\"\n        size=\"default\"\n        :placeholder=\"placeholder\"\n        :prefix-icon=\"Search\"\n        clearable\n        :validate-event=\"false\"\n      />\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && !isEmpty(data)\"\n        v-model=\"checked\"\n        :validate-event=\"false\"\n        :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n      >\n        <el-checkbox\n          v-for=\"item in filteredData\"\n          :key=\"item[propsAlias.key]\"\n          :class=\"ns.be('panel', 'item')\"\n          :value=\"item[propsAlias.key]\"\n          :disabled=\"item[propsAlias.disabled]\"\n          :validate-event=\"false\"\n        >\n          <option-content :option=\"optionRender?.(item)\" />\n        </el-checkbox>\n      </el-checkbox-group>\n      <div\n        v-show=\"hasNoMatch || isEmpty(data)\"\n        :class=\"ns.be('panel', 'empty')\"\n      >\n        <slot name=\"empty\">\n          {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n        </slot>\n      </div>\n    </div>\n    <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty, mutable } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElInput } from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { transferPanelEmits } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferDataItem } from './transfer'\nimport type { TransferPanelProps, TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransferPanel',\n})\n\nconst props = withDefaults(defineProps<TransferPanelProps<T>>(), {\n  data: () => [],\n  format: () => ({}),\n  defaultChecked: () => [],\n  props: () =>\n    mutable({\n      label: 'label',\n      key: 'key',\n      disabled: 'disabled',\n    }),\n})\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option?: VNode | VNode[] }) => option\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\n\nconst panelState = reactive<TransferPanelState>({\n  checked: [],\n  allChecked: false,\n  query: '',\n  checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n  filteredData,\n  checkedSummary,\n  isIndeterminate,\n  handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n  () => !isEmpty(panelState.query) && isEmpty(filteredData.value)\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\n\nconst { checked, allChecked, query } = toRefs(panelState)\n\ndefineExpose({\n  /** @description filter keyword */\n  query,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"transfer-panel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b('panel')\">\n    <p :class=\"ns.be('panel', 'header')\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        :validate-event=\"false\"\n        @change=\"handleAllCheckedChange\"\n      >\n        <span :class=\"ns.be('panel', 'header-title')\">{{ title }}</span>\n        <span :class=\"ns.be('panel', 'header-count')\">\n          {{ checkedSummary }}\n        </span>\n      </el-checkbox>\n    </p>\n\n    <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        :class=\"ns.be('panel', 'filter')\"\n        size=\"default\"\n        :placeholder=\"placeholder\"\n        :prefix-icon=\"Search\"\n        clearable\n        :validate-event=\"false\"\n      />\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && !isEmpty(data)\"\n        ref=\"checkboxGroupRef\"\n        v-model=\"checked\"\n        :validate-event=\"false\"\n        :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n      >\n        <template v-if=\"!virtualScroll\">\n          <el-checkbox\n            v-for=\"item in filteredData\"\n            :key=\"item[propsAlias.key]\"\n            :class=\"ns.be('panel', 'item')\"\n            :value=\"item[propsAlias.key]\"\n            :disabled=\"item[propsAlias.disabled]\"\n            :validate-event=\"false\"\n          >\n            <option-content :option=\"optionRender?.(item)\" />\n          </el-checkbox>\n        </template>\n        <el-fixed-size-list\n          v-else\n          ref=\"virtualListRef\"\n          :data=\"filteredData\"\n          :total=\"filteredData.length\"\n          :item-size=\"itemSize\"\n          :height=\"virtualListHeight\"\n        >\n          <template #default=\"{ data, index, style }\">\n            <div :key=\"data[index][propsAlias.key]\" :style=\"style\">\n              <el-checkbox\n                :class=\"ns.be('panel', 'item')\"\n                :value=\"data[index][propsAlias.key]\"\n                :disabled=\"data[index][propsAlias.disabled]\"\n                :validate-event=\"false\"\n              >\n                <option-content :option=\"optionRender?.(data[index])\" />\n              </el-checkbox>\n            </div>\n          </template>\n        </el-fixed-size-list>\n      </el-checkbox-group>\n      <div\n        v-show=\"hasNoMatch || isEmpty(data)\"\n        :class=\"ns.be('panel', 'empty')\"\n      >\n        <slot name=\"empty\">\n          {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n        </slot>\n      </div>\n    </div>\n    <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty, mutable } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElInput } from '@element-plus/components/input'\nimport { FixedSizeList as ElFixedSizeList } from '@element-plus/components/virtual-list'\nimport { Search } from '@element-plus/icons-vue'\nimport { transferPanelEmits } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferDataItem } from './transfer'\nimport type { TransferPanelProps, TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransferPanel',\n})\n\nconst props = withDefaults(defineProps<TransferPanelProps<T>>(), {\n  data: () => [],\n  format: () => ({}),\n  defaultChecked: () => [],\n  props: () =>\n    mutable({\n      label: 'label',\n      key: 'key',\n      disabled: 'disabled',\n    }),\n  virtualScroll: false,\n  itemSize: 30,\n})\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option?: VNode | VNode[] }) => option\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\n\nconst panelState = reactive<TransferPanelState>({\n  checked: [],\n  allChecked: false,\n  query: '',\n  checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n  filteredData,\n  checkedSummary,\n  virtualListRef,\n  isIndeterminate,\n  checkboxGroupRef,\n  virtualListHeight,\n  handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n  () => !isEmpty(panelState.query) && isEmpty(filteredData.value)\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\n\nconst { checked, allChecked, query } = toRefs(panelState)\n\ndefineExpose({\n  /** @description filter keyword */\n  query,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAsGA,MAAM,QAAQ;EAad,MAAM,OAAO;EACb,MAAM,SAAA,GAAA,IAAA,WAAiB;EAEvB,MAAM,iBAAiB,EAAE,aAA2C;EAEpE,MAAM,EAAE,MAAM,cAAA,WAAU;EACxB,MAAM,KAAK,gBAAA,aAAa,WAAU;EAElC,MAAM,cAAA,GAAA,IAAA,UAA0C;GAC9C,SAAS,EAAE;GACX,YAAY;GACZ,OAAO;GACP,mBAAmB;GACpB,CAAA;EAED,MAAM,aAAa,wBAAA,cAAc,MAAK;EAEtC,MAAM,EACJ,cACA,gBACA,gBACA,iBACA,kBACA,mBACA,2BACE,kBAAA,SAAS,OAAO,YAAY,KAAI;EAEpC,MAAM,cAAA,GAAA,IAAA,gBACE,CAAC,cAAA,QAAQ,WAAW,MAAM,IAAI,cAAA,QAAQ,aAAa,MAAK,CAChE;EAEA,MAAM,aAAA,GAAA,IAAA,gBAA2B,CAAC,cAAA,QAAQ,MAAM,SAAU,CAAC,GAAG,SAAS,CAAA;EAEvE,MAAM,EAAE,SAAS,YAAY,WAAA,GAAA,IAAA,QAAiB,WAAU;EAExD,SAAa;;AAEX,OACD,CAAA;;4DAzEO,OAAA,EA/EA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA;gCAaX,KAAA,EAZA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,SAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAWA,gBAAA,WAAA,EAAA;gCATH,WAAU;+FAAV,WAAU,QAAA,SAAA;KAClB,gBAAA,GAAA,IAAA,OAAe,gBAAe;KAC9B,kBAAgB;KAChB,WAAA,GAAA,IAAA,OAAQ,uBAAA;;qCAEuD,EAAA,GAAA,IAAA,oBAAA,QAAA,EAAzD,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,eAAA,CAAA,EAAA,GAAA,GAAA,IAAA,iBAA8B,QAAA,MAAK,EAAA,EAAA,GAAA,GAAA,IAAA,oBAG/C,QAAA,EAFA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,eAAA,CAAA,EAAA,GAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,OACd,eAAc,CAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;gCAiEjB,OAAA,EA5DA,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,GAAE,SAAA,OAAA,GAAA,GAAA,IAAA,OAAmB,GAAE,CAAC,GAAE,eAAgB,UAAA,MAAS,CAAA,CAAA,EAAA,EAAA;KAE1D,QAAA,eAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAQN,gBAAA,QAAA,EAAA;;iCAPS,MAAK;2FAAL,MAAK,QAAA,SAAA;MACb,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,SAAA,CAAA;MACb,MAAK;MACJ,aAAa,QAAA;MACb,gBAAA,GAAA,IAAA,OAAa,wBAAA,OAAM;MACpB,WAAA;MACC,kBAAgB;;;;;;;iEA0CC,gBAAA,gBAAA,EAAA;eAtCd;MAAJ,KAAI;iCACK,QAAO;6FAAP,QAAO,QAAA,SAAA;MACf,kBAAgB;MAChB,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,GAAE,cAAe,QAAA,WAAU,GAAA,GAAA,IAAA,OAAG,GAAE,CAAC,GAAE,SAAA,OAAA,CAAA,CAAA;;sCAapC,CAAA,CAXM,QAAA,kBAAA,GAAA,IAAA,WAAA,KAAA,GAAA,GAAA,IAAA,oBAUD,IAAA,UAAA,EAAA,KAAA,GAAA,GAAA,GAAA,IAAA,aAAA,GAAA,IAAA,OARG,aAAY,GAApB,SAAI;wEAQC,gBAAA,WAAA,EAAA;QAPX,KAAK,MAAA,GAAA,IAAA,OAAK,WAAU,CAAC;QACrB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,OAAA,CAAA;QACZ,OAAO,MAAA,GAAA,IAAA,OAAK,WAAU,CAAC;QACvB,UAAU,MAAA,GAAA,IAAA,OAAK,WAAU,CAAC;QAC1B,kBAAgB;;wCAEgC,EAAA,GAAA,IAAA,aAAA,eAAA,EAAhC,QAAQ,QAAA,eAAe,KAAI,EAAA,EAAA,MAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;;;;;;;6EAuB3B,wBAAA,QAAA,EAAA;;gBAlBf;OAAJ,KAAI;OACH,OAAA,GAAA,IAAA,OAAM,aAAY;OAClB,QAAA,GAAA,IAAA,OAAO,aAAY,CAAC;OACpB,aAAW,QAAA;OACX,SAAA,GAAA,IAAA,OAAQ,kBAAA;;OAEE,UAAA,GAAA,IAAA,UAUH,EAVc,MAAM,OAAO,YAAK,GAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAUhC,OAAA;QATA,KAAK,KAAK,QAAA,GAAA,IAAA,OAAO,WAAU,CAAC;QAAO,QAAA,GAAA,IAAA,gBAAO,MAAK;+CAQrC,gBAAA,WAAA,EAAA;QANX,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,OAAA,CAAA;QACZ,OAAO,KAAK,QAAA,GAAA,IAAA,OAAO,WAAU,CAAC;QAC9B,UAAU,KAAK,QAAA,GAAA,IAAA,OAAO,WAAU,CAAC;QACjC,kBAAgB;;wCAEuC,EAAA,GAAA,IAAA,aAAA,eAAA,EAAvC,QAAQ,QAAA,eAAe,KAAK,OAAK,EAAA,EAAA,MAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;mDAlCjD,WAAA,SAAU,EAAA,GAAA,IAAA,OAAK,cAAA,QAAO,CAAC,QAAA,KAAI,CAAA,CAAA,CAAA;yDA+ChC,OAAA,EALH,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,QAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,YAIN,KAAA,QAAA,SAAA,EAAA,QAAA,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,iBADF,WAAA,SAAA,GAAA,IAAA,OAAa,EAAC,CAAA,sBAAA,IAAA,GAAA,IAAA,OAA0B,EAAC,CAAA,qBAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA,IAAA,OAJtC,WAAA,UAAA,GAAA,IAAA,OAAc,cAAA,QAAO,CAAC,QAAA,KAAI,CAAA,CAAA,CAAA;;IAQ7B,UAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEL,KAAA;;KAFiB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAE,SAAA,SAAA,CAAA;4BACvB,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,KAAA,GAAA,IAAA,oBAAA,QAAA,KAAA"}

package/lib/components/transfer/src/transfer-panel2.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel2.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b('panel')\">\n    <p :class=\"ns.be('panel', 'header')\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        :validate-event=\"false\"\n        @change=\"handleAllCheckedChange\"\n      >\n        <span :class=\"ns.be('panel', 'header-title')\">{{ title }}</span>\n        <span :class=\"ns.be('panel', 'header-count')\">\n          {{ checkedSummary }}\n        </span>\n      </el-checkbox>\n    </p>\n\n    <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        :class=\"ns.be('panel', 'filter')\"\n        size=\"default\"\n        :placeholder=\"placeholder\"\n        :prefix-icon=\"Search\"\n        clearable\n        :validate-event=\"false\"\n      />\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && !isEmpty(data)\"\n        v-model=\"checked\"\n        :validate-event=\"false\"\n        :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n      >\n        <el-checkbox\n          v-for=\"item in filteredData\"\n          :key=\"item[propsAlias.key]\"\n          :class=\"ns.be('panel', 'item')\"\n          :value=\"item[propsAlias.key]\"\n          :disabled=\"item[propsAlias.disabled]\"\n          :validate-event=\"false\"\n        >\n          <option-content :option=\"optionRender?.(item)\" />\n        </el-checkbox>\n      </el-checkbox-group>\n      <div\n        v-show=\"hasNoMatch || isEmpty(data)\"\n        :class=\"ns.be('panel', 'empty')\"\n      >\n        <slot name=\"empty\">\n          {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n        </slot>\n      </div>\n    </div>\n    <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty, mutable } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElInput } from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { transferPanelEmits } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferDataItem } from './transfer'\nimport type { TransferPanelProps, TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransferPanel',\n})\n\nconst props = withDefaults(defineProps<TransferPanelProps<T>>(), {\n  data: () => [],\n  format: () => ({}),\n  defaultChecked: () => [],\n  props: () =>\n    mutable({\n      label: 'label',\n      key: 'key',\n      disabled: 'disabled',\n    }),\n})\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option?: VNode | VNode[] }) => option\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\n\nconst panelState = reactive<TransferPanelState>({\n  checked: [],\n  allChecked: false,\n  query: '',\n  checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n  filteredData,\n  checkedSummary,\n  isIndeterminate,\n  handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n  () => !isEmpty(panelState.query) && isEmpty(filteredData.value)\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\n\nconst { checked, allChecked, query } = toRefs(panelState)\n\ndefineExpose({\n  /** @description filter keyword */\n  query,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"transfer-panel2.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b('panel')\">\n    <p :class=\"ns.be('panel', 'header')\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        :validate-event=\"false\"\n        @change=\"handleAllCheckedChange\"\n      >\n        <span :class=\"ns.be('panel', 'header-title')\">{{ title }}</span>\n        <span :class=\"ns.be('panel', 'header-count')\">\n          {{ checkedSummary }}\n        </span>\n      </el-checkbox>\n    </p>\n\n    <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        :class=\"ns.be('panel', 'filter')\"\n        size=\"default\"\n        :placeholder=\"placeholder\"\n        :prefix-icon=\"Search\"\n        clearable\n        :validate-event=\"false\"\n      />\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && !isEmpty(data)\"\n        ref=\"checkboxGroupRef\"\n        v-model=\"checked\"\n        :validate-event=\"false\"\n        :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n      >\n        <template v-if=\"!virtualScroll\">\n          <el-checkbox\n            v-for=\"item in filteredData\"\n            :key=\"item[propsAlias.key]\"\n            :class=\"ns.be('panel', 'item')\"\n            :value=\"item[propsAlias.key]\"\n            :disabled=\"item[propsAlias.disabled]\"\n            :validate-event=\"false\"\n          >\n            <option-content :option=\"optionRender?.(item)\" />\n          </el-checkbox>\n        </template>\n        <el-fixed-size-list\n          v-else\n          ref=\"virtualListRef\"\n          :data=\"filteredData\"\n          :total=\"filteredData.length\"\n          :item-size=\"itemSize\"\n          :height=\"virtualListHeight\"\n        >\n          <template #default=\"{ data, index, style }\">\n            <div :key=\"data[index][propsAlias.key]\" :style=\"style\">\n              <el-checkbox\n                :class=\"ns.be('panel', 'item')\"\n                :value=\"data[index][propsAlias.key]\"\n                :disabled=\"data[index][propsAlias.disabled]\"\n                :validate-event=\"false\"\n              >\n                <option-content :option=\"optionRender?.(data[index])\" />\n              </el-checkbox>\n            </div>\n          </template>\n        </el-fixed-size-list>\n      </el-checkbox-group>\n      <div\n        v-show=\"hasNoMatch || isEmpty(data)\"\n        :class=\"ns.be('panel', 'empty')\"\n      >\n        <slot name=\"empty\">\n          {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n        </slot>\n      </div>\n    </div>\n    <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty, mutable } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElInput } from '@element-plus/components/input'\nimport { FixedSizeList as ElFixedSizeList } from '@element-plus/components/virtual-list'\nimport { Search } from '@element-plus/icons-vue'\nimport { transferPanelEmits } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferDataItem } from './transfer'\nimport type { TransferPanelProps, TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransferPanel',\n})\n\nconst props = withDefaults(defineProps<TransferPanelProps<T>>(), {\n  data: () => [],\n  format: () => ({}),\n  defaultChecked: () => [],\n  props: () =>\n    mutable({\n      label: 'label',\n      key: 'key',\n      disabled: 'disabled',\n    }),\n  virtualScroll: false,\n  itemSize: 30,\n})\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option?: VNode | VNode[] }) => option\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\n\nconst panelState = reactive<TransferPanelState>({\n  checked: [],\n  allChecked: false,\n  query: '',\n  checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n  filteredData,\n  checkedSummary,\n  virtualListRef,\n  isIndeterminate,\n  checkboxGroupRef,\n  virtualListHeight,\n  handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n  () => !isEmpty(panelState.query) && isEmpty(filteredData.value)\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\n\nconst { checked, allChecked, query } = toRefs(panelState)\n\ndefineExpose({\n  /** @description filter keyword */\n  query,\n})\n</script>\n"],"mappings":""}

package/lib/components/transfer/src/transfer.d.ts

@@ -82,6 +82,14 @@ interface TransferProps<T extends TransferDataItem = TransferDataItem> {
    * @description whether to trigger form validation
    */
   validateEvent?: boolean;
+  /**
+   * @description whether to enable virtual scrolling
+   */
+  virtualScroll?: boolean;
+  /**
+   * @description line height for virtual scrolling
+   */
+  itemSize?: number;
 }
 /**
  * @deprecated Removed after 3.0.0, Use `TransferProps` instead.
@@ -115,6 +123,8 @@ declare const transferProps: {
   }>, boolean>;
   readonly targetOrder: EpPropFinalized<StringConstructor, "push" | "unshift" | "original", unknown, "original", boolean>;
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+  readonly virtualScroll: BooleanConstructor;
+  readonly itemSize: EpPropFinalized<NumberConstructor, unknown, unknown, 30, boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `TransferProps` instead.

package/lib/components/transfer/src/transfer.js

@@ -106,6 +106,17 @@ const transferProps = require_runtime$1.buildProps({
 	validateEvent: {
 		type: Boolean,
 		default: true
+	},
+	/**
+	* @description whether to enable virtual scrolling
+	*/
+	virtualScroll: Boolean,
+	/**
+	* @description line height for virtual scrolling
+	*/
+	itemSize: {
+		type: Number,
+		default: 30
 	}
 });
 const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(_vue_shared.isArray) || (0, _vue_shared.isArray)(value) && (0, lodash_unified.isNil)(movedKeys);

package/lib/components/transfer/src/transfer.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer.js","names":["buildProps","definePropType","mutable","isArray","CHANGE_EVENT","UPDATE_MODEL_EVENT"],"sources":["../../../../../../packages/components/transfer/src/transfer.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport {\n  buildProps,\n  definePropType,\n  isArray,\n  mutable,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type {\n  ComponentInstance,\n  ExtractPublicPropTypes,\n  h as H,\n  VNode,\n} from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type Transfer from './transfer.vue'\n\nexport type TransferKey = string | number\nexport type TransferDirection = 'left' | 'right'\n\nexport type TransferDataItem = Record<string, any>\n\nexport type renderContent<T extends TransferDataItem = TransferDataItem> = (\n  h: typeof H,\n  option: T\n) => VNode | VNode[]\n\nexport interface TransferFormat {\n  noChecked?: string\n  hasChecked?: string\n}\n\nexport interface TransferPropsAlias {\n  label?: string\n  key?: string\n  disabled?: string\n}\n\nexport interface TransferCheckedState {\n  leftChecked: TransferKey[]\n  rightChecked: TransferKey[]\n}\n\nexport const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'\nexport const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change'\n\nexport interface TransferProps<T extends TransferDataItem = TransferDataItem> {\n  /**\n   * @description data source\n   */\n  data?: T[]\n  /**\n   * @description custom list titles\n   */\n  titles?: [string, string]\n  /**\n   * @description custom button texts\n   */\n  buttonTexts?: [string, string]\n  /**\n   * @description placeholder for the filter input\n   */\n  filterPlaceholder?: string\n  /**\n   * @description custom filter method\n   */\n  filterMethod?: (query: string, item: T) => boolean\n  /**\n   * @description key array of initially checked data items of the left list\n   */\n  leftDefaultChecked?: TransferKey[]\n  /**\n   * @description key array of initially checked data items of the right list\n   */\n  rightDefaultChecked?: TransferKey[]\n  /**\n   * @description custom render function for data items\n   */\n  renderContent?: renderContent<T>\n  /**\n   * @description binding value\n   */\n  modelValue?: TransferKey[]\n  /**\n   * @description texts for checking status in list header\n   */\n  format?: TransferFormat\n  /**\n   * @description whether Transfer is filterable\n   */\n  filterable?: boolean\n  /**\n   * @description prop aliases for data source\n   */\n  props?: TransferPropsAlias\n  /**\n   * @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top\n   */\n  targetOrder?: 'original' | 'push' | 'unshift'\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferProps` instead.\n */\nexport const transferProps = buildProps({\n  /**\n   * @description data source\n   */\n  data: {\n    type: definePropType<TransferDataItem[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom list titles\n   */\n  titles: {\n    type: definePropType<[string, string]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom button texts\n   */\n  buttonTexts: {\n    type: definePropType<[string, string]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description placeholder for the filter input\n   */\n  filterPlaceholder: String,\n  /**\n   * @description custom filter method\n   */\n  filterMethod: {\n    type: definePropType<(query: string, item: TransferDataItem) => boolean>(\n      Function\n    ),\n  },\n  /**\n   * @description key array of initially checked data items of the left list\n   */\n  leftDefaultChecked: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description key array of initially checked data items of the right list\n   */\n  rightDefaultChecked: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom render function for data items\n   */\n  renderContent: {\n    type: definePropType<renderContent>(Function),\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description texts for checking status in list header\n   */\n  format: {\n    type: definePropType<TransferFormat>(Object),\n    default: () => ({}),\n  },\n  /**\n   * @description whether Transfer is filterable\n   */\n  filterable: Boolean,\n  /**\n   * @description prop aliases for data source\n   */\n  props: {\n    type: definePropType<TransferPropsAlias>(Object),\n    default: () =>\n      mutable({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      } as const),\n  },\n  /**\n   * @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top\n   */\n  targetOrder: {\n    type: String,\n    values: ['original', 'push', 'unshift'],\n    default: 'original',\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferProps` instead.\n */\nexport type TransferPropsPublic = ExtractPublicPropTypes<typeof transferProps>\n\nexport const transferCheckedChangeFn = (\n  value: TransferKey[],\n  movedKeys?: TransferKey[]\n) => [value, movedKeys].every(isArray) || (isArray(value) && isNil(movedKeys))\n\nexport const transferEmits = {\n  [CHANGE_EVENT]: (\n    value: TransferKey[],\n    direction: TransferDirection,\n    movedKeys: TransferKey[]\n  ) =>\n    [value, movedKeys].every(isArray) && ['left', 'right'].includes(direction),\n  [UPDATE_MODEL_EVENT]: (value: TransferKey[]) => isArray(value),\n  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,\n  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferEmits = typeof transferEmits\n\nexport type TransferInstance = ComponentInstance<typeof Transfer> &\n  ComponentExposed<typeof Transfer>\n"],"mappings":";;;;;;;;AA4CA,MAAa,0BAA0B;AACvC,MAAa,2BAA2B;;;;AAgExC,MAAa,gBAAgBA,kBAAAA,WAAW;;;;CAItC,MAAM;EACJ,MAAMC,kBAAAA,eAAmC,MAAM;EAC/C,eAAe,EAAE;EAClB;;;;CAID,QAAQ;EACN,MAAMA,kBAAAA,eAAiC,MAAM;EAC7C,eAAe,EAAE;EAClB;;;;CAID,aAAa;EACX,MAAMA,kBAAAA,eAAiC,MAAM;EAC7C,eAAe,EAAE;EAClB;;;;CAID,mBAAmB;;;;CAInB,cAAc,EACZ,MAAMA,kBAAAA,eACJ,SACD,EACF;;;;CAID,oBAAoB;EAClB,MAAMA,kBAAAA,eAA8B,MAAM;EAC1C,eAAe,EAAE;EAClB;;;;CAID,qBAAqB;EACnB,MAAMA,kBAAAA,eAA8B,MAAM;EAC1C,eAAe,EAAE;EAClB;;;;CAID,eAAe,EACb,MAAMA,kBAAAA,eAA8B,SAAS,EAC9C;;;;CAID,YAAY;EACV,MAAMA,kBAAAA,eAA8B,MAAM;EAC1C,eAAe,EAAE;EAClB;;;;CAID,QAAQ;EACN,MAAMA,kBAAAA,eAA+B,OAAO;EAC5C,gBAAgB,EAAE;EACnB;;;;CAID,YAAY;;;;CAIZ,OAAO;EACL,MAAMA,kBAAAA,eAAmC,OAAO;EAChD,eACEC,mBAAAA,QAAQ;GACN,OAAO;GACP,KAAK;GACL,UAAU;GACX,CAAU;EACd;;;;CAID,aAAa;EACX,MAAM;EACN,QAAQ;GAAC;GAAY;GAAQ;GAAU;EACvC,SAAS;EACV;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAOX,MAAa,2BACX,OACA,cACG,CAAC,OAAO,UAAU,CAAC,MAAMC,YAAAA,QAAQ,KAAA,GAAA,YAAA,SAAa,MAAM,KAAA,GAAA,eAAA,OAAU,UAAU;AAE7E,MAAa,gBAAgB;EAC1BC,cAAAA,gBACC,OACA,WACA,cAEA,CAAC,OAAO,UAAU,CAAC,MAAMD,YAAAA,QAAQ,IAAI,CAAC,QAAQ,QAAQ,CAAC,SAAS,UAAU;EAC3EE,cAAAA,sBAAsB,WAAA,GAAA,YAAA,SAAiC,MAAM;EAC7D,0BAA0B;EAC1B,2BAA2B;CAC7B"}
+{"version":3,"file":"transfer.js","names":["buildProps","definePropType","mutable","isArray","CHANGE_EVENT","UPDATE_MODEL_EVENT"],"sources":["../../../../../../packages/components/transfer/src/transfer.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport {\n  buildProps,\n  definePropType,\n  isArray,\n  mutable,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type {\n  ComponentInstance,\n  ExtractPublicPropTypes,\n  h as H,\n  VNode,\n} from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type Transfer from './transfer.vue'\n\nexport type TransferKey = string | number\nexport type TransferDirection = 'left' | 'right'\n\nexport type TransferDataItem = Record<string, any>\n\nexport type renderContent<T extends TransferDataItem = TransferDataItem> = (\n  h: typeof H,\n  option: T\n) => VNode | VNode[]\n\nexport interface TransferFormat {\n  noChecked?: string\n  hasChecked?: string\n}\n\nexport interface TransferPropsAlias {\n  label?: string\n  key?: string\n  disabled?: string\n}\n\nexport interface TransferCheckedState {\n  leftChecked: TransferKey[]\n  rightChecked: TransferKey[]\n}\n\nexport const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'\nexport const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change'\n\nexport interface TransferProps<T extends TransferDataItem = TransferDataItem> {\n  /**\n   * @description data source\n   */\n  data?: T[]\n  /**\n   * @description custom list titles\n   */\n  titles?: [string, string]\n  /**\n   * @description custom button texts\n   */\n  buttonTexts?: [string, string]\n  /**\n   * @description placeholder for the filter input\n   */\n  filterPlaceholder?: string\n  /**\n   * @description custom filter method\n   */\n  filterMethod?: (query: string, item: T) => boolean\n  /**\n   * @description key array of initially checked data items of the left list\n   */\n  leftDefaultChecked?: TransferKey[]\n  /**\n   * @description key array of initially checked data items of the right list\n   */\n  rightDefaultChecked?: TransferKey[]\n  /**\n   * @description custom render function for data items\n   */\n  renderContent?: renderContent<T>\n  /**\n   * @description binding value\n   */\n  modelValue?: TransferKey[]\n  /**\n   * @description texts for checking status in list header\n   */\n  format?: TransferFormat\n  /**\n   * @description whether Transfer is filterable\n   */\n  filterable?: boolean\n  /**\n   * @description prop aliases for data source\n   */\n  props?: TransferPropsAlias\n  /**\n   * @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top\n   */\n  targetOrder?: 'original' | 'push' | 'unshift'\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description whether to enable virtual scrolling\n   */\n  virtualScroll?: boolean\n  /**\n   * @description line height for virtual scrolling\n   */\n  itemSize?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferProps` instead.\n */\nexport const transferProps = buildProps({\n  /**\n   * @description data source\n   */\n  data: {\n    type: definePropType<TransferDataItem[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom list titles\n   */\n  titles: {\n    type: definePropType<[string, string]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom button texts\n   */\n  buttonTexts: {\n    type: definePropType<[string, string]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description placeholder for the filter input\n   */\n  filterPlaceholder: String,\n  /**\n   * @description custom filter method\n   */\n  filterMethod: {\n    type: definePropType<(query: string, item: TransferDataItem) => boolean>(\n      Function\n    ),\n  },\n  /**\n   * @description key array of initially checked data items of the left list\n   */\n  leftDefaultChecked: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description key array of initially checked data items of the right list\n   */\n  rightDefaultChecked: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom render function for data items\n   */\n  renderContent: {\n    type: definePropType<renderContent>(Function),\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description texts for checking status in list header\n   */\n  format: {\n    type: definePropType<TransferFormat>(Object),\n    default: () => ({}),\n  },\n  /**\n   * @description whether Transfer is filterable\n   */\n  filterable: Boolean,\n  /**\n   * @description prop aliases for data source\n   */\n  props: {\n    type: definePropType<TransferPropsAlias>(Object),\n    default: () =>\n      mutable({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      } as const),\n  },\n  /**\n   * @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top\n   */\n  targetOrder: {\n    type: String,\n    values: ['original', 'push', 'unshift'],\n    default: 'original',\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to enable virtual scrolling\n   */\n  virtualScroll: Boolean,\n  /**\n   * @description line height for virtual scrolling\n   */\n  itemSize: {\n    type: Number,\n    default: 30,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferProps` instead.\n */\nexport type TransferPropsPublic = ExtractPublicPropTypes<typeof transferProps>\n\nexport const transferCheckedChangeFn = (\n  value: TransferKey[],\n  movedKeys?: TransferKey[]\n) => [value, movedKeys].every(isArray) || (isArray(value) && isNil(movedKeys))\n\nexport const transferEmits = {\n  [CHANGE_EVENT]: (\n    value: TransferKey[],\n    direction: TransferDirection,\n    movedKeys: TransferKey[]\n  ) =>\n    [value, movedKeys].every(isArray) && ['left', 'right'].includes(direction),\n  [UPDATE_MODEL_EVENT]: (value: TransferKey[]) => isArray(value),\n  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,\n  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferEmits = typeof transferEmits\n\nexport type TransferInstance = ComponentInstance<typeof Transfer> &\n  ComponentExposed<typeof Transfer>\n"],"mappings":";;;;;;;;AA4CA,MAAa,0BAA0B;AACvC,MAAa,2BAA2B;;;;AAwExC,MAAa,gBAAgBA,kBAAAA,WAAW;;;;CAItC,MAAM;EACJ,MAAMC,kBAAAA,eAAmC,MAAM;EAC/C,eAAe,EAAE;EAClB;;;;CAID,QAAQ;EACN,MAAMA,kBAAAA,eAAiC,MAAM;EAC7C,eAAe,EAAE;EAClB;;;;CAID,aAAa;EACX,MAAMA,kBAAAA,eAAiC,MAAM;EAC7C,eAAe,EAAE;EAClB;;;;CAID,mBAAmB;;;;CAInB,cAAc,EACZ,MAAMA,kBAAAA,eACJ,SACD,EACF;;;;CAID,oBAAoB;EAClB,MAAMA,kBAAAA,eAA8B,MAAM;EAC1C,eAAe,EAAE;EAClB;;;;CAID,qBAAqB;EACnB,MAAMA,kBAAAA,eAA8B,MAAM;EAC1C,eAAe,EAAE;EAClB;;;;CAID,eAAe,EACb,MAAMA,kBAAAA,eAA8B,SAAS,EAC9C;;;;CAID,YAAY;EACV,MAAMA,kBAAAA,eAA8B,MAAM;EAC1C,eAAe,EAAE;EAClB;;;;CAID,QAAQ;EACN,MAAMA,kBAAAA,eAA+B,OAAO;EAC5C,gBAAgB,EAAE;EACnB;;;;CAID,YAAY;;;;CAIZ,OAAO;EACL,MAAMA,kBAAAA,eAAmC,OAAO;EAChD,eACEC,mBAAAA,QAAQ;GACN,OAAO;GACP,KAAK;GACL,UAAU;GACX,CAAU;EACd;;;;CAID,aAAa;EACX,MAAM;EACN,QAAQ;GAAC;GAAY;GAAQ;GAAU;EACvC,SAAS;EACV;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;;;;CAID,eAAe;;;;CAIf,UAAU;EACR,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAOX,MAAa,2BACX,OACA,cACG,CAAC,OAAO,UAAU,CAAC,MAAMC,YAAAA,QAAQ,KAAA,GAAA,YAAA,SAAa,MAAM,KAAA,GAAA,eAAA,OAAU,UAAU;AAE7E,MAAa,gBAAgB;EAC1BC,cAAAA,gBACC,OACA,WACA,cAEA,CAAC,OAAO,UAAU,CAAC,MAAMD,YAAAA,QAAQ,IAAI,CAAC,QAAQ,QAAQ,CAAC,SAAS,UAAU;EAC3EE,cAAAA,sBAAsB,WAAA,GAAA,YAAA,SAAiC,MAAM;EAC7D,0BAA0B;EAC1B,2BAA2B;CAC7B"}

package/lib/components/transfer/src/transfer.vue.d.ts

@@ -6,8 +6,8 @@ import { VNode } from "vue";
 //#region ../../packages/components/transfer/src/transfer.vue.d.ts
 declare const __VLS_export: <T extends TransferDataItem = TransferDataItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<TransferProps<T> & {
-    "onUpdate:modelValue"?: ((value: TransferKey[]) => any) | undefined;
     onChange?: ((value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TransferKey[]) => any) | undefined;
     "onLeft-check-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
     "onRight-check-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
   }> & (typeof globalThis extends {

package/lib/components/transfer/src/transfer.vue_vue_type_script_setup_true_lang.js

@@ -84,6 +84,8 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 					"filter-method": __props.filterMethod,
 					"default-checked": __props.leftDefaultChecked,
 					props: props.props,
+					"virtual-scroll": __props.virtualScroll,
+					"item-size": __props.itemSize,
 					onCheckedChange: (0, vue.unref)(onSourceCheckedChange)
 				}, {
 					empty: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "left-empty")]),
@@ -99,6 +101,8 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 					"filter-method",
 					"default-checked",
 					"props",
+					"virtual-scroll",
+					"item-size",
 					"onCheckedChange"
 				]),
 				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("buttons")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElButton), {
@@ -144,6 +148,8 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 					title: rightPanelTitle.value,
 					"default-checked": __props.rightDefaultChecked,
 					props: props.props,
+					"virtual-scroll": __props.virtualScroll,
+					"item-size": __props.itemSize,
 					onCheckedChange: (0, vue.unref)(onTargetCheckedChange)
 				}, {
 					empty: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "right-empty")]),
@@ -159,6 +165,8 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 					"title",
 					"default-checked",
 					"props",
+					"virtual-scroll",
+					"item-size",
 					"onCheckedChange"
 				])
 			], 2);

package/lib/components/transfer/src/transfer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props.props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"left-empty\" />\n      </template>\n      <slot name=\"left-footer\" />\n    </transfer-panel>\n    <div :class=\"ns.e('buttons')\">\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.rightChecked)\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.leftChecked)\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"!isUndefined(buttonTexts[1])\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props.props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"right-empty\" />\n      </template>\n      <slot name=\"right-footer\" />\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { Comment, computed, h, reactive, ref, watch } from 'vue'\nimport { NOOP, isEmpty, isUndefined } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useFormItem } from '@element-plus/components/form'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { transferEmits } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type { VNode } from 'vue'\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n  TransferProps,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransfer',\n})\n\nconst props = withDefaults(defineProps<TransferProps<T>>(), {\n  data: () => [],\n  titles: () => [] as unknown as [string, string],\n  buttonTexts: () => [] as unknown as [string, string],\n  leftDefaultChecked: () => [],\n  rightDefaultChecked: () => [],\n  modelValue: () => [],\n  format: () => ({}),\n  props: () => ({\n    label: 'label',\n    key: 'key',\n    disabled: 'disabled',\n  }),\n  targetOrder: 'original',\n  validateEvent: true,\n})\nconst emit = defineEmits(transferEmits)\nconst slots = defineSlots<{\n  default?: (props: { option: T }) => VNode[]\n  'left-empty'?: () => VNode[]\n  'left-footer'?: () => VNode[]\n  'right-empty'?: () => VNode[]\n  'right-footer'?: () => VNode[]\n}>()\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n  leftChecked: [],\n  rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n  checkedState,\n  emit\n)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n  switch (which) {\n    case 'left':\n      leftPanel.value!.query = ''\n      break\n    case 'right':\n      rightPanel.value!.query = ''\n      break\n  }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n  () => props.titles[0] || t('el.transfer.titles.0')\n)\n\nconst rightPanelTitle = computed(\n  () => props.titles[1] || t('el.transfer.titles.1')\n)\n\nconst panelFilterPlaceholder = computed(\n  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nconst optionRender = computed(() => (option: T) => {\n  if (props.renderContent) return props.renderContent(h, option)\n\n  const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(\n    (node) => node.type !== Comment\n  )\n  if (defaultSlotVNodes.length) {\n    return defaultSlotVNodes\n  }\n\n  return h(\n    'span',\n    option[propsAlias.value.label] || option[propsAlias.value.key]\n  )\n})\n\ndefineExpose({\n  /** @description clear the filter keyword of a certain panel */\n  clearQuery,\n  /** @description left panel ref */\n  leftPanel,\n  /** @description right panel ref */\n  rightPanel,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"transfer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props.props\"\n      :virtual-scroll=\"virtualScroll\"\n      :item-size=\"itemSize\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"left-empty\" />\n      </template>\n      <slot name=\"left-footer\" />\n    </transfer-panel>\n    <div :class=\"ns.e('buttons')\">\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.rightChecked)\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.leftChecked)\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"!isUndefined(buttonTexts[1])\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props.props\"\n      :virtual-scroll=\"virtualScroll\"\n      :item-size=\"itemSize\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"right-empty\" />\n      </template>\n      <slot name=\"right-footer\" />\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { Comment, computed, h, reactive, ref, watch } from 'vue'\nimport { NOOP, isEmpty, isUndefined } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useFormItem } from '@element-plus/components/form'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { transferEmits } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type { VNode } from 'vue'\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n  TransferProps,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransfer',\n})\n\nconst props = withDefaults(defineProps<TransferProps<T>>(), {\n  data: () => [],\n  titles: () => [] as unknown as [string, string],\n  buttonTexts: () => [] as unknown as [string, string],\n  leftDefaultChecked: () => [],\n  rightDefaultChecked: () => [],\n  modelValue: () => [],\n  format: () => ({}),\n  props: () => ({\n    label: 'label',\n    key: 'key',\n    disabled: 'disabled',\n  }),\n  targetOrder: 'original',\n  validateEvent: true,\n  virtualScroll: false,\n  itemSize: 30,\n})\nconst emit = defineEmits(transferEmits)\nconst slots = defineSlots<{\n  default?: (props: { option: T }) => VNode[]\n  'left-empty'?: () => VNode[]\n  'left-footer'?: () => VNode[]\n  'right-empty'?: () => VNode[]\n  'right-footer'?: () => VNode[]\n}>()\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n  leftChecked: [],\n  rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n  checkedState,\n  emit\n)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n  switch (which) {\n    case 'left':\n      leftPanel.value!.query = ''\n      break\n    case 'right':\n      rightPanel.value!.query = ''\n      break\n  }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n  () => props.titles[0] || t('el.transfer.titles.0')\n)\n\nconst rightPanelTitle = computed(\n  () => props.titles[1] || t('el.transfer.titles.1')\n)\n\nconst panelFilterPlaceholder = computed(\n  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nconst optionRender = computed(() => (option: T) => {\n  if (props.renderContent) return props.renderContent(h, option)\n\n  const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(\n    (node) => node.type !== Comment\n  )\n  if (defaultSlotVNodes.length) {\n    return defaultSlotVNodes\n  }\n\n  return h(\n    'span',\n    option[propsAlias.value.label] || option[propsAlias.value.key]\n  )\n})\n\ndefineExpose({\n  /** @description clear the filter keyword of a certain panel */\n  clearQuery,\n  /** @description left panel ref */\n  leftPanel,\n  /** @description right panel ref */\n  rightPanel,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+FA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EACb,MAAM,SAAA,GAAA,IAAA,WAAQ;EAQd,MAAM,EAAE,MAAM,cAAA,WAAU;EACxB,MAAM,KAAK,gBAAA,aAAa,WAAU;EAClC,MAAM,EAAE,aAAa,sBAAA,aAAY;EAEjC,MAAM,gBAAA,GAAA,IAAA,UAA8C;GAClD,aAAa,EAAE;GACf,cAAc,EAAE;GACjB,CAAA;EAED,MAAM,aAAa,wBAAA,cAAc,MAAK;EAEtC,MAAM,EAAE,YAAY,eAAe,0BAAA,gBAAgB,MAAK;EAExD,MAAM,EAAE,uBAAuB,0BAA0B,2BAAA,iBACvD,cACA,KACF;EAEA,MAAM,EAAE,WAAW,eAAe,iBAAA,QAAQ,OAAO,cAAc,KAAI;EAEnE,MAAM,aAAA,GAAA,IAAA,MAAuC;EAC7C,MAAM,cAAA,GAAA,IAAA,MAAwC;EAE9C,MAAM,cAAc,UAA6B;GAC/C,QAAQ,OAAR;IACE,KAAK;KACH,UAAU,MAAO,QAAQ;KACzB;IACF,KAAK;KACH,WAAW,MAAO,QAAQ;KAC1B;;;EAIN,MAAM,kBAAA,GAAA,IAAA,gBAAgC,MAAM,YAAY,WAAW,EAAC;EAEpE,MAAM,kBAAA,GAAA,IAAA,gBACE,MAAM,OAAO,MAAM,EAAE,uBAAsB,CACnD;EAEA,MAAM,mBAAA,GAAA,IAAA,gBACE,MAAM,OAAO,MAAM,EAAE,uBAAsB,CACnD;EAEA,MAAM,0BAAA,GAAA,IAAA,gBACE,MAAM,qBAAqB,EAAE,gCAA+B,CACpE;EAEA,CAAA,GAAA,IAAA,aACQ,MAAM,kBACN;GACJ,IAAI,MAAM,eACR,UAAU,WAAW,SAAS,CAAC,MAAM,YAAA,KAAI;IAG/C;EAEA,MAAM,gBAAA,GAAA,IAAA,iBAA+B,WAAc;GACjD,IAAI,MAAM,eAAe,OAAO,MAAM,cAAc,IAAA,GAAG,OAAM;GAE7D,MAAM,qBAAqB,MAAM,UAAU,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,QAC3D,SAAS,KAAK,SAAS,IAAA,QAC1B;GACA,IAAI,kBAAkB,QACpB,OAAO;GAGT,QAAA,GAAA,IAAA,GACE,QACA,OAAO,WAAW,MAAM,UAAU,OAAO,WAAW,MAAM,KAC5D;IACD;EAED,SAAa;;GAEX;;GAEA;;GAEA;GACD,CAAA;;4DA5IO,OAAA,EA7DA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,GAAC,CAAA,EAAA,EAAA;yBAoBE,uBAAA,SAAA;cAlBX;KAAJ,KAAI;KACH,OAAA,GAAA,IAAA,OAAM,WAAU;KAChB,iBAAe,aAAA;KACf,aAAa,uBAAA;KACb,OAAO,eAAA;KACP,YAAY,QAAA;KACZ,QAAQ,QAAA;KACR,iBAAe,QAAA;KACf,mBAAiB,QAAA;KACjB,OAAO,MAAM;KACb,kBAAgB,QAAA;KAChB,aAAW,QAAA;KACX,kBAAA,GAAA,IAAA,OAAgB,sBAAA;;KAEN,QAAA,GAAA,IAAA,eACiB,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,aAAA,CAAA,CAAA;qCAED,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,cAAA,CAAA,CAAA;;;;;;;;;;;;;;;;gCAqBvB,OAAA,EAnBA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,EAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OASH,gBAAA,SAAA,EAAA;KAPV,MAAK;KACJ,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,EAAC,SAAA,GAAA,GAAA,IAAA,OAAY,GAAE,CAAC,GAAE,cAAe,eAAA,MAAc,CAAA,CAAA;KAC1D,WAAA,GAAA,IAAA,OAAU,cAAA,QAAO,CAAC,aAAa,aAAY;KAC3C,UAAA,GAAA,IAAA,OAAO,UAAA;;qCAEyB,EAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAAA,gBAAA,OAAA,EAAA,MAAA;sCAAV,EAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAAA,wBAAA,UAAA,CAAA,CAAA,CAAA;;yBACV,cAAA,YAAW,CAAC,QAAA,YAAW,GAAA,KAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAAiC,QAAA,aAAA,GAAA,IAAA,iBAAxB,QAAA,YAAW,GAAA,EAAA,EAAA,KAAA,GAAA,IAAA,oBAAA,QAAA,KAAA,CAAA,CAAA;;;;;;4CAU9C,gBAAA,SAAA,EAAA;KAPV,MAAK;KACJ,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,EAAC,SAAA,GAAA,GAAA,IAAA,OAAY,GAAE,CAAC,GAAE,cAAe,eAAA,MAAc,CAAA,CAAA;KAC1D,WAAA,GAAA,IAAA,OAAU,cAAA,QAAO,CAAC,aAAa,YAAW;KAC1C,UAAA,GAAA,IAAA,OAAO,WAAA;;qCAE6D,CAAA,EAAA,GAAA,IAAA,OAAxD,cAAA,YAAW,CAAC,QAAA,YAAW,GAAA,KAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAAiC,QAAA,aAAA,GAAA,IAAA,iBAAxB,QAAA,YAAW,GAAA,EAAA,EAAA,KAAA,GAAA,IAAA,oBAAA,QAAA,KAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OACtB,gBAAA,OAAA,EAAA,MAAA;sCAAV,EAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAAA,wBAAA,WAAA,CAAA,CAAA,CAAA;;;;;;;;;yBAsBX,uBAAA,SAAA;cAlBX;KAAJ,KAAI;KACH,OAAA,GAAA,IAAA,OAAM,WAAU;KAChB,iBAAe,aAAA;KACf,aAAa,uBAAA;KACb,YAAY,QAAA;KACZ,QAAQ,QAAA;KACR,iBAAe,QAAA;KACf,OAAO,gBAAA;KACP,mBAAiB,QAAA;KACjB,OAAO,MAAM;KACb,kBAAgB,QAAA;KAChB,aAAW,QAAA;KACX,kBAAA,GAAA,IAAA,OAAgB,sBAAA;;KAEN,QAAA,GAAA,IAAA,eACkB,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,cAAA,CAAA,CAAA;qCAED,EAAA,GAAA,IAAA,YAAA,KAAA,QAAA,eAAA,CAAA,CAAA"}

package/lib/components/transfer/src/transfer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer2.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props.props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"left-empty\" />\n      </template>\n      <slot name=\"left-footer\" />\n    </transfer-panel>\n    <div :class=\"ns.e('buttons')\">\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.rightChecked)\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.leftChecked)\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"!isUndefined(buttonTexts[1])\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props.props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"right-empty\" />\n      </template>\n      <slot name=\"right-footer\" />\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { Comment, computed, h, reactive, ref, watch } from 'vue'\nimport { NOOP, isEmpty, isUndefined } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useFormItem } from '@element-plus/components/form'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { transferEmits } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type { VNode } from 'vue'\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n  TransferProps,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransfer',\n})\n\nconst props = withDefaults(defineProps<TransferProps<T>>(), {\n  data: () => [],\n  titles: () => [] as unknown as [string, string],\n  buttonTexts: () => [] as unknown as [string, string],\n  leftDefaultChecked: () => [],\n  rightDefaultChecked: () => [],\n  modelValue: () => [],\n  format: () => ({}),\n  props: () => ({\n    label: 'label',\n    key: 'key',\n    disabled: 'disabled',\n  }),\n  targetOrder: 'original',\n  validateEvent: true,\n})\nconst emit = defineEmits(transferEmits)\nconst slots = defineSlots<{\n  default?: (props: { option: T }) => VNode[]\n  'left-empty'?: () => VNode[]\n  'left-footer'?: () => VNode[]\n  'right-empty'?: () => VNode[]\n  'right-footer'?: () => VNode[]\n}>()\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n  leftChecked: [],\n  rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n  checkedState,\n  emit\n)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n  switch (which) {\n    case 'left':\n      leftPanel.value!.query = ''\n      break\n    case 'right':\n      rightPanel.value!.query = ''\n      break\n  }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n  () => props.titles[0] || t('el.transfer.titles.0')\n)\n\nconst rightPanelTitle = computed(\n  () => props.titles[1] || t('el.transfer.titles.1')\n)\n\nconst panelFilterPlaceholder = computed(\n  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nconst optionRender = computed(() => (option: T) => {\n  if (props.renderContent) return props.renderContent(h, option)\n\n  const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(\n    (node) => node.type !== Comment\n  )\n  if (defaultSlotVNodes.length) {\n    return defaultSlotVNodes\n  }\n\n  return h(\n    'span',\n    option[propsAlias.value.label] || option[propsAlias.value.key]\n  )\n})\n\ndefineExpose({\n  /** @description clear the filter keyword of a certain panel */\n  clearQuery,\n  /** @description left panel ref */\n  leftPanel,\n  /** @description right panel ref */\n  rightPanel,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"transfer2.js","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props.props\"\n      :virtual-scroll=\"virtualScroll\"\n      :item-size=\"itemSize\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"left-empty\" />\n      </template>\n      <slot name=\"left-footer\" />\n    </transfer-panel>\n    <div :class=\"ns.e('buttons')\">\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.rightChecked)\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.leftChecked)\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"!isUndefined(buttonTexts[1])\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props.props\"\n      :virtual-scroll=\"virtualScroll\"\n      :item-size=\"itemSize\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"right-empty\" />\n      </template>\n      <slot name=\"right-footer\" />\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { Comment, computed, h, reactive, ref, watch } from 'vue'\nimport { NOOP, isEmpty, isUndefined } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useFormItem } from '@element-plus/components/form'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { transferEmits } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type { VNode } from 'vue'\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n  TransferProps,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransfer',\n})\n\nconst props = withDefaults(defineProps<TransferProps<T>>(), {\n  data: () => [],\n  titles: () => [] as unknown as [string, string],\n  buttonTexts: () => [] as unknown as [string, string],\n  leftDefaultChecked: () => [],\n  rightDefaultChecked: () => [],\n  modelValue: () => [],\n  format: () => ({}),\n  props: () => ({\n    label: 'label',\n    key: 'key',\n    disabled: 'disabled',\n  }),\n  targetOrder: 'original',\n  validateEvent: true,\n  virtualScroll: false,\n  itemSize: 30,\n})\nconst emit = defineEmits(transferEmits)\nconst slots = defineSlots<{\n  default?: (props: { option: T }) => VNode[]\n  'left-empty'?: () => VNode[]\n  'left-footer'?: () => VNode[]\n  'right-empty'?: () => VNode[]\n  'right-footer'?: () => VNode[]\n}>()\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n  leftChecked: [],\n  rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n  checkedState,\n  emit\n)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n  switch (which) {\n    case 'left':\n      leftPanel.value!.query = ''\n      break\n    case 'right':\n      rightPanel.value!.query = ''\n      break\n  }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n  () => props.titles[0] || t('el.transfer.titles.0')\n)\n\nconst rightPanelTitle = computed(\n  () => props.titles[1] || t('el.transfer.titles.1')\n)\n\nconst panelFilterPlaceholder = computed(\n  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(NOOP)\n    }\n  }\n)\n\nconst optionRender = computed(() => (option: T) => {\n  if (props.renderContent) return props.renderContent(h, option)\n\n  const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(\n    (node) => node.type !== Comment\n  )\n  if (defaultSlotVNodes.length) {\n    return defaultSlotVNodes\n  }\n\n  return h(\n    'span',\n    option[propsAlias.value.label] || option[propsAlias.value.key]\n  )\n})\n\ndefineExpose({\n  /** @description clear the filter keyword of a certain panel */\n  clearQuery,\n  /** @description left panel ref */\n  leftPanel,\n  /** @description right panel ref */\n  rightPanel,\n})\n</script>\n"],"mappings":""}

package/lib/components/transfer/style/css.js

@@ -3,5 +3,6 @@ require("../../base/style/css.js");
 require("../../input/style/css.js");
 require("../../button/style/css.js");
 require("../../checkbox/style/css.js");
+require("../../virtual-list/style/css.js");
 require("../../checkbox-group/style/css.js");
 require("@element-plus/nightly/theme-chalk/el-transfer.css");

package/lib/components/transfer/style/index.js

@@ -3,5 +3,6 @@ require("../../base/style/index.js");
 require("../../input/style/index.js");
 require("../../button/style/index.js");
 require("../../checkbox/style/index.js");
+require("../../virtual-list/style/index.js");
 require("../../checkbox-group/style/index.js");
 require("@element-plus/nightly/theme-chalk/src/transfer.scss");

package/lib/components/tree/src/tree-node.vue.d.ts

@@ -104,19 +104,19 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   })>;
   ElCheckbox: {
     new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxProps> & Readonly<{
-      "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
       onChange?: ((val: CheckboxValueType) => any) | undefined;
+      "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-      "update:modelValue": (val: CheckboxValueType) => void;
       change: (val: CheckboxValueType) => void;
+      "update:modelValue": (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      id: string;
+      name: string;
+      label: string | boolean | number | object;
       disabled: boolean;
+      id: string;
       modelValue: number | string | boolean;
       validateEvent: boolean;
-      name: string;
       value: string | boolean | number | object;
-      label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
       trueLabel: string | number;
@@ -129,16 +129,16 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       M: {};
       Defaults: {};
     }, Readonly<CheckboxProps> & Readonly<{
-      "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
       onChange?: ((val: CheckboxValueType) => any) | undefined;
+      "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      id: string;
+      name: string;
+      label: string | boolean | number | object;
       disabled: boolean;
+      id: string;
       modelValue: number | string | boolean;
       validateEvent: boolean;
-      name: string;
       value: string | boolean | number | object;
-      label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
       trueLabel: string | number;
@@ -148,19 +148,19 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __isTeleport?: never;
     __isSuspense?: never;
   } & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
-    "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
     onChange?: ((val: CheckboxValueType) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
   }>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-    "update:modelValue": (val: CheckboxValueType) => void;
     change: (val: CheckboxValueType) => void;
+    "update:modelValue": (val: CheckboxValueType) => void;
   }, string, {
-    id: string;
+    name: string;
+    label: string | boolean | number | object;
     disabled: boolean;
+    id: string;
     modelValue: number | string | boolean;
     validateEvent: boolean;
-    name: string;
     value: string | boolean | number | object;
-    label: string | boolean | number | object;
     trueValue: string | number;
     falseValue: string | number;
     trueLabel: string | number;