优化数组的操作;优化组件:value传递;完成多选框组件

src/js/anot-touch.js

@@ -1981,17 +1981,18 @@ const _Anot = (function() {
       $emit.call(this.$up, this.$pathname)
     },
     set: function(index, val) {
-      if (index >>> 0 === index && this[index] !== val) {
+      index = index >>> 0
-        if (index > this.length) {
+      if (index > this.length) {
-          throw Error(index + 'set方法的第一个参数不能大于原数组长度')
+        throw Error(index + 'set方法的第一个参数不能大于原数组长度')
-        }
+      }
+      if (this[index] !== val) {
         $emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
         this.splice(index, 1, val)
       }
     },
     contains: function(el) {
       //判定是否包含
-      return this.indexOf(el) !== -1
+      return this.indexOf(el) > -1
     },
     ensure: function(el) {
       if (!this.contains(el)) {
@@ -2008,11 +2009,9 @@ const _Anot = (function() {
       return this.removeAt(this.indexOf(el))
     },
     removeAt: function(index) {
+      index = index >>> 0
       //移除指定索引上的元素
-      if (index >>> 0 === index) {
+      return this.splice(index, 1)
-        return this.splice(index, 1)
-      }
-      return []
     },
     size: function() {
       //取得数组长度，这个函数可以同步视图，length不能
@@ -3747,7 +3746,7 @@ const _Anot = (function() {
   var componentQueue = []
   var widgetList = []
   var componentHooks = {
-    construct: noop,
+    __init__: noop,
     componentWillMount: noop,
     componentDidMount: noop,
     childComponentDidMount: noop,
@@ -3834,10 +3833,20 @@ const _Anot = (function() {
             parentVm.$watch(valueKey, function(val) {
               parentVm.$fire('component!' + $id + '!value', val)
             })
-            hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+            if (Array.isArray(state.value)) {
-            hooks.watch.value.push(function(val) {
+              hooks.watch['value.length'] = hooks.watch['value.length']
-              parentVm[valueKey] = val
+                ? [hooks.watch['value.length']]
-            })
+                : []
+              hooks.watch['value.length'].push(function(val) {
+                parentVm[valueKey] = this.value.$model
+              })
+            } else {
+              hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+              hooks.watch.value.push(function(val) {
+                parentVm[valueKey] = val
+              })
+            }
+
             delete props[':value']
           }
 
@@ -3850,7 +3859,15 @@ const _Anot = (function() {
           Object.assign(hooks.props, props)
           Object.assign(hooks.state, state)
 
-          hooks.construct.call(elem, hooks.props, hooks.state)
+          var __READY__ = false
+
+          hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
+            __READY__ = true
+          })
+
+          if (!__READY__) {
+            return
+          }
 
           hooks.$id = $id
 
@@ -3863,7 +3880,7 @@ const _Anot = (function() {
             render
           } = hooks
 
-          delete hooks.construct
+          delete hooks.__init__
           delete hooks.componentWillMount
           delete hooks.componentDidMount
           delete hooks.childComponentDidMount

src/js/anot-touch.shim.js

@@ -1996,17 +1996,18 @@
       $emit.call(this.$up, this.$pathname)
     },
     set: function(index, val) {
-      if (index >>> 0 === index && this[index] !== val) {
+      index = index >>> 0
-        if (index > this.length) {
+      if (index > this.length) {
-          throw Error(index + 'set方法的第一个参数不能大于原数组长度')
+        throw Error(index + 'set方法的第一个参数不能大于原数组长度')
-        }
+      }
+      if (this[index] !== val) {
         $emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
         this.splice(index, 1, val)
       }
     },
     contains: function(el) {
       //判定是否包含
-      return this.indexOf(el) !== -1
+      return this.indexOf(el) > -1
     },
     ensure: function(el) {
       if (!this.contains(el)) {
@@ -2023,11 +2024,9 @@
       return this.removeAt(this.indexOf(el))
     },
     removeAt: function(index) {
+      index = index >>> 0
       //移除指定索引上的元素
-      if (index >>> 0 === index) {
+      return this.splice(index, 1)
-        return this.splice(index, 1)
-      }
-      return []
     },
     size: function() {
       //取得数组长度，这个函数可以同步视图，length不能
@@ -3762,7 +3761,7 @@
   var componentQueue = []
   var widgetList = []
   var componentHooks = {
-    construct: noop,
+    __init__: noop,
     componentWillMount: noop,
     componentDidMount: noop,
     childComponentDidMount: noop,
@@ -3849,10 +3848,20 @@
             parentVm.$watch(valueKey, function(val) {
               parentVm.$fire('component!' + $id + '!value', val)
             })
-            hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+            if (Array.isArray(state.value)) {
-            hooks.watch.value.push(function(val) {
+              hooks.watch['value.length'] = hooks.watch['value.length']
-              parentVm[valueKey] = val
+                ? [hooks.watch['value.length']]
-            })
+                : []
+              hooks.watch['value.length'].push(function(val) {
+                parentVm[valueKey] = this.value.$model
+              })
+            } else {
+              hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+              hooks.watch.value.push(function(val) {
+                parentVm[valueKey] = val
+              })
+            }
+
             delete props[':value']
           }
 
@@ -3865,7 +3874,15 @@
           Object.assign(hooks.props, props)
           Object.assign(hooks.state, state)
 
-          hooks.construct.call(elem, hooks.props, hooks.state)
+          var __READY__ = false
+
+          hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
+            __READY__ = true
+          })
+
+          if (!__READY__) {
+            return
+          }
 
           hooks.$id = $id
 
@@ -3878,7 +3895,7 @@
             render
           } = hooks
 
-          delete hooks.construct
+          delete hooks.__init__
           delete hooks.componentWillMount
           delete hooks.componentDidMount
           delete hooks.childComponentDidMount

src/js/anot.js

@@ -1981,17 +1981,18 @@ const _Anot = (function() {
       $emit.call(this.$up, this.$pathname)
     },
     set: function(index, val) {
-      if (index >>> 0 === index && this[index] !== val) {
+      index = index >>> 0
-        if (index > this.length) {
+      if (index > this.length) {
-          throw Error(index + 'set方法的第一个参数不能大于原数组长度')
+        throw Error(index + 'set方法的第一个参数不能大于原数组长度')
-        }
+      }
+      if (this[index] !== val) {
         $emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
         this.splice(index, 1, val)
       }
     },
     contains: function(el) {
       //判定是否包含
-      return this.indexOf(el) !== -1
+      return this.indexOf(el) > -1
     },
     ensure: function(el) {
       if (!this.contains(el)) {
@@ -2008,11 +2009,9 @@ const _Anot = (function() {
       return this.removeAt(this.indexOf(el))
     },
     removeAt: function(index) {
+      index = index >>> 0
       //移除指定索引上的元素
-      if (index >>> 0 === index) {
+      return this.splice(index, 1)
-        return this.splice(index, 1)
-      }
-      return []
     },
     size: function() {
       //取得数组长度，这个函数可以同步视图，length不能
@@ -3747,7 +3746,7 @@ const _Anot = (function() {
   var componentQueue = []
   var widgetList = []
   var componentHooks = {
-    construct: noop,
+    __init__: noop,
     componentWillMount: noop,
     componentDidMount: noop,
     childComponentDidMount: noop,
@@ -3834,10 +3833,20 @@ const _Anot = (function() {
             parentVm.$watch(valueKey, function(val) {
               parentVm.$fire('component!' + $id + '!value', val)
             })
-            hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+            if (Array.isArray(state.value)) {
-            hooks.watch.value.push(function(val) {
+              hooks.watch['value.length'] = hooks.watch['value.length']
-              parentVm[valueKey] = val
+                ? [hooks.watch['value.length']]
-            })
+                : []
+              hooks.watch['value.length'].push(function(val) {
+                parentVm[valueKey] = this.value.$model
+              })
+            } else {
+              hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+              hooks.watch.value.push(function(val) {
+                parentVm[valueKey] = val
+              })
+            }
+
             delete props[':value']
           }
 
@@ -3850,7 +3859,15 @@ const _Anot = (function() {
           Object.assign(hooks.props, props)
           Object.assign(hooks.state, state)
 
-          hooks.construct.call(elem, hooks.props, hooks.state)
+          var __READY__ = false
+
+          hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
+            __READY__ = true
+          })
+
+          if (!__READY__) {
+            return
+          }
 
           hooks.$id = $id
 
@@ -3863,7 +3880,7 @@ const _Anot = (function() {
             render
           } = hooks
 
-          delete hooks.construct
+          delete hooks.__init__
           delete hooks.componentWillMount
           delete hooks.componentDidMount
           delete hooks.childComponentDidMount

src/js/anot.shim.js

@@ -1996,17 +1996,18 @@
       $emit.call(this.$up, this.$pathname)
     },
     set: function(index, val) {
-      if (index >>> 0 === index && this[index] !== val) {
+      index = index >>> 0
-        if (index > this.length) {
+      if (index > this.length) {
-          throw Error(index + 'set方法的第一个参数不能大于原数组长度')
+        throw Error(index + 'set方法的第一个参数不能大于原数组长度')
-        }
+      }
+      if (this[index] !== val) {
         $emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
         this.splice(index, 1, val)
       }
     },
     contains: function(el) {
       //判定是否包含
-      return this.indexOf(el) !== -1
+      return this.indexOf(el) > -1
     },
     ensure: function(el) {
       if (!this.contains(el)) {
@@ -2023,11 +2024,9 @@
       return this.removeAt(this.indexOf(el))
     },
     removeAt: function(index) {
+      index = index >>> 0
       //移除指定索引上的元素
-      if (index >>> 0 === index) {
+      return this.splice(index, 1)
-        return this.splice(index, 1)
-      }
-      return []
     },
     size: function() {
       //取得数组长度，这个函数可以同步视图，length不能
@@ -3762,7 +3761,7 @@
   var componentQueue = []
   var widgetList = []
   var componentHooks = {
-    construct: noop,
+    __init__: noop,
     componentWillMount: noop,
     componentDidMount: noop,
     childComponentDidMount: noop,
@@ -3849,10 +3848,20 @@
             parentVm.$watch(valueKey, function(val) {
               parentVm.$fire('component!' + $id + '!value', val)
             })
-            hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+            if (Array.isArray(state.value)) {
-            hooks.watch.value.push(function(val) {
+              hooks.watch['value.length'] = hooks.watch['value.length']
-              parentVm[valueKey] = val
+                ? [hooks.watch['value.length']]
-            })
+                : []
+              hooks.watch['value.length'].push(function(val) {
+                parentVm[valueKey] = this.value.$model
+              })
+            } else {
+              hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
+              hooks.watch.value.push(function(val) {
+                parentVm[valueKey] = val
+              })
+            }
+
             delete props[':value']
           }
 
@@ -3865,7 +3874,15 @@
           Object.assign(hooks.props, props)
           Object.assign(hooks.state, state)
 
-          hooks.construct.call(elem, hooks.props, hooks.state)
+          var __READY__ = false
+
+          hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
+            __READY__ = true
+          })
+
+          if (!__READY__) {
+            return
+          }
 
           hooks.$id = $id
 
@@ -3878,7 +3895,7 @@
             render
           } = hooks
 
-          delete hooks.construct
+          delete hooks.__init__
           delete hooks.componentWillMount
           delete hooks.componentDidMount
           delete hooks.childComponentDidMount

src/js/datepicker/index.js

@@ -194,7 +194,7 @@ export default Anot.component('datepicker', {
       </dl>
     </div>`
   },
-  construct: function(props, state) {
+  __init__: function(props, state, next) {
     // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
     if (!props.showTime && !props.format) {
       props.format = 'Y-m-d'
@@ -267,6 +267,7 @@ export default Anot.component('datepicker', {
     delete props.maxDate
     delete props.hostPush
     delete props.disabled
+    next()
   },
   componentWillMount: function() {
     this.resetCalendarTable()

src/js/form/index.js

@@ -11,16 +11,16 @@ const log = console.log
 Anot.ui.form = '0.1.0'
 // 按钮
 Anot.component('button', {
-  construct(props, state) {
+  __init__(props, state, next) {
     state.text = this.textContent
     state.style = { 'border-radius': props.radius }
     this.classList.add('do-fn-noselect')
     this.classList.add('do-button')
+    this.classList.add(props.color || 'grey')
     this.setAttribute(':click', 'onClick')
     this.setAttribute(':class', '{disabled: disabled}')
     this.setAttribute(':css', 'style')
 
-    this.classList.add(props.color || 'grey')
     if (props.size) {
       this.classList.add(props.size)
     }
@@ -30,6 +30,8 @@ Anot.component('button', {
     delete props.disabled
     delete props.color
     delete props.size
+
+    next()
   },
   render() {
     let icon = ''
@@ -63,7 +65,7 @@ Anot.component('button', {
 
 // 单选按钮
 Anot.component('radio', {
-  construct(props, state) {
+  __init__(props, state, next) {
     state.text = this.textContent
     state.checked = state.value === props.label
     if (props.hasOwnProperty('disabled')) {
@@ -71,15 +73,14 @@ Anot.component('radio', {
     }
     this.classList.add('do-radio')
     this.classList.add('do-fn-noselect')
-
+    this.classList.add(props.color || 'grey')
-    if (!state.disabled) {
-      this.classList.add(props.color || 'grey')
-    }
     this.setAttribute(':class', '{disabled: disabled, checked: checked}')
     this.setAttribute(':click', 'onClick')
 
     delete props.disabled
     delete props.color
+
+    next()
   },
   render() {
     return `
@@ -113,21 +114,20 @@ Anot.component('radio', {
 
 // 开关
 Anot.component('switch', {
-  construct(props, state) {
+  __init__(props, state, next) {
     if (props.hasOwnProperty('disabled')) {
       state.disabled = true
     }
 
     this.classList.add('do-switch')
     this.classList.add('do-fn-noselect')
-    if (!state.disabled) {
+    this.classList.add(props.color || 'grey')
-      this.classList.add(props.color || 'grey')
-    }
     this.setAttribute(':class', '{disabled: disabled, checked: value}')
     this.setAttribute(':click', 'onClick')
 
     delete props.disabled
     delete props.color
+    next()
   },
   render() {
     return `
@@ -148,4 +148,62 @@ Anot.component('switch', {
   }
 })
 
+// 多选
+Anot.component('checkbox', {
+  __init__(props, state, next) {
+    if (!Array.isArray(state.value)) {
+      this.parentNode.removeChild(this)
+      Anot.error('多选框的传入值必须一个数组', TypeError)
+    }
+    state.text = this.textContent
+    state.checked = state.value.indexOf(props.label) > -1
+    if (props.hasOwnProperty('disabled')) {
+      state.disabled = true
+    }
+
+    this.classList.add('do-checkbox')
+    this.classList.add('do-fn-noselect')
+    this.classList.add(props.color || 'grey')
+    this.setAttribute(':class', '{disabled: disabled, checked: checked}')
+    this.setAttribute(':click', 'onClick')
+
+    delete props.disabled
+    delete props.color
+    next()
+  },
+  render() {
+    return `
+      <span class="do-checkbox__box">
+        <i class="do-icon-get" :visible="checked"></i>
+      </span>
+      <span class="do-checkbox__text" :text="text"></span>
+    `
+  },
+  state: {
+    value: [],
+    text: '',
+    checked: false,
+    disabled: false
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) {
+        return
+      }
+      let { label } = this.props
+      let list = this.value.$model
+      for (let i in list) {
+        if (list[i] === label) {
+          this.checked = false
+          this.value.removeAt.call(this.value, i)
+          return
+        }
+      }
+      this.checked = true
+      this.value.push(label)
+      // this.value = !this.value
+    }
+  }
+})
+
 export default Anot

src/js/form/style.scss

@@ -55,65 +55,56 @@
 
 .do-radio {position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
 
-  &.disabled {cursor:not-allowed;}
 
-  &__box {float:left;width:20px;height:20px;margin:5px;border:1px solid nth($cgr, 1);border-radius:50%;
+  &__box {float:left;width:20px;height:20px;margin:5px;border:1px solid nth($cgr, 1);border-radius:50%;}
-    
+  &.checked &__box::after {display:block;width:14px;height:14px;margin:2px;border-radius:50%;content:""}  
-  }
-  &.checked &__box::after {display:block;width:14px;height:14px;margin:2px;border-radius:50%;content:""}
-
-  &__text {color:nth($cgr, 1);}
-  
 
   &.teal &__box  {border-color:nth($ct, 1);
     &::after {background:nth($ct, 1);}
   }
-  &.teal &__text {color:nth($ct, 1);}
+  &.teal {color:nth($ct, 1);}
 
   &.green &__box  {border-color:nth($cg, 1);
     &::after {background:nth($cg, 1);}
   }
-  &.green &__text {color:nth($cg, 1);}
+  &.green {color:nth($cg, 1);}
 
   &.blue &__box {border-color:nth($cb, 1);
     &::after {background:nth($cb, 1);}
   }
-  &.blue &__text {color:nth($cb, 1);}
+  &.blue {color:nth($cb, 1);}
 
   &.purple &__box {border-color:nth($cpp, 1);
     &::after {background:nth($cpp, 1);}
   }
-  &.purple &__text {color:nth($cpp, 1);}
+  &.purple {color:nth($cpp, 1);}
 
   &.red &__box  {border-color:nth($cr, 1);
     &::after {background:nth($cr, 1);}
   }
-  &.red &__text {color:nth($cr, 1);}
+  &.red {color:nth($cr, 1);}
 
   &.orange &__box  {border-color:nth($co, 1);
     &::after {background:nth($co, 1);}
   }
-  &.orange &__text {color:nth($co, 1);}
+  &.orange {color:nth($co, 1);}
 
   &.plain &__box  {border-color:nth($cp, 3);
     &::after {background:nth($cp, 3);}
   }
-  &.plain &__text {color:nth($cp, 3);}
+  &.plain {color:nth($cp, 3);}
 
   &.grey &__box  {border-color:nth($cgr, 1);
     &::after {background:nth($cgr, 1);}
   }
-  &.grey &__text {color:nth($cgr, 1);}
+  &.grey {color:nth($cgr, 1);}
 
   
-  &.disabled &__box {border-color:nth($cp, 1);
+  &.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;}
-    &::after {background:nth($cp, 1);}
+  &.disabled.checked {color:nth($cgr, 2);}
+  &.disabled &__box {border-color:nth($cp, 3);
+    &::after {background:nth($cp, 3);}
   }
-  &.disabled &__text {color:nth($cp, 1);}
-  &.disabled.checked &__text {color:nth($cgr, 1);}
-    
-
-  
 }
 
 
@@ -161,4 +152,52 @@
   }
   &.disabled &__label::before {right:7px;}
   &.disabled.checked &__label::before {left:7px;}
+}
+
+
+.do-checkbox {position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
+
+
+  &__box {float:left;width:20px;height:20px;margin:5px;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px;font-size:18px;text-align:center;
+    
+  }
+  &.checked &__box {color:#fff;font-weight:bold;}
+
+  &.grey {color:nth($cgr, 1);}
+  &.grey &__box {border-color:nth($cgr, 1);}
+  &.grey.checked &__box {background:nth($cgr, 1);}
+
+  &.teal {color:nth($ct, 1);}
+  &.teal &__box {border-color:nth($ct, 1);}
+  &.teal.checked &__box {background:nth($ct, 1);}
+
+  &.green {color:nth($cg, 1);}
+  &.green &__box {border-color:nth($cg, 1);}
+  &.green.checked &__box {background:nth($cg, 1);}
+
+  &.blue {color:nth($cb, 1);}
+  &.blue &__box {border-color:nth($cb, 1);}
+  &.blue.checked &__box {background:nth($cb, 1);}
+
+  &.purple {color:nth($cpp, 1);}
+  &.purple &__box {border-color:nth($cpp, 1);}
+  &.purple.checked &__box {background:nth($cpp, 1);}
+
+  &.orange {color:nth($co, 1);}
+  &.orange &__box {border-color:nth($co, 1);}
+  &.orange.checked &__box {background:nth($co, 1);}
+
+  &.plain {color:nth($cp, 3);}
+  &.plain &__box {border-color:nth($cp, 3);}
+  &.plain.checked &__box {background:nth($cp, 3);}
+
+  &.red {color:nth($cr, 1);}
+  &.red &__box {border-color:nth($cr, 1);}
+  &.red.checked &__box {background:nth($cr, 1);}
+    
+  &.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;}
+  &.disabled &__box {border-color:nth($cp, 3);}
+  &.disabled.checked {color:nth($cgr, 2);}
+  &.disabled.checked &__box {background:nth($cp, 3);}
+
 }

src/js/meditor/index.js

@@ -263,11 +263,12 @@ class MEObject {
 }
 
 Anot.component('meditor', {
-  construct: function(props, state) {
+  __init__: function(props, state, next) {
     if (props.hasOwnProperty('$show')) {
       state.editorVisible = props.$show
       delete props.$show
     }
+    next()
   },
   render: function() {
     let toolbar = (this.toolbar || DEFAULT_TOOLBAR).map(it => tool(it)).join('')

src/js/pager/index.js

@@ -37,7 +37,10 @@ function calculate({ currPage, maxPageShow, totalPage }) {
 }
 // 更新组件
 function update(currPage, vm) {
-  const { totalPage, props: { maxPageShow } } = vm
+  const {
+    totalPage,
+    props: { maxPageShow }
+  } = vm
   vm.currPage = vm.inputPage = currPage
   if (typeof vm.props.onPageChange === 'function') {
     vm.props.onPageChange(currPage)
@@ -88,7 +91,7 @@ const tmpls = {
 }
 
 export default Anot.component('pager', {
-  construct: function(props, state) {
+  __init__: function(props, state, next) {
     props.theme = +props.theme || 1
     if (props.simpleMode) {
       props.theme = 1
@@ -119,6 +122,7 @@ export default Anot.component('pager', {
     delete props.pageSize
     delete props.color
     delete props.size
+    next()
   },
   render: function(slots) {
     let { layout, theme, simpleMode } = this.props

src/js/router/index.js

@@ -219,7 +219,7 @@ class Router {
 }
 
 Anot.component('link', {
-  construct(props, state) {
+  __init__(props, state, next) {
     let { mode } = Anot.router.options
     if (!props.to) {
       return
@@ -231,6 +231,7 @@ Anot.component('link', {
       state.link = props.to
     }
     delete props.to
+    next()
   },
   render() {
     return '<a :attr-href="link" :text="props.label"></a>'

src/js/tree/index.js

@@ -75,7 +75,7 @@ export default Anot.component('tree', {
     </ul>
     `
   },
-  construct: function(props, state) {
+  __init__: function(props, state, next) {
     props.id = props.id || 'id'
     props.label = props.label || 'label'
     props.parent = props.parent || 'parent'
@@ -84,6 +84,7 @@ export default Anot.component('tree', {
     state.multiCheck = !!props.multiCheck
     delete props.list
     delete props.multiCheck
+    next()
   },
   componentDidMount: function() {
     this.list.forEach(it => {