feat(comp:alert): support centered

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' } })
 

packages/components/alert/demo/Centered.md

@@ -0,0 +1,9 @@
+---
+order: 3
+title:
+  zh: 居中提示
+---
+
+## zh
+
+提示信息居中展示。

packages/components/alert/demo/Centered.vue

@@ -0,0 +1,3 @@
+<template>
+  <IxAlert centered type="error"> 我长话短说，但是说来话长。</IxAlert>
+</template>

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

packages/components/alert/src/Alert.tsx

@@ -60,7 +60,7 @@
 
     watch(pageIndex, index => {
       const { pagination } = props
       isObject(pagination) && callEmit(pagination.onChange, index)
     })
 
     const classes = computed(() => {
@@ -71,6 +71,7 @@
         [prefixCls]: true,
         [`${prefixCls}-${props.type}`]: true,
         [`${prefixCls}-banner`]: props.banner,
+        [`${prefixCls}-centered`]: props.centered || config.centered,
         [`${prefixCls}-with-description`]: slots.description || props.description,
       })
     })

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,

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();
   }

packages/components/config/src/defaultConfig.ts

@@ -52,6 +52,7 @@ export const defaultConfig: GlobalConfig = {
   },
 
   alert: {
+    centered: false,
     closable: false,
     icon: {
       success: 'check-circle',

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