70 lines
1.1 KiB
Vue
70 lines
1.1 KiB
Vue
<template>
|
|
<b-button
|
|
class="dot-btn"
|
|
:class="['dot-btn-' + variant, { 'active': active, 'show': show }]"
|
|
v-bind="$attrs" v-on="$listeners"
|
|
:active="active"
|
|
:variant="variant"
|
|
@mouseover="show = true"
|
|
@mouseleave="show = false"
|
|
@focus="show = true"
|
|
@blur="show = false"
|
|
@click="onClick"
|
|
>
|
|
<span>
|
|
<slot name="default" />
|
|
</span>
|
|
</b-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DotButton',
|
|
|
|
props: {
|
|
variant: { type: String, required: true },
|
|
active: { type: Boolean, default: false }
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onClick (e) {
|
|
this.$el.blur()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@each $color, $value in $theme-colors {
|
|
.dot-btn-#{$color} {
|
|
@include dot-button-variant($value, $value);
|
|
}
|
|
}
|
|
|
|
.dot-btn {
|
|
word-break: keep-all;
|
|
white-space: pre;
|
|
|
|
&:not(.show) {
|
|
min-height: 1.1875rem;
|
|
min-width: 1.1875rem;
|
|
padding: 0;
|
|
|
|
&.dot-btn-depart {
|
|
min-height: 1.875rem;
|
|
min-width: 1.875rem;
|
|
}
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|