@everchron/ec-shards 2.0.3 → 2.0.4
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/dist/ec-shards.common.js +79 -57
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +79 -57
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +2 -2
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/empty-file-upload.svg +55 -1
- package/src/assets/icons/empty-file-virus-scan.svg +53 -0
- package/src/components/icon/icon.vue +1 -1
- package/src/components/swatches-picker/swatches-picker.vue +1 -2
- package/src/stories/empty-state/empty-state.stories.js +15 -1
- package/src/stories/swatches-picker/swatches-picker.stories.js +163 -7
package/package.json
CHANGED
|
@@ -1 +1,55 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140">
|
|
2
|
+
<style>
|
|
3
|
+
#empty-file-upload_arrow-move{
|
|
4
|
+
transform-origin: center center;
|
|
5
|
+
animation: arrow-move 1s infinite linear;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
#empty-file-upload_arrow-subtle{
|
|
9
|
+
transform-origin: center center;
|
|
10
|
+
animation: arrow-subtle 2s infinite linear;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@keyframes arrow-move{
|
|
14
|
+
0%{
|
|
15
|
+
transform: translateY(0);
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
50%{
|
|
20
|
+
transform: translateY(-8px);
|
|
21
|
+
opacity: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
99%{
|
|
25
|
+
opacity: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
100%{
|
|
29
|
+
transform: translateY(0);
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes arrow-subtle{
|
|
35
|
+
0%{
|
|
36
|
+
transform: translateY(0);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
50%{
|
|
40
|
+
transform: translateY(-4px);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
100%{
|
|
44
|
+
transform: translateY(0);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
<g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
|
49
|
+
<path vector-effect="non-scaling-stroke" stroke="currentColor" stroke-width="2" d="M108.248333,37.915 L91.7516667,21.4183333 C89.5642515,19.2302573 86.5972728,18 83.5033333,18 L41.6666667,18 C35.2233446,18 30,23.2233446 30,29.6666667 L30,111.333333 C30,117.776655 35.2233446,123 41.6666667,123 L100,123 C106.443322,123 111.666667,117.776655 111.666667,111.333333 L111.666667,46.1633333 C111.666667,43.0693938 110.436409,40.1024152 108.248333,37.915 Z"/>
|
|
50
|
+
<g id="arrow-subtle">
|
|
51
|
+
<line vector-effect="non-scaling-stroke" x1="70.5" x2="70.5" y1="63" y2="86" stroke="currentColor" stroke-width="2"/>
|
|
52
|
+
<path vector-effect="non-scaling-stroke" stroke="currentColor" stroke-width="2" d="M80,74 L71.1485909,63.3108262 C70.9846442,63.1132097 70.7487278,63 70.5008636,63 C70.2529995,63 70.0170831,63.1132097 69.8531364,63.3108262 L61,74"/>
|
|
53
|
+
</g>
|
|
54
|
+
<path id="arrow-move" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-width="2" d="M80,64 L71.1485909,54.3108262 C70.9846442,54.1132097 70.7487278,54 70.5008636,54 C70.2529995,54 70.0170831,54.1132097 69.8531364,54.3108262 L61,64" opacity=".5"/>
|
|
55
|
+
</g></svg>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<style>
|
|
3
|
+
#empty-file-virus-scan_scan-pulse{
|
|
4
|
+
transform-origin: center center;
|
|
5
|
+
animation: scan-pulse 2s infinite linear;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@keyframes scan-pulse{
|
|
9
|
+
0%{
|
|
10
|
+
transform: scale(1) translateY(0);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
50%{
|
|
14
|
+
transform: scale(1.2) translateY(-2px);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
100%{
|
|
18
|
+
transform: scale(1) translateY(0);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M108.248 37.915L91.7517 21.4183C89.5642 19.2303 86.5973 18 83.5033 18H41.6667C35.2233 18 30 23.2233 30 29.6667V111.333C30 117.777 35.2233 123 41.6667 123H100C106.443 123 111.667 117.777 111.667 111.333V46.1633C111.667 43.0694 110.436 40.1024 108.248 37.915Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
23
|
+
<g id="scan-pulse">
|
|
24
|
+
<path vector-effect="non-scaling-stroke" d="M94.9998 68.3333V60.3333C94.9998 57.3867 92.6132 55 89.6665 55H81.6665" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
25
|
+
<path vector-effect="non-scaling-stroke" d="M60.3333 55H52.3333C49.3867 55 47 57.3867 47 60.3333V68.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
26
|
+
<path vector-effect="non-scaling-stroke" d="M47 89.6667V97.6667C47 100.613 49.3867 103 52.3333 103H60.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
27
|
+
<path vector-effect="non-scaling-stroke" d="M81.6665 103H89.6665C92.6132 103 94.9998 100.613 94.9998 97.6667V89.6667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
28
|
+
</g>
|
|
29
|
+
<path vector-effect="non-scaling-stroke" d="M71 68V62.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
30
|
+
<path vector-effect="non-scaling-stroke" d="M68.25 62.5H73.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
31
|
+
<path vector-effect="non-scaling-stroke" d="M71 90V95.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
32
|
+
<path vector-effect="non-scaling-stroke" d="M73.75 95.5H68.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
33
|
+
<path vector-effect="non-scaling-stroke" d="M78.7788 71.2211L82.6673 67.3326" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
34
|
+
<path vector-effect="non-scaling-stroke" d="M80.7222 65.3875L84.6125 69.2778" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
35
|
+
<path vector-effect="non-scaling-stroke" d="M63.221 86.7788L59.3325 90.6673" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
36
|
+
<path vector-effect="non-scaling-stroke" d="M61.278 92.6125L57.3877 88.7222" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
37
|
+
<path vector-effect="non-scaling-stroke" d="M82 79H87.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
38
|
+
<path vector-effect="non-scaling-stroke" d="M71 90C77.0751 90 82 85.0751 82 79C82 72.9249 77.0751 68 71 68C64.9249 68 60 72.9249 60 79C60 85.0751 64.9249 90 71 90Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
39
|
+
<path vector-effect="non-scaling-stroke" d="M87.5 76.25V81.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
40
|
+
<path vector-effect="non-scaling-stroke" d="M60 79H54.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
41
|
+
<path vector-effect="non-scaling-stroke" d="M54.5 81.75V76.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
42
|
+
<path vector-effect="non-scaling-stroke" d="M78.7788 86.7788L82.6673 90.6673" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
43
|
+
<path vector-effect="non-scaling-stroke" d="M84.6125 88.7222L80.7222 92.6125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
44
|
+
<path vector-effect="non-scaling-stroke" d="M63.221 71.2211L59.3325 67.3326" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
45
|
+
<path vector-effect="non-scaling-stroke" d="M57.3877 69.2778L61.278 65.3875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
46
|
+
<path d="M68.1582 82.4916C67.5982 82.4916 67.1582 82.9316 67.1582 83.4916C67.1582 84.0516 67.5982 84.4916 68.1582 84.4916C68.7182 84.4916 69.1582 84.0516 69.1582 83.4916C69.1582 82.9316 68.7182 82.4916 68.1582 82.4916Z" fill="currentColor"/>
|
|
47
|
+
<path d="M65.4082 77.9083C64.8482 77.9083 64.4082 78.3483 64.4082 78.9083C64.4082 79.4683 64.8482 79.9083 65.4082 79.9083C65.9682 79.9083 66.4082 79.4683 66.4082 78.9083C66.4082 78.3483 65.9682 77.9083 65.4082 77.9083Z" fill="currentColor"/>
|
|
48
|
+
<path d="M68.1582 73.325C67.5982 73.325 67.1582 73.765 67.1582 74.325C67.1582 74.885 67.5982 75.325 68.1582 75.325C68.7182 75.325 69.1582 74.885 69.1582 74.325C69.1582 73.765 68.7182 73.325 68.1582 73.325Z" fill="currentColor"/>
|
|
49
|
+
<path d="M73.6582 73.325C73.0982 73.325 72.6582 73.765 72.6582 74.325C72.6582 74.885 73.0982 75.325 73.6582 75.325C74.2182 75.325 74.6582 74.885 74.6582 74.325C74.6582 73.765 74.2182 73.325 73.6582 73.325Z" fill="currentColor"/>
|
|
50
|
+
<path d="M76.4082 77.9083C75.8482 77.9083 75.4082 78.3483 75.4082 78.9083C75.4082 79.4683 75.8482 79.9083 76.4082 79.9083C76.9682 79.9083 77.4082 79.4683 77.4082 78.9083C77.4082 78.3483 76.9682 77.9083 76.4082 77.9083Z" fill="currentColor"/>
|
|
51
|
+
<path d="M73.6582 82.4916C73.0982 82.4916 72.6582 82.9316 72.6582 83.4916C72.6582 84.0516 73.0982 84.4916 73.6582 84.4916C74.2182 84.4916 74.6582 84.0516 74.6582 83.4916C74.6582 82.9316 74.2182 82.4916 73.6582 82.4916Z" fill="currentColor"/>
|
|
52
|
+
<path d="M70.9082 77.9083C70.3482 77.9083 69.9082 78.3483 69.9082 78.9083C69.9082 79.4683 70.3482 79.9083 70.9082 79.9083C71.4682 79.9083 71.9082 79.4683 71.9082 78.9083C71.9082 78.3483 71.4682 77.9083 70.9082 77.9083Z" fill="currentColor"/>
|
|
53
|
+
</svg>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
<template>
|
|
3
2
|
<div class="ecs-swatches" :class="sizeClass">
|
|
4
3
|
<div
|
|
@@ -25,7 +24,7 @@
|
|
|
25
24
|
selected: {
|
|
26
25
|
type: String
|
|
27
26
|
},
|
|
28
|
-
/** The available color swatches the user can choose from. Array structure: contains Objects with `id`, `title`, `hex`. */
|
|
27
|
+
/** The available color swatches the user can choose from. Array structure: contains Objects with `id`, `title`, `hex`. **Note:** swatches that should be available for use are stored in the database. `organization/annotation_colors`. */
|
|
29
28
|
swatches: {
|
|
30
29
|
type: Array,
|
|
31
30
|
required: true
|
|
@@ -3,7 +3,14 @@ import EcsButton from '@components/button/button';
|
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: 'Feedback/Empty State',
|
|
6
|
-
component: EcsEmptyState
|
|
6
|
+
component: EcsEmptyState,
|
|
7
|
+
parameters: {
|
|
8
|
+
docs: {
|
|
9
|
+
description: {
|
|
10
|
+
component: 'Empty states are messages that appear whenever an element has no content to display to the user. They are opportunities to educate, drive engagement, or inform the user about issues on either our or their end. Your empty states should never actually feel empty. Some empty states can have animated icons (types: `empty-file-virus-scan`, `empty-file-upload`).',
|
|
11
|
+
},
|
|
12
|
+
}
|
|
13
|
+
}
|
|
7
14
|
};
|
|
8
15
|
|
|
9
16
|
export const emptyState = () => ({
|
|
@@ -38,3 +45,10 @@ export const emptyStateLoading = () => ({
|
|
|
38
45
|
<ecs-empty-state type="loading" />
|
|
39
46
|
</div>`,
|
|
40
47
|
});
|
|
48
|
+
|
|
49
|
+
export const emptyStateAnimated = () => ({
|
|
50
|
+
components: { EcsEmptyState },
|
|
51
|
+
template: `<div style="height:400px">
|
|
52
|
+
<ecs-empty-state type="empty-file-virus-scan">Scanning for viruses...</ecs-empty-state>
|
|
53
|
+
</div>`,
|
|
54
|
+
});
|
|
@@ -9,13 +9,91 @@ export const SwatchesPicker = () => ({
|
|
|
9
9
|
components: { EcsSwatchesPicker },
|
|
10
10
|
data() {
|
|
11
11
|
return {
|
|
12
|
-
selectedColor: ''
|
|
12
|
+
selectedColor: '#F9DF00',
|
|
13
|
+
// Note: swatches that should be available for use are stored in the database. organization/annotation_colors
|
|
14
|
+
swatches: [
|
|
15
|
+
{
|
|
16
|
+
"id": 1,
|
|
17
|
+
"title": "Yellow",
|
|
18
|
+
"hex": "#F9DF00"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"id": 2,
|
|
22
|
+
"title": "Orange",
|
|
23
|
+
"hex": "#F3A100"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"id": 3,
|
|
27
|
+
"title": "Lime",
|
|
28
|
+
"hex": "#B7EA80"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"id": 4,
|
|
32
|
+
"title": "Cyan",
|
|
33
|
+
"hex": "#48E4C2"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": 5,
|
|
37
|
+
"title": "Blue",
|
|
38
|
+
"hex": "#489DFF"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"id": 6,
|
|
42
|
+
"title": "Indigo",
|
|
43
|
+
"hex": "#B877F0"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"id": 7,
|
|
47
|
+
"title": "Pink",
|
|
48
|
+
"hex": "#FD78FD"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"id": 8,
|
|
52
|
+
"title": "Brown",
|
|
53
|
+
"hex": "#C59465"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"id": 9,
|
|
57
|
+
"title": "Grey",
|
|
58
|
+
"hex": "#858E9F"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"id": 10,
|
|
62
|
+
"title": "Red",
|
|
63
|
+
"hex": "#EE5452"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"id": 11,
|
|
67
|
+
"title": "Dark Blue",
|
|
68
|
+
"hex": "#227FD3"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"id": 12,
|
|
72
|
+
"title": "Green",
|
|
73
|
+
"hex": "#5DAF00"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"id": 13,
|
|
77
|
+
"title": "Brass",
|
|
78
|
+
"hex": "#A4927A"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"id": 14,
|
|
82
|
+
"title": "Silver",
|
|
83
|
+
"hex": "#95989C"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"id": 15,
|
|
87
|
+
"title": "Gold",
|
|
88
|
+
"hex": "#D78B21"
|
|
89
|
+
}
|
|
90
|
+
]
|
|
13
91
|
}
|
|
14
92
|
},
|
|
15
93
|
template: `<div>
|
|
16
|
-
<ecs-swatches-picker v-model="selectedColor" selected="
|
|
94
|
+
<ecs-swatches-picker v-model="selectedColor" :swatches="swatches" :selected="selectedColor" />
|
|
17
95
|
<hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
|
|
18
|
-
Selected: {{ selectedColor
|
|
96
|
+
Selected: {{ selectedColor }}
|
|
19
97
|
</div>`,
|
|
20
98
|
});
|
|
21
99
|
|
|
@@ -23,12 +101,90 @@ export const SwatchesPickerSizes = () => ({
|
|
|
23
101
|
components: { EcsSwatchesPicker },
|
|
24
102
|
data() {
|
|
25
103
|
return {
|
|
26
|
-
selectedColor: ''
|
|
104
|
+
selectedColor: '#F9DF00',
|
|
105
|
+
// Note: swatches that should be available for use are stored in the database. organization/annotation_colors
|
|
106
|
+
swatches: [
|
|
107
|
+
{
|
|
108
|
+
"id": 1,
|
|
109
|
+
"title": "Yellow",
|
|
110
|
+
"hex": "#F9DF00"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"id": 2,
|
|
114
|
+
"title": "Orange",
|
|
115
|
+
"hex": "#F3A100"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"id": 3,
|
|
119
|
+
"title": "Lime",
|
|
120
|
+
"hex": "#B7EA80"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"id": 4,
|
|
124
|
+
"title": "Cyan",
|
|
125
|
+
"hex": "#48E4C2"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"id": 5,
|
|
129
|
+
"title": "Blue",
|
|
130
|
+
"hex": "#489DFF"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"id": 6,
|
|
134
|
+
"title": "Indigo",
|
|
135
|
+
"hex": "#B877F0"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"id": 7,
|
|
139
|
+
"title": "Pink",
|
|
140
|
+
"hex": "#FD78FD"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"id": 8,
|
|
144
|
+
"title": "Brown",
|
|
145
|
+
"hex": "#C59465"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"id": 9,
|
|
149
|
+
"title": "Grey",
|
|
150
|
+
"hex": "#858E9F"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"id": 10,
|
|
154
|
+
"title": "Red",
|
|
155
|
+
"hex": "#EE5452"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"id": 11,
|
|
159
|
+
"title": "Dark Blue",
|
|
160
|
+
"hex": "#227FD3"
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"id": 12,
|
|
164
|
+
"title": "Green",
|
|
165
|
+
"hex": "#5DAF00"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": 13,
|
|
169
|
+
"title": "Brass",
|
|
170
|
+
"hex": "#A4927A"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"id": 14,
|
|
174
|
+
"title": "Silver",
|
|
175
|
+
"hex": "#95989C"
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"id": 15,
|
|
179
|
+
"title": "Gold",
|
|
180
|
+
"hex": "#D78B21"
|
|
181
|
+
}
|
|
182
|
+
]
|
|
27
183
|
}
|
|
28
184
|
},
|
|
29
185
|
template: `<div>
|
|
30
|
-
<ecs-swatches-picker v-model="selectedColor" size="sml" selected="
|
|
31
|
-
<ecs-swatches-picker v-model="selectedColor" size="md" selected="
|
|
32
|
-
<ecs-swatches-picker v-model="selectedColor" size="lg" selected="
|
|
186
|
+
<ecs-swatches-picker v-model="selectedColor" size="sml" :swatches="swatches" :selected="selectedColor" />
|
|
187
|
+
<ecs-swatches-picker v-model="selectedColor" size="md" :swatches="swatches" :selected="selectedColor" />
|
|
188
|
+
<ecs-swatches-picker v-model="selectedColor" size="lg" :swatches="swatches" :selected="selectedColor" />
|
|
33
189
|
</div>`,
|
|
34
190
|
});
|