@dmitryvim/form-builder 0.2.23 → 0.2.25

package/dist/cjs/index.cjs

@@ -274,6 +274,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) {
@@ -2274,6 +2294,7 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
   }
 }
 async function renderFilePreview(container, resourceId, state, options = {}) {
+  var _a;
   const { fileName = "", isReadonly = false, deps = null } = options;
   if (!isReadonly && deps && (!deps.picker || !deps.fileUploadHandler || !deps.dragHandler)) {
     throw new Error(
@@ -2303,6 +2324,10 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       meta,
       state
     );
+    const isVideo = (_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("video/");
+    if (!isReadonly && !isVideo) {
+      renderDeleteButton(container, resourceId, state);
+    }
   }
 }
 async function renderFilePreviewReadonly(resourceId, state, fileName) {
@@ -4556,7 +4581,11 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     state: ctx.state
   };
   element.elements.forEach((child) => {
-    if (!child.hidden) {
+    var _a2, _b2;
+    if (child.hidden || child.type === "hidden") {
+      const prefillVal = (_b2 = (_a2 = containerPrefill[child.key]) != null ? _a2 : child.default) != null ? _b2 : null;
+      itemsWrap.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+    } else {
       itemsWrap.appendChild(renderElement(child, subCtx));
     }
   });
@@ -4624,7 +4653,10 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           childWrapper.className = `grid grid-cols-${columns} gap-4`;
         }
         element.elements.forEach((child) => {
-          if (!child.hidden) {
+          var _a2;
+          if (child.hidden || child.type === "hidden") {
+            childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), (_a2 = child.default) != null ? _a2 : null));
+          } else {
             childWrapper.appendChild(renderElement(child, subCtx));
           }
         });
@@ -4694,7 +4726,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (!child.hidden) {
+        var _a3, _b2;
+        if (child.hidden || child.type === "hidden") {
+          const prefillVal = (_b2 = (_a3 = prefillObj == null ? void 0 : prefillObj[child.key]) != null ? _a3 : child.default) != null ? _b2 : null;
+          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+        } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
@@ -4744,7 +4780,10 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (!child.hidden) {
+        var _a2;
+        if (child.hidden || child.type === "hidden") {
+          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), (_a2 = child.default) != null ? _a2 : null));
+        } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
@@ -4857,20 +4896,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);
@@ -4902,9 +4937,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 },
@@ -8263,7 +8296,8 @@ function createInstanceState(config) {
       ...config,
       translations: mergedTranslations
     },
-    debounceTimer: null
+    debounceTimer: null,
+    prefill: {}
   };
 }
 function generateInstanceId() {
@@ -8461,6 +8495,27 @@ function applyActionButtonStyles(button, isFormLevel = false) {
 }
 
 // src/components/registry.ts
+function validateHiddenElement(element, key, context) {
+  var _a;
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
+  );
+  const raw = (_a = input == null ? void 0 : input.value) != null ? _a : "";
+  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,
@@ -8515,6 +8570,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) {
@@ -8924,6 +8984,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);
@@ -8941,7 +9002,10 @@ var FormBuilderInstance = class {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
     }
     schema.elements.forEach((element) => {
-      if (element.hidden) {
+      var _a, _b;
+      if (element.hidden || element.type === "hidden") {
+        const val = (_b = (_a = prefill == null ? void 0 : prefill[element.key]) != null ? _a : element.default) != null ? _b : null;
+        fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
       const block = renderElement2(element, {
@@ -8997,6 +9061,7 @@ var FormBuilderInstance = class {
     };
     setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
+      var _a;
       if (element.enableIf) {
         try {
           const shouldEnable = evaluateEnableCondition(
@@ -9013,8 +9078,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 = (_a = hiddenInput == null ? void 0 : hiddenInput.value) != null ? _a : "";
+        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") {