78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<form
|
|
class="page-form"
|
|
@submit="onSubmit"
|
|
>
|
|
<UiButton
|
|
icon="chevron-left"
|
|
color="secondary"
|
|
type="link"
|
|
class="mb-8"
|
|
:href="backLink"
|
|
>
|
|
{{ backText }}
|
|
</UiButton>
|
|
|
|
<slot name="title">
|
|
<h1 :class="titleOffset ? 'mb-32' : ''">
|
|
{{ title }}
|
|
</h1>
|
|
</slot>
|
|
|
|
<div class="page-form__summary">
|
|
<StaticError class="mb-16" />
|
|
|
|
<slot />
|
|
</div>
|
|
|
|
<slot name="submit" v-bind="{ isSubmitting }">
|
|
<UiButton
|
|
class="page-form__submit"
|
|
size="large"
|
|
native-type="submit"
|
|
:loading="isSubmitting"
|
|
>
|
|
{{ submitText }}
|
|
</UiButton>
|
|
</slot>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useForm } from 'vee-validate'
|
|
|
|
const props = defineProps({
|
|
title: { type: String, required: true },
|
|
backLink: { type: String, required: true },
|
|
backText: { type: String, required: true },
|
|
submitText: { type: String, required: true },
|
|
titleOffset: { type: Boolean, default: true },
|
|
handler: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const { handleSubmit, isSubmitting } = useForm()
|
|
|
|
const onSubmit = handleSubmit(async (values) => {
|
|
await props.handler(values)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-form {
|
|
margin: 0 auto;
|
|
width: 500px;
|
|
|
|
&__summary {
|
|
padding-top: var(--page-form-padding-top, 24px);
|
|
padding-bottom: var(--page-form-padding-bottom, 16px);
|
|
}
|
|
|
|
&__submit {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|