yunohost-admin/app/src/components/globals/formItems/FormItemHelper.vue
2020-10-14 16:59:39 +02:00

59 lines
1.4 KiB
Vue

<template>
<b-form-group
label-cols="0" label-class="font-weight-bold" class="mb-4"
:label="label" :label-for="'form-item-' + props.id"
>
<slot name="default">
<component
:is="component" v-bind="props"
v-model="props.value" @input="test"
/>
</slot>
<template v-if="description || example || link" v-slot:description>
<div class="d-flex">
<span v-if="example">{{ $t('form_input_example', { example }) }}</span>
<b-link v-if="link" :to="link" class="ml-auto">
{{ link.text }}
</b-link>
</div>
<template v-if="description">
{{ description }}
</template>
</template>
<b-form-invalid-feedback v-if="'isValid' in props" :id="props.id + '-feedback'" :state="props.value.isValid">
{{ props.error }}
</b-form-invalid-feedback>
</b-form-group>
</template>
<script>
export default {
name: 'FormItemHelper',
props: {
component: { type: String, default: 'InputItem' },
props: { type: Object, required: true },
label: { type: String, required: true },
description: { type: String, default: null },
example: { type: String, default: null },
link: { type: Object, default: null }
},
data () {
return {
content: this.value
}
},
methods: {
test () {
console.log(this.props.value)
// this.props.isValid = false
}
}
}
</script>