form-builder-pro 1.0.15 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +0 -5
- package/dist/index.d.ts +0 -5
- package/dist/index.js +56 -135
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +56 -135
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -186,11 +186,6 @@ declare class FormBuilder {
|
|
|
186
186
|
private container;
|
|
187
187
|
private unsubscribe;
|
|
188
188
|
private options;
|
|
189
|
-
private requestedMasterTypesCache;
|
|
190
|
-
private isTriggeringApiCalls;
|
|
191
|
-
private previewRenderer;
|
|
192
|
-
private lastPreviewSchema;
|
|
193
|
-
private wasInPreviewMode;
|
|
194
189
|
constructor(container: HTMLElement, options?: FormBuilderOptions);
|
|
195
190
|
loadForm(json: FormSchema): void;
|
|
196
191
|
cloneForm(json: FormSchema): void;
|
package/dist/index.d.ts
CHANGED
|
@@ -186,11 +186,6 @@ declare class FormBuilder {
|
|
|
186
186
|
private container;
|
|
187
187
|
private unsubscribe;
|
|
188
188
|
private options;
|
|
189
|
-
private requestedMasterTypesCache;
|
|
190
|
-
private isTriggeringApiCalls;
|
|
191
|
-
private previewRenderer;
|
|
192
|
-
private lastPreviewSchema;
|
|
193
|
-
private wasInPreviewMode;
|
|
194
189
|
constructor(container: HTMLElement, options?: FormBuilderOptions);
|
|
195
190
|
loadForm(json: FormSchema): void;
|
|
196
191
|
cloneForm(json: FormSchema): void;
|
package/dist/index.js
CHANGED
|
@@ -7566,20 +7566,10 @@ var SectionList = class {
|
|
|
7566
7566
|
|
|
7567
7567
|
// src/builder/FormBuilder.ts
|
|
7568
7568
|
var FormBuilder = class {
|
|
7569
|
-
// Track previous preview state to detect mode changes
|
|
7570
7569
|
constructor(container, options = {}) {
|
|
7571
7570
|
__publicField(this, "container");
|
|
7572
7571
|
__publicField(this, "unsubscribe");
|
|
7573
7572
|
__publicField(this, "options");
|
|
7574
|
-
__publicField(this, "requestedMasterTypesCache", /* @__PURE__ */ new Set());
|
|
7575
|
-
// Cache to track requested master types
|
|
7576
|
-
__publicField(this, "isTriggeringApiCalls", false);
|
|
7577
|
-
// Flag to prevent concurrent API triggers
|
|
7578
|
-
__publicField(this, "previewRenderer", null);
|
|
7579
|
-
// Store FormRenderer instance to preserve selections
|
|
7580
|
-
__publicField(this, "lastPreviewSchema", null);
|
|
7581
|
-
// Track last preview schema to detect changes
|
|
7582
|
-
__publicField(this, "wasInPreviewMode", false);
|
|
7583
7573
|
__publicField(this, "activeTab", "fields");
|
|
7584
7574
|
if (!container) {
|
|
7585
7575
|
throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
|
|
@@ -7660,9 +7650,6 @@ var FormBuilder = class {
|
|
|
7660
7650
|
}
|
|
7661
7651
|
updateDropdownOptionsMap(dropdownOptionsMap) {
|
|
7662
7652
|
formStore.getState().setDropdownOptionsMap(dropdownOptionsMap);
|
|
7663
|
-
Object.keys(dropdownOptionsMap).forEach((groupEnumName) => {
|
|
7664
|
-
if (dropdownOptionsMap[groupEnumName] && dropdownOptionsMap[groupEnumName].length > 0) ;
|
|
7665
|
-
});
|
|
7666
7653
|
this.render();
|
|
7667
7654
|
}
|
|
7668
7655
|
updateMasterTypeGroups(masterTypeGroups) {
|
|
@@ -7719,145 +7706,79 @@ var FormBuilder = class {
|
|
|
7719
7706
|
wrapper.appendChild(this.renderToolbar(state));
|
|
7720
7707
|
const main = createElement("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden" });
|
|
7721
7708
|
if (state.isPreviewMode) {
|
|
7722
|
-
const masterTypes = state.masterTypes
|
|
7709
|
+
const masterTypes = state.masterTypes;
|
|
7723
7710
|
const dropdownOptionsMap = state.dropdownOptionsMap;
|
|
7724
|
-
if (state.schema.sections) {
|
|
7725
|
-
|
|
7726
|
-
|
|
7727
|
-
|
|
7728
|
-
|
|
7729
|
-
|
|
7711
|
+
if (masterTypes && masterTypes.length > 0 && state.schema.sections) {
|
|
7712
|
+
const convertIndexesToOptions = (indexes) => {
|
|
7713
|
+
if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
|
|
7714
|
+
return [];
|
|
7715
|
+
}
|
|
7716
|
+
return indexes.map((item, index2) => {
|
|
7717
|
+
if (typeof item === "string") {
|
|
7718
|
+
return { label: item, value: item };
|
|
7730
7719
|
}
|
|
7731
|
-
|
|
7732
|
-
|
|
7733
|
-
|
|
7734
|
-
}
|
|
7735
|
-
|
|
7736
|
-
|
|
7737
|
-
|
|
7738
|
-
|
|
7739
|
-
|
|
7740
|
-
|
|
7741
|
-
|
|
7742
|
-
|
|
7743
|
-
|
|
7744
|
-
|
|
7745
|
-
|
|
7746
|
-
|
|
7747
|
-
|
|
7748
|
-
|
|
7749
|
-
|
|
7750
|
-
|
|
7751
|
-
|
|
7752
|
-
|
|
7753
|
-
|
|
7754
|
-
|
|
7755
|
-
|
|
7756
|
-
|
|
7757
|
-
|
|
7758
|
-
|
|
7759
|
-
|
|
7760
|
-
|
|
7761
|
-
|
|
7762
|
-
|
|
7763
|
-
|
|
7764
|
-
|
|
7765
|
-
|
|
7766
|
-
|
|
7767
|
-
|
|
7768
|
-
fieldsNeedingApiCall.push({
|
|
7769
|
-
fieldId: field.id,
|
|
7770
|
-
groupEnumName: masterType.enumName
|
|
7771
|
-
});
|
|
7772
|
-
}
|
|
7773
|
-
}
|
|
7774
|
-
} else if (field.groupName) {
|
|
7775
|
-
masterType = masterTypes.find(
|
|
7776
|
-
(mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
|
|
7777
|
-
);
|
|
7720
|
+
if (typeof item === "object" && item !== null) {
|
|
7721
|
+
const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
|
|
7722
|
+
const value = item.value || item.id || item.name || String(index2);
|
|
7723
|
+
return { label, value };
|
|
7724
|
+
}
|
|
7725
|
+
return { label: String(item), value: String(item) };
|
|
7726
|
+
});
|
|
7727
|
+
};
|
|
7728
|
+
const areDefaultOptions = (options) => {
|
|
7729
|
+
if (!options || options.length === 0)
|
|
7730
|
+
return true;
|
|
7731
|
+
return options.every(
|
|
7732
|
+
(opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
|
|
7733
|
+
);
|
|
7734
|
+
};
|
|
7735
|
+
const previewSchema = {
|
|
7736
|
+
...state.schema,
|
|
7737
|
+
sections: state.schema.sections.map((section) => ({
|
|
7738
|
+
...section,
|
|
7739
|
+
fields: section.fields.map((field) => {
|
|
7740
|
+
if (field.type === "select") {
|
|
7741
|
+
let masterType;
|
|
7742
|
+
if (field.masterTypeName) {
|
|
7743
|
+
masterType = masterTypes.find(
|
|
7744
|
+
(mt) => mt.active === true && mt.enumName === field.masterTypeName
|
|
7745
|
+
);
|
|
7746
|
+
} else if (field.groupName) {
|
|
7747
|
+
masterType = masterTypes.find(
|
|
7748
|
+
(mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
|
|
7749
|
+
);
|
|
7750
|
+
}
|
|
7751
|
+
if (masterType) {
|
|
7752
|
+
let options = [];
|
|
7753
|
+
if (masterType.enumName && dropdownOptionsMap && dropdownOptionsMap[masterType.enumName]) {
|
|
7754
|
+
options = dropdownOptionsMap[masterType.enumName];
|
|
7755
|
+
} else if (masterType.indexes && masterType.indexes.length > 0) {
|
|
7756
|
+
options = convertIndexesToOptions(masterType.indexes);
|
|
7778
7757
|
}
|
|
7779
|
-
if (
|
|
7780
|
-
|
|
7781
|
-
|
|
7782
|
-
options = dropdownOptionsMap[masterType.enumName];
|
|
7783
|
-
} else if (masterType.indexes && masterType.indexes.length > 0) {
|
|
7784
|
-
options = convertIndexesToOptions(masterType.indexes);
|
|
7785
|
-
}
|
|
7786
|
-
if (options.length > 0) {
|
|
7787
|
-
if (field.masterTypeName || !field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
|
|
7788
|
-
return { ...field, options };
|
|
7789
|
-
}
|
|
7758
|
+
if (options.length > 0) {
|
|
7759
|
+
if (field.masterTypeName || !field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
|
|
7760
|
+
return { ...field, options };
|
|
7790
7761
|
}
|
|
7791
7762
|
}
|
|
7792
7763
|
}
|
|
7793
|
-
|
|
7794
|
-
|
|
7795
|
-
})
|
|
7796
|
-
}
|
|
7797
|
-
|
|
7798
|
-
this.isTriggeringApiCalls = true;
|
|
7799
|
-
setTimeout(() => {
|
|
7800
|
-
const uniqueApiCalls = /* @__PURE__ */ new Map();
|
|
7801
|
-
fieldsNeedingApiCall.forEach(({ fieldId, groupEnumName }) => {
|
|
7802
|
-
if (!uniqueApiCalls.has(groupEnumName)) {
|
|
7803
|
-
uniqueApiCalls.set(groupEnumName, []);
|
|
7804
|
-
}
|
|
7805
|
-
uniqueApiCalls.get(groupEnumName).push(fieldId);
|
|
7806
|
-
});
|
|
7807
|
-
uniqueApiCalls.forEach((fieldIds, groupEnumName) => {
|
|
7808
|
-
if (process.env.NODE_ENV === "development") {
|
|
7809
|
-
console.log(`[FormBuilder] Preview: Triggering API call for masterTypeName "${groupEnumName}" (affects ${fieldIds.length} field(s))`);
|
|
7810
|
-
}
|
|
7811
|
-
this.options.onGroupSelectionChange({
|
|
7812
|
-
fieldId: fieldIds[0],
|
|
7813
|
-
groupEnumName
|
|
7814
|
-
});
|
|
7815
|
-
});
|
|
7816
|
-
setTimeout(() => {
|
|
7817
|
-
this.isTriggeringApiCalls = false;
|
|
7818
|
-
}, 100);
|
|
7819
|
-
}, 0);
|
|
7820
|
-
}
|
|
7821
|
-
}
|
|
7764
|
+
}
|
|
7765
|
+
return field;
|
|
7766
|
+
})
|
|
7767
|
+
}))
|
|
7768
|
+
};
|
|
7822
7769
|
const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
|
|
7823
7770
|
const inner = createElement("div", { className: "w-full max-w-3xl" });
|
|
7824
|
-
|
|
7825
|
-
if (!this.previewRenderer || structureChanged) {
|
|
7826
|
-
if (this.previewRenderer) {
|
|
7827
|
-
inner.innerHTML = "";
|
|
7828
|
-
}
|
|
7829
|
-
this.previewRenderer = new FormRenderer(inner, previewSchema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
|
|
7830
|
-
this.lastPreviewSchema = previewSchema;
|
|
7831
|
-
} else {
|
|
7832
|
-
if (this.lastPreviewSchema) {
|
|
7833
|
-
const optionsChanged = JSON.stringify(this.lastPreviewSchema.sections.flatMap((s) => s.fields.map((f) => f.options))) !== JSON.stringify(previewSchema.sections.flatMap((s) => s.fields.map((f) => f.options)));
|
|
7834
|
-
if (optionsChanged && this.previewRenderer) {
|
|
7835
|
-
this.previewRenderer.setSchema(previewSchema);
|
|
7836
|
-
this.lastPreviewSchema = previewSchema;
|
|
7837
|
-
}
|
|
7838
|
-
}
|
|
7839
|
-
}
|
|
7771
|
+
new FormRenderer(inner, previewSchema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
|
|
7840
7772
|
previewContainer.appendChild(inner);
|
|
7841
7773
|
main.appendChild(previewContainer);
|
|
7842
7774
|
} else {
|
|
7843
7775
|
const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
|
|
7844
7776
|
const inner = createElement("div", { className: "w-full max-w-3xl" });
|
|
7845
|
-
|
|
7846
|
-
this.previewRenderer = new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
|
|
7847
|
-
this.lastPreviewSchema = state.schema;
|
|
7848
|
-
} else {
|
|
7849
|
-
this.previewRenderer.setSchema(state.schema);
|
|
7850
|
-
this.lastPreviewSchema = state.schema;
|
|
7851
|
-
}
|
|
7777
|
+
new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
|
|
7852
7778
|
previewContainer.appendChild(inner);
|
|
7853
7779
|
main.appendChild(previewContainer);
|
|
7854
7780
|
}
|
|
7855
7781
|
} else {
|
|
7856
|
-
if (this.wasInPreviewMode) {
|
|
7857
|
-
this.previewRenderer = null;
|
|
7858
|
-
this.lastPreviewSchema = null;
|
|
7859
|
-
}
|
|
7860
|
-
this.wasInPreviewMode = false;
|
|
7861
7782
|
const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
|
|
7862
7783
|
toolboxWrapper.appendChild(this.renderToolbox());
|
|
7863
7784
|
main.appendChild(toolboxWrapper);
|