attaform 0.21.1 → 0.21.2

package/dist/runtime/components/DevtoolsValueTree.vue

@@ -1,125 +1,187 @@
-<script setup>
-import { computed, nextTick, ref } from "vue";
-const props = defineProps({
-  value: { type: null, required: true },
-  label: { type: String, required: false },
-  depth: { type: Number, required: false },
-  path: { type: Array, required: false },
-  editable: { type: Boolean, required: false, skipCheck: true },
-  onEdit: { type: Function, required: false, skipCheck: true },
-  selectedKey: { type: null, required: false },
-  onSelectPath: { type: Function, required: false, skipCheck: true }
-});
-const depth = computed(() => props.depth ?? 0);
-const expanded = ref(depth.value < 2);
-const path = computed(() => props.path ?? []);
-const type = computed(() => {
-  const v = props.value;
-  if (v === null) return "null";
-  if (v === void 0) return "undefined";
-  if (typeof v === "string") return "string";
-  if (typeof v === "number") return "number";
-  if (typeof v === "boolean") return "boolean";
-  if (Array.isArray(v)) return "array";
-  if (typeof v === "object") return "object";
-  return "other";
-});
-const isLeaf = computed(() => type.value !== "array" && type.value !== "object");
-const entries = computed(() => {
-  const v = props.value;
-  if (Array.isArray(v)) return v.map((item, i) => [String(i), item]);
-  if (v !== null && typeof v === "object") {
-    return Object.entries(v);
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+
+  const props = defineProps<{
+    value: unknown
+    label?: string
+    depth?: number
+    /**
+     * Path-from-root for this node. Used by edit-aware mounts so the
+     * commit handler knows which leaf the user just touched. Default
+     * `[]` for non-editable mounts; the panel passes the explicit path
+     * when it wires up `onEdit`.
+     */
+    path?: ReadonlyArray<string | number>
+    /**
+     * Edit-mode toggle. When `true` and `onEdit` is wired, leaf cells
+     * become click-to-edit. Values render raw (DevTools does not redact).
+     */
+    editable?: boolean | undefined
+    onEdit?: ((path: ReadonlyArray<string | number>, next: unknown) => void) | undefined
+    /**
+     * Canonical JSON-array key of the currently-selected path (`null`
+     * for no selection). Compared against this node's own key so the
+     * key label can render in a highlighted state. Plumbed as a key
+     * rather than a path array because string equality is cheap and
+     * cross-renders consistently.
+     */
+    selectedKey?: string | null | undefined
+    /**
+     * Click handler for the key label. Called with the node's current
+     * path-from-root; the panel toggles selection on identical paths.
+     * When omitted, the key label is plain text (no selection UX).
+     */
+    onSelectPath?: ((path: ReadonlyArray<string | number>) => void) | undefined
+  }>()
+
+  // Top-level expanded by default; deeper nodes collapsed past 2 levels
+  // so a deeply-nested form doesn't paint a wall of text on first render.
+  const depth = computed(() => props.depth ?? 0)
+  const expanded = ref(depth.value < 2)
+  const path = computed<ReadonlyArray<string | number>>(() => props.path ?? [])
+
+  const type = computed<
+    'null' | 'undefined' | 'array' | 'object' | 'string' | 'number' | 'boolean' | 'other'
+  >(() => {
+    const v = props.value
+    if (v === null) return 'null'
+    if (v === undefined) return 'undefined'
+    if (typeof v === 'string') return 'string'
+    if (typeof v === 'number') return 'number'
+    if (typeof v === 'boolean') return 'boolean'
+    if (Array.isArray(v)) return 'array'
+    if (typeof v === 'object') return 'object'
+    return 'other'
+  })
+
+  const isLeaf = computed(() => type.value !== 'array' && type.value !== 'object')
+
+  const entries = computed<ReadonlyArray<readonly [string, unknown]>>(() => {
+    const v = props.value
+    if (Array.isArray(v)) return v.map((item, i) => [String(i), item] as const)
+    if (v !== null && typeof v === 'object') {
+      return Object.entries(v as Record<string, unknown>)
+    }
+    return []
+  })
+
+  const formatted = computed(() => {
+    const v = props.value
+    if (v === null) return 'null'
+    if (v === undefined) return 'undefined'
+    if (typeof v === 'string') return `"${v}"`
+    if (typeof v === 'boolean' || typeof v === 'number') return String(v)
+    return String(v)
+  })
+
+  const summary = computed(() => {
+    const v = props.value
+    if (Array.isArray(v)) return `Array(${v.length})`
+    if (v !== null && typeof v === 'object') {
+      const keys = Object.keys(v as Record<string, unknown>)
+      return `{${keys.length}}`
+    }
+    return ''
+  })
+
+  // Edit mode -----------------------------------------------------------
+
+  const isEditableLeaf = computed(() => {
+    if (!props.editable || props.onEdit === undefined) return false
+    return type.value === 'string' || type.value === 'number' || type.value === 'boolean'
+  })
+
+  const editing = ref(false)
+  const editValue = ref('')
+  const editInput = ref<HTMLInputElement | null>(null)
+  const editRejected = ref(false)
+
+  function childPath(rawKey: string): ReadonlyArray<string | number> {
+    // Array indices arrive as stringified numbers from `Object.entries` /
+    // `array.map`. Coerce back to numbers when the parent is an array
+    // so `canonicalizePath` on the consumer side gets a structured Path
+    // with the right shape — `["users", 0, "name"]`, not
+    // `["users", "0", "name"]`.
+    if (type.value === 'array') return [...path.value, Number(rawKey)]
+    return [...path.value, rawKey]
+  }
+
+  async function startEdit(): Promise<void> {
+    if (!isEditableLeaf.value) return
+    editValue.value =
+      type.value === 'boolean' || type.value === 'number'
+        ? String(props.value ?? '')
+        : (props.value as string)
+    editing.value = true
+    editRejected.value = false
+    await nextTick()
+    editInput.value?.focus()
+    editInput.value?.select?.()
   }
-  return [];
-});
-const formatted = computed(() => {
-  const v = props.value;
-  if (v === null) return "null";
-  if (v === void 0) return "undefined";
-  if (typeof v === "string") return `"${v}"`;
-  if (typeof v === "boolean" || typeof v === "number") return String(v);
-  return String(v);
-});
-const summary = computed(() => {
-  const v = props.value;
-  if (Array.isArray(v)) return `Array(${v.length})`;
-  if (v !== null && typeof v === "object") {
-    const keys = Object.keys(v);
-    return `{${keys.length}}`;
+
+  function flashRejected(): void {
+    editRejected.value = true
+    setTimeout(() => {
+      editRejected.value = false
+    }, 600)
   }
-  return "";
-});
-const isEditableLeaf = computed(() => {
-  if (!props.editable || props.onEdit === void 0) return false;
-  return type.value === "string" || type.value === "number" || type.value === "boolean";
-});
-const editing = ref(false);
-const editValue = ref("");
-const editInput = ref(null);
-const editRejected = ref(false);
-function childPath(rawKey) {
-  if (type.value === "array") return [...path.value, Number(rawKey)];
-  return [...path.value, rawKey];
-}
-async function startEdit() {
-  if (!isEditableLeaf.value) return;
-  editValue.value = type.value === "boolean" || type.value === "number" ? String(props.value ?? "") : props.value;
-  editing.value = true;
-  editRejected.value = false;
-  await nextTick();
-  editInput.value?.focus();
-  editInput.value?.select?.();
-}
-function flashRejected() {
-  editRejected.value = true;
-  setTimeout(() => {
-    editRejected.value = false;
-  }, 600);
-}
-function commitEdit() {
-  if (!editing.value || props.onEdit === void 0) return;
-  let next = editValue.value;
-  if (type.value === "number") {
-    const parsed = Number(editValue.value);
-    if (!Number.isFinite(parsed)) {
-      flashRejected();
-      editing.value = false;
-      return;
+
+  function commitEdit(): void {
+    if (!editing.value || props.onEdit === undefined) return
+    let next: unknown = editValue.value
+    if (type.value === 'number') {
+      const parsed = Number(editValue.value)
+      if (!Number.isFinite(parsed)) {
+        flashRejected()
+        editing.value = false
+        return
+      }
+      next = parsed
+    } else if (type.value === 'boolean') {
+      // Boolean leaves go through a checkbox commit path that calls the
+      // emitter directly; this branch is defensive in case a text-mode
+      // commit lands on a boolean leaf.
+      next = editValue.value === 'true'
     }
-    next = parsed;
-  } else if (type.value === "boolean") {
-    next = editValue.value === "true";
+    if (next !== props.value) props.onEdit(path.value, next)
+    editing.value = false
+  }
+
+  function cancelEdit(): void {
+    editing.value = false
+    editRejected.value = false
+  }
+
+  function toggleBoolean(checked: boolean): void {
+    if (!isEditableLeaf.value || props.onEdit === undefined) return
+    props.onEdit(path.value, checked)
+  }
+
+  // Selection (Field-state inspector hook). Canonical key uses JSON-
+  // serialised path-array form so two arrays with the same shape produce
+  // the same string — direct equality check.
+  const ownKey = computed(() => JSON.stringify(path.value))
+  const isSelected = computed(
+    () =>
+      props.selectedKey !== null &&
+      props.selectedKey !== undefined &&
+      props.selectedKey === ownKey.value
+  )
+
+  function selectThisPath(): void {
+    if (props.onSelectPath === undefined) return
+    props.onSelectPath(path.value)
   }
-  if (next !== props.value) props.onEdit(path.value, next);
-  editing.value = false;
-}
-function cancelEdit() {
-  editing.value = false;
-  editRejected.value = false;
-}
-function toggleBoolean(checked) {
-  if (!isEditableLeaf.value || props.onEdit === void 0) return;
-  props.onEdit(path.value, checked);
-}
-const ownKey = computed(() => JSON.stringify(path.value));
-const isSelected = computed(
-  () => props.selectedKey !== null && props.selectedKey !== void 0 && props.selectedKey === ownKey.value
-);
-function selectThisPath() {
-  if (props.onSelectPath === void 0) return;
-  props.onSelectPath(path.value);
-}
 </script>
 
 <template>
-  <div class="tree-node">
+<div class="tree-node">
     <template v-if="isLeaf">
       <div class="row" :class="{ 'edit-rejected': editRejected, 'row-selected': isSelected }">
         <span
           v-if="label"
           class="key"
-          :class="{ 'key-selectable': onSelectPath !== void 0, 'key-selected': isSelected }"
+          :class="{ 'key-selectable': onSelectPath !== undefined, 'key-selected': isSelected }"
           @click.stop="selectThisPath"
           >{{ label }}:</span
         >
@@ -139,8 +201,8 @@ function selectThisPath() {
           <label class="leaf-bool">
             <input
               type="checkbox"
-              :checked="value"
-              @change="toggleBoolean($event.target.checked)"
+              :checked="value as boolean"
+              @change="toggleBoolean(($event.target as HTMLInputElement).checked)"
             />
             <span class="leaf leaf-boolean">{{ formatted }}</span>
           </label>
@@ -149,7 +211,7 @@ function selectThisPath() {
           <span
             class="leaf"
             :class="[`leaf-${type}`, { 'leaf-editable': isEditableLeaf }]"
-            :title="isEditableLeaf ? 'Click to edit' : void 0"
+            :title="isEditableLeaf ? 'Click to edit' : undefined"
             @click="isEditableLeaf ? startEdit() : null"
           >
             {{ formatted }}
@@ -163,7 +225,7 @@ function selectThisPath() {
         <span
           v-if="label"
           class="key"
-          :class="{ 'key-selectable': onSelectPath !== void 0, 'key-selected': isSelected }"
+          :class="{ 'key-selectable': onSelectPath !== undefined, 'key-selected': isSelected }"
           @click.stop="selectThisPath"
           >{{ label }}:</span
         >

package/dist/runtime/plugins/attaform.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const app = require('nuxt/app');
-const devtoolsShared = require('../../shared/attaform.Bq5sX7TF.cjs');
-const paths = require('../../shared/attaform.D32WwKk6.cjs');
+const devtoolsShared = require('../../shared/attaform.BwLp9KM7.cjs');
+const paths = require('../../shared/attaform.B5LNzqQh.cjs');
 
 var attaform_default = app.defineNuxtPlugin({
   // `enforce: 'pre'` makes the "we run before any component's setup" claim

package/dist/runtime/plugins/attaform.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtPlugin, useRuntimeConfig, useRoute } from 'nuxt/app';
-import { r as renderAttaformState, h as hydrateAttaformState, D as DEVTOOLS_WINDOW_KEY } from '../../shared/attaform.Y1ZGhM4k.mjs';
-import { m as createAttaform, y as kAttaformWizardActiveStepResolver, s as getRegistryFromApp } from '../../shared/attaform.pmtahXKy.mjs';
+import { r as renderAttaformState, h as hydrateAttaformState, D as DEVTOOLS_WINDOW_KEY } from '../../shared/attaform.C41gjp-a.mjs';
+import { c as createAttaform, k as kAttaformWizardActiveStepResolver, g as getRegistryFromApp } from '../../shared/attaform.DP-u7_tk.mjs';
 
 var attaform_default = defineNuxtPlugin({
   // `enforce: 'pre'` makes the "we run before any component's setup" claim