impaktapps-ui-builder 0.0.382-alpha.3 → 0.0.382-alpha.5

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 (7) hide show
  1. package/dist/impaktapps-ui-builder.es.js +263 -253
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +9 -9
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +342 -307
  7. package/src/impaktapps-ui-builder/builder/services/component.ts +1 -1
package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts CHANGED
@@ -1,341 +1,376 @@
1
- export const componentBasicUiSchema: any = {
2
- type: "HorizontalLayout",
3
- elements: [
4
- {
5
- type: "WrapperLayout",
6
- config: {
7
- main: {
8
- rowSpacing: 1,
9
- header:true
10
- },
11
- defaultStyle:true
12
- },
13
- elements: [
14
-
15
- {
16
- type: "Control",
17
- scope: "#/properties/Component",
1
+ export const componentBasicUiSchema: any = (theme) => {
2
+ const uiSchema = {
3
+ type: "HorizontalLayout",
4
+ heading: "Component",
5
+ elements: [
6
+ // {
7
+ // type: "WrapperLayout",
8
+ // config: {
9
+ // main: {
10
+ // rowSpacing: 1,
11
+ // header:true
12
+ // },
13
+ // defaultStyle:true
14
+ // },
15
+ // elements: [
18
16
 
19
- options: {
20
- widget: "Box",
21
- },
22
- config: {
23
- layout: {xs:12,sm:12,md:2},
24
- main: {
25
- heading: "Component",
26
- },
27
- style:{
28
- "float":"left",
29
- }
30
- },
31
- },
32
-
33
- {
34
- type: "Control",
35
- scope: "#/properties/pageName",
36
-
37
- options: {
38
- widget: "Box",
39
- },
40
- config: {
41
- layout: {xs:7,sm:7,md:9},
42
- main: {
43
- heading: " ",
44
- },
45
- style: {
46
- float: "right",
47
- width:"auto",
48
- fontSize:"12px",
49
- color:"gray",
50
- paddingTop:"10px"
51
- },
52
- },
53
- },
54
-
55
- {
56
- type: "Control",
57
- scope: "#/properties/Back_Button",
58
-
59
- options: {
60
- widget: "IconButton",
61
- },
62
- config: {
63
- layout: {xs:2,sm:2,md:0.5},
64
- main: {
65
- icon: "BackIcon",
66
- styleDefault: true,
67
- size: "small",
68
- onClick: "backHandler",
69
- tooltipMessage: "Back",
70
- },
71
- style: {
72
- float: "right",
73
- },
17
+ // {
18
+ // type: "Control",
19
+ // scope: "#/properties/Component",
20
+
21
+ // options: {
22
+ // widget: "Box",
23
+ // },
24
+ // config: {
25
+ // layout: {xs:12,sm:12,md:2},
26
+ // main: {
27
+ // heading: "Component",
28
+ // },
29
+ // style:{
30
+ // "float":"left",
31
+ // }
32
+ // },
33
+ // },
34
+
35
+ // {
36
+ // type: "Control",
37
+ // scope: "#/properties/pageName",
38
+
39
+ // options: {
40
+ // widget: "Box",
41
+ // },
42
+ // config: {
43
+ // layout: {xs:7,sm:7,md:9},
44
+ // main: {
45
+ // heading: " ",
46
+ // },
47
+ // style: {
48
+ // float: "right",
49
+ // width:"auto",
50
+ // fontSize:"12px",
51
+ // color:"gray",
52
+ // paddingTop:"10px"
53
+ // },
54
+ // },
55
+ // },
56
+
57
+ // {
58
+ // type: "Control",
59
+ // scope: "#/properties/Back_Button",
60
+
61
+ // options: {
62
+ // widget: "IconButton",
63
+ // },
64
+ // config: {
65
+ // layout: {xs:2,sm:2,md:0.5},
66
+ // main: {
67
+ // icon: "BackIcon",
68
+ // styleDefault: true,
69
+ // size: "small",
70
+ // onClick: "backHandler",
71
+ // tooltipMessage: "Back",
72
+ // },
73
+ // style: {
74
+ // float: "right",
75
+ // },
76
+ // },
77
+ // },
78
+
79
+ // ],
80
+ // },
81
+ {
82
+ type: "TabLayout",
83
+ config: {
84
+ main: {
85
+ tabLabels: ["Core"],
86
+ defaultStyle: true,
87
+ id: `component`
74
88
  },
75
89
  },
76
-
77
- ],
78
- },
79
- {
80
- type: "TabLayout",
81
- config: {
82
- main: {
83
- tabLabels: ["Core"],
84
- defaultStyle: true,
85
- id:`component`
86
- },
87
- },
88
90
 
89
- elements: [
90
- {
91
- type: "HorizontalLayout",
92
- elements: [
93
- {
94
- type: "Control",
95
- scope: "#/properties/type",
91
+ elements: [
92
+ {
93
+ type: "HorizontalLayout",
94
+ elements: [
95
+ {
96
+ type: "Control",
97
+ scope: "#/properties/type",
96
98
 
97
- options: {
98
- widget: "SelectInputField",
99
- },
100
- config: {
101
- layout: { xs: 12, sm: 12, md: 6, lg: 6 },
102
- main: {
103
- label: "Type",
99
+ options: {
100
+ widget: "SelectInputField",
101
+ },
102
+ config: {
103
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
104
+ main: {
105
+ label: "Type",
106
+ },
104
107
  },
105
108
  },
106
- },
107
- {
108
- type: "Control",
109
- scope: "#/properties/name",
109
+ {
110
+ type: "Control",
111
+ scope: "#/properties/name",
110
112
 
111
- options: {
112
- widget: "InputField",
113
- },
114
- config: {
115
- layout: {
116
- xs: 12,
117
- sm: 12,
118
- md: 6,
119
- lg: 6,
113
+ options: {
114
+ widget: "InputField",
120
115
  },
121
- main: {
122
- label: "Name",
123
- options: [],
124
- color: "secondary",
125
- required: true,
116
+ config: {
117
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
118
+ main: {
119
+ label: "Name",
120
+ options: [],
121
+ color: "secondary",
122
+ required: true,
123
+ },
126
124
  },
127
125
  },
128
- },
129
- {
130
- type: "Control",
131
- scope: "#/properties/label",
126
+ {
127
+ type: "Control",
128
+ scope: "#/properties/label",
132
129
 
133
- options: {
134
- widget: "InputField",
135
- },
136
- config: {
137
- layout: {
138
- xs: 12,
139
- sm: 12,
140
- md: 6,
141
- lg: 6,
130
+ options: {
131
+ widget: "InputField",
142
132
  },
143
- main: {
144
- label: "Label",
145
- options: [],
146
- color: "secondary",
147
- required: true,
133
+ config: {
134
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
135
+ main: {
136
+ label: "Label",
137
+ options: [],
138
+ color: "secondary",
139
+ required: true,
140
+ },
148
141
  },
149
142
  },
150
- },
151
-
152
- {
153
- type: "Control",
154
- scope: "#/properties/proc",
155
- config: {
156
- layout: { xs: 11, sm: 11, md: 6, lg: 6 },
157
- },
158
- options: {
159
- widget: "EmptyBox",
160
- },
161
- },
162
- {
163
- type: "Control",
164
- scope: "#/properties/layout",
165
- layout: 11.5,
166
- options: {
167
- detail: {
168
- type: "HorizontalLayout",
169
- elements: [
170
- {
171
- type: "Control",
172
- scope: "#/properties/key",
173
- options: {
174
- widget: "SelectInputField",
175
- },
176
- config: {
177
- layout: {
178
- xs: 11,
179
- sm: 11,
180
- md: 5.5,
181
- lg: 5.5,
143
+ {
144
+ type: "HorizontalLayout",
145
+ scope: "#/properties/layout",
146
+ layout: 12,
147
+ options: {
148
+ detail: {
149
+ type: "HorizontalLayout",
150
+ elements: [
151
+ {
152
+ type: "Control",
153
+ scope: "#/properties/key",
154
+ options: {
155
+ widget: "SelectInputField",
182
156
  },
183
- main: {
184
- label: "Screen Size",
185
-
157
+ config: {
158
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
159
+ main: {
160
+ label: "Screen Size",
161
+
162
+ },
186
163
  },
187
164
  },
188
- },
189
- {
190
- type: "Control",
191
- scope: "#/properties/value",
165
+ {
166
+ type: "Control",
167
+ scope: "#/properties/value",
192
168
 
193
- options: {
194
- widget: "InputField",
195
- },
196
- config: {
197
- layout: {
198
- xs: 11,
199
- sm: 11,
200
- md: 5.5,
201
- lg: 5.5,
169
+ options: {
170
+ widget: "InputField",
202
171
  },
203
- main: {
204
- label: "Value",
205
- type:"number",
206
- // freeSolo:true,
207
- helperText:'Number should be in range of 0 to 12',
208
- errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
209
-
172
+ config: {
173
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
174
+ main: {
175
+ label: "Value",
176
+ type: "number",
177
+ // freeSolo:true,
178
+ helperText: 'Number should be in range of 0 to 12',
179
+ errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
180
+
181
+ },
210
182
  },
211
183
  },
212
- },
213
- ],
184
+ {
185
+ type: "Control",
186
+ scope: "#/properties/emptyBox",
187
+ options: {
188
+ widget: "EmptyBox"
189
+ },
190
+ config: {
191
+ layout: { xs: 0, sm: 4 }
192
+ }
193
+ }
194
+ ],
195
+ },
214
196
  },
215
197
  },
216
- },
217
- ],
218
- },
219
- ],
220
- },
221
-
222
- {
223
- type: "Control",
224
- scope: "#/properties/proc",
225
- config: {
226
- layout: { xs: 11, sm: 11, md: 6, lg: 6 },
227
- },
228
- options: {
229
- widget: "EmptyBox",
230
- },
231
- },
232
- {
233
- type: "Control",
234
- scope: "#/properties/btn",
235
- options: {
236
- widget: "Button",
198
+ ],
199
+ },
200
+ ],
237
201
  },
238
-
239
- config: {
240
- layout: {
241
- xs: 11,
242
- sm: 11,
243
- md: 2.5,
244
- lg: 2.5,
245
- },
246
- main: {
247
- name: "Ok",
248
- startIcon: "ApproveIcon",
249
- variant: "contained",
250
- color: "info",
251
- type: "text",
252
- onClick: "okHandler",
253
- size: "small",
254
- },
255
- style: {
256
- marginBottom: "8px",
257
- float: "right",
202
+ {
203
+ type: "Control",
204
+ scope: "#/properties/btn",
205
+ options: {
206
+ widget: "Button",
258
207
  },
259
- },
260
- },
261
- {
262
- type: "Control",
263
- scope: "#/properties/btnSubmit",
264
- options: {
265
- widget: "Button",
266
- },
267
208
 
268
- config: {
269
- layout: {
270
- xs: 11,
271
- sm: 11,
272
- md: 2.5,
273
- lg: 2.5,
209
+ config: {
210
+ layout: {
211
+ xs: 11,
212
+ sm: 11,
213
+ md: 2.5,
214
+ lg: 2.5,
215
+ },
216
+ main: {
217
+ name: "Ok",
218
+ startIcon: "ApproveIcon",
219
+ variant: "contained",
220
+ color: "info",
221
+ type: "text",
222
+ onClick: "okHandler",
223
+ size: "small",
224
+ },
225
+ style: {
226
+ marginBottom: "8px",
227
+ float: "right",
228
+ },
274
229
  },
275
- main: {
276
- name: "Save & Exit",
277
- startIcon: "ApproveIcon",
278
- variant: "contained",
279
- color: "info",
280
- type: "text",
281
- onClick: "saveHandler",
282
- size: "small",
230
+ },
231
+ {
232
+ type: "Control",
233
+ scope: "#/properties/btnSubmit",
234
+ options: {
235
+ widget: "Button",
283
236
  },
284
- style: {
285
- marginBottom: "8px",
286
- float: "right",
237
+
238
+ config: {
239
+ layout: {
240
+ xs: 11,
241
+ sm: 11,
242
+ md: 2.5,
243
+ lg: 2.5,
244
+ },
245
+ main: {
246
+ name: "Save & Exit",
247
+ startIcon: "ApproveIcon",
248
+ variant: "contained",
249
+ color: "info",
250
+ type: "text",
251
+ onClick: "saveHandler",
252
+ size: "small",
253
+ },
254
+ style: {
255
+ marginBottom: "8px",
256
+ float: "right",
257
+ },
287
258
  },
288
259
  },
289
- },
290
- {
291
- type: "Control",
292
- scope: "#/properties/notify",
293
- options: {
294
- widget: "Notify",
260
+ {
261
+ type: "Control",
262
+ scope: "#/properties/notify",
263
+ options: {
264
+ widget: "Notify",
265
+ },
266
+ layout: 6,
295
267
  },
296
- layout: 6,
297
- }
298
- ],
299
- };
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
268
+ {
269
+ type: "HorizontalLayout",
270
+ config: {
271
+ style: {
272
+ position: "fixed",
273
+ bottom: 5,
274
+ overflow: 'visible',
275
+ margin: "0",
276
+ width: "100vw",
277
+ }
278
+ },
279
+ elements: [
280
+ {
281
+ type: "Control",
282
+ scope: "#/properties/EmptyBox",
283
+ options: {
284
+ widget: "EmptyBox",
285
+ },
286
+ config: {
287
+ layout: { xs: 0, sm: 4, md: 4, lg: 4 },
288
+ },
289
+ },
290
+ {
316
291
 
317
- // {
318
- // type: "Control",
319
- // scope: "#/properties/homeBtn",
320
-
321
- // options: {
322
- // widget: "Button",
323
- // },
324
- // config: {
325
- // layout: {xs:2,sm:2,md:1},
326
- // main: {
327
- // name: "🏠",
328
- // },
329
- // style: {
330
- // marginRight:'auto',
331
- // marginLeft:"auto",
332
- // width:"20px",
292
+ type: "Control",
293
+ scope: "#/properties/FooterText",
294
+ options: {
295
+ widget: "Box",
296
+ },
297
+ config: {
298
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
299
+ main: {
300
+ heading: "Copywriter@ACT21.IO"
301
+ },
302
+ style: {
303
+ color: theme?.palette?.text.disabled || "#AFAFAF",
304
+ fontSize: '12px',
305
+ }
306
+ },
307
+ },
308
+ {
309
+ type: "HorizontalLayout",
310
+ config: {
311
+ layout: { xs: 11, sm: 4, md: 4, lg: 4 },
312
+ },
313
+ elements: [
314
+ {
315
+ type: "Control",
316
+ scope: "#/properties/EmptyBox",
317
+ options: {
318
+ widget: "EmptyBox",
319
+ },
320
+ config: {
321
+ layout: 2,
322
+ },
323
+ },
324
+ {
325
+ type: "Control",
326
+ scope: "#/properties/backIcon",
327
+ options: {
328
+ widget: "Box",
329
+ },
330
+ config: {
331
+ layout: 1,
332
+ main: {
333
+ iconName: 'PrevIcon',
334
+ onClick: "backHandler"
335
+ },
336
+ style: {
337
+ fill: theme.palette.primary.dark,
338
+ width: 20,
339
+ height: 20,
340
+ display: 'flex',
341
+ alignItems: 'center',
342
+ justifyContent: 'center',
343
+ marginRight: '-8px',
344
+ cursor: 'pointer'
345
+ }
346
+ }
347
+ },
348
+ {
349
+ type: "Control",
350
+ scope: "#/properties/text",
333
351
 
334
- // // background:"inherit",
335
- // // boxShadow:"none",
336
- // float:"left",
337
- // borderRadius:"50%"
338
-
339
- // },
340
- // },
341
- // },
352
+ options: {
353
+ widget: "Box",
354
+ },
355
+ config: {
356
+ layout: 9,
357
+ main: {
358
+ heading: "Previous Page",
359
+ onClick: "backHandler"
360
+ },
361
+ style: {
362
+ color: theme.palette.primary.dark,
363
+ fontSize: "12px",
364
+ cursor: 'pointer',
365
+ marginLeft: '-6px'
366
+ }
367
+ },
368
+ },
369
+ ],
370
+ },
371
+ ]
372
+ }
373
+ ],
374
+ };
375
+ return uiSchema
376
+ }