feat: empty local page

hellof2e · May 12, 2023 · d448aac · d448aac
1 parent d8d189e
commit d448aac
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 28 deletions.
diff --git a/packages/quarkd/src/empty/demo.vue b/packages/quarkd/src/empty/demo.vue
@@ -18,6 +18,15 @@
       :buttontext="translate('buttontext')"
     />
 
+    <h2>{{ translate("local") }}</h2>
+    <quark-empty
+      image="https://m.hellobike.com/resource/helloyun/13459/HZco-IyfBe.png"
+      :title="translate('title')"
+      :desc="translate('order')"
+      :buttontext="translate('buttontext')"
+      type="local"
+    />
+
     <h2>{{ translate("image") }}</h2>
     <quark-empty
       image="https://m.hellobike.com/resource/helloyun/13459/UxNf7LpJ2G.png"
@@ -44,6 +53,7 @@ export default createDemo({
           basic: "基础用法",
           desc: "描述文字",
           button: "底部按钮",
+          local: "局部空白页",
           image: "自定义图片",
           bottom: "自定义底部",
           title: "没有历史订单",
@@ -55,6 +65,7 @@ export default createDemo({
           basic: "Basic Usage",
           desc: "Description",
           button: "Button",
+          local: "Local empty",
           image: "Custom Image",
           bottom: "Csutom Bottom",
           title: "No Order History",

diff --git a/packages/quarkd/src/empty/doc-react.en-US.md b/packages/quarkd/src/empty/doc-react.en-US.md
@@ -28,6 +28,17 @@ import { Empty } from "@quarkd/quark-react";
 <Empty title="no data" desc="add data now~" buttontext="go to Order" />
 ```
 
+### Local empty page
+
+```html
+<Empty
+  title="no data"
+  desc="add data now~"
+  buttontext="go to Order"
+  type="local"
+/>
+```
+
 ### Custom Image Size
 
 ```html
@@ -60,13 +71,14 @@ import { Empty } from "@quarkd/quark-react";
 
 ### Props
 
-| Attribute  | Description | Type     | Default |
-| ---------- | ----------- | -------- | ------- |
-| title      | Title       | `string` |         |
-| desc       | Description | `string` |         |
-| image      | image url   | `string` |         |
-| imagesize  | image size  | `string` |         |
-| buttontext | button text | `string` |         |
+| Attribute  | Description                           | Type     | Default  |
+| ---------- | ------------------------------------- | -------- | -------- |
+| title      | Title                                 | `string` |          |
+| desc       | Description                           | `string` |          |
+| image      | image url                             | `string` |          |
+| imagesize  | image size                            | `string` |          |
+| buttontext | button text                           | `string` |          |
+| type       | global empty page or local empty page | `string` | `global` |
 
 ## CSS Variables
 

diff --git a/packages/quarkd/src/empty/doc-react.zh-CN.md b/packages/quarkd/src/empty/doc-react.zh-CN.md
@@ -28,6 +28,17 @@ import { Empty } from "@quarkd/quark-react";
 <Empty title="暂无数据" desc="快去添加数据吧~" buttontext="快去下单吧" />
 ```
 
+### 局部空白页
+
+```html
+<Empty
+  title="暂无数据"
+  desc="快去添加数据吧~"
+  buttontext="快去下单吧"
+  type="local"
+/>
+```
+
 ### 自定义图片大小
 
 通过 `imagesize` 属性图片的大小。
@@ -66,13 +77,14 @@ import { Empty } from "@quarkd/quark-react";
 
 ### Props
 
-| 参数       | 说明         | 类型     | 默认值 |
-| ---------- | ------------ | -------- | ------ |
-| title      | 标题文字     | `string` |        |
-| desc       | 描述文字     | `string` |        |
-| image      | 图片 url     | `string` |        |
-| imagesize  | 图片大小     | `string` |        |
-| buttontext | 底部按钮文字 | `string` |        |
+| 参数       | 说明                     | 类型     | 默认值   |
+| ---------- | ------------------------ | -------- | -------- |
+| title      | 标题文字                 | `string` |          |
+| desc       | 描述文字                 | `string` |          |
+| image      | 图片 url                 | `string` |          |
+| imagesize  | 图片大小                 | `string` |          |
+| buttontext | 底部按钮文字             | `string` |          |
+| type       | 全局空白页 or 局部空白页 | `string` | `global` |
 
 ## 样式变量
 

diff --git a/packages/quarkd/src/empty/doc.en-US.md b/packages/quarkd/src/empty/doc.en-US.md
@@ -28,6 +28,17 @@ import "quarkd/lib/empty";
 <quark-empty title="no data" desc="add data now~" buttontext="go to Order" />
 ```
 
+### Local empty page
+
+```html
+<quark-empty
+  title="no data"
+  desc="add data now~"
+  buttontext="go to Order"
+  type="local"
+/>
+```
+
 ### Custom Image Size
 
 ```html
@@ -67,13 +78,14 @@ import "quarkd/lib/empty";
 
 ### Props
 
-| Attribute  | Description | Type     | Default |
-| ---------- | ----------- | -------- | ------- |
-| title      | Title       | `string` |         |
-| desc       | Description | `string` |         |
-| image      | image url   | `string` |         |
-| imagesize  | image size  | `string` |         |
-| buttontext | button text | `string` |         |
+| Attribute  | Description                           | Type     | Default  |
+| ---------- | ------------------------------------- | -------- | -------- |
+| title      | Title                                 | `string` |          |
+| desc       | Description                           | `string` |          |
+| image      | image url                             | `string` |          |
+| imagesize  | image size                            | `string` |          |
+| buttontext | button text                           | `string` |          |
+| type       | global empty page or local empty page | `string` | `global` |
 
 ## CSS Variables
 

diff --git a/packages/quarkd/src/empty/doc.zh-CN.md b/packages/quarkd/src/empty/doc.zh-CN.md
@@ -28,6 +28,17 @@ import "quarkd/lib/empty";
 <quark-empty title="暂无数据" desc="快去添加数据吧~" buttontext="快去下单吧" />
 ```
 
+### 局部空白页
+
+```html
+<quark-empty
+  title="暂无数据"
+  desc="快去添加数据吧~"
+  buttontext="快去下单吧"
+  type="local"
+/>
+```
+
 ### 自定义图片大小
 
 通过 `imagesize` 属性图片的大小。
@@ -64,13 +75,14 @@ import "quarkd/lib/empty";
 
 ### Props
 
-| 参数       | 说明         | 类型     | 默认值 |
-| ---------- | ------------ | -------- | ------ |
-| title      | 标题文字     | `string` |        |
-| desc       | 描述文字     | `string` |        |
-| image      | 图片 url     | `string` |        |
-| imagesize  | 图片大小     | `string` |        |
-| buttontext | 底部按钮文字 | `string` |        |
+| 参数       | 说明                     | 类型     | 默认值   |
+| ---------- | ------------------------ | -------- | -------- |
+| title      | 标题文字                 | `string` |          |
+| desc       | 描述文字                 | `string` |          |
+| image      | 图片 url                 | `string` |          |
+| imagesize  | 图片大小                 | `string` |          |
+| buttontext | 底部按钮文字             | `string` |          |
+| type       | 全局空白页 or 局部空白页 | `string` | `global` |
 
 ## 样式变量
 

diff --git a/packages/quarkd/src/empty/index.tsx b/packages/quarkd/src/empty/index.tsx
@@ -7,6 +7,7 @@ export interface Props {
   buttontext?: string;
   image?: string;
   imagesize?: string;
+  type?: "global" | "local";
 }
 @customElement({
   tag: "quark-empty",
@@ -32,6 +33,9 @@ class QuarkEmpty extends QuarkElement {
   @property()
   buttontext = "";
 
+  @property()
+  type: "global" | "local" = "global";
+
   render() {
     return (
       <Fragment>

diff --git a/packages/quarkd/src/empty/style.css b/packages/quarkd/src/empty/style.css
@@ -60,3 +60,23 @@
   padding: var(--empty-button-padding-column, 9px) var(--empty-button-padding-row, 34px);
   border-radius: var(--empty-button-border-radius, 20px);
 }
+
+:host([type="local"]) .quark-empty-title {
+  margin-top: 4px;
+  font-size: var(--empty-title-font-size, 14px);
+  line-height: var(--empty-title-line-height, 20px);
+}
+
+:host([type="local"]) .quark-empty-desc {
+  margin-top: 6px;
+  font-size: var(--empty-desc-font-size, 12px);
+  line-height: var(--empty-title-line-height, 17px);
+}
+
+:host([type="local"]) .quark-empty-button {
+  font-size: var(--empty-button-font-size, 14px);
+  margin-top: var(--empty-button-margin-top, 12px);;
+  line-height: var(--empty-button-line-height, 20px);
+  padding: var(--empty-button-padding-column, 6px) var(--empty-button-padding-row, 26px);
+  border-radius: var(--empty-button-border-radius, 16px);
+}