its_ui_vite 0.0.4 → 0.0.5
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 +1 -0
- package/package.json +1 -1
- package/src/components/CButton.vue +73 -1
- package/src/components/CIcons/index.vue +4 -0
- package/src/pages/index.vue +72 -0
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,15 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<button :class="['c-btn', size, variant, color, { active }]" :disabled="disabled">
|
|
2
|
+
<button :class="['c-btn', size, variant, color, { active, loading }]" :disabled="disabled">
|
|
3
3
|
<div class="c-btn__container">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|
|
6
|
+
<div class="c-btn__loading">
|
|
7
|
+
<CIcon
|
|
8
|
+
iconId="loading"
|
|
9
|
+
:size="loadingSize[size]"
|
|
10
|
+
/>
|
|
11
|
+
</div>
|
|
6
12
|
</button>
|
|
7
13
|
</template>
|
|
8
14
|
|
|
9
15
|
<script>
|
|
16
|
+
import CIcon from './CIcons/index.vue'
|
|
17
|
+
|
|
10
18
|
import { getPropValidator } from '../assets/js/helpers.js'
|
|
11
19
|
|
|
12
20
|
export default {
|
|
21
|
+
data() {
|
|
22
|
+
return {
|
|
23
|
+
loadingSize: {
|
|
24
|
+
lg: 24,
|
|
25
|
+
md: 20,
|
|
26
|
+
sm: 16,
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
|
|
13
31
|
props: {
|
|
14
32
|
size: {
|
|
15
33
|
type: String,
|
|
@@ -43,7 +61,17 @@ import { getPropValidator } from '../assets/js/helpers.js'
|
|
|
43
61
|
|
|
44
62
|
default: false,
|
|
45
63
|
},
|
|
64
|
+
|
|
65
|
+
loading: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
|
|
68
|
+
default: false,
|
|
69
|
+
}
|
|
46
70
|
},
|
|
71
|
+
|
|
72
|
+
components: {
|
|
73
|
+
CIcon
|
|
74
|
+
}
|
|
47
75
|
}
|
|
48
76
|
</script>
|
|
49
77
|
|
|
@@ -51,6 +79,7 @@ import { getPropValidator } from '../assets/js/helpers.js'
|
|
|
51
79
|
@import "../assets/scss/main.scss";
|
|
52
80
|
|
|
53
81
|
.c-btn {
|
|
82
|
+
position: relative;
|
|
54
83
|
border-radius: 30px;
|
|
55
84
|
|
|
56
85
|
transition: var(--transition);
|
|
@@ -59,9 +88,26 @@ import { getPropValidator } from '../assets/js/helpers.js'
|
|
|
59
88
|
outline: none;
|
|
60
89
|
border: none;
|
|
61
90
|
|
|
91
|
+
// prop.disabled
|
|
62
92
|
&:disabled {
|
|
63
93
|
cursor: default;
|
|
64
94
|
}
|
|
95
|
+
// ./prop.disabled
|
|
96
|
+
|
|
97
|
+
// ./prop.loading
|
|
98
|
+
&.loading {
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
|
|
101
|
+
.c-btn__container {
|
|
102
|
+
opacity: 0;
|
|
103
|
+
pointer-events: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.c-btn__loading {
|
|
107
|
+
opacity: 1;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
// ./prop.loading
|
|
65
111
|
|
|
66
112
|
button,
|
|
67
113
|
input,
|
|
@@ -188,5 +234,31 @@ import { getPropValidator } from '../assets/js/helpers.js'
|
|
|
188
234
|
}
|
|
189
235
|
}
|
|
190
236
|
// ./prop.variant
|
|
237
|
+
|
|
238
|
+
&__loading {
|
|
239
|
+
position: absolute;
|
|
240
|
+
left: 50%;
|
|
241
|
+
top: 50%;
|
|
242
|
+
transform: translate(-50%, -50%);
|
|
243
|
+
display: flex;
|
|
244
|
+
align-items: center;
|
|
245
|
+
justify-content: center;
|
|
246
|
+
opacity: 0;
|
|
247
|
+
pointer-events: none;
|
|
248
|
+
|
|
249
|
+
svg {
|
|
250
|
+
animation: animation-rotation steps(100) 1.5s infinite;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
@keyframes animation-rotation {
|
|
256
|
+
0% {
|
|
257
|
+
transform: rotate(0deg);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
100% {
|
|
261
|
+
transform: rotate(360deg);
|
|
262
|
+
}
|
|
191
263
|
}
|
|
192
264
|
</style>
|
|
@@ -36,6 +36,10 @@
|
|
|
36
36
|
<path d="M12 16V16.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
37
37
|
</svg>
|
|
38
38
|
|
|
39
|
+
<svg v-if="iconId === 'loading'" :width="w" :height="h" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
40
|
+
<path d="M10 0C8.68678 -1.489e-08 7.38642 0.258657 6.17317 0.761204C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C2.00035 3.85752 1.26375 4.95991 0.761204 6.17317C0.258657 7.38642 -1.489e-08 8.68678 0 10C-4.96335e-08 11.3132 0.258657 12.6136 0.761204 13.8268C1.26375 15.0401 2.00035 16.1425 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C11.3132 20 12.6136 19.7413 13.8268 19.2388C15.0401 18.7362 16.1425 17.9997 17.0711 17.0711C17.9997 16.1425 18.7362 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761204C12.6136 0.258657 11.3132 -4.96335e-08 10 0ZM10 1C11.314 1.00028 12.6119 1.28828 13.8027 1.84375L12.959 3.65625C12.0324 3.22403 11.0224 3.00003 10 3C8.97758 3.00003 7.96758 3.22403 7.04102 3.65625L6.19922 1.84961C7.38895 1.2924 8.68625 1.0024 10 1ZM10 4C10.7879 4 11.5681 4.15519 12.2961 4.45672C13.0241 4.75825 13.6855 5.20021 14.2426 5.75736C14.7998 6.31451 15.2417 6.97595 15.5433 7.7039C15.8448 8.43185 16 9.21207 16 10C16 10.7879 15.8448 11.5681 15.5433 12.2961C15.2417 13.0241 14.7998 13.6855 14.2426 14.2426C13.6855 14.7998 13.0241 15.2417 12.2961 15.5433C11.5681 15.8448 10.7879 16 10 16C8.4087 16 6.88258 15.3679 5.75736 14.2426C4.63214 13.1174 4 11.5913 4 10C4 8.4087 4.63214 6.88258 5.75736 5.75736C6.88258 4.63214 8.4087 4 10 4Z" fill="white"/>
|
|
41
|
+
</svg>
|
|
42
|
+
|
|
39
43
|
</div>
|
|
40
44
|
</template>
|
|
41
45
|
|
package/src/pages/index.vue
CHANGED
|
@@ -32,6 +32,12 @@
|
|
|
32
32
|
disable
|
|
33
33
|
</CButton>
|
|
34
34
|
</div>
|
|
35
|
+
|
|
36
|
+
<div class="table__item">
|
|
37
|
+
<CButton :loading="true">
|
|
38
|
+
loading
|
|
39
|
+
</CButton>
|
|
40
|
+
</div>
|
|
35
41
|
</div>
|
|
36
42
|
<!-- ./tonal -->
|
|
37
43
|
|
|
@@ -58,6 +64,12 @@
|
|
|
58
64
|
disable
|
|
59
65
|
</CButton>
|
|
60
66
|
</div>
|
|
67
|
+
|
|
68
|
+
<div class="table__item">
|
|
69
|
+
<CButton :loading="true" variant="outlined">
|
|
70
|
+
loading
|
|
71
|
+
</CButton>
|
|
72
|
+
</div>
|
|
61
73
|
</div>
|
|
62
74
|
<!-- ./outlined -->
|
|
63
75
|
|
|
@@ -84,6 +96,12 @@
|
|
|
84
96
|
disable
|
|
85
97
|
</CButton>
|
|
86
98
|
</div>
|
|
99
|
+
|
|
100
|
+
<div class="table__item">
|
|
101
|
+
<CButton :loading="true" variant="text">
|
|
102
|
+
loading
|
|
103
|
+
</CButton>
|
|
104
|
+
</div>
|
|
87
105
|
</div>
|
|
88
106
|
<!-- ./text -->
|
|
89
107
|
|
|
@@ -110,6 +128,12 @@
|
|
|
110
128
|
disable
|
|
111
129
|
</CButton>
|
|
112
130
|
</div>
|
|
131
|
+
|
|
132
|
+
<div class="table__item">
|
|
133
|
+
<CButton :loading="true" color="black">
|
|
134
|
+
loading
|
|
135
|
+
</CButton>
|
|
136
|
+
</div>
|
|
113
137
|
</div>
|
|
114
138
|
<!-- ./tonal -->
|
|
115
139
|
</div>
|
|
@@ -146,6 +170,12 @@
|
|
|
146
170
|
disable
|
|
147
171
|
</CButton>
|
|
148
172
|
</div>
|
|
173
|
+
|
|
174
|
+
<div class="table__item">
|
|
175
|
+
<CButton size="md" :loading="true">
|
|
176
|
+
loading
|
|
177
|
+
</CButton>
|
|
178
|
+
</div>
|
|
149
179
|
</div>
|
|
150
180
|
<!-- ./tonal -->
|
|
151
181
|
|
|
@@ -172,6 +202,12 @@
|
|
|
172
202
|
disable
|
|
173
203
|
</CButton>
|
|
174
204
|
</div>
|
|
205
|
+
|
|
206
|
+
<div class="table__item">
|
|
207
|
+
<CButton size="md" :loading="true" variant="outlined">
|
|
208
|
+
loading
|
|
209
|
+
</CButton>
|
|
210
|
+
</div>
|
|
175
211
|
</div>
|
|
176
212
|
<!-- ./outlined -->
|
|
177
213
|
|
|
@@ -198,6 +234,12 @@
|
|
|
198
234
|
disable
|
|
199
235
|
</CButton>
|
|
200
236
|
</div>
|
|
237
|
+
|
|
238
|
+
<div class="table__item">
|
|
239
|
+
<CButton size="md" :loading="true" variant="text">
|
|
240
|
+
loading
|
|
241
|
+
</CButton>
|
|
242
|
+
</div>
|
|
201
243
|
</div>
|
|
202
244
|
<!-- ./text -->
|
|
203
245
|
|
|
@@ -224,6 +266,12 @@
|
|
|
224
266
|
disable
|
|
225
267
|
</CButton>
|
|
226
268
|
</div>
|
|
269
|
+
|
|
270
|
+
<div class="table__item">
|
|
271
|
+
<CButton size="md" :loading="true" color="black">
|
|
272
|
+
loading
|
|
273
|
+
</CButton>
|
|
274
|
+
</div>
|
|
227
275
|
</div>
|
|
228
276
|
<!-- ./tonal -->
|
|
229
277
|
</div>
|
|
@@ -260,6 +308,12 @@
|
|
|
260
308
|
disable
|
|
261
309
|
</CButton>
|
|
262
310
|
</div>
|
|
311
|
+
|
|
312
|
+
<div class="table__item">
|
|
313
|
+
<CButton size="sm" :loading="true">
|
|
314
|
+
loading
|
|
315
|
+
</CButton>
|
|
316
|
+
</div>
|
|
263
317
|
</div>
|
|
264
318
|
<!-- ./tonal -->
|
|
265
319
|
|
|
@@ -286,6 +340,12 @@
|
|
|
286
340
|
disable
|
|
287
341
|
</CButton>
|
|
288
342
|
</div>
|
|
343
|
+
|
|
344
|
+
<div class="table__item">
|
|
345
|
+
<CButton size="sm" :loading="true">
|
|
346
|
+
loading
|
|
347
|
+
</CButton>
|
|
348
|
+
</div>
|
|
289
349
|
</div>
|
|
290
350
|
<!-- ./outlined -->
|
|
291
351
|
|
|
@@ -312,6 +372,12 @@
|
|
|
312
372
|
disable
|
|
313
373
|
</CButton>
|
|
314
374
|
</div>
|
|
375
|
+
|
|
376
|
+
<div class="table__item">
|
|
377
|
+
<CButton size="sm" :loading="true" variant="text">
|
|
378
|
+
loading
|
|
379
|
+
</CButton>
|
|
380
|
+
</div>
|
|
315
381
|
</div>
|
|
316
382
|
<!-- ./text -->
|
|
317
383
|
|
|
@@ -338,6 +404,12 @@
|
|
|
338
404
|
disable
|
|
339
405
|
</CButton>
|
|
340
406
|
</div>
|
|
407
|
+
|
|
408
|
+
<div class="table__item">
|
|
409
|
+
<CButton size="sm" :loading="true" color="black">
|
|
410
|
+
loading
|
|
411
|
+
</CButton>
|
|
412
|
+
</div>
|
|
341
413
|
</div>
|
|
342
414
|
<!-- ./tonal -->
|
|
343
415
|
</div>
|