78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<component
|
|
:is="component"
|
|
v-bind="properties"
|
|
:class="{ 'add-widget--reverse': reverse }"
|
|
class="add-widget"
|
|
@click="$emit('click')">
|
|
<add-icon class="add-widget__add"/>
|
|
</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
|
|
}
|
|
},
|
|
|
|
components: {
|
|
AddIcon
|
|
},
|
|
|
|
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'
|
|
} : {};
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.add-widget {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include widget-shadow;
|
|
cursor: pointer;
|
|
|
|
@include desktop {
|
|
display: flex;
|
|
}
|
|
|
|
&__add {
|
|
width: 80px;
|
|
fill: $color-silver-dark;
|
|
}
|
|
|
|
&--reverse {
|
|
@include widget-shadow-reverse;
|
|
}
|
|
|
|
&--reverse &__add {
|
|
fill: white;
|
|
}
|
|
}
|
|
</style>
|