yunohost-admin/app/src/components/globals/CardForm.vue
2024-03-27 00:43:51 +01:00

74 lines
1.7 KiB
Vue

<template>
<YCard v-bind="$attrs" class="card-form">
<template #default>
<slot name="disclaimer" />
<BForm
:id="id"
:inline="inline"
:class="formClasses"
@submit.prevent="onSubmit"
novalidate
>
<slot name="default" />
<slot name="server-error">
<BAlert
variant="danger"
class="my-3"
icon="ban"
:show="errorFeedback !== ''"
>
<div v-html="errorFeedback" />
</BAlert>
</slot>
</BForm>
</template>
<template v-if="!noFooter" #buttons>
<slot name="buttons">
<BButton type="submit" variant="success" :form="id">
{{ submitText ? submitText : $t('save') }}
</BButton>
</slot>
</template>
</YCard>
</template>
<script>
export default {
name: 'CardForm',
props: {
id: { type: String, default: 'ynh-form' },
submitText: { type: String, default: null },
validation: { type: Object, default: null },
serverError: { type: String, default: '' },
inline: { type: Boolean, default: false },
formClasses: { type: [Array, String, Object], default: null },
noFooter: { type: Boolean, default: false },
},
computed: {
errorFeedback() {
if (this.serverError) return this.serverError
else if (this.validation && this.validation.$errors.length) {
return this.$t('form_errors.invalid_form')
} else return ''
},
},
methods: {
onSubmit(e) {
const v = this.validation
if (v) {
v.$touch()
if (v.$pending || v.$invalid) return
}
this.$emit('submit', e)
},
},
}
</script>
<style lang="scss"></style>