Skip to content
This repository was archived by the owner on Apr 17, 2020. It is now read-only.

Commit ba2397d

Browse files
roquieroquie
committed
New badge component for button.
1 parent e01b433 commit ba2397d

File tree

8 files changed

+327
-43
lines changed

8 files changed

+327
-43
lines changed

‎src/components/badge/index.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div
3+
:class="{
4+
badge: true,
5+
'is-active': !hide,
6+
[`is-${option}`]: true,
7+
'has-content': content,
8+
}"
9+
:data-badge="content"
10+
>
11+
<slot/>
12+
</div>
13+
</template>
14+
15+
<script lang="ts">
16+
import { Component, Prop, Vue } from 'vue-property-decorator';
17+
18+
@Component
19+
export default class Badge extends Vue {
20+
21+
@Prop({ type: String, default: 'primary' })
22+
public readonly option!: string;
23+
24+
@Prop({ type: String | Number, default: '' })
25+
public readonly value!: string | number;
26+
27+
@Prop(Number)
28+
public readonly max!: number;
29+
30+
@Prop({ type: Boolean, default: false })
31+
public readonly hide!: boolean;
32+
33+
/**
34+
* Get content of badge in depends on the value type.
35+
*/
36+
get content(): string | number {
37+
if (typeof this.max === 'number' && typeof this.value === 'number') {
38+
return this.max < this.value ? `${this.max}+` : this.value;
39+
}
40+
41+
return this.value;
42+
}
43+
}
44+
</script>
45+
46+
<style lang="sass" scoped>
47+
.badge
48+
&.has-content::after
49+
padding-left: 5px
50+
padding-right: 5px
51+
&.is-active
52+
position: relative
53+
vertical-align: middle
54+
display: inline-block
55+
&::after
56+
min-width: 1.2rem
57+
min-height: 1.2rem
58+
font-size: .75rem
59+
top: 0
60+
right: 0
61+
bottom: auto
62+
left: auto
63+
-webkit-transform: translate(50%, -50%)
64+
transform: translate(50%, -50%)
65+
background-clip: padding-box
66+
border-radius: 10px
67+
box-shadow: 0 0 0 1px #fff
68+
content: attr(data-badge)
69+
z-index: 99
70+
position: absolute
71+
color: white
72+
line-height: 1.2rem
73+
text-align: center
74+
&.is-primary::after
75+
background: #00d1b2
76+
&.is-success::after
77+
background: #23d160
78+
&.is-info::after
79+
background: #209cee
80+
&.is-warning::after
81+
background: #ffdd57
82+
color: black
83+
&.is-danger::after
84+
background: #ff3860
85+
&.is-dark::after
86+
background: #363636
87+
&.is-black::after
88+
background: #0a0a0a
89+
90+
</style>

‎src/components/button/index.vue‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
public readonly size!: string;
2424
2525
@Prop({ type: String, default: 'default' })
26-
public readonly color!: string; // button modification
26+
public readonly option!: string;
2727
2828
@Prop(Boolean)
2929
public readonly disabled!: boolean;
@@ -40,22 +40,21 @@
4040
this.classList = {
4141
button: true,
4242
'is-loading': this.loading,
43-
'is-default': this.color === 'default',
44-
'is-primary': this.color === 'primary',
45-
'is-success': this.color === 'success',
46-
'is-info': this.color === 'info',
47-
'is-warning': this.color === 'warning',
48-
'is-danger': this.color === 'danger',
49-
'is-white': this.color === 'white',
50-
'is-light': this.color === 'light',
51-
'is-dark': this.color === 'dark',
52-
'is-black': this.color === 'black',
53-
'is-text': this.color === 'text',
43+
'is-default': this.option === 'default',
44+
'is-primary': this.option === 'primary',
45+
'is-success': this.option === 'success',
46+
'is-info': this.option === 'info',
47+
'is-warning': this.option === 'warning',
48+
'is-danger': this.option === 'danger',
49+
'is-white': this.option === 'white',
50+
'is-light': this.option === 'light',
51+
'is-dark': this.option === 'dark',
52+
'is-black': this.option === 'black',
53+
'is-text': this.option === 'text',
5454
};
5555
}
5656
5757
public onClick(e) {
58-
console.log('click');
5958
this.$emit('click', e);
6059
}
6160
}

‎src/stories/badge.stories.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// import { action } from '@storybook/addon-actions';
2+
import { storiesOf } from '@storybook/vue'
3+
import ButtonDot from './badge/buttons-dot.vue';
4+
import ButtonContent from './badge/buttons-content.vue';
5+
6+
storiesOf('Badge', module)
7+
.add('Buttons with simple dots', () => ({
8+
components: { ButtonDot },
9+
template: `<button-dot/>`
10+
}))
11+
.add('Buttons with content', () => ({
12+
components: { ButtonContent },
13+
template: `<button-content/>`
14+
}))
15+
;

‎src/stories/badge/buttons-content.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div class="root">
3+
<div class="buttons">
4+
<badge value="hot" :max="99">
5+
<x-button>
6+
Default
7+
</x-button>
8+
</badge>
9+
<badge :value="1000" :max="99">
10+
<x-button option="primary">
11+
Primary
12+
</x-button>
13+
</badge>
14+
<badge option="primary" value="new" :max="99">
15+
<x-button option="success">
16+
Success
17+
</x-button>
18+
</badge>
19+
<badge option="success" :value="1000" :max="9999">
20+
<x-button option="info">
21+
Info
22+
</x-button>
23+
</badge>
24+
<badge option="danger" :value="10" :max="9">
25+
<x-button option="warning">
26+
Warning
27+
</x-button>
28+
</badge>
29+
<badge option="dark" value="upd" :max="99">
30+
<x-button option="danger">
31+
Danger
32+
</x-button>
33+
</badge>
34+
</div>
35+
<br>
36+
<div class="buttons">
37+
<badge option="dark" :value="1000" :max="99">
38+
<x-button option="white">
39+
White
40+
</x-button>
41+
</badge>
42+
<badge option="primary" :value="1000" :max="99">
43+
<x-button option="light">
44+
Light
45+
</x-button>
46+
</badge>
47+
<badge option="warning" :value="1000" :max="99">
48+
<x-button option="dark">
49+
Dark
50+
</x-button>
51+
</badge>
52+
<badge option="danger" :value="1000" :max="99">
53+
<x-button option="black">
54+
Black
55+
</x-button>
56+
</badge>
57+
<badge option="dark" value="1000" :max="99">
58+
<x-button option="text">
59+
Text
60+
</x-button>
61+
</badge>
62+
</div>
63+
</div>
64+
</template>
65+
66+
<script lang="ts">
67+
import { Component, Vue } from 'vue-property-decorator';
68+
import xButton from '../../components/button/index.vue';
69+
import Badge from '../../components/badge/index.vue';
70+
71+
@Component({
72+
components: { xButton, Badge }
73+
})
74+
export default class ButtonContent extends Vue {
75+
76+
}
77+
</script>
78+
79+
<style lang="sass" scoped>
80+
.root
81+
margin-top: 15px
82+
.buttons
83+
.badge
84+
display: inline-block
85+
margin-right: 10px
86+
</style>

‎src/stories/badge/buttons-dot.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<div class="root">
3+
<div class="buttons">
4+
<badge :hide="hidden">
5+
<x-button>
6+
Default
7+
</x-button>
8+
</badge>
9+
<badge :hide="hidden">
10+
<x-button option="primary">
11+
Primary
12+
</x-button>
13+
</badge>
14+
<badge option="primary" :hide="hidden">
15+
<x-button option="success">
16+
Success
17+
</x-button>
18+
</badge>
19+
<badge option="success" :hide="hidden">
20+
<x-button option="info">
21+
Info
22+
</x-button>
23+
</badge>
24+
<badge option="danger" :hide="hidden">
25+
<x-button option="warning" :hide="hidden" loading>
26+
Warning
27+
</x-button>
28+
</badge>
29+
<badge option="dark" :hide="hidden">
30+
<x-button option="danger" :hide="hidden">
31+
Danger
32+
</x-button>
33+
</badge>
34+
</div>
35+
<br>
36+
<div class="buttons">
37+
<badge option="dark" :hide="hidden">
38+
<x-button option="white">
39+
White
40+
</x-button>
41+
</badge>
42+
<badge option="primary" :hide="hidden">
43+
<x-button option="light">
44+
Light
45+
</x-button>
46+
</badge>
47+
<badge option="warning" :hide="hidden">
48+
<x-button option="dark">
49+
Dark
50+
</x-button>
51+
</badge>
52+
<badge option="danger" :hide="hidden">
53+
<x-button option="black">
54+
Black
55+
</x-button>
56+
</badge>
57+
<badge option="dark" :hide="hidden">
58+
<x-button option="text">
59+
Text
60+
</x-button>
61+
</badge>
62+
</div>
63+
64+
<br><br>
65+
<button @click="hideBadge">show/hide</button>
66+
</div>
67+
</template>
68+
69+
<script lang="ts">
70+
import { Component, Vue } from 'vue-property-decorator';
71+
import xButton from '../../components/button/index.vue';
72+
import Badge from '../../components/badge/index.vue';
73+
74+
@Component({
75+
components: { xButton, Badge }
76+
})
77+
export default class ButtonDot extends Vue {
78+
79+
public hidden! = false;
80+
81+
public hideBadge() {
82+
this.hidden = !this.hidden;
83+
}
84+
}
85+
</script>
86+
87+
<style lang="sass" scoped>
88+
.root
89+
margin-top: 15px
90+
.buttons
91+
.badge
92+
display: inline-block
93+
margin-right: 10px
94+
</style>

‎src/stories/button/colors.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,37 @@
44
<x-button>
55
Default
66
</x-button>
7-
<x-button color="primary">
7+
<x-button option="primary">
88
Primary
99
</x-button>
10-
<x-button color="success">
10+
<x-button option="success">
1111
Success
1212
</x-button>
13-
<x-button color="info">
13+
<x-button option="info">
1414
Info
1515
</x-button>
16-
<x-button color="warning">
16+
<x-button option="warning">
1717
Warning
1818
</x-button>
19-
<x-button color="danger">
19+
<x-button option="danger">
2020
Danger
2121
</x-button>
2222
</div>
2323
<br>
2424
<div class="buttons">
25-
<x-button color="white">
25+
<x-button option="white">
2626
White
2727
</x-button>
28-
<x-button color="light">
28+
<x-button option="light">
2929
Light
3030
</x-button>
31-
<x-button color="dark">
31+
<x-button option="dark">
3232
Dark
3333
</x-button>
34-
<x-button color="black">
34+
<x-button option="black">
3535
Black
3636
</x-button>
37-
<x-button color="text">
37+
<x-button option="text">
3838
Text
3939
</x-button>
4040
</div>

0 commit comments

Comments
 (0)