codevdesign 1.0.29 → 1.0.31

package/composants/csqcEditeurTexteRiche.vue

@@ -1,328 +0,0 @@
-<template>
-  <div class="editor">
-    <!-- Remount contrôlé pour TinyMCE -->
-    <Editor
-      v-bind="$attrs"
-      v-if="editorReady"
-      v-model="editorValue"
-      :init="initOptions"
-      :disabled="desactiver"
-      license-key="gpl"
-      @blur="onBlur"
-      @keydown="onUserActivity"
-      @change="onUserActivity"
-    />
-  </div>
-</template>
-
-<script>
-  import Editor from '@tinymce/tinymce-vue'
-  import * as tinymce from 'tinymce/tinymce.js'
-
-  // Core/skins/thème
-  import 'tinymce/icons/default/icons.min.js'
-  import 'tinymce/themes/silver/theme.min.js'
-  import 'tinymce/models/dom/model.min.js'
-  import 'tinymce/skins/ui/oxide/skin.js'
-  import 'tinymce/skins/ui/oxide/content.js'
-  import 'tinymce/skins/content/default/content.js'
-
-  // Langue
-  import 'tinymce-i18n/langs7/fr_FR'
-
-  // Plugins
-  import 'tinymce/plugins/autoresize/plugin.min.js'
-  import 'tinymce/plugins/advlist/plugin.min.js'
-  import 'tinymce/plugins/lists/plugin.min.js'
-  import 'tinymce/plugins/link/plugin.min.js'
-  import 'tinymce/plugins/autolink/plugin.min.js'
-  import 'tinymce/plugins/fullscreen/plugin.min.js'
-  import 'tinymce/plugins/table/plugin.min.js'
-  import 'tinymce/plugins/image/plugin.min.js'
-  //import 'tinymce/plugins/emoticons/plugin.min.js'
-  //import 'tinymce/plugins/emoticons/js/emojis.min.js'
-  import 'tinymce/plugins/code/plugin.min.js'
-
-  const openLink = (url, target) => {
-    if (!url) return
-    if (import.meta.env.MODE !== 'development') {
-      if (target && target !== '_blank') {
-        document.location.href = url
-        return
-      }
-      window.open(url, target || '_blank', 'noopener,noreferrer')
-    }
-  }
-
-  export default {
-    name: 'EditeurForm',
-    components: { Editor },
-
-    props: {
-      modelValue: { type: String, default: '' },
-      langue: { type: String, default: 'fr_FR' },
-      interdireRedimension: { type: Boolean, default: false },
-      desactiver: { type: Boolean, default: false },
-      plugins: {
-        type: [String, Array],
-        default: 'autoresize table image link fullscreen advlist lists autolink code',
-      },
-      interdireImage: { type: Boolean, default: false },
-      imageTailleMaximale: { type: Number, default: 5 }, // Mo
-      cacherBarreMenu: { type: Boolean, default: false },
-      cacherBarreOutils: { type: Boolean, default: false },
-      toolbar: {
-        type: [String, Array],
-        default:
-          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | ' +
-          'alignleft aligncenter alignright alignjustify | emoticons | bullist numlist | ' +
-          'image | link | outdent indent blockquote | undo redo | fullscreen | removeformat | table | code',
-      },
-    },
-
-    emits: ['update:modelValue', 'blur'],
-
-    data() {
-      return {
-        editorReady: true,
-        _editor: null,
-        editorValue: this.modelValue, // lié au v-model
-        _reinitPending: false,
-        _reinitLock: false,
-      }
-    },
-
-    computed: {
-      imageTailleMaxMo() {
-        const n = Number(this.imageTailleMaximale)
-        if (!Number.isFinite(n)) return 5
-        return Math.min(100, Math.max(0, n))
-      },
-
-      toolbarEffective() {
-        if (this.cacherBarreOutils) return false
-        const raw = Array.isArray(this.toolbar) ? this.toolbar.join(' | ') : this.toolbar
-        if (!this.interdireImage) return this._normalizeToolbar(raw)
-
-        const sansImage = raw
-          .replace(/\bimage\b/g, '')
-          .replace(/\s*\|\s*/g, ' | ')
-          .replace(/(\s*\|\s*){2,}/g, ' | ')
-          .replace(/^\s*\|\s*|\s*\|\s*$/g, '')
-          .replace(/\s{2,}/g, ' ')
-          .trim()
-
-        return this._normalizeToolbar(sansImage)
-      },
-
-      pluginsEffective() {
-        const list = (Array.isArray(this.plugins) ? this.plugins : this.plugins.split(/\s+/))
-          .map(p => p.trim())
-          .filter(Boolean)
-        const filtered = this.interdireImage ? list.filter(p => p !== 'image') : list
-        return filtered.join(' ')
-      },
-
-      initOptions() {
-        const opts = {
-          autolink: !this.desactiver,
-          autoresize: true,
-          automatic_uploads: !this.interdireImage,
-          branding: false,
-          browser_spellcheck: true,
-          content_css: 'default',
-          deprecation_warnings: false,
-          emoticons_database: 'emojis',
-          highlight_on_focus: false,
-          image_dimensions: !this.interdireImage,
-          language: this.langue === 'en' ? 'en_US' : 'fr_FR',
-          license_key: 'gpl',
-          menubar: !this.cacherBarreMenu,
-          object_resizing: !this.interdireImage,
-          paste_data_images: !this.interdireImage,
-          plugins: this.pluginsEffective,
-          promotion: false,
-          readonly: this.desactiver,
-          resize: !this.interdireRedimension,
-          resize_img_proportional: !this.interdireImage,
-          skin_url: 'default',
-          statusbar: this.cacherBarreOutils === false,
-          theme_advanced_resizing: true,
-          theme_advanced_resizing_use_cookie: false,
-          toolbar: this.toolbarEffective,
-
-          // --- File picker seulement si images permises ---
-          ...(this.interdireImage ? {} : { file_picker_types: 'image' }),
-
-          setup: editor => {
-            this._editor = editor
-
-            editor.on('init', () => {
-              // init ok
-            })
-
-            // Intercepter clics liens
-            editor.on('click', e => {
-              const a = e.target?.closest?.('a')
-              if (!a) return
-              const href = a.getAttribute('href')
-              const target = a.getAttribute('target')
-              if (href) {
-                e.preventDefault()
-                openLink(href, target)
-              }
-            })
-
-            // ENTER sur un lien
-            editor.on('keydown', e => {
-              if (e.key !== 'Enter') return
-              const node = editor.selection?.getNode?.()
-              const a = node?.closest?.('a')
-              if (a) {
-                e.preventDefault()
-                openLink(a.getAttribute('href'), a.getAttribute('target'))
-              }
-            })
-          },
-        }
-
-        if (!this.interdireImage) {
-          opts.file_picker_callback = cb => {
-            const input = document.createElement('input')
-            input.type = 'file'
-            input.accept = 'image/*'
-            input.onchange = () => {
-              const file = input.files?.[0]
-              if (!file) return
-
-              const reader = new FileReader()
-              reader.onload = () => {
-                const base64 = String(reader.result).split(',')[1]
-                const editor = this._editor
-                const blobCache = editor?.editorUpload?.blobCache
-                if (!blobCache) return
-
-                const id = 'blobid' + Date.now()
-                const blobInfo = blobCache.create(id, file, base64)
-                const imageSize = blobInfo.blob().size / 1_000_000
-                if (imageSize > this.imageTailleMaxMo) {
-                  alert('Fichier trop volumineux > ' + this.imageTailleMaxMo + ' Mo')
-                  return
-                }
-                blobCache.add(blobInfo)
-                cb(blobInfo.blobUri(), { title: file.name })
-              }
-              reader.readAsDataURL(file)
-            }
-            input.click()
-          }
-        }
-
-        return opts
-      },
-    },
-
-    watch: {
-      /* v-model (parent -> enfant) */
-      modelValue(v) {
-        this.editorValue = v
-      },
-
-      /* v-model (enfant -> parent) */
-      editorValue(v) {
-        this.$emit('update:modelValue', v)
-      },
-
-      // Re-montage propre sur changements des props
-      interdireImage() {
-        this._scheduleReinit()
-      },
-      interdireRedimension() {
-        this._scheduleReinit()
-      },
-      toolbar() {
-        this._scheduleReinit()
-      },
-      imageTailleMaximale() {
-        this._scheduleReinit()
-      },
-      plugins() {
-        this._scheduleReinit()
-      },
-      cacherBarreOutils() {
-        this._scheduleReinit()
-      },
-      cacherBarreMenu() {
-        this._scheduleReinit()
-      },
-    },
-
-    methods: {
-      onBlur() {
-        if (!this.desactiver) this.$emit('blur')
-      },
-      onUserActivity() {},
-      insererAuCurseur(texte) {
-        const ed = this._editor
-        if (!ed) return
-
-        // Focus sur l'éditeur pour que TinyMCE sache où insérer
-        ed.focus()
-
-        // Insert au curseur (respecte le contexte HTML)
-        ed.insertContent(texte)
-      },
-      _normalizeToolbar(tb) {
-        const trimmed = (tb || '').trim()
-        return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
-      },
-
-      _scheduleReinit() {
-        if (this._reinitPending) return
-        this._reinitPending = true
-        queueMicrotask(async () => {
-          this._reinitPending = false
-          await this._reinitEditor()
-        })
-      },
-
-      async _reinitEditor() {
-        if (this._reinitLock) return
-        this._reinitLock = true
-        try {
-          const ed = this._editor
-          if (ed && typeof ed.remove === 'function') {
-            try {
-              ed.remove()
-            } catch (e) {
-              console.warn('[Editeur] editor.remove erreur', e)
-            }
-          }
-          this._editor = null
-
-          // remount contrôlé
-          this.editorReady = false
-          await this.$nextTick()
-          this.editorReady = true
-          await this.$nextTick()
-        } finally {
-          this._reinitLock = false
-        }
-      },
-    },
-
-    beforeUnmount() {
-      try {
-        const ed = this._editor
-        if (ed && typeof ed.remove === 'function') ed.remove()
-      } catch {}
-      this._editor = null
-    },
-  }
-</script>
-
-<style scoped>
-  .editor a {
-    cursor: pointer !important;
-  }
-</style>

package/composants/csqcEntete.vue

@@ -1,163 +0,0 @@
-<template>
-  <v-app-bar
-    :color="barreCouleur"
-    class="px-0 mx-0"
-    :style="{
-      position: 'sticky',
-      // variables CSS pour les couleurs dynamiques
-      '--entete-texte': texteCouleur,
-      '--entete-icone': iconeCouleur,
-    }"
-    height="82px"
-  >
-    <v-row
-      class="pt-2"
-      @resize="controlAffichage"
-    >
-      <v-col
-        :cols="titreCol"
-        class="pr-0 mr-0 pl-5"
-      >
-        <v-toolbar-title class="titre">
-          <!-- Barre de retour -->
-          <slot name="retour">
-            <v-icon
-              v-if="retour"
-              size="large"
-              start
-              :color="iconeCouleur"
-              icon="mdi-arrow-left-thin"
-              @click="retournerMenu"
-            />
-          </slot>
-
-          <div class="titre-bloc">
-            <!-- Titre -->
-            <slot name="titre">
-              <span class="pl-3 titre-texte">{{ props.titre }}</span>
-            </slot>
-
-            <!-- État -->
-            <slot name="etat">
-              <span
-                v-if="monEtat?.afficher"
-                class="pl-10"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtat.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtat.texte }}
-                </v-btn>
-              </span>
-            </slot>
-
-            <!-- État secondaire -->
-            <slot name="etatSecondaire">
-              <span
-                v-if="monEtatSecondaire?.afficher"
-                class="pl-3"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtatSecondaire.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtatSecondaire.texte }}
-                </v-btn>
-              </span>
-            </slot>
-
-            <!-- Sous-titre -->
-            <slot name="soustitre">
-              <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
-            </slot>
-          </div>
-        </v-toolbar-title>
-      </v-col>
-    </v-row>
-
-    <!-- Barre en bas -->
-    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { ref, computed } from 'vue'
-
-  interface EnteteEtat {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  interface EnteteEtatSecondaire {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  const router = useRouter()
-
-  const props = defineProps<{
-    titre: string
-    soustitre?: string
-    retour?: string
-    etat?: EnteteEtat
-    couleur?: string // couleur de la barre (Vuetify color/hex)
-    couleurTexte?: string
-    couleurIcone?: string
-    etatSecondaire?: EnteteEtatSecondaire
-  }>()
-
-  const titreCol = ref(12)
-
-  // Fallbacks (tes valeurs actuelles)
-  const barreCouleur = computed(() => props.couleur ?? 'white')
-  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
-  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
-
-  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
-  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
-    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
-  )
-
-  function retournerMenu() {
-    if (props.retour) router.push({ name: props.retour })
-  }
-  function controlAffichage() {
-    /* logique resize */
-  }
-</script>
-
-<style scoped>
-  .titre {
-    font-size: 1.85rem;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
-  .titre-texte {
-    color: var(--entete-texte, #223654);
-  }
-  .soustitre-texte {
-    display: block;
-    font-size: 1rem;
-    font-weight: normal;
-    color: var(--entete-texte, #223654);
-  }
-  .titre-bloc {
-    display: inline-block;
-    vertical-align: middle;
-    padding-left: 12px;
-  }
-  /* Couleur de l’icône (retour) + hover */
-  .v-icon {
-    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
-  }
-  .v-icon:hover {
-    /* tu peux garder une couleur fixe ou calculer une teinte plus foncée si besoin */
-    filter: brightness(0.85);
-  }
-</style>

package/composants/csqcImportCSV.vue

@@ -1,125 +0,0 @@
-<template>
-  <div>
-    <v-btn
-      color="success"
-      variant="outlined"
-      :loading="chargement"
-      class="elevation-0"
-      @click="importCsv"
-    >
-      {{ boutonTexte }}
-      <template #append>
-        <v-icon icon="mdi-microsoft-excel"></v-icon>
-      </template>
-    </v-btn>
-
-    <input
-      ref="fileInput"
-      type="file"
-      accept=".csv"
-      style="display: none"
-      @change="handleFileUpload"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  // Props
-  const props = withDefaults(
-    defineProps<{
-      boutonTexte?: string
-      erreurTexte?: string
-      chargement?: boolean
-    }>(),
-    {
-      chargement: false, //  défaut
-    },
-  )
-  const emit = defineEmits(['import', 'import-erreur'])
-
-  const { t } = useI18n()
-
-  const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
-  const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
-
-  // Références
-  const fileInput = ref<HTMLInputElement | null>(null)
-  const csvFile = ref<File | null>(null)
-
-  // Méthodes
-  function importCsv() {
-    fileInput.value?.click()
-  }
-
-  function handleFileUpload(event: Event) {
-    const target = event.target as HTMLInputElement
-    const file = target.files?.[0]
-
-    if (file?.name.toLowerCase().endsWith('.csv')) {
-      csvFile.value = file
-
-      const reader = new FileReader()
-
-      reader.onload = () => {
-        try {
-          let text = reader.result as string
-
-          // Supprime BOM UTF-8 si présent
-          if (text.charCodeAt(0) === 0xfeff) {
-            text = text.slice(1)
-          }
-
-          const lignes = text
-            .trim()
-            .split(/\r?\n/)
-            .filter(row => row.trim() !== '') // ignore lignes vides
-
-          if (lignes.length === 0) {
-            emit('import-erreur', 'Le fichier CSV est vide.')
-            return
-          }
-
-          //  Détection automatique du séparateur
-          const separateur = detecterSeparateur(lignes[0]!)
-
-          //  Découpage des lignes
-          const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
-
-          emit('import', data)
-        } catch (error) {
-          emit('import-erreur', erreurTexte || t('csqc.csqcImportCSV.erreur.lectureFichier'))
-        }
-      }
-
-      reader.onerror = () => {
-        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
-      }
-
-      reader.readAsText(file)
-    } else {
-      const message = erreurTexte || t('csqc.csqcImportCSV.erreur.erreur')
-      emit('import-erreur', message)
-      csvFile.value = null
-    }
-  }
-
-  //  Fonction pour détecter le séparateur le plus probable
-  function detecterSeparateur(ligne: string): string {
-    const separateursTestés = [',', ';', '\t', '|']
-    let meilleurSeparateur = ','
-    let maxColonnes = 0
-
-    for (const sep of separateursTestés) {
-      const nb = ligne.split(sep).length
-      if (nb > maxColonnes) {
-        maxColonnes = nb
-        meilleurSeparateur = sep
-      }
-    }
-
-    return meilleurSeparateur
-  }
-</script>

package/composants/csqcModaleSaisie.vue

@@ -1,95 +0,0 @@
-<template>
-  <csqcDialogue
-    ref="modale"
-    :titre="titre"
-    activator="supprimer"
-    v-bind="$attrs"
-    :largeur="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-row>
-        <v-col
-          cols="12"
-          class="pa-0 ma-0"
-        >
-          <v-text-field
-            v-if="!multiligne"
-            v-model="reponse"
-            autofocus
-            @keyup.enter="confirmer"
-          />
-          <v-textarea
-            v-if="multiligne"
-            v-model="reponse"
-            :rows="3"
-            autofocus
-          />
-        </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<string | null>(null)
-  const texte = ref('')
-  const titre = ref('')
-  const largeur = ref('525px')
-  const multiligne = ref(false)
-
-  const ouvrir = async (
-    titreParam: string,
-    message: string,
-    multiligneParam: boolean = false,
-    largeurParam = '525px',
-  ) => {
-    texte.value = message
-    titre.value = titreParam
-    multiligne.value = multiligneParam
-    largeur.value = largeurParam
-    utilisateurATermine.value = false
-    modale.value?.ouvrir()
-
-    while (!utilisateurATermine.value) {
-      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
-    }
-
-    return reponse.value
-  }
-
-  const confirmer = (): void => {
-    utilisateurATermine.value = true
-    fermer()
-  }
-
-  const annuler = (): void => {
-    reponse.value = null
-    utilisateurATermine.value = true
-    fermer()
-  }
-
-  const fermer = (): void => {
-    modale.value?.fermer()
-  }
-
-  defineExpose({ ouvrir, fermer })
-</script>