visua-vue/src/components/button/VLink.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 '@visua/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'], {'disabled': props.disabled}]"
    :style="props.disabled ? { pointerEvents: 'none' } : {}"
  />
</template>

<style lang="css" scoped>
*{
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}

.p-button{
  padding: 0px;
  gap: calc(var(--p-button-gap)/2);
}

.p-button.disabled{
  --p-button-link-color: var(--text-disabled-grey);
  --p-button-link-hover-color: var(--text-disabled-grey);
  --p-button-link-active-color: var(--text-disabled-grey);
  -webkit-user-select: none;
  user-select: none;
}

</style>