Message (رسالة عامة)

تغذية راجعة خفيفة عامة، تُستخدم عادة للإخبار بنتيجة عملية لمرة واحدة. تعتمد بشكل أساسي على واجهة الخدمة الحتمية (LhMessage.success(...))، مع الطوابير تُعرض في حاوية مستقلة لا تعتمد على شجرة المكوّنات، وتُزال أقدم رسالة تلقائيًا عند تجاوز الحد.

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

vue

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

const showBasic = () => {
  LhMessage('هذا تلميح رسالة')
}
</script>

<template>
  <LhButton @click="showBasic">إظهار التلميح</LhButton>
</template>

vue

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

export default {
  methods: {
    showBasic() {
      LhMessage('هذا تلميح رسالة')
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">إظهار التلميح</LhButton>
</template>

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

أربعة أنواع دلالية + loading؛ وwarning / danger / error تُذاع فورًا بدور role="alert"، أما البقية فتُذاع بلطف.

vue

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

const showInfo = () => LhMessage.info('معلومات تلميحية')
const showSuccess = () => LhMessage.success('تم الحفظ بنجاح')
const showWarning = () => LhMessage.warning('يرجى الانتباه إلى المخاطر')
const showDanger = () => LhMessage.danger('فشلت العملية')
// لا يُغلق loading تلقائيًا افتراضيًا، استخدم المقبض المرجع للإغلاق اليدوي
const showLoading = () => {
  const handle = LhMessage.loading('جارٍ المزامنة…')
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">معلومات</LhButton>
    <LhButton @click="showSuccess">نجاح</LhButton>
    <LhButton @click="showWarning">تحذير</LhButton>
    <LhButton @click="showDanger">خطر</LhButton>
    <LhButton @click="showLoading">جارٍ التحميل (إغلاق يدوي)</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showInfo() {
      LhMessage.info('معلومات تلميحية')
    },
    showSuccess() {
      LhMessage.success('تم الحفظ بنجاح')
    },
    showWarning() {
      LhMessage.warning('يرجى الانتباه إلى المخاطر')
    },
    showDanger() {
      LhMessage.danger('فشلت العملية')
    },
    // لا يُغلق loading تلقائيًا افتراضيًا، استخدم المقبض المرجع للإغلاق اليدوي
    showLoading() {
      const handle = LhMessage.loading('جارٍ المزامنة…')
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">معلومات</LhButton>
    <LhButton @click="showSuccess">نجاح</LhButton>
    <LhButton @click="showWarning">تحذير</LhButton>
    <LhButton @click="showDanger">خطر</LhButton>
    <LhButton @click="showLoading">جارٍ التحميل (إغلاق يدوي)</LhButton>
  </div>
</template>

قابل للإغلاق والحد الأقصى للطوابير

showClose يُظهر زر الإغلاق؛ والطوابير محدودة افتراضيًا بـ 5 رسائل (تُعدَّل عبر LhMessage.config({ max }))، وعند التجاوز تُزال الأقدم.

vue

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

const showClosable = () => LhMessage.success('تم الحفظ بنجاح', { showClose: true })
// closeLabel يخصص اسم إمكانية الوصول لزر الإغلاق
const showCloseLabel = () => LhMessage.info('يرجى الاستلام', { showClose: true, closeLabel: 'فهمت، إغلاق' })
</script>

<template>
  <LhButton @click="showClosable">قابل للإغلاق يدويًا</LhButton>
  <LhButton @click="showCloseLabel">نص إغلاق مخصص</LhButton>
</template>

vue

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

export default {
  methods: {
    showClosable() {
      LhMessage.success('تم الحفظ بنجاح', { showClose: true })
    },
    // closeLabel يخصص اسم إمكانية الوصول لزر الإغلاق
    showCloseLabel() {
      LhMessage.info('يرجى الاستلام', { showClose: true, closeLabel: 'فهمت، إغلاق' })
    },
  },
}
</script>

<template>
  <LhButton @click="showClosable">قابل للإغلاق يدويًا</LhButton>
  <LhButton @click="showCloseLabel">نص إغلاق مخصص</LhButton>
</template>

الإعداد العام

import { LhMessage } from '@lh-ui/vue3'

LhMessage.config({
  duration: 3000, // مللي ثانية للإغلاق التلقائي (0 يعني عدم الإغلاق التلقائي)
  max: 5,         // الحد الأقصى للرسائل المعروضة في الطابور
  offset: 20,     // إزاحة عن أعلى إطار العرض بالبكسل
  appendTo: 'body', // حاوية التركيب (مُحدِّد أو عنصر)
})

API

LhMessage Props

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

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

Events

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

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

Options

اسم الخاصية	الوصف	النوع	الافتراضي
content	محتوى الرسالة	`string`	—
type	النوع الدلالي	`'info' \| 'success' \| 'warning' \| 'danger' \| 'error' \| 'loading'`	`'info'`
duration	مللي ثانية للإغلاق التلقائي، `0` يعني عدم الإغلاق التلقائي (loading افتراضه `0`)	`number`	`3000`
showClose	إظهار زر الإغلاق	`boolean`	`false`
offset	إزاحة عن أعلى إطار العرض بالبكسل	`number`	`20`
sx	خصائص التخطيط السريع sx	`LhSxProps`	—
onClose	callback بعد الإغلاق	`() => void`	—

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

الحاوية والرسائل منطقة حية (live region): info / success / loading تستخدم role="status" للإذاعة اللطيفة، وwarning / danger / error تستخدم role="alert" للإذاعة الفورية
تصميم غير معترض: لا ينقل التركيز ولا يحجب تدفق لوحة المفاتيح
زر الإغلاق يحمل aria-label (حزمة اللغة message.close، ويمكن تجاوزه بـ closeLabel)
التأثيرات تحترم prefers-reduced-motion

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

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

LhMessageOptions

/** خيارات الخدمة: محتوى نصي + عرض وcallback */
export interface LhMessageOptions {
  /** محتوى الرسالة */
  content: string
  /** النوع الدلالي، الافتراضي info */
  type?: LhMessageType
  /** مللي ثانية للإغلاق التلقائي، 0 يعني عدم الإغلاق التلقائي (loading افتراضه 0، وللبقية 3000) */
  duration?: number
  /** إظهار زر الإغلاق */
  showClose?: boolean
  /** إزاحة عن أعلى إطار العرض بالبكسل (الافتراضي 20) */
  offset?: number
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
  /** callback بعد الإغلاق (سواء التلقائي أو اليدوي) */
  onClose?: () => void
}

LhMessageHandle

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

LhMessageProps

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

LhMessageConfig

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

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

/** النوع الدلالي للرسالة (أربعة أنواع + loading) */
export type LhMessageType =
  | (typeof LH_MESSAGE_TYPE_CONST)[keyof typeof LH_MESSAGE_TYPE_CONST]

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

/** شكل سجل الرسالة الواحدة في طابور الخدمة */
export interface LhMessageRecord {
  id: number
  type: LhMessageType
  content: string
  /** مللي ثانية للإغلاق التلقائي، 0 يعني عدم الإغلاق التلقائي */
  duration: number
  showClose: boolean
  /** إزاحة عن أعلى إطار العرض بالبكسل */
  offset: number
  sx?: LhSxProps
  onClose?: () => void
}

الثوابت

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

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

/** ثوابت النوع (تضيف loading إلى ثوابت الأنواع الدلالية العامة) */
export const LH_MESSAGE_TYPE_CONST = {
  ...LH_TYPES_CONST,
  /** @alias تحميل */
  loading: 'loading',
} as const

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

/** مدة الإغلاق التلقائي الافتراضية (النطاق الدلالي loading لا يُغلق تلقائيًا) */
export const LH_MESSAGE_DURATION_DEFAULT = 3000

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

/** الحد الأقصى للرسائل المعروضة في الطابور، وعند التجاوز تُزال الأقدم */
export const LH_MESSAGE_MAX_DEFAULT = 5

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

/** الإزاحة الافتراضية عن أعلى إطار العرض بالبكسل */
export const LH_MESSAGE_OFFSET_DEFAULT = 20

Message (رسالة عامة) ​

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

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

قابل للإغلاق والحد الأقصى للطوابير ​

الإعداد العام ​

API ​

LhMessage Props ​

Events ​

Options ​

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

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

الثوابت ​