统一组件渲染完的回调为created;优化vm的mounted回调;移植tree组件

src/js/anot.shim.js

@@ -1735,6 +1735,7 @@
     hideProperty($vmodel, '$refs', {})
     hideProperty($vmodel, '$children', [])
     hideProperty($vmodel, 'hasOwnProperty', trackBy)
+    hideProperty($vmodel, '$mounted', mounted)
     if (options.watch) {
       hideProperty($vmodel, '$watch', function() {
         return $watch.apply($vmodel, arguments)
@@ -1779,7 +1780,6 @@
     }
 
     $vmodel.$active = true
-    $vmodel.mounted = mounted
 
     if (old && old.$up && old.$up.$children) {
       old.$up.$children.push($vmodel)
@@ -1930,6 +1930,7 @@
       configurable: true
     })
   }
+  Anot.hideProperty = hideProperty
 
   function toJson(val) {
     var xtype = Anot.type(val)
@@ -3610,10 +3611,10 @@
 
     if (newVmodel) {
       setTimeout(function() {
-        if (typeof newVmodel.mounted === 'function') {
+        if (typeof newVmodel.$mounted === 'function') {
-          newVmodel.mounted()
+          newVmodel.$mounted()
         }
-        delete newVmodel.mounted
+        delete newVmodel.$mounted
       })
     }
   }
@@ -3816,7 +3817,7 @@
           delete hooks.componentWillUnmount
 
           var vmodel = Anot(hooks)
-          delete vmodel.mounted
+          delete vmodel.$mounted
           host.vmodels[0].$children.push(vmodel)
 
           elem.msResolved = 1 //防止二进扫描此元素
@@ -4028,8 +4029,10 @@
           continue
         }
         // 通过属性设置回调,必须以@符号开头
-        if (typeof obj[i] === 'function' && i.indexOf('@') !== 0) {
+        if (i.indexOf('@') === 0) {
-          continue
+          if (typeof obj[i] !== 'function') {
+            continue
+          }
         }
         if (i === 'href' || i === 'src') {
           //处理IE67自动转义的问题

src/js/console/index.js

@@ -1,53 +0,0 @@
-/**
- *
- * @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

@@ -1,11 +0,0 @@
-@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/datepicker/index.js

@@ -275,8 +275,8 @@ export default Anot.component('datepicker', {
     this.resetCalendarTable()
   },
   componentDidMount: function() {
-    if (typeof this.props.onCreated === 'function') {
+    if (typeof this.props.created === 'function') {
-      this.props.onCreated(this)
+      this.props.created(this)
     }
 
     document.addEventListener('click', () => {
@@ -309,7 +309,7 @@ export default Anot.component('datepicker', {
     width: null,
     size: 'mini', //默认规格,mini, medium, large
     format: '', // 日期显示格式
-    onCreated: Anot.PropsTypes.isFunction(),
+    created: Anot.PropsTypes.isFunction(),
     onDatePicked: Anot.PropsTypes.isFunction()
   },
   skip: ['max', 'min', 'last', 'timer'],

src/js/marked/theme.scss

@@ -9,52 +9,52 @@
 
 .do-marked-theme {position:relative;
 
-    .md-head {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
+  .md-head {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
-    h1.md-head {padding-left:0;}
+  h1.md-head {padding-left:0;}
-    .md-head a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
+  .md-head a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
-    .md-head a:hover {text-decoration:none;}
+  .md-head a:hover {text-decoration:none;}
-    h1.md-head a {padding-left:0;color:#000;}
+  h1.md-head a {padding-left:0;color:#000;}
-    h2.md-head a {color:#000;}
+  h2.md-head a {color:#000;}
 
-    h1.md-head {margin:0 0 30px;font-size:25px;}
+  h1.md-head {margin:0 0 30px;font-size:25px;}
-    h2.md-head {margin:20px 0;font-size:23px;}
+  h2.md-head {margin:20px 0;font-size:23px;}
-    h3.md-head {margin:20px 0 15px;font-size:20px;}
+  h3.md-head {margin:20px 0 15px;font-size:20px;}
-    h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
+  h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
-    h2:before,
+  h2:before,
-    h3:before,
+  h3:before,
-    h4:before,
+  h4:before,
-    h5:before,
+  h5:before,
-    h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
+  h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
 
-    a {text-decoration:none;}
+  a {text-decoration:none;}
-    a:hover {text-decoration:underline;}
+  a:hover {text-decoration:underline;}
-    p {margin:15px 0;}
+  p {margin:15px 0;}
-    blockquote.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
+  blockquote.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
-    blockquote.md-quote p {margin:0;}
+  blockquote.md-quote p {margin:0;}
-    /* 提醒文本 */
+  /* 提醒文本 */
-    .md-warn,.md-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
+  .md-warn,.md-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
-    
+
-        p {margin:0!important;}
+    p {margin:0!important;}
-        &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
+    &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
+  }
+  .md-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
+
+    &::before {color:nth($ct, 3);content:"\e657";}
+  }
+  table {width:100%;
+    thead tr {height:45px;line-height:45px;background:#f7f7f7}
+    thead th {padding:0 8px;border:0;}
+    tbody tr {height:43px;line-height:42px;@include ts(all, .3s);
+      &:hover {background:#ecf6fd}
     }
-    .md-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
+    tbody td {padding:0 8px;border-bottom:1px solid #e9e9e9}
+  }
 
-        &::before {color:nth($ct, 3);content:"\e657";}
+  hr {margin:30px 0;border-bottom:0;}
-    }
+  ol {margin-left:2em;list-style:decimal outside none;}
-    table {width:100%;
+  ul {margin-left:2em;list-style:disc outside none;}
-        thead tr {height:45px;line-height:45px;background:#f7f7f7}
+  li ol {margin-left:2em;}
-        thead th {padding:0 8px;border:0;}
+  li ul {margin-left:2em;list-style-type: circle;}
-        tbody tr {height:43px;line-height:42px;@include ts(all, .3s);
+  li ol ul,
-            &:hover {background:#ecf6fd}
+  li ul ul {list-style-type: square;}
-        }
-        tbody td {padding:0 8px;border-bottom:1px solid #e9e9e9}
-    }
-
-    hr {margin:30px 0;border-bottom:0;}
-    ol {margin-left:2em;list-style:decimal outside none;}
-    ul {margin-left:2em;list-style:disc outside none;}
-    li ol {margin-left:2em;}
-    li ul {margin-left:2em;list-style-type: circle;}
-    li ol ul,
-    li ul ul {list-style-type: square;}
 }

src/js/meditor/index.js

@@ -342,8 +342,8 @@ Anot.component('meditor', {
       preview.scrollTop = syncTop
     })
     //编辑器成功加载的回调
-    if (typeof this.props.onCreated === 'function') {
+    if (typeof this.props.created === 'function') {
-      this.props.onCreated(new MEObject(this))
+      this.props.created(new MEObject(this))
     }
   },
   watch: {
@@ -369,7 +369,7 @@ Anot.component('meditor', {
   },
   props: {
     safelyCompile: true,
-    onSuccess: Anot.PropsTypes.isFunction(),
+    created: Anot.PropsTypes.isFunction(),
     onUpdate: Anot.PropsTypes.isFunction(),
     onFullscreen: Anot.PropsTypes.isFunction()
   },

src/js/pager/index.js

@@ -155,8 +155,8 @@ export default Anot.component('pager', {
     )
   },
   componentDidMount: function() {
-    if (typeof this.props.onCreated === 'function') {
+    if (typeof this.props.created === 'function') {
-      this.props.onCreated(this)
+      this.props.created(this)
     }
   },
   state: {
@@ -178,7 +178,7 @@ export default Anot.component('pager', {
     simpleMode: !1,
     radius: 3,
     onPageChange: Anot.PropsTypes.isFunction(),
-    onCreated: Anot.PropsTypes.isFunction()
+    created: Anot.PropsTypes.isFunction()
   },
   skip: ['classList'],
   methods: {

src/js/tree/index.js

@@ -16,11 +16,13 @@ function format(arr, { id, parent, label, children }) {
   let tmp = {}
   let farr = []
   arr.sort(function(a, b) {
-    return a.pid === b.pid ? a.sort - b.sort : a.pid - b.pid
+    return a[parent] === b[parent] ? a.sort - b.sort : a[parent] - b[parent]
   })
   arr.forEach(function(it) {
-    it.checked = !!it.checked
+    // Anot.hideProperty(it, '__checked__', !!it.__checked__)
+    // it.__checked__ = !!it.__checked__
     it.open = !!it.open
+    // console.log(it.hasOwnProperty('__checked__'), it.__checked__)
     tmp[it[id]] = it
     var parentItem = tmp[it[parent]]
 
@@ -39,16 +41,22 @@ export default Anot.component('tree', {
       return null
     }
     return `
-    <ul class="do-tree" :class="{{props.className}}" :if="list.size()">
+    <ul class="do-tree" :if="list.size()">
       <li :repeat="list" :class="{open: el.open, dir: el[props.children]}">
-        <em class="ui-font" :click="toggle(el)"></em>
+        <em 
+          :class="{
+            'do-icon-txt': !el.open && !el[props.children],
+            'do-icon-folder-close': el[props.children] && !el.open,
+            'do-icon-folder-open': el[props.children] && el.open,
+          }" 
+          :click="__toggle(el)"></em>
         <span
-          class="checkbox ui-font"
+          class="checkbox"
+          :class="{'do-icon-get': el.__checked__}"
           :if="multiCheck"
-          :class="{checked: el.checked}"
+          :click="__check(el, null, $event)"></span>
-          :click="onChecked(el)"></span>
         <span
-          :click="onSelected(el)"
+          :click="__select(el)"
           :class="{active: el[props.id] === currItem}"
           :text="el[props.label]"></span>
         <template
@@ -56,8 +64,8 @@ export default Anot.component('tree', {
           :attr="{
             'multi-check': multiCheck,
             list: el[props.children],
-            onSelected: props.onSelected,
+            '@onActive': props.onActive,
-            onChecked: onChecked,
+            '@onPick': __check,
             id: props.id,
             label: props.label,
             parent: props.parent,
@@ -68,7 +76,6 @@ export default Anot.component('tree', {
     `
   },
   construct: function(props, state) {
-    props.className = 'skin-' + (props.theme || 'def')
     props.id = props.id || 'id'
     props.label = props.label || 'label'
     props.parent = props.parent || 'parent'
@@ -76,73 +83,96 @@ export default Anot.component('tree', {
     state.list = format(props.list || [], props)
     state.multiCheck = !!props.multiCheck
     delete props.list
-    delete props.theme
     delete props.multiCheck
   },
   componentDidMount: function() {
-    if (typeof this.props.onCreated === 'function') {
+    if (typeof this.props.created === 'function') {
-      this.props.onCreated(this)
+      this.props.created(this)
     }
   },
   state: {
     list: [],
     multiCheck: false,
     currItem: -1,
-    checked: {}
+    checkedItems: {}
   },
-  skip: ['checked'],
+  skip: ['checkedItems'],
   props: {
-    className: '',
     id: '',
     label: '',
     parent: '',
     children: '',
-    onCreated: Anot.PropsTypes.isFunction(),
+    created: Anot.PropsTypes.isFunction(),
-    onSelected: Anot.PropsTypes.isFunction(),
+    onActive: Anot.PropsTypes.isFunction(),
-    onChecked: Anot.PropsTypes.isFunction()
+    onPick: Anot.PropsTypes.isFunction()
   },
   methods: {
-    toggle: function(obj) {
+    // 子目录的开关
+    __toggle: function(obj) {
+      if (!obj[this.props.children]) {
+        return
+      }
       obj.open = !obj.open
     },
-    onChecked: function(el, childChecked) {
+    // 选中条目, 并将选中的列表向上冒泡, 直到最外层将结果通过回调返回给外部
+    __check: function(el, itemsFromChild, ev) {
+      if (ev) {
+        Anot(ev.target).toggleClass('do-icon-get')
+      }
+
+      // return
       let item = null
       let arr = []
-      let { id, onChecked } = this.props
+      let vm, id, onPick, checkedItems
 
-      if (!childChecked) {
+      if (this.props) {
-        el.checked = !el.checked
+        vm = this
-        item = el.$model
+        id = this.props.id
-        this.checked[item[id]] = el.checked ? item : null
+        onPick = this.props.onPick
+        checkedItems = this.checkedItems
       } else {
-        item = el
+        vm = this.$up
-        Object.assign(this.checked, childChecked)
+        id = vm.props.id
+        onPick = vm.props.onPick
+        checkedItems = vm.checkedItems
       }
 
-      if (!this.$up) {
+      if (itemsFromChild) {
-        for (let i in this.checked) {
+        item = el
-          if (!this.checked[i]) {
+        Object.assign(checkedItems, itemsFromChild)
-            delete this.checked[i]
+      } else {
+        el.__checked__ = !el.__checked__
+        // Anot.hideProperty(el, '__checked__', !el.__checked__)
+        item = el.$model
+        checkedItems[item[id]] = el.__checked__ ? item : null
+      }
+
+      if (vm.$up) {
+        arr = checkedItems
+      } else {
+        // 冒泡到最高一层时, 将对象转为数组
+        for (let i in checkedItems) {
+          if (checkedItems[i]) {
+            arr.push(checkedItems[i])
           } else {
-            arr.push(this.checked[i])
+            delete checkedItems[i]
           }
         }
-      } else {
-        arr = this.checked
       }
-
+      if (typeof onPick === 'function') {
-      if (typeof onChecked === 'function') {
+        onPick(item, arr)
-        onChecked(item, arr)
       }
     },
-    onSelected: function(el) {
+    // 单个条目的点击选择
-      let { id, onSelected } = this.props
+    __select: function(el) {
+      let { id, onActive } = this.props
       this.currItem = el[id]
-      if (typeof onSelected === 'function') {
+      if (typeof onActive === 'function') {
-        onSelected(el.$model)
+        onActive(el.$model)
       }
     },
-    reset: function(arr) {
+    // 以给定的列表重置组件渲染
+    resetWith: function(arr) {
       this.checked = {}
       this.list.clear()
       this.list.pushArray(format(arr || []))

src/js/tree/main.scss

@@ -9,29 +9,19 @@
 @import '../../css/var.scss';
 
 
-.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;font-size:13px;color:nth($cgr, 1);
+.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
   
-  .ui-font {font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
   ul {width:100%;height:auto;}
-  li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
+  li {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis}
 
   li ul {display:none;margin-left:20px;}
   li.open>ul {display:block;}
 
   li em,
   li span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
-  li em {float:left;padding:0 5px;}
+  li em {float:left;padding:0 5px;font-size:20px;}
   li span:hover {color:nth($cgr, 2);}
   li span.active {color:nth($cgr, 3);font-weight:bold;}
-  li span.checkbox {float:left;position:relative;width:14px;height:14px;margin:7px 5px 7px 0;border:1px solid nth($cgr, 1);border-radius:3px;
+  li span.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px; font-size:20px;text-align:center;
-
-    &::after {display:block;width:12px;height:12px;line-height:12px;}
-    &.checked::after {content:"\e60f";}
-  }
-
-  &.skin-def {
-    li>em::before {content:"\e612";}
-    li.dir>em::before {content:"\e622";}
-    li.dir.open>em::before {content:"\e8ea";}
   }
 }