52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<template>
|
|
<div class="emphased">
|
|
<div>
|
|
<input class="hidden" checked ref="input" type="radio" value="unset" :name="questionId">
|
|
</div>
|
|
<RadioButton v-for="(val, index) in values" :key="index" :index="index" :question-id="questionId" :val="val"
|
|
:color="colors[index] ?? 'unset'" />
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
values?: string[]
|
|
colors?: string[]
|
|
questionId: string
|
|
}
|
|
|
|
const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], colors = ["#4DB544", "#87E169", "#FFC33C", "#FF824B", "#E94A4D"], questionId } = defineProps<Props>()
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped="true" lang="css">
|
|
.emphased {
|
|
position: relative;
|
|
margin-top: 1em;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.emphased div {
|
|
border-left: 1px solid #444;
|
|
}
|
|
|
|
.emphased div:last-child {
|
|
border-radius: 0 .5em .5em 0;
|
|
}
|
|
|
|
.emphased div:nth-child(2),
|
|
.emphased div:first-child {
|
|
border-radius: .5em 0 0 .5em;
|
|
border-left: none;
|
|
}
|
|
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style> |