Empty: add empty component (ElemeFE#21080)

components.json

@@ -82,5 +82,6 @@
   "drawer": "./packages/drawer/index.js",
   "popconfirm": "./packages/popconfirm/index.js",
   "skeleton": "./packages/skeleton/index.js",
-  "skeleton-item": "./packages/skeleton-item/index.js"
+  "skeleton-item": "./packages/skeleton-item/index.js",
+  "empty": "./packages/empty/index.js"
 }

examples/docs/en-US/empty.md

@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="description"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |

examples/docs/es/empty.md

@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="descrição"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |

examples/docs/fr-FR/empty.md

@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="description"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |

examples/docs/zh-CN/empty.md

@@ -0,0 +1,61 @@
+## Empty 空状态
+
+空状态时的占位提示。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-empty description="描述文字"></el-empty>
+```
+:::
+
+### 自定义图片
+
+通过设置 `image` 属性传入图片 URL。
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### 图片尺寸
+
+通过设置 `image-size` 属性来控制图片大小。
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### 底部内容
+
+使用默认插槽可在底部插入内容。
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">按钮</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | 图片地址         | string  |          —             |    —     |
+| image-size    | 图片大小（宽度）  | number | — |    —  |
+| description  | 文本描述    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | 说明 |
+|------|--------|
+| default | 自定义底部内容  |
+| image | 自定义图片     |
+| description | 自定义描述文字     |

examples/nav.config.json

@@ -180,6 +180,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton 骨架屏"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty 空状态"
             }
           ]
         },
@@ -478,6 +482,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
             }
           ]
         },
@@ -780,6 +788,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
             }
           ]
         },
@@ -1082,6 +1094,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
             }
           ]
         },

packages/empty/index.js

@@ -0,0 +1,7 @@
+import Empty from './src/index.vue';
+
+Empty.install = (Vue) => {
+  Vue.component(Empty.name, Empty);
+};
+
+export default Empty;