@arronqzy/vue-blueprint 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Vue 3 blueprint editor for Abuilder (Vue Flow + Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -19,9 +19,9 @@
     "ant-design-vue": "^4.2.6",
     "dayjs": "^1.11.13",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.6",
-    "@arronqzy/vue-rx-store": "0.1.2",
-    "@arronqzy/i18n": "0.1.5"
+    "@arronqzy/blueprint-dsl": "1.0.8",
+    "@arronqzy/i18n": "0.1.7",
+    "@arronqzy/vue-rx-store": "0.1.3"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -31,8 +31,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/eslint-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/BlueprintNodeConfigSidebar.vue

@@ -5,8 +5,10 @@ import { Checkbox, Input, Select } from "ant-design-vue";
 import {
   LIFECYCLE_NODE_TYPE,
   PAGE_LIFECYCLE_PHASES,
+  VIEW_EVENT_TYPES,
   type ExecutionTraceEntry,
   type PageLifecyclePhase,
+  type ViewEventType,
 } from "@arronqzy/blueprint-dsl";
 
 import FetchNodeConfigPanel from "./components/FetchNodeConfigPanel.vue";
@@ -17,9 +19,12 @@ import ViewElementMultiSelect from "./components/ViewElementMultiSelect.vue";
 import ConfigHintIcon from "./components/ConfigHintIcon.vue";
 import {
   getLifecyclePhaseLabel,
+  getViewEventTypeLabel,
+  inspectEventNodeInputs,
   patchNodeConfigSource,
   pruneViewElementIds,
   resolveBlueprintConfigSource,
+  resolveNodeEventConfig,
   resolveViewElementIds,
   type BlueprintConfigSource,
   type BlueprintGraphEdge,
@@ -66,6 +71,7 @@ export type BlueprintNodeConfigSidebarProps = {
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;
@@ -82,6 +88,7 @@ const props = withDefaults(defineProps<BlueprintNodeConfigSidebarProps>(), {
 
 const configSource = computed(() => resolveBlueprintConfigSource(props.node));
 const linkedViewElementIds = computed(() => resolveViewElementIds(props.node));
+const selectedEventTypes = computed(() => resolveNodeEventConfig(props.node).eventTypes);
 const existingViewElementIdSet = computed(
   () => new Set(props.viewElementOptions.map((opt) => opt.id))
 );
@@ -97,12 +104,17 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
   json: "blueprint.config.roleJson",
   logic: "blueprint.config.roleLogic",
   clock: "blueprint.config.roleClock",
+  event: "blueprint.config.roleEvent",
 };
 
 const roleLabel = computed(() =>
   t(ROLE_LABEL_KEYS[props.node.role] ?? "blueprint.config.roleLogic")
 );
 
+const eventInputs = computed(() =>
+  inspectEventNodeInputs(props.node.id, props.graphNodes, props.graphEdges)
+);
+
 watch(
   [
     configSource,
@@ -113,7 +125,7 @@ watch(
     () => props.viewElementOptions.length,
   ],
   () => {
-    if (configSource.value !== "view") return;
+    if (configSource.value !== "view" && configSource.value !== "event") return;
     if (props.viewElementOptions.length === 0) return;
     const linked = resolveViewElementIds(props.node);
     if (linked.length === 0) return;
@@ -122,7 +134,7 @@ watch(
     props.onUpdateNode(props.node.id, {
       viewElementIds: pruned.length > 0 ? pruned : undefined,
       viewElementId: undefined,
-      configSource: "view",
+      configSource: configSource.value,
     });
   }
 );
@@ -131,7 +143,7 @@ function handleConfigSourceChange(value: string) {
   const nextSource = value as BlueprintConfigSource;
   props.onUpdateNode(props.node.id, {
     ...patchNodeConfigSource(props.node, nextSource),
-    ...(nextSource === "view"
+    ...(nextSource === "view" || nextSource === "event"
       ? {
           viewElementIds: linkedViewElementIds.value,
           viewElementId: undefined,
@@ -142,6 +154,19 @@ function handleConfigSourceChange(value: string) {
         }),
   });
 }
+
+function toggleEventType(eventType: ViewEventType, checked: boolean) {
+  const current = selectedEventTypes.value;
+  const nextTypes: ViewEventType[] = checked
+    ? [...new Set([...current, eventType])]
+    : current.filter((type) => type !== eventType);
+  props.onUpdateNode(props.node.id, {
+    eventConfig: {
+      eventTypes: nextTypes.length > 0 ? nextTypes : ["click"],
+    },
+    configSource: "event",
+  });
+}
 </script>
 
 <template>
@@ -177,15 +202,16 @@ function handleConfigSourceChange(value: string) {
           <Select.Option value="fetch">{{ t("blueprint.config.configFetch") }}</Select.Option>
           <Select.Option value="json">{{ t("blueprint.config.configJson") }}</Select.Option>
           <Select.Option value="clock">{{ t("blueprint.config.configClock") }}</Select.Option>
+          <Select.Option value="event">{{ t("blueprint.config.configEvent") }}</Select.Option>
           <Select.Option value="view">{{ t("blueprint.config.configView") }}</Select.Option>
         </Select>
       </label>
 
-      <div v-if="configSource === 'view'" class="block space-y-1">
+      <div v-if="configSource === 'view' || configSource === 'event'" class="block space-y-1">
         <span class="inline-flex items-center gap-1 text-muted-foreground">
           {{ t("blueprint.config.linkedViewNodes") }}
           <ConfigHintIcon :label="t('blueprint.config.linkedViewNodes')">
-            {{ t("blueprint.config.viewMultiHint") }}
+            {{ configSource === 'event' ? t("blueprint.config.eventViewHint") : t("blueprint.config.viewMultiHint") }}
           </ConfigHintIcon>
         </span>
         <ViewElementMultiSelect
@@ -197,7 +223,7 @@ function handleConfigSourceChange(value: string) {
               onUpdateNode(node.id, {
                 viewElementIds: next,
                 viewElementId: undefined,
-                configSource: 'view',
+                configSource,
               })
           "
         />
@@ -263,6 +289,42 @@ function handleConfigSourceChange(value: string) {
         </label>
       </div>
 
+      <div
+        v-if="configSource === 'event'"
+        class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+      >
+        <div class="flex items-center gap-1.5">
+          <div class="font-medium text-foreground">{{ t("blueprint.config.eventListen") }}</div>
+          <ConfigHintIcon :label="t('blueprint.config.eventListen')">
+            <p>{{ t("blueprint.config.eventNoInput") }}</p>
+            <p>{{ t("blueprint.config.eventHint") }}</p>
+          </ConfigHintIcon>
+        </div>
+        <p
+          v-if="eventInputs.nonLifecycleCount > 0"
+          class="rounded border border-destructive/40 bg-destructive/10 px-2 py-1.5 text-[11px] leading-relaxed text-destructive"
+        >
+          {{ t("blueprint.config.eventInputNotLifecycle") }}
+        </p>
+        <p
+          v-else-if="eventInputs.lifecycleCount === 0"
+          class="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-amber-700"
+        >
+          {{ t("blueprint.config.eventInputMissing") }}
+        </p>
+        <label
+          v-for="eventType in VIEW_EVENT_TYPES"
+          :key="eventType"
+          class="flex items-center gap-2"
+        >
+          <Checkbox
+            :checked="selectedEventTypes.includes(eventType)"
+            @update:checked="(v) => toggleEventType(eventType, Boolean(v))"
+          />
+          <span>{{ getViewEventTypeLabel(t, eventType) }}</span>
+        </label>
+      </div>
+
       <div
         v-if="configSource === 'lifecycle'"
         class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"

package/src/blueprintNodeTypes.ts

@@ -6,6 +6,7 @@ import ClockFlowNode from "./nodes/ClockFlowNode.vue";
 import FetchFlowNode from "./nodes/FetchFlowNode.vue";
 import JsonFlowNode from "./nodes/JsonFlowNode.vue";
 import LifecycleFlowNode from "./nodes/LifecycleFlowNode.vue";
+import EventFlowNode from "./nodes/EventFlowNode.vue";
 import LogicFlowNode from "./nodes/LogicFlowNode.vue";
 
 /** 稳定引用，避免 Vue Flow 因 nodeTypes 变化反复卸载节点 */
@@ -17,4 +18,5 @@ export const blueprintNodeTypes: Record<string, Component> = {
   json: markRaw(JsonFlowNode),
   logic: markRaw(LogicFlowNode),
   lifecycle: markRaw(LifecycleFlowNode),
+  event: markRaw(EventFlowNode),
 };

package/src/components/BlueprintCanvas.vue

@@ -105,6 +105,7 @@ const {
   onEdgesChange,
   onNodeDragStop,
   onConnect,
+  onConnectEnd,
   isValidConnection,
 } = flowState;
 
@@ -201,6 +202,7 @@ function handleDeleteEdge(edgeId: string) {
       @nodes-change="onNodesChange"
       @edges-change="onEdgesChange"
       @connect="onConnect"
+      @connect-end="onConnectEnd"
       :is-valid-connection="isValidConnection"
       @node-drag-stop="onNodeDragStop"
       @pane-context-menu="onPaneContextMenu"

package/src/components/BlueprintContextMenu.vue

@@ -14,7 +14,7 @@ export type BlueprintContextMenuState =
       clientX: number;
       clientY: number;
       nodeId: string;
-      role: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+      role: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "clock";
     }
   | {
       kind: "edge";

package/src/components/ConfigHintIcon.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Tooltip } from "ant-design-vue";
 
 const { t } = useI18n();
-withDefaults(
-  defineProps<{
-    label?: string;
-    contentClass?: string;
-    buttonClass?: string;
-  }>(),
-  { label: t("common.hint") }
-);
+const props = defineProps<{
+  label?: string;
+  contentClass?: string;
+  buttonClass?: string;
+}>();
+
+const resolvedLabel = computed(() => props.label || t("common.hint"));
 </script>
 
 <template>
@@ -30,7 +30,7 @@ withDefaults(
         buttonClass ??
         'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border text-[10px] leading-none text-muted-foreground hover:bg-accent/50'
       "
-      :aria-label="t('common.hintAria', { label })"
+      :aria-label="t('common.hintAria', { label: resolvedLabel })"
     >
       ?
     </button>

package/src/components/FetchNodeConfigPanel.vue

@@ -19,10 +19,13 @@ import {
   FETCH_REDIRECTS,
   FETCH_RESPONSE_TYPES,
   fetchConfigHasScopeTemplate,
+  getFetchBodyValidationError,
+  getFetchHeadersValidationError,
   latestTraceOutputsByNode,
   parseFetchHeadersJson,
   resolveFetchIncomingScope,
   resolveFetchRequestUrl,
+  resolveFetchScopeAutocompleteRoot,
 } from "@arronqzy/blueprint-dsl";
 
 import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
@@ -37,6 +40,7 @@ import {
 } from "../fetch-config-task-store";
 import ConfigHintIcon from "./ConfigHintIcon.vue";
 import FetchUrlAutocomplete from "./FetchUrlAutocomplete.vue";
+import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
 
 const { t } = useI18n();
 
@@ -102,6 +106,16 @@ const resolvedHeadersPreview = computed(() => {
     return "";
   }
 });
+const resolvedBodyPreview = computed(() => {
+  if (!usesScopeTemplate.value) return "";
+  return resolvedFetchConfig.value.body?.trim() ?? "";
+});
+const headersJsonError = computed(() =>
+  getFetchHeadersValidationError(fetchConfig.value, incomingScope.value)
+);
+const bodyJsonError = computed(() =>
+  getFetchBodyValidationError(fetchConfig.value.body, resolvedFetchConfig.value.body)
+);
 const incomingHasPendingValue = computed(() => {
   const scope = incomingScope.value;
   if (!scope || typeof scope !== "object") return false;
@@ -109,6 +123,10 @@ const incomingHasPendingValue = computed(() => {
     "kind" in scope ? [scope] : Object.values(scope as Record<string, { kind?: string }>);
   return entries.some((entry) => entry && entry.kind === "pending");
 });
+const autocompleteScope = computed(() =>
+  resolveFetchScopeAutocompleteRoot(incomingScope.value)
+);
+const formRef = ref<HTMLElement | null>(null);
 const endpoints = computed(() => fetchConfig.value.swaggerEndpoints ?? []);
 const hasSwaggerEndpoints = computed(() => endpoints.value.length > 0);
 const urlInputMode = computed(
@@ -177,6 +195,23 @@ function handleSendFetchDebug() {
         : t("blueprint.config.fillRequestUrlFirst");
     return;
   }
+  const headersError = getFetchHeadersValidationError(
+    fetchConfig.value,
+    incomingScope.value
+  );
+  if (headersError) {
+    fetchValidationError.value = t("blueprint.config.fetchHeadersInvalidJson", {
+      error: headersError,
+    });
+    return;
+  }
+  const bodyError = getFetchBodyValidationError(fetchConfig.value.body, resolved.body);
+  if (bodyError) {
+    fetchValidationError.value = t("blueprint.config.fetchBodyInvalidJson", {
+      error: bodyError,
+    });
+    return;
+  }
 
   fetchValidationError.value = null;
   startFetchDebugTask({
@@ -215,7 +250,7 @@ const debugOk = computed(() => {
   return result ? result.status >= 200 && result.status < 300 : false;
 });
 
-function handleHeadersBlur(event: Event) {
+function handleHeadersInput(event: Event) {
   const headersJson = (event.target as HTMLTextAreaElement).value;
   const parsed = parseFetchHeadersJson(headersJson);
   props.onUpdateNode(
@@ -229,7 +264,11 @@ function handleHeadersBlur(event: Event) {
 </script>
 
 <template>
-  <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+  <div
+    ref="formRef"
+    class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+  >
+    <ScopeTemplateAutocompleteHost :scope="autocompleteScope" :container-ref="formRef" />
     <div class="flex items-center gap-1.5">
       <div class="font-medium text-foreground">{{ t("blueprint.config.fetchTitle") }}</div>
       <ConfigHintIcon :label="t('blueprint.config.fetchTitle')">
@@ -261,6 +300,7 @@ function handleHeadersBlur(event: Event) {
           :value="fetchConfig.swaggerDocsUrl ?? ''"
           :disabled="loadingSwagger"
           placeholder="https://example.com/v3/api-docs"
+          data-scope-autocomplete="off"
           class="flex-1 font-mono text-[11px]"
           @update:value="
             (v) =>
@@ -516,13 +556,16 @@ function handleHeadersBlur(event: Event) {
         </ConfigHintIcon>
       </span>
       <textarea
-        :key="`${node.id}-headers-${headersDraft}`"
         :value="headersDraft"
         rows="4"
-        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        class="w-full rounded-md border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        :class="headersJsonError ? 'border-destructive' : 'border-input'"
         placeholder='{"Authorization":"Bearer {scope?.value?.token}"}'
-        @blur="handleHeadersBlur"
+        @input="handleHeadersInput"
       />
+      <p v-if="headersJsonError" class="text-[11px] text-destructive">
+        {{ t("blueprint.config.fetchHeadersInvalidJson", { error: headersJsonError }) }}
+      </p>
       <p
         v-if="usesScopeTemplate && resolvedHeadersPreview"
         class="whitespace-pre-wrap break-all font-mono text-[10px] text-gray-500"
@@ -532,11 +575,17 @@ function handleHeadersBlur(event: Event) {
     </label>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.requestBody") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.requestBody") }}
+        <ConfigHintIcon :label="t('blueprint.config.requestBody')">
+          {{ t("blueprint.config.fetchBodyHint") }}
+        </ConfigHintIcon>
+      </span>
       <textarea
         :value="fetchConfig.body ?? ''"
         rows="4"
-        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        class="w-full rounded-md border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        :class="bodyJsonError ? 'border-destructive' : 'border-input'"
         placeholder='{"id":"{scope?.value?.id}"}'
         @input="
           (e) =>
@@ -546,6 +595,15 @@ function handleHeadersBlur(event: Event) {
             )
         "
       />
+      <p v-if="bodyJsonError" class="text-[11px] text-destructive">
+        {{ t("blueprint.config.fetchBodyInvalidJson", { error: bodyJsonError }) }}
+      </p>
+      <p
+        v-if="usesScopeTemplate && resolvedBodyPreview"
+        class="whitespace-pre-wrap break-all font-mono text-[10px] text-gray-500"
+      >
+        {{ t("blueprint.config.fetchScopeResolvedBody") }}: {{ resolvedBodyPreview }}
+      </p>
     </label>
 
     <div class="grid grid-cols-2 gap-2">

package/src/components/FetchUrlAutocomplete.vue

@@ -142,6 +142,7 @@ function handleKeyDown(event: KeyboardEvent) {
     <input
       :value="inputValue"
       :readOnly="selectOnly && !open"
+      data-scope-autocomplete="off"
       :placeholder="placeholder"
       class="flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
       :class="selectOnly && !open ? 'cursor-pointer font-medium' : 'font-mono'"

package/src/components/ScopeTemplateAutocompleteHost.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {
+  toValue,
+  watch,
+  shallowRef,
+  type MaybeRef,
+} from "vue";
+import {
+  applyScopeAutocompleteSelection,
+  buildScopeExpression,
+  getScopeAutocompleteSuggestions,
+  parseScopeAutocomplete,
+  type ScopeAutocompleteState,
+} from "@arronqzy/blueprint-dsl";
+
+type DropdownState = {
+  input: HTMLInputElement | HTMLTextAreaElement;
+  state: ScopeAutocompleteState;
+  suggestions: string[];
+  activeIndex: number;
+  rect: DOMRect;
+};
+
+const props = defineProps<{
+  scope: unknown;
+  containerRef?: MaybeRef<HTMLElement | null | undefined>;
+}>();
+
+const dropdown = shallowRef<DropdownState | null>(null);
+
+function isAutocompleteTarget(
+  target: EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement {
+  if (target instanceof HTMLTextAreaElement) {
+    return target.dataset.scopeAutocomplete !== "off";
+  }
+  if (target instanceof HTMLInputElement) {
+    if (target.dataset.scopeAutocomplete === "off") return false;
+    const type = target.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function setNativeInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  const proto =
+    element instanceof HTMLTextAreaElement
+      ? HTMLTextAreaElement.prototype
+      : HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
+  descriptor?.set?.call(element, value);
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function closeDropdown() {
+  dropdown.value = null;
+}
+
+function refreshForInput(input: HTMLInputElement | HTMLTextAreaElement) {
+  if (props.scope === undefined) {
+    closeDropdown();
+    return;
+  }
+  const cursor = input.selectionStart ?? input.value.length;
+  const parsed = parseScopeAutocomplete(input.value, cursor, props.scope);
+  if (!parsed) {
+    closeDropdown();
+    return;
+  }
+  const suggestions = getScopeAutocompleteSuggestions(props.scope, parsed);
+  if (suggestions.length === 0) {
+    closeDropdown();
+    return;
+  }
+  dropdown.value = {
+    input,
+    state: parsed,
+    suggestions,
+    activeIndex: 0,
+    rect: input.getBoundingClientRect(),
+  };
+}
+
+function applySuggestion(index: number) {
+  const current = dropdown.value;
+  if (!current) return;
+  const selected = current.suggestions[index];
+  if (!selected) return;
+
+  const { value, cursor } = applyScopeAutocompleteSelection(
+    current.input.value,
+    current.state,
+    selected
+  );
+  setNativeInputValue(current.input, value);
+  current.input.focus();
+  current.input.setSelectionRange(cursor, cursor);
+  closeDropdown();
+  window.requestAnimationFrame(() => {
+    refreshForInput(current.input);
+  });
+}
+
+function onFocusIn(event: FocusEvent) {
+  if (!isAutocompleteTarget(event.target)) return;
+  refreshForInput(event.target);
+}
+
+function onInput(event: Event) {
+  if (!isAutocompleteTarget(event.target)) return;
+  refreshForInput(event.target);
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  const current = dropdown.value;
+  if (!current || event.target !== current.input) return;
+
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    dropdown.value = {
+      ...current,
+      activeIndex: Math.min(current.activeIndex + 1, current.suggestions.length - 1),
+    };
+    return;
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    dropdown.value = {
+      ...current,
+      activeIndex: Math.max(current.activeIndex - 1, 0),
+    };
+    return;
+  }
+  if (event.key === "Enter" || event.key === "Tab") {
+    if (current.suggestions.length > 0) {
+      event.preventDefault();
+      applySuggestion(current.activeIndex);
+    }
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    closeDropdown();
+  }
+}
+
+function onPointerDown(event: MouseEvent) {
+  const target = event.target as Node | null;
+  if (
+    dropdown.value?.input.contains(target ?? null) ||
+    (target instanceof Element && target.closest("[data-scope-ac-list]"))
+  ) {
+    return;
+  }
+  const container = toValue(props.containerRef);
+  if (container && !container.contains(target)) {
+    closeDropdown();
+  }
+}
+
+watch(
+  () => toValue(props.containerRef),
+  (container, _prev, onCleanup) => {
+    if (!container || props.scope === undefined) return;
+
+    container.addEventListener("focusin", onFocusIn);
+    container.addEventListener("input", onInput, true);
+    container.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", closeDropdown, true);
+    window.addEventListener("resize", closeDropdown);
+
+    onCleanup(() => {
+      container.removeEventListener("focusin", onFocusIn);
+      container.removeEventListener("input", onInput, true);
+      container.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", closeDropdown, true);
+      window.removeEventListener("resize", closeDropdown);
+    });
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.scope,
+  () => {
+    if (props.scope === undefined) closeDropdown();
+  }
+);
+</script>
+
+<template>
+  <Teleport v-if="dropdown && scope !== undefined" to="body">
+    <div
+      data-scope-ac-list
+      class="fixed z-[10120] max-h-44 min-w-[140px] overflow-auto rounded-md border border-border bg-white py-1 text-gray-800 shadow-md"
+      :style="{
+        left: `${dropdown.rect.left}px`,
+        top: `${dropdown.rect.bottom + 4}px`,
+        width: `${Math.max(dropdown.rect.width, 160)}px`,
+      }"
+    >
+      <button
+        v-for="(key, index) in dropdown.suggestions"
+        :key="key"
+        type="button"
+        :class="[
+          'flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-gray-100',
+          index === dropdown.activeIndex && 'bg-gray-100',
+        ]"
+        @mousedown.prevent
+        @click="applySuggestion(index)"
+      >
+        <span class="font-medium text-gray-800">{{ key }}</span>
+        <span class="font-mono text-[10px] text-gray-500">{{
+          `{${buildScopeExpression(dropdown.state.path, key)}}`
+        }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>