Update docs

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

Hide file tree

Showing 84 changed files with 883 additions and 610 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,18 @@ Create custom elements, bind data, route switching, and quickly develop WebApps
 - [Guide](https://gemjs.org/guide/)
 - [API](https://gemjs.org/api/)
 
+## Project Packages
+
+| Package                                        | Description                                                      |
+| ---------------------------------------------- | ---------------------------------------------------------------- |
+| [packages/gem](packages/gem)                   | Gem core                                                         |
+| [packages/gem-devtools](packages/gem-devtools) | Browser debugging tool for Gem                                   |
+| [packages/gem-analyzer](packages/gem-analyzer) | Gem element analyzer, which can automatically generate documents |
+| [packages/gem-book](packages/gem-book)         | Documentation site builder created using Gem                     |
+| [packages/duoyun-ui](packages/duoyun-ui)       | UI library created using Gem                                     |
+| [packages/gem-port](packages/gem-port)         | Export Gem elements as React/Vue/Svelte components               |
+| [packages/gem-examples](packages/gem-examples) | Gem and DuoyunUI examples                                        |
+
 ## Contribution
 
 Fork repo, submit PR
diff --git a/README_zh.md b/README_zh.md
@@ -22,13 +22,25 @@
   [这里](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html)是 lit-html 和 React，Vue 的性能比较；
 
 - **异步渲染：**
-  连续渲染（例如创建列表）该类元素时会避免长时间阻塞主线程，提供流畅的用户体验；
+  连续渲染（例如列表项）类元素时会避免长时间阻塞主线程，提供流畅的用户体验；
 
 ## 文档
 
 - [Guide](https://gemjs.org/guide/)
 - [API](https://gemjs.org/api/)
 
+## 项目结构
+
+| 目录                                           | 描述                                    |
+| ---------------------------------------------- | --------------------------------------- |
+| [packages/gem](packages/gem)                   | Gem 核心                                |
+| [packages/gem-devtools](packages/gem-devtools) | Gem 的浏览器调试工具                    |
+| [packages/gem-analyzer](packages/gem-analyzer) | Gem 元素分析器，能自动生成文档          |
+| [packages/gem-book](packages/gem-book)         | 使用 Gem 创建的文档站生成器             |
+| [packages/duoyun-ui](packages/duoyun-ui)       | 使用 Gem 创建的 UI 库                   |
+| [packages/gem-port](packages/gem-port)         | 将 Gem 元素导出为 React/Vue/Svelte 组件 |
+| [packages/gem-examples](packages/gem-examples) | 一些 Gem 和 DuoyunUI 示例               |
+
 ## 贡献
 
 Fork 项目，提交 PR
diff --git a/packages/duoyun-ui/docs/en/01-guide/README.md b/packages/duoyun-ui/docs/en/01-guide/README.md
@@ -161,10 +161,3 @@ import('https://esm.sh/duoyun-ui/elements/input-capture').then(({ DuoyunInputCap
   document.body.append(new DuoyunInputCaptureElement()),
 );
 ```
-
-## Roadmap
-
-- Logo design
-- Improve existing elements, standardize API
-- Add missing elements and features
-- Add more language support
diff --git a/packages/duoyun-ui/docs/en/02-elements/chart-tooltip.md b/packages/duoyun-ui/docs/en/02-elements/chart-tooltip.md
@@ -4,6 +4,25 @@
 
 See [`<dy-area-chart>`](./area-chart.md)
 
+```ts
+import { ChartTooltip } from '@duoyun-fe/duoyun-ui/elements/chart-tooltip';
+
+function onPointerMove({ x, y }) {
+  ChartTooltip.open(x, y, {
+    values: [
+      {
+        label: 'label',
+        value: '123',
+      },
+    ],
+  });
+}
+
+function onPointerOut() {
+  ChartTooltip.close();
+}
+```
+
 ## API
 
 <gbp-api src="/src/elements/chart-tooltip.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/chart-zoom.md b/packages/duoyun-ui/docs/en/02-elements/chart-zoom.md
@@ -4,6 +4,30 @@
 
 See [`<dy-area-chart>`](./area-chart.md)
 
+<gbp-example name="dy-chart-zoom" src="https://esm.sh/duoyun-ui/elements/chart-zoom">
+
+```json
+{
+  "style": "width: 100%;",
+  "aspectRatio": 5,
+  "values": [
+    [1, 8],
+    [2, 2],
+    [3, 6],
+    [4, 7],
+    [5, 5],
+    [6, 3],
+    [7, 4],
+    [8, 1],
+    [9, 9]
+  ],
+  "@change": "({ target, detail }) => target.value = detail",
+  "value": [0, 1]
+}
+```
+
+</gbp-example>
+
 ## API
 
 <gbp-api src="/src/elements/chart-zoom.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/coach-mark.md b/packages/duoyun-ui/docs/en/02-elements/coach-mark.md
@@ -8,12 +8,10 @@
 import { render, html } from '@mantou/gem';
 import { setTours } from 'duoyun-ui/elements/coach-mark';
 
+import 'duoyun-ui/elements/side-navigation';
+
 setTours(
   [
-    {
-      title: 'starterTitle',
-      description: 'starterDesc',
-    },
     {
       preview: 'https://picsum.photos/400/300',
       title: 'starterAnalyticsTitle',
@@ -26,34 +24,28 @@ setTours(
     },
   ],
   {
-    currentIndex: 1,
+    currentIndex: 0,
   },
 );
 
+const items = [
+  {
+    pattern: '/',
+    title: 'Nav 1',
+    slot: html`<dy-coach-mark index="0"></dy-coach-mark>`,
+  },
+  {
+    pattern: '/test',
+    title: 'Nav 2',
+    slot: html`<dy-coach-mark index="1"></dy-coach-mark>`,
+  },
+  {
+    title: 'Nav 3',
+  },
+];
+
 render(
-  html`
-    <style>
-      .container {
-        position: relative;
-        width: 100px;
-        line-height: 2;
-        margin: 1em;
-        background: #eee;
-      }
-    </style>
-    <div class="container">
-      <dy-coach-mark index="0"></dy-coach-mark>
-      Tour1
-    </div>
-    <div class="container">
-      <dy-coach-mark index="1"></dy-coach-mark>
-      Tour2
-    </div>
-    <div class="container">
-      <dy-coach-mark index="2"></dy-coach-mark>
-      Tour3
-    </div>
-  `,
+  html`<dy-side-navigation style="width: 50%" .items=${items}></dy-side-navigation>`,
   document.getElementById('root'),
 );
 ```

diff --git a/packages/duoyun-ui/docs/en/02-elements/compartment.md b/packages/duoyun-ui/docs/en/02-elements/compartment.md
@@ -3,5 +3,15 @@
 Used to isolate elemental styles to avoid the contents of the user affect internal elements.
 
 ```ts
-html`<dy-compartment .content=${html`content`}></dy-compartment>`;
+html`
+  <dy-compartment
+    .content=${html`
+      <style>
+        * {
+          color: red;
+        }
+      </style>
+    `}
+  ></dy-compartment>
+`;
 ```
diff --git a/packages/duoyun-ui/docs/en/02-elements/contextmenu.md b/packages/duoyun-ui/docs/en/02-elements/contextmenu.md
@@ -2,14 +2,20 @@
 
 ## Example
 
-<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
+<gbp-example name="dy-button" src="https://esm.sh/duoyun-ui/elements/contextmenu,https://esm.sh/duoyun-ui/elements/button">
+
+```json
+{
+  "@click": "(e)=>{customElements.get('dy-contextmenu').open([{text:'Add',},{text:'Edit',},{text:'---',},{text:'Delete',danger:true,},],{activeElement:e.target});}",
+  "innerHTML": "Open ContextMenu"
+}
+```
+
+</gbp-example>
 
 ```ts
-import { render, html } from '@mantou/gem';
 import { ContextMenu } from 'duoyun-ui/elements/contextmenu';
 
-import 'duoyun-ui/elements/button';
-
 const onClick = (e: MouseEvent) => {
   ContextMenu.open(
     [
@@ -30,12 +36,8 @@ const onClick = (e: MouseEvent) => {
     { activeElement: e.target },
   );
 };
-
-render(html`<dy-button @click=${onClick}>Open ContextMenu</dy-button>`, document.getElementById('root'));
 ```
 
-</gbp-sandpack>
-
 ## API
 
 <gbp-api src="/src/elements/contextmenu.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/link.md b/packages/duoyun-ui/docs/en/02-elements/link.md
@@ -1,3 +1,24 @@
 # `<dy-link>`
 
 See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
+
+## Example
+
+<gbp-example name="dy-active-link" src="https://esm.sh/duoyun-ui/elements/link">
+
+```json
+[
+  {
+    "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>"
+  },
+  {
+    "path": "/",
+    "pattern": "/*",
+    "innerHTML": "This link match current route"
+  }
+]
+```
+
+</gbp-example>
diff --git a/packages/duoyun-ui/docs/en/02-elements/modal.md b/packages/duoyun-ui/docs/en/02-elements/modal.md
@@ -6,7 +6,7 @@
   name="dy-modal"
   props='{"header": "Title", "open": true, "@ok": "(evt) => evt.target.open = false", "@close": "(evt) => evt.target.open = false", "@maskclick": "(evt) => evt.target.open = false"}'
   html='<div slot="body">Modal</div>'
-  src="https://esm.sh/duoyun-ui/elements/modal">Current page auto open modal</gbp-example>
+  src="https://esm.sh/duoyun-ui/elements/modal">Current page auto open modal,<a href="./modal">refresh</a></gbp-example>
 
 ## API
 

diff --git a/packages/duoyun-ui/docs/en/02-elements/page-loadbar.md b/packages/duoyun-ui/docs/en/02-elements/page-loadbar.md
@@ -2,11 +2,24 @@
 
 ## Example
 
+<gbp-example name="dy-button" src="https://esm.sh/duoyun-ui/elements/page-loadbar,https://esm.sh/duoyun-ui/elements/button">
+
+```json
+{
+  "@click": "()=>{const Loadbar=customElements.get('dy-page-loadbar');Loadbar.start();setTimeout(()=>Loadbar.end(),3000);}",
+  "innerHTML": "Show page loader"
+}
+```
+
+</gbp-example>
+
 ```ts
 import { Loadbar } from '@duoyun-fe/duoyun-ui/elements/page-loadbar';
 
-Loadbar.start();
-setTimeout(() => Loadbar.end(), 3000);
+function onClick() {
+  Loadbar.start();
+  setTimeout(() => Loadbar.end(), 3000);
+}
 ```
 
 ## API

diff --git a/packages/duoyun-ui/docs/en/02-elements/toast.md b/packages/duoyun-ui/docs/en/02-elements/toast.md
@@ -2,43 +2,38 @@
 
 ## Example
 
-<gbp-example name="dy-toast" src="https://esm.sh/duoyun-ui/elements/toast">
+<gbp-example name="dy-button" src="https://esm.sh/duoyun-ui/elements/toast,https://esm.sh/duoyun-ui/elements/button">
 
 ```json
-{
-  "style": "width: 100%; position: relative; top: 0; z-index: auto;",
-  "items": [
-    {
-      "type": "success",
-      "content": "This is success"
-    },
-    {
-      "type": "warning",
-      "content": "This is warning"
-    },
-    {
-      "type": "error",
-      "content": "This is error"
-    }
-  ]
-}
+[
+  {
+    "innerHTML": "Success",
+    "color": "positive",
+    "@click": "()=>customElements.get('dy-toast').open('success', 'This is success')"
+  },
+  {
+    "innerHTML": "Warning",
+    "color": "notice",
+    "@click": "()=>customElements.get('dy-toast').open('warning', 'This is warning')"
+  },
+  {
+    "innerHTML": "Error",
+    "color": "negative",
+    "@click": "()=>customElements.get('dy-toast').open('error', 'This is error')"
+  }
+]
 ```
 
 </gbp-example>
 
-<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
-
 ```ts
-import { render, html } from '@mantou/gem';
 import { Toast } from 'duoyun-ui/elements/toast';
 
-const success = () => Toast.open('success', new Date().toLocaleString());
-
-render(html`<button @click=${success}>Open Toast</button>`, document.getElementById('root'));
+function onClick() {
+  Toast.open('success', 'This is success');
+}
 ```
 
-</gbp-sandpack>
-
 ## API
 
 <gbp-api src="/src/elements/toast.ts"></gbp-api>
diff --git a/packages/duoyun-ui/docs/en/02-elements/wait.md b/packages/duoyun-ui/docs/en/02-elements/wait.md
@@ -2,10 +2,23 @@
 
 ## Example
 
+<gbp-example name="dy-button" src="https://esm.sh/duoyun-ui/elements/wait,https://esm.sh/duoyun-ui/elements/button">
+
+```json
+{
+  "@click": "()=>customElements.get('dy-wait').wait(new Promise(res => setTimeout(res, 1500)))",
+  "innerHTML": "Click"
+}
+```
+
+</gbp-example>
+
 ```ts
 import { waitLoading } from '@duoyun-fe/duoyun-ui/elements/wait';
 
-waitLoading(fetch('/'));
+function onClick() {
+  waitLoading(new Promise((res) => setTimeout(res, 1500)));
+}
 ```
 
 ## API

diff --git a/packages/duoyun-ui/docs/zh/01-guide/README.md b/packages/duoyun-ui/docs/zh/01-guide/README.md
@@ -160,10 +160,3 @@ import('https://esm.sh/duoyun-ui/elements/input-capture').then(({ DuoyunInputCap
   document.body.append(new DuoyunInputCaptureElement()),
 );
 ```
-
-## 路线图
-
-- Logo 设计
-- 完善现有元素，规范化 API
-- 添加缺失元素和功能
-- 添加更多的语言支持