@andersonalmeidax0/webcomponents 0.1.51 → 0.2.0
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/XInput.jsx +5 -7
- package/XSelect.jsx +4 -5
- package/form2tail.html +333 -0
- package/jzcomponents/JZEditComponent.jsx +5 -6
- package/jzcomponents/JZInPlaceListComponent.jsx +1 -1
- package/jzcomponents/XFormEdit.jsx +135 -56
- package/jzcomponents/XTableRead.jsx +2 -2
- package/package.json +1 -1
- package/releasenotes.txt +13 -0
package/XInput.jsx
CHANGED
|
@@ -72,8 +72,8 @@ class XInputExternal extends React.Component {
|
|
|
72
72
|
//return {all: 'unset', border: '2px solid red;', padding:'2px 2px', margin: '2px 0;', xboxSizing: 'border-box', width:'100px',borderBottom:'1px red',borderStyle:'1px red',backgroundSize:'100px',background:'rgb(202,202,255)'};
|
|
73
73
|
//return {all: 'unset', width:(this.props.width?this.props.width:100)+'px', boxSizing: 'border-box', border: '1px solid #a0a0a0', padding:'4px 2px', margin: '4px 2px',background:'rgb(255,255,255)'};
|
|
74
74
|
//return {all: 'unset', padding:'2px 2px',margin: '2px 0', borderWidth: '1px', borderStyle: 'solid', borderColor: valid?'#aaa':'#f00', /*borderBottom: '2px solid red',*/height:'25px', width:(this.props.width?this.props.width:100)+'px',background:'rgb(242,242,242)',margin: '1px 1px'}//, boxSizing: 'border-box', border: '1px solid #a0a0a0', padding:'4px 2px', margin: '4px 2px',background:'rgb(255,255,255)'};
|
|
75
|
-
return { width:(this.props.width?this.props.width:150)+'px'}
|
|
76
|
-
|
|
75
|
+
//return { width:(this.props.width?this.props.width:150)+'px'}
|
|
76
|
+
return {};
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
onChangeCheckInterceptor = (event) => {
|
|
@@ -129,13 +129,11 @@ class XInputExternal extends React.Component {
|
|
|
129
129
|
); else
|
|
130
130
|
return (
|
|
131
131
|
<React.Fragment>
|
|
132
|
-
<label> {this.props.label} </label>
|
|
133
132
|
<input id={this.props.id} readOnly={this.props.readOnly}
|
|
134
|
-
|
|
135
|
-
|
|
133
|
+
xstyle={this.style1(this.state.valid)}
|
|
134
|
+
xclassName="card"
|
|
136
135
|
defaultValue={this.state.localValue} onChange={this.onChangeCheckInterceptor} />
|
|
137
|
-
|
|
138
|
-
{(this.state.valid)?'':'(invalid)'}<br/>
|
|
136
|
+
{(this.state.valid)?'':' (invalid)'}
|
|
139
137
|
</React.Fragment>
|
|
140
138
|
|
|
141
139
|
);
|
package/XSelect.jsx
CHANGED
|
@@ -30,7 +30,7 @@ class XSelect3 extends React.Component {
|
|
|
30
30
|
if(this.props.isFilter)
|
|
31
31
|
return (
|
|
32
32
|
<React.Fragment>
|
|
33
|
-
<select id={this.props.id}
|
|
33
|
+
<select id={this.props.id} xstyle={{width:(this.props.width?this.props.width:300)+'px'}} disabled={this.props.disabled} onChange={this.evt} value={this.state.value} >
|
|
34
34
|
{this.props.list.map(function(v){
|
|
35
35
|
return <option key={v.id} value={v.id}>{v.descr}</option>;
|
|
36
36
|
})}
|
|
@@ -39,15 +39,14 @@ class XSelect3 extends React.Component {
|
|
|
39
39
|
)
|
|
40
40
|
else
|
|
41
41
|
return (
|
|
42
|
-
<
|
|
43
|
-
<select id={this.props.id}
|
|
44
|
-
|
|
42
|
+
<React.Fragment>
|
|
43
|
+
<select id={this.props.id} xstyle={{width:(this.props.width?this.props.width:300)+'px'}} disabled={this.props.disabled} onChange={this.evt} value={this.state.value} >
|
|
45
44
|
{this.props.list.map(function(v){
|
|
46
45
|
return <option key={v.id} value={v.id}>{v.descr}</option>;
|
|
47
46
|
})}
|
|
48
47
|
</select>
|
|
49
48
|
<span id={'Last_'+this.props.id} style={{display:'none',visibility: 'hidden'}} >{TEST_UI_AUX&&this.props.list[this.props.list.length-1].id}</span>
|
|
50
|
-
|
|
49
|
+
</React.Fragment>
|
|
51
50
|
)
|
|
52
51
|
else
|
|
53
52
|
return (
|
package/form2tail.html
ADDED
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
<html lang="en"><head>
|
|
2
|
+
<head>
|
|
3
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
4
|
+
|
|
5
|
+
<title></title>
|
|
6
|
+
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
|
8
|
+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
9
|
+
<style type="text/tailwindcss">
|
|
10
|
+
@layer base {
|
|
11
|
+
:root {
|
|
12
|
+
--deep-blue: #1e3a8a;
|
|
13
|
+
--navy-blue: #0f172a;
|
|
14
|
+
--forest-green: #228b22;
|
|
15
|
+
--medium-gray: #6b7280;
|
|
16
|
+
--light-gray-bg: #f3f4f6;
|
|
17
|
+
--border-gray: #d1d5db;
|
|
18
|
+
--text-main: #1f2937;
|
|
19
|
+
}
|
|
20
|
+
body {
|
|
21
|
+
@apply font-['Inter'] bg-[var(--light-gray-bg)] text-[var(--text-main)] m-0 min-h-screen flex flex-col;
|
|
22
|
+
}body > header {
|
|
23
|
+
@apply bg-[var(--deep-blue)] text-white p-4 flex justify-between items-center shadow-md;
|
|
24
|
+
}
|
|
25
|
+
body > header h1 {
|
|
26
|
+
@apply text-xl font-bold m-0;
|
|
27
|
+
}
|
|
28
|
+
body > header nav {
|
|
29
|
+
@apply flex items-center gap-6;
|
|
30
|
+
}
|
|
31
|
+
body > header nav span {
|
|
32
|
+
@apply text-sm font-medium;
|
|
33
|
+
}body > main {
|
|
34
|
+
@apply flex flex-1 overflow-hidden;
|
|
35
|
+
}body > main > nav {
|
|
36
|
+
@apply w-64 bg-[var(--medium-gray)] text-white p-6 flex flex-col gap-2;
|
|
37
|
+
}
|
|
38
|
+
body > main > nav a {
|
|
39
|
+
@apply text-gray-100 no-underline py-2 px-3 rounded hover:bg-white/10 transition-colors flex items-center gap-2;
|
|
40
|
+
}
|
|
41
|
+
body > main > nav a[aria-current="page"] {
|
|
42
|
+
@apply bg-white/20 font-bold;
|
|
43
|
+
}article {
|
|
44
|
+
@apply flex-1 p-8 overflow-y-auto max-w-5xl;
|
|
45
|
+
}
|
|
46
|
+
article > header {
|
|
47
|
+
@apply mb-8;
|
|
48
|
+
}
|
|
49
|
+
article > header h2 {
|
|
50
|
+
@apply text-2xl font-bold mb-2;
|
|
51
|
+
}
|
|
52
|
+
article > header p {
|
|
53
|
+
@apply text-gray-600;
|
|
54
|
+
}form {
|
|
55
|
+
@apply flex flex-col gap-6;
|
|
56
|
+
}
|
|
57
|
+
fieldset {
|
|
58
|
+
@apply border border-[var(--border-gray)] bg-white p-6 rounded flex flex-col gap-4;
|
|
59
|
+
}
|
|
60
|
+
legend {
|
|
61
|
+
@apply px-2 font-bold text-[var(--deep-blue)] uppercase tracking-wide text-xs;
|
|
62
|
+
}
|
|
63
|
+
section {
|
|
64
|
+
@apply grid grid-cols-1 md:grid-cols-2 gap-4;
|
|
65
|
+
section:not(:last-child) { @apply mb-2; }
|
|
66
|
+
}
|
|
67
|
+
label {
|
|
68
|
+
@apply flex flex-col gap-1 text-sm font-bold text-gray-700;
|
|
69
|
+
}
|
|
70
|
+
input[type="text"],
|
|
71
|
+
input[type="number"],
|
|
72
|
+
select,
|
|
73
|
+
textarea {
|
|
74
|
+
@apply mt-1 p-2 border border-[var(--border-gray)] rounded bg-white text-sm focus:ring-2 focus:ring-[var(--deep-blue)] outline-none;
|
|
75
|
+
}
|
|
76
|
+
textarea {
|
|
77
|
+
@apply min-h-[100px];
|
|
78
|
+
}
|
|
79
|
+
label:has(input[type="checkbox"]) {
|
|
80
|
+
@apply flex-row items-center gap-2 font-normal cursor-pointer;
|
|
81
|
+
}table {
|
|
82
|
+
@apply w-full border-collapse mb-8 bg-white;
|
|
83
|
+
}
|
|
84
|
+
thead {
|
|
85
|
+
@apply bg-[var(--navy-blue)] text-white;
|
|
86
|
+
}
|
|
87
|
+
th {
|
|
88
|
+
@apply p-3 text-left font-semibold;
|
|
89
|
+
}
|
|
90
|
+
td {
|
|
91
|
+
@apply p-3 border-b border-[var(--border-gray)];
|
|
92
|
+
}button {
|
|
93
|
+
@apply bg-[var(--forest-green)] inline-block text-white m-1 px-2 py-1.5 rounded font-bold cursor-pointer border-none hover:brightness-110 transition-all items-center justify-center gap-5;
|
|
94
|
+
}
|
|
95
|
+
button[type="reset"] {
|
|
96
|
+
@apply bg-gray-400;
|
|
97
|
+
}
|
|
98
|
+
footer {
|
|
99
|
+
@apply flex justify-end gap-4 pt-4;
|
|
100
|
+
}
|
|
101
|
+
.material-symbols-outlined {
|
|
102
|
+
@apply text-[20px] align-middle;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
</style>
|
|
106
|
+
</head>
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
<body>
|
|
110
|
+
<!-- header header.nav -->
|
|
111
|
+
<!-- main main.nav article article.header -->
|
|
112
|
+
|
|
113
|
+
<header>
|
|
114
|
+
|
|
115
|
+
<h1>MobileCRM</h1>
|
|
116
|
+
|
|
117
|
+
<nav>
|
|
118
|
+
|
|
119
|
+
<h2> rafael.barros@gmail.com <i class="fa fa-user"></i> | <button>Logout</button></h2>
|
|
120
|
+
</nav>
|
|
121
|
+
|
|
122
|
+
</header>
|
|
123
|
+
<main>
|
|
124
|
+
<nav>
|
|
125
|
+
<aside>
|
|
126
|
+
<ul>Menu: <li><a href="/index.html" class="active"><span class="item">Home</span></a></li>
|
|
127
|
+
<li><a href="/index.html#pageCliente" class="active"><span class="item">Meus Dados</span></a></li>
|
|
128
|
+
<li><a href="/index.html#pagePedidos" class="active"><span class="item">Meus Pedidos</span></a></li>
|
|
129
|
+
<li><a href="/index.html#pageChat" class="active"><span class="item">ChatBot</span></a></li>
|
|
130
|
+
</ul>
|
|
131
|
+
<details>
|
|
132
|
+
<summary></summary>
|
|
133
|
+
<p>cid:wcrm-client</p>
|
|
134
|
+
<p>role:</p>
|
|
135
|
+
<p>tenantid2:</p>
|
|
136
|
+
</details>
|
|
137
|
+
</aside>
|
|
138
|
+
</nav>
|
|
139
|
+
<article>
|
|
140
|
+
<section>
|
|
141
|
+
<h1>Meus dados</h1>
|
|
142
|
+
<h3></h3>
|
|
143
|
+
<fieldset class="vertical">
|
|
144
|
+
<h6></h6>
|
|
145
|
+
<h3>Cliente</h3><label style="float: left;width: 10%;"> _id </label><input id="FORM_undefined_F0" class="card"
|
|
146
|
+
value="68b7571d8f53c879e171b6f4" style="width: 150px;"> <br><label> cpf </label><input
|
|
147
|
+
id="FORM_undefined_F1" class="card" value="123123123" style="width: 150px;"> <br><label> nome
|
|
148
|
+
</label><input id="FORM_undefined_F2" class="card" value="Rafael Barros" style="width: 150px;"> <br><label>
|
|
149
|
+
email </label><input id="FORM_undefined_F3" class="card" value="rafael.barros@gmail.com"
|
|
150
|
+
style="width: 150px;"> <br><label> sub </label><input id="FORM_undefined_F4" class="card"
|
|
151
|
+
value=":83de60e5-ba03-4628-aa70-e904fc8d9b57" style="width: 150px;"> <br><label> ativo
|
|
152
|
+
</label><input id="FORM_undefined_F5" class="card" value="true" style="width: 150px;"> <br><label>
|
|
153
|
+
contatoPrincipal </label><input id="FORM_undefined_F6" class="card" value="5511972188783"
|
|
154
|
+
style="width: 150px;"> <br><label> pwd </label><input id="FORM_undefined_F7" class="card"
|
|
155
|
+
value="1234" style="width: 150px;"> <br>
|
|
156
|
+
<div xclassname="card">
|
|
157
|
+
<div>Enderecos</div><button id="Novo_FORM_undefined_F8" type="button" class="btn--raised tooltip"
|
|
158
|
+
data-text="Novo_FORM_undefined_F8">New </button><span> </span>
|
|
159
|
+
<h6></h6>
|
|
160
|
+
<div xstyle="[object Object]">
|
|
161
|
+
<table class="hoverable" xwidth="99%" xstyle="[object Object]">
|
|
162
|
+
<thead>
|
|
163
|
+
<tr class="table-header">
|
|
164
|
+
<th></th>
|
|
165
|
+
<th x="center" align="left"> <b>tipo</b></th>
|
|
166
|
+
<th x="center" align="left"> <b>logradouro</b></th>
|
|
167
|
+
<th x="center" align="left"> <b>numero</b></th>
|
|
168
|
+
<th x="center" align="left"> <b>complemento</b></th>
|
|
169
|
+
<th x="center" align="left"> <b>bairro</b></th>
|
|
170
|
+
<th x="center" align="left"> <b>cidade</b></th>
|
|
171
|
+
<th x="center" align="left"> <b>uf</b></th>
|
|
172
|
+
<th x="center" align="left"> <b>cep</b></th>
|
|
173
|
+
<th x="center" align="left"> <b>pais</b></th>
|
|
174
|
+
<th align="center"><b></b></th>
|
|
175
|
+
</tr>
|
|
176
|
+
</thead>
|
|
177
|
+
<tbody>
|
|
178
|
+
<tr>
|
|
179
|
+
<td align="center" class="nudge--left "> 1. </td>
|
|
180
|
+
<td align="left">
|
|
181
|
+
<div><select
|
|
182
|
+
id="FORM_undefined_F8_R0_C0" style="width: 300px;">
|
|
183
|
+
<option value="Comercial">Comercial</option>
|
|
184
|
+
<option value="Residencial">Residencial</option>
|
|
185
|
+
</select><span id="Last_FORM_undefined_F8_R0_C0" style="display:none;visibility:hidden;">Residencial</span></div>
|
|
186
|
+
</td>
|
|
187
|
+
<td align="left"><input id="FORM_undefined_F8_R0_C1" value="Avenida Paulista" style="width: 150px;">
|
|
188
|
+
</td>
|
|
189
|
+
<td align="left"><input id="FORM_undefined_F8_R0_C2" value="1578" style="width: 150px;"></td>
|
|
190
|
+
<td align="left"><input id="FORM_undefined_F8_R0_C3" value="Sala 99" style="width: 150px;"></td>
|
|
191
|
+
<td align="left"><input id="FORM_undefined_F8_R0_C4" value="Bela Vista" style="width: 150px;"></td>
|
|
192
|
+
<td align="left"><input id="FORM_undefined_F8_R0_C5" value="São Paulo" style="width: 150px;"></td>
|
|
193
|
+
<td align="left">
|
|
194
|
+
<div><span id="Last_FORM_undefined_F8_R0_C6" style="visibility: hidden;">TO</span><select
|
|
195
|
+
id="FORM_undefined_F8_R0_C6" style="width: 300px;">
|
|
196
|
+
<option value="AC">Acre</option>
|
|
197
|
+
<option value="AL">Alagoas</option>
|
|
198
|
+
<option value="AP">Amapá</option>
|
|
199
|
+
<option value="AM">Amazonas</option>
|
|
200
|
+
<option value="BA">Bahia</option>
|
|
201
|
+
<option value="CE">Ceará</option>
|
|
202
|
+
<option value="DF">Distrito Federal</option>
|
|
203
|
+
<option value="ES">Espírito Santo</option>
|
|
204
|
+
<option value="GO">Goías</option>
|
|
205
|
+
<option value="MA">Maranhão</option>
|
|
206
|
+
<option value="MT">Mato Grosso</option>
|
|
207
|
+
<option value="MS">Mato Grosso do Sul</option>
|
|
208
|
+
<option value="MG">Minas Gerais</option>
|
|
209
|
+
<option value="PA">Pará</option>
|
|
210
|
+
<option value="PB">Paraíba</option>
|
|
211
|
+
<option value="PR">Paraná</option>
|
|
212
|
+
<option value="PE">Pernambuco</option>
|
|
213
|
+
<option value="PI">Piauí</option>
|
|
214
|
+
<option value="RJ">Rio de Janeiro</option>
|
|
215
|
+
<option value="RN">Rio Grande do Norte</option>
|
|
216
|
+
<option value="RS">Rio Grande do Sul</option>
|
|
217
|
+
<option value="RO">Rondônia</option>
|
|
218
|
+
<option value="RR">Roraima</option>
|
|
219
|
+
<option value="SC">Santa Catarina</option>
|
|
220
|
+
<option value="SP">São Paulo</option>
|
|
221
|
+
<option value="SE">Sergipe</option>
|
|
222
|
+
<option value="TO">Tocantins</option>
|
|
223
|
+
</select></div>
|
|
224
|
+
</td>
|
|
225
|
+
<td align="left"><input id="FORM_undefined_F8_R0_C7" value="01310-200" style="width: 150px;"></td>
|
|
226
|
+
<td align="left">
|
|
227
|
+
<div><span id="Last_FORM_undefined_F8_R0_C8" style="visibility: hidden;">Outros</span><select
|
|
228
|
+
id="FORM_undefined_F8_R0_C8" style="width: 300px;">
|
|
229
|
+
<option value="Brasil">Brasil</option>
|
|
230
|
+
<option value="Outros">Outros</option>
|
|
231
|
+
</select></div>
|
|
232
|
+
</td>
|
|
233
|
+
<td align="left"><button id="Del_0_FORM_undefined_F8" class="btn--flat nudge--right"><i
|
|
234
|
+
class="fa fa-trash"></i>Delete</button></td>
|
|
235
|
+
</tr>
|
|
236
|
+
</tbody>
|
|
237
|
+
</table>
|
|
238
|
+
</div>
|
|
239
|
+
<p></p>
|
|
240
|
+
<p id="Total_FORM_undefined_F8" style="visibility: hidden;">1</p>
|
|
241
|
+
</div>
|
|
242
|
+
<div xclassname="card">
|
|
243
|
+
<div>Solicitacoes</div><button id="Novo_FORM_undefined_F9" type="button" class="btn--raised tooltip"
|
|
244
|
+
data-text="Novo_FORM_undefined_F9">New </button><span> </span>
|
|
245
|
+
<h6></h6>
|
|
246
|
+
<div xstyle="[object Object]">
|
|
247
|
+
<table class="hoverable" xwidth="99%" xstyle="[object Object]">
|
|
248
|
+
<thead>
|
|
249
|
+
<tr class="table-header">
|
|
250
|
+
<th></th>
|
|
251
|
+
<th x="center" align="left"> <b>seq</b></th>
|
|
252
|
+
<th x="center" align="left"> <b>data</b></th>
|
|
253
|
+
<th x="center" align="left"> <b>codtiposolic</b></th>
|
|
254
|
+
<th x="center" align="left"> <b>tiposolicitacao</b></th>
|
|
255
|
+
<th x="center" align="left"> <b>extra1</b></th>
|
|
256
|
+
<th x="center" align="left"> <b>extra2</b></th>
|
|
257
|
+
<th align="center"><b></b></th>
|
|
258
|
+
</tr>
|
|
259
|
+
</thead>
|
|
260
|
+
<tbody>
|
|
261
|
+
<tr>
|
|
262
|
+
<td align="center" class="nudge--left "> 1. </td>
|
|
263
|
+
<td align="left">NAtr:seq</td>
|
|
264
|
+
<td align="left"><input type="date" value="2025-11-08"></td>
|
|
265
|
+
<td align="left">NAtr:codtiposolic</td>
|
|
266
|
+
<td align="left">NAtr:tiposolicitacao</td>
|
|
267
|
+
<td align="left"><input id="FORM_undefined_F9_R0_C4" value="visita" style="width: 150px;"></td>
|
|
268
|
+
<td align="left"><input id="FORM_undefined_F9_R0_C5" value="2023-12-10"
|
|
269
|
+
style="width: 150px;"></td>
|
|
270
|
+
<td align="left"><button id="Del_0_FORM_undefined_F9" class="btn--flat nudge--right"><i
|
|
271
|
+
class="fa fa-trash"></i>Delete</button></td>
|
|
272
|
+
</tr>
|
|
273
|
+
<tr>
|
|
274
|
+
<td align="center" class="nudge--left "> 2. </td>
|
|
275
|
+
<td align="left" id="FORM_undefined_F9_R1_C0">0 </td>
|
|
276
|
+
<td align="left"><input type="date" value="2025-11-08T21:33:31.479Z"></td>
|
|
277
|
+
<td align="left">
|
|
278
|
+
<div><span id="Last_FORM_undefined_F9_R1_C2" style="visibility: hidden;">4</span><select
|
|
279
|
+
id="FORM_undefined_F9_R1_C2" style="width: 300px;">
|
|
280
|
+
<option value="0">Reemissão de Boleto</option>
|
|
281
|
+
<option value="1">Mudança Endereço de Correspondência</option>
|
|
282
|
+
<option value="2">Histórico de Pagamento</option>
|
|
283
|
+
<option value="3">Ata de Reunião</option>
|
|
284
|
+
<option value="4">Outras Solicitacoes</option>
|
|
285
|
+
</select></div>
|
|
286
|
+
</td>
|
|
287
|
+
<td align="left">0</td>
|
|
288
|
+
<td align="left"><input id="FORM_undefined_F9_R1_C4" value="visita" style="width: 150px;"></td>
|
|
289
|
+
<td align="left"><input id="FORM_undefined_F9_R1_C5" value="2023-12-10T00:00:00"
|
|
290
|
+
style="width: 150px;"></td>
|
|
291
|
+
<td align="left"><button id="Del_1_FORM_undefined_F9" class="btn--flat nudge--right"><i
|
|
292
|
+
class="fa fa-trash"></i>Delete</button></td>
|
|
293
|
+
</tr>
|
|
294
|
+
</tbody>
|
|
295
|
+
</table>
|
|
296
|
+
</div>
|
|
297
|
+
<p></p>
|
|
298
|
+
<p id="Total_FORM_undefined_F9" style="visibility: hidden;">2</p>
|
|
299
|
+
</div>
|
|
300
|
+
<div xclassname="card">
|
|
301
|
+
<div>Carrinho</div><button id="Novo_FORM_undefined_F10" type="button" class="btn--raised tooltip"
|
|
302
|
+
data-text="Novo_FORM_undefined_F10">New </button><span> </span>
|
|
303
|
+
<h6></h6>
|
|
304
|
+
<div xstyle="[object Object]">
|
|
305
|
+
<table class="hoverable" xwidth="99%" xstyle="[object Object]">
|
|
306
|
+
<thead>
|
|
307
|
+
<tr class="table-header">
|
|
308
|
+
<th></th>
|
|
309
|
+
<th x="center" align="left"> <b>codpprod</b></th>
|
|
310
|
+
<th x="center" align="left"> <b>Produto</b></th>
|
|
311
|
+
<th x="center" align="left"> <b>Codigo</b></th>
|
|
312
|
+
<th x="center" align="left"> <b>Preço</b></th>
|
|
313
|
+
<th x="center" align="left"> <b>Qtd</b></th>
|
|
314
|
+
<th x="center" align="left"> <b>Preço Total</b></th>
|
|
315
|
+
<th align="center"><b></b></th>
|
|
316
|
+
</tr>
|
|
317
|
+
</thead>
|
|
318
|
+
<tbody></tbody>
|
|
319
|
+
</table>
|
|
320
|
+
</div>
|
|
321
|
+
<p></p>
|
|
322
|
+
<p id="Total_FORM_undefined_F10" style="visibility: hidden;">0</p>
|
|
323
|
+
</div>
|
|
324
|
+
</fieldset>
|
|
325
|
+
<div> </div>
|
|
326
|
+
<fieldset class="actions"><button id="Save_FORM_undefined" class="primary shadowed small"> Salvar </button><span>
|
|
327
|
+
</span><span> </span></fieldset>
|
|
328
|
+
<h5 style="color: red;"></h5>
|
|
329
|
+
</article>
|
|
330
|
+
</main>
|
|
331
|
+
</body>
|
|
332
|
+
|
|
333
|
+
</html>
|
|
@@ -147,16 +147,15 @@ class JZEditComponent extends React.Component {
|
|
|
147
147
|
if(this.state.currObj)
|
|
148
148
|
return (
|
|
149
149
|
<React.Fragment>
|
|
150
|
-
|
|
150
|
+
|
|
151
151
|
<XFormEdit id={this.props._id} metadata={this.props.editConfig} textlabels={true} formData={this.state.currObj} />
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<
|
|
155
|
-
<fieldset class="actions">
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
<nav class="actions">
|
|
156
155
|
{this.props.editConfig.hasSaveFn&&this.props.editConfig.hasSaveFn(this.state.currObj)&&<React.Fragment>{DEBUG_ID&&'Save_'+this.props._id}<XButton label='Salvar' id={'Save_'+this.props._id} onClick={this.evtSubmit}/></React.Fragment>}<span> </span>
|
|
157
156
|
{this.props.editConfig.hasBackFn&&this.props.editConfig.hasBackFn(this.state.currObj)&&<XButton label='Voltar' onClick={this.evtCancel}/>}<span> </span>
|
|
158
157
|
{this.props.editConfig.extraButtons&&this.props.editConfig.extraButtons.map((v,i)=> {return <React.Fragment key={i} >{DEBUG_ID&&v.btnLabel+'_'+this.props._id}<XButton id={v.btnLabel+'_'+this.props._id} label={v.btnLabel} onClick={()=>v.evtBtn(this.state.currObj)}/><span> </span></React.Fragment> } )}
|
|
159
|
-
</
|
|
158
|
+
</nav>
|
|
160
159
|
<h5 style={{color:'red'}} >{this.state.message}</h5>
|
|
161
160
|
|
|
162
161
|
</React.Fragment>
|
|
@@ -64,7 +64,7 @@ class JZInPlaceListComponent extends React.Component {
|
|
|
64
64
|
return (
|
|
65
65
|
<React.Fragment>
|
|
66
66
|
{<React.Fragment>
|
|
67
|
-
{this.props.listConfig.hasInsert&&<XButton label={'Novo_'+this.props._id} id={'Novo_'+this.props._id} textlabel={(this.props.textlabels)?"New":null} icon="fa fa-plus" onClick={this.evtCreate}/>}
|
|
67
|
+
{this.props.listConfig.hasInsert&&<XButton label={'Novo_'+this.props._id} id={'Novo_'+this.props._id} textlabel={(this.props.textlabels)?"New":null} icon="fa fa-plus" onClick={this.evtCreate}/>}
|
|
68
68
|
|
|
69
69
|
{<XTableRead
|
|
70
70
|
id={this.props._id}
|
|
@@ -54,68 +54,147 @@ class XFormEdit extends React.Component {
|
|
|
54
54
|
return (
|
|
55
55
|
<React.Fragment>
|
|
56
56
|
<h6>{DEBUG_ID2 && '[' + this.props.id + ']'}</h6>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
{this.props.metadata.fields.filter((item) => { return (item.show) }).map((v, i) =>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</div>
|
|
67
|
-
</React.Fragment>
|
|
68
|
-
}
|
|
69
|
-
else {
|
|
70
|
-
if (v.type === 'a') /* array */ {
|
|
71
|
-
return (
|
|
72
|
-
<React.Fragment key={i}>
|
|
73
|
-
<div>
|
|
74
|
-
<div>{this.capitalize(v.label)}:</div>
|
|
75
|
-
<JZInPlaceListComponent _id={this.props.id + '_F' + i} textlabels={true} list={this.props.formData[v.attr]} listConfig={v.listConfig} newItemFN={v.newItemFN} />
|
|
76
|
-
</div>
|
|
77
|
-
</React.Fragment>)
|
|
78
|
-
}
|
|
79
|
-
else
|
|
80
|
-
if (v.type === 'd') /* date */ {
|
|
81
|
-
return (
|
|
82
|
-
<React.Fragment key={i}>
|
|
83
|
-
<div className=""><label>{this.capitalize(v.label)}:</label>
|
|
84
|
-
<XDateSelect id={this.props.id + '_F' + i} width={v.width} label={v.label} disabled={v.readOnly} value={this.props.formData[v.attr]} onChange={(v) => this.props.formData[v.attr] = v} />
|
|
85
|
-
</div>
|
|
86
|
-
</React.Fragment>)
|
|
87
|
-
}
|
|
88
|
-
else
|
|
89
|
-
if (v.type === 'c') /* check */ {
|
|
90
|
-
return (
|
|
91
|
-
<React.Fragment key={i}>
|
|
92
|
-
<div className=""><label>{this.capitalize(v.label)}:</label>
|
|
93
|
-
<XCheckbox id={this.props.id + '_F' + i} width={v.width} label={v.label} disabled={v.readOnly} value={this.props.formData[v.attr]} onChange={(v) => this.props.formData[v.attr] = v} />
|
|
94
|
-
</div>
|
|
95
|
-
</React.Fragment>)
|
|
96
|
-
}
|
|
97
|
-
else
|
|
98
|
-
if (v.type === 'file') /* file */ {
|
|
99
|
-
return (
|
|
100
|
-
<React.Fragment key={i}>
|
|
101
|
-
<div className=""><label>{this.capitalize(v.label)}:</label>
|
|
102
|
-
<p>{this.props.formData[v.attr]?this.props.formData[v.attr]:"No file selected"}</p>
|
|
103
|
-
<XButton id={this.props.id + '_F' + i} attachFile={true} disabled={v.readOnly} onClick={(e)=>{this.props.formData[v.attr]=e.target.files[0].name;this.props.formData.filedata=e.target.files[0]}} textlabel='Select File'></XButton>
|
|
104
|
-
</div>
|
|
105
|
-
</React.Fragment>)
|
|
106
|
-
} else
|
|
107
|
-
return (
|
|
108
|
-
<React.Fragment key={i} >{DEBUG_ID2 && '[' + this.props.id + '_F' + i + ']'}
|
|
109
|
-
<XInputExternal type={v.type == 'n' ? 'number' : ''} id={this.props.id + '_F' + i} width={v.width} label={this.capitalize(v.label)+":"} readOnly={v.readOnly} value={this.props.formData[v.attr]} /*onChangeNew={(value)=>this.props.formData[v.attr]=ev.target.value}*/ onChangeNew={this.inputChangeNew} context={{ item: this.props.formData, v: v }} />
|
|
110
|
-
</React.Fragment>)
|
|
111
|
-
}
|
|
112
|
-
})}
|
|
57
|
+
|
|
58
|
+
<ul>
|
|
59
|
+
{this.props.metadata.fields.filter((item) => { return (item.show) }).map((v, i) =>
|
|
60
|
+
{
|
|
61
|
+
return <li>{this.renderFieldL2(v,i)}</li>;
|
|
62
|
+
}
|
|
63
|
+
)}
|
|
64
|
+
</ul>
|
|
113
65
|
{this.props.btn0 && <XButton label={this.props.btn0.label} onClick={this.props.btn0.evt} />}
|
|
114
66
|
</React.Fragment>
|
|
115
67
|
);
|
|
116
68
|
}
|
|
117
69
|
|
|
70
|
+
|
|
71
|
+
renderField(v,i) {
|
|
72
|
+
if (v.type === 'l') /*list*/ {
|
|
73
|
+
return <React.Fragment key={i}>
|
|
74
|
+
<div xclassName="card">
|
|
75
|
+
<label>{this.capitalize(v.label)}:</label>
|
|
76
|
+
<XSelect3 list={v.lov} value={this.props.formData[v.attr]} disabled={v.readOnly} onChange={(ev) => this.props.formData[v.attr] = ev.target.value} />
|
|
77
|
+
</div>
|
|
78
|
+
</React.Fragment>
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
if (v.type === 'a') /* array */ {
|
|
82
|
+
return (
|
|
83
|
+
<React.Fragment key={i}>
|
|
84
|
+
<div>
|
|
85
|
+
<div>{this.capitalize(v.label)}:</div>
|
|
86
|
+
<JZInPlaceListComponent _id={this.props.id + '_F' + i} textlabels={true} list={this.props.formData[v.attr]} listConfig={v.listConfig} newItemFN={v.newItemFN} />
|
|
87
|
+
</div>
|
|
88
|
+
</React.Fragment>)
|
|
89
|
+
}
|
|
90
|
+
else
|
|
91
|
+
if (v.type === 'd') /* date */ {
|
|
92
|
+
return (
|
|
93
|
+
<React.Fragment key={i}>
|
|
94
|
+
<div className=""><label>{this.capitalize(v.label)}:</label>
|
|
95
|
+
<XDateSelect id={this.props.id + '_F' + i} width={v.width} label={v.label} disabled={v.readOnly} value={this.props.formData[v.attr]} onChange={(v) => this.props.formData[v.attr] = v} />
|
|
96
|
+
</div>
|
|
97
|
+
</React.Fragment>)
|
|
98
|
+
}
|
|
99
|
+
else
|
|
100
|
+
if (v.type === 'c') /* check */ {
|
|
101
|
+
return (
|
|
102
|
+
<React.Fragment key={i}>
|
|
103
|
+
<div className=""><label>{this.capitalize(v.label)}:</label>
|
|
104
|
+
<XCheckbox id={this.props.id + '_F' + i} width={v.width} label={v.label} disabled={v.readOnly} value={this.props.formData[v.attr]} onChange={(v) => this.props.formData[v.attr] = v} />
|
|
105
|
+
</div>
|
|
106
|
+
</React.Fragment>)
|
|
107
|
+
}
|
|
108
|
+
else
|
|
109
|
+
if (v.type === 'file') /* file */ {
|
|
110
|
+
return (
|
|
111
|
+
<React.Fragment key={i}>
|
|
112
|
+
<div className=""><label>{this.capitalize(v.label)}:</label>
|
|
113
|
+
<p>{this.props.formData[v.attr]?this.props.formData[v.attr]:"No file selected"}</p>
|
|
114
|
+
<XButton id={this.props.id + '_F' + i} attachFile={true} disabled={v.readOnly} onClick={(e)=>{this.props.formData[v.attr]=e.target.files[0].name;this.props.formData.filedata=e.target.files[0]}} textlabel='Select File'></XButton>
|
|
115
|
+
</div>
|
|
116
|
+
</React.Fragment>)
|
|
117
|
+
} else
|
|
118
|
+
return (
|
|
119
|
+
<React.Fragment key={i} >{DEBUG_ID2 && '[' + this.props.id + '_F' + i + ']'}
|
|
120
|
+
<XInputExternal type={v.type == 'n' ? 'number' : ''} id={this.props.id + '_F' + i} width={v.width} label={this.capitalize(v.label)+":"} readOnly={v.readOnly} value={this.props.formData[v.attr]} /*onChangeNew={(value)=>this.props.formData[v.attr]=ev.target.value}*/ onChangeNew={this.inputChangeNew} context={{ item: this.props.formData, v: v }} />
|
|
121
|
+
</React.Fragment>)
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
renderFieldL2(v,i) {
|
|
127
|
+
|
|
128
|
+
if (v.type === 'fs') /*fieldset*/ {
|
|
129
|
+
return (
|
|
130
|
+
<fieldset>
|
|
131
|
+
{v.label&&<legend>{v.label}</legend>}
|
|
132
|
+
{v.fields.map((v, i) =>
|
|
133
|
+
{
|
|
134
|
+
return <li>{this.renderFieldL2(v,i)}</li>;
|
|
135
|
+
})}
|
|
136
|
+
</fieldset>
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
if (v.type === 'l') /*list*/ {
|
|
142
|
+
return <React.Fragment key={i}>
|
|
143
|
+
<label>{this.capitalize(v.label)}:
|
|
144
|
+
<XSelect3 list={v.lov} value={this.props.formData[v.attr]} disabled={v.readOnly} onChange={(ev) => this.props.formData[v.attr] = ev.target.value} />
|
|
145
|
+
</label>
|
|
146
|
+
</React.Fragment>
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
if (v.type === 'a') /* array */ {
|
|
150
|
+
return (
|
|
151
|
+
<React.Fragment key={i}>
|
|
152
|
+
<label>{this.capitalize(v.label)}:</label><br></br> {/* este precisa de line break */}
|
|
153
|
+
<JZInPlaceListComponent _id={this.props.id + '_F' + i} textlabels={true} list={this.props.formData[v.attr]} listConfig={v.listConfig} newItemFN={v.newItemFN} />
|
|
154
|
+
|
|
155
|
+
</React.Fragment>)
|
|
156
|
+
}
|
|
157
|
+
else
|
|
158
|
+
if (v.type === 'd') /* date */ {
|
|
159
|
+
return (
|
|
160
|
+
<React.Fragment key={i}>
|
|
161
|
+
<label>{this.capitalize(v.label)}:
|
|
162
|
+
<XDateSelect id={this.props.id + '_F' + i} width={v.width} label={v.label} disabled={v.readOnly} value={this.props.formData[v.attr]} onChange={(v) => this.props.formData[v.attr] = v} />
|
|
163
|
+
</label>
|
|
164
|
+
</React.Fragment>)
|
|
165
|
+
}
|
|
166
|
+
else
|
|
167
|
+
if (v.type === 'c') /* check */ {
|
|
168
|
+
return (
|
|
169
|
+
<React.Fragment key={i}>
|
|
170
|
+
<label>
|
|
171
|
+
<XCheckbox id={this.props.id + '_F' + i} width={v.width} label={v.label} disabled={v.readOnly} value={this.props.formData[v.attr]} onChange={(v) => this.props.formData[v.attr] = v} />
|
|
172
|
+
{this.capitalize(v.label)}</label>
|
|
173
|
+
</React.Fragment>)
|
|
174
|
+
}
|
|
175
|
+
else
|
|
176
|
+
if (v.type === 'file') /* file */ {
|
|
177
|
+
return (
|
|
178
|
+
<React.Fragment key={i}>
|
|
179
|
+
<label>{this.capitalize(v.label)}:
|
|
180
|
+
<p>{this.props.formData[v.attr]?this.props.formData[v.attr]:"No file selected"}</p>
|
|
181
|
+
<XButton id={this.props.id + '_F' + i} attachFile={true} disabled={v.readOnly} onClick={(e)=>{this.props.formData[v.attr]=e.target.files[0].name;this.props.formData.filedata=e.target.files[0]}} textlabel='Select File'></XButton>
|
|
182
|
+
</label>
|
|
183
|
+
</React.Fragment>)
|
|
184
|
+
} else
|
|
185
|
+
return (
|
|
186
|
+
<React.Fragment key={i} >{DEBUG_ID2 && '[' + this.props.id + '_F' + i + ']'}
|
|
187
|
+
<label>{this.capitalize(v.label)+":"}
|
|
188
|
+
<XInputExternal type={v.type == 'n' ? 'number' : ''} id={this.props.id + '_F' + i} width={v.width} label={this.capitalize(v.label)+":"} readOnly={v.readOnly} value={this.props.formData[v.attr]} /*onChangeNew={(value)=>this.props.formData[v.attr]=ev.target.value}*/ onChangeNew={this.inputChangeNew} context={{ item: this.props.formData, v: v }} />
|
|
189
|
+
</label>
|
|
190
|
+
</React.Fragment>)
|
|
191
|
+
}
|
|
192
|
+
}
|
|
118
193
|
}
|
|
119
194
|
|
|
120
195
|
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
|
|
121
200
|
export { XFormEdit };
|
|
@@ -112,7 +112,7 @@ function nfmtM(n) {
|
|
|
112
112
|
<React.Fragment>
|
|
113
113
|
<h6>{DEBUG_ID&&'['+this.props.id+']'}</h6>
|
|
114
114
|
{/* div para scroll vertical */}
|
|
115
|
-
|
|
115
|
+
|
|
116
116
|
<table className="hoverable" xwidth={'99%'} xstyle={{border:1}} >
|
|
117
117
|
<thead>
|
|
118
118
|
<tr key={'header'+this.props.id} className="table-header">
|
|
@@ -130,7 +130,7 @@ function nfmtM(n) {
|
|
|
130
130
|
{(this.props.list.length==0)&&<tr><td>Vazio</td></tr>}
|
|
131
131
|
</tbody>
|
|
132
132
|
</table>
|
|
133
|
-
|
|
133
|
+
|
|
134
134
|
<p >{DEBUG_ID2&&'Total_'+this.props.id}</p>
|
|
135
135
|
<p style={{visibility: 'hidden'}} id={'Total_'+this.props.id}>{this.props.list.length}</p>
|
|
136
136
|
{this.props.metadata.dynamicTotalFN&&this.props.metadata.dynamicTotalFN(this.props.list)}
|
package/package.json
CHANGED
package/releasenotes.txt
CHANGED
|
@@ -23,6 +23,19 @@ WebComponents
|
|
|
23
23
|
0.1.45: search, errors, onKey13, validate
|
|
24
24
|
0.1.47: capitalize, tableembpty, label com ":", select align, bug date
|
|
25
25
|
0.1.48: bug
|
|
26
|
+
0.1.51: ajuste labels e "vazio"
|
|
27
|
+
0.2.0: new SEMANTIC UI - NEW LAYOUT FORMS e AJUSTES: labelok, sem div, sem style, sem tags extras, nav para buttonbar
|
|
28
|
+
XInput: sem style, sem size, SEM label, sem BR
|
|
29
|
+
XSelect: sem style, sem DIV
|
|
30
|
+
XForm: com REFACT METHOD, <fieldset> recursivo
|
|
31
|
+
List: sem div e com label
|
|
32
|
+
Array: sem div e com label
|
|
33
|
+
Check, File, Text: sem div e com label
|
|
34
|
+
XTableRead: sem div
|
|
35
|
+
JZEditComponent: sem fieldset de form e de buttonbar, buttonbar com <nav>
|
|
36
|
+
JZInPlaceListComp: sem span
|
|
37
|
+
|
|
38
|
+
|
|
26
39
|
|
|
27
40
|
npm login
|
|
28
41
|
npm publish --access public
|