121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import Button from 'primevue/button';
|
|
import type IVButton from './IVButton.type';
|
|
import { computed } from 'vue';
|
|
import styles from '@visua/typography.module.css';
|
|
|
|
// Props configuration with default values
|
|
const props = withDefaults(defineProps<IVButton>(), {
|
|
disabled: false,
|
|
label: undefined,
|
|
secondary: false,
|
|
tertiary: false,
|
|
iconRight: false,
|
|
iconOnly: false,
|
|
noOutline: false,
|
|
danger: false,
|
|
size: 'md',
|
|
icon: '',
|
|
onClick: () => undefined,
|
|
})
|
|
|
|
// Button size class computed
|
|
const size = computed(() => {
|
|
if (['sm', 'small'].includes(props.size)) return 'small';
|
|
else if (['md', 'medium', '', undefined].includes(props.size)) return undefined;
|
|
else if (['lg', 'large'].includes(props.size)) return 'large';
|
|
else return undefined;
|
|
})
|
|
|
|
// Icon position computed
|
|
const iconPos = computed<string>(() => {
|
|
return props.iconRight ? 'right': 'left'
|
|
})
|
|
|
|
// Button variant computed
|
|
const variant = computed(() => {
|
|
if(props.noOutline) return 'text';
|
|
else if (props.secondary || props.tertiary) return 'outlined';
|
|
else return undefined;
|
|
})
|
|
|
|
// Button severity computed
|
|
const severity = computed(() => {
|
|
if(props.secondary) return 'secondary';
|
|
else if(props.danger) return 'danger';
|
|
else return undefined
|
|
});
|
|
|
|
// Button font computed
|
|
const font = computed(() => {
|
|
switch (size.value) {
|
|
case 'large': return styles['text-body-LG-article-text-Regular'];
|
|
case 'small': return styles['text-body-SM-detail-text-Regular'];
|
|
default: return styles['text-body-MD-standard-text-Regular'];
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Button
|
|
:label="props.iconOnly ? undefined : props.label"
|
|
:variant="variant"
|
|
:severity="severity"
|
|
:icon="props.icon"
|
|
:size="size"
|
|
:class="['p-button', font]"
|
|
v-bind="$attrs"
|
|
:disabled="props.disabled"
|
|
:aria-disabled="props.disabled"
|
|
:icon-pos="iconPos"
|
|
:onclick="props.onClick"
|
|
:title="props.title"
|
|
role="button"
|
|
:aria-label="props.label"
|
|
>
|
|
</Button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* disable state */
|
|
.p-button:disabled{
|
|
/* variant: primary or default */
|
|
--p-button-primary-background: var(--background-disabled-grey);
|
|
--p-button-primary-hover-background: var(--background-disabled-grey);
|
|
--p-button-primary-active-background: var(--background-disabled-grey);
|
|
--p-button-primary-color: var(--text-disabled-grey);
|
|
--p-button-primary-hover-color: var(--text-disabled-grey);
|
|
--p-button-primary-active-color: var(--text-disabled-grey);
|
|
/* variant: danger */
|
|
--p-button-danger-background: var(--background-disabled-grey);
|
|
--p-button-danger-hover-background: var(--background-disabled-grey);
|
|
--p-button-danger-active-background: var(--background-disabled-grey);
|
|
--p-button-danger-color: var(--text-disabled-grey);
|
|
--p-button-danger-hover-color: var(--text-disabled-grey);
|
|
--p-button-danger-active-color: var(--text-disabled-grey);
|
|
/* variant: secondary and tertiary */
|
|
--p-button-secondary-background: var(--background-transparent);
|
|
--p-button-secondary-hover-background: var(--background-transparent);
|
|
--p-button-secondary-active-background: var(--background-transparent);
|
|
--p-button-secondary-border-color: var(--border-disabled-grey);
|
|
--p-button-secondary-hover-border-color: var(--border-disabled-grey);
|
|
--p-button-secondary-active-border-color: var(--border-disabled-grey);
|
|
|
|
--p-button-outlined-primary-hover-background: var(--background-transparent);
|
|
--p-button-outlined-primary-active-background: var(--background-transparent);
|
|
--p-button-outlined-primary-border-color: var(--border-disabled-grey);
|
|
--p-button-outlined-primary-color: var(--text-disabled-grey);
|
|
--p-button-outlined-secondary-hover-background: var(--background-transparent);
|
|
--p-button-outlined-secondary-active-background: var(--background-transparent);
|
|
--p-button-outlined-secondary-border-color: var(--border-disabled-grey);
|
|
--p-button-outlined-secondary-color: var(--text-disabled-grey);
|
|
/* variant: no-outline */
|
|
--p-button-text-primary-hover-background: var(--background-transparent);
|
|
--p-button-text-primary-active-background: var(--background-transparent);
|
|
--p-button-text-primary-color: var(--text-disabled-grey);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|