2 files changed, 103 insertions, 0 deletions
diff --git a/resources/vue/components/StudipRadioButton.vue b/resources/vue/components/StudipRadioButton.vue
new file mode 100644
index 0000000..2fbdbe8
--- /dev/null
+++ b/resources/vue/components/StudipRadioButton.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {computed} from "vue";
+
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Boolean],
+        required: true,
+    },
+    name: {
+        type: String,
+        required: true,
+    },
+    value: {
+        type: [String, Number, Boolean],
+        required: true
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const model = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(newValue) {
+        emit('update:modelValue', newValue);
+    }
+})
+
+
+const shape = computed(() => {
+    return model.value === props.value ? 'radiobutton-checked' : 'radiobutton-unchecked';
+})
+</script>
+
+<template>
+    <label class="as-link studip-radiobutton">
+        <input type="radio"
+               v-model="model"
+               :value="value"
+               :name="name"
+               class="sr-only"
+        >
+
+        <StudipIcon :shape="shape" aria-hidden="true"></StudipIcon>
+
+        <slot>
+            No content provided for slot
+        </slot>
+    </label>
+</template>
+
+<style lang="scss">
+.studip-radiobutton {
+    display: block;
+
+    .studip-icon {
+        vertical-align: text-bottom;
+    }
+}
+</style>
diff --git a/resources/vue/components/StudipRadioButtonGroup.vue b/resources/vue/components/StudipRadioButtonGroup.vue
new file mode 100644
index 0000000..e5fd5e7
--- /dev/null
+++ b/resources/vue/components/StudipRadioButtonGroup.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {computed, onMounted} from "vue";
+import StudipRadioButton from "./StudipRadioButton.vue";
+
+const props = defineProps<{
+    label: string;
+    modelValue: string | number | boolean;
+    name: string;
+    options: Record<string, string>
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const model = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(newValue) {
+        emit('update:modelValue', newValue);
+    }
+})
+
+onMounted(() => {
+    document.addEventListener('focusin', event => console.log('focussed', event.target), {capture: true})
+})
+
+</script>
+<template>
+    <div role="radiogroup"
+         :aria-label="props.label"
+    >
+        <StudipRadioButton v-for="(optionLabel, key) in options"
+                           :key="key"
+                           :value="key"
+                           :name="name"
+                           v-model="model"
+        >
+            {{ optionLabel }}
+        </StudipRadioButton>
+
+    </div>
+</template>