feat(empty): new Empty component

site/site.config.mjs

@@ -464,6 +464,14 @@ const docs = [
         component: () => import('tdesign-vue/descriptions/descriptions.md'),
         componentEn: () => import('tdesign-vue/descriptions/descriptions.en-US.md'),
       },
+      {
+        title: 'Empty 空状态',
+        titleEn: 'Empty',
+        name: 'empty',
+        path: '/vue/components/empty',
+        component: () => import('tdesign-vue/empty/empty.md'),
+        componentEn: () => import('tdesign-vue/empty/empty.en-US.md'),
+      },
       {
         title: 'Image 图片',
         titleEn: 'Image',

src/components.ts

@@ -50,6 +50,7 @@ export * from './calendar';
 export * from './card';
 export * from './comment';
 export * from './descriptions';
+export * from './empty';
 export * from './image';
 export * from './image-viewer';
 export * from './list';

src/config-provider/type.ts

@@ -10,7 +10,7 @@ import { ButtonProps } from '../button';
 import { FormErrorMessage } from '../form';
 import { MessageOptions } from '../message';
 import { ImageProps } from '../image';
-import { TNode, SizeEnum } from '../common';
+import { TNode, SizeEnum, AttachNode } from '../common';
 
 export interface GlobalConfigProvider {
   /**
@@ -25,6 +25,10 @@ export interface GlobalConfigProvider {
    * 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`
    */
   animation?: Partial<Record<'include' | 'exclude', Array<AnimationType>>>;
+  /**
+   * null
+   */
+  attach?: AttachNode | { imageViewer?: AttachNode; message?: AttachNode; popup?: AttachNode; dialog?: AttachNode };
   /**
    * 日历组件全局配置
    */
@@ -46,6 +50,10 @@ export interface GlobalConfigProvider {
    * 日期选择器全局配置
    */
   datePicker?: DatePickerConfig;
+  /**
+   * 描述全局配置
+   */
+  descriptions?: DescriptionsConfig;
   /**
    * 对话框全局配置
    */
@@ -54,6 +62,10 @@ export interface GlobalConfigProvider {
    * 抽屉全局配置
    */
   drawer?: DrawerConfig;
+  /**
+   * 空状态全局配置
+   */
+  empty?: EmptyConfig;
   /**
    * 表单组件全局配置
    */
@@ -94,6 +106,10 @@ export interface GlobalConfigProvider {
    * 气泡确认框全局配置
    */
   popconfirm?: PopconfirmConfig;
+  /**
+   * 评分全局配置
+   */
+  rate?: RateConfig;
   /**
    * 选择器组件全局配置
    */
@@ -126,6 +142,10 @@ export interface GlobalConfigProvider {
    * 树选择器组件全局配置
    */
   treeSelect?: TreeSelectConfig;
+  /**
+   * 排版组件全局配置
+   */
+  typography?: TypographyConfig;
   /**
    * 上传组件全局配置
    */
@@ -775,6 +795,11 @@ export interface UploadConfigFileList {
 }
 
 export interface FormConfig {
+  /**
+   * 字段旁边的冒号，中文为“：”
+   * @default ''
+   */
+  colonText?: string;
   /**
    * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
    */
@@ -794,6 +819,10 @@ export interface TagConfig {
 }
 
 export interface StepsConfig {
+  /**
+   * 已完成步骤图标，【注意】使用渲染函数输出图标组件
+   */
+  checkIcon?: TNode;
   /**
    * 错误步骤图标，【注意】使用渲染函数输出图标组件
    */
@@ -813,6 +842,14 @@ export interface AlertConfig {
   expandText?: string;
 }
 
+export interface DescriptionsConfig {
+  /**
+   * 字段旁边的冒号，中文为“：”
+   * @default ''
+   */
+  colonText?: string;
+}
+
 export interface AnchorConfig {
   /**
    * 语言配置，“链接复制成功”描述文本
@@ -887,6 +924,42 @@ export interface GuideConfig {
   skipButtonProps?: ButtonProps;
 }
 
+export interface RateConfig {
+  /**
+   * 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']
+   */
+  rateText?: string[];
+}
+
+export interface EmptyConfig {
+  /**
+   * 空状态组件各类型的图片配置
+   */
+  image?: { maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode };
+  /**
+   * 空状态组件各类型的标题文本配置
+   */
+  titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string };
+}
+
+export interface TypographyConfig {
+  /**
+   * 语言配置，“收起”描述文本
+   * @default ''
+   */
+  collapseText?: string;
+  /**
+   * 语言配置，“复制成功”描述文本
+   * @default ''
+   */
+  copiedText?: string;
+  /**
+   * 语言配置，“展开”描述文本
+   * @default ''
+   */
+  expandText?: string;
+}
+
 export type AnimationType = 'ripple' | 'expand' | 'fade';
 
 export type IconConfig = GlobalIconConfig;

src/empty/__test__/index.test.js

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import Empty from '@/src/empty/index.ts';
+
+// every component needs four parts: props/events/slots/functions.
+describe('Empty', () => {
+  // test props api
+  describe(':props', () => {
+    it('', () => {
+      const wrapper = mount({
+        render() {
+          return <Empty></Empty>;
+        },
+      });
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
+  // test events
+  describe('@event', () => {});
+
+  // test slots
+  describe('<slot>', () => {
+    it('', () => {});
+  });
+
+  // test exposure function
+  describe('function', () => {
+    it('', () => {});
+  });
+});

src/empty/_example-composition/base.vue

@@ -0,0 +1,7 @@
+<template>
+  <t-space direction="vertical" align="center">
+    <t-empty>
+      <template #title>title</template>
+    </t-empty>
+  </t-space>
+</template>

src/empty/_example-composition/descriptions.vue

@@ -0,0 +1,18 @@
+<template>
+  <t-empty :description="description" :title="title">
+    <template #action>
+      <t-button @click="goToIndex">返回首页</t-button>
+    </template>
+  </t-empty>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const title = ref('空状态 Empty');
+const description = ref('暂无数据 Description');
+
+function goToIndex() {
+  console.log('go to index');
+  location.href = '/';
+}
+</script>

src/empty/_example-composition/operation.vue

@@ -0,0 +1,13 @@
+<template>
+  <t-empty>
+    <template #action>
+      <t-button @click="goToIndex">返回首页</t-button>
+    </template>
+  </t-empty>
+</template>
+<script setup>
+function goToIndex() {
+  console.log('go to index');
+  location.href = '/';
+}
+</script>

src/empty/_example-composition/self-defined.vue

@@ -0,0 +1,25 @@
+<template>
+  <t-row :gutter="40">
+    <t-col>
+      <t-empty description="暂无数据">
+        <template #image>
+          <ErrorCircleIcon :size="64" color="var(--td-text-color-placeholder)" />
+        </template>
+      </t-empty>
+    </t-col>
+    <t-col>
+      <t-empty description="暂无数据">
+        <template #image>
+          <div
+            style="
+              width: '64px';
+              height: '64px';
+              background-image: 'url(https://tdesign.gtimg.com/demo/demo-image-1.png)';
+              background-size: '100% 100%';
+            "
+          ></div>
+        </template>
+      </t-empty>
+    </t-col>
+  </t-row>
+</template>

src/empty/_example-composition/size.vue

@@ -0,0 +1,39 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group variant="primary-filled" :value="size" @change="onChange">
+      <t-radio-button value="small">small</t-radio-button>
+      <t-radio-button value="medium">medium</t-radio-button>
+      <t-radio-button value="large">large</t-radio-button>
+    </t-radio-group>
+    <div style="margin-top: '20px'; height: '100px'">
+      <t-row :gutter="40">
+        <t-col>
+          <t-empty type="empty" :size="size"></t-empty>
+        </t-col>
+        <t-col>
+          <t-empty type="maintenance" :size="size"></t-empty>
+        </t-col>
+        <t-col>
+          <t-empty type="network-error" :size="size"></t-empty>
+        </t-col>
+        <t-col>
+          <t-empty type="success" :size="size"></t-empty>
+        </t-col>
+        <t-col>
+          <t-empty type="fail" :size="size"></t-empty>
+        </t-col>
+      </t-row>
+    </div>
+  </t-space>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+type SIZE = 'small' | 'medium' | 'large';
+
+const size = ref('medium');
+
+function onChange(value: SIZE) {
+  this.size = value;
+}
+</script>

src/empty/_example-composition/status.vue

@@ -0,0 +1,19 @@
+<template>
+  <t-row :gutter="40">
+    <t-col>
+      <t-empty type="empty"></t-empty>
+    </t-col>
+    <t-col>
+      <t-empty type="maintenance"></t-empty>
+    </t-col>
+    <t-col>
+      <t-empty type="network-error"></t-empty>
+    </t-col>
+    <t-col>
+      <t-empty type="success"></t-empty>
+    </t-col>
+    <t-col>
+      <t-empty type="fail"></t-empty>
+    </t-col>
+  </t-row>
+</template>

src/empty/_example/base.vue

@@ -0,0 +1,7 @@
+<template>
+  <t-space direction="vertical" align="center">
+    <t-empty>
+      <template #title>title</template>
+    </t-empty>
+  </t-space>
+</template>

src/empty/_example/descriptions.vue

@@ -0,0 +1,24 @@
+<template>
+  <t-empty :description="description" :title="title">
+    <template #action>
+      <t-button @click="goToIndex">返回首页</t-button>
+    </template>
+  </t-empty>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      title: '空状态 Empty',
+      description: '暂无数据 Description',
+      timer: null,
+    };
+  },
+  methods: {
+    goToIndex() {
+      console.log('go to index');
+      location.href = '/';
+    },
+  },
+};
+</script>

src/empty/_example/operation.vue

@@ -0,0 +1,20 @@
+<template>
+  <t-empty>
+    <template #action>
+      <t-button @click="goToIndex">返回首页</t-button>
+    </template>
+  </t-empty>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    goToIndex() {
+      console.log('go to index');
+      location.href = '/';
+    },
+  },
+};
+</script>