@magicgol/polyjuice 0.33.3 → 0.33.6
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/src/components/components/filter-option/FilterOption.vue +11 -1
- package/src/components/content/list/head/ListHead.vue +1 -1
- package/src/components/context/footballer/horizontal-footballer/HFootballer.stories.js +10 -0
- package/src/components/context/footballer/horizontal-footballer/HFootballer.vue +15 -2
- package/src/components/context/footballer/list/footballer-list-body/FootballerListBody.vue +5 -3
- package/src/components/context/footballer/role/role-badge/RoleBadge.stories.js +7 -0
- package/src/components/context/footballer/role/role-badge/RoleBadge.vue +9 -0
package/package.json
CHANGED
@@ -6,7 +6,10 @@
|
|
6
6
|
<div class="p-2">
|
7
7
|
<slot></slot>
|
8
8
|
</div>
|
9
|
-
<div
|
9
|
+
<div
|
10
|
+
class="mg-filter-option-circle d-flex align-items-center justify-content-center bg-white rounded-circle"
|
11
|
+
@click="onClick"
|
12
|
+
>
|
10
13
|
<svgicon name="x"></svgicon>
|
11
14
|
</div>
|
12
15
|
</div>
|
@@ -23,6 +26,12 @@ export default {
|
|
23
26
|
};
|
24
27
|
}
|
25
28
|
},
|
29
|
+
|
30
|
+
methods: {
|
31
|
+
onClick () {
|
32
|
+
this.$emit('click');
|
33
|
+
}
|
34
|
+
}
|
26
35
|
};
|
27
36
|
</script>
|
28
37
|
|
@@ -39,6 +48,7 @@ export default {
|
|
39
48
|
height: 2rem;
|
40
49
|
|
41
50
|
&-circle {
|
51
|
+
cursor: pointer;
|
42
52
|
height: 1.5rem;
|
43
53
|
width: 1.5rem;
|
44
54
|
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<div
|
3
3
|
class="text-uppercase pb-2 px-2"
|
4
|
-
:class="[classes, {'d-flex align-items-center': active, 'justify-content-center text-center': alignCenter}]"
|
4
|
+
:class="[classes, {'d-flex align-items-center': active, 'justify-content-center text-center': alignCenter, 'justify-content-start text-left': !alignCenter}]"
|
5
5
|
>
|
6
6
|
<div><slot></slot></div>
|
7
7
|
<svgicon
|
@@ -79,3 +79,13 @@ Large.args = {
|
|
79
79
|
lastname: 'Dybala',
|
80
80
|
};
|
81
81
|
|
82
|
+
export const ThemeInverted = Template.bind({});
|
83
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
84
|
+
ThemeInverted.args = {
|
85
|
+
size: 'large',
|
86
|
+
role: 'A',
|
87
|
+
firstname: 'Paulo',
|
88
|
+
lastname: 'Dybala',
|
89
|
+
themeInverted: true
|
90
|
+
};
|
91
|
+
|
@@ -33,6 +33,7 @@
|
|
33
33
|
<mg-role-badge
|
34
34
|
:role="role"
|
35
35
|
:size="size"
|
36
|
+
:theme-inverted="themeInverted"
|
36
37
|
></mg-role-badge>
|
37
38
|
</div>
|
38
39
|
<!-- end of ROLE BADGE -->
|
@@ -58,6 +59,10 @@ export default {
|
|
58
59
|
type: Boolean,
|
59
60
|
default: false,
|
60
61
|
},
|
62
|
+
themeInverted: {
|
63
|
+
type: Boolean,
|
64
|
+
default: false,
|
65
|
+
},
|
61
66
|
role: {
|
62
67
|
type: String,
|
63
68
|
default: null,
|
@@ -86,8 +91,10 @@ export default {
|
|
86
91
|
classes() {
|
87
92
|
return {
|
88
93
|
'mg-h-footballer': true,
|
89
|
-
'mg-h-footballer--disabled': this.disabled,
|
90
|
-
'mg-h-footballer--deactivated': this.deactivated,
|
94
|
+
'mg-h-footballer--disabled': this.disabled === true,
|
95
|
+
'mg-h-footballer--deactivated': this.deactivated === true,
|
96
|
+
'mg-h-footballer--inverted': this.inverted === true,
|
97
|
+
'mg-h-footballer--theme-inverted': this.themeInverted === true,
|
91
98
|
'mg-h-footballer--size-normal': this.size === 'normal',
|
92
99
|
'mg-h-footballer--size-large': this.size === 'large',
|
93
100
|
};
|
@@ -150,6 +157,12 @@ export default {
|
|
150
157
|
}
|
151
158
|
}
|
152
159
|
|
160
|
+
&--theme-inverted {
|
161
|
+
.mg-h-footballer-subtext {
|
162
|
+
color: map-get($palette, 'text') !important;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
|
153
166
|
&--size {
|
154
167
|
&-normal {
|
155
168
|
font-size: 0.875rem;
|
@@ -6,7 +6,7 @@
|
|
6
6
|
>
|
7
7
|
<div class="d-flex align-items-center h-100 rounded">
|
8
8
|
<div
|
9
|
-
class="p-0 pl-
|
9
|
+
class="p-0 pl-2 py-2 text-left"
|
10
10
|
:class="firstColClass"
|
11
11
|
>
|
12
12
|
<slot name="first-col"></slot>
|
@@ -26,7 +26,7 @@
|
|
26
26
|
</div>
|
27
27
|
<div
|
28
28
|
v-if="actionsColVisibility"
|
29
|
-
class="p-0 pr-
|
29
|
+
class="p-0 pr-2 text-center"
|
30
30
|
:class="actionsColClass"
|
31
31
|
>
|
32
32
|
<slot name="actions"></slot>
|
@@ -94,7 +94,7 @@ export default {
|
|
94
94
|
return 'col-' + ((this.secondColVisibility ? 8 : 10) - this.actionsCol);
|
95
95
|
},
|
96
96
|
thirdColClass () {
|
97
|
-
return this.actionsColVisibility ? 'col-2' : 'col-3 pr-
|
97
|
+
return this.actionsColVisibility ? 'col-2' : 'col-3 pr-2'
|
98
98
|
}
|
99
99
|
},
|
100
100
|
|
@@ -117,6 +117,7 @@ export default {
|
|
117
117
|
> div {
|
118
118
|
border: 1px solid #f6f6f6;
|
119
119
|
background: #f6f6f6;
|
120
|
+
cursor: pointer;
|
120
121
|
}
|
121
122
|
|
122
123
|
&--disabled {
|
@@ -163,6 +164,7 @@ export default {
|
|
163
164
|
border: 0 !important;
|
164
165
|
box-shadow: none !important;
|
165
166
|
background: none !important;
|
167
|
+
cursor: default !important;
|
166
168
|
}
|
167
169
|
}
|
168
170
|
}
|
@@ -66,3 +66,10 @@ export const Forward = Template.bind({});
|
|
66
66
|
Forward.args = {
|
67
67
|
role: 'A',
|
68
68
|
};
|
69
|
+
|
70
|
+
export const ThemeInverted = Template.bind({});
|
71
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
72
|
+
ThemeInverted.args = {
|
73
|
+
role: 'A',
|
74
|
+
themeInverted: true
|
75
|
+
};
|
@@ -29,6 +29,10 @@ export default {
|
|
29
29
|
validator: function (value) {
|
30
30
|
return ['normal', 'large', 'huge'].indexOf(value) !== -1;
|
31
31
|
},
|
32
|
+
},
|
33
|
+
themeInverted: {
|
34
|
+
type: Boolean,
|
35
|
+
default: false
|
32
36
|
}
|
33
37
|
},
|
34
38
|
|
@@ -36,6 +40,7 @@ export default {
|
|
36
40
|
classes() {
|
37
41
|
return {
|
38
42
|
'mg-role-badge': true,
|
43
|
+
'mg-role-badge--theme-inverted': this.themeInverted === true,
|
39
44
|
'mg-role-badge--goalkeeper': this.role === 'P',
|
40
45
|
'mg-role-badge--defender': this.role === 'D',
|
41
46
|
'mg-role-badge--midfielder': this.role === 'C',
|
@@ -98,5 +103,9 @@ export default {
|
|
98
103
|
&--forward {
|
99
104
|
background-color: map-get($palette, 'forward');
|
100
105
|
}
|
106
|
+
|
107
|
+
&--theme-inverted {
|
108
|
+
background-color: #fff !important;
|
109
|
+
}
|
101
110
|
}
|
102
111
|
</style>
|