Popconfirm (confirmación emergente)

Confirmación secundaria ligera: muestra una burbuja de confirmación cerca del disparador, sin necesidad de abrir un diálogo. La semántica es de confirmación bloqueante (role="alertdialog"): al abrirse, el foco cae sobre el botón «Confirmar», Tab circula entre los dos botones y Escape equivale a cancelar.

Uso básico

Confirmación de borrado

<template>
  <LhPopconfirm title="¿Seguro que quieres borrar este registro?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">Borrar</LhButton>
  </LhPopconfirm>
</template>

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

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

<template>
  <LhPopconfirm title="¿Seguro que quieres borrar este registro?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">Borrar</LhButton>
  </LhPopconfirm>
</template>

Tres tonos

info / warning / danger

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

<template>
  <!-- Tono de información -->
  <LhPopconfirm type="info" title="¿Ver el registro de accesos de este registro?">
    <LhButton>Información</LhButton>
  </LhPopconfirm>
  <!-- Tono de advertencia -->
  <LhPopconfirm type="warning" title="Esta acción notificará a todos los miembros.">
    <LhButton type="warning">Advertencia</LhButton>
  </LhPopconfirm>
  <!-- Tono de peligro -->
  <LhPopconfirm type="danger" title="No se puede deshacer el borrado.">
    <LhButton type="danger">Peligro</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {}
</script>

<template>
  <!-- Tono de información -->
  <LhPopconfirm type="info" title="¿Ver el registro de accesos de este registro?">
    <LhButton>Información</LhButton>
  </LhPopconfirm>
  <!-- Tono de advertencia -->
  <LhPopconfirm type="warning" title="Esta acción notificará a todos los miembros.">
    <LhButton type="warning">Advertencia</LhButton>
  </LhPopconfirm>
  <!-- Tono de peligro -->
  <LhPopconfirm type="danger" title="No se puede deshacer el borrado.">
    <LhButton type="danger">Peligro</LhButton>
  </LhPopconfirm>
</template>

Textos y posición personalizados

Textos / posición / forma de disparo

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

<template>
  <!-- Textos y posición personalizados -->
  <LhPopconfirm
    title="Tras archivar, se puede restaurar desde la papelera."
    confirm-text="Archivar"
    cancel-text="Déjame pensarlo"
    placement="right"
  >
    <LhButton>Textos personalizados</LhButton>
  </LhPopconfirm>
  <!-- Disparo al pasar el cursor -->
  <LhPopconfirm title="Basta con pasar el cursor para confirmar." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>Disparo al pasar el cursor</LhButton>
  </LhPopconfirm>
</template>

<script>
export default {}
</script>

<template>
  <!-- Textos y posición personalizados -->
  <LhPopconfirm
    title="Tras archivar, se puede restaurar desde la papelera."
    confirm-text="Archivar"
    cancel-text="Déjame pensarlo"
    placement="right"
  >
    <LhButton>Textos personalizados</LhButton>
  </LhPopconfirm>
  <!-- Disparo al pasar el cursor -->
  <LhPopconfirm title="Basta con pasar el cursor para confirmar." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>Disparo al pasar el cursor</LhButton>
  </LhPopconfirm>
</template>

Los textos de los botones se toman por defecto del paquete de idioma popconfirm.confirm / popconfirm.cancel y se pueden sobrescribir con confirm-text / cancel-text.

Icono, tipo del botón de confirmación y modificadores de comportamiento

show-icon muestra el icono de aviso; confirm-button-type cambia el tipo principal del botón de confirmación; disabled deshabilita el disparador; v-model:visible controla la visibilidad; hide-after retrasa el cierre automático; popper-class / teleport-target personalizan la capa emergente.

Icono y tipo de botón

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

<template>
  <!-- Icono y tipo del botón de confirmación -->
  <LhPopconfirm title="¿Seguro que quieres borrar este registro?" show-icon confirm-button-type="primary">
    <LhButton type="danger">Con icono</LhButton>
  </LhPopconfirm>
  <!-- Disparador deshabilitado -->
  <LhPopconfirm title="Esta acción no está disponible." disabled>
    <LhButton disabled>Deshabilitado</LhButton>
  </LhPopconfirm>
  <!-- Visibilidad controlada y cierre retardado -->
  <LhPopconfirm v-model:visible="pcVisible" title="Burbuja controlada" :hide-after="1000">
    <LhButton>{{ pcVisible ? 'Cerrar' : 'Abrir' }}</LhButton>
  </LhPopconfirm>
</template>

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

<template>
  <!-- Icono y tipo del botón de confirmación -->
  <LhPopconfirm title="¿Seguro que quieres borrar este registro?" show-icon confirm-button-type="primary">
    <LhButton type="danger">Con icono</LhButton>
  </LhPopconfirm>
  <!-- Disparador deshabilitado -->
  <LhPopconfirm title="Esta acción no está disponible." disabled>
    <LhButton disabled>Deshabilitado</LhButton>
  </LhPopconfirm>
  <!-- Visibilidad controlada y cierre retardado -->
  <LhPopconfirm v-model:visible="pcVisible" title="Burbuja controlada" :hide-after="1000">
    <LhButton>{{ pcVisible ? 'Cerrar' : 'Abrir' }}</LhButton>
  </LhPopconfirm>
</template>

Popconfirm API

Props

Prop	Descripción	Tipo	Predeterminado
type	Tono de la confirmación	"info" | "warning" | "danger"	'warning'
placement	Posición de visualización	"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"	'top'
trigger	Forma de disparo	"click" | "hover" | "focus" | "manual"	'click'
title	Contenido de la confirmación (también se puede usar el slot content)	string	—
confirmText	Texto del botón de confirmación (si no se pasa, se toma del paquete de idioma popconfirm.confirm)	string	—
cancelText	Texto del botón de cancelación (si no se pasa, se toma del paquete de idioma popconfirm.cancel)	string	—
confirmButtonType	Tipo del botón de confirmación	"default" | "primary"	'primary'
visible	Estado de visualización controlado manualmente (v-model:visible)	boolean	—
disabled	Si se deshabilita	boolean	—
showIcon	Si se muestra el icono del tono	boolean	true
popperClass	Clase personalizada de la capa emergente	string	—
teleportTarget	Objetivo del Teleport (selector o elemento, body por defecto)	string | HTMLElement	'body'
showAfter	Retraso antes de mostrar (ms)	number	—
hideAfter	Retraso antes de ocultar (ms)	number	—
themeVars	Variables de tema a nivel de componente, prevalecen sobre la configuración de ConfigProvider	{ [x: string]: string; }	—
bgPattern	Patrón de fondo a nivel de componente, prevalece sobre la configuración de ConfigProvider	string	—
sx	Props de maquetación rápida sx (se aplican al elemento raíz del disparador)	LhSxProps	—

Eventos

Evento	Descripción	Parámetro
confirm	Se dispara tras pulsar el botón de confirmación	—
cancel	Se dispara al pulsar el botón de cancelación o pulsar Escape	—
update:visible	Cambio de visibilidad	(value: boolean)
show	Se dispara tras mostrar	—
hide	Se dispara tras ocultar	—

Slots

Slot	Descripción
default	Contenido del disparador
content	Contenido de confirmación personalizado

Métodos

Método	Descripción
show	Mostrar por programación
hide	Ocultar por programación
toggle	Alternar por programación

Accesibilidad

• La capa emergente es role="alertdialog" + aria-modal="true"; el disparador lleva aria-haspopup / aria-expanded
• Al abrirse, el foco cae sobre el botón «Confirmar»; Tab circula entre los dos botones de acción y, al cerrar, el foco vuelve al disparador
• Escape equivale a cancelar (de acuerdo con alertdialog de WAI-ARIA: Escape cierra y se considera respuesta negativa)
• El contenido de la confirmación se relaciona mediante aria-labelledby; el icono del tono es decorativo (aria-hidden)

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/popconfirm/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhPopconfirmProps

/**
 * Props del componente Popconfirm
 */
export interface LhPopconfirmProps {
  /** Tono de la confirmación */
  type?: LhPopconfirmType
  /** Posición de visualización */
  placement?: LhPlacement
  /** Forma de disparo */
  trigger?: LhPopconfirmTrigger
  /** Contenido de la confirmación (también se puede usar el slot content) */
  title?: string
  /** Texto del botón de confirmación (si no se pasa, se toma del paquete de idioma popconfirm.confirm) */
  confirmText?: string
  /** Texto del botón de cancelación (si no se pasa, se toma del paquete de idioma popconfirm.cancel) */
  cancelText?: string
  /** Tipo del botón de confirmación */
  confirmButtonType?: 'default' | 'primary'
  /** Estado de visualización controlado manualmente (v-model:visible) */
  visible?: boolean
  /** Si se deshabilita */
  disabled?: boolean
  /** Si se muestra el icono del tono */
  showIcon?: boolean
  /** Clase personalizada de la capa emergente */
  popperClass?: string
  /** Objetivo del Teleport (selector o elemento, body por defecto) */
  teleportTarget?: string | HTMLElement
  /** Retraso antes de mostrar (ms) */
  showAfter?: number
  /** Retraso antes de ocultar (ms) */
  hideAfter?: number
  /** Variables de tema a nivel de componente, prevalecen sobre la configuración de ConfigProvider */
  themeVars?: Record<string, string>
  /** Patrón de fondo a nivel de componente, prevalece sobre la configuración de ConfigProvider */
  bgPattern?: string
  /** Props de maquetación rápida sx (se aplican al elemento raíz del disparador) */
  sx?: LhSxProps
}

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

/**
 * Motor de posicionamiento Popper (función pura, sin dependencias de framework)
 *
 * Cálculos geométricos compartidos por las capas emergentes
 * (Tooltip / Popover / Popconfirm / Dropdown, etc.):
 * colocación de 12 posiciones, volteo al desbordar en el eje principal (flip)
 * y sujeción en el eje transversal (shift).
 * Todos los parámetros de entrada son literales rect, sin tocar el DOM;
 * se puede probar directamente con pruebas unitarias.
 */

/** Posición de la capa emergente (dirección + alineación) */
export type LhPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

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

/** Forma de disparo */
export type LhPopconfirmTrigger = 'click' | 'hover' | 'focus' | 'manual'

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

/** Tono de la confirmación */
export type LhPopconfirmType = 'info' | 'warning' | 'danger'