add dot-only prop to DotButton
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<b-button
|
<b-button
|
||||||
class="dot-btn"
|
class="dot-btn"
|
||||||
:class="['dot-btn-' + variant, { 'active': active, 'show': show }]"
|
:class="['dot-btn-' + variant, { 'active': active, 'show': show, 'hide': dotOnly }]"
|
||||||
v-bind="$attrs" v-on="$listeners"
|
v-bind="$attrs" v-on="$listeners"
|
||||||
:active="active"
|
:active="active"
|
||||||
:variant="variant"
|
:variant="variant"
|
||||||
@@ -24,7 +24,8 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
variant: { type: String, required: true },
|
variant: { type: String, required: true },
|
||||||
active: { type: Boolean, default: false },
|
active: { type: Boolean, default: false },
|
||||||
hovered: { type: Boolean, default: false }
|
hovered: { type: Boolean, default: false },
|
||||||
|
dotOnly: { type: Boolean, default: false }
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
@@ -52,7 +53,8 @@ export default {
|
|||||||
word-break: keep-all;
|
word-break: keep-all;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
|
|
||||||
&:not(.show) {
|
&:not(.show),
|
||||||
|
&.hide {
|
||||||
min-height: 1.1875rem;
|
min-height: 1.1875rem;
|
||||||
min-width: 1.1875rem;
|
min-width: 1.1875rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
@click="onOpen(child.id)"
|
@click="onOpen(child.id)"
|
||||||
:variant="child.variant"
|
:variant="child.variant"
|
||||||
:active="activeNodes.includes(child.id)"
|
:active="activeNodes.includes(child.id)"
|
||||||
|
dot-only
|
||||||
>
|
>
|
||||||
{{ $t('variants.' + child.variant) }}
|
{{ $t('variants.' + child.variant) }}
|
||||||
</dot-button>
|
</dot-button>
|
||||||
|
|||||||
Reference in New Issue
Block a user