form-builder-pro 1.0.8 → 1.0.9

package/dist/index.d.mts

@@ -231,6 +231,15 @@ declare class FormRenderer {
     private render;
 }
 
+/**
+ * Cleans a form schema by removing invalid properties and normalizing field types
+ * - Converts "decimal" type to "number"
+ * - Removes invalid properties like "masterTypeName"
+ * - Removes empty options arrays from non-select/radio fields
+ * @param schema
+ * @returns Cleaned schema
+ */
+declare const cleanFormSchema: (schema: any) => FormSchema;
 /**
  * Transforms Form Builder JSON to Platform JSON
  * @param builderSchema
@@ -248,4 +257,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { AsyncOptionSource, FieldType, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, MasterType, ValidationRule, builderToPlatform, formStore, initFormBuilder, platformToBuilder };
+export { AsyncOptionSource, FieldType, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, MasterType, ValidationRule, builderToPlatform, cleanFormSchema, formStore, initFormBuilder, platformToBuilder };

package/dist/index.d.ts

@@ -231,6 +231,15 @@ declare class FormRenderer {
     private render;
 }
 
+/**
+ * Cleans a form schema by removing invalid properties and normalizing field types
+ * - Converts "decimal" type to "number"
+ * - Removes invalid properties like "masterTypeName"
+ * - Removes empty options arrays from non-select/radio fields
+ * @param schema
+ * @returns Cleaned schema
+ */
+declare const cleanFormSchema: (schema: any) => FormSchema;
 /**
  * Transforms Form Builder JSON to Platform JSON
  * @param builderSchema
@@ -248,4 +257,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { AsyncOptionSource, FieldType, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, MasterType, ValidationRule, builderToPlatform, formStore, initFormBuilder, platformToBuilder };
+export { AsyncOptionSource, FieldType, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, MasterType, ValidationRule, builderToPlatform, cleanFormSchema, formStore, initFormBuilder, platformToBuilder };

package/dist/index.js

@@ -4152,6 +4152,64 @@ var cloneField = (field) => {
   };
 };
 
+// src/utils/mapper.ts
+var cleanFormSchema = (schema) => {
+  const cleanField = (field) => {
+    const cleaned = {
+      id: field.id,
+      type: field.type === "decimal" ? "number" : field.type,
+      // Convert decimal to number
+      label: field.label,
+      width: field.width
+    };
+    if (field.placeholder !== void 0)
+      cleaned.placeholder = field.placeholder;
+    if (field.description !== void 0)
+      cleaned.description = field.description;
+    if (field.required !== void 0)
+      cleaned.required = field.required;
+    if (field.defaultValue !== void 0)
+      cleaned.defaultValue = field.defaultValue;
+    if (field.validation !== void 0)
+      cleaned.validation = field.validation;
+    if (field.hidden !== void 0)
+      cleaned.hidden = field.hidden;
+    if (field.position !== void 0)
+      cleaned.position = field.position;
+    if (field.enabled !== void 0)
+      cleaned.enabled = field.enabled;
+    if (field.visible !== void 0)
+      cleaned.visible = field.visible;
+    if (field.optionsSource !== void 0)
+      cleaned.optionsSource = field.optionsSource;
+    if ((field.type === "select" || field.type === "radio") && field.options) {
+      cleaned.options = field.options;
+    }
+    if (field.type === "select" && field.groupName) {
+      cleaned.groupName = field.groupName;
+    }
+    return cleaned;
+  };
+  return {
+    id: schema.id,
+    title: schema.title,
+    formName: schema.formName,
+    sections: schema.sections.map((section) => ({
+      id: section.id,
+      title: section.title,
+      fields: section.fields.map(cleanField),
+      isExpanded: section.isExpanded,
+      columns: section.columns
+    }))
+  };
+};
+var builderToPlatform = (builderSchema) => {
+  return builderSchema;
+};
+var platformToBuilder = (platformSchema) => {
+  return cleanFormSchema(platformSchema);
+};
+
 // src/core/useFormStore.ts
 var INITIAL_SCHEMA = {
   id: "form_1",
@@ -4170,6 +4228,7 @@ var formStore = createStore((set, get) => ({
   masterTypes: [],
   dropdownOptionsMap: {},
   setSchema: (schema) => {
+    const cleanedSchema = cleanFormSchema(schema);
     const convertIndexesToOptions = (indexes) => {
       if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
         return [];
@@ -4194,8 +4253,8 @@ var formStore = createStore((set, get) => ({
       );
     };
     const state = get();
-    if (state.masterTypes && state.masterTypes.length > 0 && schema.sections) {
-      const updatedSections = schema.sections.map((section) => ({
+    if (state.masterTypes && state.masterTypes.length > 0 && cleanedSchema.sections) {
+      const updatedSections = cleanedSchema.sections.map((section) => ({
         ...section,
         fields: section.fields.map((field) => {
           if (field.type === "select" && field.groupName) {
@@ -4228,9 +4287,9 @@ var formStore = createStore((set, get) => ({
           return field;
         })
       }));
-      set({ schema: { ...schema, sections: updatedSections } });
+      set({ schema: { ...cleanedSchema, sections: updatedSections } });
     } else {
-      set({ schema });
+      set({ schema: cleanedSchema });
     }
   },
   togglePreview: () => {
@@ -7994,8 +8053,6 @@ var FormBuilder = class {
         }
       }
     }
-    const validationHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Validation Rules" });
-    body.appendChild(validationHeader);
     const validations = selectedField.validation || [];
     const updateValidation = (rule) => {
       const newValidations = validations.filter((v) => v.type !== rule.type);
@@ -8005,6 +8062,7 @@ var FormBuilder = class {
       formStore.getState().updateField(selectedField.id, { validation: newValidations });
     };
     const getRuleValue = (type) => validations.find((v) => v.type === type)?.value || "";
+    const validationElements = [];
     if (["text", "textarea", "email", "password"].includes(selectedField.type)) {
       const minLenGroup = createElement("div", { className: "mb-3" });
       minLenGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Min Length" }));
@@ -8015,7 +8073,7 @@ var FormBuilder = class {
         placeholder: "e.g. 3",
         onchange: (e) => updateValidation({ type: "minLength", value: parseInt(e.target.value) })
       }));
-      body.appendChild(minLenGroup);
+      validationElements.push(minLenGroup);
       const maxLenGroup = createElement("div", { className: "mb-3" });
       maxLenGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Max Length" }));
       maxLenGroup.appendChild(createElement("input", {
@@ -8025,7 +8083,7 @@ var FormBuilder = class {
         placeholder: "e.g. 100",
         onchange: (e) => updateValidation({ type: "maxLength", value: parseInt(e.target.value) })
       }));
-      body.appendChild(maxLenGroup);
+      validationElements.push(maxLenGroup);
       const regexGroup = createElement("div", { className: "mb-3" });
       regexGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Regex Pattern" }));
       regexGroup.appendChild(createElement("input", {
@@ -8043,7 +8101,7 @@ var FormBuilder = class {
           formStore.getState().updateField(selectedField.id, { validation: newValidations });
         }
       }));
-      body.appendChild(regexGroup);
+      validationElements.push(regexGroup);
     }
     if (selectedField.type === "number") {
       const minValGroup = createElement("div", { className: "mb-3" });
@@ -8054,7 +8112,7 @@ var FormBuilder = class {
         value: getRuleValue("min"),
         onchange: (e) => updateValidation({ type: "min", value: parseInt(e.target.value) })
       }));
-      body.appendChild(minValGroup);
+      validationElements.push(minValGroup);
       const maxValGroup = createElement("div", { className: "mb-3" });
       maxValGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Max Value" }));
       maxValGroup.appendChild(createElement("input", {
@@ -8063,59 +8121,12 @@ var FormBuilder = class {
         value: getRuleValue("max"),
         onchange: (e) => updateValidation({ type: "max", value: parseInt(e.target.value) })
       }));
-      body.appendChild(maxValGroup);
-    }
-    if (["select", "radio"].includes(selectedField.type)) {
-      const optionsHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Options Source" });
-      body.appendChild(optionsHeader);
-      const sourceGroup = createElement("div", { className: "mb-4" });
-      sourceGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Source Type" }));
-      const sourceSelect = createElement("select", {
-        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
-        onchange: (e) => {
-          const isAsync2 = e.target.value === "api";
-          if (isAsync2) {
-            formStore.getState().updateField(selectedField.id, {
-              optionsSource: { api: "https://", method: "GET", labelKey: "name", valueKey: "id" }
-            });
-          } else {
-            formStore.getState().updateField(selectedField.id, { optionsSource: void 0 });
-          }
-          this.render();
-        }
-      });
-      sourceSelect.appendChild(createElement("option", { value: "static", text: "Static Options", selected: !selectedField.optionsSource }));
-      sourceSelect.appendChild(createElement("option", { value: "api", text: "API Endpoint", selected: !!selectedField.optionsSource }));
-      sourceGroup.appendChild(sourceSelect);
-      body.appendChild(sourceGroup);
-      if (selectedField.optionsSource) {
-        const apiGroup = createElement("div", { className: "mb-3" });
-        apiGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "API URL" }));
-        apiGroup.appendChild(createElement("input", {
-          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
-          value: selectedField.optionsSource.api,
-          oninput: (e) => formStore.getState().updateField(selectedField.id, { optionsSource: { ...selectedField.optionsSource, api: e.target.value } })
-        }));
-        body.appendChild(apiGroup);
-        const keysRow = createElement("div", { className: "flex gap-2 mb-3" });
-        const labelKeyGroup = createElement("div", { className: "flex-1" });
-        labelKeyGroup.appendChild(createElement("label", { className: "block text-xs font-medium text-gray-500 mb-1", text: "Label Key" }));
-        labelKeyGroup.appendChild(createElement("input", {
-          className: "w-full px-2 py-1 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
-          value: selectedField.optionsSource.labelKey,
-          oninput: (e) => formStore.getState().updateField(selectedField.id, { optionsSource: { ...selectedField.optionsSource, labelKey: e.target.value } })
-        }));
-        const valueKeyGroup = createElement("div", { className: "flex-1" });
-        valueKeyGroup.appendChild(createElement("label", { className: "block text-xs font-medium text-gray-500 mb-1", text: "Value Key" }));
-        valueKeyGroup.appendChild(createElement("input", {
-          className: "w-full px-2 py-1 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
-          value: selectedField.optionsSource.valueKey,
-          oninput: (e) => formStore.getState().updateField(selectedField.id, { optionsSource: { ...selectedField.optionsSource, valueKey: e.target.value } })
-        }));
-        keysRow.appendChild(labelKeyGroup);
-        keysRow.appendChild(valueKeyGroup);
-        body.appendChild(keysRow);
-      }
+      validationElements.push(maxValGroup);
+    }
+    if (validationElements.length > 0) {
+      const validationHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Validation Rules" });
+      body.appendChild(validationHeader);
+      validationElements.forEach((el) => body.appendChild(el));
     }
     panel.appendChild(body);
     return panel;
@@ -8151,14 +8162,6 @@ var FormBuilder = class {
   }
 };
 
-// src/utils/mapper.ts
-var builderToPlatform = (builderSchema) => {
-  return builderSchema;
-};
-var platformToBuilder = (platformSchema) => {
-  return platformSchema;
-};
-
 // src/index.ts
 var initFormBuilder = (options) => {
   const container = document.getElementById(options.containerId);
@@ -8182,6 +8185,7 @@ exports.FormBuilder = FormBuilder;
 exports.FormRenderer = FormRenderer;
 exports.FormSchemaValidation = FormSchemaValidation;
 exports.builderToPlatform = builderToPlatform;
+exports.cleanFormSchema = cleanFormSchema;
 exports.formStore = formStore;
 exports.initFormBuilder = initFormBuilder;
 exports.platformToBuilder = platformToBuilder;