@redseed/redseed-ui-vue3 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/index.js +1 -0
  2. package/package.json +2 -1
  3. package/src/components/Card/Card.vue +1 -1
  4. package/src/components/DropdownMenu/DropdownOption.vue +1 -1
  5. package/src/components/Form/FormSlot.vue +3 -3
  6. package/src/components/FormField/FormFieldCheckbox.vue +1 -1
  7. package/src/components/FormField/FormFieldSelect.vue +2 -2
  8. package/src/components/FormField/FormFieldSlot.vue +3 -3
  9. package/src/components/FormField/FormFieldText.vue +1 -1
  10. package/src/components/FormField/FormFieldTextSuffix.vue +2 -2
  11. package/src/components/Image/Image.vue +3 -3
  12. package/src/components/List/ListItem.vue +4 -4
  13. package/src/components/Loader/Loader.vue +38 -0
  14. package/src/components/Loader/LottieCubes.json +742 -0
  15. package/src/components/Loader/index.js +5 -0
  16. package/src/components/MessageBox/MessageBox.vue +5 -5
  17. package/src/components/MetaInfo/MetaInfo.vue +1 -1
  18. package/src/components/Modal/Modal.vue +3 -3
  19. package/src/components/Pagination/Pagination.vue +1 -1
  20. package/src/components/Pagination/PaginationItem.vue +3 -3
  21. package/src/components/Progress/ProgressCircle.vue +1 -1
package/index.js CHANGED
@@ -10,6 +10,7 @@ export * from './src/components/FormField'
10
10
  export * from './src/components/Image'
11
11
  export * from './src/components/Link'
12
12
  export * from './src/components/List'
13
+ export * from './src/components/Loader'
13
14
  export * from './src/components/Logo'
14
15
  export * from './src/components/MessageBox'
15
16
  export * from './src/components/MetaInfo'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-vue3",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "RedSeed UI Vue 3 components",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -13,6 +13,7 @@
13
13
  "@heroicons/vue": "^2.1.5",
14
14
  "@vueuse/components": "^10.11.0",
15
15
  "@vueuse/core": "^10.11.0",
16
+ "lottie-web": "^5.12.2",
16
17
  "vue": "^3.4.34"
17
18
  }
18
19
  }
package/src/components/Card/Card.vue CHANGED
@@ -80,7 +80,7 @@ function clicked() {
80
80
  .rsui-card {
81
81
  @apply flex flex-col;
82
82
  @apply select-none transition duration-200;
83
- @apply border border-gray-100 rounded-lg bg-white shadow-full-light;
83
+ @apply rounded-lg bg-white shadow-full-light;
84
84
  &--hoverable {
85
85
  @apply hover:shadow-md;
86
86
  }
package/src/components/DropdownMenu/DropdownOption.vue CHANGED
@@ -11,6 +11,6 @@ const emit = defineEmits(['click'])
11
11
  <style lang="scss" scoped>
12
12
  .rsui-dropdown-option {
13
13
  @apply cursor-pointer p-4 bg-white rounded-md text-base text-rsui-default transition;
14
- @apply hover:bg-gray-200;
14
+ @apply hover:bg-rsui-grey-200;
15
15
  }
16
16
  </style>
package/src/components/Form/FormSlot.vue CHANGED
@@ -37,7 +37,7 @@
37
37
  .rsui-form-slot {
38
38
  @apply min-w-80 sm:min-w-96 sm:w-112;
39
39
  @apply flex flex-col sm:justify-center items-center;
40
- @apply text-base text-gray-700;
40
+ @apply text-base text-rsui-default;
41
41
 
42
42
  &__image {
43
43
  @apply mb-8;
@@ -47,11 +47,11 @@
47
47
  @apply w-full relative flex justify-center mb-2;
48
48
 
49
49
  &-line {
50
- @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
50
+ @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-rsui-grey-200 after:h-px after:w-full;
51
51
  }
52
52
 
53
53
  &-or {
54
- @apply relative z-1 bg-white px-6;
54
+ @apply relative z-1 bg-white px-6 text-rsui-default;
55
55
  }
56
56
  }
57
57
 
package/src/components/FormField/FormFieldCheckbox.vue CHANGED
@@ -61,7 +61,7 @@ function check(event) {
61
61
  input[type="checkbox"] {
62
62
  @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none;
63
63
  @apply w-full h-full text-rsui-default border border-rsui-grey-200 text-transparent bg-none;
64
- @apply focus:ring focus:ring-rsui-light focus:border-rsui-light;
64
+ @apply focus:ring focus:ring-highlight focus:border-highlight;
65
65
  @apply invalid:border-danger invalid:ring-0;
66
66
  @apply disabled:text-rsui-light disabled:bg-rsui-grey-200;
67
67
  }
package/src/components/FormField/FormFieldSelect.vue CHANGED
@@ -159,7 +159,7 @@ function choose(option) {
159
159
  select {
160
160
  @apply pl-5 pr-14 truncate;
161
161
  @apply appearance-none rounded-full cursor-pointer;
162
- @apply focus:ring focus:ring-rsui-light focus:border-rsui-light;
162
+ @apply focus:ring focus:ring-highlight focus:border-highlight;
163
163
  option {
164
164
  @apply hidden;
165
165
  }
@@ -176,7 +176,7 @@ function choose(option) {
176
176
 
177
177
  &__option {
178
178
  @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-md;
179
- @apply bg-white hover:bg-gray-200 text-rsui-default transition;
179
+ @apply bg-white hover:bg-rsui-grey-200 text-rsui-default transition;
180
180
  &--disabled {
181
181
  @apply opacity-50 hover:bg-white cursor-auto;
182
182
  }
package/src/components/FormField/FormFieldSlot.vue CHANGED
@@ -62,7 +62,7 @@ const formFieldSlotClass = computed(() => [
62
62
 
63
63
  &__label {
64
64
  label {
65
- @apply font-medium text-base text-gray-700;
65
+ @apply font-medium text-base text-rsui-default;
66
66
  }
67
67
  }
68
68
 
@@ -71,11 +71,11 @@ const formFieldSlotClass = computed(() => [
71
71
  }
72
72
 
73
73
  &__help {
74
- @apply text-xs text-gray-500;
74
+ @apply text-xs text-rsui-light;
75
75
  }
76
76
 
77
77
  &__error {
78
- @apply text-sm text-red-500;
78
+ @apply text-sm text-danger;
79
79
  }
80
80
  }
81
81
  </style>
package/src/components/FormField/FormFieldText.vue CHANGED
@@ -66,7 +66,7 @@ const inputElement = ref(null)
66
66
  @apply text-base transition;
67
67
  @apply w-full border rounded-md ring-0;
68
68
  @apply bg-white placeholder-rsui-light border-rsui-grey-200;
69
- @apply has-[:focus]:ring has-[:focus]:ring-rsui-light has-[:focus]:border-rsui-light;
69
+ @apply has-[:focus]:ring has-[:focus]:ring-highlight has-[:focus]:border-highlight;
70
70
  @apply has-[:invalid]:border-danger has-[:invalid]:ring-0;
71
71
  @apply has-[:disabled]:text-rsui-light has-[:disabled]:bg-rsui-grey-200 has-[:disbaled]:ring-0;
72
72
  }
package/src/components/FormField/FormFieldTextSuffix.vue CHANGED
@@ -23,8 +23,8 @@ import FormFieldText from './FormFieldText.vue'
23
23
  <style lang="scss" scoped>
24
24
  .rsui-form-field-suffix {
25
25
  :deep(.rsui-form-field-text__suffix) {
26
- @apply border-l rounded-r-md;
27
- @apply bg-rsui-grey-200 border-rsui-light;
26
+ @apply border rounded-r-md;
27
+ @apply bg-rsui-grey-200 border-l-rsui-light border-r-rsui-grey-200;
28
28
  }
29
29
  }
30
30
  </style>
package/src/components/Image/Image.vue CHANGED
@@ -122,18 +122,18 @@ const imageClass = computed(() => [
122
122
  </template>
123
123
  <style lang="scss" scoped>
124
124
  .rsui-image {
125
- @apply w-full h-full flex items-center justify-center bg-gray-100 overflow-hidden;
125
+ @apply w-full h-full flex items-center justify-center bg-rsui-grey-100 overflow-hidden;
126
126
  &--rounded {
127
127
  @apply rounded-lg;
128
128
  }
129
129
  &__empty {
130
- @apply flex items-center justify-center text-gray-300;
130
+ @apply flex items-center justify-center text-rsui-light;
131
131
  }
132
132
  &__empty-icon {
133
133
  @apply w-1/4;
134
134
  }
135
135
  &__message {
136
- @apply text-gray-400 text-sm;
136
+ @apply text-rsui-light text-sm;
137
137
  }
138
138
  picture {
139
139
  @apply w-full h-full;
package/src/components/List/ListItem.vue CHANGED
@@ -150,9 +150,9 @@ function clickItem(event) {
150
150
  }
151
151
  &__bg {
152
152
  @apply absolute inset-0 bg-white transition;
153
- @apply hover:bg-gray-100 peer-hover:bg-gray-100;
153
+ @apply hover:bg-rsui-grey-200 peer-hover:bg-rsui-grey-200;
154
154
  &--clickable {
155
- @apply active:bg-gray-200;
155
+ @apply active:bg-rsui-grey-200;
156
156
  }
157
157
  }
158
158
  &__body {
@@ -162,10 +162,10 @@ function clickItem(event) {
162
162
  @apply absolute top-0 ml-1 -left-10 lg:-left-14;
163
163
  @apply aspect-square overflow-hidden size-9 lg:size-12;
164
164
  &-placeholder {
165
- @apply size-full rounded-full overflow-hidden bg-neutral-200;
165
+ @apply size-full rounded-full overflow-hidden bg-rsui-grey-100;
166
166
  @apply flex items-center justify-center;
167
167
  svg {
168
- @apply size-5 lg:size-6 fill-neutral-400;
168
+ @apply size-5 lg:size-6 fill-rsui-grey-300;
169
169
  }
170
170
  }
171
171
  }
package/src/components/Loader/Loader.vue ADDED
@@ -0,0 +1,38 @@
1
+ <script setup>
2
+ import { ref, onMounted } from 'vue'
3
+ import lottie from 'lottie-web'
4
+ import LottieCubes from './LottieCubes.json'
5
+
6
+ const loaderElement = ref(null)
7
+
8
+ function load() {
9
+ if (!lottie) return
10
+ if (!LottieCubes) return
11
+ if (!loaderElement.value) return
12
+
13
+ lottie.loadAnimation({
14
+ container: loaderElement.value,
15
+ renderer: 'svg',
16
+ loop: true,
17
+ autoplay: true,
18
+ animationData: LottieCubes
19
+ })
20
+ }
21
+
22
+ onMounted(load)
23
+ </script>
24
+ <template>
25
+ <div ref="loaderElement"
26
+ class="rsui-loader"
27
+ ></div>
28
+ </template>
29
+ <style lang="scss" scoped>
30
+ .rsui-loader {
31
+ @apply size-24 shrink-0 grow-0;
32
+ :deep(svg) {
33
+ path {
34
+ @apply fill-primary;
35
+ }
36
+ }
37
+ }
38
+ </style>
package/src/components/Loader/LottieCubes.json ADDED
@@ -0,0 +1,742 @@
1
+ {
2
+ "v": "5.7.5",
3
+ "fr": 100,
4
+ "ip": 0,
5
+ "op": 50,
6
+ "w": 400,
7
+ "h": 400,
8
+ "nm": "Comp 1",
9
+ "ddd": 0,
10
+ "assets": [],
11
+ "layers": [
12
+ {
13
+ "ddd": 0,
14
+ "ind": 1,
15
+ "ty": 3,
16
+ "nm": "",
17
+ "sr": 1,
18
+ "ks": {
19
+ "o": {
20
+ "a": 0,
21
+ "k": 100,
22
+ "ix": 2
23
+ },
24
+ "r": {
25
+ "a": 1,
26
+ "k": [
27
+ {
28
+ "t": 0,
29
+ "s": [
30
+ 0
31
+ ],
32
+ "i": {
33
+ "x": [
34
+ 1
35
+ ],
36
+ "y": [
37
+ 1
38
+ ]
39
+ },
40
+ "o": {
41
+ "x": [
42
+ 0
43
+ ],
44
+ "y": [
45
+ 0
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "t": 25,
51
+ "s": [
52
+ 45
53
+ ],
54
+ "i": {
55
+ "x": [
56
+ 1
57
+ ],
58
+ "y": [
59
+ 1
60
+ ]
61
+ },
62
+ "o": {
63
+ "x": [
64
+ 0
65
+ ],
66
+ "y": [
67
+ 0
68
+ ]
69
+ }
70
+ },
71
+ {
72
+ "t": 50,
73
+ "s": [
74
+ 90
75
+ ],
76
+ "i": {
77
+ "x": [
78
+ 1
79
+ ],
80
+ "y": [
81
+ 1
82
+ ]
83
+ },
84
+ "o": {
85
+ "x": [
86
+ 0
87
+ ],
88
+ "y": [
89
+ 0
90
+ ]
91
+ }
92
+ }
93
+ ],
94
+ "ix": 2
95
+ },
96
+ "p": {
97
+ "a": 0,
98
+ "k": [
99
+ 200,
100
+ 200
101
+ ],
102
+ "ix": 2
103
+ },
104
+ "a": {
105
+ "a": 0,
106
+ "k": [
107
+ 200.5,
108
+ 200
109
+ ],
110
+ "ix": 2
111
+ },
112
+ "s": {
113
+ "a": 0,
114
+ "k": [
115
+ 100,
116
+ 100
117
+ ],
118
+ "ix": 2
119
+ }
120
+ },
121
+ "ao": 0,
122
+ "ip": 0,
123
+ "op": 50,
124
+ "st": 0,
125
+ "bm": 0,
126
+ "hd": false
127
+ },
128
+ {
129
+ "ddd": 0,
130
+ "ind": 2,
131
+ "ty": 4,
132
+ "nm": ".cubetwo",
133
+ "sr": 1,
134
+ "ks": {
135
+ "o": {
136
+ "a": 0,
137
+ "k": 100,
138
+ "ix": 2
139
+ },
140
+ "r": {
141
+ "a": 0,
142
+ "k": 0,
143
+ "ix": 2
144
+ },
145
+ "p": {
146
+ "a": 0,
147
+ "k": [
148
+ 0,
149
+ 0
150
+ ],
151
+ "ix": 2
152
+ },
153
+ "a": {
154
+ "a": 0,
155
+ "k": [
156
+ 0,
157
+ 0
158
+ ],
159
+ "ix": 2
160
+ },
161
+ "s": {
162
+ "a": 0,
163
+ "k": [
164
+ 100,
165
+ 100
166
+ ],
167
+ "ix": 2
168
+ }
169
+ },
170
+ "ao": 0,
171
+ "hd": false,
172
+ "parent": 1,
173
+ "shapes": [
174
+ {
175
+ "ty": "gr",
176
+ "hd": false,
177
+ "it": [
178
+ {
179
+ "ty": "rc",
180
+ "hd": false,
181
+ "d": 1,
182
+ "s": {
183
+ "a": 0,
184
+ "k": [
185
+ 121,
186
+ 121
187
+ ],
188
+ "ix": 2
189
+ },
190
+ "p": {
191
+ "a": 0,
192
+ "k": [
193
+ 0,
194
+ 0
195
+ ],
196
+ "ix": 2
197
+ },
198
+ "r": {
199
+ "a": 0,
200
+ "k": 16,
201
+ "ix": 2
202
+ }
203
+ },
204
+ {
205
+ "ty": "fl",
206
+ "c": {
207
+ "a": 0,
208
+ "k": [
209
+ 0.19607843137254902,
210
+ 0.23529411764705882,
211
+ 0.27058823529411763
212
+ ],
213
+ "ix": 2
214
+ },
215
+ "o": {
216
+ "a": 0,
217
+ "k": 100,
218
+ "ix": 2
219
+ },
220
+ "r": 1,
221
+ "bm": 0,
222
+ "nm": "Fill 1",
223
+ "mn": "ADBE Vector Graphic - Fill",
224
+ "hd": false
225
+ },
226
+ {
227
+ "ty": "tm",
228
+ "s": {
229
+ "a": 0,
230
+ "k": 0,
231
+ "ix": 2
232
+ },
233
+ "e": {
234
+ "a": 0,
235
+ "k": 100,
236
+ "ix": 2
237
+ },
238
+ "o": {
239
+ "a": 0,
240
+ "k": 0,
241
+ "ix": 2
242
+ },
243
+ "m": 1,
244
+ "hd": false
245
+ },
246
+ {
247
+ "ty": "tr",
248
+ "hd": false,
249
+ "p": {
250
+ "a": 0,
251
+ "k": [
252
+ 274.5,
253
+ 274.5
254
+ ],
255
+ "ix": 2
256
+ },
257
+ "a": {
258
+ "a": 0,
259
+ "k": [
260
+ 0,
261
+ 0
262
+ ],
263
+ "ix": 2
264
+ },
265
+ "s": {
266
+ "a": 0,
267
+ "k": [
268
+ 100,
269
+ 100
270
+ ],
271
+ "ix": 2
272
+ },
273
+ "r": {
274
+ "a": 0,
275
+ "k": 0,
276
+ "ix": 2
277
+ },
278
+ "o": {
279
+ "a": 0,
280
+ "k": 100,
281
+ "ix": 2
282
+ },
283
+ "sk": {
284
+ "a": 0,
285
+ "k": 0,
286
+ "ix": 2
287
+ },
288
+ "sa": {
289
+ "a": 0,
290
+ "k": 0,
291
+ "ix": 2
292
+ }
293
+ }
294
+ ]
295
+ }
296
+ ],
297
+ "ip": 0,
298
+ "op": 50,
299
+ "st": 0,
300
+ "bm": 0
301
+ },
302
+ {
303
+ "ddd": 0,
304
+ "ind": 3,
305
+ "ty": 4,
306
+ "nm": ".cubethree",
307
+ "sr": 1,
308
+ "ks": {
309
+ "o": {
310
+ "a": 0,
311
+ "k": 100,
312
+ "ix": 2
313
+ },
314
+ "r": {
315
+ "a": 0,
316
+ "k": 0,
317
+ "ix": 2
318
+ },
319
+ "p": {
320
+ "a": 0,
321
+ "k": [
322
+ 0,
323
+ 0
324
+ ],
325
+ "ix": 2
326
+ },
327
+ "a": {
328
+ "a": 0,
329
+ "k": [
330
+ 0,
331
+ 0
332
+ ],
333
+ "ix": 2
334
+ },
335
+ "s": {
336
+ "a": 0,
337
+ "k": [
338
+ 100,
339
+ 100
340
+ ],
341
+ "ix": 2
342
+ }
343
+ },
344
+ "ao": 0,
345
+ "hd": false,
346
+ "parent": 1,
347
+ "shapes": [
348
+ {
349
+ "ty": "gr",
350
+ "hd": false,
351
+ "it": [
352
+ {
353
+ "ty": "rc",
354
+ "hd": false,
355
+ "d": 1,
356
+ "s": {
357
+ "a": 0,
358
+ "k": [
359
+ 122,
360
+ 121
361
+ ],
362
+ "ix": 2
363
+ },
364
+ "p": {
365
+ "a": 0,
366
+ "k": [
367
+ 0,
368
+ 0
369
+ ],
370
+ "ix": 2
371
+ },
372
+ "r": {
373
+ "a": 0,
374
+ "k": 16,
375
+ "ix": 2
376
+ }
377
+ },
378
+ {
379
+ "ty": "fl",
380
+ "c": {
381
+ "a": 0,
382
+ "k": [
383
+ 0.19607843137254902,
384
+ 0.23529411764705882,
385
+ 0.27058823529411763
386
+ ],
387
+ "ix": 2
388
+ },
389
+ "o": {
390
+ "a": 0,
391
+ "k": 100,
392
+ "ix": 2
393
+ },
394
+ "r": 1,
395
+ "bm": 0,
396
+ "nm": "Fill 1",
397
+ "mn": "ADBE Vector Graphic - Fill",
398
+ "hd": false
399
+ },
400
+ {
401
+ "ty": "tm",
402
+ "s": {
403
+ "a": 0,
404
+ "k": 0,
405
+ "ix": 2
406
+ },
407
+ "e": {
408
+ "a": 0,
409
+ "k": 100,
410
+ "ix": 2
411
+ },
412
+ "o": {
413
+ "a": 0,
414
+ "k": 0,
415
+ "ix": 2
416
+ },
417
+ "m": 1,
418
+ "hd": false
419
+ },
420
+ {
421
+ "ty": "tr",
422
+ "hd": false,
423
+ "p": {
424
+ "a": 0,
425
+ "k": [
426
+ 126,
427
+ 274.5
428
+ ],
429
+ "ix": 2
430
+ },
431
+ "a": {
432
+ "a": 0,
433
+ "k": [
434
+ 0,
435
+ 0
436
+ ],
437
+ "ix": 2
438
+ },
439
+ "s": {
440
+ "a": 0,
441
+ "k": [
442
+ 100,
443
+ 100
444
+ ],
445
+ "ix": 2
446
+ },
447
+ "r": {
448
+ "a": 0,
449
+ "k": 0,
450
+ "ix": 2
451
+ },
452
+ "o": {
453
+ "a": 0,
454
+ "k": 100,
455
+ "ix": 2
456
+ },
457
+ "sk": {
458
+ "a": 0,
459
+ "k": 0,
460
+ "ix": 2
461
+ },
462
+ "sa": {
463
+ "a": 0,
464
+ "k": 0,
465
+ "ix": 2
466
+ }
467
+ }
468
+ ]
469
+ }
470
+ ],
471
+ "ip": 0,
472
+ "op": 50,
473
+ "st": 0,
474
+ "bm": 0
475
+ },
476
+ {
477
+ "ddd": 0,
478
+ "ind": 4,
479
+ "ty": 4,
480
+ "nm": ".cubeone",
481
+ "sr": 1,
482
+ "ks": {
483
+ "o": {
484
+ "a": 0,
485
+ "k": 100,
486
+ "ix": 2
487
+ },
488
+ "r": {
489
+ "a": 0,
490
+ "k": 0,
491
+ "ix": 2
492
+ },
493
+ "p": {
494
+ "a": 0,
495
+ "k": [
496
+ 0,
497
+ 0
498
+ ],
499
+ "ix": 2
500
+ },
501
+ "a": {
502
+ "a": 0,
503
+ "k": [
504
+ 0,
505
+ 0
506
+ ],
507
+ "ix": 2
508
+ },
509
+ "s": {
510
+ "a": 0,
511
+ "k": [
512
+ 100,
513
+ 100
514
+ ],
515
+ "ix": 2
516
+ }
517
+ },
518
+ "ao": 0,
519
+ "hd": false,
520
+ "parent": 1,
521
+ "shapes": [
522
+ {
523
+ "ty": "gr",
524
+ "hd": false,
525
+ "it": [
526
+ {
527
+ "ty": "rc",
528
+ "hd": false,
529
+ "d": 1,
530
+ "s": {
531
+ "a": 0,
532
+ "k": [
533
+ 122,
534
+ 122
535
+ ],
536
+ "ix": 2
537
+ },
538
+ "p": {
539
+ "a": 0,
540
+ "k": [
541
+ 0,
542
+ 0
543
+ ],
544
+ "ix": 2
545
+ },
546
+ "r": {
547
+ "a": 0,
548
+ "k": 16,
549
+ "ix": 2
550
+ }
551
+ },
552
+ {
553
+ "ty": "fl",
554
+ "c": {
555
+ "a": 0,
556
+ "k": [
557
+ 0.19607843137254902,
558
+ 0.23529411764705882,
559
+ 0.27058823529411763
560
+ ],
561
+ "ix": 2
562
+ },
563
+ "o": {
564
+ "a": 0,
565
+ "k": 100,
566
+ "ix": 2
567
+ },
568
+ "r": 1,
569
+ "bm": 0,
570
+ "nm": "Fill 1",
571
+ "mn": "ADBE Vector Graphic - Fill",
572
+ "hd": false
573
+ },
574
+ {
575
+ "ty": "tm",
576
+ "s": {
577
+ "a": 0,
578
+ "k": 0,
579
+ "ix": 2
580
+ },
581
+ "e": {
582
+ "a": 0,
583
+ "k": 100,
584
+ "ix": 2
585
+ },
586
+ "o": {
587
+ "a": 0,
588
+ "k": 0,
589
+ "ix": 2
590
+ },
591
+ "m": 1,
592
+ "hd": false
593
+ },
594
+ {
595
+ "ty": "tr",
596
+ "hd": false,
597
+ "p": {
598
+ "a": 1,
599
+ "k": [
600
+ {
601
+ "t": 0,
602
+ "s": [
603
+ 126,
604
+ 126
605
+ ],
606
+ "i": {
607
+ "x": [
608
+ 1
609
+ ],
610
+ "y": [
611
+ 1
612
+ ]
613
+ },
614
+ "o": {
615
+ "x": [
616
+ 0
617
+ ],
618
+ "y": [
619
+ 0
620
+ ]
621
+ }
622
+ },
623
+ {
624
+ "t": 25,
625
+ "s": [
626
+ 201.9141998291016,
627
+ 126.4608993530273
628
+ ],
629
+ "i": {
630
+ "x": [
631
+ 1
632
+ ],
633
+ "y": [
634
+ 1
635
+ ]
636
+ },
637
+ "o": {
638
+ "x": [
639
+ 0
640
+ ],
641
+ "y": [
642
+ 0
643
+ ]
644
+ }
645
+ },
646
+ {
647
+ "t": 38,
648
+ "s": [
649
+ 275,
650
+ 125.9999923706055
651
+ ],
652
+ "i": {
653
+ "x": [
654
+ 1
655
+ ],
656
+ "y": [
657
+ 1
658
+ ]
659
+ },
660
+ "o": {
661
+ "x": [
662
+ 0
663
+ ],
664
+ "y": [
665
+ 0
666
+ ]
667
+ }
668
+ },
669
+ {
670
+ "t": 50,
671
+ "s": [
672
+ 275,
673
+ 126
674
+ ],
675
+ "i": {
676
+ "x": [
677
+ 1
678
+ ],
679
+ "y": [
680
+ 1
681
+ ]
682
+ },
683
+ "o": {
684
+ "x": [
685
+ 0
686
+ ],
687
+ "y": [
688
+ 0
689
+ ]
690
+ }
691
+ }
692
+ ],
693
+ "ix": 2
694
+ },
695
+ "a": {
696
+ "a": 0,
697
+ "k": [
698
+ 0,
699
+ 0
700
+ ],
701
+ "ix": 2
702
+ },
703
+ "s": {
704
+ "a": 0,
705
+ "k": [
706
+ 100,
707
+ 100
708
+ ],
709
+ "ix": 2
710
+ },
711
+ "r": {
712
+ "a": 0,
713
+ "k": 0,
714
+ "ix": 2
715
+ },
716
+ "o": {
717
+ "a": 0,
718
+ "k": 100,
719
+ "ix": 2
720
+ },
721
+ "sk": {
722
+ "a": 0,
723
+ "k": 0,
724
+ "ix": 2
725
+ },
726
+ "sa": {
727
+ "a": 0,
728
+ "k": 0,
729
+ "ix": 2
730
+ }
731
+ }
732
+ ]
733
+ }
734
+ ],
735
+ "ip": 0,
736
+ "op": 50,
737
+ "st": 0,
738
+ "bm": 0
739
+ }
740
+ ],
741
+ "markers": []
742
+ }
package/src/components/Loader/index.js ADDED
@@ -0,0 +1,5 @@
1
+ import Loader from './Loader.vue'
2
+
3
+ export {
4
+ Loader,
5
+ }
package/src/components/MessageBox/MessageBox.vue CHANGED
@@ -42,17 +42,17 @@ function close() {
42
42
  </template>
43
43
  <style lang="scss" scoped>
44
44
  .rsui-message-box {
45
- @apply border border-gray-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
45
+ @apply border border-rsui-grey-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
46
46
  &__head {
47
47
  @apply flex justify-between items-center;
48
48
  }
49
49
  &__close {
50
- @apply w-10 h-10;
50
+ @apply size-10;
51
51
  &-icon {
52
- @apply w-10 h-10 cursor-pointer rounded-lg flex items-center justify-center;
53
- @apply hover:bg-gray-100 transition duration-200;
52
+ @apply size-10 cursor-pointer rounded-lg flex items-center justify-center;
53
+ @apply hover:bg-rsui-grey-200 transition duration-200;
54
54
  svg {
55
- @apply w-6 h-6 text-gray-500;
55
+ @apply size-6 text-rsui-light;
56
56
  }
57
57
  }
58
58
  }
package/src/components/MetaInfo/MetaInfo.vue CHANGED
@@ -40,7 +40,7 @@ const emit = defineEmits(['click'])
40
40
  @apply font-semibold text-sm text-rsui-default leading-4;
41
41
  }
42
42
  &__help {
43
- @apply text-gray-400 size-4 cursor-pointer;
43
+ @apply text-rsui-light size-4 cursor-pointer;
44
44
  svg {
45
45
  @apply size-full;
46
46
  }
package/src/components/Modal/Modal.vue CHANGED
@@ -184,7 +184,7 @@ onUnmounted(() => {
184
184
  &__content {
185
185
  @apply absolute max-h-full inset-x-0 overflow-auto overscroll-contain transform transition-all;
186
186
  @apply border rounded-lg shadow-full md:w-full md:mx-auto mx-4;
187
- @apply bg-gray-100 border-gray-200;
187
+ @apply bg-white border-rsui-grey-200;
188
188
  &--sm {
189
189
  @apply sm:max-w-sm xs:mx-4 sm:mx-auto;
190
190
  }
@@ -207,14 +207,14 @@ onUnmounted(() => {
207
207
 
208
208
  &__header {
209
209
  @apply sticky top-0 z-1;
210
- @apply p-4 bg-gray-100 shrink-0 text-lg font-semibold;
210
+ @apply p-4 bg-rsui-grey-200 shrink-0 text-lg font-semibold;
211
211
  }
212
212
  &__body{
213
213
  @apply p-4 bg-white;
214
214
  }
215
215
  &__footer {
216
216
  @apply sticky bottom-0 z-1;
217
- @apply p-4 bg-gray-100 shrink-0;
217
+ @apply p-4 bg-rsui-grey-200 shrink-0;
218
218
  @apply flex justify-end items-center space-x-2;
219
219
  &--start {
220
220
  @apply justify-start;
package/src/components/Pagination/Pagination.vue CHANGED
@@ -259,7 +259,7 @@ function goToPage(page) {
259
259
  <style lang="scss" scoped>
260
260
  .rsui-pagination {
261
261
  @apply flex flex-nowrap items-center;
262
- @apply w-fit border border-gray-200 rounded-full p-1;
262
+ @apply w-fit border border-rsui-grey-200 rounded-full p-1;
263
263
  @apply divide-x;
264
264
  &__previous {
265
265
  @apply size-full flex items-center pr-1;
package/src/components/Pagination/PaginationItem.vue CHANGED
@@ -46,15 +46,15 @@ function clickItem() {
46
46
  .rsui-pagination-item {
47
47
  @apply inline-flex items-center justify-center overflow-hidden select-none;
48
48
  @apply min-w-9 w-fit h-7 p-1 rounded-md cursor-pointer transition;
49
- @apply bg-white hover:bg-gray-100 text-rsui-medium text-sm;
49
+ @apply bg-white hover:bg-rsui-grey-200 text-rsui-medium text-sm;
50
50
  &--active {
51
- @apply bg-gray-200 hover:bg-gray-200 text-rsui-default cursor-default;
51
+ @apply bg-rsui-grey-200 hover:bg-rsui-grey-200 text-rsui-default cursor-default;
52
52
  }
53
53
  &--freeze {
54
54
  @apply bg-white hover:bg-white cursor-default;
55
55
  }
56
56
  &--disabled {
57
- @apply bg-white hover:bg-white text-gray-200 cursor-default;
57
+ @apply bg-white hover:bg-white text-rsui-grey-200 cursor-default;
58
58
  }
59
59
  }
60
60
  </style>
package/src/components/Progress/ProgressCircle.vue CHANGED
@@ -98,7 +98,7 @@ watchPostEffect(setProgressCircleDash)
98
98
  }
99
99
  }
100
100
  &__background-circle {
101
- @apply stroke-gray-300 stroke-4 fill-none transition-all;
101
+ @apply stroke-rsui-light stroke-4 fill-none transition-all;
102
102
  }
103
103
  &__progress-circle {
104
104
  @apply stroke-primary stroke-4 fill-none transition-all duration-0;