移除template组件标签,统一使用<anot-xx>自定义标签来声明

src/js/anot-touch.js

@@ -3367,6 +3367,7 @@ const _Anot = (function() {
         (attr.specified && !rnoCollect.test(name)) ||
         specifiedVars.includes(name)
       ) {
+        elem.removeAttribute(name)
         if (name.indexOf(ronattr) === 0) {
           name = attr.value.slice(6)
           ret[name] = elem[attr.value]
@@ -3386,7 +3387,6 @@ const _Anot = (function() {
           } else {
             ret[camelizeName] = parseData(attr.value)
           }
-          elem.removeAttribute(name)
         }
       }
     }
@@ -3902,17 +3902,9 @@ const _Anot = (function() {
           globalHooks.componentWillMount.call(null, vmodel)
 
           var slots = null
-          var isTemplate = true
 
-          if (elem.content) {
-            if (elem.content.firstElementChild) {
-              slots = parseSlot(elem.content.children)
-            }
-          } else {
-            isTemplate = false
-            if (elem.firstElementChild) {
-              slots = parseSlot(elem.children)
-            }
+          if (elem.firstElementChild) {
+            slots = parseSlot(elem.children)
           }
 
           Anot.clearHTML(elem)
@@ -3924,27 +3916,6 @@ const _Anot = (function() {
 
           elem.innerHTML = html
 
-          if (isTemplate) {
-            // 组件所使用的标签是template,所以必须要要用子元素替换掉
-            var child = elem.content.firstElementChild
-            var nullComponent = DOC.createComment('empty component')
-            elem.parentNode.replaceChild(child || nullComponent, elem)
-
-            // 空组件直接跳出
-            if (!child) {
-              return
-            }
-
-            child.msResolved = 1
-            var cssText = elem.style.cssText
-            var className = elem.className
-            elem = host.element = child
-            elem.style && (elem.style.cssText += ';' + cssText)
-            if (className) {
-              Anot(elem).addClass(className)
-            }
-          }
-
           hideProperty(vmodel, '$elem', elem)
 
           Anot.fireDom(elem, 'datasetchanged', {
@@ -4013,9 +3984,6 @@ const _Anot = (function() {
   function isWidget(el) {
     //如果是组件,则返回组件的名字
     var name = el.nodeName.toLowerCase()
-    if (name === 'template' && el.getAttribute('name')) {
-      return el.getAttribute('name')
-    }
     if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
       return RegExp.$1
     }

src/js/anot-touch.shim.js

@@ -3382,6 +3382,7 @@
         (attr.specified && !rnoCollect.test(name)) ||
         specifiedVars.includes(name)
       ) {
+        elem.removeAttribute(name)
         if (name.indexOf(ronattr) === 0) {
           name = attr.value.slice(6)
           ret[name] = elem[attr.value]
@@ -3401,7 +3402,6 @@
           } else {
             ret[camelizeName] = parseData(attr.value)
           }
-          elem.removeAttribute(name)
         }
       }
     }
@@ -3917,17 +3917,9 @@
           globalHooks.componentWillMount.call(null, vmodel)
 
           var slots = null
-          var isTemplate = true
 
-          if (elem.content) {
-            if (elem.content.firstElementChild) {
-              slots = parseSlot(elem.content.children)
-            }
-          } else {
-            isTemplate = false
-            if (elem.firstElementChild) {
-              slots = parseSlot(elem.children)
-            }
+          if (elem.firstElementChild) {
+            slots = parseSlot(elem.children)
           }
 
           Anot.clearHTML(elem)
@@ -3939,27 +3931,6 @@
 
           elem.innerHTML = html
 
-          if (isTemplate) {
-            // 组件所使用的标签是template,所以必须要要用子元素替换掉
-            var child = elem.content.firstElementChild
-            var nullComponent = DOC.createComment('empty component')
-            elem.parentNode.replaceChild(child || nullComponent, elem)
-
-            // 空组件直接跳出
-            if (!child) {
-              return
-            }
-
-            child.msResolved = 1
-            var cssText = elem.style.cssText
-            var className = elem.className
-            elem = host.element = child
-            elem.style && (elem.style.cssText += ';' + cssText)
-            if (className) {
-              Anot(elem).addClass(className)
-            }
-          }
-
           hideProperty(vmodel, '$elem', elem)
 
           Anot.fireDom(elem, 'datasetchanged', {
@@ -4028,9 +3999,6 @@
   function isWidget(el) {
     //如果是组件,则返回组件的名字
     var name = el.nodeName.toLowerCase()
-    if (name === 'template' && el.getAttribute('name')) {
-      return el.getAttribute('name')
-    }
     if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
       return RegExp.$1
     }

src/js/anot.js

@@ -3367,6 +3367,7 @@ const _Anot = (function() {
         (attr.specified && !rnoCollect.test(name)) ||
         specifiedVars.includes(name)
       ) {
+        elem.removeAttribute(name)
         if (name.indexOf(ronattr) === 0) {
           name = attr.value.slice(6)
           ret[name] = elem[attr.value]
@@ -3386,7 +3387,6 @@ const _Anot = (function() {
           } else {
             ret[camelizeName] = parseData(attr.value)
           }
-          elem.removeAttribute(name)
         }
       }
     }
@@ -3902,17 +3902,9 @@ const _Anot = (function() {
           globalHooks.componentWillMount.call(null, vmodel)
 
           var slots = null
-          var isTemplate = true
 
-          if (elem.content) {
-            if (elem.content.firstElementChild) {
-              slots = parseSlot(elem.content.children)
-            }
-          } else {
-            isTemplate = false
-            if (elem.firstElementChild) {
-              slots = parseSlot(elem.children)
-            }
+          if (elem.firstElementChild) {
+            slots = parseSlot(elem.children)
           }
 
           Anot.clearHTML(elem)
@@ -3924,27 +3916,6 @@ const _Anot = (function() {
 
           elem.innerHTML = html
 
-          if (isTemplate) {
-            // 组件所使用的标签是template,所以必须要要用子元素替换掉
-            var child = elem.content.firstElementChild
-            var nullComponent = DOC.createComment('empty component')
-            elem.parentNode.replaceChild(child || nullComponent, elem)
-
-            // 空组件直接跳出
-            if (!child) {
-              return
-            }
-
-            child.msResolved = 1
-            var cssText = elem.style.cssText
-            var className = elem.className
-            elem = host.element = child
-            elem.style && (elem.style.cssText += ';' + cssText)
-            if (className) {
-              Anot(elem).addClass(className)
-            }
-          }
-
           hideProperty(vmodel, '$elem', elem)
 
           Anot.fireDom(elem, 'datasetchanged', {
@@ -4013,9 +3984,6 @@ const _Anot = (function() {
   function isWidget(el) {
     //如果是组件,则返回组件的名字
     var name = el.nodeName.toLowerCase()
-    if (name === 'template' && el.getAttribute('name')) {
-      return el.getAttribute('name')
-    }
     if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
       return RegExp.$1
     }

src/js/anot.shim.js

@@ -3382,6 +3382,7 @@
         (attr.specified && !rnoCollect.test(name)) ||
         specifiedVars.includes(name)
       ) {
+        elem.removeAttribute(name)
         if (name.indexOf(ronattr) === 0) {
           name = attr.value.slice(6)
           ret[name] = elem[attr.value]
@@ -3401,7 +3402,6 @@
           } else {
             ret[camelizeName] = parseData(attr.value)
           }
-          elem.removeAttribute(name)
         }
       }
     }
@@ -3917,17 +3917,9 @@
           globalHooks.componentWillMount.call(null, vmodel)
 
           var slots = null
-          var isTemplate = true
 
-          if (elem.content) {
-            if (elem.content.firstElementChild) {
-              slots = parseSlot(elem.content.children)
-            }
-          } else {
-            isTemplate = false
-            if (elem.firstElementChild) {
-              slots = parseSlot(elem.children)
-            }
+          if (elem.firstElementChild) {
+            slots = parseSlot(elem.children)
           }
 
           Anot.clearHTML(elem)
@@ -3939,27 +3931,6 @@
 
           elem.innerHTML = html
 
-          if (isTemplate) {
-            // 组件所使用的标签是template,所以必须要要用子元素替换掉
-            var child = elem.content.firstElementChild
-            var nullComponent = DOC.createComment('empty component')
-            elem.parentNode.replaceChild(child || nullComponent, elem)
-
-            // 空组件直接跳出
-            if (!child) {
-              return
-            }
-
-            child.msResolved = 1
-            var cssText = elem.style.cssText
-            var className = elem.className
-            elem = host.element = child
-            elem.style && (elem.style.cssText += ';' + cssText)
-            if (className) {
-              Anot(elem).addClass(className)
-            }
-          }
-
           hideProperty(vmodel, '$elem', elem)
 
           Anot.fireDom(elem, 'datasetchanged', {
@@ -4028,9 +3999,6 @@
   function isWidget(el) {
     //如果是组件,则返回组件的名字
     var name = el.nodeName.toLowerCase()
-    if (name === 'template' && el.getAttribute('name')) {
-      return el.getAttribute('name')
-    }
     if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
       return RegExp.$1
     }

src/js/datepicker/index.js

@@ -123,78 +123,80 @@ Anot.ui.datepicker = '1.0.0'
 
 export default Anot.component('datepicker', {
   render: function() {
-    return `<div
-      class="do-datepicker do-fn-noselect"
-      :class="{{props.size}}"
-      :css="{width: props.width, height: props.height, 'line-height': props.height + 'px'}"
-      :click="cancelBubble">
+    return `
+    <label class="date-input">
+      <input
+        class="input"
+        type="text"
+        readonly
+        :duplex="value"
+        :focus="onFocus"
+        :css="{'border-radius': props.radius}"
+        :attr-placeholder="props.placeholder || '请选择日期'"
+        :attr-disabled="disabled">
+      <i class="do-icon-calendar icon"></i>
+    </label>
 
-      <label class="date-input">
-        <input
-          class="input"
-          type="text"
-          readonly
-          :duplex="value"
-          :focus="onFocus"
-          :css="{'border-radius': props.radius}"
-          :attr-placeholder="props.placeholder || '请选择日期'"
-          :attr-disabled="disabled">
-        <i class="do-icon-calendar icon"></i>
-      </label>
+    <dl
+      class="calendar-box"
+      :if="showCalendar">
 
-      <dl
-        class="calendar-box"
-        :if="showCalendar">
-
-        <dt class="contrl">
-          <a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
-          <a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
-          <a class="do-icon-right next-month" :click="turn(0, 1)"></a>
-          <a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
-          <span 
-            title="双击回到今天"
-            :dblclick="back2today"
-            :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
-        </dt>
-        <dd class="table">
-          <section class="thead">
-            <span class="td">日</span>
-            <span class="td">一</span>
-            <span class="td">二</span>
-            <span class="td">三</span>
-            <span class="td">四</span>
-            <span class="td">五</span>
-            <span class="td">六</span>
-          </section>
-          <section class="tr do-fn-cl">
-            <span class="td"
-              :class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
-              :repeat="calendar.list"
-              :click="pick(el)"
-              :text="el.day"></span>
-          </section>
-        </dd>
-        <dd class="time" :if="props.showTime">
-          <label>
-            <input type="text" :duplex-number="calendar.hour"> 时
-          </label>
-          <label>
-            <input type="text" :duplex-number="calendar.minute"> 分
-          </label>
-          <label>
-            <input type="text" :duplex-number="calendar.second"> 秒
-          </label>
-          <a href="javascript:;" class="now" :click="now">现在</a>
-        </dd>
-        <dt class="confirm">
-          <a :click="close" class="cancel">取消</a>
-          <a :click="onConfirm" class="ok">确定</a>
-        </dt>
-        <dd class="tips" :if="tips" :text="tips"></dd>
-      </dl>
-    </div>`
+      <dt class="contrl">
+        <a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
+        <a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
+        <a class="do-icon-right next-month" :click="turn(0, 1)"></a>
+        <a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
+        <span 
+          title="双击回到今天"
+          :dblclick="back2today"
+          :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
+      </dt>
+      <dd class="table">
+        <section class="thead">
+          <span class="td">日</span>
+          <span class="td">一</span>
+          <span class="td">二</span>
+          <span class="td">三</span>
+          <span class="td">四</span>
+          <span class="td">五</span>
+          <span class="td">六</span>
+        </section>
+        <section class="tr do-fn-cl">
+          <span class="td"
+            :class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
+            :repeat="calendar.list"
+            :click="pick(el)"
+            :text="el.day"></span>
+        </section>
+      </dd>
+      <dd class="time" :if="props.showTime">
+        <label>
+          <input type="text" :duplex-number="calendar.hour"> 时
+        </label>
+        <label>
+          <input type="text" :duplex-number="calendar.minute"> 分
+        </label>
+        <label>
+          <input type="text" :duplex-number="calendar.second"> 秒
+        </label>
+        <a href="javascript:;" class="now" :click="now">现在</a>
+      </dd>
+      <dt class="confirm">
+        <a :click="close" class="cancel">取消</a>
+        <a :click="onConfirm" class="ok">确定</a>
+      </dt>
+      <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'

src/js/datepicker/style.scss

@@ -7,7 +7,7 @@
  */
 @import "var.scss";
 
-.do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
+.do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
 
   &.mini {width:155px;height:30px;line-height:30px;}
   &.medium {width:175px;height:35px;line-height:35px;}

src/js/meditor/index.js

@@ -264,10 +264,20 @@ class MEObject {
 
 Anot.component('meditor', {
   __init__: function(props, state, next) {
+    this.classList.add('do-meditor')
+    this.classList.add('do-meditor__font')
+
+    this.setAttribute(':visible', 'editorVisible')
+    this.setAttribute(':css', '{height: height}')
+    this.setAttribute(':class', '{fullscreen: fullscreen, preview: preview}')
     if (props.hasOwnProperty('$show')) {
       state.editorVisible = props.$show
       delete props.$show
     }
+    if (props.height && props.height > 180) {
+      state.height = props.height
+      delete props.height
+    }
     next()
   },
   render: function() {
@@ -276,23 +286,18 @@ Anot.component('meditor', {
     delete this.toolbar
 
     return `
-    <div 
-      class="do-meditor do-meditor__font" 
-      :visible="editorVisible"
-      :class="{fullscreen: fullscreen, preview: preview}">
-      <div class="tool-bar do-fn-noselect">${toolbar}</div>
-      <textarea 
-        ref="editor"
-        class="editor-body" 
-        spellcheck="false" 
-        :attr="{disabled: disabled}"
-        :duplex="plainTxt"></textarea>
-      <content
-        ref="preview"
-        class="md-preview do-marked-theme" 
-        :visible="preview" 
-        :html="htmlTxt"></content>
-    </div>
+    <div class="tool-bar do-fn-noselect">${toolbar}</div>
+    <textarea 
+      ref="editor"
+      class="editor-body" 
+      spellcheck="false" 
+      :attr="{disabled: disabled}"
+      :duplex="plainTxt"></textarea>
+    <content
+      ref="preview"
+      class="md-preview do-marked-theme" 
+      :visible="preview" 
+      :html="htmlTxt"></content>
     `
   },
   componentDidMount: function(vm, elem) {
@@ -360,6 +365,7 @@ Anot.component('meditor', {
     }
   },
   state: {
+    height: 180,
     disabled: false, //禁用编辑器
     fullscreen: false, //是否全屏
     preview: true, //是否显示预览

src/js/pager/index.js

@@ -87,11 +87,14 @@ const tmpls = {
   jumper: `<div class="input-box">前往
       <input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
     </div>`,
-  slot: `<slot name="extra" />`
+  slot: ''
 }
 
 export default Anot.component('pager', {
   __init__: function(props, state, next) {
+    this.classList.add('do-pager')
+    this.classList.add('do-fn-noselect')
+    this.setAttribute(':class', "{{classList.join(' ')}}")
     props.theme = +props.theme || 1
     if (props.simpleMode) {
       props.theme = 1
@@ -138,18 +141,13 @@ export default Anot.component('pager', {
     layout = layout.map(it => {
       if (it === 'slot') {
         if (slots && slots.extra) {
-          return slots.extra
+          return slots.extra[0]
         }
       } else {
         return tmpls[it] || ''
       }
     })
-    return `
-    <div
-      class="do-pager do-fn-noselect"
-      :class="{{classList.join(' ')}}">
-      ${layout.join('\n')}
-    </div>`
+    return layout.join('\n')
   },
   componentWillMount: function() {
     const { currPage, totalPage, props } = this

src/js/pager/main.scss

@@ -8,7 +8,7 @@
 
 @import "var.scss";
 
-.do-pager {height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);
+.do-pager {display:block;height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);
 
   &.mini {line-height:30px;
     .button,.page {min-width:30px;height:30px}

src/js/tree/index.js

@@ -41,41 +41,40 @@ export default Anot.component('tree', {
       return null
     }
     return `
-    <ul class="do-tree" :if="list.size()">
-      <li :repeat="list" :class="{open: el.open, dir: el[props.children]}">
-        <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"
-          :class="{'do-icon-get': el.__checked__}"
-          :if="multiCheck"
-          :click="__check(el, null, $event)"></span>
-        <span
-          :click="__select(el)"
-          :class="{active: el[props.id] === currItem}"
-          :text="el[props.label]"></span>
-        <template
-          name="tree"
-          :attr="{
-            'multi-check': multiCheck,
-            list: el[props.children],
-            '@onActive': props.onActive,
-            '@onPick': __check,
-            id: props.id,
-            label: props.label,
-            parent: props.parent,
-            children: props.children,
-          }"></template>
-      </li>
-    </ul>
+    <section class="do-tree__item" :repeat="list" :class="{open: el.open, dir: el[props.children]}">
+      <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"
+        :class="{'do-icon-get': el.__checked__}"
+        :if="multiCheck"
+        :click="__check(el, null, $event)"></span>
+      <span
+        :click="__select(el)"
+        :class="{active: el[props.id] === currItem}"
+        :text="el[props.label]"></span>
+      <anot-tree
+        :attr="{
+          'multi-check': multiCheck,
+          list: el[props.children],
+          '@onActive': props.onActive,
+          '@onPick': __check,
+          id: props.id,
+          label: props.label,
+          parent: props.parent,
+          children: props.children,
+        }"></anot-tree>
+    </section>
     `
   },
   __init__: function(props, state, next) {
+    this.classList.add('do-tree')
+    this.setAttribute(':if', 'list.size()')
     props.id = props.id || 'id'
     props.label = props.label || 'label'
     props.parent = props.parent || 'parent'

src/js/tree/main.scss

@@ -9,19 +9,22 @@
 @import '../../css/var.scss';
 
 
-.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
+.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:inline-block;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
   
-  ul {width:100%;height:auto;}
-  li {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis}
+  &__item {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;}
+    .do-tree {display:none;margin-left:20px;}
 
-  li em,
-  li span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
-  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: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;
+    em,span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
+    em {float:left;padding:0 5px;font-size:20px;}
+
+    span {
+
+      &:hover {color:nth($cgr, 2);}
+      &.active {color:nth($cgr, 3);font-weight:bold;}
+      &.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;}
+    }
   }
+  &__item.open>.do-tree {display:block;}
+  
 }