codevdesign 1.0.31 → 1.0.32

package/assets/csqc.css

@@ -0,0 +1,259 @@
+@charset "UTF-8";
+
+/* titre design qc avec ligne orange*/
+.headline {
+  color: #223654;
+  font-weight: 600;
+  display: inline-block;      /* largeur du texte */
+  position: relative;         /* pour positionner le ::after */
+}
+
+.headline::after {
+  content: '';
+  display: block;
+  width: 2.8rem;              /* ligne fixe */
+  border-bottom: 3px solid #f09686;
+  margin-top: 0.3rem;         /* espace entre texte et ligne */
+}
+
+
+/* pour afficher une étoile après le label*/
+.required:after {
+  content: ' *';
+  color: red;
+}
+
+/* grosseur et poids des labels*/
+.libelle {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+/*hauteur des boutons min... par défaut c'est 34*/
+.BoutonCSQC {
+  border-radius: 4px;
+  min-height: 56px;
+  min-width: 112px !important;
+}
+
+.BoutonCSQCCompact {
+  border-radius: 4px;
+  min-height: 40px;
+  min-width: 80px !important;
+}
+
+.iconeHover:hover {
+  color: #095797;
+}
+
+/*goutière de 24px minimum entre les boutons compact*/
+.v-application--is-ltr .v-card__actions > .v-btn.v-btn + .v-btn {
+  margin-left: 16px;
+}
+
+.Gouttiere {
+  margin-left: 16px;
+}
+
+/*permet legend max width sans padding de container */
+.maximumLargeur {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1310px;
+  width: 100%;
+}
+
+.ajouterPointeur {
+  cursor: pointer;
+}
+
+/*********************** Divers                                      ********************/
+.messageInfo {
+  font-size: smaller;
+  font-style: italic;
+}
+
+/*********************** Overrride piv                                *******************/
+@media screen and (min-width: 993px) {
+  #pivImage {
+    max-height: none !important;
+    max-width: 256px !important;
+    width: auto !important;
+  }
+}
+
+.hyphen_auto {
+  hyphens: auto;
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+/************************** PIV **************************/
+
+#pivImage {
+  max-height: 2rem;
+  max-width: 10.175rem;
+}
+
+.imgImpression {
+  display: none;
+}
+
+.visuallyHidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.cacher {
+  display: none !important;
+}
+
+.flex,
+.d-flex {
+  display: -ms-flexbox !important;
+  display: -webkit-box !important;
+  display: flex !important;
+}
+
+.align-items-center {
+  -ms-flex-align: center !important;
+  -webkit-box-align: center !important;
+  align-items: center !important;
+}
+
+.justify-content-end {
+  -ms-flex-pack: end !important;
+  -webkit-box-pack: end !important;
+  justify-content: flex-end !important;
+}
+
+.justify-content-start {
+  -ms-flex-pack: start !important;
+  -webkit-box-pack: start !important;
+  justify-content: flex-start !important;
+}
+
+/* Taille de police */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  color: #223654;
+  font-weight: 600;
+  font-style: normal;
+}
+
+h1,
+.h1 {
+  font-size: 2.5rem;
+  font-weight: bold;
+  line-height: 2.7rem;
+  margin-top: 1.3rem;
+  margin-bottom: 2rem;
+}
+
+h2,
+.h2 {
+  font-size: 2rem;
+  font-weight: bold;
+  padding-bottom: 0;
+  margin-bottom: 0.7rem;
+  margin-top: 2.5rem;
+  line-height: 2.3rem;
+}
+
+h3,
+.h3 {
+  font-size: 1.8rem;
+  font-weight: 500;
+  margin-top: 1.3rem;
+}
+
+h3.results-topic {
+  margin-top: 1rem;
+}
+
+h3.results-topic a {
+  font-weight: normal;
+  font-size: 1.5rem;
+  text-decoration: none;
+  font-variant-caps: all-small-caps;
+}
+
+h4,
+.h4 {
+  font-size: 1.3125rem;
+  font-weight: bold;
+  margin-top: 1rem;
+}
+
+h5,
+.h5 {
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-top: 1rem;
+}
+
+h6,
+.h6 {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+/* Titre design québec */
+
+h1:after,
+h2.decorated:after {
+  content: '';
+  display: block;
+  margin: 0 0 12px 0;
+  width: 4.8rem;
+  padding-top: 0.4rem;
+}
+
+h3.decorated:after,
+h4.decorated:after,
+h5.decorated:after,
+h6.decorated:after {
+  content: '';
+  display: block;
+  margin: 0 0 12px 0;
+  width: 3.4rem;
+  padding-top: 0.4rem;
+  border-bottom: 3px solid #f09686;
+}

package/composants/csqcAide.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-menu
+    v-if="!isXs"
+    :open-on-hover="hover"
+    location="top start"
+  >
+    <template #activator="{ props: activatorProps }">
+      <slot name="icone">
+        <v-icon
+          v-bind="activatorProps"
+          :style="styleCss"
+          :size="grosseurEffective"
+          color="grisMoyen"
+          icon="mdi-help-circle"
+          @click.stop.prevent
+        />
+      </slot>
+    </template>
+
+    <slot name="carte">
+      <v-expand-transition>
+        <v-card style="max-width: 1000px">
+          <v-card-text class="pa-6">
+            <span v-html="props.aide"></span>
+          </v-card-text> </v-card
+      ></v-expand-transition>
+    </slot>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const props = withDefaults(
+    defineProps<{
+      aide: string
+      grosseur?: 'default' | 'small' | 'large' | 'x-large' | 'x-small'
+      hover?: boolean
+      styleCss?: string
+    }>(),
+    {
+      grosseur: 'default',
+      hover: false,
+      styleCss: '',
+    },
+  )
+  const grosseurEffective = computed(() => {
+    const val = props.grosseur
+    return val && val.trim() !== '' ? val : 'default'
+  })
+
+  const { name } = useDisplay()
+  const isXs = computed(() => name.value === 'xs')
+</script>

package/composants/csqcAlerteErreur.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    v-if="afficher && erreur"
+    :style="retournerStyle"
+  >
+    <v-alert
+      v-model="afficher"
+      class="mb-0 text-center hyphen_auto"
+      color="#CB381F"
+      closable
+      v-bind="$attrs"
+      @click:close="fermer"
+    >
+      <span v-html="erreur" /><br />
+      <span
+        id="messageSoutien"
+        style="color: darkgray"
+        >{{ messageSoutien }}</span
+      >
+    </v-alert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue'
+  import { useDisplay } from 'vuetify'
+  import { useI18n } from 'vue-i18n'
+
+  // Définir les props avec les types
+  const props = defineProps({
+    message: {
+      type: String,
+      required: true,
+    },
+    messageSoutien: {
+      type: String,
+      required: true,
+    },
+  })
+  const { name: displayName } = useDisplay()
+  const emit = defineEmits(['fermer:alerte'])
+  const { t } = useI18n({ useScope: 'global' })
+
+  const fermer = (): void => {
+    afficher.value = false
+    emit('fermer:alerte')
+  }
+
+  const afficher = ref(false)
+
+  // Watcher pour réagir aux changements du message
+  watch(
+    () => props.message,
+    nouveauMessage => {
+      if (nouveauMessage && nouveauMessage !== '') {
+        afficher.value = true
+      }
+    },
+  )
+
+  // Computed pour l'erreur, venant du store
+  const erreur = computed(() => {
+    if (props.message == null || props.message == '') return null
+
+    if (props.message.indexOf('erreurs.') === 0) return t(props.message)
+
+    return props.message
+  })
+
+  // Méthode computed pour le style en fonction du breakpoint
+  const retournerStyle = computed(() => {
+    if (displayName.value === 'xs') {
+      return 'top: 0px; right:1%;width: 98%;position: fixed; z-index: 2000;'
+    }
+    return 'top: 20px; right: 10%; width: 80%; position: fixed; z-index: 2000; margin: 0 auto;'
+  })
+</script>
+
+<style lang="css" scoped>
+  .error {
+    padding-top: 0.7rem;
+    padding-bottom: 0.7rem;
+  }
+  :deep(.blanc) {
+    color: white;
+  }
+</style>