@dmitryvim/form-builder 0.3.1 → 0.3.3

package/dist/esm/index.js

@@ -484,6 +484,20 @@ function applyAutoExpand(textarea) {
   setTimeout(() => {
     if (textarea.isConnected) resize();
   }, 0);
+  if (typeof ResizeObserver === "undefined") return;
+  let lastWidth = -1;
+  const ro = new ResizeObserver((entries) => {
+    if (!textarea.isConnected) {
+      ro.disconnect();
+      return;
+    }
+    const entry = entries[0];
+    const w = entry?.contentBoxSize?.[0]?.inlineSize ?? entry?.contentRect?.width ?? 0;
+    if (w === lastWidth) return;
+    lastWidth = w;
+    resize();
+  });
+  ro.observe(textarea);
 }
 function applySingleLineMode(textarea) {
   textarea.addEventListener("keydown", (e) => {
@@ -6711,6 +6725,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     formData: ctx.formData ?? ctx.prefill,
     // Complete root data for enableIf evaluation
     state: ctx.state,
+    instance: ctx.instance,
     inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
@@ -6797,6 +6812,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     const currentFormData = state.formRoot ? extractRootFormData(state.formRoot) : {};
     const subCtx = {
       state: ctx.state,
+      instance: ctx.instance,
       path: pathJoin(ctx.path, `${element.key}[${idx}]`),
       prefill: childDefaults,
       // Defaults for enableIf evaluation
@@ -6862,6 +6878,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const mergedPrefill = mergeWithDefaults(prefillObj || {}, childDefaults);
       const subCtx = {
         state: ctx.state,
+        instance: ctx.instance,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: mergedPrefill,
         // Merged prefill with defaults for enableIf
@@ -6908,6 +6925,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const idx = countItems();
       const subCtx = {
         state: ctx.state,
+        instance: ctx.instance,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: childDefaults,
         // Defaults for enableIf evaluation
@@ -8550,6 +8568,20 @@ function applyAutoExpand2(textarea, backdrop) {
   setTimeout(() => {
     if (textarea.isConnected) resize();
   }, 0);
+  if (typeof ResizeObserver === "undefined") return;
+  let lastWidth = -1;
+  const ro = new ResizeObserver((entries) => {
+    if (!textarea.isConnected) {
+      ro.disconnect();
+      return;
+    }
+    const entry = entries[0];
+    const w = entry?.contentBoxSize?.[0]?.inlineSize ?? entry?.contentRect?.width ?? 0;
+    if (w === lastWidth) return;
+    lastWidth = w;
+    resize();
+  });
+  ro.observe(textarea);
 }
 function buildFileLabels(files, state) {
   const labels = /* @__PURE__ */ new Map();
@@ -10315,6 +10347,33 @@ function extractDOMValue(fieldPath, formRoot) {
   }
   return void 0;
 }
+function buildScopedDataAtPath(path, value) {
+  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
+  if (!segments || segments.length === 0) {
+    return {};
+  }
+  const root = {};
+  let current = root;
+  for (let i = 0; i < segments.length - 1; i++) {
+    const seg = segments[i];
+    const next = segments[i + 1];
+    const placeholder = next.startsWith("[") && next.endsWith("]") ? [] : {};
+    if (seg.startsWith("[") && seg.endsWith("]")) {
+      const idx = parseInt(seg.slice(1, -1), 10);
+      current[idx] = placeholder;
+    } else {
+      current[seg] = placeholder;
+    }
+    current = placeholder;
+  }
+  const last = segments[segments.length - 1];
+  if (last.startsWith("[") && last.endsWith("]")) {
+    current[parseInt(last.slice(1, -1), 10)] = value;
+  } else {
+    current[last] = value;
+  }
+  return root;
+}
 function reevaluateEnableIf(wrapper, element, ctx) {
   if (!element.enableIf) {
     return;
@@ -10326,54 +10385,13 @@ function reevaluateEnableIf(wrapper, element, ctx) {
   }
   const condition = element.enableIf;
   const scope = condition.scope ?? "relative";
-  let rootFormData = {};
-  const containerData = {};
   const effectiveScope = !ctx.path || ctx.path === "" ? "absolute" : scope;
-  if (effectiveScope === "relative" && ctx.path) {
-    const containerMatch = ctx.path.match(/^(.+)\[(\d+)\]$/);
-    if (containerMatch) {
-      const containerKey = containerMatch[1];
-      const containerIndex = parseInt(containerMatch[2], 10);
-      const containerItemElement = formRoot.querySelector(
-        `[data-container-item="${containerKey}[${containerIndex}]"]`
-      );
-      if (containerItemElement) {
-        const inputs = containerItemElement.querySelectorAll("input, select, textarea");
-        inputs.forEach((input) => {
-          const fieldName = input.getAttribute("name");
-          if (fieldName) {
-            const fieldKeyMatch = fieldName.match(/\.([^.[\]]+)$/);
-            if (fieldKeyMatch) {
-              const fieldKey = fieldKeyMatch[1];
-              if (input instanceof HTMLSelectElement) {
-                containerData[fieldKey] = input.value;
-              } else if (input instanceof HTMLInputElement) {
-                if (input.type === "checkbox") {
-                  containerData[fieldKey] = input.checked;
-                } else if (input.type === "radio") {
-                  if (input.checked) {
-                    containerData[fieldKey] = input.value;
-                  }
-                } else {
-                  containerData[fieldKey] = input.value;
-                }
-              } else if (input instanceof HTMLTextAreaElement) {
-                containerData[fieldKey] = input.value;
-              }
-            }
-          }
-        });
-      }
-    }
-  } else {
-    const dependencyKey = condition.key;
-    const dependencyValue = extractDOMValue(dependencyKey, formRoot);
-    if (dependencyValue !== void 0) {
-      rootFormData[dependencyKey] = dependencyValue;
-    } else {
-      rootFormData = ctx.formData ?? ctx.prefill;
-    }
-  }
+  const dependencyKey = condition.key;
+  const dependencyFieldPath = effectiveScope === "relative" && ctx.path ? `${ctx.path}.${dependencyKey}` : dependencyKey;
+  const dependencyValue = extractDOMValue(dependencyFieldPath, formRoot);
+  const scopedData = buildScopedDataAtPath(dependencyKey, dependencyValue);
+  const rootFormData = effectiveScope === "relative" ? {} : scopedData;
+  const containerData = effectiveScope === "relative" ? scopedData : void 0;
   try {
     const shouldEnable = evaluateEnableCondition(
       condition,
@@ -10426,8 +10444,10 @@ function setupEnableIfListeners(wrapper, element, ctx) {
           reevaluateEnableIf(wrapper, element, ctx);
         });
         observer.disconnect();
+        ctx.state.enableIfObservers.delete(observer);
       }
     });
+    ctx.state.enableIfObservers.add(observer);
     observer.observe(formRoot, {
       childList: true,
       subtree: true
@@ -10824,7 +10844,8 @@ function createInstanceState(config) {
     debounceTimer: null,
     prefill: {},
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
-    syntheticElementIdCounter: 0
+    syntheticElementIdCounter: 0,
+    enableIfObservers: /* @__PURE__ */ new Set()
   };
 }
 function generateInstanceId() {
@@ -11506,6 +11527,7 @@ var FormBuilderInstance = class {
       console.error("Schema validation errors:", errors);
       return;
     }
+    this.disconnectEnableIfObservers();
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
@@ -11936,6 +11958,7 @@ var FormBuilderInstance = class {
       clearTimeout(this.state.debounceTimer);
       this.state.debounceTimer = null;
     }
+    this.disconnectEnableIfObservers();
     this.state.resourceIndex.clear();
     if (this.state.formRoot) {
       clear(this.state.formRoot);
@@ -11947,6 +11970,12 @@ var FormBuilderInstance = class {
       globalThis.__formBuilderInstances?.delete(this.instanceId);
     }
   }
+  disconnectEnableIfObservers() {
+    for (const observer of this.state.enableIfObservers) {
+      observer.disconnect();
+    }
+    this.state.enableIfObservers.clear();
+  }
 };
 
 // src/index.ts