codevdesign 1.0.40 → 1.0.42

package/composants/csqcOptionSwitch.vue

@@ -1,120 +1,102 @@
 <template>
-  <div>
-    <v-row dense>
-      <v-col
-        cols="9"
-        md="8"
-        lg="6"
-        class="d-flex align-end"
+  <v-row
+    dense
+    class="align-center"
+  >
+    <!-- Texte + détails -->
+    <v-col
+      cols="10"
+      xl="11"
+      class="py-0"
+    >
+      <component
+        :is="labelCliquable ? 'label' : 'div'"
+        :for="labelCliquable ? switchId : undefined"
+        class="labelSwitchSiSwitchApres"
+        :class="{ 'label-cliquable': labelCliquable && !desactiver }"
       >
-        <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
-      </v-col>
-      <v-col
-        cols="2"
-        class="d-flex align-end justify-end"
-      >
-        <v-switch
-          v-model="maValeur"
-          :disabled="desactiver"
-          density="compact"
-          inset
-          v-bind="$attrs"
-          hide-details
-          @update:model-value="sauvegarder"
-        />
-      </v-col>
-    </v-row>
-    <v-row dense>
-      <v-col
-        cols="9"
-        md="8"
+        <slot name="label">
+          {{ texte }}
+        </slot>
+      </component>
+
+      <div
+        v-if="afficherDetails"
+        class="details"
       >
-        <span v-html="texteDetaille"></span>
-      </v-col>
-    </v-row>
-  </div>
+        <slot name="details">
+          <span v-html="texteDetaille"></span>
+        </slot>
+      </div>
+    </v-col>
+
+    <!-- Switch -->
+    <v-col
+      cols="2"
+      xl="1"
+      class="d-flex align-center justify-end py-0"
+    >
+      <v-switch
+        :id="switchId"
+        v-model="maValeur"
+        class="switch-compact"
+        :disabled="desactiver"
+        :density="($attrs.density as any) ?? 'compact'"
+        :inset="($attrs.inset as any) ?? true"
+        v-bind="$attrs"
+        hide-details
+      />
+    </v-col>
+  </v-row>
 </template>
+
 <script setup lang="ts">
-  import { ref, watch, onMounted, type PropType } from 'vue'
+  import { computed, useSlots } from 'vue'
 
-  // Définition des props
   const props = defineProps({
-    valeurInverse: {
-      type: Boolean,
-      default: false,
-    },
-    desactiver: {
-      type: Boolean,
-      default: false,
-    },
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    texte: {
-      type: String,
-      required: true,
-    },
-    texteDetaille: {
-      type: String,
-      required: true,
-    },
+    valeurInverse: { type: Boolean, default: false },
+    desactiver: { type: Boolean, default: false },
+    modelValue: { type: Boolean, required: true },
+    texte: { type: String, required: true },
+    texteDetaille: { type: String, default: '' },
+    labelCliquable: { type: Boolean, default: true },
   })
 
-  // Définition de l'événement
   const emit = defineEmits(['update:modelValue'])
+  const slots = useSlots()
 
-  // Référence pour la valeur interne
-  const maValeur = ref<boolean>(false)
-
-  // Montée du composant
-  onMounted(() => {
-    if (props.valeurInverse) {
-      maValeur.value = !props.modelValue
-    } else {
-      maValeur.value = props.modelValue
-    }
+  const maValeur = computed<boolean>({
+    get: () => (props.valeurInverse ? !props.modelValue : props.modelValue),
+    set: v => emit('update:modelValue', props.valeurInverse ? !v : v),
   })
 
-  // Watcher pour suivre les changements de la prop 'value'
-  watch(
-    () => props.modelValue,
-    newValue => {
-      if (props.valeurInverse) {
-        maValeur.value = !newValue
-      } else {
-        maValeur.value = newValue
-      }
-    },
-  )
-
-  watch(
-    () => props.valeurInverse,
-    newValue => {
-      if (props.valeurInverse) {
-        maValeur.value = newValue
-      } else {
-        maValeur.value = !newValue
-      }
-    },
-  )
+  const afficherDetails = computed(() => {
+    const slotExiste = !!slots.details?.().length
+    return slotExiste || props.texteDetaille.trim().length > 0
+  })
 
-  // Méthode pour sauvegarder la valeur
-  const sauvegarder = () => {
-    if (props.valeurInverse) {
-      emit('update:modelValue', !maValeur.value)
-    } else {
-      emit('update:modelValue', maValeur.value)
-    }
-  }
+  const switchId = `sw_${Math.random().toString(36).slice(2)}`
 </script>
 
-<style lang="css" scoped>
+<style scoped>
   .labelSwitchSiSwitchApres {
     font-weight: bold;
-    margin-top: 25px;
+    line-height: 1.2;
+  }
+
+  .label-cliquable {
+    cursor: pointer;
+  }
+
+  .details {
+    margin-top: 4px;
+  }
+
+  /* compact switch */
+  :deep(.switch-compact.v-input) {
+    margin: 0;
   }
-  .v-switch {
-    margin-bottom: -10px; /* aligner le switch avec son texte*/
+  :deep(.switch-compact .v-selection-control) {
+    margin: 0;
   }
 </style>

package/composants/csqcRechercheUtilisateur.vue

@@ -6,16 +6,16 @@
       :items="items"
       v-bind="$attrs"
       :loading="chargementInterne"
-      density="compact"
+      :density="($attrs.density as any) ?? 'compact'"
       :hide-no-data="!doitAfficherAucunResultat"
       :no-data-text="$t('csqc.csqcRechercheUtilisateur.aucunResultat')"
       :item-title="formatterUtilisateur"
       item-value="id"
       :placeholder="$t('csqc.csqcRechercheUtilisateur.placeholderRechercheUtilisateur')"
       return-object
-      autofocus
+      :autofocus="($attrs.autofocus as any) ?? true"
       auto-select-first
-      variant="outlined"
+      :variant="($attrs.variant as any) ?? 'outlined'"
     />
   </div>
 </template>

package/package.json

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