From f2cb1beecfc1406cbdd8c78634b8f5defaa52a22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Mon, 12 Aug 2019 21:26:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E6=B3=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build.dev.js         |   2 +-
 build.prod.js        |   2 +-
 src/form/cascader.wc | 380 +++++++++++++++++++++++++++++++++++++++++++
 src/form/select.wc   | 345 +++++++++++++++++++++++++++++++++++++--
 src/picker/date.wc   |  22 +--
 src/scroll/index.wc  |  72 +++++---
 6 files changed, 774 insertions(+), 49 deletions(-)
 create mode 100644 src/form/cascader.wc

diff --git a/build.dev.js b/build.dev.js
index b90a39f..8588ec3 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -69,7 +69,7 @@ function mkWCFile({ style, html, js }) {
   let name = ''
   let props = ''
 
-  js = js.replace(/props = (\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
+  js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
     props = m
     var attr = new Function(
       `try {
diff --git a/build.prod.js b/build.prod.js
index 0265602..42f7050 100644
--- a/build.prod.js
+++ b/build.prod.js
@@ -81,7 +81,7 @@ function mkWCFile({ style, html, js }) {
   let name = ''
   let props = ''
 
-  js = js.replace(/props = (\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
+  js = js.replace(/props = (\{\}|\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
     props = m
     var attr = new Function(
       `var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
diff --git a/src/form/cascader.wc b/src/form/cascader.wc
new file mode 100644
index 0000000..06c18f5
--- /dev/null
+++ b/src/form/cascader.wc
@@ -0,0 +1,380 @@
+<template>
+  <div class="label">
+    <slot class="prepend" name="prepend"></slot>
+    <input readonly />
+    <wc-icon class="arrow" is="left"></wc-icon>
+    <slot class="append" name="append"></slot>
+
+    <div class="opt-box"></div>
+  </div>
+</template>
+
+<style lang="scss">
+ul,
+li {
+  list-style: none;
+}
+:host {
+  overflow: hidden;
+  display: inline-block;
+  user-select: none;
+  -moz-user-select: none;
+  color: nth($cd, 2);
+  border-radius: 4px;
+}
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 64px;
+  height: 32px;
+  font-size: 14px;
+  border: 1px solid nth($cp, 3);
+  border-radius: inherit;
+  background: #fff;
+  color: inherit;
+  cursor: text;
+
+  input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 5px;
+    border: 0;
+    border-radius: inherit;
+    color: inherit;
+    font-size: inherit;
+    background: none;
+    outline: none;
+    box-shadow: none;
+    cursor: inherit;
+
+    &::placeholder {
+      color: nth($cgr, 1);
+    }
+  }
+
+  .prepend,
+  .append {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 30px;
+    padding: 0 10px;
+    background: nth($cp, 1);
+  }
+  .prepend {
+    border-right: 1px solid nth($cp, 3);
+    border-radius: 4px 0 0 4px;
+  }
+  .append {
+    border-left: 1px solid nth($cp, 3);
+    border-radius: 0 4px 4px 0;
+  }
+  &[prepend] .prepend,
+  &[append] .append {
+    display: flex;
+  }
+  /* ----- */
+  .arrow {
+    padding: 0 5px;
+    --size: 14px;
+    color: #ddd;
+    transform: rotate(-90deg);
+  }
+}
+
+.opt-box {
+  display: none;
+  position: fixed;
+  z-index: 10240;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: auto;
+  max-height: 200px;
+  min-height: 46px;
+  padding: 8px 0;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+
+  .list {
+    width: 100%;
+  }
+
+  &::after {
+    position: absolute;
+    left: 30px;
+    top: -4px;
+    width: 8px;
+    height: 8px;
+    background: #fff;
+    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
+    transform: rotate(45deg);
+    content: '';
+  }
+  &.show {
+    display: flex;
+  }
+
+  li {
+    overflow: hidden;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover,
+    &[focus] {
+      background: nth($cp, 1);
+    }
+  }
+}
+
+/* --- */
+:host([disabled]) .label {
+  background: nth($cp, 1);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+:host(:focus-within) {
+  box-shadow: 0 0 3px nth($ct, 1);
+}
+:host(:focus-within[readonly]) {
+  box-shadow: 0 0 3px nth($co, 1);
+}
+
+/* 额外样式 */
+:host([round]) {
+  border-radius: 21px;
+
+  .prepend {
+    border-radius: 21px 0 0 21px;
+  }
+  .append {
+    border-radius: 0 21px 21px 0;
+  }
+}
+
+:host([size='large']) {
+  .label {
+    height: 42px;
+    font-size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 40px;
+  }
+}
+
+:host([size='medium']) {
+  .label {
+    height: 36px;
+  }
+  .prepend,
+  .append {
+    height: 34px;
+  }
+}
+:host([size='mini']) {
+  .label {
+    height: 24px;
+    font-size: 12px;
+  }
+  .icon {
+    --size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 18px;
+  }
+}
+</style>
+
+<script>
+import '../scroll/index'
+import '../icon/index'
+import { nextTick, ebind, bind, unbind } from '../utils'
+
+function parseTree(list, key) {
+  var tmp = {}
+  var arr = []
+
+  list.sort(function(a, b) {
+    return a.parent === b.parent ? a.id - b.id : a.parent - b.parent
+  })
+
+  list.forEach(it => {
+    it.id = +it.id
+    it.parent = +it.parent
+    it.children = []
+
+    tmp[it.id] = it
+    let _p = tmp[it.parent]
+
+    if (_p) {
+      _p.children.push(it)
+    } else {
+      arr.push(it)
+    }
+  })
+  // key && (store.project[key] = tmp)
+  return arr
+}
+
+function parseOptions(list) {
+  // 最多只允许4级联动
+  var arr = Array(4)
+    .fill(null)
+    .map(_ => [])
+  var path = {}
+
+  for (let it of list) {
+    path[value] = value
+    arr[0].push({ label: it.label, value: it.value })
+
+    if (it.children && it.children.length) {
+      for (let s of it.children) {
+        path[s.value] = it.value
+      }
+    }
+    arr[1] = arr[1].concat(it.children || [])
+  }
+  for (let it of arr[1]) {
+  }
+}
+
+export default class Select {
+  props = {
+    label: '',
+    placeholder: '',
+    multi: '',
+    options: [],
+    mvidx: null, //下拉列表光标的索引ID
+    disabled: false
+  }
+
+  constructor() {
+    /* render */
+
+    this.__OUTER__ = this.root.children[1]
+    this.__PREPEND__ = this.__OUTER__.children[0]
+    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__ICO__ = this.__OUTER__.children[2]
+    this.__APPEND__ = this.__OUTER__.children[3]
+    this.__OPTG__ = this.__OUTER__.children[4]
+  }
+
+  get disabled() {
+    return this.props.disabled
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+      this.__INPUT__.setAttribute('disabled', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+      this.__INPUT__.removeAttribute('disabled')
+    }
+  }
+
+  get value() {
+    return this.__INPUT__.value
+  }
+
+  set value(val) {
+    this.__INPUT__.value = val
+  }
+
+  _mkOpt(list) {
+    var html = list
+      .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
+      .join('')
+  }
+
+  mounted() {
+    var prepend = this.__PREPEND__.assignedNodes()
+    var append = this.__APPEND__.assignedNodes()
+
+    // 相同插槽, 只允许1个
+    while (prepend.length > 1) {
+      this.removeChild(prepend.pop())
+    }
+    while (append.length > 1) {
+      this.removeChild(append.pop())
+    }
+
+    if (prepend.length && this.props.type !== 'textarea') {
+      this.__OUTER__.setAttribute('prepend', '')
+    }
+    if (append.length && this.props.type !== 'textarea') {
+      this.__OUTER__.setAttribute('append', '')
+    }
+
+    // 渲染建议列表
+    this._parseOptGroup = bind(this.__INPUT__, 'click', ev => {
+      var { options: list } = this.props
+      let { x, y, width } = this.getBoundingClientRect()
+      log(list, this.props)
+      if (list && list.length) {
+        var html = list
+          .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
+          .join('')
+        this.__OPTG__.innerHTML = html
+        this.__OPTG__.classList.toggle('show', true)
+        this.__OPTG__.style.cssText = `left:${x}px;top:${y +
+          50}px;width:${width}px;`
+      } else {
+        this.__OPTG__.classList.toggle('show', false)
+      }
+    })
+
+    this._bubbleFn = ebind(this, 'click')
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      // label和placeholder 功能相同
+      case 'label':
+      case 'placeholder':
+        this.__INPUT__.setAttribute('placeholder', val)
+        break
+
+      case 'options':
+        if (val) {
+          try {
+            this.props.options = JSON.parse(val)
+          } catch (err) {}
+        }
+        break
+
+      case 'value':
+        this.value = val
+        break
+
+      case 'readonly':
+      case 'disabled':
+        if (val === '') {
+          this[name] = true
+        }
+        break
+    }
+  }
+}
+</script>
diff --git a/src/form/select.wc b/src/form/select.wc
index 8b65fb8..f23e3c7 100644
--- a/src/form/select.wc
+++ b/src/form/select.wc
@@ -1,31 +1,356 @@
 <template>
   <div class="label">
     <slot class="prepend" name="prepend"></slot>
-    ${input}
-    <wc-icon class="icon"></wc-icon>
+    <input readonly />
+    <wc-icon class="arrow" is="left"></wc-icon>
     <slot class="append" name="append"></slot>
-
-    <div class="suggestion">
-      <ul class="list"></ul>
+    <div class="opt-box">
+      <wc-scroll>
+        <dl class="list"></dl>
+      </wc-scroll>
     </div>
   </div>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+ul,
+li {
+  list-style: none;
+}
+:host {
+  overflow: hidden;
+  display: inline-block;
+  user-select: none;
+  -moz-user-select: none;
+  color: nth($cd, 2);
+  border-radius: 4px;
+}
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 64px;
+  height: 32px;
+  font-size: 14px;
+  border: 1px solid nth($cp, 3);
+  border-radius: inherit;
+  background: #fff;
+  color: inherit;
+  cursor: text;
+
+  input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 5px;
+    border: 0;
+    border-radius: inherit;
+    color: inherit;
+    font-size: inherit;
+    background: none;
+    outline: none;
+    box-shadow: none;
+    cursor: inherit;
+
+    &::placeholder {
+      color: nth($cgr, 1);
+    }
+  }
+
+  .prepend,
+  .append {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 30px;
+    padding: 0 10px;
+    background: nth($cp, 1);
+  }
+  .prepend {
+    border-right: 1px solid nth($cp, 3);
+    border-radius: 4px 0 0 4px;
+  }
+  .append {
+    border-left: 1px solid nth($cp, 3);
+    border-radius: 0 4px 4px 0;
+  }
+  &[prepend] .prepend,
+  &[append] .append {
+    display: flex;
+  }
+  /* ----- */
+  .arrow {
+    padding: 0 5px;
+    --size: 14px;
+    color: #ddd;
+    transform: rotate(-90deg);
+  }
+}
+
+.opt-box {
+  display: none;
+  position: fixed;
+  z-index: 10240;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: auto;
+  max-height: 200px;
+  min-height: 46px;
+  padding: 8px 0;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+
+  .list {
+    width: 100%;
+  }
+
+  &::after {
+    position: absolute;
+    left: 30px;
+    top: -4px;
+    width: 8px;
+    height: 8px;
+    background: #fff;
+    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
+    transform: rotate(45deg);
+    content: '';
+  }
+  &.show {
+    display: flex;
+  }
+
+  dt,
+  dd {
+    overflow: hidden;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  dt {
+    font-size: 12px;
+    color: nth($cgr, 1);
+    cursor: default;
+  }
+
+  dd {
+    cursor: pointer;
+
+    &:hover,
+    &[focus] {
+      background: nth($cp, 1);
+    }
+    &[sub] {
+      text-indent: 1em;
+    }
+  }
+}
+
+/* --- */
+:host([disabled]) .label {
+  background: nth($cp, 1);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+:host(:focus-within) {
+  box-shadow: 0 0 3px nth($ct, 1);
+}
+:host(:focus-within[readonly]) {
+  box-shadow: 0 0 3px nth($co, 1);
+}
+
+/* 额外样式 */
+:host([round]) {
+  border-radius: 21px;
+
+  .prepend {
+    border-radius: 21px 0 0 21px;
+  }
+  .append {
+    border-radius: 0 21px 21px 0;
+  }
+}
+
+:host([size='large']) {
+  .label {
+    height: 42px;
+    font-size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 40px;
+  }
+}
+
+:host([size='medium']) {
+  .label {
+    height: 36px;
+  }
+  .prepend,
+  .append {
+    height: 34px;
+  }
+}
+:host([size='mini']) {
+  .label {
+    height: 24px;
+    font-size: 12px;
+  }
+  .icon {
+    --size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 18px;
+  }
+}
+</style>
 
 <script>
-export default Select {
+import '../scroll/index'
+import '../icon/index'
+import { nextTick, ebind, bind, unbind } from '../utils'
+
+function parseOptions(list) {
+  let html = ''
+  for (let it of list) {
+    if (it.list) {
+      html += `<dt>${it.name}</dt>`
+      for (let _ of it.list) {
+        html += `<dd sub data-value="${_.value}">${_.label}</dd>`
+      }
+    } else {
+      html += `<dd data-value="${it.value}">${it.label}</dd>`
+    }
+  }
+  return html
+}
+
+export default class Select {
   props = {
-    label: '',
     label: '',
     placeholder: '',
+    multi: '',
+    options: [],
     mvidx: null, //下拉列表光标的索引ID
-    autofocus: false,
     disabled: false
   }
 
-  constructor(){
+  constructor() {
     /* render */
+
+    this.__OUTER__ = this.root.children[1]
+    this.__PREPEND__ = this.__OUTER__.children[0]
+    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__ICO__ = this.__OUTER__.children[2]
+    this.__APPEND__ = this.__OUTER__.children[3]
+    this.__OPTG__ = this.__OUTER__.children[4]
+  }
+
+  get disabled() {
+    return this.props.disabled
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+      this.__INPUT__.setAttribute('disabled', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+      this.__INPUT__.removeAttribute('disabled')
+    }
+  }
+
+  get value() {
+    return this.__INPUT__.value
+  }
+
+  set value(val) {
+    this.__INPUT__.value = val
+  }
+
+  mounted() {
+    var prepend = this.__PREPEND__.assignedNodes()
+    var append = this.__APPEND__.assignedNodes()
+
+    // 相同插槽, 只允许1个
+    while (prepend.length > 1) {
+      this.removeChild(prepend.pop())
+    }
+    while (append.length > 1) {
+      this.removeChild(append.pop())
+    }
+
+    if (prepend.length && this.props.type !== 'textarea') {
+      this.__OUTER__.setAttribute('prepend', '')
+    }
+    if (append.length && this.props.type !== 'textarea') {
+      this.__OUTER__.setAttribute('append', '')
+    }
+
+    // 渲染建议列表
+    this._parseOptGroup = bind(this.__INPUT__, 'click', ev => {
+      var { options: list } = this.props
+      let { x, y, width } = this.getBoundingClientRect()
+      log(list, this.props)
+      if (list && list.length) {
+        this.__OPTG__.firstElementChild.firstElementChild.innerHTML = parseOptions(
+          list
+        )
+        this.__OPTG__.classList.toggle('show', true)
+        this.__OPTG__.style.cssText = `left:${x}px;top:${y +
+          50}px;width:${width}px;`
+      } else {
+        this.__OPTG__.classList.toggle('show', false)
+      }
+    })
+
+    this._bubbleFn = ebind(this, 'click')
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      // label和placeholder 功能相同
+      case 'label':
+      case 'placeholder':
+        this.__INPUT__.setAttribute('placeholder', val)
+        break
+
+      case 'options':
+        if (val) {
+          try {
+            this.props.options = JSON.parse(val)
+          } catch (err) {}
+        }
+        break
+
+      case 'value':
+        this.value = val
+        break
+
+      case 'readonly':
+      case 'disabled':
+        if (val === '') {
+          this[name] = true
+        }
+        break
+    }
   }
 }
 </script>
diff --git a/src/picker/date.wc b/src/picker/date.wc
index b871687..62b4b20 100644
--- a/src/picker/date.wc
+++ b/src/picker/date.wc
@@ -601,25 +601,15 @@ export default class DatePicker {
         break
 
       case 'max-date':
-        if (val) {
-          let tmp = new Date(val)
-          if (tmp.getFullYear()) {
-            this.props.max = {
-              year: tmp.getFullYear(),
-              month: tmp.getMonth(),
-              day: tmp.getDate()
-            }
-            this._renderCalendar()
-          }
-        }
-        this.removeAttribute('max-date')
-        break
-
       case 'min-date':
         if (val) {
+          let v = +val
+          if (v === v) {
+            val = v
+          }
           let tmp = new Date(val)
           if (tmp.getFullYear()) {
-            this.props.min = {
+            this.props[name.slice(0, 3)] = {
               year: tmp.getFullYear(),
               month: tmp.getMonth(),
               day: tmp.getDate()
@@ -627,7 +617,7 @@ export default class DatePicker {
             this._renderCalendar()
           }
         }
-        this.removeAttribute('min-date')
+        this.removeAttribute(name)
         break
 
       case 'value':
diff --git a/src/scroll/index.wc b/src/scroll/index.wc
index b57d45d..444f22a 100644
--- a/src/scroll/index.wc
+++ b/src/scroll/index.wc
@@ -81,9 +81,7 @@ const IS_FF = !!window.sidebar
 
 /*  */
 export default class Scroll {
-  props = {
-    v: ''
-  }
+  props = {}
   constructor() {
     /* render */
     this.__BOX__ = this.root.children[1]
@@ -91,6 +89,53 @@ export default class Scroll {
     this.__Y__ = this.root.children[3].children[0]
   }
 
+  get scrollTop() {
+    return this.__BOX__.scrollTop
+  }
+
+  set scrollTop(n) {
+    //  this.__BOX__.scrollTop
+  }
+
+  get scrollLeft() {
+    return this.__BOX__.scrollLeft
+  }
+
+  set scrollLeft(val) {
+    // this.__BOX__.scrollLeft
+  }
+
+  get scrollHeight() {
+    return this.__BOX__.scrollHeight
+  }
+
+  _fetchScrollX(moveX) {
+    var { sw, ow, xw, sh, oh, yh } = this.props
+
+    if (moveX < 0) {
+      moveX = 0
+    } else if (moveX > ow - xw) {
+      moveX = ow - xw
+    }
+    this.__BOX__.scrollLeft = (sw - ow) * (moveX / (ow - xw))
+    this.__X__.style.transform = `translateX(${moveX}px)`
+
+    return moveX
+  }
+
+  _fetchScrollY(moveY) {
+    var { sw, ow, xw, sh, oh, yh } = this.props
+
+    if (moveY < 0) {
+      moveY = 0
+    } else if (moveY > oh - yh) {
+      moveY = oh - yh
+    }
+    this.__BOX__.scrollTop = (sh - oh) * (moveY / (oh - yh))
+    this.__Y__.style.transform = `translateY(${moveY}px)`
+    return moveY
+  }
+
   mounted() {
     // 初始化滚动条的位置和长度
     this._initFn = ev => {
@@ -187,28 +232,13 @@ export default class Scroll {
       moveX,
       moveY,
       mousemoveFn = ev => {
-        var { sw, ow, xw, sh, oh, yh, thumbY, thumbX } = this.props
-
+        var { thumbY, thumbX } = this.props
         if (startX !== null) {
-          moveX = thumbX + ev.pageX - startX
-          if (moveX < 0) {
-            moveX = 0
-          } else if (moveX > ow - xw) {
-            moveX = ow - xw
-          }
-          this.__BOX__.scrollLeft = (sw - ow) * (moveX / (ow - xw))
-          this.__X__.style.transform = `translateX(${moveX}px)`
+          moveX = this._fetchScrollX(thumbX + ev.pageX - startX)
         }
 
         if (startY !== null) {
-          moveY = thumbY + ev.pageY - startY
-          if (moveY < 0) {
-            moveY = 0
-          } else if (moveY > oh - yh) {
-            moveY = oh - yh
-          }
-          this.__BOX__.scrollTop = (sh - oh) * (moveY / (oh - yh))
-          this.__Y__.style.transform = `translateY(${moveY}px)`
+          moveY = this._fetchScrollY(thumbY + ev.pageY - startY)
         }
       },
       mouseupFn = ev => {