codevdesign 1.0.25 → 1.0.27

package/composants/csqcChaise/chaiseConteneur.vue

@@ -1,363 +1,367 @@
-<template>
-  <div class="pa-2 mt-2 mb-1 mr-1">
-    <!-- Affiche la carte récap si activée et qu'il y a des unités -->
-    <div v-if="activerDivPreferences && unites && unites.length > 0">
-      <v-card
-        width="375"
-        variant="outlined"
-      >
-        <v-card-text class="pt-0 mt-0">
-          <v-progress-linear
-            v-if="chargementEnCours"
-            indeterminate
-          />
-
-          <div
-            v-else
-            class="pt-2"
-          >
-            <div class="text-overline text-h6 mb-2">{{ texteTitre }}</div>
-
-            <div>
-              <v-list-item
-                v-for="uniteId in Object.keys(dictChaisesReleve)"
-                :key="uniteId"
-                class="mb-1"
-              >
-                <ChaisePreferenceItem
-                  :uniteId="Number(uniteId)"
-                  :preferences="preferences"
-                  :dictChaisesReleve="dictChaisesReleve"
-                  :unites="unites"
-                />
-              </v-list-item>
-            </div>
-          </div>
-        </v-card-text>
-
-        <v-card-actions>
-          <div class="flex-grow-1" />
-          <v-btn
-            v-if="!chargementEnCours"
-            rounded
-            variant="outlined"
-            size="small"
-            @click.stop="modifier"
-          >
-            {{ texteBoutonModifier }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </div>
-
-    <csqcDialogue
-      ref="modale"
-      :operation-en-cours="chargementEnCours"
-      :btn-ok-desactiver="chargementEnCours"
-      :titre="texteTitre"
-      :btn-annuler-texte="texteBoutonAnnuler"
-      @annuler="annuler"
-      @ok="ok"
-      ><template #content>
-        <div class="pt-2"></div>
-        <hr class="pt-0 mt-0 pl-0" />
-        <div class="pt-4">
-          <i>{{ info }}</i>
-
-          <v-progress-linear
-            v-if="chargementEnCours"
-            indeterminate
-          />
-
-          <div
-            v-else
-            class="pt-4"
-          >
-            <v-row v-if="!toutesUnitesPreferencesSelectionnees">
-              <v-col cols="12">
-                <v-alert
-                  v-model="afficherErreur"
-                  type="error"
-                  variant="tonal"
-                  dismissible
-                >
-                  {{ texteMessageErreur }}
-                </v-alert>
-              </v-col>
-            </v-row>
-
-            <v-row>
-              <v-col
-                v-for="uniteId in Object.keys(dictChaisesReleve)"
-                :key="uniteId"
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <label>{{ getUnite(uniteId)?.nom ?? '' }}</label>
-                <br />
-                <v-radio-group v-model="selection[uniteId]">
-                  <v-radio
-                    v-for="chaise in dictChaisesReleve[uniteId]"
-                    :key="chaise.id"
-                    :label="chaise.nom"
-                    :value="chaise.id"
-                  />
-                </v-radio-group>
-              </v-col>
-            </v-row>
-          </div>
-        </div>
-      </template>
-    </csqcDialogue>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, onMounted, nextTick, watch, toRefs } from 'vue'
-  import { useDisplay } from 'vuetify'
-  import ChaisePreferenceItem from './chaiseItem.vue'
-  import csqcDialogue from '../csqcDialogue.vue'
-  import axios from '../../outils/appAxios'
-  import type { Unite } from '@/codev/modeles/unite'
-  import { useI18n } from 'vue-i18n'
-  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
-
-  interface Chaise {
-    id: number
-    nom: string
-  }
-  interface Preference {
-    uniteId: number
-    chaiseId: number
-  }
-
-  /** Props */
-  const props = defineProps<{
-    activerDivPreferences?: boolean
-    typeIntervenant: number
-    demandeId: number
-    formulaireId: number
-    urlBase: string
-    texteTitre?: string
-    texteInfo?: string
-    largeurModale?: number
-  }>()
-  const { typeIntervenant, demandeId, formulaireId, urlBase } = toRefs(props)
-  /** Emits */
-  const emit = defineEmits<{
-    (e: 'annuler'): void
-    (e: 'confirmer'): void
-  }>()
-
-  const { t } = useI18n({ useScope: 'global' })
-  const { xs } = useDisplay()
-  const isXs = computed(() => xs.value)
-
-  /** State */
-  const visible = ref(false)
-  const chargementEnCours = ref(false)
-  const afficherErreur = ref(false)
-  const unites = ref<Unite[]>([])
-  const preferences = ref<Preference[]>([])
-  const dictChaisesReleve = ref<Record<string, Chaise[]>>({})
-  const selection = ref<Record<string, number>>({})
-  const modeModifier = ref(false)
-
-  /** Textes */
-  const texteMessageErreur = computed(() => t('csqc.csqcChaise.erreur'))
-  const texteBoutonAnnuler = computed(() => t('csqc.bouton.annuler'))
-  const texteBoutonModifier = computed(() => t('csqc.bouton.modifier'))
-  const texteTitre = computed(() =>
-    props.texteTitre && props.texteTitre.length > 0 ? props.texteTitre : t('csqc.csqcChaise.titre'),
-  )
-  const info = computed(() =>
-    props.texteInfo && props.texteInfo.length > 0 ? props.texteInfo : t('csqc.csqcChaise.info'),
-  )
-
-  // Option A — ne recharger que si typeIntervenant change
-
-  const largeur = computed(() => props.largeurModale ?? 1200)
-  const activerDivPreferences = computed(() => props.activerDivPreferences ?? true)
-
-  function getUnite(uniteId: string) {
-    return unites.value.find((u: Unite) => String(u.id) === String(uniteId))
-  }
-
-  /*
-  function estPrefere(uniteId: string | number, chaiseId: number) {
-    return preferences.value.some(p => String(p.uniteId) === String(uniteId) && p.chaiseId === chaiseId)
-  }*/
-
-  /** Sélection par défaut à partir des préférences existantes */
-  function definitionSelectionDepart() {
-    for (const uniteId in dictChaisesReleve.value) {
-      const chaises = dictChaisesReleve.value[uniteId] ?? []
-      const pref = preferences.value.find(
-        p => String(p.uniteId) === String(uniteId) && chaises.some(chaise => chaise.id === p.chaiseId),
-      )
-      const chaiseIdDefaut = pref?.chaiseId ?? (chaises.length === 1 ? (chaises[0]?.id ?? -1) : -1)
-      selection.value[uniteId] = chaiseIdDefaut
-    }
-  }
-
-  /** Toutes les unités ont-elles une préférence sélectionnée ? */
-  const toutesUnitesPreferencesSelectionnees = computed(() => {
-    for (const uniteId in dictChaisesReleve.value) {
-      const chaises = dictChaisesReleve.value[uniteId] ?? []
-      const uniteOk = chaises.some(c => preferences.value.some(p => p.chaiseId === c.id))
-      if (!uniteOk) return false
-    }
-    return true
-  })
-
-  async function chargerUnites() {
-    const url = `${props.urlBase}/api/ComposantUI/Unites`
-    const unitesData = (await axios.getAxios().get<Unite[]>(url)) as unknown as Unite[]
-    unites.value = unitesData ?? []
-  }
-
-  async function chargementPreferences() {
-    chargementEnCours.value = true
-
-    // Chaises par unité
-    {
-      const data = (await axios
-        .getAxios()
-        .get<
-          Record<string, Chaise[]>
-        >(`${props.urlBase}/api/ComposantUI/ReleveDe/${props.typeIntervenant}/Demande/${props.demandeId}`)) as unknown as Record<
-        string,
-        Chaise[]
-      >
-      dictChaisesReleve.value = data ?? {}
-    }
-
-    // Préférences de l'usager
-    {
-      const data = (await axios
-        .getAxios()
-        .get<
-          Preference[]
-        >(`${props.urlBase}/api/ComposantUI/Preferences/${props.formulaireId}/TypeIntervenant/${props.typeIntervenant}`)) as unknown as Preference[]
-      preferences.value = (data ?? []).filter(Boolean)
-    }
-
-    definitionSelectionDepart()
-
-    // Sauvegarde immédiate pour les choix uniques (si demandé par ton flux)
-    await sauvegarder()
-
-    chargementEnCours.value = false
-  }
-
-  async function ouvrir() {
-    if (!activerDivPreferences.value) {
-      await chargementPreferences()
-      visible.value = true
-      return
-    }
-
-    if (!toutesUnitesPreferencesSelectionnees.value) {
-      visible.value = true
-      return
-    }
-
-    await ok()
-  }
-
-  function annuler() {
-    visible.value = false
-    modeModifier.value = false
-    emit('annuler')
-  }
-
-  function modifier() {
-    modeModifier.value = true
-    visible.value = true
-    modale.value?.ouvrir()
-  }
-
-  async function sauvegarder() {
-    for (const uniteId in dictChaisesReleve.value) {
-      const chaiseId = selection.value[uniteId]
-      if (!chaiseId || chaiseId <= 0) continue
-
-      const chaises = dictChaisesReleve.value[uniteId] ?? []
-      if (chaises.length === 0) continue
-
-      // Préférence existante pour CETTE unité ?
-      const prefIndexDeUnite = preferences.value.findIndex(p => chaises.some(c => c.id === p.chaiseId))
-
-      try {
-        const data = (await axios
-          .getAxios()
-          .put<Preference>(
-            `${props.urlBase}/api/ComposantUI/Preferences/${props.formulaireId}` +
-              `/Unite/${encodeURIComponent(uniteId)}` +
-              `/Chaise/${chaiseId}` +
-              `/TypeIntervenant/${props.typeIntervenant}`,
-          )) as unknown as Preference
-        const itemRecu = data as Preference
-
-        if (prefIndexDeUnite >= 0) {
-          // remplace l'élément à l'index
-          preferences.value.splice(prefIndexDeUnite, 1, itemRecu)
-        } else {
-          // ajoute un nouvel élément
-          preferences.value.push(itemRecu)
-        }
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  }
-  async function soumettre() {
-    modeModifier.value = false
-    await ouvrir()
-  }
-  /** Validation finale */
-  async function ok() {
-    await sauvegarder()
-
-    if (toutesUnitesPreferencesSelectionnees.value) {
-      if (!modeModifier.value) emit('confirmer')
-      visible.value = false
-      modeModifier.value = false
-    } else {
-      afficherErreur.value = true
-      await nextTick()
-    }
-    modale.value?.fermer()
-  }
-
-  onMounted(async () => {
-    chargementEnCours.value = true
-    await chargerUnites()
-    await chargementPreferences()
-    chargementEnCours.value = false
-  })
-
-  // si le type d'intervenant change
-  watch(typeIntervenant, async (nv, ov) => {
-    if (nv === ov) return
-    await rechargerPourTypeIntervenant()
-  })
-
-  async function rechargerPourTypeIntervenant() {
-    try {
-      chargementEnCours.value = true
-      preferences.value = []
-      dictChaisesReleve.value = {}
-      selection.value = {}
-      afficherErreur.value = false
-
-      // recharge les données dépendantes
-      await chargementPreferences()
-    } finally {
-      chargementEnCours.value = false
-    }
-  }
-
-  defineExpose({ soumettre })
-</script>
+<template>
+  <div class="pa-2 mt-2 mb-1 mr-1">
+    <!-- Affiche la carte récap si activée et qu'il y a des unités -->
+    <div v-if="activerDivPreferences && unites && unites.length > 0">
+      <v-card
+        width="375"
+        variant="outlined"
+      >
+        <v-card-text class="pt-0 mt-0">
+          <v-progress-linear
+            v-if="chargementEnCours"
+            indeterminate
+          />
+
+          <div
+            v-else
+            class="pt-2"
+          >
+            <div class="text-overline text-h6 mb-2">{{ texteTitre }}</div>
+
+            <div>
+              <v-list-item
+                v-for="uniteId in Object.keys(dictChaisesReleve)"
+                :key="uniteId"
+                class="mb-1"
+              >
+                <ChaisePreferenceItem
+                  :uniteId="Number(uniteId)"
+                  :preferences="preferences"
+                  :dictChaisesReleve="dictChaisesReleve"
+                  :unites="unites"
+                />
+              </v-list-item>
+            </div>
+          </div>
+        </v-card-text>
+
+        <v-card-actions>
+          <div class="flex-grow-1" />
+          <v-btn
+            v-if="!chargementEnCours"
+            rounded
+            variant="outlined"
+            size="small"
+            @click.stop="modifier"
+          >
+            {{ texteBoutonModifier }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </div>
+
+    <csqcDialogue
+      ref="modale"
+      :operation-en-cours="chargementEnCours"
+      :btn-ok-desactiver="chargementEnCours"
+      :titre="texteTitre"
+      :btn-annuler-texte="texteBoutonAnnuler"
+      @annuler="annuler"
+      @ok="ok"
+      ><template #content>
+        <div class="pt-2"></div>
+        <hr class="pt-0 mt-0 pl-0" />
+        <div class="pt-4">
+          <i>{{ info }}</i>
+
+          <v-progress-linear
+            v-if="chargementEnCours"
+            indeterminate
+          />
+
+          <div
+            v-else
+            class="pt-4"
+          >
+            <v-row v-if="!toutesUnitesPreferencesSelectionnees">
+              <v-col cols="12">
+                <v-alert
+                  v-model="afficherErreur"
+                  type="error"
+                  variant="tonal"
+                  dismissible
+                >
+                  {{ texteMessageErreur }}
+                </v-alert>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col
+                v-for="uniteId in Object.keys(dictChaisesReleve)"
+                :key="uniteId"
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <label>{{ getUnite(uniteId)?.nom ?? '' }}</label>
+                <br />
+                <v-radio-group v-model="selection[uniteId]">
+                  <v-radio
+                    v-for="chaise in dictChaisesReleve[uniteId]"
+                    :key="chaise.id"
+                    :label="chaise.nom"
+                    :value="chaise.id"
+                  />
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </div>
+        </div>
+      </template>
+    </csqcDialogue>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, nextTick, watch, toRefs } from 'vue'
+  import { useDisplay } from 'vuetify'
+  import ChaisePreferenceItem from './chaiseItem.vue'
+  import csqcDialogue from '../csqcDialogue.vue'
+  import axios from '../../outils/appAxios'
+  import type { Unite } from '@/codev/modeles/unite'
+  import { useI18n } from 'vue-i18n'
+  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
+
+  interface Chaise {
+    id: number
+    nom: string
+  }
+  interface Preference {
+    uniteId: number
+    chaiseId: number
+  }
+
+  /** Props */
+  const props = defineProps<{
+    activerDivPreferences?: boolean
+    typeIntervenant: number
+    demandeId: number
+    formulaireId: number
+    urlBase: string
+    texteTitre?: string
+    texteInfo?: string
+    largeurModale?: number
+  }>()
+  const { typeIntervenant, demandeId, formulaireId, urlBase } = toRefs(props)
+  /** Emits */
+  const emit = defineEmits<{
+    (e: 'annuler'): void
+    (e: 'confirmer'): void
+  }>()
+
+  const { t } = useI18n({ useScope: 'global' })
+  const { xs } = useDisplay()
+  const isXs = computed(() => xs.value)
+
+  /** State */
+  const visible = ref(false)
+  const chargementEnCours = ref(false)
+  const afficherErreur = ref(false)
+  const unites = ref<Unite[]>([])
+  const preferences = ref<Preference[]>([])
+  const dictChaisesReleve = ref<Record<string, Chaise[]>>({})
+  const selection = ref<Record<string, number>>({})
+  const modeModifier = ref(false)
+
+  /** Textes */
+  const texteMessageErreur = computed(() => t('csqc.csqcChaise.erreur'))
+  const texteBoutonAnnuler = computed(() => t('csqc.bouton.annuler'))
+  const texteBoutonModifier = computed(() => t('csqc.bouton.modifier'))
+  const texteTitre = computed(() =>
+    props.texteTitre && props.texteTitre.length > 0 ? props.texteTitre : t('csqc.csqcChaise.titre'),
+  )
+  const info = computed(() =>
+    props.texteInfo && props.texteInfo.length > 0 ? props.texteInfo : t('csqc.csqcChaise.info'),
+  )
+
+  // Option A — ne recharger que si typeIntervenant change
+
+  const largeur = computed(() => props.largeurModale ?? 1200)
+  const activerDivPreferences = computed(() => props.activerDivPreferences ?? true)
+
+  function getUnite(uniteId: string) {
+    return unites.value.find((u: Unite) => String(u.id) === String(uniteId))
+  }
+
+  /*
+  function estPrefere(uniteId: string | number, chaiseId: number) {
+    return preferences.value.some(p => String(p.uniteId) === String(uniteId) && p.chaiseId === chaiseId)
+  }*/
+
+  /** Sélection par défaut à partir des préférences existantes */
+  function definitionSelectionDepart() {
+    for (const uniteId in dictChaisesReleve.value) {
+      const chaises = dictChaisesReleve.value[uniteId] ?? []
+      const pref = preferences.value.find(
+        p => String(p.uniteId) === String(uniteId) && chaises.some(chaise => chaise.id === p.chaiseId),
+      )
+      const chaiseIdDefaut = pref?.chaiseId ?? (chaises.length === 1 ? (chaises[0]?.id ?? -1) : -1)
+      selection.value[uniteId] = chaiseIdDefaut
+    }
+  }
+
+  /** Toutes les unités ont-elles une préférence sélectionnée ? */
+  const toutesUnitesPreferencesSelectionnees = computed(() => {
+    for (const uniteId in dictChaisesReleve.value) {
+      const chaises = dictChaisesReleve.value[uniteId] ?? []
+      const uniteOk = chaises.some(c => preferences.value.some(p => p.chaiseId === c.id))
+      if (!uniteOk) return false
+    }
+    return true
+  })
+
+  async function charger() {
+    await chargerUnites()
+    await chargementPreferences()
+  }
+
+  async function chargerUnites() {
+    const url = `${props.urlBase}/api/ComposantUI/Unites`
+    const unitesData = (await axios.getAxios().get<Unite[]>(url)) as unknown as Unite[]
+    unites.value = unitesData ?? []
+  }
+
+  async function chargementPreferences() {
+    chargementEnCours.value = true
+
+    // Chaises par unité
+    {
+      const data = (await axios
+        .getAxios()
+        .get<
+          Record<string, Chaise[]>
+        >(`${props.urlBase}/api/ComposantUI/ReleveDe/${props.typeIntervenant}/Demande/${props.demandeId}`)) as unknown as Record<
+        string,
+        Chaise[]
+      >
+      dictChaisesReleve.value = data ?? {}
+    }
+
+    // Préférences de l'usager
+    {
+      const data = (await axios
+        .getAxios()
+        .get<
+          Preference[]
+        >(`${props.urlBase}/api/ComposantUI/Preferences/${props.formulaireId}/TypeIntervenant/${props.typeIntervenant}`)) as unknown as Preference[]
+      preferences.value = (data ?? []).filter(Boolean)
+    }
+
+    definitionSelectionDepart()
+
+    // Sauvegarde immédiate pour les choix uniques (si demandé par ton flux)
+    await sauvegarder()
+
+    chargementEnCours.value = false
+  }
+
+  async function ouvrir() {
+    if (!activerDivPreferences.value) {
+      await chargementPreferences()
+      visible.value = true
+      return
+    }
+
+    if (!toutesUnitesPreferencesSelectionnees.value) {
+      visible.value = true
+      return
+    }
+
+    await ok()
+  }
+
+  function annuler() {
+    visible.value = false
+    modeModifier.value = false
+    emit('annuler')
+  }
+
+  function modifier() {
+    modeModifier.value = true
+    visible.value = true
+    modale.value?.ouvrir()
+  }
+
+  async function sauvegarder() {
+    for (const uniteId in dictChaisesReleve.value) {
+      const chaiseId = selection.value[uniteId]
+      if (!chaiseId || chaiseId <= 0) continue
+
+      const chaises = dictChaisesReleve.value[uniteId] ?? []
+      if (chaises.length === 0) continue
+
+      // Préférence existante pour CETTE unité ?
+      const prefIndexDeUnite = preferences.value.findIndex(p => chaises.some(c => c.id === p.chaiseId))
+
+      try {
+        const data = (await axios
+          .getAxios()
+          .put<Preference>(
+            `${props.urlBase}/api/ComposantUI/Preferences/${props.formulaireId}` +
+              `/Unite/${encodeURIComponent(uniteId)}` +
+              `/Chaise/${chaiseId}` +
+              `/TypeIntervenant/${props.typeIntervenant}`,
+          )) as unknown as Preference
+        const itemRecu = data as Preference
+
+        if (prefIndexDeUnite >= 0) {
+          // remplace l'élément à l'index
+          preferences.value.splice(prefIndexDeUnite, 1, itemRecu)
+        } else {
+          // ajoute un nouvel élément
+          preferences.value.push(itemRecu)
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+  async function soumettre() {
+    modeModifier.value = false
+    await ouvrir()
+  }
+  /** Validation finale */
+  async function ok() {
+    await sauvegarder()
+
+    if (toutesUnitesPreferencesSelectionnees.value) {
+      if (!modeModifier.value) emit('confirmer')
+      visible.value = false
+      modeModifier.value = false
+    } else {
+      afficherErreur.value = true
+      await nextTick()
+    }
+    modale.value?.fermer()
+  }
+
+  onMounted(async () => {
+    chargementEnCours.value = true
+    await charger()
+    chargementEnCours.value = false
+  })
+
+  // si le type d'intervenant change
+  watch(typeIntervenant, async (nv, ov) => {
+    if (nv === ov) return
+    await rechargerPourTypeIntervenant()
+  })
+
+  async function rechargerPourTypeIntervenant() {
+    try {
+      chargementEnCours.value = true
+      preferences.value = []
+      dictChaisesReleve.value = {}
+      selection.value = {}
+      afficherErreur.value = false
+
+      // recharge les données dépendantes
+      await chargementPreferences()
+    } finally {
+      chargementEnCours.value = false
+    }
+  }
+
+  defineExpose({ charger, soumettre })
+</script>

package/composants/csqcCodeBudgetaireGenerique.vue

@@ -37,296 +37,300 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, nextTick, watch } from 'vue'
-  import type { VForm } from 'vuetify/components'
-
-  const emit = defineEmits<{
-    'update:modelValue': [string | null]
-    'update:codeBudgetairesProp': [CodeBudgetaireItem[]]
-    'update:valide': [boolean]
-  }>()
-  type CodeBudgetaireItem = string | [string, string]
-
-  const props = withDefaults(
-    defineProps<{
-      codeBudgetairesProp: CodeBudgetaireItem[]
-      modelValue: string | null
-      afficherHint?: boolean
-      regleMessageErreur: string
-      format?: string
-      activerExtension?: boolean
-      reglesSupp?: ((v: string) => true | string)[]
-    }>(),
-    {
-      afficherHint: false,
-      format: '999-9-99999-999',
-      activerExtension: false,
-      reglesSupp: () => [],
-    },
-  )
+      import { ref, computed, onMounted, nextTick, watch } from 'vue'
+      import type { VForm } from 'vuetify/components'
+
+      const emit = defineEmits<{
+        'update:modelValue': [string | null]
+        'update:codeBudgetairesProp': [CodeBudgetaireItem[]]
+        'update:valide': [boolean]
+      }>()
+      type CodeBudgetaireItem = string | [string, string]
+
+      const props = withDefaults(
+        defineProps<{
+          codeBudgetairesProp: CodeBudgetaireItem[]
+          modelValue: string | null
+          afficherHint?: boolean
+          regleMessageErreur: string
+          format?: string
+          activerExtension?: boolean
+          reglesSupp?: ((v: string) => true | string)[]
+        }>(),
+        {
+          afficherHint: false,
+          format: '999-9-99999-999',
+          activerExtension: false,
+          reglesSupp: () => [],
+        },
+      )
+
+      const formValide = ref(false)
+      const form = ref<VForm | null>(null)
+      const codeBudgetaire = ref(props.modelValue ?? '')
+      const derniereValeurSauvegardee = ref<string | null>(null)
+      const format = props.format
+      const activerExtension = props.activerExtension
+
+      onMounted(() => {
+        derniereValeurSauvegardee.value = codeBudgetaire.value
+      })
 
-  const formValide = ref(false)
-  const form = ref<VForm | null>(null)
-  const codeBudgetaire = ref(props.modelValue ?? '')
-  const derniereValeurSauvegardee = ref<string | null>(null)
-  const format = props.format
-  const activerExtension = props.activerExtension
-
-  onMounted(() => {
-    derniereValeurSauvegardee.value = codeBudgetaire.value
-  })
-
-  const itemsCombobox = computed(() => {
-    return props.codeBudgetairesProp.map(item => {
-      if (typeof item === 'string') {
-        return {
-          code: item,
-          nom: '', // pas de nom
-        }
-      }
+      const itemsCombobox = computed(() => {
+        return props.codeBudgetairesProp.map(item => {
+          if (typeof item === 'string') {
+            return {
+              code: item,
+              nom: '', // pas de nom
+            }
+          }
 
-      const [code, nomBrut] = item
-      const nom = (nomBrut ?? '').toString().trim()
+          const [code, nomBrut] = item
+          const nom = (nomBrut ?? '').toString().trim()
 
-      return { code, nom }
-    })
-  })
+          return { code, nom }
+        })
+      })
 
-  const placeholder = computed(() => {
-    const base = format.replace(/9/g, '0')
-    const extension = activerExtension ? '-XXX/XXX' : ''
-    return base + extension
-  })
+      const placeholder = computed(() => {
+        const base = format.replace(/9/g, '0')
+        const extension = activerExtension ? '-XXX/XXX' : ''
+        return base + extension
+      })
 
-  const estValide = computed(() => {
-    const val = codeBudgetaire.value?.toUpperCase().trim() || ''
-    const base = val.slice(0, 15)
-    const extension = val.slice(15)
+      const estValide = computed(() => {
+        const val = codeBudgetaire.value?.toUpperCase().trim() || ''
+        const base = val.slice(0, 15)
+        const extension = val.slice(15)
 
-    if (!/^\d{3}-\d{1}-\d{5}-\d{3}$/.test(base)) return false
+        if (!/^\d{3}-\d{1}-\d{5}-\d{3}$/.test(base)) return false
 
-    if (!activerExtension) return val.length === 15
+        if (!activerExtension) return val.length === 15
+
+        if (val.length === 15) return true
+        if (val.length !== 22) return false
+        if (extension.length !== 7) return false
+
+        if (extension[3] !== '/') return false
+        if (!/^[A-Z0-9/]$/i.test(extension[0]!)) return false
+
+        const alphanumAt = [1, 2, 4, 5, 6]
+        return alphanumAt.every(i => /^[A-Z0-9]$/i.test(extension[i]!))
+      })
+
+      //  Règles Vuetify combinées (interne + supplémentaires)
+      const reglesVuetify = computed(() => [
+        // règle interne
+        () => (estValide.value ? true : props.regleMessageErreur),
+
+        // règles supplémentaires venant du parent
+        ...props.reglesSupp.map(rule => {
+          return () => rule(codeBudgetaire.value) // on passe la valeur formatée
+        }),
+      ])
+
+      //  Validité globale du composant (interne + toutes les règles supp)
+      const estValideComplet = computed(() => {
+        if (!estValide.value) return false
+        return props.reglesSupp.every(rule => rule(codeBudgetaire.value) === true)
+      })
 
-    if (val.length === 15) return true
-    if (val.length !== 22) return false
-    if (extension.length !== 7) return false
+      const caractereAutorises = (e: KeyboardEvent) => {
+        if (e.ctrlKey || e.metaKey) return
 
-    if (extension[3] !== '/') return false
-    if (!/^[A-Z0-9/]$/i.test(extension[0]!)) return false
+        const touchesSpecifiques = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End']
+        if (touchesSpecifiques.includes(e.key)) return
 
-    const alphanumAt = [1, 2, 4, 5, 6]
-    return alphanumAt.every(i => /^[A-Z0-9]$/i.test(extension[i]!))
-  })
+        const input = e.target as HTMLInputElement
+        let position = input.selectionStart ?? 0
 
-  //  Règles Vuetify combinées (interne + supplémentaires)
-  const reglesVuetify = computed(() => [
-    // règle interne
-    () => (estValide.value ? true : props.regleMessageErreur),
+        // Gestion de la partie de base (15 premiers caractères)
+        if (position < 15) {
+          if (!/^\d$/.test(e.key)) {
+            e.preventDefault()
+            return
+          }
 
-    // règles supplémentaires venant du parent
-    ...props.reglesSupp.map(rule => {
-      return () => rule(codeBudgetaire.value) // on passe la valeur formatée
-    }),
-  ])
+          // Insérer chiffre et auto-ajout des tirets
+          e.preventDefault()
 
-  //  Validité globale du composant (interne + toutes les règles supp)
-  const estValideComplet = computed(() => {
-    if (!estValide.value) return false
-    return props.reglesSupp.every(rule => rule(codeBudgetaire.value) === true)
-  })
+          const value = codeBudgetaire.value.replace(/-/g, '')
+          const clean = value.slice(0, 12) + e.key
 
-  const caractereAutorises = (e: KeyboardEvent) => {
-    if (e.ctrlKey || e.metaKey) return
+          let formatted = ''
+          if (clean.length > 0) formatted += clean.slice(0, 3)
+          if (clean.length > 3) formatted += '-' + clean.slice(3, 4)
+          if (clean.length > 4) formatted += '-' + clean.slice(4, 9)
+          if (clean.length > 9) formatted += '-' + clean.slice(9, 12)
 
-    const touchesSpecifiques = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End']
-    if (touchesSpecifiques.includes(e.key)) return
+          codeBudgetaire.value = formatted.slice(0, 15)
 
-    const input = e.target as HTMLInputElement
-    let position = input.selectionStart ?? 0
+          nextTick(() => {
+            const newPos = codeBudgetaire.value.length
+            input.selectionStart = input.selectionEnd = newPos
+          })
 
-    // Gestion de la partie de base (15 premiers caractères)
-    if (position < 15) {
-      if (!/^\d$/.test(e.key)) {
+          return
+        }
+
+        // --- Gestion de l'extension ---
+        if (!activerExtension || position >= 22 || codeBudgetaire.value.length >= 22) {
+          e.preventDefault()
+          return
+        }
+
+        const extensionPos = position - 15
+
+        // Règle 1 : extension[0] = alphanum ou /
+        if (extensionPos === 0) {
+          if (!/^[A-Z0-9/]$/i.test(e.key)) {
+            e.preventDefault()
+            return
+          }
+          return
+        }
+
+        // Règle 2 : extension[1,2,4,5,6] = alphanum
+        if ([1, 2, 4, 5, 6].includes(extensionPos)) {
+          if (!/^[A-Z0-9]$/i.test(e.key)) {
+            e.preventDefault()
+            return
+          }
+          return
+        }
+
+        // Règle 3 : slash automatique à position 3 (index 18)
+        if (extensionPos === 3) {
+          e.preventDefault()
+          const before = codeBudgetaire.value.slice(0, position)
+          const after = codeBudgetaire.value.slice(position)
+          codeBudgetaire.value = before + '/' + after
+          nextTick(() => {
+            input.selectionStart = input.selectionEnd = position + 1
+          })
+          return
+        }
+
+        // Tout autre cas = bloqué
         e.preventDefault()
-        return
       }
 
-      // Insérer chiffre et auto-ajout des tirets
-      e.preventDefault()
+      const formaterCodeBudgetaire = (valeur: string): string => {
+        if (!valeur) return ''
 
-      const value = codeBudgetaire.value.replace(/-/g, '')
-      const clean = value.slice(0, 12) + e.key
+        const upper = valeur.toUpperCase().replace(/[^A-Z0-9/]/g, '')
+        const chiffres = upper.replace(/[^0-9]/g, '').slice(0, 12)
 
-      let formatted = ''
-      if (clean.length > 0) formatted += clean.slice(0, 3)
-      if (clean.length > 3) formatted += '-' + clean.slice(3, 4)
-      if (clean.length > 4) formatted += '-' + clean.slice(4, 9)
-      if (clean.length > 9) formatted += '-' + clean.slice(9, 12)
+        let base = ''
+        if (chiffres.length > 0) base += chiffres.slice(0, 3)
+        if (chiffres.length > 3) base += '-' + chiffres.slice(3, 4)
+        if (chiffres.length > 4) base += '-' + chiffres.slice(4, 9)
+        if (chiffres.length > 9) base += '-' + chiffres.slice(9, 12)
 
-      codeBudgetaire.value = formatted.slice(0, 15)
+        if (!activerExtension || base.length < 15) return base
 
-      nextTick(() => {
-        const newPos = codeBudgetaire.value.length
-        input.selectionStart = input.selectionEnd = newPos
-      })
+        const reste = upper.slice(chiffres.length).replace(/[^A-Z0-9/]/gi, '')
 
-      return
-    }
+        // Extraire les 7 premiers caractères restants pour l’extension
+        let ext = reste.slice(0, 7).split('')
 
-    // --- Gestion de l'extension ---
-    if (!activerExtension || position >= 22 || codeBudgetaire.value.length >= 22) {
-      e.preventDefault()
-      return
-    }
+        // Ne garder que le premier slash s’il est à l’index 0 ou 3
+        ext = ext.filter((c, i) => {
+          if (c !== '/') return true
+          return i === 0 || i === 3
+        })
 
-    const extensionPos = position - 15
+        // Enlever les slash non autorisés
+        ext = ext.map((c, i) => {
+          if (c === '/' && i !== 0 && i !== 3) return ''
+          if (c !== '/' && !/^[A-Z0-9]$/i.test(c)) return ''
+          return c
+        })
 
-    // Règle 1 : extension[0] = alphanum ou /
-    if (extensionPos === 0) {
-      if (!/^[A-Z0-9/]$/i.test(e.key)) {
-        e.preventDefault()
-        return
+        // Forcer le slash à la 4e position
+        if (ext.length > 3) {
+          ext[3] = '/'
+        }
+
+        // Réduire à 7 caractères
+        ext = ext.slice(0, 7)
+
+        return (base + ext.join('')).slice(0, 22)
       }
-      return
-    }
 
-    // Règle 2 : extension[1,2,4,5,6] = alphanum
-    if ([1, 2, 4, 5, 6].includes(extensionPos)) {
-      if (!/^[A-Z0-9]$/i.test(e.key)) {
+      const gererPaste = (e: ClipboardEvent) => {
         e.preventDefault()
-        return
+        const clipboardData = e.clipboardData
+        if (!clipboardData) return
+        let pasted = clipboardData.getData('text') || ''
+        codeBudgetaire.value = formaterCodeBudgetaire(pasted)
+
+        setTimeout(() => {
+          const input = e.target as HTMLInputElement
+          input.selectionStart = input.selectionEnd = codeBudgetaire.value.length
+        }, 0)
+      }
+
+      const sauvegarder = () => {
+        codeBudgetaire.value = formaterCodeBudgetaire(codeBudgetaire.value)
+
+        if (!estValideComplet.value) return
+        if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
+
+        const codeNormalise = codeBudgetaire.value.trim().toUpperCase()
+
+        const existe = props.codeBudgetairesProp.some(item => {
+          const code = typeof item === 'string' ? item : item[0]
+          return code.trim().toUpperCase() === codeNormalise
+        })
+
+        if (!existe) {
+          const nouvelleListe = [...props.codeBudgetairesProp, codeBudgetaire.value]
+          emit('update:codeBudgetairesProp', nouvelleListe)
+        }
+
+        derniereValeurSauvegardee.value = codeBudgetaire.value
+        emit('update:modelValue', codeBudgetaire.value)
+      }
+
+      const extraireCode = (val: unknown): string => {
+        if (val == null) return ''
+        if (typeof val === 'string') return val
+
+        // Cas où Vuetify enverrait { code, label }
+        if (typeof val === 'object' && 'code' in (val as Record<string, unknown>)) {
+          const obj = val as { code?: unknown }
+          return typeof obj.code === 'string' ? obj.code : String(obj.code ?? '')
+        }
+
+        return String(val)
       }
-      return
-    }
-
-    // Règle 3 : slash automatique à position 3 (index 18)
-    if (extensionPos === 3) {
-      e.preventDefault()
-      const before = codeBudgetaire.value.slice(0, position)
-      const after = codeBudgetaire.value.slice(position)
-      codeBudgetaire.value = before + '/' + after
-      nextTick(() => {
-        input.selectionStart = input.selectionEnd = position + 1
-      })
-      return
-    }
 
-    // Tout autre cas = bloqué
-    e.preventDefault()
-  }
+      const gererChangement = (val: unknown) => {
+        const code = extraireCode(val)
+        codeBudgetaire.value = formaterCodeBudgetaire(code)
 
-  const formaterCodeBudgetaire = (valeur: string): string => {
-    if (!valeur) return ''
+        const valeurFormatee = codeBudgetaire.value.trim().toUpperCase()
 
-    const upper = valeur.toUpperCase().replace(/[^A-Z0-9/]/g, '')
-    const chiffres = upper.replace(/[^0-9]/g, '').slice(0, 12)
-
-    let base = ''
-    if (chiffres.length > 0) base += chiffres.slice(0, 3)
-    if (chiffres.length > 3) base += '-' + chiffres.slice(3, 4)
-    if (chiffres.length > 4) base += '-' + chiffres.slice(4, 9)
-    if (chiffres.length > 9) base += '-' + chiffres.slice(9, 12)
-
-    if (!activerExtension || base.length < 15) return base
-
-    const reste = upper.slice(chiffres.length).replace(/[^A-Z0-9/]/gi, '')
-
-    // Extraire les 7 premiers caractères restants pour l’extension
-    let ext = reste.slice(0, 7).split('')
-
-    // Ne garder que le premier slash s’il est à l’index 0 ou 3
-    ext = ext.filter((c, i) => {
-      if (c !== '/') return true
-      return i === 0 || i === 3
-    })
-
-    // Enlever les slash non autorisés
-    ext = ext.map((c, i) => {
-      if (c === '/' && i !== 0 && i !== 3) return ''
-      if (c !== '/' && !/^[A-Z0-9]$/i.test(c)) return ''
-      return c
-    })
-
-    // Forcer le slash à la 4e position
-    if (ext.length > 3) {
-      ext[3] = '/'
-    }
-
-    // Réduire à 7 caractères
-    ext = ext.slice(0, 7)
-
-    return (base + ext.join('')).slice(0, 22)
-  }
-
-  const gererPaste = (e: ClipboardEvent) => {
-    e.preventDefault()
-    const clipboardData = e.clipboardData
-    if (!clipboardData) return
-    let pasted = clipboardData.getData('text') || ''
-    codeBudgetaire.value = formaterCodeBudgetaire(pasted)
-
-    setTimeout(() => {
-      const input = e.target as HTMLInputElement
-      input.selectionStart = input.selectionEnd = codeBudgetaire.value.length
-    }, 0)
-  }
-
-  const sauvegarder = () => {
-    codeBudgetaire.value = formaterCodeBudgetaire(codeBudgetaire.value)
-
-    if (!estValideComplet.value) return
-    if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
-
-    const codeNormalise = codeBudgetaire.value.trim().toUpperCase()
-
-    const existe = props.codeBudgetairesProp.some(item => {
-      const code = typeof item === 'string' ? item : item[0]
-      return code.trim().toUpperCase() === codeNormalise
-    })
-
-    if (!existe) {
-      const nouvelleListe = [...props.codeBudgetairesProp, codeBudgetaire.value]
-      emit('update:codeBudgetairesProp', nouvelleListe)
-    }
-
-    derniereValeurSauvegardee.value = codeBudgetaire.value
-    emit('update:modelValue', codeBudgetaire.value)
-  }
-
-  const extraireCode = (val: unknown): string => {
-    if (val == null) return ''
-    if (typeof val === 'string') return val
-
-    // Cas où Vuetify enverrait { code, label }
-    if (typeof val === 'object' && 'code' in (val as Record<string, unknown>)) {
-      const obj = val as { code?: unknown }
-      return typeof obj.code === 'string' ? obj.code : String(obj.code ?? '')
-    }
-
-    return String(val)
-  }
-
-  const gererChangement = (val: unknown) => {
-    const code = extraireCode(val)
-    codeBudgetaire.value = formaterCodeBudgetaire(code)
-
-    const valeurFormatee = codeBudgetaire.value.trim().toUpperCase()
-
-    const estDansListe = props.codeBudgetairesProp.some(item => {
-      const codeItem = typeof item === 'string' ? item : item[0]
-      return codeItem.trim().toUpperCase() === valeurFormatee
-    })
-
-    if (
-      estDansListe &&
-      valeurFormatee !== (derniereValeurSauvegardee.value ?? '').toUpperCase() &&
-      estValideComplet.value
-    ) {
-      sauvegarder()
-    }
-  }
-
-  watch(estValideComplet, value => {
-    emit('update:valide', value)
-  })
+        const estDansListe = props.codeBudgetairesProp.some(item => {
+          const codeItem = typeof item === 'string' ? item : item[0]
+          return codeItem.trim().toUpperCase() === valeurFormatee
+        })
+
+        if (
+          estDansListe &&
+          valeurFormatee !== (derniereValeurSauvegardee.value ?? '').toUpperCase() &&
+          estValideComplet.value
+        ) {
+          sauvegarder()
+        }
+      }
+
+  watch(
+    () => codeBudgetaire.value,
+    () => {
+      emit('update:valide', estValideComplet.value)
+    },
+    { immediate: true },
+  )
 </script>

package/package.json

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