47 lines
1008 B
Vue
47 lines
1008 B
Vue
<template>
|
|
<div class="emphased">
|
|
<div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index">
|
|
<input type="radio" :value="val" :name="String(questionId)">
|
|
<label :for="`${questionId}-${val}`">{{ val }}</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
values?: string[]
|
|
questionId: string
|
|
}
|
|
|
|
const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"], questionId } = defineProps<Props>()
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped="true" lang="css">
|
|
.emphased {
|
|
position: relative;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.emphased div {
|
|
padding: 3px;
|
|
border: 1px solid #444;
|
|
border-right: none;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
flex: 1 1 0;
|
|
width: 0;
|
|
}
|
|
|
|
.emphased div:last-child {
|
|
border-right: 1px solid #444;
|
|
}
|
|
</style> |