codevdesign 0.0.30 → 0.0.32

package/composants/csqcAide.vue

@@ -1,40 +1,55 @@
-<template>
-  <v-menu
-    v-if="!isXs"
-    location="top start"
-  >
-    <template #activator="{ props: activatorProps }">
-      <v-icon
-        v-bind="activatorProps"
-        :size="small ? 'small' : 'default'"
-        start
-        color="grisMoyen"
-        :style="monstyle"
-      >
-        mdi-help-circle
-      </v-icon>
-    </template>
-
-    <v-card style="max-width: 1000px">
-      <v-card-text class="pa-6">
-        <span v-html="props.aide"></span>
-      </v-card-text>
-    </v-card>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const props = defineProps<{
-    aide: string
-    monstyle?: string
-    small?: boolean
-  }>()
-
-  const { name } = useDisplay()
-
-  // on évite d'afficher sur les écrans extra-smalls
-  const isXs = computed(() => name.value === 'xs')
-</script>
+<template>
+  <v-menu
+    :open-on-hover="hover"
+    v-if="!isXs"
+    location="top start"
+  >
+    <template #activator="{ props: activatorProps }">
+      <slot name="icone">
+        <v-icon
+          v-bind="activatorProps"
+          @click.stop.prevent
+          :style="styleCSS"
+          :size="grosseurEffective"
+          color="grisMoyen"
+          icon="mdi-help-circle"
+        />
+      </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/gabarit/pivPiedPage.vue

@@ -1,59 +1,70 @@
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const anneeEnCours = computed<number>(() => {
-  return new Date().getFullYear();
-});
-</script>
-
-
-<template>
-  <footer>
-    <div class="footer-content">
-      <a href="https://quebec.ca">
-        <img
-          id="logoFooter"
-          alt="Gouvernement du Québec."
-          src="/images/QUEBEC_couleur.svg"
-          width="117"
-          height="35"
-        />
-      </a>
-      <div>
-        <small>
-          <a
-            href="http://www.droitauteur.gouv.qc.ca/copyright.php"
-            target="_blank"
-          >© Gouvernement du Québec, {{anneeEnCours}} </a>
-        </small>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<style scoped>
-
-footer {
-  display: flex;
-  justify-content: center;  /* Centrer horizontalement */
-  align-items: center;      /* Centrer verticalement */
-  text-align: center;       /* Centrer le texte à l'intérieur des éléments */
-  height: 100px;            /* Ajuster la hauteur du footer */
-}
-
-.footer-content {
-  display: flex;
-  flex-direction: column;   /* Disposer les éléments les uns sous les autres */
-  justify-content: center;  /* Centrer verticalement à l'intérieur de .footer-content */
-  align-items: center;      /* Centrer horizontalement à l'intérieur de .footer-content */
-}
-
-footer a {
-  text-decoration: none;  /* Supprimer le soulignement des liens */
-}
-
-footer small {
-  margin-top: 10px;  /* Ajouter de l'espace entre l'image et le texte */
-}
-</style>
+<template>
+  <footer>
+    <div class="footer-content">
+      <a href="https://quebec.ca">
+        <img
+          id="logoFooter"
+          alt="Gouvernement du Québec."
+          src="/images/QUEBEC_couleur.svg"
+          width="117"
+          height="35"
+        />
+      </a>
+      <div>
+        <small>
+          <a
+            href="http://www.droitauteur.gouv.qc.ca/copyright.php"
+            target="_blank"
+            >© Gouvernement du Québec {{ anneeEnCours }}
+          </a>
+
+          <a
+            v-if="props.version"
+            :href="props.lien"
+            target="_blank"
+            ><br />
+            version <span v-html="props.version"
+          /></a>
+        </small>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  const props = defineProps<{
+    version?: string
+    lien?: string
+  }>()
+
+  const anneeEnCours = computed<number>(() => {
+    return new Date().getFullYear()
+  })
+</script>
+
+<style scoped>
+  footer {
+    display: flex;
+    justify-content: center; /* Centrer horizontalement */
+    align-items: center; /* Centrer verticalement */
+    text-align: center; /* Centrer le texte à l'intérieur des éléments */
+    height: 100px; /* Ajuster la hauteur du footer */
+  }
+
+  .footer-content {
+    display: flex;
+    flex-direction: column; /* Disposer les éléments les uns sous les autres */
+    justify-content: center; /* Centrer verticalement à l'intérieur de .footer-content */
+    align-items: center; /* Centrer horizontalement à l'intérieur de .footer-content */
+  }
+
+  footer a {
+    text-decoration: none; /* Supprimer le soulignement des liens */
+  }
+
+  footer small {
+    margin-top: 10px; /* Ajouter de l'espace entre l'image et le texte */
+  }
+</style>

package/package.json

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