easy-component-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.
- package/icon/config.json +1018 -0
- package/icon/css/animation.css +85 -0
- package/icon/css/fontello-codes.css +123 -0
- package/icon/css/fontello-embedded.css +181 -0
- package/icon/css/fontello-ie7-codes.css +123 -0
- package/icon/css/fontello-ie7.css +134 -0
- package/icon/css/fontello.css +224 -0
- package/icon/font/fontello.eot +0 -0
- package/icon/font/fontello.svg +346 -0
- package/icon/font/fontello.ttf +0 -0
- package/icon/font/fontello.woff +0 -0
- package/icon/font/fontello.woff2 +0 -0
- package/icon/index.css +2 -0
- package/index.js +1693 -0
- package/package.json +12 -0
package/index.js
ADDED
|
@@ -0,0 +1,1693 @@
|
|
|
1
|
+
var Q=(s,i,e)=>{if(!i.has(s))throw TypeError("Cannot "+e)};var r=(s,i,e)=>(Q(s,i,"read from private field"),e?e.call(s):i.get(s)),c=(s,i,e)=>{if(i.has(s))throw TypeError("Cannot add the same private member more than once");i instanceof WeakSet?i.add(s):i.set(s,e)},n=(s,i,e,t)=>(Q(s,i,"write to private field"),t?t.call(s,e):i.set(s,e),e);function ie(s,i){const e=document.createElement("link");e.href=i,e.rel="stylesheet",s.appendChild(e)}class m extends HTMLElement{constructor(){super(),this.isProduction=!1,this.isProduction=!0}toggleAttribute(i,e,t){e?(this.setAttribute(i,e),t&&this.dom.classList.add(t)):(this.hasAttribute(i)&&this.removeAttribute(i),t&&this.dom.classList.remove(t))}toggleAttr(i,e){e?this.setAttribute(i,e):this.removeAttribute(i)}getAttrBoolean(i){const e=this.getAttribute(i);return e==="true"||e===""}build(i,e){if(this.isProduction){const t=document.createElement("style");t.innerHTML=e,this.shadowRoot.appendChild(t)}else ie(i,new URL(this.nodeName.toLowerCase()+"/index.css",import.meta.url).href)}}const oe=`
|
|
2
|
+
@import url('/icon/index.css');
|
|
3
|
+
|
|
4
|
+
:host {
|
|
5
|
+
--margin-right: 1rem;
|
|
6
|
+
--border-radius: 6px;
|
|
7
|
+
--border-size: 1px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:host([href]) > a {
|
|
11
|
+
text-decoration: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:host-context(ea-button-group) {
|
|
15
|
+
--margin-right: 0;
|
|
16
|
+
--border-size: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.__ea-button {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
padding: 0.5rem 1rem;
|
|
22
|
+
margin-right: var(--margin-right);
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
font-size: 1rem;
|
|
25
|
+
line-height: 1.25;
|
|
26
|
+
font-weight: 500;
|
|
27
|
+
transition: background-color 0.1s, color 0.1s;
|
|
28
|
+
border-radius: var(--border-radius);
|
|
29
|
+
}
|
|
30
|
+
.__ea-button.normal {
|
|
31
|
+
border: var(--border-size) solid #dcdfe6;
|
|
32
|
+
color: #606266;
|
|
33
|
+
background-color: transparent;
|
|
34
|
+
/* ------- 按钮样式 ------- */
|
|
35
|
+
/* #region */
|
|
36
|
+
/* #endregion */
|
|
37
|
+
/* ------- end ------- */
|
|
38
|
+
/* ------- 按钮大小 ------- */
|
|
39
|
+
/* #region */
|
|
40
|
+
/* #endregion */
|
|
41
|
+
/* ------- end ------- */
|
|
42
|
+
}
|
|
43
|
+
.__ea-button.normal.disabled {
|
|
44
|
+
cursor: not-allowed !important;
|
|
45
|
+
background-image: none !important;
|
|
46
|
+
background-color: rgba(64, 64, 64, 0) !important;
|
|
47
|
+
border-color: white !important;
|
|
48
|
+
color: white !important;
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
border-color: #ebedf1 !important;
|
|
51
|
+
color: #babcbe !important;
|
|
52
|
+
}
|
|
53
|
+
.__ea-button.normal.plain {
|
|
54
|
+
background-color: rgba(92, 92, 92, 0);
|
|
55
|
+
border: var(--border-size) solid white;
|
|
56
|
+
color: transparent;
|
|
57
|
+
background-color: transparent;
|
|
58
|
+
border: var(--border-size) solid #dcdfe6;
|
|
59
|
+
color: #606266;
|
|
60
|
+
}
|
|
61
|
+
.__ea-button.normal.plain:hover {
|
|
62
|
+
background-color: transparent;
|
|
63
|
+
}
|
|
64
|
+
.__ea-button.normal.round {
|
|
65
|
+
--border-radius: 999px;
|
|
66
|
+
}
|
|
67
|
+
.__ea-button.normal.medium {
|
|
68
|
+
font-size: 14px;
|
|
69
|
+
}
|
|
70
|
+
.__ea-button.normal.small {
|
|
71
|
+
font-size: 12px;
|
|
72
|
+
}
|
|
73
|
+
.__ea-button.normal.mini {
|
|
74
|
+
font-size: 10px;
|
|
75
|
+
}
|
|
76
|
+
.__ea-button.normal:hover {
|
|
77
|
+
border: var(--border-size) solid rgba(160, 207, 255, 0.4);
|
|
78
|
+
color: #3a9bff;
|
|
79
|
+
background-color: rgba(160, 207, 255, 0.05);
|
|
80
|
+
}
|
|
81
|
+
.__ea-button.normal:active {
|
|
82
|
+
background-color: rgba(7, 130, 255, 0.05);
|
|
83
|
+
border: var(--border-size) solid rgba(33, 143, 255, 0.4);
|
|
84
|
+
}
|
|
85
|
+
.__ea-button > i {
|
|
86
|
+
font-size: 1rem;
|
|
87
|
+
margin-right: 0.5rem;
|
|
88
|
+
}
|
|
89
|
+
.__ea-button.primary {
|
|
90
|
+
border: var(--border-size) solid #409eff;
|
|
91
|
+
color: #fff;
|
|
92
|
+
background-color: #409eff;
|
|
93
|
+
/* ------- 按钮样式 ------- */
|
|
94
|
+
/* #region */
|
|
95
|
+
/* #endregion */
|
|
96
|
+
/* ------- end ------- */
|
|
97
|
+
/* ------- 按钮大小 ------- */
|
|
98
|
+
/* #region */
|
|
99
|
+
/* #endregion */
|
|
100
|
+
/* ------- end ------- */
|
|
101
|
+
}
|
|
102
|
+
.__ea-button.primary.disabled {
|
|
103
|
+
cursor: not-allowed !important;
|
|
104
|
+
background-image: none !important;
|
|
105
|
+
background-color: #c0dfff !important;
|
|
106
|
+
border-color: #c0dfff !important;
|
|
107
|
+
color: white !important;
|
|
108
|
+
pointer-events: none;
|
|
109
|
+
}
|
|
110
|
+
.__ea-button.primary.plain {
|
|
111
|
+
background-color: #f8fbff;
|
|
112
|
+
border: var(--border-size) solid #c0dfff;
|
|
113
|
+
color: #409eff;
|
|
114
|
+
}
|
|
115
|
+
.__ea-button.primary.round {
|
|
116
|
+
--border-radius: 999px;
|
|
117
|
+
}
|
|
118
|
+
.__ea-button.primary.medium {
|
|
119
|
+
font-size: 14px;
|
|
120
|
+
}
|
|
121
|
+
.__ea-button.primary.small {
|
|
122
|
+
font-size: 12px;
|
|
123
|
+
}
|
|
124
|
+
.__ea-button.primary.mini {
|
|
125
|
+
font-size: 10px;
|
|
126
|
+
}
|
|
127
|
+
.__ea-button.primary:hover {
|
|
128
|
+
border: var(--border-size) solid #73b8ff;
|
|
129
|
+
color: white;
|
|
130
|
+
background-color: #73b8ff;
|
|
131
|
+
}
|
|
132
|
+
.__ea-button.primary:active {
|
|
133
|
+
background-color: #006bd9;
|
|
134
|
+
}
|
|
135
|
+
.__ea-button > i {
|
|
136
|
+
font-size: 1rem;
|
|
137
|
+
margin-right: 0.5rem;
|
|
138
|
+
}
|
|
139
|
+
.__ea-button.success {
|
|
140
|
+
border: var(--border-size) solid #67c23a;
|
|
141
|
+
color: #fff;
|
|
142
|
+
background-color: #67c23a;
|
|
143
|
+
/* ------- 按钮样式 ------- */
|
|
144
|
+
/* #region */
|
|
145
|
+
/* #endregion */
|
|
146
|
+
/* ------- end ------- */
|
|
147
|
+
/* ------- 按钮大小 ------- */
|
|
148
|
+
/* #region */
|
|
149
|
+
/* #endregion */
|
|
150
|
+
/* ------- end ------- */
|
|
151
|
+
}
|
|
152
|
+
.__ea-button.success.disabled {
|
|
153
|
+
cursor: not-allowed !important;
|
|
154
|
+
background-image: none !important;
|
|
155
|
+
background-color: #b2e19b !important;
|
|
156
|
+
border-color: #b2e19b !important;
|
|
157
|
+
color: white !important;
|
|
158
|
+
pointer-events: none;
|
|
159
|
+
}
|
|
160
|
+
.__ea-button.success.plain {
|
|
161
|
+
background-color: #d3eec6;
|
|
162
|
+
border: var(--border-size) solid #b2e19b;
|
|
163
|
+
color: #67c23a;
|
|
164
|
+
}
|
|
165
|
+
.__ea-button.success.round {
|
|
166
|
+
--border-radius: 999px;
|
|
167
|
+
}
|
|
168
|
+
.__ea-button.success.medium {
|
|
169
|
+
font-size: 14px;
|
|
170
|
+
}
|
|
171
|
+
.__ea-button.success.small {
|
|
172
|
+
font-size: 12px;
|
|
173
|
+
}
|
|
174
|
+
.__ea-button.success.mini {
|
|
175
|
+
font-size: 10px;
|
|
176
|
+
}
|
|
177
|
+
.__ea-button.success:hover {
|
|
178
|
+
border: var(--border-size) solid #85cf60;
|
|
179
|
+
color: white;
|
|
180
|
+
background-color: #85cf60;
|
|
181
|
+
}
|
|
182
|
+
.__ea-button.success:active {
|
|
183
|
+
background-color: #3d7323;
|
|
184
|
+
}
|
|
185
|
+
.__ea-button > i {
|
|
186
|
+
font-size: 1rem;
|
|
187
|
+
margin-right: 0.5rem;
|
|
188
|
+
}
|
|
189
|
+
.__ea-button.info {
|
|
190
|
+
border: var(--border-size) solid #909399;
|
|
191
|
+
color: #fff;
|
|
192
|
+
background-color: #909399;
|
|
193
|
+
/* ------- 按钮样式 ------- */
|
|
194
|
+
/* #region */
|
|
195
|
+
/* #endregion */
|
|
196
|
+
/* ------- end ------- */
|
|
197
|
+
/* ------- 按钮大小 ------- */
|
|
198
|
+
/* #region */
|
|
199
|
+
/* #endregion */
|
|
200
|
+
/* ------- end ------- */
|
|
201
|
+
}
|
|
202
|
+
.__ea-button.info.disabled {
|
|
203
|
+
cursor: not-allowed !important;
|
|
204
|
+
background-image: none !important;
|
|
205
|
+
background-color: #d2d4d6 !important;
|
|
206
|
+
border-color: #d2d4d6 !important;
|
|
207
|
+
color: white !important;
|
|
208
|
+
pointer-events: none;
|
|
209
|
+
}
|
|
210
|
+
.__ea-button.info.plain {
|
|
211
|
+
background-color: #f0f0f1;
|
|
212
|
+
border: var(--border-size) solid #d2d4d6;
|
|
213
|
+
color: #909399;
|
|
214
|
+
}
|
|
215
|
+
.__ea-button.info.round {
|
|
216
|
+
--border-radius: 999px;
|
|
217
|
+
}
|
|
218
|
+
.__ea-button.info.medium {
|
|
219
|
+
font-size: 14px;
|
|
220
|
+
}
|
|
221
|
+
.__ea-button.info.small {
|
|
222
|
+
font-size: 12px;
|
|
223
|
+
}
|
|
224
|
+
.__ea-button.info.mini {
|
|
225
|
+
font-size: 10px;
|
|
226
|
+
}
|
|
227
|
+
.__ea-button.info:hover {
|
|
228
|
+
border: var(--border-size) solid #abadb1;
|
|
229
|
+
color: white;
|
|
230
|
+
background-color: #abadb1;
|
|
231
|
+
}
|
|
232
|
+
.__ea-button.info:active {
|
|
233
|
+
background-color: #5d6066;
|
|
234
|
+
}
|
|
235
|
+
.__ea-button > i {
|
|
236
|
+
font-size: 1rem;
|
|
237
|
+
margin-right: 0.5rem;
|
|
238
|
+
}
|
|
239
|
+
.__ea-button.warning {
|
|
240
|
+
border: var(--border-size) solid #e6a23c;
|
|
241
|
+
color: #fff;
|
|
242
|
+
background-color: #e6a23c;
|
|
243
|
+
/* ------- 按钮样式 ------- */
|
|
244
|
+
/* #region */
|
|
245
|
+
/* #endregion */
|
|
246
|
+
/* ------- end ------- */
|
|
247
|
+
/* ------- 按钮大小 ------- */
|
|
248
|
+
/* #region */
|
|
249
|
+
/* #endregion */
|
|
250
|
+
/* ------- end ------- */
|
|
251
|
+
}
|
|
252
|
+
.__ea-button.warning.disabled {
|
|
253
|
+
cursor: not-allowed !important;
|
|
254
|
+
background-image: none !important;
|
|
255
|
+
background-color: #f4d8ad !important;
|
|
256
|
+
border-color: #f4d8ad !important;
|
|
257
|
+
color: white !important;
|
|
258
|
+
pointer-events: none;
|
|
259
|
+
}
|
|
260
|
+
.__ea-button.warning.plain {
|
|
261
|
+
background-color: #fbf0df;
|
|
262
|
+
border: var(--border-size) solid #f4d8ad;
|
|
263
|
+
color: #e6a23c;
|
|
264
|
+
}
|
|
265
|
+
.__ea-button.warning.round {
|
|
266
|
+
--border-radius: 999px;
|
|
267
|
+
}
|
|
268
|
+
.__ea-button.warning.medium {
|
|
269
|
+
font-size: 14px;
|
|
270
|
+
}
|
|
271
|
+
.__ea-button.warning.small {
|
|
272
|
+
font-size: 12px;
|
|
273
|
+
}
|
|
274
|
+
.__ea-button.warning.mini {
|
|
275
|
+
font-size: 10px;
|
|
276
|
+
}
|
|
277
|
+
.__ea-button.warning:hover {
|
|
278
|
+
border: var(--border-size) solid #ecb869;
|
|
279
|
+
color: white;
|
|
280
|
+
background-color: #ecb869;
|
|
281
|
+
}
|
|
282
|
+
.__ea-button.warning:active {
|
|
283
|
+
background-color: #a76d15;
|
|
284
|
+
}
|
|
285
|
+
.__ea-button > i {
|
|
286
|
+
font-size: 1rem;
|
|
287
|
+
margin-right: 0.5rem;
|
|
288
|
+
}
|
|
289
|
+
.__ea-button.danger {
|
|
290
|
+
border: var(--border-size) solid #f56c6c;
|
|
291
|
+
color: #fff;
|
|
292
|
+
background-color: #f56c6c;
|
|
293
|
+
/* ------- 按钮样式 ------- */
|
|
294
|
+
/* #region */
|
|
295
|
+
/* #endregion */
|
|
296
|
+
/* ------- end ------- */
|
|
297
|
+
/* ------- 按钮大小 ------- */
|
|
298
|
+
/* #region */
|
|
299
|
+
/* #endregion */
|
|
300
|
+
/* ------- end ------- */
|
|
301
|
+
}
|
|
302
|
+
.__ea-button.danger.disabled {
|
|
303
|
+
cursor: not-allowed !important;
|
|
304
|
+
background-image: none !important;
|
|
305
|
+
background-color: #fde3e3 !important;
|
|
306
|
+
border-color: #fde3e3 !important;
|
|
307
|
+
color: white !important;
|
|
308
|
+
pointer-events: none;
|
|
309
|
+
}
|
|
310
|
+
.__ea-button.danger.plain {
|
|
311
|
+
background-color: white;
|
|
312
|
+
border: var(--border-size) solid #fde3e3;
|
|
313
|
+
color: #f56c6c;
|
|
314
|
+
background-color: #fde8e8;
|
|
315
|
+
}
|
|
316
|
+
.__ea-button.danger.round {
|
|
317
|
+
--border-radius: 999px;
|
|
318
|
+
}
|
|
319
|
+
.__ea-button.danger.medium {
|
|
320
|
+
font-size: 14px;
|
|
321
|
+
}
|
|
322
|
+
.__ea-button.danger.small {
|
|
323
|
+
font-size: 12px;
|
|
324
|
+
}
|
|
325
|
+
.__ea-button.danger.mini {
|
|
326
|
+
font-size: 10px;
|
|
327
|
+
}
|
|
328
|
+
.__ea-button.danger:hover {
|
|
329
|
+
border: var(--border-size) solid #f89c9c;
|
|
330
|
+
color: white;
|
|
331
|
+
background-color: #f89c9c;
|
|
332
|
+
}
|
|
333
|
+
.__ea-button.danger:active {
|
|
334
|
+
background-color: #eb1010;
|
|
335
|
+
}
|
|
336
|
+
.__ea-button > i {
|
|
337
|
+
font-size: 1rem;
|
|
338
|
+
margin-right: 0.5rem;
|
|
339
|
+
}
|
|
340
|
+
.__ea-button.text {
|
|
341
|
+
border: var(--border-size) solid transparent;
|
|
342
|
+
color: #409eff;
|
|
343
|
+
background-color: transparent;
|
|
344
|
+
/* ------- 按钮样式 ------- */
|
|
345
|
+
/* #region */
|
|
346
|
+
/* #endregion */
|
|
347
|
+
/* ------- end ------- */
|
|
348
|
+
/* ------- 按钮大小 ------- */
|
|
349
|
+
/* #region */
|
|
350
|
+
/* #endregion */
|
|
351
|
+
/* ------- end ------- */
|
|
352
|
+
}
|
|
353
|
+
.__ea-button.text.disabled {
|
|
354
|
+
cursor: not-allowed !important;
|
|
355
|
+
background-image: none !important;
|
|
356
|
+
background-color: rgba(64, 64, 64, 0) !important;
|
|
357
|
+
border-color: rgba(64, 64, 64, 0) !important;
|
|
358
|
+
color: white !important;
|
|
359
|
+
pointer-events: none;
|
|
360
|
+
color: #c0c4cc !important;
|
|
361
|
+
}
|
|
362
|
+
.__ea-button.text.plain {
|
|
363
|
+
background-color: rgba(92, 92, 92, 0);
|
|
364
|
+
border: var(--border-size) solid rgba(64, 64, 64, 0);
|
|
365
|
+
color: transparent;
|
|
366
|
+
}
|
|
367
|
+
.__ea-button.text.round {
|
|
368
|
+
--border-radius: 999px;
|
|
369
|
+
}
|
|
370
|
+
.__ea-button.text.medium {
|
|
371
|
+
font-size: 14px;
|
|
372
|
+
}
|
|
373
|
+
.__ea-button.text.small {
|
|
374
|
+
font-size: 12px;
|
|
375
|
+
}
|
|
376
|
+
.__ea-button.text.mini {
|
|
377
|
+
font-size: 10px;
|
|
378
|
+
}
|
|
379
|
+
.__ea-button.text:hover {
|
|
380
|
+
border: var(--border-size) solid rgba(26, 26, 26, 0);
|
|
381
|
+
color: #73b8ff;
|
|
382
|
+
background-color: rgba(26, 26, 26, 0);
|
|
383
|
+
}
|
|
384
|
+
.__ea-button.text:active {
|
|
385
|
+
background-color: rgba(0, 0, 0, 0);
|
|
386
|
+
}
|
|
387
|
+
.__ea-button > i {
|
|
388
|
+
font-size: 1rem;
|
|
389
|
+
margin-right: 0.5rem;
|
|
390
|
+
}
|
|
391
|
+
.__ea-button.first-child {
|
|
392
|
+
border-radius: 4px 0 0 4px;
|
|
393
|
+
}
|
|
394
|
+
.__ea-button.middle-child {
|
|
395
|
+
border-radius: 0;
|
|
396
|
+
}
|
|
397
|
+
.__ea-button.last-child {
|
|
398
|
+
border-radius: 0 4px 4px 0;
|
|
399
|
+
}
|
|
400
|
+
`;var H;class se extends m{constructor(){super();c(this,H,!1);const e=this.attachShadow({mode:"open"});let t=null;this.getAttribute("href")!==null&&this.getAttribute("href")!==""?t=document.createElement("a"):t=document.createElement("button");const o=document.createElement("slot");t.className="__ea-button",t.appendChild(o),this.dom=t;const a=document.createElement("style");a.innerHTML=oe,this.shadowRoot.appendChild(a),e.appendChild(t)}static get observedAttributes(){return["loading","disabled"]}get BUTTON_STYLE(){return["plain","round"]}get BUTTON_TYPE(){return["normal","primary","success","warning","danger","text"]}get BUTTON_SIZE(){return["medium","small","mini"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){r(this,H)?this.toggleAttribute("disabled",e,"disabled"):this.toggleAttribute("disabled",this.disabled,"disabled")}get ariaDisabled(){return this.getAttribute("aria-disabled")!==null||this.getAttribute("aria-disabled")!==void 0}set ariaDisabled(e){this.toggleAttribute("aria-disabled",e,"disabled")}get plain(){return this.getAttribute("plain")!==void 0&&this.getAttribute("plain")!==null}set plain(e){this.toggleAttribute("plain",e,"plain")}get round(){return this.getAttribute("round")!==void 0&&this.getAttribute("round")!==null}set round(e){this.toggleAttribute("round",e,"round"),e&&this.dom.style.setProperty("--border-radius","999px")}get type(){const e=this.getAttribute("type");return e==null||e==!1?"normal":e}set type(e){this.BUTTON_TYPE.includes(e)||(e="normal"),this.toggleAttribute("type",e,e)}get size(){return this.getAttribute("size")}set size(e){this.BUTTON_SIZE.includes(e)&&this.toggleAttribute("size",e,e)}get loading(){return this.hasAttribute("loading")}set loading(e){if(e=e==="true"||e===""||e===!0,this.toggleAttribute("loading",e,"loading"),this.disabled=e,e&&!this.dom.querySelector("i")){const t=document.createElement("i");t.className="icon-spin6 animate-spin",this.dom.insertBefore(t,this.dom.firstChild)}else!e&&this.dom.querySelector("i")&&this.dom.querySelector("i").remove()}get icon(){return this.getAttribute("icon")}set icon(e){var t;if(e){if(this.setAttribute("icon",e),!this.dom.querySelector("i")){const o=document.createElement("i");o.className=e,this.innerHTML||o.style.setProperty("margin-right","0"),this.dom.insertBefore(o,this.dom.firstChild)}}else this.removeAttribute("icon"),(t=this.dom.querySelector("i"))==null||t.remove()}get href(){return this.getAttribute("href")}set href(e){this.shadowRoot.querySelector("button")||(e==null&&e==!1?(this.removeAttribute("href"),this.dom.removeAttribute("href")):(this.setAttribute("href",e),this.dom.setAttribute("href",e)))}init(){this.disabled=this.hasAttribute("disabled"),this.loading=this.loading;for(let e=0,t;t=this.BUTTON_STYLE[e++];)if(this[t]){this[t]=this[t];break}this.type=this.type,this.size=this.size,this.href=this.href,this.icon=this.icon}connectedCallback(){this.init(),n(this,H,!0)}attributeChangedCallback(e,t,o){if(t!=o)switch(e){case"loading":o===""&&(o=!0),this.loading=o;break;case"disabled":r(this,H)&&(this.disabled=o==="true"||o==="",(o==="true"||o==="")&&this.setAttribute("disabled",!0));break}}}H=new WeakMap;const ae=`
|
|
401
|
+
:host {
|
|
402
|
+
--margin-right: 1rem;
|
|
403
|
+
--border-radius: 6px;
|
|
404
|
+
--border-size: 1px;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
:host([href]) > a {
|
|
408
|
+
text-decoration: none;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
:host-context(ea-button-group) {
|
|
412
|
+
--margin-right: 0;
|
|
413
|
+
--border-size: 0;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.__ea-button {
|
|
417
|
+
box-sizing: border-box;
|
|
418
|
+
padding: 0.5rem 1rem;
|
|
419
|
+
margin-right: var(--margin-right);
|
|
420
|
+
cursor: pointer;
|
|
421
|
+
font-size: 1rem;
|
|
422
|
+
line-height: 1.25;
|
|
423
|
+
font-weight: 500;
|
|
424
|
+
transition: background-color 0.1s, color 0.1s;
|
|
425
|
+
border-radius: var(--border-radius);
|
|
426
|
+
}
|
|
427
|
+
.__ea-button.normal {
|
|
428
|
+
border: var(--border-size) solid #dcdfe6;
|
|
429
|
+
color: #606266;
|
|
430
|
+
background-color: transparent;
|
|
431
|
+
/* ------- 按钮样式 ------- */
|
|
432
|
+
/* #region */
|
|
433
|
+
/* #endregion */
|
|
434
|
+
/* ------- end ------- */
|
|
435
|
+
/* ------- 按钮大小 ------- */
|
|
436
|
+
/* #region */
|
|
437
|
+
/* #endregion */
|
|
438
|
+
/* ------- end ------- */
|
|
439
|
+
}
|
|
440
|
+
.__ea-button.normal.disabled {
|
|
441
|
+
cursor: not-allowed !important;
|
|
442
|
+
background-image: none !important;
|
|
443
|
+
background-color: rgba(64, 64, 64, 0) !important;
|
|
444
|
+
border-color: white !important;
|
|
445
|
+
color: white !important;
|
|
446
|
+
pointer-events: none;
|
|
447
|
+
border-color: #ebedf1 !important;
|
|
448
|
+
color: #babcbe !important;
|
|
449
|
+
}
|
|
450
|
+
.__ea-button.normal.plain {
|
|
451
|
+
background-color: rgba(92, 92, 92, 0);
|
|
452
|
+
border: var(--border-size) solid white;
|
|
453
|
+
color: transparent;
|
|
454
|
+
background-color: transparent;
|
|
455
|
+
border: var(--border-size) solid #dcdfe6;
|
|
456
|
+
color: #606266;
|
|
457
|
+
}
|
|
458
|
+
.__ea-button.normal.plain:hover {
|
|
459
|
+
background-color: transparent;
|
|
460
|
+
}
|
|
461
|
+
.__ea-button.normal.round {
|
|
462
|
+
--border-radius: 999px;
|
|
463
|
+
}
|
|
464
|
+
.__ea-button.normal.medium {
|
|
465
|
+
font-size: 14px;
|
|
466
|
+
}
|
|
467
|
+
.__ea-button.normal.small {
|
|
468
|
+
font-size: 12px;
|
|
469
|
+
}
|
|
470
|
+
.__ea-button.normal.mini {
|
|
471
|
+
font-size: 10px;
|
|
472
|
+
}
|
|
473
|
+
.__ea-button.normal:hover {
|
|
474
|
+
border: var(--border-size) solid rgba(160, 207, 255, 0.4);
|
|
475
|
+
color: #3a9bff;
|
|
476
|
+
background-color: rgba(160, 207, 255, 0.05);
|
|
477
|
+
}
|
|
478
|
+
.__ea-button.normal:active {
|
|
479
|
+
background-color: rgba(7, 130, 255, 0.05);
|
|
480
|
+
border: var(--border-size) solid rgba(33, 143, 255, 0.4);
|
|
481
|
+
}
|
|
482
|
+
.__ea-button > i {
|
|
483
|
+
font-size: 1rem;
|
|
484
|
+
margin-right: 0.5rem;
|
|
485
|
+
}
|
|
486
|
+
.__ea-button.primary {
|
|
487
|
+
border: var(--border-size) solid #409eff;
|
|
488
|
+
color: #fff;
|
|
489
|
+
background-color: #409eff;
|
|
490
|
+
/* ------- 按钮样式 ------- */
|
|
491
|
+
/* #region */
|
|
492
|
+
/* #endregion */
|
|
493
|
+
/* ------- end ------- */
|
|
494
|
+
/* ------- 按钮大小 ------- */
|
|
495
|
+
/* #region */
|
|
496
|
+
/* #endregion */
|
|
497
|
+
/* ------- end ------- */
|
|
498
|
+
}
|
|
499
|
+
.__ea-button.primary.disabled {
|
|
500
|
+
cursor: not-allowed !important;
|
|
501
|
+
background-image: none !important;
|
|
502
|
+
background-color: #c0dfff !important;
|
|
503
|
+
border-color: #c0dfff !important;
|
|
504
|
+
color: white !important;
|
|
505
|
+
pointer-events: none;
|
|
506
|
+
}
|
|
507
|
+
.__ea-button.primary.plain {
|
|
508
|
+
background-color: #f8fbff;
|
|
509
|
+
border: var(--border-size) solid #c0dfff;
|
|
510
|
+
color: #409eff;
|
|
511
|
+
}
|
|
512
|
+
.__ea-button.primary.round {
|
|
513
|
+
--border-radius: 999px;
|
|
514
|
+
}
|
|
515
|
+
.__ea-button.primary.medium {
|
|
516
|
+
font-size: 14px;
|
|
517
|
+
}
|
|
518
|
+
.__ea-button.primary.small {
|
|
519
|
+
font-size: 12px;
|
|
520
|
+
}
|
|
521
|
+
.__ea-button.primary.mini {
|
|
522
|
+
font-size: 10px;
|
|
523
|
+
}
|
|
524
|
+
.__ea-button.primary:hover {
|
|
525
|
+
border: var(--border-size) solid #73b8ff;
|
|
526
|
+
color: white;
|
|
527
|
+
background-color: #73b8ff;
|
|
528
|
+
}
|
|
529
|
+
.__ea-button.primary:active {
|
|
530
|
+
background-color: #006bd9;
|
|
531
|
+
}
|
|
532
|
+
.__ea-button > i {
|
|
533
|
+
font-size: 1rem;
|
|
534
|
+
margin-right: 0.5rem;
|
|
535
|
+
}
|
|
536
|
+
.__ea-button.success {
|
|
537
|
+
border: var(--border-size) solid #67c23a;
|
|
538
|
+
color: #fff;
|
|
539
|
+
background-color: #67c23a;
|
|
540
|
+
/* ------- 按钮样式 ------- */
|
|
541
|
+
/* #region */
|
|
542
|
+
/* #endregion */
|
|
543
|
+
/* ------- end ------- */
|
|
544
|
+
/* ------- 按钮大小 ------- */
|
|
545
|
+
/* #region */
|
|
546
|
+
/* #endregion */
|
|
547
|
+
/* ------- end ------- */
|
|
548
|
+
}
|
|
549
|
+
.__ea-button.success.disabled {
|
|
550
|
+
cursor: not-allowed !important;
|
|
551
|
+
background-image: none !important;
|
|
552
|
+
background-color: #b2e19b !important;
|
|
553
|
+
border-color: #b2e19b !important;
|
|
554
|
+
color: white !important;
|
|
555
|
+
pointer-events: none;
|
|
556
|
+
}
|
|
557
|
+
.__ea-button.success.plain {
|
|
558
|
+
background-color: #d3eec6;
|
|
559
|
+
border: var(--border-size) solid #b2e19b;
|
|
560
|
+
color: #67c23a;
|
|
561
|
+
}
|
|
562
|
+
.__ea-button.success.round {
|
|
563
|
+
--border-radius: 999px;
|
|
564
|
+
}
|
|
565
|
+
.__ea-button.success.medium {
|
|
566
|
+
font-size: 14px;
|
|
567
|
+
}
|
|
568
|
+
.__ea-button.success.small {
|
|
569
|
+
font-size: 12px;
|
|
570
|
+
}
|
|
571
|
+
.__ea-button.success.mini {
|
|
572
|
+
font-size: 10px;
|
|
573
|
+
}
|
|
574
|
+
.__ea-button.success:hover {
|
|
575
|
+
border: var(--border-size) solid #85cf60;
|
|
576
|
+
color: white;
|
|
577
|
+
background-color: #85cf60;
|
|
578
|
+
}
|
|
579
|
+
.__ea-button.success:active {
|
|
580
|
+
background-color: #3d7323;
|
|
581
|
+
}
|
|
582
|
+
.__ea-button > i {
|
|
583
|
+
font-size: 1rem;
|
|
584
|
+
margin-right: 0.5rem;
|
|
585
|
+
}
|
|
586
|
+
.__ea-button.info {
|
|
587
|
+
border: var(--border-size) solid #909399;
|
|
588
|
+
color: #fff;
|
|
589
|
+
background-color: #909399;
|
|
590
|
+
/* ------- 按钮样式 ------- */
|
|
591
|
+
/* #region */
|
|
592
|
+
/* #endregion */
|
|
593
|
+
/* ------- end ------- */
|
|
594
|
+
/* ------- 按钮大小 ------- */
|
|
595
|
+
/* #region */
|
|
596
|
+
/* #endregion */
|
|
597
|
+
/* ------- end ------- */
|
|
598
|
+
}
|
|
599
|
+
.__ea-button.info.disabled {
|
|
600
|
+
cursor: not-allowed !important;
|
|
601
|
+
background-image: none !important;
|
|
602
|
+
background-color: #d2d4d6 !important;
|
|
603
|
+
border-color: #d2d4d6 !important;
|
|
604
|
+
color: white !important;
|
|
605
|
+
pointer-events: none;
|
|
606
|
+
}
|
|
607
|
+
.__ea-button.info.plain {
|
|
608
|
+
background-color: #f0f0f1;
|
|
609
|
+
border: var(--border-size) solid #d2d4d6;
|
|
610
|
+
color: #909399;
|
|
611
|
+
}
|
|
612
|
+
.__ea-button.info.round {
|
|
613
|
+
--border-radius: 999px;
|
|
614
|
+
}
|
|
615
|
+
.__ea-button.info.medium {
|
|
616
|
+
font-size: 14px;
|
|
617
|
+
}
|
|
618
|
+
.__ea-button.info.small {
|
|
619
|
+
font-size: 12px;
|
|
620
|
+
}
|
|
621
|
+
.__ea-button.info.mini {
|
|
622
|
+
font-size: 10px;
|
|
623
|
+
}
|
|
624
|
+
.__ea-button.info:hover {
|
|
625
|
+
border: var(--border-size) solid #abadb1;
|
|
626
|
+
color: white;
|
|
627
|
+
background-color: #abadb1;
|
|
628
|
+
}
|
|
629
|
+
.__ea-button.info:active {
|
|
630
|
+
background-color: #5d6066;
|
|
631
|
+
}
|
|
632
|
+
.__ea-button > i {
|
|
633
|
+
font-size: 1rem;
|
|
634
|
+
margin-right: 0.5rem;
|
|
635
|
+
}
|
|
636
|
+
.__ea-button.warning {
|
|
637
|
+
border: var(--border-size) solid #e6a23c;
|
|
638
|
+
color: #fff;
|
|
639
|
+
background-color: #e6a23c;
|
|
640
|
+
/* ------- 按钮样式 ------- */
|
|
641
|
+
/* #region */
|
|
642
|
+
/* #endregion */
|
|
643
|
+
/* ------- end ------- */
|
|
644
|
+
/* ------- 按钮大小 ------- */
|
|
645
|
+
/* #region */
|
|
646
|
+
/* #endregion */
|
|
647
|
+
/* ------- end ------- */
|
|
648
|
+
}
|
|
649
|
+
.__ea-button.warning.disabled {
|
|
650
|
+
cursor: not-allowed !important;
|
|
651
|
+
background-image: none !important;
|
|
652
|
+
background-color: #f4d8ad !important;
|
|
653
|
+
border-color: #f4d8ad !important;
|
|
654
|
+
color: white !important;
|
|
655
|
+
pointer-events: none;
|
|
656
|
+
}
|
|
657
|
+
.__ea-button.warning.plain {
|
|
658
|
+
background-color: #fbf0df;
|
|
659
|
+
border: var(--border-size) solid #f4d8ad;
|
|
660
|
+
color: #e6a23c;
|
|
661
|
+
}
|
|
662
|
+
.__ea-button.warning.round {
|
|
663
|
+
--border-radius: 999px;
|
|
664
|
+
}
|
|
665
|
+
.__ea-button.warning.medium {
|
|
666
|
+
font-size: 14px;
|
|
667
|
+
}
|
|
668
|
+
.__ea-button.warning.small {
|
|
669
|
+
font-size: 12px;
|
|
670
|
+
}
|
|
671
|
+
.__ea-button.warning.mini {
|
|
672
|
+
font-size: 10px;
|
|
673
|
+
}
|
|
674
|
+
.__ea-button.warning:hover {
|
|
675
|
+
border: var(--border-size) solid #ecb869;
|
|
676
|
+
color: white;
|
|
677
|
+
background-color: #ecb869;
|
|
678
|
+
}
|
|
679
|
+
.__ea-button.warning:active {
|
|
680
|
+
background-color: #a76d15;
|
|
681
|
+
}
|
|
682
|
+
.__ea-button > i {
|
|
683
|
+
font-size: 1rem;
|
|
684
|
+
margin-right: 0.5rem;
|
|
685
|
+
}
|
|
686
|
+
.__ea-button.danger {
|
|
687
|
+
border: var(--border-size) solid #f56c6c;
|
|
688
|
+
color: #fff;
|
|
689
|
+
background-color: #f56c6c;
|
|
690
|
+
/* ------- 按钮样式 ------- */
|
|
691
|
+
/* #region */
|
|
692
|
+
/* #endregion */
|
|
693
|
+
/* ------- end ------- */
|
|
694
|
+
/* ------- 按钮大小 ------- */
|
|
695
|
+
/* #region */
|
|
696
|
+
/* #endregion */
|
|
697
|
+
/* ------- end ------- */
|
|
698
|
+
}
|
|
699
|
+
.__ea-button.danger.disabled {
|
|
700
|
+
cursor: not-allowed !important;
|
|
701
|
+
background-image: none !important;
|
|
702
|
+
background-color: #fde3e3 !important;
|
|
703
|
+
border-color: #fde3e3 !important;
|
|
704
|
+
color: white !important;
|
|
705
|
+
pointer-events: none;
|
|
706
|
+
}
|
|
707
|
+
.__ea-button.danger.plain {
|
|
708
|
+
background-color: white;
|
|
709
|
+
border: var(--border-size) solid #fde3e3;
|
|
710
|
+
color: #f56c6c;
|
|
711
|
+
background-color: #fde8e8;
|
|
712
|
+
}
|
|
713
|
+
.__ea-button.danger.round {
|
|
714
|
+
--border-radius: 999px;
|
|
715
|
+
}
|
|
716
|
+
.__ea-button.danger.medium {
|
|
717
|
+
font-size: 14px;
|
|
718
|
+
}
|
|
719
|
+
.__ea-button.danger.small {
|
|
720
|
+
font-size: 12px;
|
|
721
|
+
}
|
|
722
|
+
.__ea-button.danger.mini {
|
|
723
|
+
font-size: 10px;
|
|
724
|
+
}
|
|
725
|
+
.__ea-button.danger:hover {
|
|
726
|
+
border: var(--border-size) solid #f89c9c;
|
|
727
|
+
color: white;
|
|
728
|
+
background-color: #f89c9c;
|
|
729
|
+
}
|
|
730
|
+
.__ea-button.danger:active {
|
|
731
|
+
background-color: #eb1010;
|
|
732
|
+
}
|
|
733
|
+
.__ea-button > i {
|
|
734
|
+
font-size: 1rem;
|
|
735
|
+
margin-right: 0.5rem;
|
|
736
|
+
}
|
|
737
|
+
.__ea-button.text {
|
|
738
|
+
border: var(--border-size) solid transparent;
|
|
739
|
+
color: #409eff;
|
|
740
|
+
background-color: transparent;
|
|
741
|
+
/* ------- 按钮样式 ------- */
|
|
742
|
+
/* #region */
|
|
743
|
+
/* #endregion */
|
|
744
|
+
/* ------- end ------- */
|
|
745
|
+
/* ------- 按钮大小 ------- */
|
|
746
|
+
/* #region */
|
|
747
|
+
/* #endregion */
|
|
748
|
+
/* ------- end ------- */
|
|
749
|
+
}
|
|
750
|
+
.__ea-button.text.disabled {
|
|
751
|
+
cursor: not-allowed !important;
|
|
752
|
+
background-image: none !important;
|
|
753
|
+
background-color: rgba(64, 64, 64, 0) !important;
|
|
754
|
+
border-color: rgba(64, 64, 64, 0) !important;
|
|
755
|
+
color: white !important;
|
|
756
|
+
pointer-events: none;
|
|
757
|
+
color: #c0c4cc !important;
|
|
758
|
+
}
|
|
759
|
+
.__ea-button.text.plain {
|
|
760
|
+
background-color: rgba(92, 92, 92, 0);
|
|
761
|
+
border: var(--border-size) solid rgba(64, 64, 64, 0);
|
|
762
|
+
color: transparent;
|
|
763
|
+
}
|
|
764
|
+
.__ea-button.text.round {
|
|
765
|
+
--border-radius: 999px;
|
|
766
|
+
}
|
|
767
|
+
.__ea-button.text.medium {
|
|
768
|
+
font-size: 14px;
|
|
769
|
+
}
|
|
770
|
+
.__ea-button.text.small {
|
|
771
|
+
font-size: 12px;
|
|
772
|
+
}
|
|
773
|
+
.__ea-button.text.mini {
|
|
774
|
+
font-size: 10px;
|
|
775
|
+
}
|
|
776
|
+
.__ea-button.text:hover {
|
|
777
|
+
border: var(--border-size) solid rgba(26, 26, 26, 0);
|
|
778
|
+
color: #73b8ff;
|
|
779
|
+
background-color: rgba(26, 26, 26, 0);
|
|
780
|
+
}
|
|
781
|
+
.__ea-button.text:active {
|
|
782
|
+
background-color: rgba(0, 0, 0, 0);
|
|
783
|
+
}
|
|
784
|
+
.__ea-button > i {
|
|
785
|
+
font-size: 1rem;
|
|
786
|
+
margin-right: 0.5rem;
|
|
787
|
+
}
|
|
788
|
+
.__ea-button.first-child {
|
|
789
|
+
border-radius: 4px 0 0 4px;
|
|
790
|
+
}
|
|
791
|
+
.__ea-button.middle-child {
|
|
792
|
+
border-radius: 0;
|
|
793
|
+
}
|
|
794
|
+
.__ea-button.last-child {
|
|
795
|
+
border-radius: 0 4px 4px 0;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
.__ea-button-group {
|
|
799
|
+
display: flex;
|
|
800
|
+
align-items: center;
|
|
801
|
+
margin-right: 0.5rem;
|
|
802
|
+
}
|
|
803
|
+
.__ea-button-group ::slotted(ea-button:first-of-type) {
|
|
804
|
+
--border-radius: 4px 0 0 4px;
|
|
805
|
+
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
|
806
|
+
}
|
|
807
|
+
.__ea-button-group ::slotted(ea-button:last-of-type) {
|
|
808
|
+
--border-radius: 0 4px 4px 0;
|
|
809
|
+
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
|
810
|
+
}
|
|
811
|
+
.__ea-button-group ::slotted(ea-button) {
|
|
812
|
+
--margin-right: 0;
|
|
813
|
+
}
|
|
814
|
+
`;class ne extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),e=document.createElement("div");i.appendChild(e);const t=document.createElement("slot");e.className="__ea-button-group",e.appendChild(t),this.dom=e;const o=document.createElement("style");o.innerHTML=ae,this.shadowRoot.appendChild(o),i.appendChild(e)}connectedCallback(){Array.from(this.children).map((i,e,t)=>{const o=i.shadowRoot?i.shadowRoot.querySelector("button"):i;e===0?o.style.setProperty("--border-radius","4px 0 0 4px"):e===t.length-1?o.style.setProperty("--border-radius","0 4px 4px 0"):o.style.setProperty("--border-radius","0")})}}const ce=`
|
|
815
|
+
@import url('/icon/index.css');
|
|
816
|
+
|
|
817
|
+
.__ea-link {
|
|
818
|
+
text-decoration: none;
|
|
819
|
+
color: #606266;
|
|
820
|
+
cursor: pointer;
|
|
821
|
+
}
|
|
822
|
+
.__ea-link:hover {
|
|
823
|
+
color: #797b80;
|
|
824
|
+
}
|
|
825
|
+
.__ea-link.underline:hover {
|
|
826
|
+
text-decoration: underline;
|
|
827
|
+
}
|
|
828
|
+
.__ea-link.primary {
|
|
829
|
+
color: #409eff;
|
|
830
|
+
}
|
|
831
|
+
.__ea-link.primary:hover {
|
|
832
|
+
color: #73b8ff;
|
|
833
|
+
}
|
|
834
|
+
.__ea-link.success {
|
|
835
|
+
color: #67c23a;
|
|
836
|
+
}
|
|
837
|
+
.__ea-link.success:hover {
|
|
838
|
+
color: #85cf60;
|
|
839
|
+
}
|
|
840
|
+
.__ea-link.info {
|
|
841
|
+
color: #909399;
|
|
842
|
+
}
|
|
843
|
+
.__ea-link.info:hover {
|
|
844
|
+
color: #abadb1;
|
|
845
|
+
}
|
|
846
|
+
.__ea-link.warning {
|
|
847
|
+
color: #e6a23c;
|
|
848
|
+
}
|
|
849
|
+
.__ea-link.warning:hover {
|
|
850
|
+
color: #ecb869;
|
|
851
|
+
}
|
|
852
|
+
.__ea-link.danger {
|
|
853
|
+
color: #f56c6c;
|
|
854
|
+
}
|
|
855
|
+
.__ea-link.danger:hover {
|
|
856
|
+
color: #f89c9c;
|
|
857
|
+
}
|
|
858
|
+
.__ea-link.disabled {
|
|
859
|
+
color: #c0c4cc;
|
|
860
|
+
pointer-events: none;
|
|
861
|
+
}
|
|
862
|
+
.__ea-link.disabled:hover {
|
|
863
|
+
color: #dcdee3;
|
|
864
|
+
}
|
|
865
|
+
`;class de extends m{constructor(){super();const i=this.attachShadow({mode:"open"});let e=document.createElement("a");const t=document.createElement("slot");e.className="__ea-link",e.appendChild(t),this.dom=e;const o=document.createElement("style");o.innerHTML=ce,this.shadowRoot.appendChild(o),i.appendChild(e)}static get observedAttributes(){return["disabled"]}get LINK_TYPE(){return["primary","success","info","warning","danger"]}get href(){return this.getAttribute("href")}set href(i){i!==null&&(this.dom.href=i)}get type(){return this.getAttribute("type")}set type(i){if(i!==null){for(let e=0;e<this.LINK_TYPE.length;e++)if(i===this.LINK_TYPE[e]){this.dom.classList.add(i);break}}}get disabled(){return this.getAttribute("disabled")===""||this.getAttribute("disabled")==="true"}set disabled(i){i&&(i?this.dom.classList.add("disabled"):this.dom.classList.remove("disabled"))}get underline(){return this.getAttribute("underline")===""||this.getAttribute("underline")==="true"}set underline(i){i&&(i?this.dom.classList.add("underline"):this.dom.classList.remove("underline"))}get icon(){return this.getAttribute("icon")}set icon(i){if(i===null||i==="")return;const e=document.createElement("i");e.className=i,this.dom.insertBefore(e,this.dom.firstChild)}init(){this.href=this.href,this.type=this.type,this.disabled=this.disabled,this.underline=this.underline,this.icon=this.icon}connectedCallback(){this.init()}attributeChangedCallback(i,e,t){switch(i){case"disabled":this.disabled=t===""||t==="true"||t===!0;break}}}const le=`:host(ea-radio) {
|
|
866
|
+
--margin-right: 0.75rem;
|
|
867
|
+
--text-color: #606266;
|
|
868
|
+
--radio-show-type: inline-block;
|
|
869
|
+
--button-size: 1rem;
|
|
870
|
+
--button-margin: 0.5rem;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.ea-radio_wrap {
|
|
874
|
+
display: flex;
|
|
875
|
+
align-items: center;
|
|
876
|
+
margin-right: 1rem;
|
|
877
|
+
}
|
|
878
|
+
.ea-radio_wrap .__ea-radio-input_wrap {
|
|
879
|
+
width: var(--button-size);
|
|
880
|
+
height: var(--button-size);
|
|
881
|
+
line-height: 1;
|
|
882
|
+
margin-right: var(--button-margin);
|
|
883
|
+
}
|
|
884
|
+
.ea-radio_wrap .__ea-radio-input_wrap input {
|
|
885
|
+
display: none;
|
|
886
|
+
}
|
|
887
|
+
.ea-radio_wrap .__ea-radio-input_wrap .__ea-radio-input_inner {
|
|
888
|
+
position: relative;
|
|
889
|
+
display: var(--radio-show-type);
|
|
890
|
+
width: 1rem;
|
|
891
|
+
height: 1rem;
|
|
892
|
+
line-height: 1;
|
|
893
|
+
box-sizing: border-box;
|
|
894
|
+
border-radius: 50%;
|
|
895
|
+
border: 1px solid #606266;
|
|
896
|
+
}
|
|
897
|
+
.ea-radio_wrap .__ea-radio-input_wrap .__ea-radio-input_inner::before {
|
|
898
|
+
position: absolute;
|
|
899
|
+
left: 50%;
|
|
900
|
+
top: 50%;
|
|
901
|
+
transform: translate(-50%, -50%);
|
|
902
|
+
content: "";
|
|
903
|
+
width: 0.35rem;
|
|
904
|
+
height: 0.35rem;
|
|
905
|
+
border-radius: 50%;
|
|
906
|
+
background-color: transparent;
|
|
907
|
+
box-sizing: border-box;
|
|
908
|
+
transition: all 0.3s ease;
|
|
909
|
+
}
|
|
910
|
+
.ea-radio_wrap .__ea-radio-input_wrap .__ea-radio-input_inner:hover {
|
|
911
|
+
border-color: #409eff;
|
|
912
|
+
}
|
|
913
|
+
.ea-radio_wrap .__ea-radio-label_desc {
|
|
914
|
+
color: var(--text-color);
|
|
915
|
+
}
|
|
916
|
+
.ea-radio_wrap.checked .__ea-radio-input_wrap .__ea-radio-input_inner {
|
|
917
|
+
border-color: #409eff;
|
|
918
|
+
background-color: #409eff;
|
|
919
|
+
}
|
|
920
|
+
.ea-radio_wrap.checked .__ea-radio-input_wrap .__ea-radio-input_inner::before {
|
|
921
|
+
background-color: white;
|
|
922
|
+
}
|
|
923
|
+
.ea-radio_wrap.checked .__ea-radio-label_desc {
|
|
924
|
+
color: #409eff;
|
|
925
|
+
}
|
|
926
|
+
.ea-radio_wrap.disabled .__ea-radio-input_wrap .__ea-radio-input_inner {
|
|
927
|
+
border-color: #eeeeee;
|
|
928
|
+
background-color: #eeeeee;
|
|
929
|
+
}
|
|
930
|
+
.ea-radio_wrap.disabled .__ea-radio-input_wrap .__ea-radio-input_inner::before {
|
|
931
|
+
background-color: transparent;
|
|
932
|
+
}
|
|
933
|
+
.ea-radio_wrap.disabled .__ea-radio-label_desc {
|
|
934
|
+
color: #c0c4cc;
|
|
935
|
+
}
|
|
936
|
+
.ea-radio_wrap.disabled[checked=true] .__ea-radio-input_wrap .__ea-radio-input_inner::before {
|
|
937
|
+
background-color: #c0c4cc;
|
|
938
|
+
}
|
|
939
|
+
.ea-radio_wrap.border {
|
|
940
|
+
border: 1px solid #ccc;
|
|
941
|
+
padding: 0.25rem 0.5rem;
|
|
942
|
+
border-radius: 8px;
|
|
943
|
+
}
|
|
944
|
+
.ea-radio_wrap.border[checked=true] {
|
|
945
|
+
border: 1px solid #409eff;
|
|
946
|
+
}`,he=()=>{const s=document.createElement("span");s.className="__ea-radio-input_wrap";const i=document.createElement("span");i.className="__ea-radio-input_inner",s.appendChild(i);const e=document.createElement("input");return e.type="radio",e.className="__ea-radio-input_input",s.appendChild(e),{wrap:s,input:e}},ue=()=>{const s=document.createElement("span");s.className="__ea-radio-label_desc";const i=document.createElement("slot");return s.appendChild(i),s};var y,f;class pe extends m{constructor(){super();c(this,y,void 0);c(this,f,void 0);const e=this.attachShadow({mode:"open"});let t=document.createElement("label");t.className="ea-radio_wrap";const o=he();t.appendChild(o.wrap);const a=ue();t.appendChild(a),n(this,f,t),n(this,y,o.input);const d=document.createElement("style");d.innerHTML=le,this.shadowRoot.appendChild(d),e.appendChild(t)}static get observedAttributes(){return["checked"]}get checked(){return this.getAttrBoolean("checked")}set checked(e){r(this,y).checked=e,e?(this.setAttribute("checked",!0),r(this,f).setAttribute("checked",!0),r(this,f).classList.add("checked")):(this.removeAttribute("checked"),r(this,f).removeAttribute("checked"),r(this,f).classList.remove("checked"))}get name(){return this.getAttribute("name")}set name(e){r(this,y).setAttribute("name",e)}get value(){return this.getAttribute("value")}set value(e){r(this,f).setAttribute("for",e),r(this,y).setAttribute("id",e),r(this,y).setAttribute("value",e)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){r(this,y).disabled=e,r(this,f).toggleAttribute("disabled",e),r(this,f).classList.toggle("disabled",e)}get border(){return this.getAttrBoolean("border")}set border(e){r(this,f).classList.toggle("border",e)}init(){const e=this;this.checked=this.checked,this.name=this.name,this.value=this.value,this.disabled=this.disabled,this.border=this.border,r(this,y).addEventListener("change",function(t){t.target.checked&&document.querySelectorAll(`ea-radio[name="${e.name}"]`).forEach(o=>{o.shadowRoot.querySelector("input")!==this?o.checked=!1:o.checked=!0})})}connectedCallback(){this.init()}attributeChangedCallback(e,t,o){}}y=new WeakMap,f=new WeakMap;const be=`
|
|
947
|
+
.ea-radio-group {
|
|
948
|
+
display: flex;
|
|
949
|
+
}
|
|
950
|
+
.ea-radio-group ea-radio {
|
|
951
|
+
margin-right: 2rem;
|
|
952
|
+
}`;class ge extends m{constructor(){super();const i=this.attachShadow({mode:"open"}),e=document.createElement("div");i.appendChild(e);const t=document.createElement("slot");e.className="ea-radio-group",e.appendChild(t),this.dom=e,this.build(i,be),i.appendChild(e)}get name(){return this.getAttribute("name")}set name(i){this.querySelectorAll("ea-radio").forEach(e=>{e.setAttribute("name",i)})}init(){this.name=this.name}connectedCallback(){this.init()}}const me=`:host {
|
|
953
|
+
--margin-right: 1rem;
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.ea-checkbox_wrap {
|
|
957
|
+
display: flex;
|
|
958
|
+
align-items: center;
|
|
959
|
+
margin-right: var(--margin-right);
|
|
960
|
+
}
|
|
961
|
+
.ea-checkbox_wrap .__ea-checkbox-input_wrap {
|
|
962
|
+
margin-right: 0.5rem;
|
|
963
|
+
}
|
|
964
|
+
.ea-checkbox_wrap .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
|
|
965
|
+
box-sizing: border-box;
|
|
966
|
+
position: relative;
|
|
967
|
+
display: block;
|
|
968
|
+
width: 0.8125rem;
|
|
969
|
+
height: 0.8125rem;
|
|
970
|
+
line-height: 0.8125;
|
|
971
|
+
border-radius: 3px;
|
|
972
|
+
border: 1px solid #ccc;
|
|
973
|
+
transition: background-color 0.2s, border-color 0.2s;
|
|
974
|
+
}
|
|
975
|
+
.ea-checkbox_wrap .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
|
|
976
|
+
content: "";
|
|
977
|
+
position: absolute;
|
|
978
|
+
left: 52.5%;
|
|
979
|
+
top: 45%;
|
|
980
|
+
transform: translate(-50%, -50%) rotate(-135deg);
|
|
981
|
+
display: block;
|
|
982
|
+
width: 3px;
|
|
983
|
+
height: 7px;
|
|
984
|
+
opacity: 0;
|
|
985
|
+
transition: opacity 0.2s;
|
|
986
|
+
}
|
|
987
|
+
.ea-checkbox_wrap .__ea-checkbox-input_wrap .__ea-checkbox-input_input {
|
|
988
|
+
display: none;
|
|
989
|
+
}
|
|
990
|
+
.ea-checkbox_wrap .__ea-checkbox-label_desc {
|
|
991
|
+
transition: color 0.2s;
|
|
992
|
+
}
|
|
993
|
+
.ea-checkbox_wrap.checked .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
|
|
994
|
+
border-color: #409eff;
|
|
995
|
+
background-color: #409eff;
|
|
996
|
+
}
|
|
997
|
+
.ea-checkbox_wrap.checked .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
|
|
998
|
+
opacity: 1;
|
|
999
|
+
border-left: 2px solid white;
|
|
1000
|
+
border-top: 2px solid white;
|
|
1001
|
+
}
|
|
1002
|
+
.ea-checkbox_wrap.checked .__ea-checkbox-label_desc {
|
|
1003
|
+
color: #409eff;
|
|
1004
|
+
}
|
|
1005
|
+
.ea-checkbox_wrap.disabled .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
|
|
1006
|
+
border-color: #eeeeee;
|
|
1007
|
+
background-color: #eeeeee;
|
|
1008
|
+
}
|
|
1009
|
+
.ea-checkbox_wrap.disabled .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::before {
|
|
1010
|
+
background-color: transparent;
|
|
1011
|
+
}
|
|
1012
|
+
.ea-checkbox_wrap.disabled .__ea-checkbox-label_desc {
|
|
1013
|
+
color: #c0c4cc;
|
|
1014
|
+
}
|
|
1015
|
+
.ea-checkbox_wrap.disabled[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::before {
|
|
1016
|
+
background-color: #c0c4cc;
|
|
1017
|
+
}
|
|
1018
|
+
.ea-checkbox_wrap.indeterminate .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
|
|
1019
|
+
border-color: #409eff;
|
|
1020
|
+
background-color: #409eff;
|
|
1021
|
+
}
|
|
1022
|
+
.ea-checkbox_wrap.indeterminate .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
|
|
1023
|
+
opacity: 1;
|
|
1024
|
+
left: 50%;
|
|
1025
|
+
top: 50%;
|
|
1026
|
+
width: 80%;
|
|
1027
|
+
height: 3px;
|
|
1028
|
+
background-color: white;
|
|
1029
|
+
transform: translate(-50%, -50%) rotate(0deg);
|
|
1030
|
+
}
|
|
1031
|
+
.ea-checkbox_wrap.indeterminate .__ea-checkbox-label_desc {
|
|
1032
|
+
color: #409eff;
|
|
1033
|
+
}
|
|
1034
|
+
.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner {
|
|
1035
|
+
border-color: #409eff;
|
|
1036
|
+
background-color: #409eff;
|
|
1037
|
+
}
|
|
1038
|
+
.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-input_wrap .__ea-checkbox-input_inner::after {
|
|
1039
|
+
width: 3px;
|
|
1040
|
+
height: 7px;
|
|
1041
|
+
left: 52.5%;
|
|
1042
|
+
top: 45%;
|
|
1043
|
+
transform: translate(-50%, -50%) rotate(-135deg);
|
|
1044
|
+
opacity: 1;
|
|
1045
|
+
border-left: 2px solid white;
|
|
1046
|
+
border-top: 2px solid white;
|
|
1047
|
+
background-color: transparent;
|
|
1048
|
+
}
|
|
1049
|
+
.ea-checkbox_wrap.indeterminate[checked=true] .__ea-checkbox-label_desc {
|
|
1050
|
+
color: #409eff;
|
|
1051
|
+
}`,_e=()=>{const s=document.createElement("span");s.className="__ea-checkbox-input_wrap";const i=document.createElement("span");i.className="__ea-checkbox-input_inner",s.appendChild(i);const e=document.createElement("input");return e.type="checkbox",e.className="__ea-checkbox-input_input",s.appendChild(e),{wrap:s,input:e}},fe=()=>{const s=document.createElement("span");s.className="__ea-checkbox-label_desc";const i=document.createElement("slot");return s.appendChild(i),s};var A,p;class we extends m{constructor(){super();c(this,A,void 0);c(this,p,void 0);const e=this.attachShadow({mode:"open"});let t=document.createElement("label");t.className="ea-checkbox_wrap";const o=_e();t.appendChild(o.wrap);const a=fe();t.appendChild(a),n(this,p,t),n(this,A,o.input),this.build(e,me),e.appendChild(t)}static get observedAttributes(){return["checked","disabled"]}get checked(){return this.getAttrBoolean("checked")}set checked(e){r(this,A).checked=e,e?(this.setAttribute("checked",!0),r(this,p).setAttribute("checked",!0),r(this,p).classList.add("checked")):(this.removeAttribute("checked"),r(this,p).removeAttribute("checked"),r(this,p).classList.remove("checked"),r(this,p).classList.remove("indeterminate"))}get name(){return this.getAttribute("name")}set name(e){r(this,A).setAttribute("name",e)}get value(){return this.getAttribute("value")}set value(e){r(this,p).setAttribute("for",e),r(this,A).setAttribute("id",e),r(this,A).setAttribute("value",e)}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){r(this,A).disabled=e,r(this,p).toggleAttribute("disabled",e),r(this,p).classList.toggle("disabled",e)}get border(){return this.getAttrBoolean("border")}set border(e){r(this,p).classList.toggle("border",e)}get indeterminate(){return this.getAttrBoolean("indeterminate")}set indeterminate(e){e?(this.checked=!1,r(this,p).classList.remove("checked"),this.setAttribute("indeterminate",!0),r(this,p).classList.add("indeterminate"),console.log(e)):(this.removeAttribute("indeterminate"),r(this,p).classList.remove("indeterminate"))}init(){const e=this;this.checked=this.checked,this.name=this.name,this.value=this.value,this.disabled=this.disabled,this.border=this.border,this.indeterminate=this.indeterminate,r(this,A).addEventListener("change",function(t){t.preventDefault(),e.checked=t.target.checked,t.target.checked})}connectedCallback(){this.init()}attributeChangedCallback(e,t,o){}}A=new WeakMap,p=new WeakMap;const xe=`
|
|
1052
|
+
.ea-checkbox-group {
|
|
1053
|
+
display: flex;
|
|
1054
|
+
}
|
|
1055
|
+
.ea-checkbox-group ::slotted(ea-checkbox) {
|
|
1056
|
+
margin-right: 1.5rem;
|
|
1057
|
+
}`;class ke extends m{constructor(){super();const i=this.attachShadow({mode:"open"}),e=document.createElement("div");i.appendChild(e);const t=document.createElement("slot");e.className="ea-checkbox-group",e.appendChild(t),this.dom=e,this.build(i,xe),i.appendChild(e)}get name(){return this.getAttribute("name")}set name(i){this.querySelectorAll("ea-checkbox").forEach(e=>{e.setAttribute("name",i),e.name=i})}get value(){if(this.getAttribute("value"))return this.getAttribute("value")}set value(i){if(i)try{i.split(",").map(t=>t.trimStart()).map(t=>{const o=document.querySelector(`ea-checkbox[name="${this.name}"][value="${t}"]`);o.setAttribute("checked","true"),o.checked="true"})}catch{}}get disabled(){return this.getAttrBoolean("disabled")}set disabled(i){document.querySelectorAll(`ea-checkbox[name="${this.name}"]`).forEach(t=>{t.setAttribute("disabled","true"),t.disabled="true"})}init(){this.name=this.name,this.value=this.value,this.disabled=this.disabled}connectedCallback(){this.init()}}const ve="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let X=(s=21)=>{let i="",e=crypto.getRandomValues(new Uint8Array(s));for(;s--;)i+=ve[e[s]&63];return i};const ye=`
|
|
1058
|
+
@charset "UTF-8";
|
|
1059
|
+
@import url('/icon/index.css');
|
|
1060
|
+
|
|
1061
|
+
|
|
1062
|
+
:host {
|
|
1063
|
+
--border-top-left-radius: 0;
|
|
1064
|
+
--border-top-right-radius: 0;
|
|
1065
|
+
--border-bottom-left-radius: 0;
|
|
1066
|
+
--border-bottom-right-radius: 0;
|
|
1067
|
+
--border-left-width: 0;
|
|
1068
|
+
--border-right-width: 0;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.ea-input_wrap {
|
|
1072
|
+
position: relative;
|
|
1073
|
+
width: 100%;
|
|
1074
|
+
/* ------- 特定的属性的图标(clearable, password) ------- */
|
|
1075
|
+
/* #region */
|
|
1076
|
+
/* #endregion */
|
|
1077
|
+
/* ------- end ------- */
|
|
1078
|
+
/* ------- 标识图标在输入框前还是后 ------- */
|
|
1079
|
+
/* #region */
|
|
1080
|
+
/* #endregion */
|
|
1081
|
+
/* ------- end ------- */
|
|
1082
|
+
/* ------- 输入框前后的dom ------- */
|
|
1083
|
+
/* #region */
|
|
1084
|
+
/* #endregion */
|
|
1085
|
+
/* ------- end ------- */
|
|
1086
|
+
}
|
|
1087
|
+
.ea-input_wrap .ea-input_inner {
|
|
1088
|
+
box-sizing: border-box;
|
|
1089
|
+
box-shadow: none;
|
|
1090
|
+
border: 1px solid #dcdfe6;
|
|
1091
|
+
outline: 0;
|
|
1092
|
+
transition: border 0.2s;
|
|
1093
|
+
border-radius: 3px;
|
|
1094
|
+
padding: 0.5rem;
|
|
1095
|
+
width: 100%;
|
|
1096
|
+
line-height: 0.8;
|
|
1097
|
+
font-size: 0.8rem;
|
|
1098
|
+
scrollbar-width: none;
|
|
1099
|
+
}
|
|
1100
|
+
.ea-input_wrap .ea-input_inner:focus {
|
|
1101
|
+
border-color: #409eff;
|
|
1102
|
+
}
|
|
1103
|
+
.ea-input_wrap .ea-input_inner::placeholder {
|
|
1104
|
+
color: #c0c4cc;
|
|
1105
|
+
}
|
|
1106
|
+
.ea-input_wrap .ea-input_inner.invalid {
|
|
1107
|
+
border-color: #f56c6c;
|
|
1108
|
+
}
|
|
1109
|
+
.ea-input_wrap .ea-input_inner.disabled {
|
|
1110
|
+
background-color: #eeeeee;
|
|
1111
|
+
color: #c0c4cc;
|
|
1112
|
+
}
|
|
1113
|
+
.ea-input_wrap .ea-input_inner.ea-input_clear ::before {
|
|
1114
|
+
content: "e9c3";
|
|
1115
|
+
display: block;
|
|
1116
|
+
}
|
|
1117
|
+
.ea-input_wrap i {
|
|
1118
|
+
font-size: 0.9rem;
|
|
1119
|
+
line-height: 0.8;
|
|
1120
|
+
}
|
|
1121
|
+
.ea-input_wrap i[class=icon-cancel-circled2],
|
|
1122
|
+
.ea-input_wrap i[class=icon-eye],
|
|
1123
|
+
.ea-input_wrap i[class=icon-eye-off] {
|
|
1124
|
+
position: absolute;
|
|
1125
|
+
left: calc(100% - 1.75rem);
|
|
1126
|
+
top: 50%;
|
|
1127
|
+
color: #c0c4cc;
|
|
1128
|
+
transform: translate(calc(-100% - 0.25rem), -50%);
|
|
1129
|
+
}
|
|
1130
|
+
.ea-input_wrap.clearable .ea-input_inner, .ea-input_wrap.password .ea-input_inner {
|
|
1131
|
+
width: calc(100% - 1.75rem);
|
|
1132
|
+
padding-right: 1.75rem;
|
|
1133
|
+
}
|
|
1134
|
+
.ea-input_wrap.prefix i, .ea-input_wrap.suffix i {
|
|
1135
|
+
position: absolute;
|
|
1136
|
+
top: 50%;
|
|
1137
|
+
color: #c0c4cc;
|
|
1138
|
+
}
|
|
1139
|
+
.ea-input_wrap.prefix .ea-input_inner, .ea-input_wrap.suffix .ea-input_inner {
|
|
1140
|
+
width: calc(100% - 1.75rem);
|
|
1141
|
+
}
|
|
1142
|
+
.ea-input_wrap.prefix i {
|
|
1143
|
+
left: 2.5%;
|
|
1144
|
+
transform: translate(-2.5%, -50%);
|
|
1145
|
+
}
|
|
1146
|
+
.ea-input_wrap.prefix .ea-input_inner {
|
|
1147
|
+
padding-left: 1.75rem;
|
|
1148
|
+
}
|
|
1149
|
+
.ea-input_wrap.suffix i {
|
|
1150
|
+
left: calc(100% - 1.75rem);
|
|
1151
|
+
transform: translate(calc(-100% - 0.25rem), -50%);
|
|
1152
|
+
}
|
|
1153
|
+
.ea-input_wrap.suffix .ea-input_inner {
|
|
1154
|
+
padding-right: 1.75rem;
|
|
1155
|
+
}
|
|
1156
|
+
.ea-input_wrap.prepend-slot, .ea-input_wrap.append-slot {
|
|
1157
|
+
display: flex;
|
|
1158
|
+
align-items: center;
|
|
1159
|
+
font-size: 0.925rem;
|
|
1160
|
+
line-height: 1;
|
|
1161
|
+
}
|
|
1162
|
+
.ea-input_wrap.prepend-slot ::slotted(div), .ea-input_wrap.append-slot ::slotted(div) {
|
|
1163
|
+
border: 1px solid #dcdfe6;
|
|
1164
|
+
border-left-width: var(--border-left-width);
|
|
1165
|
+
border-right-width: var(--border-right-width);
|
|
1166
|
+
border-top-right-radius: var(--border-top-right-radius);
|
|
1167
|
+
border-bottom-right-radius: var(--border-bottom-right-radius);
|
|
1168
|
+
border-top-left-radius: var(--border-top-left-radius);
|
|
1169
|
+
border-bottom-left-radius: var(--border-bottom-left-radius);
|
|
1170
|
+
}
|
|
1171
|
+
.ea-input_wrap.prepend-slot .ea-input_inner {
|
|
1172
|
+
border-top-left-radius: 0;
|
|
1173
|
+
border-bottom-left-radius: 0;
|
|
1174
|
+
}
|
|
1175
|
+
.ea-input_wrap.append-slot .ea-input_inner {
|
|
1176
|
+
border-top-right-radius: 0;
|
|
1177
|
+
border-bottom-right-radius: 0;
|
|
1178
|
+
}
|
|
1179
|
+
.ea-input_wrap .ea-input_suggestion-wrap {
|
|
1180
|
+
list-style-type: none;
|
|
1181
|
+
padding: 0;
|
|
1182
|
+
margin: 0;
|
|
1183
|
+
margin-block-start: 0;
|
|
1184
|
+
margin-block-end: 0;
|
|
1185
|
+
padding-inline-start: 0;
|
|
1186
|
+
unicode-bidi: unset;
|
|
1187
|
+
display: none;
|
|
1188
|
+
position: absolute;
|
|
1189
|
+
box-sizing: border-box;
|
|
1190
|
+
z-index: 3;
|
|
1191
|
+
top: calc(100% + 5px);
|
|
1192
|
+
left: 0;
|
|
1193
|
+
padding: 0.5rem 0;
|
|
1194
|
+
width: 100%;
|
|
1195
|
+
max-height: 10rem;
|
|
1196
|
+
overflow-y: auto;
|
|
1197
|
+
scrollbar-width: thin;
|
|
1198
|
+
background-color: white;
|
|
1199
|
+
box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
|
|
1200
|
+
}
|
|
1201
|
+
.ea-input_wrap .ea-input_suggestion-wrap li {
|
|
1202
|
+
padding: 0.5rem;
|
|
1203
|
+
font-size: 0.9rem;
|
|
1204
|
+
cursor: pointer;
|
|
1205
|
+
}
|
|
1206
|
+
.ea-input_wrap .ea-input_suggestion-wrap li:hover {
|
|
1207
|
+
background-color: #f5f7fa;
|
|
1208
|
+
}
|
|
1209
|
+
.ea-input_wrap .ea-input_suggestion-wrap.loading {
|
|
1210
|
+
height: 5rem;
|
|
1211
|
+
display: flex;
|
|
1212
|
+
align-items: center;
|
|
1213
|
+
justify-content: center;
|
|
1214
|
+
}
|
|
1215
|
+
.ea-input_wrap .ea-input_suggestion-wrap.loading::after {
|
|
1216
|
+
font-family: "fontello";
|
|
1217
|
+
font-style: normal;
|
|
1218
|
+
font-weight: normal;
|
|
1219
|
+
speak: never;
|
|
1220
|
+
display: inline-block;
|
|
1221
|
+
text-decoration: inherit;
|
|
1222
|
+
width: 1em;
|
|
1223
|
+
margin-right: 0.2em;
|
|
1224
|
+
text-align: center;
|
|
1225
|
+
font-variant: normal;
|
|
1226
|
+
text-transform: none;
|
|
1227
|
+
line-height: 1em;
|
|
1228
|
+
margin-left: 0.2em;
|
|
1229
|
+
-webkit-font-smoothing: antialiased;
|
|
1230
|
+
-moz-osx-font-smoothing: grayscale;
|
|
1231
|
+
content: "e839";
|
|
1232
|
+
font-size: 1.5rem;
|
|
1233
|
+
animation: spin 1s linear infinite;
|
|
1234
|
+
animation-play-state: running;
|
|
1235
|
+
}
|
|
1236
|
+
.ea-input_wrap.word-limit {
|
|
1237
|
+
border: 1px solid #dcdfe6;
|
|
1238
|
+
border-radius: 3px;
|
|
1239
|
+
}
|
|
1240
|
+
.ea-input_wrap.word-limit .ea-input_inner {
|
|
1241
|
+
border: 0;
|
|
1242
|
+
width: calc(100% - 3rem);
|
|
1243
|
+
}
|
|
1244
|
+
.ea-input_wrap.word-limit .ea-input_word-limit {
|
|
1245
|
+
padding-right: 0.5rem;
|
|
1246
|
+
width: 2.5rem;
|
|
1247
|
+
font-size: 0.75rem;
|
|
1248
|
+
text-align: center;
|
|
1249
|
+
}
|
|
1250
|
+
`,Ae=s=>{const i=document.createElement("input");return i.className="ea-input_inner",i.type=s||"text",i.autocomplete="off",i},Ee=()=>{const s=document.createElement("ul");return s.className="ea-input_suggestion-wrap",s},ee=s=>{const i=document.createElement("slot");return i.name=s,i};var E,l,S,P,T,M,L,Z,V;class Le extends m{constructor(){super();c(this,E,void 0);c(this,l,void 0);c(this,S,void 0);c(this,P,void 0);c(this,T,!1);c(this,M,[]);c(this,L,void 0);c(this,Z,void 0);c(this,V,void 0);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-input_wrap";const o=Ae(this.type),a=ee("prepend"),d=ee("append"),_=this.querySelector("[slot=prepend]"),D=this.querySelector("[slot=append]");_&&(t.classList.add("prepend-slot"),_.style.setProperty("--border-top-left-radius","3px"),_.style.setProperty("--border-bottom-left-radius","3px"),_.style.setProperty("--border-right-width","0"),_.style.setProperty("--border-left-width","1px"),a.appendChild(_.cloneNode(!0))),D&&(t.classList.add("append-slot"),D.style.setProperty("--border-top-right-radius","3px"),D.style.setProperty("--border-bottom-right-radius","3px"),D.style.setProperty("--border-left-width","0"),D.style.setProperty("--border-right-width","1px"),d.appendChild(D.cloneNode(!0))),t.appendChild(o),t.insertBefore(a,o),t.appendChild(d),n(this,E,t),n(this,l,o),n(this,Z,a),n(this,V,d),(this.suggestion.length>0||this.remote)&&this.suggestionEvent(),this.build(e,ye),this.shadowRoot.appendChild(t)}get type(){return this.getAttribute("type")||"text"}set type(e){this.setAttribute("type",e)}get value(){return r(this,T)||(r(this,l).value=this.getAttribute("value")||""),this.getAttribute("value")}set value(e){e&&(this.setAttribute("value",e),r(this,l).value=e)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),r(this,l).placeholder=e}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.toggleAttr("disabled",e),r(this,l).disabled=e,r(this,l).classList.toggle("disabled",e)}get clearable(){return this.getAttrBoolean("clearable")}set clearable(e){e&&this.setAttribute("clearable",e)}clearableEvent(e){this.clearable&&(this.clearable&&e.target.value!==""?r(this,S).style.display="block":r(this,S).style.display="none")}initClearableIcon(){if(this.clearable){const e=this.iconInit("icon-cancel-circled2");e.addEventListener("click",()=>{this.value="",r(this,l).focus()}),n(this,S,e),this.value?r(this,S).style.display="block":r(this,S).style.display="none",this.iconAppend("clearable",this.clearable,e)}}get showPassword(){return this.getAttrBoolean("show-password")}set showPassword(e){e&&(this.setAttribute("show-password",e),e&&(r(this,l).type="password"))}showPasswordEvent(e){this.showPassword&&(this.showPassword&&e.target.value!==""?r(this,P).style.display="block":r(this,P).style.display="none")}initShowPasswordIcon(){if(this.showPassword){const e=this.iconInit("icon-eye");this.value||(e.style.display="none"),e.addEventListener("click",t=>{r(this,P).className=r(this,l).type==="password"?"icon-eye-off":"icon-eye",r(this,l).type=r(this,l).type==="password"?"text":"password",r(this,l).focus()}),n(this,P,e),this.iconAppend("password",this.showPassword,e)}}get prefixIcon(){return this.getAttribute("prefix-icon")||""}set prefixIcon(e){if(!e)return;this.setAttribute("prefix",e);const t=this.iconInit(e);this.iconAppend("prefix",!0,t)}get surfixIcon(){return this.getAttribute("suffix-icon")||""}set surfixIcon(e){if(!e)return;this.setAttribute("suffix",e);const t=this.iconInit(e);this.iconAppend("suffix",!0,t)}get suggestion(){return r(this,M)}set suggestion(e){e&&(n(this,M,e),this.setAttribute("primary-key",X()),this.primaryKey=X())}get triggerOnFocus(){return this.getAttrBoolean("trigger-on-focus")}set triggerOnFocus(e){e&&this.setAttribute("trigger-on-focus",e)}get triggerAfterInput(){return this.getAttrBoolean("trigger-after-input")}set triggerAfterInput(e){e&&this.setAttribute("trigger-after-input",e)}get remote(){return this.getAttrBoolean("remote")}set remote(e){if(e!=null)try{const t=r(this,L).style.display;t=="flex"?r(this,L).style.display="block":t==""&&(r(this,L).style.display="none"),r(this,L).classList.toggle("loading",e),this.setAttribute("remote",e),r(this,T)&&this.refresh()}catch{}}refresh(){try{r(this,L).innerHTML="",this.suggestionEvent()}catch{}}suggestionEvent(){const e=r(this,T)?r(this,L):Ee();this.suggestion.forEach(t=>{const o=document.createElement("li");o.innerText=t.value,o.addEventListener("click",()=>{this.value=t.value,e.style.display="none"}),e.appendChild(o)}),document.addEventListener("click",t=>{t.target!==this&&(e.style.display="none")}),r(this,l).addEventListener("input",t=>{this.shadowRoot.querySelectorAll("li").forEach(o=>{o.innerText.includes(t.target.value)?o.style.display="block":o.style.display="none"})}),this.triggerOnFocus?r(this,l).addEventListener("focus",t=>{e.style.display=this.remote?"flex":"block"}):this.triggerAfterInput&&r(this,l).addEventListener("input",t=>{t.target.value.length>0?e.style.display="block":e.style.display="none"}),r(this,T)||(n(this,L,e),r(this,E).appendChild(e))}get maxLength(){return this.getAttribute("max-length")}set maxLength(e){!e||r(this,l).type!=="text"||(this.setAttribute("max-length",e),r(this,l).maxLength=e,r(this,l).addEventListener("input",t=>{t.target.value.length>e&&(t.target.value=t.target.value.slice(0,e))}),this.showWordLimit&&(this.showWordLimit=!0))}get minLength(){return this.getAttribute("min-length")}set minLength(e){!e||r(this,l).type!=="text"||(this.setAttribute("min-length",e),r(this,l).minLength=e,r(this,l).addEventListener("input",t=>{t.target.value.length<e?t.target.classList.add("invalid"):t.target.classList.remove("invalid")}))}get showWordLimit(){return this.getAttrBoolean("show-word-limit")}set showWordLimit(e){if(!e||r(this,l).type!=="text")return;this.setAttribute("show-word-limit",e);const t=document.createElement("span");r(this,E).classList.toggle("word-limit",e),r(this,E).classList.toggle("append-slot",e),t.className="ea-input_word-limit",t.innerText=`${r(this,l).value.length}/${this.maxLength}`,r(this,l).addEventListener("input",o=>{t.innerText=`${o.target.value.length}/${this.maxLength}`}),r(this,V).appendChild(t),r(this,E).appendChild(t)}iconInit(e){const t=document.createElement("i");return t.className=e,t}iconAppend(e,t,o){r(this,E).classList.toggle(e,t),r(this,E).appendChild(o)}eventInit(e,t){this.dispatchEvent(new CustomEvent(t,{detail:{value:e.target.value}})),this.clearableEvent(e),this.showPasswordEvent(e)}init(){this.type=this.type,this.placeholder=this.placeholder,this.value=this.value,this.disabled=this.disabled,this.clearable=this.clearable,this.initClearableIcon(),this.showPassword=this.showPassword,this.initShowPasswordIcon(),this.prefixIcon=this.prefixIcon,this.surfixIcon=this.surfixIcon,this.suggestion=this.suggestion,this.remote&&(this.remote=this.remote),this.maxLength=this.maxLength,this.minLength=this.minLength,r(this,l).addEventListener("input",e=>{this.eventInit(e,"change")}),r(this,l).addEventListener("focus",e=>{this.eventInit(e,"focus")}),r(this,l).addEventListener("blur",e=>{this.eventInit(e,"blur")})}connectedCallback(){this.init(),n(this,T,!0)}}E=new WeakMap,l=new WeakMap,S=new WeakMap,P=new WeakMap,T=new WeakMap,M=new WeakMap,L=new WeakMap,Z=new WeakMap,V=new WeakMap;const Ce=`
|
|
1251
|
+
@charset "UTF-8";
|
|
1252
|
+
@import url('/icon/index.css');
|
|
1253
|
+
|
|
1254
|
+
.ea-textarea_wrap {
|
|
1255
|
+
position: relative;
|
|
1256
|
+
width: 100%;
|
|
1257
|
+
}
|
|
1258
|
+
.ea-textarea_wrap .ea-textarea_inner {
|
|
1259
|
+
box-sizing: border-box;
|
|
1260
|
+
box-shadow: none;
|
|
1261
|
+
resize: vertical;
|
|
1262
|
+
min-height: 1.75rem;
|
|
1263
|
+
border: 1px solid #dcdfe6;
|
|
1264
|
+
outline: 0;
|
|
1265
|
+
transition: border 0.2s;
|
|
1266
|
+
border-radius: 3px;
|
|
1267
|
+
padding: 0.5rem;
|
|
1268
|
+
line-height: 0.8;
|
|
1269
|
+
font-size: 0.8rem;
|
|
1270
|
+
scrollbar-width: none;
|
|
1271
|
+
}
|
|
1272
|
+
.ea-textarea_wrap .ea-textarea_inner:focus {
|
|
1273
|
+
border-color: #409eff;
|
|
1274
|
+
}
|
|
1275
|
+
.ea-textarea_wrap .ea-textarea_inner::placeholder {
|
|
1276
|
+
color: #c0c4cc;
|
|
1277
|
+
}
|
|
1278
|
+
.ea-textarea_wrap .ea-textarea_inner.disabled {
|
|
1279
|
+
background-color: #eeeeee;
|
|
1280
|
+
color: #c0c4cc;
|
|
1281
|
+
}
|
|
1282
|
+
.ea-textarea_wrap .ea-textarea_inner.invalid {
|
|
1283
|
+
border-color: #f56c6c;
|
|
1284
|
+
}
|
|
1285
|
+
.ea-textarea_wrap .ea-input_word-limit {
|
|
1286
|
+
position: absolute;
|
|
1287
|
+
font-size: 0.75rem;
|
|
1288
|
+
bottom: 0.5rem;
|
|
1289
|
+
right: 0.5rem;
|
|
1290
|
+
}
|
|
1291
|
+
`,ze=()=>{let s=document.createElement("textarea");return s.className="ea-textarea_inner",s};var I,u,U;class Ne extends m{constructor(){super();c(this,I,void 0);c(this,u,void 0);c(this,U,!1);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-textarea_wrap",n(this,I,t);const o=ze();n(this,u,o),r(this,I).appendChild(o),this.build(e,Ce),this.shadowRoot.appendChild(t)}get value(){return r(this,U)||(r(this,u).value=this.getAttribute("value")||""),this.getAttribute("value")}set value(e){e&&(this.setAttribute("value",e),r(this,u).value=e)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){this.setAttribute("placeholder",e),r(this,u).placeholder=e}get rows(){return this.getAttribute("rows")||2}set rows(e){e&&(this.setAttribute("rows",e),r(this,u).rows=e,r(this,u).setAttribute("rows",e))}get autosize(){return this.getAttrBoolean("autosize")}set autosize(e){e&&(this.setAttribute("autosize",e),r(this,u).addEventListener("input",t=>{if(t.target.type==="textarea"){const o=r(this,u).cols,a=t.target.value.length;let d=Math.ceil(a/o)<=Number(r(this,u).rows)?Number(r(this,u).rows):Math.ceil(a/o);a%o==1&&(this.minRows>d?this.setTextareaHeight(this.minRows):this.maxRows<d?this.setTextareaHeight(this.maxRows):this.setTextareaHeight(d))}}))}setTextareaHeight(e){e=Number(e),r(this,u).rows=e}get minRows(){const e=Number(this.getAttribute("min-rows"));return e!==0&&e>0?e:1}set minRows(e){e&&(this.setAttribute("min-rows",e),this.setTextareaHeight(Number(e)))}get maxRows(){const e=Number(this.getAttribute("max-rows"));return e!==0&&e>0?e:10}set maxRows(e){e&&(this.setAttribute("max-rows",e),this.setTextareaHeight(Number(e)))}get maxLength(){return this.getAttribute("max-length")}set maxLength(e){e&&(this.setAttribute("max-length",e),r(this,u).maxLength=e,r(this,u).addEventListener("input",t=>{t.target.value.length>e&&(t.target.value=t.target.value.slice(0,e))}),this.showWordLimit&&(this.showWordLimit=!0))}get minLength(){return this.getAttribute("min-length")}set minLength(e){e&&(this.setAttribute("min-length",e),r(this,u).minLength=e,r(this,u).addEventListener("input",t=>{t.target.value.length<e?t.target.classList.add("invalid"):t.target.classList.remove("invalid")}))}get showWordLimit(){return this.getAttrBoolean("show-word-limit")}set showWordLimit(e){if(!e)return;this.setAttribute("show-word-limit",e);const t=document.createElement("span");r(this,I).classList.toggle("word-limit",e),r(this,I).classList.toggle("append-slot",e),t.className="ea-input_word-limit",t.innerText=`${r(this,u).value.length}/${this.maxLength}`,r(this,u).addEventListener("input",o=>{t.innerText=`${o.target.value.length}/${this.maxLength}`}),r(this,I).appendChild(t)}init(){this.placeholder=this.placeholder,this.value=this.value,this.disabled=this.disabled,this.autosize=this.autosize,this.maxRows&&(this.maxRows=this.maxRows),this.minRows&&(this.minRows=this.minRows),this.rows=this.rows,this.maxLength=this.maxLength,this.minLength=this.minLength,r(this,u).addEventListener("input",e=>{this.dispatchEvent(new CustomEvent("change",{detail:{value:e.target.value}}))}),r(this,u).addEventListener("focus",e=>{this.dispatchEvent(new CustomEvent("focus",{detail:{value:e.target.value}}))}),r(this,u).addEventListener("blur",e=>{this.dispatchEvent(new CustomEvent("blur",{detail:{value:e.target.value}}))})}connectedCallback(){this.init(),n(this,U,!0)}}I=new WeakMap,u=new WeakMap,U=new WeakMap;const Se=`
|
|
1292
|
+
@import url('/icon/index.css');
|
|
1293
|
+
|
|
1294
|
+
.ea-input-number_wrap {
|
|
1295
|
+
display: flex;
|
|
1296
|
+
align-items: center;
|
|
1297
|
+
border: 1px solid transparent;
|
|
1298
|
+
border-radius: 3px;
|
|
1299
|
+
transition: border 0.2s;
|
|
1300
|
+
}
|
|
1301
|
+
.ea-input-number_wrap .ea-input-number_sign {
|
|
1302
|
+
display: flex;
|
|
1303
|
+
align-items: center;
|
|
1304
|
+
justify-content: center;
|
|
1305
|
+
box-sizing: border-box;
|
|
1306
|
+
border: 1px solid #dcdfe6;
|
|
1307
|
+
background-color: #f5f7fa;
|
|
1308
|
+
height: 2rem;
|
|
1309
|
+
width: 2rem;
|
|
1310
|
+
cursor: pointer;
|
|
1311
|
+
font-size: 1rem;
|
|
1312
|
+
line-height: 1;
|
|
1313
|
+
user-select: none;
|
|
1314
|
+
}
|
|
1315
|
+
.ea-input-number_wrap .ea-input-number_sign:first-child {
|
|
1316
|
+
border-top-left-radius: 3px;
|
|
1317
|
+
border-bottom-left-radius: 3px;
|
|
1318
|
+
border-right: 0;
|
|
1319
|
+
}
|
|
1320
|
+
.ea-input-number_wrap .ea-input-number_sign:last-child {
|
|
1321
|
+
border-top-right-radius: 3px;
|
|
1322
|
+
border-bottom-right-radius: 3px;
|
|
1323
|
+
border-left: 0;
|
|
1324
|
+
}
|
|
1325
|
+
.ea-input-number_wrap .ea-input-number_sign:hover {
|
|
1326
|
+
color: #409eff;
|
|
1327
|
+
}
|
|
1328
|
+
.ea-input-number_wrap .ea-input-number_sign.disabled {
|
|
1329
|
+
pointer-events: none;
|
|
1330
|
+
cursor: not-allowed;
|
|
1331
|
+
color: #c0c4cc;
|
|
1332
|
+
}
|
|
1333
|
+
.ea-input-number_wrap .ea-input-number_sign.ea-input-number_sign--medium {
|
|
1334
|
+
height: 1.75rem;
|
|
1335
|
+
width: 1.75rem;
|
|
1336
|
+
}
|
|
1337
|
+
.ea-input-number_wrap .ea-input-number_sign.ea-input-number_sign--small {
|
|
1338
|
+
height: 1.5rem;
|
|
1339
|
+
width: 1.5rem;
|
|
1340
|
+
}
|
|
1341
|
+
.ea-input-number_wrap .ea-input-number_sign.ea-input-number_sign--mini {
|
|
1342
|
+
height: 1.25rem;
|
|
1343
|
+
width: 1.25rem;
|
|
1344
|
+
}
|
|
1345
|
+
.ea-input-number_wrap .ea-input-number_inner {
|
|
1346
|
+
box-sizing: border-box;
|
|
1347
|
+
box-shadow: none;
|
|
1348
|
+
border: 1px solid #dcdfe6;
|
|
1349
|
+
outline: 0;
|
|
1350
|
+
transition: border 0.2s;
|
|
1351
|
+
border-radius: 3px;
|
|
1352
|
+
padding: 0.5rem;
|
|
1353
|
+
line-height: 0.8;
|
|
1354
|
+
font-size: 0.8rem;
|
|
1355
|
+
scrollbar-width: none;
|
|
1356
|
+
width: 5rem;
|
|
1357
|
+
height: 2rem;
|
|
1358
|
+
border-radius: 0;
|
|
1359
|
+
text-align: center;
|
|
1360
|
+
}
|
|
1361
|
+
.ea-input-number_wrap .ea-input-number_inner:focus {
|
|
1362
|
+
border-color: #409eff;
|
|
1363
|
+
}
|
|
1364
|
+
.ea-input-number_wrap .ea-input-number_inner::placeholder {
|
|
1365
|
+
color: #c0c4cc;
|
|
1366
|
+
}
|
|
1367
|
+
.ea-input-number_wrap .ea-input-number_inner.invalid {
|
|
1368
|
+
border-color: #f56c6c;
|
|
1369
|
+
}
|
|
1370
|
+
.ea-input-number_wrap .ea-input-number_inner.disabled {
|
|
1371
|
+
background-color: #eeeeee;
|
|
1372
|
+
color: #c0c4cc;
|
|
1373
|
+
}
|
|
1374
|
+
.ea-input-number_wrap .ea-input-number_inner.ea-input_clear ::before {
|
|
1375
|
+
content: "e9c3";
|
|
1376
|
+
display: block;
|
|
1377
|
+
}
|
|
1378
|
+
.ea-input-number_wrap .ea-input-number_inner:focus {
|
|
1379
|
+
border-color: #dcdfe6;
|
|
1380
|
+
}
|
|
1381
|
+
.ea-input-number_wrap .ea-input-number_inner.disabled {
|
|
1382
|
+
pointer-events: none;
|
|
1383
|
+
color: #c0c4cc;
|
|
1384
|
+
cursor: not-allowed;
|
|
1385
|
+
background-color: #f5f7fa;
|
|
1386
|
+
}
|
|
1387
|
+
.ea-input-number_wrap .ea-input-number_inner.ea-input-number_inner--medium {
|
|
1388
|
+
height: 1.75rem;
|
|
1389
|
+
line-height: 1.75rem;
|
|
1390
|
+
}
|
|
1391
|
+
.ea-input-number_wrap .ea-input-number_inner.ea-input-number_inner--small {
|
|
1392
|
+
height: 1.5rem;
|
|
1393
|
+
line-height: 1.5rem;
|
|
1394
|
+
}
|
|
1395
|
+
.ea-input-number_wrap .ea-input-number_inner.ea-input-number_inner--mini {
|
|
1396
|
+
height: 1.25rem;
|
|
1397
|
+
line-height: 1.25rem;
|
|
1398
|
+
}
|
|
1399
|
+
.ea-input-number_wrap.focus {
|
|
1400
|
+
border: 1px solid #409eff;
|
|
1401
|
+
}
|
|
1402
|
+
.ea-input-number_wrap.focus .ea-input-number_sign {
|
|
1403
|
+
border-color: transparent;
|
|
1404
|
+
}
|
|
1405
|
+
`,te=s=>{const i=document.createElement("span");return i.className=`ea-input-number_sign ${s}`,i.innerHTML=s==="minus"?"-":"+",i},Te=()=>{const s=document.createElement("input");return s.className="ea-input-number_inner",s.type="text",s.value=0,s};var O,h,C,z;class Ie extends m{constructor(){super();c(this,O,void 0);c(this,h,void 0);c(this,C,void 0);c(this,z,void 0);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-input-number_wrap";const o=Te(),a=te("minus"),d=te("plus");t.appendChild(a),t.appendChild(o),t.appendChild(d),n(this,O,t),n(this,h,o),n(this,C,a),n(this,z,d),this.build(e,Se),this.shadowRoot.appendChild(t)}signEvent(e,t,o){if(this.getAttrBoolean("disabled"))return;const a=Number(r(this,h).value),d=r(this,h).value.split(".")[1],_=e==="minu"?a-this.step:a+this.step;t?r(this,h).value=_.toFixed(t):d!=null&&d.length?r(this,h).value=_.toFixed(d.length):r(this,h).value=_,o&&r(this,h).dispatchEvent(new CustomEvent(o,{detail:{value:r(this,h).value}})),this.handleLimitVal()}handleCounterEvent(e){let t=setInterval(()=>{this.signEvent(e,this.precision),this.handleLimitVal()},100);this.addEventListener("mouseup",function(){clearInterval(t),t=null})}handleWrapBorder(e){r(this,O).classList.toggle("focus",e)}handleLimitVal(){if(!(this.min===!1&&this.max===!1))if(this.min!==void 0&&r(this,h).value<this.min?r(this,h).value=this.min:this.max!==void 0&&r(this,h).value>this.max&&(r(this,h).value=this.max),r(this,h).value==this.min)r(this,C).classList.add("disabled");else if(r(this,h).value==this.max)r(this,z).classList.add("disabled");else try{r(this,C).classList.remove("disabled"),r(this,z).classList.remove("disabled")}catch{}}get value(){return this.getAttribute("value")||0}set value(e){e=this.precision?Number(e).toFixed(this.precision):Number(e),this.setAttribute("value",e),r(this,h).value=e}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.toggleAttr("disabled",e),r(this,h).disabled=e,r(this,h).classList.toggle("disabled",e),r(this,C).classList.toggle("disabled",e),r(this,z).classList.toggle("disabled",e)}get step(){return Number(this.getAttribute("step"))||1}set step(e){this.setAttribute("step",e)}get stepStrictly(){return this.getAttrBoolean("step-strictly")}set stepStrictly(e){this.toggleAttr("step-strictly",e)}get min(){return this.getAttribute("min")===null?!1:Number(this.getAttribute("min"))||0}set min(e){if(e===!1){this.removeAttribute("min");return}this.setAttribute("min",e)}get max(){return this.getAttribute("max")===null?!1:Number(this.getAttribute("max"))}set max(e){this.setAttribute("max",e)}get precision(){const e=Number(this.getAttribute("precision"));return e<0||!Number.isInteger(e)?(console.warn(`precision must be a positive integer(precisionValue: ${e})`),!1):Number(this.getAttribute("precision"))||0}set precision(e){this.setAttribute("precision",e)}get size(){return this.getAttribute("size")||""}handleSize(e){r(this,C).classList.add(`ea-input-number_sign--${e}`),r(this,z).classList.add(`ea-input-number_sign--${e}`),r(this,h).classList.add(`ea-input-number_inner--${e}`),this.setAttribute("size",e)}set size(e){switch(e){case"medium":this.handleSize("medium");break;case"small":this.handleSize("small");break;case"mini":this.handleSize("mini");break}}init(){const e=this;this.disabled=this.disabled,this.size=this.size,this.min?this.value=this.min:this.value=this.value,this.handleLimitVal(),r(this,h).addEventListener("focus",function(t){e.handleWrapBorder(!0),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value}}))}),r(this,h).addEventListener("blur",function(t){if(e.handleWrapBorder(!1),e.stepStrictly){const o=e.step,a=Number(r(e,h).value),d=a%o;a<0&&d!==0?r(e,h).value=a-d-o:a<0&&d===0||d===0?r(e,h).value=a:r(e,h).value=a-d+o}e.handleLimitVal(),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value}}))}),r(this,C).addEventListener("click",function(){e.signEvent("minu",e.precision,"minus")}),r(this,z).addEventListener("click",function(t){e.signEvent("plus",e.precision,"plus")}),r(this,C).addEventListener("mousedown",function(t){e.handleCounterEvent("minu",e.precision)}),r(this,z).addEventListener("mousedown",function(){e.handleCounterEvent("plus",e.precision)}),r(this,h).addEventListener("change",function(t){e.handleLimitVal(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))})}connectedCallback(){this.init()}}O=new WeakMap,h=new WeakMap,C=new WeakMap,z=new WeakMap;const $e=`
|
|
1406
|
+
@import url('/icon/index.css');
|
|
1407
|
+
`;var J;class Re extends m{constructor(){super();c(this,J,void 0);const e=this.attachShadow({mode:"open"});this.shadowRoot=e;const t=document.createElement("div");t.className="ea-select_wrap",n(this,J,t),this.build(e,$e),this.shadowRoot.appendChild(t)}init(){}connectedCallback(){this.init()}}J=new WeakMap;const Be=`
|
|
1408
|
+
@import url('/icon/index.css');
|
|
1409
|
+
|
|
1410
|
+
.ea-switch_wrap {
|
|
1411
|
+
display: flex;
|
|
1412
|
+
align-items: center;
|
|
1413
|
+
}
|
|
1414
|
+
.ea-switch_wrap input {
|
|
1415
|
+
display: none;
|
|
1416
|
+
}
|
|
1417
|
+
.ea-switch_wrap span {
|
|
1418
|
+
display: block;
|
|
1419
|
+
cursor: default;
|
|
1420
|
+
}
|
|
1421
|
+
.ea-switch_wrap .ea-switch_label {
|
|
1422
|
+
color: #606266;
|
|
1423
|
+
font-size: 0.875rem;
|
|
1424
|
+
cursor: pointer;
|
|
1425
|
+
transition: color 0.2s;
|
|
1426
|
+
}
|
|
1427
|
+
.ea-switch_wrap .ea-switch_label.ea-switch_label--active {
|
|
1428
|
+
color: #409eff;
|
|
1429
|
+
}
|
|
1430
|
+
.ea-switch_wrap .ea-switch_core {
|
|
1431
|
+
position: relative;
|
|
1432
|
+
cursor: pointer;
|
|
1433
|
+
margin: 0 0.75rem;
|
|
1434
|
+
width: 2.5rem;
|
|
1435
|
+
height: 1.25rem;
|
|
1436
|
+
line-height: 1.25rem;
|
|
1437
|
+
background-color: #dcdfe6;
|
|
1438
|
+
border-radius: 999px;
|
|
1439
|
+
transition: background-color 0.2s;
|
|
1440
|
+
}
|
|
1441
|
+
.ea-switch_wrap .ea-switch_core.ea-switch_core--checked {
|
|
1442
|
+
background-color: #409eff;
|
|
1443
|
+
}
|
|
1444
|
+
.ea-switch_wrap .ea-switch_core::after {
|
|
1445
|
+
content: "";
|
|
1446
|
+
display: block;
|
|
1447
|
+
position: absolute;
|
|
1448
|
+
left: 2px;
|
|
1449
|
+
top: 50%;
|
|
1450
|
+
transform: translate(0, -50%);
|
|
1451
|
+
width: 1rem;
|
|
1452
|
+
height: 1rem;
|
|
1453
|
+
border-radius: 999px;
|
|
1454
|
+
background-color: #fff;
|
|
1455
|
+
transition: left 0.2s, transform 0.2s;
|
|
1456
|
+
}
|
|
1457
|
+
.ea-switch_wrap .ea-switch_core.ea-switch_core--checked::after {
|
|
1458
|
+
left: calc(100% - 1rem - 2px);
|
|
1459
|
+
}
|
|
1460
|
+
.ea-switch_wrap .ea-switch_core.ea-switch_core--disabled {
|
|
1461
|
+
background-color: #c0c4cc;
|
|
1462
|
+
}
|
|
1463
|
+
.ea-switch_wrap.ea-switch_wrap--disabled {
|
|
1464
|
+
cursor: not-allowed;
|
|
1465
|
+
}
|
|
1466
|
+
.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label,
|
|
1467
|
+
.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_core {
|
|
1468
|
+
pointer-events: none;
|
|
1469
|
+
}
|
|
1470
|
+
.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_core {
|
|
1471
|
+
background-color: #eff1f5;
|
|
1472
|
+
}
|
|
1473
|
+
.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label {
|
|
1474
|
+
color: #c0c4cc;
|
|
1475
|
+
}
|
|
1476
|
+
.ea-switch_wrap.ea-switch_wrap--disabled .ea-switch_label.ea-switch_label--active {
|
|
1477
|
+
color: #7ebfff;
|
|
1478
|
+
}
|
|
1479
|
+
`,Pe=()=>{const s=document.createElement("input");return s.type="checkbox",s.className="ea-switch_input",s},qe=()=>{const s=document.createElement("span");return s.className="ea-switch_core",s},re=s=>{const i=document.createElement("span");return i.className=`ea-switch_label ea-switch_label--${s}`,i};var F,G,x,$,k,R;class De extends m{constructor(){super();c(this,F,!1);c(this,G,void 0);c(this,x,void 0);c(this,$,void 0);c(this,k,void 0);c(this,R,void 0);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-switch_wrap";const o=Pe(),a=re("left"),d=qe(),_=re("right");t.appendChild(o),t.appendChild(a),t.appendChild(d),t.appendChild(_),n(this,G,t),n(this,x,o),n(this,$,a),n(this,k,d),n(this,R,_),this.build(e,Be),this.shadowRoot.appendChild(t)}static get observedAttributes(){return["checked"]}get inactiveText(){return this.getAttribute("inactive-text")}set inactiveText(e){this.setAttribute("inactive-text",e),r(this,$).innerText=e}get activeText(){return this.getAttribute("active-text")}set activeText(e){this.setAttribute("active-text",e),r(this,R).innerText=e}get checked(){return this.getAttrBoolean("checked")}set checked(e){this.setAttribute("checked",e),r(this,x).checked=e,r(this,x).setAttribute("checked",e),e?(r(this,k).classList.add("ea-switch_core--checked"),r(this,R).classList.add("ea-switch_label--active"),r(this,$).classList.remove("ea-switch_label--active")):(r(this,k).classList.remove("ea-switch_core--checked"),r(this,$).classList.add("ea-switch_label--active"),r(this,R).classList.remove("ea-switch_label--active"))}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.setAttribute("disabled",e),r(this,x).disabled=e,r(this,G).classList.toggle("ea-switch_wrap--disabled",e)}get inactiveColor(){return this.getAttribute("inactive-color")}set inactiveColor(e){e&&(this.setAttribute("inactive-color",e),e&&(r(this,k).style.backgroundColor=e))}get activeColor(){return this.getAttribute("active-color")}set activeColor(e){e&&(this.setAttribute("active-color",e),r(this,k).style.backgroundColor=e)}handleInputChecked(e){const t=r(this,x).checked;this.inactiveColor&&this.activeColor?r(this,k).style.backgroundColor=t?this.inactiveColor:this.activeColor:r(this,k).classList.toggle("ea-switch_core--checked",t)}init(){const e=this;this.checked=this.checked,this.inactiveText=this.inactiveText,this.activeText=this.activeText,this.disabled=this.disabled,this.activeColor&&this.inactiveColor&&(this.checked?this.activeColor=this.activeColor:this.inactiveColor=this.inactiveColor),r(this,$).addEventListener("click",function(t){e.checked=!r(e,x).checked}),r(this,R).addEventListener("click",function(t){e.checked=!r(e,x).checked}),r(this,k).addEventListener("click",function(t){e.checked=!r(e,x).checked})}connectedCallback(){this.init(),n(this,F,!0)}attributeChangedCallback(e,t,o){if(r(this,F)&&e==="checked"){const a=this.checked?this.activeText:this.inactiveText;this.handleInputChecked(),this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:a}}))}}}F=new WeakMap,G=new WeakMap,x=new WeakMap,$=new WeakMap,k=new WeakMap,R=new WeakMap;const He=`
|
|
1480
|
+
@import url('/icon/index.css');
|
|
1481
|
+
|
|
1482
|
+
:host {
|
|
1483
|
+
--i-color: rgb(247, 186, 42);
|
|
1484
|
+
}
|
|
1485
|
+
.ea-rate_wrap {
|
|
1486
|
+
--i-color: rgb(247, 186, 42);
|
|
1487
|
+
position: relative;
|
|
1488
|
+
display: flex;
|
|
1489
|
+
align-items: center;
|
|
1490
|
+
}
|
|
1491
|
+
.ea-rate_wrap .ea-rate_item {
|
|
1492
|
+
cursor: pointer;
|
|
1493
|
+
width: 24px;
|
|
1494
|
+
height: 24px;
|
|
1495
|
+
}
|
|
1496
|
+
.ea-rate_wrap .ea-rate_item > i {
|
|
1497
|
+
color: #c0c4cc;
|
|
1498
|
+
font-size: 1rem;
|
|
1499
|
+
line-height: 1;
|
|
1500
|
+
transition: color 0.3s, font-size 0.1s;
|
|
1501
|
+
}
|
|
1502
|
+
.ea-rate_wrap .ea-rate_item.ea-rate_item--active > i {
|
|
1503
|
+
color: var(--i-color);
|
|
1504
|
+
font-size: 1.1rem;
|
|
1505
|
+
}
|
|
1506
|
+
.ea-rate_wrap .ea-rate_item.ea-rate_item--disabled {
|
|
1507
|
+
pointer-events: none;
|
|
1508
|
+
cursor: default;
|
|
1509
|
+
}
|
|
1510
|
+
.ea-rate_wrap .ea-rate_text {
|
|
1511
|
+
margin-left: 0.25rem;
|
|
1512
|
+
min-width: 2rem;
|
|
1513
|
+
font-size: 0.8rem;
|
|
1514
|
+
line-height: 0.8;
|
|
1515
|
+
vertical-align: middle;
|
|
1516
|
+
}
|
|
1517
|
+
.ea-rate_wrap .ea-rate_score {
|
|
1518
|
+
position: absolute;
|
|
1519
|
+
left: 0;
|
|
1520
|
+
top: 0;
|
|
1521
|
+
}
|
|
1522
|
+
.ea-rate_wrap .ea-rate_score .ea-rate_score_item {
|
|
1523
|
+
width: 24px;
|
|
1524
|
+
height: 24px;
|
|
1525
|
+
}
|
|
1526
|
+
.ea-rate_wrap .ea-rate_score .ea-rate_score_item > i {
|
|
1527
|
+
color: #c0c4cc;
|
|
1528
|
+
font-size: 1rem;
|
|
1529
|
+
line-height: 1;
|
|
1530
|
+
}
|
|
1531
|
+
`,We=s=>{const i=document.createElement("span");i.className="ea-rate_item",i.setAttribute("data-index",s);const e=document.createElement("i");return e.className="icon-star-empty",i.appendChild(e),i};var Y,w,K,q;class Me extends m{constructor(){super();c(this,Y,!1);c(this,w,void 0);c(this,K,void 0);c(this,q,["极差","失望","一般","满意","惊喜"]);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-rate_wrap";for(let a=0;a<5;a++){const d=We(a);t.appendChild(d)}const o=document.createElement("span");o.className="ea-rate_text",t.appendChild(o),n(this,w,t),n(this,K,o),this.build(e,He),this.shadowRoot.appendChild(t)}static get observedAttributes(){return["value"]}setCheckedStatus(e){const t=r(this,w).querySelectorAll(".ea-rate_item");for(let o=0;o<e;o++)t[o].classList.add("ea-rate_item--active"),t[o].querySelector("i").className=this.activeIconClass,this.showText&&(r(this,K).innerText=this.showTextList[e-1])}clearCheckedStatus(){r(this,w).querySelectorAll(".ea-rate_item").forEach(e=>{if(e.classList.remove("ea-rate_item--active"),e.querySelector("i").className=this.voidIconClass,this.showText){const t=r(this,w).querySelector(".ea-rate_text");t.innerText=""}})}get value(){const e=this.getAttribute("value")||0;return e<1||e>5||!e?0:Number(e)}set value(e){e=Number(e),this.setAttribute("value",e),this.clearCheckedStatus(),this.setCheckedStatus(e)}get color(){return this.getAttribute("color")||"rgb(247, 186, 42)"}set color(e){this.setAttribute("color",e),r(this,w).querySelectorAll(".ea-rate_item").forEach(t=>{t.querySelector("i").style.setProperty("--i-color",e)})}get showText(){return this.getAttrBoolean("show-text")}set showText(e){this.toggleAttr("show-text",e)}get showTextList(){return r(this,q)}set showTextList(e){typeof e=="object"&&e.length===5&&n(this,q,e)}get voidIconClass(){return this.getAttribute("void-icon-class")||"icon-star-empty"}set voidIconClass(e){this.setAttribute("void-icon-class",e),r(this,w).querySelectorAll(".ea-rate_item").forEach(t=>{t.querySelector("i").className=e})}get activeIconClass(){return this.getAttribute("active-icon-class")||"icon-star"}set activeIconClass(e){this.setAttribute("active-icon-class",e),r(this,w).querySelectorAll(".ea-rate_item").forEach(t=>{t.querySelector("i").className=e})}get disabled(){return this.getAttrBoolean("disabled")}set disabled(e){this.toggleAttr("disabled",e),r(this,w).querySelectorAll(".ea-rate_item").forEach(t=>{t.classList.toggle("ea-rate_item--disabled",e)})}initRateEvent(){const e=this;r(this,w).querySelectorAll(".ea-rate_item").forEach(t=>{t.addEventListener("mouseenter",function(o){const a=Number(this.getAttribute("data-index"));e.clearCheckedStatus(),e.setCheckedStatus(a+1),e.dispatchEvent(new CustomEvent("hover",{detail:{value:a+1,rateText:r(e,q)[a]}}))}),t.addEventListener("mouseleave",function(o){e.clearCheckedStatus(),e.setCheckedStatus(e.value)}),t.addEventListener("click",function(o){const a=Number(this.getAttribute("data-index"));e.value=a+1,e.dispatchEvent(new CustomEvent("change",{detail:{value:a+1,rateText:r(e,q)[a]}}))})})}init(){this.activeIconClass=this.activeIconClass,this.voidIconClass=this.voidIconClass,this.showText=this.showText,this.color=this.color,this.value=this.value,this.disabled=this.disabled,this.disabled||this.initRateEvent()}connectedCallback(){this.init(),n(this,Y,!0)}attributeChangedCallback(e,t,o){r(this,Y)&&e=="value"&&(this.clearCheckedStatus(),this.setCheckedStatus(o))}}Y=new WeakMap,w=new WeakMap,K=new WeakMap,q=new WeakMap;const Ve=`
|
|
1532
|
+
@import url('/icon/index.css');
|
|
1533
|
+
|
|
1534
|
+
.ea-tag_wrap {
|
|
1535
|
+
display: inline-block;
|
|
1536
|
+
height: 2rem;
|
|
1537
|
+
line-height: 30px;
|
|
1538
|
+
white-space: nowrap;
|
|
1539
|
+
padding: 0 0.625rem;
|
|
1540
|
+
border-width: 1px;
|
|
1541
|
+
border-style: solid;
|
|
1542
|
+
border-radius: 4px;
|
|
1543
|
+
}
|
|
1544
|
+
.ea-tag_wrap.ea-tag--default {
|
|
1545
|
+
color: #409eff;
|
|
1546
|
+
background-color: #ecf5ff;
|
|
1547
|
+
border-color: #dcdfe6;
|
|
1548
|
+
}
|
|
1549
|
+
.ea-tag_wrap.ea-tag--default.ea-tag--dark {
|
|
1550
|
+
color: #fff;
|
|
1551
|
+
background-color: #409eff;
|
|
1552
|
+
border-color: #409eff;
|
|
1553
|
+
}
|
|
1554
|
+
.ea-tag_wrap.ea-tag--default.ea-tag--plain {
|
|
1555
|
+
color: #409eff;
|
|
1556
|
+
background-color: #fff;
|
|
1557
|
+
border-color: #dcdfe6;
|
|
1558
|
+
}
|
|
1559
|
+
.ea-tag_wrap.ea-tag--success {
|
|
1560
|
+
color: #67c23a;
|
|
1561
|
+
background-color: #f0f9eb;
|
|
1562
|
+
border-color: #e1f3d8;
|
|
1563
|
+
}
|
|
1564
|
+
.ea-tag_wrap.ea-tag--success.ea-tag--dark {
|
|
1565
|
+
color: #fff;
|
|
1566
|
+
background-color: #67c23a;
|
|
1567
|
+
border-color: #67c23a;
|
|
1568
|
+
}
|
|
1569
|
+
.ea-tag_wrap.ea-tag--success.ea-tag--plain {
|
|
1570
|
+
color: #67c23a;
|
|
1571
|
+
background-color: #fff;
|
|
1572
|
+
border-color: #e1f3d8;
|
|
1573
|
+
}
|
|
1574
|
+
.ea-tag_wrap.ea-tag--info {
|
|
1575
|
+
color: #909399;
|
|
1576
|
+
background-color: #f4f4f5;
|
|
1577
|
+
border-color: #e9e9eb;
|
|
1578
|
+
}
|
|
1579
|
+
.ea-tag_wrap.ea-tag--info.ea-tag--dark {
|
|
1580
|
+
color: #fff;
|
|
1581
|
+
background-color: #909399;
|
|
1582
|
+
border-color: #909399;
|
|
1583
|
+
}
|
|
1584
|
+
.ea-tag_wrap.ea-tag--info.ea-tag--plain {
|
|
1585
|
+
color: #909399;
|
|
1586
|
+
background-color: #fff;
|
|
1587
|
+
border-color: #e9e9eb;
|
|
1588
|
+
}
|
|
1589
|
+
.ea-tag_wrap.ea-tag--warning {
|
|
1590
|
+
color: #e6a23c;
|
|
1591
|
+
background-color: #fdf6ec;
|
|
1592
|
+
border-color: #faecd8;
|
|
1593
|
+
}
|
|
1594
|
+
.ea-tag_wrap.ea-tag--warning.ea-tag--dark {
|
|
1595
|
+
color: #fff;
|
|
1596
|
+
background-color: #e6a23c;
|
|
1597
|
+
border-color: #e6a23c;
|
|
1598
|
+
}
|
|
1599
|
+
.ea-tag_wrap.ea-tag--warning.ea-tag--plain {
|
|
1600
|
+
color: #e6a23c;
|
|
1601
|
+
background-color: #fff;
|
|
1602
|
+
border-color: #faecd8;
|
|
1603
|
+
}
|
|
1604
|
+
.ea-tag_wrap.ea-tag--danger {
|
|
1605
|
+
color: #f56c6c;
|
|
1606
|
+
background-color: #fef0f0;
|
|
1607
|
+
border-color: #fbc4c4;
|
|
1608
|
+
}
|
|
1609
|
+
.ea-tag_wrap.ea-tag--danger.ea-tag--dark {
|
|
1610
|
+
color: #fff;
|
|
1611
|
+
background-color: #f56c6c;
|
|
1612
|
+
border-color: #f56c6c;
|
|
1613
|
+
}
|
|
1614
|
+
.ea-tag_wrap.ea-tag--danger.ea-tag--plain {
|
|
1615
|
+
color: #f56c6c;
|
|
1616
|
+
background-color: #fff;
|
|
1617
|
+
border-color: #fbc4c4;
|
|
1618
|
+
}
|
|
1619
|
+
`,Ue=()=>{const s=document.createElement("i");return s.className="icon-cancel-circled2",s.style.cssText=`
|
|
1620
|
+
font-size: 1rem;
|
|
1621
|
+
margin-left: 0.5rem;
|
|
1622
|
+
cursor: pointer;
|
|
1623
|
+
`,s};var W,j;class Oe extends m{constructor(){super();c(this,W,void 0);c(this,j,void 0);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-tag_wrap";const o=document.createElement("slot");t.appendChild(o);const a=document.createElement("slot");a.name="close",t.appendChild(a),n(this,W,t),n(this,j,a),this.build(e,Ve),this.shadowRoot.appendChild(t)}get type(){return this.getAttribute("type")||"default"}set type(e){this.setAttribute("type",e),r(this,W).classList.add(`ea-tag--${e}`)}get closable(){return this.getAttrBoolean("closable")}set closable(e){this.toggleAttr("closable",e)}get effect(){return this.getAttribute("effect")||"light"}set effect(e){e!=="light"&&(this.setAttribute("effect",e),r(this,W).classList.add(`ea-tag--${e}`))}initCloseEvent(){const e=this,t=Ue();t.addEventListener("mouseenter",function(o){t.className="icon-cancel-circled"}),t.addEventListener("mouseleave",function(o){t.className="icon-cancel-circled2"}),t.addEventListener("click",function(o){e.dispatchEvent(new CustomEvent("close",{detail:{value:e.innerText},bubbles:!0}))}),r(this,j).appendChild(t)}init(){this.type=this.type,this.closable=this.closable,this.closable&&this.initCloseEvent(),this.effect=this.effect}connectedCallback(){this.init()}}W=new WeakMap,j=new WeakMap;const Fe=`
|
|
1624
|
+
@import url('/icon/index.css');
|
|
1625
|
+
|
|
1626
|
+
.ea-progress_wrap {
|
|
1627
|
+
position: relative;
|
|
1628
|
+
display: flex;
|
|
1629
|
+
align-items: center;
|
|
1630
|
+
width: 100%;
|
|
1631
|
+
line-height: 1;
|
|
1632
|
+
height: 1rem;
|
|
1633
|
+
}
|
|
1634
|
+
.ea-progress_wrap .ea-progress_track,
|
|
1635
|
+
.ea-progress_wrap .ea-progress_path {
|
|
1636
|
+
height: 0.5rem;
|
|
1637
|
+
line-height: 1;
|
|
1638
|
+
background-color: rgb(235, 238, 245);
|
|
1639
|
+
border-radius: 999px;
|
|
1640
|
+
}
|
|
1641
|
+
.ea-progress_wrap .ea-progress_track {
|
|
1642
|
+
width: 100%;
|
|
1643
|
+
}
|
|
1644
|
+
.ea-progress_wrap .ea-progress_track .ea-progress_path {
|
|
1645
|
+
box-sizing: border-box;
|
|
1646
|
+
padding-right: 0.5rem;
|
|
1647
|
+
color: aliceblue;
|
|
1648
|
+
font-size: 0.8rem;
|
|
1649
|
+
text-align: right;
|
|
1650
|
+
width: 0%;
|
|
1651
|
+
background-color: #409eff;
|
|
1652
|
+
transition: width 0.2s;
|
|
1653
|
+
}
|
|
1654
|
+
.ea-progress_wrap .ea-progress_text {
|
|
1655
|
+
margin-left: 0.5rem;
|
|
1656
|
+
font-size: 0.8rem;
|
|
1657
|
+
width: 3rem;
|
|
1658
|
+
}
|
|
1659
|
+
.ea-progress_wrap .ea-progress_text--circle,
|
|
1660
|
+
.ea-progress_wrap .ea-progress_text--dashboard {
|
|
1661
|
+
position: absolute;
|
|
1662
|
+
left: 50%;
|
|
1663
|
+
top: 50%;
|
|
1664
|
+
transform: translate(-50%, -50%);
|
|
1665
|
+
}
|
|
1666
|
+
.ea-progress_wrap svg circle {
|
|
1667
|
+
stroke-width: 4px;
|
|
1668
|
+
transform-origin: center center;
|
|
1669
|
+
transition: stroke-dashoffset 0.2s;
|
|
1670
|
+
}
|
|
1671
|
+
.ea-progress_wrap svg .track--circle,
|
|
1672
|
+
.ea-progress_wrap svg .path--circle {
|
|
1673
|
+
transform: rotate(-90deg);
|
|
1674
|
+
}
|
|
1675
|
+
.ea-progress_wrap svg .track--dashboard,
|
|
1676
|
+
.ea-progress_wrap svg .path--dashboard {
|
|
1677
|
+
transform: rotate(161deg);
|
|
1678
|
+
}
|
|
1679
|
+
`,Ge={dashboard:`
|
|
1680
|
+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
1681
|
+
<circle class="track--dashboard" cx="50" cy="50" r="40" fill="none" stroke-dasharray="252px" stroke="aliceblue"
|
|
1682
|
+
stroke-width="4px" stroke-dashoffset="100" stroke-linecap="round" />
|
|
1683
|
+
<circle class="path--dashboard" cx="50" cy="50" r="40" fill="none" stroke-dasharray="252px" stroke="rgb(32, 160, 255)" stroke-width="4px"
|
|
1684
|
+
stroke-dashoffset="252" stroke-linecap="round" />
|
|
1685
|
+
</svg>
|
|
1686
|
+
<span class="ea-progress_text--dashboard"></span>
|
|
1687
|
+
`,circle:`
|
|
1688
|
+
<svg viewBox="0 0 100 100">
|
|
1689
|
+
<circle class="track--circle" cx="50" cy="50" r="48" fill="none" stroke="aliceblue" stroke-width="4" stroke-dasharray="302px" stroke-dashoffset="0" />
|
|
1690
|
+
<circle class="path--circle" cx="50" cy="50" r="48" fill="none" stroke="rgb(32, 160, 255)" stroke-width="4" stroke-dasharray="302px" stroke-dashoffset="0" stroke-linecap="round" />
|
|
1691
|
+
</svg>
|
|
1692
|
+
<span class="ea-progress_text--circle"></span>
|
|
1693
|
+
`};var N,B,b,v;class Ye extends m{constructor(){super();c(this,N,void 0);c(this,B,void 0);c(this,b,void 0);c(this,v,void 0);const e=this.attachShadow({mode:"open"}),t=document.createElement("div");t.className="ea-progress_wrap";const o=document.createElement("section");o.className="ea-progress_track";const a=document.createElement("section");a.className="ea-progress_path",o.appendChild(a),t.appendChild(o);const d=document.createElement("section");d.className="ea-progress_text",t.appendChild(d),n(this,N,t),n(this,B,o),n(this,b,a),n(this,v,d),this.build(e,Fe),this.shadowRoot.appendChild(t)}handleSVGTemplate(e){r(this,N).style.height="126px",r(this,N).style.width="126px",r(this,N).innerHTML=Ge[e];const t=r(this,N).querySelector(`circle[class="track--${e}"]`),o=r(this,N).querySelector(`circle[class="path--${e}"]`),a=r(this,N).querySelector(`span[class="ea-progress_text--${e}"]`);n(this,B,t),n(this,b,o),n(this,v,a)}get type(){return this.getAttribute("type")}set type(e){if(!(e==null||e===""))switch(this.setAttribute("type",e),this.type){case"circle":this.handleSVGTemplate("circle");break;case"dashboard":this.handleSVGTemplate("dashboard");break}}get percentage(){return this.getAttribute("percentage")||0}getCirclePercentageValue(e){return 302*(100-Number(e))/100}getDashboardPercentageValue(e){return 152*(100-Number(e))/100+100}set percentage(e){if(!(e==null||e===""))switch(Number(e)<0?e=0:Number(e)>100&&(e=100),this.setAttribute("percentage",e),r(this,v).innerHTML=`${e}%`,this.type){case"circle":{r(this,b).style.strokeDashoffset=`${this.getCirclePercentageValue(e)}px`;break}case"dashboard":{r(this,b).style.strokeDashoffset=`${this.getDashboardPercentageValue(e)}px`;break}default:{r(this,b).style.width=`${e}%`,this.textInside&&this.handleTextInside(e);break}}}get statusList(){return{success:{icon:"icon-ok-circled",color:"#67c23a"},warning:{icon:"icon-attention-circled",color:"#e6a23c"},exception:{icon:"icon-cancel-circled",color:"#f56c6c"},primary:""}}handleStatusStyle(e,t){r(this,v).innerText=this.statusList[e]?"":`${this.percentage}%`,r(this,v).className=`${t} ${this.statusList[e].icon||""}`,r(this,v).style.color=this.statusList[e].color}get status(){return this.getAttribute("status")||"primary"}set status(e){switch(this.setAttribute("status",e),this.type){case"circle":this.handleStatusStyle(e,"ea-progress_text--circle"),r(this,b).style.stroke=this.statusList[e].color;break;case"dashboard":this.handleStatusStyle(e,"ea-progress_text--dashboard"),r(this,b).style.stroke=this.statusList[e].color;break;default:this.handleStatusStyle(e,"ea-progress_text"),r(this,b).style.backgroundColor=this.statusList[e].color;break}}handleTextInside(e){this.type!=="circle"&&(e?(r(this,v).style.display="none",r(this,b).innerText=`${this.percentage}%`):(r(this,v).style.display="block",r(this,b).innerText=""))}get textInside(){return this.getAttrBoolean("text-inside")}set textInside(e){this.setAttribute("text-inside",e),this.handleTextInside(e)}get strokeWidth(){return this.getAttribute("stroke-width")}set strokeWidth(e){e=e||4,this.toggleAttr("stroke-width",e),this.type==="circle"?(r(this,B).style.strokeWidth=`${Number(e)}px`,r(this,b).style.strokeWidth=`${Number(e)}px`):(e=Number(e)+4,r(this,B).style.height=`${e}px`,r(this,B).style.lineHeight=`${e}px`,r(this,b).style.height=`${e}px`,r(this,b).style.lineHeight=`${e}px`)}init(){this.type=this.type,this.percentage=this.percentage,this.status=this.status,this.textInside=this.textInside,this.strokeWidth=this.strokeWidth}connectedCallback(){this.init()}}N=new WeakMap,B=new WeakMap,b=new WeakMap,v=new WeakMap;const g=(s,i)=>{window.customElements.get(s)||window.customElements.define(s,i)};g("ea-button",se);g("ea-button-group",ne);g("ea-link",de);g("ea-radio",pe);g("ea-radio-group",ge);g("ea-checkbox",we);g("ea-checkbox-group",ke);g("ea-input",Le);g("ea-textarea",Ne);g("ea-input-number",Ie);g("ea-select",Re);g("ea-switch",De);g("ea-rate",Me);g("ea-tag",Oe);g("ea-progress",Ye);
|