82eb8d88cc
- Installation vue-i18n v11 et création des fichiers de traduction (fr.json, en.json) - Création store locale avec détection hiérarchique (URL > localStorage > navigator) - Modification des routes avec préfixe /:locale? optionnel - Toggle FR/EN dans Menu.vue avec synchronisation immédiate - Traduction de ~200 textes dans 27 composants Vue - Suppression des labels hardcodés en français côté backend - Ajout route Kirby catch-all en/(:all?) pour /en/ URLs - Helper addLocalePrefix() pour préserver locale dans liens dialogs - Traduction pseudo-élément CSS via data attribute Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
113 lines
3 KiB
Vue
113 lines
3 KiB
Vue
<template>
|
|
<Dialog
|
|
id="project-request-dialog"
|
|
v-model:visible="isOpen"
|
|
modal
|
|
:draggable="false"
|
|
:dismissableMask="true"
|
|
:header="t('dialogs.requestProject')"
|
|
class="dialog"
|
|
:closeOnEscape="true"
|
|
>
|
|
<template #header>
|
|
<h2 class="font-serif text-lg">{{ t('dialogs.requestProject') }}</h2>
|
|
</template>
|
|
|
|
<form
|
|
@submit.prevent="handleSubmit"
|
|
class="w-full h-full p-16 flex flex-col"
|
|
style="--row-gap: 1rem"
|
|
>
|
|
<label for="project-title" class="sr-only">{{
|
|
t('forms.projectName')
|
|
}}</label>
|
|
<input
|
|
type="text"
|
|
v-model="title"
|
|
id="project-title"
|
|
:placeholder="t('forms.projectName')"
|
|
class="w-full rounded-md border border-grey-200 px-16 py-12"
|
|
required
|
|
/>
|
|
|
|
<label for="project-details" class="sr-only">{{
|
|
t('forms.projectDetails')
|
|
}}</label>
|
|
<textarea
|
|
id="project-details"
|
|
name="details"
|
|
v-model="details"
|
|
cols="30"
|
|
rows="10"
|
|
:placeholder="t('forms.projectDetailsPlaceholder')"
|
|
class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
|
|
required
|
|
></textarea>
|
|
|
|
<div
|
|
id="project-dtl"
|
|
class="w-full text-left rounded-md border border-grey-200 text-grey-800 p-12"
|
|
style="align-self: flex-start"
|
|
:class="{ selected: isDTLEnabled }"
|
|
>
|
|
<input id="dtl" type="checkbox" v-model="isDTLEnabled" />
|
|
<label
|
|
for="dtl"
|
|
class="flex font-medium mt-4"
|
|
style="--column-gap: var(--space-4)"
|
|
>
|
|
{{ t('dialogs.createWithDTL') }}
|
|
<span class="flex justify-center text-sm" data-icon="leaf">{{
|
|
t('dtl.title')
|
|
}}</span>
|
|
</label>
|
|
<p class="text-sm mt-8 mb-4">
|
|
{{ t('dialogs.dtlDescription') }}
|
|
</p>
|
|
<router-link to="/design-to-light" class="text-sm font-medium">{{
|
|
t('dialogs.learnMore')
|
|
}}</router-link>
|
|
</div>
|
|
|
|
<footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
|
|
<button class="btn btn--black-10" @click="emits('close')">
|
|
{{ t('buttons.cancel') }}
|
|
</button>
|
|
<button class="btn" type="submit">{{ t('buttons.submit') }}</button>
|
|
</footer>
|
|
</form>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Dialog from 'primevue/dialog';
|
|
import { ref, watch } from 'vue';
|
|
import { useApiStore } from '../stores/api';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const title = ref('');
|
|
const details = ref('');
|
|
const isDTLEnabled = ref(false);
|
|
const api = useApiStore();
|
|
const isOpen = ref(true);
|
|
const emits = defineEmits('close');
|
|
|
|
watch(isOpen, (newValue) => {
|
|
if (!newValue) {
|
|
emits('close');
|
|
}
|
|
});
|
|
|
|
async function handleSubmit() {
|
|
const formData = {
|
|
title: title.value,
|
|
details: details.value,
|
|
isDTLEnabled: isDTLEnabled.value,
|
|
};
|
|
|
|
const response = await api.post(formData, 'request-project-creation.json');
|
|
isOpen.value = false;
|
|
}
|
|
</script>
|