impaktapps-ui-builder 0.0.101-alpha.25 → 0.0.101-alpha.251

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 (30) hide show
  1. package/dist/impaktapps-ui-builder.es.js +475 -259
  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/card.d.ts +3 -5
  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 +21 -29
  12. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +8 -4
  13. package/src/impaktapps-ui-builder/builder/build/uischema/card.ts +11 -8
  14. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +1 -60
  15. package/src/impaktapps-ui-builder/builder/build/uischema/eventSection.ts +2 -2
  16. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +0 -52
  17. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +0 -50
  18. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +25 -28
  19. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +46 -159
  20. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +23 -97
  21. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.ts +15 -12
  22. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts +43 -259
  23. package/src/impaktapps-ui-builder/builder/services/component.ts +217 -56
  24. package/src/impaktapps-ui-builder/builder/services/event.ts +175 -58
  25. package/src/impaktapps-ui-builder/runtime/services/events.ts +8 -1
  26. package/src/impaktapps-ui-builder/runtime/services/service.ts +5 -111
  27. package/dist/src/impaktapps-ui-builder/builder/build/buildPdfViewer.d.ts +0 -1
  28. package/dist/src/impaktapps-ui-builder/builder/build/uischema/pdfViewer.d.ts +0 -19
  29. package/src/impaktapps-ui-builder/builder/build/buildPdfViewer.ts +0 -22
  30. package/src/impaktapps-ui-builder/builder/build/uischema/pdfViewer.ts +0 -18
@@ -6,6 +6,7 @@ export default function Card(theme: any): {
6
6
  position: string;
7
7
  top: string;
8
8
  transform: string;
9
+ marginBottom: number;
9
10
  };
10
11
  componentsBoxStyle: {
11
12
  boxShadow: string;
@@ -50,6 +51,7 @@ export default function Card(theme: any): {
50
51
  };
51
52
  wrapperStyle: {
52
53
  background: string;
54
+ marginBottom: number;
53
55
  };
54
56
  componentsBoxStyle: {
55
57
  flexDirection: string;
@@ -71,6 +73,7 @@ export default function Card(theme: any): {
71
73
  };
72
74
  wrapperStyle: {
73
75
  background: string;
76
+ marginBottom: number;
74
77
  };
75
78
  componentsBoxStyle: {
76
79
  flexDirection: string;
@@ -79,8 +82,6 @@ export default function Card(theme: any): {
79
82
  height: string;
80
83
  background: string;
81
84
  borderRadius: string;
82
- marginLeft: string;
83
- marginTop: string;
84
85
  justifyContent: string;
85
86
  position: string;
86
87
  };
@@ -105,7 +106,6 @@ export default function Card(theme: any): {
105
106
  background: string;
106
107
  justifyContent: string;
107
108
  width: string;
108
- margin: string;
109
109
  height: number;
110
110
  position?: undefined;
111
111
  left?: undefined;
@@ -132,7 +132,6 @@ export default function Card(theme: any): {
132
132
  background: string;
133
133
  justifyContent: string;
134
134
  width: string;
135
- margin: string;
136
135
  position: string;
137
136
  left: string;
138
137
  height?: undefined;
@@ -160,7 +159,6 @@ export default function Card(theme: any): {
160
159
  textWrap: string;
161
160
  background: string;
162
161
  width: string;
163
- margin: string;
164
162
  marginTop: {
165
163
  xs: string;
166
164
  md: string;
@@ -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.25",
3
+ "version": "0.0.101-alpha.251",
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";
@@ -40,7 +40,6 @@ import { buildDataGrid } from "./buildDataGrid";
40
40
  import { buildInputSlider } from "./buildInputSlider";
41
41
  import { buildTreeMap } from "./buildTreeMap";
42
42
  import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
43
- import { buildPdfViewer } from "./buildPdfViewer";
44
43
  export let schema = {
45
44
  type: "object",
46
45
  properties: {},
@@ -308,8 +307,6 @@ const buildUiSchema = (config: any, store?: any) => {
308
307
  case "Thought":
309
308
  elements = buildThoughtOfTheDay(config, componentScope);
310
309
  break;
311
- case "PdfViewer":
312
- elements = buildPdfViewer(config);
313
310
  break;
314
311
  default:
315
312
  schema = {
@@ -340,53 +337,48 @@ const buildUiSchema = (config: any, store?: any) => {
340
337
  elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : []
341
338
  }
342
339
  })
343
- }
344
- else if (config.type == "Table") {
340
+ } else if (config.type == "Table") {
345
341
  const sizeMap = {}
346
- const filterMap = {}
342
+
347
343
  if (config.sizeHolder) {
348
344
  config.sizeHolder.map((e, i) => {
349
345
  sizeMap[e.keyName] = e.value
350
346
  });
351
347
  }
352
- if(config.enableColumnFilter){
353
- config.enableColumnFilter.map((e)=>{
354
- filterMap[e.keyName] = true
355
- })
356
- }
348
+
357
349
  elements.elements = config.elements.map((cellElem, elemInd) => {
350
+ const commonProperties = {
351
+ accessorKey: cellElem.name,
352
+ type: cellElem.columnFormat,
353
+ header: cellElem.label || cellElem.name,
354
+ size: sizeMap[cellElem.name] || 180,
355
+ enableColumnFilter: cellElem.enableFilter === "No"?false:true,
356
+ columnFilterModeOptions: cellElem.filteringOptions,
357
+ enableSorting: cellElem.enableSorting === "No" ? false : true,
358
+ columnKey: cellElem.columnKey
359
+ }
358
360
  if (cellElem.type) {
359
361
  return {
360
- accessorKey: cellElem.name,
361
- header: cellElem.label || cellElem.name,
362
- size: sizeMap[cellElem.name] || 180,
363
- type: cellElem.columnFormat,
364
362
  widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
365
363
  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
364
+ ...commonProperties
365
+
368
366
  }
369
367
  } 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
- }
368
+ return commonProperties
378
369
  }
379
-
370
+
380
371
  })
381
372
  }
373
+
382
374
  else if (config.type == "Array") {
383
375
  elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
384
- return buildUiSchema(e,store)
376
+ return buildUiSchema(e, store)
385
377
  });
386
378
  }
387
379
  else {
388
380
  elements.elements = config.elements.map((e: any, elemInd: number) => {
389
- return buildUiSchema(e,store)
381
+ return buildUiSchema(e, store)
390
382
  });
391
383
  }
392
384
  }
@@ -90,11 +90,14 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
90
90
  return {
91
91
  type: "Control",
92
92
  scope: `#/properties/${parentScope}`,
93
+ options: {
94
+ widget: "Array"
95
+ },
93
96
  config: {
94
97
  layout: 12,
95
98
  main: {
96
- label: childScope,
97
- childElementLabel: childScope,
99
+ label: childLabel,
100
+ childElementLabel: childLabel,
98
101
  },
99
102
  style: {
100
103
  marginLeft: "-24px",
@@ -319,7 +322,7 @@ export const buildPropertiesSection = function (type: String) {
319
322
  case "Text":
320
323
  uiSchema.elements = [
321
324
  getInputField("placeholder", "Placeholder"),
322
- emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
325
+ getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
323
326
  emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
324
327
  getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
325
328
  ]
@@ -329,6 +332,7 @@ export const buildPropertiesSection = function (type: String) {
329
332
  getInputField("placeholder", "Placeholder"),
330
333
  getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
331
334
  getInputField("codeEditorLanguage", "Enter Code Language"),
335
+ emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 0, lg: 3 }),
332
336
  ]
333
337
  break;
334
338
 
@@ -415,7 +419,7 @@ export const buildPropertiesSection = function (type: String) {
415
419
  getInputField("xAxisValue", "X-AxisValue"),
416
420
  getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
417
421
  getInputField("leftMargin", "Left Margin"),
418
- emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
422
+ emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 6 }),
419
423
  getArrayControl("legendLabels", "label"),
420
424
  getArrayControl("pieArcColors", "color"),
421
425
  ];
@@ -6,7 +6,8 @@ export default function Card(theme){
6
6
  wrapperStyle: {
7
7
  position: "relative",
8
8
  top: "50%",
9
- transform: "translateY(-50%)"
9
+ transform: "translateY(-50%)",
10
+ marginBottom: 0
10
11
  },
11
12
  componentsBoxStyle: {
12
13
  boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
@@ -46,6 +47,7 @@ export default function Card(theme){
46
47
  },
47
48
  wrapperStyle: {
48
49
  background: "transparent",
50
+ marginBottom: 0
49
51
  },
50
52
  componentsBoxStyle: {
51
53
  flexDirection: "column",
@@ -67,6 +69,7 @@ export default function Card(theme){
67
69
  },
68
70
  wrapperStyle: {
69
71
  background: "transparent",
72
+ marginBottom: 0
70
73
  },
71
74
  componentsBoxStyle: {
72
75
  flexDirection: "row",
@@ -75,8 +78,8 @@ export default function Card(theme){
75
78
  height: "0",
76
79
  background: "transparent",
77
80
  borderRadius: "0px",
78
- marginLeft: "-10px",
79
- marginTop: "-8px",
81
+ // marginLeft: "-10px",
82
+ // marginTop: "-8px",
80
83
  justifyContent: "start",
81
84
  position: "relative"
82
85
  },
@@ -98,7 +101,7 @@ export default function Card(theme){
98
101
  background: "inherit",
99
102
  justifyContent: "flex-start",
100
103
  width: "auto",
101
- margin: "-8px",
104
+ // margin: "-8px",
102
105
  height: 0
103
106
  },
104
107
  // layout: 1,
@@ -122,9 +125,9 @@ export default function Card(theme){
122
125
  background: "inherit",
123
126
  justifyContent: "flex-start",
124
127
  width: "auto",
125
- margin: "-8px",
128
+ // margin: "-8px",
126
129
  position: "absolute",
127
- left: "8px"
130
+ left: "0px"
128
131
  },
129
132
  // layout: 11,
130
133
  },
@@ -147,8 +150,8 @@ export default function Card(theme){
147
150
  justifyContent: "center",
148
151
  textWrap: "wrap",
149
152
  background: "inherit",
150
- width: "calc(100%+8px)",
151
- margin: "-8px",
153
+ width: "100%",
154
+ // margin: "-8px",
152
155
  marginTop: {xs: "0px", md: "12px"},
153
156
  lineHeight: "1",
154
157
  },
@@ -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",