@arronqzy/vue-blueprint 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "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/i18n": "0.1.11",
-    "@arronqzy/blueprint-dsl": "1.0.14",
-    "@arronqzy/vue-rx-store": "0.1.6"
+    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/vue-rx-store": "0.1.6",
+    "@arronqzy/i18n": "0.1.13"
   },
   "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

@@ -383,6 +383,9 @@ function toggleEventType(eventType: ViewEventType, checked: boolean) {
       <JsonNodeConfigPanel
         v-if="configSource === 'json'"
         :node="node"
+        :graph-nodes="graphNodes"
+        :graph-edges="graphEdges"
+        :trace-entries="traceEntries"
         :on-update-node="onUpdateNode"
       />
       <StorageNodeConfigPanel

package/src/components/JsonNodeConfigPanel.vue

@@ -1,25 +1,42 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
-import { validateJsonString } from "@arronqzy/blueprint-dsl";
-import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
+import type {
+  ExecutionTraceEntry,
+  JsonNodeConfig,
+} from "@arronqzy/blueprint-dsl";
+import {
+  latestTraceOutputsByNode,
+  resolveFetchIncomingScope,
+  resolveFetchScopeAutocompleteRoot,
+  validateJsonStringAllowingScope,
+} from "@arronqzy/blueprint-dsl";
 
 import ConfigHintIcon from "./ConfigHintIcon.vue";
-import type { BlueprintGraphNode } from "../graph/document";
+import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
 
 const { t } = useI18n();
 
 export type JsonNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "jsonConfig" | "configSource">>
   ) => void;
 };
 
-const props = defineProps<JsonNodeConfigPanelProps>();
+const props = withDefaults(defineProps<JsonNodeConfigPanelProps>(), {
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
+});
 
+const formRef = ref<HTMLDivElement | null>(null);
 const draftError = ref<string | null>(null);
 
 function patchJsonConfig(node: BlueprintGraphNode, patch: Partial<JsonNodeConfig>) {
@@ -31,24 +48,49 @@ function patchJsonConfig(node: BlueprintGraphNode, patch: Partial<JsonNodeConfig
 
 const jsonConfig = computed(() => resolveNodeJsonConfig(props.node));
 
+const incomingScope = computed(() => {
+  const outputs = latestTraceOutputsByNode(props.traceEntries);
+  return resolveFetchIncomingScope({
+    fetchNodeId: props.node.id,
+    nodes: props.graphNodes,
+    edges: props.graphEdges,
+    getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+  });
+});
+const autocompleteScope = computed(() =>
+  resolveFetchScopeAutocompleteRoot(incomingScope.value)
+);
+
 const storedValidation = computed(() =>
-  validateJsonString(jsonConfig.value.jsonString)
+  validateJsonStringAllowingScope(jsonConfig.value.jsonString)
 );
 
 const parseError = computed(
-  () => draftError.value ?? (storedValidation.value.ok ? null : storedValidation.value.error)
+  () =>
+    draftError.value ??
+    (storedValidation.value.ok ? null : storedValidation.value.error)
+);
+const deferredScope = computed(
+  () =>
+    storedValidation.value.ok &&
+    "deferred" in storedValidation.value &&
+    storedValidation.value.deferred === true
 );
 
 function handleChange(event: Event) {
   const jsonString = (event.target as HTMLTextAreaElement).value;
-  const result = validateJsonString(jsonString);
+  const result = validateJsonStringAllowingScope(jsonString);
   draftError.value = result.ok ? null : result.error;
   props.onUpdateNode(props.node.id, patchJsonConfig(props.node, { jsonString }));
 }
 </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.jsonTitle") }}</div>
       <ConfigHintIcon :label="t('blueprint.config.jsonTitle')">
@@ -57,20 +99,28 @@ function handleChange(event: Event) {
     </div>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.jsonContent") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.jsonContent") }}
+        <ConfigHintIcon :label="t('blueprint.config.jsonContent')">
+          {{ t("blueprint.config.jsonScopeHint") }}
+        </ConfigHintIcon>
+      </span>
       <textarea
         :value="jsonConfig.jsonString"
         rows="12"
         spellcheck="false"
         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"
         placeholder='{
-  "key": "value"
+  "key": "{scope?.value}"
 }'
         @input="handleChange"
       />
       <p v-if="parseError" class="text-[11px] text-destructive">
         {{ t("blueprint.config.jsonFormatError", { error: parseError }) }}
       </p>
+      <p v-else-if="deferredScope" class="text-[11px] text-muted-foreground">
+        {{ t("blueprint.config.jsonScopeDeferred") }}
+      </p>
       <p v-else class="text-[11px] text-muted-foreground">{{ t("blueprint.config.jsonFormatOk") }}</p>
     </label>
   </div>

package/src/components/StorageKeyAutocomplete.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import {
+  filterStorageKeySuggestions,
+  listBrowserStorageKeys,
+  type StorageKind,
+} from "@arronqzy/blueprint-dsl";
+import { computed, onUnmounted, ref, watch } from "vue";
+
+import { cn } from "../utils/cn";
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    value: string;
+    storages: StorageKind | readonly StorageKind[];
+    placeholder?: string;
+  }>(),
+  {
+    placeholder: "",
+  }
+);
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+const open = ref(false);
+const activeIndex = ref(0);
+const keys = ref<string[]>([]);
+const containerRef = ref<HTMLDivElement | null>(null);
+
+const storageList = computed(() =>
+  Array.isArray(props.storages) ? [...props.storages] : [props.storages]
+);
+
+function refreshKeys() {
+  keys.value = listBrowserStorageKeys(storageList.value);
+}
+
+watch(
+  storageList,
+  () => {
+    refreshKeys();
+  },
+  { immediate: true, deep: true }
+);
+
+const filtered = computed(() =>
+  filterStorageKeySuggestions(keys.value, props.value)
+);
+
+watch([() => props.value, () => filtered.value.length], () => {
+  activeIndex.value = 0;
+});
+
+let pointerCleanup: (() => void) | null = null;
+
+watch(open, (isOpen) => {
+  pointerCleanup?.();
+  pointerCleanup = null;
+  if (!isOpen) return;
+  const onPointerDown = (event: MouseEvent) => {
+    if (!containerRef.value?.contains(event.target as globalThis.Node)) {
+      open.value = false;
+    }
+  };
+  window.addEventListener("pointerdown", onPointerDown);
+  pointerCleanup = () => window.removeEventListener("pointerdown", onPointerDown);
+});
+
+onUnmounted(() => {
+  pointerCleanup?.();
+});
+
+const showSuggestions = computed(() => open.value && keys.value.length > 0);
+
+function selectSuggestion(index: number) {
+  const item = filtered.value[index];
+  if (!item) return;
+  emit("change", item);
+  open.value = false;
+}
+
+function openDropdown() {
+  refreshKeys();
+  open.value = true;
+}
+
+function handleInput(event: Event) {
+  emit("change", (event.target as HTMLInputElement).value);
+  open.value = true;
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!showSuggestions.value || filtered.value.length === 0) {
+    if (event.key === "Escape") open.value = false;
+    return;
+  }
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    activeIndex.value = Math.min(activeIndex.value + 1, filtered.value.length - 1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    activeIndex.value = Math.max(activeIndex.value - 1, 0);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    selectSuggestion(activeIndex.value);
+  } else if (event.key === "Escape") {
+    open.value = false;
+  }
+}
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <input
+      :value="value"
+      :placeholder="placeholder"
+      spellcheck="false"
+      class="flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 font-mono text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+      @input="handleInput"
+      @focus="openDropdown"
+      @click="openDropdown"
+      @keydown="handleKeyDown"
+    />
+    <div
+      v-if="showSuggestions"
+      class="absolute z-[10150] mt-1 max-h-52 w-full overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md"
+    >
+      <div
+        v-if="filtered.length === 0"
+        class="px-2 py-1.5 text-[11px] text-muted-foreground"
+      >
+        {{ t("blueprint.config.noMatchingStorageKey") }}
+      </div>
+      <button
+        v-for="(key, index) in filtered"
+        :key="key"
+        type="button"
+        class="flex w-full items-center px-2 py-1.5 text-left font-mono text-[11px] hover:bg-accent"
+        :class="cn(index === activeIndex && 'bg-accent')"
+        @mousedown.prevent
+        @click="selectSuggestion(index)"
+      >
+        {{ key }}
+      </button>
+    </div>
+    <div
+      v-else-if="open && keys.length === 0"
+      class="absolute z-[10150] mt-1 w-full rounded-md border border-border bg-popover px-2 py-1.5 text-[11px] text-muted-foreground shadow-md"
+    >
+      {{ t("blueprint.config.noStorageKeys") }}
+    </div>
+  </div>
+</template>

package/src/components/StorageNodeConfigPanel.vue

@@ -19,6 +19,7 @@ import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeStorageConfig } from "../graph/document";
 import ConfigHintIcon from "./ConfigHintIcon.vue";
 import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
+import StorageKeyAutocomplete from "./StorageKeyAutocomplete.vue";
 
 const { t } = useI18n();
 
@@ -112,6 +113,12 @@ function handleSetValueChange(value: string) {
     patchStorageConfig(props.node, { set: { value: String(value ?? "") } })
   );
 }
+
+const setKeySuggestionStorages = computed(() =>
+  storageConfig.value.set.storages.length > 0
+    ? storageConfig.value.set.storages
+    : (["session", "local"] as const)
+);
 </script>
 
 <template>
@@ -148,13 +155,11 @@ function handleSetValueChange(value: string) {
       </label>
       <label class="block space-y-1">
         <span class="text-muted-foreground">{{ t("blueprint.config.storageKey") }}</span>
-        <Input
-          size="small"
+        <StorageKeyAutocomplete
           :value="storageConfig.read.key"
-          spellcheck="false"
-          class="font-mono text-[11px]"
+          :storages="storageConfig.read.storage"
           placeholder="key"
-          @update:value="(v) => handleReadKeyChange(String(v ?? ''))"
+          @change="handleReadKeyChange"
         />
       </label>
     </div>
@@ -187,13 +192,11 @@ function handleSetValueChange(value: string) {
       </div>
       <label class="block space-y-1">
         <span class="text-muted-foreground">{{ t("blueprint.config.storageKey") }}</span>
-        <Input
-          size="small"
+        <StorageKeyAutocomplete
           :value="storageConfig.set.key"
-          spellcheck="false"
-          class="font-mono text-[11px]"
+          :storages="setKeySuggestionStorages"
           placeholder="key"
-          @update:value="(v) => handleSetKeyChange(String(v ?? ''))"
+          @change="handleSetKeyChange"
         />
       </label>
       <label class="block space-y-1">

package/src/composables/useBlueprintPageLifecycle.ts

@@ -162,6 +162,7 @@ export function useBlueprintPageLifecycle(options: UseBlueprintPageLifecycleOpti
   const hadBoot = ref(false);
   const prevActive = ref<boolean | undefined>(undefined);
   let bootCancelled = false;
+  let updatedTimer = 0;
 
   const resetFiredPhases = () => {
     firedLifecyclePhases.value = new Set();
@@ -291,16 +292,21 @@ export function useBlueprintPageLifecycle(options: UseBlueprintPageLifecycleOpti
     () => [bootCompleted.value, resolveValue(options.enabled ?? true), resolveValue(options.onUpdated)],
     ([completed, enabled]) => {
       if (!enabled || !completed) return;
-      void emitPhases(
-        graphRef.value,
-        ["updated"],
-        runnerOptionsRef.value,
-        markPhaseFired
-      );
+      if (updatedTimer) window.clearTimeout(updatedTimer);
+      updatedTimer = window.setTimeout(() => {
+        updatedTimer = 0;
+        void emitPhases(
+          graphRef.value,
+          ["updated"],
+          runnerOptionsRef.value,
+          markPhaseFired
+        );
+      }, 160);
     }
   );
 
   onUnmounted(() => {
+    if (updatedTimer) window.clearTimeout(updatedTimer);
     teardownBoot();
   });