feat: add root part for all

hellof2e · Mar 18, 2024 · 40a01a3 · 40a01a3
1 parent 82acf21
commit 40a01a3
Show file tree

Hide file tree

Showing 51 changed files with 76 additions and 47 deletions.
diff --git a/packages/quark-react/package.json b/packages/quark-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quarkd/quark-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Web components react reactify",
   "types": "lib/index.d.ts",
   "typings": "lib/index.d.ts",
@@ -24,7 +24,7 @@
     "*.js"
   ],
   "dependencies": {
-    "quarkd": "2.0.0",
+    "quarkd": "2.0.1",
     "@quarkd/reactify": "^1.0.3"
   },
   "devDependencies": {

diff --git a/packages/quarkd/package.json b/packages/quarkd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quarkd",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Mobile UI Components built on Web Components.",
   "main": "lib/index.js",
   "module": "lib/index.js",

diff --git a/packages/quarkd/src/actionsheet/index.tsx b/packages/quarkd/src/actionsheet/index.tsx
@@ -169,6 +169,7 @@ class QuarkActionSheet extends QuarkElement {
         class="quark-actionsheet"
         ref={this.wrap}
         onClick={this.handleContainerClick}
+        part="root"
       >
         {this.title && (
           <div

diff --git a/packages/quarkd/src/badge/index.tsx b/packages/quarkd/src/badge/index.tsx
@@ -73,7 +73,7 @@ class QuarkBadge extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-badge">
+      <div class="quark-badge" part="root">
         <div class={this.classNames} part="content">
           {this.renderContent()}
         </div>

diff --git a/packages/quarkd/src/button/index.tsx b/packages/quarkd/src/button/index.tsx
@@ -93,7 +93,7 @@ class QuarkButton extends QuarkElement {
 
   render() {
     return (
-      <div ref={this.slotRef} class="quark-button">
+      <div ref={this.slotRef} class="quark-button" part="root">
         {this.renderIcon()}
         <slot></slot>
       </div>

diff --git a/packages/quarkd/src/calendar/index.tsx b/packages/quarkd/src/calendar/index.tsx
@@ -646,7 +646,7 @@ class QuarkCalendar extends QuarkElement {
   };
 
   renderCalendar = () => (
-    <div class="quark-calendar">
+    <div class="quark-calendar" part="calendar">
       {this.renderHeader()}
       <div
         ref={this.bodyRef}
@@ -676,6 +676,7 @@ class QuarkCalendar extends QuarkElement {
           forbidmaskclick={this.forbidmaskclick}
           open={this.open}
           onClose={this.closePop}
+          part="root"
         >
           {this.renderCalendar()}
         </quark-popup>

diff --git a/packages/quarkd/src/cascadepicker/index.tsx b/packages/quarkd/src/cascadepicker/index.tsx
@@ -235,6 +235,7 @@ class QuarkCascadePicker extends QuarkElement {
         round
         forbidmaskclick={this.forbidmaskclick}
         onclose={this.popupClose}
+        part="root"
       >
         <div class="quark-cascade-picker" part="picker">
           <div class="quark-cascade-picker-header" part="picker-header">

diff --git a/packages/quarkd/src/cell/index.tsx b/packages/quarkd/src/cell/index.tsx
@@ -53,7 +53,7 @@ class QuarkCell extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-cell" onClick={this.handleNavigation}>
+      <div class="quark-cell" onClick={this.handleNavigation} part="root">
         <slot name="icon">{this.renderIcon()}</slot>
         <div class="quark-cell-title" part="title" id="title">
           <slot name="title">{this.title}</slot>

diff --git a/packages/quarkd/src/checkbox/index.tsx b/packages/quarkd/src/checkbox/index.tsx
@@ -163,7 +163,7 @@ class QuarkCheckboxGroup extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-checkbox-group-wrapper">
+      <div class="quark-checkbox-group-wrapper" part="root">
         <slot onslotchange={this.handleSlotChange} ref={this.slotRef}></slot>
       </div>
     );

diff --git a/packages/quarkd/src/circle/index.tsx b/packages/quarkd/src/circle/index.tsx
@@ -162,7 +162,7 @@ class QuarkCircle extends QuarkElement {
       transform: `rotate(${ROTATE_ANGLE_MAP[this.startposition]}deg)`,
     };
     return (
-      <div class="circle-wrapper" style={getSizeStyle}>
+      <div class="circle-wrapper" style={getSizeStyle} part="root">
         <svg style={svgStyle} part="svg">
           {this.renderGradient()}
           {this.renderLayer()}

diff --git a/packages/quarkd/src/collapse/index.tsx b/packages/quarkd/src/collapse/index.tsx
@@ -45,7 +45,7 @@ class Collapse extends QuarkElement {
 
   render() {
     return (
-      <details ref={this.detailsEl}>
+      <details ref={this.detailsEl} part="root">
         <summary part="summary">
           <slot name="title">{this.title}</slot>
           <slot name="icon">

diff --git a/packages/quarkd/src/datetimepicker/TimePicker.tsx b/packages/quarkd/src/datetimepicker/TimePicker.tsx
@@ -176,6 +176,7 @@ class QuarkTimePicker extends QuarkElement {
         onclose={this.onClose}
         onchange={this.onChange}
         onconfirm={this.confirm}
+        part="root"
       >
         {this.showtoolbar && (
           <div slot="header" class="quark-date-picker-header" part="header">

diff --git a/packages/quarkd/src/datetimepicker/index.tsx b/packages/quarkd/src/datetimepicker/index.tsx
@@ -151,6 +151,7 @@ class QuarkDatetimePicker extends QuarkElement {
         onclose={this.onClose}
         onchange={this.onChange}
         onconfirm={this.onConfirm}
+        part="root"
       >
         <slot></slot>
       </quark-time-picker>
@@ -170,6 +171,7 @@ class QuarkDatetimePicker extends QuarkElement {
         onclose={this.onClose}
         onchange={this.onChange}
         onconfirm={this.onConfirm}
+        part="root"
       >
         <slot></slot>
       </quark-date-picker>

diff --git a/packages/quarkd/src/dropdownitem/index.tsx b/packages/quarkd/src/dropdownitem/index.tsx
@@ -294,7 +294,7 @@ class QuarkDropdownItem extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-dropdown-item" ref={this.root}>
+      <div class="quark-dropdown-item" ref={this.root} part="root">
         <div
           ref={this.titleRef}
           class={this.titleCSS().class}

diff --git a/packages/quarkd/src/dropdownmenu/index.tsx b/packages/quarkd/src/dropdownmenu/index.tsx
@@ -57,7 +57,7 @@ class QuarkDropdownMenu extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-dropdown-menu">
+      <div class="quark-dropdown-menu" part="root">
         <div class="quark-dropdown-menu__bar" part="menu-bar">
           <div class="quark-dropdown-menu__bar-inner" part="menu-inner">
             <div

diff --git a/packages/quarkd/src/empty/index.tsx b/packages/quarkd/src/empty/index.tsx
@@ -35,7 +35,7 @@ class QuarkEmpty extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="quark-empty" part="empty">
+        <div class="quark-empty" part="root">
           <img
             part="image"
             style={{

diff --git a/packages/quarkd/src/form/index.tsx b/packages/quarkd/src/form/index.tsx
@@ -183,7 +183,7 @@ class QuarkForm extends QuarkElement {
 
   render() {
     return (
-      <form class="quark-form" ref={this.formRef}>
+      <form class="quark-form" ref={this.formRef} part="root">
         <slot ref={this.slotRef} onslotchange={this.onSlotChange}></slot>
       </form>
     );

diff --git a/packages/quarkd/src/grid/index.tsx b/packages/quarkd/src/grid/index.tsx
@@ -146,7 +146,7 @@ class QuarkGrid extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-grid">
+      <div class="quark-grid" part="root">
         <slot onslotchange={this.handleSlotChange} ref={this.slotRef}></slot>
       </div>
     );

diff --git a/packages/quarkd/src/icon/index.tsx b/packages/quarkd/src/icon/index.tsx
@@ -12,6 +12,7 @@ class QuarkIcon extends QuarkElement {
         class="quark-icon-svg"
         aria-hidden="true"
         viewBox="0 0 1024 1024"
+        part="root"
       ></svg>
     );
   }

diff --git a/packages/quarkd/src/image/index.tsx b/packages/quarkd/src/image/index.tsx
@@ -108,7 +108,7 @@ class QuarkImage extends QuarkElement {
     };
 
     return (
-      <div class="quark-image">
+      <div class="quark-image" part="root">
         {this.status === "error" && (
           <div class="quark-image-loading" part="loading">
             <slot name="error">{Locale.current.image.loadError}</slot>

diff --git a/packages/quarkd/src/list/index.tsx b/packages/quarkd/src/list/index.tsx
@@ -164,7 +164,7 @@ class QuarkList extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-list">
+      <div class="quark-list" part="root">
         <slot name="content"></slot>
         {this.loading && !this.finished && this.renderLoading()}
         {this.finished && this.renderFinishedText()}

diff --git a/packages/quarkd/src/loading/index.tsx b/packages/quarkd/src/loading/index.tsx
@@ -56,7 +56,7 @@ class QuarkLoading extends QuarkElement {
         <svg
           style={{ fontSize, transform }}
           class="quark-loading-spinner"
-          part="loading-spinner"
+          part="svg"
           t="1680062076772"
           viewBox="0 0 1024 1024"
           version="1.1"

diff --git a/packages/quarkd/src/marketdialog/index.tsx b/packages/quarkd/src/marketdialog/index.tsx
@@ -47,7 +47,7 @@ class QuarkMarketDialog extends QuarkElement {
 
   render() {
     return (
-      <quark-overlay open={this.open} part="overlay">
+      <quark-overlay open={this.open} part="root">
         <div class="quark-market-container" part="container">
           <slot name="market" part="market">
             {this.url && <img alt="error" src={this.url} />}

diff --git a/packages/quarkd/src/marquee/index.tsx b/packages/quarkd/src/marquee/index.tsx
@@ -82,7 +82,7 @@ class QuarkMarquee extends QuarkElement {
           class={`quark-marquee-title ${
             this.paused ? "quark-marquee-paused" : ""
           }`}
-          part="title"
+          part="root"
           ref={this.titleRef}
           onTransitionend={this.transitionEnd}
         >

diff --git a/packages/quarkd/src/navbar/index.tsx b/packages/quarkd/src/navbar/index.tsx
@@ -58,15 +58,15 @@ class QuarkNavbar extends QuarkElement {
               size={this.iconsize}
               onClick={this.leftClick}
               class="back"
-              part="back"
+              part="back-icon"
             />
             {!this.closehide && (
               <quark-icon-close
                 id="left"
                 size={this.iconsize}
                 onClick={this.closeClick}
                 class="close"
-                part="close"
+                part="close-icon"
               />
             )}
           </slot>

diff --git a/packages/quarkd/src/noticebar/index.tsx b/packages/quarkd/src/noticebar/index.tsx
@@ -53,7 +53,10 @@ class QuarkNoticebar extends QuarkElement {
 
   render() {
     return (
-      <div style={{ backgroundColor: this.bgcolor, color: this.color }}>
+      <div
+        style={{ backgroundColor: this.bgcolor, color: this.color }}
+        part="root"
+      >
         <slot name="left" class="quark-noticebar-left">
           {!this.lefthide && <quark-icon-notify part="notify-icon" size="15" />}
         </slot>

diff --git a/packages/quarkd/src/picker/index.tsx b/packages/quarkd/src/picker/index.tsx
@@ -182,6 +182,7 @@ class QuarkPicker extends QuarkElement {
         round
         forbidmaskclick={this.forbidmaskclick}
         onclose={this.popupClose}
+        part="root"
       >
         <div class="quark-picker-container" part="container">
           <div class="quark-picker-header" part="header">

diff --git a/packages/quarkd/src/pickerview/index.tsx b/packages/quarkd/src/pickerview/index.tsx
@@ -157,7 +157,7 @@ class QuarkPickerView extends QuarkElement {
 
   render() {
     return (
-      <div part="container" class="quark-picker-container">
+      <div part="root" class="quark-picker-container">
         <div part="content" class="quark-picker-content">
           <div part="mask-top" class="quark-picker-mask-top"></div>
           <div part="mask-bottom" class="quark-picker-mask-bottom"></div>

diff --git a/packages/quarkd/src/popover/index.tsx b/packages/quarkd/src/popover/index.tsx
@@ -196,7 +196,7 @@ class QuarkPopover extends QuarkElement {
     }
 
     return (
-      <div class="quark-popover-tips" ref={this.tipsRef}>
+      <div class="quark-popover-tips" ref={this.tipsRef} part="actions">
         <div class="quark-popover-triangle" part="triangle" />
         <div class="quark-popover-content" part="content">
           <slot name="content">
@@ -227,7 +227,7 @@ class QuarkPopover extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-popover">
+      <div class="quark-popover" part="root">
         <slot></slot>
         {this.renderActions()}
       </div>

diff --git a/packages/quarkd/src/popup/index.tsx b/packages/quarkd/src/popup/index.tsx
@@ -128,7 +128,7 @@ class QuarkPopup extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="quark-popup" ref={this.wrap}>
+        <div class="quark-popup" ref={this.wrap} part="root">
           {this.closeable && (
             <div
               class="quark-popup-close-btn"

diff --git a/packages/quarkd/src/popupextra/index.tsx b/packages/quarkd/src/popupextra/index.tsx
@@ -134,7 +134,7 @@ class QuarkPopupExtra extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="quark-popup-extra">
+        <div class="quark-popup-extra" part="popup-extra">
           <button
             class="quark-popup-extra-close-btn"
             onClick={this.handleCloseBtnClick}
@@ -166,7 +166,11 @@ class QuarkPopupExtra extends QuarkElement {
           </div>
           <slot name="footer"></slot>
         </div>
-        <div class="quark-popup-extra-mask" onClick={this.handleClick} />
+        <div
+          class="quark-popup-extra-mask"
+          onClick={this.handleClick}
+          part="mask"
+        />
       </Fragment>
     );
   }

diff --git a/packages/quarkd/src/progress/index.tsx b/packages/quarkd/src/progress/index.tsx
@@ -23,7 +23,7 @@ class QuarkProgress extends QuarkElement {
   render() {
     return (
       <Fragment>
-        <div class="wrap">
+        <div class="wrap" part="root">
           <div
             class="progress active"
             part="progress"

diff --git a/packages/quarkd/src/pullrefresh/index.tsx b/packages/quarkd/src/pullrefresh/index.tsx
@@ -260,7 +260,7 @@ class QuarkPullRefresh extends QuarkElement {
     };
 
     return (
-      <div class="quark-pull-refresh">
+      <div class="quark-pull-refresh" part="root">
         <div
           class="quark-pull-refresh-container"
           part="container"

diff --git a/packages/quarkd/src/radio/index.tsx b/packages/quarkd/src/radio/index.tsx
@@ -163,7 +163,7 @@ class QuarkRadioGroup extends QuarkElement {
 
   render() {
     return (
-      <div class="quark-radio-group-wrapper" part="wrapper">
+      <div class="quark-radio-group-wrapper" part="root">
         <slot onslotchange={this.handleSlotChange} ref={this.slotRef}></slot>
       </div>
     );

diff --git a/packages/quarkd/src/search/index.tsx b/packages/quarkd/src/search/index.tsx
@@ -171,7 +171,7 @@ class QuarkSearch extends QuarkElement {
       this.value && this.clearable && !this.disabled && !this.readonly;
 
     return (
-      <div class={searchClass}>
+      <div class={searchClass} part="root">
         {this.showback && (
           <div class="quark-search-back" part="back" onClick={this.backEvent}>
             <quark-icon-arrow-left

diff --git a/packages/quarkd/src/sharesheet/index.tsx b/packages/quarkd/src/sharesheet/index.tsx
@@ -186,6 +186,7 @@ class QuarkShareSheet extends QuarkElement {
         class="quark-sharesheet"
         ref={this.wrap}
         onClick={this.handleContainerClick}
+        part="root"
       >
         <div
           class="quark-sharesheet-title"

diff --git a/packages/quarkd/src/skeleton/index.tsx b/packages/quarkd/src/skeleton/index.tsx
@@ -54,7 +54,7 @@ class Skeleton extends QuarkElement {
     return (
       <Fragment>
         {!this.hide ? (
-          <div class="skeleton-container">
+          <div class="skeleton-container" part="root">
             {this.avatar && <div class="skeleton-avatar" part="avatar"></div>}
             <div class="skeleton-content" part="content">
               {this.title && <h3 class="skeleton-title" part="title"></h3>}

diff --git a/packages/quarkd/src/stepper/index.tsx b/packages/quarkd/src/stepper/index.tsx
@@ -190,8 +190,9 @@ class QuarkStepper extends QuarkElement {
     const inputClassName = classNames("quark-stepper-input", {
       "quark-stepper-disabled": this.disabled,
     });
+
     return (
-      <div class="quark-stepper-container" id="stepper">
+      <div class="quark-stepper-container" id="stepper" part="root">
         <button
           type="button"
           part="mini"