重构进度条组件

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,

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: 'line' //  line/circle/dashboard
-      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
-    }
   }
 
   static styles = [
     css`
       :host {
-        position: relative;
+        display: flex;
-        display: inline-block;
       }
+
+      .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;
+        .progress-value {
-          margin-left: 5px;
+          display: none;
-          display: inline-block;
-        }
-      }
-      .progress-bar {
-        display: inline-block;
-        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;
-        }
-      }
-      .progress-text {
-        display: block;
           position: absolute;
-        width: 100%;
+          z-index: 1;
-        top: 50%;
+          top: -32px;
-        transform: translateY(-50%);
+          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: flex;
+        width: 100%;
+        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;
+        }
+      }
+    `,
+    // 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
+    let isDashboard = this.type === 'dashboard'
-    const isDashboard = this.type === 'dashboard'
     return `
-        M 50 50
+        M 64 64
-        m 0 ${isDashboard ? '' : '-'}${radius}
+        m 0 ${isDashboard ? '' : '-'}${RADIUS}
-        a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
+        a ${RADIUS} ${RADIUS} 0 1 1 0 ${isDashboard ? '-' : ''}${RADIUS * 2}
-        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, ${
+      strokeDasharray: `${
-        this.perimeter
+        this.#perimeter * this.rate * (this.value / 100)
-      }px`,
+      }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]
+  #drawCircle() {
-  }
-
-  renderCircle() {
     return html`
-      <div
+      <svg viewBox="0 0 128 128">
-        style=${styleMap({
-          height: this.width + 'px',
-          width: this.width + 'px'
-        })}
-      >
-        <svg viewBox="0 0 100 100">
         <path
-            role="circle__track"
           d=${this.trackPath}
-            stroke=${this.backColor}
+          stroke="var(--wc-progress-inactive-color, var(--color-plain-2))"
-            stroke-width=${this.relativeStrokeWidth}
+          stroke-width="var(--wc-progress-line-width, 6px)"
+          stroke-linecap="round"
           fill="none"
           style=${this.trailPathStyle}
-          ></path>
+        />
         <path
-            role="circle__path"
           d=${this.trackPath}
-            stroke=${this.stroke}
+          stroke="var(--wc-progress-active-color, var(--color-teal-1))"
+          stroke-linecap="round"
+          stroke-width="var(--wc-progress-line-width, 6px)"
           fill="none"
-            stroke-linecap=${this.strokeLinecap}
-            stroke-width=${this.value ? this.relativeStrokeWidth : 0}
           style=${this.circlePathStyle}
-          ></path>
+        />
       </svg>
-      </div>
-    `
-  }
-  renderLine() {
-    let $barInnerText = ''
-    if (this.textInside && this.showText) {
-      $barInnerText = html`
-        <div
-          class="bar-innerText"
-          style=${styleMap({
-            color: this.textColor,
-            'line-height': this.strokeWidth + 'px'
-          })}
-        >
-          ${this.value + '%'}
-        </div>
     `
   }
 
+  #drawLine() {
     return html`
       <div class="progress-bar">
-        <div
+        <mark
-          class="bar-outer"
+          class="thumb"
-          :style=${styleMap({
+          style=${styleMap({ width: this.value + '%' })}
-            height: this.strokeWidth + 'px',
+        ></mark>
-            'background-color': this.backColor
-          })}
-        >
-          <div class="bar-inner" style=${this.barStyle}>${$barInnerText}</div>
       </div>
-      </div>
+      <div class="progress-value" style=${styleMap({ left: this.value + '%' })}>
-    `
-  }
-  render() {
-    let $outSideText = ''
-    if (this.showText && !this.textInside) {
-      $outSideText = html`
-        <div
-          class="progress-text"
-          style=${styleMap({
-            color: this.textColor,
-            fontSize: this.progressTextSize
-          })}
-        >
         ${this.value + '%'}
       </div>
     `
   }
 
+  render() {
+    let step = ~~(this.value / 20) || 1
     return html`
-      ${this.type === 'line' ? this.renderLine() : this.renderCircle()}
+      <main class="container" step=${step}>
-      ${$outSideText}
+        ${this.type === 'line' ? this.#drawLine() : this.#drawCircle()}
+      </main>
     `
   }
 }