codevdesign 2.0.5 → 2.0.6

package/composants/csqcAide.vue

@@ -1,345 +1,345 @@
-<template>
-  <v-menu
-    v-if="!isXs"
-    ref="menuRef"
-    v-model="ouvert"
-    :open-on-hover="hover"
-    :location="positionEffective"
-    :close-on-content-click="false"
-    :offset="10"
-  >
-    <template #activator="{ props: activatorProps }">
-      <slot name="icone">
-        <v-btn
-          v-bind="activatorProps"
-          :style="styleCss"
-          :size="grosseurEffective"
-          color="primary"
-          icon
-          variant="text"
-          @click.stop
-        >
-          <span
-            class="csqc-aide__pastille"
-            :style="stylePastille"
-            >{{ caractereIcone }}</span
-          >
-        </v-btn>
-      </slot>
-    </template>
-
-    <slot name="carte">
-      <div :class="['csqc-infobulle', classFleche]">
-        <v-btn
-          class="csqc-infobulle__fermer"
-          color="primary"
-          icon
-          size="small"
-          variant="text"
-          @click="ouvert = false"
-        >
-          <v-icon
-            variant="text"
-            size="24"
-            >mdi-close</v-icon
-          >
-        </v-btn>
-        <div class="csqc-infobulle__corps">
-          <div
-            v-if="titre"
-            class="csqc-infobulle__titre"
-          >
-            {{ titre }}
-          </div>
-          <span v-html="aide"></span>
-        </div>
-      </div>
-    </slot>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, watch } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const props = withDefaults(
-    defineProps<{
-      aide: string
-      grosseur?: 'default' | 'small' | 'large' | 'x-large' | 'x-small'
-      hover?: boolean
-      styleCss?: string
-      titre?: string
-      position?: 'top' | 'top-debut' | 'top-fin' | 'bottom' | 'start' | 'end'
-      typeIcone?: 'information' | 'aide'
-    }>(),
-    {
-      grosseur: 'small',
-      hover: false,
-      styleCss: '',
-      position: 'top',
-      typeIcone: 'aide',
-    },
-  )
-
-  const ouvert = ref(false)
-
-  const caractereIcone = computed(() => (props.typeIcone === 'aide' ? '?' : 'i'))
-
-  const stylePastille = computed(() => {
-    const tailles: Record<string, { cercle: number; police: number }> = {
-      'x-small': { cercle: 16, police: 10 },
-      small: { cercle: 20, police: 12 },
-      large: { cercle: 32, police: 20 },
-      'x-large': { cercle: 40, police: 26 },
-    }
-    const { cercle, police } = tailles[props.grosseur] ?? { cercle: 24, police: 15 }
-    return {
-      width: `${cercle}px`,
-      height: `${cercle}px`,
-      fontSize: `${police}px`,
-      fontStyle: 'normal',
-      fontFamily: props.typeIcone === 'aide' ? 'Arial, sans-serif' : "Georgia, 'Times New Roman', serif",
-    }
-  })
-
-  const grosseurEffective = computed(() => {
-    const val = props.grosseur
-    return val && val.trim() !== '' ? val : 'default'
-  })
-
-  const positionEffective = computed(() => {
-    switch (props.position) {
-      case 'top-debut':
-        return 'top start' as const
-      case 'top-fin':
-        return 'top end' as const
-      default:
-        return props.position as 'top' | 'bottom' | 'start' | 'end'
-    }
-  })
-
-  const menuRef = ref()
-  const classFleche = ref('csqc-infobulle--fleche-bas-gauche')
-
-  function detecterPosition() {
-    const activateurEl = menuRef.value?.activatorEl as HTMLElement | undefined
-    if (!activateurEl) return
-
-    const overlays = document.querySelectorAll('.v-overlay--active .v-overlay__content')
-    if (!overlays.length) return
-    const contentEl = overlays[overlays.length - 1] as HTMLElement
-
-    const ar = activateurEl.getBoundingClientRect()
-    const ir = contentEl.getBoundingClientRect()
-
-    if (ir.width === 0 || ir.height === 0) return
-
-    const centreActX = ar.left + ar.width / 2
-    const centreActY = ar.top + ar.height / 2
-
-    if (ir.bottom <= centreActY) {
-      const ratioX = (centreActX - ir.left) / ir.width
-      if (ratioX < 0.33) {
-        classFleche.value = 'csqc-infobulle--fleche-bas-gauche'
-      } else if (ratioX > 0.66) {
-        classFleche.value = 'csqc-infobulle--fleche-bas-droite'
-      } else {
-        classFleche.value = 'csqc-infobulle--fleche-bas'
-      }
-    } else if (ir.top >= centreActY) {
-      classFleche.value = 'csqc-infobulle--fleche-haut'
-    } else if (ir.right <= centreActX) {
-      classFleche.value = 'csqc-infobulle--fleche-droite'
-    } else {
-      classFleche.value = 'csqc-infobulle--fleche-gauche'
-    }
-  }
-
-  watch(ouvert, val => {
-    if (!val) return
-    setTimeout(detecterPosition, 50)
-  })
-
-  const { name } = useDisplay()
-  const isXs = computed(() => name.value === 'xs')
-</script>
-
-<style scoped>
-  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
-  .csqc-aide__pastille {
-    align-items: center;
-    background-color: #095797;
-    border-radius: 50%;
-    color: #ffffff;
-    display: inline-flex;
-    font-weight: 700;
-    justify-content: center;
-    line-height: 1;
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .csqc-infobulle {
-    background-color: #ffffff;
-    border: 1px solid #c5cad2;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(34, 54, 84, 0.15);
-    max-width: 320px;
-    min-width: 216px;
-    position: relative;
-  }
-
-  .csqc-infobulle__fermer {
-    position: absolute !important;
-    right: 0;
-    top: 0;
-  }
-
-  .csqc-infobulle__titre {
-    color: #223654;
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.4;
-    margin-bottom: 4px;
-  }
-
-  .csqc-infobulle__corps {
-    color: #223654;
-    font-family: 'Open Sans', sans-serif;
-    font-size: 0.875rem;
-    line-height: 1.4;
-    max-height: 128px;
-    overflow-y: auto;
-    padding: 26px 32px 12px 12px;
-  }
-
-  /* Flèche vers le bas — tooltip au-dessus de l'activateur */
-  .csqc-infobulle--fleche-bas::before,
-  .csqc-infobulle--fleche-bas::after {
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    bottom: -9px;
-    content: '';
-    left: 50%;
-    position: absolute;
-    transform: translateX(-50%);
-  }
-
-  .csqc-infobulle--fleche-bas::before {
-    border-top: 9px solid #c5cad2;
-  }
-
-  .csqc-infobulle--fleche-bas::after {
-    border-top: 8px solid #ffffff;
-    bottom: -8px;
-    z-index: 1;
-  }
-
-  /* Flèche vers le haut — tooltip en dessous de l'activateur */
-  .csqc-infobulle--fleche-haut::before,
-  .csqc-infobulle--fleche-haut::after {
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    content: '';
-    left: 50%;
-    position: absolute;
-    top: -9px;
-    transform: translateX(-50%);
-  }
-
-  .csqc-infobulle--fleche-haut::before {
-    border-bottom: 9px solid #c5cad2;
-  }
-
-  .csqc-infobulle--fleche-haut::after {
-    border-bottom: 8px solid #ffffff;
-    top: -8px;
-    z-index: 1;
-  }
-
-  /* Flèche vers la droite — tooltip à gauche de l'activateur */
-  .csqc-infobulle--fleche-droite::before,
-  .csqc-infobulle--fleche-droite::after {
-    border-bottom: 9px solid transparent;
-    border-top: 9px solid transparent;
-    content: '';
-    position: absolute;
-    right: -9px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .csqc-infobulle--fleche-droite::before {
-    border-left: 9px solid #c5cad2;
-  }
-
-  .csqc-infobulle--fleche-droite::after {
-    border-left: 8px solid #ffffff;
-    right: -8px;
-    z-index: 1;
-  }
-
-  /* Flèche bas-gauche — tooltip au-dessus, aligné à gauche de l'activateur */
-  .csqc-infobulle--fleche-bas-gauche::before,
-  .csqc-infobulle--fleche-bas-gauche::after {
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    bottom: -9px;
-    content: '';
-    left: 20px;
-    position: absolute;
-  }
-
-  .csqc-infobulle--fleche-bas-gauche::before {
-    border-top: 9px solid #c5cad2;
-  }
-
-  .csqc-infobulle--fleche-bas-gauche::after {
-    border-top: 8px solid #ffffff;
-    bottom: -8px;
-    z-index: 1;
-  }
-
-  /* Flèche bas-droite — tooltip au-dessus, aligné à droite de l'activateur */
-  .csqc-infobulle--fleche-bas-droite::before,
-  .csqc-infobulle--fleche-bas-droite::after {
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    bottom: -9px;
-    content: '';
-    position: absolute;
-    right: 20px;
-  }
-
-  .csqc-infobulle--fleche-bas-droite::before {
-    border-top: 9px solid #c5cad2;
-  }
-
-  .csqc-infobulle--fleche-bas-droite::after {
-    border-top: 8px solid #ffffff;
-    bottom: -8px;
-    z-index: 1;
-  }
-
-  /* Flèche vers la gauche — tooltip à droite de l'activateur */
-  .csqc-infobulle--fleche-gauche::before,
-  .csqc-infobulle--fleche-gauche::after {
-    border-bottom: 9px solid transparent;
-    border-top: 9px solid transparent;
-    content: '';
-    left: -9px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .csqc-infobulle--fleche-gauche::before {
-    border-right: 9px solid #c5cad2;
-  }
-
-  .csqc-infobulle--fleche-gauche::after {
-    border-right: 8px solid #ffffff;
-    left: -8px;
-    z-index: 1;
-  }
-</style>
+<template>
+  <v-menu
+    v-if="!isXs"
+    ref="menuRef"
+    v-model="ouvert"
+    :open-on-hover="hover"
+    :location="positionEffective"
+    :close-on-content-click="false"
+    :offset="10"
+  >
+    <template #activator="{ props: activatorProps }">
+      <slot name="icone">
+        <v-btn
+          v-bind="activatorProps"
+          :style="styleCss"
+          :size="grosseurEffective"
+          color="primary"
+          icon
+          variant="text"
+          @click.stop
+        >
+          <span
+            class="csqc-aide__pastille"
+            :style="stylePastille"
+            >{{ caractereIcone }}</span
+          >
+        </v-btn>
+      </slot>
+    </template>
+
+    <slot name="carte">
+      <div :class="['csqc-infobulle', classFleche]">
+        <v-btn
+          class="csqc-infobulle__fermer"
+          color="primary"
+          icon
+          size="small"
+          variant="text"
+          @click="ouvert = false"
+        >
+          <v-icon
+            variant="text"
+            size="24"
+            >mdi-close</v-icon
+          >
+        </v-btn>
+        <div class="csqc-infobulle__corps">
+          <div
+            v-if="titre"
+            class="csqc-infobulle__titre"
+          >
+            {{ titre }}
+          </div>
+          <span v-html="aide"></span>
+        </div>
+      </div>
+    </slot>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const props = withDefaults(
+    defineProps<{
+      aide: string
+      grosseur?: 'default' | 'small' | 'large' | 'x-large' | 'x-small'
+      hover?: boolean
+      styleCss?: string
+      titre?: string
+      position?: 'top' | 'top-debut' | 'top-fin' | 'bottom' | 'start' | 'end'
+      typeIcone?: 'information' | 'aide'
+    }>(),
+    {
+      grosseur: 'small',
+      hover: false,
+      styleCss: '',
+      position: 'top',
+      typeIcone: 'aide',
+    },
+  )
+
+  const ouvert = ref(false)
+
+  const caractereIcone = computed(() => (props.typeIcone === 'aide' ? '?' : 'i'))
+
+  const stylePastille = computed(() => {
+    const tailles: Record<string, { cercle: number; police: number }> = {
+      'x-small': { cercle: 16, police: 10 },
+      small: { cercle: 20, police: 12 },
+      large: { cercle: 32, police: 20 },
+      'x-large': { cercle: 40, police: 26 },
+    }
+    const { cercle, police } = tailles[props.grosseur] ?? { cercle: 24, police: 15 }
+    return {
+      width: `${cercle}px`,
+      height: `${cercle}px`,
+      fontSize: `${police}px`,
+      fontStyle: 'normal',
+      fontFamily: props.typeIcone === 'aide' ? 'Arial, sans-serif' : "Georgia, 'Times New Roman', serif",
+    }
+  })
+
+  const grosseurEffective = computed(() => {
+    const val = props.grosseur
+    return val && val.trim() !== '' ? val : 'default'
+  })
+
+  const positionEffective = computed(() => {
+    switch (props.position) {
+      case 'top-debut':
+        return 'top start' as const
+      case 'top-fin':
+        return 'top end' as const
+      default:
+        return props.position as 'top' | 'bottom' | 'start' | 'end'
+    }
+  })
+
+  const menuRef = ref()
+  const classFleche = ref('csqc-infobulle--fleche-bas-gauche')
+
+  function detecterPosition() {
+    const activateurEl = menuRef.value?.activatorEl as HTMLElement | undefined
+    if (!activateurEl) return
+
+    const overlays = document.querySelectorAll('.v-overlay--active .v-overlay__content')
+    if (!overlays.length) return
+    const contentEl = overlays[overlays.length - 1] as HTMLElement
+
+    const ar = activateurEl.getBoundingClientRect()
+    const ir = contentEl.getBoundingClientRect()
+
+    if (ir.width === 0 || ir.height === 0) return
+
+    const centreActX = ar.left + ar.width / 2
+    const centreActY = ar.top + ar.height / 2
+
+    if (ir.bottom <= centreActY) {
+      const ratioX = (centreActX - ir.left) / ir.width
+      if (ratioX < 0.33) {
+        classFleche.value = 'csqc-infobulle--fleche-bas-gauche'
+      } else if (ratioX > 0.66) {
+        classFleche.value = 'csqc-infobulle--fleche-bas-droite'
+      } else {
+        classFleche.value = 'csqc-infobulle--fleche-bas'
+      }
+    } else if (ir.top >= centreActY) {
+      classFleche.value = 'csqc-infobulle--fleche-haut'
+    } else if (ir.right <= centreActX) {
+      classFleche.value = 'csqc-infobulle--fleche-droite'
+    } else {
+      classFleche.value = 'csqc-infobulle--fleche-gauche'
+    }
+  }
+
+  watch(ouvert, val => {
+    if (!val) return
+    setTimeout(detecterPosition, 50)
+  })
+
+  const { name } = useDisplay()
+  const isXs = computed(() => name.value === 'xs')
+</script>
+
+<style scoped>
+  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
+  .csqc-aide__pastille {
+    align-items: center;
+    background-color: #095797;
+    border-radius: 50%;
+    color: #ffffff;
+    display: inline-flex;
+    font-weight: 700;
+    justify-content: center;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .csqc-infobulle {
+    background-color: #ffffff;
+    border: 1px solid #c5cad2;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(34, 54, 84, 0.15);
+    max-width: 320px;
+    min-width: 216px;
+    position: relative;
+  }
+
+  .csqc-infobulle__fermer {
+    position: absolute !important;
+    right: 0;
+    top: 0;
+  }
+
+  .csqc-infobulle__titre {
+    color: #223654;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    margin-bottom: 4px;
+  }
+
+  .csqc-infobulle__corps {
+    color: #223654;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    max-height: 128px;
+    overflow-y: auto;
+    padding: 26px 32px 12px 12px;
+  }
+
+  /* Flèche vers le bas — tooltip au-dessus de l'activateur */
+  .csqc-infobulle--fleche-bas::before,
+  .csqc-infobulle--fleche-bas::after {
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    bottom: -9px;
+    content: '';
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  .csqc-infobulle--fleche-bas::before {
+    border-top: 9px solid #c5cad2;
+  }
+
+  .csqc-infobulle--fleche-bas::after {
+    border-top: 8px solid #ffffff;
+    bottom: -8px;
+    z-index: 1;
+  }
+
+  /* Flèche vers le haut — tooltip en dessous de l'activateur */
+  .csqc-infobulle--fleche-haut::before,
+  .csqc-infobulle--fleche-haut::after {
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    content: '';
+    left: 50%;
+    position: absolute;
+    top: -9px;
+    transform: translateX(-50%);
+  }
+
+  .csqc-infobulle--fleche-haut::before {
+    border-bottom: 9px solid #c5cad2;
+  }
+
+  .csqc-infobulle--fleche-haut::after {
+    border-bottom: 8px solid #ffffff;
+    top: -8px;
+    z-index: 1;
+  }
+
+  /* Flèche vers la droite — tooltip à gauche de l'activateur */
+  .csqc-infobulle--fleche-droite::before,
+  .csqc-infobulle--fleche-droite::after {
+    border-bottom: 9px solid transparent;
+    border-top: 9px solid transparent;
+    content: '';
+    position: absolute;
+    right: -9px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .csqc-infobulle--fleche-droite::before {
+    border-left: 9px solid #c5cad2;
+  }
+
+  .csqc-infobulle--fleche-droite::after {
+    border-left: 8px solid #ffffff;
+    right: -8px;
+    z-index: 1;
+  }
+
+  /* Flèche bas-gauche — tooltip au-dessus, aligné à gauche de l'activateur */
+  .csqc-infobulle--fleche-bas-gauche::before,
+  .csqc-infobulle--fleche-bas-gauche::after {
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    bottom: -9px;
+    content: '';
+    left: 20px;
+    position: absolute;
+  }
+
+  .csqc-infobulle--fleche-bas-gauche::before {
+    border-top: 9px solid #c5cad2;
+  }
+
+  .csqc-infobulle--fleche-bas-gauche::after {
+    border-top: 8px solid #ffffff;
+    bottom: -8px;
+    z-index: 1;
+  }
+
+  /* Flèche bas-droite — tooltip au-dessus, aligné à droite de l'activateur */
+  .csqc-infobulle--fleche-bas-droite::before,
+  .csqc-infobulle--fleche-bas-droite::after {
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    bottom: -9px;
+    content: '';
+    position: absolute;
+    right: 20px;
+  }
+
+  .csqc-infobulle--fleche-bas-droite::before {
+    border-top: 9px solid #c5cad2;
+  }
+
+  .csqc-infobulle--fleche-bas-droite::after {
+    border-top: 8px solid #ffffff;
+    bottom: -8px;
+    z-index: 1;
+  }
+
+  /* Flèche vers la gauche — tooltip à droite de l'activateur */
+  .csqc-infobulle--fleche-gauche::before,
+  .csqc-infobulle--fleche-gauche::after {
+    border-bottom: 9px solid transparent;
+    border-top: 9px solid transparent;
+    content: '';
+    left: -9px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .csqc-infobulle--fleche-gauche::before {
+    border-right: 9px solid #c5cad2;
+  }
+
+  .csqc-infobulle--fleche-gauche::after {
+    border-right: 8px solid #ffffff;
+    left: -8px;
+    z-index: 1;
+  }
+</style>