codevdesign 1.0.33 → 1.0.34

package/composants/csqcCodeBudgetaireGenerique.vue

@@ -1,336 +0,0 @@
-<template>
-  <div>
-    <v-form
-      ref="form"
-      v-model="formValide"
-      @submit.prevent
-    >
-      <v-combobox
-        v-model="codeBudgetaire"
-        :items="itemsCombobox"
-        item-value="code"
-        item-title="code"
-        :return-object="false"
-        v-bind="$attrs"
-        persistent-hint
-        variant="outlined"
-        hide-details="auto"
-        :error="!estValideComplet"
-        :rules="reglesVuetify"
-        :hint="afficherHint ? placeholder : ''"
-        @blur="sauvegarder"
-        @keydown.enter="sauvegarder"
-        @keydown="caractereAutorises"
-        @update:modelValue="gererChangement"
-        @paste="gererPaste"
-      >
-        <template #item="{ props, item }">
-          <v-list-item
-            v-bind="props"
-            :title="item.raw.nom || item.raw.code"
-            :subtitle="item.raw.nom ? item.raw.code : undefined"
-          />
-        </template>
-      </v-combobox>
-    </v-form>
-  </div>
-</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: () => [],
-        },
-      )
-
-      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 [code, nomBrut] = item
-          const nom = (nomBrut ?? '').toString().trim()
-
-          return { code, nom }
-        })
-      })
-
-      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)
-
-        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]!))
-      })
-
-      //  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)
-      })
-
-      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
-        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(
-    () => codeBudgetaire.value,
-    () => {
-      emit('update:valide', estValideComplet.value)
-    },
-    { immediate: true },
-  )
-</script>

package/composants/csqcConfirmation.vue

@@ -1,75 +0,0 @@
-<template>
-  <csqcDialogue
-    ref="modale"
-    :titre="props.titre"
-    :operation-en-cours="operationEnCours"
-    activator="supprimer"
-    v-bind="$attrs"
-    :largeur="props.largeur"
-    @ok="confirmer"
-    @annuler="annuler"
-  >
-    <v-form
-      ref="form"
-      @submit.prevent
-    >
-      <v-row>
-        <v-col
-          cols="12"
-          class="pa-0 ma-0"
-        >
-          <span v-html="texte"></span>
-        </v-col>
-      </v-row>
-    </v-form>
-  </csqcDialogue>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import csqcDialogue from './csqcDialogue.vue'
-
-  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
-  const utilisateurATermine = ref(false)
-  const reponse = ref(false)
-  const texte = ref('')
-  const modeAlerte = ref(false)
-
-  const props = defineProps({
-    operationEnCours: { type: Boolean, default: false },
-    titre: { type: String, default: '' },
-    largeur: { type: String, default: '525px' },
-  })
-
-  const ouvrir = async (message: string, modeAlerteParam: boolean = false) => {
-    texte.value = message
-    modeAlerte.value = modeAlerteParam
-    utilisateurATermine.value = false
-    modale.value?.ouvrir()
-
-    while (!utilisateurATermine.value) {
-      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
-    }
-
-    return reponse.value
-  }
-
-  const confirmer = (): void => {
-    reponse.value = true
-    utilisateurATermine.value = true
-
-    if (modeAlerte.value) fermer()
-  }
-
-  const annuler = (): void => {
-    reponse.value = false
-    utilisateurATermine.value = true
-    fermer()
-  }
-
-  const fermer = (): void => {
-    modale.value?.fermer()
-  }
-
-  defineExpose({ ouvrir, fermer })
-</script>

package/composants/csqcDate.vue

@@ -1,57 +0,0 @@
-<template>
-  <v-date-input
-    v-model="dateValeur"
-    v-bind="$attrs"
-    input-format="yyyy-MM-dd"
-    variant="outlined"
-    prepend-icon=""
-    prepend-inner-icon="$calendar"
-    density="comfortable"
-    @update:model-value="formatDate"
-  ></v-date-input>
-</template>
-
-<script setup lang="ts">
-  import { ref, watch } from 'vue'
-  import { VDateInput } from 'vuetify/labs/VDateInput'
-
-  const props = withDefaults(
-    defineProps<{
-      modelValue: string | Date | null
-    }>(),
-    {},
-  )
-
-  const emit = defineEmits(['update:modelValue'])
-  const dateValeur = ref<Date | string | null>(props.modelValue)
-
-  const formatDate = (date: Date | string | null) => {
-    if (date == null) {
-      emit('update:modelValue', null)
-      return
-    }
-
-    if (typeof date === 'string') {
-      emit('update:modelValue', props.modelValue)
-      return
-    }
-
-    //Transformer la date en string
-    const d = new Date(date)
-    const yyyy = d.getFullYear()
-    const mm = String(d.getMonth() + 1).padStart(2, '0')
-    const dd = String(d.getDate()).padStart(2, '0')
-    const formatte = `${yyyy}-${mm}-${dd}`
-    dateValeur.value = formatte
-
-    emit('update:modelValue', dateValeur.value)
-  }
-
-  // Synchronise les props externes avec l'état interne
-  watch(
-    () => props.modelValue,
-    nouvelle => {
-      dateValeur.value = nouvelle
-    },
-  )
-</script>

package/composants/csqcDialogue.vue

@@ -1,118 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    v-bind="$attrs"
-    class="pa-0 ma-0"
-    :width="largeur"
-    :fullscreen="display.xs.value"
-    max-width="650"
-    :persistent="props.persistant"
-    @keydown.esc="!persistant ? annuler : ''"
-    @click:outside="!persistant ? annuler : ''"
-  >
-    <v-card class="pa-0 ma-0 pl-8 pt-8">
-      <!-- Bouton en haut à droite -->
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        class="position-absolute couleurHover"
-        style="top: 5px; right: 5px"
-        @click="annuler"
-      ></v-btn>
-
-      <v-card-title
-        class="pa-0 ma-0 pb-6"
-        style="font-size: 24px; white-space: normal; word-break: break-word"
-      >
-        <slot name="titre"></slot>
-        <div text-h5><span v-html="titre"></span></div>
-      </v-card-title>
-
-      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
-        <v-container>
-          <slot></slot>
-          <slot name="content"></slot>
-        </v-container>
-      </v-card-text>
-      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
-        <slot name="actions"></slot>
-        <v-btn
-          v-if="btnAnnuler"
-          color="primary"
-          :loading="operationEnCours"
-          variant="text"
-          @click="annuler"
-        >
-          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          color="primary"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver"
-          variant="flat"
-          @click="okBouton"
-        >
-          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const display = useDisplay()
-
-  // Déclaration des props
-  const props = defineProps({
-    largeur: { type: String, default: '50vw' },
-    persistant: { type: Boolean, default: true },
-    operationEnCours: { type: Boolean, default: false },
-    btnAnnuler: { type: Boolean, default: true },
-    btnOk: { type: Boolean, default: true },
-    btnAnnulerTexte: { type: String, default: '' },
-    btnOkTexte: { type: String, default: '' },
-    titre: { type: String, default: '' },
-    btnOkDesactiver: { type: Boolean, default: false },
-  })
-
-  // Déclaration des événements émis
-  const emit = defineEmits(['annuler', 'ok'])
-
-  // Gestion de l'état du dialogue
-  const dialog = ref(false)
-
-  // Méthodes pour gérer l'ouverture et la fermeture
-  const ouvrir = () => {
-    dialog.value = true
-  }
-
-  const fermer = () => {
-    dialog.value = false
-  }
-
-  // Gestion des actions des boutons
-  const annuler = () => {
-    emit('annuler')
-    fermer()
-  }
-
-  const okBouton = () => {
-    emit('ok')
-  }
-
-  // permet d'exporter les 2 actions
-  defineExpose({ ouvrir, fermer })
-</script>
-
-<style lang="css" scoped>
-  .v-card__text,
-  .v-card__title {
-    word-break: normal; /* empeche le wrap de couper un mot en XS  */
-  }
-</style>