@dmitryvim/form-builder 0.2.23 → 0.2.25

package/dist/esm/index.js

@@ -268,6 +268,26 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function serializeHiddenValue(value) {
+  if (value === null || value === void 0) return "";
+  return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+function deserializeHiddenValue(raw) {
+  if (raw === "") return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+function createHiddenInput(name, value) {
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = name;
+  input.setAttribute("data-hidden-field", "true");
+  input.value = serializeHiddenValue(value);
+  return input;
+}
 
 // src/utils/enable-conditions.ts
 function getValueByPath(data, path) {
@@ -2268,6 +2288,10 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       meta,
       state
     );
+    const isVideo = meta?.type?.startsWith("video/");
+    if (!isReadonly && !isVideo) {
+      renderDeleteButton(container, resourceId, state);
+    }
   }
 }
 async function renderFilePreviewReadonly(resourceId, state, fileName) {
@@ -4492,7 +4516,10 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     state: ctx.state
   };
   element.elements.forEach((child) => {
-    if (!child.hidden) {
+    if (child.hidden || child.type === "hidden") {
+      const prefillVal = containerPrefill[child.key] ?? child.default ?? null;
+      itemsWrap.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+    } else {
       itemsWrap.appendChild(renderElement(child, subCtx));
     }
   });
@@ -4559,7 +4586,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           childWrapper.className = `grid grid-cols-${columns} gap-4`;
         }
         element.elements.forEach((child) => {
-          if (!child.hidden) {
+          if (child.hidden || child.type === "hidden") {
+            childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), child.default ?? null));
+          } else {
             childWrapper.appendChild(renderElement(child, subCtx));
           }
         });
@@ -4628,7 +4657,10 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (!child.hidden) {
+        if (child.hidden || child.type === "hidden") {
+          const prefillVal = prefillObj?.[child.key] ?? child.default ?? null;
+          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+        } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
@@ -4678,7 +4710,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (!child.hidden) {
+        if (child.hidden || child.type === "hidden") {
+          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), child.default ?? null));
+        } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
@@ -4789,20 +4823,16 @@ function validateContainerElement(element, key, context) {
             );
           }
         }
-        if (child.hidden || child.type === "hidden") {
-          itemData[child.key] = child.default !== void 0 ? child.default : null;
+        const childKey = `${key}[${domIndex}].${child.key}`;
+        const childResult = validateElement(
+          { ...child, key: childKey },
+          { path },
+          itemContainer
+        );
+        if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
+          Object.assign(itemData, childResult.value);
         } else {
-          const childKey = `${key}[${domIndex}].${child.key}`;
-          const childResult = validateElement(
-            { ...child, key: childKey },
-            { path },
-            itemContainer
-          );
-          if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
-            Object.assign(itemData, childResult.value);
-          } else {
-            itemData[child.key] = childResult.value;
-          }
+          itemData[child.key] = childResult.value;
         }
       });
       items.push(itemData);
@@ -4833,9 +4863,7 @@ function validateContainerElement(element, key, context) {
           );
         }
       }
-      if (child.hidden || child.type === "hidden") {
-        containerData[child.key] = child.default !== void 0 ? child.default : null;
-      } else {
+      {
         const childKey = `${key}.${child.key}`;
         const childResult = validateElement(
           { ...child, key: childKey },
@@ -8124,7 +8152,8 @@ function createInstanceState(config) {
       ...config,
       translations: mergedTranslations
     },
-    debounceTimer: null
+    debounceTimer: null,
+    prefill: {}
   };
 }
 function generateInstanceId() {
@@ -8322,6 +8351,26 @@ function applyActionButtonStyles(button, isFormLevel = false) {
 }
 
 // src/components/registry.ts
+function validateHiddenElement(element, key, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
+  );
+  const raw = input?.value ?? "";
+  if (raw === "") {
+    const defaultVal = "default" in element ? element.default : null;
+    return { value: defaultVal !== void 0 ? defaultVal : null, errors: [] };
+  }
+  return { value: deserializeHiddenValue(raw), errors: [] };
+}
+function updateHiddenField(_element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][data-hidden-field="true"][name="${fieldPath}"]`
+  );
+  if (!input) return;
+  input.value = serializeHiddenValue(value);
+}
 var componentRegistry = {
   text: {
     validate: validateTextElement,
@@ -8376,6 +8425,11 @@ var componentRegistry = {
   richinput: {
     validate: validateRichInputElement,
     update: updateRichInputField
+  },
+  hidden: {
+    // Legacy type: `type: "hidden"` — reads/writes DOM <input type="hidden"> element
+    validate: validateHiddenElement,
+    update: updateHiddenField
   }
 };
 function getComponentOperations(elementType) {
@@ -8785,6 +8839,7 @@ var FormBuilderInstance = class {
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
+    this.state.prefill = prefill || {};
     clear(root);
     root.setAttribute("data-fb-root", "true");
     injectThemeVariables(root, this.state.config.theme);
@@ -8802,7 +8857,9 @@ var FormBuilderInstance = class {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
     }
     schema.elements.forEach((element) => {
-      if (element.hidden) {
+      if (element.hidden || element.type === "hidden") {
+        const val = prefill?.[element.key] ?? element.default ?? null;
+        fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
       const block = renderElement2(element, {
@@ -8874,8 +8931,16 @@ var FormBuilderInstance = class {
           );
         }
       }
-      if (element.hidden) {
-        data[element.key] = element.default !== void 0 ? element.default : null;
+      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.spread && result.value !== null && typeof result.value === "object") {