Fixed misc

mantou132 · Dec 28, 2023 · 21fcb29 · 21fcb29
1 parent a60ca25
commit 21fcb29
Show file tree

Hide file tree

Showing 19 changed files with 263 additions and 118 deletions.
diff --git a/packages/duoyun-ui/docs/en/02-elements/area-chart.md b/packages/duoyun-ui/docs/en/02-elements/area-chart.md
@@ -2,10 +2,43 @@
 
 ## Example
 
-<gbp-example
-  name="dy-area-chart"
-  props='{"style": "width: 100%;", "fill": true, "smooth": true, "chartzoom": true, "@zoom": "(e) => e.target.range = e.detail", "sequences": [{"label": "Label", "values": [[10, 3], [15, 3], [20, 5], [25, 4], [30, 8], [35, 5], [40, 4]] }]}'
-  src="https://esm.sh/duoyun-ui/elements/area-chart"></gbp-example>
+<gbp-example name="dy-area-chart" src="https://esm.sh/duoyun-ui/elements/area-chart">
+
+```json
+{
+  "style": "width: 100%;",
+  "fill": true,
+  "aspectRatio": 4,
+  "smooth": true,
+  "chartzoom": true,
+  "yMax": 10,
+  "xAxi": { "formatter": "(value) => value.toFixed(2)" },
+  "yAxi": { "formatter": "(value) => value.toFixed(1)" },
+  "@zoom": "(e) => e.target.range = e.detail",
+  "sequences": [
+    {
+      "label": "Label",
+      "values": [
+        [10, 3],
+        [15, 3],
+        [20, 5],
+        [25, 4],
+        [30, 8],
+        [35, 5],
+        [40, 4],
+        [45, 5],
+        [50, 1],
+        [55, 3],
+        [60, 8],
+        [65, 5],
+        [70, 6]
+      ]
+    }
+  ]
+}
+```
+
+</gbp-example>
 
 ## API
 

diff --git a/packages/duoyun-ui/docs/en/02-elements/link.md b/packages/duoyun-ui/docs/en/02-elements/link.md
@@ -8,10 +8,14 @@ See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
 
 ```json
 [
+  {
+    "tagName": "style",
+    "innerHTML": "dy-active-link:where([data-active],:state(active)){color: red})"
+  },
   {
     "path": "/test/test",
     "pattern": "/test/*",
-    "innerHTML": "This link not match current route\n<style>dy-active-link:where([data-active],:state(active)){color: red})</style>"
+    "innerHTML": "This link not match current route"
   },
   {
     "path": "/",

diff --git a/packages/duoyun-ui/docs/en/02-elements/list.md b/packages/duoyun-ui/docs/en/02-elements/list.md
@@ -33,31 +33,41 @@
 <gbp-example name="dy-list" src="https://esm.sh/duoyun-ui/elements/list">
 
 ```json
-{
-  "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;text-align:center;",
-  "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-  "infinite": true,
-  "getKey": "(item) => item",
-  "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]",
-  "innerHTML": "<style>::part(item){padding:0.5em;border-bottom:1px solid gainsboro}</style>"
-}
+[
+  {
+    "tagName": "style",
+    "innerHTML": "::part(item){padding:0.5em;border-bottom:1px solid gainsboro}"
+  },
+  {
+    "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;text-align:center;",
+    "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    "infinite": true,
+    "getKey": "(item) => item",
+    "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]"
+  }
+]
 ```
 
 </gbp-example>
 
 <gbp-example name="dy-list" src="https://esm.sh/duoyun-ui/elements/list">
 
 ```json
-{
-  "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;",
-  "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-  "infinite": true,
-  "debug": true,
-  "getKey": "(item) => item",
-  "renderItem": "(item) => item",
-  "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]",
-  "innerHTML": "<style>::part(list){display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:1em;}::part(item){font-size:3em;font-weight:bolder;aspect-ratio:1;border:1px solid gainsboro;display:flex;place-content:center;place-items:center;}</style>"
-}
+[
+  {
+    "tagName": "style",
+    "innerHTML": "::part(list){display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:1em;}::part(item){font-size:3em;font-weight:bolder;aspect-ratio:1;border:1px solid gainsboro;display:flex;place-content:center;place-items:center;}"
+  },
+  {
+    "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;",
+    "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    "infinite": true,
+    "debug": true,
+    "getKey": "(item) => item",
+    "renderItem": "(item) => item",
+    "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]"
+  }
+]
 ```
 
 </gbp-example>

diff --git a/packages/duoyun-ui/docs/en/02-elements/wait.md b/packages/duoyun-ui/docs/en/02-elements/wait.md
@@ -6,7 +6,7 @@
 
 ```json
 {
-  "@click": "()=>customElements.get('dy-wait').wait(new Promise(res => setTimeout(res, 1500)))",
+  "@click": "()=>customElements.get('dy-wait').wait(new Promise(res => setTimeout(res, 1500)),{position:'center', text: 'Loading', color: 'black'})",
   "innerHTML": "Click"
 }
 ```
@@ -17,7 +17,11 @@
 import { waitLoading } from '@duoyun-fe/duoyun-ui/elements/wait';
 
 function onClick() {
-  waitLoading(new Promise((res) => setTimeout(res, 1500)));
+  waitLoading(new Promise((res) => setTimeout(res, 1500)), {
+    position: 'center',
+    text: 'Loading',
+    color: 'black',
+  });
 }
 ```
 

diff --git a/packages/duoyun-ui/docs/zh/02-elements/area-chart.md b/packages/duoyun-ui/docs/zh/02-elements/area-chart.md
@@ -2,10 +2,43 @@
 
 ## Example
 
-<gbp-example
-  name="dy-area-chart"
-  props='{"style": "width: 100%;", "fill": true, "smooth": true, "chartzoom": true, "@zoom": "(e) => e.target.range = e.detail", "sequences": [{"label": "Label", "values": [[10, 3], [15, 3], [20, 5], [25, 4], [30, 8], [35, 5], [40, 4]] }]}'
-  src="https://esm.sh/duoyun-ui/elements/area-chart"></gbp-example>
+<gbp-example name="dy-area-chart" src="https://esm.sh/duoyun-ui/elements/area-chart">
+
+```json
+{
+  "style": "width: 100%;",
+  "fill": true,
+  "aspectRatio": 4,
+  "smooth": true,
+  "chartzoom": true,
+  "yMax": 10,
+  "xAxi": { "formatter": "(value) => value.toFixed(2)" },
+  "yAxi": { "formatter": "(value) => value.toFixed(1)" },
+  "@zoom": "(e) => e.target.range = e.detail",
+  "sequences": [
+    {
+      "label": "Label",
+      "values": [
+        [10, 3],
+        [15, 3],
+        [20, 5],
+        [25, 4],
+        [30, 8],
+        [35, 5],
+        [40, 4],
+        [45, 5],
+        [50, 1],
+        [55, 3],
+        [60, 8],
+        [65, 5],
+        [70, 6]
+      ]
+    }
+  ]
+}
+```
+
+</gbp-example>
 
 ## API
 

diff --git a/packages/duoyun-ui/docs/zh/02-elements/link.md b/packages/duoyun-ui/docs/zh/02-elements/link.md
@@ -8,10 +8,14 @@ See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
 
 ```json
 [
+  {
+    "tagName": "style",
+    "innerHTML": "dy-active-link:where([data-active],:state(active)){color: red})"
+  },
   {
     "path": "/test/test",
     "pattern": "/test/*",
-    "innerHTML": "这个链接没有匹配当前路由\n<style>dy-active-link:where([data-active],:state(active)){color: red})</style>"
+    "innerHTML": "这个链接没有匹配当前路由"
   },
   {
     "path": "/",

diff --git a/packages/duoyun-ui/docs/zh/02-elements/list.md b/packages/duoyun-ui/docs/zh/02-elements/list.md
@@ -33,31 +33,41 @@
 <gbp-example name="dy-list" src="https://esm.sh/duoyun-ui/elements/list">
 
 ```json
-{
-  "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;text-align:center;",
-  "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-  "infinite": true,
-  "getKey": "(item) => item",
-  "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]",
-  "innerHTML": "<style>::part(item){padding:0.5em;border-bottom:1px solid gainsboro}</style>"
-}
+[
+  {
+    "tagName": "style",
+    "innerHTML": "::part(item){padding:0.5em;border-bottom:1px solid gainsboro}"
+  },
+  {
+    "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;text-align:center;",
+    "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    "infinite": true,
+    "getKey": "(item) => item",
+    "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]"
+  }
+]
 ```
 
 </gbp-example>
 
 <gbp-example name="dy-list" src="https://esm.sh/duoyun-ui/elements/list">
 
 ```json
-{
-  "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;",
-  "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-  "infinite": true,
-  "debug": true,
-  "getKey": "(item) => item",
-  "renderItem": "(item) => item",
-  "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]",
-  "innerHTML": "<style>::part(list){display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:1em;}::part(item){font-size:3em;font-weight:bolder;aspect-ratio:1;border:1px solid gainsboro;display:flex;place-content:center;place-items:center;}</style>"
-}
+[
+  {
+    "tagName": "style",
+    "innerHTML": "::part(list){display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:1em;}::part(item){font-size:3em;font-weight:bolder;aspect-ratio:1;border:1px solid gainsboro;display:flex;place-content:center;place-items:center;}"
+  },
+  {
+    "style": "overflow:auto;height:300px;width:100%;overscroll-behavior:contain;",
+    "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    "infinite": true,
+    "debug": true,
+    "getKey": "(item) => item",
+    "renderItem": "(item) => item",
+    "@backward": "({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]"
+  }
+]
 ```
 
 </gbp-example>

diff --git a/packages/duoyun-ui/docs/zh/02-elements/wait.md b/packages/duoyun-ui/docs/zh/02-elements/wait.md
@@ -6,7 +6,7 @@
 
 ```json
 {
-  "@click": "()=>customElements.get('dy-wait').wait(new Promise(res => setTimeout(res, 1500)))",
+  "@click": "()=>customElements.get('dy-wait').wait(new Promise(res => setTimeout(res, 1500)),{position:'center', text: 'Loading', color: 'black'})",
   "innerHTML": "点击"
 }
 ```
@@ -17,7 +17,11 @@
 import { waitLoading } from '@duoyun-fe/duoyun-ui/elements/wait';
 
 function onClick() {
-  waitLoading(new Promise((res) => setTimeout(res, 1500)));
+  waitLoading(new Promise((res) => setTimeout(res, 1500)), {
+    position: 'center',
+    text: 'Loading',
+    color: 'black',
+  });
 }
 ```
 

diff --git a/packages/duoyun-ui/src/elements/base/chart.ts b/packages/duoyun-ui/src/elements/base/chart.ts
@@ -204,7 +204,8 @@ export class DuoyunChartBaseElement<_T = Record<string, unknown>> extends Duoyun
 
   renderXAxi = ({ centerLabel, grid }: { centerLabel?: boolean; grid?: boolean } = {}) => {
     const offset = centerLabel ? 0.5 * (this.xAxiStepUnit / this.xAxiUnit) : 0;
-    return this.xAxi !== null
+    // zoom 选择范围太小时，xAxiUnit 为 0
+    return this.xAxi !== null && this.xAxiUnit
       ? svg`
         <path 
           stroke=${theme.borderColor}

diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
@@ -122,7 +122,7 @@ const style = createCSSSheet(css`
     transition: opacity 0.1s;
   }
   :active::after {
-    opacity: 0.18;
+    opacity: 0.13;
   }
   :host([disabled]) ::after {
     content: none;

diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -141,7 +141,10 @@ export class DuoyunContextMenuElement extends GemElement {
       maskClosable,
       menuStack: [{ x, y, menu: contextmenu, searchable, header }],
     });
-    if (!ContextMenu.instance) new ContextMenu();
+    if (!ContextMenu.instance) {
+      const ele = new ContextMenu();
+      document.body.append(ele);
+    }
     await new Promise((res) => (closeResolve = res));
   }
 
@@ -194,7 +197,6 @@ export class DuoyunContextMenuElement extends GemElement {
 
   constructor() {
     super({ delegatesFocus: true });
-    document.body.append(this);
   }
 
   #offset = 4;

diff --git a/packages/duoyun-ui/src/elements/page-loadbar.ts b/packages/duoyun-ui/src/elements/page-loadbar.ts
@@ -42,6 +42,7 @@ export class DuoyunPageLoadbarElement extends GemElement {
     clearInterval(Loadbar.timer);
     Loadbar.timer = window.setTimeout(() => {
       const instance = Loadbar.instance || new Loadbar();
+      document.body.append(instance);
       instance.setState({ progress: 0 });
       Loadbar.timer = window.setInterval(() => {
         instance.setState({ progress: instance.state.progress + (95 - instance.state.progress) * 0.1 });
@@ -61,7 +62,6 @@ export class DuoyunPageLoadbarElement extends GemElement {
 
   constructor() {
     super();
-    document.body.append(this);
     this.internals.role = 'progressbar';
   }
 

diff --git a/packages/duoyun-ui/src/elements/toast.ts b/packages/duoyun-ui/src/elements/toast.ts
@@ -109,6 +109,7 @@ export class DuoyunToastElement extends GemElement {
 
   static open(type: Type, content: string | TemplateResult, { debug, duration = 3000 }: ToastOptions = {}) {
     const toast = Toast.instance || new Toast();
+    document.body.append(toast);
     const key = type + getStringFromTemplate(content);
     const item = toast.items?.find((e) => e.key === key) || { key, type, content };
     // 如何 item 正在执行删除动画，这里会导致一点小瑕疵
@@ -125,7 +126,6 @@ export class DuoyunToastElement extends GemElement {
     this.internals.role = 'alert';
     this.internals.ariaLive = 'polite';
     if (Toast.instance) throw new Error('Single instance component');
-    document.body.append(this);
     this.addEventListener('mouseover', () => {
       this.#over = new Promise((res) => {
         this.addEventListener('mouseout', () => res(), { once: true });