Chargement

Retour visuel de chargement. Trois formes : le masque sous forme de service (LhLoading.show(...), en plein écran ou sur un conteneur donné), la directive v-loading, et le graphe rotatif de base LhSpinner.

Masque plein écran sous forme de service

Chargement plein écran

<script setup lang="ts">
import { LhLoading } from '@lh-ui/vue3'

const showFullscreen = () => {
  const handle = LhLoading.show({ fullscreen: true, lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showFullscreen">Chargement plein écran pendant 2 s</LhButton>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showFullscreen() {
      const handle = LhLoading.show({ fullscreen: true, lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showFullscreen">Chargement plein écran pendant 2 s</LhButton>
</template>

Masque sur un conteneur donné

Sans target, le masque est plein écran ; avec un sélecteur ou un élément, il recouvre le conteneur (absolute sur le plus proche ancêtre positionné ; un conteneur static se voit temporairement attribuer relative, valeur restaurée à la fermeture).

Chargement local

<script setup lang="ts">
import { ref } from 'vue'
import { LhLoading } from '@lh-ui/vue3'

const boxRef = ref<HTMLElement>()

const showBox = () => {
  const handle = LhLoading.show({ target: boxRef.value, text: 'Chargement en cours', lock: true })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">Chargement dans le conteneur</LhButton>
  </div>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showBox() {
      const handle = LhLoading.show({ target: this.$refs.boxRef, text: 'Chargement en cours', lock: true })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div
    ref="boxRef"
    class="demo-loading-box"
  >
    <LhButton @click="showBox">Chargement dans le conteneur</LhButton>
  </div>
</template>

Directive v-loading

Après app.use(LhLoading) (ou l'import complet), la directive v-loading est enregistrée et sa visibilité est contrôlée par une valeur booléenne.

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'Texte personnalisé'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const busy = ref(false)
const busy2 = ref(false)
</script>

<template>
  <div v-loading="busy" class="table-zone">…</div>
  <div v-loading:text="'Texte personnalisé'" :style="busy2 ? 'height:200px' : ''">…</div>
</template>

<script>
export default {
  data() {
    return { busy: false, busy2: false }
  },
}
</script>

LhSpinner

Graphe rotatif de base, utilisable indépendamment (c'est également lui qui s'affiche à l'intérieur du masque sémantique de chargement).

LhSpinner

<script setup lang="ts">
</script>

<template>
  <div class="demo-loading-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" color="#8f9779" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-loading-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" color="#8f9779" />
  </div>
</template>

Apparence personnalisée

text personnalise le message, background définit la couleur du masque, z-index contrôle l'ordre d'empilement et spinner désactive le graphe rotatif.

Apparence personnalisée

<script setup lang="ts">
import { LhLoading } from '@lh-ui/vue3'

const showStyled = () => {
  const handle = LhLoading.show({
    text: 'Synchronisation des données…',
    background: 'rgba(42, 37, 32, 0.6)',
    zIndex: 4000,
    spinner: false,
  })
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <LhButton @click="showStyled">Chargement personnalisé pendant 2 s</LhButton>
</template>

<script>
import { LhLoading } from '@lh-ui/vue3'

export default {
  methods: {
    showStyled() {
      const handle = LhLoading.show({
        text: 'Synchronisation des données…',
        background: 'rgba(42, 37, 32, 0.6)',
        zIndex: 4000,
        spinner: false,
      })
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <LhButton @click="showStyled">Chargement personnalisé pendant 2 s</LhButton>
</template>

API

LhLoadingMask Props

Prop	Description	Type	Valeur par défaut
fullscreen	Plein écran (true lorsque la cible est body)	boolean	—
text	Message de chargement (par défaut, lit loading.text du paquet de langue)	string	—
background	Couleur de fond du masque (valeur CSS background)	string	—
zIndex	Niveau d'empilement	number	—
spinner	Afficher le graphe rotatif	boolean	true
sx	Props de mise en page sx	LhSxProps	—

Service : LhLoading.show({ target?, text?, background?, lock?, spinner?, sx? }) renvoie { close } ; app.use(LhLoading) enregistre la directive v-loading.

Accessibilité

• Le masque utilise role="status" + aria-busy="true" et le message est annoncé via aria-label
• Lorsqu'un conteneur est ciblé et qu'inert est disponible (amélioration progressive), le conteneur devient inaccessible au clavier et aux technologies d'assistance, empêchant toute interaction avec les données sous-jacentes
• lock verrouille le défilement, restauré à la fermeture ; à la fermeture du masque, le positionnement d'origine du conteneur et l'état du défilement sont rétablis
• L'animation de rotation respecte prefers-reduced-motion

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/loading/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhLoadingMaskProps

/** Props du masque (rendu interne du service / de la directive) */
export interface LhLoadingMaskProps {
  /** Plein écran (true lorsque la cible est body) */
  fullscreen?: boolean
  /** Message de chargement (par défaut, lit loading.text du paquet de langue) */
  text?: string
  /** Couleur de fond du masque (valeur CSS background) */
  background?: string
  /** Niveau d'empilement */
  zIndex?: number
  /** Afficher le graphe rotatif (true par défaut) */
  spinner?: boolean
  sx?: LhSxProps
}

LhLoadingOptions _{(provenant de @lh-ui/share/core/loading)}

/** Options du masque de chargement (partagées par le service et la directive) */
export interface LhLoadingOptions {
  /** Cible de montage : chaîne sélecteur / élément ; plein écran si non renseigné */
  target?: string | HTMLElement
  /** Message de chargement (par défaut, lit loading.text du paquet de langue) */
  text?: string
  /** Couleur de fond du masque (valeur CSS background) */
  background?: string
  /** Verrouiller le défilement (plein écran verrouille body ; cible donnée verrouille le défilement de la cible) */
  lock?: boolean
  /** Afficher le graphe rotatif */
  spinner?: boolean
  sx?: LhSxProps
}

LhLoadingHandle _{(provenant de @lh-ui/share/core/loading)}

/** Handle du service */
export interface LhLoadingHandle {
  close: () => void
}