From 940f9acec856ebd66e937f3cf74b47422cdd09a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Sun, 2 Feb 2020 00:11:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9C=86=E8=A7=92=E5=8D=8A?=
 =?UTF-8?q?=E5=BE=84=E4=B8=BA2px;=E5=A2=9E=E5=8A=A0=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=9D=97=E7=BB=84=E4=BB=B6;=E4=BC=98=E5=8C=96=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/code/index.wc    | 198 +++++++++++++++++++++++++++++++++++++++++++
 src/form/button.wc   |   2 +-
 src/form/input.wc    |   8 +-
 src/form/number.wc   |   6 +-
 src/form/select.wc   |   8 +-
 src/layer/index.wc   |   8 +-
 src/neditor/index.wc |   2 +-
 src/pager/index.wc   |   2 +-
 src/picker/date.wc   |   8 +-
 src/scroll/index.wc  |  42 ++++++++-
 10 files changed, 258 insertions(+), 26 deletions(-)
 create mode 100644 src/code/index.wc

diff --git a/src/code/index.wc b/src/code/index.wc
new file mode 100644
index 0000000..f8f8f29
--- /dev/null
+++ b/src/code/index.wc
@@ -0,0 +1,198 @@
+<template>
+  <div class="code-box">
+    <header class="title">
+      <span><i></i><i></i><i></i></span>
+      <span>
+        <wc-icon title="运行" size="mini" class="act run" is="live"></wc-icon>
+        <wc-icon title="复制" size="mini" class="act cp" is="doc"></wc-icon>
+      </span>
+    </header>
+    <wc-scroll axis="y" class="code"></wc-scroll>
+  </div>
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+}
+
+.code-box {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 400px;
+  min-height: 88px;
+  max-height: 210px;
+  border: 1px solid nth($cp, 2);
+  border-radius: 2px;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 24px;
+    padding: 0 12px;
+    line-height: 1;
+    font-size: 12px;
+    background: nth($cp, 2);
+    user-select: none;
+
+    i {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin-right: 6px;
+      border-radius: 50%;
+      background: nth($cr, 1);
+    }
+    i:nth-child(2) {
+      background: nth($co, 1);
+    }
+    i:nth-child(3) {
+      background: nth($cg, 1);
+    }
+
+    .act {
+      color: nth($cgr, 2);
+      cursor: pointer;
+
+      &:hover {
+        color: nth($cgr, 3);
+      }
+      &.run {
+        display: none;
+      }
+    }
+  }
+
+  .code {
+    flex: 1;
+    padding: 5px 0;
+    line-height: 18px;
+    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+    font-size: 13px;
+    background: linear-gradient(to right, nth($cp, 1) 40px, #fff 40px);
+    color: nth($cd, 1);
+    cursor: text;
+    counter-reset: code;
+
+    p {
+      display: flex;
+      position: relative;
+      min-height: 18px;
+      padding: 0 8px 0 45px;
+      white-space: nowrap;
+      // white-space: pre-wrap;
+      // word-wrap: break-word;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        width: 40px;
+        height: 100%;
+        padding-right: 5px;
+        text-align: right;
+        color: nth($cgr, 1);
+        content: counter(code);
+        counter-increment: code;
+      }
+    }
+  }
+}
+
+:host([exec]) {
+  .title {
+    .run {
+      display: inline-block;
+    }
+  }
+}
+
+:host([dark]) {
+  .code-box {
+    border-color: nth($cd, 2);
+
+    .title {
+      background: nth($cd, 2);
+    }
+
+    .code {
+      background: linear-gradient(to right, #596b7f 40px, nth($cd, 1) 40px);
+      color: nth($cp, 3);
+
+      p::before {
+        color: nth($cgr, 3);
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import '../scroll/index'
+import '../layer/index'
+import $ from '../utils'
+
+export default class Code {
+  props = {
+    dark: '',
+    inline: '',
+    content: ''
+  }
+
+  __init__() {
+    /* render */
+    var elem = this.root.children[1]
+    this.__CODE__ = elem.children[1]
+    this.__RUN__ = elem.children[0].children[1].firstElementChild
+    this.__CP__ = elem.children[0].children[1].lastElementChild
+  }
+
+  get value() {
+    return this.props.content
+  }
+
+  mounted() {
+    this._cpFN = $.bind(this.__CP__, 'click', ev => {
+      try {
+        navigator.clipboard.writeText(this.value)
+        layer.toast('复制到粘贴板成功', 'success')
+      } catch (err) {
+        layer.toast('复制到粘贴板失败', 'error')
+      }
+    })
+    // 运行按钮的点击, 内部不处理逻辑, 传递给外部的run事件
+    this._runFN = $.bind(this.__RUN__, 'click', ev => {
+      this.dispatchEvent(
+        new CustomEvent('run', {
+          detail: this.value
+        })
+      )
+    })
+  }
+
+  unmounted() {
+    $.unbind(this.__CP__, 'click', this._cpFN)
+    $.unbind(this.__RUN__, 'click', this._runFN)
+  }
+
+  watch() {
+    switch (name) {
+      case 'content':
+        this.props.content = val
+        val = val
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .split('\n')
+        val = val.map(s => `<p>${s}</p>`).join('')
+        this.__CODE__.innerHTML = val
+        this.removeAttribute('content')
+        break
+
+      default:
+        break
+    }
+  }
+}
+</script>
diff --git a/src/form/button.wc b/src/form/button.wc
index fae9136..40cf93b 100644
--- a/src/form/button.wc
+++ b/src/form/button.wc
@@ -11,7 +11,7 @@
   display: inline-block;
   min-width: 64px;
   height: 32px;
-  border-radius: 4px;
+  border-radius: 2px;
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
diff --git a/src/form/input.wc b/src/form/input.wc
index 5ec5dc4..6c76e0a 100644
--- a/src/form/input.wc
+++ b/src/form/input.wc
@@ -24,7 +24,7 @@ li {
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .label {
@@ -81,11 +81,11 @@ li {
   }
   .prepend {
     border-right: 1px solid nth($cp, 3);
-    border-radius: 4px 0 0 4px;
+    border-radius: 2px 0 0 2px;
   }
   .append {
     border-left: 1px solid nth($cp, 3);
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 2px 2px 0;
   }
   &[prepend] .prepend,
   &[append] .append {
@@ -109,7 +109,7 @@ li {
   max-height: 200px;
   min-height: 46px;
   padding: 8px 0;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #fff;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
diff --git a/src/form/number.wc b/src/form/number.wc
index 0957953..744509b 100644
--- a/src/form/number.wc
+++ b/src/form/number.wc
@@ -17,7 +17,7 @@
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .label {
@@ -44,11 +44,11 @@
     cursor: pointer;
 
     &:first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: 2px 0 0 2px;
       border-right: 1px solid nth($cp, 3);
     }
     &:last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 2px 2px 0;
       border-left: 1px solid nth($cp, 3);
     }
 
diff --git a/src/form/select.wc b/src/form/select.wc
index 705f29a..88a8c66 100644
--- a/src/form/select.wc
+++ b/src/form/select.wc
@@ -19,7 +19,7 @@
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .label {
   display: flex;
@@ -70,11 +70,11 @@
   }
   .prepend {
     border-right: 1px solid nth($cp, 3);
-    border-radius: 4px 0 0 4px;
+    border-radius: 2px 0 0 2px;
   }
   .append {
     border-left: 1px solid nth($cp, 3);
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 2px 2px 0;
   }
   &[prepend] .prepend,
   &[append] .append {
@@ -99,7 +99,7 @@
   height: auto;
   max-height: 200px;
   padding: 8px 0;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #fff;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   cursor: default;
diff --git a/src/layer/index.wc b/src/layer/index.wc
index c91811a..c367824 100644
--- a/src/layer/index.wc
+++ b/src/layer/index.wc
@@ -42,7 +42,7 @@
   flex: 0 auto;
   position: fixed;
   z-index: 65535;
-  border-radius: 4px;
+  border-radius: 2px;
   color: #666;
   font-size: 14px;
   background: rgba(255, 255, 255, 0.7);
@@ -114,7 +114,7 @@
       align-items: center;
       width: 300px;
       padding: 0 10px !important;
-      border-radius: 4px;
+      border-radius: 2px;
       font-weight: normal;
 
       --size: 16px;
@@ -129,7 +129,7 @@
     ::slotted(&__toast.style-success) {
       border: 1px solid #b3e19d;
       background: #f0f9eb;
-      color: nth($ct, 1);
+      color: nth($cg, 2);
     }
     ::slotted(&__toast.style-warn) {
       border: 1px solid #faebb4;
@@ -160,7 +160,7 @@
       padding: 0 10px;
       margin: 0 5px;
       border: 1px solid nth($cp, 3);
-      border-radius: 4px;
+      border-radius: 2px;
       white-space: nowrap;
       background: #fff;
       font-size: inherit;
diff --git a/src/neditor/index.wc b/src/neditor/index.wc
index 6ca0a2a..c17069c 100644
--- a/src/neditor/index.wc
+++ b/src/neditor/index.wc
@@ -38,7 +38,7 @@
   min-width: 200px;
   min-height: 100px;
   max-height: 360px;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 table {
diff --git a/src/pager/index.wc b/src/pager/index.wc
index 0ab27e6..1017b3f 100644
--- a/src/pager/index.wc
+++ b/src/pager/index.wc
@@ -31,7 +31,7 @@
     margin: 0 3px;
     background: nth($cp, 1);
     border: 0;
-    border-radius: 4px;
+    border-radius: 2px;
     outline: none;
     font-size: inherit;
     color: inherit;
diff --git a/src/picker/date.wc b/src/picker/date.wc
index 111f19d..5584910 100644
--- a/src/picker/date.wc
+++ b/src/picker/date.wc
@@ -34,7 +34,7 @@
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .input {
@@ -61,7 +61,7 @@
     padding: 0 10px;
     font-size: 14px;
     border-right: 1px solid nth($cp, 3);
-    border-radius: 4px 0 0 4px;
+    border-radius: 2px 0 0 2px;
     background: nth($cp, 1);
   }
 
@@ -94,7 +94,7 @@
   width: 216px;
   height: auto;
   padding: 8px 10px;
-  border-radius: 4px;
+  border-radius: 2px;
   font-size: 12px;
   text-align: center;
   background: #fff;
@@ -199,7 +199,7 @@
     background: #fffbed;
     color: nth($co, 2);
     border: 1px solid nth($co, 1);
-    border-radius: 4px;
+    border-radius: 2px;
   }
 
   &.show {
diff --git a/src/scroll/index.wc b/src/scroll/index.wc
index 4dfa052..83ac9cd 100644
--- a/src/scroll/index.wc
+++ b/src/scroll/index.wc
@@ -25,15 +25,19 @@
 .is-vertical {
   visibility: hidden;
   position: absolute;
+  display: flex;
+  justify-content: flex-end;
   z-index: 10240;
   opacity: 0;
+  user-select: none;
   transition: opacity 0.3s linear, visibility 0.3s linear;
 
   .thumb {
     display: block;
-    border-radius: 3px;
+    border-radius: 5px;
     background: rgba(44, 47, 53, 0.25);
     cursor: default;
+    transition: width 0.1s linear, height 0.1s linear;
 
     &:hover {
       background: rgba(44, 47, 53, 0.5);
@@ -42,14 +46,19 @@
 }
 
 .is-horizontal {
+  flex-direction: column;
   left: 0;
   bottom: 1px;
   width: 100%;
-  height: 6px;
+  height: 10px;
 
   .thumb {
     width: 0;
     height: 6px;
+
+    &:hover {
+      height: 10px;
+    }
   }
 }
 
@@ -57,12 +66,16 @@
 .is-vertical {
   top: 0;
   right: 1px;
-  width: 6px;
+  width: 10px;
   height: 100%;
 
   .thumb {
     width: 6px;
     height: 0;
+
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -73,6 +86,17 @@
     opacity: 1;
   }
 }
+
+:host([axis='x']) {
+  .is-vertical {
+    display: none;
+  }
+}
+:host([axis='y']) {
+  .is-horizontal {
+    display: none;
+  }
+}
 </style>
 
 <script>
@@ -82,7 +106,9 @@ const IS_FF = !!window.sidebar
 
 /*  */
 export default class Scroll {
-  props = {}
+  props = {
+    axis: 'xy' // 滚动方向, 默认x轴和y轴都可以滚动
+  }
   __init__() {
     /* render */
     this.__BOX__ = this.root.children[1]
@@ -296,5 +322,13 @@ export default class Scroll {
     $.unbind(this.__BOX__, 'mouseenter', this._initFn)
     $.unbind(this.__BOX__, 'wheel', this._wheelFn)
   }
+
+  watch() {
+    switch (name) {
+      case 'axis':
+        this.props.axis = val
+        break
+    }
+  }
 }
 </script>