ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Radio Group component, update styling

This commit is contained in:
Ramon Wenger 2022-12-08 17:03:49 +01:00
parent dd30010269
commit aa6054a84e
1 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/components/ui/ItRadioGroup.vue
View File

@ -1,19 +1,29 @@
<template>
<RadioGroup :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
class="mt-2 flex flex-row justify-between">
<RadioGroupLabel>{{ label }}</RadioGroupLabel>
<div class="flex justify-items-center space-x-4">
<RadioGroup
:model-value="modelValue"
@update:modelValue="$emit('update:modelValue', $event)"
class="mt-2 flex flex-row justify-between"
>
<RadioGroupLabel class="flex-1">{{ label }}</RadioGroupLabel>
<div class="flex flex-1 justify-items-center space-x-4">
<RadioGroupOption
as="template"
v-for="item in items"
:key="item.id"
v-slot="{ checked, active }"
:value="item.id"
class="flex-1"
:value="item.value"
>
<div class="" :class="[
checked ? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
<div
class=""
:class="[
checked
? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700'
: 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
active ? 'ring ring-offset-2 ring-indigo-500' : '',
'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase']">
'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase',
]"
>
<RadioGroupLabel as="span">
{{ item.name }}
</RadioGroupLabel>
@ -21,26 +31,22 @@
</RadioGroupOption>
</div>
</RadioGroup>
</template>
<script setup lang="ts">
interface RadioItem {
id: string;
name: string;
}
import type { RadioItem } from "@/components/learningPath/feedback.types";
import {
RadioGroup,
RadioGroupDescription,
RadioGroupLabel,
RadioGroupOption,
} from "@headlessui/vue";
import {
RadioGroup,
// RadioGroupDescription,
RadioGroupLabel,
RadioGroupOption,
} from "@headlessui/vue";
const props = defineProps<{
modelValue: any,
items: RadioItem[],
label: string
}>();
defineEmits(['update:modelValue']);
defineProps<{
modelValue: any;
items: RadioItem<any>[];
label: string;
}>();
defineEmits(["update:modelValue"]);
</script>