feat: support part pseudo-element

packages/quarkd/src/actionsheet/demo.scss

@@ -7,4 +7,4 @@
   .demo-buttons {
     margin-bottom: 24px;
   }
-}
+}

packages/quarkd/src/actionsheet/index.tsx

@@ -147,6 +147,7 @@ class QuarkActionSheet extends QuarkElement {
       return (
         <div
           class="quark-actionsheet-actions"
+          part="action"
           style={{
             color: action.color ? action.color : undefined,
             fontSize: action.fontSize ? `${action.fontSize}px` : undefined,
@@ -172,6 +173,7 @@ class QuarkActionSheet extends QuarkElement {
         {this.title && (
           <div
             class="quark-actionsheet-title"
+            part="title"
             style={{
               color: this.titleColor ? this.titleColor : undefined,
               fontSize: this.titleFontSize ? this.titleFontSize : undefined,
@@ -182,10 +184,11 @@ class QuarkActionSheet extends QuarkElement {
         )}
         <div class="quark-actionsheet-action">{this.renderActions()}</div>
         {this.cancelText && (
-          <div class="quark-actionsheet-cancel">
-            <div class="quark-actionsheet-cancel-gap"></div>
+          <div class="quark-actionsheet-cancel" part="cancel">
+            <div class="quark-actionsheet-cancel-gap" part="cancel-gap"></div>
             <div
               class="quark-actionsheet-cancel-text"
+              part="cancel-text"
               style={{
                 color: this.cancelTextColor ? this.cancelTextColor : undefined,
                 fontSize: this.cancelTextFontSize

packages/quarkd/src/badge/index.tsx

@@ -74,7 +74,9 @@ class QuarkBadge extends QuarkElement {
   render() {
     return (
       <div class="quark-badge">
-        <div class={this.classNames}>{this.renderContent()}</div>
+        <div class={this.classNames} part="content">
+          {this.renderContent()}
+        </div>
         <slot ref={this.slotRef} onslotchange={this.dealClass}></slot>
       </div>
     );

packages/quarkd/src/button/demo.scss

@@ -12,4 +12,4 @@
       margin: 4px;
     }
   }
-}
+}

packages/quarkd/src/button/index.tsx

@@ -67,7 +67,7 @@ class QuarkButton extends QuarkElement {
 
   renderIcon = () => {
     if (this.icon && this.icon.startsWith("http")) {
-      return <img class="quark-button-icon" src={this.icon}></img>;
+      return <img part="img" class="quark-button-icon" src={this.icon}></img>;
     }
     if (this.loading) {
       return (

packages/quarkd/src/button/style.css

@@ -190,4 +190,4 @@
   width: var(--button-icon-size, 1em);
   height: auto;
   margin-right: var(--button-icon-hspacing, 5px);
-}
+}

packages/quarkd/src/calendar/index.tsx

@@ -610,7 +610,9 @@ class QuarkCalendar extends QuarkElement {
   };
 
   renderFooter = () => (
-    <div class="quark-calendar-footer">{this.renderFooterButton()}</div>
+    <div class="quark-calendar-footer" part="footer">
+      {this.renderFooterButton()}
+    </div>
   );
 
   renderHeader = () => {
@@ -621,20 +623,22 @@ class QuarkCalendar extends QuarkElement {
       ...weekdays.slice(0, weekfirstday),
     ];
     return (
-      <div class="quark-calendar-header">
+      <div class="quark-calendar-header" part="header">
         {!this.hidetitle && (
-          <div class="quark-calendar-header-title">
+          <div class="quark-calendar-header-title" part="title">
             <slot name="title">{this.title}</slot>
           </div>
         )}
         {!this.hidesubtitle && (
-          <div class="quark-calendar-header-subtitle">
+          <div class="quark-calendar-header-subtitle" part="sub-title">
             <slot name="subtitle">{this.subtitle}</slot>
           </div>
         )}
-        <div class="quark-calendar-weekdays">
+        <div class="quark-calendar-weekdays" part="weekdays">
           {renderWeekDays.map((text) => (
-            <span class="quark-calendar-weekday">{text}</span>
+            <span class="quark-calendar-weekday" part="weekday">
+              {text}
+            </span>
           ))}
         </div>
       </div>
@@ -647,6 +651,7 @@ class QuarkCalendar extends QuarkElement {
       <div
         ref={this.bodyRef}
         class="quark-calendar-body"
+        part="body"
         onScroll={this.onScroll}
       >
         {this.months.map(this.renderMonth)}

packages/quarkd/src/cascadepicker/index.tsx

@@ -207,10 +207,18 @@ class QuarkCascadePicker extends QuarkElement {
       return null;
     }
     const wheels = this.pickerData.map((column) => (
-      <div class="quark-cascade-picker-wheel">
-        <ul class="quark-cascade-picker-wheel-scroll">
+      <div class="quark-cascade-picker-wheel" part="picker-wheel">
+        <ul
+          class="quark-cascade-picker-wheel-scroll"
+          part="picker-wheel-scroll"
+        >
           {column.map((item: string) => (
-            <li class="quark-cascade-picker-wheel-item">{item}</li>
+            <li
+              class="quark-cascade-picker-wheel-item"
+              part="picker-wheel-item"
+            >
+              {item}
+            </li>
           ))}
         </ul>
       </div>
@@ -228,30 +236,45 @@ class QuarkCascadePicker extends QuarkElement {
         forbidmaskclick={this.forbidmaskclick}
         onclose={this.popupClose}
       >
-        <div class="quark-cascade-picker">
-          <div class="quark-cascade-picker-header">
+        <div class="quark-cascade-picker" part="picker">
+          <div class="quark-cascade-picker-header" part="picker-header">
             <slot name="header">
-              <span class="quark-cascade-picker-title">{this.title}</span>
-              <div class="quark-cascade-picker-close-btn">
+              <span class="quark-cascade-picker-title" part="picker-title">
+                {this.title}
+              </span>
+              <div
+                class="quark-cascade-picker-close-btn"
+                part="picker-close-btn"
+              >
                 <quark-icon-close size="24" onclick={this.popupClose} />
               </div>
             </slot>
           </div>
-          <div class="quark-cascade-picker-content">
-            <div class="quark-cascade-picker-mask-top"></div>
-            <div class="quark-cascade-picker-mask-bottom"></div>
-            <div class="quark-picker-current">
-              <div class="quark-picker-current-mask"></div>
+          <div class="quark-cascade-picker-content" part="picker-content">
+            <div
+              class="quark-cascade-picker-mask-top"
+              part="picker-mask-top"
+            ></div>
+            <div
+              class="quark-cascade-picker-mask-bottom"
+              part="picker-mask-bottom"
+            ></div>
+            <div class="quark-picker-current" part="picker-current">
+              <div
+                class="quark-picker-current-mask"
+                part="picker-current-mask"
+              ></div>
             </div>
             <div
               class="quark-cascade-picker-wheel-wrapper"
+              part="picker-wheel-wrapper"
               ref={this.wheelWrapper}
             >
               {this.renderWheel()}
             </div>
           </div>
           {!this.bottomhidden && (
-            <div class="quark-cascade-picker-bottom">
+            <div class="quark-cascade-picker-bottom" part="picker-bottom">
               <quark-button type="primary" size="big" onclick={this.confirm}>
                 {Locale.current.confirm}
               </quark-button>

packages/quarkd/src/cell/index.tsx

@@ -44,6 +44,7 @@ class QuarkCell extends QuarkElement {
           src={this.icon}
           class="quark-cell-icon"
           style={{ marginRight: 4 }}
+          part="img"
         />
       );
     }
@@ -54,13 +55,13 @@ class QuarkCell extends QuarkElement {
     return (
       <div class="quark-cell" onClick={this.handleNavigation}>
         <slot name="icon">{this.renderIcon()}</slot>
-        <div class="quark-cell-title" id="title">
+        <div class="quark-cell-title" part="title" id="title">
           <slot name="title">{this.title}</slot>
         </div>
 
         <slot>
           {this.desc && (
-            <div class="quark-cell-desc" id="desc">
+            <div class="quark-cell-desc" part="desc" id="desc">
               {this.desc}
             </div>
           )}

packages/quarkd/src/checkbox/index.tsx

@@ -78,16 +78,17 @@ class QuarkCheckbox extends QuarkElement {
   render() {
     return (
       <div class="quark-checkbox-container" onClick={this.handleCheck}>
-        <span class="quark-checkbox">
+        <span class="quark-checkbox" part="checkbox">
           <input type="checkbox" />
-          <span class="quark-checkbox-show"></span>
+          <span class="quark-checkbox-show" part="checkbox-show"></span>
           <img
             class="quark-checkbox-icon"
+            part="icon"
             src="https://m.hellobike.com/resource/quark/images/Kr6fLjveFHjjvVXIfDwye.png"
           />
-          <span class="quark-checkbox-disabled"></span>
+          <span class="quark-checkbox-disabled" part="checkbox-disabled"></span>
         </span>
-        <label for="checkbox" class={this.classNames}>
+        <label for="checkbox" class={this.classNames} part="label">
           <slot ref={this.slotRef}></slot>
         </label>
       </div>

packages/quarkd/src/circle/index.tsx

@@ -81,6 +81,7 @@ class QuarkCircle extends QuarkElement {
     return (
       <circle
         class="circle-wrapper-layer"
+        part="circle-wrapper-layer"
         cx={coordinates}
         cy={coordinates}
         r={r}
@@ -111,6 +112,7 @@ class QuarkCircle extends QuarkElement {
     return (
       <circle
         class="circle-wrapper-hover"
+        part="circle-wrapper-hover"
         cx={coordinates}
         cy={coordinates}
         r={r}
@@ -130,8 +132,15 @@ class QuarkCircle extends QuarkElement {
       ));
 
     return (
-      <defs>
-        <linearGradient id={this.stokeId} x1="100%" y1="0%" x2="0%" y2="0%">
+      <defs part="defs">
+        <linearGradient
+          id={this.stokeId}
+          part="linearGradient"
+          x1="100%"
+          y1="0%"
+          x2="0%"
+          y2="0%"
+        >
           {Stops}
         </linearGradient>
       </defs>
@@ -154,12 +163,12 @@ class QuarkCircle extends QuarkElement {
     };
     return (
       <div class="circle-wrapper" style={getSizeStyle}>
-        <svg style={svgStyle}>
+        <svg style={svgStyle} part="svg">
           {this.renderGradient()}
           {this.renderLayer()}
           {this.renderHover()}
         </svg>
-        <div class="circle-wrapper-content">
+        <div class="circle-wrapper-content" part="content">
           <slot />
         </div>
       </div>

packages/quarkd/src/collapse/index.tsx

@@ -46,15 +46,15 @@ class Collapse extends QuarkElement {
   render() {
     return (
       <details ref={this.detailsEl}>
-        <summary>
+        <summary part="summary">
           <slot name="title">{this.title}</slot>
           <slot name="icon">
             <quark-icon-arrow-down class="collapse-icon" size="16" />
           </slot>
-          <div className="line"></div>
+          <div class="line" part="line"></div>
         </summary>
 
-        <div class="expander-content">
+        <div class="expander-content" part="content">
           <slot></slot>
         </div>
       </details>

packages/quarkd/src/countdown/index.tsx

@@ -27,6 +27,7 @@ class QuarkButton extends QuarkElement {
   setUnit = (val) => {
     return val < 10 ? `0${val}` : val;
   };
+
   start = () => {
     this.totalTime = Number(this.time);
     const interval = 1000;
@@ -56,6 +57,7 @@ class QuarkButton extends QuarkElement {
       this.timeCounter = setTimeout(countDownStart, interval);
     }
   };
+
   calculateShow = (value) => {
     if (this.format.length === 2) {
       return [this.format.toLocaleLowerCase()].find((i) => i === value);
@@ -65,13 +67,15 @@ class QuarkButton extends QuarkElement {
     const arr = format.split(dot).map((i) => i.toLocaleLowerCase());
     return arr.find((i) => i === value);
   };
+
   componentDidUpdate(propName: string, oldValue: string, newValue: string) {
     if (propName === "time" && newValue !== oldValue) {
       if (newValue && Number(newValue) > 0) {
         this.start();
       }
     }
   }
+
   render() {
     const { totalTime } = this;
     const hours = parseInt(`${(totalTime / 1000 / 60 / 60) % 24}`, 10);
@@ -81,21 +85,34 @@ class QuarkButton extends QuarkElement {
     const countdownMin = this.setUnit(minutes);
     const countdownHour = this.setUnit(hours);
     const dot = this.format.slice(2, 3);
+
     return (
       <Fragment>
         {this.calculateShow("hh") && (
           <Fragment>
-            <span class="num">{countdownHour}</span>
-            <span class="dot">{dot}</span>
+            <span class="num" part="num">
+              {countdownHour}
+            </span>
+            <span class="dot" part="dot">
+              {dot}
+            </span>
           </Fragment>
         )}
         {this.calculateShow("mm") && (
           <Fragment>
-            <span class="num">{countdownMin}</span>
-            <span class="dot">{dot}</span>
+            <span class="num" part="num">
+              {countdownMin}
+            </span>
+            <span class="dot" part="dot">
+              {dot}
+            </span>
           </Fragment>
         )}
-        {this.calculateShow("ss") && <span class="num">{countdownSecond}</span>}
+        {this.calculateShow("ss") && (
+          <span class="num" part="num">
+            {countdownSecond}
+          </span>
+        )}
       </Fragment>
     );
   }