impaktapps-ui-builder 0.0.101-alpha.14 → 0.0.101-alpha.16

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.
@@ -107,5 +107,11 @@ export declare const getMultiSelectField: (scope: string, label: string) => {
107
107
  };
108
108
  export declare const buildPropertiesSection: (type: String) => {
109
109
  type: string;
110
+ config: {
111
+ main: {
112
+ label: string;
113
+ gap: string;
114
+ };
115
+ };
110
116
  elements: any[];
111
117
  };
@@ -9,28 +9,7 @@ export declare const TableSection: (theme: any) => {
9
9
  config: {
10
10
  main: {
11
11
  headerIcons: {
12
- elements: ({
13
- widget: {
14
- type: string;
15
- scope: string;
16
- options: {
17
- widget: string;
18
- };
19
- config: {
20
- main: {
21
- color: string;
22
- onClick: string;
23
- size: string;
24
- icon: string;
25
- iconLabel: string;
26
- styleDefault: boolean;
27
- };
28
- style: {
29
- mt: string;
30
- };
31
- };
32
- };
33
- } | {
12
+ elements: {
34
13
  widget: {
35
14
  type: string;
36
15
  scope: string;
@@ -44,14 +23,19 @@ export declare const TableSection: (theme: any) => {
44
23
  icon: string;
45
24
  iconLabel: string;
46
25
  styleDefault: boolean;
47
- color?: undefined;
48
26
  };
49
27
  style: {
50
28
  mt: string;
29
+ color: string;
30
+ fill: string;
31
+ "&:hover": {
32
+ color: string;
33
+ fill: string;
34
+ };
51
35
  };
52
36
  };
53
37
  };
54
- })[];
38
+ }[];
55
39
  };
56
40
  disableAction: boolean;
57
41
  disableSelection: boolean;
@@ -61,13 +45,15 @@ export declare const TableSection: (theme: any) => {
61
45
  elements: ({
62
46
  accessorKey: string;
63
47
  header: string;
48
+ type: string;
49
+ size: number;
64
50
  field?: undefined;
65
- flex?: undefined;
66
51
  widget?: undefined;
67
52
  } | {
68
53
  header: string;
69
54
  field: string;
70
- flex: number;
55
+ size: number;
56
+ type: string;
71
57
  widget: {
72
58
  type: string;
73
59
  scope: string;
@@ -77,14 +63,17 @@ export declare const TableSection: (theme: any) => {
77
63
  config: {
78
64
  main: {
79
65
  icon: string;
80
- color: string;
66
+ size: string;
81
67
  onClick: string;
82
68
  tooltipMessage: string;
83
69
  styleDefault?: undefined;
84
70
  disabled?: undefined;
85
71
  };
86
72
  style: {
87
- color: any;
73
+ fill: any;
74
+ "& :hover": {
75
+ fill: any;
76
+ };
88
77
  };
89
78
  };
90
79
  };
@@ -92,7 +81,8 @@ export declare const TableSection: (theme: any) => {
92
81
  } | {
93
82
  header: string;
94
83
  field: string;
95
- flex: number;
84
+ size: number;
85
+ type: string;
96
86
  widget: {
97
87
  type: string;
98
88
  scope: string;
@@ -102,20 +92,26 @@ export declare const TableSection: (theme: any) => {
102
92
  config: {
103
93
  main: {
104
94
  icon: string;
105
- color: string;
106
95
  onClick: string;
107
96
  tooltipMessage: string;
97
+ size?: undefined;
108
98
  styleDefault?: undefined;
109
99
  disabled?: undefined;
110
100
  };
111
- style?: undefined;
101
+ style: {
102
+ fill: any;
103
+ "& :hover": {
104
+ fill: any;
105
+ };
106
+ };
112
107
  };
113
108
  };
114
109
  accessorKey?: undefined;
115
110
  } | {
116
111
  header: string;
117
112
  field: string;
118
- flex: number;
113
+ size: number;
114
+ type: string;
119
115
  widget: {
120
116
  type: string;
121
117
  scope: string;
@@ -128,7 +124,7 @@ export declare const TableSection: (theme: any) => {
128
124
  onClick: string;
129
125
  styleDefault: boolean;
130
126
  disabled: boolean;
131
- color?: undefined;
127
+ size?: undefined;
132
128
  tooltipMessage?: undefined;
133
129
  };
134
130
  style?: undefined;
@@ -1,46 +1,66 @@
1
1
  export declare const ValueTab: {
2
2
  type: string;
3
+ config: {
4
+ main: {
5
+ label: string;
6
+ gap: string;
7
+ };
8
+ };
3
9
  elements: {
4
10
  type: string;
5
11
  scope: string;
6
- layout: number;
7
12
  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
- 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?: undefined;
41
- };
42
- })[];
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
+ };
43
30
  };
44
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
+ })[];
45
65
  }[];
46
66
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impaktapps-ui-builder",
3
- "version": "0.0.101-alpha.14",
3
+ "version": "0.0.101-alpha.16",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "build": "tsc && vite build",
@@ -12,7 +12,6 @@ const emptyBox = (scope:string,layout?: any) => {
12
12
  widget: "EmptyBox",
13
13
  },
14
14
  config: {
15
- //[{},{},{}]
16
15
  layout: layout,
17
16
  },
18
17
  }
@@ -131,7 +130,7 @@ const getInputField = (scope: String, label: String) => {
131
130
  widget: "InputField",
132
131
  },
133
132
  config: {
134
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
133
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
135
134
  main: {
136
135
  label: label,
137
136
  },
@@ -148,7 +147,7 @@ export const getRadioInputField = (scope: String, label: String, options: string
148
147
  widget: "RadioInputField",
149
148
  },
150
149
  config: {
151
- layout: { xs: 12, sm: 6, md: 4, lg: 4 },
150
+ layout: { xs: 12, sm: 6, md: 4, lg: 3 },
152
151
  main: {
153
152
  label: label,
154
153
 
@@ -221,7 +220,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
221
220
  widget: "SelectInputField",
222
221
  },
223
222
  config: {
224
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
223
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
225
224
  main: {
226
225
  label: label,
227
226
  type: "text",
@@ -239,7 +238,7 @@ export const getMultiSelectField = (scope: string, label: string) => {
239
238
  widget: "MultipleSelect",
240
239
  },
241
240
  config: {
242
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
241
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
243
242
  main: {
244
243
  multiple: true,
245
244
  label: label,
@@ -250,13 +249,19 @@ export const getMultiSelectField = (scope: string, label: string) => {
250
249
  }
251
250
 
252
251
 
253
- const GraphSection = {
252
+ const BaseSection = {
254
253
  type: "WrapperLayout",
254
+ config: {
255
+ main: {
256
+ label: " ",
257
+ gap: "8px"
258
+ }
259
+ },
255
260
  elements: [],
256
261
  };
257
262
 
258
263
  export const buildPropertiesSection = function (type: String) {
259
- let uiSchema = _.cloneDeep(GraphSection);
264
+ let uiSchema = _.cloneDeep(BaseSection);
260
265
  switch (type) {
261
266
 
262
267
  case "TreeMap":
@@ -22,15 +22,20 @@ export const TableSection = (theme) => {
22
22
  },
23
23
  config: {
24
24
  main: {
25
- color: "info",
26
25
  onClick: "widgetAddClickHandler",
27
26
  size: "small",
28
- icon: "AddIcon",
29
- iconLabel: "Add New",
27
+ icon: "TableAddIcon",
28
+ iconLabel: "Add",
30
29
  styleDefault: true,
31
30
  },
32
31
  style: {
33
32
  mt: "6px",
33
+ color: "inherit",
34
+ fill: "inherit",
35
+ "&:hover": {
36
+ color: "inherit",
37
+ fill: "inherit",
38
+ }
34
39
  },
35
40
  },
36
41
  }
@@ -39,21 +44,25 @@ export const TableSection = (theme) => {
39
44
  widget: {
40
45
  type: "Control",
41
46
  scope: "#/properties/Paste_Component",
42
-
43
47
  options: {
44
48
  widget: "IconButton",
45
49
  },
46
50
  config: {
47
51
  main: {
48
- // color: "info",
49
52
  onClick: "copyPasteElement",
50
53
  size: "small",
51
- icon: "PasteIcon",
54
+ icon: "TablePaste",
52
55
  iconLabel: "Paste",
53
56
  styleDefault: true,
54
57
  },
55
58
  style: {
56
59
  mt: "6px",
60
+ color: "inherit",
61
+ fill: "inherit",
62
+ "&:hover": {
63
+ color: "inherit",
64
+ fill: "inherit",
65
+ }
57
66
  },
58
67
  },
59
68
  }
@@ -69,16 +78,21 @@ export const TableSection = (theme) => {
69
78
  elements: [
70
79
  {
71
80
  accessorKey: "name",
72
- header: "Name"
81
+ header: "Name",
82
+ type: "string",
83
+ size: 300,
73
84
  },
74
85
  {
75
86
  accessorKey: "type",
76
- header: "Type"
87
+ header: "Type",
88
+ type: "string",
89
+ size: 200,
77
90
  },
78
91
  {
79
92
  header: "Edit Record",
80
93
  field: "Reject_Records",
81
- flex: 1,
94
+ size: 150,
95
+ type: "action",
82
96
  widget: {
83
97
  type: "Control",
84
98
  scope: "#/properties/RejectButton",
@@ -87,14 +101,16 @@ export const TableSection = (theme) => {
87
101
  },
88
102
  config: {
89
103
  main: {
90
- icon: "EditIcon",
91
- color: "primary",
104
+ icon: "TableEditIcon",
105
+ size: "small",
92
106
  onClick: "editComponents",
93
107
  tooltipMessage: "Reject This Record",
94
108
  },
95
-
96
109
  style: {
97
- color: theme.palette.primary.main,
110
+ fill: theme.palette.primary.main,
111
+ "& :hover": {
112
+ fill: theme.palette.primary.dark,
113
+ },
98
114
  },
99
115
  },
100
116
  },
@@ -102,7 +118,8 @@ export const TableSection = (theme) => {
102
118
  {
103
119
  header: "Delete",
104
120
  field: "Reject_Records",
105
- flex: 1,
121
+ size: 150,
122
+ type: "action",
106
123
  widget: {
107
124
  type: "Control",
108
125
  scope: "#/properties/RejectButton",
@@ -111,18 +128,24 @@ export const TableSection = (theme) => {
111
128
  },
112
129
  config: {
113
130
  main: {
114
- icon: "RejectIcon",
115
- color: "error",
131
+ icon: "Bin",
116
132
  onClick: "deletePopUpComponent",
117
133
  tooltipMessage: "Reject This Record",
118
134
  },
135
+ style: {
136
+ fill: theme.palette.primary.main,
137
+ "& :hover": {
138
+ fill: theme.palette.primary.dark,
139
+ },
140
+ },
119
141
  },
120
142
  },
121
143
  },
122
144
  {
123
145
  header: "Copy",
124
146
  field: "Copy_Component",
125
- flex: 1,
147
+ size: 150,
148
+ type: "action",
126
149
  widget: {
127
150
  type: "Control",
128
151
  scope: "#/properties/Copy_Component",
@@ -132,7 +155,6 @@ export const TableSection = (theme) => {
132
155
  config: {
133
156
  main: {
134
157
  icon: "FileCopyIcon",
135
- // color: "error",
136
158
  onClick: "copyPasteElement",
137
159
  styleDefault: true,
138
160
  disabled: false
@@ -1,55 +1,125 @@
1
1
  export const ValueTab = {
2
- type: "HorizontalLayout",
2
+ type: "WrapperLayout",
3
+ config: {
4
+ main: {
5
+ label: " ",
6
+ gap: "8px"
7
+ }
8
+ },
3
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
+ // }
4
60
  {
5
61
  type: "Control",
6
62
  scope: "#/properties/value",
7
- layout: 12,
8
63
  options: {
9
- detail: {
10
- type: "HorizontalLayout",
11
- elements: [
12
- {
13
- type: "Control",
14
- scope: "#/properties/label",
15
- options: {
16
- widget: "InputField",
17
- },
18
- config: {
19
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
20
- main: {
21
- label: "Label",
22
- },
23
- },
64
+ widget: "Array",
65
+ },
66
+ config: {
67
+ layout: 12,
68
+ main: {
69
+ label: "Value",
70
+ childElementLabel: "Value",
71
+ },
72
+ style: {
73
+ marginLeft: "-24px",
74
+ marginBottom: "24px !important",
75
+ labelStyle: {
76
+ marginLeft: "24px",
77
+ },
78
+ detailsStyle: {
79
+ marginLeft: "24px",
80
+ }
81
+ }
82
+ },
83
+ elements: [
84
+ {
85
+ type: "Control",
86
+ scope: "#/properties/label",
87
+ options: {
88
+ widget: "InputField",
89
+ },
90
+ config: {
91
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
92
+ main: {
93
+ label: "Label",
24
94
  },
25
- {
26
- type: "Control",
27
- scope: "#/properties/value",
28
-
29
- options: {
30
- widget: "InputField",
31
- },
32
- config: {
33
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
34
- main: {
35
- label: "Value",
36
-
37
- },
38
- },
95
+ },
96
+ },
97
+ {
98
+ type: "Control",
99
+ scope: "#/properties/value",
100
+
101
+ options: {
102
+ widget: "InputField",
103
+ },
104
+ config: {
105
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
106
+ main: {
107
+ label: "Value",
108
+
39
109
  },
40
- {
41
- type: "Control",
42
- scope: "#/properties/emptyBox",
43
- options: {
44
- widget: "EmptyBox"
45
- },
46
- config: {
47
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
48
- }
49
- }
50
- ],
110
+ },
51
111
  },
52
- },
112
+ {
113
+ type: "Control",
114
+ scope: "#/properties/emptyBox",
115
+ options: {
116
+ widget: "EmptyBox"
117
+ },
118
+ config: {
119
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
120
+ }
121
+ }
122
+ ],
53
123
  }
54
124
  ],
55
125
  };
@@ -4,10 +4,10 @@ export const ComponentSchema: any = {
4
4
  type: {
5
5
  // type: "string",
6
6
  oneOf: [
7
- { title: "AadharcardText", const: "AadharcardText" },
7
+ { title: "Masked Aadhaar", const: "AadharcardText" },
8
8
  { title: "Array", const: "Array" },
9
9
  { title: "Button", const: "Button" },
10
- { title: "Card", const: "card" },
10
+ { title: "Data Card", const: "card" },
11
11
  { title: "CheckBox", const: "CheckBox" },
12
12
  { title: "Container", const: "WrapperSection" },
13
13
  { title: "DataGrid", const: "DataGrid" },