From 6e66e954a0e4882ab1e661c19bf94dbbaae6740a Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 8 Feb 2023 15:56:00 +0100
Subject: [PATCH] Enhance FormToggle component

---
 resources/js/components/FormToggle.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/FormToggle.vue b/resources/js/components/FormToggle.vue
index 3b6bc521..197d9333 100644
--- a/resources/js/components/FormToggle.vue
+++ b/resources/js/components/FormToggle.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="field" :class="{ 'pt-3' : hasOffset }" role="radiogroup" :aria-labelledby="inputId('label', fieldName)">
-        <label :id="inputId('label', fieldName)" class="label" v-html="label"></label>
+        <label v-if="label" :id="inputId('label', fieldName)" class="label" v-html="label"></label>
         <div class="is-toggle buttons">
             <button 
                 role="radio" 
@@ -12,9 +12,11 @@
                 :key="index" 
                 :class="{
                     'is-link' : form[fieldName] === choice.value,
-                    'is-dark' : $root.showDarkMode
+                    'is-dark' : $root.showDarkMode,
+                    'is-multiline' : choice.legend,
                 }" 
-                v-on:click.stop="setRadio(choice.value)"
+                v-on:click.stop="setRadio(choice.value)" 
+                :title="choice.title ? choice.title : ''"
             >
                 <input 
                     :id="inputId(inputType, choice.value)" 
@@ -25,6 +27,7 @@
                     v-model="form[fieldName]" 
                     :disabled="isDisabled" 
                 />
+                <span v-if="choice.legend" v-html="choice.legend" class="is-block is-size-7"></span>
                 <font-awesome-icon :icon="['fas', choice.icon]" v-if="choice.icon" class="mr-3" /> {{ choice.text }}
             </button>
         </div>