83 lines
1.5 KiB
Vue
83 lines
1.5 KiB
Vue
<template>
|
|
<Dialog :open="open">
|
|
<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')"
|
|
color="neutral"
|
|
@click="closeModal"
|
|
/>
|
|
<Button :label="$t('common.create')" type="submit" color="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 = {
|
|
name: {
|
|
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;
|
|
margin-top: 1.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|