diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts index a4e12b4e..2698192a 100644 --- 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` 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` e.alt).join()}> diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts index b9102943..00fb460b 100644 --- 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 { @numattribute interval: number; @emitter change: Emitter; - @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 { }; #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 { }; #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 { const { currentIndex, direction } = this.state; return html`
    - ${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 { )}
- ${this.data?.map( + ${this.#items?.map( (_, index) => html`
this.close(null)); } diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts index 0c0a7338..0b5738a9 100644 --- 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 { @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 { state: FormItemState = {}; + get #options() { + return this.options || this.dataList; + } + get #type() { return this.type || 'text'; } @@ -276,14 +282,6 @@ export class DuoyunFormItemElement extends GemElement { 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 { .adder=${this.adder} .value=${this.value} .placeholder=${this.placeholder} - .options=${this.dataList} + .options=${this.#options} .renderLabel=${this.renderLabel} > ` @@ -407,7 +405,7 @@ export class DuoyunFormItemElement extends GemElement { .value=${this.value} .fit=${true} .placeholder=${this.placeholder} - .options=${this.dataList} + .options=${this.#options} > ` : this.#type === 'checkbox' @@ -426,7 +424,7 @@ export class DuoyunFormItemElement extends GemElement { @@ -436,7 +434,7 @@ export class DuoyunFormItemElement extends GemElement { @@ -456,7 +454,7 @@ export class DuoyunFormItemElement extends GemElement { .autofocus=${this.autofocus} .clearable=${true} .alwayclearable=${true} - .dataList=${this.dataList} + .dataList=${this.#options} .value=${value} > `, @@ -479,7 +477,7 @@ export class DuoyunFormItemElement extends GemElement { .value=${this.value as string} .placeholder=${this.placeholder} .required=${this.required} - .dataList=${this.dataList} + .dataList=${this.#options} > ` : ''} @@ -494,6 +492,14 @@ export class DuoyunFormItemElement extends GemElement { `; }; + 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 index 4d8a3f69..a23b3754 100644 --- 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` - + `, )}`; @@ -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 index 75775624..5c267c5e 100644 --- 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 index 919515f6..c035bb5e 100644 --- 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(options: Options) { + static async open(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, options?: Options) { + static confirm(body: string | TemplateResult | Record, options?: ModalOptions) { const content = typeof body === 'string' || body instanceof TemplateResult ? html`
${body}
` @@ -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; diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts index 9d3f77a9..3a23bd5c 100644 --- a/packages/duoyun-ui/src/elements/popover.ts +++ b/packages/duoyun-ui/src/elements/popover.ts @@ -44,7 +44,7 @@ type GhostStyle = { '--color': string; }; -type Option = { +type PopoverOptions = { delay?: number; unreachable?: boolean; content?: string | TemplateResult; @@ -80,22 +80,22 @@ export class DuoyunPopoverElement extends GemElement { @emitter open: Emitter; @emitter close: Emitter; - static open(e: Element, option: Option): CloseCallback; - static open(x: number, y: number, option: Option): CloseCallback; - static open(xywh: number[], option: Option): CloseCallback; + static open(e: Element, option: PopoverOptions): CloseCallback; + static open(x: number, y: number, option: PopoverOptions): CloseCallback; + static open(xywh: number[], option: PopoverOptions): CloseCallback; static open(...args: any[]) { const firstArg = args[0]; - const option = args.pop(); + const options = args.pop(); const element = firstArg instanceof Element ? firstArg : null; const { left, right, top, bottom } = element ? element.getBoundingClientRect() : firstArg instanceof Array - ? { left: firstArg[0], right: firstArg[0] + firstArg[2], top: firstArg[1], bottom: firstArg[1] + firstArg[3] } - : { left: firstArg, right: firstArg, top: args[1], bottom: args[1] }; + ? { left: firstArg[0], right: firstArg[0] + firstArg[2], top: firstArg[1], bottom: firstArg[1] + firstArg[3] } + : { left: firstArg, right: firstArg, top: args[1], bottom: args[1] }; toggleActiveState(element, true); - const popover = new DuoyunPopoverElement(option); - const restoreInert = option.trigger === 'click' ? setBodyInert(popover) : undefined; + const popover = new DuoyunPopoverElement(options); + const restoreInert = options.trigger === 'click' ? setBodyInert(popover) : undefined; document.body.append(popover); popover.#open({ left, right, top, bottom }); // handle mask click @@ -145,7 +145,7 @@ export class DuoyunPopoverElement extends GemElement { position: 'top', }; - constructor({ delay = 500, content, position, ghostStyle, trigger, unreachable }: Option = {}) { + constructor({ delay = 500, content, position, ghostStyle, trigger, unreachable }: PopoverOptions = {}) { super({ delegatesFocus: true }); if (content) this.content = content; if (position) this.position = position; diff --git a/packages/duoyun-ui/src/elements/table.ts b/packages/duoyun-ui/src/elements/table.ts index 93eaa195..714e27e9 100644 --- a/packages/duoyun-ui/src/elements/table.ts +++ b/packages/duoyun-ui/src/elements/table.ts @@ -378,23 +378,23 @@ export class DuoyunTableElement extends GemElement { ${!record ? html`` : render - ? render(record) - : getActions - ? html` - - this.#openActions(evt, getActions(record, evt.target as HTMLElement))} - > - ` - : dataIndex - ? readProp(record, dataIndex) - : ''} + ? render(record) + : getActions + ? html` + + this.#openActions(evt, getActions(record, evt.target as HTMLElement))} + > + ` + : dataIndex + ? readProp(record, dataIndex) + : ''} ` : '', @@ -416,8 +416,8 @@ export class DuoyunTableElement extends GemElement { ${!this.data ? html`
` : this.data.length === 0 - ? html`
${this.noData || html``}
` - : ''} + ? html`
${this.noData || html``}
` + : ''} `; }; diff --git a/packages/duoyun-ui/src/elements/tabs.ts b/packages/duoyun-ui/src/elements/tabs.ts index fe16fe7b..f1ad6797 100644 --- a/packages/duoyun-ui/src/elements/tabs.ts +++ b/packages/duoyun-ui/src/elements/tabs.ts @@ -102,10 +102,17 @@ export class DuoyunTabsElement extends GemElement { @boolattribute center: boolean; @attribute orientation: 'horizontal' | 'vertical'; + + /**@deprecated */ @property data?: TabItem[]; + @property items?: TabItem[]; @property value?: any; @emitter change: Emitter; + get #items() { + return this.items || this.data; + } + get #orientation() { return this.orientation || 'horizontal'; } @@ -116,11 +123,11 @@ export class DuoyunTabsElement extends GemElement { } render = () => { - if (!this.data) return html``; + if (!this.#items) return html``; let currentContent: TemplateResult | string = ''; return html`
- ${this.data.map(({ value, tab, icon, getContent }, index) => { + ${this.#items.map(({ value, tab, icon, getContent }, index) => { const isCurrent: boolean = (value ?? index) === this.value; if (isCurrent) currentContent = getContent?.() || ''; return html` diff --git a/packages/duoyun-ui/src/elements/toast.ts b/packages/duoyun-ui/src/elements/toast.ts index 0d30bcb2..01bec616 100644 --- a/packages/duoyun-ui/src/elements/toast.ts +++ b/packages/duoyun-ui/src/elements/toast.ts @@ -56,14 +56,14 @@ const style = createCSSSheet(css` type Type = 'success' | 'warning' | 'error' | 'default'; -interface Item { +interface ToastItem { type: Type; content: string | TemplateResult; } -const itemMap = new Map(); +const itemMap = new Map(); -interface Option { +interface ToastOptions { duration?: number; debug?: boolean; } @@ -74,13 +74,13 @@ interface Option { @customElement('dy-toast') @adoptedStyle(style) export class DuoyunToastElement extends GemElement { - @property data?: Item[]; + @property items?: ToastItem[]; static instance?: DuoyunToastElement; - static open(type: Type, content: string | TemplateResult, { debug, duration = 3000 }: Option = {}) { + static open(type: Type, content: string | TemplateResult, { debug, duration = 3000 }: ToastOptions = {}) { const toast = Toast.instance || new Toast(); - const item = toast.data?.find((e) => { + const item = toast.items?.find((e) => { if (e.type !== type) return false; // support simple `TemplateResult` return e.content instanceof TemplateResult && content instanceof TemplateResult @@ -89,16 +89,16 @@ export class DuoyunToastElement extends GemElement { : e.content === content; }) || { type, content }; clearTimeout(itemMap.get(item)); - toast.data = [...(toast.data || []).filter((e) => e !== item), item]; + toast.items = [...(toast.items || []).filter((e) => e !== item), item]; itemMap.set( item, window.setTimeout( async () => { await toast.#over; - if (!toast.data) return; + if (!toast.items) return; itemMap.delete(item); - toast.data = toast.data.filter((e) => e !== item); - if (toast.data.length === 0) toast.remove(); + toast.items = toast.items.filter((e) => e !== item); + if (toast.items.length === 0) toast.remove(); }, debug ? 1000000 : duration, ), @@ -140,7 +140,7 @@ export class DuoyunToastElement extends GemElement { render = () => { return html` - ${this.data?.map( + ${this.items?.map( ({ type, content }) => html`
diff --git a/packages/duoyun-ui/src/elements/tree.ts b/packages/duoyun-ui/src/elements/tree.ts index c88a13da..a739508d 100644 --- a/packages/duoyun-ui/src/elements/tree.ts +++ b/packages/duoyun-ui/src/elements/tree.ts @@ -160,7 +160,9 @@ export type MouseEventDetail = { value: any; item: TreeItem; originEvent: MouseE export class DuoyunTreeElement extends GemElement { @part static item: string; + /**@deprecated */ @property data?: TreeItem[]; + @property items?: TreeItem[]; /**value array */ @property highlights?: any[]; @@ -169,6 +171,10 @@ export class DuoyunTreeElement extends GemElement { @emitter expand: Emitter; @emitter collapse: Emitter; + get #items() { + return this.items || this.data; + } + constructor() { super({ delegatesFocus: true }); this.internals.role = 'tree'; @@ -237,25 +243,25 @@ export class DuoyunTreeElement extends GemElement { ); this.memo( () => { - this.#tagsMap = getCascaderBubbleWeakMap(this.data, 'children', (e) => e.tags); + this.#tagsMap = getCascaderBubbleWeakMap(this.#items, 'children', (e) => e.tags); this.#statusMap = getCascaderBubbleWeakMap( - this.data, + this.#items, 'children', (e) => e.status, (a, b) => (statusRank[a] > statusRank[b] ? a : b), ); }, - () => [this.data], + () => [this.#items], ); }; mounted = () => { this.effect( () => { - if (!this.data) return; + if (!this.#items) return; const getExpandableValues = (list: TreeItem[]): any[] => list.map((e) => (e.children ? [getItemValue(e), ...getExpandableValues(e.children)] : [])); - const newValue = new Set(getExpandableValues(this.data).flat(Infinity)); + const newValue = new Set(getExpandableValues(this.#items).flat(Infinity)); this.state.expandItem.forEach((e) => { if (!newValue.has(e)) { this.state.expandItem.delete(e); @@ -263,12 +269,12 @@ export class DuoyunTreeElement extends GemElement { } }); }, - () => [this.data], + () => [this.#items], ); }; render = () => { - return html`${this.data?.map((item) => this.#renderItem(item, 0))}`; + return html`${this.#items?.map((item) => this.#renderItem(item, 0))}`; }; isExpand(value: any) { @@ -278,7 +284,7 @@ export class DuoyunTreeElement extends GemElement { expandToItems(values: any[]) { const set = new Set(values); getCascaderBubbleWeakMap( - this.data, + this.#items, 'children', (item) => set.has(getItemValue(item)), (a, b) => a || b, @@ -296,7 +302,7 @@ export class DuoyunTreeElement extends GemElement { iterateCollapseItem(value: any) { let start = false; - const temp = this.data ? [...this.data] : []; + const temp = this.#items ? [...this.#items] : []; while (!!temp.length) { const item = temp.pop()!; const v = getItemValue(item); diff --git a/packages/duoyun-ui/src/elements/wait.ts b/packages/duoyun-ui/src/elements/wait.ts index 44b13d04..9c9addb8 100644 --- a/packages/duoyun-ui/src/elements/wait.ts +++ b/packages/duoyun-ui/src/elements/wait.ts @@ -33,13 +33,13 @@ const style = createCSSSheet(css` } `); -interface Option { +interface WaitOptions { minDelay?: number; } let totalPromise: Promise = Promise.resolve(); -export async function waitLoading(promise: Promise, options: Option & Partial = {}): Promise { +export async function waitLoading(promise: Promise, options: WaitOptions & Partial = {}): Promise { const { minDelay = 500 } = options; const isLongPromise = Symbol(); const r = await Promise.any([sleep(16).then(() => isLongPromise), promise]); diff --git a/packages/duoyun-ui/src/lib/cache.ts b/packages/duoyun-ui/src/lib/cache.ts index a7ae1476..e86ec620 100644 --- a/packages/duoyun-ui/src/lib/cache.ts +++ b/packages/duoyun-ui/src/lib/cache.ts @@ -1,6 +1,6 @@ import { LinkedList } from '@mantou/gem/lib/utils'; -interface Options { +interface CacheOptions { max?: number; maxAge?: number; } @@ -18,7 +18,7 @@ export class Cache { #reverseMap = new Map(); #linkedList = new LinkedList(); - constructor({ max = Infinity, maxAge = Infinity }: Options = {}) { + constructor({ max = Infinity, maxAge = Infinity }: CacheOptions = {}) { this.#max = max; this.#maxAge = maxAge; } diff --git a/packages/duoyun-ui/src/lib/image.ts b/packages/duoyun-ui/src/lib/image.ts index a7899fcb..3eca4b4b 100644 --- a/packages/duoyun-ui/src/lib/image.ts +++ b/packages/duoyun-ui/src/lib/image.ts @@ -103,19 +103,19 @@ export function createDataURLFromBlob(blob: Blob) { }); } -interface LimitOption { +interface LimitOptions { fileSize?: number; dimension?: { width: number; height: number }; } -interface OutputOption { +interface OutputOptions { aspectRatio?: number; /**Default: File */ type?: 'url'; } type Origin = (HTMLImageElement & { type?: string }) | File; -export function compressionImage(origin: Origin, limit: LimitOption, output: OutputOption): Promise; -export function compressionImage(origin: Origin, limit: LimitOption): Promise; -export async function compressionImage(origin: Origin, limit: LimitOption, { aspectRatio, type }: OutputOption = {}) { +export function compressionImage(origin: Origin, limit: LimitOptions, output: OutputOptions): Promise; +export function compressionImage(origin: Origin, limit: LimitOptions): Promise; +export async function compressionImage(origin: Origin, limit: LimitOptions, { aspectRatio, type }: OutputOptions = {}) { const originIsFile = origin instanceof Blob; const outputDataURL = type === 'url'; const canvas = createCanvas(); diff --git a/packages/duoyun-ui/src/lib/time.ts b/packages/duoyun-ui/src/lib/time.ts index 74f6d8cc..b3da2846 100644 --- a/packages/duoyun-ui/src/lib/time.ts +++ b/packages/duoyun-ui/src/lib/time.ts @@ -31,7 +31,7 @@ type Unit = 'Y' | 'M' | 'w' | 'd' | 'h' | 'm' | 's' | 'ms'; type RelativeTimeFormatUnit = Exclude; -type RelativeTimeFormatOption = { +type RelativeTimeFormatOptions = { rtf?: Intl.RelativeTimeFormat; min?: number; lang?: string | string[]; @@ -221,7 +221,7 @@ export class Time extends Date { */ relativeTimeFormat( date: Date | Time | number, - { min = 1, lang = locale.localeCode, rtf = Time.#rtfCache.get(String(lang)) }: RelativeTimeFormatOption = {}, + { min = 1, lang = locale.localeCode, rtf = Time.#rtfCache.get(String(lang)) }: RelativeTimeFormatOptions = {}, ) { if (!rtf) { rtf = new Intl.RelativeTimeFormat(lang, { style: 'short', numeric: 'auto' }); diff --git a/packages/gem-devtools/src/elements/section.ts b/packages/gem-devtools/src/elements/section.ts index 05c41e10..178f826d 100644 --- a/packages/gem-devtools/src/elements/section.ts +++ b/packages/gem-devtools/src/elements/section.ts @@ -170,7 +170,7 @@ export const style = createCSSSheet(css` export class Section extends GemElement { @attribute name: string; @attribute tip: string; - @property data: Item[] = []; + @property items: Item[] = []; @property path: Path | undefined; renderTip = () => { @@ -206,13 +206,13 @@ export class Section extends GemElement { renderItemValue = (item: Item) => { const path = - this.data === panelStore.staticMember + this.items === panelStore.staticMember ? ['constructor', item.name] - : this.data === panelStore.state - ? ['state', item.name] - : this.data === panelStore.observedAttributes || this.data === panelStore.cssStates - ? [kebabToCamelCase(item.name)] - : [item.name]; + : this.items === panelStore.state + ? ['state', item.name] + : this.items === panelStore.observedAttributes || this.items === panelStore.cssStates + ? [kebabToCamelCase(item.name)] + : [item.name]; const onInput = (evt: Event) => { execution(setValue, [path, (evt.target as HTMLInputElement).value]); }; @@ -269,11 +269,11 @@ export class Section extends GemElement { }; render() { - const { name, data = [] } = this; + const { name, items = [] } = this; return html`
${name}${this.renderTip()}${this.renderInspect(this.path)} -
${data.length ? this.renderItem(data) : html`
no data
`}
+
${items.length ? this.renderItem(items) : html`
no data
`}
`; } diff --git a/packages/gem-devtools/src/elements/statistics.ts b/packages/gem-devtools/src/elements/statistics.ts index ed404cd9..f19788a7 100644 --- a/packages/gem-devtools/src/elements/statistics.ts +++ b/packages/gem-devtools/src/elements/statistics.ts @@ -26,9 +26,10 @@ export class devtoolsStatisticsElement extends GemElement { @attribute name: string; @boolattribute ignore: boolean; @attribute type: DomStatInfo['type'] = 'ele'; - @property value = new Array(); @property highlight?: Array; + @property data = new Array(); + #parse = (v: string) => { // scripts/dom-stat return v.split(','); @@ -49,10 +50,10 @@ export class devtoolsStatisticsElement extends GemElement { `; }; - renderItem = (value: string[]) => { + renderItem = (data: string[]) => { return html`
    - ${value.map((e) => { + ${data.map((e) => { const [tag, id] = this.#parse(e); return html`
  • @@ -71,21 +72,21 @@ export class devtoolsStatisticsElement extends GemElement { #highlight = new Set(); willMount = () => { this.memo(() => { - this.#highlight = new Set(this.highlight || this.value); + this.#highlight = new Set(this.highlight || this.data); }); }; render = () => { - const { name, value = [] } = this; + const { name, data = [] } = this; return html`
    - ${name}${value.length ? `(${value.length})` : ''} + ${name}${data.length ? `(${data.length})` : ''}
    ${this.ignore ? html`
    ignore
    ` - : value.length - ? this.renderItem(value) - : html`
    no data
    `} + : data.length + ? this.renderItem(data) + : html`
    no data
    `}
    `; diff --git a/packages/gem-devtools/src/modules/panel.ts b/packages/gem-devtools/src/modules/panel.ts index 5a98cbe5..6b0734e8 100644 --- a/packages/gem-devtools/src/modules/panel.ts +++ b/packages/gem-devtools/src/modules/panel.ts @@ -24,54 +24,54 @@ export class Panel extends GemElement { if (!panelStore.isGemElement) { return html` This not's GemElement, page stat: - - - + + + `; } return html` - - - - + + + + - - - - - - - - - - + + + + + + + + + + `; } } diff --git a/packages/gem/src/elements/base/link.ts b/packages/gem/src/elements/base/link.ts index f9eb4976..c017c0ff 100644 --- a/packages/gem/src/elements/base/link.ts +++ b/packages/gem/src/elements/base/link.ts @@ -30,11 +30,17 @@ export class GemLinkElement extends GemElement { // 动态路由，根据 route.pattern 和 options.params 计算出 path @property route: RouteItem | undefined; + /**@deprecated */ @property options: RouteOptions | undefined; + @property routeOptions: RouteOptions | undefined; @property prepare: (() => void | Promise) | undefined; @part link: string; + get #routeOptions() { + return this.routeOptions || this.options; + } + constructor() { super(); this.tabIndex = 0; @@ -44,9 +50,9 @@ export class GemLinkElement extends GemElement { // 不包含 basePath getPathInfo() { if (this.route) { - const queryProp = this.options?.query || ''; - const hashProp = this.options?.hash || ''; - return createPath(this.route, this.options) + queryProp + hashProp; + const queryProp = this.#routeOptions?.query || ''; + const hashProp = this.#routeOptions?.hash || ''; + return createPath(this.route, this.#routeOptions) + queryProp + hashProp; } else { const url = this.href || this.path + this.query + this.hash; const { path, query } = history.getParams(); @@ -101,7 +107,7 @@ export class GemLinkElement extends GemElement { if (this.route) { history.pushIgnoreCloseHandle({ - ...createHistoryParams(this.route, this.options), + ...createHistoryParams(this.route, this.#routeOptions), title: this.route.title || this.docTitle, }); } else if (this.href) { @@ -145,8 +151,8 @@ export class GemLinkElement extends GemElement { this.hint === 'off' ? undefined : this.isExternal(pathInfo) - ? pathInfo - : new URL(history.basePath + pathInfo, location.origin).toString(), + ? pathInfo + : new URL(history.basePath + pathInfo, location.origin).toString(), )} > diff --git a/packages/gem/src/helper/i18n.ts b/packages/gem/src/helper/i18n.ts index 20e16897..b9a28d98 100644 --- a/packages/gem/src/helper/i18n.ts +++ b/packages/gem/src/helper/i18n.ts @@ -40,7 +40,7 @@ interface Resources { [key: string]: Partial | string; } -interface Options { +interface I18nOptions { resources: Resources; fallbackLanguage: string; // 可以在构造函数中指定，但会被 URL 中的语言参数覆盖 @@ -107,13 +107,13 @@ export class I18n> { this.onChange?.(lang); } - constructor(options: Options) { + constructor(options: I18nOptions) { if (!options.resources[options.fallbackLanguage]) { throw new GemError('i18n: fallbackLanguage invalid'); } this.store = createStore(this as any); - Object.assign, Options>(this as I18n, options); + Object.assign, I18nOptions>(this as I18n, options); let currentLanguage = this.#urlParamsLang || this.currentLanguage || this.#cacheLang; diff --git a/packages/gem/src/test/gem-element/decorators.test.ts b/packages/gem/src/test/gem-element/decorators.test.ts index 7a75968d..c850079d 100644 --- a/packages/gem/src/test/gem-element/decorators.test.ts +++ b/packages/gem/src/test/gem-element/decorators.test.ts @@ -38,7 +38,7 @@ class DecoratorGemElement extends GemElement { @attribute rankAttr: string; @boolattribute rankDisabled: boolean; @numattribute rankCount: number; - @property dataProp = { value: '' }; + @property propData = { value: '' }; @state openState: boolean; @part headerPart: string; @refobject inputRef: RefObject; @@ -46,8 +46,8 @@ class DecoratorGemElement extends GemElement { renderCount = 0; render() { this.renderCount++; - const { rankAttr, rankDisabled, rankCount, dataProp } = this; - return html`attr: ${rankAttr}, disabled: ${rankDisabled}, count: ${rankCount}, prop: ${dataProp.value}`; + const { rankAttr, rankDisabled, rankCount, propData } = this; + return html`attr: ${rankAttr}, disabled: ${rankDisabled}, count: ${rankCount}, prop: ${propData.value}`; } } @@ -70,7 +70,7 @@ describe('装饰器', () => { const el: DecoratorGemElement = await fixture(html` (a = e.detail)} - .dataProp=${{ value: 'prop' }} + .propData=${{ value: 'prop' }} rank-attr="attr" rank-disabled rank-count="2" @@ -87,11 +87,11 @@ describe('装饰器', () => { expect(DecoratorGemElement.defineParts).to.eql(['header-part']); expect(DecoratorGemElement.defineSlots).to.eql(['body-slot']); expect(DecoratorGemElement.defineRefs?.[0].startsWith('input-ref-')).to.equal(true); - expect(DecoratorGemElement.observedProperties).to.eql(['dataProp']); + expect(DecoratorGemElement.observedProperties).to.eql(['propData']); expect(el.rankAttr).to.equal('attr'); expect(el.rankDisabled).to.equal(true); expect(el.rankCount).to.equal(2); - expect(el.dataProp).to.eql({ value: 'prop' }); + expect(el.propData).to.eql({ value: 'prop' }); expect(el.openState).to.equal(false); expect(el.headerPart).to.equal('header-part'); expect(el.inputRef.ref.startsWith('input-ref-')).to.equal(true);