Popconfirm (تأكيد منبثق)

تأكيد ثانوي خفيف: يظهر فقاعة تأكيد بالقرب من المُطلِّق دون الحاجة إلى فتح مربع حوار. دلالته تأكيد اعتراضي (role="alertdialog"): عند الفتح يقع التركيز على زر «التأكيد»، ويدور Tab بين الزرَّين، ويُعتبَر Escape إلغاءً.

الاستخدام الأساسي

تأكيد الحذف

<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>

<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>

ثلاث نبرات

info / warning / danger

<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>

<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>

نص مخصَّص وموضع

النص / الموضع / طريقة الإطلاق

<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>

<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 الطبقة المنبثقة.

أيقونة ونوع الزر

<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>

<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	صنف CSS مخصَّص للطبقة المنبثقة	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 بين زرَّي العملية، ويُعاد التركيز إلى المُطلِّق بعد الإغلاق
• يُعتبَر Escape إلغاءً (موائمًا لـ WAI-ARIA alertdialog: يُغلق Escape ويُعتبَر ردًا سلبيًا)
• يُربَط محتوى التأكيد عبر aria-labelledby؛ وأيقونة النبرة زخرفية (aria-hidden)

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/popconfirm/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhPopconfirmProps

/**
 * Props مكوّن Popconfirm
 */
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
  /** صنف CSS مخصَّص للطبقة المنبثقة */
  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 موضعًا، الانقلاب عند تجاوز المحور الرئيسي (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'