codevdesign 0.0.61 → 0.0.63

package/composants/csqcTexteBilingue.vue

@@ -1,158 +1,158 @@
-<template>
-  <v-row dense>
-    <v-col
-      v-if="afficherChampFr"
-      cols="12"
-    >
-      <label
-        v-if="!libelleInterieur"
-        :for="`saisieChampFr-${cleTradFr}`"
-        :class="{ libelle: true, required: estRequis }"
-        >{{ $t(cleTradFr) }}</label
-      >
-      <v-textarea
-        v-if="textarea"
-        :id="`saisieChampFr-${cleTradFr}`"
-        v-model="model[champs.Francais]"
-        density="comfortable"
-        rows="1"
-        :label="libelleInterieur ? $t(cleTradFr) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && afficherChampFr"
-      />
-      <v-text-field
-        v-else
-        :id="`saisieChampFr-${cleTradFr}`"
-        v-model="model[champs.Francais]"
-        density="comfortable"
-        :label="libelleInterieur ? $t(cleTradFr) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && afficherChampFr"
-      />
-    </v-col>
-    <v-col
-      v-if="afficherChampEn"
-      cols="12"
-    >
-      <label
-        v-if="!libelleInterieur"
-        :for="`saisieChampEn-${cleTradEn}`"
-        :class="{ libelle: true, required: estRequis }"
-        >{{ $t(cleTradEn) }}</label
-      >
-      <v-textarea
-        v-if="textarea"
-        :id="`saisieChampEn-${cleTradEn}`"
-        v-model="model[champs.Anglais]"
-        rows="1"
-        density="comfortable"
-        :label="libelleInterieur ? $t(cleTradEn) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && !afficherChampFr"
-      />
-      <v-text-field
-        v-else
-        :id="`saisieChampEn-${cleTradEn}`"
-        v-model="model[champs.Anglais]"
-        density="comfortable"
-        :label="libelleInterieur ? $t(cleTradEn) : ''"
-        :rules="reglesInterne"
-        :autofocus="autofocus && !afficherChampFr"
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts" generic="T extends { id: number }">
-  import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
-  import { ChoixLangue } from '@/enums/choixLangue'
-  import { computed, type PropType, toRefs } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  const { t } = useI18n({ useScope: 'global' })
-
-  const props = defineProps<{
-    textarea?: boolean
-    libelleInterieur?: boolean
-    estRequis?: boolean
-    autofocus?: boolean
-    estUniqueValeurs?: T[]
-    minimumLongueur?: number
-    maximumLongueur?: number
-    regles?: ((v: string) => string | true)[]
-    langue: ChoixLangue
-    i18nLibelleRacine: string
-    champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
-  }>()
-
-  const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
-    toRefs(props)
-
-  const minimumLongueur = computed(() => props.minimumLongueur)
-  const maximumLongueur = computed(() => props.maximumLongueur)
-  const estRequis = computed(() => props.estRequis)
-
-  const model = defineModel({
-    type: Object as PropType<T>,
-    required: true,
-  })
-
-  const reglesInterne = computed(() => {
-    const _regles: ((v: string) => string | true)[] = regles.value ?? []
-
-    if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
-      console.error(
-        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
-      )
-      throw Error(
-        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
-      )
-    }
-
-    if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
-
-    if (estUniqueValeurs.value) {
-      _regles.push(v =>
-        estUniqueBilingue(
-          v,
-          model.value,
-          {
-            champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
-            valeurs: estUniqueValeurs.value!,
-            langueCss: langue.value,
-          },
-          t,
-        ),
-      )
-    }
-
-    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
-
-    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
-
-    return _regles
-  })
-
-  // Clés i18n
-  const cleTradEn = computed(() => {
-    switch (langue.value) {
-      case ChoixLangue.Bilingue:
-      case ChoixLangue.Anglais:
-        return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
-      default:
-        return 'cle_manquante'
-    }
-  })
-
-  const cleTradFr = computed(() => {
-    switch (langue.value) {
-      case ChoixLangue.Bilingue:
-      case ChoixLangue.Francais:
-        return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
-      default:
-        return 'cle_manquante'
-    }
-  })
-
-  const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
-  const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
-</script>
+<template>
+  <v-row dense>
+    <v-col
+      v-if="afficherChampFr"
+      cols="12"
+    >
+      <label
+        v-if="!libelleInterieur"
+        :for="`saisieChampFr-${cleTradFr}`"
+        :class="{ libelle: true, required: estRequis }"
+        >{{ $t(cleTradFr) }}</label
+      >
+      <v-textarea
+        v-if="textarea"
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-model="model[champs.Francais]"
+        density="comfortable"
+        rows="1"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-model="model[champs.Francais]"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+    </v-col>
+    <v-col
+      v-if="afficherChampEn"
+      cols="12"
+    >
+      <label
+        v-if="!libelleInterieur"
+        :for="`saisieChampEn-${cleTradEn}`"
+        :class="{ libelle: true, required: estRequis }"
+        >{{ $t(cleTradEn) }}</label
+      >
+      <v-textarea
+        v-if="textarea"
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-model="model[champs.Anglais]"
+        rows="1"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-model="model[champs.Anglais]"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts" generic="T extends { id: number }">
+  import { estRequis as estRequisRegle, estUniqueBilingue, estMinimumLongueur, estMaximumLongueur } from './validateurs'
+  import { ChoixLangue } from '@/enums/choixLangue'
+  import { computed, type PropType, toRefs } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n({ useScope: 'global' })
+
+  const props = defineProps<{
+    textarea?: boolean
+    libelleInterieur?: boolean
+    estRequis?: boolean
+    autofocus?: boolean
+    estUniqueValeurs?: T[]
+    minimumLongueur?: number
+    maximumLongueur?: number
+    regles?: ((v: string) => string | true)[]
+    langue: ChoixLangue
+    i18nLibelleRacine: string
+    champs: { ['Francais']: keyof T; ['Anglais']: keyof T }
+  }>()
+
+  const { textarea, libelleInterieur, autofocus, estUniqueValeurs, regles, langue, i18nLibelleRacine, champs } =
+    toRefs(props)
+
+  const minimumLongueur = computed(() => props.minimumLongueur)
+  const maximumLongueur = computed(() => props.maximumLongueur)
+  const estRequis = computed(() => props.estRequis)
+
+  const model = defineModel({
+    type: Object as PropType<T>,
+    required: true,
+  })
+
+  const reglesInterne = computed(() => {
+    const _regles: ((v: string) => string | true)[] = regles.value ?? []
+
+    if (minimumLongueur.value && maximumLongueur.value && minimumLongueur.value > maximumLongueur.value) {
+      console.error(
+        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
+      )
+      throw Error(
+        `CsqcTexteBilingue - Longueur min > max. (Min ${minimumLongueur.value} > Max ${maximumLongueur.value})`,
+      )
+    }
+
+    if (estRequis.value) _regles.push(v => estRequisRegle(v, t))
+
+    if (estUniqueValeurs.value) {
+      _regles.push(v =>
+        estUniqueBilingue(
+          v,
+          model.value,
+          {
+            champs: { Anglais: champs.value.Anglais, Francais: champs.value.Francais },
+            valeurs: estUniqueValeurs.value!,
+            langueCss: langue.value,
+          },
+          t,
+        ),
+      )
+    }
+
+    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!, t))
+
+    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!, t))
+
+    return _regles
+  })
+
+  // Clés i18n
+  const cleTradEn = computed(() => {
+    switch (langue.value) {
+      case ChoixLangue.Bilingue:
+      case ChoixLangue.Anglais:
+        return `${i18nLibelleRacine.value}.${String(champs.value.Anglais)}`
+      default:
+        return 'cle_manquante'
+    }
+  })
+
+  const cleTradFr = computed(() => {
+    switch (langue.value) {
+      case ChoixLangue.Bilingue:
+      case ChoixLangue.Francais:
+        return `${i18nLibelleRacine.value}.${String(champs.value.Francais)}`
+      default:
+        return 'cle_manquante'
+    }
+  })
+
+  const afficherChampFr = computed(() => langue.value === ChoixLangue.Francais || langue.value === ChoixLangue.Bilingue)
+  const afficherChampEn = computed(() => langue.value === ChoixLangue.Anglais || langue.value === ChoixLangue.Bilingue)
+</script>

package/composants/csqcTiroir.vue

@@ -1,149 +1,149 @@
-<template>
-  <v-navigation-drawer
-    v-model="visible"
-    location="right"
-    temporary
-    class="pa-0 elevation-2"
-    :width="grosseurTiroir"
-    :persistent="persistant"
-    @keydown.esc="!persistant ? fermeture : ''"
-    @click:outside="!persistant ? fermeture : ''"
-  >
-    <v-card class="pa-0 ma-0 pl-8 pt-8">
-      <!-- Bouton en haut à droite -->
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        class="position-absolute couleurHover"
-        style="top: 5px; right: 5px"
-        @click="fermeture"
-      ></v-btn>
-
-      <v-card-title
-        class="pa-0 ma-0 pb-6 text-wrap"
-        style="font-size: 24px"
-      >
-        <slot name="titre"></slot>
-        <div text-h5>{{ titre }}</div>
-      </v-card-title>
-
-      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
-        <v-container>
-          <slot></slot>
-          <slot name="content"></slot>
-        </v-container>
-      </v-card-text>
-      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
-        <slot name="actions"></slot>
-        <v-btn
-          v-if="btnAnnuler"
-          color="primary"
-          variant="text"
-          :loading="operationEnCours"
-          @click="fermeture"
-        >
-          {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          color="primary"
-          variant="flat"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver || operationEnCours"
-          @click="okBouton"
-        >
-          {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-navigation-drawer>
-</template>
-<script lang="ts" setup>
-  import { ref, computed } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const visible = ref(false)
-  const display = useDisplay()
-
-  // Déclaration des props
-  const props = defineProps({
-    titre: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    btnAnnuler: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-    btnOk: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-    btnAnnulerTexte: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    btnOkDesactiver: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    operationEnCours: { type: Boolean, default: false },
-    persistant: { type: Boolean, default: true },
-    btnOkTexte: {
-      type: String,
-      default: '',
-      required: false,
-    },
-  })
-
-  // Déclaration des événements
-  const emit = defineEmits(['fermer', 'ok'])
-
-  // Méthodes
-  const ouvrir = () => {
-    visible.value = true
-  }
-
-  const fermer = () => {
-    visible.value = false
-  }
-
-  const fermeture = () => {
-    emit('fermer')
-    fermer()
-  }
-
-  const okBouton = () => {
-    emit('ok')
-    fermer()
-  }
-
-  // Calcul des tailles du tiroir en fonction du breakpoint
-  const grosseurTiroir = computed(() => {
-    switch (display.name.value) {
-      case 'xs':
-        return ''
-      case 'sm':
-        return 0.95 * display.width.value
-      case 'md':
-        return 0.8 * display.width.value
-      case 'lg':
-        return 0.7 * display.width.value
-      case 'xl':
-        return 0.6 * display.width.value
-      case 'xxl':
-        return 0.5 * display.width.value
-      default:
-        return ''
-    }
-  })
-
-  defineExpose({ ouvrir, fermer })
-</script>
+<template>
+  <v-navigation-drawer
+    v-model="visible"
+    location="right"
+    temporary
+    class="pa-0 elevation-2"
+    :width="grosseurTiroir"
+    :persistent="persistant"
+    @keydown.esc="!persistant ? fermeture : ''"
+    @click:outside="!persistant ? fermeture : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute couleurHover"
+        style="top: 5px; right: 5px"
+        @click="fermeture"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6 text-wrap"
+        style="font-size: 24px"
+      >
+        <slot name="titre"></slot>
+        <div text-h5>{{ titre }}</div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <v-btn
+          v-if="btnAnnuler"
+          color="primary"
+          variant="text"
+          :loading="operationEnCours"
+          @click="fermeture"
+        >
+          {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc.bouton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          variant="flat"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver || operationEnCours"
+          @click="okBouton"
+        >
+          {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc.bouton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-navigation-drawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const visible = ref(false)
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    titre: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnAnnuler: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnOk: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnAnnulerTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnOkDesactiver: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    operationEnCours: { type: Boolean, default: false },
+    persistant: { type: Boolean, default: true },
+    btnOkTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  })
+
+  // Déclaration des événements
+  const emit = defineEmits(['fermer', 'ok'])
+
+  // Méthodes
+  const ouvrir = () => {
+    visible.value = true
+  }
+
+  const fermer = () => {
+    visible.value = false
+  }
+
+  const fermeture = () => {
+    emit('fermer')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+    fermer()
+  }
+
+  // Calcul des tailles du tiroir en fonction du breakpoint
+  const grosseurTiroir = computed(() => {
+    switch (display.name.value) {
+      case 'xs':
+        return ''
+      case 'sm':
+        return 0.95 * display.width.value
+      case 'md':
+        return 0.8 * display.width.value
+      case 'lg':
+        return 0.7 * display.width.value
+      case 'xl':
+        return 0.6 * display.width.value
+      case 'xxl':
+        return 0.5 * display.width.value
+      default:
+        return ''
+    }
+  })
+
+  defineExpose({ ouvrir, fermer })
+</script>