[duoyun-ui] Optimize compatibility

Closed #81

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

@@ -2,10 +2,18 @@
 
 ## Example
 
-<gbp-example
-  name="dy-result"
-  props='{"status": "positive", "header": "Complete!", "description": "Do non amet sunt nostrud excepteur ut nostrud veniam aliquip commodo incididunt."}'
-  src="https://esm.sh/duoyun-ui/elements/result"></gbp-example>
+<gbp-example name="dy-result" src="https://esm.sh/duoyun-ui/elements/result">
+
+```json
+{
+  "icon": "icons.check",
+  "status": "positive",
+  "header": "Complete!",
+  "description": "Do non amet sunt nostrud excepteur ut nostrud veniam aliquip commodo incididunt."
+}
+```
+
+</gbp-example>
 
 ## API
 

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

@@ -2,10 +2,28 @@
 
 ## Example
 
-<gbp-example
-  name="dy-select"
-  props='{"searchable": true, "adder": {"text": "New"}, "placeholder": "Please select!", "options": [{"label": "Option 1"}, {"label": "Option 2"}], "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://esm.sh/duoyun-ui/elements/select"></gbp-example>
+<gbp-example name="dy-select" src="https://esm.sh/duoyun-ui/elements/select">
+
+```json
+[
+  {
+    "searchable": true,
+    "multiple": true,
+    "adder": { "text": "New" },
+    "placeholder": "Please select!",
+    "options": [{ "label": "Option 1" }, { "label": "Option 2" }],
+    "@change": "(evt) => evt.target.value = evt.detail"
+  },
+  {
+    "inline": true,
+    "adder": { "text": "New" },
+    "options": [{ "label": "Option 1" }, { "label": "Option 2" }],
+    "@change": "(evt) => evt.target.value = evt.detail"
+  }
+]
+```
+
+</gbp-example>
 
 ## API
 

packages/duoyun-ui/docs/en/02-elements/side-navigation.md

@@ -2,10 +2,28 @@
 
 ## Example
 
-<gbp-example
-  name="dy-side-navigation"
-  props='{"style": "width: 240px;", "items": [{"title": "Page 1", "hash": "#1"}, {"title": "Page 2", "hash": "#2"}, {"title": "Page 3", "hash": "#3"}]}'
-  src="https://esm.sh/duoyun-ui/elements/side-navigation"></gbp-example>
+<gbp-example name="dy-side-navigation" src="https://esm.sh/duoyun-ui/elements/side-navigation">
+
+```json
+{
+  "style": "width: 240px;",
+  "items": [
+    { "title": "Page 1", "hash": "#1" },
+    { "title": "Page 2", "hash": "#2" },
+    { "title": "Page 3", "hash": "#3" },
+    {
+      "title": "Group 2",
+      "group": [
+        { "title": "Route 1", "hash": "#4" },
+        { "title": "Route 2", "hash": "#5" },
+        { "title": "Route 3", "hash": "#6" }
+      ]
+    }
+  ]
+}
+```
+
+</gbp-example>
 
 ## API
 

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

@@ -2,10 +2,18 @@
 
 ## Example
 
-<gbp-example
-  name="dy-result"
-  props='{"status": "positive", "header": "Complete!", "description": "Do non amet sunt nostrud excepteur ut nostrud veniam aliquip commodo incididunt."}'
-  src="https://esm.sh/duoyun-ui/elements/result"></gbp-example>
+<gbp-example name="dy-result" src="https://esm.sh/duoyun-ui/elements/result">
+
+```json
+{
+  "icon": "icons.check",
+  "status": "positive",
+  "header": "Complete!",
+  "description": "Do non amet sunt nostrud excepteur ut nostrud veniam aliquip commodo incididunt."
+}
+```
+
+</gbp-example>
 
 ## API
 

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

@@ -2,10 +2,28 @@
 
 ## Example
 
-<gbp-example
-  name="dy-select"
-  props='{"searchable": true, "adder": {"text": "添加"}, "placeholder": "请选择", "options": [{"label": "Option 1"}, {"label": "Option 2"}], "@change": "(evt) => evt.target.value = evt.detail"}'
-  src="https://esm.sh/duoyun-ui/elements/select"></gbp-example>
+<gbp-example name="dy-select" src="https://esm.sh/duoyun-ui/elements/select">
+
+```json
+[
+  {
+    "searchable": true,
+    "multiple": true,
+    "adder": { "text": "添加" },
+    "placeholder": "请选择",
+    "options": [{ "label": "Option 1" }, { "label": "Option 2" }],
+    "@change": "(evt) => evt.target.value = evt.detail"
+  },
+  {
+    "inline": true,
+    "adder": { "text": "添加" },
+    "options": [{ "label": "Option 1" }, { "label": "Option 2" }],
+    "@change": "(evt) => evt.target.value = evt.detail"
+  }
+]
+```
+
+</gbp-example>
 
 ## API
 

packages/duoyun-ui/docs/zh/02-elements/side-navigation.md

@@ -2,10 +2,28 @@
 
 ## Example
 
-<gbp-example
-  name="dy-side-navigation"
-  props='{"style": "width: 240px;", "items": [{"title": "Page 1", "hash": "#1"}, {"title": "Page 2", "hash": "#2"}, {"title": "Page 3", "hash": "#3"}]}'
-  src="https://esm.sh/duoyun-ui/elements/side-navigation"></gbp-example>
+<gbp-example name="dy-side-navigation" src="https://esm.sh/duoyun-ui/elements/side-navigation">
+
+```json
+{
+  "style": "width: 240px;",
+  "items": [
+    { "title": "Page 1", "hash": "#1" },
+    { "title": "Page 2", "hash": "#2" },
+    { "title": "Page 3", "hash": "#3" },
+    {
+      "title": "Group 2",
+      "group": [
+        { "title": "Route 1", "hash": "#4" },
+        { "title": "Route 2", "hash": "#5" },
+        { "title": "Route 3", "hash": "#6" }
+      ]
+    }
+  ]
+}
+```
+
+</gbp-example>
 
 ## API
 

packages/duoyun-ui/src/elements/base/wake-lock.ts

@@ -2,6 +2,7 @@
 
 import { GemElementOptions } from '@mantou/gem/lib/element';
 import { logger } from '@mantou/gem/helper/logger';
+import { addListener } from '@mantou/gem/lib/utils';
 
 import { DuoyunVisibleBaseElement } from './visible';
 
@@ -25,13 +26,13 @@ export function wakeLock(ele: DuoyunWakeLockBaseElement) {
   };
 
   // 当页面处于非活动状态时该锁自动失效
-  document.addEventListener('visibilitychange', listener);
-  ele.addEventListener('show', listener);
-  ele.addEventListener('hide', listener);
+  const removeListener = addListener(document, 'visibilitychange', listener);
+  const removeShowListener = addListener(ele, 'show', listener);
+  const removeHideListener = addListener(ele, 'hide', listener);
   return async () => {
-    document.removeEventListener('visibilitychange', listener);
-    ele.removeEventListener('show', listener);
-    ele.removeEventListener('hide', listener);
+    removeListener();
+    removeShowListener();
+    removeHideListener();
 
     (await wakeLockPromise)?.release();
   };

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

@@ -9,7 +9,7 @@ import {
   emitter,
   Emitter,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
+import { createCSSSheet, css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
@@ -243,9 +243,9 @@ export class DuoyunCarouselElement extends GemElement<State> {
       () => this.change(this.state.currentIndex),
       () => [this.state.currentIndex],
     );
-    document.addEventListener('visibilitychange', this.#pageVisibleChange);
+    const removeListener = addListener(document, 'visibilitychange', this.#pageVisibleChange);
     return () => {
-      document.removeEventListener('visibilitychange', this.#pageVisibleChange);
+      removeListener();
       this.#clearTimer();
     };
   };

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

@@ -35,6 +35,8 @@ const style = createCSSSheet(css`
     box-sizing: border-box;
     width: 1em;
     aspect-ratio: 1;
+    /* webkit bug */
+    height: 1em;
     background-clip: content-box;
     padding: 0;
     color: ${theme.backgroundColor};

packages/duoyun-ui/src/elements/color-panel.ts

@@ -92,6 +92,10 @@ const style = createCSSSheet(css`
     border: 1px solid #0008;
     transform: translate(-50%, -50%);
   }
+  .current {
+    /* webkit bug */
+    height: 1.2em;
+  }
   .current span {
     left: 50%;
     top: 50%;

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

@@ -1,3 +1,5 @@
+// webkit marker arrow bug: https://duoyun-ui.gemjs.org/zh/elements/flow
+
 import { adoptedStyle, customElement, property, part, state, refobject, RefObject } from '@mantou/gem/lib/decorators';
 import { html, svg, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, exportPartsMap } from '@mantou/gem/lib/utils';

packages/duoyun-ui/src/elements/input-capture.ts

@@ -1,6 +1,6 @@
 import { adoptedStyle, customElement, part } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
-import { createCSSSheet, css } from '@mantou/gem/lib/utils';
+import { addListener, createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
 import { getDisplayKey } from '../lib/hotkeys';
@@ -72,17 +72,17 @@ export class DuoyunInputCaptureElement extends GemElement<State> {
   #onPointerup = () => this.setState({ mousePosition: null });
 
   mounted = () => {
-    addEventListener('keydown', this.#onKeydown, { capture: true });
-    addEventListener('pointerdown', this.#onPointerdown, { capture: true });
-    addEventListener('pointermove', this.#onPointermove, { capture: true });
-    addEventListener('pointerup', this.#onPointerup, { capture: true });
-    addEventListener('pointercancel', this.#onPointerup, { capture: true });
+    const removeKeydownListener = addListener(window, 'keydown', this.#onKeydown, { capture: true });
+    const removePointerdownListener = addListener(window, 'pointerdown', this.#onPointerdown, { capture: true });
+    const removePointermoveListener = addListener(window, 'pointermove', this.#onPointermove, { capture: true });
+    const removePointerupListener = addListener(window, 'pointerup', this.#onPointerup, { capture: true });
+    const removePointercancelListener = addListener(window, 'pointercancel', this.#onPointerup, { capture: true });
     () => {
-      removeEventListener('keydown', this.#onKeydown, { capture: true });
-      removeEventListener('pointerdown', this.#onPointerdown, { capture: true });
-      removeEventListener('pointermove', this.#onPointermove, { capture: true });
-      removeEventListener('pointerup', this.#onPointerup, { capture: true });
-      removeEventListener('pointercancel', this.#onPointerup, { capture: true });
+      removeKeydownListener();
+      removePointerdownListener();
+      removePointermoveListener();
+      removePointerupListener();
+      removePointercancelListener();
     };
   };
 

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

@@ -291,32 +291,22 @@ export class DuoyunInputElement extends GemElement {
 
   #onKeyDown = (evt: KeyboardEvent) => {
     const nextValue = (n: number) => String(clamp(this.#min, Number(this.value || this.min) + n, this.#max));
-    const prevent = (evt: Event) => {
-      evt.stopPropagation();
-      evt.preventDefault();
-    };
     if (this.type === 'number') {
-      hotkeys({
-        up: () => {
-          this.change(nextValue(this.#step));
-          prevent(evt);
+      hotkeys(
+        {
+          up: () => this.change(nextValue(this.#step)),
+          down: () => this.change(nextValue(-this.#step)),
         },
-        down: () => {
-          this.change(nextValue(-this.#step));
-          prevent(evt);
-        },
-      })(evt);
+        { stopPropagation: true },
+      )(evt);
     }
-    hotkeys({
-      'ctrl+z,command+z': () => {
-        this.#history.undo();
-        prevent(evt);
-      },
-      'ctrl+shift+z,command+shift+z': () => {
-        this.#history.redo();
-        prevent(evt);
+    hotkeys(
+      {
+        'ctrl+z,command+z': () => this.#history.undo(),
+        'ctrl+shift+z,command+shift+z': () => this.#history.redo(),
       },
-    })(evt);
+      { stopPropagation: true },
+    )(evt);
   };
 
   mounted = () => {