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

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

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