From 084767c1035a31d078abf2ffbe77ef57a5b2781d Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Thu, 5 Dec 2024 19:21:57 +0800
Subject: [PATCH] feat(comp:alert): support centered

---
 packages/components/alert/__tests__/alert.spec.ts | 6 ++++++
 packages/components/alert/demo/Centered.md        | 9 +++++++++
 packages/components/alert/demo/Centered.vue       | 3 +++
 packages/components/alert/docs/Api.zh.md          | 1 +
 packages/components/alert/src/Alert.tsx           | 1 +
 packages/components/alert/src/types.ts            | 1 +
 packages/components/alert/style/index.less        | 9 ++++++++-
 packages/components/config/src/defaultConfig.ts   | 1 +
 packages/components/config/src/types.ts           | 1 +
 9 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/alert/demo/Centered.md
 create mode 100644 packages/components/alert/demo/Centered.vue

diff --git a/packages/components/alert/__tests__/alert.spec.ts b/packages/components/alert/__tests__/alert.spec.ts
index eba352055..f0eba8f9e 100644
--- a/packages/components/alert/__tests__/alert.spec.ts
+++ b/packages/components/alert/__tests__/alert.spec.ts
@@ -35,6 +35,12 @@ describe('Alert', () => {
     expect(wrapper.find('.ix-alert').classes()).toContain('ix-alert-banner')
   })
 
+  test('props centered work', async () => {
+    const wrapper = AlertMount({ props: { centered: true } })
+
+    expect(wrapper.find('.ix-alert').classes()).toContain('ix-alert-centered')
+  })
+
   test('props icon work', async () => {
     const wrapper = AlertMount({ props: { icon: 'bug' } })
 
diff --git a/packages/components/alert/demo/Centered.md b/packages/components/alert/demo/Centered.md
new file mode 100644
index 000000000..e3198ef41
--- /dev/null
+++ b/packages/components/alert/demo/Centered.md
@@ -0,0 +1,9 @@
+---
+order: 3
+title:
+  zh: 居中提示
+---
+
+## zh
+
+提示信息居中展示。
diff --git a/packages/components/alert/demo/Centered.vue b/packages/components/alert/demo/Centered.vue
new file mode 100644
index 000000000..f073f8dfb
--- /dev/null
+++ b/packages/components/alert/demo/Centered.vue
@@ -0,0 +1,3 @@
+<template>
+  <IxAlert centered type="error"> 我长话短说，但是说来话长。</IxAlert>
+</template>
diff --git a/packages/components/alert/docs/Api.zh.md b/packages/components/alert/docs/Api.zh.md
index 34f596b6d..c7e4970bd 100644
--- a/packages/components/alert/docs/Api.zh.md
+++ b/packages/components/alert/docs/Api.zh.md
@@ -5,6 +5,7 @@
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `banner` | 是否用作顶部提示 | `boolean` | `false` | - |- |
+| `centered` | 信息提示是否居中 | `boolean` | `false` | ✅ |- |
 | `closable` | 信息提示是否可关闭 | `boolean` | `false` | ✅ |- |
 | `closeIcon` | 自定义关闭按钮 | `string \| #closeIcon` | `close` | - | - |
 | `description` | 辅助性文字介绍 | `string \| #description` | - | - |- |
diff --git a/packages/components/alert/src/Alert.tsx b/packages/components/alert/src/Alert.tsx
index 02fc0fd8b..3a98708d1 100644
--- a/packages/components/alert/src/Alert.tsx
+++ b/packages/components/alert/src/Alert.tsx
@@ -71,6 +71,7 @@ export default defineComponent({
         [prefixCls]: true,
         [`${prefixCls}-${props.type}`]: true,
         [`${prefixCls}-banner`]: props.banner,
+        [`${prefixCls}-centered`]: props.centered || config.centered,
         [`${prefixCls}-with-description`]: slots.description || props.description,
       })
     })
diff --git a/packages/components/alert/src/types.ts b/packages/components/alert/src/types.ts
index 18a0c946b..bb1eed5b8 100644
--- a/packages/components/alert/src/types.ts
+++ b/packages/components/alert/src/types.ts
@@ -10,6 +10,7 @@ import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 export const alertProps = {
   banner: { type: Boolean, default: false },
+  centered: { type: Boolean, default: undefined },
   closable: { type: Boolean, default: undefined },
   closeIcon: { type: String, default: 'close' },
   description: String,
diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
index b86941902..2ef2f0d7d 100644
--- a/packages/components/alert/style/index.less
+++ b/packages/components/alert/style/index.less
@@ -25,6 +25,10 @@
     border-bottom-color: var(--ix-color-border-secondary);
   }
 
+  &-centered {
+    justify-content: center;
+  }
+
   &-icon {
     margin-right: var(--ix-margin-size-xs);
   }
@@ -46,10 +50,13 @@
   }
 
   &-content {
-    flex: 1;
     min-width: 0;
   }
 
+  &:not(&-centered) &-content {
+    flex: 1;
+  }
+
   &-description {
     .reset-font-size();
   }
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
index 9907e0245..7adae4fcd 100644
--- a/packages/components/config/src/defaultConfig.ts
+++ b/packages/components/config/src/defaultConfig.ts
@@ -52,6 +52,7 @@ export const defaultConfig: GlobalConfig = {
   },
 
   alert: {
+    centered: false,
     closable: false,
     icon: {
       success: 'check-circle',
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index f07d3ee94..860022628 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -133,6 +133,7 @@ export interface ThemeConfig extends DeepPartialThemeTokens {
 }
 
 export interface AlertConfig {
+  centered: boolean
   closable: boolean
   icon: string | Partial<Record<AlertType, string>>
 }