Popconfirm 確認バルーン

軽量な二次確認：トリガーの近くに確認バルーンをポップアップし、ダイアログを開く必要がありません。セマンティクスはブロッキング確認（role="alertdialog"）で、開いたときフォーカスは「確認」ボタンに落ち、Tab は 2 つのボタンの間をループし、Escape はキャンセルとみなされます。

基本的な使い方

vue

<template>
  <LhPopconfirm title="このレコードを削除してもよろしいですか？" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">削除</LhButton>
  </LhPopconfirm>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const action = ref('')
function onConfirm() {
  action.value = '確認済み'
}
function onCancel() {
  action.value = 'キャンセル済み'
}
const pcVisible = ref(false)
</script>

vue

<script>
export default {
  data() {
    return { action: '', pcVisible: false }
  },
  methods: {
    onConfirm() {
      this.action = '確認済み'
    },
    onCancel() {
      this.action = 'キャンセル済み'
    },
  },
}
</script>

<template>
  <LhPopconfirm title="このレコードを削除してもよろしいですか？" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">削除</LhButton>
  </LhPopconfirm>
</template>

3 種類のニュアンス

vue

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

<template>
  <!-- 情報ニュアンス -->
  <LhPopconfirm type="info" title="このレコードのアクセス履歴を表示しますか？">
    <LhButton>情報</LhButton>
  </LhPopconfirm>
  <!-- 警告ニュアンス -->
  <LhPopconfirm type="warning" title="この操作はすべてのメンバーに通知されます。">
    <LhButton type="warning">警告</LhButton>
  </LhPopconfirm>
  <!-- 危険ニュアンス -->
  <LhPopconfirm type="danger" title="削除後は復元できません。">
    <LhButton type="danger">危険</LhButton>
  </LhPopconfirm>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 情報ニュアンス -->
  <LhPopconfirm type="info" title="このレコードのアクセス履歴を表示しますか？">
    <LhButton>情報</LhButton>
  </LhPopconfirm>
  <!-- 警告ニュアンス -->
  <LhPopconfirm type="warning" title="この操作はすべてのメンバーに通知されます。">
    <LhButton type="warning">警告</LhButton>
  </LhPopconfirm>
  <!-- 危険ニュアンス -->
  <LhPopconfirm type="danger" title="削除後は復元できません。">
    <LhButton type="danger">危険</LhButton>
  </LhPopconfirm>
</template>

カスタムテキストと配置

vue

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

<template>
  <!-- カスタムテキストと配置 -->
  <LhPopconfirm
    title="アーカイブ後はゴミ箱から復元できます。"
    confirm-text="アーカイブ"
    cancel-text="やめておく"
    placement="right"
  >
    <LhButton>カスタムテキスト</LhButton>
  </LhPopconfirm>
  <!-- ホバーでトリガー -->
  <LhPopconfirm title="ホバーするだけで確認できます。" trigger="hover" :show-after="0" placement="bottom">
    <LhButton>ホバーでトリガー</LhButton>
  </LhPopconfirm>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- カスタムテキストと配置 -->
  <LhPopconfirm
    title="アーカイブ後はゴミ箱から復元できます。"
    confirm-text="アーカイブ"
    cancel-text="やめておく"
    placement="right"
  >
    <LhButton>カスタムテキスト</LhButton>
  </LhPopconfirm>
  <!-- ホバーでトリガー -->
  <LhPopconfirm title="ホバーするだけで確認できます。" trigger="hover" :show-after="0" placement="bottom">
    <LhButton>ホバーでトリガー</LhButton>
  </LhPopconfirm>
</template>

ボタンテキストはデフォルトで言語パック popconfirm.confirm / popconfirm.cancel を使用し、confirm-text / cancel-text で上書きできます。

アイコン、確認ボタンタイプと挙動スイッチ

show-icon で警告アイコンを表示、confirm-button-type で確認ボタンのメインタイプを変更；disabled でトリガーを無効化；v-model:visible で表示を制御；hide-after で遅延自動折りたたみ；popper-class / teleport-target でポップアップ層をカスタマイズ。

vue

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

<template>
  <!-- アイコンと確認ボタンタイプ -->
  <LhPopconfirm title="このレコードを削除してもよろしいですか？" show-icon confirm-button-type="primary">
    <LhButton type="danger">アイコン付き</LhButton>
  </LhPopconfirm>
  <!-- 無効なトリガー -->
  <LhPopconfirm title="この操作は使用できません。" disabled>
    <LhButton disabled>無効</LhButton>
  </LhPopconfirm>
  <!-- 制御された表示と遅延折りたたみ -->
  <LhPopconfirm v-model:visible="pcVisible" title="制御されたバルーン" :hide-after="1000">
    <LhButton>{{ pcVisible ? '閉じる' : '開く' }}</LhButton>
  </LhPopconfirm>
</template>

vue

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

<template>
  <!-- アイコンと確認ボタンタイプ -->
  <LhPopconfirm title="このレコードを削除してもよろしいですか？" show-icon confirm-button-type="primary">
    <LhButton type="danger">アイコン付き</LhButton>
  </LhPopconfirm>
  <!-- 無効なトリガー -->
  <LhPopconfirm title="この操作は使用できません。" disabled>
    <LhButton disabled>無効</LhButton>
  </LhPopconfirm>
  <!-- 制御された表示と遅延折りたたみ -->
  <LhPopconfirm v-model:visible="pcVisible" title="制御されたバルーン" :hide-after="1000">
    <LhButton>{{ pcVisible ? '閉じる' : '開く' }}</LhButton>
  </LhPopconfirm>
</template>

Popconfirm API

Props

プロパティ	説明	型	デフォルト値
type	確認ニュアンス	`"info" \| "warning" \| "danger"`	`'warning'`
placement	表示位置	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"`	`'top'`
trigger	トリガー方式	`"click" \| "hover" \| "focus" \| "manual"`	`'click'`
title	確認内容（content スロットでも可）	`string`	—
confirmText	確認ボタンのテキスト（未指定時は言語パック popconfirm.confirm を使用）	`string`	—
cancelText	キャンセルボタンのテキスト（未指定時は言語パック popconfirm.cancel を使用）	`string`	—
confirmButtonType	確認ボタンのタイプ	`"default" \| "primary"`	`'primary'`
visible	手動で制御する表示状態（v-model:visible）	`boolean`	—
disabled	無効にするか	`boolean`	—
showIcon	ニュアンスアイコンを表示するか	`boolean`	`true`
popperClass	ポップアップ層のカスタムクラス名	`string`	—
teleportTarget	Teleport 先（セレクタまたは要素、デフォルトは body）	`string \| HTMLElement`	`'body'`
showAfter	遅延表示時間（ms）	`number`	—
hideAfter	遅延非表示時間（ms）	`number`	—
themeVars	コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書き	`{ [x: string]: string; }`	—
bgPattern	コンポーネントレベルの背景紋様。ConfigProvider の設定を上書き	`string`	—
sx	sx クイックレイアウトプロパティ（トリガーのルート要素に作用）	`LhSxProps`	—

Events

イベント	説明	パラメータ
confirm	確認ボタンをクリックしたあとに発生	—
cancel	キャンセルボタンをクリック、または Escape を押したあとに発生	—
update:visible	表示状態の変化	`(value: boolean)`
show	表示後に発生	—
hide	非表示後に発生	—

Slots

スロット	説明
default	トリガーの内容
content	カスタム確認内容

Methods

メソッド	説明
show	プログラムによる表示
hide	プログラムによる非表示
toggle	プログラムによる切り替え

アクセシビリティ

ポップアップ層は role="alertdialog" + aria-modal="true"、トリガーに aria-haspopup / aria-expanded を付与
開いたときフォーカスは「確認」ボタンに落ち、Tab は 2 つの操作ボタンの間をループし、閉じたあとトリガーにフォーカスを戻す
Escape はキャンセルとみなす（WAI-ARIA の alertdialog に準拠：Escape で閉じて否定と扱う）
確認内容は aria-labelledby で紐付け；ニュアンスアイコンは装飾的（aria-hidden）

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/popconfirm/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhPopconfirmProps

/**
 * Popconfirm コンポーネント Props
 */
export interface LhPopconfirmProps {
  /** 確認ニュアンス */
  type?: LhPopconfirmType
  /** 表示位置 */
  placement?: LhPlacement
  /** トリガー方式 */
  trigger?: LhPopconfirmTrigger
  /** 確認内容（content スロットでも可） */
  title?: string
  /** 確認ボタンのテキスト（未指定時は言語パック popconfirm.confirm を使用） */
  confirmText?: string
  /** キャンセルボタンのテキスト（未指定時は言語パック popconfirm.cancel を使用） */
  cancelText?: string
  /** 確認ボタンのタイプ */
  confirmButtonType?: 'default' | 'primary'
  /** 手動で制御する表示状態（v-model:visible） */
  visible?: boolean
  /** 無効にするか */
  disabled?: boolean
  /** ニュアンスアイコンを表示するか */
  showIcon?: boolean
  /** ポップアップ層のカスタムクラス名 */
  popperClass?: string
  /** Teleport 先（セレクタまたは要素、デフォルトは body） */
  teleportTarget?: string | HTMLElement
  /** 遅延表示時間(ms) */
  showAfter?: number
  /** 遅延非表示時間(ms) */
  hideAfter?: number
  /** コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書き */
  themeVars?: Record<string, string>
  /** コンポーネントレベルの背景紋様。ConfigProvider の設定を上書き */
  bgPattern?: string
  /** sx クイックレイアウトプロパティ（トリガーのルート要素に作用） */
  sx?: LhSxProps
}

LhPopconfirmPlacement _{（@lh-ui/share/core/shared/popper から）}

/**
 * Popper 配置エンジン（純関数、フレームワーク非依存）
 *
 * ポップアップ層（Tooltip / Popover / Popconfirm / Dropdown など）が共有する幾何計算：
 * 12 種類の placement 配置、主軸溢れ反転（flip）、交差軸の押し戻し（shift）。
 * 入力はすべて rect リテラルで DOM に触れず、そのまま単体テスト可能。
 */

/** ポップアップ層の方位（方向 + 整列） */
export type LhPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

LhPopconfirmTrigger _{（@lh-ui/share/core/popconfirm (logic.ts) から）}

/** トリガー方式 */
export type LhPopconfirmTrigger = 'click' | 'hover' | 'focus' | 'manual'

LhPopconfirmType _{（@lh-ui/share/core/popconfirm (logic.ts) から）}

/** 確認ニュアンス */
export type LhPopconfirmType = 'info' | 'warning' | 'danger'

Popconfirm 確認バルーン ​

基本的な使い方 ​

3 種類のニュアンス ​

カスタムテキストと配置 ​

アイコン、確認ボタンタイプと挙動スイッチ ​

Popconfirm API ​

Props ​

Events ​

Slots ​

Methods ​

アクセシビリティ ​

型定義 ​