diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue index b8869ff5b9290746c153fbd39027618ae3799f03..38ea127aedeb5740d9fb723a7e8348ad37df1eff 100644 --- a/packages/docs/src/App.vue +++ b/packages/docs/src/App.vue @@ -130,10 +130,13 @@ router.beforeEach((to) => { diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue b/packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue new file mode 100644 index 0000000000000000000000000000000000000000..0e27553662223a1279be1ca0ab89c5f28d6bdbc4 --- /dev/null +++ b/packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue @@ -0,0 +1,60 @@ + + + +#### 设置消息位置 + +- 调用 `useMessage` 时,可传入 `target` 参数,用于指定消息显示在哪个元素附近。 +- 每种消息方法(如 `info`、`success` 等)都支持传入配置对象,其中可设置以下位置属性: + - `position`:指定消息出现在目标元素的 `top`(顶部)或 `bottom`(底部)。 + - `targetAlign`:设置消息框与目标元素的对齐方式,支持 `center`(居中)、`left`(左对齐)和 `right`(右对齐)。 + - **注意**:仅当指定了 `target` 元素时,`targetAlign` 才会生效。 + + + +#### Set Message Position + +- When calling `useMessage`, you can pass a `target` parameter to specify which element the message should appear near. +- Each message method (e.g., `info`, `success`, etc.) supports passing a configuration object, which can include the following positioning properties: + - `position`: Specifies whether the message appears at the `top` or `bottom` of the target element. + - `targetAlign`: Sets the alignment of the message box relative to the target element, supporting `center`, `left`, and `right`. + - **Note**: `targetAlign` will only take effect when a `target` element is specified. + + + + diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue b/packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue new file mode 100644 index 0000000000000000000000000000000000000000..e1f9c25584b5348f495d1bfc31a54ef6b1d9a19c --- /dev/null +++ b/packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue @@ -0,0 +1,58 @@ + + + +### 主题规范 + +鲲鹏、昇腾及欧拉主题规范中要求图标与文字顶部对齐,可给`OMessage`组件添加 `c-message-align-top` 实现该效果;要求文字左对齐,可覆盖 CSS 变量 `--message-text-align: left`。 + + + +### Theming Specifications + +The Kunpeng, Ascend, and openEuler theming specifications require icons to be top-aligned with text. +This can be achieved by adding the `c-message-align-top` class to the `OMessage` component. +Additionally, left-aligned text is required and can be implemented by overriding the CSS variable `--message-text-align: left`. + + + + + diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue b/packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue new file mode 100644 index 0000000000000000000000000000000000000000..1c06ea48e780e5ae0e646df7f8fd9a5120ccdc8d --- /dev/null +++ b/packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue @@ -0,0 +1,36 @@ + + + +### 内联 + + + +### Inline + + + diff --git a/packages/opendesign/src/message/__docs__/index.en-US.md b/packages/opendesign/src/message/__docs__/index.en-US.md new file mode 100644 index 0000000000000000000000000000000000000000..85e247d4de59b08a4edd3aaef9108d2a7893bf87 --- /dev/null +++ b/packages/opendesign/src/message/__docs__/index.en-US.md @@ -0,0 +1,53 @@ +--- +sidebar: OMessage +kind: feedback +--- + +# OMessage + +## Demo + + + + + + +## API + + + +### useMessage + +```ts +type MessageTarget = string | ComponentPublicInstance | HTMLElement | null | undefined; +type MessageParamsT = Partial< + // MessagePropsT: The type of props for the OMessage component + MessagePropsT & { + // Message content + content: string | VNode | Component; + // Position where the message is displayed + position: 'top' | 'bottom'; + // Horizontal alignment of the message box relative to `target` + targetAlign?: 'center' | 'left' | 'right'; + // Icon for the message + icon: VNode | Component; + // Duration for which the message is displayed + onDurationEnd: () => void; + // Click event for the message box's own close button + onClose: (ev?: MouseEvent) => void; + } +>; +function useMessage(target?: Ref | MessageTarget): { + /** @return Returns a function that closes this message */ + show: (params: MessageParamsT) => () => void; + info: (params: Omit) => () => void; + success: (params: Omit) => () => void; + warning: (params: Omit) => () => void; + danger: (params: Omit) => () => void; + loading: (params: Omit) => () => void; + // Closes all messages rendered by this useMessage instance + close: () => void; + // Closes all messages rendered by all instances + closeAll: () => void; +}; +``` diff --git a/packages/opendesign/src/message/__docs__/index.zh-CN.md b/packages/opendesign/src/message/__docs__/index.zh-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..045f74f031e7dd108344ca3329593687509067e6 --- /dev/null +++ b/packages/opendesign/src/message/__docs__/index.zh-CN.md @@ -0,0 +1,53 @@ +--- +sidebar: OMessage 消息 +kind: feedback +--- + +# OMessage 消息 + +## 示例 + + + + + + +## API + + + +### useMessage + +```ts +type MessageTarget = string | ComponentPublicInstance | HTMLElement | null | undefined; +type MessageParamsT = Partial< + // MessagePropsT: OMessage组件的props的类型 + MessagePropsT & { + // 消息内容 + content: string | VNode | Component; + // 消息显示的位置 + position: 'top' | 'bottom'; + // 消息框与 `target` 的水平对齐方式 + targetAlign?: 'center' | 'left' | 'right'; + // 消息的图标 + icon: VNode | Component; + // 消息显示的持续时间 + onDurationEnd: () => void; + // 消息框自身关闭按钮的点击事件 + onClose: (ev?: MouseEvent) => void; + } +>; +function useMessage(target?: Ref | MessageTarget): { + /** @return 关闭该条消息框的函数 */ + show: (params: MessageParamsT) => () => void; + info: (params: Omit) => () => void; + success: (params: Omit) => () => void; + warning: (params: Omit) => () => void; + danger: (params: Omit) => () => void; + loading: (params: Omit) => () => void; + // 关闭本 useMessage 实例渲染的所有消息 + close: () => void; + // 关闭所有实例渲染的所有消息 + closeAll: () => void; +}; +``` diff --git a/packages/opendesign/src/message/style/style.scss b/packages/opendesign/src/message/style/style.scss index b18580a9ad690ef7151f17d25554e3fd0a9424d1..037d702c91605c8a23ce518b433549ed4441aa63 100644 --- a/packages/opendesign/src/message/style/style.scss +++ b/packages/opendesign/src/message/style/style.scss @@ -53,7 +53,7 @@ .o-message-list { position: fixed; - z-index: 1001; + z-index: var(--z-index); left: 50%; transform: translateX(-50%); display: flex; diff --git a/packages/opendesign/src/message/style/theme-ascend.scss b/packages/opendesign/src/message/style/theme-ascend.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9df9f6017c7f8e3123b4caf88e8cc5ebcd2fd172 100644 --- a/packages/opendesign/src/message/style/theme-ascend.scss +++ b/packages/opendesign/src/message/style/theme-ascend.scss @@ -0,0 +1,8 @@ +@use './theme-common.scss' as *; + +.o-message-info { + --message-icon-color: #058ef0; + &.o-message-colorful { + --message-bg-color: #e8f9ff; + } +} diff --git a/packages/opendesign/src/message/style/theme-common.scss b/packages/opendesign/src/message/style/theme-common.scss new file mode 100644 index 0000000000000000000000000000000000000000..799cb1596dd0ca005d132bd1c9783bcdc027c426 --- /dev/null +++ b/packages/opendesign/src/message/style/theme-common.scss @@ -0,0 +1,7 @@ +.c-message-align-top { + --message-align: flex-start; + --message-text-height: var(--message-icon-size); +} +.o-message-list { + --z-index: 1008; +} diff --git a/packages/opendesign/src/message/style/theme-kunpeng.scss b/packages/opendesign/src/message/style/theme-kunpeng.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9df9f6017c7f8e3123b4caf88e8cc5ebcd2fd172 100644 --- a/packages/opendesign/src/message/style/theme-kunpeng.scss +++ b/packages/opendesign/src/message/style/theme-kunpeng.scss @@ -0,0 +1,8 @@ +@use './theme-common.scss' as *; + +.o-message-info { + --message-icon-color: #058ef0; + &.o-message-colorful { + --message-bg-color: #e8f9ff; + } +} diff --git a/packages/opendesign/src/message/style/theme-openeuler.scss b/packages/opendesign/src/message/style/theme-openeuler.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ce1e5deba3068a45cec76d7d5fea27346bdb6b20 100644 --- a/packages/opendesign/src/message/style/theme-openeuler.scss +++ b/packages/opendesign/src/message/style/theme-openeuler.scss @@ -0,0 +1,8 @@ +@use './theme-common.scss' as *; + +.o-message-info { + --message-icon-color: #058ef0; + &.o-message-colorful { + --message-bg-color: #cedbf5; + } +} diff --git a/packages/opendesign/src/message/style/var.scss b/packages/opendesign/src/message/style/var.scss index 7c8cdd760e9ccdbce6a517bf50eba67262e4e0fa..779cf28a4a8057639dc335897e8129bd2345acac 100644 --- a/packages/opendesign/src/message/style/var.scss +++ b/packages/opendesign/src/message/style/var.scss @@ -72,4 +72,5 @@ --message-list-offset: 32px; --message-list-top-offset: var(--message-list-offset); --message-list-bottom-offset: var(--message-list-offset); + --z-index: 1001; } diff --git a/packages/opendesign/src/message/types.ts b/packages/opendesign/src/message/types.ts index 21b1807d5b0869cedf16c7df9dd7406395219252..693970e4152b6bdf0ff5a6d403b06f01f1f539fc 100644 --- a/packages/opendesign/src/message/types.ts +++ b/packages/opendesign/src/message/types.ts @@ -7,48 +7,59 @@ export type MessagePositionT = 'top' | 'bottom'; export const messageProps = { /** - * 消息是否可见 v-model + * @zh-CN 消息是否可见 v-model + * @en-US Message is visible v-model */ visible: { type: Boolean, default: undefined, }, /** - * 非受控模式,消息是否默认可见 + * @zh-CN 非受控模式,消息是否默认可见 + * @en-US Non-controlled mode, message is visible by default + * @default true */ defaultVisible: { type: Boolean, default: true, }, /** - * 状态 MessageStatusT + * @zh-CN 状态 + * @en-US Status + * @default 'info' */ status: { type: String as PropType, default: 'info', }, /** - * 预置背景(跟随状态) + * @zh-CN 是否是彩色背景(跟随 status 变化) + * @en-US Is colored background (follows the status change) + * @default false */ colorful: { type: Boolean, default: false, }, /** - * 消息显示的持续时间,函数式调用时,默认值为3000 + * @zh-CN 消息显示的持续时间(单位ms)。未设置或小于等于0时,消息将不会自动关闭 + * @en-US The duration for which the message is displayed (unit: ms). If not set or less than or equal to 0, the message will not close automatically */ duration: { type: Number, }, /** - * 是否可手动关闭 + * @zh-CN 是否可手动关闭 + * @en-US Whether to manually close + * @default false */ closable: { type: Boolean, default: false, }, /** - * 关闭前的钩子函数 + * @zh-CN 关闭前的钩子函数 + * @en-US Hook function before closing */ beforeClose: { type: Function as PropType<() => Promise | boolean>,