@dmitryvim/form-builder 0.5.3 → 0.5.4

package/dist/esm/index.js

@@ -23,9 +23,7 @@ function isPlainObject(obj) {
   return obj && typeof obj === "object" && obj.constructor === Object;
 }
 function escapeHtml(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function getElementLookupKey(element, state) {
   if (element.key) {
@@ -61,7 +59,7 @@ function formatFileSize(bytes) {
 }
 function serializeHiddenValue(value) {
   if (value === null || value === void 0) return "";
-  return typeof value === "object" ? JSON.stringify(value) : String(value);
+  return JSON.stringify(value);
 }
 function deserializeHiddenValue(raw) {
   if (raw === "") return null;
@@ -317,6 +315,14 @@ function validateSchema(schema) {
         errors.push(`${elementPath}: missing key`);
       }
       validateCountBounds(element, elementPath, errors);
+      if (element.type === "number" && "decimals" in element) {
+        const decimals = element.decimals;
+        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
+          errors.push(
+            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
+          );
+        }
+      }
       if (element.type === "markdown") {
         const content = element.content;
         if (typeof content !== "string") {
@@ -943,7 +949,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     overflow-wrap: anywhere;
   `;
   textInput.name = pathKey;
-  textInput.placeholder = element.placeholder ?? "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
+  textInput.placeholder = element.placeholder ?? t("placeholderText", state);
   textInput.value = ctx.prefill[element.key] || element.default || "";
   textInput.readOnly = readonly;
   applySingleLineMode(textInput);
@@ -1055,6 +1061,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         updateIndices();
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       };
       chip.appendChild(rem);
     }
@@ -1079,6 +1086,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         addChip(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1192,7 +1200,7 @@ function validateTextElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = input?.value ?? "";
     if (!skipValidation && element.required && val === "") {
       const msg = t("required", context.state);
@@ -1362,6 +1370,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1381,6 +1390,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         addTextareaItem(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1672,6 +1682,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1691,6 +1702,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
         addNumberItem(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1779,8 +1791,7 @@ function validateNumberElement(element, key, context) {
         return;
       }
       validateNumberInput(input, v, `${key}[${index}]`);
-      const d = Number.isInteger(element.decimals ?? 0) ? element.decimals ?? 0 : 0;
-      values.push(Number(v.toFixed(d)));
+      values.push(applyDecimals(v, element.decimals));
     });
     if (!skipValidation) {
       const { state } = context;
@@ -1799,7 +1810,7 @@ function validateNumberElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const raw = input?.value ?? "";
     const { state } = context;
     if (!skipValidation && element.required && raw === "") {
@@ -1820,10 +1831,13 @@ function validateNumberElement(element, key, context) {
       return { value: null, errors };
     }
     validateNumberInput(input, v, key);
-    const d = Number.isInteger(element.decimals ?? 0) ? element.decimals ?? 0 : 0;
-    return { value: Number(v.toFixed(d)), errors };
+    return { value: applyDecimals(v, element.decimals), errors };
   }
 }
+function applyDecimals(v, decimals) {
+  if (!Number.isInteger(decimals) || decimals < 0) return v;
+  return Number(v.toFixed(decimals));
+}
 function updateNumberField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
   if (element.multiple) {
@@ -1976,6 +1990,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1996,6 +2011,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
         addSelectItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2081,7 +2097,7 @@ function validateSelectElement(element, key, context) {
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
-      `[name$="${key}"]`
+      `[name="${key}"]`
     );
     const val = input?.value ?? "";
     if (!skipValidation && element.required && val === "") {
@@ -2413,6 +2429,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -2433,6 +2450,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
         addSwitcherItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2527,7 +2545,7 @@ function validateSwitcherElement(element, key, context) {
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
-      `input[type="hidden"][name$="${key}"]`
+      `input[type="hidden"][name="${key}"]`
     );
     const val = input?.value ?? "";
     if (!skipValidation && element.required && val === "") {
@@ -5569,7 +5587,7 @@ function validateSingleFile(element, key, context) {
   const { scopeRoot, skipValidation, state } = context;
   const errors = [];
   const input = scopeRoot.querySelector(
-    `input[name$="${key}"][type="hidden"]`
+    `input[name="${key}"][type="hidden"]`
   );
   const rid = input?.value ?? "";
   if (!skipValidation && element.required && rid === "") {
@@ -6001,6 +6019,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6021,6 +6040,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
         addColourItem(defaultColour);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6457,6 +6477,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6476,6 +6497,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
         addSliderItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6743,6 +6765,8 @@ function extractRootFormData(formRoot) {
           if (input.checked) {
             data[fieldName] = input.value;
           }
+        } else if (input.dataset.hiddenField) {
+          data[fieldName] = deserializeHiddenValue(input.value);
         } else {
           data[fieldName] = input.value;
         }
@@ -6861,7 +6885,7 @@ function mountRemoveButton(item, onRemove, state, containerLabel) {
   item.classList.add("fb-row-removable");
   item.insertBefore(rem, item.firstChild);
 }
-function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+function renderMultipleContainerElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const containerIsReadonly = isElementReadonly(element, state, ctx);
   const childInheritedReadonly = containerIsReadonly || ctx.inheritedReadonly;
@@ -6894,6 +6918,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     if (countItems() <= min) return;
     item.remove();
     updateAddButton();
+    ctx.instance?.triggerOnChange(pathKey);
   };
   const createContainerItem = (idx, rowPrefill, formData) => {
     const subCtx = {
@@ -6950,6 +6975,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     }
     updateAddButton();
+    ctx.instance?.triggerOnChange(pathKey);
   };
   let slideAddTile = null;
   let slideAddUpdate = null;
@@ -7243,7 +7269,7 @@ function renderGroupElement(element, ctx, wrapper, pathKey) {
     maxCount: element.repeat?.max
   };
   if (containerElement.multiple) {
-    renderMultipleContainerElement(containerElement, ctx, wrapper);
+    renderMultipleContainerElement(containerElement, ctx, wrapper, pathKey);
   } else {
     renderSingleContainerElement(containerElement, ctx, wrapper, pathKey);
   }
@@ -10240,15 +10266,19 @@ var componentRegistry = {
 function getComponentOperations(elementType) {
   return componentRegistry[elementType] || null;
 }
+function resolveOperations(element) {
+  const isHiddenField = element.type !== "markdown" && (element.type === "hidden" || Boolean(element.hidden));
+  return isHiddenField ? componentRegistry.hidden : getComponentOperations(element.type);
+}
 function validateElementWithComponent(element, key, context) {
-  const ops = getComponentOperations(element.type);
+  const ops = resolveOperations(element);
   if (ops && ops.validate) {
     return ops.validate(element, key, context);
   }
   return null;
 }
 function updateElementWithComponent(element, fieldPath, value, context) {
-  const ops = getComponentOperations(element.type);
+  const ops = resolveOperations(element);
   if (ops && ops.update) {
     ops.update(element, fieldPath, value, context);
     return true;
@@ -10260,6 +10290,10 @@ function updateElementWithComponent(element, fieldPath, value, context) {
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
   if (!tooltip) return;
+  if (!button.isConnected) {
+    tooltip.remove();
+    return;
+  }
   const isCurrentlyVisible = !tooltip.classList.contains("hidden");
   document.querySelectorAll('[id^="tooltip-"]').forEach((t2) => {
     t2.classList.add("hidden");
@@ -10349,6 +10383,8 @@ function extractDOMValue(fieldPath, formRoot) {
         `[name="${fieldPath}"]:checked`
       );
       return checked ? checked.value : void 0;
+    } else if (input.dataset.hiddenField) {
+      return deserializeHiddenValue(input.value);
     } else {
       return input.value;
     }
@@ -10484,7 +10520,7 @@ function createFieldLabel(element) {
   }
   return title;
 }
-function createInfoButton(element) {
+function createInfoButton(element, state) {
   const infoBtn = document.createElement("button");
   infoBtn.type = "button";
   infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
@@ -10496,6 +10532,7 @@ function createInfoButton(element) {
   tooltip.style.position = "fixed";
   tooltip.textContent = element.description || element.hint || "Field information";
   document.body.appendChild(tooltip);
+  state.tooltipElements.add(tooltip);
   infoBtn.onclick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10503,7 +10540,7 @@ function createInfoButton(element) {
   };
   return infoBtn;
 }
-function createLabelContainer(element) {
+function createLabelContainer(element, state) {
   const label = document.createElement("div");
   label.className = "flex items-center";
   label.style.marginBottom = "var(--fb-label-margin-bottom, 2px)";
@@ -10511,7 +10548,7 @@ function createLabelContainer(element) {
   const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
-    const infoBtn = createInfoButton(element);
+    const infoBtn = createInfoButton(element, state);
     label.appendChild(infoBtn);
   }
   return label;
@@ -10586,7 +10623,7 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
       break;
     case "container":
       if (isMultiple) {
-        renderMultipleContainerElement(element, ctx, wrapper);
+        renderMultipleContainerElement(element, ctx, wrapper, pathKey);
       } else {
         renderSingleContainerElement(element, ctx, wrapper, pathKey);
       }
@@ -10639,7 +10676,7 @@ function renderElement2(element, ctx) {
   wrapper.setAttribute("data-fb-width", element.width || "full");
   const ops = getComponentOperations(element.type);
   if (!ops?.ownsLabel) {
-    const label = createLabelContainer(element);
+    const label = createLabelContainer(element, ctx.state);
     wrapper.appendChild(label);
   }
   const pathKey = pathJoin(ctx.path, element.key);
@@ -10857,7 +10894,8 @@ function createInstanceState(config) {
     prefill: {},
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
     syntheticElementIdCounter: 0,
-    enableIfObservers: /* @__PURE__ */ new Set()
+    enableIfObservers: /* @__PURE__ */ new Set(),
+    tooltipElements: /* @__PURE__ */ new Set()
   };
 }
 function generateInstanceId() {
@@ -11237,7 +11275,11 @@ var FormBuilderInstance = class {
   /**
    * Trigger onChange callbacks with debouncing
    * @param fieldPath - Optional field path for field-specific change events
-   * @param fieldValue - Optional field value for field-specific change events
+   * @param fieldValue - Optional field value for field-specific change events.
+   *   When omitted while fieldPath is given, the value is read from the
+   *   freshly extracted form data at debounce time — used by structural
+   *   changes (multi-item add/remove), where the handler has no cheap
+   *   current value but the array is trivially derivable after the fact.
    */
   triggerOnChange(fieldPath, fieldValue) {
     if (this.state.config.readonly) return;
@@ -11250,12 +11292,49 @@ var FormBuilderInstance = class {
       if (this.state.config.onChange) {
         this.state.config.onChange(formData);
       }
-      if (this.state.config.onFieldChange && fieldPath !== void 0 && fieldValue !== void 0) {
-        this.state.config.onFieldChange(fieldPath, fieldValue, formData);
+      if (this.state.config.onFieldChange && fieldPath !== void 0) {
+        const resolvedValue = fieldValue !== void 0 ? fieldValue : this.resolveDomPathValue(formData.data, fieldPath);
+        this.state.config.onFieldChange(fieldPath, resolvedValue, formData);
       }
       this.state.debounceTimer = null;
     }, this.state.config.debounceMs);
   }
+  /**
+   * Resolve a DOM field path against the extracted form data.
+   *
+   * A plain getValueByPath is wrong for paths inside a multiple container:
+   * row markers keep gaps after a deletion (`s[2]` may be the first surviving
+   * row) while the extracted array is re-packed contiguously — the naive
+   * lookup would read a different row, or nothing. Each `[N]` segment is
+   * mapped from its marker to the row's position among the container's
+   * rendered rows, the same DOM order extraction used to build the array.
+   * A bracketed segment that is not a container marker (a multi-value leaf
+   * like `tags[1]`, whose indices are contiguous) falls back to the index.
+   */
+  resolveDomPathValue(data, domPath) {
+    let cur = data;
+    let domPrefix = "";
+    for (const seg of domPath.split(".")) {
+      if (cur === null || cur === void 0) return void 0;
+      const marker = seg.match(/^(.+)\[(\d+)\]$/);
+      if (!marker) {
+        domPrefix = domPrefix ? `${domPrefix}.${seg}` : seg;
+        cur = cur[seg];
+        continue;
+      }
+      const key = marker[1];
+      domPrefix = domPrefix ? `${domPrefix}.${key}` : key;
+      const arr = cur[key];
+      if (!Array.isArray(arr)) return void 0;
+      const rows = this.state.formRoot ? findDirectContainerRows(this.state.formRoot, domPrefix) : [];
+      domPrefix = `${domPrefix}[${marker[2]}]`;
+      const pos = rows.findIndex(
+        (row) => row.getAttribute("data-container-item") === domPrefix
+      );
+      cur = pos >= 0 ? arr[pos] : arr[parseInt(marker[2], 10)];
+    }
+    return cur;
+  }
   /**
    * Register an external action that will be displayed as a button
    * External actions can be form-level (no related_field) or field-level (with related_field)
@@ -11295,21 +11374,10 @@ var FormBuilderInstance = class {
    */
   findFormElementByFieldPath(fieldPath) {
     if (!this.state.formRoot) return null;
-    let element = this.state.formRoot.querySelector(
+    const element = this.state.formRoot.querySelector(
       `[name="${fieldPath}"]`
     );
     if (element) return element;
-    const variations = [
-      fieldPath,
-      fieldPath.replace(/\[(\d+)\]/g, "[$1]"),
-      fieldPath.replace(/\./g, "[") + "]".repeat((fieldPath.match(/\./g) || []).length)
-    ];
-    for (const variation of variations) {
-      element = this.state.formRoot.querySelector(
-        `[name="${variation}"]`
-      );
-      if (element) return element;
-    }
     const schemaElement = this.findSchemaElement(fieldPath);
     if (!schemaElement) return null;
     const fieldWrappers = this.state.formRoot.querySelectorAll(".fb-field-wrapper");
@@ -11559,6 +11627,7 @@ var FormBuilderInstance = class {
       return;
     }
     this.disconnectEnableIfObservers();
+    this.removeTooltipElements();
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
@@ -11658,24 +11727,12 @@ var FormBuilderInstance = class {
       if (element.type === "markdown") {
         return;
       }
-      if (element.hidden || element.type === "hidden") {
-        const hiddenInput = this.state.formRoot.querySelector(
-          `input[type="hidden"][data-hidden-field="true"][name="${element.key}"]`
-        );
-        const raw = hiddenInput?.value ?? "";
-        if (raw !== "") {
-          data[element.key] = deserializeHiddenValue(raw);
-        } else {
-          data[element.key] = element.default !== void 0 ? element.default : null;
-        }
-      } else {
-        const result = validateElement2(element, { path: "" });
-        if (result.skip) return;
-        if (result.spread && result.value !== null && typeof result.value === "object") {
-          Object.assign(data, result.value);
-        } else if (element.key) {
-          data[element.key] = result.value;
-        }
+      const result = validateElement2(element, { path: "" });
+      if (result.skip) return;
+      if (result.spread && result.value !== null && typeof result.value === "object") {
+        Object.assign(data, result.value);
+      } else if (element.key) {
+        data[element.key] = result.value;
       }
     });
     return {
@@ -11994,6 +12051,7 @@ var FormBuilderInstance = class {
       this.state.debounceTimer = null;
     }
     this.disconnectEnableIfObservers();
+    this.removeTooltipElements();
     this.state.resourceIndex.clear();
     if (this.state.formRoot) {
       clear(this.state.formRoot);
@@ -12011,6 +12069,12 @@ var FormBuilderInstance = class {
     }
     this.state.enableIfObservers.clear();
   }
+  removeTooltipElements() {
+    for (const tooltip of this.state.tooltipElements) {
+      tooltip.remove();
+    }
+    this.state.tooltipElements.clear();
+  }
 };
 
 // src/index.ts