From e28d3cfc6e3e715e70fd9b6b891b2f59b974230a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 19 Jul 2025 02:34:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Added=20button=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/VButton.vue | 119 ++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 src/components/button/VButton.vue

diff --git a/src/components/button/VButton.vue b/src/components/button/VButton.vue
new file mode 100644
index 0000000..7274f30
--- /dev/null
+++ b/src/components/button/VButton.vue
@@ -0,0 +1,119 @@
+<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,
+    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.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>