增加公共方法模块;优化scroll;完成datepicker;优化input

build.dev.js

@@ -37,15 +37,19 @@ $cd: #62778d #526273 #425064;
 ::after{box-sizing:border-box;}
 `
 
+function fixImport(str) {
+  return str
+    .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
+    .replace(
+      /import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g,
+      'import $1 from "$2.js"'
+    )
+}
+
 function compileJs(entry, output) {
   log('编译JS: %s', chalk.green(entry))
   let buf = fs.cat(entry).toString()
-  let code = buf
+  let code = fixImport(buf)
-    .replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
-    .replace(
-      /import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
-      'import $1 from "$2.js"'
-    )
 
   fs.echo(code, output)
 }
@@ -81,16 +85,11 @@ function mkWCFile({ style, html, js }) {
       `
   })
 
-  js = js
+  js = fixImport(js)
     .replace(/class ([\w]+)/, function(s, m) {
       name = m
       return `${s} extends HTMLElement `
     })
-    .replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
-    .replace(
-      /import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
-      'import $1 from "$2.js"'
-    )
     .replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
     .replace(
       '/* render */',

build.prod.js

@@ -37,16 +37,21 @@ $cd: #62778d #526273 #425064;
 ::after{box-sizing:border-box;}
 `
 
+function fixImport(str) {
+  return str
+    .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
+    .replace(
+      /import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g,
+      'import $1 from "$2.js"'
+    )
+}
+
 const compileJs = (entry, output) => {
   let t1 = Date.now()
   let buf = fs.cat(entry).toString()
   let { code } = uglify.minify(buf)
-  code = code
+  code = fixImport(code)
-    .replace(/import"([a-z0-9\/\.\-_]*)"/g, 'import "$1.js"')
+
-    .replace(
-      /import ([\w]*) from"([a-z0-9\/\.\-_]*)"/g,
-      'import $1 from "$2.js"'
-    )
   log(
     '编译JS: %s, 耗时 %s ms',
     chalk.green(entry),
@@ -87,16 +92,11 @@ function mkWCFile({ style, html, js }) {
       `
   })
 
-  js = js
+  js = fixImport(js)
     .replace(/class ([\w]+)/, function(s, m) {
       name = m
       return `${s} extends HTMLElement `
     })
-    .replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
-    .replace(
-      /import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
-      'import $1 from "$2.js"'
-    )
     .replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
     .replace(
       '/* render */',

src/form/input.wc

@@ -6,7 +6,9 @@
     <slot class="append" name="append"></slot>
 
     <div class="suggestion">
+      <wc-scroll>
         <ul class="list"></ul>
+      </wc-scroll>
     </div>
   </div>
 </template>
@@ -17,6 +19,7 @@ li {
   list-style: none;
 }
 :host {
+  overflow: hidden;
   display: inline-block;
   user-select: none;
   -moz-user-select: none;
@@ -25,7 +28,6 @@ li {
 }
 
 .label {
-  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -94,11 +96,11 @@ li {
 
 .suggestion {
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 10240;
   left: 0;
-  top: 50px;
+  top: 0;
-  width: 100%;
+  width: 200px;
   height: auto;
   max-height: 200px;
   min-height: 46px;
@@ -108,8 +110,6 @@ li {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 
   .list {
-    overflow: hidden;
-    overflow-y: auto;
     width: 100%;
   }
 
@@ -219,7 +219,9 @@ li {
 </style>
 
 <script>
+import '../scroll/index'
 import '../icon/index'
+import { nextTick, ebind, bind, unbind } from '../utils'
 
 const IS_FIREFOX = !!window.sidebar
 const TYPES = ['text', 'textarea', 'password']
@@ -327,7 +329,9 @@ export default class Input {
     if (list && list.length) {
       ev.preventDefault()
       var step = ev.keyCode === 38 ? -1 : 1
-      var items = Array.from(this.__LIST__.firstElementChild.children)
+      var items = Array.from(
+        this.__LIST__.firstElementChild.firstElementChild.children
+      )
       if (this.props.mvidx === null) {
         this.props.mvidx = 0
       } else {
@@ -383,8 +387,8 @@ export default class Input {
 
     var { type } = this.props
 
-    // 回车事件
+    // 键盘事件
-    this._handleSubmit = ev => {
+    this._handleSubmit = ebind(this.__INPUT__, 'keydown', ev => {
       if (this.disabled || this.readonly) {
         ev.stopPropagation()
         return
@@ -404,7 +408,6 @@ export default class Input {
           return this._fetchSelect(this.props.mvidx, ev)
         }
 
-        //
         if (
           type === 'text' ||
           (type === 'textarea' && (ev.ctrlKey || ev.metaKey))
@@ -416,13 +419,15 @@ export default class Input {
           )
         }
       }
-    }
+    })
 
+    // 非textarea, 可做输入建议功能
+    if (type === 'text') {
       // 输入状态事件
-    this._handleChange = ev => {
+      this._handleChange = bind(this.__INPUT__, 'input', ev => {
         ev.preventDefault()
         this.dispatchEvent(
-        new CustomEvent('fetch-suggestions', {
+          new CustomEvent('fetch-suggest', {
             detail: {
               value: this.value,
               send: list => {
@@ -432,53 +437,47 @@ export default class Input {
             }
           })
         )
-    }
+      })
 
       // 渲染建议列表
-    this._parseSuggestion = ev => {
+      this._parseSuggestion = bind(this.__INPUT__, 'click', ev => {
         var { list } = this.props
+        let { x, y, width } = this.getBoundingClientRect()
         if (list && list.length) {
           var html = list
             .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
             .join('')
-        this.__LIST__.firstElementChild.innerHTML = html
+          this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
           this.__LIST__.classList.toggle('show', true)
+          this.__LIST__.style.cssText = `left:${x}px;top:${y +
+            50}px;width:${width}px;`
         } else {
           this.__LIST__.classList.toggle('show', false)
         }
-    }
+      })
 
-    //  失去焦点
+      this._bubbleFn = ebind(this, 'click')
-    this._handleBlur = ev => {
+
-      setTimeout(() => {
+      this._inactiveFn = bind(document, 'click', ev => {
         this.__LIST__.classList.remove('show')
-      }, 50)
+      })
-    }
 
       // 选择建议
-    this._handleSelect = ev => {
+      this._handleSelect = bind(this.__LIST__, 'click', ev => {
         if (ev.target.tagName === 'LI') {
           this._fetchSelect(ev.target.dataset.idx, ev)
         }
-    }
+      })
-
-    this.__INPUT__.addEventListener('keydown', this._handleSubmit, false)
-
-    // 非textarea, 可做输入建议功能
-    if (type === 'text') {
-      this.__INPUT__.addEventListener('input', this._handleChange, false)
-      this.__INPUT__.addEventListener('focus', this._parseSuggestion, false)
-      this.__INPUT__.addEventListener('blur', this._handleBlur, false)
-      this.__LIST__.addEventListener('click', this._handleSelect, false)
     }
   }
 
   unmount() {
-    this.__INPUT__.removeEventListener('keydown', this._handleSubmit)
+    unbind(this.__INPUT__, 'keydown', this._handleSubmit)
-    this.__INPUT__.removeEventListener('input', this._handleChange)
+    unbind(this.__INPUT__, 'input', this._handleChange)
-    this.__INPUT__.removeEventListener('focus', this._parseSuggestion)
+    unbind(this, 'click', this._bubbleFn)
-    this.__INPUT__.removeEventListener('blur', this._handleBlur)
+    unbind(document, 'click', this._inactiveFn)
-    this.__LIST__.removeEventListener('click', this._handleSelect)
+    unbind(this.__INPUT__, 'blur', this._handleBlur)
+    unbind(this.__LIST__, 'click', this._handleSelect)
   }
 
   watch(name, old, val) {

src/picker/date.wc

@@ -1,6 +1,6 @@
 <template>
   <label class="input" tabindex="0">
-    <span>ddd</span>
+    <span></span>
     <wc-icon class="icon" is="calendar"></wc-icon>
   </label>
   <div class="calendar">
@@ -21,6 +21,7 @@
       <span>六</span>
     </section>
     <section class="days"></section>
+    <div class="tips">日期超出限制</div>
   </div>
 </template>
 
@@ -41,7 +42,7 @@
   align-items: center;
   min-width: 64px;
   height: 32px;
-  font-size: 14px;
+  font-size: 13px;
   border: 1px solid nth($cp, 3);
   border-radius: inherit;
   background: #fff;
@@ -57,14 +58,10 @@
       color: nth($cgr, 1);
     }
   }
-
-  &:focus {
-    border-color: nth($ct, 1);
-  }
   /* ----- */
   .icon {
     padding: 0 5px;
-    --size: 20px;
+    --size: 16px;
   }
 }
 
@@ -74,11 +71,12 @@
   z-index: 10240;
   left: 0;
   top: 0;
-  width: 202px;
+  width: 216px;
   height: auto;
   padding: 8px 10px;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 12px;
+  text-align: center;
   background: #fff;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 
@@ -100,11 +98,13 @@
     justify-content: space-between;
     height: 30px;
     margin: 8px 0;
+    font-size: 14px;
 
     wc-icon {
       --size: 16px;
       margin: 0 3px;
       color: nth($cgr, 1);
+      cursor: pointer;
     }
     span {
       flex: 1;
@@ -113,10 +113,9 @@
   }
   .week {
     display: flex;
-    height: 27px;
+    height: 29px;
     border-bottom: 1px solid #f2f5fc;
-    text-align: center;
+    font-size: 14px;
-    font-weight: bold;
     span {
       flex: 1;
     }
@@ -125,47 +124,88 @@
   .days {
     display: flex;
     flex-wrap: wrap;
+    margin-top: 8px;
     line-height: 26px;
-    text-align: center;
 
     span {
       position: relative;
-      width: 26px;
+      width: 28px;
-      height: 26px;
+      height: 28px;
+      border: 1px solid transparent;
+      border-radius: 50%;
+
+      &:hover {
+        border-color: #f2f5fc;
+        font-size: 13px;
+      }
 
       &[weekend] {
         color: nth($ct, 1);
       }
       &[picked] {
         color: #fff;
+        border-color: #f2f5fc;
 
         &::before {
           display: block;
           position: absolute;
-          left: 0;
+          left: 3px;
-          top: 0;
+          top: 3px;
           z-index: -1;
-          width: 100%;
+          width: 20px;
-          height: 100%;
+          height: 20px;
           border-radius: 50%;
           background: nth($ct, 1);
           content: '';
         }
       }
       &[disabled] {
+        border-color: transparent;
+        font-size: 12px;
         color: nth($cp, 3);
       }
     }
   }
+
+  .tips {
+    display: none;
+    position: absolute;
+    z-index: 10241;
+    left: 25%;
+    top: 40%;
+    width: 50%;
+    height: 30px;
+    line-height: 28px;
+    background: #fffbed;
+    color: nth($co, 2);
+    border: 1px solid nth($co, 1);
+    border-radius: 4px;
+  }
+}
+
+:host(:focus-within) {
+  box-shadow: 0 0 3px nth($ct, 1);
+}
+:host(:focus-within[readonly]) {
+  box-shadow: 0 0 3px nth($co, 1);
+}
+:host([disabled]) {
+  opacity: 0.6;
+  .input {
+    cursor: not-allowed;
+    background: #f3f5fb;
+  }
 }
 </style>
 
 <script>
 import '../icon/index'
+import { nextTick, each, ebind, bind, unbind } from '../utils'
 
 const today = new Date()
 
 /**************** 公共函数 *****************/
+
 //计算日历数组
 function getCalendarTable({ year, month, max, min, last }) {
   let nums = getTotalDays(year, month)
@@ -173,7 +213,6 @@ function getCalendarTable({ year, month, max, min, last }) {
   let isLimitYM = isLimited({ max, min }, { year, month })
   let list = []
 
-  log(isLimitYM, year, month)
   for (let i = numsFixed; i <= nums; i++) {
     let day = {
       weekend: false,
@@ -210,10 +249,6 @@ function isLimited({ max, min }, { year, month }) {
       } else if (month === max.month) {
         result += '+'
       }
-      // todo next
-      // result += '+'
-    } else {
-      // return true
     }
   }
 
@@ -226,9 +261,6 @@ function isLimited({ max, min }, { year, month }) {
       } else if (month === min.month) {
         result += '-'
       }
-      // todo next
-    } else {
-      // return true
     }
   }
   return result
@@ -291,7 +323,9 @@ export default class DatePicker {
     'min-date': '',
     max: null,
     min: null,
-    calendar: null
+    calendar: null,
+    readonly: false,
+    disabled: false
   }
 
   constructor() {
@@ -301,7 +335,8 @@ export default class DatePicker {
     this.__INPUT__ = this.root.children[1]
     this.__CALENDAR__ = this.root.children[2]
     this.__CTRL__ = this.__CALENDAR__.firstElementChild
-    this.__DAYS__ = this.__CALENDAR__.lastElementChild
+    this.__DAYS__ = this.__CALENDAR__.children[2]
+    this.__TIPS__ = this.__CALENDAR__.lastElementChild
   }
 
   get value() {
@@ -313,7 +348,7 @@ export default class DatePicker {
       if (!Date.isDate(val)) {
         val = new Date(val)
         if (val.toString() === 'Invalid Date') {
-          val = new Date()
+          return
         }
       }
       this._updateValue(val)
@@ -322,10 +357,68 @@ export default class DatePicker {
       this.props.value = ''
       this.__INPUT__.firstElementChild.textContent = ''
     }
+    let { calendar, last } = this.props
+
+    if (
+      !calendar.year ||
+      (last && calendar.year !== last.year && calendar.month !== last.month)
+    ) {
+      this.props.calendar = { ...last }
+    }
     this._renderCalendar()
+    nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
   }
 
-  _updateValue(oDate) {
+  get readonly() {
+    return this.props.readonly
+  }
+
+  set readonly(val) {
+    var type = typeof val
+
+    if (val === this.props.readonly) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.readonly = true
+      this.setAttribute('readonly', '')
+    } else {
+      this.props.readonly = false
+      this.removeAttribute('readonly')
+    }
+  }
+
+  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__.removeAttribute('tabindex')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+      this.__INPUT__.setAttribute('tabindex', '0')
+    }
+  }
+
+  _tips() {
+    clearTimeout(this.timer)
+    this.__TIPS__.style.display = 'block'
+
+    this.timer = setTimeout(() => {
+      this.__TIPS__.style.display = ''
+    }, 1500)
+  }
+
+  _updateValue(oDate, needUpdateStyle) {
     this.props.last = {
       year: oDate.getFullYear(),
       month: oDate.getMonth(),
@@ -333,6 +426,18 @@ export default class DatePicker {
     }
     this.props.value = oDate.format(this.props.format)
     this.__INPUT__.firstElementChild.textContent = this.props.value
+
+    if (needUpdateStyle) {
+      each(this.__DAYS__.children, (el, i) => {
+        if (this.props.last.day === this.calendar[i].day) {
+          this.calendar[i].picked = true
+          el.setAttribute('picked', '')
+        } else {
+          this.calendar[i].picked = false
+          el.removeAttribute('picked')
+        }
+      })
+    }
   }
 
   _renderCalendar() {
@@ -361,10 +466,8 @@ export default class DatePicker {
 
     this._renderCalendar()
 
-    this.__INPUT__.addEventListener(
+    this._activeFn = bind(this.__INPUT__, 'click', ev => {
-      'click',
+      if (this.props.disabled || this.props.readonly || this.props.active) {
-      ev => {
-        if (this.props.active) {
         return
       }
       this.props.active = true
@@ -373,25 +476,20 @@ export default class DatePicker {
 
       this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
         50}px`
-      },
+    })
-      false
-    )
 
-    this.addEventListener('click', ev => ev.stopPropagation(), false)
+    this._bubbleFn = ebind(this, 'click')
-
+    this._inactiveFn = bind(document, 'click', ev => {
-    document.addEventListener(
-      'click',
-      ev => {
       this.__CALENDAR__.style.cssText = ''
       this.props.active = false
-      },
+    })
-      false
-    )
 
-    this.__CTRL__.addEventListener(
+    this._ctrlFn = bind(this.__CTRL__, 'click', ev => {
-      'click',
+      let {
-      ev => {
+        calendar: { year, month },
-        let { year, month } = this.props.calendar
+        max,
+        min
+      } = this.props
       if (ev.target.tagName === 'WC-ICON') {
         let act = ev.target.is
         // log(ev.target, act)
@@ -417,29 +515,42 @@ export default class DatePicker {
             year++
             break
         }
+        if (isLimited({ max, min }, { year, month }) === true) {
+          return this._tips()
+        }
         this.props.calendar.month = month
         this.props.calendar.year = year
         this._renderCalendar()
       }
-      },
+    })
-      false
-    )
 
-    this.__DAYS__.addEventListener(
+    this._pickFn = bind(this.__DAYS__, 'click', ev => {
-      'click',
-      ev => {
       if (ev.target.tagName === 'SPAN') {
+        let { calendar, last } = this.props
         let item = this.calendar[ev.target.dataset.idx]
-          log(item)
+        if (
-          if (item.disabled) {
+          item.disabled ||
+          (last &&
+            calendar.year === last.year &&
+            calendar.month === last.month &&
+            item.day === last.day)
+        ) {
           return
         }
 
-          item.selected = true
+        this._updateValue(item._, true)
+        nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
+        this._inactiveFn()
       }
-      },
+    })
-      false
+  }
-    )
+
+  unmount() {
+    unbind(this.__INPUT__, 'click', this._activeFn)
+    unbind(this, 'click', this._bubbleFn)
+    unbind(document, 'click', this._inactiveFn)
+    unbind(this.__CTRL__, 'click', this._ctrlFn)
+    unbind(this.__DAYS__, 'click', this._pickFn)
   }
 
   watch(name, old, val) {
@@ -485,19 +596,12 @@ export default class DatePicker {
 
       case 'value':
         this.value = val
-
-        if (!this.props.calendar.year) {
-          this.props.calendar = {
-            year: this.props.pick.getFullYear(),
-            month: this.props.pick.getMonth()
-          }
-        }
-        this._renderCalendar()
         break
 
+      case 'readonly':
       case 'disabled':
         if (val === '') {
-          this.disabled = true
+          this[name] = true
         }
         break
     }

src/scroll/index.wc

@@ -9,6 +9,7 @@
   overflow: hidden;
   position: relative;
   display: flex;
+  width: 100%;
 
   .container {
     overflow: hidden;
@@ -32,6 +33,7 @@
     display: block;
     border-radius: 3px;
     background: rgba(44, 47, 53, 0.25);
+    cursor: default;
 
     &:hover {
       background: rgba(44, 47, 53, 0.5);

src/utils.js

@@ -0,0 +1,87 @@
+/**
+ * 公共方法库
+ * @author yutent<yutent@doui.cc>
+ * @date 2019/08/08 10:47:55
+ */
+
+function noop() {}
+
+/**
+ * 异步回调
+ */
+export const nextTick = (function() {
+  let queue = []
+  function callback() {
+    let n = queue.length
+    for (let i = 0; i < n; i++) {
+      queue[i]()
+    }
+    queue = queue.slice(n)
+  }
+
+  let node = document.createTextNode('<!-- -->')
+  new MutationObserver(callback).observe(node, { characterData: true })
+
+  let bool = false
+  return function(fn) {
+    queue.push(fn)
+    bool = !bool
+    node.data = bool
+  }
+})()
+
+/**
+ * 对象/数组遍历
+ * 支持跳出
+ */
+export const each = function(obj, fn) {
+  if (obj) {
+    if (Array.isArray(obj)) {
+      for (let i = 0, it; (it = obj[i++]); ) {
+        if (fn(it, i - 1) === false) {
+          break
+        }
+      }
+    } else {
+      for (let i in obj) {
+        if (obj.hasOwnProperty(i) && fn(obj[i], i) === false) {
+          break
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 事件绑定
+ */
+export const bind = function(dom, type, fn = noop, phase = false) {
+  let events = type.split(',')
+  each(events, function(t) {
+    t = t.trim()
+    dom.addEventListener(t, fn, phase)
+  })
+  return fn
+}
+
+/**
+ * 事件绑定(默认不冒泡)
+ */
+export const ebind = function(dom, type, fn, phase) {
+  function fn2(ev) {
+    ev.stopPropagation()
+    fn && fn(ev)
+  }
+  return bind(dom, type, fn2, phase)
+}
+
+/**
+ * 解除事件绑定
+ */
+export const unbind = function(dom, type, fn = noop, phase = false) {
+  let events = type.split(',')
+  each(events, function(t) {
+    t = t.trim()
+    dom.removeEventListener(t, fn, phase)
+  })
+}