@webiny/app-admin 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/features/formModel/ObjectField.js

@@ -1,763 +1,652 @@
 import { makeAutoObservable, runInAction, toJS } from "mobx";
 import { Field } from "./Field.js";
 import { createTemplateBuilder } from "./fieldTypes/ObjectFieldType.js";
-/** Reserved key used as the template discriminator in templated object data. */
-export const TEMPLATE_DISCRIMINATOR = "_templateId";
-function createChildFields(childBuilders, form, parentPath) {
-  const children = new Map();
-  for (const [name, builder] of Object.entries(childBuilders)) {
-    const config = builder.build(name);
-    const field = createFieldFromConfig(config, form, parentPath);
-    children.set(name, field);
-  }
-  return children;
+const TEMPLATE_DISCRIMINATOR = "_templateId";
+function createChildFields(childBuilders, form, parentPath, scopePath) {
+    const children = new Map();
+    for (const [name, builder] of Object.entries(childBuilders)){
+        const config = builder.build(name);
+        const field = createFieldFromConfig(config, form, parentPath, scopePath);
+        children.set(name, field);
+    }
+    return children;
 }
-function createFieldFromConfig(config, form, parentPath) {
-  if (config.childBuilders) {
-    const objField = new ObjectField(config);
-    if (form) {
-      objField.setForm(form, parentPath);
-    }
-    return objField;
-  }
-  const field = new Field(config);
-  if (form) {
-    field.setForm(form, parentPath);
-  }
-  return field;
+function createFieldFromConfig(config, form, parentPath, scopePath) {
+    if (config.childBuilders) {
+        const objField = new ObjectField(config);
+        if (form) objField.setForm(form, parentPath, scopePath);
+        return objField;
+    }
+    const field = new Field(config);
+    if (form) field.setForm(form, parentPath, scopePath);
+    return field;
 }
 function hydrateChildren(children, data, options) {
-  if (!data) {
-    return;
-  }
-  for (const [name, field] of children) {
-    if (name in data) {
-      if (options?.clone && field.config.cloneValue) {
-        field.setValueSilent(field.config.cloneValue(data[name]));
-      } else {
-        field.setValueSilent(data[name]);
-      }
-    }
-  }
+    if (!data) return;
+    for (const [name, field] of children)if (name in data) if (options?.clone && field.config.cloneValue) field.setValueSilent(field.config.cloneValue(data[name]));
+    else field.setValueSilent(data[name]);
 }
 function getChildrenData(children) {
-  const data = {};
-  for (const [name, field] of children) {
-    if (isObjectField(field)) {
-      data[name] = toJS(field.getData());
-    } else {
-      data[name] = toJS(field.getValue());
-    }
-  }
-  return data;
+    const data = {};
+    for (const [name, field] of children)if (isObjectField(field)) data[name] = toJS(field.getData());
+    else data[name] = toJS(field.getValue());
+    return data;
 }
 async function validateChildren(children, options) {
-  let allValid = true;
-  for (const [, field] of children) {
-    const valid = await field.validate(options);
-    if (!valid) {
-      allValid = false;
-    }
-  }
-  return allValid;
+    let allValid = true;
+    for (const [, field] of children){
+        const valid = await field.validate(options);
+        if (!valid) allValid = false;
+    }
+    return allValid;
 }
-export function isObjectField(field) {
-  return field.type === "object";
+function isObjectField(field) {
+    return "object" === field.type;
 }
 let itemKeyCounter = 0;
-/**
- * ObjectField — hierarchical field with children, using composition.
- * Holds a `_base` Field for scalar behavior (callbacks, disabled/hidden, form ref).
- * Adds its own children/items management for object and list modes.
- */
-export class ObjectField {
-  _form = null;
-  _items = [];
-  _templates = [];
-  _activeTemplateId = null;
-  /** Inner layout for non-templated objects (single layout, applied per item too). */
-  _ownLayout = null;
-  /** Per-template inner layouts for templated objects. */
-  _templateLayouts = {};
-  _validating = false;
-  constructor(config) {
-    this.config = config;
-    this._base = new Field({
-      ...config,
-      type: "object",
-      renderer: config.renderer ?? (config.isList ? "objectAccordionMultiple" : "objectAccordionSingle")
-    });
-    this._templates = config.templates ?? [];
-    this._isTemplated = this._templates.length > 0;
-    if (this._isTemplated) {
-      // Templated mode: children populated per-item (list) or when a template is picked (single).
-      this._children = new Map();
-    } else {
-      this._children = createChildFields(config.childBuilders, null);
-    }
-    makeAutoObservable(this, {
-      config: false
-    });
-  }
-  _findTemplate(id) {
-    return this._templates.find(t => t.id === id);
-  }
-  _rebuildChildrenForTemplate(templateId) {
-    const template = this._findTemplate(templateId);
-    if (!template) {
-      throw new Error(`Template "${templateId}" not found on field "${this.config.name}". ` + `Available: ${this._templates.map(t => t.id).join(", ") || "(none)"}.`);
-    }
-    const children = createChildFields(template.childBuilders, this._form, this.qualifiedName);
-    this._children = children;
-    this._activeTemplateId = templateId;
-    const inner = this._innerLayoutFor(templateId);
-    if (inner) {
-      this._applyNestedObjectLayouts(inner, children);
-    }
-  }
-
-  // --- Forwarded from _base ---
-
-  get name() {
-    return this._base.name;
-  }
-  get type() {
-    return "object";
-  }
-  get visible() {
-    return this._base.visible;
-  }
-  get disabled() {
-    return this._base.disabled;
-  }
-  setDisabled(value) {
-    this._base.setDisabled(value);
-  }
-  setVisible(value) {
-    this._base.setVisible(value);
-  }
-  setAncestorRules(rules) {
-    this._base.setAncestorRules(rules);
-  }
-  setForm(form, parentPath) {
-    this._form = form;
-    this._base.setForm(form, parentPath);
-    const myPath = this._base.qualifiedName;
-    for (const [, field] of this._children) {
-      field.setForm(form, myPath);
-    }
-    for (const item of this._items) {
-      for (const [, field] of item.children) {
-        field.setForm(form, myPath);
-      }
-    }
-  }
-  setValidation(validation) {
-    this._base.setValidation(validation);
-  }
-  addBeforeChange(cb) {
-    this._base.addBeforeChange(cb);
-  }
-  addAfterChange(cb) {
-    this._base.addAfterChange(cb);
-  }
-  addAfterSetValue(cb) {
-    this._base.addAfterSetValue(cb);
-  }
-  addOnBlur(cb) {
-    this._base.addOnBlur(cb);
-  }
-  addRequiredWhen(fn, message) {
-    this._base.addRequiredWhen(fn, message);
-  }
-  setComputed(fn) {
-    this._base.setComputed(fn);
-  }
-  setComputedUntilDirty(fn) {
-    this._base.setComputedUntilDirty(fn);
-  }
-  blur() {
-    this._base.blur();
-  }
-  remove() {
-    this._base.remove();
-  }
-  get qualifiedName() {
-    return this._base.qualifiedName;
-  }
-  focus() {
-    this._base.focus();
-  }
-  requestFocus() {
-    this._base.requestFocus();
-  }
-  clearFocusRequest() {
-    this._base.clearFocusRequest();
-  }
-  getInnerLayout() {
-    if (this.isTemplated) {
-      return this._activeTemplateId ? this._templateLayouts[this._activeTemplateId] ?? null : null;
-    }
-    return this._ownLayout;
-  }
-
-  // --- Object-specific ---
-
-  get isList() {
-    return this.config.isList;
-  }
-  get isTemplated() {
-    return this._isTemplated;
-  }
-  get activeTemplateId() {
-    return this._activeTemplateId;
-  }
-  get availableTemplates() {
-    const result = [];
-    for (const template of this._templates) {
-      if (template.visible && this._form) {
-        if (!template.visible(this._form)) {
-          continue;
-        }
-      }
-      result.push({
-        id: template.id,
-        label: template.label,
-        icon: template.icon
-      });
-    }
-    return result;
-  }
-  setTemplate(templateId) {
-    if (this._activeTemplateId === templateId) {
-      return;
-    }
-    this._rebuildChildrenForTemplate(templateId);
-  }
-  get templates() {
-    return {
-      add: (id, configure) => this._addTemplate(id, configure),
-      remove: templateId => this._removeTemplate(templateId)
-    };
-  }
-  _addTemplate(id, configure) {
-    if (!this.isTemplated) {
-      throw new Error(`Object field "${this.config.name}" is not templated; templates.add() requires the field to be defined with .template().`);
-    }
-    if (id === TEMPLATE_DISCRIMINATOR) {
-      throw new Error(`Template id "${TEMPLATE_DISCRIMINATOR}" is reserved. Choose a different id.`);
-    }
-    if (this._findTemplate(id)) {
-      throw new Error(`Duplicate template id "${id}".`);
-    }
-    const tb = createTemplateBuilder();
-    configure(tb);
-    this._templates.push(tb._build(id, this._form.registry));
-  }
-  _removeTemplate(templateId) {
-    if (!this.isTemplated) {
-      throw new Error(`Object field "${this.config.name}" is not templated; templates.remove() requires the field to be defined with .template().`);
-    }
-    const index = this._templates.findIndex(t => t.id === templateId);
-    if (index === -1) {
-      return;
-    }
-    this._templates.splice(index, 1);
-    if (this.config.isList) {
-      this._items = this._items.filter(item => item.templateId !== templateId);
-      return;
-    }
-    if (this._activeTemplateId === templateId) {
-      this._activeTemplateId = null;
-      this._children = new Map();
-    }
-  }
-  setInnerLayout(layout) {
-    if (Array.isArray(layout)) {
-      if (this.isTemplated) {
-        throw new Error(`Object field "${this.config.name}" is templated; layout.object() must pass a per-template map (Record<templateId, LayoutNode[]>), not a single LayoutNode[].`);
-      }
-      this._ownLayout = layout;
-      this._templateLayouts = {};
-      // Apply nested object layouts to children that already exist
-      // (non-templated single + non-templated list items).
-      this._applyNestedObjectLayouts(layout, this._children);
-      for (const item of this._items) {
-        this._applyNestedObjectLayouts(layout, item.children);
-      }
-      return;
-    }
-    if (!this.isTemplated) {
-      throw new Error(`Object field "${this.config.name}" is not templated; layout.object() must pass a single LayoutNode[], not a per-template map.`);
-    }
-    this._templateLayouts = layout;
-    this._ownLayout = null;
-    // Apply nested object layouts to currently-active templated children
-    // (templated single with active template + templated list items).
-    if (this._activeTemplateId && layout[this._activeTemplateId]) {
-      this._applyNestedObjectLayouts(layout[this._activeTemplateId], this._children);
-    }
-    for (const item of this._items) {
-      if (item.templateId && layout[item.templateId]) {
-        this._applyNestedObjectLayouts(layout[item.templateId], item.children);
-      }
-    }
-  }
-
-  /**
-   * Walk an inner layout for nested `object` nodes and forward each one to
-   * the matching child field. The recursion bottoms out naturally: each
-   * matched child is itself an ObjectField and will run `_applyNestedObjectLayouts`
-   * against its own children whenever they materialise.
-   */
-  _applyNestedObjectLayouts(layout, children) {
-    for (const node of layout) {
-      if (node.type === "object") {
-        const child = children.get(node.fieldName);
-        if (child && isObjectField(child)) {
-          child.setInnerLayout(node.inner);
-        }
-      } else if (node.type === "tabs") {
-        for (const tab of node.tabs) {
-          this._applyNestedObjectLayouts(tab.layout, children);
+class ObjectField {
+    constructor(config){
+        this._form = null;
+        this._items = [];
+        this._templates = [];
+        this._activeTemplateId = null;
+        this._ownLayout = null;
+        this._templateLayouts = {};
+        this._validating = false;
+        this._childScope = ()=>this._base.scopedName;
+        this.config = config;
+        this._base = new Field({
+            ...config,
+            type: "object",
+            renderer: config.renderer ?? (config.isList ? "objectAccordionMultiple" : "objectAccordionSingle")
+        });
+        this._templates = config.templates ?? [];
+        this._isTemplated = this._templates.length > 0;
+        this._ownLayout = config.layout ?? null;
+        this._templateLayouts = this._declaredTemplateLayouts();
+        if (this._isTemplated) this._children = new Map();
+        else {
+            this._children = createChildFields(config.childBuilders, null);
+            if (this._ownLayout) this._applyNestedObjectLayouts(this._ownLayout, this._children);
         }
-      }
-    }
-  }
-
-  /**
-   * Returns the inner layout that should apply to a freshly-built children
-   * Map for the given templateId (templated objects/lists) or for the
-   * non-templated case. Used to seed nested object layouts on newly-created
-   * children before they go live.
-   */
-  _innerLayoutFor(templateId) {
-    if (this.isTemplated) {
-      if (templateId === undefined) {
-        return undefined;
-      }
-      return this._templateLayouts[templateId];
-    }
-    return this._ownLayout ?? undefined;
-  }
-  _resolveLayoutForChildren(children, templateId) {
-    const layoutNodes = this.isTemplated ? templateId !== null ? this._templateLayouts[templateId] : undefined : this._ownLayout ?? undefined;
-    if (layoutNodes && this._form?.resolveChildLayout) {
-      return this._form.resolveChildLayout(layoutNodes, children);
-    }
-    // Default: one row per visible child, in insertion order.
-    const fallback = [];
-    for (const [, field] of children) {
-      if (field.visible) {
-        fallback.push({
-          type: "row",
-          fields: [field.vm]
+        makeAutoObservable(this, {
+            config: false,
+            _childScope: false,
+            _itemScope: false
         });
-      }
-    }
-    return fallback;
-  }
-  get children() {
-    return this._children;
-  }
-  get items() {
-    return this._items.map(item => ({
-      key: item.key,
-      children: item.children,
-      templateId: item.templateId,
-      getData: () => this._getItemData(item)
-    }));
-  }
-  _getItemData(item) {
-    const data = getChildrenData(item.children);
-    if (item.templateId !== undefined) {
-      return {
-        [TEMPLATE_DISCRIMINATOR]: item.templateId,
-        ...data
-      };
     }
-    return data;
-  }
-  getChild(name) {
-    return this._children.get(name);
-  }
-  fields(factory) {
-    if (this.isTemplated) {
-      throw new Error(`Object field "${this.config.name}" is templated; use templates.add()/remove() to manage children. Each template owns its own fields.`);
-    }
-    const builders = factory(this._form.registry);
-    for (const [name, builder] of Object.entries(builders)) {
-      if (builder === undefined) {
-        this._children.delete(name);
-        this.config.childBuilders[name] = undefined;
-        delete this.config.childBuilders[name];
+    _declaredTemplateLayouts() {
+        const layouts = {};
+        for (const template of this._templates)if (template.layout) layouts[template.id] = template.layout;
+        return layouts;
+    }
+    _findTemplate(id) {
+        return this._templates.find((t)=>t.id === id);
+    }
+    _rebuildChildrenForTemplate(templateId) {
+        const template = this._findTemplate(templateId);
+        if (!template) throw new Error(`Template "${templateId}" not found on field "${this.config.name}". Available: ${this._templates.map((t)=>t.id).join(", ") || "(none)"}.`);
+        const children = createChildFields(template.childBuilders, this._form, this.qualifiedName, this._childScope);
+        this._children = children;
+        this._activeTemplateId = templateId;
+        const inner = this._innerLayoutFor(templateId);
+        if (inner) this._applyNestedObjectLayouts(inner, children);
+    }
+    get name() {
+        return this._base.name;
+    }
+    get type() {
+        return "object";
+    }
+    get visible() {
+        return this._base.visible;
+    }
+    get disabled() {
+        return this._base.disabled;
+    }
+    setDisabled(value) {
+        this._base.setDisabled(value);
+    }
+    setVisible(value) {
+        this._base.setVisible(value);
+    }
+    setAncestorRules(rules) {
+        this._base.setAncestorRules(rules);
+    }
+    setForm(form, parentPath, scopePath) {
+        this._form = form;
+        this._base.setForm(form, parentPath, scopePath);
+        const myPath = this._base.qualifiedName;
+        for (const [, field] of this._children)field.setForm(form, myPath, this._childScope);
+        for (const item of this._items)for (const [, field] of item.children)field.setForm(form, myPath, this._itemScope(item.key));
+    }
+    _itemScope(key) {
+        return ()=>{
+            const index = this._items.findIndex((item)=>item.key === key);
+            return `${this._base.scopedName}.${index}`;
+        };
+    }
+    setValidation(validation) {
+        this._base.setValidation(validation);
+    }
+    setValidationWithCache(validation, value, result) {
+        this._base.setValidationWithCache(validation, value, result);
+    }
+    addBeforeChange(cb) {
+        this._base.addBeforeChange(cb);
+    }
+    addAfterChange(cb) {
+        this._base.addAfterChange(cb);
+    }
+    addAfterSetValue(cb) {
+        this._base.addAfterSetValue(cb);
+    }
+    addOnBlur(cb) {
+        this._base.addOnBlur(cb);
+    }
+    addRequiredWhen(fn, message) {
+        this._base.addRequiredWhen(fn, message);
+    }
+    setComputed(fn) {
+        this._base.setComputed(fn);
+    }
+    setComputedUntilDirty(fn) {
+        this._base.setComputedUntilDirty(fn);
+    }
+    blur() {
+        this._base.blur();
+    }
+    remove() {
+        this._base.remove();
+    }
+    get qualifiedName() {
+        return this._base.qualifiedName;
+    }
+    focus() {
+        this._base.focus();
+    }
+    requestFocus() {
+        this._base.requestFocus();
+    }
+    clearFocusRequest() {
+        this._base.clearFocusRequest();
+    }
+    getInnerLayout() {
+        if (this.isTemplated) return this._activeTemplateId ? this._templateLayouts[this._activeTemplateId] ?? null : null;
+        return this._ownLayout;
+    }
+    get isList() {
+        return this.config.isList;
+    }
+    get isTemplated() {
+        return this._isTemplated;
+    }
+    get activeTemplateId() {
+        return this._activeTemplateId;
+    }
+    get availableTemplates() {
+        const result = [];
+        for (const template of this._templates){
+            if (template.visible && this._form) {
+                if (!template.visible(this._form)) continue;
+            }
+            result.push({
+                id: template.id,
+                label: template.label,
+                description: template.description,
+                icon: template.icon
+            });
+        }
+        return result;
+    }
+    setTemplate(templateId) {
+        if (this._activeTemplateId === templateId) return;
+        this._rebuildChildrenForTemplate(templateId);
+    }
+    get templates() {
+        return {
+            add: (id, configure)=>this._addTemplate(id, configure),
+            remove: (templateId)=>this._removeTemplate(templateId)
+        };
+    }
+    _addTemplate(id, configure) {
+        if (!this.isTemplated) throw new Error(`Object field "${this.config.name}" is not templated; templates.add() requires the field to be defined with .template().`);
+        if (id === TEMPLATE_DISCRIMINATOR) throw new Error(`Template id "${TEMPLATE_DISCRIMINATOR}" is reserved. Choose a different id.`);
+        if (this._findTemplate(id)) throw new Error(`Duplicate template id "${id}".`);
+        const tb = createTemplateBuilder();
+        configure(tb);
+        const template = tb._build(id, this._form.registry);
+        this._templates.push(template);
+        if (template.layout && !this._templateLayouts[id]) this._templateLayouts[id] = template.layout;
+    }
+    _removeTemplate(templateId) {
+        if (!this.isTemplated) throw new Error(`Object field "${this.config.name}" is not templated; templates.remove() requires the field to be defined with .template().`);
+        const index = this._templates.findIndex((t)=>t.id === templateId);
+        if (-1 === index) return;
+        this._templates.splice(index, 1);
         if (this.config.isList) {
-          for (const item of this._items) {
-            item.children.delete(name);
-          }
+            this._items = this._items.filter((item)=>item.templateId !== templateId);
+            return;
         }
-        continue;
-      }
-      this.config.childBuilders[name] = builder;
-      const built = builder.build(name);
-      const newField = createFieldFromConfig(built, this._form, this.qualifiedName);
-      this._children.set(name, newField);
-      if (this.config.isList) {
-        for (const item of this._items) {
-          const itemField = createFieldFromConfig(built, this._form, this.qualifiedName);
-          item.children.set(name, itemField);
+        if (this._activeTemplateId === templateId) {
+            this._activeTemplateId = null;
+            this._children = new Map();
         }
-      }
     }
-
-    // Re-apply nested object layouts so newly-added children pick up any
-    // layout.object() entries already registered on this field.
-    if (this._ownLayout) {
-      this._applyNestedObjectLayouts(this._ownLayout, this._children);
-      for (const item of this._items) {
-        this._applyNestedObjectLayouts(this._ownLayout, item.children);
-      }
-    }
-  }
-  getListItemChild(index, name) {
-    const item = this._items[index];
-    return item?.children.get(name);
-  }
-  getData() {
-    if (this.config.isList) {
-      return this._items.map(item => this._getItemData(item));
-    }
-    if (this.isTemplated) {
-      if (this._activeTemplateId === null) {
-        return null;
-      }
-      return {
-        [TEMPLATE_DISCRIMINATOR]: this._activeTemplateId,
-        ...getChildrenData(this._children)
-      };
-    }
-    return getChildrenData(this._children);
-  }
-  getValue() {
-    return this.getData();
-  }
-  setValue(value) {
-    this.setValueSilent(value);
-  }
-  setValueSilent(value) {
-    if (this.config.isList) {
-      this._items = [];
-      if (Array.isArray(value)) {
-        for (const itemData of value) {
-          if (this.isTemplated) {
-            if (!itemData || typeof itemData !== "object") {
-              continue;
-            }
-            const data = itemData;
-            const templateId = data[TEMPLATE_DISCRIMINATOR];
-            if (typeof templateId !== "string") {
-              continue;
+    setInnerLayout(layout) {
+        if (Array.isArray(layout)) {
+            if (this.isTemplated) throw new Error(`Object field "${this.config.name}" is templated; layout.object() must pass a per-template map (Record<templateId, LayoutNode[]>), not a single LayoutNode[].`);
+            this._ownLayout = layout;
+            this._templateLayouts = {};
+            this._applyNestedObjectLayouts(layout, this._children);
+            for (const item of this._items)this._applyNestedObjectLayouts(layout, item.children);
+            return;
+        }
+        if (!this.isTemplated) throw new Error(`Object field "${this.config.name}" is not templated; layout.object() must pass a single LayoutNode[], not a per-template map.`);
+        this._templateLayouts = {
+            ...this._declaredTemplateLayouts(),
+            ...layout
+        };
+        this._ownLayout = null;
+        if (this._activeTemplateId && layout[this._activeTemplateId]) this._applyNestedObjectLayouts(layout[this._activeTemplateId], this._children);
+        for (const item of this._items)if (item.templateId && layout[item.templateId]) this._applyNestedObjectLayouts(layout[item.templateId], item.children);
+    }
+    _applyNestedObjectLayouts(layout, children) {
+        for (const node of layout)if ("object" === node.type) {
+            const child = children.get(node.fieldName);
+            if (child && isObjectField(child)) child.setInnerLayout(node.inner);
+        } else if ("tabs" === node.type) for (const tab of node.tabs)this._applyNestedObjectLayouts(tab.layout, children);
+    }
+    _innerLayoutFor(templateId) {
+        if (this.isTemplated) {
+            if (void 0 === templateId) return;
+            return this._templateLayouts[templateId];
+        }
+        return this._ownLayout ?? void 0;
+    }
+    _resolveLayoutForChildren(children, templateId) {
+        const layoutNodes = this.isTemplated ? null !== templateId ? this._templateLayouts[templateId] : void 0 : this._ownLayout ?? void 0;
+        if (layoutNodes && this._form?.resolveChildLayout) return this._form.resolveChildLayout(layoutNodes, children);
+        const fallback = [];
+        for (const [, field] of children)if (field.visible) fallback.push({
+            type: "row",
+            fields: [
+                field.vm
+            ]
+        });
+        return fallback;
+    }
+    get children() {
+        return this._children;
+    }
+    get items() {
+        return this._items.map((item)=>({
+                key: item.key,
+                children: item.children,
+                templateId: item.templateId,
+                getData: ()=>this._getItemData(item)
+            }));
+    }
+    _getItemData(item) {
+        const data = getChildrenData(item.children);
+        if (void 0 !== item.templateId) return {
+            [TEMPLATE_DISCRIMINATOR]: item.templateId,
+            ...data
+        };
+        return data;
+    }
+    _getClonedItemData(item) {
+        const data = getChildrenData(item.children);
+        const children = createChildFields(this._templateChildBuilders(item.templateId), this._form, this.qualifiedName);
+        hydrateChildren(children, data, {
+            clone: true
+        });
+        const clonedData = getChildrenData(children);
+        if (void 0 !== item.templateId) return {
+            [TEMPLATE_DISCRIMINATOR]: item.templateId,
+            ...clonedData
+        };
+        return clonedData;
+    }
+    _getClonedData() {
+        const data = getChildrenData(this._children);
+        const builders = this.isTemplated && this._activeTemplateId ? this._templateChildBuilders(this._activeTemplateId) : this.config.childBuilders;
+        const children = createChildFields(builders, this._form, this.qualifiedName);
+        hydrateChildren(children, data, {
+            clone: true
+        });
+        const clonedData = getChildrenData(children);
+        if (this.isTemplated && this._activeTemplateId) return {
+            [TEMPLATE_DISCRIMINATOR]: this._activeTemplateId,
+            ...clonedData
+        };
+        return clonedData;
+    }
+    getChild(name) {
+        return this._children.get(name);
+    }
+    fields(factory) {
+        if (this.isTemplated) throw new Error(`Object field "${this.config.name}" is templated; use templates.add()/remove() to manage children. Each template owns its own fields.`);
+        const builders = factory(this._form.registry);
+        for (const [name, builder] of Object.entries(builders)){
+            if (void 0 === builder) {
+                this._children.delete(name);
+                this.config.childBuilders[name] = void 0;
+                delete this.config.childBuilders[name];
+                if (this.config.isList) for (const item of this._items)item.children.delete(name);
+                continue;
             }
-            if (!this._findTemplate(templateId)) {
-              continue;
+            this.config.childBuilders[name] = builder;
+            const built = builder.build(name);
+            const newField = createFieldFromConfig(built, this._form, this.qualifiedName, this._childScope);
+            this._children.set(name, newField);
+            if (this.config.isList) for (const item of this._items){
+                const itemField = createFieldFromConfig(built, this._form, this.qualifiedName, this._itemScope(item.key));
+                item.children.set(name, itemField);
             }
-            const {
-              [TEMPLATE_DISCRIMINATOR]: _discarded,
-              ...rest
-            } = data;
-            this._addItemInternal(rest, templateId);
-          } else {
-            this._addItemInternal(itemData);
-          }
         }
-      }
-      return;
-    }
-    if (this.isTemplated) {
-      if (value === null || value === undefined) {
-        this._activeTemplateId = null;
-        this._children = new Map();
-        return;
-      }
-      const data = value;
-      const templateId = data[TEMPLATE_DISCRIMINATOR];
-      if (typeof templateId !== "string") {
-        return;
-      }
-      if (!this._findTemplate(templateId)) {
-        return;
-      }
-      this._rebuildChildrenForTemplate(templateId);
-      const {
-        [TEMPLATE_DISCRIMINATOR]: _discarded,
-        ...rest
-      } = data;
-      hydrateChildren(this._children, rest);
-      return;
-    }
-    hydrateChildren(this._children, value);
-  }
-  addItem(templateIdOrData, data) {
-    if (this.isTemplated) {
-      if (typeof templateIdOrData !== "string") {
-        throw new Error(`Object field "${this.config.name}": templated list items require a template id. ` + `Call addItem(templateId) with one of: ${this._templates.map(t => t.id).join(", ")}.`);
-      }
-      if (!this._findTemplate(templateIdOrData)) {
-        throw new Error(`Template "${templateIdOrData}" not found on field "${this.config.name}". ` + `Available: ${this._templates.map(t => t.id).join(", ") || "(none)"}.`);
-      }
-      this._addItemInternal(data, templateIdOrData);
-      return;
-    }
-    if (typeof templateIdOrData === "string") {
-      throw new Error(`Object field "${this.config.name}" is not templated; addItem() does not accept a template id.`);
-    }
-    this._addItemInternal(templateIdOrData);
-  }
-  removeItem(index) {
-    this._items.splice(index, 1);
-  }
-  moveItem(fromIndex, toIndex) {
-    if (fromIndex < 0 || fromIndex >= this._items.length || toIndex < 0 || toIndex >= this._items.length || fromIndex === toIndex) {
-      return;
-    }
-    const [item] = this._items.splice(fromIndex, 1);
-    this._items.splice(toIndex, 0, item);
-  }
-  duplicateItem(index) {
-    const source = this._items[index];
-    if (!source) {
-      return;
-    }
-    const data = getChildrenData(source.children);
-    const children = createChildFields(this._templateChildBuilders(source.templateId), this._form, this.qualifiedName);
-    hydrateChildren(children, data, {
-      clone: true
-    });
-    const key = `item_${++itemKeyCounter}`;
-    this._items.splice(index + 1, 0, {
-      key,
-      children,
-      templateId: source.templateId
-    });
-    const inner = this._innerLayoutFor(source.templateId);
-    if (inner) {
-      this._applyNestedObjectLayouts(inner, children);
-    }
-  }
-  _templateChildBuilders(templateId) {
-    if (templateId === undefined) {
-      return this.config.childBuilders;
-    }
-    const template = this._findTemplate(templateId);
-    if (!template) {
-      throw new Error(`Template "${templateId}" not found on field "${this.config.name}".`);
-    }
-    return template.childBuilders;
-  }
-  _addItemInternal(data, templateId) {
-    const children = createChildFields(this._templateChildBuilders(templateId), this._form, this.qualifiedName);
-    if (data) {
-      hydrateChildren(children, data);
-    }
-    const key = `item_${++itemKeyCounter}`;
-    this._items.push({
-      key,
-      children,
-      templateId
-    });
-    const inner = this._innerLayoutFor(templateId);
-    if (inner) {
-      this._applyNestedObjectLayouts(inner, children);
-    }
-  }
-  resetValidation() {
-    this._base.resetValidation();
-    for (const [, field] of this._children) {
-      field.resetValidation();
-    }
-    for (const item of this._items) {
-      for (const [, field] of item.children) {
-        field.resetValidation();
-      }
-    }
-  }
-  as(type) {
-    if (type !== "object") {
-      throw new Error(`Field "${this.config.name}" is type "object", not "${type}".`);
-    }
-    return this;
-  }
-  get vm() {
-    const baseVm = this._base.vm;
-    return {
-      name: baseVm.name,
-      type: "object",
-      label: baseVm.label,
-      help: baseVm.help,
-      description: baseVm.description,
-      note: baseVm.note,
-      placeholder: baseVm.placeholder,
-      value: this.getValue(),
-      validation: baseVm.validation,
-      validating: this._validating,
-      required: baseVm.required,
-      visible: baseVm.visible,
-      disabled: baseVm.disabled,
-      renderer: baseVm.renderer,
-      rendererSettings: baseVm.rendererSettings,
-      onChange: value => this.setValue(value),
-      onBlur: () => {
-        if (this._form?.submitted) {
-          void this.validate();
+        if (this._ownLayout) {
+            this._applyNestedObjectLayouts(this._ownLayout, this._children);
+            for (const item of this._items)this._applyNestedObjectLayouts(this._ownLayout, item.children);
         }
-        this.blur();
-      },
-      focusRequested: baseVm.focusRequested,
-      clearFocusRequest: baseVm.clearFocusRequest,
-      isList: this.config.isList,
-      fields: this.config.isList ? [] : Array.from(this._children.values()).filter(f => f.visible).map(f => f.vm),
-      layout: this.config.isList ? [] : this._resolveLayoutForChildren(this._children, this._activeTemplateId),
-      items: this.config.isList ? this._items.map((item, index) => ({
-        key: item.key,
-        fields: Array.from(item.children.values()).filter(f => f.visible).map(f => f.vm),
-        layout: this._resolveLayoutForChildren(item.children, item.templateId ?? null),
-        templateId: item.templateId,
-        remove: () => this.removeItem(index),
-        moveUp: () => this.moveItem(index, index - 1),
-        moveDown: () => this.moveItem(index, index + 1),
-        duplicate: () => this.duplicateItem(index)
-      })) : [],
-      addItem: value => {
-        return value !== undefined ? this.addItem(value) : this.addItem();
-      },
-      removeItem: index => this.removeItem(index),
-      moveItem: (from, to) => this.moveItem(from, to),
-      duplicateItem: index => this.duplicateItem(index),
-      isTemplated: this.isTemplated,
-      availableTemplates: this.availableTemplates,
-      activeTemplateId: this._activeTemplateId,
-      setTemplate: templateId => this.setTemplate(templateId)
-    };
-  }
-  get hasErrors() {
-    const checkChildren = children => {
-      for (const [, field] of children) {
-        if (field.vm.validation.isValid === false) {
-          return true;
+    }
+    getListItemChild(index, name) {
+        const item = this._items[index];
+        return item?.children.get(name);
+    }
+    getData() {
+        if (this.config.isList) return this._items.map((item)=>this._getItemData(item));
+        if (this.isTemplated) {
+            if (null === this._activeTemplateId) return null;
+            return {
+                [TEMPLATE_DISCRIMINATOR]: this._activeTemplateId,
+                ...getChildrenData(this._children)
+            };
         }
-        if (isObjectField(field) && field.hasErrors) {
-          return true;
+        return getChildrenData(this._children);
+    }
+    getValue() {
+        return this.getData();
+    }
+    setValue(value) {
+        this.setValueSilent(value);
+    }
+    setValueSilent(value) {
+        if (this.config.isList) {
+            this._items = [];
+            if (Array.isArray(value)) for (const itemData of value)if (this.isTemplated) {
+                if (!itemData || "object" != typeof itemData) continue;
+                const data = itemData;
+                const templateId = data[TEMPLATE_DISCRIMINATOR];
+                if ("string" != typeof templateId) continue;
+                if (!this._findTemplate(templateId)) continue;
+                const { [TEMPLATE_DISCRIMINATOR]: _discarded, ...rest } = data;
+                this._addItemInternal(rest, templateId);
+            } else this._addItemInternal(itemData);
+            return;
         }
-      }
-      return false;
-    };
-    if (this.config.isList) {
-      for (const item of this._items) {
-        if (checkChildren(item.children)) {
-          return true;
+        if (this.isTemplated) {
+            if (null == value) {
+                this._activeTemplateId = null;
+                this._children = new Map();
+                return;
+            }
+            const data = value;
+            const templateId = data[TEMPLATE_DISCRIMINATOR];
+            if ("string" != typeof templateId) return;
+            if (!this._findTemplate(templateId)) return;
+            this._rebuildChildrenForTemplate(templateId);
+            const { [TEMPLATE_DISCRIMINATOR]: _discarded, ...rest } = data;
+            hydrateChildren(this._children, rest);
+            return;
         }
-      }
-    } else {
-      if (checkChildren(this._children)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  async validate(options) {
-    if (!this.visible) {
-      this.setValidation({
-        isValid: null
-      });
-      return true;
-    }
-    runInAction(() => {
-      this._validating = true;
-    });
-    try {
-      const requiredState = this._base.resolveRequired();
-      if (requiredState.required) {
-        const message = requiredState.message || "This field is required.";
-        if (this.config.isList && this._items.length === 0) {
-          this.setValidation({
-            isValid: false,
-            message
-          });
-          return false;
+        hydrateChildren(this._children, value);
+    }
+    addItem(templateIdOrData, data) {
+        if (this.isTemplated) {
+            if ("string" != typeof templateIdOrData) throw new Error(`Object field "${this.config.name}": templated list items require a template id. Call addItem(templateId) with one of: ${this._templates.map((t)=>t.id).join(", ")}.`);
+            if (!this._findTemplate(templateIdOrData)) throw new Error(`Template "${templateIdOrData}" not found on field "${this.config.name}". Available: ${this._templates.map((t)=>t.id).join(", ") || "(none)"}.`);
+            this._addItemInternal(data, templateIdOrData);
+            return;
         }
-        if (!this.config.isList) {
-          if (this.isTemplated) {
-            if (this._activeTemplateId === null) {
-              this.setValidation({
-                isValid: false,
-                message
-              });
-              return false;
-            }
-          } else {
-            const data = this.getData();
-            const hasAnyValue = Object.values(data).some(v => v !== null && v !== undefined && v !== "");
-            if (!hasAnyValue) {
-              this.setValidation({
-                isValid: false,
-                message
-              });
-              return false;
+        if ("string" == typeof templateIdOrData) throw new Error(`Object field "${this.config.name}" is not templated; addItem() does not accept a template id.`);
+        this._addItemInternal(templateIdOrData);
+    }
+    removeItem(index) {
+        this._items.splice(index, 1);
+    }
+    moveItem(fromIndex, toIndex) {
+        if (fromIndex < 0 || fromIndex >= this._items.length || toIndex < 0 || toIndex >= this._items.length || fromIndex === toIndex) return;
+        const [item] = this._items.splice(fromIndex, 1);
+        this._items.splice(toIndex, 0, item);
+    }
+    duplicateItem(index) {
+        const source = this._items[index];
+        if (!source) return;
+        const data = getChildrenData(source.children);
+        const key = `item_${++itemKeyCounter}`;
+        const children = createChildFields(this._templateChildBuilders(source.templateId), this._form, this.qualifiedName, this._itemScope(key));
+        hydrateChildren(children, data, {
+            clone: true
+        });
+        this._items.splice(index + 1, 0, {
+            key,
+            children,
+            templateId: source.templateId
+        });
+        const inner = this._innerLayoutFor(source.templateId);
+        if (inner) this._applyNestedObjectLayouts(inner, children);
+    }
+    _templateChildBuilders(templateId) {
+        if (void 0 === templateId) return this.config.childBuilders;
+        const template = this._findTemplate(templateId);
+        if (!template) throw new Error(`Template "${templateId}" not found on field "${this.config.name}".`);
+        return template.childBuilders;
+    }
+    _addItemInternal(data, templateId) {
+        const key = `item_${++itemKeyCounter}`;
+        const children = createChildFields(this._templateChildBuilders(templateId), this._form, this.qualifiedName, this._itemScope(key));
+        if (data) hydrateChildren(children, data);
+        this._items.push({
+            key,
+            children,
+            templateId
+        });
+        const inner = this._innerLayoutFor(templateId);
+        if (inner) this._applyNestedObjectLayouts(inner, children);
+    }
+    resetValidation() {
+        this._base.resetValidation();
+        for (const [, field] of this._children)field.resetValidation();
+        for (const item of this._items)for (const [, field] of item.children)field.resetValidation();
+    }
+    as(type) {
+        if ("object" !== type) throw new Error(`Field "${this.config.name}" is type "object", not "${type}".`);
+        return this;
+    }
+    get vm() {
+        const baseVm = this._base.vm;
+        return {
+            name: baseVm.name,
+            type: "object",
+            label: baseVm.label,
+            help: baseVm.help,
+            description: baseVm.description,
+            note: baseVm.note,
+            placeholder: baseVm.placeholder,
+            value: this.getValue(),
+            validation: baseVm.validation,
+            validating: this._validating,
+            required: baseVm.required,
+            visible: baseVm.visible,
+            disabled: baseVm.disabled,
+            renderer: baseVm.renderer,
+            rendererSettings: baseVm.rendererSettings,
+            context: baseVm.context,
+            onChange: (value)=>this.setValue(value),
+            onBlur: ()=>{
+                if (this._form?.submitted) this.validate();
+                this.blur();
+            },
+            focusRequested: baseVm.focusRequested,
+            clearFocusRequest: baseVm.clearFocusRequest,
+            isList: this.config.isList,
+            fields: this.config.isList ? [] : Array.from(this._children.values()).filter((f)=>f.visible).map((f)=>f.vm),
+            layout: this.config.isList ? [] : this._resolveLayoutForChildren(this._children, this._activeTemplateId),
+            items: this.config.isList ? this._items.map((item, index)=>({
+                    key: item.key,
+                    fields: Array.from(item.children.values()).filter((f)=>f.visible).map((f)=>f.vm),
+                    layout: this._resolveLayoutForChildren(item.children, item.templateId ?? null),
+                    templateId: item.templateId,
+                    remove: ()=>this.removeItem(index),
+                    moveUp: ()=>this.moveItem(index, index - 1),
+                    moveDown: ()=>this.moveItem(index, index + 1),
+                    duplicate: ()=>this.duplicateItem(index),
+                    getClonedData: ()=>this._getClonedItemData(item)
+                })) : [],
+            addItem: (value)=>{
+                if (void 0 === value) return this.addItem();
+                if ("string" == typeof value) return this.addItem(value);
+                const data = value;
+                const templateId = data[TEMPLATE_DISCRIMINATOR];
+                if ("string" == typeof templateId) {
+                    const { [TEMPLATE_DISCRIMINATOR]: _, ...rest } = data;
+                    return this.addItem(templateId, rest);
+                }
+                return this.addItem(value);
+            },
+            removeItem: (index)=>this.removeItem(index),
+            moveItem: (from, to)=>this.moveItem(from, to),
+            duplicateItem: (index)=>this.duplicateItem(index),
+            isTemplated: this.isTemplated,
+            availableTemplates: this.availableTemplates,
+            activeTemplateId: this._activeTemplateId,
+            setTemplate: (templateId)=>this.setTemplate(templateId),
+            getClonedData: ()=>this._getClonedData()
+        };
+    }
+    get hasErrors() {
+        const checkChildren = (children)=>{
+            for (const [, field] of children){
+                if (false === field.vm.validation.isValid) return true;
+                if (isObjectField(field) && field.hasErrors) return true;
             }
-          }
-        }
-      }
-      if (this.config.isList && this.config.listSchema) {
-        const listData = this.getData();
-        const result = await this.config.listSchema.safeParseAsync(listData);
-        if (!result.success) {
-          const firstIssue = result.error.issues[0];
-          runInAction(() => {
+            return false;
+        };
+        if (this.config.isList) {
+            for (const item of this._items)if (checkChildren(item.children)) return true;
+        } else if (checkChildren(this._children)) return true;
+        return false;
+    }
+    async validate(options) {
+        if (!this.visible) {
             this.setValidation({
-              isValid: false,
-              message: firstIssue?.message || "Invalid value."
+                isValid: null
             });
-          });
-          return false;
+            return true;
         }
-      }
-      if (this.config.schema) {
-        const data = this.getData();
-        const result = await this.config.schema.safeParseAsync(data);
-        if (!result.success) {
-          const firstIssue = result.error.issues[0];
-          runInAction(() => {
-            this.setValidation({
-              isValid: false,
-              message: firstIssue?.message || "Invalid value."
+        runInAction(()=>{
+            this._validating = true;
+        });
+        try {
+            const requiredState = this._base.resolveRequired();
+            if (requiredState.required) {
+                const message = requiredState.message || "This field is required.";
+                if (this.config.isList && 0 === this._items.length) {
+                    this.setValidation({
+                        isValid: false,
+                        message
+                    });
+                    return false;
+                }
+                if (!this.config.isList) if (this.isTemplated) {
+                    if (null === this._activeTemplateId) {
+                        this.setValidation({
+                            isValid: false,
+                            message
+                        });
+                        return false;
+                    }
+                } else {
+                    const data = this.getData();
+                    const hasAnyValue = Object.values(data).some((v)=>null != v && "" !== v);
+                    if (!hasAnyValue) {
+                        this.setValidation({
+                            isValid: false,
+                            message
+                        });
+                        return false;
+                    }
+                }
+            }
+            if (this.config.isList && this.config.listSchema) {
+                const listData = this.getData();
+                if (!requiredState.required && (null == listData || Array.isArray(listData) && 0 === listData.length)) {
+                    this.setValidationWithCache({
+                        isValid: null
+                    }, listData, true);
+                    return true;
+                }
+                const result = await this.config.listSchema.safeParseAsync(listData);
+                if (!result.success) {
+                    const firstIssue = result.error.issues[0];
+                    runInAction(()=>{
+                        this.setValidation({
+                            isValid: false,
+                            message: firstIssue?.message || "Invalid value."
+                        });
+                    });
+                    return false;
+                }
+            }
+            if (this.config.schema) {
+                const data = this.getData();
+                if (!requiredState.required) {
+                    if (null == data) {
+                        this.setValidationWithCache({
+                            isValid: null
+                        }, data, true);
+                        return true;
+                    }
+                    const hasAnyValue = Object.values(data).some((v)=>null != v && "" !== v);
+                    if (!hasAnyValue) {
+                        this.setValidationWithCache({
+                            isValid: null
+                        }, data, true);
+                        return true;
+                    }
+                }
+                const result = await this.config.schema.safeParseAsync(data);
+                if (!result.success) {
+                    const firstIssue = result.error.issues[0];
+                    runInAction(()=>{
+                        this.setValidation({
+                            isValid: false,
+                            message: firstIssue?.message || "Invalid value."
+                        });
+                    });
+                    return false;
+                }
+            }
+            let allValid = true;
+            if (this.config.isList) for (const item of this._items){
+                const valid = await validateChildren(item.children, options);
+                if (!valid) allValid = false;
+            }
+            else allValid = await validateChildren(this._children, options);
+            runInAction(()=>{
+                this.setValidation({
+                    isValid: allValid
+                });
+            });
+            return allValid;
+        } finally{
+            runInAction(()=>{
+                this._validating = false;
             });
-          });
-          return false;
-        }
-      }
-      let allValid = true;
-      if (this.config.isList) {
-        for (const item of this._items) {
-          const valid = await validateChildren(item.children, options);
-          if (!valid) {
-            allValid = false;
-          }
         }
-      } else {
-        allValid = await validateChildren(this._children, options);
-      }
-      runInAction(() => {
-        this.setValidation({
-          isValid: allValid
-        });
-      });
-      return allValid;
-    } finally {
-      runInAction(() => {
-        this._validating = false;
-      });
     }
-  }
 }
+export { ObjectField, TEMPLATE_DISCRIMINATOR, isObjectField };
 
 //# sourceMappingURL=ObjectField.js.map