docs: add docs and demo

components/config-provider/index.jsx

@@ -46,7 +46,7 @@ const ConfigProvider = {
   },
   methods: {
     renderEmptyComponent() {
-      const customRender = getComponentFromProp(this,'renderEmpty');
+      const customRender = getComponentFromProp(this,'renderEmpty', {}, false);
       return this.$props.renderEmpty || customRender || defaultRenderEmpty;
     },
     getPrefixCls(suffixCls, customizePrefixCls) {

components/empty/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('empty');

components/empty/demo/config-provider.md

@@ -21,14 +21,14 @@ Use ConfigProvider set global Empty style.
     <a-divider />
     <a-config-provider>
       <template v-if="customize" v-slot:renderEmpty>
-        <div style="textAlign: center">
+        <div style="text-align: center">
-          <a-icon type="smile" style="fontSize: 20px" />
+          <a-icon type="smile" style="font-size: 20px" />
           <p>Data Not Found</p>
         </div>
       </template>
       <div class="config-provider">
         <h3>Select</h3>
-        <a-select :style="style" />
+        <a-select :style="style" :options="[]" />
 
         <h3>TreeSelect</h3>
         <a-tree-select :style="style" :treeData="[]" />
@@ -37,15 +37,16 @@ Use ConfigProvider set global Empty style.
         <a-cascader :style="style" :options="[]" :showSearch="true" />
 
         <h3>Transfer</h3>
-        <a-transfer />
+        <a-transfer :dataSource="[]" />
 
         <h3>Table</h3>
         <a-table
-          style="marginTop: 8px"
+          style="margin-top: 8px"
           :columns="columns"
+          :dataSource="[]"
         />
         <h3>List</h3>
-        <a-list />
+        <a-list :dataSource="[]" />
       </div>
     </a-config-provider>
   </div>
@@ -69,7 +70,7 @@ export default {
         },
       ]
     }
-  },
+  }
 }
 
 </script>

components/empty/demo/index.vue

@@ -0,0 +1,52 @@
+<script>
+import Basic from './basic';
+import ConfigProvider from './config-provider';
+import Customize from './customize';
+
+import CN from '../index.zh-CN.md';
+import US from '../index.en-US.md';
+
+import '../style';
+
+const md = {
+  cn: `# 空状态
+        空状态时的展示占位图。
+
+      空状态时的展示占位图。
+
+      ## 何时使用
+
+      当目前没有数据时，用于显式的用户提示。
+
+       ## 代码演示
+        `,
+  us: `# Empty
+        Empty state placeholder.
+
+        ## When To Use
+
+        When there is no data provided, display for friendly tips.
+       ## Examples
+        `,
+};
+export default {
+  category: 'Components',
+  type: 'Data Display',
+  title: 'Empty',
+  subtitle: '空状态',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us} />
+        <Basic />
+        <ConfigProvider />
+        <Customize />
+        <api>
+          <CN slot='cn' />
+          <US />
+        </api>
+      </div>
+    );
+  },
+};
+</script>

components/empty/index.en-US.md

@@ -0,0 +1,12 @@
+## API
+
+```jsx
+<Empty>
+  <Button>Create</Button>
+</Empty>
+```
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| description | Customize description | string \| v-slot | - |
+| image | Customize image. Will tread as image url when string provided | string \| v-slot | false |

components/empty/index.zh-CN.md

@@ -0,0 +1,12 @@
+## API
+
+```jsx
+<Empty>
+  <Button>创建</Button>
+</Empty>
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| description | 自定义描述内容 | string \| v-slot | - |
+| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false |

site/demoRoutes.js

@@ -439,4 +439,12 @@ export default [
     path: 'config-provider-cn',
     component: () => import('../components/config-provider/demo/index.vue'),
   },
+  {
+    path: 'empty',
+    component: () => import('../components/empty/demo/index.vue'),
+  },
+  {
+    path: 'empty-cn',
+    component: () => import('../components/empty/demo/index.vue'),
+  },
 ];