impaktapps-ui-builder 0.0.101-alpha.22 → 0.0.101-alpha.221

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 (25) hide show
  1. package/dist/impaktapps-ui-builder.es.js +562 -285
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +15 -15
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/dist/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.d.ts +10 -10
  6. package/dist/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.d.ts +6 -0
  7. package/dist/src/impaktapps-ui-builder/builder/services/component.d.ts +2 -0
  8. package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts +8 -0
  9. package/package.json +1 -1
  10. package/src/impaktapps-ui-builder/builder/build/buildText.ts +21 -18
  11. package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts +18 -19
  12. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +88 -73
  13. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +1 -60
  14. package/src/impaktapps-ui-builder/builder/build/uischema/eventSection.ts +2 -2
  15. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +0 -52
  16. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +0 -50
  17. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +25 -27
  18. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +46 -159
  19. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +23 -97
  20. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.ts +15 -12
  21. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts +43 -259
  22. package/src/impaktapps-ui-builder/builder/services/component.ts +217 -56
  23. package/src/impaktapps-ui-builder/builder/services/event.ts +175 -59
  24. package/src/impaktapps-ui-builder/runtime/services/events.ts +8 -1
  25. package/src/impaktapps-ui-builder/runtime/services/service.ts +5 -111
@@ -1,3 +1,13 @@
1
+ export declare const emptyBox: (scope: string, layout?: any) => {
2
+ type: string;
3
+ scope: string;
4
+ options: {
5
+ widget: string;
6
+ };
7
+ config: {
8
+ layout: any;
9
+ };
10
+ };
1
11
  export declare const getRadioInputField: (scope: String, label: String, options: string[]) => {
2
12
  type: string;
3
13
  scope: string;
@@ -24,16 +34,6 @@ export declare const buildWrapper: (label: string, elements: any[]) => {
24
34
  label: string;
25
35
  isAccordion: boolean;
26
36
  };
27
- wrapperStyle: {
28
- marginTop: string;
29
- marginBottom: string;
30
- marginLeft: string;
31
- width: string;
32
- };
33
- componentsBoxStyle: {
34
- marginLeft: string;
35
- };
36
- defaultStyle: boolean;
37
37
  };
38
38
  elements: any[];
39
39
  };
@@ -71,6 +71,12 @@ export declare const EventSchema: {
71
71
  RemoveItemButton: {
72
72
  disabled: boolean;
73
73
  };
74
+ pageName: {
75
+ path: {
76
+ label: string;
77
+ path: string;
78
+ }[];
79
+ };
74
80
  };
75
81
  required: string[];
76
82
  };
@@ -22,5 +22,7 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
22
22
  RemoveItemButton: (paramStore?: any) => void;
23
23
  elementPathHandler: (parentPath: string, rowId: any, elementType: string) => string;
24
24
  ElementPathSetter: (uiSchema: any, copiedFormData?: any) => void;
25
+ onNavigatePopupYes: () => void;
26
+ onNavigatePopupNo: () => void;
25
27
  };
26
28
  export default _default;
@@ -79,6 +79,12 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
79
79
  RemoveItemButton: {
80
80
  disabled: boolean;
81
81
  };
82
+ pageName: {
83
+ path: {
84
+ label: string;
85
+ path: string;
86
+ }[];
87
+ };
82
88
  };
83
89
  required: string[];
84
90
  };
@@ -92,5 +98,7 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
92
98
  deletePopUpEvent: () => void;
93
99
  copyPasteElement: () => void;
94
100
  RemoveItemButton: () => void;
101
+ onNavigatePopupYes: () => void;
102
+ onNavigatePopupNo: () => void;
95
103
  };
96
104
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impaktapps-ui-builder",
3
- "version": "0.0.101-alpha.22",
3
+ "version": "0.0.101-alpha.221",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "tsc && vite build",
@@ -2,22 +2,25 @@ import _ from "lodash";
2
2
  import TextInputField from "./uischema/textInputField";
3
3
  import { createLayoutFormat } from "./buildConfig";
4
4
 
5
- export const buildTextField = (config:any,componentScope:string) =>{
6
- const inputField: any = _.cloneDeep(TextInputField);
7
- inputField.config.main.label = config.label;
8
- if (config.style) {
9
- inputField.config.style = JSON.parse(config.style)
10
- }
11
- if (config.InputFormatingAndMasking) {
12
- inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
13
- }
14
- if (config.placeholder) {
15
- inputField.config.main.placeholder = config.placeholder;
16
- }
17
- if (config.layout) {
18
- inputField.config.layout = createLayoutFormat(config.layout)
19
- }
20
- inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
21
- inputField.scope = componentScope;
22
- return inputField;
5
+ export const buildTextField = (config: any, componentScope: string) => {
6
+ const inputField: any = _.cloneDeep(TextInputField);
7
+ inputField.config.main.label = config.label;
8
+ if (config.style) {
9
+ inputField.config.style = JSON.parse(config.style)
10
+ }
11
+ if (config.multiline) {
12
+ inputField.config.main.multiline = config.multiline === "YES" ? true : false;
13
+ }
14
+ if (config.InputFormatingAndMasking) {
15
+ inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
16
+ }
17
+ if (config.placeholder) {
18
+ inputField.config.main.placeholder = config.placeholder;
19
+ }
20
+ if (config.layout) {
21
+ inputField.config.layout = createLayoutFormat(config.layout)
22
+ }
23
+ inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
24
+ inputField.scope = componentScope;
25
+ return inputField;
23
26
  }
@@ -14,7 +14,7 @@ import { buildWrapperSection } from "./buildWrapperSection";
14
14
  import { buildTextField } from "./buildText";
15
15
  import { buildSelect } from "./buildSelect";
16
16
  import { buildButton } from "./buildButton";
17
- import { buildTable } from "./buildTable";
17
+ import { buildTable } from "./buildTable";
18
18
  import { buildLabel } from "./buildLabel";
19
19
  import { buildUploadFile } from "./buildUplaodFile";
20
20
  import { buildDownloadFile } from "./buildDownloadFile";
@@ -349,44 +349,43 @@ const buildUiSchema = (config: any, store?: any) => {
349
349
  sizeMap[e.keyName] = e.value
350
350
  });
351
351
  }
352
- if(config.enableColumnFilter){
353
- config.enableColumnFilter.map((e)=>{
352
+ if (config.enableColumnFilter) {
353
+ config.enableColumnFilter.map((e) => {
354
354
  filterMap[e.keyName] = true
355
355
  })
356
356
  }
357
357
  elements.elements = config.elements.map((cellElem, elemInd) => {
358
+ const commonProperties = {
359
+ accessorKey: cellElem.name,
360
+ type: cellElem.columnFormat,
361
+ header: cellElem.label || cellElem.name,
362
+ size: sizeMap[cellElem.name] || 180,
363
+ enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
364
+ columnFilterModeOptions: config.filteringOptions,
365
+ enableSorting: config.enableSorting === "No" ? false : true,
366
+ columnKey: config.columnKey
367
+ }
358
368
  if (cellElem.type) {
359
369
  return {
360
- accessorKey: cellElem.name,
361
- header: cellElem.label || cellElem.name,
362
- size: sizeMap[cellElem.name] || 180,
363
- type: cellElem.columnFormat,
364
370
  widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
365
371
  elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : [],
366
- enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
367
- columnFilterModeOptions: config.filteringOptions
372
+ ...commonProperties
373
+
368
374
  }
369
375
  } else {
370
- return {
371
- accessorKey: cellElem.name,
372
- type: cellElem.columnFormat,
373
- header: cellElem.label || cellElem.name,
374
- size: sizeMap[cellElem.name] || 180,
375
- enableColumnFilter: Object.keys(filterMap).length === 0 ? true : filterMap[cellElem.name] ?? false,
376
- columnFilterModeOptions: config.filteringOptions
377
- }
376
+ return commonProperties
378
377
  }
379
378
 
380
379
  })
381
380
  }
382
381
  else if (config.type == "Array") {
383
382
  elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
384
- return buildUiSchema(e,store)
383
+ return buildUiSchema(e, store)
385
384
  });
386
385
  }
387
386
  else {
388
387
  elements.elements = config.elements.map((e: any, elemInd: number) => {
389
- return buildUiSchema(e,store)
388
+ return buildUiSchema(e, store)
390
389
  });
391
390
  }
392
391
  }
@@ -1,8 +1,6 @@
1
1
 
2
2
  import _ from "lodash";
3
- import { buildLabel } from "../buildLabel";
4
- import Box from "./box";
5
- const emptyBox = (scope:string,layout?: any) => {
3
+ export const emptyBox = (scope:string,layout?: any) => {
6
4
 
7
5
  if(layout !== undefined){
8
6
  return {
@@ -31,82 +29,108 @@ const emptyBox = (scope:string,layout?: any) => {
31
29
  const cardLayout = {
32
30
  type: "Control",
33
31
  scope: "#/properties/cardLayout",
34
- layout: 11.5,
35
32
  options: {
36
- detail: {
37
- type: "HorizontalLayout",
38
- elements: [
39
- {
40
- type: "Control",
41
- scope: "#/properties/key",
42
- options: {
43
- widget: "SelectInputField",
44
- },
45
- config: {
46
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
47
- main: {
48
- label: "Screen Size",
33
+ widget: "Array",
34
+ },
35
+ config: {
36
+ layout: 12,
37
+ main: {
38
+ label: "Card Layout",
39
+ childElementLabel: "Card Layout",
40
+ },
41
+ style: {
42
+ marginLeft: "-24px",
43
+ marginBottom: "24px !important",
44
+ labelStyle: {
45
+ marginLeft: "24px",
46
+ },
47
+ detailsStyle: {
48
+ marginLeft: "24px",
49
+ }
50
+ }
51
+ },
52
+ elements: [
53
+ {
54
+ type: "Control",
55
+ scope: "#/properties/key",
56
+ options: {
57
+ widget: "SelectInputField",
58
+ },
59
+ config: {
60
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
61
+ main: {
62
+ label: "Screen Size",
49
63
 
50
- },
51
- },
52
64
  },
53
- {
54
- type: "Control",
55
- scope: "#/properties/value",
65
+ },
66
+ },
67
+ {
68
+ type: "Control",
69
+ scope: "#/properties/value",
56
70
 
57
- options: {
58
- widget: "InputField",
59
- },
60
- config: {
61
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
62
- main: {
63
- label: "Value",
64
- type: "number",
65
- // freeSolo:true,
66
- helperText: 'Number should be in range of 0 to 12',
67
- errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
71
+ options: {
72
+ widget: "InputField",
73
+ },
74
+ config: {
75
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
76
+ main: {
77
+ label: "Value",
78
+ type: "number",
79
+ // freeSolo:true,
80
+ helperText: 'Number should be in range of 0 to 12',
81
+ errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
68
82
 
69
- },
70
- },
71
83
  },
72
- emptyBox("cardEmpty")
73
- ],
84
+ },
74
85
  },
75
- },
86
+ emptyBox("cardEmpty")
87
+ ],
76
88
  };
77
89
  const getArrayControl = (parentScope: string, childScope: string, childLabel?: string,) => {
78
90
  return {
79
91
  type: "Control",
80
92
  scope: `#/properties/${parentScope}`,
81
- layout: 12,
82
93
  options: {
83
- "elementLabelProp": childScope,
84
- detail: {
85
- type: "HorizontalLayout",
86
- elements: [
87
- {
88
- type: "Control",
89
- scope: `#/properties/${childScope}`,
94
+ widget: "Array"
95
+ },
96
+ config: {
97
+ layout: 12,
98
+ main: {
99
+ label: childLabel,
100
+ childElementLabel: childLabel,
101
+ },
102
+ style: {
103
+ marginLeft: "-24px",
104
+ marginBottom: "24px !important",
105
+ labelStyle: {
106
+ marginLeft: "24px",
107
+ },
108
+ detailsStyle: {
109
+ marginLeft: "24px",
110
+ }
111
+ }
112
+ },
113
+ elements: [
114
+ {
115
+ type: "Control",
116
+ scope: `#/properties/${childScope}`,
90
117
 
91
- options: {
92
- widget: "InputField",
93
- },
94
- config: {
95
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
96
- main: {
97
- label: childLabel || "Labels for Tab",
98
- },
99
- },
118
+ options: {
119
+ widget: "InputField",
120
+ },
121
+ config: {
122
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
123
+ main: {
124
+ label: childLabel || "Labels for Tab",
100
125
  },
101
- emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
102
- emptyBox("ArrayControlEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })
103
- ],
126
+ },
104
127
  },
105
- },
128
+ emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 8, lg: 8 }),
129
+ ],
106
130
  }
107
131
  };
108
132
  const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
109
- sizeHolder.options.detail.elements[1] = {
133
+ sizeHolder.elements[1] = {
110
134
  type: "Control",
111
135
  scope: `#/properties/value`,
112
136
 
@@ -120,7 +144,7 @@ sizeHolder.options.detail.elements[1] = {
120
144
  },
121
145
  },
122
146
  };
123
- sizeHolder.options.detail.elements[2] = emptyBox("sizeHolderempty")
147
+ sizeHolder.elements[2] = emptyBox("sizeHolderempty")
124
148
  const getInputField = (scope: String, label: String) => {
125
149
  return {
126
150
  type: "Control",
@@ -164,16 +188,6 @@ export const buildWrapper = (label: string, elements: any[]) => {
164
188
  label: label || "Details",
165
189
  isAccordion: true,
166
190
  },
167
- wrapperStyle: {
168
- marginTop: '-6px',
169
- marginBottom: '-8px',
170
- marginLeft: "-34px",
171
- width: "108%"
172
- },
173
- componentsBoxStyle: {
174
- marginLeft: "12px",
175
- },
176
- defaultStyle: true
177
191
  },
178
192
  elements: elements || []
179
193
  }
@@ -308,7 +322,7 @@ export const buildPropertiesSection = function (type: String) {
308
322
  case "Text":
309
323
  uiSchema.elements = [
310
324
  getInputField("placeholder", "Placeholder"),
311
- emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
325
+ getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
312
326
  emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
313
327
  getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
314
328
  ]
@@ -318,6 +332,7 @@ export const buildPropertiesSection = function (type: String) {
318
332
  getInputField("placeholder", "Placeholder"),
319
333
  getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
320
334
  getInputField("codeEditorLanguage", "Enter Code Language"),
335
+ emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 0, lg: 3 }),
321
336
  ]
322
337
  break;
323
338
 
@@ -404,7 +419,7 @@ export const buildPropertiesSection = function (type: String) {
404
419
  getInputField("xAxisValue", "X-AxisValue"),
405
420
  getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
406
421
  getInputField("leftMargin", "Left Margin"),
407
- emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
422
+ emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 6 }),
408
423
  getArrayControl("legendLabels", "label"),
409
424
  getArrayControl("pieArcColors", "color"),
410
425
  ];
@@ -214,63 +214,4 @@ export const CoreSection = {
214
214
  ],
215
215
  },
216
216
  ],
217
- };
218
-
219
- // export const OptionArray: any = {
220
- // type: "Control",
221
- // scope: "#/properties/value",
222
- // layout: 11.5,
223
- // options: {
224
- // detail: {
225
- // type: "HorizontalLayout",
226
- // elements: [
227
- // {
228
- // type: "Control",
229
- // scope: "#/properties/label",
230
- // options: {
231
- // widget: "SelectInputField",
232
- // },
233
- // config: {
234
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
235
- // main: {
236
- // label: "Label",
237
- // },
238
- // },
239
- // },
240
- // {
241
- // type: "Control",
242
- // scope: "#/properties/value",
243
-
244
- // options: {
245
- // widget: "InputField",
246
- // },
247
- // config: {
248
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
249
- // main: {
250
- // label: "Value",
251
- // helperText: 'Number should be in range of 0 to 12',
252
- // errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
253
- // },
254
- // },
255
- // },
256
- // ],
257
- // },
258
- // },
259
- // };
260
-
261
- // export const OptionArraySchema = {
262
- // value: {
263
- // type: "array",
264
- // items: {
265
- // type: "object",
266
- // properties: {
267
- // label: {
268
- // type: "string",
269
- // },
270
- // value: {
271
- // type: "string",
272
- // },
273
- // },
274
- // },
275
- // },
276
- // };
217
+ };
@@ -79,7 +79,7 @@ export const EventSection = (theme)=>{
79
79
 
80
80
  {
81
81
  accessorKey: "eventType",
82
- header: "Event Type",
82
+ header: "Event's Type",
83
83
  type: "string",
84
84
  size: 300,
85
85
  },
@@ -91,7 +91,7 @@ export const EventSection = (theme)=>{
91
91
  },
92
92
  {
93
93
  accessorKey: "Edit_Approve_Records",
94
- header: "Edit Widget",
94
+ header: "Edit",
95
95
  size: 150,
96
96
  type: "action",
97
97
  widget: {
@@ -7,58 +7,6 @@ export const ValidationSection = {
7
7
  }
8
8
  },
9
9
  elements: [
10
- // {
11
- // type: "Control",
12
- // scope: "#/properties/validation",
13
- // layout: 11.5,
14
- // options: {
15
- // "elementLabelProp": "validationType",
16
- // detail: {
17
- // type: "HorizontalLayout",
18
- // elements: [
19
- // {
20
- // type: "Control",
21
- // scope: "#/properties/validationType",
22
-
23
- // options: {
24
- // widget: "SelectInputField",
25
- // },
26
- // config: {
27
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
28
- // main: {
29
- // label: "Validation Type",
30
- // },
31
- // },
32
- // },
33
- // {
34
- // type: "Control",
35
- // scope: "#/properties/validationValue",
36
-
37
- // options: {
38
- // widget: "InputField",
39
- // },
40
- // config: {
41
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
42
- // main: {
43
- // label: "Validation Value",
44
- // },
45
- // },
46
- // },
47
- // {
48
- // type: "Control",
49
- // scope: "#/properties/emptyBox",
50
- // options: {
51
- // widget: "EmptyBox"
52
- // },
53
- // config: {
54
- // layout: {xs: 0, sm: 0, md: 4}
55
- // }
56
- // }
57
- // ],
58
- // },
59
- // },
60
-
61
- // },
62
10
  {
63
11
  type: "Control",
64
12
  scope: "#/properties/validation",
@@ -7,56 +7,6 @@ export const ValueTab = {
7
7
  }
8
8
  },
9
9
  elements: [
10
- // {
11
- // type: "Control",
12
- // scope: "#/properties/value",
13
- // layout: 12,
14
- // options: {
15
- // detail: {
16
- // type: "HorizontalLayout",
17
- // elements: [
18
- // {
19
- // type: "Control",
20
- // scope: "#/properties/label",
21
- // options: {
22
- // widget: "InputField",
23
- // },
24
- // config: {
25
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
26
- // main: {
27
- // label: "Label",
28
- // },
29
- // },
30
- // },
31
- // {
32
- // type: "Control",
33
- // scope: "#/properties/value",
34
-
35
- // options: {
36
- // widget: "InputField",
37
- // },
38
- // config: {
39
- // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
40
- // main: {
41
- // label: "Value",
42
-
43
- // },
44
- // },
45
- // },
46
- // {
47
- // type: "Control",
48
- // scope: "#/properties/emptyBox",
49
- // options: {
50
- // widget: "EmptyBox"
51
- // },
52
- // config: {
53
- // layout: { xs: 0, sm: 0, md: 4, lg: 4 },
54
- // }
55
- // }
56
- // ],
57
- // },
58
- // },
59
- // }
60
10
  {
61
11
  type: "Control",
62
12
  scope: "#/properties/value",