its_ui_vite 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/README.md +105 -0
- package/package.json +34 -0
- package/src/assets/js/helpers.js +29 -0
- package/src/assets/scss/main.scss +40 -0
- package/src/components/CAlert.vue +230 -0
- package/src/components/CButton.vue +149 -0
- package/src/components/CCheckbox.vue +241 -0
- package/src/components/CIcons/index.vue +86 -0
- package/src/components/CInput.vue +160 -0
- package/src/components/CPopup.vue +40 -0
- package/src/components/CScroll.vue +105 -0
- package/src/components/CSelect.vue +263 -0
- package/src/components/CTabs.vue +93 -0
- package/src/components/CTooltip.vue +212 -0
- package/src/index.js +8 -0
- package/src/libIndex.js +21 -0
- package/src/pages/index.vue +769 -0
|
@@ -0,0 +1,769 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="" style="background-color: #152829;">
|
|
3
|
+
<!-- button -->
|
|
4
|
+
<div :style="showBlock.btn ? '' : 'display: none;'" class="table content">
|
|
5
|
+
<div class="table__wrap">
|
|
6
|
+
<div class="table__item table__title">
|
|
7
|
+
button big(lg)
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class="table">
|
|
11
|
+
|
|
12
|
+
<!-- tonal -->
|
|
13
|
+
<div class="table__col">
|
|
14
|
+
<div class="table__item table__title">
|
|
15
|
+
tonal
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<div class="table__item">
|
|
19
|
+
<CButton>
|
|
20
|
+
default
|
|
21
|
+
</CButton>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div class="table__item">
|
|
25
|
+
<CButton class="hover">
|
|
26
|
+
hover
|
|
27
|
+
</CButton>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="table__item">
|
|
31
|
+
<CButton :disabled="true">
|
|
32
|
+
disable
|
|
33
|
+
</CButton>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<!-- ./tonal -->
|
|
37
|
+
|
|
38
|
+
<!-- outlined -->
|
|
39
|
+
<div class="table__col">
|
|
40
|
+
<div class="table__item table__title">
|
|
41
|
+
outlined
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="table__item">
|
|
45
|
+
<CButton variant="outlined">
|
|
46
|
+
default
|
|
47
|
+
</CButton>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="table__item">
|
|
51
|
+
<CButton class="hover" variant="outlined">
|
|
52
|
+
hover
|
|
53
|
+
</CButton>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="table__item">
|
|
57
|
+
<CButton :disabled="true" variant="outlined">
|
|
58
|
+
disable
|
|
59
|
+
</CButton>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<!-- ./outlined -->
|
|
63
|
+
|
|
64
|
+
<!-- text -->
|
|
65
|
+
<div class="table__col" style="background-color: #152829;">
|
|
66
|
+
<div class="table__item table__title">
|
|
67
|
+
text
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div class="table__item">
|
|
71
|
+
<CButton variant="text">
|
|
72
|
+
default
|
|
73
|
+
</CButton>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="table__item">
|
|
77
|
+
<CButton class="hover" variant="text">
|
|
78
|
+
hover
|
|
79
|
+
</CButton>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="table__item">
|
|
83
|
+
<CButton :disabled="true" variant="text">
|
|
84
|
+
disable
|
|
85
|
+
</CButton>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<!-- ./text -->
|
|
89
|
+
|
|
90
|
+
<!-- tonal -->
|
|
91
|
+
<div class="table__col">
|
|
92
|
+
<div class="table__item table__title">
|
|
93
|
+
tonal(black)
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="table__item">
|
|
97
|
+
<CButton color="black">
|
|
98
|
+
default
|
|
99
|
+
</CButton>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="table__item">
|
|
103
|
+
<CButton class="hover" color="black">
|
|
104
|
+
hover
|
|
105
|
+
</CButton>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="table__item">
|
|
109
|
+
<CButton :disabled="true" color="black">
|
|
110
|
+
disable
|
|
111
|
+
</CButton>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<!-- ./tonal -->
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="table__wrap">
|
|
120
|
+
<div class="table__item table__title">
|
|
121
|
+
button Medium(md)
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div class="table">
|
|
125
|
+
|
|
126
|
+
<!-- tonal -->
|
|
127
|
+
<div class="table__col">
|
|
128
|
+
<div class="table__item table__title">
|
|
129
|
+
tonal
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div class="table__item">
|
|
133
|
+
<CButton size="md">
|
|
134
|
+
default
|
|
135
|
+
</CButton>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="table__item">
|
|
139
|
+
<CButton size="md" class="hover">
|
|
140
|
+
hover
|
|
141
|
+
</CButton>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div class="table__item">
|
|
145
|
+
<CButton size="md" :disabled="true">
|
|
146
|
+
disable
|
|
147
|
+
</CButton>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
<!-- ./tonal -->
|
|
151
|
+
|
|
152
|
+
<!-- outlined -->
|
|
153
|
+
<div class="table__col">
|
|
154
|
+
<div class="table__item table__title">
|
|
155
|
+
outlined
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<div class="table__item">
|
|
159
|
+
<CButton size="md" variant="outlined">
|
|
160
|
+
default
|
|
161
|
+
</CButton>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="table__item">
|
|
165
|
+
<CButton size="md" class="hover" variant="outlined">
|
|
166
|
+
hover
|
|
167
|
+
</CButton>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="table__item">
|
|
171
|
+
<CButton size="md" :disabled="true" variant="outlined">
|
|
172
|
+
disable
|
|
173
|
+
</CButton>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
<!-- ./outlined -->
|
|
177
|
+
|
|
178
|
+
<!-- text -->
|
|
179
|
+
<div class="table__col" style="background-color: #152829;">
|
|
180
|
+
<div class="table__item table__title">
|
|
181
|
+
text
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="table__item">
|
|
185
|
+
<CButton size="md" variant="text">
|
|
186
|
+
default
|
|
187
|
+
</CButton>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div class="table__item">
|
|
191
|
+
<CButton size="md" class="hover" variant="text">
|
|
192
|
+
hover
|
|
193
|
+
</CButton>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<div class="table__item">
|
|
197
|
+
<CButton size="md" :disabled="true" variant="text">
|
|
198
|
+
disable
|
|
199
|
+
</CButton>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
<!-- ./text -->
|
|
203
|
+
|
|
204
|
+
<!-- tonal -->
|
|
205
|
+
<div class="table__col">
|
|
206
|
+
<div class="table__item table__title">
|
|
207
|
+
tonal(black)
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="table__item">
|
|
211
|
+
<CButton size="md" color="black">
|
|
212
|
+
default
|
|
213
|
+
</CButton>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="table__item">
|
|
217
|
+
<CButton size="md" class="hover" color="black">
|
|
218
|
+
hover
|
|
219
|
+
</CButton>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="table__item">
|
|
223
|
+
<CButton size="md" :disabled="true" color="black">
|
|
224
|
+
disable
|
|
225
|
+
</CButton>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
<!-- ./tonal -->
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div class="table__wrap">
|
|
234
|
+
<div class="table__item table__title">
|
|
235
|
+
button Small(sm)
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
<div class="table">
|
|
239
|
+
|
|
240
|
+
<!-- tonal -->
|
|
241
|
+
<div class="table__col">
|
|
242
|
+
<div class="table__item table__title">
|
|
243
|
+
tonal
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="table__item">
|
|
247
|
+
<CButton size="sm">
|
|
248
|
+
default
|
|
249
|
+
</CButton>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<div class="table__item">
|
|
253
|
+
<CButton size="sm" class="hover">
|
|
254
|
+
hover
|
|
255
|
+
</CButton>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<div class="table__item">
|
|
259
|
+
<CButton size="sm" :disabled="true">
|
|
260
|
+
disable
|
|
261
|
+
</CButton>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
<!-- ./tonal -->
|
|
265
|
+
|
|
266
|
+
<!-- outlined -->
|
|
267
|
+
<div class="table__col">
|
|
268
|
+
<div class="table__item table__title">
|
|
269
|
+
outlined
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="table__item">
|
|
273
|
+
<CButton size="sm" variant="outlined">
|
|
274
|
+
default
|
|
275
|
+
</CButton>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div class="table__item">
|
|
279
|
+
<CButton size="sm" class="hover" variant="outlined">
|
|
280
|
+
hover
|
|
281
|
+
</CButton>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<div class="table__item">
|
|
285
|
+
<CButton size="sm" :disabled="true" variant="outlined">
|
|
286
|
+
disable
|
|
287
|
+
</CButton>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
<!-- ./outlined -->
|
|
291
|
+
|
|
292
|
+
<!-- text -->
|
|
293
|
+
<div class="table__col" style="background-color: #152829;">
|
|
294
|
+
<div class="table__item table__title">
|
|
295
|
+
text
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div class="table__item">
|
|
299
|
+
<CButton size="sm" variant="text">
|
|
300
|
+
default
|
|
301
|
+
</CButton>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<div class="table__item">
|
|
305
|
+
<CButton size="sm" class="hover" variant="text">
|
|
306
|
+
hover
|
|
307
|
+
</CButton>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div class="table__item">
|
|
311
|
+
<CButton size="sm" :disabled="true" variant="text">
|
|
312
|
+
disable
|
|
313
|
+
</CButton>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
<!-- ./text -->
|
|
317
|
+
|
|
318
|
+
<!-- tonal -->
|
|
319
|
+
<div class="table__col">
|
|
320
|
+
<div class="table__item table__title">
|
|
321
|
+
tonal(black)
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<div class="table__item">
|
|
325
|
+
<CButton size="sm" color="black">
|
|
326
|
+
default
|
|
327
|
+
</CButton>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="table__item">
|
|
331
|
+
<CButton size="sm" class="hover" color="black">
|
|
332
|
+
hover
|
|
333
|
+
</CButton>
|
|
334
|
+
</div>
|
|
335
|
+
|
|
336
|
+
<div class="table__item">
|
|
337
|
+
<CButton size="sm" :disabled="true" color="black">
|
|
338
|
+
disable
|
|
339
|
+
</CButton>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
<!-- ./tonal -->
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
<!-- ./button -->
|
|
348
|
+
|
|
349
|
+
<!-- tabs -->
|
|
350
|
+
<div :style="showBlock.tabs ? '' : 'display: none;'" class="content">
|
|
351
|
+
<div class="table__item table__title">
|
|
352
|
+
Tabs
|
|
353
|
+
</div>
|
|
354
|
+
<CTabs @tabChange="log" :activeId="4756500" :tabs="[
|
|
355
|
+
{
|
|
356
|
+
id: 2,
|
|
357
|
+
text: 'tab 1'
|
|
358
|
+
},
|
|
359
|
+
{
|
|
360
|
+
id: 47565,
|
|
361
|
+
text: 'tab 2'
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
id: 'jj889',
|
|
365
|
+
text: 'tab 3'
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
id: 4756500,
|
|
369
|
+
text: 'tab 4'
|
|
370
|
+
}
|
|
371
|
+
]" />
|
|
372
|
+
</div>
|
|
373
|
+
<!-- ./tabs -->
|
|
374
|
+
|
|
375
|
+
<!-- inputs -->
|
|
376
|
+
<div :style="showBlock.input ? '' : 'display: none;'" class="table content">
|
|
377
|
+
<div class="table__wrap">
|
|
378
|
+
<div class="table__item table__title">
|
|
379
|
+
Input
|
|
380
|
+
</div>
|
|
381
|
+
<div class="table">
|
|
382
|
+
<!-- col -->
|
|
383
|
+
<div class="table__col">
|
|
384
|
+
<div class="table__item">
|
|
385
|
+
<CInput v-model="inpValue_1" />
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
<div class="table__item">
|
|
389
|
+
<CInput v-model="inpFocus" status="focus" />
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
<!-- ./col -->
|
|
393
|
+
|
|
394
|
+
<!-- col -->
|
|
395
|
+
<div class="table__col">
|
|
396
|
+
<div class="table__item">
|
|
397
|
+
<CInput v-model="inpSuccess" :status="successStatus"/>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<div class="table__item">
|
|
401
|
+
<CInput v-model="inpError" :status="errorStatus" />
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
<!-- ./col -->
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
<!-- ./inputs -->
|
|
409
|
+
|
|
410
|
+
<!-- checkboxes -->
|
|
411
|
+
<div :style="showBlock.checkbox ? '' : 'display: none;'" class="table content">
|
|
412
|
+
<div class="table__wrap">
|
|
413
|
+
<div class="table__item table__title">
|
|
414
|
+
Checkbox
|
|
415
|
+
</div>
|
|
416
|
+
<div class="table">
|
|
417
|
+
<!-- col -->
|
|
418
|
+
<div class="table__col">
|
|
419
|
+
<div class="table__item">
|
|
420
|
+
<CCheckbox v-model:checked="checkboxes.check_1">
|
|
421
|
+
{{ checkboxes.check_1 ? 'checked' : 'default' }}
|
|
422
|
+
</CCheckbox>
|
|
423
|
+
|
|
424
|
+
</div>
|
|
425
|
+
|
|
426
|
+
<div class="table__item">
|
|
427
|
+
<CCheckbox v-model:checked="checkboxes.check_2" :text="`${checkboxes.check_2 ? 'checked' : 'default'}`" />
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<div class="table__item">
|
|
431
|
+
<CCheckbox :disabled="true" text="disabled" />
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
<!-- ./col -->
|
|
435
|
+
|
|
436
|
+
<!-- col -->
|
|
437
|
+
<div class="table__col">
|
|
438
|
+
<div class="table__item">
|
|
439
|
+
<CCheckbox variant="radio" v-model:checked="checkboxes.radio_1" :text="checkboxes.radio_1 ? 'checked' : 'default'" />
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<div class="table__item">
|
|
443
|
+
<CCheckbox variant="radio" v-model:checked="checkboxes.radio_2" :text="checkboxes.radio_2 ? 'checked' : 'default'" />
|
|
444
|
+
</div>
|
|
445
|
+
|
|
446
|
+
<div class="table__item">
|
|
447
|
+
<CCheckbox variant="radio" :disabled="true" text="disabled" />
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
<!-- ./col -->
|
|
451
|
+
|
|
452
|
+
<!-- col -->
|
|
453
|
+
<div class="table__col">
|
|
454
|
+
<div class="table__item">
|
|
455
|
+
<CCheckbox variant="toggle" text="default" />
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="table__item">
|
|
459
|
+
<CCheckbox variant="toggle" :checked="true" text="checked" />
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<div class="table__item">
|
|
463
|
+
<CCheckbox variant="toggle" :disabled="true" text="disabled" />
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
<!-- ./col -->
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
<!-- ./checkboxes -->
|
|
471
|
+
|
|
472
|
+
<!-- select -->
|
|
473
|
+
<div style="min-height: 400px;" class="table content">
|
|
474
|
+
<div class="table__wrap">
|
|
475
|
+
<div class="table__item table__title">
|
|
476
|
+
Select
|
|
477
|
+
</div>
|
|
478
|
+
<div class="table">
|
|
479
|
+
<!-- col -->
|
|
480
|
+
<div class="table__col">
|
|
481
|
+
<div class="table__item">
|
|
482
|
+
<CSelect :options="[
|
|
483
|
+
{
|
|
484
|
+
id: 2,
|
|
485
|
+
text: 'btn 1'
|
|
486
|
+
},
|
|
487
|
+
{
|
|
488
|
+
id: 47565,
|
|
489
|
+
text: 'btn 2'
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
id: 'jj889',
|
|
493
|
+
text: 'btn 3'
|
|
494
|
+
},
|
|
495
|
+
{
|
|
496
|
+
id: 4756500,
|
|
497
|
+
text: 'btn 4'
|
|
498
|
+
},
|
|
499
|
+
]" />
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
502
|
+
<!-- ./col -->
|
|
503
|
+
|
|
504
|
+
<!-- col -->
|
|
505
|
+
<div class="table__col">
|
|
506
|
+
|
|
507
|
+
<div class="table__item">
|
|
508
|
+
<CSelect variant="multiple" :options="[
|
|
509
|
+
{
|
|
510
|
+
id: 2,
|
|
511
|
+
text: 'btn 1'
|
|
512
|
+
},
|
|
513
|
+
{
|
|
514
|
+
id: 47565,
|
|
515
|
+
text: 'btn 2'
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
id: 'jj889',
|
|
519
|
+
text: 'btn 3'
|
|
520
|
+
},
|
|
521
|
+
{
|
|
522
|
+
id: 4756500,
|
|
523
|
+
text: 'btn 4'
|
|
524
|
+
},
|
|
525
|
+
{
|
|
526
|
+
id: 12,
|
|
527
|
+
text: 'btn 5'
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
id: 475651,
|
|
531
|
+
text: 'btn 6'
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
id: 'jj8891',
|
|
535
|
+
text: 'btn 7'
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
id: 4756510,
|
|
539
|
+
text: 'btn 8'
|
|
540
|
+
}
|
|
541
|
+
]" />
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
<!-- ./col -->
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
<!-- ./select -->
|
|
549
|
+
|
|
550
|
+
<!-- tooltip -->
|
|
551
|
+
<div class="table content">
|
|
552
|
+
<div class="table__wrap">
|
|
553
|
+
<div class="table__item table__title">
|
|
554
|
+
tooltip
|
|
555
|
+
</div>
|
|
556
|
+
<div class="table">
|
|
557
|
+
<!-- col -->
|
|
558
|
+
<div class="table__col">
|
|
559
|
+
<div class="table__item">
|
|
560
|
+
<CTooltip style="white-space: nowrap;">
|
|
561
|
+
<template #content>
|
|
562
|
+
Text helper
|
|
563
|
+
</template>
|
|
564
|
+
</CTooltip>
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
<!-- ./col -->
|
|
568
|
+
|
|
569
|
+
<!-- col -->
|
|
570
|
+
<div class="table__col">
|
|
571
|
+
<div class="table__item">
|
|
572
|
+
<CTooltip style="white-space: nowrap;" variant="bottom">
|
|
573
|
+
<template #content>
|
|
574
|
+
Text helper
|
|
575
|
+
</template>
|
|
576
|
+
</CTooltip>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
<!-- ./col -->
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
</div>
|
|
583
|
+
<!-- ./tooltip -->
|
|
584
|
+
|
|
585
|
+
<!-- popup -->
|
|
586
|
+
<div class="table content">
|
|
587
|
+
<div class="table__wrap">
|
|
588
|
+
<div class="table__item table__title">
|
|
589
|
+
popup
|
|
590
|
+
</div>
|
|
591
|
+
<div class="table">
|
|
592
|
+
<!-- col -->
|
|
593
|
+
<div class="table__col" style="padding: 20px;">
|
|
594
|
+
<div class="table__item">
|
|
595
|
+
<CPopup>
|
|
596
|
+
<template #title>
|
|
597
|
+
CPopup Text
|
|
598
|
+
</template>
|
|
599
|
+
<template #content>
|
|
600
|
+
<div>
|
|
601
|
+
<div style="min-height: 65px; min-width: 350px; margin-bottom: 10px;">
|
|
602
|
+
Text helper
|
|
603
|
+
</div>
|
|
604
|
+
<div style="display: flex; gap: 20px;">
|
|
605
|
+
<CButton variant="outlined" size="sm">
|
|
606
|
+
Button
|
|
607
|
+
</CButton>
|
|
608
|
+
|
|
609
|
+
<CButton size="sm">
|
|
610
|
+
Button
|
|
611
|
+
</CButton>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
</template>
|
|
615
|
+
</CPopup>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
<!-- ./col -->
|
|
619
|
+
</div>
|
|
620
|
+
</div>
|
|
621
|
+
</div>
|
|
622
|
+
<!-- ./popup -->
|
|
623
|
+
|
|
624
|
+
<!-- alert -->
|
|
625
|
+
<div class="table content">
|
|
626
|
+
<div class="table__wrap">
|
|
627
|
+
<div class="table__item table__title">
|
|
628
|
+
alert
|
|
629
|
+
</div>
|
|
630
|
+
<div class="table">
|
|
631
|
+
<!-- col -->
|
|
632
|
+
<div class="table__col" style="padding: 20px;">
|
|
633
|
+
<div class="table__item">
|
|
634
|
+
<CAlert variant="error">
|
|
635
|
+
Ошибка соединения. Обратитесь к администратору
|
|
636
|
+
</CAlert>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
<div class="table__item">
|
|
640
|
+
<CAlert variant="success">
|
|
641
|
+
Очередь успешно отправлена
|
|
642
|
+
</CAlert>
|
|
643
|
+
</div>
|
|
644
|
+
|
|
645
|
+
<div class="table__item">
|
|
646
|
+
<CAlert >
|
|
647
|
+
Время ожидания сервером истекло. Повторите попытку позже или обратитесь к администратору
|
|
648
|
+
</CAlert>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
<!-- ./col -->
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
<!-- ./alert -->
|
|
656
|
+
</div>
|
|
657
|
+
</template>
|
|
658
|
+
|
|
659
|
+
<script>
|
|
660
|
+
import CButton from '../components/CButton.vue';
|
|
661
|
+
import CTabs from '../components/CTabs.vue';
|
|
662
|
+
import CInput from '../components/CInput.vue';
|
|
663
|
+
import CCheckbox from '../components/CCheckbox.vue';
|
|
664
|
+
import CSelect from '../components/CSelect.vue';
|
|
665
|
+
import CTooltip from '../components/CTooltip.vue';
|
|
666
|
+
import CPopup from '../components/CPopup.vue';
|
|
667
|
+
import CAlert from '../components/CAlert.vue';
|
|
668
|
+
|
|
669
|
+
export default {
|
|
670
|
+
data() {
|
|
671
|
+
return {
|
|
672
|
+
inpValue_1: 'default',
|
|
673
|
+
inpFocus: 'focus',
|
|
674
|
+
inpSuccess: 'success',
|
|
675
|
+
inpError: 'error',
|
|
676
|
+
|
|
677
|
+
checkboxes: {
|
|
678
|
+
check_1: false,
|
|
679
|
+
check_2: true,
|
|
680
|
+
|
|
681
|
+
radio_1: false,
|
|
682
|
+
radio_2: true,
|
|
683
|
+
|
|
684
|
+
toggle_1: false,
|
|
685
|
+
toggle_2: true,
|
|
686
|
+
},
|
|
687
|
+
|
|
688
|
+
showBlock: {
|
|
689
|
+
btn: true,
|
|
690
|
+
tabs: true,
|
|
691
|
+
input: true,
|
|
692
|
+
checkbox: true,
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
},
|
|
696
|
+
|
|
697
|
+
methods: {
|
|
698
|
+
log(e) {
|
|
699
|
+
console.log('log', e);
|
|
700
|
+
}
|
|
701
|
+
},
|
|
702
|
+
|
|
703
|
+
computed: {
|
|
704
|
+
errorStatus() {
|
|
705
|
+
return this.inpError === 'error' ? 'error' : 'static';
|
|
706
|
+
},
|
|
707
|
+
successStatus() {
|
|
708
|
+
return this.inpSuccess === 'success' ? 'success' : 'static';
|
|
709
|
+
}
|
|
710
|
+
},
|
|
711
|
+
|
|
712
|
+
components: {
|
|
713
|
+
CButton,
|
|
714
|
+
CTabs,
|
|
715
|
+
CInput,
|
|
716
|
+
CCheckbox,
|
|
717
|
+
CSelect,
|
|
718
|
+
CTooltip,
|
|
719
|
+
CPopup,
|
|
720
|
+
CAlert,
|
|
721
|
+
},
|
|
722
|
+
}
|
|
723
|
+
</script>
|
|
724
|
+
|
|
725
|
+
<style lang="scss">
|
|
726
|
+
body {
|
|
727
|
+
margin: 0;
|
|
728
|
+
padding: 0;
|
|
729
|
+
|
|
730
|
+
font-family: sans-serif;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.content {
|
|
734
|
+
margin-top: 50px;
|
|
735
|
+
|
|
736
|
+
&:first-child {
|
|
737
|
+
margin-top: 0;
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.table {
|
|
742
|
+
display: flex;
|
|
743
|
+
flex-wrap: wrap;
|
|
744
|
+
|
|
745
|
+
gap: 30px;
|
|
746
|
+
|
|
747
|
+
&__wrap {
|
|
748
|
+
border: 2px solid #6b6b6b;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
&__col {
|
|
752
|
+
display: flex;
|
|
753
|
+
flex-direction: column;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
&__item {
|
|
757
|
+
min-height: 70px;
|
|
758
|
+
min-width: 200px;
|
|
759
|
+
|
|
760
|
+
display: flex;
|
|
761
|
+
align-items: center;
|
|
762
|
+
justify-content: center;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
&__title {
|
|
766
|
+
font-size: 20px;
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
</style>
|