[lit] Built-in ref & rest props

Closed #208, Closed #154
mantou132 · Oct 20, 2024 · 63d96c9 · 63d96c9
1 parent 21215e9
commit 63d96c9
Show file tree

Hide file tree

Showing 46 changed files with 175 additions and 205 deletions.
diff --git a/packages/duoyun-ui/src/elements/badge.ts b/packages/duoyun-ui/src/elements/badge.ts
@@ -109,20 +109,20 @@ export class DuoyunBadgeElement extends GemElement {
     return getSemanticColor(this.color) || this.color || theme.negativeColor;
   }
 
+  @mounted()
   #onSlotChange = () => {
-    this.inline = !this.#slotRef.element!.assignedElements({ flatten: true }).length;
+    this.inline = !this.#slotRef.value!.assignedElements({ flatten: true }).length;
   };
 
   @mounted()
   #init = () => {
-    this.inline = !this.childNodes.length;
-    this.#slotRef.element?.addEventListener('slotchange', this.#onSlotChange);
+    this.#slotRef.value?.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 ${this.#slotRef}></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
@@ -181,7 +181,7 @@ export class DuoyunButtonElement extends GemElement {
     e.stopPropagation();
     if (this.disabled) return;
     if (this.dropdown) {
-      const { element } = this.#dropdownRef;
+      const { value: element } = this.#dropdownRef;
       const { right, bottom } = element!.getBoundingClientRect();
       const { width } = this.getBoundingClientRect();
       element!.active = true;
@@ -228,7 +228,7 @@ export class DuoyunButtonElement extends GemElement {
       ${this.dropdown
         ? html`
             <dy-use
-              ref=${this.#dropdownRef.ref}
+              ${this.#dropdownRef}
               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
@@ -369,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.value) return;
     await import(/* @vite-ignore */ /* webpackIgnore: true */ prismjs);
     const { Prism } = window as any;
     if (this.codelang && !Prism.languages[this.codelang]) {
@@ -387,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.value.innerHTML = this.#getParts(htmlStr);
   };
 
   render() {
@@ -405,7 +405,7 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
             `,
           )
         : ''}
-      <code ref=${this.#codeRef.ref} class="code">${this.#getParts(this.textContent || '')}</code>
+      <code ${this.#codeRef} class="code">${this.#getParts(this.textContent || '')}</code>
     `;
   }
 }
diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts
@@ -89,7 +89,7 @@ export class DuoyunCollapsePanelElement extends GemElement {
   #contentRef = createRef<HTMLDivElement>();
 
   #animate = async (isCollapse: boolean) => {
-    const { element } = this.#contentRef;
+    const { value: element } = this.#contentRef;
     if (!element) return;
     const { height } = element.getBoundingClientRect();
     const frames = [{ height: 0, paddingBlock: 0, borderWidth: 0 }, { height: `${height}px` }];
@@ -114,8 +114,8 @@ export class DuoyunCollapsePanelElement extends GemElement {
       ${expand || this.searchable
         ? html`
             <div
+              ${this.#contentRef}
               class=${classMap({ detail: true, expand })}
-              ref=${this.#contentRef.ref}
               part=${DuoyunCollapsePanelElement.detail}
               hidden=${expand ? null : '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
@@ -87,8 +87,8 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
         `}
       >
         <div
+          ${this.#divRef}
           role="combobox"
-          ref=${this.#divRef.ref}
           tabindex=${-Number(this.disabled)}
           aria-disabled=${this.disabled}
           @keydown=${commonHandle}
@@ -100,6 +100,6 @@ export class DuoyunColorPickerElement extends GemElement implements BasePickerEl
   };
 
   showPicker() {
-    this.#divRef.element?.click();
+    this.#divRef.value?.click();
   }
 }
diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -293,7 +293,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.value;
     if (optionsElement) ob.observe(optionsElement);
     return () => {
       if (optionsElement) ob.disconnect();
@@ -310,8 +310,8 @@ 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)!;
-    if (!causeEle) return;
+    const { value: optionsEle } = this.#optionsRef;
+    if (!causeEle || !optionsEle) return;
     const causeEleRect = causeEle.getBoundingClientRect();
     const optionsEleRect = optionsEle.getBoundingClientRect();
     const isRight = optionsEleRect.right > causeEleRect.right;
@@ -350,8 +350,8 @@ export class DuoyunContextmenuElement extends GemElement {
         ) => html`
           ${causeMask}
           <dy-options
+            ${this.#optionsRef}
             class="menu"
-            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
@@ -148,7 +148,7 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
   }
 
   #onChange = () => {
-    const input = this.#inputRef.element!;
+    const input = this.#inputRef.value!;
     if (!input.files) return;
     this.change([...((this.multiple && this.value) || []), ...input.files]);
     input.value = '';
@@ -217,11 +217,11 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
 
     return html`
       <input
+      ${this.#inputRef}
         hidden
         type="file"
         ?multiple=${this.multiple}
         ?disabled=${this.disabled}
-        ref=${this.#inputRef.ref}
         @change=${this.#onChange}
         .webkitdirectory=${this.directory}
         accept=${this.#accept}>
@@ -242,6 +242,6 @@ export class DuoyunFilePickerElement extends GemElement implements BasePickerEle
   };
 
   showPicker() {
-    this.#inputRef.element!.click();
+    this.#inputRef.value!.click();
   }
 }
diff --git a/packages/duoyun-ui/src/elements/flow.ts b/packages/duoyun-ui/src/elements/flow.ts
@@ -582,7 +582,7 @@ export class DuoyunFlowElement extends DuoyunResizeBaseElement {
   @effect((i) => [i.contentRect.width])
   #updateScale = () => {
     if (!this.loaded) return;
-    this.#setScale(this.#canvasRef.element!.contentRect);
+    this.#setScale(this.#canvasRef.value!.contentRect);
   };
 
   #exportparts = exportPartsMap({
@@ -597,7 +597,7 @@ export class DuoyunFlowElement extends DuoyunResizeBaseElement {
     this.loaded = !!scale;
     return html`
       <dy-flow-canvas
-        ref=${this.#canvasRef.ref}
+        ${this.#canvasRef}
         exportparts=${this.#exportparts}
         @resize=${this.#onCanvasResize}
         style=${styleMap({

diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts
@@ -297,7 +297,7 @@ export class DuoyunFormItemElement extends GemElement {
   }
 
   get #slotAssignedElement() {
-    return this.#slotRef.element!.assignedElements()[0] as any;
+    return this.#slotRef.value!.assignedElements()[0] as any;
   }
 
   #itemchange = (value: number | string | any[] | any) => {
@@ -501,7 +501,7 @@ export class DuoyunFormItemElement extends GemElement {
                             ></dy-input>
                           `
                       : ''}
-      <slot ref=${this.#slotRef.ref}></slot>
+      <slot ${this.#slotRef}></slot>
       ${invalidMessage
         ? html`
             <dy-help-text class="tip" part=${DuoyunFormItemElement.tip} status="negative">

diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
@@ -260,7 +260,7 @@ export class DuoyunInputElement extends GemElement {
 
   #inputHandle = () => {
     if (!this.composing) {
-      const { element } = this.#inputRef;
+      const { value: element } = this.#inputRef;
       if (!element) return;
       const { value, selectionStart, selectionEnd } = element;
       // `value` mission `2.`?
@@ -343,7 +343,7 @@ export class DuoyunInputElement extends GemElement {
 
   @effect((i) => [i.value])
   #updateState = () => {
-    const { element } = this.#inputRef;
+    const { value: element } = this.#inputRef;
     if (!element) return;
     const { value, selectionStart, selectionEnd } = this.#nextState;
     if (this.value === value) {
@@ -364,7 +364,7 @@ export class DuoyunInputElement extends GemElement {
       ${this.#type === 'textarea'
         ? html`
             <textarea
-              ref=${this.#inputRef.ref}
+              ${this.#inputRef}
               class="input"
               part=${DuoyunInputElement.input}
               spellcheck=${this.#spellcheck}
@@ -380,8 +380,8 @@ export class DuoyunInputElement extends GemElement {
           `
         : html`
             <input
+              ${this.#inputRef}
               type=${this.#type}
-              ref=${this.#inputRef.ref}
               class="input"
               part=${DuoyunInputElement.input}
               spellcheck=${this.#spellcheck}

diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts
@@ -118,11 +118,11 @@ export class DuoyunListElement extends GemElement {
   }
 
   get #beforeVisible() {
-    return this.#beforeItemRef.element?.visible;
+    return this.#beforeItemRef.value?.visible;
   }
 
   get #afterVisible() {
-    return this.#afterItemRef.element?.visible;
+    return this.#afterItemRef.value?.visible;
   }
 
   // 防止网格布局渲染不是整数行
@@ -415,7 +415,7 @@ export class DuoyunListElement extends GemElement {
   #initLayout = (ele: DuoyunListItemElement) => {
     this.#initCheckOnce(this.items!.length > this.#itemCountPerScreen);
 
-    const style = getComputedStyle(this.#listRef.element!);
+    const style = getComputedStyle(this.#listRef.value!);
     const thisGrid = getComputedStyle(this);
     this.#rowGap = parseFloat(style.rowGap) || parseFloat(thisGrid.rowGap) || 0;
     this.#columnGap = parseFloat(style.columnGap) || parseFloat(thisGrid.columnGap) || 0;
@@ -507,14 +507,14 @@ export class DuoyunListElement extends GemElement {
       <slot name=${DuoyunListElement.before}></slot>
       ${this.infinite
         ? html`<dy-list-outside
-            ref=${this.#beforeItemRef.ref}
+            ${this.#beforeItemRef}
             part=${DuoyunListElement.beforeOutside}
             .intersectionRoot=${this.scrollContainer}
             @show=${this.#onBeforeItemVisible}
             style=${styleMap({ height: `${beforeHeight}px` })}
           ></dy-list-outside>`
         : html``}
-      <div ref=${this.#listRef.ref} class="list" part=${DuoyunListElement.list}>
+      <div ${this.#listRef} class="list" part=${DuoyunListElement.list}>
         ${this.infinite
           ? renderList.map((key) => this.#getElement(key))
           : this.#items?.map(
@@ -529,7 +529,7 @@ export class DuoyunListElement extends GemElement {
             )}
       </div>
       <dy-list-outside
-        ref=${this.#afterItemRef.ref}
+        ${this.#afterItemRef}
         part=${DuoyunListElement.afterOutside}
         .intersectionRoot=${this.scrollContainer}
         @show=${this.#onAfterItemVisible}

diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts
@@ -191,7 +191,7 @@ export class DuoyunModalElement extends GemElement {
     return DyPromise.new<T, { modal: DuoyunModalElement }>(
       (res, rej) => {
         const getBodyEle = () => {
-          const ele = modal.#bodyRef.element?.children[0] as any;
+          const ele = modal.#bodyRef.value?.children[0] as any;
           return ele instanceof HTMLSlotElement ? ele.assignedElements()[0] : ele;
         };
         modal.addEventListener('close', async () => {
@@ -284,14 +284,14 @@ export class DuoyunModalElement extends GemElement {
   };
 
   #openAnimate = () => {
-    this.#maskRef.element?.animate(fadeIn, commonAnimationOptions);
-    (this.#dialogRef.element || this.#bodyRef.element)?.animate(this.openAnimation, commonAnimationOptions);
+    this.#maskRef.value?.animate(fadeIn, commonAnimationOptions);
+    (this.#dialogRef.value || this.#bodyRef.value)?.animate(this.openAnimation, commonAnimationOptions);
   };
 
   #closeAnimate = () =>
     Promise.all([
-      this.#maskRef.element?.animate(fadeOut, commonAnimationOptions).finished,
-      (this.#dialogRef.element || this.#bodyRef.element)?.animate(this.closeAnimation, commonAnimationOptions).finished,
+      this.#maskRef.value?.animate(fadeOut, commonAnimationOptions).finished,
+      (this.#dialogRef.value || this.#bodyRef.value)?.animate(this.closeAnimation, commonAnimationOptions).finished,
     ]);
 
   @memo((i) => [i.open])
@@ -316,11 +316,11 @@ export class DuoyunModalElement extends GemElement {
     if (!this.open && !this.closing) return html``;
 
     return html`
-      <div class="mask absolute" ref=${this.#maskRef.ref} @click=${this.#onMaskClick}></div>
+      <div ${this.#maskRef} class="mask absolute" @click=${this.#onMaskClick}></div>
       ${this.customize
         ? html`
             <div
-              ref=${this.#bodyRef.ref}
+              ${this.#bodyRef}
               part=${DuoyunModalElement.dialog}
               role="dialog"
               tabindex="0"
@@ -332,7 +332,7 @@ export class DuoyunModalElement extends GemElement {
           `
         : html`
             <div
-              ref=${this.#dialogRef.ref}
+              ${this.#dialogRef}
               part=${DuoyunModalElement.dialog}
               role="dialog"
               tabindex="0"
@@ -348,7 +348,7 @@ export class DuoyunModalElement extends GemElement {
                   `
                 : ''}
               <dy-scroll-box class="body" part=${DuoyunModalElement.body}>
-                <slot ref=${this.#bodyRef.ref}>${this.#body}</slot>
+                <slot ${this.#bodyRef}>${this.#body}</slot>
               </dy-scroll-box>
               <div class="footer" part=${DuoyunModalElement.footer}>
                 <slot name=${DuoyunModalElement.footer}>

diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts
@@ -177,7 +177,7 @@ export class DuoyunPopoverElement extends GemElement {
   }
 
   get popoverElement() {
-    return this.#popoverRef.element;
+    return this.#popoverRef.value;
   }
 
   #open = (targetRect?: { top: number; right: number; bottom: number; left: number }) => {
@@ -186,7 +186,7 @@ export class DuoyunPopoverElement extends GemElement {
     let rect = targetRect;
     if (!rect) {
       // self is `display: contents`
-      let elements = this.#slotRef.element!.assignedElements({ flatten: true });
+      let elements = this.#slotRef.value!.assignedElements({ flatten: true });
       if (!elements.length) {
         elements = [this];
         this.style.display = 'inline';
@@ -320,8 +320,8 @@ export class DuoyunPopoverElement extends GemElement {
                 }
               ></div>
               <dy-popover-ghost
+                ${this.#popoverRef}
                 role=${this.#role}
-                ref=${this.#popoverRef.ref}
                 data-position=${position}
                 style=${styleMap({
                   ...style,
@@ -337,7 +337,7 @@ export class DuoyunPopoverElement extends GemElement {
             </dy-reflect>
           `
         : ''}
-      <slot ref=${this.#slotRef.ref} part=${DuoyunPopoverElement.slot}></slot>
+      <slot ${this.#slotRef} part=${DuoyunPopoverElement.slot}></slot>
     `;
   };