VachetVirginie
commented
3 days ago DialogBox:
<template>
<div>
<VBtn
color="primary"
@click="dialog = true"
>
Afficher le composant
</VBtn>
<DialogBox
v-model="dialog"
:width="dialogWidth"
title="Enregistrement"
:vuetify-options="VuetifyOptions"
@cancel="handleCancel"
@confirm="dialog = false"
>
<v-form ref="form" @submit.prevent="submitForm">
<v-text-field
v-model="firstName"
:rules="rules"
label="First name"
></v-text-field>
<v-btn class="mt-2" type="submit" block>Submit</v-btn>
</v-form>
</DialogBox>
</div>
</template>
<script lang="ts">
import DialogBox from "@/elements/DialogBox";
import { defineComponent } from "vue";
import { tokens } from '@cnamts/design-tokens';
export default defineComponent({
components: {
DialogBox,
},
data() {
return {
VuetifyOptions:{
card: {
height: '500px'
}
},
dialog: false,
dialogWidth: tokens.dialogWidth.dialogSmall,
firstName: '',
rules: [
value => {
if (value.length > 3) return true
return 'You must enter a first name.'
},
],
};
},
methods : {
handleCancel() {
this.submitForm();
this.dialog = false;
},
submitForm() {
this.$refs.form.submit();
}
}
});
</script>
Bonjour Valentin, Je vais te faire un retour sur l'utilisation du design-system/vue-dot/sk-bridge/migration en essayant qu'il soit le plus constructif possible et ça sera de mémoire car je n'ai pas noté tous les problèmes rencontrés:
De mémoire un composant du design-system (v2) n'est pas à jour au niveau des emit , ça n'aide pas bcp sans le nom du composant mais je n'arrive pas à le retrouver
Je pense qu'il serait bien d'expliquer ce qu'est le vuetify-option, comment ça fonctionne, et donner des exemples ? D'expliquer par exemple que le champ de recherche dans le composant TableToolbar peut être "caché" via vuetify-option
De pouvoir expliquer dans le composant filterModule Quels sont les types de composant utilisable :flèche_bas: date: 'DateField', number: 'NumberField', password: 'FormPasswordField', period: 'ChoicePeriodField', select: 'ChoiceField', range: 'FormRangeField', text: 'TextField', textarea: 'TextareaField' D'expliquer que la fonction displayFIlters est à implémenter car non fonctionnelle (il me semble en tout cas je l'ai réimplémentée)
De mémoire le composant filtre ne prend pas en considération un objet : alerte.libAlerte, il va considérer ça comme une clé à aller chercher (à la racine de l'objet vague littéralement) alors que non vague{ alerte { libAlerte } } }
Pour les couleurs peut-être préciser qu'il faut les importer dans le script avant de pouvoir l'utiliser ? .am-blue-base--text { color: $vd-am-blue-base !important; }
PaginatedTable Je crois que le options.sync comme dans la doc empêche le bon fonctionnement du composant (de mémoire, en tout cas, nous ne l'avons pas garder dans notre projet) dans options : itemsPerPage : expliquer que -1 => affiche toutes les lignes dans le tableau ?
DialogBox Lors du clic sur la croix pour fermer le dialogBox, on a une vérification qui se fait sur nos champs de formulaire, ce qui fait qu'un message d'erreur s'affiche en dessous des champs, ce qui entraine un agrandissement de la popin, ce qui fait que le clic ne se fait plus sur la croix donc la popin ne se ferme pas (c'est très subtil mais bon) cela arrive lors de l'utilisation hide-details Je n'ai surement pas tout mis car j'en ai surement oublié mais si ça peut aider :clin_d'œil:
Pour la migration vue-dot => sk-bridge (d'ailleurs lors du clone c'est la branch main qui est clonée et non dev par défaut)
point 1.2 : copier le dossier src: Je trouve que ce n'est une bonne pratique car nous avions des fichiers (comme main.ts, modules.ts, global.ts, /router/index.ts etc etc), plein de fichiers parasites en somme.. donc je pense qu'il est mieux d'indiquer de prendre dans un premier temps : le squelette (de le faire tourner) puis les composants .vue expliquer les routes (point plus bas)
point 1.3 : "il faut choisir la version vue3 de la librairie et la version Nuxt si elle existe" => si on prend le squelette on est déjà en vue3 et nuxt non ? Edit : il semblerait que notre package (donc celui du squelette soit en vue :2.7 et NUXT)
point 1.4 : il serait bien d'ajouter le chemin relatif à nuxt.config.ts (même s'il y en qu'un mais c'est bien et ça évite les problèmes (voir plus bas))
point 1.5 : expliquer que le defineNuxtComponent doit se trouver dans le dossier plugin (avec le chemin relatif pour ne pas confondre avec le dossier src/plugin) et les ajouter dans nuxt.config.ts (de mémoire)
point 2.1: Je trouve l'explication peu claire car on utilise toujours l'ancienne version : const routes = [ { name: 'index', path: '/', component: () => import('@/views/Home.vue'), }, { name: 'home', path: '/home', component: () => import('@/views/Home.vue'), }, { name: 'about', path: '/about', component: () => import('@/views/About.vue'), }, { name: 'maintenance', path: '/maintenance', component: () => import('@/views/Maintenance.vue'), }, { name: 'not-found', path: '/not-found', component: () => import('@/views/NotFound.vue'), }, ]
export default routes
De plus ce que je disais plus haut, en copiant le dossier src, nous avions déjà un dossier router avec un index.js qui n'était pas bon du tout pour cette version (avec un navigationRedirect.ts) donc c'est pour ça que je suis parti du squelette de base en ajoutant les composants puis les fichiers manquants (dossier service etc etc)) donc copier le src n'est pas une bonne idée pour moi
point 3.1 en important le dossier src on a aussi importé nos stores qui ne correspondaient pas du tout à la nouvelle version
point 5, je trouve vue-class-migrator pas très utile (il ne corrige pas grand chose je trouve)
5.1 : expliquer que c'est les meta par exemple ?
point 6 : ne semble pas fct (mais en cours de résolution je crois) Expliquer que default.vue est le point d'entrée du projet ? et qu'il faut déplacer ce qui était dans le app.vue (ancien projet en vue2) dans le default.vue)
Expliquer un peu Nuxt ?
Expliquer que certains composant ont changés (suite au passage en vue3/ vuetify3) ? mais sans doute réglé par le point 6 j'espère que ça pourra aider certains projets :clin_d'œil: La migration n'a pas été simple et sûrement par un manque de connaissance de ma part. J'ai également fouillé le code source du vue-dot et synapse-bridge car je trouve qu'il manquait parfois d'explications sur les composants. En espérant que mon retour soit constructif :clin_d'œil:
Tu trouveras ci-dessous une liste des composants qu'on utilise : FilterModule HeaderBar FooterBar PaginatedTable TableToolbar DialogBox AlertWrapper PasswordField DatePicker (modifié) digital-design-system.netlify.appdigital-design-system.netlify.app Couleurs
GitHub - getyourguide/vue-class-migrator: Vue 3 Migration helper for applications using Vue 2.7 Vue 3 Migration helper for applications using Vue 2.7 - getyourguide/vue-class-migrator