[gem] Use decorator metadata

Closed #156

package.json

@@ -26,10 +26,10 @@
     "lerna": "^8.0.0",
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
-    "typescript": "^5.4.3"
+    "typescript": "^5.5.3"
   },
   "resolutions": {
-    "**/esbuild": "^0.21.2"
+    "**/esbuild": "^0.23.0"
   },
   "lint-staged": {
     "*.ts": "eslint --fix"

packages/duoyun-ui/package.json

@@ -62,7 +62,7 @@
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "rimraf": "^3.0.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "webpack-merge": "^5.7.3"
   },
   "author": "mantou132",

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

@@ -1,5 +1,5 @@
 import { GemElement, html } from '@mantou/gem/lib/element';
-import { adoptedStyle, customElement, attribute, state, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, state, slot, focusable, aria } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -34,6 +34,8 @@ const style = createCSSSheet(css`
 @customElement('dy-action-text')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@focusable()
+@aria({ role: 'button' })
 export class DuoyunActionTextElement extends GemElement {
   @slot static unnamed: string;
 
@@ -42,8 +44,7 @@ export class DuoyunActionTextElement extends GemElement {
   @state active: boolean;
 
   constructor() {
-    super({ focusable: true });
-    this.internals.role = 'button';
+    super();
     this.addEventListener('keydown', commonHandle);
   }
 

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

@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/in-line-alert/
-import { adoptedStyle, customElement, attribute, property, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, slot, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -49,6 +49,7 @@ type Status = 'positive' | 'notice' | 'negative' | 'informative' | 'default';
  */
 @customElement('dy-alert')
 @adoptedStyle(style)
+@aria({ role: 'alert' })
 export class DuoyunAlertElement extends GemElement {
   @slot static unnamed: string;
 
@@ -74,11 +75,6 @@ export class DuoyunAlertElement extends GemElement {
     return getSemanticColor(this.status) || theme.neutralColor;
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'alert';
-  }
-
   render = () => {
     const icon = this.#icon;
     return html`

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

@@ -80,7 +80,7 @@ export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
   }
 
   constructor() {
-    super({ isLight: false });
+    super();
     this.addEventListener('pointermove', this.#onPointerMove);
     this.addEventListener('pointerout', this.#onPointerOut);
     this.addEventListener('pointercancel', this.#onPointerOut);

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

@@ -6,6 +6,7 @@ import {
   boolattribute,
   numattribute,
   part,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, exportPartsMap } from '@mantou/gem/lib/utils';
@@ -161,6 +162,7 @@ export type AvatarItem = {
  */
 @customElement('dy-avatar-group')
 @adoptedStyle(groupStyle)
+@aria({ role: 'list' })
 export class DuoyunAvatarGroupElement extends GemElement {
   @part static avatar: string;
 
@@ -180,11 +182,6 @@ export class DuoyunAvatarGroupElement extends GemElement {
     return this.max || this.#items?.length || 0;
   }
 
-  constructor() {
-    super();
-    this.internals.role = 'list';
-  }
-
   #parts = exportPartsMap({ [DuoyunAvatarElement.avatar]: DuoyunAvatarGroupElement.avatar });
 
   #renderAvatar = ({ src = '', tooltip = '', alt = '', status, onClick }: AvatarItem) => {

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

@@ -8,6 +8,8 @@ import {
   property,
   boolattribute,
   slot,
+  shadow,
+  aria,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
@@ -82,6 +84,8 @@ type Status = 'positive' | 'notice' | 'negative' | 'default';
  */
 @customElement('dy-banner')
 @adoptedStyle(style)
+@shadow()
+@aria({ role: 'banner' })
 export class DuoyunBannerElement extends GemElement {
   @slot static unnamed: string;
 
@@ -103,11 +107,6 @@ export class DuoyunBannerElement extends GemElement {
     }
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'banner';
-  }
-
   render = () => {
     const icon = this.#icon;
     return html`

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

@@ -1,5 +1,5 @@
-import { adoptedStyle, emitter, Emitter, property, state, part } from '@mantou/gem/lib/decorators';
-import { html, svg, TemplateResult, GemElementOptions } from '@mantou/gem/lib/element';
+import { adoptedStyle, emitter, Emitter, property, state, part, aria } from '@mantou/gem/lib/decorators';
+import { html, svg, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, randomStr } from '@mantou/gem/lib/utils';
 
 import { theme } from '../../lib/theme';
@@ -53,6 +53,7 @@ const style = createCSSSheet(css`
 `);
 
 @adoptedStyle(style)
+@aria({ role: 'img' })
 export class DuoyunChartBaseElement<_T = Record<string, unknown>> extends DuoyunResizeBaseElement {
   @part static chart: string;
 
@@ -79,9 +80,8 @@ export class DuoyunChartBaseElement<_T = Record<string, unknown>> extends Duoyun
     return this.aspectRatio || 2;
   }
 
-  constructor(options?: GemElementOptions) {
-    super(options);
-    this.internals.role = 'img';
+  constructor() {
+    super();
     this.memo(
       () => (this.filtersSet = new Set(this.filters)),
       () => [this.filters],

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

@@ -1,5 +1,5 @@
 import { adoptedStyle, customElement, boolattribute } from '@mantou/gem/lib/decorators';
-import { GemElement, html, GemElementOptions } from '@mantou/gem/lib/element';
+import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../../lib/theme';
@@ -53,8 +53,8 @@ const style = createCSSSheet(css`
 export class DuoyunLoadableBaseElement<T = Record<string, unknown>> extends GemElement<T> {
   @boolattribute loading: boolean;
 
-  constructor(options?: GemElementOptions) {
-    super(options);
+  constructor() {
+    super();
     const mask = new DuoyunLoadableMaskElement();
     this.effect(() => {
       this.internals.ariaBusy = String(this.loading);

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

@@ -1,5 +1,5 @@
 import { emitter, Emitter } from '@mantou/gem/lib/decorators';
-import { GemElement, GemElementOptions } from '@mantou/gem/lib/element';
+import { GemElement } from '@mantou/gem/lib/element';
 
 import { throttle } from '../../lib/timer';
 
@@ -8,7 +8,9 @@ export type ResizeDetail = {
   borderBoxSize: DuoyunResizeBaseElement['borderBoxSize'];
 };
 
-export function resizeObserver(ele: DuoyunResizeBaseElement, options: { throttle?: boolean } = {}) {
+export type DuoyunResizeBaseElementOptions = { throttle?: boolean };
+
+export function resizeObserver(ele: DuoyunResizeBaseElement, options: DuoyunResizeBaseElementOptions = {}) {
   const { throttle: needThrottle = true } = options;
   const callback = (entryList: ResizeObserverEntry[]) => {
     entryList.forEach((entry) => {
@@ -29,12 +31,11 @@ export function resizeObserver(ele: DuoyunResizeBaseElement, options: { throttle
   return () => ro.disconnect();
 }
 
-export type DuoyunResizeBaseElementOptions = GemElementOptions & { throttle?: boolean };
 export class DuoyunResizeBaseElement<_T = Record<string, unknown>> extends GemElement {
   @emitter resize: Emitter<ResizeDetail>;
 
   constructor(options: DuoyunResizeBaseElementOptions = {}) {
-    super(options);
+    super();
     this.effect(
       () => resizeObserver(this, options),
       () => [],

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

@@ -1,5 +1,5 @@
 import { emitter, Emitter, property, state } from '@mantou/gem/lib/decorators';
-import { GemElement, GemElementOptions } from '@mantou/gem/lib/element';
+import { GemElement } from '@mantou/gem/lib/element';
 
 export function visibilityObserver(ele: DuoyunVisibleBaseElement) {
   const io = new IntersectionObserver(
@@ -36,8 +36,8 @@ export class DuoyunVisibleBaseElement<_T = Record<string, unknown>> extends GemE
   @property intersectionRoot?: Element | Document;
   @property intersectionRootMargin?: string;
 
-  constructor(options?: GemElementOptions) {
-    super(options);
+  constructor() {
+    super();
     this.effect(
       () => visibilityObserver(this),
       () => [this.intersectionRoot],

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

@@ -1,6 +1,5 @@
 /**只要元素显示在屏幕内，屏幕就不会自动熄灭 */
 
-import { GemElementOptions } from '@mantou/gem/lib/element';
 import { logger } from '@mantou/gem/helper/logger';
 import { addListener } from '@mantou/gem/lib/utils';
 
@@ -39,8 +38,8 @@ export function wakeLock(ele: DuoyunWakeLockBaseElement) {
 }
 
 export class DuoyunWakeLockBaseElement<_T = Record<string, unknown>> extends DuoyunVisibleBaseElement {
-  constructor(options?: GemElementOptions) {
-    super(options);
+  constructor() {
+    super();
     this.effect(
       () => wakeLock(this),
       () => [],

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

@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/breadcrumbs/
-import { adoptedStyle, customElement, property, boolattribute, part } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, property, boolattribute, part, aria } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 
@@ -55,6 +55,7 @@ export type BreadcrumbsItem = {
  */
 @customElement('dy-breadcrumbs')
 @adoptedStyle(style)
+@aria({ ariaLabel: 'breadcrumbs' })
 export class DuoyunBreadcrumbsElement extends GemElement {
   @part static item: string;
 
@@ -68,11 +69,6 @@ export class DuoyunBreadcrumbsElement extends GemElement {
     return this.items || this.list;
   }
 
-  constructor() {
-    super();
-    this.internals.ariaLabel = 'breadcrumbs';
-  }
-
   render = () => {
     return html`
       ${this.#items?.map(

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

@@ -10,6 +10,7 @@ import {
   state,
   part,
   slot,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
@@ -139,6 +140,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
+@shadow()
 export class DuoyunButtonElement extends GemElement {
   @slot static unnamed: string;
 
@@ -167,7 +169,7 @@ export class DuoyunButtonElement extends GemElement {
   }
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
     this.addEventListener('click', () => {
       if (this.disabled) return;
       if (this.route) {

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

@@ -6,6 +6,7 @@ import {
   property,
   boolattribute,
   part,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap, partMap } from '@mantou/gem/lib/utils';
@@ -112,6 +113,7 @@ interface Day {
 @customElement('dy-calendar')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunCalendarElement extends GemElement {
   @part static headerRow: string;
   @part static headerLeftCell: string;
@@ -140,7 +142,7 @@ export class DuoyunCalendarElement extends GemElement {
   @property renderDate?: (date: Time) => TemplateResult;
 
   constructor() {
-    super({ delegatesFocus: true });
+    super();
   }
 
   #isHighlightRange = (date: Time) => {

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

@@ -1,5 +1,5 @@
 // https://spectrum.adobe.com/page/cards/
-import { adoptedStyle, customElement, attribute, property, part, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, customElement, attribute, property, part, slot, shadow, aria } from '@mantou/gem/lib/decorators';
 import { html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
@@ -99,6 +99,8 @@ export type ActionItem = Omit<ContextMenuItem, 'handle'> & { handle: (rest: HTML
 @customElement('dy-card')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
+@aria({ role: 'group' })
 export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @part static preview: string;
   @part static avatar: string;
@@ -116,11 +118,6 @@ export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @property actions?: ActionItem[];
   @attribute crossorigin: 'anonymous' | 'use-credentials';
 
-  constructor() {
-    super({ delegatesFocus: true });
-    this.internals.role = 'group';
-  }
-
   #onOpenMenu = (evt: MouseEvent) => {
     const target = evt.target as HTMLElement;
     ContextMenu.open(

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

@@ -8,6 +8,7 @@ import {
   part,
   emitter,
   Emitter,
+  shadow,
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils';
 
@@ -150,6 +151,7 @@ type State = {
 @customElement('dy-carousel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
+@shadow()
 export class DuoyunCarouselElement extends GemElement<State> {
   @part static img: string;
   @part static title: string;
@@ -175,10 +177,6 @@ export class DuoyunCarouselElement extends GemElement<State> {
     return this.interval || 3000;
   }
 
-  constructor() {
-    super({ delegatesFocus: true });
-  }
-
   state: State = {
     currentIndex: 0,
     direction: 1,