YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

add more modularity to FormField and CheckboxItem

Browse source
This commit is contained in:
Axolotle 2020-11-03 16:10:55 +01:00
parent af22c9acd9
commit d51e2b712e
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
app/src/components/globals/FormField.vue
View file

@ -3,7 +3,7 @@
<b-form-group <b-form-group
v-bind="attrs" v-bind="attrs"
:id="_id" :id="_id"
:label-for="props.id" :label-for="$attrs['label-for'] || props.id"
:state="state" :state="state"
@touch="touch" @touch="touch"
> >
@ -24,16 +24,21 @@
<span v-html="errorMessage" /> <span v-html="errorMessage" />
</template> </template>
<template v-if="description || example || link" #description> <template #description>
<div class="d-flex"> <!-- Render description -->
<span v-if="example">{{ $t('form_input_example', { example }) }}</span> <template v-if="description || example || link">
<div class="d-flex">
<span v-if="example">{{ $t('form_input_example', { example }) }}</span>
<b-link v-if="link" :to="link" class="ml-auto"> <b-link v-if="link" :to="link" class="ml-auto">
{{ link.text }} {{ link.text }}
</b-link> </b-link>
</div> </div>
<span v-if="description" v-html="description" /> <span v-if="description" v-html="description" />
</template>
<!-- Slot available to overwrite the one above -->
<slot name="description" />
</template> </template>
</b-form-group> </b-form-group>
</template> </template>
@ -60,7 +65,8 @@ export default {
computed: { computed: {
_id () { _id () {
if (this.id) return this.id if (this.id) return this.id
return this.props.id ? this.props.id + '_group' : null const childId = this.props.id || this.$attrs['label-for']
return childId ? childId + '_group' : null
}, },
attrs () { attrs () {
@ -71,12 +77,12 @@ export default {
'label-cols-lg': 2, 'label-cols-lg': 2,
'label-class': 'font-weight-bold' 'label-class': 'font-weight-bold'
} }
if ('label-cols' in attrs) { if (!('label-cols' in attrs)) {
attrs['label-class'] = defaultAttrs['label-class']
} else {
for (const attr in defaultAttrs) { for (const attr in defaultAttrs) {
if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr] if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr]
} }
} else if (!('label-class' in attrs)) {
attrs['label-class'] = defaultAttrs['label-class']
} }
} }
return attrs return attrs

3
app/src/components/globals/formItems/CheckboxItem.vue
View file

@ -6,7 +6,7 @@
:aria-describedby="$parent.id + '__BV_description_'" :aria-describedby="$parent.id + '__BV_description_'"
switch switch
> >
{{ $t(labels[checked]) }} {{ label || $t(labels[checked]) }}
</b-checkbox> </b-checkbox>
</template> </template>
@ -17,6 +17,7 @@ export default {
props: { props: {
value: { type: Boolean, required: true }, value: { type: Boolean, required: true },
id: { type: String, default: null }, id: { type: String, default: null },
label: { type: String, default: null },
labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) } labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) }
}, },