element-plus-mobile 0.1.1 → 0.1.2

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

@@ -1,23 +1,28 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
-const require_types = require('../../../utils/types.js');
 const require_error = require('../../../utils/error.js');
 const require_builtin_icons = require('../../../utils/vue/builtin-icons.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('../../icon/index.js');
 const require_use_form_item = require('../../form/src/hooks/use-form-item.js');
-const require_index$3 = require('../../button/index.js');
+const require_index$3 = require('../../input/index.js');
+const require_index$4 = require('../../button/index.js');
+const require_index$5 = require('../../checkbox/index.js');
 const require_transfer = require('./transfer.js');
 const require_use_props_alias = require('./composables/use-props-alias.js');
 const require_use_checked_change = require('./composables/use-checked-change.js');
 const require_use_computed_data = require('./composables/use-computed-data.js');
 const require_use_move = require('./composables/use-move.js');
+const require_use_tab = require('./composables/use-tab.js');
 const require_transfer_panel = require('./transfer-panel2.js');
 let vue = require("vue");
 
 //#region ../../packages/components/transfer/src/transfer.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = { key: 0 };
+const _hoisted_1 = ["data-active-panel"];
+const _hoisted_2 = ["aria-selected"];
+const _hoisted_3 = ["aria-selected"];
+const _hoisted_4 = ["aria-hidden"];
+const _hoisted_5 = ["aria-hidden"];
 var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "ElTransfer",
 	__name: "transfer",
@@ -111,6 +116,7 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 		const { addToLeft, addToRight } = require_use_move.useMove(props, checkedState, emit);
 		const leftPanel = (0, vue.ref)();
 		const rightPanel = (0, vue.ref)();
+		const { activePanel, indicatorStyle, panelsRef, scrollToPanel, syncActivePanel } = require_use_tab.useTab();
 		const clearQuery = (which) => {
 			switch (which) {
 				case "left":
@@ -121,10 +127,51 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 					break;
 			}
 		};
-		const hasButtonTexts = (0, vue.computed)(() => props.buttonTexts.length === 2);
 		const leftPanelTitle = (0, vue.computed)(() => props.titles[0] || t("el.transfer.titles.0"));
 		const rightPanelTitle = (0, vue.computed)(() => props.titles[1] || t("el.transfer.titles.1"));
 		const panelFilterPlaceholder = (0, vue.computed)(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
+		const currentPanelTitle = (0, vue.computed)(() => activePanel.value === "left" ? leftPanelTitle.value : rightPanelTitle.value);
+		const formatCheckedSummary = (format, checkedLength, dataLength) => {
+			const { noChecked, hasChecked } = format;
+			if (noChecked && hasChecked) return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString());
+			return `${checkedLength}/${dataLength}`;
+		};
+		const leftCheckedSummary = (0, vue.computed)(() => formatCheckedSummary(props.format, checkedState.leftChecked.length, sourceData.value.length));
+		const rightCheckedSummary = (0, vue.computed)(() => formatCheckedSummary(props.format, checkedState.rightChecked.length, targetData.value.length));
+		const currentChecked = (0, vue.computed)(() => activePanel.value === "left" ? checkedState.leftChecked : checkedState.rightChecked);
+		const currentCheckedSummary = (0, vue.computed)(() => activePanel.value === "left" ? leftCheckedSummary.value : rightCheckedSummary.value);
+		const currentPanelRef = (0, vue.computed)(() => activePanel.value === "left" ? leftPanel.value : rightPanel.value);
+		const currentQuery = (0, vue.computed)({
+			get: () => currentPanelRef.value?.query || "",
+			set: (value) => {
+				if (currentPanelRef.value) currentPanelRef.value.query = value;
+			}
+		});
+		const currentHasCheckableData = (0, vue.computed)(() => Boolean(currentPanelRef.value?.checkableData.length));
+		const currentAllChecked = (0, vue.computed)(() => currentPanelRef.value?.allChecked ?? false);
+		const currentIsIndeterminate = (0, vue.computed)(() => currentPanelRef.value?.isIndeterminate ?? false);
+		const currentHasChecked = (0, vue.computed)(() => currentChecked.value.length > 0);
+		const currentMoveButtonText = (0, vue.computed)(() => {
+			if (activePanel.value === "left") return props.buttonTexts[1] || rightPanelTitle.value;
+			return props.buttonTexts[0] || leftPanelTitle.value;
+		});
+		const switchPanel = (panel) => {
+			scrollToPanel(panel);
+		};
+		const handleCurrentAllCheckedChange = (value) => {
+			currentPanelRef.value?.handleAllCheckedChange(value);
+		};
+		const moveCurrentChecked = async () => {
+			if (activePanel.value === "left") {
+				addToRight();
+				await (0, vue.nextTick)();
+				switchPanel("right");
+				return;
+			}
+			addToLeft();
+			await (0, vue.nextTick)();
+			switchPanel("left");
+		};
 		(0, vue.watch)(() => props.modelValue, () => {
 			if (props.validateEvent) formItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
 		});
@@ -140,15 +187,87 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 			rightPanel
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()) }, [
-				(0, vue.createVNode)(require_transfer_panel.default, {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()),
+				"data-active-panel": (0, vue.unref)(activePanel)
+			}, [
+				(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tabs")),
+					role: "tablist"
+				}, [
+					(0, vue.createElementVNode)("button", {
+						type: "button",
+						role: "tab",
+						class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("tab"), (0, vue.unref)(ns).is("active", (0, vue.unref)(activePanel) === "left")]),
+						"aria-selected": (0, vue.unref)(activePanel) === "left",
+						onClick: _cache[0] || (_cache[0] = ($event) => switchPanel("left"))
+					}, [
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-title")) }, (0, vue.toDisplayString)(leftPanelTitle.value), 3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-count")) }, (0, vue.toDisplayString)((0, vue.unref)(sourceData).length), 3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-summary")) }, (0, vue.toDisplayString)(leftCheckedSummary.value), 3)
+					], 10, _hoisted_2),
+					(0, vue.createElementVNode)("button", {
+						type: "button",
+						role: "tab",
+						class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("tab"), (0, vue.unref)(ns).is("active", (0, vue.unref)(activePanel) === "right")]),
+						"aria-selected": (0, vue.unref)(activePanel) === "right",
+						onClick: _cache[1] || (_cache[1] = ($event) => switchPanel("right"))
+					}, [
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-title")) }, (0, vue.toDisplayString)(rightPanelTitle.value), 3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-count")) }, (0, vue.toDisplayString)((0, vue.unref)(targetData).length), 3),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-summary")) }, (0, vue.toDisplayString)(rightCheckedSummary.value), 3)
+					], 10, _hoisted_3),
+					(0, vue.createElementVNode)("div", {
+						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("tab-indicator")),
+						style: (0, vue.normalizeStyle)((0, vue.unref)(indicatorStyle))
+					}, null, 6)
+				], 2),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("toolbar")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("toolbar-meta")) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("toolbar-title")) }, (0, vue.toDisplayString)(currentPanelTitle.value), 3), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("toolbar-summary")) }, (0, vue.toDisplayString)(currentCheckedSummary.value), 3)], 2), (0, vue.createVNode)((0, vue.unref)(require_index$5.ElCheckbox), {
+					"model-value": currentAllChecked.value,
+					indeterminate: currentIsIndeterminate.value,
+					disabled: !currentHasCheckableData.value,
+					"validate-event": false,
+					"aria-label": currentPanelTitle.value,
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("toolbar-check")),
+					onChange: handleCurrentAllCheckedChange
+				}, null, 8, [
+					"model-value",
+					"indeterminate",
+					"disabled",
+					"aria-label",
+					"class"
+				])], 2),
+				__props.filterable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("filter"))
+				}, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElInput), {
+					modelValue: currentQuery.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => currentQuery.value = $event),
+					size: "default",
+					placeholder: panelFilterPlaceholder.value,
+					"prefix-icon": (0, vue.unref)(require_builtin_icons.Search),
+					clearable: "",
+					"validate-event": false
+				}, null, 8, [
+					"modelValue",
+					"placeholder",
+					"prefix-icon"
+				])], 2)) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createElementVNode)("div", {
+					ref_key: "panelsRef",
+					ref: panelsRef,
+					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("panels")),
+					onScrollPassive: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(syncActivePanel) && (0, vue.unref)(syncActivePanel)(...args))
+				}, [(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("panel"), (0, vue.unref)(ns).is("active", (0, vue.unref)(activePanel) === "left")]),
+					"data-direction": "left",
+					role: "tabpanel",
+					"aria-hidden": (0, vue.unref)(activePanel) !== "left"
+				}, [(0, vue.createVNode)(require_transfer_panel.default, {
 					ref_key: "leftPanel",
 					ref: leftPanel,
 					data: (0, vue.unref)(sourceData),
 					"option-render": optionRender.value,
-					placeholder: panelFilterPlaceholder.value,
-					title: leftPanelTitle.value,
-					filterable: __props.filterable,
 					format: __props.format,
 					"filter-method": __props.filterMethod,
 					"default-checked": __props.leftDefaultChecked,
@@ -161,56 +280,23 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 				}, 8, [
 					"data",
 					"option-render",
-					"placeholder",
-					"title",
-					"filterable",
 					"format",
 					"filter-method",
 					"default-checked",
 					"props",
 					"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), {
-					type: "primary",
-					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("button"), (0, vue.unref)(ns).is("with-texts", hasButtonTexts.value)]),
-					disabled: (0, vue.unref)(require_types.isEmpty)(checkedState.rightChecked),
-					onClick: (0, vue.unref)(addToLeft)
-				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_builtin_icons.ArrowLeft))]),
-						_: 1
-					}), !(0, vue.unref)(require_types.isUndefined)(__props.buttonTexts[0]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, (0, vue.toDisplayString)(__props.buttonTexts[0]), 1)) : (0, vue.createCommentVNode)("v-if", true)]),
-					_: 1
-				}, 8, [
-					"class",
-					"disabled",
-					"onClick"
-				]), (0, vue.createVNode)((0, vue.unref)(require_index$3.ElButton), {
-					type: "primary",
-					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("button"), (0, vue.unref)(ns).is("with-texts", hasButtonTexts.value)]),
-					disabled: (0, vue.unref)(require_types.isEmpty)(checkedState.leftChecked),
-					onClick: (0, vue.unref)(addToRight)
-				}, {
-					default: (0, vue.withCtx)(() => [!(0, vue.unref)(require_types.isUndefined)(__props.buttonTexts[1]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, (0, vue.toDisplayString)(__props.buttonTexts[1]), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_builtin_icons.ArrowRight))]),
-						_: 1
-					})]),
-					_: 1
-				}, 8, [
-					"class",
-					"disabled",
-					"onClick"
-				])], 2),
-				(0, vue.createVNode)(require_transfer_panel.default, {
+				])], 10, _hoisted_4), (0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("panel"), (0, vue.unref)(ns).is("active", (0, vue.unref)(activePanel) === "right")]),
+					"data-direction": "right",
+					role: "tabpanel",
+					"aria-hidden": (0, vue.unref)(activePanel) !== "right"
+				}, [(0, vue.createVNode)(require_transfer_panel.default, {
 					ref_key: "rightPanel",
 					ref: rightPanel,
 					data: (0, vue.unref)(targetData),
 					"option-render": optionRender.value,
-					placeholder: panelFilterPlaceholder.value,
-					filterable: __props.filterable,
 					format: __props.format,
 					"filter-method": __props.filterMethod,
-					title: rightPanelTitle.value,
 					"default-checked": __props.rightDefaultChecked,
 					props: props.props,
 					onCheckedChange: (0, vue.unref)(onTargetCheckedChange)
@@ -221,16 +307,37 @@ var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, v
 				}, 8, [
 					"data",
 					"option-render",
-					"placeholder",
-					"filterable",
 					"format",
 					"filter-method",
-					"title",
 					"default-checked",
 					"props",
 					"onCheckedChange"
-				])
-			], 2);
+				])], 10, _hoisted_5)], 34),
+				(0, vue.createVNode)(vue.Transition, {
+					name: `${(0, vue.unref)(ns).namespace.value}-fade-in-linear`,
+					persisted: ""
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("action-bar")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("action-copy")) }, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("action-title")) }, (0, vue.toDisplayString)(currentPanelTitle.value), 3), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("action-summary")) }, (0, vue.toDisplayString)(currentCheckedSummary.value), 3)], 2), (0, vue.createVNode)((0, vue.unref)(require_index$4.ElButton), {
+						type: "primary",
+						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("action-button")),
+						onClick: moveCurrentChecked
+					}, {
+						default: (0, vue.withCtx)(() => [
+							(0, vue.unref)(activePanel) === "right" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$2.ElIcon), { key: 0 }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_builtin_icons.ArrowLeft))]),
+								_: 1
+							})) : (0, vue.createCommentVNode)("v-if", true),
+							(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(currentMoveButtonText.value), 1),
+							(0, vue.unref)(activePanel) === "left" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$2.ElIcon), { key: 1 }, {
+								default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_builtin_icons.ArrowRight))]),
+								_: 1
+							})) : (0, vue.createCommentVNode)("v-if", true)
+						]),
+						_: 1
+					}, 8, ["class"])], 2), [[vue.vShow, currentHasChecked.value]])]),
+					_: 1
+				}, 8, ["name"])
+			], 10, _hoisted_1);
 		};
 	}
 });

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 {\n  ArrowLeft,\n  ArrowRight,\n  debugWarn,\n  isEmpty,\n  isUndefined,\n} 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 { 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((err) => debugWarn(err))\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()\" :data-active-panel=\"activePanel\">\n    <div :class=\"ns.e('tabs')\" role=\"tablist\">\n      <button\n        type=\"button\"\n        role=\"tab\"\n        :class=\"[ns.e('tab'), ns.is('active', activePanel === 'left')]\"\n        :aria-selected=\"activePanel === 'left'\"\n        @click=\"switchPanel('left')\"\n      >\n        <span :class=\"ns.e('tab-title')\">{{ leftPanelTitle }}</span>\n        <span :class=\"ns.e('tab-count')\">{{ sourceData.length }}</span>\n        <span :class=\"ns.e('tab-summary')\">{{ leftCheckedSummary }}</span>\n      </button>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        :class=\"[ns.e('tab'), ns.is('active', activePanel === 'right')]\"\n        :aria-selected=\"activePanel === 'right'\"\n        @click=\"switchPanel('right')\"\n      >\n        <span :class=\"ns.e('tab-title')\">{{ rightPanelTitle }}</span>\n        <span :class=\"ns.e('tab-count')\">{{ targetData.length }}</span>\n        <span :class=\"ns.e('tab-summary')\">{{ rightCheckedSummary }}</span>\n      </button>\n      <div :class=\"ns.e('tab-indicator')\" :style=\"indicatorStyle\" />\n    </div>\n\n    <div :class=\"ns.e('toolbar')\">\n      <div :class=\"ns.e('toolbar-meta')\">\n        <span :class=\"ns.e('toolbar-title')\">{{ currentPanelTitle }}</span>\n        <span :class=\"ns.e('toolbar-summary')\">{{\n          currentCheckedSummary\n        }}</span>\n      </div>\n      <el-checkbox\n        :model-value=\"currentAllChecked\"\n        :indeterminate=\"currentIsIndeterminate\"\n        :disabled=\"!currentHasCheckableData\"\n        :validate-event=\"false\"\n        :aria-label=\"currentPanelTitle\"\n        :class=\"ns.e('toolbar-check')\"\n        @change=\"handleCurrentAllCheckedChange\"\n      />\n    </div>\n\n    <div v-if=\"filterable\" :class=\"ns.e('filter')\">\n      <el-input\n        v-model=\"currentQuery\"\n        size=\"default\"\n        :placeholder=\"panelFilterPlaceholder\"\n        :prefix-icon=\"Search\"\n        clearable\n        :validate-event=\"false\"\n      />\n    </div>\n\n    <div\n      ref=\"panelsRef\"\n      :class=\"ns.e('panels')\"\n      @scroll.passive=\"syncActivePanel\"\n    >\n      <div\n        :class=\"[ns.e('panel'), ns.is('active', activePanel === 'left')]\"\n        data-direction=\"left\"\n        role=\"tabpanel\"\n        :aria-hidden=\"activePanel !== 'left'\"\n      >\n        <transfer-panel\n          ref=\"leftPanel\"\n          :data=\"sourceData\"\n          :option-render=\"optionRender\"\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>\n      <div\n        :class=\"[ns.e('panel'), ns.is('active', activePanel === 'right')]\"\n        data-direction=\"right\"\n        role=\"tabpanel\"\n        :aria-hidden=\"activePanel !== 'right'\"\n      >\n        <transfer-panel\n          ref=\"rightPanel\"\n          :data=\"targetData\"\n          :option-render=\"optionRender\"\n          :format=\"format\"\n          :filter-method=\"filterMethod\"\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    </div>\n\n    <transition :name=\"`${ns.namespace.value}-fade-in-linear`\">\n      <div v-show=\"currentHasChecked\" :class=\"ns.e('action-bar')\">\n        <div :class=\"ns.e('action-copy')\">\n          <span :class=\"ns.e('action-title')\">{{ currentPanelTitle }}</span>\n          <span :class=\"ns.e('action-summary')\">{{\n            currentCheckedSummary\n          }}</span>\n        </div>\n        <el-button\n          type=\"primary\"\n          :class=\"ns.e('action-button')\"\n          @click=\"moveCurrentChecked\"\n        >\n          <el-icon v-if=\"activePanel === 'right'\"><arrow-left /></el-icon>\n          <span>{{ currentMoveButtonText }}</span>\n          <el-icon v-if=\"activePanel === 'left'\"><arrow-right /></el-icon>\n        </el-button>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { Comment, computed, h, nextTick, reactive, ref, watch } from 'vue'\nimport { ArrowLeft, ArrowRight, Search, debugWarn } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElCheckbox } from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormItem } from '@element-plus/components/form'\nimport { transferEmits } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n  useTab,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type { VNode } from 'vue'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n  TransferFormat,\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\ntype MobileTransferPanelInstance = TransferPanelInstance & {\n  query: string\n  allChecked: boolean\n  isIndeterminate: boolean\n  checkableData: T[]\n  handleAllCheckedChange: (value: CheckboxValueType) => void\n}\n\nconst leftPanel = ref<MobileTransferPanelInstance>()\nconst rightPanel = ref<MobileTransferPanelInstance>()\nconst {\n  activePanel,\n  indicatorStyle,\n  panelsRef,\n  scrollToPanel,\n  syncActivePanel,\n} = useTab()\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 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\nconst currentPanelTitle = computed(() =>\n  activePanel.value === 'left' ? leftPanelTitle.value : rightPanelTitle.value\n)\n\nconst formatCheckedSummary = (\n  format: TransferFormat,\n  checkedLength: number,\n  dataLength: number\n) => {\n  const { noChecked, hasChecked } = 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  }\n\n  return `${checkedLength}/${dataLength}`\n}\n\nconst leftCheckedSummary = computed(() =>\n  formatCheckedSummary(\n    props.format,\n    checkedState.leftChecked.length,\n    sourceData.value.length\n  )\n)\n\nconst rightCheckedSummary = computed(() =>\n  formatCheckedSummary(\n    props.format,\n    checkedState.rightChecked.length,\n    targetData.value.length\n  )\n)\n\nconst currentChecked = computed(() =>\n  activePanel.value === 'left'\n    ? checkedState.leftChecked\n    : checkedState.rightChecked\n)\n\nconst currentCheckedSummary = computed(() =>\n  activePanel.value === 'left'\n    ? leftCheckedSummary.value\n    : rightCheckedSummary.value\n)\n\nconst currentPanelRef = computed(() =>\n  activePanel.value === 'left' ? leftPanel.value : rightPanel.value\n)\n\nconst currentQuery = computed({\n  get: () => currentPanelRef.value?.query || '',\n  set: (value: string) => {\n    if (currentPanelRef.value) currentPanelRef.value.query = value\n  },\n})\n\nconst currentHasCheckableData = computed(() =>\n  Boolean(currentPanelRef.value?.checkableData.length)\n)\n\nconst currentAllChecked = computed(\n  () => currentPanelRef.value?.allChecked ?? false\n)\n\nconst currentIsIndeterminate = computed(\n  () => currentPanelRef.value?.isIndeterminate ?? false\n)\n\nconst currentHasChecked = computed(() => currentChecked.value.length > 0)\n\nconst currentMoveButtonText = computed(() => {\n  if (activePanel.value === 'left') {\n    return props.buttonTexts[1] || rightPanelTitle.value\n  }\n\n  return props.buttonTexts[0] || leftPanelTitle.value\n})\n\nconst switchPanel = (panel: TransferDirection) => {\n  scrollToPanel(panel)\n}\n\nconst handleCurrentAllCheckedChange = (value: CheckboxValueType) => {\n  currentPanelRef.value?.handleAllCheckedChange(value)\n}\n\nconst moveCurrentChecked = async () => {\n  if (activePanel.value === 'left') {\n    addToRight()\n    await nextTick()\n    switchPanel('right')\n    return\n  }\n\n  addToLeft()\n  await nextTick()\n  switchPanel('left')\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch((err) => debugWarn(err))\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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"}

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 {\n  ArrowLeft,\n  ArrowRight,\n  debugWarn,\n  isEmpty,\n  isUndefined,\n} 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 { 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((err) => debugWarn(err))\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()\" :data-active-panel=\"activePanel\">\n    <div :class=\"ns.e('tabs')\" role=\"tablist\">\n      <button\n        type=\"button\"\n        role=\"tab\"\n        :class=\"[ns.e('tab'), ns.is('active', activePanel === 'left')]\"\n        :aria-selected=\"activePanel === 'left'\"\n        @click=\"switchPanel('left')\"\n      >\n        <span :class=\"ns.e('tab-title')\">{{ leftPanelTitle }}</span>\n        <span :class=\"ns.e('tab-count')\">{{ sourceData.length }}</span>\n        <span :class=\"ns.e('tab-summary')\">{{ leftCheckedSummary }}</span>\n      </button>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        :class=\"[ns.e('tab'), ns.is('active', activePanel === 'right')]\"\n        :aria-selected=\"activePanel === 'right'\"\n        @click=\"switchPanel('right')\"\n      >\n        <span :class=\"ns.e('tab-title')\">{{ rightPanelTitle }}</span>\n        <span :class=\"ns.e('tab-count')\">{{ targetData.length }}</span>\n        <span :class=\"ns.e('tab-summary')\">{{ rightCheckedSummary }}</span>\n      </button>\n      <div :class=\"ns.e('tab-indicator')\" :style=\"indicatorStyle\" />\n    </div>\n\n    <div :class=\"ns.e('toolbar')\">\n      <div :class=\"ns.e('toolbar-meta')\">\n        <span :class=\"ns.e('toolbar-title')\">{{ currentPanelTitle }}</span>\n        <span :class=\"ns.e('toolbar-summary')\">{{\n          currentCheckedSummary\n        }}</span>\n      </div>\n      <el-checkbox\n        :model-value=\"currentAllChecked\"\n        :indeterminate=\"currentIsIndeterminate\"\n        :disabled=\"!currentHasCheckableData\"\n        :validate-event=\"false\"\n        :aria-label=\"currentPanelTitle\"\n        :class=\"ns.e('toolbar-check')\"\n        @change=\"handleCurrentAllCheckedChange\"\n      />\n    </div>\n\n    <div v-if=\"filterable\" :class=\"ns.e('filter')\">\n      <el-input\n        v-model=\"currentQuery\"\n        size=\"default\"\n        :placeholder=\"panelFilterPlaceholder\"\n        :prefix-icon=\"Search\"\n        clearable\n        :validate-event=\"false\"\n      />\n    </div>\n\n    <div\n      ref=\"panelsRef\"\n      :class=\"ns.e('panels')\"\n      @scroll.passive=\"syncActivePanel\"\n    >\n      <div\n        :class=\"[ns.e('panel'), ns.is('active', activePanel === 'left')]\"\n        data-direction=\"left\"\n        role=\"tabpanel\"\n        :aria-hidden=\"activePanel !== 'left'\"\n      >\n        <transfer-panel\n          ref=\"leftPanel\"\n          :data=\"sourceData\"\n          :option-render=\"optionRender\"\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>\n      <div\n        :class=\"[ns.e('panel'), ns.is('active', activePanel === 'right')]\"\n        data-direction=\"right\"\n        role=\"tabpanel\"\n        :aria-hidden=\"activePanel !== 'right'\"\n      >\n        <transfer-panel\n          ref=\"rightPanel\"\n          :data=\"targetData\"\n          :option-render=\"optionRender\"\n          :format=\"format\"\n          :filter-method=\"filterMethod\"\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    </div>\n\n    <transition :name=\"`${ns.namespace.value}-fade-in-linear`\">\n      <div v-show=\"currentHasChecked\" :class=\"ns.e('action-bar')\">\n        <div :class=\"ns.e('action-copy')\">\n          <span :class=\"ns.e('action-title')\">{{ currentPanelTitle }}</span>\n          <span :class=\"ns.e('action-summary')\">{{\n            currentCheckedSummary\n          }}</span>\n        </div>\n        <el-button\n          type=\"primary\"\n          :class=\"ns.e('action-button')\"\n          @click=\"moveCurrentChecked\"\n        >\n          <el-icon v-if=\"activePanel === 'right'\"><arrow-left /></el-icon>\n          <span>{{ currentMoveButtonText }}</span>\n          <el-icon v-if=\"activePanel === 'left'\"><arrow-right /></el-icon>\n        </el-button>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends TransferDataItem = TransferDataItem\">\nimport { Comment, computed, h, nextTick, reactive, ref, watch } from 'vue'\nimport { ArrowLeft, ArrowRight, Search, debugWarn } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElCheckbox } from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormItem } from '@element-plus/components/form'\nimport { transferEmits } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n  useTab,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type { VNode } from 'vue'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n  TransferFormat,\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\ntype MobileTransferPanelInstance = TransferPanelInstance & {\n  query: string\n  allChecked: boolean\n  isIndeterminate: boolean\n  checkableData: T[]\n  handleAllCheckedChange: (value: CheckboxValueType) => void\n}\n\nconst leftPanel = ref<MobileTransferPanelInstance>()\nconst rightPanel = ref<MobileTransferPanelInstance>()\nconst {\n  activePanel,\n  indicatorStyle,\n  panelsRef,\n  scrollToPanel,\n  syncActivePanel,\n} = useTab()\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 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\nconst currentPanelTitle = computed(() =>\n  activePanel.value === 'left' ? leftPanelTitle.value : rightPanelTitle.value\n)\n\nconst formatCheckedSummary = (\n  format: TransferFormat,\n  checkedLength: number,\n  dataLength: number\n) => {\n  const { noChecked, hasChecked } = 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  }\n\n  return `${checkedLength}/${dataLength}`\n}\n\nconst leftCheckedSummary = computed(() =>\n  formatCheckedSummary(\n    props.format,\n    checkedState.leftChecked.length,\n    sourceData.value.length\n  )\n)\n\nconst rightCheckedSummary = computed(() =>\n  formatCheckedSummary(\n    props.format,\n    checkedState.rightChecked.length,\n    targetData.value.length\n  )\n)\n\nconst currentChecked = computed(() =>\n  activePanel.value === 'left'\n    ? checkedState.leftChecked\n    : checkedState.rightChecked\n)\n\nconst currentCheckedSummary = computed(() =>\n  activePanel.value === 'left'\n    ? leftCheckedSummary.value\n    : rightCheckedSummary.value\n)\n\nconst currentPanelRef = computed(() =>\n  activePanel.value === 'left' ? leftPanel.value : rightPanel.value\n)\n\nconst currentQuery = computed({\n  get: () => currentPanelRef.value?.query || '',\n  set: (value: string) => {\n    if (currentPanelRef.value) currentPanelRef.value.query = value\n  },\n})\n\nconst currentHasCheckableData = computed(() =>\n  Boolean(currentPanelRef.value?.checkableData.length)\n)\n\nconst currentAllChecked = computed(\n  () => currentPanelRef.value?.allChecked ?? false\n)\n\nconst currentIsIndeterminate = computed(\n  () => currentPanelRef.value?.isIndeterminate ?? false\n)\n\nconst currentHasChecked = computed(() => currentChecked.value.length > 0)\n\nconst currentMoveButtonText = computed(() => {\n  if (activePanel.value === 'left') {\n    return props.buttonTexts[1] || rightPanelTitle.value\n  }\n\n  return props.buttonTexts[0] || leftPanelTitle.value\n})\n\nconst switchPanel = (panel: TransferDirection) => {\n  scrollToPanel(panel)\n}\n\nconst handleCurrentAllCheckedChange = (value: CheckboxValueType) => {\n  currentPanelRef.value?.handleAllCheckedChange(value)\n}\n\nconst moveCurrentChecked = async () => {\n  if (activePanel.value === 'left') {\n    addToRight()\n    await nextTick()\n    switchPanel('right')\n    return\n  }\n\n  addToLeft()\n  await nextTick()\n  switchPanel('left')\n}\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch((err) => debugWarn(err))\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/tree-select/src/tree-select.vue.d.ts

@@ -7,7 +7,6 @@ import "../../select/index.js";
 import { AllowDragFunction, AllowDropFunction, FilterNodeMethodFunction, LoadFunction, RenderContentFunction, TreeData, TreeKey, TreeOptionProps } from "../../tree/src/tree.type.js";
 import "../../tree/index.js";
 import "../../../index.js";
-import { Options, Placement } from "../../popper/index.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/tree-select/src/tree-select.vue.d.ts
@@ -128,7 +127,6 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   remote: BooleanConstructor;
   debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   loadingText: StringConstructor;
@@ -161,13 +159,10 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   collapseTagsTooltip: BooleanConstructor;
   tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
   maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-  mobile: BooleanConstructor;
   persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   clearIcon: EpPropFinalized<(new (...args: any[]) => IconPropType & {}) | (() => IconPropType) | (((new (...args: any[]) => IconPropType & {}) | (() => IconPropType)) | null)[], unknown, unknown, vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
   }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
-  fitInputWidth: BooleanConstructor;
   suffixIcon: EpPropFinalized<(new (...args: any[]) => IconPropType & {}) | (() => IconPropType) | (((new (...args: any[]) => IconPropType & {}) | (() => IconPropType)) | null)[], unknown, unknown, vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
   }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
@@ -187,17 +182,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   remoteShowSuffix: BooleanConstructor;
-  showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
-  offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
-  fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
   tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
-  appendTo: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
   options: {
     readonly type: vue.PropType<Record<string, any>[]>;
     readonly required: false;
@@ -322,7 +307,6 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   remote: BooleanConstructor;
   debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   loadingText: StringConstructor;
@@ -355,13 +339,10 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   collapseTagsTooltip: BooleanConstructor;
   tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
   maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-  mobile: BooleanConstructor;
   persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   clearIcon: EpPropFinalized<(new (...args: any[]) => IconPropType & {}) | (() => IconPropType) | (((new (...args: any[]) => IconPropType & {}) | (() => IconPropType)) | null)[], unknown, unknown, vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
   }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
-  fitInputWidth: BooleanConstructor;
   suffixIcon: EpPropFinalized<(new (...args: any[]) => IconPropType & {}) | (() => IconPropType) | (((new (...args: any[]) => IconPropType & {}) | (() => IconPropType)) | null)[], unknown, unknown, vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
   }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
@@ -381,17 +362,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   remoteShowSuffix: BooleanConstructor;
-  showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
-  offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
-  fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
   tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
-  appendTo: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
   options: {
     readonly type: vue.PropType<Record<string, any>[]>;
     readonly required: false;
@@ -400,17 +371,13 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   };
 }>> & Readonly<{}>, {
   lazy: boolean;
-  offset: number;
-  teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   props: TreeOptionProps;
   effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
   data: TreeData;
   valueKey: string;
   modelValue: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown>;
   debounce: number;
-  placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "bottom-start" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
   popperClass: string;
-  fitInputWidth: boolean;
   disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   autocomplete: string;
   clearable: boolean;
@@ -418,11 +385,7 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
   suffixIcon: IconPropType;
   tabindex: EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>;
   validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  mobile: boolean;
   multiple: boolean;
-  fallbackPlacements: Placement[];
-  popperOptions: Partial<Options>;
-  showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   loading: boolean;
   valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;

package/lib/components/tree-select/src/tree.js

@@ -59,6 +59,10 @@ const useTree = (props, { attrs, slots, emit }, { select, tree, key }) => {
 	const emitChange = (val) => {
 		if (!(0, lodash_unified.isEqual)(props.modelValue, val)) emit(require_event.CHANGE_EVENT, val);
 	};
+	const isSameValue = (left, right) => {
+		if (left !== null && typeof left === "object" || right !== null && typeof right === "object") return (0, lodash_unified.isEqual)((0, lodash_unified.get)(left, props.valueKey), (0, lodash_unified.get)(right, props.valueKey));
+		return (0, lodash_unified.isEqual)(left, right);
+	};
 	function update(val) {
 		emit(require_event.UPDATE_MODEL_EVENT, val);
 		emitChange(val);
@@ -99,8 +103,17 @@ const useTree = (props, { attrs, slots, emit }, { select, tree, key }) => {
 			if (props.showCheckbox && props.checkOnClickNode) return;
 			if (!props.showCheckbox && (props.checkStrictly || node.isLeaf)) {
 				if (!getNodeValByProp("disabled", data)) {
-					const option = select.value?.states.options.get(getNodeValByProp("value", data));
-					select.value?.handleOptionSelect(option);
+					const value = getNodeValByProp("value", data);
+					if (props.multiple) {
+						const values = require_utils.toValidArray(props.modelValue);
+						update(values.some((item) => isSameValue(item, value)) ? values.filter((item) => !isSameValue(item, value)) : values.concat(value));
+						(0, vue.nextTick)(() => {
+							select.value?.focus();
+						});
+					} else {
+						const option = select.value?.states.options.get(value);
+						select.value?.handleOptionSelect(option);
+					}
 				}
 			} else if (props.expandOnClickNode) e.proxy.handleExpandIconClick();
 		},