codevdesign 0.0.29 → 0.0.31

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/csqcEntete.vue

@@ -1,14 +1,11 @@
 <template>
-  <v-app-bar
+  <v-toolbar
     flat
-    fixed
     color="white"
-    class="px-0 mx-0"
-    :height="82"
-    style="margin-top: 146px"
+    height="82px"
   >
     <v-row
-      class="pt-2"
+      class="pt-4"
       @resize="controlAffichage"
     >
       <v-col
@@ -52,7 +49,7 @@
     </v-row>
     <!-- Barre en bas -->
     <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
-  </v-app-bar>
+  </v-toolbar>
 </template>
 
 <script setup lang="ts">

package/package.json

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