64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
|
<li class="popover-links__link">
|
|
<a
|
|
class="popover-link"
|
|
@click="$emit('link-action')"
|
|
>
|
|
<component
|
|
class="popover-link__icon"
|
|
:is="icon"
|
|
/>
|
|
<span class="popover-link__text">{{ text }}</span>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
const EyeIcon = defineAsyncComponent(() => import('@/components/icons/EyeIcon.vue'));
|
|
const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
|
|
const PenIcon = defineAsyncComponent(() => import('@/components/icons/PenIcon.vue'));
|
|
|
|
export default {
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
components: {
|
|
EyeIcon,
|
|
TrashIcon,
|
|
PenIcon,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.popover-link {
|
|
@include popover-link;
|
|
|
|
&__icon {
|
|
width: 30px;
|
|
fill: $color-charcoal-dark;
|
|
margin-right: 15px;
|
|
display: flex;
|
|
flex-basis: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__text {
|
|
width: auto;
|
|
display: flex;
|
|
flex-basis: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
</style>
|