add basics for essential componentsui-kit-essentials

2 files changed, 71 insertions, 0 deletions

diff --git a/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js
new file mode 100644
index 0000000..56c1dbb
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js
@@ -0,0 +1,45 @@
+// SuiButtonGroup.stories.js
+import SuiButtonGroup from './SuiButtonGroup.vue';
+import SuiButton from './../SuiButton/SuiButton.vue';
+
+const meta = {
+  title: 'Stud.IP UI Elements/ButtonGroup',
+  component: SuiButtonGroup,
+  tags: ['autodocs', 'since:6.3.0', 'new', 'alpha'],
+  subcomponents: { SuiButton },
+  parameters: {
+        docs: {
+            description: {
+                component: ''
+            },
+        },
+    },
+    argTypes: {}
+};
+
+
+
+export default meta;
+
+
+export const SlotValidationTest = {
+  args: {
+  },
+  render: (args) => ({
+    components: { SuiButtonGroup, SuiButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SuiButtonGroup v-bind="args">
+        <SuiButton label="Button 1" />
+        <div style="background: red; padding: 10px; margin: 5px;">
+          Ich bin ein verbotenes DIV und sollte verschwinden!
+        </div>
+        <SuiButton label="Button 2"  />
+        <span>Ich bin ein verbotener Text und werde gefiltert.</span>
+        <SuiButton label="Button 3" disabled />
+      </SuiButtonGroup>
+    `,
+  }),
+};
\ No newline at end of file
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