Replace Switches by Checkboxes in Settings

This commit is contained in:
Bubka 2020-10-02 14:17:10 +02:00
parent 2d541394cc
commit dc525ef65d
3 changed files with 47 additions and 3 deletions

View File

@ -0,0 +1,42 @@
<template>
<div class="field">
<input :id="fieldName" type="checkbox" :name="fieldName" class="is-checkradio is-info" v-model="form[fieldName]">
<label :for="fieldName" class="label" v-html="label"></label>
<p class="help" v-html="help" v-if="help"></p>
</div>
</template>
<script>
export default {
name: 'FormCheckbox',
data() {
return {
}
},
props: {
label: {
type: String,
default: ''
},
fieldName: {
type: String,
default: '',
required: true
},
form: {
type: Object,
required: true
},
help: {
type: String,
default: ''
},
}
}
</script>

View File

@ -5,6 +5,7 @@ import FormWrapper from './FormWrapper'
import FormField from './FormField' import FormField from './FormField'
import FormSelect from './FormSelect' import FormSelect from './FormSelect'
import FormSwitch from './FormSwitch' import FormSwitch from './FormSwitch'
import FormCheckbox from './FormCheckbox'
import FormButtons from './FormButtons' import FormButtons from './FormButtons'
import VueFooter from './Footer' import VueFooter from './Footer'
@ -16,6 +17,7 @@ import VueFooter from './Footer'
FormField, FormField,
FormSelect, FormSelect,
FormSwitch, FormSwitch,
FormCheckbox,
FormButtons, FormButtons,
VueFooter, VueFooter,
].forEach(Component => { ].forEach(Component => {

View File

@ -7,9 +7,9 @@
<form @submit.prevent="handleSubmit" @change="handleSubmit" @keydown="form.onKeydown($event)"> <form @submit.prevent="handleSubmit" @change="handleSubmit" @keydown="form.onKeydown($event)">
<form-select :options="langs" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')" :help="$t('settings.forms.language.help')" /> <form-select :options="langs" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')" :help="$t('settings.forms.language.help')" />
<form-select :options="layouts" :form="form" fieldName="displayMode" :label="$t('settings.forms.display_mode.label')" :help="$t('settings.forms.display_mode.help')" /> <form-select :options="layouts" :form="form" fieldName="displayMode" :label="$t('settings.forms.display_mode.label')" :help="$t('settings.forms.display_mode.help')" />
<form-switch :form="form" fieldName="showTokenAsDot" :label="$t('settings.forms.show_token_as_dot.label')" :help="$t('settings.forms.show_token_as_dot.help')" /> <form-checkbox :form="form" fieldName="showTokenAsDot" :label="$t('settings.forms.show_token_as_dot.label')" :help="$t('settings.forms.show_token_as_dot.help')" />
<form-switch :form="form" fieldName="closeTokenOnCopy" :label="$t('settings.forms.close_token_on_copy.label')" :help="$t('settings.forms.close_token_on_copy.help')" /> <form-checkbox :form="form" fieldName="closeTokenOnCopy" :label="$t('settings.forms.close_token_on_copy.label')" :help="$t('settings.forms.close_token_on_copy.help')" />
<form-switch :form="form" fieldName="useBasicQrcodeReader" :label="$t('settings.forms.use_basic_qrcode_reader.label')" :help="$t('settings.forms.use_basic_qrcode_reader.help')" /> <form-checkbox :form="form" fieldName="useBasicQrcodeReader" :label="$t('settings.forms.use_basic_qrcode_reader.label')" :help="$t('settings.forms.use_basic_qrcode_reader.help')" />
</form> </form>
</form-wrapper> </form-wrapper>
</template> </template>