إشعار Notification

بطاقة إشعار في الزاوية العلوية اليمنى (تدعم الزوايا الأربع)، تحمل معلومات تغذية راجعة تتطلب بقاءًا لفترة قصيرة: عنوان / متن / أيقونة دلالية / قابل للإغلاق / اختفاء تلقائي / تراكم. واجهة الخدمة الحتمية (LhNotification.success(...)).

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

vue

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

const showBasic = () => {
  LhNotification.info({ title: 'اكتملت المزامنة', content: 'تمت مزامنة 3 تغييرات إلى السحابة' })
}
</script>

<template>
  <LhButton @click="showBasic">فتح الإشعار</LhButton>
</template>

vue

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

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: 'اكتملت المزامنة', content: 'تمت مزامنة 3 تغييرات إلى السحابة' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">فتح الإشعار</LhButton>
</template>

الأنواع الدلالية

vue

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

const showInfo = () => LhNotification.info({ title: 'تلميح', content: 'محتوى' })
const showSuccess = () => LhNotification.success({ title: 'نجاح', content: 'اكتملت النسخة الاحتياطية' })
const showWarning = () => LhNotification.warning({ title: 'تحذير', content: 'مساحة التخزين غير كافية' })
const showDanger = () => LhNotification.danger({ title: 'فشل', content: 'انقطع الاتصال بالشبكة' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">معلومات</LhButton>
    <LhButton @click="showSuccess">نجاح</LhButton>
    <LhButton @click="showWarning">تحذير</LhButton>
    <LhButton @click="showDanger">خطر</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: 'تلميح', content: 'محتوى' })
    },
    showSuccess() {
      LhNotification.success({ title: 'نجاح', content: 'اكتملت النسخة الاحتياطية' })
    },
    showWarning() {
      LhNotification.warning({ title: 'تحذير', content: 'مساحة التخزين غير كافية' })
    },
    showDanger() {
      LhNotification.danger({ title: 'فشل', content: 'انقطع الاتصال بالشبكة' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">معلومات</LhButton>
    <LhButton @click="showSuccess">نجاح</LhButton>
    <LhButton @click="showWarning">تحذير</LhButton>
    <LhButton @click="showDanger">خطر</LhButton>
  </div>
</template>

موضع الظهور

يدعم position الزوايا الأربع.

vue

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

const showAt = (position) => {
  LhNotification.info({ title: 'مثال على الموضع', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">علوي يمين</LhButton>
    <LhButton @click="showAt('top-left')">علوي يسار</LhButton>
    <LhButton @click="showAt('bottom-right')">سفلي يمين</LhButton>
    <LhButton @click="showAt('bottom-left')">سفلي يسار</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: 'مثال على الموضع', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">علوي يمين</LhButton>
    <LhButton @click="showAt('top-left')">علوي يسار</LhButton>
    <LhButton @click="showAt('bottom-right')">سفلي يمين</LhButton>
    <LhButton @click="showAt('bottom-left')">سفلي يسار</LhButton>
  </div>
</template>

إشعار قابل للنقر

عند تمرير onClick تكتسب البطاقة دلالة الزر، فتصبح قابلة للتركيز عبر Tab والتفعيل بـ Enter / Space.

vue

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

const showClickable = () => {
  LhNotification.info({
    title: 'إصدار جديد متاح',
    content: 'انقر لعرض سجل التحديثات',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">إشعار مع إجراء</LhButton>
</template>

vue

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

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: 'إصدار جديد متاح',
        content: 'انقر لعرض سجل التحديثات',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">إشعار مع إجراء</LhButton>
</template>

زر الإغلاق

يتحكم show-close بإظهار زر الإغلاق (يُظهر افتراضيًا)، ويخصص close-label اسم إمكانية الوصول له.

vue

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

const notifyClosable = () => LhNotification.info({ title: 'تلميح', content: 'قابل للإغلاق يدويًا', showClose: true, closeLabel: 'فهمت، إغلاق' })
const notifyNoClose = () => LhNotification.info({ title: 'تلميح', content: 'ينتظر الإغلاق التلقائي فقط', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">إظهار زر الإغلاق</LhButton>
  <LhButton @click="notifyNoClose">بدون زر الإغلاق</LhButton>
</template>

vue

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

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: 'تلميح', content: 'قابل للإغلاق يدويًا', showClose: true, closeLabel: 'فهمت، إغلاق' })
    },
    notifyNoClose() {
      LhNotification.info({ title: 'تلميح', content: 'ينتظر الإغلاق التلقائي فقط', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">إظهار زر الإغلاق</LhButton>
  <LhButton @click="notifyNoClose">بدون زر الإغلاق</LhButton>
</template>

API

LhNotification Props

اسم الخاصية	الوصف	النوع	الافتراضي
type	النوع الدلالي	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	العنوان	`string`	—
content	المحتوى	`string`	—
showClose	إظهار زر الإغلاق	`boolean`	`true`
closeLabel	اسم إمكانية الوصول لزر الإغلاق (عند عدم التمرير يُؤخذ من حزمة اللغة `notification.close`)	`string`	—
onClick	callback النقر على البطاقة (عند تمريره تُعرض البطاقة بدلالة button)	`() => void`	—
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

طرق الخدمة: LhNotification(options) / LhNotification.success/info/warning/danger(options)، تُرجِع مقبض { close }؛ بالإضافة إلى LhNotification.close(id) وLhNotification.closeAll() وLhNotification.config({ duration, offset, appendTo }).

Events

اسم الحدث	الوصف	وسائط الاستدعاء
close	يُطلق عند النقر على زر الإغلاق في الإشعار	—

في الاستخدام الحتمي، يُدرَك الإغلاق (سواء التلقائي أو اليدوي) عبر callback تسمى onClose في Options.

Options

اسم الخاصية	الوصف	النوع	الافتراضي
title	العنوان	`string`	—
content	المحتوى	`string`	—
type	النوع الدلالي	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	مللي ثانية للإغلاق التلقائي، `0` يعني عدم الإغلاق التلقائي	`number`	`4500`
position	موضع الظهور	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	إظهار زر الإغلاق	`boolean`	`true`
sx	خصائص التخطيط السريع sx	`LhSxProps`	—
onClick	callback النقر على البطاقة	`() => void`	—
onClose	callback بعد الإغلاق	`() => void`	—

إمكانية الوصول

حاوية كل موضع role="region" + aria-live="polite"، فيُذاع الإشعار الجديد بلطف دون خطف التركيز
البطاقات التي مرر لها onClick تكون role="button" وقابلة للتركيز عبر Tab، وتُفعَّل بـ Enter / Space
زر الإغلاق يحمل aria-label (حزمة اللغة notification.close، ويمكن تجاوزه بـ closeLabel)
إزاحة التراكم تنتقل عبر CSS؛ والتأثيرات تحترم prefers-reduced-motion

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

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

LhNotificationOptions

/** خيارات الخدمة */
export interface LhNotificationOptions {
  /** العنوان */
  title: string
  /** المحتوى */
  content?: string
  /** النوع الدلالي، الافتراضي info */
  type?: LhNotificationType
  /** مللي ثانية للإغلاق التلقائي، 0 يعني عدم الإغلاق التلقائي (الافتراضي 4500) */
  duration?: number
  /** موضع الظهور (الافتراضي top-right) */
  position?: LhNotificationPosition
  /** إظهار زر الإغلاق (الافتراضي true) */
  showClose?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
  /** callback النقر على البطاقة (عند تمريره تصبح البطاقة قابلة للتركيز بدلالة button) */
  onClick?: () => void
  /** callback بعد الإغلاق (سواء التلقائي أو اليدوي) */
  onClose?: () => void
}

LhNotificationHandle

/** مقبض الخدمة */
export interface LhNotificationHandle {
  close: () => void
}

LhNotificationConfig

/** عناصر الإعداد الافتراضي العامة (LhNotification.config) */
export interface LhNotificationConfig {
  duration?: number
  offset?: number
  /** حاوية التركيب (الافتراضي body) */
  appendTo?: string | HTMLElement
}

LhNotificationProps

/** props مكوّن الإشعار (يُعرض داخليًا بواسطة الخدمة؛ ويمكن استخدامه إعلانيًا بمفرده) */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** اسم إمكانية الوصول لزر الإغلاق (عند عدم التمرير يُؤخذ من حزمة اللغة notification.close) */
  closeLabel?: string
  /** عند تمريره تصبح البطاقة قابلة للنقر */
  onClick?: () => void
  sx?: LhSxProps
}

LhNotificationType _{(مأخوذ من @lh-ui/share/core/notification)}

/** النوع الدلالي للإشعار (أربعة أنواع، بلا loading) */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

LhNotificationRecord _{(مأخوذ من @lh-ui/share/core/notification)}

/** شكل سجل الإشعار الواحد في طابور الخدمة */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** مللي ثانية للإغلاق التلقائي، 0 يعني عدم الإغلاق التلقائي */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

LhNotificationPosition _{(مأخوذ من @lh-ui/share/core/notification)}

/** موضع ظهور الإشعار (الزوايا الأربع) */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

الثوابت

الثوابت العامة التي يستخدمها هذا المكوّن (يمكن النقر على العنصر الذي يحمل الاسم نفسه في عمودي «النوع / الافتراضي» بجدول Props للقفز إلى هنا):

LH_NOTIFICATION_POSITION_CONST _{(مأخوذ من @lh-ui/share/core/notification)}

/** ثوابت الموضع */
export const LH_NOTIFICATION_POSITION_CONST = {
  'top-right': 'top-right',
  'top-left': 'top-left',
  'bottom-right': 'bottom-right',
  'bottom-left': 'bottom-left',
} as const

LH_NOTIFICATION_DURATION_DEFAULT _{(مأخوذ من @lh-ui/share/core/notification)}

/** مدة الإغلاق التلقائي الافتراضية (يبقى الإشعار أطول من الرسالة) */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

LH_NOTIFICATION_GAP_DEFAULT _{(مأخوذ من @lh-ui/share/core/notification)}

/** تباعد التراكم بالبكسل */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

إشعار Notification ​

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

الأنواع الدلالية ​

موضع الظهور ​

إشعار قابل للنقر ​

زر الإغلاق ​

API ​

LhNotification Props ​

Events ​

Options ​

إمكانية الوصول ​

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

الثوابت ​