@rettangoli/ui 0.1.26 → 0.1.28
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.
- package/dist/rettangoli-iife-ui.min.js +15 -15
- package/package.json +1 -1
- package/src/components/dropdownMenu/dropdownMenu.view.yaml +3 -1
- package/src/components/form/form.view.yaml +31 -13
- package/src/components/select/select.view.yaml +6 -4
- package/src/components/sidebar/sidebar.view.yaml +6 -2
- package/src/components/tabs/tabs.view.yaml +3 -1
package/package.json
CHANGED
|
@@ -19,6 +19,8 @@ propsSchema:
|
|
|
19
19
|
- label
|
|
20
20
|
- item
|
|
21
21
|
- separator
|
|
22
|
+
testId:
|
|
23
|
+
type: string
|
|
22
24
|
|
|
23
25
|
attrsSchema:
|
|
24
26
|
type: object
|
|
@@ -50,7 +52,7 @@ template:
|
|
|
50
52
|
- rtgl-view w=f ph=lg pv=md:
|
|
51
53
|
- rtgl-text s=sm c=mu-fg: ${item.label}
|
|
52
54
|
$elif item.type == 'item':
|
|
53
|
-
- rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu:
|
|
55
|
+
- rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu data-testid=${item.testId}:
|
|
54
56
|
- rtgl-text: ${item.label}
|
|
55
57
|
$elif item.type == 'separator':
|
|
56
58
|
- rtgl-view w=f h=1 ph=lg mv=md bgc=bo:
|
|
@@ -33,6 +33,8 @@ propsSchema:
|
|
|
33
33
|
const: inputText
|
|
34
34
|
placeholder:
|
|
35
35
|
type: string
|
|
36
|
+
testId:
|
|
37
|
+
type: string
|
|
36
38
|
tooltip:
|
|
37
39
|
type: object
|
|
38
40
|
properties:
|
|
@@ -74,6 +76,8 @@ propsSchema:
|
|
|
74
76
|
required:
|
|
75
77
|
- label
|
|
76
78
|
- value
|
|
79
|
+
testId:
|
|
80
|
+
type: string
|
|
77
81
|
tooltip:
|
|
78
82
|
type: object
|
|
79
83
|
properties:
|
|
@@ -97,6 +101,8 @@ propsSchema:
|
|
|
97
101
|
const: colorPicker
|
|
98
102
|
value:
|
|
99
103
|
type: string
|
|
104
|
+
testId:
|
|
105
|
+
type: string
|
|
100
106
|
tooltip:
|
|
101
107
|
type: object
|
|
102
108
|
properties:
|
|
@@ -125,6 +131,8 @@ propsSchema:
|
|
|
125
131
|
type: number
|
|
126
132
|
value:
|
|
127
133
|
type: number
|
|
134
|
+
testId:
|
|
135
|
+
type: string
|
|
128
136
|
tooltip:
|
|
129
137
|
type: object
|
|
130
138
|
properties:
|
|
@@ -153,6 +161,8 @@ propsSchema:
|
|
|
153
161
|
type: number
|
|
154
162
|
value:
|
|
155
163
|
type: number
|
|
164
|
+
testId:
|
|
165
|
+
type: string
|
|
156
166
|
tooltip:
|
|
157
167
|
type: object
|
|
158
168
|
properties:
|
|
@@ -179,6 +189,8 @@ propsSchema:
|
|
|
179
189
|
type: number
|
|
180
190
|
placeholder:
|
|
181
191
|
type: string
|
|
192
|
+
testId:
|
|
193
|
+
type: string
|
|
182
194
|
tooltip:
|
|
183
195
|
type: object
|
|
184
196
|
properties:
|
|
@@ -209,6 +221,8 @@ propsSchema:
|
|
|
209
221
|
type: object
|
|
210
222
|
waveformData:
|
|
211
223
|
type: object
|
|
224
|
+
testId:
|
|
225
|
+
type: string
|
|
212
226
|
tooltip:
|
|
213
227
|
type: object
|
|
214
228
|
properties:
|
|
@@ -231,6 +245,8 @@ propsSchema:
|
|
|
231
245
|
const: popover-input
|
|
232
246
|
placeholder:
|
|
233
247
|
type: string
|
|
248
|
+
testId:
|
|
249
|
+
type: string
|
|
234
250
|
tooltip:
|
|
235
251
|
type: object
|
|
236
252
|
properties:
|
|
@@ -253,6 +269,8 @@ propsSchema:
|
|
|
253
269
|
type: string
|
|
254
270
|
content:
|
|
255
271
|
type: string
|
|
272
|
+
testId:
|
|
273
|
+
type: string
|
|
256
274
|
required:
|
|
257
275
|
- id
|
|
258
276
|
- content
|
|
@@ -328,35 +346,35 @@ template:
|
|
|
328
346
|
- $if field.inputType == "read-only-text":
|
|
329
347
|
- rtgl-text s=sm: ${field.defaultValue}
|
|
330
348
|
- $if field.inputType == "inputText" || field.inputType == 'input-text':
|
|
331
|
-
- rtgl-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step}:
|
|
349
|
+
- rtgl-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}:
|
|
332
350
|
- $if field.inputType == "input-number":
|
|
333
|
-
- rtgl-input-number#field-${field.name} w=f:
|
|
351
|
+
- rtgl-input-number#field-${field.name} w=f data-testid=${field.testId}:
|
|
334
352
|
- $if field.inputType == "input-textarea":
|
|
335
|
-
- rtgl-textarea#field-${field.name} w=f rows=${field.rows} w=f:
|
|
353
|
+
- rtgl-textarea#field-${field.name} w=f rows=${field.rows} w=f data-testid=${field.testId}:
|
|
336
354
|
- $if field.inputType == "popover-input":
|
|
337
|
-
- rtgl-popover-input#field-${field.name} label="${field.label}":
|
|
355
|
+
- rtgl-popover-input#field-${field.name} label="${field.label}" data-testid=${field.testId}:
|
|
338
356
|
- $if field.inputType == "select":
|
|
339
|
-
- rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption .selectedValue=#{field.selectedValue} .placeholder=#{field.placeholder}:
|
|
357
|
+
- rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption .selectedValue=#{field.selectedValue} .placeholder=#{field.placeholder} data-testid=${field.testId}:
|
|
340
358
|
- $if field.inputType == "colorPicker":
|
|
341
|
-
- rtgl-color-picker#field-${field.name} key=${key}:
|
|
359
|
+
- rtgl-color-picker#field-${field.name} key=${key} data-testid=${field.testId}:
|
|
342
360
|
- $if field.inputType == "slider":
|
|
343
|
-
- rtgl-slider#field-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step}:
|
|
361
|
+
- rtgl-slider#field-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}:
|
|
344
362
|
- $if field.inputType == "slider-input":
|
|
345
|
-
- rtgl-slider-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step}:
|
|
363
|
+
- rtgl-slider-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}:
|
|
346
364
|
- $if field.inputType == "image" && field.imageSrc:
|
|
347
|
-
- rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p:
|
|
365
|
+
- rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p data-testid=${field.testId}:
|
|
348
366
|
- $if field.inputType == "image" && !field.imageSrc:
|
|
349
|
-
- rtgl-view#field-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
|
|
367
|
+
- rtgl-view#field-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md data-testid=${field.testId}:
|
|
350
368
|
- rtgl-text c=mu-fg ta=c: ${field.placeholderText}
|
|
351
369
|
- $if field.inputType == "waveform" && field.waveformData:
|
|
352
|
-
- rtgl-waveform#field-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p:
|
|
370
|
+
- rtgl-waveform#field-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p data-testid=${field.testId}:
|
|
353
371
|
- $if field.inputType == "waveform" && !field.waveformData:
|
|
354
|
-
- rtgl-view#field-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
|
|
372
|
+
- rtgl-view#field-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md data-testid=${field.testId}:
|
|
355
373
|
- rtgl-text c=mu-fg ta=c: ${field.placeholder}
|
|
356
374
|
- $if field.inputType == "slot":
|
|
357
375
|
- 'slot#field-${field.slotName} name=${field.slot} style="display: contents;"':
|
|
358
376
|
- rtgl-view g=sm w=f:
|
|
359
377
|
- rtgl-view d=h ah=e g=sm w=f:
|
|
360
378
|
- $for button, i in actions.buttons:
|
|
361
|
-
- rtgl-button#action-${button.id}: ${button.content}
|
|
379
|
+
- rtgl-button#action-${button.id} data-testid=${button.testId}: ${button.content}
|
|
362
380
|
- rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} placement="top" content="${tooltipState.content}":
|
|
@@ -23,6 +23,8 @@ propsSchema:
|
|
|
23
23
|
type: string
|
|
24
24
|
value:
|
|
25
25
|
type: any
|
|
26
|
+
testId:
|
|
27
|
+
type: string
|
|
26
28
|
selectedValue:
|
|
27
29
|
type: any
|
|
28
30
|
onChange:
|
|
@@ -68,19 +70,19 @@ refs:
|
|
|
68
70
|
events: {}
|
|
69
71
|
|
|
70
72
|
template:
|
|
71
|
-
- rtgl-button#select-button v=ol ${containerAttrString}:
|
|
73
|
+
- rtgl-button#select-button v=ol ${containerAttrString} data-testid="select-button":
|
|
72
74
|
- rtgl-view d=h av=c w=f:
|
|
73
75
|
- rtgl-text c=${selectedLabelColor} ellipsis: ${selectedLabel}
|
|
74
76
|
- rtgl-view mh=md flex=1:
|
|
75
77
|
- $if showClear:
|
|
76
|
-
- rtgl-svg#clear-button mr=md svg=x wh=16 c=mu-fg cur=p:
|
|
78
|
+
- rtgl-svg#clear-button mr=md svg=x wh=16 c=mu-fg cur=p data-testid="select-clear-button":
|
|
77
79
|
- rtgl-svg svg=chevronDown wh=16 c=mu-fg:
|
|
78
80
|
- rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} placement=right-start:
|
|
79
81
|
- rtgl-view wh=300 g=xs slot=content bgc=background br=md sv=true:
|
|
80
82
|
- $for option, i in options:
|
|
81
|
-
- rtgl-view#option-${i} w=f ph=lg pv=md cur=p br=md bgc=${option.bgc}:
|
|
83
|
+
- rtgl-view#option-${i} w=f ph=lg pv=md cur=p br=md bgc=${option.bgc} data-testid=${option.testId}:
|
|
82
84
|
- rtgl-text: ${option.label}
|
|
83
85
|
- $if showAddOption:
|
|
84
86
|
- rtgl-view w=f bw=xs bc=mu-bg bt=sm:
|
|
85
|
-
- rtgl-view#option-add w=f ph=lg pv=md cur=p br=md bgc=${addOptionBgc}:
|
|
87
|
+
- rtgl-view#option-add w=f ph=lg pv=md cur=p br=md bgc=${addOptionBgc} data-testid="select-add-option":
|
|
86
88
|
- rtgl-text c=ac: ${addOptionLabel}
|
|
@@ -85,6 +85,8 @@ propsSchema:
|
|
|
85
85
|
type: string
|
|
86
86
|
href:
|
|
87
87
|
type: string
|
|
88
|
+
testId:
|
|
89
|
+
type: string
|
|
88
90
|
image:
|
|
89
91
|
type: object
|
|
90
92
|
properties:
|
|
@@ -109,6 +111,8 @@ propsSchema:
|
|
|
109
111
|
type: string
|
|
110
112
|
items:
|
|
111
113
|
type: array
|
|
114
|
+
testId:
|
|
115
|
+
type: string
|
|
112
116
|
|
|
113
117
|
refs:
|
|
114
118
|
header-image:
|
|
@@ -162,7 +166,7 @@ template:
|
|
|
162
166
|
- rtgl-view href=${header.href} d=h av=c ah=${headerAlign} g=lg w=${headerWidth}:
|
|
163
167
|
- *headerContent
|
|
164
168
|
$else:
|
|
165
|
-
- rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=p:
|
|
169
|
+
- rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=p data-testid=${header.testId}:
|
|
166
170
|
- *headerContent
|
|
167
171
|
|
|
168
172
|
- rtgl-view w=f ph=${headerPadding} pb=lg g=xs ah=${ah}:
|
|
@@ -174,7 +178,7 @@ template:
|
|
|
174
178
|
$else:
|
|
175
179
|
- rtgl-view mt=md h=1 bgc=mu-bg:
|
|
176
180
|
$else:
|
|
177
|
-
- rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p:
|
|
181
|
+
- rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p data-testid=${item.testId}:
|
|
178
182
|
- $if item.icon:
|
|
179
183
|
- $if showLabels:
|
|
180
184
|
- rtgl-view d=h ah=${itemContentAlign} g=sm:
|
|
@@ -37,6 +37,8 @@ propsSchema:
|
|
|
37
37
|
type: string
|
|
38
38
|
id:
|
|
39
39
|
type: string
|
|
40
|
+
testId:
|
|
41
|
+
type: string
|
|
40
42
|
|
|
41
43
|
attrsSchema:
|
|
42
44
|
type: object
|
|
@@ -60,5 +62,5 @@ events:
|
|
|
60
62
|
template:
|
|
61
63
|
- rtgl-view d=h g=sm bgc=mu p=sm br=lg ${containerAttrString}:
|
|
62
64
|
- $for item in items:
|
|
63
|
-
- rtgl-view#tab-${item.id} data-id=${item.id} cur=p bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg:
|
|
65
|
+
- rtgl-view#tab-${item.id} data-id=${item.id} cur=p bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg data-testid=${item.testId}:
|
|
64
66
|
- rtgl-text s=sm c=${item.textColor}: "${item.label}"
|