@magicgol/polyjuice 0.55.1 → 0.56.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
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import MgTeamBadge from './TeamBadge.vue';
|
|
2
|
+
|
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Context/Team/Badge/Team Badge',
|
|
6
|
+
component: MgTeamBadge,
|
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
|
11
|
+
const Template = (args, { argTypes }) => ({
|
|
12
|
+
props: Object.keys(argTypes),
|
|
13
|
+
components: { MgTeamBadge },
|
|
14
|
+
template: `<mg-team-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-team-badge>`,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export const Default = Template.bind({});
|
|
18
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
|
19
|
+
Default.args = {
|
|
20
|
+
colors: ['#fff', '#f00']
|
|
21
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="d-inline-flex text-center rounded-circle justify-content-center align-items-center overflow-hidden"
|
|
4
|
+
:class="classes"
|
|
5
|
+
>
|
|
6
|
+
<div
|
|
7
|
+
v-for="color in colors"
|
|
8
|
+
:key="color"
|
|
9
|
+
:style="{'backgroundColor': color, 'width': width}"
|
|
10
|
+
class="h-100"
|
|
11
|
+
></div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
export default {
|
|
17
|
+
name: 'mg-team-badge',
|
|
18
|
+
|
|
19
|
+
props: {
|
|
20
|
+
colors: {
|
|
21
|
+
type: Array,
|
|
22
|
+
default: () => [],
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
|
|
26
|
+
computed: {
|
|
27
|
+
classes() {
|
|
28
|
+
return {
|
|
29
|
+
'mg-team-badge': true,
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
width () {
|
|
33
|
+
return (1 / this.colors.length * 100) + '%';
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<style lang="scss">
|
|
40
|
+
.mg-team-badge {
|
|
41
|
+
border: 1px solid #efefef;
|
|
42
|
+
height: 1.125rem;
|
|
43
|
+
width: 1.125rem;
|
|
44
|
+
min-width: 1.125rem;
|
|
45
|
+
}
|
|
46
|
+
</style>
|