47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<template>
|
|
<RadioGroup
|
|
:model-value="modelValue"
|
|
@update:modelValue="$emit('update:modelValue', $event)"
|
|
>
|
|
<RadioGroupLabel class="heading-1 mb-8 block">
|
|
{{ label }}
|
|
</RadioGroupLabel>
|
|
<div
|
|
class="align-items-center flex flex-col justify-between justify-items-center space-y-6 md:flex-row md:space-x-6 md:space-y-0"
|
|
>
|
|
<RadioGroupOption
|
|
v-for="item in items"
|
|
:key="item.value"
|
|
as="template"
|
|
class="flex-1"
|
|
:value="item.value"
|
|
>
|
|
<div
|
|
class="flex-1 cursor-pointer py-10 text-center text-xl font-bold hover:border-gray-500 hover:bg-gray-200 ui-checked:bg-sky-500 ui-not-checked:border"
|
|
>
|
|
<RadioGroupLabel as="span">
|
|
{{ $t(item.name) }}
|
|
</RadioGroupLabel>
|
|
</div>
|
|
</RadioGroupOption>
|
|
</div>
|
|
</RadioGroup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RadioItem } from "@/pages/learningPath/learningContentPage/feedback/feedback.types";
|
|
|
|
import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
|
|
|
|
interface Props {
|
|
modelValue: any;
|
|
items: RadioItem<any>[];
|
|
label: string | undefined;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
label: undefined,
|
|
});
|
|
defineEmits(["update:modelValue"]);
|
|
</script>
|