@zboson/ui 0.0.0-stage → 0.0.2

package/dist/transfer/Transfer.js

@@ -0,0 +1,504 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { useMultipleSelect } from "../_util/hooks/useMultipleSelect.js";
+import { getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import localeValues from "../locale/en_US.js";
+import useLocale from "../locale/useLocale.js";
+import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils.js";
+import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
+import Actions from "./Actions.js";
+import { groupDisabledKeysMap, groupKeysMap } from "../_util/transKeys.js";
+import TransferSection from "./Section.js";
+import useData from "./hooks/useData.js";
+import useSelection from "./hooks/useSelection.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/transfer/Transfer.tsx
+const Transfer = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, selectionsIcon: contextSelectionsIcon, renderEmpty } = useComponentBaseConfig("transfer", props, ["selectionsIcon"]);
+	const { disabled, classes, styles, rootClass } = toPropsRefs$1(props, "disabled", "classes", "styles", "rootClass");
+	const contextDisabled = useDisabledContext();
+	const mergedDisabled = computed(() => disabled.value ?? contextDisabled.value);
+	const mergedProps = computed(() => ({
+		...props,
+		disabled: mergedDisabled.value
+	}));
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const normalizeNodes = (nodes) => filterEmpty(Array.isArray(nodes) ? nodes : [nodes]);
+	const getSlotNodes = (slot) => {
+		if (!slot) return;
+		const items = normalizeNodes(slot());
+		return items.length ? items : void 0;
+	};
+	const mergedActions = computed(() => {
+		const slotActions = getSlotNodes(slots.actions);
+		if (slotActions?.length) return slotActions;
+		return normalizeNodes(props.actions ?? props.operations ?? []);
+	});
+	const dataSource = computed(() => props.dataSource || []);
+	const targetKeys = computed(() => props.targetKeys || []);
+	const [mergedDataSource, leftDataSource, rightDataSource] = useData(dataSource, computed(() => props.rowKey), targetKeys);
+	const [sourceSelectedKeys, targetSelectedKeys, setSourceSelectedKeys, setTargetSelectedKeys] = useSelection(leftDataSource, rightDataSource, computed(() => props.selectedKeys));
+	const [leftMultipleSelect, updateLeftPrevSelectedIndex] = useMultipleSelect((item) => item.key);
+	const [rightMultipleSelect, updateRightPrevSelectedIndex] = useMultipleSelect((item) => item.key);
+	const prevDataKeysRef = {
+		left: [],
+		right: []
+	};
+	const setStateKeys = (directionValue, keys) => {
+		if (directionValue === "left") {
+			const nextKeys = typeof keys === "function" ? keys(sourceSelectedKeys.value || []) : keys;
+			setSourceSelectedKeys(nextKeys);
+			return nextKeys;
+		}
+		const nextKeys = typeof keys === "function" ? keys(targetSelectedKeys.value || []) : keys;
+		setTargetSelectedKeys(nextKeys);
+		return nextKeys;
+	};
+	const setPrevSelectedIndex = (directionValue, value) => {
+		(directionValue === "left" ? updateLeftPrevSelectedIndex : updateRightPrevSelectedIndex)(value);
+	};
+	const leftFilter = (e) => {
+		setPrevSelectedIndex("left", null);
+		emit("search", "left", e.target?.value || "");
+	};
+	const rightFilter = (e) => {
+		setPrevSelectedIndex("right", null);
+		emit("search", "right", e.target?.value || "");
+	};
+	const handleLeftClear = () => {
+		setPrevSelectedIndex("left", null);
+		emit("search", "left", "");
+	};
+	const handleRightClear = () => {
+		setPrevSelectedIndex("right", null);
+		emit("search", "right", "");
+	};
+	const handleSelectChange = (directionValue, holder) => {
+		if (directionValue === "left") emit("selectChange", holder, targetSelectedKeys.value);
+		else emit("selectChange", sourceSelectedKeys.value, holder);
+	};
+	const emitSelectedKeysUpdate = (sourceKeys, targetKeysValue) => {
+		emit("update:selectedKeys", [...sourceKeys, ...targetKeysValue]);
+	};
+	const getTitles = (transferLocale) => props.titles ?? transferLocale.titles ?? [];
+	const handleLeftScroll = (e) => {
+		emit("scroll", "left", e);
+	};
+	const handleRightScroll = (e) => {
+		emit("scroll", "right", e);
+	};
+	const moveTo = (directionValue) => {
+		const moveKeys = directionValue === "right" ? sourceSelectedKeys.value : targetSelectedKeys.value;
+		const dataSourceDisabledKeysMap = groupDisabledKeysMap(mergedDataSource.value);
+		const newMoveKeys = moveKeys.filter((key) => !dataSourceDisabledKeysMap.has(key));
+		const newMoveKeysMap = groupKeysMap(newMoveKeys);
+		const newTargetKeys = directionValue === "right" ? newMoveKeys.concat(targetKeys.value) : targetKeys.value.filter((targetKey) => !newMoveKeysMap.has(targetKey));
+		const oppositeDirection = directionValue === "right" ? "left" : "right";
+		const nextOppositeKeys = setStateKeys(oppositeDirection, []);
+		handleSelectChange(oppositeDirection, nextOppositeKeys);
+		if (directionValue === "right") emitSelectedKeysUpdate([], targetSelectedKeys.value);
+		else emitSelectedKeysUpdate(sourceSelectedKeys.value, []);
+		emit("update:targetKeys", newTargetKeys);
+		emit("change", newTargetKeys, directionValue, newMoveKeys);
+	};
+	const moveToLeft = () => {
+		moveTo("left");
+		setPrevSelectedIndex("left", null);
+	};
+	const moveToRight = () => {
+		moveTo("right");
+		setPrevSelectedIndex("right", null);
+	};
+	const onItemSelectAll = (directionValue, keys, checkAll) => {
+		const prevKeys = directionValue === "left" ? sourceSelectedKeys.value : targetSelectedKeys.value;
+		let mergedCheckedKeys = [];
+		if (checkAll === "replace") mergedCheckedKeys = keys;
+		else if (checkAll) mergedCheckedKeys = Array.from(/* @__PURE__ */ new Set([...prevKeys, ...keys]));
+		else {
+			const selectedKeysMap = groupKeysMap(keys);
+			mergedCheckedKeys = prevKeys.filter((key) => !selectedKeysMap.has(key));
+		}
+		setStateKeys(directionValue, mergedCheckedKeys);
+		handleSelectChange(directionValue, mergedCheckedKeys);
+		const nextSourceKeys = directionValue === "left" ? mergedCheckedKeys : sourceSelectedKeys.value;
+		const nextTargetKeys = directionValue === "left" ? targetSelectedKeys.value : mergedCheckedKeys;
+		emitSelectedKeysUpdate(nextSourceKeys, nextTargetKeys);
+		setPrevSelectedIndex(directionValue, null);
+	};
+	const onLeftItemSelectAll = (keys, checkAll) => {
+		onItemSelectAll("left", keys, checkAll);
+	};
+	const onRightItemSelectAll = (keys, checkAll) => {
+		onItemSelectAll("right", keys, checkAll);
+	};
+	const handleSingleSelect = (directionValue, holder, selectedKey, checked, currentSelectedIndex) => {
+		if (holder.has(selectedKey)) {
+			holder.delete(selectedKey);
+			setPrevSelectedIndex(directionValue, null);
+		}
+		if (checked) {
+			holder.add(selectedKey);
+			setPrevSelectedIndex(directionValue, currentSelectedIndex);
+		}
+	};
+	const handleMultipleSelect = (directionValue, data, holder, currentSelectedIndex) => {
+		(directionValue === "left" ? leftMultipleSelect : rightMultipleSelect)(currentSelectedIndex, data, holder);
+	};
+	const onItemSelect = (directionValue, selectedKey, checked, multiple, filteredItems) => {
+		const isLeftDirection = directionValue === "left";
+		const holder = [...isLeftDirection ? sourceSelectedKeys.value : targetSelectedKeys.value];
+		const holderSet = new Set(holder);
+		const data = (filteredItems ?? (isLeftDirection ? leftDataSource.value : rightDataSource.value)).filter((item) => !item?.disabled);
+		const currentSelectedIndex = data.findIndex((item) => item.key === selectedKey);
+		const dataKeys = data.map((item) => item.key);
+		const prevDataKeys = prevDataKeysRef[directionValue];
+		const isSameData = dataKeys.length === prevDataKeys.length && dataKeys.every((key, index) => key === prevDataKeys[index]);
+		prevDataKeysRef[directionValue] = dataKeys;
+		if (multiple && holder.length > 0 && isSameData) handleMultipleSelect(directionValue, data, holderSet, currentSelectedIndex);
+		else handleSingleSelect(directionValue, holderSet, selectedKey, checked, currentSelectedIndex);
+		const holderArr = Array.from(holderSet);
+		handleSelectChange(directionValue, holderArr);
+		setStateKeys(directionValue, holderArr);
+		const nextSourceKeys = directionValue === "left" ? holderArr : sourceSelectedKeys.value;
+		const nextTargetKeys = directionValue === "left" ? targetSelectedKeys.value : holderArr;
+		emitSelectedKeysUpdate(nextSourceKeys, nextTargetKeys);
+	};
+	const onLeftItemSelect = (selectedKey, checked, e, filteredItems) => {
+		onItemSelect("left", selectedKey, checked, e?.shiftKey, filteredItems);
+	};
+	const onRightItemSelect = (selectedKey, checked, e, filteredItems) => {
+		onItemSelect("right", selectedKey, checked, e?.shiftKey, filteredItems);
+	};
+	const onRightItemRemove = (keys) => {
+		const hasTargetSelected = targetSelectedKeys.value.length > 0;
+		setStateKeys("right", []);
+		if (hasTargetSelected) handleSelectChange("right", []);
+		emitSelectedKeysUpdate(sourceSelectedKeys.value, []);
+		const nextTargetKeys = targetKeys.value.filter((key) => !keys.includes(key));
+		emit("update:targetKeys", nextTargetKeys);
+		emit("change", nextTargetKeys, "left", [...keys]);
+	};
+	const handleListStyle = (directionValue) => {
+		if (typeof props.listStyle === "function") return props.listStyle({ direction: directionValue });
+		return props.listStyle || {};
+	};
+	const formItemInputContext = useFormItemInputContext();
+	const hasFeedback = computed(() => formItemInputContext.value.hasFeedback);
+	const mergedStatus = computed(() => getMergedStatus(formItemInputContext.value.status, props.status));
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const SECTION_SEMANTIC_KEYS = [
+		"section",
+		"header",
+		"title",
+		"body",
+		"list",
+		"item",
+		"itemIcon",
+		"itemContent",
+		"footer"
+	];
+	function mergeSideClasses(side) {
+		const sideOverrides = mergedClassNames.value[side] ?? {};
+		const next = { ...mergedClassNames.value };
+		SECTION_SEMANTIC_KEYS.forEach((key) => {
+			if (sideOverrides[key]) next[key] = clsx(mergedClassNames.value[key], sideOverrides[key]);
+		});
+		return next;
+	}
+	function mergeSideStyles(side) {
+		const sideOverrides = mergedStyles.value[side] ?? {};
+		const next = { ...mergedStyles.value };
+		SECTION_SEMANTIC_KEYS.forEach((key) => {
+			if (sideOverrides[key]) next[key] = {
+				...mergedStyles.value[key],
+				...sideOverrides[key]
+			};
+		});
+		return next;
+	}
+	const [contextLocale] = useLocale("Transfer", localeValues.Transfer);
+	const listLocale = computed(() => ({
+		...contextLocale?.value,
+		notFoundContent: renderEmpty?.value?.("Transfer") || createVNode(DefaultRenderEmpty, { "componentName": "Transfer" }, null),
+		...props.locale || {}
+	}));
+	const titles = computed(() => getSlotNodes(slots.titles) ?? getTitles(listLocale.value));
+	const mergedLabelRender = computed(() => {
+		if (!slots.labelRender && !props.labelRender) return;
+		return (item) => getSlotPropsFnRun(slots, props, "labelRender", true, item);
+	});
+	const mergedSelectionsIcon = computed(() => getSlotPropsFnRun(slots, props, "selectionsIcon", false) ?? contextSelectionsIcon.value);
+	const mergedPagination = computed(() => !slots.default ? props.pagination : false);
+	const mergedShowSelectAll = computed(() => props.showSelectAll ?? true);
+	const mergedSelectAllLabels = computed(() => props.selectAllLabels ?? []);
+	const leftActive = computed(() => rightDataSource.value.filter((d) => targetSelectedKeys.value.includes(d.key) && !d.disabled).length > 0);
+	const rightActive = computed(() => leftDataSource.value.filter((d) => sourceSelectedKeys.value.includes(d.key) && !d.disabled).length > 0);
+	const renderList = computed(() => {
+		if (!slots.default) return;
+		return (listProps) => slots.default?.(listProps);
+	});
+	const mergedRender = computed(() => {
+		return (item) => getSlotPropsFnRun(slots, props, "render", true, item);
+	});
+	const mergedFooter = computed(() => {
+		if (!slots.footer && !props.footer) return;
+		return (listProps, info) => {
+			if (slots.footer) return slots.footer({
+				props: listProps,
+				info
+			});
+			return props.footer?.(listProps, info);
+		};
+	});
+	if (isDev) {
+		const warning = devUseWarning("Transfer");
+		warning(!props.pagination || !slots.default, "usage", "`pagination` not support customize render list.");
+		[
+			["listStyle", "styles.section"],
+			["operationStyle", "styles.actions"],
+			["operations", "actions"]
+		].forEach(([deprecatedName, newName]) => {
+			warning.deprecated(!(props[deprecatedName] !== void 0), deprecatedName, newName);
+		});
+	}
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const mergedClassName = clsx(prefixCls.value, {
+			[`${prefixCls.value}-disabled`]: mergedDisabled.value,
+			[`${prefixCls.value}-customize-list`]: !!slots.default,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+		}, getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback.value), contextClassName.value, rootClass.value, cssVarCls.value, rootCls.value, hashId.value, mergedClassNames.value.root, className);
+		const rootStyle = {
+			...mergedStyles.value.root,
+			...style
+		};
+		const leftTitle = titles.value[0];
+		const rightTitle = titles.value[1];
+		return createVNode("div", mergeProps({
+			"ref": nativeElementRef,
+			"class": mergedClassName,
+			"style": rootStyle
+		}, restAttrs), [
+			createVNode(TransferSection, mergeProps({
+				"prefixCls": prefixCls.value,
+				"style": handleListStyle("left"),
+				"classes": mergeSideClasses("source"),
+				"styles": mergeSideStyles("source"),
+				"titleText": leftTitle,
+				"dataSource": leftDataSource.value,
+				"filterOption": props.filterOption,
+				"checkedKeys": sourceSelectedKeys.value,
+				"handleFilter": leftFilter,
+				"handleClear": handleLeftClear,
+				"onItemSelect": onLeftItemSelect,
+				"onItemSelectAll": onLeftItemSelectAll,
+				"render": mergedRender.value,
+				"labelRender": mergedLabelRender.value,
+				"showSearch": props.showSearch,
+				"renderList": renderList.value,
+				"footer": mergedFooter.value,
+				"onScroll": handleLeftScroll,
+				"disabled": mergedDisabled.value,
+				"direction": direction.value === "rtl" ? "right" : "left",
+				"showSelectAll": mergedShowSelectAll.value,
+				"selectAllLabel": mergedSelectAllLabels.value[0],
+				"pagination": mergedPagination.value,
+				"selectionsIcon": mergedSelectionsIcon.value
+			}, listLocale.value), null),
+			createVNode(Actions, {
+				"class": clsx(`${prefixCls.value}-actions`, mergedClassNames.value.actions),
+				"rightActive": rightActive.value,
+				"moveToRight": moveToRight,
+				"leftActive": leftActive.value,
+				"actions": mergedActions.value,
+				"moveToLeft": moveToLeft,
+				"style": {
+					...props.operationStyle,
+					...mergedStyles.value.actions
+				},
+				"disabled": mergedDisabled.value,
+				"direction": direction.value,
+				"oneWay": props.oneWay
+			}, null),
+			createVNode(TransferSection, mergeProps({
+				"prefixCls": prefixCls.value,
+				"style": handleListStyle("right"),
+				"classes": mergeSideClasses("target"),
+				"styles": mergeSideStyles("target"),
+				"titleText": rightTitle,
+				"dataSource": rightDataSource.value,
+				"filterOption": props.filterOption,
+				"checkedKeys": targetSelectedKeys.value,
+				"handleFilter": rightFilter,
+				"handleClear": handleRightClear,
+				"onItemSelect": onRightItemSelect,
+				"onItemSelectAll": onRightItemSelectAll,
+				"onItemRemove": onRightItemRemove,
+				"render": mergedRender.value,
+				"labelRender": mergedLabelRender.value,
+				"showSearch": props.showSearch,
+				"renderList": renderList.value,
+				"footer": mergedFooter.value,
+				"onScroll": handleRightScroll,
+				"disabled": mergedDisabled.value,
+				"direction": direction.value === "rtl" ? "left" : "right",
+				"showSelectAll": mergedShowSelectAll.value,
+				"selectAllLabel": mergedSelectAllLabels.value[1],
+				"showRemove": props.oneWay,
+				"pagination": mergedPagination.value,
+				"selectionsIcon": mergedSelectionsIcon.value
+			}, listLocale.value), null)
+		]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		listStyle: {
+			type: [Function, Object],
+			required: false
+		},
+		operationStyle: {
+			type: Object,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		dataSource: {
+			type: Array,
+			required: false
+		},
+		targetKeys: {
+			type: Array,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		render: {
+			type: Function,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		titles: {
+			type: Array,
+			required: false
+		},
+		operations: {
+			type: Array,
+			required: false
+		},
+		actions: {
+			type: Array,
+			required: false
+		},
+		showSearch: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		filterOption: {
+			type: Function,
+			required: false
+		},
+		locale: {
+			type: Object,
+			required: false
+		},
+		footer: {
+			type: Function,
+			required: false
+		},
+		rowKey: {
+			type: Function,
+			required: false
+		},
+		showSelectAll: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		selectAllLabels: {
+			type: Array,
+			required: false
+		},
+		oneWay: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pagination: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		selectionsIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, {
+		dataSource: [],
+		targetKeys: [],
+		selectedKeys: void 0,
+		selectAllLabels: [],
+		showSearch: false,
+		showSelectAll: true,
+		oneWay: false
+	}),
+	emits: [
+		"change",
+		"selectChange",
+		"search",
+		"scroll",
+		"update:targetKeys",
+		"update:selectedKeys"
+	],
+	name: "ATransfer",
+	inheritAttrs: false
+});
+//#endregion
+export { Transfer as default };

package/dist/transfer/hooks/useData.d.ts

@@ -0,0 +1,8 @@
+import { AnyObject } from "../../_util/type.js";
+import { KeyWise, TransferKey, TransferProps } from "../interface.js";
+import { Ref } from "vue";
+//#region src/transfer/hooks/useData.d.ts
+type MaybeRef<T> = T | Ref<T>;
+declare function useData<RecordType extends AnyObject>(dataSource?: MaybeRef<RecordType[] | undefined>, rowKey?: MaybeRef<TransferProps<RecordType>['rowKey']>, targetKeys?: MaybeRef<TransferKey[] | undefined>): readonly [import("vue").ComputedRef<RecordType[]>, import("vue").ComputedRef<KeyWise<RecordType>[]>, import("vue").ComputedRef<KeyWise<RecordType>[]>];
+//#endregion
+export { useData as default };

package/dist/transfer/hooks/useData.js

@@ -0,0 +1,39 @@
+import { groupKeysMap } from "../../_util/transKeys.js";
+import { computed, unref } from "vue";
+//#region src/transfer/hooks/useData.ts
+function useData(dataSource, rowKey, targetKeys) {
+	const mergedDataSource = computed(() => {
+		const source = unref(dataSource) || [];
+		const getRowKey = unref(rowKey);
+		return source.map((record) => {
+			if (getRowKey) return {
+				...record,
+				key: getRowKey(record)
+			};
+			return record;
+		});
+	});
+	const mergedLists = computed(() => {
+		const leftData = [];
+		const targetKeysValue = unref(targetKeys) || [];
+		const rightData = Array.from({ length: targetKeysValue.length });
+		const targetKeysMap = groupKeysMap(targetKeysValue);
+		mergedDataSource.value.forEach((record) => {
+			if (targetKeysMap.has(record.key)) {
+				const idx = targetKeysMap.get(record.key);
+				rightData[idx] = record;
+			} else leftData.push(record);
+		});
+		return {
+			leftData,
+			rightData
+		};
+	});
+	return [
+		mergedDataSource,
+		computed(() => mergedLists.value.leftData.filter(Boolean)),
+		computed(() => mergedLists.value.rightData.filter(Boolean))
+	];
+}
+//#endregion
+export { useData as default };

package/dist/transfer/hooks/useSelection.d.ts

@@ -0,0 +1,9 @@
+import { TransferKey } from "../interface.js";
+import { Ref } from "vue";
+//#region src/transfer/hooks/useSelection.d.ts
+type MaybeRef<T> = T | Ref<T>;
+declare function useSelection<T extends {
+  key: TransferKey;
+}>(leftDataSource: MaybeRef<T[]>, rightDataSource: MaybeRef<T[]>, selectedKeys?: MaybeRef<TransferKey[] | undefined>): [sourceSelectedKeys: Ref<TransferKey[]>, targetSelectedKeys: Ref<TransferKey[]>, setSourceSelectedKeys: (srcKeys: TransferKey[]) => void, setTargetSelectedKeys: (srcKeys: TransferKey[]) => void];
+//#endregion
+export { useSelection as default };

package/dist/transfer/hooks/useSelection.js

@@ -0,0 +1,40 @@
+import { computed, ref, unref, watch } from "vue";
+//#region src/transfer/hooks/useSelection.ts
+const EMPTY_KEYS = [];
+function filterKeys(keys, dataKeys) {
+	const filteredKeys = keys.filter((key) => dataKeys.has(key));
+	return keys.length === filteredKeys.length ? keys : filteredKeys;
+}
+function flattenKeys(keys) {
+	return JSON.stringify(Array.from(keys, (key) => [typeof key, String(key)]));
+}
+function useSelection(leftDataSource, rightDataSource, selectedKeys) {
+	const mergedSelectedKeys = ref(unref(selectedKeys) ?? EMPTY_KEYS);
+	watch(() => unref(selectedKeys), (nextKeys) => {
+		mergedSelectedKeys.value = nextKeys ?? EMPTY_KEYS;
+	});
+	const leftKeys = computed(() => new Set(unref(leftDataSource).map((src) => src?.key)));
+	const rightKeys = computed(() => new Set(unref(rightDataSource).map((src) => src?.key)));
+	const sourceSelectedKeys = computed(() => filterKeys(mergedSelectedKeys.value, leftKeys.value));
+	const targetSelectedKeys = computed(() => filterKeys(mergedSelectedKeys.value, rightKeys.value));
+	watch(() => [flattenKeys(leftKeys.value), flattenKeys(rightKeys.value)], () => {
+		mergedSelectedKeys.value = [...filterKeys(mergedSelectedKeys.value, leftKeys.value), ...filterKeys(mergedSelectedKeys.value, rightKeys.value)];
+	});
+	const setMergedSelectedKeys = (nextKeys) => {
+		if (unref(selectedKeys) === void 0) mergedSelectedKeys.value = nextKeys;
+	};
+	const setSourceSelectedKeys = (nextSrcKeys) => {
+		setMergedSelectedKeys([...nextSrcKeys, ...targetSelectedKeys.value]);
+	};
+	const setTargetSelectedKeys = (nextTargetKeys) => {
+		setMergedSelectedKeys([...sourceSelectedKeys.value, ...nextTargetKeys]);
+	};
+	return [
+		sourceSelectedKeys,
+		targetSelectedKeys,
+		setSourceSelectedKeys,
+		setTargetSelectedKeys
+	];
+}
+//#endregion
+export { useSelection as default };

package/dist/transfer/index.d.ts

@@ -0,0 +1,37 @@
+import { KeyWise, KeyWiseTransferItem, ListStyle, PaginationType, RenderResult, RenderResultObject, SelectAllLabel, TransferClassNamesType, TransferCustomListBodyProps, TransferDirection, TransferEmits, TransferItem, TransferKey, TransferListBodyProps, TransferListProps, TransferLocale, TransferRender, TransferSearchOption, TransferSlots, TransferStylesType } from "./interface.js";
+import { InternalTransferProps, TransferRef } from "./Transfer.js";
+import Actions, { TransferOperationProps } from "./Actions.js";
+import Search, { TransferSearchEmits, TransferSearchProps, TransferSearchSlots } from "./search.js";
+import TransferSection from "./Section.js";
+import { App, PublicProps } from "vue";
+//#region src/transfer/index.d.ts
+type TransferProps<RecordType = any> = InternalTransferProps<RecordType>;
+interface TransferInstance<RecordType = any> {
+  $props: InternalTransferProps<RecordType> & PublicProps;
+  $emit: {
+    (event: 'change', ...args: Parameters<TransferEmits['change']>): void;
+    (event: 'selectChange', ...args: Parameters<TransferEmits['selectChange']>): void;
+    (event: 'search', ...args: Parameters<TransferEmits['search']>): void;
+    (event: 'scroll', ...args: Parameters<TransferEmits['scroll']>): void;
+    (event: 'update:targetKeys', ...args: Parameters<TransferEmits['update:targetKeys']>): void;
+    (event: 'update:selectedKeys', ...args: Parameters<TransferEmits['update:selectedKeys']>): void;
+  };
+  $slots: TransferSlots<RecordType>;
+}
+interface TransferConstructor {
+  new <RecordType = any>(props: InternalTransferProps<RecordType>): TransferInstance<RecordType>;
+  /**
+   * Non-generic fallback signature. TypeScript infers from the last overload,
+   * so this keeps render-function usage like `h(Transfer, props)` resolvable
+   * against Vue's `Constructor<P>` overload of `h` (see #634), while the
+   * generic signature above still drives template/Volar inference.
+   */
+  new (props: InternalTransferProps<any>): TransferInstance<any>;
+  install: (app: App) => void;
+  List: typeof TransferSection;
+  Search: typeof Search;
+  Operation: typeof Actions;
+}
+declare const InternalTransfer: TransferConstructor;
+//#endregion
+export { type KeyWise, type KeyWiseTransferItem, type ListStyle, type PaginationType, type RenderResult, type RenderResultObject, type SelectAllLabel, type TransferClassNamesType, TransferConstructor, type TransferCustomListBodyProps, type TransferDirection, type TransferEmits, type TransferItem, type TransferKey, type TransferListBodyProps, type TransferListProps, type TransferLocale, type TransferOperationProps, TransferProps, type TransferRef, type TransferRender, type TransferSearchEmits, type TransferSearchOption, type TransferSearchProps, type TransferSearchSlots, type TransferSlots, type TransferStylesType, InternalTransfer as default };

package/dist/transfer/index.js

@@ -0,0 +1,18 @@
+import Actions from "./Actions.js";
+import Search from "./search.js";
+import TransferSection from "./Section.js";
+import Transfer from "./Transfer.js";
+//#region src/transfer/index.tsx
+const InternalTransfer = Transfer;
+InternalTransfer.List = TransferSection;
+InternalTransfer.Search = Search;
+InternalTransfer.Operation = Actions;
+InternalTransfer.install = (app) => {
+	app.component(Transfer.name, Transfer);
+	app.component(TransferSection.name, TransferSection);
+	app.component(Search.name, Search);
+	app.component(Actions.name, Actions);
+	return app;
+};
+//#endregion
+export { InternalTransfer as default };