codevdesign 0.0.58 → 0.0.60

package/composants/codeBudgetaireGenerique.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <v-form
+      ref="form"
+      v-model="formValide"
+      @submit.prevent
+    >
+      <v-combobox
+        v-model="codeBudgetaire"
+        :items="codeBudgetairesProp"
+        :label="label"
+        persistent-hint
+        variant="outlined"
+        hide-details="auto"
+        :error="!estValide"
+        :rules="[v => (estValide ? true : regleMessageErreur)]"
+        :disabled="disable"
+        :density="density"
+        :hint="placeholder"
+        :max-width="maxWidth || '100%'"
+        :min-width="minWidth || '100%'"
+        @blur="sauvegarder"
+        @keydown.enter="sauvegarder"
+        @keydown="caractereAutorises"
+        @update:modelValue="gererChangement"
+        @paste="gererPaste"
+      />
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, nextTick } from 'vue'
+  import { VForm } from 'vuetify/components'
+
+  const emit = defineEmits(['update:modelValue', 'update:codeBudgetairesProp'])
+
+  const props = withDefaults(
+    defineProps<{
+      codeBudgetairesProp: string[]
+      modelValue: string | null
+      label: string
+      disable: boolean
+      regleMessageErreur: string
+      density?: 'default' | 'comfortable' | 'compact'
+      maxWidth?: string | number
+      minWidth?: string | number
+      format?: string
+      activerExtension?: boolean
+    }>(),
+    {
+      format: '999-9-99999-999',
+      activerExtension: false,
+    },
+  )
+
+  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
+
+  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 (!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]))
+  })
+
+  const caractereAutorises = (e: KeyboardEvent) => {
+    if (e.ctrlKey || e.metaKey) return
+
+    const touchesSpecifiques = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End']
+    if (touchesSpecifiques.includes(e.key)) return
+
+    const input = e.target as HTMLInputElement
+    let position = input.selectionStart ?? 0
+
+    // Gestion de la partie de base (15 premiers caractères)
+    if (position < 15) {
+      if (!/^\d$/.test(e.key)) {
+        e.preventDefault()
+        return
+      }
+
+      // Insérer chiffre et auto-ajout des tirets
+      e.preventDefault()
+
+      const value = codeBudgetaire.value.replace(/-/g, '')
+      const clean = value.slice(0, 12) + e.key
+
+      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)
+
+      codeBudgetaire.value = formatted.slice(0, 15)
+
+      nextTick(() => {
+        const newPos = codeBudgetaire.value.length
+        input.selectionStart = input.selectionEnd = newPos
+      })
+
+      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()
+  }
+
+  const formaterCodeBudgetaire = (valeur: string): string => {
+    if (!valeur) return ''
+
+    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
+    const slashIndices = ext.map((c, i) => (c === '/' ? i : -1)).filter(i => i !== -1)
+    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 (!estValide.value) return
+    if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
+
+    const existe = props.codeBudgetairesProp.some(
+      item => item.trim().toUpperCase() === codeBudgetaire.value.trim().toUpperCase(),
+    )
+
+    if (!existe) {
+      const nouvelleListe = [...props.codeBudgetairesProp, codeBudgetaire.value]
+      emit('update:codeBudgetairesProp', nouvelleListe)
+    }
+
+    derniereValeurSauvegardee.value = codeBudgetaire.value
+    emit('update:modelValue', codeBudgetaire.value)
+  }
+
+  const gererChangement = (val: string) => {
+    codeBudgetaire.value = formaterCodeBudgetaire(val)
+
+    const valeurFormatee = codeBudgetaire.value
+    const estDansListe = props.codeBudgetairesProp.includes(valeurFormatee)
+
+    if (estDansListe && valeurFormatee !== derniereValeurSauvegardee.value && estValide.value) {
+      sauvegarder()
+    }
+  }
+
+  onMounted(() => {
+    derniereValeurSauvegardee.value = codeBudgetaire.value
+  })
+
+  const placeholder = computed(() => {
+    const base = format.replace(/9/g, '0')
+    const extension = activerExtension ? '-XXX/XXX' : ''
+    return base + extension
+  })
+</script>

package/index.ts

@@ -9,6 +9,7 @@ import pivFooter from './composants/gabarit/pivPiedPage.vue'
 import csqcMenu from './composants/gabarit/csqcMenu.vue'
 import csqcConfirmation from './composants/csqcConfirmation.vue'
 import csqcTable from './composants/csqcTable/csqcTable.vue'
+import csqcCodeBudgetaire from './composants/codeBudgetaireGenerique.vue'
 //import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
 import csqcAide from './composants/csqcAide.vue'
 import csqcEntete from './composants/csqcEntete.vue'
@@ -45,6 +46,7 @@ export {
   csqcTable,
   csqcTiroir,
   csqcMenu,
+  csqcCodeBudgetaire,
   //csqcChaise,
   pivFooter,
   pivEntete,

package/package.json

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