feat(empty): add new component Empty (#3287)

* feat(empty): new Empty component * fix(empty): fix render svg * perf(empty): optimization code * chore(settings): revert vscode settings file * chore(empty): rm overage file * chore: fix demo * chore: fix docs * chore: fix demo * chore: update snapshot * chore: fix test --------- Co-authored-by: Uyarn <uyarnchen@gmail.com>
Tencent · Aug 29, 2024 · 1e7fdcf · 1e7fdcf
1 parent 5a78f88
commit 1e7fdcf
Show file tree

Hide file tree

Showing 33 changed files with 1,574 additions and 113 deletions.
diff --git a/site/site.config.mjs b/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',

diff --git a/site/test-coverage.js b/site/test-coverage.js
@@ -1,166 +1,185 @@
 module.exports = {
-  '': '100%',
-  'common/js/colorPicker': '63.51%',
-  'common/js/datePicker': '67.47%',
+  '': '97.95%',
+  'common/js': '87.23%',
+  'common/js/colorPicker': '60.93%',
+  'common/js/datePicker': '62.36%',
   'common/js/globalConfig': '100%',
   'common/js/globalConfig/locale': '100%',
-  'common/js/inputNumber': '40.48%',
-  'common/js/loading': '73.17%',
+  'common/js/inputNumber': '34.52%',
+  'common/js/loading': '65.85%',
   'common/js/log': '72.72%',
-  'common/js/table': '15.37%',
-  'common/js/timePicker': '71.69%',
-  'common/js/tree': '93.33%',
-  'common/js/upload': '39.94%',
-  'common/js/utils': '48.46%',
-  'common/js/watermark': '6.97%',
-  affix: '89.47%',
+  'common/js/slider': '24.07%',
+  'common/js/statistic': '93.9%',
+  'common/js/table': '19.27%',
+  'common/js/tabs': '71.79%',
+  'common/js/timePicker': '64.21%',
+  'common/js/tree': '93.82%',
+  'common/js/upload': '81.51%',
+  'common/js/utils': '53.72%',
+  'common/js/watermark': '100%',
+  affix: '87.44%',
   'affix/style': '100%',
-  alert: '96.21%',
+  alert: '97.94%',
   'alert/style': '100%',
-  anchor: '95.2%',
+  anchor: '94.04%',
   'anchor/style': '100%',
-  autoComplete: '99.85%',
+  autoComplete: '97.62%',
   'autoComplete/style': '100%',
-  avatar: '96.85%',
+  avatar: '95.88%',
   'avatar/style': '100%',
-  badge: '100%',
+  backTop: '87.76%',
+  'backTop/style': '100%',
+  badge: '98.05%',
   'badge/style': '100%',
-  breadcrumb: '97.52%',
+  breadcrumb: '96.7%',
   'breadcrumb/style': '100%',
   button: '100%',
   'button/style': '100%',
-  calendar: '95.15%',
+  calendar: '86.17%',
   'calendar/style': '100%',
-  card: '99.71%',
+  card: '96.07%',
   'card/style': '100%',
-  cascader: '95.83%',
-  'cascader/components': '84.49%',
-  'cascader/core': '72.46%',
+  cascader: '91.18%',
+  'cascader/components': '79.07%',
+  'cascader/core': '65.84%',
   'cascader/style': '100%',
-  checkbox: '92.16%',
+  checkbox: '93.93%',
+  'checkbox/hooks': '44.44%',
   'checkbox/style': '100%',
-  collapse: '94.73%',
+  collapse: '100%',
   'collapse/style': '100%',
-  colorPicker: '97.08%',
-  'colorPicker/panel': '64.9%',
-  'colorPicker/panel/format': '93.59%',
+  colorPicker: '94.54%',
+  'colorPicker/panel': '63.42%',
+  'colorPicker/panel/format': '87.25%',
   'colorPicker/style': '100%',
   'colorPicker/utils': '100%',
-  comment: '95.5%',
+  comment: '83.14%',
   'comment/style': '100%',
   commonComponents: '100%',
-  configProvider: '96.08%',
-  datePicker: '47.63%',
-  'datePicker/base': '80.6%',
-  'datePicker/hooks': '46.2%',
-  'datePicker/panel': '64.04%',
+  configProvider: '95.5%',
+  datePicker: '49.66%',
+  'datePicker/base': '77.09%',
+  'datePicker/hooks': '86.17%',
+  'datePicker/panel': '81.78%',
   'datePicker/style': '100%',
-  dialog: '84.4%',
+  descriptions: '74.5%',
+  'descriptions/const': '100%',
+  'descriptions/style': '100%',
+  'descriptions/utils': '54.38%',
+  dialog: '81.8%',
   'dialog/style': '100%',
-  divider: '96.92%',
+  divider: '98.46%',
   'divider/style': '100%',
-  drawer: '85.13%',
+  drawer: '83.92%',
   'drawer/style': '100%',
-  dropdown: '90.84%',
-  'dropdown/hooks': '96.05%',
+  dropdown: '86.53%',
+  'dropdown/hooks': '78.94%',
   'dropdown/style': '100%',
-  form: '92.6%',
+  empty: '96.41%',
+  'empty/assets': '100%',
+  'empty/style': '100%',
+  form: '87.04%',
   'form/style': '100%',
-  grid: '84.13%',
+  grid: '82.25%',
   'grid/style': '100%',
-  guide: '42.89%',
+  guide: '97.46%',
   'guide/style': '100%',
-  'guide/utils': '79.62%',
-  hooks: '57.56%',
+  'guide/utils': '80.18%',
+  hooks: '55.24%',
   icon: '100%',
-  image: '98.82%',
-  imageViewer: '87.44%',
-  'imageViewer/base': '95.37%',
+  image: '94.43%',
+  imageViewer: '83.62%',
+  'imageViewer/base': '92.65%',
   'imageViewer/style': '100%',
   'image/style': '100%',
-  input: '99.48%',
-  inputAdornment: '100%',
+  input: '97.37%',
+  inputAdornment: '91.91%',
   'inputAdornment/style': '100%',
-  inputNumber: '94.13%',
+  inputNumber: '92.53%',
   'inputNumber/style': '100%',
   'input/style': '100%',
-  layout: '96.31%',
+  layout: '95.9%',
   'layout/style': '100%',
   link: '100%',
   'link/style': '100%',
-  list: '98.4%',
+  list: '97.42%',
+  'list/hooks': '81.17%',
   'list/style': '100%',
-  loading: '84.17%',
-  'loading/icon': '92.68%',
+  loading: '78.54%',
+  'loading/icon': '95.12%',
   'loading/style': '100%',
-  menu: '85.84%',
+  menu: '75.52%',
   'menu/style': '100%',
-  message: '88.84%',
+  message: '87.29%',
   'message/style': '100%',
-  notification: '96.83%',
+  notification: '96.04%',
   'notification/style': '100%',
-  pagination: '99.12%',
+  pagination: '99.01%',
   'pagination/style': '100%',
-  popconfirm: '96.67%',
+  popconfirm: '95.34%',
   'popconfirm/style': '100%',
-  popup: '90.29%',
+  popup: '73.99%',
   'popup/style': '100%',
-  progress: '95.96%',
+  progress: '94.2%',
   'progress/style': '100%',
-  radio: '95.8%',
+  radio: '94.67%',
   'radio/style': '100%',
-  rangeInput: '82.93%',
+  rangeInput: '88.29%',
   'rangeInput/style': '100%',
-  rate: '90.03%',
+  rate: '87.41%',
   'rate/style': '100%',
-  select: '62.1%',
-  selectInput: '95.33%',
+  select: '73.53%',
+  selectInput: '98.23%',
   'selectInput/style': '100%',
-  'select/hooks': '81.75%',
+  'select/hooks': '79.33%',
   'select/style': '100%',
-  skeleton: '94.14%',
+  skeleton: '93.75%',
   'skeleton/style': '100%',
-  slider: '72.48%',
+  slider: '69.74%',
   'slider/style': '100%',
-  space: '100%',
+  space: '97.07%',
   'space/style': '100%',
-  steps: '98.44%',
+  statistic: '87.17%',
+  'statistic/style': '100%',
+  steps: '96.92%',
   'steps/style': '100%',
-  swiper: '76.68%',
+  stickyTool: '65.78%',
+  'stickyTool/style': '100%',
+  swiper: '76.67%',
   'swiper/style': '100%',
-  switch: '61.35%',
+  switch: '69.32%',
   'switch/style': '100%',
-  table: '77.36%',
-  'table/hooks': '58.16%',
+  table: '79.48%',
+  'table/hooks': '49.97%',
   'table/style': '100%',
-  tabs: '85.01%',
+  tabs: '92.85%',
   'tabs/style': '100%',
-  tag: '97.78%',
-  tagInput: '90.53%',
-  'tagInput/hooks': '52.13%',
+  tag: '85.9%',
+  tagInput: '96.06%',
+  'tagInput/hooks': '55.91%',
   'tagInput/style': '100%',
   'tag/style': '100%',
-  textarea: '78.57%',
+  textarea: '86.18%',
   'textarea/style': '100%',
-  timePicker: '77.38%',
-  'timePicker/panel': '79.39%',
+  timePicker: '82.35%',
+  'timePicker/panel': '72.46%',
   'timePicker/style': '100%',
-  timeline: '51.2%',
+  timeline: '98.83%',
   'timeline/style': '100%',
-  tooltip: '92.95%',
+  tooltip: '89.25%',
   'tooltip/style': '100%',
-  transfer: '96.5%',
-  'transfer/components': '92.06%',
+  transfer: '95.11%',
+  'transfer/components': '75.32%',
   'transfer/style': '100%',
-  tree: '96.46%',
-  treeSelect: '90.93%',
+  tree: '96.59%',
+  treeSelect: '96.91%',
   'treeSelect/style': '100%',
-  'tree/hooks': '80.88%',
+  'tree/hooks': '77.79%',
   'tree/style': '100%',
-  upload: '90.38%',
-  'upload/hooks': '42.94%',
+  upload: '100%',
+  'upload/hooks': '96.1%',
   'upload/style': '100%',
-  'upload/themes': '32.45%',
-  utils: '70.8%',
-  watermark: '40.19%',
+  'upload/themes': '92.9%',
+  utils: '69.44%',
+  watermark: '49.01%',
 };
diff --git a/src/components.ts b/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';

diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
@@ -58,6 +58,10 @@ export interface GlobalConfigProvider {
    * 抽屉全局配置
    */
   drawer?: DrawerConfig;
+  /**
+   * 空状态全局配置
+   */
+  empty?: EmptyConfig;
   /**
    * 表单组件全局配置
    */
@@ -919,6 +923,17 @@ 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 type AnimationType = 'ripple' | 'expand' | 'fade';
 
 export type IconConfig = GlobalIconConfig;

diff --git a/src/empty/__tests__/index.test.jsx b/src/empty/__tests__/index.test.jsx
@@ -0,0 +1,43 @@
+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('size', () => {
+      const wrapper = mount({
+        render() {
+          return <Empty size="small" />;
+        },
+      });
+      expect(wrapper.find('.t-empty.t-size-s')).not.toBeNull();
+    });
+    it('title', () => {
+      const wrapper = mount({
+        render() {
+          return <Empty title="title"></Empty>;
+        },
+      });
+      expect(wrapper.find('.t-empty__title').element.innerHTML).toBe('title');
+    });
+    it('description', () => {
+      const wrapper = mount({
+        render() {
+          return <Empty description="description"></Empty>;
+        },
+      });
+      expect(wrapper.find('.t-empty__description').element.innerHTML).toBe('description');
+    });
+    it('type', () => {
+      const wrapper = mount({
+        render() {
+          return <Empty type="success"></Empty>;
+        },
+      });
+      const successIconPath = 'M24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42ZM46 24C46 36.1503 36.1503 46 24 46C11.8497 46 2 36.1503 2 24C2 11.8497 11.8497 2 24 2C36.1503 2 46 11.8497 46 24ZM21 32.8284L12.1716 24L15 21.1716L21 27.1716L33 15.1716L35.8284 18L21 32.8284Z';
+
+      expect(wrapper.find('.t-empty__image').find('path').attributes('d')).toBe(successIconPath);
+    });
+  });
+});
diff --git a/src/empty/_example-composition/base.vue b/src/empty/_example-composition/base.vue
@@ -0,0 +1,3 @@
+<template>
+  <t-empty />
+</template>
diff --git a/src/empty/_example-composition/descriptions.vue b/src/empty/_example-composition/descriptions.vue
@@ -0,0 +1,9 @@
+<template>
+  <t-empty :description="description" :title="title"> </t-empty>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const title = ref('Empty');
+const description = ref('Description');
+</script>