impaktapps-ui-builder 0.0.101-alpha.267 → 0.0.101-alpha.268

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 (21) hide show
  1. package/dist/impaktapps-ui-builder.es.js +268 -206
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +13 -13
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/dist/src/impaktapps-ui-builder/builder/build/buildPhoneInput.d.ts +1 -0
  6. package/dist/src/impaktapps-ui-builder/builder/build/uischema/coreSection.d.ts +83 -71
  7. package/dist/src/impaktapps-ui-builder/builder/build/uischema/phoneInput.d.ts +20 -0
  8. package/dist/src/impaktapps-ui-builder/builder/build/uischema/table.d.ts +0 -1
  9. package/dist/src/impaktapps-ui-builder/builder/build/uischema/validationSections.d.ts +50 -37
  10. package/package.json +1 -1
  11. package/src/impaktapps-ui-builder/builder/build/buildPhoneInput.ts +26 -0
  12. package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts +13 -28
  13. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +49 -95
  14. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +118 -118
  15. package/src/impaktapps-ui-builder/builder/build/uischema/phoneInput.ts +16 -0
  16. package/src/impaktapps-ui-builder/builder/build/uischema/table.ts +0 -1
  17. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +60 -114
  18. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +2 -9
  19. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +63 -118
  20. package/src/impaktapps-ui-builder/builder/services/component.ts +7 -10
  21. package/src/impaktapps-ui-builder/runtime/services/service.ts +1 -2
@@ -0,0 +1 @@
1
+ export declare const buildPhoneInputField: (config: any, componentScope: string) => any;
@@ -11,8 +11,6 @@ export declare const CoreSection: {
11
11
  scope: string;
12
12
  options: {
13
13
  widget: string;
14
- elementLabelProp?: undefined;
15
- detail?: undefined;
16
14
  };
17
15
  config: {
18
16
  layout: {
@@ -25,9 +23,11 @@ export declare const CoreSection: {
25
23
  label: string;
26
24
  type: string;
27
25
  required?: undefined;
26
+ childElementLabel?: undefined;
28
27
  };
28
+ style?: undefined;
29
29
  };
30
- layout?: undefined;
30
+ elements?: undefined;
31
31
  } | {
32
32
  type: string;
33
33
  scope: string;
@@ -39,20 +39,17 @@ export declare const CoreSection: {
39
39
  lg: number;
40
40
  };
41
41
  main?: undefined;
42
+ style?: undefined;
42
43
  };
43
44
  options: {
44
45
  widget: string;
45
- elementLabelProp?: undefined;
46
- detail?: undefined;
47
46
  };
48
- layout?: undefined;
47
+ elements?: undefined;
49
48
  } | {
50
49
  type: string;
51
50
  scope: string;
52
51
  options: {
53
52
  widget: string;
54
- elementLabelProp?: undefined;
55
- detail?: undefined;
56
53
  };
57
54
  config: {
58
55
  layout: {
@@ -65,76 +62,91 @@ export declare const CoreSection: {
65
62
  label: string;
66
63
  required: boolean;
67
64
  type?: undefined;
65
+ childElementLabel?: undefined;
68
66
  };
67
+ style?: undefined;
69
68
  };
70
- layout?: undefined;
69
+ elements?: undefined;
71
70
  } | {
72
71
  type: string;
73
72
  scope: string;
74
- layout: number;
75
73
  options: {
76
- elementLabelProp: string;
77
- detail: {
78
- type: string;
79
- elements: ({
80
- type: string;
81
- scope: string;
82
- options: {
83
- widget: string;
84
- };
85
- config: {
86
- layout: {
87
- xs: number;
88
- sm: number;
89
- md: number;
90
- lg: number;
91
- };
92
- main: {
93
- label: string;
94
- type?: undefined;
95
- helperText?: undefined;
96
- errorMessage?: undefined;
97
- };
98
- };
99
- } | {
100
- type: string;
101
- scope: string;
102
- options: {
103
- widget: string;
104
- };
105
- config: {
106
- layout: {
107
- xs: number;
108
- sm: number;
109
- md: number;
110
- lg: number;
111
- };
112
- main: {
113
- label: string;
114
- type: string;
115
- helperText: string;
116
- errorMessage: string;
117
- };
118
- };
119
- } | {
120
- type: string;
121
- scope: string;
122
- config: {
123
- layout: {
124
- xs: number;
125
- sm: number;
126
- md: number;
127
- lg: number;
128
- };
129
- main?: undefined;
130
- };
131
- options: {
132
- widget: string;
133
- };
134
- })[];
74
+ widget: string;
75
+ };
76
+ config: {
77
+ layout: number;
78
+ main: {
79
+ label: string;
80
+ childElementLabel: string;
81
+ type?: undefined;
82
+ required?: undefined;
83
+ };
84
+ style: {
85
+ marginLeft: string;
86
+ marginBottom: string;
87
+ labelStyle: {
88
+ marginLeft: string;
89
+ };
90
+ detailsStyle: {
91
+ marginLeft: string;
92
+ };
135
93
  };
136
- widget?: undefined;
137
94
  };
138
- config?: undefined;
95
+ elements: ({
96
+ type: string;
97
+ scope: string;
98
+ options: {
99
+ widget: string;
100
+ };
101
+ config: {
102
+ layout: {
103
+ xs: number;
104
+ sm: number;
105
+ md: number;
106
+ lg: number;
107
+ };
108
+ main: {
109
+ label: string;
110
+ type?: undefined;
111
+ helperText?: undefined;
112
+ errorMessage?: undefined;
113
+ };
114
+ };
115
+ } | {
116
+ type: string;
117
+ scope: string;
118
+ options: {
119
+ widget: string;
120
+ };
121
+ config: {
122
+ layout: {
123
+ xs: number;
124
+ sm: number;
125
+ md: number;
126
+ lg: number;
127
+ };
128
+ main: {
129
+ label: string;
130
+ type: string;
131
+ helperText: string;
132
+ errorMessage: string;
133
+ };
134
+ };
135
+ } | {
136
+ type: string;
137
+ scope: string;
138
+ config: {
139
+ layout: {
140
+ xs: number;
141
+ sm: number;
142
+ md: number;
143
+ lg: number;
144
+ };
145
+ main?: undefined;
146
+ };
147
+ options: {
148
+ widget: string;
149
+ };
150
+ })[];
139
151
  })[];
140
152
  };
@@ -0,0 +1,20 @@
1
+ declare const PhoneInput: {
2
+ scope: string;
3
+ type: string;
4
+ options: {
5
+ widget: string;
6
+ };
7
+ config: {
8
+ layout: {
9
+ xs: number;
10
+ sm: number;
11
+ md: number;
12
+ lg: number;
13
+ };
14
+ main: {
15
+ defaultCountry: string;
16
+ label: string;
17
+ };
18
+ };
19
+ };
20
+ export default PhoneInput;
@@ -9,7 +9,6 @@ declare const _default: {
9
9
  main: {
10
10
  onMount: string;
11
11
  enableExpandAll: boolean;
12
- headerIcons: {};
13
12
  allRowData: any[];
14
13
  downloadAllData: boolean;
15
14
  columns: {
@@ -9,45 +9,58 @@ export declare const ValidationSection: {
9
9
  elements: {
10
10
  type: string;
11
11
  scope: string;
12
- layout: number;
13
12
  options: {
14
- elementLabelProp: string;
15
- detail: {
16
- type: string;
17
- elements: ({
18
- type: string;
19
- scope: string;
20
- options: {
21
- widget: string;
22
- };
23
- config: {
24
- layout: {
25
- xs: number;
26
- sm: number;
27
- md: number;
28
- lg: number;
29
- };
30
- main: {
31
- label: string;
32
- };
33
- };
34
- } | {
35
- type: string;
36
- scope: string;
37
- options: {
38
- widget: string;
39
- };
40
- config: {
41
- layout: {
42
- xs: number;
43
- sm: number;
44
- md: number;
45
- lg?: undefined;
46
- };
47
- main?: undefined;
48
- };
49
- })[];
13
+ widget: string;
14
+ };
15
+ config: {
16
+ layout: number;
17
+ main: {
18
+ label: string;
19
+ childElementLabel: string;
20
+ };
21
+ style: {
22
+ marginLeft: string;
23
+ marginBottom: string;
24
+ labelStyle: {
25
+ marginLeft: string;
26
+ };
27
+ detailsStyle: {
28
+ marginLeft: string;
29
+ };
50
30
  };
51
31
  };
32
+ elements: ({
33
+ type: string;
34
+ scope: string;
35
+ options: {
36
+ widget: string;
37
+ };
38
+ config: {
39
+ layout: {
40
+ xs: number;
41
+ sm: number;
42
+ md: number;
43
+ lg: number;
44
+ };
45
+ main: {
46
+ label: string;
47
+ };
48
+ };
49
+ } | {
50
+ type: string;
51
+ scope: string;
52
+ options: {
53
+ widget: string;
54
+ };
55
+ config: {
56
+ layout: {
57
+ xs: number;
58
+ sm: number;
59
+ md: number;
60
+ lg: number;
61
+ };
62
+ main?: undefined;
63
+ };
64
+ })[];
52
65
  }[];
53
66
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impaktapps-ui-builder",
3
- "version": "0.0.101-alpha.267",
3
+ "version": "0.0.101-alpha.268",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "tsc && vite build",
@@ -0,0 +1,26 @@
1
+ import _ from "lodash";
2
+ import PhoneInput from "./uischema/phoneInput";
3
+ import { createLayoutFormat } from "./buildConfig";
4
+
5
+ export const buildPhoneInputField = (config: any, componentScope: string) => {
6
+ const phonInputField: any = _.cloneDeep(PhoneInput);
7
+ phonInputField.config.main.label = config.label;
8
+ if (config.style) {
9
+ phonInputField.config.style = JSON.parse(config.style)
10
+ }
11
+ // if (config.multiline) {
12
+ // phonInputField.config.main.multiline = config.multiline === "YES" ? true : false;
13
+ // }
14
+ if (config.InputFormatingAndMasking) {
15
+ phonInputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
16
+ }
17
+ if (config.placeholder) {
18
+ phonInputField.config.main.placeholder = config.placeholder;
19
+ }
20
+ if (config.layout) {
21
+ phonInputField.config.layout = createLayoutFormat(config.layout)
22
+ }
23
+ phonInputField.config.main.errorMessage = `${config.name} is empty or invalid`;
24
+ phonInputField.scope = componentScope;
25
+ return phonInputField;
26
+ }
@@ -1,6 +1,4 @@
1
1
  import _ from "lodash";
2
- import emptyBox from "./uischema/emptyBox";
3
- import cardSlider from "./uischema/cardSlider";
4
2
  import { buildLeaderBoard } from "./buildLeaderboard";
5
3
  import { buildProgressBarCard } from "./buildProgressBarCard";
6
4
  import { buildProgressBar } from "./buildProgressBar";
@@ -40,6 +38,7 @@ import { buildDataGrid } from "./buildDataGrid";
40
38
  import { buildInputSlider } from "./buildInputSlider";
41
39
  import { buildTreeMap } from "./buildTreeMap";
42
40
  import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
41
+ import { buildPhoneInputField } from "./buildPhoneInput";
43
42
  export let schema = {
44
43
  type: "object",
45
44
  properties: {},
@@ -307,6 +306,8 @@ const buildUiSchema = (config: any, store?: any) => {
307
306
  case "Thought":
308
307
  elements = buildThoughtOfTheDay(config, componentScope);
309
308
  break;
309
+ case "PhoneInput":
310
+ elements = buildPhoneInputField(config, componentScope);
310
311
  break;
311
312
  default:
312
313
  schema = {
@@ -337,56 +338,40 @@ const buildUiSchema = (config: any, store?: any) => {
337
338
  elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : []
338
339
  }
339
340
  })
340
- } else if (config.type == "Table") {
341
+ } else if (config.type == "Table") {
341
342
  const sizeMap = {}
342
-
343
+
343
344
  if (config.sizeHolder) {
344
345
  config.sizeHolder.map((e, i) => {
345
346
  sizeMap[e.keyName] = e.value
346
347
  });
347
348
  }
348
- const tableHeaderElements = [];
349
- const tableActionElement = [];
350
- const rowElements = []
351
- config.elements.filter((cellElem, elemInd) => {
349
+
350
+ elements.elements = config.elements.map((cellElem, elemInd) => {
352
351
  const commonProperties = {
353
352
  accessorKey: cellElem.name,
354
353
  type: cellElem.columnFormat,
355
354
  header: cellElem.label || cellElem.name,
356
355
  size: sizeMap[cellElem.name] || 180,
357
- enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
356
+ enableColumnFilter: cellElem.enableFilter === "No"?false:true,
358
357
  columnFilterModeOptions: cellElem.filteringOptions,
359
358
  enableSorting: cellElem.enableSorting === "No" ? false : true,
360
359
  columnKey: cellElem.columnKey
361
360
  }
362
361
  if (cellElem.type) {
363
- if (cellElem.elementType == "action") {
364
- const actionElem = buildUiSchema(cellElem, store);
365
- tableActionElement.push(actionElem);
366
- return false;
367
- }
368
- if (cellElem.elementType == "tableHeader") {
369
- const headerElem = buildUiSchema(cellElem, store);
370
- tableHeaderElements.push({widget:headerElem});
371
- return false;
372
- }
373
- const tableElem = {
362
+ return {
374
363
  widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
375
364
  elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : [],
376
365
  ...commonProperties
377
-
366
+
378
367
  }
379
- rowElements.push(tableElem)
380
368
  } else {
381
- rowElements.push({ ...commonProperties })
369
+ return commonProperties
382
370
  }
383
-
371
+
384
372
  })
385
- elements.elements = rowElements;
386
- elements.config.action = tableActionElement;
387
- elements.config.main.headerIcons.elements = tableHeaderElements;
388
373
  }
389
-
374
+
390
375
  else if (config.type == "Array") {
391
376
  elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
392
377
  return buildUiSchema(e, store)
@@ -26,111 +26,65 @@ export const emptyBox = (scope:string,layout?: any) => {
26
26
  },
27
27
  }
28
28
  }
29
- // const cardLayout = {
30
- // type: "Control",
31
- // scope: "#/properties/cardLayout",
32
- // options: {
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",
63
-
64
- // },
65
- // },
66
- // },
67
- // {
68
- // type: "Control",
69
- // scope: "#/properties/value",
70
-
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.",
82
-
83
- // },
84
- // },
85
- // },
86
- // emptyBox("cardEmpty")
87
- // ],
88
- // };
89
29
  const cardLayout = {
90
30
  type: "Control",
91
31
  scope: "#/properties/cardLayout",
92
- layout: 12,
93
32
  options: {
94
- detail: {
95
- type: "HorizontalLayout",
96
- elements: [
97
- {
98
- type: "Control",
99
- scope: "#/properties/key",
100
- options: {
101
- widget: "SelectInputField",
102
- },
103
- config: {
104
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
105
- main: {
106
- 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",
107
63
 
108
- },
109
- },
110
64
  },
111
- {
112
- type: "Control",
113
- scope: "#/properties/value",
65
+ },
66
+ },
67
+ {
68
+ type: "Control",
69
+ scope: "#/properties/value",
114
70
 
115
- options: {
116
- widget: "InputField",
117
- },
118
- config: {
119
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
120
- main: {
121
- label: "Value",
122
- type: "number",
123
- // freeSolo:true,
124
- helperText: 'Number should be in range of 0 to 12',
125
- 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.",
126
82
 
127
- },
128
- },
129
83
  },
130
- emptyBox("cardEmpty")
131
- ],
84
+ },
132
85
  },
133
- },
86
+ emptyBox("cardEmpty")
87
+ ],
134
88
  };
135
89
  const getArrayControl = (parentScope: string, childScope: string, childLabel?: string,) => {
136
90
  return {