rapida-partner 1.16.0 → 1.16.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.
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@ export interface IActor {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export interface IActionWithElement {
|
|
14
|
-
verb: "create" | "get" | "getById" | "update" | "softDelete" | "hardDelete" | "clone" | "sendEmail";
|
|
14
|
+
verb: "create" | "get" | "getById" | "update" | "softDelete" | "hardDelete" | "clone" | "sendEmail" | "use" | "generate" | "calculate" | "validate" | "approve" | "reject" | "test" | "deploy";
|
|
15
15
|
elements?: IFlowChartElement[];
|
|
16
16
|
businessRules?: IBusinessRule[];
|
|
17
17
|
}
|
|
@@ -0,0 +1,795 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-br">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Componentes Visuais (Versão 5 - Com Exemplos)</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: "Arial", sans-serif;
|
|
10
|
+
padding: 24px;
|
|
11
|
+
background-color: #f4f4f4;
|
|
12
|
+
color: #333;
|
|
13
|
+
}
|
|
14
|
+
h1,
|
|
15
|
+
h2,
|
|
16
|
+
h3 {
|
|
17
|
+
border-bottom: 2px solid #ddd;
|
|
18
|
+
padding-bottom: 10px;
|
|
19
|
+
text-align: center;
|
|
20
|
+
}
|
|
21
|
+
h2 {
|
|
22
|
+
margin-top: 40px;
|
|
23
|
+
text-align: left;
|
|
24
|
+
font-size: 1.5em;
|
|
25
|
+
}
|
|
26
|
+
h3 {
|
|
27
|
+
margin-top: 0;
|
|
28
|
+
padding-bottom: 8px;
|
|
29
|
+
border-bottom: 1px solid #eee;
|
|
30
|
+
font-size: 1.1em;
|
|
31
|
+
text-align: left;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* --- Contêineres de Grid (Para o Dicionário) --- */
|
|
35
|
+
.container {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
38
|
+
gap: 20px;
|
|
39
|
+
}
|
|
40
|
+
.container.containers {
|
|
41
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
42
|
+
}
|
|
43
|
+
.container.logic,
|
|
44
|
+
.container.list-logic {
|
|
45
|
+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
46
|
+
}
|
|
47
|
+
.container.list-props {
|
|
48
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* --- Card Genérico (Para o Dicionário) --- */
|
|
52
|
+
.element-card {
|
|
53
|
+
background-color: #ffffff;
|
|
54
|
+
border: 1px solid #ddd;
|
|
55
|
+
border-radius: 8px;
|
|
56
|
+
padding: 16px;
|
|
57
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
58
|
+
/* Garante que todos os cards no dicionário tenham a mesma altura */
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
justify-content: space-between;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* --- [INÍCIO] Seção: Estilos de Componentes (Dicionário) --- */
|
|
65
|
+
|
|
66
|
+
.label {
|
|
67
|
+
display: block;
|
|
68
|
+
margin-bottom: 5px;
|
|
69
|
+
font-weight: bold;
|
|
70
|
+
font-size: 0.9em;
|
|
71
|
+
color: #555;
|
|
72
|
+
}
|
|
73
|
+
.box {
|
|
74
|
+
border: 2px solid #333;
|
|
75
|
+
background: #fff;
|
|
76
|
+
padding: 0 12px;
|
|
77
|
+
height: 44px;
|
|
78
|
+
border-radius: 4px;
|
|
79
|
+
display: flex;
|
|
80
|
+
justify-content: space-between;
|
|
81
|
+
align-items: center;
|
|
82
|
+
box-sizing: border-box;
|
|
83
|
+
}
|
|
84
|
+
.placeholder {
|
|
85
|
+
color: #a0a0a0;
|
|
86
|
+
font-style: italic;
|
|
87
|
+
}
|
|
88
|
+
.icon-symbol {
|
|
89
|
+
font-family: "Courier New", Courier, monospace;
|
|
90
|
+
font-weight: bold;
|
|
91
|
+
font-size: 1.2em;
|
|
92
|
+
color: #333;
|
|
93
|
+
}
|
|
94
|
+
.label-input {
|
|
95
|
+
color: #2a8a2a;
|
|
96
|
+
}
|
|
97
|
+
.label-input-data {
|
|
98
|
+
color: #0d6efd;
|
|
99
|
+
}
|
|
100
|
+
.label-input-arquivo {
|
|
101
|
+
color: #2a8a2a;
|
|
102
|
+
}
|
|
103
|
+
.label-select {
|
|
104
|
+
color: #d9534f;
|
|
105
|
+
}
|
|
106
|
+
.label-select-multi {
|
|
107
|
+
color: #f0ad4e;
|
|
108
|
+
}
|
|
109
|
+
.label-autocomplete {
|
|
110
|
+
color: #d63384;
|
|
111
|
+
}
|
|
112
|
+
.label-autocomplete-multi {
|
|
113
|
+
color: #0d6efd;
|
|
114
|
+
}
|
|
115
|
+
.label-array {
|
|
116
|
+
color: #d63384;
|
|
117
|
+
}
|
|
118
|
+
.icon-data {
|
|
119
|
+
color: #0d6efd;
|
|
120
|
+
}
|
|
121
|
+
.icon-arquivo {
|
|
122
|
+
color: #2a8a2a;
|
|
123
|
+
}
|
|
124
|
+
.icon-senha {
|
|
125
|
+
letter-spacing: 2px;
|
|
126
|
+
}
|
|
127
|
+
.icon-select {
|
|
128
|
+
color: #d9534f;
|
|
129
|
+
font-size: 1.5em;
|
|
130
|
+
}
|
|
131
|
+
.icon-select-multi {
|
|
132
|
+
color: #f0ad4e;
|
|
133
|
+
font-size: 1.5em;
|
|
134
|
+
line-height: 1;
|
|
135
|
+
}
|
|
136
|
+
.icon-autocomplete {
|
|
137
|
+
color: #d63384;
|
|
138
|
+
font-size: 1.5em;
|
|
139
|
+
}
|
|
140
|
+
.icon-autocomplete-multi {
|
|
141
|
+
color: #0d6efd;
|
|
142
|
+
font-size: 1.5em;
|
|
143
|
+
}
|
|
144
|
+
.box-button {
|
|
145
|
+
background-color: #555;
|
|
146
|
+
color: #ffffff;
|
|
147
|
+
font-weight: bold;
|
|
148
|
+
justify-content: center;
|
|
149
|
+
border-color: #555;
|
|
150
|
+
}
|
|
151
|
+
.box-button .placeholder {
|
|
152
|
+
color: #fff;
|
|
153
|
+
font-style: normal;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.box-container {
|
|
157
|
+
font-family: "Courier New", Courier, monospace;
|
|
158
|
+
font-weight: bold;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
height: 40px;
|
|
161
|
+
padding: 10px 12px;
|
|
162
|
+
border-style: dashed;
|
|
163
|
+
}
|
|
164
|
+
.box-array {
|
|
165
|
+
background-color: #333;
|
|
166
|
+
color: white;
|
|
167
|
+
border-color: #888;
|
|
168
|
+
}
|
|
169
|
+
.box-fieldset {
|
|
170
|
+
background-color: #eaf0e6;
|
|
171
|
+
color: #5a6352;
|
|
172
|
+
border-color: #9eac8e;
|
|
173
|
+
}
|
|
174
|
+
.box-tab {
|
|
175
|
+
background-color: #fffaf0;
|
|
176
|
+
color: #c58d2a;
|
|
177
|
+
border-color: #f0ad4e;
|
|
178
|
+
}
|
|
179
|
+
.box-tab-title {
|
|
180
|
+
background-color: #f7f3d6;
|
|
181
|
+
border: 2px solid #f0ad4e;
|
|
182
|
+
color: #c58d2a;
|
|
183
|
+
}
|
|
184
|
+
.icon-tab-star {
|
|
185
|
+
color: #d9534f;
|
|
186
|
+
font-size: 1.4em;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.box-meta {
|
|
190
|
+
padding: 12px;
|
|
191
|
+
border-radius: 8px;
|
|
192
|
+
border-width: 3px;
|
|
193
|
+
border-style: dashed;
|
|
194
|
+
background-color: #fff;
|
|
195
|
+
}
|
|
196
|
+
.box-meta pre {
|
|
197
|
+
font-family: "Courier New", Courier, monospace;
|
|
198
|
+
font-size: 1.1em;
|
|
199
|
+
margin: 0;
|
|
200
|
+
line-height: 1.6;
|
|
201
|
+
font-weight: 600;
|
|
202
|
+
}
|
|
203
|
+
.box-form-wrapper {
|
|
204
|
+
border-color: #777;
|
|
205
|
+
color: #333;
|
|
206
|
+
}
|
|
207
|
+
.box-business-rules {
|
|
208
|
+
border-color: #d9534f;
|
|
209
|
+
color: #a94442;
|
|
210
|
+
}
|
|
211
|
+
.box-conditions {
|
|
212
|
+
border-color: #0d6efd;
|
|
213
|
+
color: #0a58ca;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* --- Estilos de Lista (Dicionário) --- */
|
|
217
|
+
.box-list-wrapper {
|
|
218
|
+
border-color: #198754;
|
|
219
|
+
color: #146c43;
|
|
220
|
+
}
|
|
221
|
+
.box-datasource {
|
|
222
|
+
border-color: #6f42c1;
|
|
223
|
+
color: #58359a;
|
|
224
|
+
}
|
|
225
|
+
.box-list-action {
|
|
226
|
+
border-color: #fd7e14;
|
|
227
|
+
color: #c5620f;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.list-item-image {
|
|
231
|
+
width: 100%;
|
|
232
|
+
height: 80px;
|
|
233
|
+
background-color: #eee;
|
|
234
|
+
border: 2px dashed #aaa;
|
|
235
|
+
display: flex;
|
|
236
|
+
justify-content: center;
|
|
237
|
+
align-items: center;
|
|
238
|
+
font-weight: bold;
|
|
239
|
+
color: #888;
|
|
240
|
+
border-radius: 4px;
|
|
241
|
+
}
|
|
242
|
+
.list-item-prop {
|
|
243
|
+
border: 2px dashed #ddd;
|
|
244
|
+
padding: 8px;
|
|
245
|
+
border-radius: 4px;
|
|
246
|
+
background-color: #fcfcfc;
|
|
247
|
+
text-align: center;
|
|
248
|
+
}
|
|
249
|
+
.list-item-prop.type-title {
|
|
250
|
+
font-size: 1.2em;
|
|
251
|
+
font-weight: bold;
|
|
252
|
+
color: #333;
|
|
253
|
+
border-color: #aaa;
|
|
254
|
+
}
|
|
255
|
+
.list-item-prop.type-subtitle {
|
|
256
|
+
font-size: 0.9em;
|
|
257
|
+
color: #666;
|
|
258
|
+
border-color: #ccc;
|
|
259
|
+
}
|
|
260
|
+
.list-item-prop.type-description {
|
|
261
|
+
font-size: 1em;
|
|
262
|
+
color: #444;
|
|
263
|
+
border-color: #ddd;
|
|
264
|
+
border-style: dotted;
|
|
265
|
+
}
|
|
266
|
+
.list-item-menu {
|
|
267
|
+
font-size: 1.5em;
|
|
268
|
+
font-weight: bold;
|
|
269
|
+
color: #555;
|
|
270
|
+
padding: 10px;
|
|
271
|
+
text-align: center;
|
|
272
|
+
border: 2px dashed #aaa;
|
|
273
|
+
border-radius: 4px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* --- [FIM] Seção: Estilos de Componentes (Dicionário) --- */
|
|
277
|
+
|
|
278
|
+
/* --- [NOVO] Estilos para Exemplos de Documentação --- */
|
|
279
|
+
.documentation-example {
|
|
280
|
+
max-width: 800px;
|
|
281
|
+
margin: 20px auto;
|
|
282
|
+
padding: 24px;
|
|
283
|
+
background-color: #ffffff;
|
|
284
|
+
border: 1px solid #ccc;
|
|
285
|
+
border-radius: 8px;
|
|
286
|
+
display: flex;
|
|
287
|
+
flex-direction: column;
|
|
288
|
+
gap: 16px; /* Espaçamento entre todos os elementos */
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* Estilo para um item de formulário dentro do exemplo */
|
|
292
|
+
.example-item {
|
|
293
|
+
background-color: #f9f9f9;
|
|
294
|
+
border: 1px solid #eee;
|
|
295
|
+
border-radius: 4px;
|
|
296
|
+
padding: 16px;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* Estilo para containers (fieldset, array, tab) para mostrar aninhamento */
|
|
300
|
+
.example-container-content {
|
|
301
|
+
padding-left: 24px;
|
|
302
|
+
border-left: 3px solid #f0ad4e; /* Amarelo/Laranja */
|
|
303
|
+
margin-top: 16px;
|
|
304
|
+
display: flex;
|
|
305
|
+
flex-direction: column;
|
|
306
|
+
gap: 16px; /* Espaçamento entre itens dentro de um container */
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* Cor da borda específica para cada container */
|
|
310
|
+
.container-fieldset .example-container-content {
|
|
311
|
+
border-color: #9eac8e; /* Verde Oliva */
|
|
312
|
+
}
|
|
313
|
+
.container-array .example-container-content {
|
|
314
|
+
border-color: #d63384; /* Rosa */
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* Estilo para um item de lista no exemplo */
|
|
318
|
+
.example-list-item-card {
|
|
319
|
+
border: 2px solid #ccc;
|
|
320
|
+
border-radius: 8px;
|
|
321
|
+
padding: 16px;
|
|
322
|
+
background-color: #fdfdfd;
|
|
323
|
+
display: flex;
|
|
324
|
+
flex-direction: column;
|
|
325
|
+
gap: 12px;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.note {
|
|
329
|
+
font-size: 0.95em;
|
|
330
|
+
color: #555;
|
|
331
|
+
background-color: #fef9e7;
|
|
332
|
+
padding: 12px;
|
|
333
|
+
border: 1px solid #f1c40f;
|
|
334
|
+
border-radius: 4px;
|
|
335
|
+
}
|
|
336
|
+
</style>
|
|
337
|
+
</head>
|
|
338
|
+
<body>
|
|
339
|
+
<h1>Dicionário Visual de Componentes</h1>
|
|
340
|
+
<p style="text-align: center; max-width: 800px; margin: auto">
|
|
341
|
+
Use os blocos abaixo como uma "paleta de ferramentas" para construir seus
|
|
342
|
+
exemplos de documentação. Os exemplos reais devem seguir o padrão linear
|
|
343
|
+
"de cima para baixo", como mostrado no final desta página.
|
|
344
|
+
</p>
|
|
345
|
+
|
|
346
|
+
<h2>Campos de Formulário (IForm)</h2>
|
|
347
|
+
<div class="container">
|
|
348
|
+
<div class="element-card">
|
|
349
|
+
<h3>Input (Texto Padrão)</h3>
|
|
350
|
+
<label class="label label-input">Rótulo do input</label>
|
|
351
|
+
<div class="box">
|
|
352
|
+
<span class="placeholder">Placeholder para apresentar</span>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
<div class="element-card">
|
|
356
|
+
<h3>Input (Data)</h3>
|
|
357
|
+
<label class="label label-input-data">Rótulo do input de data*</label>
|
|
358
|
+
<div class="box">
|
|
359
|
+
<span class="placeholder"></span>
|
|
360
|
+
<span class="icon-symbol icon-data">[CAL]</span>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="element-card">
|
|
364
|
+
<h3>Input (Arquivo)</h3>
|
|
365
|
+
<label class="label label-input-arquivo"
|
|
366
|
+
>Rótulo de input de arquivo</label
|
|
367
|
+
>
|
|
368
|
+
<div class="box">
|
|
369
|
+
<span class="placeholder"></span>
|
|
370
|
+
<span class="icon-symbol icon-arquivo">[ ⇪ ]</span>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="element-card">
|
|
374
|
+
<h3>Input (Senha)</h3>
|
|
375
|
+
<label class="label">Rótulo de input de senha</label>
|
|
376
|
+
<div class="box">
|
|
377
|
+
<span class="placeholder"></span>
|
|
378
|
+
<span class="icon-symbol icon-senha">[***]</span>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="element-card">
|
|
382
|
+
<h3>Input (Número)</h3>
|
|
383
|
+
<label class="label">Rótulo de input de número</label>
|
|
384
|
+
<div class="box">
|
|
385
|
+
<span class="placeholder"></span>
|
|
386
|
+
<span class="icon-symbol icon-numero">[123]</span>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
<div class="element-card">
|
|
390
|
+
<h3>Button</h3>
|
|
391
|
+
<label class="label">Rótulo do button</label>
|
|
392
|
+
<div class="box box-button">
|
|
393
|
+
<span class="placeholder">Placeholder para apresentar</span>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="element-card">
|
|
397
|
+
<h3>Select (Simples)</h3>
|
|
398
|
+
<label class="label label-select">Rótulo do select*</label>
|
|
399
|
+
<div class="box">
|
|
400
|
+
<span class="placeholder">Placeholder para apresentar</span>
|
|
401
|
+
<span class="icon-symbol icon-select">▼</span>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
<div class="element-card">
|
|
405
|
+
<h3>Select (Múltiplo)</h3>
|
|
406
|
+
<label class="label label-select-multi"
|
|
407
|
+
>Rótulo do select múltiplo*</label
|
|
408
|
+
>
|
|
409
|
+
<div class="box">
|
|
410
|
+
<span class="placeholder">Placeholder para apresentar</span>
|
|
411
|
+
<span class="icon-symbol icon-select-multi">≡</span>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="element-card">
|
|
415
|
+
<h3>Autocomplete (Simples)</h3>
|
|
416
|
+
<label class="label label-autocomplete">Rótulo do autocomplete*</label>
|
|
417
|
+
<div class="box">
|
|
418
|
+
<span class="placeholder">Placeholder para apresentar</span>
|
|
419
|
+
<span class="icon-symbol icon-autocomplete">⌕</span>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="element-card">
|
|
423
|
+
<h3>Autocomplete (Múltiplo)</h3>
|
|
424
|
+
<label class="label label-autocomplete-multi"
|
|
425
|
+
>Rótulo do autocomplete múltiplo</label
|
|
426
|
+
>
|
|
427
|
+
<div class="box">
|
|
428
|
+
<span class="placeholder">Placeholder para apresentar</span>
|
|
429
|
+
<span class="icon-symbol icon-autocomplete-multi">⌕+</span>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
|
|
434
|
+
<h2>Elementos de Container (IForm)</h2>
|
|
435
|
+
<div class="container containers">
|
|
436
|
+
<div class="element-card">
|
|
437
|
+
<h3>Fieldset (Agrupador)</h3>
|
|
438
|
+
<label class="label">Título do fieldset</label>
|
|
439
|
+
<div class="box box-container box-fieldset">[ → FIELDSET BEGIN ]</div>
|
|
440
|
+
<div class="box box-container box-fieldset" style="margin-top: 10px">
|
|
441
|
+
[ ← FIELDSET END ]
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="element-card">
|
|
445
|
+
<h3>Array (Itens Repetidos)</h3>
|
|
446
|
+
<label class="label label-array">Adicionar item</label>
|
|
447
|
+
<div class="box box-container box-array">[ ↓ ARRAY BEGIN ]</div>
|
|
448
|
+
<div class="box box-container box-array" style="margin-top: 10px">
|
|
449
|
+
[ ↑ ARRAY END ]
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="element-card">
|
|
453
|
+
<h3>Tab (Container Pai)</h3>
|
|
454
|
+
<label class="label">(Wrapper de Abas)</label>
|
|
455
|
+
<div class="box box-container box-tab">[ ✦ TAB BEGIN ]</div>
|
|
456
|
+
<div class="box box-container box-tab" style="margin-top: 10px">
|
|
457
|
+
[ TAB END ✦ ]
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="element-card">
|
|
461
|
+
<h3>Tab (Aba Individual)</h3>
|
|
462
|
+
<label class="label">(Botão da Aba)</label>
|
|
463
|
+
<div class="box box-tab-title">
|
|
464
|
+
<span class="icon-symbol icon-tab-star">★</span>
|
|
465
|
+
<span>Título da tab</span>
|
|
466
|
+
<span class="icon-symbol icon-tab-star"></span>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
|
|
471
|
+
<h2>Elementos de Lógica e Metadados (Comuns)</h2>
|
|
472
|
+
<div class="container logic">
|
|
473
|
+
<div class="element-card">
|
|
474
|
+
<h3>Componente (Form)</h3>
|
|
475
|
+
<div class="box-meta box-form-wrapper">
|
|
476
|
+
<pre>
|
|
477
|
+
componentType: form
|
|
478
|
+
title: Exemplo de formulário</pre
|
|
479
|
+
>
|
|
480
|
+
</div>
|
|
481
|
+
</div>
|
|
482
|
+
<div class="element-card">
|
|
483
|
+
<h3>Regras de Negócio (IBusinessRule[])</h3>
|
|
484
|
+
<div class="box-meta box-business-rules">
|
|
485
|
+
<pre>
|
|
486
|
+
rule: Regra 1,
|
|
487
|
+
rule: Regra 2,
|
|
488
|
+
subrule: Subregra 2.1
|
|
489
|
+
rule: Regra 3</pre
|
|
490
|
+
>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="element-card">
|
|
494
|
+
<h3>Condições (IFormCondition[])</h3>
|
|
495
|
+
<div class="box-meta box-conditions">
|
|
496
|
+
<pre>
|
|
497
|
+
conditionType: form
|
|
498
|
+
key: CampoDoFormulario
|
|
499
|
+
value: valor esperado
|
|
500
|
+
comparisonOperator: !==</pre
|
|
501
|
+
>
|
|
502
|
+
</div>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
|
|
506
|
+
<h2>Componentes de Lista (IList)</h2>
|
|
507
|
+
<div class="container list-logic">
|
|
508
|
+
<div class="element-card">
|
|
509
|
+
<h3>Componente (List)</h3>
|
|
510
|
+
<div class="box-meta box-list-wrapper">
|
|
511
|
+
<pre>
|
|
512
|
+
componentType: list
|
|
513
|
+
title: Exemplo de Lista</pre
|
|
514
|
+
>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
<div class="element-card">
|
|
518
|
+
<h3>Fonte de Dados (dataSource)</h3>
|
|
519
|
+
<div class="box-meta box-datasource">
|
|
520
|
+
<pre>
|
|
521
|
+
dataSource: {
|
|
522
|
+
endpoint: "/api/items",
|
|
523
|
+
paramType: "query"
|
|
524
|
+
}</pre
|
|
525
|
+
>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="element-card">
|
|
529
|
+
<h3>Ação: Card Clicável (cardAsALink)</h3>
|
|
530
|
+
<div class="box-meta box-list-action">
|
|
531
|
+
<pre>
|
|
532
|
+
cardAsALink: {
|
|
533
|
+
link: "/items/detalhe",
|
|
534
|
+
propertiesAsPathParam: ["_id"]
|
|
535
|
+
}</pre
|
|
536
|
+
>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
|
|
541
|
+
<h3>Propriedades e Ações do Template (IList)</h3>
|
|
542
|
+
<div class="container list-props">
|
|
543
|
+
<div class="element-card">
|
|
544
|
+
<h4>Propriedade: Imagem</h4>
|
|
545
|
+
<div class="list-item-image">[IMG]</div>
|
|
546
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
547
|
+
type: "image"
|
|
548
|
+
property: "urlDaImagem"</pre
|
|
549
|
+
>
|
|
550
|
+
</div>
|
|
551
|
+
<div class="element-card">
|
|
552
|
+
<h4>Propriedade: Título</h4>
|
|
553
|
+
<div class="list-item-prop type-title">Título do Item</div>
|
|
554
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
555
|
+
type: "title"
|
|
556
|
+
property: "nome"</pre
|
|
557
|
+
>
|
|
558
|
+
</div>
|
|
559
|
+
<div class="element-card">
|
|
560
|
+
<h4>Propriedade: Subtítulo</h4>
|
|
561
|
+
<div class="list-item-prop type-subtitle">Subtítulo do Item</div>
|
|
562
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
563
|
+
type: "subtitle"
|
|
564
|
+
property: "email"</pre
|
|
565
|
+
>
|
|
566
|
+
</div>
|
|
567
|
+
<div class="element-card">
|
|
568
|
+
<h4>Propriedade: Descrição</h4>
|
|
569
|
+
<div class="list-item-prop type-description">
|
|
570
|
+
Este é um texto de descrição...
|
|
571
|
+
</div>
|
|
572
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
573
|
+
type: "description"
|
|
574
|
+
property: "detalhes"</pre
|
|
575
|
+
>
|
|
576
|
+
</div>
|
|
577
|
+
<div class="element-card">
|
|
578
|
+
<h4>Ação: Menu (callsToActionMenu)</h4>
|
|
579
|
+
<div class="list-item-menu">[ ⋮ ]</div>
|
|
580
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
581
|
+
label: "Editar"
|
|
582
|
+
icon: "pencil"
|
|
583
|
+
action: { ... }
|
|
584
|
+
|
|
585
|
+
label: "Excluir"
|
|
586
|
+
icon: "delete"
|
|
587
|
+
action: { ... }</pre
|
|
588
|
+
>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
|
|
592
|
+
<h2 style="margin-top: 60px; border-color: #d9534f; color: #d9534f">
|
|
593
|
+
Exemplo de Documentação: Formulário (IForm)
|
|
594
|
+
</h2>
|
|
595
|
+
|
|
596
|
+
<div class="documentation-example">
|
|
597
|
+
<div class="note">
|
|
598
|
+
<strong>Instrução:</strong> Monte seu formulário assim. A ordem "de cima
|
|
599
|
+
para baixo" e o recuo (aninhamento) deixam a hierarquia dos elementos
|
|
600
|
+
perfeitamente clara.
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
<div class="box-meta box-form-wrapper">
|
|
604
|
+
<pre>
|
|
605
|
+
componentType: form
|
|
606
|
+
title: Formulário de Personagem</pre
|
|
607
|
+
>
|
|
608
|
+
</div>
|
|
609
|
+
|
|
610
|
+
<div class="box-meta box-business-rules">
|
|
611
|
+
<pre>
|
|
612
|
+
rule: O nome do personagem é obrigatório.
|
|
613
|
+
rule: O personagem deve pertencer a um gênero.</pre
|
|
614
|
+
>
|
|
615
|
+
</div>
|
|
616
|
+
|
|
617
|
+
<div class="box box-container box-tab">[ ✦ TAB BEGIN ]</div>
|
|
618
|
+
|
|
619
|
+
<div class="example-container-content container-tab">
|
|
620
|
+
<div class="box box-tab-title">
|
|
621
|
+
<span class="icon-symbol icon-tab-star">★</span>
|
|
622
|
+
<span>Dados Principais</span>
|
|
623
|
+
<span class="icon-symbol icon-tab-star"></span>
|
|
624
|
+
</div>
|
|
625
|
+
|
|
626
|
+
<div class="example-container-content">
|
|
627
|
+
<div class="example-item">
|
|
628
|
+
<label class="label label-input">Nome do Personagem*</label>
|
|
629
|
+
<div class="box">
|
|
630
|
+
<span class="placeholder">Ex: Aragorn</span>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
|
|
634
|
+
<div class="example-item">
|
|
635
|
+
<label class="label label-autocomplete">Gênero*</label>
|
|
636
|
+
<div class="box">
|
|
637
|
+
<span class="placeholder">Buscar gênero...</span>
|
|
638
|
+
<span class="icon-symbol icon-autocomplete">⌕</span>
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
|
|
642
|
+
<div class="example-item container-fieldset">
|
|
643
|
+
<label class="label">Atributos</label>
|
|
644
|
+
<div class="box box-container box-fieldset">
|
|
645
|
+
[ → FIELDSET BEGIN ]
|
|
646
|
+
</div>
|
|
647
|
+
|
|
648
|
+
<div class="example-container-content">
|
|
649
|
+
<div class="example-item">
|
|
650
|
+
<label class="label">Força</label>
|
|
651
|
+
<div class="box">
|
|
652
|
+
<span class="placeholder"></span>
|
|
653
|
+
<span class="icon-symbol icon-numero">[123]</span>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
<div class="example-item">
|
|
657
|
+
<label class="label">Destreza</label>
|
|
658
|
+
<div class="box">
|
|
659
|
+
<span class="placeholder"></span>
|
|
660
|
+
<span class="icon-symbol icon-numero">[123]</span>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
|
|
665
|
+
<div class="box box-container box-fieldset">[ ← FIELDSET END ]</div>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
|
|
669
|
+
<div class="box box-tab-title">
|
|
670
|
+
<span class="icon-symbol icon-tab-star">★</span>
|
|
671
|
+
<span>Inventário</span>
|
|
672
|
+
<span class="icon-symbol icon-tab-star"></span>
|
|
673
|
+
</div>
|
|
674
|
+
|
|
675
|
+
<div class="example-container-content">
|
|
676
|
+
<div class="example-item container-array">
|
|
677
|
+
<label class="label label-array">Adicionar Item</label>
|
|
678
|
+
<div class="box box-container box-array">[ ↓ ARRAY BEGIN ]</div>
|
|
679
|
+
|
|
680
|
+
<div class="example-container-content">
|
|
681
|
+
<div class="example-item">
|
|
682
|
+
<label class="label label-input">Nome do Item</label>
|
|
683
|
+
<div class="box">
|
|
684
|
+
<span class="placeholder">Ex: Espada</span>
|
|
685
|
+
</div>
|
|
686
|
+
</div>
|
|
687
|
+
<div class="example-item">
|
|
688
|
+
<label class="label label-input-arquivo">Ícone do Item</label>
|
|
689
|
+
<div class="box">
|
|
690
|
+
<span class="placeholder"></span>
|
|
691
|
+
<span class="icon-symbol icon-arquivo">[ ⇪ ]</span>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
</div>
|
|
695
|
+
|
|
696
|
+
<div class="box box-container box-array">[ ↑ ARRAY END ]</div>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
|
|
701
|
+
<div class="box box-container box-tab">[ TAB END ✦ ]</div>
|
|
702
|
+
</div>
|
|
703
|
+
|
|
704
|
+
<h2 style="margin-top: 60px; border-color: #198754; color: #198754">
|
|
705
|
+
Exemplo de Documentação: Lista (IList)
|
|
706
|
+
</h2>
|
|
707
|
+
|
|
708
|
+
<div class="documentation-example">
|
|
709
|
+
<div class="note">
|
|
710
|
+
<strong>Instrução:</strong> Monte sua lista assim. Comece com os
|
|
711
|
+
metadados (wrapper, datasource, etc.) e depois defina o "Template do
|
|
712
|
+
Item" empilhando as propriedades na ordem em que devem aparecer.
|
|
713
|
+
</div>
|
|
714
|
+
|
|
715
|
+
<div class="box-meta box-list-wrapper">
|
|
716
|
+
<pre>
|
|
717
|
+
componentType: list
|
|
718
|
+
title: Lista de Personagens</pre
|
|
719
|
+
>
|
|
720
|
+
</div>
|
|
721
|
+
|
|
722
|
+
<div class="box-meta box-datasource">
|
|
723
|
+
<pre>
|
|
724
|
+
dataSource: {
|
|
725
|
+
endpoint: "/api/characters",
|
|
726
|
+
paramType: "query"
|
|
727
|
+
}</pre
|
|
728
|
+
>
|
|
729
|
+
</div>
|
|
730
|
+
|
|
731
|
+
<div class="box-meta box-list-action">
|
|
732
|
+
<pre>
|
|
733
|
+
cardAsALink: {
|
|
734
|
+
link: "/personagem-detalhe",
|
|
735
|
+
propertiesAsPathParam: ["_id"]
|
|
736
|
+
}</pre
|
|
737
|
+
>
|
|
738
|
+
</div>
|
|
739
|
+
|
|
740
|
+
<div class_="example-item">
|
|
741
|
+
<h3>Template do Item (properties)</h3>
|
|
742
|
+
<div class="example-list-item-card">
|
|
743
|
+
<div class="element-card" style="padding: 10px">
|
|
744
|
+
<h4 style="margin: 0 0 10px 0; font-size: 1em; text-align: left">
|
|
745
|
+
Propriedade: Imagem
|
|
746
|
+
</h4>
|
|
747
|
+
<div class="list-item-image">[IMG]</div>
|
|
748
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
749
|
+
type: "image"
|
|
750
|
+
property: "avatarUrl"</pre
|
|
751
|
+
>
|
|
752
|
+
</div>
|
|
753
|
+
|
|
754
|
+
<div class="element-card" style="padding: 10px">
|
|
755
|
+
<h4 style="margin: 0 0 10px 0; font-size: 1em; text-align: left">
|
|
756
|
+
Propriedade: Título
|
|
757
|
+
</h4>
|
|
758
|
+
<div class="list-item-prop type-title">Nome do Personagem</div>
|
|
759
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
760
|
+
type: "title"
|
|
761
|
+
property: "name"</pre
|
|
762
|
+
>
|
|
763
|
+
</div>
|
|
764
|
+
|
|
765
|
+
<div class="element-card" style="padding: 10px">
|
|
766
|
+
<h4 style="margin: 0 0 10px 0; font-size: 1em; text-align: left">
|
|
767
|
+
Propriedade: Subtítulo
|
|
768
|
+
</h4>
|
|
769
|
+
<div class="list-item-prop type-subtitle">Classe do Personagem</div>
|
|
770
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
771
|
+
type: "subtitle"
|
|
772
|
+
property: "class"</pre
|
|
773
|
+
>
|
|
774
|
+
</div>
|
|
775
|
+
|
|
776
|
+
<div class="element-card" style="padding: 10px">
|
|
777
|
+
<h4 style="margin: 0 0 10px 0; font-size: 1em; text-align: left">
|
|
778
|
+
Ação: Menu (callsToActionMenu)
|
|
779
|
+
</h4>
|
|
780
|
+
<div class="list-item-menu">[ ⋮ ]</div>
|
|
781
|
+
<pre style="font-size: 0.8em; margin-top: 10px">
|
|
782
|
+
label: "Editar"
|
|
783
|
+
icon: "pencil"
|
|
784
|
+
action: { ... }
|
|
785
|
+
|
|
786
|
+
label: "Excluir"
|
|
787
|
+
icon: "delete"
|
|
788
|
+
action: { ... }</pre
|
|
789
|
+
>
|
|
790
|
+
</div>
|
|
791
|
+
</div>
|
|
792
|
+
</div>
|
|
793
|
+
</div>
|
|
794
|
+
</body>
|
|
795
|
+
</html>
|