Inventory/app/components/DisplaySettings.vue

<template>
  <div class="modal" :class="{ 'modal-open': isOpen }">
    <div class="modal-box">
      <h3 class="font-bold text-lg mb-4">
        Paramètres d'affichage
      </h3>

      <!-- Contrôle du zoom -->
      <div class="form-control mb-4">
        <label class="label">
          <span class="label-text">Taille du texte</span>
          <span class="label-text-alt">{{ zoomLevel }}%</span>
        </label>
        <input
          type="range"
          min="80"
          max="150"
          step="10"
          :value="zoomLevel"
          class="range range-primary"
          @input="updateZoom"
        >
        <div class="w-full flex justify-between text-xs px-2 mt-1">
          <span>80%</span>
          <span>100%</span>
          <span>150%</span>
        </div>
      </div>

      <!-- Contrôle de la densité -->
      <div class="form-control mb-4">
        <label class="label">
          <span class="label-text">Densité de l'interface</span>
        </label>
        <div class="flex gap-2">
          <button
            class="btn btn-sm"
            :class="density === 'compact' ? 'btn-primary' : 'btn-outline'"
            @click="setDensity('compact')"
          >
            Compacte
          </button>
          <button
            class="btn btn-sm"
            :class="density === 'comfortable' ? 'btn-primary' : 'btn-outline'"
            @click="setDensity('comfortable')"
          >
            Confortable
          </button>
          <button
            class="btn btn-sm"
            :class="density === 'spacious' ? 'btn-primary' : 'btn-outline'"
            @click="setDensity('spacious')"
          >
            Espacée
          </button>
        </div>
      </div>

      <!-- Contrôle du contraste -->
      <div class="form-control mb-4">
        <label class="label">
          <span class="label-text">Contraste</span>
        </label>
        <div class="flex gap-2">
          <button
            class="btn btn-sm"
            :class="contrast === 'normal' ? 'btn-primary' : 'btn-outline'"
            @click="setContrast('normal')"
          >
            Normal
          </button>
          <button
            class="btn btn-sm"
            :class="contrast === 'high' ? 'btn-primary' : 'btn-outline'"
            @click="setContrast('high')"
          >
            Élevé
          </button>
        </div>
      </div>

      <!-- Réinitialiser -->
      <div class="form-control">
        <button
          class="btn btn-outline btn-sm"
          @click="resetSettings"
        >
          Réinitialiser les paramètres
        </button>
      </div>

      <!-- Actions -->
      <div class="modal-action">
        <button class="btn btn-primary" @click="closeModal">
          Fermer
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'update-settings'])

// Paramètres d'affichage
const zoomLevel = ref(100)
const density = ref('comfortable')
const contrast = ref('normal')

// Charger les paramètres depuis le localStorage
onMounted(() => {
  const savedZoom = localStorage.getItem('display-zoom')
  const savedDensity = localStorage.getItem('display-density')
  const savedContrast = localStorage.getItem('display-contrast')

  if (savedZoom) { zoomLevel.value = parseInt(savedZoom) }
  if (savedDensity) { density.value = savedDensity }
  if (savedContrast) { contrast.value = savedContrast }

  applySettings()
})

const updateZoom = (event) => {
  zoomLevel.value = parseInt(event.target.value)
  applySettings()
}

const setDensity = (newDensity) => {
  density.value = newDensity
  applySettings()
}

const setContrast = (newContrast) => {
  contrast.value = newContrast
  applySettings()
}

const applySettings = () => {
  // Sauvegarder dans localStorage
  localStorage.setItem('display-zoom', zoomLevel.value.toString())
  localStorage.setItem('display-density', density.value)
  localStorage.setItem('display-contrast', contrast.value)

  // Appliquer les styles
  const root = document.documentElement

  // Zoom - exclure complètement le modal des paramètres
  const modal = document.querySelector('.modal')
  if (modal) {
    // Forcer la taille normale pour le modal et tous ses enfants
    modal.style.fontSize = '100%'
    modal.style.transform = 'none'
    modal.style.scale = '1'

    // Appliquer aux enfants du modal
    const modalElements = modal.querySelectorAll('*')
    modalElements.forEach((element) => {
      element.style.fontSize = 'inherit'
      element.style.transform = 'none'
      element.style.scale = '1'
    })
  }

  // Appliquer le zoom au reste de la page (sauf le modal)
  root.style.fontSize = `${zoomLevel.value}%`

  // Densité - utiliser les classes DaisyUI
  root.classList.remove('density-compact', 'density-comfortable', 'density-spacious')
  root.classList.add(`density-${density.value}`)

  // Contraste - utiliser les classes DaisyUI
  root.classList.remove('contrast-normal', 'contrast-high')
  root.classList.add(`contrast-${contrast.value}`)

  // Émettre les changements
  emit('update-settings', {
    zoom: zoomLevel.value,
    density: density.value,
    contrast: contrast.value
  })
}

const resetSettings = () => {
  zoomLevel.value = 100
  density.value = 'comfortable'
  contrast.value = 'normal'
  applySettings()
}

const closeModal = () => {
  emit('close')
}
</script>

<style scoped>
/* Les styles sont maintenant gérés par DaisyUI et le CSS global */
</style>