rettangoli-ui 0.0.1

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 (4) hide show
  1. package/README.md +590 -0
  2. package/dist/rettangoli-ui.min.js +953 -0
  3. package/dist/rettangoli-ui.min.js.map +7 -0
  4. package/package.json +36 -0
package/README.md ADDED
@@ -0,0 +1,590 @@
1
+ # rettangoli-ui
2
+
3
+ > [!WARNING]
4
+ > This library is still in experimental mode. Expect API and UI breaking changes to happen without prior announcement.
5
+
6
+ Rettangoli is a UI library with following characteristics
7
+
8
+ * it uses flexbox
9
+ * implemented in web components
10
+ * designed to be used for UI editors such as rettangoli-editor
11
+
12
+
13
+ | Component | Component | Description |
14
+ | ------------------ | ----------------------------------- | ----------------------------------------------------------------------- |
15
+ | `<rtgl-view>` | [View](#rtgl-view) | Building block to build layouts |
16
+ | `<rtgl-button>` | [Button](#rtgl-button) | Buttons |
17
+ | `<rtgl-text>` | [Text](#rtgl-text) | Text |
18
+ | `<rtgl-image>` | [Image](#rtgl-image) | Image |
19
+ | `<rtgl-svg>` | [SVG](#rtgl-svg) | SVG |
20
+ | `<rtgl-form>` | [Form](#rtgl-form) | Forms |
21
+
22
+
23
+ ## rtgl-view
24
+
25
+ The `rtgl-view` component offers a variety of attributes for extensive customization. Below are detailed tables for each attribute category.
26
+
27
+ | Attribute | Meaning | Values |
28
+ | --------- | ----------------------------------- | ----------------------------------------------------------------------- |
29
+ | `w` | [Width](#dimensions) | custom |
30
+ | `h` | [Height](#dimensions) | custom |
31
+ | `wh` | [Width and Height](#dimensions) | custom |
32
+ | `d` | [Direction](#direction) | `h`, `v` |
33
+ | `ah` | [Align Horizontal](#alignment) | `s`, `c`, `e` |
34
+ | `av` | [Align Vertical](#alignment) | `s`, `c`, `e` |
35
+ | `f` | [Flex](#flex) | `1`, `0` |
36
+ | `fw` | [Flex Wrap](#flex-wrap) | `w` |
37
+ | `g` | [Flex Gap](#flex-gap) | `xs`, `s`, `m`, `l`, `xl` |
38
+ | `gh` | [Flex Gap Horizontal](#flex-gap) | `xs`, `s`, `m`, `l`, `xl` |
39
+ | `gv` | [Flex Gap Vertical](#flex-gap) | `xs`, `s`, `m`, `l`, `xl` |
40
+ | `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
41
+ | `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
42
+ | `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
43
+ | `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
44
+ | `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
45
+ | `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
46
+ | `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
47
+ | `p` | [Padding](#padding) | `xs`, `s`, `m`, `l`, `xl` |
48
+ | `ph` | [Padding Horizontal](#padding) | `xs`, `s`, `m`, `l`, `xl` |
49
+ | `pv` | [Padding Vertical](#padding) | `xs`, `s`, `m`, `l`, `xl` |
50
+ | `pt` | [Padding Top](#padding) | `xs`, `s`, `m`, `l`, `xl` |
51
+ | `pr` | [Padding Right](#padding) | `xs`, `s`, `m`, `l`, `xl` |
52
+ | `pb` | [Padding Bottom](#padding) | `xs`, `s`, `m`, `l`, `xl` |
53
+ | `pl` | [Padding Left](#padding) | `xs`, `s`, `m`, `l`, `xl` |
54
+ | `bgc` | [Background Color](#background-color) | `p`, `pc`, `s`, `sc`, `e`, `ec`, `su `, `sucl`, `suc`, `such` |
55
+ | `br` | [Border Radius](#border-radius) | `xs`, `s`, `m`, `l`, `xl` |
56
+ | `bw` | [Border Width](#border-width) | `xs`, `s`, `m`, `l`, `xl` |
57
+ | `bc` | [Border Color](#border-color) | `p`, `pc`, `s`, `sc`, `e`, `ec`, `su`, `sucl`, `suc`, `such` |
58
+
59
+ ### Dimensions
60
+
61
+ #### Attributes
62
+
63
+ | Attribute | Meaning | Description |
64
+ | --------- | ---------------- | ------------------------------ |
65
+ | `w` | Width | |
66
+ | `h` | Heigh | |
67
+ | `wh` | Width and Height | Will set both width and height |
68
+
69
+ #### Values
70
+
71
+ Values can bet set to any number. Can postfix the unit, otherwise it will default to `px`
72
+
73
+ #### Examples
74
+
75
+ Sets width and height to 120px
76
+
77
+ ```html
78
+ <rtgl-view wh="120"></rtgl-view>
79
+ <rtgl-view wh="120px"></rtgl-view>
80
+ <rgtl-view w="120" h="120"></rtgl-view>
81
+ <rgtl-view w="120px" h="120px"></rtgl-view>
82
+ ```
83
+
84
+ Can also use other units
85
+
86
+ ```html
87
+ <rtgl-view width="100vw" height="100vh"></rtgl-view>
88
+ ```
89
+
90
+
91
+ ### Direction
92
+
93
+ #### Attributes
94
+
95
+ | Attribute | Meaning | Description |
96
+ | --------- | ---------- | ------------------------------ |
97
+ | `d` | Direction | Children items will be oredred horizotannly or vertically |
98
+
99
+ #### Values
100
+
101
+ | Value | Meaning |
102
+ | ----- | -------- |
103
+ | `v` | Vertical |
104
+ | `h` | Horizontal |
105
+
106
+ ### Alignment
107
+
108
+ #### Attributes
109
+
110
+ | Attribute | Meaning | Description |
111
+ | --------- | ---------------- | ------------------------------ |
112
+ | `ah` | Align Horizontal | Horizontally align child items |
113
+ | `av` | Align Vertical | Vertically align child items |
114
+
115
+ #### Values
116
+
117
+ | Value | Meaning | Default |
118
+ | ----- | ------- | ------- |
119
+ | | none | Yes |
120
+ | `s` | start | |
121
+ | `c` | center | |
122
+ | `e` | end | |
123
+
124
+ #### Examples
125
+
126
+ ```html
127
+ <rtgl-view ah="c"></rtgl-view>
128
+ <rtgl-view ah="e"></rtgl-view>
129
+ <rtgl-view av="c"></rtgl-view>
130
+ <rtgl-view av="e"></rtgl-view>
131
+ ```
132
+
133
+
134
+ ### Flex
135
+
136
+ #### Attribute
137
+
138
+ | Attribute | Meaning | Description |
139
+ | --------- | ---------------- | ------------------------------ |
140
+ | `flex` | Flex | Flex grow and shirink |
141
+
142
+ #### Values
143
+
144
+ | Value | Meaning |
145
+ | -------- | ------- |
146
+ | `0` | 0 |
147
+ | `1` | 1 |
148
+ | `none` | none |
149
+
150
+ #### Examples
151
+
152
+ ```html
153
+ <rtgl-view flex="1"></rtgl-view>
154
+ <rtgl-view flex="2"></rtgl-view>
155
+ <rtgl-view flex="3"></rtgl-view>
156
+ ```
157
+
158
+ ### Flex Wrap
159
+
160
+ #### Attributes
161
+
162
+ | Attribute | Meaning | Description |
163
+ | --------- | ---------------- | ------------------------------ |
164
+ | `fw` | Flex Wrap | Flex wrap or no wrap |
165
+
166
+ #### Values
167
+
168
+ | Value | Meaning |
169
+ | ----- | ------- |
170
+ | `w` | wrap |
171
+
172
+ #### Examples
173
+
174
+ ```html
175
+ <rtgl-view fw="w"></rtgl-view>
176
+ ```
177
+
178
+ ### Flex Gap
179
+
180
+ #### Attributes
181
+
182
+ | Attribute | Meaning | Description |
183
+ | --------- | ------------------- | ------------------------------------- |
184
+ | `g` | Flex Gap | Flex Gap both horizontal and vertical |
185
+ | `gh` | Flex Gap Horizontal | Flex Gap Horizontal |
186
+ | `gv` | Flex Gap Vertical | Flex Gap Vertical |
187
+
188
+ #### Values
189
+
190
+ | Value | Meaning |
191
+ | ------ | ----------- |
192
+ | `xs` | Extra small |
193
+ | `s` | Small |
194
+ | `m` | Medium |
195
+ | `l` | Large |
196
+ | `xl` | Extra large |
197
+
198
+ #### Examples
199
+
200
+ ```html
201
+ <rtgl-view g="m"></rtgl-view>
202
+ <rtgl-view gh="m" gv="m"></rtgl-view>
203
+ ```
204
+
205
+
206
+ ### Margin
207
+
208
+ #### Attributes
209
+
210
+ | Attribute | Meaning | Description |
211
+ | --------- | ----------------- | ------------------------------- |
212
+ | `m` | Margin | Sets margin in all 4 directions |
213
+ | `mh` | Margin Horizontal | Sets left and right margin |
214
+ | `mv` | Margin Vertical | Sets top and bottom margin |
215
+ | `mt` | Margin Top | |
216
+ | `ml` | Margin Left | |
217
+ | `mb` | Margin Bottom | |
218
+ | `mr` | Margin Right | |
219
+
220
+
221
+ #### Values
222
+
223
+ | Value | Meaning |
224
+ | ------ | ----------- |
225
+ | `xs` | Extra small |
226
+ | `s` | Small |
227
+ | `m` | Medium |
228
+ | `l` | Large |
229
+ | `xl` | Extra large |
230
+
231
+ #### Examples
232
+
233
+
234
+ ```html
235
+ <rtgl-view m="m"></rtgl-view>
236
+ <rtgl-view mh="m" mv="m"></rtgl-view>
237
+ <rtgl-view mt="m" mr="m" mb="m" ml="m"></rtgl-view>
238
+ ```
239
+
240
+
241
+ ### Padding
242
+
243
+ #### Attributes
244
+
245
+ | Attribute | Meaning | Description |
246
+ | --------- | ----------------- | ------------------------------- |
247
+ | `p` | Padding | Sets padding in all 4 directions |
248
+ | `ph` | Padding Horizontal | Sets left and right padding |
249
+ | `pv` | Padding Vertical | Sets top and bottom padding |
250
+ | `pt` | Padding Top | |
251
+ | `pl` | Padding Left | |
252
+ | `pb` | Padding Bottom | |
253
+ | `pr` | Padding Right | |
254
+
255
+ #### Values
256
+
257
+ | Value | Meaning |
258
+ | ------ | ----------- |
259
+ | `xs` | Extra small |
260
+ | `s` | Small |
261
+ | `m` | Medium |
262
+ | `l` | Large |
263
+ | `xl` | Extra large |
264
+
265
+ #### Examples
266
+
267
+ ```html
268
+ <rtgl-view p="m"></rtgl-view>
269
+ <rtgl-view ph="m" pv="m"></rtgl-view>
270
+ <rtgl-view pt="m" pr="m" pb="m" pl="m"></rtgl-view>
271
+ ```
272
+
273
+
274
+ ### Background Color
275
+
276
+ #### Attributes
277
+
278
+ | Attribute | Meaning | Description |
279
+ | --------- | ---------------- | ------------------------------ |
280
+ | `bgc` | Background Color | Background Color |
281
+
282
+
283
+ #### Values
284
+
285
+ | Value | Meaning |
286
+ | ------- | --------------------- |
287
+ | `p` | primary |
288
+ | `pc` | primary-container |
289
+ | `s` | secondary |
290
+ | `sc` | secondary container |
291
+ | `e` | error |
292
+ | `ec` | error-container |
293
+ | `su` | surface |
294
+ | `sucl` | surface container low |
295
+ | `suc` | surface container |
296
+ | `such` | suface container high |
297
+
298
+ #### Examples
299
+
300
+ TODO
301
+
302
+ ### Border Radius
303
+
304
+ #### Attributes
305
+
306
+ | Attribute | Meaning | Description |
307
+ | --------- | ---------------- | ------------------------------ |
308
+ | `br` | Border Radius | Border Radius |
309
+
310
+ #### Values
311
+
312
+ | Value | Meaning |
313
+ | ------ | ----------- |
314
+ | `xs` | Extra small |
315
+ | `s` | Small |
316
+ | `m` | Medium |
317
+ | `l` | Large |
318
+ | `xl` | Extra large |
319
+
320
+ #### Examples
321
+
322
+ TODO
323
+
324
+ ### Border Width
325
+
326
+ #### Attributes
327
+
328
+ | Attribute | Meaning | Description |
329
+ | --------- | ---------------- | ------------------------------ |
330
+ | `bw` | Border Width | Border Width |
331
+
332
+ #### Values
333
+
334
+ | Value | Meaning |
335
+ | ------ | ----------- |
336
+ | `xs` | Extra small |
337
+ | `s` | Small |
338
+ | `m` | Medium |
339
+ | `l` | Large |
340
+ | `xl` | Extra large |
341
+
342
+ #### Examples
343
+
344
+ TODO
345
+
346
+ ### Border Color
347
+
348
+ #### Attributes
349
+
350
+ | Attribute | Meaning | Description |
351
+ | --------- | ---------------- | ------------------------------ |
352
+ | `bc` | Border Color | Border Color |
353
+
354
+ #### Values
355
+
356
+ | Value | Meaning |
357
+ | ------- | --------------------- |
358
+ | `p` | primary |
359
+ | `pc` | primary-container |
360
+ | `s` | secondary |
361
+ | `sc` | secondary container |
362
+ | `e` | error |
363
+ | `ec` | error-container |
364
+ | `s` | surface |
365
+ | `scl` | surface container low |
366
+ | `sc` | surface container |
367
+ | `sch` | suface container high |
368
+
369
+ #### Examples
370
+
371
+ TODO
372
+
373
+
374
+
375
+
376
+ ## rtgl-button
377
+
378
+ The `rtgl-button` provides basic styling for buttons
379
+
380
+ | Attribute | Meaning | Values |
381
+ | --------- | ------------------------------------ | ----------------------------------------------------------------------- |
382
+ | `t` | [Type](#type) | `p`, `pl`, `ps`, `s`, `sl`, `ss`, `e`, `el` |
383
+ | `f` | [Flex](#flex) | `1`, `0` |
384
+ | `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
385
+ | `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
386
+ | `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
387
+ | `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
388
+ | `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
389
+ | `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
390
+ | `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
391
+
392
+
393
+ ### Type
394
+
395
+ #### Attributes
396
+
397
+ | Attribute | Meaning | Description |
398
+ | --------- | ---------------- | ------------------------------ |
399
+ | `t` | Type | Provides type combinations for different sizes and color styles |
400
+
401
+ #### Values
402
+
403
+ | Value | Meaning |
404
+ | ------- | --------------------- |
405
+ | `p` | Primary |
406
+ | `pl` | Primary Large |
407
+ | `ps` | Primary Small |
408
+ | `s` | Secondary |
409
+ | `sl` | Secondary Large |
410
+ | `ss` | Secondary Small |
411
+ | `e` | Error |
412
+ | `el` | Error Large |
413
+ | `es` | Error Small |
414
+
415
+
416
+ ## rtgl-text
417
+
418
+ The `rtgl-text` provides text in standard sizes and colors
419
+
420
+ | Attribute | Meaning | Values |
421
+ | --------- | ------------------------------------ | -------------------------------------------------------------------------------- |
422
+ | `s` | [Size](#size) | `dm`, `hm`, `tl`, `tm`, `ts`, `bl`, `bm`, `bs`, `ll`, `lm` |
423
+ | `c` | [Color](#color) | `on-p`, `on-pc`, `on-s` , `on-sc`, `on-su`, `on-suv`, `i-on-s`, `on-e`, `on-ec` |
424
+ | `f` | [Flex](#flex) | `1`, `0` |
425
+ | `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
426
+ | `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
427
+ | `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
428
+ | `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
429
+ | `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
430
+ | `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
431
+ | `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
432
+
433
+ ### Size
434
+
435
+ #### Attributes
436
+
437
+ | Attribute | Meaning | Description |
438
+ | --------- | ---------------- | ------------------------------ |
439
+ | `s` | Size | Text sizes |
440
+
441
+ #### Values
442
+
443
+ | Value | Meaning |
444
+ | ------- | ------------------ |
445
+ | `dm` | Display Medium |
446
+ | `hm` | Headline Medium |
447
+ | `tl` | Title Large |
448
+ | `tm` | Title Medium |
449
+ | `ts` | Title Small |
450
+ | `bl` | Body Large |
451
+ | `bm` | Body Medium |
452
+ | `bs` | Body Small |
453
+ | `ll` | Label Large |
454
+ | `lm` | Label Medium |
455
+
456
+ #### Examples
457
+
458
+ TODO
459
+
460
+ ### Color
461
+
462
+ #### Attributes
463
+
464
+ | Attribute | Meaning | Description |
465
+ | --------- | ---------------- | ------------------------------ |
466
+ | `c` | Color | Text color |
467
+
468
+
469
+ #### Values
470
+
471
+ | Value | Meaning |
472
+ | ---------- | ---------------------- |
473
+ | `on-p` | On Primary |
474
+ | `on-pc` | On Primary Container |
475
+ | `on-s` | On Secondary |
476
+ | `on-sc` | On Secondary Container |
477
+ | `on-su` | On Surface |
478
+ | `on-suv` | on Surface Variant |
479
+ | `i-on-s` | Inverse on surface |
480
+ | `on-e` | On Error |
481
+ | `on-ec` | On Error Container |
482
+
483
+ #### Examples
484
+
485
+ TODO
486
+
487
+ ## rtgl-image
488
+
489
+ Displays images
490
+
491
+
492
+ | Attribute | Meaning | Values |
493
+ | --------- | ------------------------------------ | -------------------------------------------------------------------------------- |
494
+ | `w` | [Width](#dimensions) | custom |
495
+ | `h` | [Height](#dimensions) | custom |
496
+ | `wh` | [Width and Height](#dimensions) | custom |
497
+ | `src` | [Source](#source) | custom |
498
+ | `of` | [Object Fit](#object-fit) | `cov`, `con` |
499
+ | `f` | [Flex](#flex) | `1`, `0` |
500
+ | `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
501
+ | `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
502
+ | `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
503
+ | `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
504
+ | `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
505
+ | `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
506
+ | `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
507
+
508
+
509
+
510
+ ### Source
511
+
512
+ #### Attributes
513
+ | Attribute | Meaning | Description |
514
+ | --------- | ---------------- | ------------------------------ |
515
+ | `src` | Source | Same as standard `<img src="">` |
516
+
517
+ #### Values
518
+
519
+ Should be a url to a remote or local image
520
+
521
+
522
+ #### Examples
523
+
524
+ TODO
525
+
526
+
527
+ ### Object Fit
528
+
529
+ #### Attributes
530
+ | Attribute | Meaning | Description |
531
+ | --------- | ---------------- | ------------------------------ |
532
+ | `of` | Object Fit | |
533
+
534
+ #### Values
535
+
536
+ | Value | Meaning |
537
+ | ---------- | ---------------------- |
538
+ | `cov` | Cover |
539
+ | `con` | Contain |
540
+
541
+ #### Examples
542
+
543
+ TODO
544
+
545
+ ## rtgl-svg
546
+
547
+ | Attribute | Meaning | Values |
548
+ | --------- | ------------------------------------ | -------------------------------------------------------------------------------- |
549
+ | `w` | [Width](#dimensions) | custom |
550
+ | `h` | [Height](#dimensions) | custom |
551
+ | `wh` | [Width and Height](#dimensions) | custom |
552
+ | `svg` | [SVG](#svg) | custom |
553
+ | `f` | [Flex](#flex) | `1`, `0` |
554
+ | `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
555
+ | `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
556
+ | `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
557
+ | `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
558
+ | `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
559
+ | `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
560
+ | `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
561
+
562
+
563
+ ### SVG
564
+
565
+ #### Attributes
566
+ | Attribute | Meaning | Description |
567
+ | --------- | ---------------- | ------------------------------ |
568
+ | `svg` | SVG | |
569
+
570
+ #### Values
571
+
572
+ Name of the svg
573
+ All names must be registered with global window variable:
574
+
575
+ ```js
576
+ window.rtglSvgs = {
577
+ 'svgName1': '<svg>...</svg>',
578
+ 'svgName2': '<svg>...</svg>'
579
+ }
580
+ ```
581
+
582
+ #### Examples
583
+
584
+ ```html
585
+ <rtgl-svg svg="svgName1"></rtgl-svg>
586
+ ```
587
+
588
+ ## rtgl-form
589
+
590
+ TODO