70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<template>
|
|
<component :is="component" v-bind="properties" class="add-widget" @click="$emit('click')" :class="{ 'add-widget--reverse': reverse }">
|
|
<add-icon class="add-widget__add"></add-icon>
|
|
</component>
|
|
</template>
|
|
|
|
<script>
|
|
import AddIcon from '@/components/icons/AddIcon.vue';
|
|
|
|
export default {
|
|
props: {
|
|
route: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
reverse: { // use reverse colors
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
click: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
component() {
|
|
// only use the router link if the route prop is provided, otherwise render a normal anchor tag
|
|
return this.route ? 'router-link' : 'a'
|
|
},
|
|
properties() {
|
|
return this.route ? {
|
|
to: this.route,
|
|
tag: 'div'
|
|
} : {}
|
|
}
|
|
},
|
|
|
|
components: {
|
|
AddIcon
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.add-widget {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include widget-shadow;
|
|
cursor: pointer;
|
|
|
|
&__add {
|
|
width: 80px;
|
|
fill: $color-grey;
|
|
}
|
|
|
|
&--reverse {
|
|
@include widget-shadow-reverse;
|
|
}
|
|
|
|
&--reverse &__add {
|
|
fill: white;
|
|
}
|
|
}
|
|
</style>
|