Popconfirm (confirmation contextuelle)

Confirmation légger en deuxième intention : une bulle de confirmation apparaît à proximité du déclencheur, sans nécessiter d'ouvrir un dialogue. La sémantique est celle d'une confirmation bloquante (role="alertdialog") : à l'ouverture, le focus se place sur le bouton « Confirmer », Tab boucle entre les deux boutons et Escape équivaut à une annulation.

Utilisation de base

Confirmation de suppression

<template>
  <LhPopconfirm title="Voulez-vous vraiment supprimer cet enregistrement ?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">Supprimer</LhButton>
  </LhPopconfirm>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const action = ref('')
function onConfirm() {
  action.value = 'Confirmé'
}
function onCancel() {
  action.value = 'Annulé'
}
const pcVisible = ref(false)
</script>

<script>
export default {
  data() {
    return { action: '', pcVisible: false }
  },
  methods: {
    onConfirm() {
      this.action = 'Confirmé'
    },
    onCancel() {
      this.action = 'Annulé'
    },
  },
}
</script>

<template>
  <LhPopconfirm title="Voulez-vous vraiment supprimer cet enregistrement ?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">Supprimer</LhButton>
  </LhPopconfirm>
</template>

Trois tons

info / warning / danger

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

<template>
  <!-- Ton information -->
  <LhPopconfirm type="info" title="Consulter le journal d'accès de cet enregistrement ?">
    <LhButton>Information</LhButton>
  </LhPopconfirm>
  <!-- Ton avertissement -->
  <LhPopconfirm type="warning" title="Cette opération notifiera tous les membres.">
    <LhButton type="warning">Avertissement</LhButton>
  </LhPopconfirm>
  <!-- Ton danger -->
  <LhPopconfirm type="danger" title="La suppression est irréversible.">
    <LhButton type="danger">Danger</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {}
</script>

<template>
  <!-- Ton information -->
  <LhPopconfirm type="info" title="Consulter le journal d'accès de cet enregistrement ?">
    <LhButton>Information</LhButton>
  </LhPopconfirm>
  <!-- Ton avertissement -->
  <LhPopconfirm type="warning" title="Cette opération notifiera tous les membres.">
    <LhButton type="warning">Avertissement</LhButton>
  </LhPopconfirm>
  <!-- Ton danger -->
  <LhPopconfirm type="danger" title="La suppression est irréversible.">
    <LhButton type="danger">Danger</LhButton>
  </LhPopconfirm>
</template>

Libellés et emplacement personnalisés

Libellés / emplacement / déclencheur

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

<template>
  <!-- Libellés et emplacement personnalisés -->
  <LhPopconfirm
    title="Après archivage, la restauration est possible depuis la corbeille."
    confirm-text="Archiver"
    cancel-text="Réfléchir encore"
    placement="right"
  >
    <LhButton>Libellés personnalisés</LhButton>
  </LhPopconfirm>
  <!-- Déclenchement au survol -->
  <LhPopconfirm title="Survolez pour confirmer." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>Déclenchement au survol</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {}
</script>

<template>
  <!-- Libellés et emplacement personnalisés -->
  <LhPopconfirm
    title="Après archivage, la restauration est possible depuis la corbeille."
    confirm-text="Archiver"
    cancel-text="Réfléchir encore"
    placement="right"
  >
    <LhButton>Libellés personnalisés</LhButton>
  </LhPopconfirm>
  <!-- Déclenchement au survol -->
  <LhPopconfirm title="Survolez pour confirmer." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>Déclenchement au survol</LhButton>
  </LhPopconfirm>
</template>

Les libellés des boutons proviennent par défaut du paquet de langue popconfirm.confirm / popconfirm.cancel, surchargeables via confirm-text / cancel-text.

Icône, type du bouton de confirmation et commutateurs de comportement

show-icon affiche l'icône d'avertissement, confirm-button-type change le type principal du bouton de confirmation ; disabled désactive le déclencheur ; v-model:visible contrôle l'affichage ; hide-after retarde le repli automatique ; popper-class / teleport-target personnalisent la couche flottante.

Icône et type de bouton

<script setup lang="ts">
import { ref } from 'vue'
const pcVisible = ref(false)
</script>

<template>
  <!-- Icône et type du bouton de confirmation -->
  <LhPopconfirm title="Voulez-vous vraiment supprimer cet enregistrement ?" show-icon confirm-button-type="primary">
    <LhButton type="danger">Avec icône</LhButton>
  </LhPopconfirm>
  <!-- Déclencheur désactivé -->
  <LhPopconfirm title="Cette opération n'est pas disponible." disabled>
    <LhButton disabled>Désactivé</LhButton>
  </LhPopconfirm>
  <!-- Affichage contrôlé et repli différé -->
  <LhPopconfirm v-model:visible="pcVisible" title="Bulle contrôlée" :hide-after="1000">
    <LhButton>{{ pcVisible ? 'Replier' : 'Déplier' }}</LhButton>
  </LhPopconfirm>
</template>

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

<template>
  <!-- Icône et type du bouton de confirmation -->
  <LhPopconfirm title="Voulez-vous vraiment supprimer cet enregistrement ?" show-icon confirm-button-type="primary">
    <LhButton type="danger">Avec icône</LhButton>
  </LhPopconfirm>
  <!-- Déclencheur désactivé -->
  <LhPopconfirm title="Cette opération n'est pas disponible." disabled>
    <LhButton disabled>Désactivé</LhButton>
  </LhPopconfirm>
  <!-- Affichage contrôlé et repli différé -->
  <LhPopconfirm v-model:visible="pcVisible" title="Bulle contrôlée" :hide-after="1000">
    <LhButton>{{ pcVisible ? 'Replier' : 'Déplier' }}</LhButton>
  </LhPopconfirm>
</template>

API Popconfirm

Props

Prop	Description	Type	Valeur par défaut
type	Ton de la confirmation	"info" | "warning" | "danger"	'warning'
placement	Position d'affichage	"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"	'top'
trigger	Mode de déclenchement	"click" | "hover" | "focus" | "manual"	'click'
title	Contenu de la confirmation (le slot content fonctionne aussi)	string	—
confirmText	Libellé du bouton de confirmation (par défaut, lit popconfirm.confirm du paquet de langue)	string	—
cancelText	Libellé du bouton d'annulation (par défaut, lit popconfirm.cancel du paquet de langue)	string	—
confirmButtonType	Type du bouton de confirmation	"default" | "primary"	'primary'
visible	État d'affichage contrôlé manuellement (v-model:visible)	boolean	—
disabled	Désactivé	boolean	—
showIcon	Afficher l'icône de ton	boolean	true
popperClass	Nom de classe personnalisé de la couche flottante	string	—
teleportTarget	Cible du Teleport (sélecteur ou élément, body par défaut)	string | HTMLElement	'body'
showAfter	Délai d'affichage (ms)	number	—
hideAfter	Délai de masquage (ms)	number	—
themeVars	Variables de thème au niveau du composant, prime sur la configuration de ConfigProvider	{ [x: string]: string; }	—
bgPattern	Motif d'arrière-plan au niveau du composant, prime sur la configuration de ConfigProvider	string	—
sx	Props de mise en page sx (appliquées à l'élément racine du déclencheur)	LhSxProps	—

Events

Événement	Description	Paramètre
confirm	Émis après un clic sur le bouton de confirmation	—
cancel	Émis après un clic sur le bouton d'annulation ou sur Escape	—
update:visible	Changement d'affichage	(value: boolean)
show	Émis après l'affichage	—
hide	Émis après le masquage	—

Slots

Slot	Description
default	Contenu du déclencheur
content	Contenu de confirmation personnalisé

Methods

Méthode	Description
show	Affichage programmatique
hide	Masquage programmatique
toggle	Basculement programmatique

Accessibilité

• La couche flottante a role="alertdialog" + aria-modal="true" ; le déclencheur porte aria-haspopup / aria-expanded
• À l'ouverture, le focus se place sur le bouton « Confirmer », Tab boucle entre les deux boutons d'action et, à la fermeture, le focus est rendu au déclencheur
• Escape équivaut à une annulation (conforme à alertdialog WAI-ARIA : Escape ferme et vaut réponse négative)
• Le contenu de la confirmation est lié via aria-labelledby ; l'icône de ton est décorative (aria-hidden)

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/popconfirm/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) :

LhPopconfirmProps

/**
 * Props du composant Popconfirm
 */
export interface LhPopconfirmProps {
  /** Ton de la confirmation */
  type?: LhPopconfirmType
  /** Position d'affichage */
  placement?: LhPlacement
  /** Mode de déclenchement */
  trigger?: LhPopconfirmTrigger
  /** Contenu de la confirmation (le slot content fonctionne aussi) */
  title?: string
  /** Libellé du bouton de confirmation (par défaut, lit popconfirm.confirm du paquet de langue) */
  confirmText?: string
  /** Libellé du bouton d'annulation (par défaut, lit popconfirm.cancel du paquet de langue) */
  cancelText?: string
  /** Type du bouton de confirmation */
  confirmButtonType?: 'default' | 'primary'
  /** État d'affichage contrôlé manuellement (v-model:visible) */
  visible?: boolean
  /** Désactivé */
  disabled?: boolean
  /** Afficher l'icône de ton */
  showIcon?: boolean
  /** Nom de classe personnalisé de la couche flottante */
  popperClass?: string
  /** Cible du Teleport (sélecteur ou élément, body par défaut) */
  teleportTarget?: string | HTMLElement
  /** Délai d'affichage (ms) */
  showAfter?: number
  /** Délai de masquage (ms) */
  hideAfter?: number
  /** Variables de thème au niveau du composant, prime sur la configuration de ConfigProvider */
  themeVars?: Record<string, string>
  /** Motif d'arrière-plan au niveau du composant, prime sur la configuration de ConfigProvider */
  bgPattern?: string
  /** Props de mise en page sx (appliquées à l'élément racine du déclencheur) */
  sx?: LhSxProps
}

LhPopconfirmPlacement _{(provenant de @lh-ui/share/core/shared/popper)}

/**
 * Moteur de positionnement Popper (fonctions pures, sans dépendance framework)
 *
 * Calculs géométriques partagés par les couches flottantes
 * (Tooltip / Popover / Popconfirm / Dropdown, etc.) :
 * positionnement selon 12 placements, retournement sur l'axe principal en cas de
 * débordement (flip), recentrage sur l'axe secondaire (shift).
 * Tous les paramètres sont des littéraux rect, sans toucher au DOM,
 * directement testables par tests unitaires.
 */

/** Orientation de la couche flottante (direction + alignement) */
export type LhPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

LhPopconfirmTrigger _{(provenant de @lh-ui/share/core/popconfirm (logic.ts))}

/** Mode de déclenchement */
export type LhPopconfirmTrigger = 'click' | 'hover' | 'focus' | 'manual'

LhPopconfirmType _{(provenant de @lh-ui/share/core/popconfirm (logic.ts))}

/** Ton de la confirmation */
export type LhPopconfirmType = 'info' | 'warning' | 'danger'