codevdesign 1.0.33 → 1.0.34

package/composants/csqcTexteBilingue.vue

@@ -1,175 +0,0 @@
-<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>
-      <csqcAide
-        v-if="props.aide && !libelleInterieur"
-        :aide="props.aide"
-        hover
-        :style-css="'padding-bottom:6px;padding-left:8px;'"
-      />
-      <v-textarea
-        v-if="textarea"
-        :id="`saisieChampFr-${cleTradFr}`"
-        v-model="model[champs.Francais]"
-        density="comfortable"
-        v-bind="$attrs"
-        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"
-        v-bind="$attrs"
-        :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
-      ><csqcAide
-        v-if="props.aide && !libelleInterieur"
-        :aide="props.aide"
-        hover
-        :style-css="'padding-bottom:6px;padding-left:8px;'"
-      />
-      <v-textarea
-        v-if="textarea"
-        :id="`saisieChampEn-${cleTradEn}`"
-        v-model="model[champs.Anglais]"
-        rows="1"
-        v-bind="$attrs"
-        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"
-        v-bind="$attrs"
-        :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 csqcAide from './csqcAide.vue'
-  import { computed, type PropType, toRefs } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  const { t } = useI18n({ useScope: 'global' })
-
-  const props = defineProps<{
-    aide?: string
-    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,156 +0,0 @@
-<template>
-  <v-navigation-drawer
-    v-model="visible"
-    location="right"
-    temporary
-    v-bind="$attrs"
-    :width="grosseurTiroir"
-    class="pa-0 elevation-2 csqc-ligneBleue"
-    :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>
-
-<style>
-  .csqc-ligneBleue {
-    border-left: 30px #095797 solid !important;
-  }
-</style>

package/composants/gabarit/csqcMenu.vue

@@ -1,281 +0,0 @@
-<template>
-  <!-- desktop -->
-  <div v-if="!estMobile">
-    <v-toolbar
-      class="pa-0 ajouterPointeur barreMenu"
-      :border="false"
-      elevation="2"
-    >
-      <div
-        v-for="item in filtrerMenuItems"
-        :key="item.nom"
-        class="pt-1"
-      >
-        <v-btn
-          v-if="doitAfficherItemMenu(item)"
-          variant="text"
-          :to="item.path"
-          :active="item.path === route"
-          :active-color="'white'"
-          :style="'min-width: 100px;'"
-          >{{ item.nom }}</v-btn
-        >
-      </div>
-      <v-spacer></v-spacer>
-      <!-- Sous Liste -->
-      <v-menu
-        v-for="(item, index) in filtrerSousListe"
-        :key="index"
-        open-on-hover
-      >
-        <template #activator="{ props }">
-          <v-btn
-            color="white"
-            v-bind="props"
-            :active="estActifSousliste(item)"
-          >
-            {{ item.nom }}
-          </v-btn>
-        </template>
-
-        <v-list
-          style="background-color: #223654 !important"
-          min-width="230px"
-        >
-          <v-list-item
-            v-for="(sousitem, sousindex) in obtenirItemsSousListeSelonDroits(item.id)"
-            :key="sousindex"
-          >
-            <v-btn
-              :max-height="35"
-              width="100%"
-              class="params_item"
-              :to="sousitem.path"
-              variant="text"
-              :active="sousitem.path === route"
-              >{{ sousitem.nom }}</v-btn
-            >
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      <v-btn
-        v-if="btnDeconnexion"
-        variant="text"
-        :style="'min-width: 100px;'"
-        @click="deconnexion"
-        >{{ $t('csqc.csqcMenu.deconnexion') }}</v-btn
-      >
-    </v-toolbar>
-  </div>
-
-  <!-- mobile -->
-  <div v-else>
-    <v-toolbar class="pa-0 ajouterPointeur barreMenuMobile">
-      <v-app-bar-nav-icon
-        variant="text"
-        @click.stop="menu = !menu"
-      ></v-app-bar-nav-icon>
-      <v-toolbar-title
-        ><label
-          class="ajouterPointeur"
-          style="color: white !important"
-          >{{ $t('menu.menu') }}</label
-        >
-      </v-toolbar-title>
-    </v-toolbar>
-
-    <!-- mobile -->
-    <v-navigation-drawer
-      v-model="menu"
-      nav
-    >
-      <v-list>
-        <!-- Menu principal -->
-        <template
-          v-for="item in filtrerMenuItems"
-          :key="item.nom"
-        >
-          <v-list-item
-            :to="item.path"
-            :active="item.path === route"
-            :title="item.nom"
-          />
-        </template>
-
-        <!-- Sous-listes -->
-        <template
-          v-for="item in filtrerSousListe"
-          :key="item.id"
-        >
-          <v-list-group :value="item.nom">
-            <template #activator="{ props }">
-              <v-list-item
-                v-bind="props"
-                :title="item.nom"
-              />
-            </template>
-
-            <template
-              v-for="(sousitem, index) in obtenirItemsSousListeSelonDroits(item.id)"
-              :key="index"
-            >
-              <v-list-item
-                :title="sousitem.nom"
-                :value="sousitem.nom"
-                :to="sousitem.path"
-              />
-            </template>
-          </v-list-group>
-        </template>
-
-        <!-- ✅ Déconnexion : UNE seule fois -->
-        <v-list-item
-          v-if="btnDeconnexion"
-          :title="$t('csqc.csqcMenu.deconnexion')"
-          @click="deconnexion"
-        />
-      </v-list>
-    </v-navigation-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import type { MenuItem, SousListe, SousListeItems } from '../../modeles/composants/csqcMenuModele'
-  import { ref, computed } from 'vue'
-
-  const props = defineProps({
-    estMobile: {
-      type: Boolean,
-      required: true,
-    },
-    btnDeconnexion: {
-      type: Boolean,
-      required: false,
-    },
-    route: {
-      type: String,
-      required: true,
-    },
-    menuItems: {
-      type: Array as () => MenuItem[],
-      required: true,
-    },
-    sousliste: {
-      type: Array as () => SousListe[],
-      required: false,
-      default: () => [],
-    },
-    souslisteItems: {
-      type: Array as () => SousListeItems[],
-      required: false,
-      default: () => [],
-    },
-    droitsMap: {
-      type: Object as () => Record<string, boolean>,
-      required: true,
-      default: () => ({}),
-    },
-  })
-
-  const menu = ref<boolean>(false)
-  const emit = defineEmits(['deconnexion'])
-
-  /*const verifierDroits = (monelement: string) => {
-    return props.droitsMap[monelement] || false
-  }*/
-
-  const deconnexion = () => {
-    emit('deconnexion')
-  }
-
-  const doitAfficherItemMenu = (item: MenuItem) => {
-    return props.droitsMap[item.droit] || false
-  }
-
-  const filtrerMenuItems = computed(() => {
-    return props.menuItems.filter(item => props.droitsMap[item.droit])
-  })
-
-  const filtrerSousListe = computed(() => {
-    return props.sousliste.filter(item => props.droitsMap[item.droit])
-  })
-
-  const obtenirItemsSousListeSelonDroits = (monitemId: number) => {
-    return props.souslisteItems.filter(item => item.parentId === monitemId && props.droitsMap[item.droit])
-  }
-
-  // Vérifie si un item de la sous-liste est actif (route correspond à un item)
-  const estActifSousliste = (item: SousListe) => {
-    // Vérifie si un des sous-items correspond à la route
-    return obtenirItemsSousListeSelonDroits(item.id).some(sousitem => sousitem.path === props.route)
-  }
-</script>
-<style lang="css" scoped>
-  /* desktop background de la barre de menu et hauteur */
-  .v-toolbar {
-    background-color: #223654;
-    height: 64px;
-  }
-
-  /* desktop couleur du texte de la barre, marge du haut, padding */
-  .barreMenu {
-    color: white !important;
-    padding: 0 10px 0 10px !important;
-  }
-  /* desktop */
-  .v-btn {
-    font-weight: 400;
-    height: 72px !important;
-  }
-  /* desktop */
-  .v-btn--active {
-    font-weight: 600 !important;
-  }
-
-  /* desktop empeche le texte parametre detre trop bas */
-  .params {
-    padding-top: 5px !important;
-  }
-  /* desktop */
-  .params_item {
-    font-weight: 400;
-    color: white !important;
-    background-color: #223654 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active {
-    color: white !important;
-    font-weight: 600 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active:hover {
-    color: white !important;
-    background-color: #223654 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active:hover::before {
-    color: #ffffff80 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active::before {
-    opacity: 0.24;
-    border-radius: 0;
-    color: #ffffff80 !important;
-    margin-top: 1px !important;
-  }
-
-  /* mobile couleur du texte de la barre, marge du haut, padding */
-  .barreMenuMobile {
-    color: white !important;
-    padding: 0 10px 0 10px !important;
-  }
-
-  /* mobile drawer apparait sous les app bar */
-  .v-navigation-drawer {
-    top: 132px !important;
-  }
-  /* mobile drawer,  Calcule la hauteur comme étant 100% moins 132px pour afficher le scroll */
-  :deep(.v-navigation-drawer__content) {
-    height: calc(100% - 132px);
-  }
-</style>