88 lines
1.6 KiB
Vue
88 lines
1.6 KiB
Vue
<template>
|
|
<Dialog :open="open" :title="$t('voyage.create.title')">
|
|
<!-- <h2>{{ $t("voyage.create.title") }}</h2> -->
|
|
<Form
|
|
:fields="formFields"
|
|
:validation-rules="validationRules"
|
|
@submit="handleSubmit"
|
|
>
|
|
<template #submit>
|
|
<div class="form-actions">
|
|
<Button
|
|
:label="$t('common.cancel')"
|
|
variant="secondary"
|
|
@click="closeModal"
|
|
/>
|
|
<Button
|
|
:label="$t('common.create')"
|
|
type="submit"
|
|
variant="primary"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Form>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
open: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(["close", "submit"])
|
|
|
|
const formFields = [
|
|
{
|
|
id: "title",
|
|
label: $t("voyage.form.title.label"),
|
|
type: "text",
|
|
defaultValue: "",
|
|
attrs: {
|
|
placeholder: $t("voyage.form.title.placeholder"),
|
|
},
|
|
},
|
|
{
|
|
id: "description",
|
|
label: $t("voyage.form.description.label"),
|
|
type: "textarea",
|
|
defaultValue: "",
|
|
attrs: {
|
|
placeholder: $t("voyage.form.description.placeholder"),
|
|
rows: 5,
|
|
},
|
|
},
|
|
]
|
|
|
|
const validationRules = {
|
|
title: {
|
|
required: true,
|
|
minLength: 3,
|
|
},
|
|
description: {
|
|
required: false,
|
|
},
|
|
}
|
|
|
|
const closeModal = () => {
|
|
emit("close")
|
|
}
|
|
|
|
const handleSubmit = (formData: Record<string, string>) => {
|
|
emit("submit", formData)
|
|
closeModal()
|
|
console.log(formData)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: flex-end;
|
|
align-self: stretch;
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|