From 6d6d706ad0ef3860618f15d611497895b6592424 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Wed, 31 Jul 2019 18:30:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9mini=E7=9A=84=E8=A7=84?=
 =?UTF-8?q?=E6=A0=BC=E5=AE=9A=E4=B9=89;=E5=A2=9E=E5=8A=A0=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/button.wc   |   4 +-
 src/form/input.wc    |   2 +-
 src/form/progress.wc | 118 +++++++++++++++++++++++++++++++++++++++++++
 src/scroll/index.wc  |   1 +
 4 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 src/form/progress.wc

diff --git a/src/form/button.wc b/src/form/button.wc
index afb21a2..346b6e1 100644
--- a/src/form/button.wc
+++ b/src/form/button.wc
@@ -86,8 +86,8 @@
 }
 :host([size='mini']) {
   button {
-    min-width: 20px;
-    height: 20px;
+    min-width: 24px;
+    height: 24px;
     font-size: 12px;
   }
   .icon {
diff --git a/src/form/input.wc b/src/form/input.wc
index 0275ab1..6c3a412 100644
--- a/src/form/input.wc
+++ b/src/form/input.wc
@@ -205,7 +205,7 @@ li {
 }
 :host([size='mini']) {
   .label {
-    height: 20px;
+    height: 24px;
     font-size: 12px;
   }
   .icon {
diff --git a/src/form/progress.wc b/src/form/progress.wc
new file mode 100644
index 0000000..3d74653
--- /dev/null
+++ b/src/form/progress.wc
@@ -0,0 +1,118 @@
+<template>
+  <label><span></span></label>
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+  align-items: center;
+
+  label {
+    flex: 1;
+    height: var(--size, 10px);
+    border-radius: 9px;
+    background: nth($cp, 2);
+
+    span {
+      display: block;
+      width: 0;
+      height: 100%;
+      border-radius: 9px;
+      background: nth($ct, 1);
+    }
+  }
+}
+
+:host([size='large']) label {
+  height: 18px;
+}
+
+:host([size='medium']) label {
+  height: 14px;
+}
+
+:host([size='mini']) label {
+  height: 6px;
+}
+
+:host([color='red']) label span {
+  background: nth($cr, 1);
+}
+
+:host([color='blue']) label span {
+  background: nth($cb, 1);
+}
+
+:host([color='green']) label span {
+  background: nth($cg, 1);
+}
+
+:host([color='orange']) label span {
+  background: nth($co, 1);
+}
+
+:host([color='dark']) label span {
+  background: nth($cd, 1);
+}
+
+:host([color='purple']) label span {
+  background: nth($cpp, 1);
+}
+</style>
+
+<script>
+export default class Progress {
+  props = {
+    value: 0,
+    max: 1
+  }
+
+  constructor() {
+    /* 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(name, old, val) {
+    if (old === val) {
+      return
+    }
+
+    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>
diff --git a/src/scroll/index.wc b/src/scroll/index.wc
index a6e05d2..e2f11db 100644
--- a/src/scroll/index.wc
+++ b/src/scroll/index.wc
@@ -12,6 +12,7 @@
 
   .container {
     overflow: hidden;
+    position: relative;
     width: 100%;
     height: 100%;
   }