@dmitryvim/form-builder 0.2.4 → 0.2.6

package/dist/esm/index.js

@@ -56,9 +56,6 @@ function validateSchema(schema) {
     errors.push("Schema must be an object");
     return errors;
   }
-  if (!schema.version) {
-    errors.push("Schema missing version");
-  }
   if (!Array.isArray(schema.elements)) {
     errors.push("Schema missing elements array");
     return errors;
@@ -72,6 +69,20 @@ function validateSchema(schema) {
       if (!element.key) {
         errors.push(`${elementPath}: missing key`);
       }
+      if (element.displayIf) {
+        const displayIf = element.displayIf;
+        if (!displayIf.key || typeof displayIf.key !== "string") {
+          errors.push(
+            `${elementPath}: displayIf must have a 'key' property of type string`
+          );
+        }
+        const hasOperator = "equals" in displayIf;
+        if (!hasOperator) {
+          errors.push(
+            `${elementPath}: displayIf must have at least one operator (equals, etc.)`
+          );
+        }
+      }
       if (element.type === "group" && "elements" in element && element.elements) {
         validateElements(element.elements, `${elementPath}.elements`);
       }
@@ -109,6 +120,66 @@ function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
 
+// src/utils/display-conditions.ts
+function getValueByPath(data, path) {
+  if (!data || typeof data !== "object") {
+    return void 0;
+  }
+  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
+  if (!segments || segments.length === 0) {
+    return void 0;
+  }
+  let current = data;
+  for (const segment of segments) {
+    if (current === void 0 || current === null) {
+      return void 0;
+    }
+    if (segment.startsWith("[") && segment.endsWith("]")) {
+      const index = parseInt(segment.slice(1, -1), 10);
+      if (!Array.isArray(current) || isNaN(index)) {
+        return void 0;
+      }
+      current = current[index];
+    } else {
+      current = current[segment];
+    }
+  }
+  return current;
+}
+function evaluateDisplayCondition(condition, formData) {
+  if (!condition || !condition.key) {
+    throw new Error(
+      "Invalid displayIf condition: must have a 'key' property"
+    );
+  }
+  const actualValue = getValueByPath(formData, condition.key);
+  if ("equals" in condition) {
+    return deepEqual(actualValue, condition.equals);
+  }
+  throw new Error(
+    `Invalid displayIf condition: no recognized operator (equals, etc.)`
+  );
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a === "object" && typeof b === "object") {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch (e) {
+      if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
+        console.warn(
+          "deepEqual: Circular reference detected in displayIf comparison, using reference equality"
+        );
+        return a === b;
+      }
+      throw e;
+    }
+  }
+  return a === b;
+}
+
 // src/components/text.ts
 function renderTextElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -1265,8 +1336,22 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       const thumbnailUrl = await state.config.getThumbnail(resourceId);
       if (thumbnailUrl) {
         clear(container);
-        img.src = thumbnailUrl;
-        container.appendChild(img);
+        if (meta && meta.type && meta.type.startsWith("video/")) {
+          const video = document.createElement("video");
+          video.className = "w-full h-full object-contain";
+          video.controls = true;
+          video.preload = "metadata";
+          video.muted = true;
+          const source = document.createElement("source");
+          source.src = thumbnailUrl;
+          source.type = meta.type;
+          video.appendChild(source);
+          video.appendChild(document.createTextNode("Your browser does not support the video tag."));
+          container.appendChild(video);
+        } else {
+          img.src = thumbnailUrl;
+          container.appendChild(img);
+        }
       } else {
         setEmptyFileContainer(container, state);
       }
@@ -2211,6 +2296,9 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   const subCtx = {
     path: pathJoin(ctx.path, element.key),
     prefill: ctx.prefill?.[element.key] || {},
+    // Sliced data for value population
+    formData: ctx.formData ?? ctx.prefill,
+    // Complete root data for displayIf evaluation
     state: ctx.state
   };
   element.elements.forEach((child) => {
@@ -2254,7 +2342,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         const subCtx = {
           state: ctx.state,
           path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-          prefill: {}
+          prefill: {},
+          formData: ctx.formData ?? ctx.prefill
+          // Complete root data for displayIf
         };
         const item = document.createElement("div");
         item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -2299,7 +2389,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const subCtx = {
         state: ctx.state,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: prefillObj || {}
+        prefill: prefillObj || {},
+        formData: ctx.formData ?? ctx.prefill
+        // Complete root data for displayIf
       };
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -2330,7 +2422,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       const subCtx = {
         state: ctx.state,
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-        prefill: {}
+        prefill: {},
+        formData: ctx.formData ?? ctx.prefill
+        // Complete root data for displayIf
       };
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -2611,8 +2705,31 @@ if (typeof document !== "undefined") {
   });
 }
 function renderElement2(element, ctx) {
+  if (element.displayIf) {
+    try {
+      const dataForCondition = ctx.formData ?? ctx.prefill;
+      const shouldDisplay = evaluateDisplayCondition(
+        element.displayIf,
+        dataForCondition
+      );
+      if (!shouldDisplay) {
+        const hiddenWrapper = document.createElement("div");
+        hiddenWrapper.className = "fb-field-wrapper-hidden";
+        hiddenWrapper.style.display = "none";
+        hiddenWrapper.setAttribute("data-field-key", element.key);
+        hiddenWrapper.setAttribute("data-conditionally-hidden", "true");
+        return hiddenWrapper;
+      }
+    } catch (error) {
+      console.error(
+        `Error evaluating displayIf for field "${element.key}":`,
+        error
+      );
+    }
+  }
   const wrapper = document.createElement("div");
   wrapper.className = "mb-6 fb-field-wrapper";
+  wrapper.setAttribute("data-field-key", element.key);
   const label = document.createElement("div");
   label.className = "flex items-center mb-2";
   const title = document.createElement("label");
@@ -3105,6 +3222,7 @@ var FormBuilderInstance = class {
     }
     this.state.debounceTimer = setTimeout(() => {
       const formData = this.validateForm(true);
+      this.reevaluateConditionalFields();
       if (this.state.config.onChange) {
         this.state.config.onChange(formData);
       }
@@ -3364,6 +3482,8 @@ var FormBuilderInstance = class {
       const block = renderElement2(element, {
         path: "",
         prefill: prefill || {},
+        formData: prefill || {},
+        // Pass complete root data for displayIf evaluation
         state: this.state,
         instance: this
       });
@@ -3408,6 +3528,19 @@ var FormBuilderInstance = class {
     };
     setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
+      if (element.displayIf) {
+        try {
+          const shouldDisplay = evaluateDisplayCondition(element.displayIf, data);
+          if (!shouldDisplay) {
+            return;
+          }
+        } catch (error) {
+          console.error(
+            `Error evaluating displayIf for field "${element.key}" during validation:`,
+            error
+          );
+        }
+      }
       if (element.hidden) {
         data[element.key] = element.default !== void 0 ? element.default : null;
       } else {
@@ -3564,6 +3697,70 @@ var FormBuilderInstance = class {
       );
     }
   }
+  /**
+   * Re-evaluate all conditional fields (displayIf) based on current form data
+   * This is called automatically when form data changes (via onChange events)
+   */
+  reevaluateConditionalFields() {
+    if (!this.state.schema || !this.state.formRoot) return;
+    const formData = this.validateForm(true).data;
+    const checkElements = (elements, currentPath) => {
+      elements.forEach((element) => {
+        const fullPath = currentPath ? `${currentPath}.${element.key}` : element.key;
+        if (element.displayIf) {
+          const fieldWrappers = this.state.formRoot.querySelectorAll(
+            `[data-field-key="${element.key}"]`
+          );
+          fieldWrappers.forEach((wrapper) => {
+            try {
+              const shouldDisplay = evaluateDisplayCondition(
+                element.displayIf,
+                formData
+                // Use complete formData for condition evaluation
+              );
+              const isCurrentlyHidden = wrapper.getAttribute("data-conditionally-hidden") === "true";
+              if (shouldDisplay && isCurrentlyHidden) {
+                const newWrapper = renderElement2(element, {
+                  path: fullPath,
+                  // Use accumulated path
+                  prefill: formData,
+                  // Use complete formData for root-level elements
+                  formData,
+                  // Pass complete formData for displayIf evaluation
+                  state: this.state,
+                  instance: this
+                });
+                wrapper.parentNode?.replaceChild(newWrapper, wrapper);
+              } else if (!shouldDisplay && !isCurrentlyHidden) {
+                const hiddenWrapper = document.createElement("div");
+                hiddenWrapper.className = "fb-field-wrapper-hidden";
+                hiddenWrapper.style.display = "none";
+                hiddenWrapper.setAttribute("data-field-key", element.key);
+                hiddenWrapper.setAttribute("data-conditionally-hidden", "true");
+                wrapper.parentNode?.replaceChild(hiddenWrapper, wrapper);
+              }
+            } catch (error) {
+              console.error(
+                `Error re-evaluating displayIf for field "${element.key}":`,
+                error
+              );
+            }
+          });
+        }
+        if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
+          const containerData = formData?.[element.key];
+          if (Array.isArray(containerData)) {
+            containerData.forEach((_, index) => {
+              checkElements(element.elements, `${fullPath}[${index}]`);
+            });
+          } else {
+            checkElements(element.elements, fullPath);
+          }
+        }
+      });
+    };
+    checkElements(this.state.schema.elements, "");
+  }
   /**
    * Destroy instance and clean up resources
    */