Use createRef instead decorators @refobject

Closed #188
mantou132 · Aug 11, 2024 · f0e0279 · f0e0279
1 parent 308949b
commit f0e0279
Show file tree

Hide file tree

Showing 47 changed files with 413 additions and 465 deletions.
diff --git a/packages/duoyun-ui/src/elements/badge.ts b/packages/duoyun-ui/src/elements/badge.ts
@@ -7,13 +7,11 @@ import {
   numattribute,
   property,
   boolattribute,
-  refobject,
-  RefObject,
   state,
   shadow,
   mounted,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element';
 import { classMap, css } from '@mantou/gem/lib/utils';
 
 import { contentsContainer } from '../lib/styles';
@@ -101,7 +99,7 @@ export class DuoyunBadgeElement extends GemElement {
 
   @property icon?: string | Element | DocumentFragment;
 
-  @refobject slotRef: RefObject<HTMLSlotElement>;
+  #slotRef = createRef<HTMLSlotElement>();
 
   get #max() {
     return this.max || 99;
@@ -112,19 +110,19 @@ export class DuoyunBadgeElement extends GemElement {
   }
 
   #onSlotChange = () => {
-    this.inline = !this.slotRef.element!.assignedElements({ flatten: true }).length;
+    this.inline = !this.#slotRef.element!.assignedElements({ flatten: true }).length;
   };
 
   @mounted()
   #init = () => {
     this.inline = !this.childNodes.length;
-    this.slotRef.element?.addEventListener('slotchange', this.#onSlotChange);
+    this.#slotRef.element?.addEventListener('slotchange', this.#onSlotChange);
   };
 
   render = () => {
     const value = Number(this.count) > this.#max ? `${this.#max}+` : `${this.count}`;
     return html`
-      <slot ref=${this.slotRef.ref}></slot>
+      <slot ref=${this.#slotRef.ref}></slot>
       ${this.count || this.icon || this.dot
         ? html`
             <span

diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
@@ -5,15 +5,13 @@ import {
   attribute,
   property,
   boolattribute,
-  refobject,
-  RefObject,
   state,
   part,
   slot,
   shadow,
   mounted,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { createCSSSheet, GemElement, html, createRef } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
 import { addListener, css, QueryString } from '@mantou/gem/lib/utils';
 
@@ -145,6 +143,9 @@ const style = createCSSSheet(css`
 export class DuoyunButtonElement extends GemElement {
   @slot static unnamed: string;
 
+  @part static button: string;
+  @part static dropdown: string;
+
   @attribute type: 'solid' | 'reverse';
   @attribute color: StringList<'normal' | 'danger' | 'cancel'>;
   @boolattribute small: boolean;
@@ -160,10 +161,7 @@ export class DuoyunButtonElement extends GemElement {
   @property icon?: string | Element | DocumentFragment;
   @state active: boolean;
 
-  @refobject dropdownRef: RefObject<DuoyunUseElement>;
-
-  @part static button: string;
-  @part static dropdown: string;
+  #dropdownRef = createRef<DuoyunUseElement>();
 
   get #color() {
     return getSemanticColor(this.color) || this.color || theme.primaryColor;
@@ -186,7 +184,7 @@ export class DuoyunButtonElement extends GemElement {
     e.stopPropagation();
     if (this.disabled) return;
     if (this.dropdown) {
-      const { element } = this.dropdownRef;
+      const { element } = this.#dropdownRef;
       const { right, bottom } = element!.getBoundingClientRect();
       const { width } = this.getBoundingClientRect();
       element!.active = true;
@@ -233,7 +231,7 @@ export class DuoyunButtonElement extends GemElement {
               }
             </style>
             <dy-use
-              ref=${this.dropdownRef.ref}
+              ref=${this.#dropdownRef.ref}
               class="dropdown"
               part=${DuoyunButtonElement.dropdown}
               @keydown=${commonHandle}

diff --git a/packages/duoyun-ui/src/elements/code-block.ts b/packages/duoyun-ui/src/elements/code-block.ts
@@ -1,15 +1,6 @@
 // https://spectrum.adobe.com/page/code/
-import {
-  adoptedStyle,
-  customElement,
-  attribute,
-  refobject,
-  RefObject,
-  shadow,
-  mounted,
-  effect,
-} from '@mantou/gem/lib/decorators';
-import { createCSSSheet, html } from '@mantou/gem/lib/element';
+import { adoptedStyle, customElement, attribute, shadow, mounted, effect } from '@mantou/gem/lib/decorators';
+import { createCSSSheet, createRef, html } from '@mantou/gem/lib/element';
 import { css, styleMap } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
@@ -344,7 +335,7 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
   @attribute range: string;
   @attribute highlight: string;
 
-  @refobject codeRef: RefObject<HTMLElement>;
+  #codeRef = createRef<HTMLElement>();
 
   #getRanges(str: string) {
     const ranges = str.split(/,\s*/);
@@ -378,7 +369,7 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
   @effect((i) => [i.textContent, i.codelang])
   #updateHtml = async () => {
     if (!this.visible) return;
-    if (!this.codeRef.element) return;
+    if (!this.#codeRef.element) return;
     await import(/* @vite-ignore */ /* webpackIgnore: true */ prismjs);
     const { Prism } = window as any;
     if (this.codelang && !Prism.languages[this.codelang]) {
@@ -396,7 +387,7 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
     const htmlStr = Prism.languages[this.codelang]
       ? Prism.highlight(this.textContent || '', Prism.languages[this.codelang], this.codelang)
       : this.innerHTML;
-    this.codeRef.element.innerHTML = this.#getParts(htmlStr);
+    this.#codeRef.element.innerHTML = this.#getParts(htmlStr);
   };
 
   render() {
@@ -416,7 +407,7 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
             `,
           )
         : ''}
-      <code ref=${this.codeRef.ref} class="code">${this.#getParts(this.textContent || '')}</code>
+      <code ref=${this.#codeRef.ref} class="code">${this.#getParts(this.textContent || '')}</code>
       <style>
         code {
           padding: ${padding}em;

diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts
@@ -6,8 +6,6 @@ import {
   customElement,
   attribute,
   part,
-  refobject,
-  RefObject,
   boolattribute,
   property,
   emitter,
@@ -16,7 +14,7 @@ import {
   shadow,
   aria,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, TemplateResult, html, createState } from '@mantou/gem/lib/element';
+import { createCSSSheet, GemElement, TemplateResult, html, createState, createRef } from '@mantou/gem/lib/element';
 import { css, classMap, exportPartsMap } from '@mantou/gem/lib/utils';
 import { ifDefined } from '@mantou/gem/lib/directives';
 
@@ -78,20 +76,20 @@ const panelStyle = createCSSSheet(css`
 @aria({ role: 'listitem' })
 @shadow()
 export class DuoyunCollapsePanelElement extends GemElement {
-  @refobject contentRef: RefObject<HTMLDivElement>;
+  @slot static unnamed: string;
+  @part static summary: string;
+  @part static detail: string;
 
   @boolattribute searchable: boolean;
 
   @property summary?: string | TemplateResult;
 
   @emitter toggle: Emitter<boolean>;
 
-  @slot static unnamed: string;
-  @part static summary: string;
-  @part static detail: string;
+  #contentRef = createRef<HTMLDivElement>();
 
   #animate = async (isCollapse: boolean) => {
-    const { element } = this.contentRef;
+    const { element } = this.#contentRef;
     if (!element) return;
     const { height } = element.getBoundingClientRect();
     const frames = [{ height: 0, paddingBlock: 0, borderWidth: 0 }, { height: `${height}px` }];
@@ -117,7 +115,7 @@ export class DuoyunCollapsePanelElement extends GemElement {
         ? html`
             <div
               class=${classMap({ detail: true, expand })}
-              ref=${this.contentRef.ref}
+              ref=${this.#contentRef.ref}
               part=${DuoyunCollapsePanelElement.detail}
               hidden=${ifDefined(expand ? undefined : 'until-found')}
               @beforematch=${this.toggleState}

diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts
@@ -6,11 +6,9 @@ import {
   globalemitter,
   Emitter,
   boolattribute,
-  refobject,
-  RefObject,
   shadow,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element';
 import { css, styleMap } from '@mantou/gem/lib/utils';
 
 import { HexColor } from '../lib/color';
@@ -68,11 +66,12 @@ const style = createCSSSheet(css`
 export class DuoyunColorPickerElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
-  @refobject divRef: RefObject<HTMLDivElement>;
   @boolattribute disabled: boolean;
 
   @globalemitter change: Emitter<HexColor>;
 
+  #divRef = createRef<HTMLDivElement>();
+
   render = () => {
     return html`
       <dy-popover
@@ -89,7 +88,7 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
       >
         <div
           role="combobox"
-          ref=${this.divRef.ref}
+          ref=${this.#divRef.ref}
           tabindex=${-Number(this.disabled)}
           aria-disabled=${this.disabled}
           @keydown=${commonHandle}
@@ -101,6 +100,6 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
   };
 
   showPicker() {
-    this.divRef.element?.click();
+    this.#divRef.element?.click();
   }
 }
diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -1,14 +1,5 @@
-import {
-  connectStore,
-  adoptedStyle,
-  customElement,
-  refobject,
-  RefObject,
-  shadow,
-  effect,
-  mounted,
-} from '@mantou/gem/lib/decorators';
-import { createCSSSheet, html, GemElement, TemplateResult } from '@mantou/gem/lib/element';
+import { connectStore, adoptedStyle, customElement, shadow, effect, mounted } from '@mantou/gem/lib/decorators';
+import { createCSSSheet, html, GemElement, TemplateResult, createRef } from '@mantou/gem/lib/element';
 import { css, styleMap, classMap } from '@mantou/gem/lib/utils';
 import { useStore } from '@mantou/gem/lib/store';
 
@@ -130,8 +121,6 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @shadow({ delegatesFocus: true })
 export class DuoyunContextmenuElement extends GemElement {
-  @refobject optionsRef: RefObject<DuoyunOptionsElement>;
-
   static instance?: DuoyunContextmenuElement;
 
   static async open(contextmenu: MenuOrMenuObject, options: ContextMenuOptions = {}) {
@@ -197,6 +186,8 @@ export class DuoyunContextmenuElement extends GemElement {
     contextmenuStore.activeElement?.blur();
   }
 
+  #optionsRef = createRef<DuoyunOptionsElement>();
+
   get #defaultWidth() {
     return contextmenuStore.menuStack[0].width || '15em';
   }
@@ -304,7 +295,7 @@ export class DuoyunContextmenuElement extends GemElement {
     ContextMenu.instance = this;
     this.addEventListener('contextmenu', this.#preventDefault);
     const ob = new ResizeObserver(this.#initPosition);
-    const optionsElement = this.optionsRef.element;
+    const optionsElement = this.#optionsRef.element;
     if (optionsElement) ob.observe(optionsElement);
     return () => {
       if (optionsElement) ob.disconnect();
@@ -321,7 +312,7 @@ export class DuoyunContextmenuElement extends GemElement {
     // wait `<dy-options>` update
     await Promise.resolve();
     const causeEle = contextmenuStore.menuStack.at(-1)?.causeEle;
-    const optionsEle = this.optionsRef.elements.at(-1)!;
+    const optionsEle = this.#optionsRef.elements.at(-1)!;
     if (!causeEle) return;
     const causeEleRect = causeEle.getBoundingClientRect();
     const optionsEleRect = optionsEle.getBoundingClientRect();
@@ -362,7 +353,7 @@ export class DuoyunContextmenuElement extends GemElement {
           ${causeMask}
           <dy-options
             class="menu"
-            ref=${this.optionsRef.ref}
+            ref=${this.#optionsRef.ref}
             style=${styleMap({
               width: menuWidth,
               maxHeight: maxHeight || `calc(100vh - 0.8em - ${y - this.#offset}px)`,

diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts
@@ -6,13 +6,11 @@ import {
   Emitter,
   property,
   boolattribute,
-  refobject,
-  RefObject,
   part,
   slot,
   shadow,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element';
 import { css, styleMap } from '@mantou/gem/lib/utils';
 import { repeat } from '@mantou/gem/lib/directives';
 
@@ -137,10 +135,11 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
   @boolattribute disabled: boolean;
   @boolattribute multiple: boolean;
   @globalemitter change: Emitter<FileItem[]>;
-  @refobject inputRef: RefObject<HTMLInputElement>;
 
   @property value?: FileItem[];
 
+  #inputRef = createRef<HTMLInputElement>();
+
   get #type() {
     return this.type || 'file';
   }
@@ -150,7 +149,7 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
   }
 
   #onChange = () => {
-    const input = this.inputRef.element!;
+    const input = this.#inputRef.element!;
     if (!input.files) return;
     this.change([...((this.multiple && this.value) || []), ...input.files]);
     input.value = '';
@@ -223,7 +222,7 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
         type="file"
         ?multiple=${this.multiple}
         ?disabled=${this.disabled}
-        ref=${this.inputRef.ref}
+        ref=${this.#inputRef.ref}
         @change=${this.#onChange}
         .webkitdirectory=${this.directory}
         accept=${this.#accept}>
@@ -244,6 +243,6 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
   };
 
   showPicker() {
-    this.inputRef.element!.click();
+    this.#inputRef.element!.click();
   }
 }