add basics for essential componentsui-kit-essentials

1 files changed, 26 insertions, 0 deletions

diff --git a/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue
new file mode 100644
index 0000000..add111a
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="button-group">
+    <component 
+      v-for="(vnode, index) in validButtons" 
+      :is="vnode" 
+      :key="index" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue';
+import { useSlotFilter } from './../../composables/';
+
+const slots = useSlots();
+const { getValidChildren } = useSlotFilter(slots);
+
+const validButtons = computed(() => getValidChildren('SuiButton'));
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  gap: 1rem;
+}
+</style>
\ No newline at end of file