优化组件机制;更新datepicker,form,router,pager适配新版组件机制

src/css/reset-basic.scss

@@ -42,7 +42,7 @@ a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
 }
 body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
 code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
-[anot],[\:repeat],[\:if] {visibility:hidden;}
+[anot],[\:repeat],[\:if],[is-widget] {visibility:hidden;}
 
 .do-fn-cl { *zoom: 1; }
 .do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} 

src/js/anot-touch.js

@@ -3495,6 +3495,7 @@ const _Anot = (function() {
             var widget = isWidget(elem)
 
             if (widget) {
+              elem.setAttribute('is-widget', '')
               elem.removeAttribute(':if')
               elem.removeAttribute(':if-loop')
               componentQueue.push({
@@ -3833,7 +3834,7 @@ const _Anot = (function() {
           var state = {}
           var props = getOptionsFromTag(elem, host.vmodels)
           var $id = props.uuid || generateID(widget)
-          var slots = null
+          var slots = { __extra__: [] }
 
           // 对象组件的子父vm关系, 只存最顶层的$components对象中,
           while (parentVm.$up && parentVm.$up.__WIDGET__ === name) {
@@ -3843,6 +3844,11 @@ const _Anot = (function() {
           if (elem.childNodes.length) {
             slots = parseSlot(elem.childNodes, host.vmodels)
           }
+          var txtContent = slots.__extra__.join('')
+          delete slots.__extra__
+          elem.text = function() {
+            return txtContent
+          }
 
           if (props.hasOwnProperty(':disabled')) {
             var disabledKey = props[':disabled']
@@ -3932,6 +3938,7 @@ const _Anot = (function() {
 
           delete props.uuid
           delete props.name
+          delete props.isWidget
 
           hooks.props = hooks.props || {}
           hooks.state = hooks.state || {}
@@ -3943,6 +3950,8 @@ const _Anot = (function() {
 
           hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
             __READY__ = true
+
+            delete elem.text
           })
 
           if (!__READY__) {
@@ -4002,12 +4011,6 @@ const _Anot = (function() {
 
           elem.innerHTML = html
 
-          if (slots && slots.__extra__.length) {
-            try {
-              elem.appendChild.apply(elem, slots.__extra__)
-            } catch (err) {}
-          }
-
           hideProperty(vmodel, '$elem', elem)
           elem.__VM__ = vmodel
 
@@ -4031,6 +4034,7 @@ const _Anot = (function() {
             if (dependencies === 0) {
               var timer = setTimeout(function() {
                 clearTimeout(timer)
+                elem.removeAttribute('is-widget')
                 componentDidMount.call(vmodel)
               }, children ? Math.max(children * 17, 100) : 17)
 

src/js/anot-touch.shim.js

@@ -3510,6 +3510,7 @@
             var widget = isWidget(elem)
 
             if (widget) {
+              elem.setAttribute('is-widget', '')
               elem.removeAttribute(':if')
               elem.removeAttribute(':if-loop')
               componentQueue.push({
@@ -3848,7 +3849,7 @@
           var state = {}
           var props = getOptionsFromTag(elem, host.vmodels)
           var $id = props.uuid || generateID(widget)
-          var slots = null
+          var slots = { __extra__: [] }
 
           // 对象组件的子父vm关系, 只存最顶层的$components对象中,
           while (parentVm.$up && parentVm.$up.__WIDGET__ === name) {
@@ -3858,6 +3859,11 @@
           if (elem.childNodes.length) {
             slots = parseSlot(elem.childNodes, host.vmodels)
           }
+          var txtContent = slots.__extra__.join('')
+          delete slots.__extra__
+          elem.text = function() {
+            return txtContent
+          }
 
           if (props.hasOwnProperty(':disabled')) {
             var disabledKey = props[':disabled']
@@ -3947,6 +3953,7 @@
 
           delete props.uuid
           delete props.name
+          delete props.isWidget
 
           hooks.props = hooks.props || {}
           hooks.state = hooks.state || {}
@@ -3958,6 +3965,8 @@
 
           hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
             __READY__ = true
+
+            delete elem.text
           })
 
           if (!__READY__) {
@@ -4017,12 +4026,6 @@
 
           elem.innerHTML = html
 
-          if (slots && slots.__extra__.length) {
-            try {
-              elem.appendChild.apply(elem, slots.__extra__)
-            } catch (err) {}
-          }
-
           hideProperty(vmodel, '$elem', elem)
           elem.__VM__ = vmodel
 
@@ -4046,6 +4049,7 @@
             if (dependencies === 0) {
               var timer = setTimeout(function() {
                 clearTimeout(timer)
+                elem.removeAttribute('is-widget')
                 componentDidMount.call(vmodel)
               }, children ? Math.max(children * 17, 100) : 17)
 

src/js/anot.js

@@ -3495,6 +3495,7 @@ const _Anot = (function() {
             var widget = isWidget(elem)
 
             if (widget) {
+              elem.setAttribute('is-widget', '')
               elem.removeAttribute(':if')
               elem.removeAttribute(':if-loop')
               componentQueue.push({
@@ -3833,7 +3834,7 @@ const _Anot = (function() {
           var state = {}
           var props = getOptionsFromTag(elem, host.vmodels)
           var $id = props.uuid || generateID(widget)
-          var slots = null
+          var slots = { __extra__: [] }
 
           // 对象组件的子父vm关系, 只存最顶层的$components对象中,
           while (parentVm.$up && parentVm.$up.__WIDGET__ === name) {
@@ -3843,6 +3844,11 @@ const _Anot = (function() {
           if (elem.childNodes.length) {
             slots = parseSlot(elem.childNodes, host.vmodels)
           }
+          var txtContent = slots.__extra__.join('')
+          delete slots.__extra__
+          elem.text = function() {
+            return txtContent
+          }
 
           if (props.hasOwnProperty(':disabled')) {
             var disabledKey = props[':disabled']
@@ -3932,6 +3938,7 @@ const _Anot = (function() {
 
           delete props.uuid
           delete props.name
+          delete props.isWidget
 
           hooks.props = hooks.props || {}
           hooks.state = hooks.state || {}
@@ -3943,6 +3950,8 @@ const _Anot = (function() {
 
           hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
             __READY__ = true
+
+            delete elem.text
           })
 
           if (!__READY__) {
@@ -4002,12 +4011,6 @@ const _Anot = (function() {
 
           elem.innerHTML = html
 
-          if (slots && slots.__extra__.length) {
-            try {
-              elem.appendChild.apply(elem, slots.__extra__)
-            } catch (err) {}
-          }
-
           hideProperty(vmodel, '$elem', elem)
           elem.__VM__ = vmodel
 
@@ -4031,6 +4034,7 @@ const _Anot = (function() {
             if (dependencies === 0) {
               var timer = setTimeout(function() {
                 clearTimeout(timer)
+                elem.removeAttribute('is-widget')
                 componentDidMount.call(vmodel)
               }, children ? Math.max(children * 17, 100) : 17)
 

src/js/anot.shim.js

@@ -3510,6 +3510,7 @@
             var widget = isWidget(elem)
 
             if (widget) {
+              elem.setAttribute('is-widget', '')
               elem.removeAttribute(':if')
               elem.removeAttribute(':if-loop')
               componentQueue.push({
@@ -3848,7 +3849,7 @@
           var state = {}
           var props = getOptionsFromTag(elem, host.vmodels)
           var $id = props.uuid || generateID(widget)
-          var slots = null
+          var slots = { __extra__: [] }
 
           // 对象组件的子父vm关系, 只存最顶层的$components对象中,
           while (parentVm.$up && parentVm.$up.__WIDGET__ === name) {
@@ -3858,6 +3859,11 @@
           if (elem.childNodes.length) {
             slots = parseSlot(elem.childNodes, host.vmodels)
           }
+          var txtContent = slots.__extra__.join('')
+          delete slots.__extra__
+          elem.text = function() {
+            return txtContent
+          }
 
           if (props.hasOwnProperty(':disabled')) {
             var disabledKey = props[':disabled']
@@ -3947,6 +3953,7 @@
 
           delete props.uuid
           delete props.name
+          delete props.isWidget
 
           hooks.props = hooks.props || {}
           hooks.state = hooks.state || {}
@@ -3958,6 +3965,8 @@
 
           hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
             __READY__ = true
+
+            delete elem.text
           })
 
           if (!__READY__) {
@@ -4017,12 +4026,6 @@
 
           elem.innerHTML = html
 
-          if (slots && slots.__extra__.length) {
-            try {
-              elem.appendChild.apply(elem, slots.__extra__)
-            } catch (err) {}
-          }
-
           hideProperty(vmodel, '$elem', elem)
           elem.__VM__ = vmodel
 
@@ -4046,6 +4049,7 @@
             if (dependencies === 0) {
               var timer = setTimeout(function() {
                 clearTimeout(timer)
+                elem.removeAttribute('is-widget')
                 componentDidMount.call(vmodel)
               }, children ? Math.max(children * 17, 100) : 17)
 

src/js/datepicker/index.js

@@ -122,6 +122,87 @@ function getFirstDay(year, month, day) {
 Anot.ui.datepicker = '1.0.0'
 
 export default Anot.component('datepicker', {
+  __init__: function(props, state, next) {
+    this.classList.add('do-datepicker')
+    this.classList.add('do-fn-noselect')
+    this.classList.add(props.size || 'mini')
+    this.setAttribute(
+      ':css',
+      "{width: props.width, height: props.height, 'line-height': props.height + 'px'}"
+    )
+    this.setAttribute(':click', 'cancelBubble')
+    // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
+    if (!props.showTime && !props.format) {
+      props.format = 'Y-m-d'
+    }
+
+    //获取初始值
+    let defVal = state.value || null
+    if (!defVal) {
+      if (props.minDate) {
+        defVal = props.minDate
+      } else if (props.maxDate) {
+        defVal = props.maxDate
+      }
+    }
+    // 修正默认值, 如果不是Date对象, 则转为Date对象
+    if (defVal) {
+      if (!Date.isDate(defVal)) {
+        defVal = new Date(defVal)
+      }
+    } else {
+      defVal = new Date()
+    }
+
+    if (props.minDate) {
+      if (!Date.isDate(props.minDate)) {
+        props.minDate = new Date(props.minDate)
+      }
+      if (defVal <= props.minDate) {
+        defVal = props.minDate
+      }
+      state.min.year = props.minDate.getFullYear()
+      state.min.month = props.minDate.getMonth() + 1
+      state.min.day = props.minDate.getDate()
+    }
+
+    if (props.maxDate) {
+      if (!Date.isDate(props.maxDate)) {
+        props.maxDate = new Date(props.maxDate)
+      }
+      if (defVal >= props.maxDate) {
+        defVal = props.maxDate
+      }
+      state.max.year = props.maxDate.getFullYear()
+      state.max.month = props.maxDate.getMonth() + 1
+      state.max.day = props.maxDate.getDate()
+    }
+
+    state.last = {
+      year: defVal.getFullYear(),
+      month: defVal.getMonth() + 1,
+      day: defVal.getDate()
+    }
+    state.value = defVal.format(props.format)
+
+    state.calendar = {
+      list: [1],
+      year: defVal.getFullYear(),
+      month: defVal.getMonth() + 1,
+      day: defVal.getDate(),
+      hour: defVal.getHours(),
+      minute: defVal.getMinutes(),
+      second: defVal.getSeconds()
+    }
+    state.disabled = !!props.disabled
+
+    //移除部分属性
+    delete props.minDate
+    delete props.maxDate
+    delete props.hostPush
+    delete props.disabled
+    next()
+  },
   render: function() {
     return `
     <label class="date-input">
@@ -188,98 +269,15 @@ export default Anot.component('datepicker', {
       <dd class="tips" :if="tips" :text="tips"></dd>
     </dl>`
   },
-  __init__: function(props, state, next) {
-    this.classList.add('do-datepicker')
-    this.classList.add('do-fn-noselect')
-    this.classList.add(props.size || 'mini')
-    this.setAttribute(
-      ':css',
-      "{width: props.width, height: props.height, 'line-height': props.height + 'px'}"
-    )
-    this.setAttribute(':click', 'cancelBubble')
-    // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
-    if (!props.showTime && !props.format) {
-      props.format = 'Y-m-d'
-    }
-
-    //获取初始值
-    let defVal = props.hostPush || null
-    if (!defVal) {
-      if (props.minDate) {
-        defVal = props.minDate
-      } else if (props.maxDate) {
-        defVal = props.maxDate
-      }
-    }
-    // 修正默认值, 如果不是Date对象, 则转为Date对象
-    if (defVal) {
-      if (!Date.isDate(defVal)) {
-        defVal = new Date(defVal)
-      }
-    } else {
-      defVal = new Date()
-    }
-
-    if (props.minDate) {
-      if (!Date.isDate(props.minDate)) {
-        props.minDate = new Date(props.minDate)
-      }
-      if (defVal <= props.minDate) {
-        defVal = props.minDate
-      }
-      state.min.year = props.minDate.getFullYear()
-      state.min.month = props.minDate.getMonth() + 1
-      state.min.day = props.minDate.getDate()
-    }
-
-    if (props.maxDate) {
-      if (!Date.isDate(props.maxDate)) {
-        props.maxDate = new Date(props.maxDate)
-      }
-      if (defVal >= props.maxDate) {
-        defVal = props.maxDate
-      }
-      state.max.year = props.maxDate.getFullYear()
-      state.max.month = props.maxDate.getMonth() + 1
-      state.max.day = props.maxDate.getDate()
-    }
-
-    if (props.hostPush) {
-      state.last = {
-        year: defVal.getFullYear(),
-        month: defVal.getMonth() + 1,
-        day: defVal.getDate()
-      }
-      state.value = defVal.format(props.format)
-    }
-
-    state.calendar = {
-      list: [1],
-      year: defVal.getFullYear(),
-      month: defVal.getMonth() + 1,
-      day: defVal.getDate(),
-      hour: defVal.getHours(),
-      minute: defVal.getMinutes(),
-      second: defVal.getSeconds()
-    }
-    state.disabled = !!props.disabled
-
-    //移除部分属性
-    delete props.minDate
-    delete props.maxDate
-    delete props.hostPush
-    delete props.disabled
-    next()
-  },
   componentWillMount: function() {
     this.resetCalendarTable()
-    this.$push(this.value)
+    this.$fire('value', this.value)
   },
   componentDidMount: function() {
     if (typeof this.props.created === 'function') {
       this.props.created(this)
     }
-    document.addEventListener('click', () => {
+    Anot(document).bind('click', () => {
       this.close()
     })
   },
@@ -448,7 +446,6 @@ export default Anot.component('datepicker', {
     onConfirm: function() {
       this.updateTime()
       this.close()
-      this.$push(this.value)
       if (
         this.calendar.day > 0 &&
         typeof this.props.onDatePicked === 'function'

src/js/form/index.js

@@ -12,6 +12,7 @@ Anot.ui.form = '0.1.0'
 // 按钮
 Anot.component('button', {
   __init__(props, state, next) {
+    state.text = this.text()
     state.style = { 'border-radius': props.radius }
     this.classList.add('do-fn-noselect')
     this.classList.add('do-button')
@@ -33,7 +34,6 @@ Anot.component('button', {
     next()
   },
   render(slots) {
-    this.text = slots.__extra__.join('')
     let icon = ''
     if (this.props.icon) {
       icon = `<i class="do-button__icon do-icon-${this.props.icon}"></i>`
@@ -75,7 +75,7 @@ Anot.component('radio', {
       }
     }
 
-    state.text = this.textContent
+    state.text = this.text()
     state.checked = state.value === props.label
 
     this.classList.add('do-radio')
@@ -172,7 +172,7 @@ Anot.component('checkbox', {
       Anot.Array.ensure(state.value, props.label)
     }
 
-    state.text = this.textContent
+    state.text = this.text()
     state.checked = state.value.indexOf(props.label) > -1
 
     this.classList.add('do-checkbox')
@@ -236,7 +236,6 @@ Anot.component('checkbox', {
 // 文本输入框
 Anot.component('input', {
   __init__(props, state, next) {
-    state.text = this.textContent
     if (props.hasOwnProperty('disabled')) {
       state.disabled = true
     }

src/js/pager/index.js

@@ -145,7 +145,7 @@ export default Anot.component('pager', {
     layout = layout.map(it => {
       if (it === 'slot') {
         if (slots && slots.extra) {
-          return slots.extra[0]
+          return slots.extra.join('')
         }
       } else {
         return tmpls[it] || ''

src/js/router/index.js

@@ -239,7 +239,7 @@ Anot.component('link', {
       props.to.replace(/^[\/]+|[\/]+$|\s+/g, ''),
       {}
     ).regexp
-    props.label = props.label || this.textContent
+    props.label = props.label || this.text()
     if (mode === 'hash') {
       state.link = '#!' + props.to
     } else {