Close #87

mantou132 · Dec 9, 2023 · a06097b · a06097b
1 parent 0b27d7c
commit a06097b
Show file tree

Hide file tree

Showing 24 changed files with 208 additions and 170 deletions.
diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts
@@ -16,14 +16,14 @@ export interface Sequence {
   values: (number | null)[][];
 }
 
-export interface SymbolRenderOption {
+export interface SymbolRenderOptions {
   point: number[];
   color: string;
   isHover: boolean;
   chart: DuoyunAreaChartElement;
 }
 
-export function defaultSymbolRender({ point, color, isHover, chart }: SymbolRenderOption) {
+export function defaultSymbolRender({ point, color, isHover, chart }: SymbolRenderOptions) {
   return svg`
     <circle
       class="symbol"

diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts
@@ -153,10 +153,16 @@ type AvatarItem = Avatar & { onClick?: (evt: Event) => void };
 export class DuoyunAvatarGroupElement extends GemElement {
   @numattribute max: number;
 
+  /**@deprecated */
   @property data?: AvatarItem[];
+  @property items?: AvatarItem[];
+
+  get #items() {
+    return this.items || this.data;
+  }
 
   get #max() {
-    return this.max || this.data?.length || 0;
+    return this.max || this.#items?.length || 0;
   }
 
   constructor() {
@@ -179,10 +185,10 @@ export class DuoyunAvatarGroupElement extends GemElement {
   };
 
   render = () => {
-    if (!this.data) return html``;
-    const rest = this.data.slice(this.#max);
+    if (!this.#items) return html``;
+    const rest = this.#items.slice(this.#max);
     return html`
-      ${this.data.slice(0, this.#max).map((avatar) => this.#renderAvatar(avatar))}
+      ${this.#items.slice(0, this.#max).map((avatar) => this.#renderAvatar(avatar))}
       ${rest.length
         ? html`
             <dy-avatar exportparts=${DuoyunAvatarElement.avatar} class="item" .tooltip=${rest.map((e) => e.alt).join()}>

diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts
@@ -133,7 +133,7 @@ const style = createCSSSheet(css`
   }
 `);
 
-export type Item = {
+export type CarouselItem = {
   img: string;
   background?: string;
   onClick?: (evt: PointerEvent) => void;
@@ -170,7 +170,13 @@ export class DuoyunCarouselElement extends GemElement<State> {
   @numattribute interval: number;
   @emitter change: Emitter<number>;
 
-  @property data?: Item[];
+  /**@deprecated */
+  @property data?: CarouselItem[];
+  @property items?: CarouselItem[];
+
+  get #items() {
+    return this.items || this.data;
+  }
 
   get #interval() {
     return this.interval || 3000;
@@ -186,7 +192,7 @@ export class DuoyunCarouselElement extends GemElement<State> {
   };
 
   #add = (direction: 1 | -1) => {
-    const total = this.data?.length;
+    const total = this.#items?.length;
     if (!total) return;
     this.setState({ currentIndex: (total + this.state.currentIndex + direction) % total, direction });
     this.#reset();
@@ -206,11 +212,10 @@ export class DuoyunCarouselElement extends GemElement<State> {
   };
 
   #oMouseEnter = (evt: Event) => {
-    this.#waitLeave = new Promise(
-      (res) =>
-        evt.target?.addEventListener('mouseleave', () => res(), {
-          once: true,
-        }),
+    this.#waitLeave = new Promise((res) =>
+      evt.target?.addEventListener('mouseleave', () => res(), {
+        once: true,
+      }),
     );
   };
 
@@ -241,7 +246,7 @@ export class DuoyunCarouselElement extends GemElement<State> {
     const { currentIndex, direction } = this.state;
     return html`
       <ul class="list" role="region">
-        ${this.data?.map(
+        ${this.#items?.map(
           ({ img, background = 'none', title, description, action, tag, onClick }, index) => html`
             ${currentIndex === index
               ? html`
@@ -296,7 +301,7 @@ export class DuoyunCarouselElement extends GemElement<State> {
         )}
       </ul>
       <div part=${DuoyunCarouselElement.nav} class="nav">
-        ${this.data?.map(
+        ${this.#items?.map(
           (_, index) => html`
             <div
               tabindex="0"

diff --git a/packages/duoyun-ui/src/elements/date-picker.ts b/packages/duoyun-ui/src/elements/date-picker.ts
@@ -10,7 +10,7 @@ import {
   boolattribute,
   state,
 } from '@mantou/gem/lib/decorators';
-import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
+import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
 
 import { Time } from '../lib/time';
@@ -55,11 +55,6 @@ const style = createCSSSheet(css`
   }
 `);
 
-export interface Option {
-  label: string | TemplateResult;
-  value?: any;
-}
-
 /**
  * @customElement dy-date-picker
  * @attr placeholder

diff --git a/packages/duoyun-ui/src/elements/drawer.ts b/packages/duoyun-ui/src/elements/drawer.ts
@@ -1,7 +1,7 @@
 import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
-import { DuoyunModalElement, Options } from './modal';
+import { DuoyunModalElement, ModalOptions } from './modal';
 
 const style = createCSSSheet(css`
   .dialog {
@@ -33,7 +33,7 @@ const style = createCSSSheet(css`
 @customElement('dy-drawer')
 @adoptedStyle(style)
 export class DuoyunDrawerElement extends DuoyunModalElement {
-  constructor(options: Options) {
+  constructor(options: ModalOptions) {
     super(options);
     this.addEventListener('maskclick', () => this.close(null));
   }

diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts
@@ -20,7 +20,7 @@ import { theme } from '../lib/theme';
 import { locale } from '../lib/locale';
 
 import type { DataList } from './input';
-import type { Option } from './picker';
+import type { Option as PickerOption } from './picker';
 import type { Option as SelectOption } from './select';
 import type { Adder } from './options';
 
@@ -257,7 +257,9 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
 
   @property rules?: FormItemRule[];
 
-  @property dataList?: DataList | Option[] | SelectOption[];
+  /**@deprecated */
+  @property dataList?: DataList | PickerOption[] | SelectOption[];
+  @property options?: DataList | PickerOption[] | SelectOption[];
   @property adder?: Adder; // select
 
   @globalemitter itemchange: Emitter<{ name: string; value: number | string | any[] | any }>;
@@ -268,6 +270,10 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
 
   state: FormItemState = {};
 
+  get #options() {
+    return this.options || this.dataList;
+  }
+
   get #type() {
     return this.type || 'text';
   }
@@ -276,14 +282,6 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
     return this.slotRef.element!.assignedElements()[0] as any;
   }
 
-  get data() {
-    const { value, checked } = this;
-    if (this.#type === 'checkbox') {
-      return value ? (checked ? value : '') : checked;
-    }
-    return value;
-  }
-
   constructor() {
     super();
     this.addEventListener('change', (evt: CustomEvent) => {
@@ -365,7 +363,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
               .adder=${this.adder}
               .value=${this.value}
               .placeholder=${this.placeholder}
-              .options=${this.dataList}
+              .options=${this.#options}
               .renderLabel=${this.renderLabel}
             ></dy-select>
           `
@@ -407,7 +405,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
               .value=${this.value}
               .fit=${true}
               .placeholder=${this.placeholder}
-              .options=${this.dataList}
+              .options=${this.#options}
             ></dy-picker>
           `
         : this.#type === 'checkbox'
@@ -426,7 +424,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
             <dy-radio-group
               @change=${this.#onChange}
               ?disabled=${this.disabled}
-              .options=${this.dataList}
+              .options=${this.#options}
               .value=${this.value}
             >
             </dy-radio-group>
@@ -436,7 +434,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
             <dy-checkbox-group
               @change=${this.#onChange}
               ?disabled=${this.disabled}
-              .options=${this.dataList}
+              .options=${this.#options}
               .value=${this.value}
             >
             </dy-checkbox-group>
@@ -456,7 +454,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
                     .autofocus=${this.autofocus}
                     .clearable=${true}
                     .alwayclearable=${true}
-                    .dataList=${this.dataList}
+                    .dataList=${this.#options}
                     .value=${value}
                   ></dy-input>
                 `,
@@ -479,7 +477,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
                 .value=${this.value as string}
                 .placeholder=${this.placeholder}
                 .required=${this.required}
-                .dataList=${this.dataList}
+                .dataList=${this.#options}
               ></dy-input>
             `
         : ''}
@@ -494,6 +492,14 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
     `;
   };
 
+  get data() {
+    const { value, checked } = this;
+    if (this.#type === 'checkbox') {
+      return value ? (checked ? value : '') : checked;
+    }
+    return value;
+  }
+
   focus() {
     const input: HTMLElement | null | undefined =
       this.shadowRoot?.querySelector('dy-input') || (this.querySelector('dy-input') as HTMLElement);

diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts
@@ -32,18 +32,24 @@ const style = createCSSSheet(css`
 @customElement('dy-list')
 @adoptedStyle(style)
 export class DuoyunListElement extends GemElement {
+  /**@deprecated */
   @property data?: Item[];
+  @property items?: Item[];
   @property renderItem?: (item: Item) => TemplateResult;
 
+  get #items() {
+    return this.items || this.data;
+  }
+
   constructor() {
     super();
     this.internals.role = 'list';
   }
 
   render = () => {
-    return html`${this.data?.map(
+    return html`${this.#items?.map(
       (item) => html`
-        <dy-list-item .data=${item} .renderItem=${this.renderItem}></dy-list-item>
+        <dy-list-item .item=${item} .renderItem=${this.renderItem}></dy-list-item>
         <dy-divider></dy-divider>
       `,
     )}`;
@@ -82,7 +88,7 @@ const itemStyle = createCSSSheet(css`
 @customElement('dy-list-item')
 @adoptedStyle(itemStyle)
 export class DuoyunListItemElement extends GemElement {
-  @property data?: Item;
+  @property item?: Item;
   @property renderItem?: (item: Item) => TemplateResult;
 
   constructor() {
@@ -91,10 +97,10 @@ export class DuoyunListItemElement extends GemElement {
   }
 
   render = () => {
-    if (!this.data) return html``;
-    const { title, avatar, description, status } = this.data;
+    if (!this.item) return html``;
+    const { title, avatar, description, status } = this.item;
     return this.renderItem
-      ? this.renderItem(this.data)
+      ? this.renderItem(this.item)
       : html`
           ${!avatar
             ? ''

diff --git a/packages/duoyun-ui/src/elements/menu.ts b/packages/duoyun-ui/src/elements/menu.ts
@@ -45,7 +45,7 @@ type MenuStore = {
   }[];
 };
 
-type OpenMenuOptions = {
+type MenuOptions = {
   x?: number;
   y?: number;
   /**auto calc `x`/`y` via `activeElement` */
@@ -112,7 +112,7 @@ const style = createCSSSheet(css`
 export class DuoyunMenuElement extends GemElement {
   static instance?: DuoyunMenuElement;
 
-  static async open(menu: Menu, options: OpenMenuOptions = {}) {
+  static async open(menu: Menu, options: MenuOptions = {}) {
     const {
       activeElement,
       openLeft,
@@ -144,7 +144,7 @@ export class DuoyunMenuElement extends GemElement {
 
   static async confirm(
     text: string | TemplateResult,
-    options: OpenMenuOptions & { danger?: boolean; okText?: string | TemplateResult },
+    options: MenuOptions & { danger?: boolean; okText?: string | TemplateResult },
   ) {
     return new Promise((res, rej) => {
       const onClick = () => {

diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts
@@ -134,7 +134,7 @@ const style2 = createCSSSheet({
   `,
 });
 
-export interface Options {
+export interface ModalOptions {
   header?: string | TemplateResult;
   body?: string | TemplateResult;
   /**render body only */
@@ -186,7 +186,7 @@ export class DuoyunModalElement extends GemElement {
   @state closing: boolean;
 
   // Cannot be used for dynamic forms
-  static async open<T = Element>(options: Options) {
+  static async open<T = Element>(options: ModalOptions) {
     const modal = new this({ ...options, open: true });
     const restoreInert = setBodyInert(modal);
     document.body.append(modal);
@@ -209,7 +209,7 @@ export class DuoyunModalElement extends GemElement {
     });
   }
 
-  static confirm(body: string | TemplateResult | Record<string, unknown>, options?: Options) {
+  static confirm(body: string | TemplateResult | Record<string, unknown>, options?: ModalOptions) {
     const content =
       typeof body === 'string' || body instanceof TemplateResult
         ? html`<div class=${style2.c}>${body}</div>`
@@ -228,7 +228,7 @@ export class DuoyunModalElement extends GemElement {
     disableDefaultCancelBtn,
     disableDefaultOKBtn,
     dangerDefaultOkBtn,
-  }: Options = {}) {
+  }: ModalOptions = {}) {
     super({ delegatesFocus: true });
     if (header) this.header = header;
     if (customize) this.customize = customize;