You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<template>
|
|
|
|
<v-tooltip
|
|
|
|
:top="top"
|
|
|
|
:bottom="bottom"
|
|
|
|
:left="left"
|
|
|
|
:right="right"
|
|
|
|
:color="tooltipColor"
|
|
|
|
:transition="transition"
|
|
|
|
>
|
|
|
|
<template v-slot:activator="{ on }">
|
|
|
|
<v-btn
|
|
|
|
slot="activator"
|
|
|
|
:color="buttonColor"
|
|
|
|
:dark="dark"
|
|
|
|
:light="light"
|
|
|
|
v-on="on"
|
|
|
|
@click.stop="$emit('click', $event)"
|
|
|
|
:small="small"
|
|
|
|
:large="large"
|
|
|
|
:x-large="xLarge"
|
|
|
|
:x-small="xSmall"
|
|
|
|
:type="type"
|
|
|
|
:outlined="outlined"
|
|
|
|
:icon="onlyIcon"
|
|
|
|
fab
|
|
|
|
>
|
|
|
|
<v-icon dark>{{ icon }}</v-icon>
|
|
|
|
</v-btn>
|
|
|
|
</template>
|
|
|
|
<span>{{ text }}</span>
|
|
|
|
</v-tooltip>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: "tooltipButton",
|
|
|
|
props: {
|
|
|
|
icon: {
|
|
|
|
type: String,
|
|
|
|
default: "WMi-user",
|
|
|
|
},
|
|
|
|
buttonColor: {
|
|
|
|
type: String,
|
|
|
|
default: "black",
|
|
|
|
},
|
|
|
|
text: {
|
|
|
|
type: String,
|
|
|
|
default: "متن پیش فرض",
|
|
|
|
},
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
default: "button",
|
|
|
|
},
|
|
|
|
tooltipColor: {
|
|
|
|
type: String,
|
|
|
|
default: "black",
|
|
|
|
},
|
|
|
|
bottom: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
left: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
right: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
transition: {
|
|
|
|
type: String,
|
|
|
|
default: "fade-transition",
|
|
|
|
},
|
|
|
|
light: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
small: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
large: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
xSmall: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
xLarge: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
default: "button",
|
|
|
|
},
|
|
|
|
outlined: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
onlyIcon: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
top() {
|
|
|
|
return !this.bottom && !this.left && !this.right ? true : false;
|
|
|
|
},
|
|
|
|
dark() {
|
|
|
|
return !this.light ? true : false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|