Enhance FormToggle component

This commit is contained in:
Bubka 2023-02-08 15:56:00 +01:00
parent eadebb41ac
commit 6e66e954a0

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="field" :class="{ 'pt-3' : hasOffset }" role="radiogroup" :aria-labelledby="inputId('label', fieldName)"> <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"> <div class="is-toggle buttons">
<button <button
role="radio" role="radio"
@ -12,9 +12,11 @@
:key="index" :key="index"
:class="{ :class="{
'is-link' : form[fieldName] === choice.value, '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 <input
:id="inputId(inputType, choice.value)" :id="inputId(inputType, choice.value)"
@ -25,6 +27,7 @@
v-model="form[fieldName]" v-model="form[fieldName]"
:disabled="isDisabled" :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 }} <font-awesome-icon :icon="['fas', choice.icon]" v-if="choice.icon" class="mr-3" /> {{ choice.text }}
</button> </button>
</div> </div>