删除js下的lib目录,组件与框架同级;优化组件机制;优化:attr指令

src/js/anot.shim.js

@@ -3287,10 +3287,7 @@
                 if (newVmodel.props[name].check(value)) {
                   newVmodel.props[name] = value
                 } else {
-                  Anot.error(
+                  Anot.error('props「' + name + '」类型错误!', TypeError)
-                    'props「' + name + '」类型错误!' + value,
-                    TypeError
-                  )
                 }
               } else {
                 newVmodel.props[name] = value
@@ -3436,8 +3433,8 @@
   var componentQueue = []
   var widgetList = []
   var componentHooks = {
-    construct: function(props, next) {
+    construct: function(props, state, next) {
-      next(props)
+      next(props, state)
     },
     componentWillMount: noop,
     componentDidMount: noop,
@@ -3480,14 +3477,27 @@
 
           props = Object.assign({}, vmOpts, props)
           vmOpts = void 0
+          // log(props)
+          for (var i in props) {
+            if (props[i] === '__fn__') {
+              props[i] = elem[i]
+              delete elem[i]
+            }
+          }
+
           delete props.config
           delete props.uuid
-          hooks.construct.call(elem, props, function next(val) {
+          delete props.name
-            Object.assign(hooks.props, val)
+
+          hooks.props = hooks.props || {}
+          hooks.state = hooks.state || {}
+
+          hooks.construct.call(elem, props, {}, function next(props, state) {
+            Object.assign(hooks.props, props)
+            Object.assign(hooks.state, state)
             Object.assign(componentDefinition, hooks)
           })
 
-          componentDefinition.$refs = {}
           componentDefinition.$id = $id
 
           //==========构建VM=========
@@ -3506,6 +3516,7 @@
           delete componentDefinition.componentWillUnmount
 
           var vmodel = Anot(componentDefinition)
+          vmodel.$refs = {}
 
           elem.msResolved = 1 //防止二进扫描此元素
 
@@ -3689,9 +3700,13 @@
       var obj = val
 
       if (typeof obj === 'object' && obj !== null) {
-        if (!Anot.isPlainObject(obj)) obj = obj.$model
+        if (!Anot.isPlainObject(obj)) {
+          obj = obj.$model
+        }
       } else {
-        if (!this.param) return
+        if (!this.param) {
+          return
+        }
 
         obj = {}
         obj[this.param] = val
@@ -3718,7 +3733,9 @@
         } else {
           var k = i
           //古董IE下，部分属性名字要进行映射
-          if (!W3C && propMap[k]) k = propMap[k]
+          if (!W3C && propMap[k]) {
+            k = propMap[k]
+          }
 
           if (typeof elem[boolMap[k]] === 'boolean') {
             //布尔属性必须使用el.xxx = true|false方式设值
@@ -3737,6 +3754,13 @@
           if (isInnate) {
             elem[k] = obj[i]
           } else {
+            if (typeof obj[i] === 'object') {
+              obj[i] = JSON.stringify(obj[i])
+            } else if (typeof obj[i] === 'function') {
+              var ck = Anot.filters.camelize(k)
+              elem[ck] = obj[i]
+              obj[i] = '__fn__'
+            }
             elem.setAttribute(k, obj[i])
           }
         }

src/js/console/index.js

@@ -0,0 +1,53 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2017-12-26 11:04:52
+ * @version $Id$
+ */
+
+import './style.scss'
+
+const logElem = document.createElement('div')
+logElem.className = 'do-console'
+
+const Logger = function() {
+  document.body.appendChild(logElem)
+}
+
+Logger.prototype = {
+  log: function(...args) {
+    let pre = document.createElement('pre')
+    args = args.map(it => {
+      if (Anot.isPlainObject(it)) {
+        return JSON.stringify(it)
+      } else {
+        if (Anot.type(it) === 'error') {
+          return it.stack || it
+        }
+        return it
+      }
+    })
+    pre.textContent = args.join(' ')
+    logElem.appendChild(pre)
+  },
+  error: function(...args) {
+    let pre = document.createElement('pre')
+    args = args.map(it => {
+      if (Anot.isPlainObject(it)) {
+        return JSON.stringify(it)
+      } else {
+        if (Anot.type(it) === 'error') {
+          return it.stack || it
+        }
+        return it
+      }
+    })
+    pre.className = 'error'
+    pre.textContent = args.join(' ')
+    logElem.appendChild(pre)
+  }
+}
+
+window.console = new Logger()
+
+export default window.console

src/js/console/style.scss

@@ -0,0 +1,11 @@
+@import '../css/var.scss';
+
+.do-console {
+  overflow:hidden;overflow-y:auto;position:fixed;left:0;bottom:0;z-index:65535;width:100%;height:50vh;padding:8px 5px;background:rgba(255,255,255,.9);color:#666;font-size:13px;line-height:17px;
+
+  pre {position:relative;display:block;width:100%;height:auto;padding-left:13px;word-wrap: break-word;white-space: pre-wrap;border-bottom:1px solid #ddd;
+    
+    &.error {background:#fff0f0;color:#ff6161}
+    &::before {position:absolute;left:0;top:0;content:">";color:nth($ct, 1)}
+  }
+}

src/js/lib/tree/main.js

@@ -1,128 +0,0 @@
-/**
- * 
- * @authors yutent (yutent@doui.cc)
- * @date    2017-04-14 21:04:50
- *
- */
-
-"use strict";
-
-define(['css!./main.css'], function(){
-
-    //储存版本信息
-    yua.ui.tree = '1.0.0'
-
-    var box = '<ul>{li}</ul>',
-        ul = '<ul :class="{open: {it}.open}">{li}</ul>',
-        li = '<li :class="{open: {it}.open, dir: {it}.children}">'
-            + '<em :click="$toggle({it})"></em>'
-            + '<span :click="$select({it})" :class="{active: {it}.id === currItem}" :text="{it}.name"></span>'
-            + '{child}</li>';
-    var keyPath = {};
-
-
-    function repeat(arr, name){
-        var html = ''
-        arr.forEach(function(it, i){
-            var from = name + '[' + i + ']',
-                child = '';
-            html += li.replace(/\{it\}/g, from);
-
-            if(it.children){
-                child += repeat(it.children, from +'.children')
-                child = ul.replace('{li}', child).replace('{it}', from)
-            }
-            html = html.replace(/\{child\}/, child)
-        })
-
-        return html
-    }
-
-    function format(arr){
-        var tmp = {}, farr = []
-        arr.sort(function(a, b){
-            return (a.pid === b.pid) ? (a.sort - b.sort) : (a.pid - b.pid)
-        })
-        arr.forEach(function(it){
-            tmp[it.id] = it
-            keyPath[it.id] = ''
-            var parentItem = tmp[it.pid]
-            
-            if(!parentItem){
-                return farr.push(tmp[it.id])
-            }
-            keyPath[it.id] += keyPath[parentItem.id] + parentItem.id + ','
-            parentItem.open = !!parentItem.open
-            parentItem.children = parentItem.children || []
-            parentItem.children.push(it)
-        })
-        return farr
-    }
-
-    return yua.component('tree', {
-        $template: '<div class="do-tree" :class="{{$skin}}" :html="treeHTML"></div>',
-        $init: function(vm){
-            vm.$select = function(obj){
-                vm.currItem = obj.id
-                if(vm.$onClick){
-                    vm.$onClick(obj)
-                }
-            }
-            vm.$reset = function(arr){
-                vm.treeArr.clear()
-                vm.treeHTML = ''
-
-                vm.treeArr.pushArray(format(arr))
-                vm.currItem = -1
-                var tpl = repeat(vm.treeArr.$model, 'treeArr')
-                yua.nextTick(function(){
-                    vm.treeHTML = box.replace('{li}', tpl)
-                })
-                
-            }
-            vm.$update = function(id, obj){
-                var path = keyPath[id],
-                    tmpid = null,
-                    tmpobj = null
-
-                path += id
-                path = path.split(',')
-                
-                while(tmpid = +path.shift()){
-                    if(!tmpobj){
-                        tmpobj = vm.treeArr
-                    }else{
-                        tmpobj = tmpobj.children
-                    }
-                    
-                    for(var i = 0, it; it = tmpobj[i++];){
-                        if(it.id === tmpid){
-                            tmpobj = it
-                            break
-                        }
-                    }
-                }
-                for(var j in obj){
-                    tmpobj[j] = obj[j]
-                }
-                
-            }
-        },
-        $ready: function(vm){
-            vm.$onSuccess(vm)
-        },
-        $skin: 'skin-def',
-        treeHTML: '',
-        currItem: -1,
-        treeArr: [],
-        $select: yua.noop,
-        $update: yua.noop,
-        $reset: yua.noop,
-        $onSuccess: yua.noop,
-        $onClick: yua.noop,
-        $toggle: function(obj){
-            obj.open = !obj.open
-        }
-    })
-
-})

src/js/pages/index.js

@@ -50,12 +50,12 @@ function update(currPage, vm) {
 }
 
 export default Anot.component('pages', {
-  construct: function(props, next) {
+  construct: function(props, state, next) {
     props.className =
       'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
     delete props.theme
     delete props.color
-    next(props)
+    next(props, state)
   },
   render: function() {
     return tpl

src/js/pages/main.scss

@@ -6,8 +6,7 @@
  * @version $Id$
  */
 
-@import "../../../css/var.scss";
+@import "../css/var.scss";
-
 
 .do-pages {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
     

src/js/request/index.js

@@ -6,7 +6,7 @@
  */
 
 'use strict'
-import 'lib/promise/index'
+import 'promise/index'
 import Format from './lib/format'
 
 var _request = function(url, protocol) {

src/js/request/light.js

@@ -6,7 +6,7 @@
  */
 
 'use strict'
-import 'lib/promise/index'
+import 'promise/index'
 import Format from './lib/format'
 
 var _request = function(url, protocol) {

src/js/tree/index.js

@@ -0,0 +1,152 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2017-04-14 21:04:50
+ *
+ */
+
+'use strict'
+
+import './main.scss'
+
+//储存版本信息
+Anot.ui.tree = '1.0.0'
+
+var box = '<ul>{li}</ul>',
+  ul = '<ul :class="{open: {it}.open}">{li}</ul>',
+  li =
+    '<li :class="{open: {it}.open, dir: {it}.children}">' +
+    '<em :click="toggle({it})"></em>' +
+    '<span :click="$select({it})" :class="{active: {it}.id === currItem}" :text="{it}.name"></span>' +
+    '{child}</li>'
+var keyPath = {}
+
+function repeat(arr, name) {
+  var html = ''
+  arr.forEach(function(it, i) {
+    var from = name + '[' + i + ']',
+      child = ''
+    html += li.replace(/\{it\}/g, from)
+
+    if (it.children) {
+      child += repeat(it.children, from + '.children')
+      child = ul.replace('{li}', child).replace('{it}', from)
+    }
+    html = html.replace(/\{child\}/, child)
+  })
+
+  return html
+}
+
+function format(arr) {
+  var tmp = {},
+    farr = []
+  arr.sort(function(a, b) {
+    return a.pid === b.pid ? a.sort - b.sort : a.pid - b.pid
+  })
+  arr.forEach(function(it) {
+    tmp[it.id] = it
+    keyPath[it.id] = ''
+    var parentItem = tmp[it.pid]
+
+    if (!parentItem) {
+      return farr.push(tmp[it.id])
+    }
+    keyPath[it.id] += keyPath[parentItem.id] + parentItem.id + ','
+    parentItem.open = !!parentItem.open
+    parentItem.children = parentItem.children || []
+    parentItem.children.push(it)
+  })
+  return farr
+}
+
+export default Anot.component('tree', {
+  render: function() {
+    // return '<div class="do-tree" :class="{{props.className}}" :html="treeHTML"></div>'
+    return `
+    <ul class="do-tree" :class="{{props.className}}" :if="list.size()">
+      <li :repeat="list" :class="{open: el.open, dir: el.children}">
+        <em :click="toggle(el)"></em>
+        <span :click="select(el)" :class="{active: el.id === currItem}" :text="el.name"></span>
+        <template name="tree" :attr="{list: el.children}"></template>
+      </li>
+    </ul>
+    `
+  },
+  construct: function(props, state, next) {
+    props.className = 'skin-' + (props.theme || 'def')
+    state.list = format(props.list || [])
+
+    delete props.list
+    delete props.theme
+    next(props, state)
+  },
+  componentWillMount: function() {
+    // this.$reset(this.props.arr)
+  },
+  componentDidMount: function() {
+    if (typeof this.props.created === 'function') {
+      this.props.created.call(null, this)
+    }
+  },
+  state: {
+    treeHTML: '',
+    list: [],
+    currItem: -1
+  },
+  props: {
+    className: '',
+    created: Anot.PropsTypes.isFunction(),
+    componentWillMount: Anot.PropsTypes.isFunction()
+  },
+  methods: {
+    toggle: function(obj) {
+      obj.open = !obj.open
+    },
+    select: function(obj) {
+      this.currItem = obj.id
+      console.log(obj, this.props.componentWillMount)
+      if (typeof this.props.componentWillMount === 'function') {
+        this.props.componentWillMount(obj)
+      }
+    },
+    $update: function(id, obj) {
+      var path = keyPath[id],
+        tmpid = null,
+        tmpobj = null
+
+      path += id
+      path = path.split(',')
+
+      while ((tmpid = +path.shift())) {
+        if (!tmpobj) {
+          tmpobj = this.treeArr
+        } else {
+          tmpobj = tmpobj.children
+        }
+
+        for (var i = 0, it; (it = tmpobj[i++]); ) {
+          if (it.id === tmpid) {
+            tmpobj = it
+            break
+          }
+        }
+      }
+      for (var j in obj) {
+        tmpobj[j] = obj[j]
+      }
+    },
+    $reset: function(arr) {
+      this.treeArr.clear()
+      this.treeHTML = ''
+
+      this.treeArr.pushArray(format(arr))
+      this.currItem = -1
+      console.log(this.treeArr)
+      /*      var tpl = repeat(this.treeArr.$model, 'treeArr')
+      Anot.nextTick(() => {
+        this.treeHTML = box.replace('{li}', tpl)
+      })*/
+    }
+  }
+})

src/js/tree/main.scss

@@ -6,20 +6,21 @@
  * 
  */
 
+@import '../../css/var.scss';
 
 
-.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;
+.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;font-size:13px;
 
     ul {width:100%;height:auto;}
     li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
 
     li ul {display:none;margin-left:20px;}
-    li ul.open {display:block;}
+    li.open ul {display:block;}
 
     li em,
     li span {display:block;cursor:pointer;}
     li em {float:left;padding:0 5px;color:#000;font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
-    li span:hover {color:#6bb294;}
+    li span:hover {color:nth($cgr, 2);}
     li span.active {color:#000;font-weight:bold;}
 
     &.skin-def {
@@ -27,17 +28,4 @@
         li.dir>em::before {content:"\e622";}
         li.dir.open>em::before {content:"\e8ea";}
     }
-
-    &.skin-light {
-        li>em::before {content:"\e73e";}
-        li.dir>em::before {content:"\e635";}
-        li.dir.open>em::before {content:"\e8ea";}
-    }
-
-
-    &.skin-line {
-        li>em::before {content:"\e614";}
-        li.dir>em::before {content:"\e8eb";font-weight:bold;}
-        li.dir.open>em::before {content:"\e662";}
-    }
 }