From 8e0756f166286209b2a01cf72f90b39ab6f107d2 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sun, 2 Apr 2023 17:07:57 +0200
Subject: [PATCH] feat: add column and grid styling to button group

---
 src/components/ButtonGroup.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/ButtonGroup.vue b/src/components/ButtonGroup.vue
index ca792d8..9c331d3 100644
--- a/src/components/ButtonGroup.vue
+++ b/src/components/ButtonGroup.vue
@@ -1,5 +1,14 @@
+<script setup lang="ts">
+interface Props {
+  col?: boolean;
+  grid?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
-  <div class="btn-group">
+  <div class="btn-group" :class="{ col: col, grid: grid }">
     <slot></slot>
   </div>
 </template>
@@ -10,6 +19,21 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
 
+  &.col {
+    flex-flow: column nowrap;
+  }
+
+  &.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin: 1rem 0;
+
+    > * {
+      margin: 0;
+    }
+  }
+
   > * {
     flex: var(--button-group-flex);
     margin: 1rem 0;