@will-ui/vue 1.0.0

package/dist/components/tree-choose/TreeChoose.js

@@ -0,0 +1,320 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import Icon_default from "../icon/Icon.js";
+import { getParent } from "../../util/tools.js";
+import { effectiveBgVar, effectiveColorVar, effectiveSizeVar, effectiveTextVar, mergeStyle, propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import Layer_default from "../layer/Layer.js";
+import Close_default from "../close/Close.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import Tree, { runtimeProps } from "../tree/Tree.js";
+import { TREE_CHOOSE_FALLBACK } from "./config.js";
+import { computed, createVNode, defineComponent, inject, mergeProps, ref, watch } from "vue";
+//#region components/tree-choose/TreeChoose.tsx
+var TreeChoose_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	name: "TreeChoose",
+	components: {
+		Layer: Layer_default,
+		Close: Close_default,
+		Icon: Icon_default,
+		Tree
+	},
+	emits: [
+		"update:show",
+		"update:modelValue",
+		"update:keys",
+		"clear",
+		"change"
+	],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: void 0
+		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			default: void 0
+		},
+		/** 预留：搜索占位，当前未实现搜索 UI */
+		searchPlaceholder: {
+			type: String,
+			default: void 0
+		},
+		sign: {
+			type: String,
+			default: void 0
+		},
+		/** 预留：懒加载，当前未实现 */
+		lazyLoad: Function,
+		placement: {
+			type: String,
+			default: void 0
+		},
+		adjustPosition: {
+			type: String,
+			default: void 0
+		},
+		nearby: {
+			type: Boolean,
+			default: false
+		},
+		/** 实例 CSS 变量（如 `--w-prop-tree-choose-bg-color`） */
+		cssVars: {
+			type: Object,
+			default: void 0
+		},
+		...runtimeProps,
+		keys: {
+			type: Array,
+			default: () => []
+		}
+	},
+	setup(props, { emit, attrs, slots, expose }) {
+		const formItem = inject("formItem", void 0);
+		const cfg = useComponentConfig("TreeChoose", props, TREE_CHOOSE_FALLBACK);
+		const { t } = useUII18n();
+		const disabled = computed(() => !!(cfg.value.disabled || formItem?.disabled));
+		const block = computed(() => !!cfg.value.block);
+		const clearable = computed(() => !!cfg.value.clearable);
+		const sign = computed(() => cfg.value.sign);
+		const placeholder = computed(() => cfg.value.placeholder);
+		const keyField = computed(() => cfg.value.keyField);
+		const textField = computed(() => cfg.value.textField);
+		const childField = computed(() => cfg.value.childField);
+		const hasCheckbox = computed(() => !!cfg.value.hasCheckbox);
+		const visible = ref(!!props.show);
+		const triggerRect = ref();
+		const treeRef = ref(null);
+		watch(() => props.show, (v) => {
+			visible.value = !!v;
+		});
+		watch(visible, (v) => {
+			emit("update:show", v);
+		});
+		function findNodeByKey(key) {
+			const { rows } = getParent({
+				value: key,
+				arr: props.data || [],
+				prop: keyField.value,
+				children: childField.value
+			});
+			return rows.length > 0 ? rows[rows.length - 1] : null;
+		}
+		/** 下拉打开后：展开已选路径并滚到首项（reveal，不折叠其它节点） */
+		function handleAfterEnter() {
+			const tree = treeRef.value;
+			if (!tree) return;
+			if (hasCheckbox.value) {
+				const keys = props.keys;
+				if (!keys?.length) return;
+				keys.forEach((k) => tree.revealToNode(k, false));
+				tree.revealToNode(keys[0], true);
+				return;
+			}
+			const v = props.modelValue;
+			if (v !== void 0 && v !== null) tree.revealToNode(v, true);
+		}
+		const hasValue = computed(() => {
+			if (hasCheckbox.value) return !!(props.keys && props.keys.length);
+			return props.modelValue !== void 0 && props.modelValue !== null;
+		});
+		const placeholderText = computed(() => {
+			if (hasCheckbox.value) {
+				const v = props.keys;
+				if (v && v.length) {
+					if (slots.checked) return v.map((key, index) => {
+						const item = findNodeByKey(key);
+						return item ? slots.checked({
+							item,
+							index
+						}) : null;
+					}).filter(Boolean);
+					const selectedText = t("choose2.selectedItems", {
+						count: v.length,
+						suffix: ""
+					});
+					return createVNode("span", { "class": "w-no-select" }, [selectedText]);
+				}
+			} else {
+				const v = props.modelValue;
+				if (v !== void 0 && v !== null) {
+					const { rows } = getParent({
+						value: v,
+						arr: props.data || [],
+						prop: keyField.value,
+						children: childField.value
+					});
+					if (rows.length > 0) {
+						const item = rows[rows.length - 1];
+						if (slots.checked) return slots.checked({
+							item,
+							index: 0
+						});
+						const pathText = rows.map((node) => node[textField.value]).join(sign.value);
+						return createVNode("span", { "class": "w-no-select" }, [pathText]);
+					}
+				}
+			}
+			return createVNode("span", { "class": "w-text-placeholder w-no-select" }, [placeholder.value]);
+		});
+		const tokenStyle = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("tree-choose", cfg.value.size),
+			...propColorToCssVars("tree-choose", cfg.value.color),
+			"--w-prop-tree-size": effectiveSizeVar("tree-choose"),
+			"--w-prop-tree-color": effectiveColorVar("tree-choose"),
+			"--w-prop-tree-bg-color": effectiveBgVar("tree-choose"),
+			"--w-prop-tree-text-color": effectiveTextVar("tree-choose"),
+			"--w-prop-layer-bg-color": effectiveBgVar("tree-choose"),
+			"--w-prop-layer-text-color": effectiveTextVar("tree-choose"),
+			...props.cssVars
+		}));
+		const layerContentStyle = computed(() => {
+			if (triggerRect.value) {
+				const viewportHeight = window.innerHeight;
+				const triggerBottom = triggerRect.value.bottom;
+				const triggerTop = triggerRect.value.top;
+				let availableHeight = viewportHeight - triggerBottom - 40;
+				if (availableHeight < 200 && triggerTop > viewportHeight / 2) availableHeight = triggerTop - 40;
+				const maxHeight = Math.max(200, Math.min(500, availableHeight));
+				return mergeStyle(tokenStyle.value, {
+					minWidth: triggerRect.value.width + "px",
+					maxHeight: maxHeight + "px"
+				});
+			}
+			return tokenStyle.value;
+		});
+		const layerOptions = computed(() => {
+			return {
+				show: visible.value,
+				nearby: props.nearby,
+				disabled: disabled.value,
+				placement: cfg.value.placement || "bottom-start",
+				adjustPosition: cfg.value.adjustPosition,
+				hasArrow: false,
+				gap: 2,
+				transitionName: "w-slide-y",
+				layerStyle: layerContentStyle.value,
+				"onUpdate:show": (b) => {
+					visible.value = b;
+				},
+				"onGet-trigger-rect": (rect) => {
+					triggerRect.value = rect;
+				},
+				"onAfter-enter": handleAfterEnter
+			};
+		});
+		const treeDataOptions = computed(() => {
+			const commonOptions = {
+				class: "w-tree-choose-layer",
+				data: props.data,
+				size: cfg.value.size,
+				indent: cfg.value.indent,
+				keyField: cfg.value.keyField,
+				textField: cfg.value.textField,
+				childField: cfg.value.childField,
+				onlyOneSpread: cfg.value.onlyOneSpread,
+				onlyChooseLeaf: cfg.value.onlyChooseLeaf,
+				checkable: props.checkable
+			};
+			if (hasCheckbox.value) return {
+				...commonOptions,
+				hasCheckbox: true,
+				checkedMode: cfg.value.checkedMode || "every",
+				keys: props.keys,
+				"onUpdate:keys": (arr) => {
+					emit("update:keys", arr);
+					emit("change", arr);
+					formItem?.validate("change");
+				}
+			};
+			return {
+				...commonOptions,
+				hasCheckbox: false,
+				modelValue: props.modelValue,
+				"onUpdate:modelValue": (key) => {
+					emit("update:modelValue", key);
+					emit("change", key);
+					formItem?.validate("change");
+					visible.value = false;
+				}
+			};
+		});
+		function clear() {
+			if (hasCheckbox.value) {
+				emit("update:keys", []);
+				emit("change", []);
+			} else {
+				emit("update:modelValue", void 0);
+				emit("change", void 0);
+			}
+			emit("clear");
+			formItem?.validate("change");
+		}
+		function renderTrigger() {
+			const arrowBtn = createVNode(Icon_default, {
+				"rotate": visible.value,
+				"name": "w-icon-arrow-down"
+			}, null);
+			const closeBtn = !disabled.value && clearable.value && hasValue.value ? createVNode(Close_default, {
+				"name": "w-icon-close-fill",
+				"onClick": (e) => {
+					e.stopPropagation();
+					clear();
+				}
+			}, null) : void 0;
+			const triggerOptions = mergeProps(attrs, {
+				class: ["w-tree-choose-trigger", {
+					"w-tree-choose-trigger-disabled": disabled.value,
+					"w-tree-choose-trigger-block": block.value,
+					"w-tree-choose-trigger-active": visible.value,
+					"w-tree-choose-placeholder": !hasValue.value
+				}],
+				style: mergeStyle(tokenStyle.value, attrs.style)
+			});
+			return createVNode("div", triggerOptions, [createVNode("div", { "class": "w-tree-choose-text" }, [placeholderText.value]), createVNode("div", { "class": "w-tree-choose-icon" }, [closeBtn, closeBtn === void 0 ? arrowBtn : void 0])]);
+		}
+		function renderContent() {
+			if (disabled.value) return null;
+			const treeSlots = {};
+			if (slots.icon) treeSlots.icon = slots.icon;
+			if (slots["icon-spread"]) treeSlots["icon-spread"] = slots["icon-spread"];
+			if (slots["icon-fold"]) treeSlots["icon-fold"] = slots["icon-fold"];
+			if (slots["icon-leaf"]) treeSlots["icon-leaf"] = slots["icon-leaf"];
+			if (slots.label) treeSlots.label = slots.label;
+			return createVNode("div", { "class": "w-tree-choose-content" }, [createVNode(Tree, mergeProps({ "ref": treeRef }, treeDataOptions.value), Object.keys(treeSlots).length > 0 ? treeSlots : void 0), slots.footer ? createVNode("div", { "class": "w-tree-choose-footer" }, [slots.footer()]) : null]);
+		}
+		expose({
+			clear,
+			getCheckedKeys: () => treeRef.value?.getCheckedKeys() ?? [],
+			getSubmitData: () => treeRef.value?.getSubmitData() ?? {
+				keys: [],
+				rows: []
+			},
+			expandToNode: (key) => treeRef.value?.expandToNode(key),
+			revealToNode: (key, scroll) => treeRef.value?.revealToNode(key, scroll),
+			getTree: () => treeRef.value
+		});
+		return () => {
+			const layerSlots = {
+				trigger: renderTrigger,
+				default: renderContent
+			};
+			return createVNode(Layer_default, layerOptions.value, layerSlots);
+		};
+	}
+});
+//#endregion
+export { TreeChoose_default as default };
+
+//# sourceMappingURL=TreeChoose.js.map

package/dist/components/tree-choose/TreeChoose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChoose.js","names":["computed","ref","watch","defineComponent","inject","mergeProps","createVNode","_createVNode","_mergeProps","Layer","Close","Icon","Tree","runtimeProps","treeProps","useUII18n","getParent","mergeStyle","propSizeToCssVars","propColorToCssVars","effectiveSizeVar","effectiveColorVar","effectiveBgVar","effectiveTextVar","toCssVarsStyle","useComponentConfig","TREE_CHOOSE_FALLBACK","inheritAttrs","name","components","emits","props","show","type","Boolean","default","disabled","undefined","block","clearable","placeholder","String","searchPlaceholder","sign","lazyLoad","Function","placement","adjustPosition","nearby","cssVars","Object","keys","Array","setup","emit","attrs","slots","expose","formItem","cfg","t","value","keyField","textField","childField","hasCheckbox","visible","triggerRect","treeRef","v","findNodeByKey","key","rows","arr","data","prop","children","length","handleAfterEnter","tree","forEach","k","revealToNode","modelValue","hasValue","placeholderText","checked","map","index","item","filter","selectedText","count","suffix","pathText","node","join","tokenStyle","size","color","layerContentStyle","viewportHeight","window","innerHeight","triggerBottom","bottom","triggerTop","top","availableHeight","maxHeight","Math","max","min","minWidth","width","layerOptions","hasArrow","gap","transitionName","layerStyle","b","rect","treeDataOptions","commonOptions","class","indent","onlyOneSpread","onlyChooseLeaf","checkable","checkedMode","validate","clear","renderTrigger","arrowBtn","closeBtn","e","stopPropagation","triggerOptions","style","renderContent","treeSlots","icon","label","footer","getCheckedKeys","getSubmitData","expandToNode","scroll","getTree","layerSlots","trigger"],"sources":["../../../components/tree-choose/TreeChoose.tsx"],"sourcesContent":["import type { PropType } from 'vue'\r\nimport { computed, ref, watch, defineComponent, inject, mergeProps } from 'vue'\r\nimport type { RectType } from '../../config/types'\r\nimport Layer from '../layer/index'\r\nimport Close from '../close/index'\r\nimport Icon from '../icon/index'\r\nimport Tree from '../tree/Tree'\r\nimport { runtimeProps as treeProps } from '../tree/Tree'\r\nimport type { TreeExpose } from '../tree/Tree'\r\nimport { type AdjustmentPosition, type PlacementType } from '../../config/types'\r\nimport { useUII18n } from '../../use/useUII18n'\r\nimport {\r\n  getParent,\r\n  mergeStyle,\r\n  propSizeToCssVars,\r\n  propColorToCssVars,\r\n  effectiveSizeVar,\r\n  effectiveColorVar,\r\n  effectiveBgVar,\r\n  effectiveTextVar,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport {\r\n  TREE_CHOOSE_FALLBACK,\r\n} from './config'\r\n\r\nexport type { TreeChooseGlobalConfig } from './config'\r\nexport { TREE_CHOOSE_FALLBACK } from './config'\r\n\r\nexport type TreeChooseExpose = {\r\n  clear: () => void\r\n  getCheckedKeys: () => Array<string | number>\r\n  getSubmitData: () => ReturnType<TreeExpose['getSubmitData']>\r\n  expandToNode: (key: string | number) => void\r\n  revealToNode: (key: string | number, scroll?: boolean) => void\r\n  /** 内部 Tree 实例（高级） */\r\n  getTree: () => TreeExpose | null\r\n}\r\n\r\nexport default defineComponent({\r\n  inheritAttrs: false,\r\n  name: 'TreeChoose',\r\n  components: { Layer, Close, Icon, Tree },\r\n  emits: [\r\n    'update:show',\r\n    'update:modelValue',\r\n    'update:keys',\r\n    'clear',\r\n    'change',\r\n  ],\r\n  props: {\r\n    show: { type: Boolean, default: false },\r\n    disabled: { type: Boolean, default: undefined },\r\n    block: { type: Boolean, default: undefined },\r\n    clearable: { type: Boolean, default: undefined },\r\n    placeholder: { type: String, default: undefined },\r\n    /** 预留：搜索占位，当前未实现搜索 UI */\r\n    searchPlaceholder: { type: String, default: undefined },\r\n    sign: { type: String, default: undefined },\r\n    /** 预留：懒加载，当前未实现 */\r\n    lazyLoad: Function as PropType<() => Promise<any[]>>,\r\n    placement: {\r\n      type: String as PropType<PlacementType>,\r\n      default: undefined,\r\n    },\r\n    adjustPosition: {\r\n      type: String as PropType<AdjustmentPosition>,\r\n      default: undefined,\r\n    },\r\n    nearby: { type: Boolean, default: false },\r\n    /** 实例 CSS 变量（如 `--w-prop-tree-choose-bg-color`） */\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n    ...treeProps,\r\n    keys: {\r\n      type: Array as PropType<Array<string | number>>,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props: any, { emit, attrs, slots, expose }) {\r\n    const formItem: any = inject('formItem', undefined)\r\n    const cfg = useComponentConfig('TreeChoose', props, TREE_CHOOSE_FALLBACK)\r\n    const { t } = useUII18n()\r\n\r\n    const disabled = computed(\r\n      () => !!(cfg.value.disabled || formItem?.disabled),\r\n    )\r\n    const block = computed(() => !!cfg.value.block)\r\n    const clearable = computed(() => !!cfg.value.clearable)\r\n    const sign = computed(() => cfg.value.sign as string)\r\n    const placeholder = computed(() => cfg.value.placeholder as string | undefined)\r\n    const keyField = computed(() => cfg.value.keyField as string)\r\n    const textField = computed(() => cfg.value.textField as string)\r\n    const childField = computed(() => cfg.value.childField as string)\r\n    const hasCheckbox = computed(() => !!cfg.value.hasCheckbox)\r\n\r\n    const visible = ref(!!props.show)\r\n    const triggerRect = ref<RectType>()\r\n    const treeRef = ref<TreeExpose | null>(null)\r\n\r\n    watch(\r\n      () => props.show,\r\n      (v) => {\r\n        visible.value = !!v\r\n      },\r\n    )\r\n    watch(visible, (v) => {\r\n      emit('update:show', v)\r\n    })\r\n\r\n    function findNodeByKey(key: string | number) {\r\n      const { rows } = getParent({\r\n        value: key,\r\n        arr: props.data || [],\r\n        prop: keyField.value,\r\n        children: childField.value,\r\n      })\r\n      return rows.length > 0 ? rows[rows.length - 1] : null\r\n    }\r\n\r\n    /** 下拉打开后：展开已选路径并滚到首项（reveal，不折叠其它节点） */\r\n    function handleAfterEnter() {\r\n      const tree = treeRef.value\r\n      if (!tree) return\r\n\r\n      if (hasCheckbox.value) {\r\n        const keys = props.keys as Array<string | number> | undefined\r\n        if (!keys?.length) return\r\n        keys.forEach((k) => tree.revealToNode(k, false))\r\n        tree.revealToNode(keys[0], true)\r\n        return\r\n      }\r\n\r\n      const v = props.modelValue\r\n      if (v !== undefined && v !== null) {\r\n        tree.revealToNode(v, true)\r\n      }\r\n    }\r\n\r\n    const hasValue = computed(() => {\r\n      if (hasCheckbox.value) {\r\n        return !!(props.keys && props.keys.length)\r\n      }\r\n      return props.modelValue !== undefined && props.modelValue !== null\r\n    })\r\n\r\n    const placeholderText = computed(() => {\r\n      if (hasCheckbox.value) {\r\n        const v = props.keys as Array<string | number> | undefined\r\n        if (v && v.length) {\r\n          if (slots.checked) {\r\n            return v\r\n              .map((key, index) => {\r\n                const item = findNodeByKey(key)\r\n                return item ? slots.checked!({ item, index }) : null\r\n              })\r\n              .filter(Boolean)\r\n          }\r\n          const selectedText = t('choose2.selectedItems', {\r\n            count: v.length,\r\n            suffix: '',\r\n          })\r\n          return <span class=\"w-no-select\">{selectedText}</span>\r\n        }\r\n      } else {\r\n        const v = props.modelValue\r\n        if (v !== undefined && v !== null) {\r\n          const { rows } = getParent({\r\n            value: v,\r\n            arr: props.data || [],\r\n            prop: keyField.value,\r\n            children: childField.value,\r\n          })\r\n          if (rows.length > 0) {\r\n            const item = rows[rows.length - 1]\r\n            if (slots.checked) {\r\n              return slots.checked!({ item, index: 0 })\r\n            }\r\n            const pathText = rows\r\n              .map((node: any) => node[textField.value])\r\n              .join(sign.value)\r\n            return <span class=\"w-no-select\">{pathText}</span>\r\n          }\r\n        }\r\n      }\r\n      return (\r\n        <span class=\"w-text-placeholder w-no-select\">{placeholder.value}</span>\r\n      )\r\n    })\r\n\r\n    const tokenStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('tree-choose', cfg.value.size),\r\n        ...propColorToCssVars('tree-choose', cfg.value.color),\r\n        '--w-prop-tree-size': effectiveSizeVar('tree-choose'),\r\n        '--w-prop-tree-color': effectiveColorVar('tree-choose'),\r\n        '--w-prop-tree-bg-color': effectiveBgVar('tree-choose'),\r\n        '--w-prop-tree-text-color': effectiveTextVar('tree-choose'),\r\n        '--w-prop-layer-bg-color': effectiveBgVar('tree-choose'),\r\n        '--w-prop-layer-text-color': effectiveTextVar('tree-choose'),\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n\r\n    const layerContentStyle = computed(() => {\r\n      if (triggerRect.value) {\r\n        const viewportHeight = window.innerHeight\r\n        const triggerBottom = triggerRect.value.bottom\r\n        const triggerTop = triggerRect.value.top\r\n\r\n        let availableHeight = viewportHeight - triggerBottom - 40\r\n\r\n        if (availableHeight < 200 && triggerTop > viewportHeight / 2) {\r\n          availableHeight = triggerTop - 40\r\n        }\r\n\r\n        const maxHeight = Math.max(200, Math.min(500, availableHeight))\r\n\r\n        return mergeStyle(tokenStyle.value, {\r\n          minWidth: triggerRect.value.width + 'px',\r\n          maxHeight: maxHeight + 'px',\r\n        })\r\n      }\r\n      return tokenStyle.value\r\n    })\r\n\r\n    const layerOptions = computed<Record<string, any>>(() => {\r\n      return {\r\n        show: visible.value,\r\n        nearby: props.nearby,\r\n        disabled: disabled.value,\r\n        placement: cfg.value.placement || 'bottom-start',\r\n        adjustPosition: cfg.value.adjustPosition,\r\n        hasArrow: false,\r\n        gap: 2,\r\n        transitionName: 'w-slide-y',\r\n        layerStyle: layerContentStyle.value,\r\n        'onUpdate:show': (b: boolean) => {\r\n          visible.value = b\r\n        },\r\n        'onGet-trigger-rect': (rect: RectType) => {\r\n          triggerRect.value = rect\r\n        },\r\n        'onAfter-enter': handleAfterEnter,\r\n      }\r\n    })\r\n\r\n    const treeDataOptions = computed(() => {\r\n      const commonOptions = {\r\n        class: 'w-tree-choose-layer',\r\n        data: props.data,\r\n        size: cfg.value.size,\r\n        indent: cfg.value.indent,\r\n        keyField: cfg.value.keyField,\r\n        textField: cfg.value.textField,\r\n        childField: cfg.value.childField,\r\n        onlyOneSpread: cfg.value.onlyOneSpread,\r\n        onlyChooseLeaf: cfg.value.onlyChooseLeaf,\r\n        checkable: props.checkable,\r\n      }\r\n\r\n      if (hasCheckbox.value) {\r\n        return {\r\n          ...commonOptions,\r\n          hasCheckbox: true,\r\n          checkedMode: cfg.value.checkedMode || 'every',\r\n          keys: props.keys,\r\n          'onUpdate:keys': (arr: any[]) => {\r\n            emit('update:keys', arr)\r\n            emit('change', arr)\r\n            formItem?.validate('change')\r\n          },\r\n        }\r\n      }\r\n\r\n      return {\r\n        ...commonOptions,\r\n        hasCheckbox: false,\r\n        modelValue: props.modelValue,\r\n        'onUpdate:modelValue': (key: string | number) => {\r\n          emit('update:modelValue', key)\r\n          emit('change', key)\r\n          formItem?.validate('change')\r\n          visible.value = false\r\n        },\r\n      }\r\n    })\r\n\r\n    function clear() {\r\n      if (hasCheckbox.value) {\r\n        emit('update:keys', [])\r\n        emit('change', [])\r\n      } else {\r\n        emit('update:modelValue', undefined)\r\n        emit('change', undefined)\r\n      }\r\n      emit('clear')\r\n      formItem?.validate('change')\r\n    }\r\n\r\n    function renderTrigger() {\r\n      const arrowBtn = <Icon rotate={visible.value} name=\"w-icon-arrow-down\" />\r\n      const closeBtn =\r\n        !disabled.value && clearable.value && hasValue.value ? (\r\n          <Close\r\n            name=\"w-icon-close-fill\"\r\n            onClick={(e: MouseEvent) => {\r\n              e.stopPropagation()\r\n              clear()\r\n            }}\r\n          />\r\n        ) : undefined\r\n\r\n      const triggerOptions = mergeProps(attrs, {\r\n        class: [\r\n          'w-tree-choose-trigger',\r\n          {\r\n            'w-tree-choose-trigger-disabled': disabled.value,\r\n            'w-tree-choose-trigger-block': block.value,\r\n            'w-tree-choose-trigger-active': visible.value,\r\n            'w-tree-choose-placeholder': !hasValue.value,\r\n          },\r\n        ],\r\n        style: mergeStyle(\r\n          tokenStyle.value,\r\n          attrs.style as Record<string, any> | undefined,\r\n        ),\r\n      })\r\n\r\n      return (\r\n        <div {...triggerOptions}>\r\n          <div class=\"w-tree-choose-text\">{placeholderText.value}</div>\r\n          <div class=\"w-tree-choose-icon\">\r\n            {closeBtn}\r\n            {closeBtn === undefined ? arrowBtn : undefined}\r\n          </div>\r\n        </div>\r\n      )\r\n    }\r\n\r\n    function renderContent() {\r\n      if (disabled.value) {\r\n        return null\r\n      }\r\n\r\n      const treeSlots: Record<string, any> = {}\r\n      if (slots.icon) treeSlots.icon = slots.icon\r\n      if (slots['icon-spread']) treeSlots['icon-spread'] = slots['icon-spread']\r\n      if (slots['icon-fold']) treeSlots['icon-fold'] = slots['icon-fold']\r\n      if (slots['icon-leaf']) treeSlots['icon-leaf'] = slots['icon-leaf']\r\n      if (slots.label) treeSlots.label = slots.label\r\n\r\n      return (\r\n        <div class=\"w-tree-choose-content\">\r\n          <Tree\r\n            ref={treeRef}\r\n            {...treeDataOptions.value}\r\n            v-slots={Object.keys(treeSlots).length > 0 ? treeSlots : undefined}\r\n          />\r\n          {slots.footer ? (\r\n            <div class=\"w-tree-choose-footer\">{slots.footer()}</div>\r\n          ) : null}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    expose({\r\n      clear,\r\n      getCheckedKeys: () => treeRef.value?.getCheckedKeys() ?? [],\r\n      getSubmitData: () =>\r\n        treeRef.value?.getSubmitData() ?? { keys: [], rows: [] },\r\n      expandToNode: (key: string | number) =>\r\n        treeRef.value?.expandToNode(key),\r\n      revealToNode: (key: string | number, scroll?: boolean) =>\r\n        treeRef.value?.revealToNode(key, scroll),\r\n      getTree: () => treeRef.value,\r\n    } satisfies TreeChooseExpose)\r\n\r\n    return () => {\r\n      const layerSlots = {\r\n        trigger: renderTrigger,\r\n        default: renderContent,\r\n      }\r\n      return <Layer v-slots={layerSlots} {...layerOptions.value} />\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/tree-choose/config.d.ts

@@ -0,0 +1,41 @@
+import { AdjustmentPosition, PlacementType } from '../../config/types';
+import { TreeGlobalConfig } from '../tree/config';
+/**
+ * 可通过 `app.use(UI, { components: { TreeChoose: {...} } })` 配置的项。
+ * 含触发器/Layer 与透传 Tree 的可配置字段。
+ *
+ * 不宜全局配置：data、modelValue、keys、show、checkable、lazyLoad。
+ */
+export type TreeChooseGlobalConfig = Partial<TreeGlobalConfig & {
+    disabled: boolean;
+    block: boolean;
+    clearable: boolean;
+    placeholder: string;
+    sign: string;
+    searchPlaceholder: string;
+    placement: PlacementType;
+    adjustPosition: AdjustmentPosition;
+    size: number;
+    /** 品牌主色 → `--w-prop-tree-choose-color` */
+    color: string;
+}>;
+export declare const TREE_CHOOSE_FALLBACK: {
+    disabled: boolean;
+    block: boolean;
+    clearable: boolean;
+    placeholder: string | undefined;
+    sign: string;
+    searchPlaceholder: string | undefined;
+    placement: PlacementType;
+    adjustPosition: AdjustmentPosition;
+    size: number | undefined;
+    color: string | undefined;
+    keyField: string;
+    textField: string;
+    childField: string;
+    indent: number | undefined;
+    hasCheckbox: boolean;
+    checkedMode: "some" | "every" | undefined;
+    onlyOneSpread: boolean;
+    onlyChooseLeaf: boolean;
+};

package/dist/components/tree-choose/config.js

@@ -0,0 +1,19 @@
+import { TREE_FALLBACK } from "../tree/config.js";
+//#region components/tree-choose/config.ts
+var TREE_CHOOSE_FALLBACK = {
+	...TREE_FALLBACK,
+	disabled: false,
+	block: false,
+	clearable: false,
+	placeholder: void 0,
+	sign: "-",
+	searchPlaceholder: void 0,
+	placement: "bottom-start",
+	adjustPosition: "top",
+	size: void 0,
+	color: void 0
+};
+//#endregion
+export { TREE_CHOOSE_FALLBACK };
+
+//# sourceMappingURL=config.js.map

package/dist/components/tree-choose/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../components/tree-choose/config.ts"],"sourcesContent":["import type { AdjustmentPosition, PlacementType } from '../../config/types'\r\nimport { TREE_FALLBACK, type TreeGlobalConfig } from '../tree/config'\r\n\r\n/**\r\n * 可通过 `app.use(UI, { components: { TreeChoose: {...} } })` 配置的项。\r\n * 含触发器/Layer 与透传 Tree 的可配置字段。\r\n *\r\n * 不宜全局配置：data、modelValue、keys、show、checkable、lazyLoad。\r\n */\r\nexport type TreeChooseGlobalConfig = Partial<\r\n  TreeGlobalConfig & {\r\n    disabled: boolean\r\n    block: boolean\r\n    clearable: boolean\r\n    placeholder: string\r\n    sign: string\r\n    searchPlaceholder: string\r\n    placement: PlacementType\r\n    adjustPosition: AdjustmentPosition\r\n    size: number\r\n    /** 品牌主色 → `--w-prop-tree-choose-color` */\r\n    color: string\r\n  }\r\n>\r\n\r\nexport const TREE_CHOOSE_FALLBACK = {\r\n  ...TREE_FALLBACK,\r\n  disabled: false,\r\n  block: false,\r\n  clearable: false,\r\n  placeholder: undefined as string | undefined,\r\n  sign: '-',\r\n  searchPlaceholder: undefined as string | undefined,\r\n  placement: 'bottom-start' as PlacementType,\r\n  adjustPosition: 'top' as AdjustmentPosition,\r\n  size: undefined as number | undefined,\r\n  color: undefined as string | undefined,\r\n}\r\n"],"mappings":";;AAyBA,IAAa,uBAAuB;CAClC,GAAG;CACH,UAAU;CACV,OAAO;CACP,WAAW;CACX,aAAa,KAAA;CACb,MAAM;CACN,mBAAmB,KAAA;CACnB,WAAW;CACX,gBAAgB;CAChB,MAAM,KAAA;CACN,OAAO,KAAA;AACT"}

package/dist/components/tree-choose/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './TreeChoose';
+export type * from './TreeChoose';
+export type * from './config';
+export { TREE_CHOOSE_FALLBACK } from './config';

package/dist/components/tree-choose/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/tree-choose.css';