Better display for ChoiceField

frontend/src/components/tools/ChoiceField.vue

@@ -1,53 +1,28 @@
 <template>
-  <div
-    class="text-subtitle-1 text-grey-darken-1 mb-5"
-    :class="{ 'label--disabled': disabled }"
-  >
+  <div class="text-subtitle-1 text-grey-darken-1 mb-5" :class="{ 'label--disabled': disabled }">
     <label class="m-label">{{ label }}</label>
   </div>
-  <v-input v-model="currentChoice" :rules="[!!disabled || rules.required]">
-    <template #default>
-      <v-row v-for="(lineChoices, i) in formatedChoices" :key="i" class="ml-5">
-        <v-col
-          v-for="(choice, j) in lineChoices"
-          :key="j"
-          class="choice rounded pa-md-10 pa-5 mr-5 flex-grow-0 mb-5"
-          :class="{
-            'choice--disabled': disabled,
-            'choice--selected': !disabled && currentChoice === choice.value,
-          }"
-          align="center"
-          @click="selectChoice(choice.value)"
-        >
-          <v-row align="center" justify="center">
-            <v-col cols="12" class="pa-0">
-              <v-icon
-                v-if="choice.icon"
-                class="hidden-md-and-down mb-5 align-center"
-                :color="iconColor(choice.value)"
-                size="x-large"
-              >
-                {{ choice.icon }}
-              </v-icon>
-            </v-col>
-          </v-row>
-          <v-row align="center" justify="center">
-            <v-col cols="12" class="pa-0">
-              <div class="text-grey-darken-1">{{ choice.label }}</div>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-    </template>
-    <template #message="{ message }"
-      ><div class="ml-4">{{ message }}</div></template
-    >
-  </v-input>
+  <div class="d-flex" v-for="(lineChoices, index1) in formatedChoices" :key="index1">
+    <div v-for="(choice, index2) in lineChoices"
+         :key="index2"
+         class="choice rounded pa-10 mr-4 text-center flex-grow-0 mb-4"
+         :class="{ 'choice--disabled': disabled, 'choice--selected': !disabled && currentChoice === choice.value }"
+         @click="selectChoice(choice.value)"
+         >
+      <v-icon
+          v-if="choice.icon"
+          class="d-block mb-2 mx-auto"
+          :color="iconColor(choice.value)"
+          size="x-large"
+          :icon="choice.icon"
+      />
+      <span class="text-grey-darken-1">{{ choice.label }}</span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="js">
 import { ref, onMounted, computed } from 'vue'
-import rules from '@/plugins/rules.js'
 
 const props = defineProps({
   modelValue: { type: [Number, String], default: null },
@@ -105,23 +80,22 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.choice {
-  // width: 200px;
-  flex-basis: 200px;
-  background-color: #f2f5f7;
-  border: 1px solid #dbdddf;
-  cursor: pointer;
+ .choice {
+     flex-basis: 200px;
+     background-color: #f2f5f7;
+     border: 1px solid #dbdddf;
+     cursor: pointer;
 
-  &--selected {
-    border-color: #046bf8 !important;
-  }
+     &--selected {
+         border-color: #046bf8 !important;
+     }
 
-  &--disabled {
-    cursor: unset;
-    opacity: 0.5;
-  }
-}
-.label--disabled {
-  opacity: 0.5;
-}
+     &--disabled {
+         cursor: unset;
+         opacity: 0.5;
+     }
+ }
+ .label--disabled {
+     opacity: 0.5;
+ }
 </style>