form-builder-pro 1.2.1 → 1.2.2

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.
Files changed (8) hide show
  1. package/dist/index.css +53 -0
  2. package/dist/index.d.mts +4 -1
  3. package/dist/index.d.ts +4 -1
  4. package/dist/index.js +36 -6
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +36 -6
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -843,12 +843,18 @@ body {
843
843
  .static {
844
844
  position: static;
845
845
  }
846
+ .fixed {
847
+ position: fixed;
848
+ }
846
849
  .absolute {
847
850
  position: absolute;
848
851
  }
849
852
  .relative {
850
853
  position: relative;
851
854
  }
855
+ .inset-0 {
856
+ inset: 0px;
857
+ }
852
858
  .right-1 {
853
859
  right: 0.25rem;
854
860
  }
@@ -864,6 +870,9 @@ body {
864
870
  .z-10 {
865
871
  z-index: 10;
866
872
  }
873
+ .z-\[9999\] {
874
+ z-index: 9999;
875
+ }
867
876
  .\!m-0 {
868
877
  margin: 0px !important;
869
878
  }
@@ -895,6 +904,9 @@ body {
895
904
  .ml-1 {
896
905
  margin-left: 0.25rem;
897
906
  }
907
+ .ml-1\.5 {
908
+ margin-left: 0.375rem;
909
+ }
898
910
  .ml-2 {
899
911
  margin-left: 0.5rem;
900
912
  }
@@ -955,6 +967,9 @@ body {
955
967
  .h-6 {
956
968
  height: 1.5rem;
957
969
  }
970
+ .h-64 {
971
+ height: 16rem;
972
+ }
958
973
  .h-8 {
959
974
  height: 2rem;
960
975
  }
@@ -964,6 +979,9 @@ body {
964
979
  .h-screen {
965
980
  height: 100vh;
966
981
  }
982
+ .max-h-\[90vh\] {
983
+ max-height: 90vh;
984
+ }
967
985
  .min-h-\[100px\] {
968
986
  min-height: 100px;
969
987
  }
@@ -997,6 +1015,9 @@ body {
997
1015
  .w-full {
998
1016
  width: 100%;
999
1017
  }
1018
+ .max-w-2xl {
1019
+ max-width: 42rem;
1020
+ }
1000
1021
  .max-w-\[180px\] {
1001
1022
  max-width: 180px;
1002
1023
  }
@@ -1020,6 +1041,9 @@ body {
1020
1041
  -moz-user-select: none;
1021
1042
  user-select: none;
1022
1043
  }
1044
+ .resize-y {
1045
+ resize: vertical;
1046
+ }
1023
1047
  .grid-cols-2 {
1024
1048
  grid-template-columns: repeat(2, minmax(0, 1fr));
1025
1049
  }
@@ -1035,6 +1059,9 @@ body {
1035
1059
  .items-center {
1036
1060
  align-items: center;
1037
1061
  }
1062
+ .justify-end {
1063
+ justify-content: flex-end;
1064
+ }
1038
1065
  .justify-center {
1039
1066
  justify-content: center;
1040
1067
  }
@@ -1204,6 +1231,9 @@ body {
1204
1231
  .bg-background {
1205
1232
  background-color: hsl(var(--background));
1206
1233
  }
1234
+ .bg-black\/50 {
1235
+ background-color: rgb(0 0 0 / 0.5);
1236
+ }
1207
1237
  .bg-blue-100 {
1208
1238
  --tw-bg-opacity: 1;
1209
1239
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -1268,6 +1298,10 @@ body {
1268
1298
  padding-left: 0.75rem;
1269
1299
  padding-right: 0.75rem;
1270
1300
  }
1301
+ .px-4 {
1302
+ padding-left: 1rem;
1303
+ padding-right: 1rem;
1304
+ }
1271
1305
  .px-6 {
1272
1306
  padding-left: 1.5rem;
1273
1307
  padding-right: 1.5rem;
@@ -1323,6 +1357,10 @@ body {
1323
1357
  font-size: 1rem;
1324
1358
  line-height: 1.5rem;
1325
1359
  }
1360
+ .text-lg {
1361
+ font-size: 1.125rem;
1362
+ line-height: 1.75rem;
1363
+ }
1326
1364
  .text-sm {
1327
1365
  font-size: 0.875rem;
1328
1366
  line-height: 1.25rem;
@@ -1439,6 +1477,11 @@ body {
1439
1477
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1440
1478
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1441
1479
  }
1480
+ .shadow-xl {
1481
+ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1482
+ --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1483
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1484
+ }
1442
1485
  .ring-2 {
1443
1486
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1444
1487
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1660,6 +1703,11 @@ input[type="radio"]:checked::after {
1660
1703
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
1661
1704
  }
1662
1705
 
1706
+ .hover\:bg-gray-300:hover {
1707
+ --tw-bg-opacity: 1;
1708
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
1709
+ }
1710
+
1663
1711
  .hover\:bg-gray-50:hover {
1664
1712
  --tw-bg-opacity: 1;
1665
1713
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
@@ -1892,6 +1940,11 @@ input[type="radio"]:checked::after {
1892
1940
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
1893
1941
  }
1894
1942
 
1943
+ .dark\:hover\:bg-gray-600:hover:is(.dark *) {
1944
+ --tw-bg-opacity: 1;
1945
+ background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
1946
+ }
1947
+
1895
1948
  .dark\:hover\:bg-gray-700:hover:is(.dark *) {
1896
1949
  --tw-bg-opacity: 1;
1897
1950
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
package/dist/index.d.mts CHANGED
@@ -32,6 +32,7 @@ interface FormField {
32
32
  id: string;
33
33
  type: FieldType;
34
34
  label: string;
35
+ fieldName?: string;
35
36
  placeholder?: string;
36
37
  description?: string;
37
38
  required?: boolean;
@@ -253,6 +254,8 @@ interface FormBuilderOptions {
253
254
  lookupSourceType: 'MODULE' | 'MASTER_TYPE';
254
255
  lookupSource: string;
255
256
  }) => void;
257
+ onProfileClick?: () => void;
258
+ onSettingsClick?: () => void;
256
259
  }
257
260
  declare class FormBuilder {
258
261
  private container;
@@ -304,7 +307,7 @@ declare class FormRenderer {
304
307
  constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void, onDropdownValueChange?: (event: {
305
308
  fieldId: string;
306
309
  value: string;
307
- }) => void);
310
+ }) => void, initialData?: Record<string, any>);
308
311
  setSchema(schema: FormSchema): void;
309
312
  private render;
310
313
  }
package/dist/index.d.ts CHANGED
@@ -32,6 +32,7 @@ interface FormField {
32
32
  id: string;
33
33
  type: FieldType;
34
34
  label: string;
35
+ fieldName?: string;
35
36
  placeholder?: string;
36
37
  description?: string;
37
38
  required?: boolean;
@@ -253,6 +254,8 @@ interface FormBuilderOptions {
253
254
  lookupSourceType: 'MODULE' | 'MASTER_TYPE';
254
255
  lookupSource: string;
255
256
  }) => void;
257
+ onProfileClick?: () => void;
258
+ onSettingsClick?: () => void;
256
259
  }
257
260
  declare class FormBuilder {
258
261
  private container;
@@ -304,7 +307,7 @@ declare class FormRenderer {
304
307
  constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void, onDropdownValueChange?: (event: {
305
308
  fieldId: string;
306
309
  value: string;
307
- }) => void);
310
+ }) => void, initialData?: Record<string, any>);
308
311
  setSchema(schema: FormSchema): void;
309
312
  private render;
310
313
  }
package/dist/index.js CHANGED
@@ -5368,7 +5368,8 @@ var ICONS = {
5368
5368
  "CreditCard": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />',
5369
5369
  "MapPin": '<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />',
5370
5370
  "Briefcase": '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.67.38-1.053.33-2.177.58-3.345.726-.26.032-.52.05-.778.066m-13.882-6.626h.008v.008h-.008v-.008zm1.096-3.837a48.116 48.116 0 00-3.413.387c-1.069.16-1.837 1.094-1.837 2.175v4.784c0 .493.196.958.536 1.344m0 0a17.8 17.8 0 013.344.726c.25.085.476.215.67.38m13.784-5.32c-.34-.386-.536-.851-.536-1.344v-4.784c0-1.081-.768-2.015-1.837-2.175a48.041 48.041 0 01-3.413-.387m-4.5 8.006c.194.165.42.295.67.38 1.053.33 2.177.58 3.345.726.26.032.52.05.778.066m0-7.384V5.626a2.25 2.25 0 00-2.25-2.25h-4.5a2.25 2.25 0 00-2.25 2.25v2.247M16.5 6h-9" />',
5371
- "Eye": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />'
5371
+ "Eye": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
5372
+ "Cog": '<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />'
5372
5373
  };
5373
5374
  function getIcon(name, size = 20) {
5374
5375
  const svgString = ICONS[name] || `<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />`;
@@ -5866,8 +5867,11 @@ function convertValidationToArray(validation) {
5866
5867
  rules.push({ type: "maxDate", value: obj.maxDate });
5867
5868
  return rules;
5868
5869
  }
5870
+ function getModelKey(field) {
5871
+ return field.fieldName ?? field.id;
5872
+ }
5869
5873
  var FormRenderer = class {
5870
- constructor(container, schema, onSubmit, onDropdownValueChange) {
5874
+ constructor(container, schema, onSubmit, onDropdownValueChange, initialData) {
5871
5875
  __publicField(this, "container");
5872
5876
  __publicField(this, "schema");
5873
5877
  __publicField(this, "data", {});
@@ -5877,6 +5881,9 @@ var FormRenderer = class {
5877
5881
  this.schema = schema;
5878
5882
  this.onSubmit = onSubmit;
5879
5883
  this.onDropdownValueChange = onDropdownValueChange;
5884
+ if (initialData && typeof initialData === "object") {
5885
+ this.data = { ...initialData };
5886
+ }
5880
5887
  this.render();
5881
5888
  }
5882
5889
  setSchema(schema) {
@@ -5891,7 +5898,8 @@ var FormRenderer = class {
5891
5898
  const sectionEl = createElement("div", { className: "space-y-3 md:space-y-4 !m-0" });
5892
5899
  sectionEl.appendChild(createElement("h2", { className: "text-xl font-semibold text-[#3b497e] dark:text-gray-200 border-b pb-2", text: section.title }));
5893
5900
  const grid = createElement("div", { className: "form-builder-grid" });
5894
- section.fields.forEach((field) => {
5901
+ const sortedFields = [...section.fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
5902
+ sortedFields.forEach((field) => {
5895
5903
  const isVisible = field.visible !== false;
5896
5904
  if (!isVisible) {
5897
5905
  return;
@@ -5905,8 +5913,9 @@ var FormRenderer = class {
5905
5913
  spanClass = getColSpanFromWidth(field.width || 100);
5906
5914
  }
5907
5915
  fieldWrapper.className = spanClass;
5908
- const fieldEl = FieldRenderer.render(field, this.data[field.id], (val) => {
5909
- this.data[field.id] = val;
5916
+ const modelKey = getModelKey(field);
5917
+ const fieldEl = FieldRenderer.render(field, this.data[modelKey], (val) => {
5918
+ this.data[modelKey] = val;
5910
5919
  if (field.type === "select" && this.onDropdownValueChange) {
5911
5920
  this.onDropdownValueChange({
5912
5921
  fieldId: field.id,
@@ -5933,7 +5942,8 @@ var FormRenderer = class {
5933
5942
  section.fields.forEach((field) => {
5934
5943
  if (field.visible === false)
5935
5944
  return;
5936
- const fieldValue = this.data[field.id];
5945
+ const modelKey = getModelKey(field);
5946
+ const fieldValue = this.data[modelKey];
5937
5947
  const fieldElement = form.querySelector(`input[id*="${field.id}"], textarea[id*="${field.id}"], select[id*="${field.id}"]`);
5938
5948
  if (!fieldElement) {
5939
5949
  const altElement = Array.from(form.querySelectorAll("input, textarea, select")).find((el) => {
@@ -8998,6 +9008,26 @@ var FormBuilder = class {
8998
9008
  left.appendChild(redoBtn);
8999
9009
  toolbar.appendChild(left);
9000
9010
  const right = createElement("div", { className: "flex items-center space-x-2" });
9011
+ const profileBtn = createElement("button", {
9012
+ className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400",
9013
+ title: "Profile",
9014
+ onclick: () => {
9015
+ if (this.options.onProfileClick) {
9016
+ this.options.onProfileClick();
9017
+ }
9018
+ }
9019
+ }, [getIcon("User", 20)]);
9020
+ right.appendChild(profileBtn);
9021
+ const settingsBtn = createElement("button", {
9022
+ className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400",
9023
+ title: "Settings",
9024
+ onclick: () => {
9025
+ if (this.options.onSettingsClick) {
9026
+ this.options.onSettingsClick();
9027
+ }
9028
+ }
9029
+ }, [getIcon("Cog", 20)]);
9030
+ right.appendChild(settingsBtn);
9001
9031
  const clearBtn = createElement("button", {
9002
9032
  className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-red-500 text-white rounded-md transition-colors",
9003
9033
  onclick: () => {