Fixed #70

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

@@ -4,7 +4,7 @@
 
 <gbp-example
   name="dy-banner"
-  props='{"style": "width: 100%", "closeable": true, "status": "positive", "action": {"text": "View"}}'
+  props='{"style": "width: 100%", "closable": true, "status": "positive", "action": {"text": "View"}}'
   html="This is banner"
   src="https://jspm.dev/duoyun-ui/elements/banner"></gbp-example>
 

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

@@ -18,7 +18,7 @@ setTours(
       preview: 'https://picsum.photos/400/300',
       title: 'starterAnalyticsTitle',
       description: 'starterAnalyticsDesc',
-      maskCloseable: false,
+      maskClosable: false,
     },
     {
       title: 'starterMenuTitle',

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

@@ -4,7 +4,7 @@
 
 <gbp-example
   name="dy-tag"
-  props='{"color": "positive", "small": true, "closeable": true}'
+  props='{"color": "positive", "small": true, "closable": true}'
   html="Tag"
   src="https://jspm.dev/duoyun-ui/elements/tag"></gbp-example>
 

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

@@ -4,7 +4,7 @@
 
 <gbp-example
   name="dy-banner"
-  props='{"style": "width: 100%", "closeable": true, "status": "positive", "action": {"text": "View"}}'
+  props='{"style": "width: 100%", "closable": true, "status": "positive", "action": {"text": "View"}}'
   html="This is banner"
   src="https://jspm.dev/duoyun-ui/elements/banner"></gbp-example>
 

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

@@ -18,6 +18,7 @@ setTours(
       preview: 'https://picsum.photos/400/300',
       title: 'starterAnalyticsTitle',
       description: 'starterAnalyticsDesc',
+      maskClosable: false,
     },
     {
       title: 'starterMenuTitle',

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

@@ -4,7 +4,7 @@
 
 <gbp-example
   name="dy-tag"
-  props='{"color": "positive", "small": true, "closeable": true}'
+  props='{"color": "positive", "small": true, "closable": true}'
   html="Tag"
   src="https://jspm.dev/duoyun-ui/elements/tag"></gbp-example>
 

packages/duoyun-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "0.0.67",
+  "version": "1.0.0",
   "description": "WebComponts UI",
   "exports": {
     "./elements/*": "./elements/*.js",

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

@@ -82,7 +82,7 @@ type Status = 'positive' | 'notice' | 'negative' | 'default';
 @customElement('dy-banner')
 @adoptedStyle(style)
 export class DuoyunBannerElement extends GemElement {
-  @boolattribute closeable: boolean;
+  @boolattribute closable: boolean;
   @attribute status: Status;
 
   @property action?: { text: string; handle: () => void };
@@ -101,7 +101,7 @@ export class DuoyunBannerElement extends GemElement {
   }
 
   constructor() {
-    super();
+    super({ delegatesFocus: true });
     this.internals.role = 'banner';
   }
 
@@ -117,12 +117,13 @@ export class DuoyunBannerElement extends GemElement {
             <button class="action" @keydown=${commonHandle} @click=${this.action.handle}>${this.action.text}</button>
           `
         : ''}
-      ${this.closeable
+      ${this.closable
         ? html`
             <dy-divider class="divider" orientation="vertical"></dy-divider>
             <dy-use
               role="button"
               class="close"
+              tabindex="0"
               .element=${icons.close}
               @click=${() => this.close(null)}
               @keydown=${commonHandle}

packages/duoyun-ui/src/elements/base/visible.ts

@@ -6,20 +6,20 @@ import { GemElement, GemElementOptions } from '@mantou/gem/lib/element';
  * @fires hide
  */
 export class DuoyunVisibleBaseElement<_T = Record<string, unknown>> extends GemElement {
-  @emitter visible: Emitter;
+  @emitter show: Emitter;
   @emitter hide: Emitter;
 
-  @state visibility: boolean;
+  @state visible: boolean;
 
   constructor(options?: GemElementOptions) {
     super(options);
     new IntersectionObserver((entries) => {
       const { intersectionRatio } = entries.pop()!;
       if (intersectionRatio > 0) {
-        this.visibility = true;
-        this.visible(null);
+        this.visible = true;
+        this.show(null);
       } else {
-        this.visibility = false;
+        this.visible = false;
         this.hide(null);
       }
     }).observe(this);

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

@@ -134,7 +134,6 @@ export class DuoyunButtonElement extends GemElement {
   @state active: boolean;
 
   @refobject dropdownRef: RefObject<DuoyunUseElement>;
-  @refobject buttonRef: RefObject<HTMLDivElement>;
 
   @part static button: string;
   @part static dropdown: string;
@@ -144,7 +143,7 @@ export class DuoyunButtonElement extends GemElement {
   }
 
   constructor() {
-    super();
+    super({ delegatesFocus: true });
     this.addEventListener('click', () => {
       if (this.disabled) return;
       if (this.route) {
@@ -184,7 +183,6 @@ export class DuoyunButtonElement extends GemElement {
         }
       </style>
       <div
-        ref=${this.buttonRef.ref}
         tabindex="0"
         role="button"
         aria-disabled=${this.disabled}
@@ -222,8 +220,4 @@ export class DuoyunButtonElement extends GemElement {
         : ''}
     `;
   };
-
-  focus = () => {
-    this.buttonRef.element!.focus();
-  };
 }

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

@@ -139,6 +139,10 @@ export class DuoyunCalendarElement extends GemElement {
   @property highlights?: number[][];
   @property renderDate?: (date: Time) => TemplateResult;
 
+  constructor() {
+    super({ delegatesFocus: true });
+  }
+
   #isHighlight = (date: Time) => {
     const t = date.valueOf();
     return !!this.highlights?.some(([start, stop]) => t >= start && t <= stop);

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

@@ -112,7 +112,7 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @attribute crossorigin: 'anonymous' | 'use-credentials';
 
   constructor() {
-    super();
+    super({ delegatesFocus: true });
     this.internals.role = 'group';
   }
 

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

@@ -176,6 +176,10 @@ export class DuoyunCarouselElement extends GemElement<State> {
     return this.interval || 3000;
   }
 
+  constructor() {
+    super({ delegatesFocus: true });
+  }
+
   state: State = {
     currentIndex: 0,
     direction: 1,

packages/duoyun-ui/src/elements/cascader-pick.ts

@@ -18,7 +18,7 @@ import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
 import { ContextMenu } from './menu';
-import { pickerStyle } from './pick';
+import { BasePickerElement, pickerStyle } from './pick';
 import type { Option, DuoyunCascaderElement } from './cascader';
 
 import './use';
@@ -49,9 +49,9 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-export class DuoyunCascaderPickElement extends GemElement {
+export class DuoyunCascaderPickElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
-  @property options: Option[];
+  @property options?: Option[];
   @boolattribute fit: boolean;
   @boolattribute disabled: boolean;
   @boolattribute multiple: boolean;
@@ -78,7 +78,7 @@ export class DuoyunCascaderPickElement extends GemElement {
   };
 
   #onOpen = () => {
-    if (this.disabled || !this.options || !this.options.length) return;
+    if (this.disabled || !this.options?.length) return;
     ContextMenu.open(
       html`
         <dy-cascader
@@ -139,4 +139,6 @@ export class DuoyunCascaderPickElement extends GemElement {
       <dy-use class="icon" .element=${icons.expand}></dy-use>
     `;
   };
+
+  showPicker = () => this.#onOpen();
 }

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

@@ -81,7 +81,7 @@ const token = Symbol();
 export class DuoyunCascaderElement extends GemElement<State> {
   @part static column: string;
 
-  @property options: Option[];
+  @property options?: Option[];
   @boolattribute fit: boolean;
   @boolattribute multiple: boolean;
   @globalemitter change: Emitter<(string | number)[][] | (string | number)[]>;
@@ -158,12 +158,13 @@ export class DuoyunCascaderElement extends GemElement<State> {
   willMount = () => {
     this.memo(
       () => {
+        if (!this.options) return;
         this.#deep = getCascaderDeep(this.options, 'children');
         // init state
         if (!this.state.selected.length) {
           const selected: Option[] = [];
           this.#value?.[0]?.forEach((val, index) => {
-            const item = (index ? selected[selected.length - 1].children! : this.options).find(
+            const item = (index ? selected[selected.length - 1].children! : this.options!).find(
               (e) => val === (e.value ?? e.label),
             )!;
             selected.push(item);
@@ -209,13 +210,14 @@ export class DuoyunCascaderElement extends GemElement<State> {
             ? 1
             : 0;
         };
-        this.options.forEach((e) => check([], e));
+        this.options?.forEach((e) => check([], e));
       },
       () => [this.value],
     );
   };
 
   render = () => {
+    if (!this.options) return html``;
     const { selected } = this.state;
     const listStyle = styleMap({ width: this.fit ? `${100 / this.#deep}%` : undefined });
     return html`

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

@@ -72,7 +72,7 @@ export class DuoyunCheckboxElement extends GemElement {
   @attribute value: string;
 
   constructor() {
-    super();
+    super({ delegatesFocus: true });
     this.addEventListener('click', this.#onClick);
   }
 
@@ -112,7 +112,7 @@ export class DuoyunCheckboxGroupElement extends GemElement {
   @property options?: Option[];
 
   constructor() {
-    super();
+    super({ delegatesFocus: true });
     this.internals.role = 'group';
   }
 

packages/duoyun-ui/src/elements/coach-mark.ts

@@ -24,7 +24,7 @@ export type Tour = {
   finishText?: string;
   finish?: () => Promise<void> | void;
   skip?: () => Promise<void> | void;
-  maskCloseable?: boolean;
+  maskClosable?: boolean;
 };
 let tourList: Tour[] = [];
 
@@ -161,10 +161,10 @@ export class DuoyunCoachMarkElement extends DuoyunVisibleBaseElement {
 
   #open = async () => {
     if (!this.#tour) return;
-    const { description, preview = '', title, finishText, maskCloseable } = this.#tour;
+    const { description, preview = '', title, finishText, maskClosable } = this.#tour;
     const isFinish = store.currentIndex === tourList.length - 1;
     this.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    if (!this.visibility) await new Promise((res) => this.addEventListener('visible', res, { once: true }));
+    if (!this.visible) await new Promise((res) => this.addEventListener('show', res, { once: true }));
     DuoyunWaitElement.instance?.remove(); // avoid inert conflict
     ContextMenu.open(
       html`
@@ -188,7 +188,7 @@ export class DuoyunCoachMarkElement extends DuoyunVisibleBaseElement {
         </dy-card>
       `,
       {
-        maskCloseable,
+        maskClosable,
         activeElement: this,
         width: this.#width,
       },

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

@@ -6,6 +6,8 @@ import {
   globalemitter,
   Emitter,
   boolattribute,
+  refobject,
+  RefObject,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
@@ -15,6 +17,9 @@ import { theme } from '../lib/theme';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
+import type { BasePickerElement } from './pick';
+import type { DuoyunPopoverElement } from './popover';
+
 import './popover';
 import './color-panel';
 
@@ -48,16 +53,22 @@ const style = createCSSSheet(css`
 @customElement('dy-color-pick')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-export class DuoyunColorPickElement extends GemElement {
+export class DuoyunColorPickElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
+  @refobject popoverRef: RefObject<DuoyunPopoverElement>;
 
   @globalemitter change: Emitter<HexColor>;
 
+  constructor() {
+    super({ delegatesFocus: true });
+  }
+
   render = () => {
     return html`
       <dy-popover
         trigger="click"
+        ref=${this.popoverRef.ref}
         .content=${html`
           <dy-color-panel
             style=${styleMap({ marginBlock: '.6em' })}
@@ -77,4 +88,8 @@ export class DuoyunColorPickElement extends GemElement {
       </dy-popover>
     `;
   };
+
+  showPicker = () => {
+    this.popoverRef.element?.click();
+  };
 }

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

@@ -14,7 +14,7 @@ const style = createCSSSheet(css`
 @customElement('dy-compartment')
 @adoptedStyle(style)
 export class DuoyunCompartmentElement extends GemElement {
-  @property content: string | number | TemplateResult;
+  @property content?: string | number | TemplateResult;
   render = () => {
     return html`${this.content}`;
   };

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

@@ -96,10 +96,6 @@ export class DuoyunCopyElement extends GemElement<State> {
 
   @emitter copy: Emitter<boolean>;
 
-  state: State = {
-    status: 'none',
-  };
-
   get #icon() {
     switch (this.state.status) {
       case 'success':
@@ -111,6 +107,14 @@ export class DuoyunCopyElement extends GemElement<State> {
     }
   }
 
+  constructor() {
+    super({ delegatesFocus: true });
+  }
+
+  state: State = {
+    status: 'none',
+  };
+
   #showMessage = (isSuccess: boolean) => {
     this.copy(isSuccess);
     if (!this.silent) {