@veltra/desktop 1.0.13 → 1.0.15

package/dist/components/expression-editor/components/variable-picker.js

@@ -1,194 +1,235 @@
 import _sfc_main$1 from "../../scroll/scroll.js";
 import _sfc_main$2 from "../../icon/icon.js";
 import _sfc_main$3 from "../../empty/empty.js";
-import input_default from "../../input/input.js";
 import _sfc_main$4 from "../../tip/tip.js";
-import { ExpressionEditorDIKey } from "../di.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import _sfc_main$5 from "./path-preview.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 import { bem } from "@veltra/utils";
-import { ArrowRight, Search } from "@veltra/icons/normal";
+import { ArrowRight } from "@veltra/icons/normal";
 //#region src/components/expression-editor/components/variable-picker.vue
 const _hoisted_1 = ["onClick"];
-const _hoisted_2 = ["onClick", "onMouseenter"];
+const _hoisted_2 = [
+	"data-idx",
+	"onClick",
+	"onMouseenter"
+];
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "VariablePicker",
 	__name: "variable-picker",
 	props: {
 		visible: { type: Boolean },
 		triggerDom: {},
-		filterable: { type: Boolean },
-		registerPickerKeyHandler: { type: Function }
+		variables: {},
+		filter: {},
+		selectableLevels: {}
 	},
-	emits: ["select", "update:visible"],
-	setup(__props, { emit: __emit }) {
+	emits: [
+		"select",
+		"update:visible",
+		"dismiss"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { cls, editorProps, variableMap } = inject(ExpressionEditorDIKey);
-		const searchQuery = ref("");
-		const activeIndex = ref(-1);
-		const navigationPath = ref([]);
-		function flattenVariables(items, parentPath = []) {
-			if (!items) return [];
-			const result = [];
-			for (const item of items) {
-				const currentPath = [...parentPath, item];
-				if (!item.children || item.children.length === 0) result.push({
-					...item,
-					label: currentPath.map((p) => p.label).join(" / ")
-				});
-				else result.push(...flattenVariables(item.children, currentPath));
-			}
-			return result;
+		const cls = bem("expression-editor");
+		const navPath = ref([]);
+		const activeIndex = ref(0);
+		const isFlat = computed(() => props.filter !== "");
+		function hasChildren(item) {
+			return !!item.children && item.children.length > 0;
 		}
-		const filteredVariables = computed(() => {
-			const { variables } = editorProps;
-			if (!variables || variables.length === 0) return [];
-			if (!searchQuery.value.trim()) return variables;
-			const flat = flattenVariables(variables);
-			const query = searchQuery.value.toLowerCase();
-			return flat.filter((item) => item.label.toLowerCase().includes(query));
-		});
+		function isLeaf(item) {
+			return !hasChildren(item);
+		}
+		/** 当前层级展示的列表（来源依模式而定） */
 		const currentList = computed(() => {
-			if (searchQuery.value.trim()) return filteredVariables.value;
-			else {
-				let current = filteredVariables.value;
-				for (const pathItem of navigationPath.value) {
-					const found = current.find((item) => item.value === pathItem.value);
-					if (found?.children) current = found.children;
-					else break;
+			const variables = props.variables ?? [];
+			if (isFlat.value) return flatList.value;
+			let level = variables;
+			for (const node of navPath.value) {
+				const found = level.find((it) => it.value === node.value);
+				if (!found || !found.children) break;
+				level = found.children;
+			}
+			return level;
+		});
+		/** 扁平模式下：根据 selectableLevels 拍平 + 过滤 */
+		const flatList = computed(() => {
+			const variables = props.variables ?? [];
+			const out = [];
+			const includeBranches = props.selectableLevels === "any";
+			function walk(items, path) {
+				for (const it of items) {
+					const nextPath = [...path, it];
+					if (isLeaf(it)) out.push({
+						...it,
+						__path: nextPath
+					});
+					else {
+						if (includeBranches) out.push({
+							...it,
+							__path: nextPath
+						});
+						walk(it.children, nextPath);
+					}
 				}
-				return current;
 			}
+			walk(variables, []);
+			const q = props.filter.toLowerCase();
+			return out.filter((it) => it.label.toLowerCase().includes(q));
 		});
-		const breadcrumbs = computed(() => {
-			return [{
-				label: "全部变量",
-				value: ""
-			}, ...navigationPath.value];
+		/** 当前 active 项；扁平模式下用于驱动路径预览 */
+		const activePath = computed(() => {
+			if (!isFlat.value) return [];
+			const item = flatList.value[activeIndex.value];
+			return item ? item.__path : [];
 		});
-		function getItemCls(item, index) {
-			const isActive = activeIndex.value === index;
-			const isLeaf = !item.children || item.children.length === 0;
-			return [
-				cls.e("item"),
-				bem.is("active", isActive),
-				bem.is("leaf", isLeaf)
-			];
-		}
-		function handleItemClick(item) {
-			if (item.children && item.children.length > 0) {
-				navigationPath.value.push(item);
-				activeIndex.value = -1;
-				return;
-			}
-			const fullItem = variableMap.value.get(item.value);
-			if (fullItem) emit("select", fullItem);
-			else emit("select", item);
-			updateVisible(false);
+		function getItemCls(_item, idx) {
+			return [cls.e("item"), bem.is("active", idx === activeIndex.value)];
 		}
-		function navigateToBreadcrumb(index) {
-			if (index === 0) navigationPath.value = [];
-			else navigationPath.value = navigationPath.value.slice(0, index);
-			activeIndex.value = -1;
+		function navigateTo(i) {
+			navPath.value = navPath.value.slice(0, i);
+			activeIndex.value = 0;
 		}
-		function handleSearch() {
-			navigationPath.value = [];
-			activeIndex.value = -1;
+		function handleItemClick(item, idx) {
+			activeIndex.value = idx;
+			selectActive();
 		}
-		function updateVisible(visible) {
-			emit("update:visible", visible);
-			if (!visible) {
-				navigationPath.value = [];
-				searchQuery.value = "";
-				activeIndex.value = -1;
-			}
-		}
-		function handleKeydown(e) {
-			if (!props.visible) return;
-			if (e.key === "Escape") {
-				e.preventDefault();
-				updateVisible(false);
+		function selectActive() {
+			const item = currentList.value[activeIndex.value];
+			if (!item) return;
+			if (isFlat.value) {
+				emit("select", flattenSourceFor(item));
 				return;
 			}
-			if (currentList.value.length === 0) return;
-			if (activeIndex.value === -1 && currentList.value.length > 0) activeIndex.value = 0;
-			const currentItem = currentList.value[activeIndex.value];
-			if (e.key === "ArrowDown") {
-				e.preventDefault();
-				activeIndex.value = Math.min(currentList.value.length - 1, activeIndex.value + 1);
-			} else if (e.key === "ArrowUp") {
-				e.preventDefault();
-				activeIndex.value = Math.max(0, activeIndex.value - 1);
-			} else if (e.key === " " || e.key === "Spacebar") {
-				e.preventDefault();
-				if (currentItem?.children && currentItem.children.length > 0) handleItemClick(currentItem);
-			} else if (e.key === "ArrowRight") {
-				e.preventDefault();
-				if (currentItem?.children && currentItem.children.length > 0) handleItemClick(currentItem);
-			} else if (e.key === "ArrowLeft" || e.key === "Backspace") {
-				e.preventDefault();
-				if (navigationPath.value.length > 0) {
-					navigationPath.value.pop();
-					activeIndex.value = 0;
-				}
-			} else if (e.key === "Enter") {
-				e.preventDefault();
-				if (currentItem) {
-					if (!currentItem.children || currentItem.children.length === 0) handleItemClick(currentItem);
+			if (hasChildren(item)) {
+				if (props.selectableLevels === "any") {
+					emit("select", item);
+					return;
 				}
+				navPath.value = [...navPath.value, item];
+				activeIndex.value = 0;
+				return;
 			}
+			emit("select", item);
+		}
+		function flattenSourceFor(it) {
+			const flat = it;
+			const out = {
+				value: flat.value,
+				label: flat.label
+			};
+			if (flat.type) out.type = flat.type;
+			if (flat.children) out.children = flat.children;
+			return out;
+		}
+		function moveActive(delta) {
+			const max = currentList.value.length - 1;
+			if (max < 0) return;
+			let next = activeIndex.value + delta;
+			if (next < 0) next = 0;
+			if (next > max) next = max;
+			activeIndex.value = next;
+			scrollActiveIntoView();
+		}
+		function scrollActiveIntoView() {
+			nextTick(() => {
+				const list = document.querySelector(`.${cls.e("panel-list")}`);
+				if (!list) return;
+				const item = list.querySelector(`[data-idx="${activeIndex.value}"]`);
+				if (item && "scrollIntoView" in item) item.scrollIntoView({ block: "nearest" });
+			});
+		}
+		function handleVisibleChange(v) {
+			emit("update:visible", v);
+			if (!v) reset();
+		}
+		function reset() {
+			navPath.value = [];
+			activeIndex.value = 0;
 		}
 		watch(() => props.visible, (v) => {
-			if (v) document.addEventListener("keydown", handleKeydown);
-			else document.removeEventListener("keydown", handleKeydown);
+			if (!v) reset();
+			else activeIndex.value = 0;
 		});
-		onMounted(() => {
-			props.registerPickerKeyHandler?.(handleKeydown);
-		});
-		onBeforeUnmount(() => {
-			document.removeEventListener("keydown", handleKeydown);
-			props.registerPickerKeyHandler?.(null);
+		watch(() => props.filter, () => {
+			activeIndex.value = 0;
+			if (isFlat.value) navPath.value = [];
 		});
+		/**
+		* 由父级 forward 进来的键盘事件。
+		* 返回 true 表示已处理（外部应 preventDefault）。
+		*/
+		function handleKeydown(e) {
+			if (!props.visible) return false;
+			switch (e.key) {
+				case "Escape":
+					emit("dismiss");
+					emit("update:visible", false);
+					reset();
+					return true;
+				case "ArrowDown":
+					moveActive(1);
+					return true;
+				case "ArrowUp":
+					moveActive(-1);
+					return true;
+				case "ArrowLeft":
+					if (!isFlat.value && navPath.value.length > 0) {
+						navPath.value = navPath.value.slice(0, -1);
+						activeIndex.value = 0;
+						return true;
+					}
+					return false;
+				case "ArrowRight": {
+					if (isFlat.value) return false;
+					const item = currentList.value[activeIndex.value];
+					if (item && hasChildren(item)) {
+						navPath.value = [...navPath.value, item];
+						activeIndex.value = 0;
+						return true;
+					}
+					return false;
+				}
+				case "Enter":
+					selectActive();
+					return true;
+				default: return false;
+			}
+		}
+		__expose({ handleKeydown });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(_sfc_main$4), {
 				"hide-arrow": "",
 				alignment: "start",
 				direction: "bottom",
+				trigger: "click",
 				"trigger-dom": __props.triggerDom,
 				visible: __props.visible,
-				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => updateVisible($event))
+				"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => handleVisibleChange($event))
 			}, {
-				content: withCtx(() => [
-					createCommentVNode(" 搜索框 "),
-					__props.filterable ? (openBlock(), createElementBlock("div", {
+				content: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(unref(cls).e("picker")),
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
+				}, [
+					createCommentVNode(" 面包屑：仅逐级模式且非根级显示 "),
+					!isFlat.value && navPath.value.length > 0 ? (openBlock(), createElementBlock("div", {
 						key: 0,
-						class: normalizeClass(unref(cls).e("filter"))
-					}, [createVNode(unref(input_default), {
-						placeholder: "输入关键字进行过滤",
-						modelValue: searchQuery.value,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
-						size: "small",
-						clearable: "",
-						onInput: handleSearch
-					}, {
-						suffix: withCtx(() => [createVNode(unref(_sfc_main$2), null, {
-							default: withCtx(() => [createVNode(unref(Search))]),
-							_: 1
-						})]),
-						_: 1
-					}, 8, ["modelValue"])], 2)) : createCommentVNode("v-if", true),
-					createCommentVNode(" 面包屑导航 "),
-					breadcrumbs.value.length > 1 && !searchQuery.value ? (openBlock(), createElementBlock("div", {
-						key: 1,
 						class: normalizeClass(unref(cls).e("breadcrumbs"))
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(breadcrumbs.value, (crumb, index) => {
+					}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("breadcrumb-item")) }, [createElementVNode("span", {
+						class: normalizeClass(unref(cls).e("breadcrumb-link")),
+						onClick: _cache[0] || (_cache[0] = ($event) => navigateTo(0))
+					}, "全部变量", 2), createVNode(unref(_sfc_main$2), { class: normalizeClass(unref(cls).e("breadcrumb-separator")) }, {
+						default: withCtx(() => [createVNode(unref(ArrowRight))]),
+						_: 1
+					}, 8, ["class"])], 2), (openBlock(true), createElementBlock(Fragment, null, renderList(navPath.value, (crumb, i) => {
 						return openBlock(), createElementBlock("span", {
-							key: index,
+							key: `${i}-${crumb.value}`,
 							class: normalizeClass(unref(cls).e("breadcrumb-item"))
 						}, [createElementVNode("span", {
-							class: normalizeClass([unref(cls).e("breadcrumb-link"), { [unref(cls).e("breadcrumb-link--active")]: index === breadcrumbs.value.length - 1 }]),
-							onClick: ($event) => navigateToBreadcrumb(index)
-						}, toDisplayString(crumb.label), 11, _hoisted_1), index < breadcrumbs.value.length - 1 ? (openBlock(), createBlock(unref(_sfc_main$2), {
+							class: normalizeClass([unref(cls).e("breadcrumb-link"), { [unref(cls).em("breadcrumb-link", "active")]: i === navPath.value.length - 1 }]),
+							onClick: ($event) => navigateTo(i + 1)
+						}, toDisplayString(crumb.label), 11, _hoisted_1), i < navPath.value.length - 1 ? (openBlock(), createBlock(unref(_sfc_main$2), {
 							key: 0,
 							class: normalizeClass(unref(cls).e("breadcrumb-separator"))
 						}, {
@@ -196,9 +237,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							_: 1
 						}, 8, ["class"])) : createCommentVNode("v-if", true)], 2);
 					}), 128))], 2)) : createCommentVNode("v-if", true),
-					createCommentVNode(" 单面板 "),
-					currentList.value.length ? (openBlock(), createElementBlock("div", {
-						key: 2,
+					createElementVNode("div", { class: normalizeClass(unref(cls).e("picker-body")) }, [currentList.value.length > 0 ? (openBlock(), createElementBlock("div", {
+						key: 0,
 						class: normalizeClass(unref(cls).e("panel"))
 					}, [createVNode(unref(_sfc_main$1), {
 						tag: "ul",
@@ -207,11 +247,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(currentList.value, (item, idx) => {
 							return openBlock(), createElementBlock("li", {
-								key: item.value ?? idx,
+								key: `${idx}-${item.value}`,
+								"data-idx": idx,
 								class: normalizeClass(getItemCls(item, idx)),
-								onClick: ($event) => handleItemClick(item),
+								onClick: ($event) => handleItemClick(item, idx),
 								onMouseenter: ($event) => activeIndex.value = idx
-							}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-label")) }, toDisplayString(item.label), 3), item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$2), {
+							}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-label")) }, toDisplayString(item.label), 3), !isFlat.value && hasChildren(item) ? (openBlock(), createBlock(unref(_sfc_main$2), {
 								key: 0,
 								class: normalizeClass(unref(cls).e("item-expand"))
 							}, {
@@ -220,8 +261,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							}, 8, ["class"])) : createCommentVNode("v-if", true)], 42, _hoisted_2);
 						}), 128))]),
 						_: 1
-					}, 8, ["class", "content-class"])], 2)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [createCommentVNode(" 空状态 "), createElementVNode("div", { class: normalizeClass(unref(cls).e("empty")) }, [createVNode(unref(_sfc_main$3), { description: "暂无可用变量" })], 2)], 2112))
-				]),
+					}, 8, ["class", "content-class"])], 2)) : (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(cls).e("empty"))
+					}, [createVNode(unref(_sfc_main$3), { description: "暂无可用变量" })], 2)), isFlat.value && activePath.value.length > 0 ? (openBlock(), createBlock(_sfc_main$5, {
+						key: 2,
+						path: activePath.value
+					}, null, 8, ["path"])) : createCommentVNode("v-if", true)], 2)
+				], 34)]),
 				_: 1
 			}, 8, ["trigger-dom", "visible"]);
 		};

package/dist/components/expression-editor/components/variable-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"variable-picker.js","names":[],"sources":["../../../../src/components/expression-editor/components/variable-picker.vue"],"sourcesContent":["<template>\n  <u-tip\n    hide-arrow\n    alignment=\"start\"\n    direction=\"bottom\"\n    :trigger-dom=\"triggerDom\"\n    :visible=\"visible\"\n    @update:visible=\"updateVisible($event)\"\n  >\n    <template #content>\n      <!-- 搜索框 -->\n      <div v-if=\"filterable\" :class=\"cls.e('filter')\">\n        <u-input\n          placeholder=\"输入关键字进行过滤\"\n          v-model=\"searchQuery\"\n          :size=\"'small'\"\n          clearable\n          @input=\"handleSearch\"\n        >\n          <template #suffix>\n            <u-icon><Search /></u-icon>\n          </template>\n        </u-input>\n      </div>\n\n      <!-- 面包屑导航 -->\n      <div v-if=\"breadcrumbs.length > 1 && !searchQuery\" :class=\"cls.e('breadcrumbs')\">\n        <span v-for=\"(crumb, index) in breadcrumbs\" :key=\"index\" :class=\"cls.e('breadcrumb-item')\">\n          <span\n            :class=\"[\n              cls.e('breadcrumb-link'),\n              { [cls.e('breadcrumb-link--active')]: index === breadcrumbs.length - 1 }\n            ]\"\n            @click=\"navigateToBreadcrumb(index)\"\n          >\n            {{ crumb.label }}\n          </span>\n          <u-icon v-if=\"index < breadcrumbs.length - 1\" :class=\"cls.e('breadcrumb-separator')\">\n            <ArrowRight />\n          </u-icon>\n        </span>\n      </div>\n\n      <!-- 单面板 -->\n      <div :class=\"cls.e('panel')\" v-if=\"currentList.length\">\n        <u-scroll tag=\"ul\" :class=\"cls.e('panel-list')\" :content-class=\"cls.e('panel-content')\">\n          <li\n            v-for=\"(item, idx) in currentList\"\n            :key=\"item.value ?? idx\"\n            :class=\"getItemCls(item, idx)\"\n            @click=\"handleItemClick(item)\"\n            @mouseenter=\"activeIndex = idx\"\n          >\n            <span :class=\"cls.e('item-label')\">\n              {{ item.label }}\n            </span>\n            <u-icon v-if=\"item.children?.length\" :class=\"cls.e('item-expand')\">\n              <ArrowRight />\n            </u-icon>\n          </li>\n        </u-scroll>\n      </div>\n\n      <!-- 空状态 -->\n      <div v-else :class=\"cls.e('empty')\">\n        <UEmpty description=\"暂无可用变量\" />\n      </div>\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ArrowRight, Search } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { inject, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'\n\nimport type { VariableItem } from '../../../types'\nimport { UEmpty } from '../../empty'\nimport { UIcon } from '../../icon'\nimport { UInput } from '../../input'\nimport { UScroll } from '../../scroll'\nimport { UTip } from '../../tip'\nimport { ExpressionEditorDIKey } from '../di'\n\ndefineOptions({\n  name: 'VariablePicker'\n})\n\nconst props = defineProps<{\n  visible: boolean\n  triggerDom?: HTMLElement\n  filterable?: boolean\n  registerPickerKeyHandler?: (handler: ((e: KeyboardEvent) => void) | null) => void\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: VariableItem): void\n  (e: 'update:visible', visible: boolean): void\n}>()\n\nconst { cls, editorProps, variableMap } = inject(ExpressionEditorDIKey)!\n\nconst searchQuery = ref('')\nconst activeIndex = ref<number>(-1)\nconst navigationPath = ref<VariableItem[]>([]) // 当前导航路径\n\n// 扁平化变量树，用于搜索\nfunction flattenVariables(\n  items: VariableItem[] | undefined,\n  parentPath: VariableItem[] = []\n): VariableItem[] {\n  if (!items) return []\n  const result: VariableItem[] = []\n\n  for (const item of items) {\n    const currentPath = [...parentPath, item]\n    // 如果是叶子节点，添加到结果中\n    if (!item.children || item.children.length === 0) {\n      result.push({\n        ...item,\n        label: currentPath.map((p) => p.label).join(' / ')\n      })\n    } else {\n      // 递归处理子节点\n      result.push(...flattenVariables(item.children, currentPath))\n    }\n  }\n\n  return result\n}\n\n// 过滤后的变量列表\nconst filteredVariables = computed(() => {\n  const { variables } = editorProps\n  if (!variables || variables.length === 0) return []\n\n  if (!searchQuery.value.trim()) {\n    return variables\n  }\n\n  // 搜索模式：扁平化并过滤\n  const flat = flattenVariables(variables)\n  const query = searchQuery.value.toLowerCase()\n  return flat.filter((item) => item.label.toLowerCase().includes(query))\n})\n\n// 当前显示的列表（单面板）\nconst currentList = computed(() => {\n  if (searchQuery.value.trim()) {\n    // 搜索模式：显示过滤后的扁平列表\n    return filteredVariables.value\n  } else {\n    // 正常模式：根据导航路径显示当前层级\n    let current: VariableItem[] = filteredVariables.value\n    for (const pathItem of navigationPath.value) {\n      const found = current.find((item) => item.value === pathItem.value)\n      if (found?.children) {\n        current = found.children\n      } else {\n        break\n      }\n    }\n    return current\n  }\n})\n\n// 面包屑导航\nconst breadcrumbs = computed(() => {\n  return [{ label: '全部变量', value: '' }, ...navigationPath.value]\n})\n\nfunction getItemCls(item: VariableItem, index: number): string[] {\n  const isActive = activeIndex.value === index\n  const isLeaf = !item.children || item.children.length === 0\n\n  return [cls.e('item'), bem.is('active', isActive), bem.is('leaf', isLeaf)]\n}\n\nfunction handleItemClick(item: VariableItem) {\n  // 如果有子节点，导航到下一级\n  if (item.children && item.children.length > 0) {\n    navigationPath.value.push(item)\n    activeIndex.value = -1\n    return\n  }\n\n  // 叶子节点：选择并关闭\n  const fullItem = variableMap.value.get(item.value)\n  if (fullItem) {\n    emit('select', fullItem)\n  } else {\n    emit('select', item)\n  }\n  updateVisible(false)\n}\n\n// 面包屑导航\nfunction navigateToBreadcrumb(index: number) {\n  if (index === 0) {\n    // 点击\"全部变量\"，返回根级\n    navigationPath.value = []\n  } else {\n    // 导航到指定层级\n    navigationPath.value = navigationPath.value.slice(0, index)\n  }\n  activeIndex.value = -1\n}\n\nfunction handleSearch() {\n  // 搜索时重置导航路径\n  navigationPath.value = []\n  activeIndex.value = -1\n}\n\nfunction updateVisible(visible: boolean) {\n  emit('update:visible', visible)\n  if (!visible) {\n    // 关闭时重置状态\n    navigationPath.value = []\n    searchQuery.value = ''\n    activeIndex.value = -1\n  }\n}\n\n// 处理键盘事件\nfunction handleKeydown(e: KeyboardEvent) {\n  if (!props.visible) return\n\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    updateVisible(false)\n    return\n  }\n\n  if (currentList.value.length === 0) return\n\n  // 初始化 activeIndex\n  if (activeIndex.value === -1 && currentList.value.length > 0) {\n    activeIndex.value = 0\n  }\n\n  const currentItem = currentList.value[activeIndex.value]\n\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    activeIndex.value = Math.min(currentList.value.length - 1, activeIndex.value + 1)\n  } else if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    activeIndex.value = Math.max(0, activeIndex.value - 1)\n  } else if (e.key === ' ' || e.key === 'Spacebar') {\n    // 空格键：导航到下一级（仅对有子项的项有效）\n    e.preventDefault()\n    if (currentItem?.children && currentItem.children.length > 0) {\n      handleItemClick(currentItem)\n    }\n  } else if (e.key === 'ArrowRight') {\n    // 右箭头：导航到下一级（仅对有子项的项有效）\n    e.preventDefault()\n    if (currentItem?.children && currentItem.children.length > 0) {\n      handleItemClick(currentItem)\n    }\n  } else if (e.key === 'ArrowLeft' || e.key === 'Backspace') {\n    // 左箭头/退格：返回上一级\n    e.preventDefault()\n    if (navigationPath.value.length > 0) {\n      navigationPath.value.pop()\n      activeIndex.value = 0\n    }\n  } else if (e.key === 'Enter') {\n    // 回车键：确定选择（仅对最末级项有效）\n    e.preventDefault()\n    if (currentItem) {\n      if (!currentItem.children || currentItem.children.length === 0) {\n        // 只有叶子节点才能选择\n        handleItemClick(currentItem)\n      }\n    }\n  }\n}\n\n// 监听键盘事件\nwatch(\n  () => props.visible,\n  (v) => {\n    if (v) {\n      document.addEventListener('keydown', handleKeydown)\n    } else {\n      document.removeEventListener('keydown', handleKeydown)\n    }\n  }\n)\n\nonMounted(() => {\n  props.registerPickerKeyHandler?.(handleKeydown)\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', handleKeydown)\n  props.registerPickerKeyHandler?.(null)\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"variable-picker.js","names":[],"sources":["../../../../src/components/expression-editor/components/variable-picker.vue"],"sourcesContent":["<template>\n  <u-tip\n    hide-arrow\n    alignment=\"start\"\n    direction=\"bottom\"\n    trigger=\"click\"\n    :trigger-dom=\"triggerDom\"\n    :visible=\"visible\"\n    @update:visible=\"handleVisibleChange($event)\"\n  >\n    <template #content>\n      <div :class=\"cls.e('picker')\" @mousedown.prevent>\n        <!-- 面包屑：仅逐级模式且非根级显示 -->\n        <div v-if=\"!isFlat && navPath.length > 0\" :class=\"cls.e('breadcrumbs')\">\n          <span :class=\"cls.e('breadcrumb-item')\">\n            <span :class=\"cls.e('breadcrumb-link')\" @click=\"navigateTo(0)\">全部变量</span>\n            <u-icon :class=\"cls.e('breadcrumb-separator')\">\n              <ArrowRight />\n            </u-icon>\n          </span>\n          <span\n            v-for=\"(crumb, i) in navPath\"\n            :key=\"`${i}-${crumb.value}`\"\n            :class=\"cls.e('breadcrumb-item')\"\n          >\n            <span\n              :class=\"[\n                cls.e('breadcrumb-link'),\n                { [cls.em('breadcrumb-link', 'active')]: i === navPath.length - 1 }\n              ]\"\n              @click=\"navigateTo(i + 1)\"\n              >{{ crumb.label }}</span\n            >\n            <u-icon v-if=\"i < navPath.length - 1\" :class=\"cls.e('breadcrumb-separator')\">\n              <ArrowRight />\n            </u-icon>\n          </span>\n        </div>\n\n        <div :class=\"cls.e('picker-body')\">\n          <div :class=\"cls.e('panel')\" v-if=\"currentList.length > 0\">\n            <u-scroll tag=\"ul\" :class=\"cls.e('panel-list')\" :content-class=\"cls.e('panel-content')\">\n              <li\n                v-for=\"(item, idx) in currentList\"\n                :key=\"`${idx}-${item.value}`\"\n                :data-idx=\"idx\"\n                :class=\"getItemCls(item, idx)\"\n                @click=\"handleItemClick(item, idx)\"\n                @mouseenter=\"activeIndex = idx\"\n              >\n                <span :class=\"cls.e('item-label')\">{{ item.label }}</span>\n                <u-icon v-if=\"!isFlat && hasChildren(item)\" :class=\"cls.e('item-expand')\">\n                  <ArrowRight />\n                </u-icon>\n              </li>\n            </u-scroll>\n          </div>\n          <div v-else :class=\"cls.e('empty')\">\n            <UEmpty description=\"暂无可用变量\" />\n          </div>\n\n          <PathPreview v-if=\"isFlat && activePath.length > 0\" :path=\"activePath\" />\n        </div>\n      </div>\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { VariableItem } from '../../../types'\nimport { UEmpty } from '../../empty'\nimport { UIcon } from '../../icon'\nimport { UScroll } from '../../scroll'\nimport { UTip } from '../../tip'\nimport PathPreview from './path-preview.vue'\n\ndefineOptions({\n  name: 'VariablePicker'\n})\n\ninterface FlatItem extends VariableItem {\n  /** 仅扁平模式使用：从根到当前节点的路径 */\n  __path: VariableItem[]\n}\n\nconst props = defineProps<{\n  visible: boolean\n  triggerDom?: HTMLElement\n  /** 顶层变量树 */\n  variables?: VariableItem[]\n  /** 来自编辑器 mention 状态的过滤字符串。空 = 逐级模式；非空 = 扁平模式。 */\n  filter: string\n  /** 是否允许选中分支节点 */\n  selectableLevels: 'leaf' | 'any'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', item: VariableItem): void\n  (e: 'update:visible', visible: boolean): void\n  /** 用户主动取消（按 Esc）。编辑器据此把 mention 状态置为 dismissed。 */\n  (e: 'dismiss'): void\n}>()\n\nconst cls = bem('expression-editor')\n\nconst navPath = ref<VariableItem[]>([])\nconst activeIndex = ref(0)\n\nconst isFlat = computed(() => props.filter !== '')\n\nfunction hasChildren(item: VariableItem): boolean {\n  return !!item.children && item.children.length > 0\n}\n\nfunction isLeaf(item: VariableItem): boolean {\n  return !hasChildren(item)\n}\n\n/** 当前层级展示的列表（来源依模式而定） */\nconst currentList = computed<VariableItem[]>(() => {\n  const variables = props.variables ?? []\n  if (isFlat.value) return flatList.value\n  let level: VariableItem[] = variables\n  for (const node of navPath.value) {\n    const found = level.find((it) => it.value === node.value)\n    if (!found || !found.children) break\n    level = found.children\n  }\n  return level\n})\n\n/** 扁平模式下：根据 selectableLevels 拍平 + 过滤 */\nconst flatList = computed<FlatItem[]>(() => {\n  const variables = props.variables ?? []\n  const out: FlatItem[] = []\n  const includeBranches = props.selectableLevels === 'any'\n  function walk(items: VariableItem[], path: VariableItem[]) {\n    for (const it of items) {\n      const nextPath = [...path, it]\n      if (isLeaf(it)) {\n        out.push({ ...it, __path: nextPath })\n      } else {\n        if (includeBranches) out.push({ ...it, __path: nextPath })\n        walk(it.children!, nextPath)\n      }\n    }\n  }\n  walk(variables, [])\n  const q = props.filter.toLowerCase()\n  return out.filter((it) => it.label.toLowerCase().includes(q))\n})\n\n/** 当前 active 项；扁平模式下用于驱动路径预览 */\nconst activePath = computed<VariableItem[]>(() => {\n  if (!isFlat.value) return []\n  const item = flatList.value[activeIndex.value] as FlatItem | undefined\n  return item ? item.__path : []\n})\n\nfunction getItemCls(_item: VariableItem, idx: number) {\n  return [cls.e('item'), bem.is('active', idx === activeIndex.value)]\n}\n\nfunction navigateTo(i: number) {\n  // 0 = 全部变量；i 之后表示进入到 navPath[i-1]\n  navPath.value = navPath.value.slice(0, i)\n  activeIndex.value = 0\n}\n\nfunction handleItemClick(item: VariableItem, idx: number) {\n  activeIndex.value = idx\n  selectActive()\n}\n\nfunction selectActive() {\n  const item = currentList.value[activeIndex.value]\n  if (!item) return\n\n  if (isFlat.value) {\n    // 扁平模式始终是「选中并替换」\n    emit('select', flattenSourceFor(item))\n    return\n  }\n\n  // 逐级模式\n  if (hasChildren(item)) {\n    if (props.selectableLevels === 'any') {\n      // Enter 在分支项上：选中分支本身\n      emit('select', item)\n      return\n    }\n    // 默认 'leaf'：进入下一级\n    navPath.value = [...navPath.value, item]\n    activeIndex.value = 0\n    return\n  }\n  emit('select', item)\n}\n\nfunction flattenSourceFor(it: VariableItem): VariableItem {\n  const flat = it as FlatItem\n  // 还原为「不带 __path 的纯 VariableItem」，避免泄漏内部字段\n  const out: VariableItem = { value: flat.value, label: flat.label }\n  if (flat.type) out.type = flat.type\n  if (flat.children) out.children = flat.children\n  return out\n}\n\nfunction moveActive(delta: -1 | 1) {\n  const max = currentList.value.length - 1\n  if (max < 0) return\n  let next = activeIndex.value + delta\n  if (next < 0) next = 0\n  if (next > max) next = max\n  activeIndex.value = next\n  scrollActiveIntoView()\n}\n\nfunction scrollActiveIntoView() {\n  void nextTick(() => {\n    const list = document.querySelector(`.${cls.e('panel-list')}`)\n    if (!list) return\n    const item = list.querySelector(`[data-idx=\"${activeIndex.value}\"]`)\n    if (item && 'scrollIntoView' in item) {\n      ;(item as HTMLElement).scrollIntoView({ block: 'nearest' })\n    }\n  })\n}\n\nfunction handleVisibleChange(v: boolean) {\n  emit('update:visible', v)\n  if (!v) reset()\n}\n\nfunction reset() {\n  navPath.value = []\n  activeIndex.value = 0\n}\n\nwatch(\n  () => props.visible,\n  (v) => {\n    if (!v) reset()\n    else activeIndex.value = 0\n  }\n)\n\nwatch(\n  () => props.filter,\n  () => {\n    // 过滤词变化：重置 active；逐级 → 扁平时清空 navPath\n    activeIndex.value = 0\n    if (isFlat.value) navPath.value = []\n  }\n)\n\n/**\n * 由父级 forward 进来的键盘事件。\n * 返回 true 表示已处理（外部应 preventDefault）。\n */\nfunction handleKeydown(e: KeyboardEvent): boolean {\n  if (!props.visible) return false\n\n  switch (e.key) {\n    case 'Escape':\n      emit('dismiss')\n      emit('update:visible', false)\n      reset()\n      return true\n    case 'ArrowDown':\n      moveActive(1)\n      return true\n    case 'ArrowUp':\n      moveActive(-1)\n      return true\n    case 'ArrowLeft':\n      // 仅逐级模式：返回上一级；扁平模式下不拦截，让光标正常移动并触发 mention dismiss\n      if (!isFlat.value && navPath.value.length > 0) {\n        navPath.value = navPath.value.slice(0, -1)\n        activeIndex.value = 0\n        return true\n      }\n      return false\n    case 'ArrowRight': {\n      if (isFlat.value) return false\n      const item = currentList.value[activeIndex.value]\n      if (item && hasChildren(item)) {\n        navPath.value = [...navPath.value, item]\n        activeIndex.value = 0\n        return true\n      }\n      return false\n    }\n    case 'Enter':\n      selectActive()\n      return true\n    default:\n      return false\n  }\n}\n\ndefineExpose({ handleKeydown })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyFA,MAAM,QAAQ;EAWd,MAAM,OAAO;EAOb,MAAM,MAAM,IAAI,oBAAmB;EAEnC,MAAM,UAAU,IAAoB,EAAE,CAAA;EACtC,MAAM,cAAc,IAAI,EAAC;EAEzB,MAAM,SAAS,eAAe,MAAM,WAAW,GAAE;EAEjD,SAAS,YAAY,MAA6B;AAChD,UAAO,CAAC,CAAC,KAAK,YAAY,KAAK,SAAS,SAAS;;EAGnD,SAAS,OAAO,MAA6B;AAC3C,UAAO,CAAC,YAAY,KAAI;;;EAI1B,MAAM,cAAc,eAA+B;GACjD,MAAM,YAAY,MAAM,aAAa,EAAC;AACtC,OAAI,OAAO,MAAO,QAAO,SAAS;GAClC,IAAI,QAAwB;AAC5B,QAAK,MAAM,QAAQ,QAAQ,OAAO;IAChC,MAAM,QAAQ,MAAM,MAAM,OAAO,GAAG,UAAU,KAAK,MAAK;AACxD,QAAI,CAAC,SAAS,CAAC,MAAM,SAAU;AAC/B,YAAQ,MAAM;;AAEhB,UAAO;IACR;;EAGD,MAAM,WAAW,eAA2B;GAC1C,MAAM,YAAY,MAAM,aAAa,EAAC;GACtC,MAAM,MAAkB,EAAC;GACzB,MAAM,kBAAkB,MAAM,qBAAqB;GACnD,SAAS,KAAK,OAAuB,MAAsB;AACzD,SAAK,MAAM,MAAM,OAAO;KACtB,MAAM,WAAW,CAAC,GAAG,MAAM,GAAE;AAC7B,SAAI,OAAO,GAAG,CACZ,KAAI,KAAK;MAAE,GAAG;MAAI,QAAQ;MAAU,CAAA;UAC/B;AACL,UAAI,gBAAiB,KAAI,KAAK;OAAE,GAAG;OAAI,QAAQ;OAAU,CAAA;AACzD,WAAK,GAAG,UAAW,SAAQ;;;;AAIjC,QAAK,WAAW,EAAE,CAAA;GAClB,MAAM,IAAI,MAAM,OAAO,aAAY;AACnC,UAAO,IAAI,QAAQ,OAAO,GAAG,MAAM,aAAa,CAAC,SAAS,EAAE,CAAA;IAC7D;;EAGD,MAAM,aAAa,eAA+B;AAChD,OAAI,CAAC,OAAO,MAAO,QAAO,EAAC;GAC3B,MAAM,OAAO,SAAS,MAAM,YAAY;AACxC,UAAO,OAAO,KAAK,SAAS,EAAC;IAC9B;EAED,SAAS,WAAW,OAAqB,KAAa;AACpD,UAAO,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,UAAU,QAAQ,YAAY,MAAM,CAAA;;EAGpE,SAAS,WAAW,GAAW;AAE7B,WAAQ,QAAQ,QAAQ,MAAM,MAAM,GAAG,EAAC;AACxC,eAAY,QAAQ;;EAGtB,SAAS,gBAAgB,MAAoB,KAAa;AACxD,eAAY,QAAQ;AACpB,iBAAa;;EAGf,SAAS,eAAe;GACtB,MAAM,OAAO,YAAY,MAAM,YAAY;AAC3C,OAAI,CAAC,KAAM;AAEX,OAAI,OAAO,OAAO;AAEhB,SAAK,UAAU,iBAAiB,KAAK,CAAA;AACrC;;AAIF,OAAI,YAAY,KAAK,EAAE;AACrB,QAAI,MAAM,qBAAqB,OAAO;AAEpC,UAAK,UAAU,KAAI;AACnB;;AAGF,YAAQ,QAAQ,CAAC,GAAG,QAAQ,OAAO,KAAI;AACvC,gBAAY,QAAQ;AACpB;;AAEF,QAAK,UAAU,KAAI;;EAGrB,SAAS,iBAAiB,IAAgC;GACxD,MAAM,OAAO;GAEb,MAAM,MAAoB;IAAE,OAAO,KAAK;IAAO,OAAO,KAAK;IAAM;AACjE,OAAI,KAAK,KAAM,KAAI,OAAO,KAAK;AAC/B,OAAI,KAAK,SAAU,KAAI,WAAW,KAAK;AACvC,UAAO;;EAGT,SAAS,WAAW,OAAe;GACjC,MAAM,MAAM,YAAY,MAAM,SAAS;AACvC,OAAI,MAAM,EAAG;GACb,IAAI,OAAO,YAAY,QAAQ;AAC/B,OAAI,OAAO,EAAG,QAAO;AACrB,OAAI,OAAO,IAAK,QAAO;AACvB,eAAY,QAAQ;AACpB,yBAAqB;;EAGvB,SAAS,uBAAuB;AACzB,kBAAe;IAClB,MAAM,OAAO,SAAS,cAAc,IAAI,IAAI,EAAE,aAAa,GAAE;AAC7D,QAAI,CAAC,KAAM;IACX,MAAM,OAAO,KAAK,cAAc,cAAc,YAAY,MAAM,IAAG;AACnE,QAAI,QAAQ,oBAAoB,KAC5B,MAAqB,eAAe,EAAE,OAAO,WAAW,CAAA;KAE7D;;EAGH,SAAS,oBAAoB,GAAY;AACvC,QAAK,kBAAkB,EAAC;AACxB,OAAI,CAAC,EAAG,QAAM;;EAGhB,SAAS,QAAQ;AACf,WAAQ,QAAQ,EAAC;AACjB,eAAY,QAAQ;;AAGtB,cACQ,MAAM,UACX,MAAM;AACL,OAAI,CAAC,EAAG,QAAM;OACT,aAAY,QAAQ;IAE7B;AAEA,cACQ,MAAM,cACN;AAEJ,eAAY,QAAQ;AACpB,OAAI,OAAO,MAAO,SAAQ,QAAQ,EAAC;IAEvC;;;;;EAMA,SAAS,cAAc,GAA2B;AAChD,OAAI,CAAC,MAAM,QAAS,QAAO;AAE3B,WAAQ,EAAE,KAAV;IACE,KAAK;AACH,UAAK,UAAS;AACd,UAAK,kBAAkB,MAAK;AAC5B,YAAM;AACN,YAAO;IACT,KAAK;AACH,gBAAW,EAAC;AACZ,YAAO;IACT,KAAK;AACH,gBAAW,GAAE;AACb,YAAO;IACT,KAAK;AAEH,SAAI,CAAC,OAAO,SAAS,QAAQ,MAAM,SAAS,GAAG;AAC7C,cAAQ,QAAQ,QAAQ,MAAM,MAAM,GAAG,GAAE;AACzC,kBAAY,QAAQ;AACpB,aAAO;;AAET,YAAO;IACT,KAAK,cAAc;AACjB,SAAI,OAAO,MAAO,QAAO;KACzB,MAAM,OAAO,YAAY,MAAM,YAAY;AAC3C,SAAI,QAAQ,YAAY,KAAK,EAAE;AAC7B,cAAQ,QAAQ,CAAC,GAAG,QAAQ,OAAO,KAAI;AACvC,kBAAY,QAAQ;AACpB,aAAO;;AAET,YAAO;;IAET,KAAK;AACH,mBAAa;AACb,YAAO;IACT,QACE,QAAO;;;AAIb,WAAa,EAAE,eAAe,CAAA;;uBAhT5B,YAgEQ,MAAA,YAAA,EAAA;IA/DN,cAAA;IACA,WAAU;IACV,WAAU;IACV,SAAQ;IACP,eAAa,QAAA;IACb,SAAS,QAAA;IACT,oBAAc,OAAA,OAAA,OAAA,MAAA,WAAE,oBAAoB,OAAM;;IAEhC,SAAO,cAqDV,CApDN,mBAoDM,OAAA;KApDA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;KAAa,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAkB,CAAA,UAAA,CAAA;;KAC9C,mBAAA,oBAAwB;MACZ,OAAA,SAAU,QAAA,MAAQ,SAAM,KAAA,WAAA,EAApC,mBAwBM,OAAA;;MAxBqC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;SACrD,mBAKO,QAAA,EALA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,kBAAA,CAAA,EAAA,EAAA,CACjB,mBAA0E,QAAA;MAAnE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,kBAAA,CAAA;MAAsB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAU,EAAA;QAAK,QAAI,EAAA,EACnE,YAES,MAAA,YAAA,EAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,uBAAA,CAAA,EAAA,EAAA;6BACL,CAAd,YAAc,MAAA,WAAA,CAAA,CAAA,CAAA;;8CAGlB,mBAgBO,UAAA,MAAA,WAfgB,QAAA,QAAb,OAAO,MAAC;0BADlB,mBAgBO,QAAA;OAdJ,KAAG,GAAK,EAAC,GAAI,MAAM;OACnB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,kBAAA,CAAA;UAEb,mBAOC,QAAA;OANE,OAAK,eAAA,CAAoB,MAAA,IAAG,CAAC,EAAC,kBAAA,EAAA,GAAwC,MAAA,IAAG,CAAC,GAAE,mBAAA,SAAA,GAAgC,MAAM,QAAA,MAAQ,SAAM,GAAA,CAAA,CAAA;OAIhI,UAAK,WAAE,WAAW,IAAC,EAAA;yBAChB,MAAM,MAAK,EAAA,IAAA,WAAA,EAEH,IAAI,QAAA,MAAQ,SAAM,KAAA,WAAA,EAAhC,YAES,MAAA,YAAA,EAAA;;OAF8B,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,uBAAA,CAAA;;8BACnC,CAAd,YAAc,MAAA,WAAA,CAAA,CAAA,CAAA;;;;KAKpB,mBAuBM,OAAA,EAvBA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA,EAAA,EAAA,CACmB,YAAA,MAAY,SAAM,KAAA,WAAA,EAArD,mBAgBM,OAAA;;MAhBA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;SAChB,YAcW,MAAA,YAAA,EAAA;MAdD,KAAI;MAAM,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA;MAAiB,iBAAe,MAAA,IAAG,CAAC,EAAC,gBAAA;;6BAE/B,EAAA,UAAA,KAAA,EADpC,mBAYK,UAAA,MAAA,WAXmB,YAAA,QAAd,MAAM,QAAG;2BADnB,mBAYK,MAAA;QAVF,KAAG,GAAK,IAAG,GAAI,KAAK;QACpB,YAAU;QACV,OAAK,eAAE,WAAW,MAAM,IAAG,CAAA;QAC3B,UAAK,WAAE,gBAAgB,MAAM,IAAG;QAChC,eAAU,WAAE,YAAA,QAAc;WAE3B,mBAA0D,QAAA,EAAnD,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,gBAAmB,KAAK,MAAK,EAAA,EAAA,EAAA,CACjC,OAAA,SAAU,YAAY,KAAI,IAAA,WAAA,EAAzC,YAES,MAAA,YAAA,EAAA;;QAFoC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;;+BACzC,CAAd,YAAc,MAAA,WAAA,CAAA,CAAA,CAAA;;;;;6DAKtB,mBAEM,OAAA;;MAFO,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;SACvB,YAA+B,MAAA,YAAA,EAAA,EAAvB,aAAY,UAAQ,CAAA,CAAA,EAAA,EAAA,GAGX,OAAA,SAAU,WAAA,MAAW,SAAM,KAAA,WAAA,EAA9C,YAAyE,aAAA;;MAApB,MAAM,WAAA"}

package/dist/components/expression-editor/core/chip.js

@@ -0,0 +1,54 @@
+//#region src/components/expression-editor/core/chip.ts
+const CHIP_DATA_SEG = "var";
+const CHIP_VALUE_ATTR = "data-value";
+const CHIP_TYPE_ATTR = "data-var-type";
+const CHIP_CLOSE_ATTR = "data-chip-close";
+/** 判断一个 DOM 节点是否为 chip 元素（var 段渲染体） */
+function isChipElement(node) {
+	return !!node && node.nodeType === 1 && node.getAttribute("data-seg") === CHIP_DATA_SEG;
+}
+/** 判断点击目标是否落在 × 删除区。 */
+function isCloseTarget(target) {
+	if (!(target instanceof Element)) return false;
+	return !!target.closest(`[${CHIP_CLOSE_ATTR}]`);
+}
+/** 从给定 segment 创建一个 chip 元素（var 段渲染体）。 */
+function createChip(segment, opts) {
+	const { cls } = opts;
+	const chip = document.createElement("span");
+	chip.setAttribute("data-seg", CHIP_DATA_SEG);
+	chip.setAttribute(CHIP_VALUE_ATTR, segment.value);
+	if (segment.type) chip.setAttribute(CHIP_TYPE_ATTR, segment.type);
+	chip.setAttribute("contenteditable", "false");
+	chip.className = cls.e("chip");
+	chip.title = segment.label;
+	const label = document.createElement("span");
+	label.className = cls.e("chip-label");
+	label.textContent = segment.type ? `${segment.label} (${segment.type})` : segment.label;
+	const close = document.createElement("span");
+	close.className = cls.e("chip-close");
+	close.setAttribute(CHIP_CLOSE_ATTR, "true");
+	close.setAttribute("aria-label", "删除");
+	close.setAttribute("role", "button");
+	close.textContent = "×";
+	chip.appendChild(label);
+	chip.appendChild(close);
+	chip.addEventListener("mousedown", (e) => {
+		e.preventDefault();
+		if (isCloseTarget(e.target)) opts.onRemove(chip);
+		else opts.onReselect(chip);
+	});
+	return chip;
+}
+/** 读取 chip 元素绑定的变量 value。 */
+function readChipValue(el) {
+	return el.getAttribute(CHIP_VALUE_ATTR) ?? "";
+}
+/** 读取 chip 元素绑定的可选 type。 */
+function readChipType(el) {
+	return el.getAttribute(CHIP_TYPE_ATTR) ?? void 0;
+}
+//#endregion
+export { createChip, isChipElement, readChipType, readChipValue };
+
+//# sourceMappingURL=chip.js.map

package/dist/components/expression-editor/core/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../../../src/components/expression-editor/core/chip.ts"],"sourcesContent":["import type { BEM } from '@veltra/utils'\n\nimport type { Segment } from './model'\n\nexport interface ChipDeps {\n  cls: BEM<'expression-editor'>\n}\n\nexport interface ChipFactoryOptions extends ChipDeps {\n  /**\n   * 当用户点击 chip 主体（不是 ×）时回调，由调用方决定如何打开重选面板。\n   * 收到的 chipEl 当前在 DOM 中的位置即为重选锚点。\n   */\n  onReselect: (chipEl: HTMLElement) => void\n  /** 当用户点击 × 时回调，调用方应将该 chip 从模型 / DOM 中移除。 */\n  onRemove: (chipEl: HTMLElement) => void\n}\n\nconst CHIP_DATA_SEG = 'var'\nconst CHIP_VALUE_ATTR = 'data-value'\nconst CHIP_TYPE_ATTR = 'data-var-type'\nconst CHIP_CLOSE_ATTR = 'data-chip-close'\n\n/** 判断一个 DOM 节点是否为 chip 元素（var 段渲染体） */\nexport function isChipElement(node: Node | null): node is HTMLElement {\n  return (\n    !!node &&\n    node.nodeType === 1 &&\n    (node as HTMLElement).getAttribute('data-seg') === CHIP_DATA_SEG\n  )\n}\n\n/** 判断点击目标是否落在 × 删除区。 */\nfunction isCloseTarget(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false\n  return !!target.closest(`[${CHIP_CLOSE_ATTR}]`)\n}\n\n/** 从给定 segment 创建一个 chip 元素（var 段渲染体）。 */\nexport function createChip(\n  segment: Extract<Segment, { kind: 'var' }>,\n  opts: ChipFactoryOptions\n): HTMLElement {\n  const { cls } = opts\n\n  const chip = document.createElement('span')\n  chip.setAttribute('data-seg', CHIP_DATA_SEG)\n  chip.setAttribute(CHIP_VALUE_ATTR, segment.value)\n  if (segment.type) chip.setAttribute(CHIP_TYPE_ATTR, segment.type)\n  chip.setAttribute('contenteditable', 'false')\n  chip.className = cls.e('chip')\n  chip.title = segment.label\n\n  const label = document.createElement('span')\n  label.className = cls.e('chip-label')\n  label.textContent = segment.type ? `${segment.label} (${segment.type})` : segment.label\n\n  const close = document.createElement('span')\n  close.className = cls.e('chip-close')\n  close.setAttribute(CHIP_CLOSE_ATTR, 'true')\n  close.setAttribute('aria-label', '删除')\n  close.setAttribute('role', 'button')\n  close.textContent = '×'\n\n  chip.appendChild(label)\n  chip.appendChild(close)\n\n  chip.addEventListener('mousedown', (e) => {\n    e.preventDefault()\n    if (isCloseTarget(e.target)) {\n      opts.onRemove(chip)\n    } else {\n      opts.onReselect(chip)\n    }\n  })\n\n  return chip\n}\n\n/** 读取 chip 元素绑定的变量 value。 */\nexport function readChipValue(el: HTMLElement): string {\n  return el.getAttribute(CHIP_VALUE_ATTR) ?? ''\n}\n\n/** 读取 chip 元素绑定的可选 type。 */\nexport function readChipType(el: HTMLElement): string | undefined {\n  return el.getAttribute(CHIP_TYPE_ATTR) ?? undefined\n}\n\n/** 在 chip 上设置 / 取消选中（焦点）样式。 */\nexport function setChipFocused(el: HTMLElement, focused: boolean): void {\n  el.classList.toggle('is-focused', focused)\n}\n\n/** 测试支持：暴露用于 DOM 选择器的属性常量。 */\nexport const ChipAttrs = {\n  seg: 'data-seg',\n  value: CHIP_VALUE_ATTR,\n  type: CHIP_TYPE_ATTR,\n  close: CHIP_CLOSE_ATTR\n} as const\n"],"mappings":";AAkBA,MAAM,gBAAgB;AACtB,MAAM,kBAAkB;AACxB,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;;AAGxB,SAAgB,cAAc,MAAwC;AACpE,QACE,CAAC,CAAC,QACF,KAAK,aAAa,KACjB,KAAqB,aAAa,WAAW,KAAK;;;AAKvD,SAAS,cAAc,QAAqC;AAC1D,KAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,QAAO,CAAC,CAAC,OAAO,QAAQ,IAAI,gBAAgB,GAAG;;;AAIjD,SAAgB,WACd,SACA,MACa;CACb,MAAM,EAAE,QAAQ;CAEhB,MAAM,OAAO,SAAS,cAAc,OAAO;AAC3C,MAAK,aAAa,YAAY,cAAc;AAC5C,MAAK,aAAa,iBAAiB,QAAQ,MAAM;AACjD,KAAI,QAAQ,KAAM,MAAK,aAAa,gBAAgB,QAAQ,KAAK;AACjE,MAAK,aAAa,mBAAmB,QAAQ;AAC7C,MAAK,YAAY,IAAI,EAAE,OAAO;AAC9B,MAAK,QAAQ,QAAQ;CAErB,MAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,OAAM,YAAY,IAAI,EAAE,aAAa;AACrC,OAAM,cAAc,QAAQ,OAAO,GAAG,QAAQ,MAAM,IAAI,QAAQ,KAAK,KAAK,QAAQ;CAElF,MAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,OAAM,YAAY,IAAI,EAAE,aAAa;AACrC,OAAM,aAAa,iBAAiB,OAAO;AAC3C,OAAM,aAAa,cAAc,KAAK;AACtC,OAAM,aAAa,QAAQ,SAAS;AACpC,OAAM,cAAc;AAEpB,MAAK,YAAY,MAAM;AACvB,MAAK,YAAY,MAAM;AAEvB,MAAK,iBAAiB,cAAc,MAAM;AACxC,IAAE,gBAAgB;AAClB,MAAI,cAAc,EAAE,OAAO,CACzB,MAAK,SAAS,KAAK;MAEnB,MAAK,WAAW,KAAK;GAEvB;AAEF,QAAO;;;AAIT,SAAgB,cAAc,IAAyB;AACrD,QAAO,GAAG,aAAa,gBAAgB,IAAI;;;AAI7C,SAAgB,aAAa,IAAqC;AAChE,QAAO,GAAG,aAAa,eAAe,IAAI,KAAA"}