51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import Button from 'primevue/button';
|
||
|
|
import type IVLink from '@/components/button/IVLink.type';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import styles from '@/assets/typography.module.css'
|
||
|
|
|
||
|
|
const props = defineProps<IVLink>();
|
||
|
|
|
||
|
|
// Icon position computed
|
||
|
|
const iconPos = computed<string>(() => {
|
||
|
|
return props.iconRight ? 'right': 'left'
|
||
|
|
})
|
||
|
|
|
||
|
|
// Change the html tag of root element
|
||
|
|
const htmlTag = computed(() => { return props.to ? 'RouterLink' : props.href ? 'a' : 'button'})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Button
|
||
|
|
variant="link"
|
||
|
|
role="link"
|
||
|
|
:label="props.label"
|
||
|
|
:aria-label="props.label"
|
||
|
|
:icon="props.icon"
|
||
|
|
:disabled="props.disabled"
|
||
|
|
:aria-disabled="props.disabled"
|
||
|
|
:icon-pos="iconPos"
|
||
|
|
:as="htmlTag"
|
||
|
|
:href="props.href"
|
||
|
|
:target="props.target"
|
||
|
|
:to="props.to"
|
||
|
|
:tabindex="props.disabled ? -1 : 0"
|
||
|
|
@click="props.disabled && $event.preventDefault()"
|
||
|
|
class="p-button"
|
||
|
|
:class="[styles['text-body-MD-standard-text-Regular']]"
|
||
|
|
:style="props.disabled ? { pointerEvents: 'none' } : {}"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
*{
|
||
|
|
text-decoration: none;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-button.p-button-link:hover{
|
||
|
|
border: 2px solid var(--p-button-link-color);
|
||
|
|
}
|
||
|
|
</style>
|