feat(comp: empty): add component empty (#132)

* feat(comp:empty): update and add test

fix #54

packages/components/button/docs/index.zh.md

@@ -63,7 +63,7 @@ cover:
 | 变量名 | default 主题| 说明 |
 | --- | --- | --- |
 | @button-font-weight | @font-weight-md | - |
-| @button-line-height | @line-height-md | - |
+| @button-line-height | @line-height-base | - |
 | @button-height-sm | @height-sm | - |
 | @button-height-md | @height-md | - |
 | @button-height-lg | @height-lg | - |

packages/components/components.less

@@ -5,3 +5,4 @@
 @import './image/style/index.less';
 @import './spin/style/index.less';
 @import './space/style/index.less';
+@import './empty/style/index.less';

packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty.vue render work 1`] = `"<div class=\\"ix-empty\\"><div class=\\"ix-empty-image\\"><i class=\\"ix-icon ix-icon-empty\\" role=\\"img\\" arialabel=\\"empty\\"></i></div><div class=\\"ix-empty-description\\">暂无数据</div><!--v-if--></div>"`;

packages/components/empty/__tests__/empty.spec.ts

@@ -0,0 +1,55 @@
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import { DefineComponent } from 'vue'
+import IxEmpty from '../src/Empty.vue'
+import { EmptyProps } from '../src/types'
+
+describe('Empty.vue', () => {
+  let EmptyMount: (
+    options?: MountingOptions<Partial<EmptyProps>>,
+  ) => VueWrapper<InstanceType<DefineComponent<EmptyProps>>>
+
+  beforeEach(() => {
+    EmptyMount = (options = {}) => {
+      return mount<EmptyProps>(IxEmpty, {
+        ...options,
+      })
+    }
+  })
+
+  test('render work', () => {
+    const wrapper = EmptyMount()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('image work', async () => {
+    const wrapper = EmptyMount()
+    expect(wrapper.find('.ix-icon').exists()).toEqual(true)
+
+    await wrapper.setProps({ image: 'image.url' })
+
+    expect(wrapper.find('.ix-icon').exists()).toEqual(false)
+    expect(wrapper.find('img').exists()).toEqual(true)
+  })
+
+  test('description work', async () => {
+    const description = 'my description'
+    const wrapper = EmptyMount({ props: { description } })
+
+    expect(wrapper.find('.ix-empty-description').text()).toEqual(description)
+  })
+
+  test('description slot work', async () => {
+    const description = 'description slots'
+    const wrapper = EmptyMount({
+      props: { description: 'description props' },
+      slots: { description },
+    })
+
+    expect(wrapper.find('.ix-empty-description').text()).toEqual(description)
+  })
+
+  test('default slot work', async () => {
+    const wrapper = EmptyMount({ slots: { default: '<div class="default-slot"></div>' } })
+    expect(wrapper.find('.default-slot').exists()).toEqual(true)
+  })
+})

packages/components/empty/demo/basic.md

@@ -0,0 +1,18 @@
+---
+order: 0
+title:
+  zh: 基本用法
+  en: Basic usage
+---
+
+## zh
+
+简单的展示。
+
+## demo
+
+```html
+<template>
+  <ix-empty />
+</template>
+```

packages/components/empty/demo/description.md

@@ -0,0 +1,33 @@
+---
+order: 0
+title:
+  zh: 自定义
+  en: Customized
+---
+
+## zh
+
+- 通过设置 `image` 来自定义图片。
+- 通过设置 `description` 来自定义描述内容, 支持 `v-slot:description`, 如果需要隐藏描述, 传入一个空字符串即可。
+- 通过设置 `v-slot:default` 来自定义描述内容。
+
+## demo
+
+```html
+<template>
+  <ix-empty
+    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+    description="Customize Description"
+  >
+    <ix-button mode="primary">Create Now</ix-button>
+  </ix-empty>
+  <ix-divider />
+  <ix-empty>
+    <template #description>
+      <span>Customize <a href="#API">Description</a></span>
+    </template>
+  </ix-empty>
+  <ix-divider />
+  <ix-empty description=""></ix-empty>
+</template>
+```

packages/components/empty/docs/index.zh.md

@@ -0,0 +1,40 @@
+---
+category: components
+type: 数据展示
+title: Empty
+subtitle: 空数据
+cover:
+cols: 1
+---
+
+没有数据时的展示占位图。
+
+## 何时使用
+
+- 当前没有数据时，用于提示用户。
+
+## API
+
+### `ix-empty`
+
+#### Props
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `description` | 自定义描述内容 | `string \| v-slot:description` | — | — | — |
+| `image` | 设置自定义图片地址 | `string` | — | — | — |
+
+#### Slots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `defalut` | 自定义 `Footer` 区域内容 | - | - |
+
+### 主题变量
+
+| 变量名 | default 主题| 说明 |
+| --- | --- | --- |
+| @empty-margin-md | @margin-md | - |
+| @empty-line-height-md | @line-height-base | - |
+| @empty-font-size-md | @font-size-md | - |
+| @empty-icon-font-size-md | `64px` | - |

packages/components/empty/index.ts

@@ -0,0 +1,7 @@
+import { installComponent } from '@idux/components/core/utils'
+import IxEmpty from './src/Empty.vue'
+
+IxEmpty.install = installComponent(IxEmpty)
+
+export { IxEmpty }
+export * from './src/types'

packages/components/empty/src/Empty.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="ix-empty">
+    <div class="ix-empty-image">
+      <img v-if="image" :src="image" alt="empty image" />
+      <ix-icon v-else name="empty" />
+    </div>
+    <div v-if="description$$ || $slots.description" class="ix-empty-description">
+      <slot name="description">{{ description$$ }}</slot>
+    </div>
+    <div v-if="$slots.default" class="ix-empty-footer">
+      <slot />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import type { EmptyProps } from './types'
+
+import { defineComponent, computed } from 'vue'
+import { PropTypes } from '@idux/cdk/utils'
+import { IxIcon } from '@idux/components/icon'
+import { getLocale } from '@idux/components/i18n'
+
+export default defineComponent({
+  name: 'IxEmpty',
+  components: { IxIcon },
+  props: {
+    description: PropTypes.string,
+    image: PropTypes.string,
+  },
+  setup(props: EmptyProps) {
+    const emptyLocale = getLocale('empty')
+    const description$$ = computed(() => props.description ?? emptyLocale.value.description)
+    return { description$$ }
+  },
+})
+</script>

packages/components/empty/src/types.ts

@@ -0,0 +1,12 @@
+import type { DefineComponent } from 'vue'
+
+interface EmptyOriginalProps {
+  /** 自定义描述内容 */
+  description?: string
+  /** 图片地址 */
+  image?: string
+}
+
+export type EmptyProps = Readonly<EmptyOriginalProps>
+
+export type EmptyComponent = InstanceType<DefineComponent<EmptyProps>>

packages/components/empty/style/index.less

@@ -0,0 +1,31 @@
+@import '../../style/default.less';
+
+@empty-prefix: ~'@{idux-prefix}-empty';
+
+.@{empty-prefix} {
+  display: block;
+  text-align: center;
+  font-size: @empty-font-size-md;
+  line-height: @empty-line-height-md;
+  margin: 0 @empty-margin-md;
+
+  &-image {
+    margin-bottom: @empty-margin-md;
+
+    img {
+      height: 100%;
+    }
+
+    .@{icon-prefix} {
+      font-size: @empty-icon-font-size-md;
+    }
+  }
+
+  &-description {
+    margin: 0;
+  }
+
+  &-footer {
+    margin-top: @empty-margin-md;
+  }
+}

packages/components/index.ts

@@ -6,8 +6,9 @@ import { IxDivider } from './divider'
 import { IxImage } from './image'
 import { IxSpin } from './spin'
 import { IxSpace } from './space'
+import { IxEmpty } from './empty'
 
-const components = [IxButton, IxButtonGroup, IxIcon, IxBadge, IxDivider, IxImage, IxSpin, IxSpace]
+const components = [IxButton, IxButtonGroup, IxIcon, IxBadge, IxDivider, IxImage, IxSpin, IxSpace, IxEmpty]
 
 const install = (app: App): void => {
   components.forEach(component => {
@@ -31,3 +32,4 @@ export { IxDivider }
 export { IxImage }
 export { IxSpin }
 export { IxSpace }
+export { IxEmpty }

packages/components/style/default.less

@@ -10,7 +10,7 @@
 @height-md: 32px;
 @height-lg: 36px;
 
-@line-height-md: 1.5715;
+@line-height-base: 1.5715;
 
 /* color -------------------------- */
 @primary-color: @blue;
@@ -28,7 +28,7 @@
 /* button -------------------------- */
 @button-font-weight: @font-weight-md;
 
-@button-line-height: @line-height-md;
+@button-line-height: @line-height-base;
 
 @button-height-sm: @height-sm;
 @button-height-md: @height-md;
@@ -73,7 +73,6 @@
 @button-text-color: @text-color;
 @button-text-hover-bg: rgba(0, 0, 0, 0.12);
 
-
 /* spin -------------------------- */
 @spin-tip-color: @primary-color;
 @spin-icon-color: @primary-color;
@@ -86,3 +85,9 @@
 @space-margin-sm: @margin-sm;
 @space-margin-md: @margin-lg;
 @space-margin-lg: @margin-xl;
+
+/* empty -------------------------- */
+@empty-margin-md: @margin-md;
+@empty-line-height-md: @line-height-base;
+@empty-font-size-md: @font-size-md;
+@empty-icon-font-size-md: 64px;