[duoyun-ui][gem-book] Update misc

packages/duoyun-ui/docs/en/02-elements/coach-mark.md

@@ -54,7 +54,7 @@ render(
       Tour3
     </div>
   `,
-  document.body,
+  document.getElementById('root'),
 );
 ```
 

packages/duoyun-ui/docs/en/02-elements/menu.md

@@ -31,7 +31,7 @@ const onClick = (e: MouseEvent) => {
   );
 };
 
-render(html`<dy-button @click=${onClick}>Open Menu</dy-button>`, document.body);
+render(html`<dy-button @click=${onClick}>Open Menu</dy-button>`, document.getElementById('root'));
 ```
 
 </gbp-sandpack>

packages/duoyun-ui/docs/en/02-elements/popover.md

@@ -23,7 +23,7 @@ render(
       <dy-button>Current Time</dy-button>
     </dy-popover>
   `,
-  document.body,
+  document.getElementById('root'),
 );
 ```
 

packages/duoyun-ui/docs/en/02-elements/scatter-chart.md

@@ -4,7 +4,7 @@
 
 <gbp-example
   name="dy-scatter-chart"
-  props='{"style": "width: 100%;", "fill": "true", "sequences": [{"label": "Label", "values": [[100, 1], [200, 3], [1000, 5]] }] }'
+  props='{"style": "width: 100%;", "sequences": [{"label": "Label", "values": [[100, 1], [200, 3], [1000, 5]] }] }'
   src="https://jspm.dev/duoyun-ui/elements/scatter-chart"></gbp-example>
 
 ## API

packages/duoyun-ui/docs/en/02-elements/text-mask.md

@@ -4,7 +4,8 @@
 
 <gbp-example
   name="dy-text-mask"
-  props='{"masks": ["xxx-xxxx-xxxx"], "origin": "13198761234"}'
+  props='{"masks": ["☎️ xxx-****-xxxx"]}'
+  html="13198761234"
   src="https://jspm.dev/duoyun-ui/elements/text-mask"></gbp-example>
 
 ## API

packages/duoyun-ui/docs/en/02-elements/toast.md

@@ -10,7 +10,7 @@ import { Toast } from 'duoyun-ui/elements/toast';
 
 const success = () => Toast.open('success', new Date().toLocaleString());
 
-render(html`<button @click=${success}>Open Toast</button>`, document.body);
+render(html`<button @click=${success}>Open Toast</button>`, document.getElementById('root'));
 ```
 
 </gbp-sandpack>

packages/duoyun-ui/docs/en/02-elements/tooltip.md

@@ -16,7 +16,7 @@ render(
       <dy-button>Current Time</dy-button>
     </dy-tooltip>
   `,
-  document.body,
+  document.getElementById('root'),
 );
 ```
 

packages/duoyun-ui/docs/zh/02-elements/coach-mark.md

@@ -53,7 +53,7 @@ render(
       Tour3
     </div>
   `,
-  document.body,
+  document.getElementById('root'),
 );
 ```
 

packages/duoyun-ui/docs/zh/02-elements/menu.md

@@ -31,7 +31,7 @@ const onClick = (e: MouseEvent) => {
   );
 };
 
-render(html`<dy-button @click=${onClick}>打开菜单</dy-button>`, document.body);
+render(html`<dy-button @click=${onClick}>打开菜单</dy-button>`, document.getElementById('root'));
 ```
 
 </gbp-sandpack>

packages/duoyun-ui/docs/zh/02-elements/popover.md

@@ -23,7 +23,7 @@ render(
       <dy-button>当前时间</dy-button>
     </dy-popover>
   `,
-  document.body,
+  document.getElementById('root'),
 );
 ```
 

packages/duoyun-ui/docs/zh/02-elements/scatter-chart.md

@@ -4,7 +4,7 @@
 
 <gbp-example
   name="dy-scatter-chart"
-  props='{"style": "width: 100%;", "fill": "true", "sequences": [{"label": "Label", "values": [[100, 1], [200, 3], [1000, 5]] }] }'
+  props='{"style": "width: 100%;", "sequences": [{"label": "Label", "values": [[100, 1], [200, 3], [1000, 5]] }] }'
   src="https://jspm.dev/duoyun-ui/elements/scatter-chart"></gbp-example>
 
 ## API

packages/duoyun-ui/docs/zh/02-elements/text-mask.md

@@ -4,7 +4,8 @@
 
 <gbp-example
   name="dy-text-mask"
-  props='{"masks": ["xxx-xxxx-xxxx"], "origin": "13198761234"}'
+  props='{"masks": ["☎️ xxx-****-xxxx"]}'
+  html="13198761234"
   src="https://jspm.dev/duoyun-ui/elements/text-mask"></gbp-example>
 
 ## API

packages/duoyun-ui/docs/zh/02-elements/toast.md

@@ -10,7 +10,7 @@ import { Toast } from 'duoyun-ui/elements/toast';
 
 const success = () => Toast.open('success', new Date().toLocaleString());
 
-render(html`<button @click=${success}>打开吐司</button>`, document.body);
+render(html`<button @click=${success}>打开吐司</button>`, document.getElementById('root'));
 ```
 
 </gbp-sandpack>

packages/duoyun-ui/docs/zh/02-elements/tooltip.md

@@ -16,7 +16,7 @@ render(
       <dy-button>当前时间</dy-button>
     </dy-tooltip>
   `,
-  document.body,
+  document.getElementById('root'),
 );
 ```
 

packages/duoyun-ui/src/elements/paragraph.ts

@@ -31,16 +31,22 @@ const style = createCSSSheet(css`
   li {
     padding-inline-start: 0.5em;
   }
+  code,
   kbd {
     font-family: ${theme.codeFont};
     margin-inline: 0.2em;
     padding: 0.15em 0.4em 0.1em;
     font-size: 0.9em;
-    background: ${theme.lightBackgroundColor};
     border: 1px solid ${theme.borderColor};
-    border-bottom-width: 2px;
     border-radius: ${theme.smallRound};
   }
+  code {
+    background: ${theme.hoverBackgroundColor};
+  }
+  kbd {
+    background: ${theme.lightBackgroundColor};
+    border-bottom-width: 2px;
+  }
 `);
 
 /**

packages/duoyun-ui/src/elements/scatter-chart.ts

@@ -7,7 +7,7 @@ import { isNullish } from '../lib/types';
 
 import { DuoyunChartBaseElement } from './base/chart';
 import { Sequence } from './area-chart';
-import { ChartTooltip } from './chart-tooltip';
+import { ChartTooltip, Data } from './chart-tooltip';
 
 /**
  * @customElement dy-scatter-chart
@@ -16,25 +16,26 @@ import { ChartTooltip } from './chart-tooltip';
 export class DuoyunScatterChartElement extends DuoyunChartBaseElement {
   @property sequences?: Sequence[];
 
-  #symbolSequences: number[][][] = [];
+  #symbolSequences: (number[] | undefined)[][] = [];
+
+  #tooltipRender = (data: Data) => {
+    return html`${data.xValue},${data.values![0].value}`;
+  };
 
   #onMouseMove = (evt: MouseEvent, index: number, point: number[]) => {
     if (this.noData || this.loading) return;
-    if (this.tooltip?.render) {
-      ChartTooltip.open(evt.x, evt.y, {
-        render: this.tooltip?.render,
-        title: this.tooltip?.titleFormatter?.(point[0]) || String(point[0]),
-        xValue: point[0],
-        values: [
-          {
-            value: this.tooltip?.valueFormatter?.(point[1]) || this.yAxi?.formatter?.(point[1], 0) || String(point[1]),
-            originValue: point[1],
-            color: this.colors[index],
-            label: this.sequences![index].label,
-          },
-        ],
-      });
-    }
+    ChartTooltip.open(evt.x, evt.y, {
+      render: this.tooltip?.render || this.#tooltipRender,
+      xValue: point[0],
+      values: [
+        {
+          value: this.tooltip?.valueFormatter?.(point[1]) || this.yAxi?.formatter?.(point[1], 0) || String(point[1]),
+          originValue: point[1],
+          color: this.colors[index],
+          label: this.sequences![index].label,
+        },
+      ],
+    });
   };
 
   #onMouseOut = () => {
@@ -66,15 +67,10 @@ export class DuoyunScatterChartElement extends DuoyunChartBaseElement {
         this.initYAxi(yMin, yMax);
         this.initViewBox();
 
-        this.#symbolSequences = [];
-        this.sequences.forEach(({ values }) => {
-          const dots: number[][] = [];
-          values.forEach(([x, y]) => {
-            if (!isNullish(x) && !isNullish(y)) {
-              dots.push(this.getStagePoint([x, y]));
-            }
+        this.#symbolSequences = this.sequences.map(({ values }) => {
+          return values.map(([x, y]) => {
+            return isNullish(x) || isNullish(y) ? undefined : this.getStagePoint([x, y]);
           });
-          this.#symbolSequences.push(dots);
         });
       },
       () => [this.sequences, this.contentRect.width],
@@ -110,12 +106,12 @@ export class DuoyunScatterChartElement extends DuoyunChartBaseElement {
         } xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
           ${this.renderXAxi({ grid: true })}
           ${this.renderYAxi()}
-          ${this.sequences.map(({ label, value }, index) =>
-            this.#symbolSequences[index].map((point) =>
+          ${this.sequences.map(({ label, value, values }, index) =>
+            this.#symbolSequences[index].map((point, pos) =>
               point
                 ? svg`
                     <circle
-                      @mousemove=${(evt: MouseEvent) => this.#onMouseMove(evt, index, point)}
+                      @mousemove=${(evt: MouseEvent) => this.#onMouseMove(evt, index, values[pos] as number[])}
                       @mouseout=${this.#onMouseOut}
                       class=${classMap({
                         symbol: true,

packages/duoyun-ui/src/elements/text-mask.ts

@@ -8,6 +8,9 @@ const style = createCSSSheet(css`
   }
 `);
 
+// other | placeholder | replacer
+type MaskParseValue = TemplateResult | string | number;
+
 /**
  * @customElement dy-text-mask
  */
@@ -16,30 +19,42 @@ const style = createCSSSheet(css`
 export class DyTextMaskElement extends GemElement {
   @attribute origin: string;
   @attribute placeholder: string;
+  @attribute replacer: string;
   @property masks?: string[];
 
   get #placeholder() {
     return this.placeholder || 'x';
   }
 
-  #masks: Map<number, [string[], (TemplateResult | string)[]]>;
+  get #replacer() {
+    return this.replacer || '*';
+  }
+
+  constructor() {
+    super();
+    new MutationObserver(() => this.update()).observe(this, { childList: true, characterData: true, subtree: true });
+  }
+
+  #masks: Map<number, [string[], MaskParseValue[]]>;
 
   willMount = () => {
     this.memo(
       () => {
-        const clearRegRxp = new RegExp(`[^${this.#placeholder}]`, 'g');
-        const matchRegRxp = new RegExp(`([${this.#placeholder}]+)`);
+        const clearRegRxp = new RegExp(`[^${this.#placeholder}${this.#replacer}]`, 'g');
+        const matchRegRxp = new RegExp(`([${this.#placeholder}]+|[${this.#replacer}]+)`);
         this.#masks = new Map();
         this.masks?.forEach((mask) => {
           const { length } = mask.replaceAll(clearRegRxp, '');
           const templateArr: string[] = [];
-          const values: (TemplateResult | string)[] = [];
+          const values: MaskParseValue[] = [];
           mask.split(matchRegRxp).forEach((e) => {
             templateArr.push('');
             if (!e) {
               values.push('');
             } else if (e === this.#placeholder.repeat(e.length)) {
               values.push(e);
+            } else if (e === this.#replacer.repeat(e.length)) {
+              values.push(e.length);
             } else {
               values.push(html`<span>${e}</span>`);
             }
@@ -53,17 +68,25 @@ export class DyTextMaskElement extends GemElement {
   };
 
   render = () => {
-    const arg = this.#masks.get(this.origin.length);
-    if (!arg) return html`${this.origin}`;
+    const origin = this.origin || this.textContent?.trim() || '';
+    const arg = this.#masks.get(origin.length);
+    if (!arg) return html`${origin}`;
 
     let index = 0;
     const values = arg[1].map((e) => {
-      if (typeof e === 'string') {
-        const s = this.origin.slice(index, index + e.length);
-        index += e.length;
-        return s;
+      switch (typeof e) {
+        case 'string': {
+          const s = origin.slice(index, index + e.length);
+          index += e.length;
+          return s;
+        }
+        case 'number': {
+          index += e;
+          return this.#replacer.repeat(e);
+        }
+        default:
+          return e;
       }
-      return e;
     });
     return html(arg[0] as unknown as TemplateStringsArray, ...values);
   };