From 9e76cdf938892404f893c8c42c3dee7fbd26052e Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Fri, 1 Jul 2022 17:17:48 +0300
Subject: [PATCH] feat: button group

---
 docs/.vitepress/config.ts                     |  1 +
 docs/guide/buttonGroup/buttonGroup.md         | 49 +++++++++++++++++++
 .../examples/ButtonGroupBasicExample.vue      | 11 +++++
 .../examples/ButtonGroupIconExample.vue       | 16 ++++++
 src/components/ButtonGroup/ButtonGroup.vue    | 21 ++++++++
 src/index.ts                                  |  1 +
 6 files changed, 99 insertions(+)
 create mode 100644 docs/guide/buttonGroup/buttonGroup.md
 create mode 100644 docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
 create mode 100644 docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
 create mode 100644 src/components/ButtonGroup/ButtonGroup.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 37cbc78..31a9ea5 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -17,6 +17,7 @@ function buildSidebar() {
 function getComponents() {
   return [
     { text: 'Button', link: '/guide/button/button.md' },
+    { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
     { text: 'Spinner', link: '/guide/spinner/spinner.md' },
   ]
 }
diff --git a/docs/guide/buttonGroup/buttonGroup.md b/docs/guide/buttonGroup/buttonGroup.md
new file mode 100644
index 0000000..66b13e2
--- /dev/null
+++ b/docs/guide/buttonGroup/buttonGroup.md
@@ -0,0 +1,49 @@
+<script setup>
+import ButtonGroupBasicExample from './examples/ButtonGroupBasicExample.vue';
+import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
+</script>
+
+# Button Group
+
+reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+
+## Basic example
+
+<ButtonGroupBasicExample />
+
+```vue
+<script setup>
+import { ButtonGroup, Button } from 'flowbite-vue'
+</script>
+<template>
+  <button-group>
+    <Button>hello world</Button>
+    <Button color="purple">hello world</Button>
+    <Button color="alternative">hello world</Button>
+    <Button color="red">hello world</Button>
+  </button-group>
+</template>
+```
+
+## Buttons with icons
+
+<ButtonGroupIconExample />
+
+```vue
+<script setup>
+import { ButtonGroup, Button } from 'flowbite-vue'
+</script>
+<template>
+  <button-group>
+    <Button outline>Button1</Button>
+    <Button outline>Button2</Button>
+    <Button outline>Button3</Button>
+    <Button outline>
+      hello world
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </button-group>
+</template>
+```
\ No newline at end of file
diff --git a/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue b/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
new file mode 100644
index 0000000..cfb19d0
--- /dev/null
+++ b/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <button-group>
+    <Button>hello world</Button>
+    <Button color="purple">hello world</Button>
+    <Button color="alternative">hello world</Button>
+    <Button color="red">hello world</Button>
+  </button-group>
+</template>
+<script setup>
+import { ButtonGroup, Button } from '../../../../src/index'
+</script>
diff --git a/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue b/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
new file mode 100644
index 0000000..86e8310
--- /dev/null
+++ b/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <button-group>
+    <Button outline>Button1</Button>
+    <Button outline>Button2</Button>
+    <Button outline>Button3</Button>
+    <Button outline>
+      hello world
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </button-group>
+</template>
+<script setup>
+import { ButtonGroup, Button } from '../../../../src/index'
+</script>
diff --git a/src/components/ButtonGroup/ButtonGroup.vue b/src/components/ButtonGroup/ButtonGroup.vue
new file mode 100644
index 0000000..ba52507
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="btn-group inline-flex rounded-md shadow-sm" role="group">
+   <slot />
+  </div>
+</template>
+<!-- TODO: maybe use provide/inject to control styles -->
+<style>
+@tailwind components;
+
+@layer components {
+  .btn-group > button {
+    @apply rounded-none
+  }
+  .btn-group > button:first-child {
+    @apply rounded-l-lg
+  }
+  .btn-group > button:last-child {
+    @apply rounded-r-lg
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 96a76e1..d44c61b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,3 @@
 export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
+export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'