@magicgol/polyjuice 0.29.0 → 0.31.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/src/assets/svg/arrow-down.js +10 -0
- package/src/assets/svg/index.js +1 -0
- package/src/components/card/horizontal-card/HCard.stories.js +24 -2
- package/src/components/card/horizontal-card/HCard.vue +10 -16
- package/src/components/footballer/{box → footballer-box}/FootballerBox.stories.js +0 -0
- package/src/components/footballer/{box → footballer-box}/FootballerBox.vue +0 -0
- package/src/components/footballer/horizontal-footballer/HFootballer.vue +5 -2
- package/src/components/footballer/horizontal-footballer-card/HFootballerCard.stories.js +75 -0
- package/src/components/footballer/horizontal-footballer-card/HFootballerCard.vue +74 -0
- package/src/components/footballer/{horizontal-placeholder → horizontal-footballer-placeholder}/HFootballerPlaceholder.stories.js +0 -0
- package/src/components/footballer/{horizontal-placeholder → horizontal-footballer-placeholder}/HFootballerPlaceholder.vue +0 -0
- package/src/components/form/advanced/filter/Filter.vue +1 -1
- package/src/components/list/head/ListHead.stories.js +7 -0
- package/src/components/list/head/ListHead.vue +30 -2
- package/src/svg/arrow-down.svg +3 -0
package/package.json
CHANGED
@@ -0,0 +1,10 @@
|
|
1
|
+
/* eslint-disable */
|
2
|
+
var icon = require('vue-svgicon')
|
3
|
+
icon.register({
|
4
|
+
'arrow-down': {
|
5
|
+
width: 16,
|
6
|
+
height: 16,
|
7
|
+
viewBox: '0 0 10 8',
|
8
|
+
data: '<path pid="0" d="M8.807 3.527a.667.667 0 00-.947 0l-2.193 2.2V.667a.667.667 0 10-1.334 0v5.06l-2.193-2.2a.67.67 0 00-.947.946l3.334 3.334c.063.06.138.108.22.14a.627.627 0 00.506 0 .667.667 0 00.22-.14l3.334-3.334a.667.667 0 000-.946z" _fill="#000"/>'
|
9
|
+
}
|
10
|
+
})
|
package/src/assets/svg/index.js
CHANGED
@@ -17,6 +17,18 @@ export default {
|
|
17
17
|
summary: 'html',
|
18
18
|
},
|
19
19
|
}
|
20
|
+
},
|
21
|
+
actions: {
|
22
|
+
description: "The actions Vue slot",
|
23
|
+
control: {
|
24
|
+
type: 'text',
|
25
|
+
},
|
26
|
+
table: {
|
27
|
+
category: 'Slots',
|
28
|
+
type: {
|
29
|
+
summary: 'html',
|
30
|
+
},
|
31
|
+
}
|
20
32
|
}
|
21
33
|
},
|
22
34
|
};
|
@@ -25,11 +37,21 @@ export default {
|
|
25
37
|
const Template = (args, { argTypes }) => ({
|
26
38
|
props: Object.keys(argTypes),
|
27
39
|
components: { MgHCard },
|
28
|
-
template: `<mg-h-card @click="$emit('click')" v-bind="$props"
|
40
|
+
template: `<mg-h-card @click="$emit('click')" v-bind="$props">
|
41
|
+
<template v-if="${'default' in args}" v-slot>${args.default}</template>
|
42
|
+
<template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
|
43
|
+
</mg-h-card>`,
|
29
44
|
});
|
30
45
|
|
31
46
|
export const Default = Template.bind({});
|
32
47
|
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
33
48
|
Default.args = {
|
34
|
-
default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
|
49
|
+
default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
|
50
|
+
};
|
51
|
+
|
52
|
+
export const Actions = Template.bind({});
|
53
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
54
|
+
Actions.args = {
|
55
|
+
default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
|
56
|
+
actions: '<div>+</div>',
|
35
57
|
};
|
@@ -6,16 +6,14 @@
|
|
6
6
|
<div
|
7
7
|
class="flex-fill"
|
8
8
|
><slot></slot></div>
|
9
|
-
<!--
|
9
|
+
<!-- ACTIONS -->
|
10
10
|
<div
|
11
|
+
v-if="actionsSlotVisibility"
|
11
12
|
class="pl-3"
|
12
13
|
>
|
13
|
-
<
|
14
|
-
icon="chevron-right"
|
15
|
-
class="mg-icon"
|
16
|
-
/>
|
14
|
+
<slot name="actions"></slot>
|
17
15
|
</div>
|
18
|
-
<!-- end of
|
16
|
+
<!-- end of ACTIONS -->
|
19
17
|
</div>
|
20
18
|
</template>
|
21
19
|
|
@@ -28,21 +26,17 @@ export default {
|
|
28
26
|
return {
|
29
27
|
'mg-h-card': true,
|
30
28
|
};
|
29
|
+
},
|
30
|
+
actionsSlotVisibility() {
|
31
|
+
return 'actions' in this.$slots && !!this.$slots.actions;
|
31
32
|
}
|
32
33
|
},
|
33
34
|
};
|
34
35
|
</script>
|
35
36
|
|
36
37
|
<style lang="scss">
|
37
|
-
|
38
|
-
|
39
|
-
.
|
40
|
-
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
|
41
|
-
height: 3.75rem;
|
42
|
-
|
43
|
-
.mg-icon {
|
44
|
-
color: map-get($palette, 'brand');
|
45
|
-
cursor: pointer;
|
38
|
+
.mg-h-card {
|
39
|
+
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
|
40
|
+
height: 3.75rem;
|
46
41
|
}
|
47
|
-
}
|
48
42
|
</style>
|
File without changes
|
File without changes
|
@@ -25,7 +25,7 @@
|
|
25
25
|
<div
|
26
26
|
v-if="slotVisibility"
|
27
27
|
class="mg-h-footballer-subtext text-uppercase"
|
28
|
-
><span v-if="!isLarge" class="mx-
|
28
|
+
><span v-if="!isLarge" class="mx-1">-</span><slot></slot></div>
|
29
29
|
</div>
|
30
30
|
<!-- end of FOOTBALLER NAME -->
|
31
31
|
<!-- ROLE BADGE -->
|
@@ -112,7 +112,9 @@ export default {
|
|
112
112
|
|
113
113
|
methods: {
|
114
114
|
onClick() {
|
115
|
-
this
|
115
|
+
if (!this.disabled && !this.deactivated) {
|
116
|
+
this.$emit('click');
|
117
|
+
}
|
116
118
|
},
|
117
119
|
},
|
118
120
|
};
|
@@ -130,6 +132,7 @@ export default {
|
|
130
132
|
}
|
131
133
|
|
132
134
|
&-subtext {
|
135
|
+
color: #979797;
|
133
136
|
font-size: 0.875rem;
|
134
137
|
}
|
135
138
|
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import MgHFootballerCard from './HFootballerCard.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Footballer/HFootballerCard',
|
6
|
+
component: MgHFootballerCard,
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
8
|
+
argTypes: {
|
9
|
+
default: {
|
10
|
+
description: "The default Vue slot",
|
11
|
+
control: {
|
12
|
+
type: 'text',
|
13
|
+
},
|
14
|
+
table: {
|
15
|
+
category: 'Slots',
|
16
|
+
type: {
|
17
|
+
summary: 'html',
|
18
|
+
},
|
19
|
+
}
|
20
|
+
},
|
21
|
+
actions: {
|
22
|
+
description: "The actions Vue slot",
|
23
|
+
control: {
|
24
|
+
type: 'text',
|
25
|
+
},
|
26
|
+
table: {
|
27
|
+
category: 'Slots',
|
28
|
+
type: {
|
29
|
+
summary: 'html',
|
30
|
+
},
|
31
|
+
}
|
32
|
+
}
|
33
|
+
},
|
34
|
+
};
|
35
|
+
|
36
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
37
|
+
const Template = (args, { argTypes }) => ({
|
38
|
+
props: Object.keys(argTypes),
|
39
|
+
components: { MgHFootballerCard },
|
40
|
+
template: `<mg-h-footballer-card @click="$emit('click')" v-bind="$props">
|
41
|
+
<template v-if="${'default' in args}" v-slot>${args.default}</template>
|
42
|
+
<template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
|
43
|
+
</mg-h-footballer-card>`,
|
44
|
+
});
|
45
|
+
|
46
|
+
export const Default = Template.bind({});
|
47
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
48
|
+
Default.args = {
|
49
|
+
firstname: 'P',
|
50
|
+
lastname: 'Dybala',
|
51
|
+
role: 'A',
|
52
|
+
default: '<span><b>MIL</b></span> - <span>JUV</span>',
|
53
|
+
pressed: false
|
54
|
+
};
|
55
|
+
|
56
|
+
export const Actions = Template.bind({});
|
57
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
58
|
+
Actions.args = {
|
59
|
+
firstname: 'P',
|
60
|
+
lastname: 'Dybala',
|
61
|
+
role: 'A',
|
62
|
+
default: '<span><b>MIL</b></span> - <span>JUV</span>',
|
63
|
+
actions: '<div>+</div>',
|
64
|
+
pressed: false
|
65
|
+
};
|
66
|
+
|
67
|
+
export const Pressed = Template.bind({});
|
68
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
69
|
+
Pressed.args = {
|
70
|
+
firstname: 'P',
|
71
|
+
lastname: 'Dybala',
|
72
|
+
role: 'A',
|
73
|
+
default: '<span><b>MIL</b></span> - <span>JUV</span>',
|
74
|
+
pressed: true
|
75
|
+
};
|
@@ -0,0 +1,74 @@
|
|
1
|
+
<template>
|
2
|
+
<mg-h-card
|
3
|
+
:class="classes"
|
4
|
+
>
|
5
|
+
<template v-slot:default>
|
6
|
+
<mg-h-footballer
|
7
|
+
size="large"
|
8
|
+
:firstname="firstname"
|
9
|
+
:lastname="lastname"
|
10
|
+
:role="role"
|
11
|
+
><slot></slot></mg-h-footballer>
|
12
|
+
</template>
|
13
|
+
<template v-slot:actions><slot name="actions"></slot></template>
|
14
|
+
</mg-h-card>
|
15
|
+
</template>
|
16
|
+
|
17
|
+
<script>
|
18
|
+
import MgHFootballer from "../horizontal-footballer/HFootballer";
|
19
|
+
import MgHCard from "../../card/horizontal-card/HCard";
|
20
|
+
|
21
|
+
export default {
|
22
|
+
name: 'mg-h-footballer-card',
|
23
|
+
|
24
|
+
props: {
|
25
|
+
firstname: {
|
26
|
+
type: String,
|
27
|
+
default: null
|
28
|
+
},
|
29
|
+
lastname: {
|
30
|
+
type: String,
|
31
|
+
default: null
|
32
|
+
},
|
33
|
+
role: {
|
34
|
+
type: String,
|
35
|
+
default: null,
|
36
|
+
validator: function (value) {
|
37
|
+
return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
|
38
|
+
},
|
39
|
+
},
|
40
|
+
pressed: {
|
41
|
+
props: {
|
42
|
+
type: Boolean,
|
43
|
+
default: false
|
44
|
+
}
|
45
|
+
}
|
46
|
+
},
|
47
|
+
|
48
|
+
computed: {
|
49
|
+
classes() {
|
50
|
+
return {
|
51
|
+
'mg-h-footballer-card': true,
|
52
|
+
'mg-h-footballer-card--pressed': this.pressed === true,
|
53
|
+
};
|
54
|
+
},
|
55
|
+
actionsSlotVisibility() {
|
56
|
+
return 'actions' in this.$slots && !!this.$slots.actions;
|
57
|
+
}
|
58
|
+
},
|
59
|
+
|
60
|
+
components: {
|
61
|
+
MgHFootballer,
|
62
|
+
MgHCard,
|
63
|
+
},
|
64
|
+
};
|
65
|
+
</script>
|
66
|
+
|
67
|
+
<style lang="scss">
|
68
|
+
.mg-h-footballer-card {
|
69
|
+
&--pressed {
|
70
|
+
background: #dAf0d9 !important;
|
71
|
+
box-shadow: inset 0 4px 9px rgba(0, 0, 0, 0.1) !important;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
</style>
|
File without changes
|
File without changes
|
@@ -41,3 +41,10 @@ export const Default = Template.bind({});
|
|
41
41
|
Default.args = {
|
42
42
|
default: 'this is the list head'
|
43
43
|
};
|
44
|
+
|
45
|
+
export const Active = Template.bind({});
|
46
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
47
|
+
Active.args = {
|
48
|
+
default: 'this is the list head',
|
49
|
+
active: true
|
50
|
+
};
|
@@ -1,18 +1,33 @@
|
|
1
1
|
<template>
|
2
2
|
<div
|
3
|
-
class="text-uppercase pb-2 px-2"
|
3
|
+
class="d-flex align-items-center text-uppercase pb-2 px-2"
|
4
4
|
:class="classes"
|
5
|
-
|
5
|
+
>
|
6
|
+
<div><slot></slot></div>
|
7
|
+
<svgicon
|
8
|
+
v-if="active"
|
9
|
+
name="arrow-down"
|
10
|
+
class="ml-2"
|
11
|
+
></svgicon>
|
12
|
+
</div>
|
6
13
|
</template>
|
7
14
|
|
8
15
|
<script>
|
9
16
|
export default {
|
10
17
|
name: 'mg-list-head',
|
11
18
|
|
19
|
+
props: {
|
20
|
+
active: {
|
21
|
+
type: Boolean,
|
22
|
+
default: false
|
23
|
+
}
|
24
|
+
},
|
25
|
+
|
12
26
|
computed: {
|
13
27
|
classes() {
|
14
28
|
return {
|
15
29
|
'mg-list-head': true,
|
30
|
+
'mg-list-head--active': this.active === true,
|
16
31
|
};
|
17
32
|
},
|
18
33
|
footerVisibility() {
|
@@ -31,5 +46,18 @@ export default {
|
|
31
46
|
font-family: 'Ubuntu', sans-serif;
|
32
47
|
font-size: 0.75rem;
|
33
48
|
font-weight: 500;
|
49
|
+
|
50
|
+
svg {
|
51
|
+
fill: #777;
|
52
|
+
height: 0.5rem;
|
53
|
+
}
|
54
|
+
|
55
|
+
&--active {
|
56
|
+
color: map-get($palette, 'text') !important;
|
57
|
+
|
58
|
+
svg {
|
59
|
+
fill: map-get($palette, 'text') !important;
|
60
|
+
}
|
61
|
+
}
|
34
62
|
}
|
35
63
|
</style>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<path d="M8.80666 3.52667C8.74469 3.46418 8.67095 3.41459 8.58971 3.38074C8.50847 3.34689 8.42134 3.32947 8.33333 3.32947C8.24532 3.32947 8.15818 3.34689 8.07694 3.38074C7.99571 3.41459 7.92197 3.46418 7.86 3.52667L5.66666 5.72667V0.666667C5.66666 0.489856 5.59643 0.320287 5.4714 0.195262C5.34638 0.070238 5.17681 0 5 0C4.82319 0 4.65362 0.070238 4.52859 0.195262C4.40357 0.320287 4.33333 0.489856 4.33333 0.666667V5.72667L2.14 3.52667C2.01446 3.40113 1.8442 3.33061 1.66666 3.33061C1.48913 3.33061 1.31887 3.40113 1.19333 3.52667C1.06779 3.6522 0.997269 3.82247 0.997269 4C0.997269 4.17753 1.06779 4.3478 1.19333 4.47333L4.52666 7.80667C4.59007 7.86736 4.66483 7.91494 4.74666 7.94667C4.82646 7.98194 4.91275 8.00016 5 8.00016C5.08724 8.00016 5.17353 7.98194 5.25333 7.94667C5.33516 7.91494 5.40993 7.86736 5.47333 7.80667L8.80666 4.47333C8.86915 4.41136 8.91874 4.33762 8.95259 4.25638C8.98644 4.17515 9.00386 4.08801 9.00386 4C9.00386 3.91199 8.98644 3.82486 8.95259 3.74362C8.91874 3.66238 8.86915 3.58864 8.80666 3.52667Z" fill="black"/>
|
3
|
+
</svg>
|