impaktapps-ui-builder 0.0.296 → 0.0.298

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 (35) hide show
  1. package/dist/impaktapps-ui-builder.es.js +2772 -2728
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +11 -11
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/dist/src/impaktapps-ui-builder/builder/build/buildButton.d.ts +1 -27
  6. package/dist/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.d.ts +0 -4
  7. package/dist/src/impaktapps-ui-builder/builder/build/uischema/coreSection.d.ts +25 -18
  8. package/dist/src/impaktapps-ui-builder/builder/build/uischema/refresh.d.ts +19 -2
  9. package/dist/src/impaktapps-ui-builder/builder/build/uischema/valueTab.d.ts +28 -1
  10. package/dist/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/schema.d.ts +9 -0
  11. package/dist/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.d.ts +1 -0
  12. package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts +1 -0
  13. package/dist/src/impaktapps-ui-builder/builder/services/pageMaster.d.ts +9 -0
  14. package/package.json +1 -1
  15. package/src/impaktapps-ui-builder/builder/build/buildButton.ts +11 -2
  16. package/src/impaktapps-ui-builder/builder/build/buildCard.ts +9 -9
  17. package/src/impaktapps-ui-builder/builder/build/buildConfig.ts +9 -1
  18. package/src/impaktapps-ui-builder/builder/build/buildText.ts +1 -1
  19. package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts +25 -8
  20. package/src/impaktapps-ui-builder/builder/build/buildWrapperSection.ts +1 -2
  21. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +6 -10
  22. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +9 -19
  23. package/src/impaktapps-ui-builder/builder/build/uischema/refresh.ts +19 -0
  24. package/src/impaktapps-ui-builder/builder/build/uischema/tableSection.ts +1 -1
  25. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +52 -1
  26. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +101 -64
  27. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +5 -36
  28. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/schema.ts +11 -1
  29. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +5 -31
  30. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.ts +72 -69
  31. package/src/impaktapps-ui-builder/builder/services/component.ts +12 -5
  32. package/src/impaktapps-ui-builder/builder/services/event.ts +12 -4
  33. package/src/impaktapps-ui-builder/builder/services/pageMaster.ts +23 -15
  34. package/src/impaktapps-ui-builder/runtime/services/events.ts +1 -4
  35. package/src/impaktapps-ui-builder/runtime/services/service.ts +3 -2
@@ -1,27 +1 @@
1
- export declare const buildButton: (config: any, componentScope: string) => {
2
- type: string;
3
- scope: 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
- name: string;
16
- variant: string;
17
- color: string;
18
- type: string;
19
- startIcon: string;
20
- styleDefault: boolean;
21
- icon: string;
22
- onClick: string;
23
- size: string;
24
- };
25
- style: {};
26
- };
27
- };
1
+ export declare const buildButton: (config: any, componentScope: string) => any;
@@ -42,10 +42,6 @@ export declare const getSelectField: (scope: string, label: string, options: {
42
42
  main: {
43
43
  label: string;
44
44
  type: string;
45
- options: {
46
- label: string;
47
- value: string;
48
- }[];
49
45
  };
50
46
  };
51
47
  };
@@ -68,7 +68,7 @@ export declare const CoreSection: {
68
68
  elementLabelProp: string;
69
69
  detail: {
70
70
  type: string;
71
- elements: {
71
+ elements: ({
72
72
  type: string;
73
73
  scope: string;
74
74
  options: {
@@ -83,9 +83,32 @@ export declare const CoreSection: {
83
83
  };
84
84
  main: {
85
85
  label: string;
86
+ type?: undefined;
87
+ helperText?: undefined;
88
+ errorMessage?: undefined;
86
89
  };
87
90
  };
88
- }[];
91
+ } | {
92
+ type: string;
93
+ scope: string;
94
+ options: {
95
+ widget: string;
96
+ };
97
+ config: {
98
+ layout: {
99
+ xs: number;
100
+ sm: number;
101
+ md: number;
102
+ lg: number;
103
+ };
104
+ main: {
105
+ label: string;
106
+ type: string;
107
+ helperText: string;
108
+ errorMessage: string;
109
+ };
110
+ };
111
+ })[];
89
112
  };
90
113
  widget?: undefined;
91
114
  };
@@ -109,19 +132,3 @@ export declare const OptionArraySchema: {
109
132
  };
110
133
  };
111
134
  };
112
- export declare const LayoutArraySchema: {
113
- layout: {
114
- type: string;
115
- items: {
116
- type: string;
117
- properties: {
118
- key: {
119
- type: string;
120
- };
121
- value: {
122
- type: string;
123
- };
124
- };
125
- };
126
- };
127
- };
@@ -7,7 +7,7 @@ export declare const refreshSectionUiSchema: {
7
7
  options: {
8
8
  detail: {
9
9
  type: string;
10
- elements: {
10
+ elements: ({
11
11
  type: string;
12
12
  scope: string;
13
13
  options: {
@@ -24,7 +24,24 @@ export declare const refreshSectionUiSchema: {
24
24
  label: string;
25
25
  };
26
26
  };
27
- }[];
27
+ } | {
28
+ type: string;
29
+ scope: string;
30
+ options: {
31
+ widget: string;
32
+ };
33
+ config: {
34
+ layout: {
35
+ xs: number;
36
+ sm: number;
37
+ md: number;
38
+ lg: number;
39
+ };
40
+ main: {
41
+ label?: undefined;
42
+ };
43
+ };
44
+ })[];
28
45
  };
29
46
  };
30
47
  }[];
@@ -1,4 +1,31 @@
1
1
  export declare const ValueTab: {
2
2
  type: string;
3
- elements: any[];
3
+ elements: {
4
+ type: string;
5
+ scope: string;
6
+ layout: number;
7
+ options: {
8
+ detail: {
9
+ type: string;
10
+ elements: {
11
+ type: string;
12
+ scope: string;
13
+ options: {
14
+ widget: string;
15
+ };
16
+ config: {
17
+ layout: {
18
+ xs: number;
19
+ sm: number;
20
+ md: number;
21
+ lg: number;
22
+ };
23
+ main: {
24
+ label: string;
25
+ };
26
+ };
27
+ }[];
28
+ };
29
+ };
30
+ }[];
4
31
  };
@@ -1,6 +1,14 @@
1
1
  export declare const PageMasterSchema: {
2
2
  type: string;
3
3
  properties: {
4
+ name: {
5
+ type: string;
6
+ minLength: number;
7
+ pattern: string;
8
+ };
9
+ label: {
10
+ type: string;
11
+ };
4
12
  layout: {
5
13
  type: string;
6
14
  items: {
@@ -27,4 +35,5 @@ export declare const PageMasterSchema: {
27
35
  };
28
36
  };
29
37
  };
38
+ required: string[];
30
39
  };
@@ -69,4 +69,5 @@ export declare const EventSchema: {
69
69
  };
70
70
  };
71
71
  };
72
+ required: string[];
72
73
  };
@@ -74,6 +74,7 @@ declare const _default: (store: any, dynamicData: any) => {
74
74
  };
75
75
  };
76
76
  };
77
+ required: string[];
77
78
  }>;
78
79
  onChange: () => void;
79
80
  saveHandler: () => Promise<void>;
@@ -12,6 +12,14 @@ declare const _default: (funcParams: funcParamsProps) => {
12
12
  getSchema: () => {
13
13
  type: string;
14
14
  properties: {
15
+ name: {
16
+ type: string;
17
+ minLength: number;
18
+ pattern: string;
19
+ };
20
+ label: {
21
+ type: string;
22
+ };
15
23
  layout: {
16
24
  type: string;
17
25
  items: {
@@ -38,6 +46,7 @@ declare const _default: (funcParams: funcParamsProps) => {
38
46
  };
39
47
  };
40
48
  };
49
+ required: string[];
41
50
  };
42
51
  backHandler: () => void;
43
52
  onAddClickHandler: () => Promise<void>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impaktapps-ui-builder",
3
- "version": "0.0.296",
3
+ "version": "0.0.298",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "tsc && vite build",
@@ -3,7 +3,7 @@ import _ from "lodash";
3
3
  import { createLayoutFormat } from "./buildConfig";
4
4
 
5
5
  export const buildButton = (config:any,componentScope:string) =>{
6
- const button = _.cloneDeep(Button);
6
+ const button:any = _.cloneDeep(Button);
7
7
  if (config.buttonType) {
8
8
  button.options.widget = config.buttonType === "IconButton" ? "IconButton" : "Button";
9
9
  config.buttonType === "ButtonWithIconAndText" ?
@@ -14,8 +14,17 @@ export const buildButton = (config:any,componentScope:string) =>{
14
14
  if(config.layout){
15
15
  button.config.layout = createLayoutFormat(config.layout)
16
16
  }
17
+ if(config.tooltipMessage){
18
+ button.config.main.tooltipMessage = config.tooltipMessage
19
+ }
20
+
17
21
  if(config.defaultStyle){
18
- button.config.main.styleDefault = config.defaultStyle==="true"?true:false;
22
+ if(config.buttonType === "IconButton"){
23
+ button.config.main.styleDefault = config.defaultStyle==="true"?true:false;
24
+ }else{
25
+ button.config.main.enableDefaultStyle = config.defaultStyle==="true"?false:true;
26
+ }
27
+
19
28
  }
20
29
  button.scope = componentScope;
21
30
  if (config.style) {
@@ -13,15 +13,15 @@ export const buildCard = (config,componentScope) =>{
13
13
  if(config.layout){
14
14
  card.config.layout = createLayoutFormat(config.layout)
15
15
  }
16
- // if(config.label){
17
- // card.elements[0].config.main.heading = config.label;
18
- // }
19
- // if(config.url){
20
- // card.elements[1].config.main.url = config.url;
21
- // }
22
- // if(config.description){
23
- // card.elements[2].config.main.heading = config.description;
24
- // }
16
+ if(config.label){
17
+ card.elements[0].config.main.heading = config.label;
18
+ }
19
+ if(config.url){
20
+ card.elements[1].config.main.url = config.url;
21
+ }
22
+ if(config.description){
23
+ card.elements[2].config.main.heading = config.description;
24
+ }
25
25
 
26
26
 
27
27
 
@@ -34,9 +34,17 @@ export default (FormData: any) => {
34
34
  };
35
35
 
36
36
  export const createLayoutFormat = (config: any[]) => {
37
+ if(_.isEmpty(config)){
38
+ return {
39
+ xs: 11,
40
+ sm: 11,
41
+ md: 5.5,
42
+ lg: 5.5,
43
+ }
44
+ }
37
45
  let data: any = {};
38
46
  config.map((e:any)=>{
39
- data[e.key] = +e.value
47
+ data[e.key||"xs"] = +e.value||5.5
40
48
  })
41
49
  return data;
42
50
  };
@@ -8,7 +8,7 @@ export const buildTextField = (config:any,componentScope:string) =>{
8
8
  if (config.style) {
9
9
  inputField.config.style = JSON.parse(config.style)
10
10
  }
11
- if(config.layout){
11
+ if (config.layout) {
12
12
  inputField.config.layout = createLayoutFormat(config.layout)
13
13
  }
14
14
  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
@@ -43,14 +43,14 @@ function buildRule(configObj: any, tableName?: string, arrayHolderName?: boolean
43
43
  if (schema.properties?.[tableName]?.items?.properties) {
44
44
  if (!schema.properties?.[tableName]?.items?.properties?.[configObj.name]) {
45
45
  schema.properties[tableName].items.properties[configObj.name] = {};
46
- if (configObj.type === "Select" || configObj.value?.length > 0) {
46
+ if (configObj.type === "Select" && configObj.value?.length > 0) {
47
47
  schema.properties[tableName].items.properties[configObj.name] = {
48
48
  oneOf: configObj.value.map((e) => {
49
49
  return { const: e.value, title: e.label }
50
50
  })
51
51
  }
52
52
  }
53
- else if (configObj.type === "MultipleSelect" || configObj.value?.length > 0) {
53
+ else if (configObj.type === "MultipleSelect" && configObj.value?.length > 0) {
54
54
  schema.properties[tableName].items.properties[configObj.name] = {
55
55
  items: {
56
56
  oneOf: configObj.value.map((e) => {
@@ -61,6 +61,23 @@ function buildRule(configObj: any, tableName?: string, arrayHolderName?: boolean
61
61
  }
62
62
  }
63
63
  }
64
+ } else if ((configObj.type === "Select" || configObj.type === "MultipleSelect") && configObj.value?.length > 0) {
65
+ if (configObj.type === "Select" ) {
66
+ schema.properties[configObj.name] = {
67
+ oneOf: configObj.value.map((e) => {
68
+ return { const: e.value, title: e.label }
69
+ })
70
+ }
71
+ }
72
+ else if (configObj.type === "MultipleSelect" ) {
73
+ schema.properties[configObj.name] = {
74
+ items: {
75
+ oneOf: configObj.value.map((e) => {
76
+ return { const: e.value, title: e.label }
77
+ })
78
+ }
79
+ }
80
+ }
64
81
  }
65
82
  if (configObj.validation) {
66
83
  configObj.validation.forEach((rule: any) => {
@@ -279,13 +296,13 @@ const buildUiSchema = (config: any) => {
279
296
  return buildUiSchema(e)
280
297
  });
281
298
  }
282
- else {
283
- elements.elements = config.elements.map((e: any, elemInd: number) => {
284
- return buildUiSchema(e)
285
- });
299
+ else {
300
+ elements.elements = config.elements.map((e: any, elemInd: number) => {
301
+ return buildUiSchema(e)
302
+ });
303
+ }
286
304
  }
287
- }
288
- return elements;
305
+ return elements;
289
306
  }
290
307
 
291
308
 
@@ -4,7 +4,6 @@ import _ from "lodash";
4
4
  export const buildWrapperSection = (config,componentScope) =>{
5
5
  const wrapper: any = _.cloneDeep(WrapperSection);
6
6
  wrapper.config.main.label = config.label;
7
- wrapper.config.main.divider = config.divider ? true : false;
8
- wrapper.config.main.header = config.heading ? true : false;
7
+ wrapper.config.main.divider = config.divider === "YES" ? true : false;
9
8
  return wrapper;
10
9
  }
@@ -144,7 +144,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
144
144
  main: {
145
145
  label: label,
146
146
  type: "text",
147
- options: options
147
+ // options: options
148
148
  },
149
149
  },
150
150
  }
@@ -193,17 +193,13 @@ export const buildPropertiesSection = function (type: String) {
193
193
  const bottomLabel_3 = getInputField("bottomLabel_3", "Third BottomLabel");
194
194
  uiSchema.elements = [heading, bottomLabel_1, bottomLabel_2, bottomLabel_3];
195
195
  } else if (type === "card") {
196
- uiSchema.elements = [getInputField("url", "Image Url"), getInputField("label", "Label"), getInputField("description", "Description"),];
196
+ uiSchema.elements = [getInputField("url", "Image Url"), getInputField("label", "Label"), getInputField("description", "Description"),EmptyBox];
197
197
  }
198
198
  else if (type === "Button") {
199
- const caption = getInputField("color", "Color");
200
- const size = getInputField("size", "Size");
201
- const iconName = getInputField("iconName", "Icon Name");
202
- uiSchema.elements = [getSelectField("buttonType", "Button Type", [
203
- { label: "Button With Text", value: "Button" },
204
- { label: "Button With Icon", value: "IconButton" },
205
- { label: "Button With Icon and Text", value: "ButtonWithIconAndText" },
206
- ]), iconName, size, caption,
199
+ const color = getSelectField("color", "Color",[]);
200
+ const iconName = getSelectField("iconName", "Icon Name",[]);
201
+ uiSchema.elements = [getSelectField("buttonType", "Button Type", []), iconName, color,
202
+ getInputField("tooltipMessage", "Tooltip Message"),
207
203
  getSelectField("defaultStyle", "Default Style", [
208
204
  { label: "Apply Default Style", value: "true" },
209
205
  { label: "No Style", value: "false" },
@@ -72,7 +72,7 @@ export const CoreSection = {
72
72
  "elementLabelProp": "key",
73
73
  detail: {
74
74
  type: "HorizontalLayout",
75
-
75
+
76
76
  elements: [
77
77
  {
78
78
  type: "Control",
@@ -89,7 +89,7 @@ export const CoreSection = {
89
89
  },
90
90
  main: {
91
91
  label: "Screen Size",
92
-
92
+
93
93
  },
94
94
  },
95
95
  },
@@ -109,7 +109,10 @@ export const CoreSection = {
109
109
  },
110
110
  main: {
111
111
  label: "Value",
112
-
112
+ type:"number",
113
+ // freeSolo:true,
114
+ helperText:'Number should be in range of 0 to 12',
115
+ errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
113
116
  },
114
117
  },
115
118
  },
@@ -162,6 +165,8 @@ export const OptionArray: any = {
162
165
  },
163
166
  main: {
164
167
  label: "Value",
168
+ helperText: 'Number should be in range of 0 to 12',
169
+ errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
165
170
  },
166
171
  },
167
172
  },
@@ -187,19 +192,4 @@ export const OptionArraySchema = {
187
192
  },
188
193
  };
189
194
 
190
- export const LayoutArraySchema = {
191
- layout: {
192
- type: "array",
193
- items: {
194
- type: "object",
195
- properties: {
196
- key: {
197
- type: "string",
198
- },
199
- value: {
200
- type: "string",
201
- },
202
- },
203
- },
204
- },
205
- };
195
+
@@ -30,6 +30,25 @@ export const refreshSectionUiSchema = {
30
30
  },
31
31
  },
32
32
  },
33
+ {
34
+ type: "Control",
35
+ scope: "#/properties/emptyBox",
36
+
37
+ options: {
38
+ widget: "EmptyBox",
39
+ },
40
+ config: {
41
+ layout: {
42
+ xs: 11,
43
+ sm: 11,
44
+ md: 5.5,
45
+ lg: 5.5,
46
+ },
47
+ main: {
48
+
49
+ },
50
+ },
51
+ },
33
52
  ],
34
53
  },
35
54
  },
@@ -46,7 +46,7 @@ export const TableSection = {
46
46
  styleDefault: true,
47
47
  size: "small",
48
48
  onClick: "widgetAddClickHandler",
49
- tooltipMessage: "Back",
49
+ tooltipMessage: "Add New",
50
50
  },
51
51
  style: {
52
52
  float: "right",
@@ -2,5 +2,56 @@ import { OptionArray } from "./coreSection";
2
2
 
3
3
  export const ValueTab = {
4
4
  type: "HorizontalLayout",
5
- elements: [OptionArray],
5
+ elements: [
6
+ {
7
+ type: "Control",
8
+ scope: "#/properties/value",
9
+ layout: 11.5,
10
+ options: {
11
+ detail: {
12
+ type: "HorizontalLayout",
13
+ elements: [
14
+ {
15
+ type: "Control",
16
+ scope: "#/properties/label",
17
+ options: {
18
+ widget: "InputField",
19
+ },
20
+ config: {
21
+ layout: {
22
+ xs: 11,
23
+ sm: 11,
24
+ md: 5.5,
25
+ lg: 5.5,
26
+ },
27
+ main: {
28
+ label: "Label",
29
+ },
30
+ },
31
+ },
32
+ {
33
+ type: "Control",
34
+ scope: "#/properties/value",
35
+
36
+ options: {
37
+ widget: "InputField",
38
+ },
39
+ config: {
40
+ layout: {
41
+ xs: 11,
42
+ sm: 11,
43
+ md: 5.5,
44
+ lg: 5.5,
45
+ },
46
+ main: {
47
+ label: "Value",
48
+
49
+ },
50
+ },
51
+ },
52
+ ],
53
+ },
54
+ },
55
+ }
56
+ ],
6
57
  };