@element-plus/nightly 0.0.20260612 → 0.0.20260614

package/es/components/tooltip/src/content.vue.d.ts

@@ -5,9 +5,9 @@ import { ElTooltipContentProps } from "./content.js";
 import * as _$vue from "vue";
 
 //#region ../../packages/components/tooltip/src/content.vue.d.ts
-declare var __VLS_31: {};
+declare var __VLS_25: {};
 type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_31) => any;
+  default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ElTooltipContentProps, {
   /**
@@ -19,29 +19,29 @@ declare const __VLS_base: _$vue.DefineComponent<ElTooltipContentProps, {
    */
   isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ElTooltipContentProps> & Readonly<{}>, {
-  visible: boolean | null;
-  style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-  content: string;
-  effect: PopperEffect;
-  offset: number;
-  enterable: boolean;
-  pure: boolean;
-  focusOnShow: boolean;
-  trapping: boolean;
-  popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-  stopPopperMouseEvent: boolean;
   virtualTriggering: boolean;
-  loop: boolean;
+  effect: PopperEffect;
+  showAfter: number;
+  hideAfter: number;
+  autoClose: number;
   boundariesPadding: number;
   gpuAcceleration: boolean;
+  offset: number;
   placement: Placement;
   popperOptions: Partial<Options>;
-  strategy: "absolute" | "fixed";
+  strategy: "fixed" | "absolute";
   arrowOffset: number;
+  style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
+  enterable: boolean;
+  popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
+  stopPopperMouseEvent: boolean;
+  loop: boolean;
+  visible: boolean | null;
+  pure: boolean;
+  focusOnShow: boolean;
+  trapping: boolean;
+  content: string;
   teleported: boolean;
-  showAfter: number;
-  hideAfter: number;
-  autoClose: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/components/tooltip/src/tooltip.d.ts

@@ -39,7 +39,7 @@ declare const useTooltipProps: {
   showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   arrowOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
   disabled: BooleanConstructor;
-  trigger: EpPropFinalized<(new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
+  trigger: EpPropFinalized<(new (...args: any[]) => "click" | "focus" | "hover" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "focus" | "hover" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
   triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
   focusOnTarget: BooleanConstructor;
   virtualRef: {
@@ -338,7 +338,7 @@ declare const useTooltipProps: {
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
   placement: EpPropFinalized<StringConstructor, Placement, unknown, "bottom", boolean>;
   popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
-  strategy: EpPropFinalized<StringConstructor, "absolute" | "fixed", unknown, "absolute", boolean>;
+  strategy: EpPropFinalized<StringConstructor, "fixed" | "absolute", unknown, "absolute", boolean>;
   showAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
   hideAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
   autoClose: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
@@ -348,7 +348,7 @@ declare const useTooltipProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "tooltip", boolean>;
+  role: EpPropFinalized<StringConstructor, "grid" | "dialog" | "menu" | "group" | "listbox" | "navigation" | "tooltip" | "tree", unknown, "tooltip", boolean>;
 };
 declare const tooltipEmits: readonly [..."update:visible"[], "before-show", "before-hide", "show", "hide", "open", "close"];
 /**

package/es/components/tooltip/src/tooltip.vue.d.ts

@@ -43,49 +43,49 @@ declare const __VLS_base: _$vue.DefineComponent<UseTooltipProps, {
    */
   hide: (event?: Event) => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  hide: (...args: any[]) => void;
-  show: (...args: any[]) => void;
   open: (...args: any[]) => void;
-  close: (...args: any[]) => void;
   "update:visible": (...args: any[]) => void;
   "before-show": (...args: any[]) => void;
   "before-hide": (...args: any[]) => void;
+  show: (...args: any[]) => void;
+  hide: (...args: any[]) => void;
+  close: (...args: any[]) => void;
 }, string, _$vue.PublicProps, Readonly<UseTooltipProps> & Readonly<{
-  onHide?: ((...args: any[]) => any) | undefined;
-  onShow?: ((...args: any[]) => any) | undefined;
   onOpen?: ((...args: any[]) => any) | undefined;
-  onClose?: ((...args: any[]) => any) | undefined;
   "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
   "onBefore-show"?: ((...args: any[]) => any) | undefined;
   "onBefore-hide"?: ((...args: any[]) => any) | undefined;
+  onShow?: ((...args: any[]) => any) | undefined;
+  onHide?: ((...args: any[]) => any) | undefined;
+  onClose?: ((...args: any[]) => any) | undefined;
 }>, {
-  visible: boolean | null;
-  style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-  content: string;
   role: typeof roleTypes[number];
-  effect: PopperEffect;
-  offset: number;
-  enterable: boolean;
-  pure: boolean;
-  focusOnShow: boolean;
-  trapping: boolean;
-  popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-  stopPopperMouseEvent: boolean;
+  trigger: Arrayable<TooltipTriggerType>;
   virtualTriggering: boolean;
-  loop: boolean;
+  triggerKeys: string[];
+  effect: PopperEffect;
+  showAfter: number;
+  hideAfter: number;
+  autoClose: number;
   boundariesPadding: number;
   gpuAcceleration: boolean;
+  offset: number;
   placement: Placement;
   popperOptions: Partial<Options>;
-  strategy: "absolute" | "fixed";
+  strategy: "fixed" | "absolute";
   arrowOffset: number;
-  showArrow: boolean;
+  style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
+  enterable: boolean;
+  popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
+  stopPopperMouseEvent: boolean;
+  loop: boolean;
+  visible: boolean | null;
+  pure: boolean;
+  focusOnShow: boolean;
+  trapping: boolean;
+  content: string;
   teleported: boolean;
-  showAfter: number;
-  hideAfter: number;
-  autoClose: number;
-  trigger: Arrayable<TooltipTriggerType>;
-  triggerKeys: string[];
+  showArrow: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/components/tooltip/src/trigger.d.ts

@@ -34,7 +34,7 @@ declare const useTooltipTriggerPropsDefaults: {
  */
 declare const useTooltipTriggerProps: {
   readonly disabled: BooleanConstructor;
-  readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "contextmenu" | "focus" | "hover" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
+  readonly trigger: EpPropFinalized<(new (...args: any[]) => "click" | "focus" | "hover" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>) | (((new (...args: any[]) => "click" | "focus" | "hover" | "contextmenu" | TooltipTriggerType[]) | (() => Arrayable<TooltipTriggerType>)) | null)[], unknown, unknown, "hover", boolean>;
   readonly triggerKeys: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => string[], boolean>;
   readonly focusOnTarget: BooleanConstructor;
   readonly virtualRef: {

package/es/components/tooltip/src/trigger.vue.d.ts

@@ -4,9 +4,9 @@ import { OnlyChildExpose } from "../../slot/src/only-child.js";
 import * as _$vue from "vue";
 
 //#region ../../packages/components/tooltip/src/trigger.vue.d.ts
-declare var __VLS_16: {};
+declare var __VLS_10: {};
 type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_16) => any;
+  default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<UseTooltipTriggerProps, {
   /**

package/es/components/tour/src/content.d.ts

@@ -35,9 +35,9 @@ interface TourContentProps {
  * @deprecated Removed after 3.0.0, Use `TourContentProps` instead.
  */
 declare const tourContentProps: {
-  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
   reference: EpPropFinalized<(new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null) | (((new (...args: any[]) => HTMLElement | VirtualElement) | (() => HTMLElement | VirtualElement | null)) | null)[], unknown, unknown, null, boolean>;
-  strategy: EpPropFinalized<(new (...args: any[]) => "absolute" | "fixed") | (() => Strategy) | (((new (...args: any[]) => "absolute" | "fixed") | (() => Strategy)) | null)[], "absolute" | "fixed", unknown, string, boolean>;
+  strategy: EpPropFinalized<(new (...args: any[]) => "fixed" | "absolute") | (() => Strategy) | (((new (...args: any[]) => "fixed" | "absolute") | (() => Strategy)) | null)[], "fixed" | "absolute", unknown, string, boolean>;
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   showArrow: BooleanConstructor;
   zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;

package/es/components/tour/src/content.vue.d.ts

@@ -3,17 +3,17 @@ import * as _$vue from "vue";
 import * as _$_floating_ui_dom0 from "@floating-ui/dom";
 
 //#region ../../packages/components/tour/src/content.vue.d.ts
-declare var __VLS_10: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_10) => any;
+  default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<TourContentProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   close: () => void;
 }, string, _$vue.PublicProps, Readonly<TourContentProps> & Readonly<{
   onClose?: (() => any) | undefined;
 }>, {
-  offset: number;
   zIndex: number;
+  offset: number;
   placement: _$_floating_ui_dom0.Placement;
   strategy: _$_floating_ui_dom0.Strategy;
   reference: HTMLElement | _$_floating_ui_dom0.VirtualElement | null;

package/es/components/tour/src/mask.vue.d.ts

@@ -3,8 +3,8 @@ import * as _$vue from "vue";
 
 //#region ../../packages/components/tour/src/mask.vue.d.ts
 declare const __VLS_export: _$vue.DefineComponent<MaskProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<MaskProps> & Readonly<{}>, {
-  fill: string;
   zIndex: number;
+  fill: string;
   targetAreaClickable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/es/components/tour/src/step.d.ts

@@ -81,7 +81,7 @@ declare const tourStepProps: {
     __epPropKey: true;
   };
   showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement) | (((new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement)) | null)[], "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement) | (((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement)) | null)[], "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
   mask: EpPropFinalized<(new (...args: any[]) => boolean | {
     style?: CSSProperties;
     color?: string;

package/es/components/tour/src/tour.d.ts

@@ -89,7 +89,7 @@ declare const tourProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement) | (((new (...args: any[]) => "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement)) | null)[], "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement) | (((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => _$_floating_ui_dom0.Placement)) | null)[], "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end", unknown, string, boolean>;
   contentStyle: {
     readonly type: _$vue.PropType<CSSProperties>;
     readonly required: false;

package/es/components/tour/src/tour.vue.d.ts

@@ -14,25 +14,25 @@ type __VLS_Slots = {} & {
   indicators?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<TourProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (current: number) => void;
   close: (current: number) => void;
-  "update:modelValue": (value: boolean) => void;
   finish: () => void;
+  "update:modelValue": (value: boolean) => void;
+  change: (current: number) => void;
   "update:current": (current: number) => void;
 }, string, _$vue.PublicProps, Readonly<TourProps> & Readonly<{
-  onChange?: ((current: number) => any) | undefined;
   onClose?: ((current: number) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
   onFinish?: (() => any) | undefined;
+  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+  onChange?: ((current: number) => any) | undefined;
   "onUpdate:current"?: ((current: number) => any) | undefined;
 }>, {
   placement: _$_floating_ui_dom0.Placement;
-  showArrow: boolean;
   appendTo: string | HTMLElement;
+  showArrow: boolean;
   gap: TourGap;
   mask: TourMask;
-  closeOnPressEscape: boolean;
   showClose: boolean;
+  closeOnPressEscape: boolean;
   scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
   targetAreaClickable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/es/components/transfer/src/composables/use-check.d.ts

@@ -1,17 +1,22 @@
+import { FixedSizeListInstance } from "../../../virtual-list/src/components/fixed-size-list.js";
 import { CheckboxValueType } from "../../../checkbox/src/checkbox.js";
+import { CheckboxGroupInstance } from "../../../checkbox/src/checkbox-group.js";
 import { TransferDataItem } from "../transfer.js";
 import { TransferPanelEmits, TransferPanelProps, TransferPanelState } from "../transfer-panel.js";
 import * as _$vue from "vue";
 import { SetupContext } from "vue";
 
 //#region ../../packages/components/transfer/src/composables/use-check.d.ts
-declare const useCheck: <T extends TransferDataItem = TransferDataItem>(props: Required<Pick<TransferPanelProps<T>, "data" | "format" | "defaultChecked" | "props">> & {
+declare const useCheck: <T extends TransferDataItem = TransferDataItem>(props: Required<Pick<TransferPanelProps<T>, "data" | "format" | "defaultChecked" | "props" | "virtualScroll">> & {
   filterMethod: TransferPanelProps<T>["filterMethod"];
 }, panelState: TransferPanelState, emit: SetupContext<TransferPanelEmits>["emit"]) => {
   filteredData: _$vue.ComputedRef<T[]>;
   checkableData: _$vue.ComputedRef<T[]>;
   checkedSummary: _$vue.ComputedRef<string>;
+  virtualListRef: _$vue.Ref<FixedSizeListInstance | undefined, FixedSizeListInstance | undefined>;
   isIndeterminate: _$vue.ComputedRef<boolean>;
+  checkboxGroupRef: _$vue.Ref<CheckboxGroupInstance | undefined, CheckboxGroupInstance | undefined>;
+  virtualListHeight: _$vue.ShallowRef<number>;
   updateAllChecked: () => void;
   handleAllCheckedChange: (value: CheckboxValueType) => void;
 };

package/es/components/transfer/src/composables/use-check.mjs

@@ -1,7 +1,8 @@
 import { isFunction } from "../../../../utils/types.mjs";
 import { CHECKED_CHANGE_EVENT } from "../transfer-panel.mjs";
 import { usePropsAlias } from "./use-props-alias.mjs";
-import { computed, watch } from "vue";
+import { useElementSize } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
 //#region ../../packages/components/transfer/src/composables/use-check.ts
 const useCheck = (props, panelState, emit) => {
 	const propsAlias = usePropsAlias(props);
@@ -30,6 +31,9 @@ const useCheck = (props, panelState, emit) => {
 	const handleAllCheckedChange = (value) => {
 		panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : [];
 	};
+	const checkboxGroupRef = ref();
+	const { height: virtualListHeight } = useElementSize(computed(() => checkboxGroupRef.value?.$el));
+	const virtualListRef = ref();
 	watch(() => panelState.checked, (val, oldVal) => {
 		updateAllChecked();
 		if (panelState.checkChangeByUser) emit(CHECKED_CHANGE_EVENT, val, val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v)));
@@ -60,11 +64,18 @@ const useCheck = (props, panelState, emit) => {
 		panelState.checkChangeByUser = false;
 		panelState.checked = checked;
 	}, { immediate: true });
+	watch(() => panelState.query, () => {
+		if (!props.virtualScroll) return;
+		virtualListRef.value?.scrollToItem(0);
+	}, { flush: "post" });
 	return {
 		filteredData,
 		checkableData,
 		checkedSummary,
+		virtualListRef,
 		isIndeterminate,
+		checkboxGroupRef,
+		virtualListHeight,
 		updateAllChecked,
 		handleAllCheckedChange
 	};

package/es/components/transfer/src/composables/use-check.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-check.mjs","names":[],"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,aAAa,cAAc,MAAM;CAEvC,MAAM,eAAe,eAAe;EAClC,OAAO,MAAM,KAAK,QAAQ,SAAS;GACjC,IAAI,WAAW,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,gBAAgB,eACpB,aAAa,MAAM,QAAQ,SAAS,CAAC,KAAK,WAAW,MAAM,UAAU,CACtE;CAED,MAAM,iBAAiB,eAAe;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,kBAAkB,eAAe;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,YACQ,WAAW,UAChB,KAAK,WAAW;EACf,kBAAkB;EAElB,IAAI,WAAW,mBAIb,KAAK,sBAAsB,KAHT,IACf,OAAO,OAAO,CACd,QAAQ,MAAM,CAAC,IAAI,SAAS,EAAE,IAAI,CAAC,OAAO,SAAS,EAAE,CACf,CAAC;OACrC;GACL,KAAK,sBAAsB,IAAI;GAC/B,WAAW,oBAAoB;;GAGpC;CAED,MAAM,qBAAqB;EACzB,kBAAkB;GAClB;CAEF,YACQ,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,YACQ,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.mjs","names":[],"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/es/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/es/components/transfer/src/transfer-panel.mjs

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

package/es/components/transfer/src/transfer-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.mjs","names":[],"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,qBAAqB,WAAW;CAC3C,MAAM,cAAc;CACpB,cAAc,EACZ,MAAM,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQ,cAAc;CACtB,cAAc,cAAc;CAC5B,gBAAgB,cAAc;CAC9B,OAAO,cAAc;CACtB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuB,yBACzB"}
+{"version":3,"file":"transfer-panel.mjs","names":[],"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,qBAAqB,WAAW;CAC3C,MAAM,cAAc;CACpB,cAAc,EACZ,MAAM,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQ,cAAc;CACtB,cAAc,cAAc;CAC5B,gBAAgB,cAAc;CAC9B,OAAO,cAAc;CACrB,eAAe,cAAc;CAC7B,UAAU,cAAc;CACzB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuB,yBACzB"}

package/es/components/transfer/src/transfer-panel.vue_vue_type_script_setup_true_lang.mjs

@@ -2,12 +2,13 @@ import { isEmpty } from "../../../utils/types.mjs";
 import { useLocale } from "../../../hooks/use-locale/index.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { ElInput } from "../../input/index.mjs";
+import FixedSizeList from "../../virtual-list/src/components/fixed-size-list.mjs";
 import { ElCheckbox, ElCheckboxGroup } from "../../checkbox/index.mjs";
 import { transferPanelEmits, transferPanelProps } from "./transfer-panel.mjs";
 import { usePropsAlias } from "./composables/use-props-alias.mjs";
 import { useCheck } from "./composables/use-check.mjs";
 import { Search } from "@element-plus/icons-vue";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, reactive, renderList, renderSlot, toDisplayString, toRefs, unref, useSlots, vShow, withCtx, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, normalizeStyle, openBlock, reactive, renderList, renderSlot, toDisplayString, toRefs, unref, useSlots, vShow, withCtx, withDirectives } from "vue";
 //#region ../../packages/components/transfer/src/transfer-panel.vue?vue&type=script&setup=true&lang.ts
 var transfer_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "ElTransferPanel",
@@ -28,7 +29,7 @@ var transfer_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			checkChangeByUser: true
 		});
 		const propsAlias = usePropsAlias(props);
-		const { filteredData, checkedSummary, isIndeterminate, handleAllCheckedChange } = useCheck(props, panelState, emit);
+		const { filteredData, checkedSummary, virtualListRef, isIndeterminate, checkboxGroupRef, virtualListHeight, handleAllCheckedChange } = useCheck(props, panelState, emit);
 		const hasNoMatch = computed(() => !isEmpty(panelState.query) && isEmpty(filteredData.value));
 		const hasFooter = computed(() => !isEmpty(slots.default()[0].children));
 		const { checked, allChecked, query } = toRefs(panelState);
@@ -69,12 +70,14 @@ query });
 						"prefix-icon"
 					])) : createCommentVNode("v-if", true),
 					withDirectives(createVNode(unref(ElCheckboxGroup), {
+						ref_key: "checkboxGroupRef",
+						ref: checkboxGroupRef,
 						modelValue: unref(checked),
 						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(checked) ? checked.value = $event : null),
 						"validate-event": false,
 						class: normalizeClass([unref(ns).is("filterable", __props.filterable), unref(ns).be("panel", "list")])
 					}, {
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredData), (item) => {
+						default: withCtx(() => [!__props.virtualScroll ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredData), (item) => {
 							return openBlock(), createBlock(unref(ElCheckbox), {
 								key: item[unref(propsAlias).key],
 								class: normalizeClass(unref(ns).be("panel", "item")),
@@ -89,7 +92,38 @@ query });
 								"value",
 								"disabled"
 							]);
-						}), 128))]),
+						}), 128)) : (openBlock(), createBlock(unref(FixedSizeList), {
+							key: 1,
+							ref_key: "virtualListRef",
+							ref: virtualListRef,
+							data: unref(filteredData),
+							total: unref(filteredData).length,
+							"item-size": __props.itemSize,
+							height: unref(virtualListHeight)
+						}, {
+							default: withCtx(({ data, index, style }) => [(openBlock(), createElementBlock("div", {
+								key: data[index][unref(propsAlias).key],
+								style: normalizeStyle(style)
+							}, [createVNode(unref(ElCheckbox), {
+								class: normalizeClass(unref(ns).be("panel", "item")),
+								value: data[index][unref(propsAlias).key],
+								disabled: data[index][unref(propsAlias).disabled],
+								"validate-event": false
+							}, {
+								default: withCtx(() => [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"]), [[vShow, !hasNoMatch.value && !unref(isEmpty)(__props.data)]]),
 					withDirectives(createElementVNode("div", { class: normalizeClass(unref(ns).be("panel", "empty")) }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(hasNoMatch.value ? unref(t)("el.transfer.noMatch") : unref(t)("el.transfer.noData")), 1)])], 2), [[vShow, hasNoMatch.value || unref(isEmpty)(__props.data)]])

package/es/components/transfer/src/transfer-panel.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.vue_vue_type_script_setup_true_lang.mjs","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.mjs","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":"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"}

package/es/components/transfer/src/transfer-panel2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel2.mjs","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.mjs","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/es/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.