mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-12-03 05:35:25 +01:00
74 lines
2.7 KiB
Vue
74 lines
2.7 KiB
Vue
<script setup>
|
|
import { useIdGenerator } from '@/composables/helpers'
|
|
import { UseColorMode } from '@vueuse/components'
|
|
|
|
const props = defineProps({
|
|
modelValue: [String, Number, Boolean],
|
|
choices: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
fieldName: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
fieldError: [String],
|
|
hasOffset: Boolean,
|
|
isDisabled: Boolean,
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
help: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
})
|
|
|
|
// defines what events our component emits
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
function setRadio(event) {
|
|
emit('update:modelValue', event)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="field" :class="{ 'pt-3': hasOffset }" role="radiogroup"
|
|
:aria-labelledby="useIdGenerator('label',fieldName).inputId">
|
|
<label v-if="label" :id="useIdGenerator('label',fieldName).inputId" class="label" v-html="$t(label)" />
|
|
<div class="is-toggle buttons">
|
|
<UseColorMode v-slot="{ mode }">
|
|
<button
|
|
v-for="choice in choices"
|
|
:key="choice.value"
|
|
:id="useIdGenerator('button',fieldName+choice.value).inputId"
|
|
role="radio"
|
|
type="button"
|
|
class="button"
|
|
:aria-checked="modelValue===choice.value"
|
|
:disabled="isDisabled"
|
|
:class="{
|
|
'is-link': modelValue===choice.value,
|
|
'is-dark': mode==='dark',
|
|
'is-multiline': choice.legend,
|
|
}"
|
|
v-on:click.stop="setRadio(choice.value)"
|
|
:title="choice.title? choice.title:''">
|
|
<input
|
|
:id="useIdGenerator('radio',choice.value).inputId"
|
|
type="radio"
|
|
class="is-hidden"
|
|
:checked="modelValue===choice.value"
|
|
:value="choice.value"
|
|
:disabled="isDisabled" />
|
|
<span v-if="choice.legend" v-html="$t(choice.legend)" class="is-block is-size-7" />
|
|
<FontAwesomeIcon :icon="['fas',choice.icon]" v-if="choice.icon" class="mr-2" /> {{ $t(choice.text) }}
|
|
</button>
|
|
</UseColorMode>
|
|
</div>
|
|
<FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
|
|
<p class="help" v-html="$t(help)" v-if="help" />
|
|
</div>
|
|
</template> |