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