83 lines
1.4 KiB
Vue
83 lines
1.4 KiB
Vue
<template>
|
|
<component
|
|
v-bind="properties"
|
|
:class="{ 'add-widget--reverse': reverse }"
|
|
class="add-widget"
|
|
:is="component"
|
|
@click="$emit('click')"
|
|
>
|
|
<add-icon class="add-widget__add" />
|
|
</component>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/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>
|