@redseed/redseed-ui-vue3 8.58.0 → 8.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-vue3",
3
- "version": "8.58.0",
3
+ "version": "8.59.0",
4
4
  "description": "RedSeed UI Vue 3 components",
5
5
  "main": "index.js",
6
6
  "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -1,7 +1,5 @@
1
1
  <script setup>
2
- import { ref, computed } from 'vue'
3
- import LottieCubes from './LottieCubes.json'
4
- import { useLottie } from '../../helpers'
2
+ import { computed } from 'vue'
5
3
 
6
4
  const props = defineProps({
7
5
  primary: {
@@ -22,27 +20,62 @@ const props = defineProps({
22
20
  },
23
21
  })
24
22
 
23
+ // Several loaders can share a page, and a duplicated mask id would leave every
24
+ // instance masked by whichever one rendered first.
25
+ const maskId = _.uniqueId('rsui-loader-mask-')
26
+
25
27
  const defaultColor = computed(() => !props.primary && !props.secondary && !props.white)
26
28
 
27
29
  const loaderClass = computed(() => [
28
30
  'rsui-loader',
29
31
  {
30
- 'rsui-loader--primary': props.primary || defaultColor.value,
32
+ 'rsui-loader--brand': defaultColor.value,
33
+ 'rsui-loader--primary': props.primary,
31
34
  'rsui-loader--secondary': props.secondary,
32
35
  'rsui-loader--white': props.white,
33
36
  }
34
37
  ])
35
-
36
- const loaderElement = ref(null)
37
-
38
- useLottie(loaderElement, LottieCubes)
39
38
  </script>
40
39
  <template>
41
- <div ref="loaderElement"
42
- :class="loaderClass"
40
+ <div :class="loaderClass"
43
41
  role="status"
44
42
  aria-busy="true"
45
43
  >
44
+ <svg viewBox="-12 8 116 102"
45
+ xmlns="http://www.w3.org/2000/svg"
46
+ width="120"
47
+ height="106"
48
+ aria-hidden="true"
49
+ focusable="false"
50
+ >
51
+ <defs>
52
+ <!-- The mark is revealed by a single stroked path that paints in
53
+ and retraces back out, so the animation runs on the mask
54
+ rather than on the artwork itself. -->
55
+ <mask :id="maskId">
56
+ <path class="rsui-loader__journey"
57
+ d="M2.4 26.2 L88 26.2 L88 38 L66.6 47.6 L42.8 48.8 L14.3 48.8 L3.6 59.5 L14.3 76.2 L47.6 77.3 L76.2 78.5 L76.2 88 L54.7 90.4 L14.3 91.6"
58
+ fill="none"
59
+ stroke="#fff"
60
+ stroke-width="31"
61
+ stroke-linecap="round"
62
+ stroke-linejoin="round"
63
+ />
64
+ </mask>
65
+ </defs>
66
+
67
+ <g :mask="`url(#${maskId})`"
68
+ class="rsui-loader__mark"
69
+ >
70
+ <path d="M53.841 52.8412C53.841 54.0488 54.7909 55.031 55.9664 55.031L63.84 54.9666C70.2324 54.9505 78.2993 54.9988 84.9171 53.5496C87.912 52.8895 91.2611 49.6047 91.6314 45.9497C92.0018 42.2946 91.245 41.0226 89.4094 38.2853C88.2179 36.5142 87.0425 34.8879 86.1247 33.7769C85.6899 33.2455 85.9637 32.4565 86.6399 32.4565L89.9247 32.4887C91.1001 32.4887 92.0501 31.5226 92.0501 30.2989V22.7151C92.0501 21.5074 91.1001 20.5253 89.9408 20.5253L2.5734 20.2837C1.39798 20.2837 0.447998 21.2659 0.447998 22.4735V30.4438C0.447998 31.6514 1.39799 32.6337 2.55731 32.6337L19.0776 32.6981L49.896 32.7624L62.3265 32.8107C66.1104 32.8107 73.9036 32.7786 76.3188 35.4676C77.7679 37.0938 77.8968 40.1048 75.5459 41.9565C74.1773 43.0353 67.4629 42.826 65.6595 42.826H55.6604V42.8421C54.6621 42.8421 53.857 43.6794 53.857 44.7099V52.8412H53.841Z"/>
71
+ <path d="M77.5101 98.2953C86.2533 98.2309 91.921 90.003 91.599 80.8573C91.277 71.7438 85.3999 64.6591 76.6889 64.6429H76.4474H71.9228L15.2935 64.5785C12.9587 64.3531 11.1554 62.1472 11.0427 60.0218C10.9138 57.8803 12.8299 55.0786 15.0519 55.0786L41.2171 55.0464C42.3925 55.0464 43.3264 54.0642 43.3264 52.8566V45.0634C43.3264 43.8558 42.3764 42.8735 41.201 42.8735L14.102 43.0185C5.35878 43.0829 -0.30899 51.3108 0.0130423 60.4565C0.335075 69.57 6.21215 76.6548 14.9231 76.6709H15.1647H19.6731L76.3186 76.7352C78.6533 76.9607 80.4567 79.1666 80.5694 81.292C80.6982 83.4335 78.7821 86.2352 76.5601 86.2352L55.5314 86.2835C54.356 86.2835 53.4221 87.2657 53.4221 88.4733V96.2987C53.4221 97.5063 54.3721 98.4885 55.5636 98.4885L77.5101 98.3114V98.2953Z"/>
72
+ </g>
73
+
74
+ <path class="rsui-loader__accent"
75
+ d="M25.1312 86.333C25.8075 86.6228 26.6287 87.2186 26.6287 88.1364V96.944C26.6287 97.8457 25.6143 98.7152 24.7126 98.7152H2.18642C1.23642 98.7152 0.624546 97.7651 0.334717 97.0406V88.0075L0.527953 87.5728C0.785579 86.8966 1.36524 86.5423 1.961 86.3169H25.1312V86.333Z"
76
+ />
77
+ </svg>
78
+
46
79
  <span v-if="label" class="rsui-loader__label">{{ label }}</span>
47
80
  </div>
48
81
  </template>
@@ -1,742 +0,0 @@
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
- }