56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup>
|
|
import Modal from '@/Components/Modal.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
|
|
|
defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
submitLabel: {
|
|
type: String,
|
|
default: 'Enregistrer',
|
|
},
|
|
processing: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
maxWidth: {
|
|
type: String,
|
|
default: '2xl',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['close', 'submit']);
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :show="show" :max-width="maxWidth" @close="emit('close')">
|
|
<form class="flex max-h-[calc(100vh-6rem)] flex-col" @submit.prevent="emit('submit')">
|
|
<div class="border-b border-slate-200 px-6 py-4">
|
|
<h2 class="text-lg font-semibold text-slate-900">
|
|
{{ title }}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="overflow-y-auto px-6 py-5">
|
|
<slot />
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 border-t border-slate-200 bg-slate-50 px-6 py-4">
|
|
<SecondaryButton type="button" :disabled="processing" @click="emit('close')">
|
|
Annuler
|
|
</SecondaryButton>
|
|
<PrimaryButton type="submit" :disabled="processing">
|
|
{{ submitLabel }}
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
</template>
|