From 62cd667955178b167027285ebea3ff1d9767e9c4 Mon Sep 17 00:00:00 2001 From: xsf0105 Date: Fri, 15 Mar 2024 17:22:08 +0800 Subject: [PATCH] feat: support part pseudo-element --- packages/quarkd/src/actionsheet/demo.scss | 2 +- packages/quarkd/src/actionsheet/index.tsx | 7 ++- packages/quarkd/src/badge/index.tsx | 4 +- packages/quarkd/src/button/demo.scss | 2 +- packages/quarkd/src/button/index.tsx | 2 +- packages/quarkd/src/button/style.css | 2 +- packages/quarkd/src/calendar/index.tsx | 17 +++--- packages/quarkd/src/cascadepicker/index.tsx | 49 ++++++++++++----- packages/quarkd/src/cell/index.tsx | 5 +- packages/quarkd/src/checkbox/index.tsx | 9 ++-- packages/quarkd/src/circle/index.tsx | 17 ++++-- packages/quarkd/src/collapse/index.tsx | 6 +-- packages/quarkd/src/countdown/index.tsx | 27 ++++++++-- .../quarkd/src/datetimepicker/TimePicker.tsx | 22 ++++++-- packages/quarkd/src/dialog/index.tsx | 28 +++++++--- packages/quarkd/src/dropdownitem/index.tsx | 29 +++++++---- packages/quarkd/src/dropdownitem/style.css | 22 ++++---- packages/quarkd/src/dropdownmenu/index.tsx | 11 ++-- packages/quarkd/src/empty/index.tsx | 19 +++++-- packages/quarkd/src/field/index.tsx | 19 +++++-- packages/quarkd/src/image/index.tsx | 5 +- packages/quarkd/src/imagepreview/index.tsx | 35 ++++++++++--- packages/quarkd/src/list/index.tsx | 19 +++++-- packages/quarkd/src/loading/index.tsx | 9 ++-- packages/quarkd/src/marketdialog/index.tsx | 7 +-- packages/quarkd/src/marquee/index.tsx | 1 + packages/quarkd/src/nativeuploader/index.tsx | 34 +++++++++--- packages/quarkd/src/navbar/index.tsx | 8 +-- packages/quarkd/src/noticebar/index.tsx | 9 +++- packages/quarkd/src/overlay/index.tsx | 8 ++- packages/quarkd/src/picker/index.tsx | 52 +++++++++++-------- packages/quarkd/src/pickerview/index.tsx | 35 +++++++------ packages/quarkd/src/popover/index.tsx | 18 ++++--- packages/quarkd/src/popup/index.tsx | 5 +- packages/quarkd/src/progress/index.tsx | 7 ++- packages/quarkd/src/pullrefresh/index.tsx | 21 ++++++-- packages/quarkd/src/radio/index.tsx | 7 +-- packages/quarkd/src/rate/index.tsx | 3 ++ packages/quarkd/src/search/index.tsx | 23 +++++--- packages/quarkd/src/sharesheet/index.tsx | 21 ++++++-- packages/quarkd/src/skeleton/index.tsx | 10 ++-- packages/quarkd/src/stepper/index.tsx | 3 ++ packages/quarkd/src/steps/index.tsx | 14 ++--- packages/quarkd/src/sticky/index.tsx | 2 +- packages/quarkd/src/swipe/index.tsx | 6 ++- packages/quarkd/src/swipecell/index.tsx | 10 +++- packages/quarkd/src/switch/index.tsx | 6 ++- packages/quarkd/src/tab/index.tsx | 18 +++---- packages/quarkd/src/textarea/index.tsx | 5 +- packages/quarkd/src/toast/index.tsx | 27 ++++------ packages/quarkd/src/tooltip/index.tsx | 22 +++++--- packages/quarkd/src/uploader/index.tsx | 28 +++++++--- packages/quarkd/src/virtuallist/index.tsx | 2 + 53 files changed, 531 insertions(+), 248 deletions(-) diff --git a/packages/quarkd/src/actionsheet/demo.scss b/packages/quarkd/src/actionsheet/demo.scss index 85bd52ab..35619be6 100644 --- a/packages/quarkd/src/actionsheet/demo.scss +++ b/packages/quarkd/src/actionsheet/demo.scss @@ -7,4 +7,4 @@ .demo-buttons { margin-bottom: 24px; } -} +} \ No newline at end of file diff --git a/packages/quarkd/src/actionsheet/index.tsx b/packages/quarkd/src/actionsheet/index.tsx index 8c7e8e92..c3d24861 100644 --- a/packages/quarkd/src/actionsheet/index.tsx +++ b/packages/quarkd/src/actionsheet/index.tsx @@ -147,6 +147,7 @@ class QuarkActionSheet extends QuarkElement { return (
{this.renderActions()}
{this.cancelText && ( -
-
+
+
-
{this.renderContent()}
+
+ {this.renderContent()} +
); diff --git a/packages/quarkd/src/button/demo.scss b/packages/quarkd/src/button/demo.scss index fe3cbfb9..50638599 100644 --- a/packages/quarkd/src/button/demo.scss +++ b/packages/quarkd/src/button/demo.scss @@ -12,4 +12,4 @@ margin: 4px; } } -} +} \ No newline at end of file diff --git a/packages/quarkd/src/button/index.tsx b/packages/quarkd/src/button/index.tsx index f8e877ea..09211cf0 100644 --- a/packages/quarkd/src/button/index.tsx +++ b/packages/quarkd/src/button/index.tsx @@ -67,7 +67,7 @@ class QuarkButton extends QuarkElement { renderIcon = () => { if (this.icon && this.icon.startsWith("http")) { - return ; + return ; } if (this.loading) { return ( diff --git a/packages/quarkd/src/button/style.css b/packages/quarkd/src/button/style.css index a9248af0..b62af3c4 100644 --- a/packages/quarkd/src/button/style.css +++ b/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); -} +} \ No newline at end of file diff --git a/packages/quarkd/src/calendar/index.tsx b/packages/quarkd/src/calendar/index.tsx index 2ced6fe1..3878fdfd 100644 --- a/packages/quarkd/src/calendar/index.tsx +++ b/packages/quarkd/src/calendar/index.tsx @@ -610,7 +610,9 @@ class QuarkCalendar extends QuarkElement { }; renderFooter = () => ( -
{this.renderFooterButton()}
+
+ {this.renderFooterButton()} +
); renderHeader = () => { @@ -621,20 +623,22 @@ class QuarkCalendar extends QuarkElement { ...weekdays.slice(0, weekfirstday), ]; return ( -
+
{!this.hidetitle && ( -
+
{this.title}
)} {!this.hidesubtitle && ( -
+
{this.subtitle}
)} -
+
{renderWeekDays.map((text) => ( - {text} + + {text} + ))}
@@ -647,6 +651,7 @@ class QuarkCalendar extends QuarkElement {
{this.months.map(this.renderMonth)} diff --git a/packages/quarkd/src/cascadepicker/index.tsx b/packages/quarkd/src/cascadepicker/index.tsx index 4d975f24..350413a2 100644 --- a/packages/quarkd/src/cascadepicker/index.tsx +++ b/packages/quarkd/src/cascadepicker/index.tsx @@ -207,10 +207,18 @@ class QuarkCascadePicker extends QuarkElement { return null; } const wheels = this.pickerData.map((column) => ( -
-
    +
    +
      {column.map((item: string) => ( -
    • {item}
      • +
    • + {item} +
      • ))}
    @@ -228,30 +236,45 @@ class QuarkCascadePicker extends QuarkElement { forbidmaskclick={this.forbidmaskclick} onclose={this.popupClose} > -
    -
    +
    +
    - {this.title} -
    + + {this.title} + +
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    {this.renderWheel()}
    {!this.bottomhidden && ( -
    +
    {Locale.current.confirm} diff --git a/packages/quarkd/src/cell/index.tsx b/packages/quarkd/src/cell/index.tsx index ee30b92c..47d82a40 100644 --- a/packages/quarkd/src/cell/index.tsx +++ b/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 (
    {this.renderIcon()} -
    +
    {this.title}
    {this.desc && ( -
    +
    {this.desc}
    )} diff --git a/packages/quarkd/src/checkbox/index.tsx b/packages/quarkd/src/checkbox/index.tsx index 6d9fa136..c72f0a87 100644 --- a/packages/quarkd/src/checkbox/index.tsx +++ b/packages/quarkd/src/checkbox/index.tsx @@ -78,16 +78,17 @@ class QuarkCheckbox extends QuarkElement { render() { return (
    - + - + - + -
    diff --git a/packages/quarkd/src/circle/index.tsx b/packages/quarkd/src/circle/index.tsx index 6de705fc..4aa79a9c 100644 --- a/packages/quarkd/src/circle/index.tsx +++ b/packages/quarkd/src/circle/index.tsx @@ -81,6 +81,7 @@ class QuarkCircle extends QuarkElement { return ( - + + {Stops} @@ -154,12 +163,12 @@ class QuarkCircle extends QuarkElement { }; return (
    - + {this.renderGradient()} {this.renderLayer()} {this.renderHover()} -
    +
    diff --git a/packages/quarkd/src/collapse/index.tsx b/packages/quarkd/src/collapse/index.tsx index 7e08eec6..ce86684f 100644 --- a/packages/quarkd/src/collapse/index.tsx +++ b/packages/quarkd/src/collapse/index.tsx @@ -46,15 +46,15 @@ class Collapse extends QuarkElement { render() { return (
    - + {this.title} -
    +
    -
    +
    diff --git a/packages/quarkd/src/countdown/index.tsx b/packages/quarkd/src/countdown/index.tsx index 1f3b31e6..34ac0a97 100644 --- a/packages/quarkd/src/countdown/index.tsx +++ b/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,6 +67,7 @@ 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) { @@ -72,6 +75,7 @@ class QuarkButton extends QuarkElement { } } } + 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 ( {this.calculateShow("hh") && ( - {countdownHour} - {dot} + + {countdownHour} + + + {dot} + )} {this.calculateShow("mm") && ( - {countdownMin} - {dot} + + {countdownMin} + + + {dot} + )} - {this.calculateShow("ss") && {countdownSecond}} + {this.calculateShow("ss") && ( + + {countdownSecond} + + )} ); } diff --git a/packages/quarkd/src/datetimepicker/TimePicker.tsx b/packages/quarkd/src/datetimepicker/TimePicker.tsx index 6d63725e..5309b2e0 100644 --- a/packages/quarkd/src/datetimepicker/TimePicker.tsx +++ b/packages/quarkd/src/datetimepicker/TimePicker.tsx @@ -64,6 +64,7 @@ class QuarkTimePicker extends QuarkElement { let [hour, minute] = value.split(":"); hour = padZero(clamp(+hour, +this.minhour, +this.maxhour)); minute = padZero(clamp(+minute, +this.minminute, this.maxminute)); + return `${hour}:${minute}`; } @@ -88,6 +89,7 @@ class QuarkTimePicker extends QuarkElement { const index = values.indexOf(value); return index > -1 ? index : 0; }; + this.originColumns = ranges.map(({ type, range }) => { let values = times(range[1] - range[0] + 1, (index) => padZero(range[0] + index) @@ -95,6 +97,7 @@ class QuarkTimePicker extends QuarkElement { if (this.filter) { values = this.filter(type, values); } + return { defaultIndex: type === "hour" @@ -112,6 +115,7 @@ class QuarkTimePicker extends QuarkElement { values: values.map((value) => this.formatter(type, value)), }; }); + this.pickerRef.current.setColumns(this.columns); } @@ -174,12 +178,22 @@ class QuarkTimePicker extends QuarkElement { onconfirm={this.confirm} > {this.showtoolbar && ( -
    - +
    + {this.cancelbuttontext} - {this.title} - + + {this.title} + + {this.confirmbuttontext}
    diff --git a/packages/quarkd/src/dialog/index.tsx b/packages/quarkd/src/dialog/index.tsx index 772a4faf..004f0b5c 100644 --- a/packages/quarkd/src/dialog/index.tsx +++ b/packages/quarkd/src/dialog/index.tsx @@ -209,11 +209,11 @@ class QuarkDialog extends QuarkElement { : "quark-dialog-footer"; return ( -
    +
    {!this.hideclose && ( -
    -
    +
    +
    切片 )} -
    +
    {!this.notitle && ( -

    {this.title}

    +

    + {this.title} +

    )} {this.content && (
    -
    {this.content}
    +
    + {this.content} +
    )}     @@ -288,9 +294,10 @@ class QuarkDialog extends QuarkElement { {this.btnvertical ? ( this.renderBtnVertical() ) : ( -
    +
    @@ -311,7 +319,11 @@ class QuarkDialog extends QuarkElement { )}
    -
    +
    ); } diff --git a/packages/quarkd/src/dropdownitem/index.tsx b/packages/quarkd/src/dropdownitem/index.tsx index 2d8c3894..814f99d4 100644 --- a/packages/quarkd/src/dropdownitem/index.tsx +++ b/packages/quarkd/src/dropdownitem/index.tsx @@ -143,7 +143,7 @@ class QuarkDropdownItem extends QuarkElement { const style: any = {}; if (item.value == this.currentValue) { - classList.push("quark-dropdown-item__option--active"); + classList.push("quark-dropdown-item-option-active"); style.color = this.props.activeColor || "#08f"; } @@ -170,13 +170,18 @@ class QuarkDropdownItem extends QuarkElement {
    {item.text}
    {item.value == this.currentValue && ( - + )}     ); @@ -216,14 +221,14 @@ class QuarkDropdownItem extends QuarkElement { const classObj = { title: true, - "title--down": this.showPopup === (this.props.direction === "down"), - "title--active": this.showPopup, - "title--disabled": this.disabled, + "title-down": this.showPopup === (this.props.direction === "down"), + "title-active": this.showPopup, + "title-disabled": this.disabled, }; const classStr = Object.keys(classObj) .map((key) => { - if (classObj[key]) return "quark-dropdown-menu__" + key; + if (classObj[key]) return "quark-dropdown-menu-" + key; }) .join(" "); @@ -295,18 +300,21 @@ class QuarkDropdownItem extends QuarkElement { class={this.titleCSS().class} style={this.titleCSS().style} onClick={this.onTitleClick} + part="title" > {this.renderTitle()}
    -
    +
    {!this.props.hideOverlay && (
    this.toggle(false)} /> diff --git a/packages/quarkd/src/dropdownitem/style.css b/packages/quarkd/src/dropdownitem/style.css index a6d255b8..d5aadbff 100644 --- a/packages/quarkd/src/dropdownitem/style.css +++ b/packages/quarkd/src/dropdownitem/style.css @@ -15,7 +15,7 @@ height: 100%; } -.quark-dropdown-menu__title { +.quark-dropdown-menu-title { position: relative; box-sizing: border-box; max-width: 100%; @@ -27,11 +27,11 @@ align-items: center; } -.quark-dropdown-menu__title--disabled { +.quark-dropdown-menu-title-disabled { color: quark-textSecondaryColor; } -.quark-dropdown-menu__title::after { +.quark-dropdown-menu-title::after { position: absolute; top: 50%; right: -4px; @@ -43,24 +43,24 @@ content: ''; } -.quark-dropdown-menu__title--disabled::after { +.quark-dropdown-menu-title-disabled::after { border-color: transparent transparent quark-textSecondaryColor quark-textSecondaryColor; } -.quark-dropdown-menu__title--active { +.quark-dropdown-menu-title-active { color: var(--quark-dropdown-menu-title-active-text-color); } -.quark-dropdown-menu__title--active::after { +.quark-dropdown-menu-title-active::after { border-color: transparent transparent currentColor currentColor; } -.quark-dropdown-menu__title--down::after { +.quark-dropdown-menu-title-down::after { margin-top: -1px; transform: rotate(135deg); } -.quark-dropdown-item__content--wrapper { +.quark-dropdown-item-content-wrap { position: fixed; z-index: 10; width: 100%; @@ -73,7 +73,7 @@ transition-timing-function: quark-animationTimingEnter; } -.quark-dropdown-item__content { +.quark-dropdown-item-content { position: absolute; left: 0; z-index: 10; @@ -87,11 +87,11 @@ transition-timing-function: quark-animationTimingEnter; } -.quark-dropdown-item__option--active { +.quark-dropdown-item-option-active { color: var(--quark-dropdown-menu-option-active-color); } -.quark-dropdown-item__content--mask { +.quark-dropdown-item-content-mask { position: absolute; visibility: hidden; left: 0; diff --git a/packages/quarkd/src/dropdownmenu/index.tsx b/packages/quarkd/src/dropdownmenu/index.tsx index a31cad3f..02f8cbb4 100644 --- a/packages/quarkd/src/dropdownmenu/index.tsx +++ b/packages/quarkd/src/dropdownmenu/index.tsx @@ -42,6 +42,7 @@ class QuarkDropdownMenu extends QuarkElement { const allItems = slotAssignedElements( this.rootSlotRef.current?.assignedNodes() ).filter((item) => item.tagName === "QUARK-DROPDOWN-ITEM"); + allItems.forEach((item) => { item.setProps({ activeColor: this.activeColor, @@ -57,9 +58,13 @@ class QuarkDropdownMenu extends QuarkElement { render() { return (
    -
    -
    -
    +
    +
    +
    -
    +
    empty-image - {this.title &&
    {this.title}
    } - {this.desc &&
    {this.desc}
    } + {this.title && ( +
    + {this.title} +
    + )} + {this.desc && ( +
    + {this.desc} +
    + )} {this.buttontext && ( -
    {this.buttontext}
    +
    + {this.buttontext} +
    )}
    diff --git a/packages/quarkd/src/field/index.tsx b/packages/quarkd/src/field/index.tsx index 816f2e24..2807254b 100644 --- a/packages/quarkd/src/field/index.tsx +++ b/packages/quarkd/src/field/index.tsx @@ -100,6 +100,7 @@ class QuarkField extends QuarkElement { const { value } = this.inputRef.current; this.value = value; this.$emit(type, { detail: { value } }); + if (type === "blur" || type === "change") { this.validRules(); } @@ -108,6 +109,7 @@ class QuarkField extends QuarkElement { validRules = () => { if (!this.errorRef || !this.errorRef.current) return; const { current } = this.errorRef; + if (this.rules && this.rules.length > 0) { for (let i = 0; i < this.rules.length; i += 1) { const rule = this.rules[i]; @@ -123,9 +125,11 @@ class QuarkField extends QuarkElement { return; } } + current.style.display = "none"; this.errormsg = ""; } + if (this.required) current.style.display = !this.value && this.errormsg ? "inline-block" : "none"; @@ -140,14 +144,17 @@ class QuarkField extends QuarkElement { render() { const label = this.label ? ( - + ) : null; return ( {label} -
    -
    +
    +
    -
    +
    {this.errormsg}
    diff --git a/packages/quarkd/src/image/index.tsx b/packages/quarkd/src/image/index.tsx index 5be806c9..cf57f1df 100644 --- a/packages/quarkd/src/image/index.tsx +++ b/packages/quarkd/src/image/index.tsx @@ -110,17 +110,18 @@ class QuarkImage extends QuarkElement { return (
    {this.status === "error" && ( -
    +
    {Locale.current.image.loadError}
    )} {this.status === "loading" && ( -
    +
    {Locale.current.loading}
    )} void) = null; wrapRef = createRef() as any; + init = async () => { if (!this.images.length) return; if (this.slide) return; @@ -60,6 +61,7 @@ class QuarkImagePreview extends QuarkElement { this.eventBind(); if (this.isFn) this.open = true; }; + initSlide(index: number) { return new Promise((resolve) => { setTimeout(() => { @@ -92,10 +94,12 @@ class QuarkImagePreview extends QuarkElement { }, 100); }); } + componentWillUnmount(): void { if (this.slide) this.slide.destroy(); this.slide = null; } + setData = ({ images, startPosition, @@ -118,17 +122,20 @@ class QuarkImagePreview extends QuarkElement { if (this.onClose) this.onClose(this.index); this.open = false; }; + eventBind() { this.removeEvent(); this.addEventListener("touchstart", this.handleTouchStart); this.addEventListener("touchmove", this.handleTouchMove); this.addEventListener("touchend", this.handleTouchEnd); } + removeEvent = () => { this.removeEventListener("touchstart", this.handleTouchStart); this.removeEventListener("touchmove", this.handleTouchMove); this.removeEventListener("touchend", this.handleTouchEnd); }; + handleTouchStart = (e: TouchEvent) => { this.startX = e.changedTouches[0].clientX; this.startY = e.changedTouches[0].clientY; @@ -162,15 +169,18 @@ class QuarkImagePreview extends QuarkElement { // console.log('左滑') } }; + angle(start: { X: number; Y: number }, end: { X: number; Y: number }) { const X = end.X - start.X; const Y = end.Y - start.Y; // 返回角度 /Math.atan()返回数字的反正切值 return (360 * Math.atan(Y / X)) / (2 * Math.PI); } + close() { this.open = false; } + render() { const showIndex = `${this.index + 1}`; return ( @@ -180,19 +190,29 @@ class QuarkImagePreview extends QuarkElement { class="quark-imagepreview-indicator" style={{ display: this.open ? "inline-block" : "none" }} > -

    +

    {showIndex}/{this.images.length}

    - -
    -
    -
    + +
    +
    +
    {this.images.map((item, index) => ( -
    -
    +
    +
    void; change?: (index: number) => void; } + // 函数调用 export default function imagePreview(params: IImagePreview): QuarkImagePreview { const preview = document.createElement( diff --git a/packages/quarkd/src/list/index.tsx b/packages/quarkd/src/list/index.tsx index e3fdc07c..e99e2977 100644 --- a/packages/quarkd/src/list/index.tsx +++ b/packages/quarkd/src/list/index.tsx @@ -117,9 +117,14 @@ class QuarkList extends QuarkElement { renderLoading = () => { return ( - -
    - + +
    + {this.loadingtext}
    @@ -130,7 +135,11 @@ class QuarkList extends QuarkElement { renderFinishedText = () => { if (this.finishedtext) { return ( -
    +
    {this.finishedtext}
    ); @@ -160,7 +169,7 @@ class QuarkList extends QuarkElement { {this.loading && !this.finished && this.renderLoading()} {this.finished && this.renderFinishedText()} {this.error && this.renderErrorText()} -
    +
    ); } diff --git a/packages/quarkd/src/loading/index.tsx b/packages/quarkd/src/loading/index.tsx index a1891806..9cd4245f 100644 --- a/packages/quarkd/src/loading/index.tsx +++ b/packages/quarkd/src/loading/index.tsx @@ -56,6 +56,7 @@ class QuarkLoading extends QuarkElement { + diff --git a/packages/quarkd/src/marketdialog/index.tsx b/packages/quarkd/src/marketdialog/index.tsx index 57f1f061..4c1c3276 100644 --- a/packages/quarkd/src/marketdialog/index.tsx +++ b/packages/quarkd/src/marketdialog/index.tsx @@ -47,12 +47,13 @@ class QuarkMarketDialog extends QuarkElement { render() { return ( - -
    - + +
    + {this.url && error} diff --git a/packages/quarkd/src/nativeuploader/index.tsx b/packages/quarkd/src/nativeuploader/index.tsx index ab79594d..699c1511 100644 --- a/packages/quarkd/src/nativeuploader/index.tsx +++ b/packages/quarkd/src/nativeuploader/index.tsx @@ -66,6 +66,7 @@ class QuarkNativeUploader extends QuarkElement { const urls = this.tasks.map((i) => i.url); this.$emit("onread", { detail: urls }); }; + // 设置初始化预览数据 setPreview = (urls: string[]) => { const data = urls @@ -111,13 +112,22 @@ class QuarkNativeUploader extends QuarkElement { render() { const showUpload = this.tasks.length >= Number(this.maxcount); const showTasks = this.tasks.slice(0, this.maxcount); + return ( {!(this.readonly || showUpload) && ( -
    +
    -
    - +
    +
    @@ -125,22 +135,30 @@ class QuarkNativeUploader extends QuarkElement { {showTasks.map((item, index, n) => (
    this.myImagePreview(n, index)} > {item.status === "uploading" && ( -
    - - {item.message} +
    + + + {item.message} +
    )} - + {!this.hidedelete && !this.readonly && ( this.onRemove(e, item, index)} > - + )}
    diff --git a/packages/quarkd/src/navbar/index.tsx b/packages/quarkd/src/navbar/index.tsx index 61dde7b9..a3a6f4b9 100644 --- a/packages/quarkd/src/navbar/index.tsx +++ b/packages/quarkd/src/navbar/index.tsx @@ -58,6 +58,7 @@ class QuarkNavbar extends QuarkElement { size={this.iconsize} onClick={this.leftClick} class="back" + part="back" /> {!this.closehide && ( )} )} -
    -
    {this.title}
    +
    +
    {this.title}
    - + {this.righttext} diff --git a/packages/quarkd/src/noticebar/index.tsx b/packages/quarkd/src/noticebar/index.tsx index 2d1c283b..21b12eb5 100644 --- a/packages/quarkd/src/noticebar/index.tsx +++ b/packages/quarkd/src/noticebar/index.tsx @@ -55,11 +55,12 @@ class QuarkNoticebar extends QuarkElement { return (
    - {!this.lefthide && } + {!this.lefthide && } {this.text} @@ -72,7 +73,11 @@ class QuarkNoticebar extends QuarkElement { onslotchange={this.handleRightSlotChange} > {!this.righthide && ( - + )}
    diff --git a/packages/quarkd/src/overlay/index.tsx b/packages/quarkd/src/overlay/index.tsx index 451f657f..42e2eb32 100644 --- a/packages/quarkd/src/overlay/index.tsx +++ b/packages/quarkd/src/overlay/index.tsx @@ -61,10 +61,14 @@ class QuarkOverlay extends QuarkElement { render() { return ( -
    +
    -
    +
    ); } diff --git a/packages/quarkd/src/picker/index.tsx b/packages/quarkd/src/picker/index.tsx index b107f14b..d59a7d4a 100644 --- a/packages/quarkd/src/picker/index.tsx +++ b/packages/quarkd/src/picker/index.tsx @@ -148,12 +148,11 @@ class QuarkPicker extends QuarkElement { return this.wheels[i]; }; - componentDidMount = () => {}; - renderWheel = () => { if (!this.columns) { return null; } + const wheels = this.columns.map((column) => { return (
    @@ -165,18 +164,15 @@ class QuarkPicker extends QuarkElement {
    ); }); + return wheels; }; + popupClose = () => { this.restorePosition(); this.$emit("close"); }; - // popupClosed = () => { - // this.restorePosition(); - // this.$emit("closed"); - // }; - render() { return ( -
    -
    +
    +
    - {this.title} -
    - + + {this.title} + +
    +
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    -
    +
    {this.renderWheel()}
    {!this.bottomhidden && ( -
    - +
    + {this.confirmtext || Locale.current.confirm}
    diff --git a/packages/quarkd/src/pickerview/index.tsx b/packages/quarkd/src/pickerview/index.tsx index 29329391..05982fc1 100644 --- a/packages/quarkd/src/pickerview/index.tsx +++ b/packages/quarkd/src/pickerview/index.tsx @@ -133,18 +133,20 @@ class QuarkPickerView extends QuarkElement { return this.wheels[i]; }; - componentDidMount = () => {}; - renderWheel = () => { if (!this.columns) { return null; } const wheels = this.columns.map((column) => { return ( -
    -
      +
      +
        {column.values.map((item: string) => { - return
      • {item}
        • ; + return ( +
      • + {item} +
        • + ); })}
      @@ -153,21 +155,20 @@ class QuarkPickerView extends QuarkElement { return wheels; }; - // popupClosed = () => { - // this.restorePosition(); - // this.$emit("closed"); - // }; - render() { return ( -
      -
      -
      -
      -
      -
      +
      +
      +
      +
      +
      +
      -
      +
      {this.renderWheel()}
      diff --git a/packages/quarkd/src/popover/index.tsx b/packages/quarkd/src/popover/index.tsx index 84be8a23..7c6f26d3 100644 --- a/packages/quarkd/src/popover/index.tsx +++ b/packages/quarkd/src/popover/index.tsx @@ -146,6 +146,7 @@ class QuarkPopover extends QuarkElement { src={icon} style={{ marginRight: 10 }} class="quark-popover-icon" + part="icon" /> ); } @@ -163,7 +164,7 @@ class QuarkPopover extends QuarkElement { ) { return (
      -
      +
      {this.actions.map((action: PopoverAction, index: number) => { const actionClass = classNames( @@ -173,43 +174,48 @@ class QuarkPopover extends QuarkElement { action.disabled && action.disabled === true, } ); + return (
      { this.handleActionClick(e, index); }} > {this.renderIcon(action.icon)} -
      {action.text}
      +
      {action.text}
      ); })}
      -
      +
      ); } + return (
      -
      -
      +
      +
      {this.actions.map((action: PopoverAction, index: number) => { const actionClass = classNames("quark-popover-action-container", { "quark-action-container-disable": action.disabled && action.disabled === true, }); + return (
      { this.handleActionClick(e, index); }} > {this.renderIcon(action.icon)} -
      {action.text}
      +
      {action.text}
      ); })} diff --git a/packages/quarkd/src/popup/index.tsx b/packages/quarkd/src/popup/index.tsx index 296637e6..e031f08a 100644 --- a/packages/quarkd/src/popup/index.tsx +++ b/packages/quarkd/src/popup/index.tsx @@ -132,14 +132,15 @@ class QuarkPopup extends QuarkElement { {this.closeable && (
      - +
      )}
      -
      +
      ); } diff --git a/packages/quarkd/src/progress/index.tsx b/packages/quarkd/src/progress/index.tsx index 1ab57cb0..8971dac3 100644 --- a/packages/quarkd/src/progress/index.tsx +++ b/packages/quarkd/src/progress/index.tsx @@ -26,11 +26,16 @@ class QuarkProgress extends QuarkElement {
      - {this.showtext && {this.value}%} + {this.showtext && ( + + {this.value}% + + )} ); diff --git a/packages/quarkd/src/pullrefresh/index.tsx b/packages/quarkd/src/pullrefresh/index.tsx index aa0fb999..9e50a531 100644 --- a/packages/quarkd/src/pullrefresh/index.tsx +++ b/packages/quarkd/src/pullrefresh/index.tsx @@ -143,29 +143,34 @@ class QuarkPullRefresh extends QuarkElement { if (status === "loading") { if (dark) { return ( -
      +
      {this.loadingtext}
      ); } + return ( {this.loadingtext} ); } + if (status === "pulling") { return this.pullingtext; } + if (status === "loosing") { return this.loosingtext; } + return ""; }; @@ -240,6 +245,7 @@ class QuarkPullRefresh extends QuarkElement { return (
      {this.getStatusText()} @@ -252,10 +258,19 @@ class QuarkPullRefresh extends QuarkElement { transitionDuration: `${this.duration}ms`, transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : "", }; + return (
      -
      -
      +
      +
      {this.renderHead()}
      diff --git a/packages/quarkd/src/radio/index.tsx b/packages/quarkd/src/radio/index.tsx index b3480c2d..1e08ba3b 100644 --- a/packages/quarkd/src/radio/index.tsx +++ b/packages/quarkd/src/radio/index.tsx @@ -88,13 +88,14 @@ class QuarkRadio extends QuarkElement { render() { return (
      - + -
      @@ -162,7 +163,7 @@ class QuarkRadioGroup extends QuarkElement { render() { return ( -
      +
      ); diff --git a/packages/quarkd/src/rate/index.tsx b/packages/quarkd/src/rate/index.tsx index a1a403c0..1728aa0e 100644 --- a/packages/quarkd/src/rate/index.tsx +++ b/packages/quarkd/src/rate/index.tsx @@ -94,11 +94,14 @@ class QuarkRate extends QuarkElement { src={this.imgicon} key={i.id} onClick={() => this.handleChange(i)} + part="icon" /> ); } + return ( {this.showback && ( -
      +
      )} -
      -
      - +
      +
      +
      -
      +
      @@ -213,7 +220,11 @@ class QuarkSearch extends QuarkElement {
      {!this.hideaction && this.actiontext && ( -
      +
      {this.actiontext} diff --git a/packages/quarkd/src/sharesheet/index.tsx b/packages/quarkd/src/sharesheet/index.tsx index 5091c839..809afbeb 100644 --- a/packages/quarkd/src/sharesheet/index.tsx +++ b/packages/quarkd/src/sharesheet/index.tsx @@ -141,6 +141,7 @@ class QuarkShareSheet extends QuarkElement { return (
      4 && index > 3 ? 8 : undefined, @@ -149,8 +150,14 @@ class QuarkShareSheet extends QuarkElement { this.handleActionClick(index, option); }} > - -
      {option.name}
      + +
      + {option.name} +
      ); }); @@ -182,6 +189,7 @@ class QuarkShareSheet extends QuarkElement { >
      {Locale.current.actionSheet.shareTitle}
      -
      {this.renderOptions()}
      -
      -
      +
      + {this.renderOptions()} +
      +
      +
      { let rowWidth = "100%"; if (index === this.row - 1) { @@ -57,14 +55,16 @@ class Skeleton extends QuarkElement { {!this.hide ? (
      - {this.avatar &&
      } -
      - {this.title &&

      } + {this.avatar &&
      } +
      + {this.title &&

      } {new Array(+this.row).fill(1).map((_, index) => { const rowWidth = this.getRowWidth(index); + return (