修复编译配置;完成进度条组件

build.dev.js

@@ -64,7 +64,7 @@ function mkWCFile({ style, html, js }) {
       .slice(1, -1)
       .map(it => {
         var tmp = it.split(':')
-        return tmp[0].trim()
+        return tmp[0].trim().replace(/^['"]|['"]$/g, '')
       })
     return `
     

build.prod.js

@@ -78,7 +78,7 @@ function mkWCFile({ style, html, js }) {
       .slice(1, -1)
       .map(it => {
         var tmp = it.split(':')
-        return tmp[0].trim()
+        return tmp[0].trim().replace(/^['"]|['"]$/g, '')
       })
     return `
     

src/form/index.js

@@ -8,4 +8,3 @@ import './checkbox'
 import './switch'
 import './select'
 import './star'
-import './progress'

src/form/progress.wc

@@ -1,143 +0,0 @@
-<template>
-  <label>
-    <svg>
-      <circle cx="70" cy="70" r="70"></circle>
-      <circle cx="70" cy="70" r="70"></circle>
-    </svg>
-    <svg width="140" height="30">
-      <line x1="0" y1="0" x2="140" y2="0" stroke="black" />
-    </svg>
-  </label>
-</template>
-
-<style lang="scss">
-:host {
-  display: flex;
-  align-items: center;
-
-  label {
-    // flex: 1;
-    // height: var(--size, 10px);
-    // border-radius: 9px;
-    // background: var(--color-plain-2);
-
-    // span {
-    //   display: block;
-    //   width: 0;
-    //   height: 100%;
-    //   border-radius: 9px;
-    //   background: var(--color-teal-1);
-    // }
-  }
-}
-label {
-  position: relative;
-  // width: 150px;
-  // height: 150px;
-  // border-radius: 50%;
-  // box-shadow: inset 0 0 50px #000;
-  // background: #222;
-  // z-index: 1000;
-}
-svg {
-  position: relative;
-  // width: 150px;
-  // height: 150px;
-  z-index: 1000;
-
-  line {
-    stroke: #efefef;
-    stroke-width: 30;
-    stroke-linecap: round;
-  }
-}
-
-svg circle {
-  width: 100%;
-  height: 100%;
-  fill: none;
-  stroke: #efefef;
-  stroke-width: 10;
-  stroke-linecap: round;
-  transform: translate(5px, 5px);
-
-  &:last-child {
-    stroke-dasharray: 440;
-    stroke-dashoffset: calc(440 - (440 * 85) / 100);
-    stroke: #00a1ff;
-  }
-}
-
-:host([type='danger']) label span {
-  background: var(--color-red-1);
-}
-
-:host([type='info']) label span {
-  background: var(--color-blue-1);
-}
-
-:host([type='success']) label span {
-  background: var(--color-green-1);
-}
-
-:host([type='warning']) label span {
-  background: var(--color-orange-1);
-}
-
-:host([type='primary']) label span {
-  background: var(--color-teal-1);
-}
-</style>
-
-<script>
-export default class Progress {
-  props = {
-    value: 0,
-    max: 1
-  }
-
-  __init__() {
-    /* render */
-    this.__THUMB__ = this.root.children[1].lastElementChild
-  }
-
-  get value() {
-    return this.props.value
-  }
-
-  set value(val) {
-    this.props.value = +val
-    this.calculate()
-  }
-
-  calculate() {
-    var { max, value } = this.props
-    // this.__THUMB__.style.width = `${(100 * value) / max}%`
-  }
-
-  mounted() {
-    this.calculate()
-  }
-
-  watch() {
-    switch (name) {
-      case 'max':
-        var max = +val
-        if (max !== max || max < 1) {
-          max = 1
-        }
-        this.props.max = max
-        this.calculate()
-        break
-
-      case 'value':
-        var v = +val
-        if (v === v) {
-          this.props.value = v
-          this.calculate()
-        }
-        break
-    }
-  }
-}
-</script>

src/form/switch.wc

@@ -193,6 +193,7 @@ export default class Switch {
         break
       case 'active-text':
       case 'inactive-text':
+        console.log('------------->>>')
         this.props[name] = val + ''
         break
     }

src/progress/canvas.js

@@ -0,0 +1,142 @@
+/**
+ *
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2021/03/08 14:25:13
+ */
+
+export function drawLine(el, size, opt) {
+  var ctx = el.getContext('2d')
+  var { width, height } = size
+  var {
+    colors,
+    value,
+    'show-text': showText,
+    'default-color': bg,
+    'line-size': line,
+    'font-size': font
+  } = opt
+  var color = colors[0]
+  var half
+
+  if (colors.length > 1) {
+    let idx = Math.floor(value / (100 / colors.length))
+    if (idx === colors.length) {
+      idx--
+    }
+    color = colors[idx]
+  }
+
+  //
+  line = line || 10
+  font = font || 10
+  half = line / 2
+
+  el.width = width
+  el.height = height
+
+  ctx.clearRect(0, 0, width, height)
+
+  ctx.strokeStyle = bg
+  ctx.lineWidth = line
+  ctx.lineCap = 'round'
+
+  ctx.beginPath()
+  ctx.moveTo(half, half)
+  ctx.lineTo(width - half, half)
+  ctx.stroke()
+  ctx.closePath()
+
+  if (value > 0) {
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.moveTo(half, half)
+    ctx.lineTo(((width - half) * value) / 100, half)
+    ctx.stroke()
+    ctx.closePath()
+
+    if (showText) {
+      ctx.fillStyle = '#fff'
+      ctx.font = `bold ${font}px Arial`
+      ctx.textBaseline = 'middle'
+      ctx.textAlign = 'right'
+      ctx.fillText(
+        (value < 100 ? value.toFixed(1) : 100) + '%',
+        ((width - half) * value) / 100,
+        half
+      )
+    }
+  }
+}
+
+export function drawCircle(el, size, opt, start = -90, end = 270) {
+  var ctx = el.getContext('2d')
+  var { width } = size
+  var {
+    colors,
+    value,
+    'show-text': showText,
+    'default-color': bg,
+    'line-size': line,
+    'font-size': font
+  } = opt
+  var color = colors[0]
+  var half = width / 2
+
+  if (width === 0) {
+    return
+  }
+
+  if (colors.length > 1) {
+    let idx = Math.floor(value / (100 / colors.length))
+    if (idx === colors.length) {
+      idx--
+    }
+    color = colors[idx]
+  }
+
+  //
+  line = line || 10
+  font = font || 32
+  el.width = width
+  el.height = width
+
+  ctx.clearRect(0, 0, width, width)
+
+  ctx.strokeStyle = bg
+  ctx.lineWidth = line
+  ctx.lineCap = 'round'
+
+  ctx.beginPath()
+  ctx.arc(
+    half,
+    half,
+    half - line / 2,
+    (Math.PI / 180) * start,
+    (Math.PI / 180) * end,
+    false
+  ) //整圆
+  ctx.stroke()
+  ctx.closePath()
+
+  if (value > 0) {
+    ctx.strokeStyle = color
+    ctx.beginPath()
+    ctx.arc(
+      half,
+      half,
+      half - line / 2,
+      (Math.PI / 180) * start,
+      (Math.PI / 180) * (((end - start) * value) / 100 + start),
+      false
+    ) //整圆
+    ctx.stroke()
+    ctx.closePath()
+  }
+  if (showText) {
+    ctx.fillStyle = color
+    ctx.font = `${font}px Arial`
+    ctx.textBaseline = 'middle'
+    ctx.textAlign = 'center'
+    ctx.fillText((value < 100 ? value.toFixed(1) : 100) + '%', half, half)
+  }
+}

src/progress/index.wc

@@ -0,0 +1,127 @@
+<template>
+  <canvas />
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+  width: 100%;
+  height: 10px;
+
+  canvas {
+    display: block;
+  }
+}
+
+:host([type='circle']),
+:host([type='dashboard']) {
+  display: inline-flex;
+  width: 160px;
+  height: 160px;
+}
+</style>
+
+<script>
+import { drawLine, drawCircle } from './canvas'
+
+export default class Progress {
+  props = {
+    value: 0,
+    type: 'line',
+    colors: ['#48c9b0'],
+    'default-color': '#f2f5fc',
+    'line-size': null,
+    'font-size': null,
+    'show-text': false
+  }
+
+  state = {
+    width: 0,
+    height: 0
+  }
+
+  __init__() {
+    /* render */
+
+    this.__CANVAS__ = this.root.children[1]
+    // // 圆形进度条默认值为32
+    // if (this.props.type === 'circle' || this.props.type === 'dashboard') {
+    //   this.props['font-size'] = 32
+    // }
+  }
+
+  get value() {
+    return this.props.value
+  }
+
+  set value(val) {
+    this.props.value = +val.toFixed(2)
+    if (this.props.value > 100) {
+      this.props.value = 100
+    } else if (this.props.value < 0) {
+      this.props.value = 0
+    }
+    this.draw()
+  }
+
+  draw() {
+    var type = this.props.type
+    switch (type) {
+      case 'circle':
+        drawCircle(this.__CANVAS__, this.state, this.props)
+        break
+
+      case 'dashboard':
+        drawCircle(this.__CANVAS__, this.state, this.props, -225, 45)
+        break
+
+      // line
+      default:
+        drawLine(this.__CANVAS__, this.state, this.props)
+        break
+    }
+  }
+
+  mounted() {
+    this.state.width = this.clientWidth
+    this.state.height = this.clientHeight
+
+    this.draw()
+  }
+
+  watch() {
+    switch (name) {
+      case 'line-size':
+      case 'font-size':
+        this.props[name] = val || 10
+        break
+
+      case 'default-color':
+        this.props[name] = val || '#f2f5fc'
+        break
+      case 'colors':
+        if (val === null) {
+          this.props.colors = ['#48c9b0']
+        } else {
+          this.props.colors = val.split(',').map(s => s.trim())
+        }
+        break
+
+      case 'type':
+        this.props.type = val || 'line'
+        break
+
+      case 'show-text':
+        this.props[name] = val !== null
+        break
+
+      case 'value':
+        var v = +val
+        if (v === v) {
+          this.value = +v
+        }
+        break
+    }
+  }
+}
+</script>