diff --git a/src/notify/index.js b/src/notify/index.js
index 79f6a6a..b5b0852 100644
--- a/src/notify/index.js
+++ b/src/notify/index.js
@@ -23,7 +23,7 @@ const DEFAULT_OPT = {
let notifyIns = null
function merge(opt = {}) {
- let output = Object.assign({}, DEFAULT_OPT)
+ let output = { ...DEFAULT_OPT }
for (let k in opt) {
if (opt[k] !== void 0) {
@@ -68,6 +68,7 @@ class Notify extends Component {
margin-top: 16px !important;
}
.noselect {
+ -webkit-user-select: none;
user-select: none;
img,
diff --git a/src/progress/index.js b/src/progress/index.js
index f974070..33786bb 100644
--- a/src/progress/index.js
+++ b/src/progress/index.js
@@ -6,297 +6,198 @@
import { css, html, Component, styleMap } from 'wkit'
+const RADIUS = 50
+
class Progress extends Component {
static props = {
value: {
type: Number,
default: 0,
- attribute: false,
observer(val) {
- this.value = this.clamp(val)
+ this.value = this.#fix(val)
}
},
- type: {
- type: String,
- default: 'line' // line/circle/dashboard
- },
- strokeWidth: {
- type: Number,
- default: 6,
- attribute: false
- },
- textInside: {
- type: Boolean,
- default: false,
- attribute: true
- },
- status: {
- type: String,
- default: '', // success/exception/warning
- attribute: false
- },
- color: {
- type: String,
- default: '',
- attribute: false,
- observer(val) {
- if (val.includes(',')) {
- this.#colors = val.split(',')
- } else {
- this.#colors = val
- }
- }
- },
- width: {
- type: Number,
- default: 126,
- attribute: false
- },
- showText: {
- type: Boolean,
- default: false,
- attribute: true
- },
- backColor: {
- type: String,
- default: '#ebeef5',
- attribute: false
- },
- textColor: {
- type: String,
- default: '#606266',
- attribute: false
- },
- strokeLinecap: {
- type: String,
- default: 'round', //butt/round/square
- attribute: false
- }
+ type: 'line' // line/circle/dashboard
}
static styles = [
css`
:host {
- position: relative;
- display: inline-block;
+ display: flex;
}
+
+ .container {
+ position: relative;
+ width: 100%;
+ -webkit-user-select: none;
+ user-select: none;
+
+ &[step='1'] {
+ --wc-progress-active-color: var(--wc-progress-active-color-1);
+ }
+ &[step='2'] {
+ --wc-progress-active-color: var(--wc-progress-active-color-2);
+ }
+ &[step='3'] {
+ --wc-progress-active-color: var(--wc-progress-active-color-3);
+ }
+ &[step='4'] {
+ --wc-progress-active-color: var(--wc-progress-active-color-4);
+ }
+ &[step='5'] {
+ --wc-progress-active-color: var(--wc-progress-active-color-5);
+ }
+ }
+ `,
+ // line
+ css`
:host([type='line']) {
width: 100%;
- .progress-text {
- width: 40px;
- margin-left: 5px;
- display: inline-block;
+
+ .progress-value {
+ display: none;
+ position: absolute;
+ z-index: 1;
+ top: -32px;
+ margin-left: -24px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 14px;
+ text-align: center;
+ background: var(--color-dark-2);
+ color: #fff;
+
+ &::after {
+ position: absolute;
+ left: 50%;
+ margin-left: -3px;
+ display: block;
+ width: 6px;
+ height: 6px;
+ background: var(--color-dark-2);
+ content: '';
+ transform: rotate(45deg);
+ }
+ }
+
+ &:host(:hover) {
+ .progress-value {
+ display: block;
+ }
}
}
+
.progress-bar {
- display: inline-block;
+ display: flex;
width: 100%;
- vertical-align: middle;
- }
- .bar-outer,
- .bar-inner {
- height: 100%;
- border-radius: 999rem;
- }
- .bar-inner {
- transition: 0.6s ease;
- transition-property: width, background-color;
- .bar-innerText {
- margin: 0 5px;
- height: 100%;
- line-height: 6px;
- font-size: 12px;
- line-height: 100%;
- vertical-align: middle;
- text-align: right;
+ height: var(--wc-progress-line-width, 6px);
+ border-radius: 32px;
+ background: var(--wc-progress-inactive-color, var(--color-plain-2));
+
+ .thumb {
+ width: 0;
+ height: var(--wc-progress-line-width, 6px);
+ border-radius: 32px;
+ background: var(--wc-progress-active-color, var(--color-teal-1));
+ transition: 0.6s ease;
+ transition-property: width, background;
}
}
- .progress-text {
- display: block;
- position: absolute;
- width: 100%;
- top: 50%;
- transform: translateY(-50%);
- text-align: center;
+ `,
+ // circle & dashboard
+ css`
+ :host([type='circle']),
+ :host([type='dashboard']) {
+ width: var(--wc-progress-size, 128px);
+ height: var(--wc-progress-size, 128px);
}
`
]
+ // 周长
+ #perimeter = 2 * Math.PI * RADIUS
- #colors
-
- get relativeStrokeWidth() {
- return ((this.strokeWidth / this.width) * 100).toFixed(1)
- }
- get radius() {
- if (this.type === 'circle' || this.type === 'dashboard') {
- return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10)
- } else {
- return 0
- }
- }
get trackPath() {
- const radius = this.radius
- const isDashboard = this.type === 'dashboard'
+ let isDashboard = this.type === 'dashboard'
return `
- M 50 50
- m 0 ${isDashboard ? '' : '-'}${radius}
- a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
- a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
+ M 64 64
+ m 0 ${isDashboard ? '' : '-'}${RADIUS}
+ a ${RADIUS} ${RADIUS} 0 1 1 0 ${isDashboard ? '-' : ''}${RADIUS * 2}
+ a ${RADIUS} ${RADIUS} 0 1 1 0 ${isDashboard ? '' : '-'}${RADIUS * 2}
`
}
get trailPathStyle() {
return styleMap({
- strokeDasharray: `${this.perimeter * this.rate}px, ${this.perimeter}px`,
+ strokeDasharray: `${this.#perimeter * this.rate}px, ${this.#perimeter}px`,
strokeDashoffset: this.strokeDashoffset
})
}
+
get strokeDashoffset() {
- const offset = (-1 * this.perimeter * (1 - this.rate)) / 2
+ let offset = (-1 * this.#perimeter * (1 - this.rate)) / 2
return `${offset}px`
}
- get perimeter() {
- return 2 * Math.PI * this.radius
- }
+
get rate() {
return this.type === 'dashboard' ? 0.75 : 1
}
- get stroke() {
- let ret
- if (this.color) {
- ret = this.getCurrentColor(this.value)
- } else {
- switch (this.status) {
- case 'success':
- ret = '#13ce66'
- break
- case 'exception':
- ret = '#ff4949'
- break
- case 'warning':
- ret = '#e6a23c'
- break
- default:
- ret = '#20a0ff'
- }
- }
- return ret
- }
+
get circlePathStyle() {
return styleMap({
- strokeDasharray: `${this.perimeter * this.rate * (this.value / 100)}px, ${
- this.perimeter
- }px`,
+ strokeDasharray: `${
+ this.#perimeter * this.rate * (this.value / 100)
+ }px, ${this.#perimeter}px`,
strokeDashoffset: this.strokeDashoffset,
transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
})
}
- get barStyle() {
- return styleMap({
- width: this.value + '%',
- 'background-color': this.stroke //this.getCurrentColor(this.value)
- })
- }
- get progressTextSize() {
- let size =
- this.type === 'line'
- ? 12 + this.strokeWidth * 0.4
- : this.width * 0.111111 + 2
- return size + 'px'
- }
- clamp(val) {
+ #fix(val) {
return Math.max(0, Math.min(val, 100))
}
- getCurrentColor(value) {
- if (!Array.isArray(this.#colors)) {
- return this.#colors
- }
- let length = this.#colors.length
- let step = 100 / length
- let index = Math.floor(value / step)
- return this.#colors[index >= length ? length - 1 : index]
- }
-
- renderCircle() {
+ #drawCircle() {
return html`
-
+
`
}
- renderLine() {
- let $barInnerText = ''
- if (this.textInside && this.showText) {
- $barInnerText = html`
-
- ${this.value + '%'}
-
- `
- }
+ #drawLine() {
return html`
+
+ ${this.value + '%'}
`
}
- render() {
- let $outSideText = ''
- if (this.showText && !this.textInside) {
- $outSideText = html`
-
- ${this.value + '%'}
-
- `
- }
+ render() {
+ let step = ~~(this.value / 20) || 1
return html`
- ${this.type === 'line' ? this.renderLine() : this.renderCircle()}
- ${$outSideText}
+
+ ${this.type === 'line' ? this.#drawLine() : this.#drawCircle()}
+
`
}
}