codevdesign 0.0.34 → 0.0.36

package/composants/csqcDialogue.vue

@@ -21,7 +21,7 @@
 
       <v-card-title
         class="pa-0 ma-0 pb-6"
-        style="font-size: 24px"
+        style="font-size: 24px; white-space: normal; word-break: break-word"
       >
         <slot name="titre"></slot>
         <div class="headline">{{ titre }}</div>

package/composants/csqcOptionSwitch.vue

@@ -5,12 +5,13 @@
         cols="9"
         md="8"
         lg="6"
+        class="d-flex align-end"
       >
         <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
       </v-col>
       <v-col
         cols="2"
-        class="flex-grow-1 d-flex justify-end pt-0 mt-0 pb-0 mb-0"
+        class="d-flex align-end justify-end"
       >
         <v-switch
           v-model="maValeur"
@@ -117,4 +118,7 @@
     font-weight: bold;
     margin-top: 25px;
   }
+  .v-switch {
+    margin-bottom: -10px; /* aligner le switch avec son texte*/
+  }
 </style>

package/composants/csqcTable/csqcTable.vue

@@ -69,6 +69,7 @@
         static
         :readonly="chargementListe"
         expand-icon=""
+        @update:modelValue="onPanelChange"
       >
         <v-expansion-panel
           flat
@@ -277,7 +278,15 @@
       Object.values(item).some(val => String(val).toLowerCase().includes(recherche.value.toLowerCase())),
     )
   })
-  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees'])
+  const onPanelChange = (val: unknown) => {
+    if (typeof val === 'string' || typeof val === 'number' || val === null) {
+      const isOpen = val !== null && val !== ''
+      emit('panneau:etat', isOpen)
+    } else {
+      emit('panneau:etat', false)
+    }
+  }
+  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees', 'panneau:etat'])
 </script>
 
 <style scoped lang="css">

package/composants/csqcTexteBilingue.vue

@@ -0,0 +1,157 @@
+<template>
+  <v-row dense>
+    <v-col
+      cols="12"
+      v-if="afficherChampFr"
+    >
+      <label
+        :for="`saisieChampFr-${cleTradFr}`"
+        :class="{ libelle: true, required: estRequis }"
+        v-if="!libelleInterieur"
+        >{{ $t(cleTradFr) }}</label
+      >
+      <v-textarea
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-if="textarea"
+        density="comfortable"
+        rows="1"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        v-model="model[champs.Francais]"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+      <v-text-field
+        :id="`saisieChampFr-${cleTradFr}`"
+        v-else
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradFr) : ''"
+        v-model="model[champs.Francais]"
+        :rules="reglesInterne"
+        :autofocus="autofocus && afficherChampFr"
+      />
+    </v-col>
+    <v-col
+      cols="12"
+      v-if="afficherChampEn"
+    >
+      <label
+        :for="`saisieChampEn-${cleTradEn}`"
+        :class="{ libelle: true, required: estRequis }"
+        v-if="!libelleInterieur"
+        >{{ $t(cleTradEn) }}</label
+      >
+      <v-textarea
+        :id="`saisieChampEn-${cleTradEn}`"
+        v-if="textarea"
+        rows="1"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        v-model="model[champs.Anglais]"
+        :rules="reglesInterne"
+        :autofocus="autofocus && !afficherChampFr"
+      />
+      <v-text-field
+        v-else
+        :id="`saisieChampEn-${cleTradEn}`"
+        density="comfortable"
+        :label="libelleInterieur ? $t(cleTradEn) : ''"
+        v-model="model[champs.Anglais]"
+        :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'
+
+  const props = defineProps<{
+    textarea?: boolean
+    libelleInterieur?: boolean
+    estRequis?: boolean
+    autofocus?: boolean
+    estUniqueValeurs?: T[]
+    minimumLongueur?: number
+    maximumLongueur?: number
+    regles?: Array<(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: Array<(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))
+
+    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,
+        }),
+      )
+    }
+
+    if (minimumLongueur.value !== undefined) _regles.push(v => estMinimumLongueur(v, minimumLongueur.value!))
+
+    if (maximumLongueur.value !== undefined) _regles.push(v => estMaximumLongueur(v, maximumLongueur.value!))
+
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",

package/validateurs.ts

@@ -0,0 +1,171 @@
+import { ChoixLangue } from '@/enums/choixLangue'
+// @ts-ignore
+import i18n from '@/plugins/i18n.js'
+const { t } = i18n.global
+
+/**
+ * Valide que le champ contient une valeur définie et non vide.
+ * Accepte les chaînes de caractères non vides, les nombres différents de 0,
+ * et toute autre valeur définie (ex. objets sélectionnés dans un v-select).
+ *
+ * @param valeur La valeur saisie ou sélectionnée dans le champ.
+ * @returns `true` si la valeur est considérée comme valide, sinon retourne un message d'erreur.
+ */
+export function estRequis(valeur: unknown): true | string {
+  if (valeur == null) return t('validateurs.estRequis')
+
+  if (typeof valeur === 'number' && isNaN(valeur)) return t('validateurs.estRequis')
+
+  if (typeof valeur === 'string') {
+    return valeur.trim().length > 0 || t('validateurs.estRequis')
+  }
+
+  return true // On considère tout le reste comme valide (ex: number, object, etc.)
+}
+
+/**
+ * Valide que le champ contient une valeur qui est d'une longeur minimale.
+ * @param valeur La valeur saisie du champ texte.
+ * @param min La longeur minimale de la valeur.
+ * @returns `true` si la longeur de la valeur est égale ou supérieure au minimum, sinon retourne un message d'erreur.
+ */
+export function estMinimumLongueur(valeur: string, min: number) {
+  if (min <= 0) {
+    min = 1
+    console.warn(
+      'CsqcValidateurs (estMinimumLongeur) - Une valeur négative ou égale à 0 a été reçue. Assurez-vous de passer une valeur supérieur à 0 dans la fonction estMinimumLongeur. La valeur a été mise à 1.',
+    )
+  }
+  return (valeur && valeur.trim().length >= min) || t('validateurs.estMinimumLongueur', { nbCaracteres: min }, min)
+}
+
+/**
+ * Valide que le champ contient une valeur qui ne dépasse pas une longeur maximale.
+ * @param valeur La valeur saisie du champ texte.
+ * @param max La longeur maximale (inclusive) de la valeur.
+ * @returns `true` si la longeur de la valeur est inférieure ou égale au maximum, sinon retourne un message d'erreur.
+ */
+export function estMaximumLongueur(valeur: string, max: number) {
+  if (max < 1) {
+    max = 1
+    console.warn(
+      'CsqcValidateurs (estMaximumLuongeur) - Une valeur négative ou égale à 0 a été reçue. Assurez-vous de passer une valeur supérieur à 0 dans la fonction estMaximumLongueur. La valeur a été mise à 1.',
+    )
+  }
+
+  return (valeur && valeur.trim().length <= max) || t('validateurs.estMaximumLongueur', { nbCaracteres: max }, max)
+}
+
+/**
+ * Vérifie qu'une valeur passée en paramètre est unique parmis une liste de valeurs. La validation du bilinguisme sera appliquée
+ * selon la langue CSS configurée et passée en option.
+ * @param valeur La valeur a vérifier
+ * @param modele L'instance d'un modèle avec un primary key id
+ * @param options Les configurations de la fonction
+ * @returns Vrai si la valeur est unique, ou une string d'erreur si un doublon est trouvé.
+ */
+export function estUniqueBilingue<T extends ModeleAvecId>(
+  valeur: string,
+  modele: T,
+  options: EstUniqueOptionsBilingue<T>,
+) {
+  // Affectations valeurs par défaut
+  const { champs, langueCss, valeurs } = options
+  if (!langueCss) options.langueCss = ChoixLangue.Francais
+  valeur = valeur.toLowerCase().trim()
+
+  switch (langueCss) {
+    case ChoixLangue.Anglais:
+      if (!champs.Anglais) {
+        console.error(
+          'CsqcValidateurs (estUnique) - Le champ anglais doit être speçifié lorsque la langueCss est en anglais.',
+        )
+        throw Error(
+          'CsqcValidateurs (estUnique) - Le champ anglais doit être speçifié lorsque la langueCss est en anglais.',
+        )
+      }
+      return (
+        !valeurs.find(
+          e =>
+            (e[champs.Anglais!] as string) != null &&
+            (e[champs.Anglais!] as string).toLowerCase().trim() === valeur &&
+            e.id !== modele.id,
+        ) || t('validateurs.estUnique', { valeurExistante: valeur })
+      )
+    case ChoixLangue.Francais:
+      if (!champs.Francais) {
+        console.error(
+          'CsqcValidateurs (estUnique) - Le champ français doit être speçifié lorsque la langueCss est en français.',
+        )
+        throw Error(
+          'CsqcValidateurs (estUnique) - Le champ français doit être speçifié lorsque la langueCss est en français.',
+        )
+      }
+      return (
+        valeurs.find(
+          e =>
+            (e[champs.Francais!] as string) != null &&
+            (e[champs.Francais!] as string).toLowerCase().trim() === valeur &&
+            e.id !== modele.id,
+        ) == null || t('validateurs.estUnique', { valeurExistante: valeur })
+      )
+    case ChoixLangue.Bilingue:
+      if (!champs.Anglais || !champs.Francais) {
+        console.error(
+          "CsqcValidateurs (estUnique) - Les deux champs (français et anglais) doivent être speçifiés lorsque qu'on est en mode de validation bilingue.",
+        )
+        throw Error(
+          "CsqcValidateurs (estUnique) - Les deux champs (français et anglais) doivent être speçifiés lorsque qu'on est en mode de validation bilingue.",
+        )
+      }
+      const estUnique =
+        valeurs.find(
+          e =>
+            ((e[champs.Francais!] != null && (e[champs.Francais!] as string).toLowerCase().trim() === valeur) ||
+              (e[champs.Anglais!] != null && (e[champs.Anglais!] as string).toLowerCase().trim() === valeur)) &&
+            e.id !== modele.id,
+        ) == null
+      return estUnique || t('validateurs.estUnique', { valeurExistante: valeur })
+    default:
+      break
+  }
+
+  throw Error('pas supposé être ici')
+}
+
+/**
+ * Vérifie qu'une valeur passée en paramètre est unique parmis une liste de valeurs.
+ * @param valeur La valeur a vérifier
+ * @param modele L'instance d'un modèle avec un primary key id
+ * @param options Les configurations de la fonction
+ * @returns Vrai si la valeur est unique, ou une string d'erreur si un doublon est trouvé.
+ */
+export function estUnique<T extends ModeleAvecId>(valeur: string, modele: T, options: EstUniqueOptions<T>) {
+  const { champ, valeurs } = options
+  return (
+    !valeurs.some(
+      e =>
+        e[champ] != null &&
+        (e[champ] as string).toLowerCase().trim() === valeur.toLowerCase().trim() &&
+        e.id !== modele.id,
+    ) || t('validateurs.estUnique', { valeurExistance: valeur })
+  )
+}
+
+type ModeleAvecId = { id: number }
+
+type ValeursChampEstUniqueOptions<ModeleAvecId> = {
+  ['Francais']?: keyof ModeleAvecId
+  ['Anglais']?: keyof ModeleAvecId
+}
+
+interface EstUniqueOptionsBilingue<T extends ModeleAvecId> {
+  champs: ValeursChampEstUniqueOptions<T>
+  valeurs: T[]
+  langueCss?: ChoixLangue
+}
+
+interface EstUniqueOptions<T extends ModeleAvecId> {
+  champ: keyof T
+  valeurs: T[]
+}