From cf4eee75b03c5787e23d6716c61c47fcef6785b2 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 20 Jul 2025 03:36:43 +0200
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Button=20gro?=
 =?UTF-8?q?up=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/button/VButtonGroup.vue b/src/components/button/VButtonGroup.vue
new file mode 100644
index 0000000..cd542be
--- /dev/null
+++ b/src/components/button/VButtonGroup.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import VButton from './VButton.vue';
+import type IVButtonGroup from './IVButton.type.ts';
+import { computed, ref, onMounted } from 'vue';
+
+const props = withDefaults(defineProps<IVButtonGroup>(), {
+    buttons: () => [],
+    inlineLayoutWhen: 'never',
+    size: 'md',
+    align: undefined,
+    iconRight: false,
+})
+
+// Reference to <ul> element containing buttons
+const buttonsEl = ref<HTMLUListElement | null>(null)
+
+// Determines whether the layout should be in line
+const inlineAlways = computed(() => ['always', '', true].includes(props.inlineLayoutWhen))
+const inlineSm = computed(() => ['sm', 'small'].includes(props.inlineLayoutWhen as string))
+const inlineMd = computed(() => ['md', 'medium'].includes(props.inlineLayoutWhen as string))
+const inlineLg = computed(() => ['lg', 'large'].includes(props.inlineLayoutWhen as string))
+
+// Horizontal alignment of button group
+const center = computed(() => props.align === 'center')
+const right = computed(() => props.align === 'right')
+
+// Uniform width for all buttons
+const equisizedWidth = ref('auto')
+const groupStyle = computed(() => `--equisized-width: ${equisizedWidth.value};`)
+
+// Function for calculating maximum button width and applying it to all buttons
+const computeEquisizedWidth = async () => {
+  let maxWidth = 0
+  await new Promise((resolve) => setTimeout(resolve, 100))
+  buttonsEl.value?.querySelectorAll('.p-button').forEach((btn: Element) => {
+    const button = btn as HTMLButtonElement
+    const width = button.offsetWidth
+    const buttonStyle = window.getComputedStyle(button)
+    const marginLeft = +buttonStyle.marginLeft.replace('px', '')
+    const marginRight = +buttonStyle.marginRight.replace('px', '')
+    button.style.width = 'var(--equisized-width)'
+    const newWidth = width + marginLeft + marginRight
+    if (newWidth > maxWidth) {
+      maxWidth = newWidth
+    }
+  })
+  equisizedWidth.value = `${maxWidth}px`
+}
+
+// Calculation of uniform installation width if necessary
+onMounted(async () => {
+  if (!buttonsEl.value || !props.equisized) {
+    return
+  }
+  await computeEquisizedWidth()
+})
+</script>
+
+<template>
+  <ul
+    ref="buttonsEl"
+    role="list"
+    :style="groupStyle"
+    class="btns-group"
+    :class="{
+      'btns-group--equisized': equisized,
+      'btns-group--inline': inlineAlways || inlineSm || inlineMd || inlineLg,
+      'btns-group--center': center,
+      'btns-group--right': right,
+      'btns-group--inline-reverse': reverse,
+    }"
+  >
+    <li v-for="({onClick, title, ...button}, i) in buttons" :key="i" role="listitem">
+      <VButton
+        v-bind="button"
+        @click="onClick"
+        :size="props.size"
+        :icon-right="props.iconRight"
+        :title="title"
+      />
+    </li>
+    <slot/>
+  </ul>
+</template>
+
+<style lang="css" scoped>
+.btns-group{
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+}
+
+.btns-group--equisized{width: var(--equisized-width, auto);}
+.btns-group--inline{flex-direction: row;}
+.btns-group--center{justify-content: center;}
+.btns-group--right{justify-content: flex-end;}
+.btns-group--inline-reverse{flex-direction: row-reverse;}
+
+</style>

From 60cdf35007c83c3312f6e3c50319c9169a4f4b0d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 09:32:21 +0200
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=85=20test:=20Added=20onClick=20funct?=
 =?UTF-8?q?ion=20button=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VButton.spec.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/test/VButton.spec.ts b/test/VButton.spec.ts
index d0cc48f..c0c1974 100644
--- a/test/VButton.spec.ts
+++ b/test/VButton.spec.ts
@@ -93,6 +93,21 @@ describe('VButton', () => {
     expect(onClick).not.toHaveBeenCalled()
   })
 
+  test('Clicked button', async () => {
+    const onClick = vi.fn()
+    const wrapper = mount(VButton, {
+      props: {
+        title: 'button',
+        label: 'label',
+        onClick,
+      }
+    })
+    const button = wrapper.find('button')
+    await button.trigger('click')
+    // check that the onClck function has been called
+    expect(onClick).toHaveBeenCalled()
+  })
+
   test('small button', () => {
     const wrapper = mount(VButton, {
       props: {

From 9b5019c6025270405927b697858f27d3eeb42ecf Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 09:58:47 +0200
Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=85=20test:=20Added=20VButtonGroup=20?=
 =?UTF-8?q?test=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VButtonGroup.spec.ts | 46 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 test/VButtonGroup.spec.ts

diff --git a/test/VButtonGroup.spec.ts b/test/VButtonGroup.spec.ts
new file mode 100644
index 0000000..68918b4
--- /dev/null
+++ b/test/VButtonGroup.spec.ts
@@ -0,0 +1,46 @@
+import { mount } from "@vue/test-utils";
+import VButtonGroup from '../src/components/button/VButtonGroup.vue';
+import {test, expect, describe, vi} from 'vitest';
+
+const buttons = [
+  {title: 'button 1', label: 'label 1', onClick: vi.fn()},
+  {title: 'button 2', label: 'label 2', onClick: vi.fn()}
+]
+
+describe('VButtonGroup', () => {
+  test('Displays all buttons passed as props', () => {
+    const wrapper = mount(VButtonGroup, {
+      props: {
+        buttons,
+        title: 'button group',
+      }
+    })
+    const buttonElements = wrapper.findAll('button')
+    expect(buttonElements).toHaveLength(2)
+    expect(buttonElements[0].text()).toContain('label 1')
+    expect(buttonElements[1].text()).toContain('label 2')
+  })
+
+  test('applies the inline class when inlineLayoutWhen is “always”', () => {
+    const wrapper = mount(VButtonGroup, {
+      props: {
+        buttons,
+        title: 'button group',
+        inlineLayoutWhen: 'always',
+      }
+    })
+    expect(wrapper.classes()).toContain('btns-group--inline')
+  })
+
+  test('clicked button', async () => {
+    const onClick = vi.fn()
+    const wrapper = mount(VButtonGroup, {
+      props: {
+        buttons: [{title: 'button 1', label: 'label 1', onClick}],
+        title: 'button group',
+      }
+    })
+    await wrapper.find('button').trigger('click')
+    expect(onClick).toHaveBeenCalled()
+  })
+})

From 728efc373a052ee8f1b8c418548582bed3c44f07 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 10:00:30 +0200
Subject: [PATCH 4/4] Display some button group component variants

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6dbd0cb..ac826ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import VButtonView from '../template/VButtonView.vue'
+// import VButtonView from '../template/VButtonView.vue'
+import VButtonGroupView from '../template/VButtonGroupView.vue';
 </script>
 
 
 <template>
-  <VButtonView/>
+  <!-- <VButtonView/> -->
+  <VButtonGroupView/>
 </template>