@sdata/web-vue 1.7.1 → 1.9.0

package/es/tree-select/hooks/use-selected-state.js

@@ -22,7 +22,18 @@ function getKeys(value) {
 }
 function useSelectedState(props) {
 	var _defaultValue$value;
-	const { defaultValue, modelValue, key2TreeNode, multiple, treeCheckable, fallbackOption, fieldNames } = toRefs(props);
+	const { defaultValue, modelValue, key2TreeNode, multiple, treeCheckable, fallbackOption, fieldNames, showPath, separator } = toRefs(props);
+	function getPathLabel(key, node) {
+		var _fieldNames$value, _separator$value;
+		if (!(showPath === null || showPath === void 0 ? void 0 : showPath.value) || !node) return;
+		const nodeDataTitle = (fieldNames === null || fieldNames === void 0 || (_fieldNames$value = fieldNames.value) === null || _fieldNames$value === void 0 ? void 0 : _fieldNames$value.title) || "title";
+		return [...node.pathParentKeys, key].map((pathKey) => key2TreeNode.value.get(pathKey)).filter((pathNode) => Boolean(pathNode)).map((pathNode) => {
+			const pathLabel = pathNode.treeNodeData[nodeDataTitle];
+			if (typeof pathLabel === "string" || typeof pathLabel === "number") return String(pathLabel);
+			if (typeof pathNode.title === "string" || typeof pathNode.title === "number") return String(pathNode.title);
+			return String(pathNode.key);
+		}).join((_separator$value = separator === null || separator === void 0 ? void 0 : separator.value) !== null && _separator$value !== void 0 ? _separator$value : " / ");
+	}
 	function normalizeValue(value) {
 		const validValue = (isArray(value) ? value : [value]).filter(isValidValue);
 		return (multiple === null || multiple === void 0 ? void 0 : multiple.value) || (treeCheckable === null || treeCheckable === void 0 ? void 0 : treeCheckable.value) ? validValue : validValue.slice(0, 1);
@@ -36,12 +47,12 @@ function useSelectedState(props) {
 				originValueMap.set(item.value, item);
 			});
 			validValue.forEach((item) => {
-				var _fieldNames$value, _ref, _ref2, _ref3, _getLabel;
+				var _fieldNames$value2, _ref, _ref2, _ref3, _ref4, _getLabel;
 				const key = getKey(item);
 				const originValueItem = originValueMap.get(key);
 				const node = key2TreeNode.value.get(key);
 				let fallbackNodeData = null;
-				const nodeDataTitle = (fieldNames === null || fieldNames === void 0 || (_fieldNames$value = fieldNames.value) === null || _fieldNames$value === void 0 ? void 0 : _fieldNames$value.title) || "title";
+				const nodeDataTitle = (fieldNames === null || fieldNames === void 0 || (_fieldNames$value2 = fieldNames.value) === null || _fieldNames$value2 === void 0 ? void 0 : _fieldNames$value2.title) || "title";
 				if (!node) {
 					const fallbackResult = isFunction(fallbackOption === null || fallbackOption === void 0 ? void 0 : fallbackOption.value) ? fallbackOption === null || fallbackOption === void 0 ? void 0 : fallbackOption.value(key) : fallbackOption === null || fallbackOption === void 0 ? void 0 : fallbackOption.value;
 					if (fallbackResult === false) return;
@@ -49,7 +60,7 @@ function useSelectedState(props) {
 				}
 				res.push(_objectSpread2(_objectSpread2(_objectSpread2({}, isLabelValue(item) ? item : {}), originValueItem), {}, {
 					value: key,
-					label: (_ref = (_ref2 = (_ref3 = (_getLabel = getLabel(item)) !== null && _getLabel !== void 0 ? _getLabel : node === null || node === void 0 ? void 0 : node.title) !== null && _ref3 !== void 0 ? _ref3 : originValueItem === null || originValueItem === void 0 ? void 0 : originValueItem.label) !== null && _ref2 !== void 0 ? _ref2 : fallbackNodeData === null || fallbackNodeData === void 0 ? void 0 : fallbackNodeData[nodeDataTitle]) !== null && _ref !== void 0 ? _ref : key
+					label: (_ref = (_ref2 = (_ref3 = (_ref4 = (_getLabel = getLabel(item)) !== null && _getLabel !== void 0 ? _getLabel : getPathLabel(key, node)) !== null && _ref4 !== void 0 ? _ref4 : node === null || node === void 0 ? void 0 : node.title) !== null && _ref3 !== void 0 ? _ref3 : originValueItem === null || originValueItem === void 0 ? void 0 : originValueItem.label) !== null && _ref2 !== void 0 ? _ref2 : fallbackNodeData === null || fallbackNodeData === void 0 ? void 0 : fallbackNodeData[nodeDataTitle]) !== null && _ref !== void 0 ? _ref : key
 				}));
 			});
 		}
@@ -67,11 +78,18 @@ function useSelectedState(props) {
 	});
 	const normalizeDefaultValue = normalizeValue((_defaultValue$value = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _defaultValue$value !== void 0 ? _defaultValue$value : []);
 	const defaultKeys = getKeys(normalizeDefaultValue);
-	const defaultLabelValues = getLabelValues(defaultKeys, getLabelValues(normalizeDefaultValue));
+	const defaultLabelValues = computed(() => getLabelValues(defaultKeys, getLabelValues(normalizeDefaultValue)));
 	const localValueKeys = ref(defaultKeys || []);
-	const localValue = ref(defaultLabelValues);
-	watch(localValueKeys, () => {
-		localValue.value = getLabelValues(localValueKeys.value, defaultLabelValues);
+	const localValue = ref(defaultLabelValues.value);
+	watch([
+		localValueKeys,
+		key2TreeNode,
+		fieldNames,
+		showPath,
+		separator,
+		defaultLabelValues
+	], () => {
+		localValue.value = getLabelValues(localValueKeys.value, defaultLabelValues.value);
 	});
 	watch([computedModelValueKeys, computedModelValue], ([valueKeys, value]) => {
 		localValueKeys.value = valueKeys || [];