This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

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

old
宇天 2018-06-14 19:57:49 +08:00
parent 5ecec460cb
commit 6ad4c35194
12 changed files with 159 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/js/anot-touch.js
View File

@ -3367,6 +3367,7 @@ const _Anot = (function() {
(attr.specified && !rnoCollect.test(name)) || (attr.specified && !rnoCollect.test(name)) ||
specifiedVars.includes(name) specifiedVars.includes(name)
) { ) {
elem.removeAttribute(name)
if (name.indexOf(ronattr) === 0) { if (name.indexOf(ronattr) === 0) {
name = attr.value.slice(6) name = attr.value.slice(6)
ret[name] = elem[attr.value] ret[name] = elem[attr.value]
@ -3386,7 +3387,6 @@ const _Anot = (function() {
} else { } else {
ret[camelizeName] = parseData(attr.value) ret[camelizeName] = parseData(attr.value)
} }
elem.removeAttribute(name)
} }
} }
} }
@ -3902,17 +3902,9 @@ const _Anot = (function() {
globalHooks.componentWillMount.call(null, vmodel) globalHooks.componentWillMount.call(null, vmodel)
var slots = null var slots = null
var isTemplate = true
if (elem.content) { if (elem.firstElementChild) {
if (elem.content.firstElementChild) { slots = parseSlot(elem.children)
slots = parseSlot(elem.content.children)
}
} else {
isTemplate = false
if (elem.firstElementChild) {
slots = parseSlot(elem.children)
}
} }
Anot.clearHTML(elem) Anot.clearHTML(elem)
@ -3924,27 +3916,6 @@ const _Anot = (function() {
elem.innerHTML = html 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) hideProperty(vmodel, '$elem', elem)
Anot.fireDom(elem, 'datasetchanged', { Anot.fireDom(elem, 'datasetchanged', {
@ -4013,9 +3984,6 @@ const _Anot = (function() {
function isWidget(el) { function isWidget(el) {
//如果是组件,则返回组件的名字 //如果是组件,则返回组件的名字
var name = el.nodeName.toLowerCase() var name = el.nodeName.toLowerCase()
if (name === 'template' && el.getAttribute('name')) {
return el.getAttribute('name')
}
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) { if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
return RegExp.$1 return RegExp.$1
} }

38
src/js/anot-touch.shim.js
View File

@ -3382,6 +3382,7 @@
(attr.specified && !rnoCollect.test(name)) || (attr.specified && !rnoCollect.test(name)) ||
specifiedVars.includes(name) specifiedVars.includes(name)
) { ) {
elem.removeAttribute(name)
if (name.indexOf(ronattr) === 0) { if (name.indexOf(ronattr) === 0) {
name = attr.value.slice(6) name = attr.value.slice(6)
ret[name] = elem[attr.value] ret[name] = elem[attr.value]
@ -3401,7 +3402,6 @@
} else { } else {
ret[camelizeName] = parseData(attr.value) ret[camelizeName] = parseData(attr.value)
} }
elem.removeAttribute(name)
} }
} }
} }
@ -3917,17 +3917,9 @@
globalHooks.componentWillMount.call(null, vmodel) globalHooks.componentWillMount.call(null, vmodel)
var slots = null var slots = null
var isTemplate = true
if (elem.content) { if (elem.firstElementChild) {
if (elem.content.firstElementChild) { slots = parseSlot(elem.children)
slots = parseSlot(elem.content.children)
}
} else {
isTemplate = false
if (elem.firstElementChild) {
slots = parseSlot(elem.children)
}
} }
Anot.clearHTML(elem) Anot.clearHTML(elem)
@ -3939,27 +3931,6 @@
elem.innerHTML = html 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) hideProperty(vmodel, '$elem', elem)
Anot.fireDom(elem, 'datasetchanged', { Anot.fireDom(elem, 'datasetchanged', {
@ -4028,9 +3999,6 @@
function isWidget(el) { function isWidget(el) {
//如果是组件,则返回组件的名字 //如果是组件,则返回组件的名字
var name = el.nodeName.toLowerCase() var name = el.nodeName.toLowerCase()
if (name === 'template' && el.getAttribute('name')) {
return el.getAttribute('name')
}
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) { if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
return RegExp.$1 return RegExp.$1
} }

38
src/js/anot.js
View File

@ -3367,6 +3367,7 @@ const _Anot = (function() {
(attr.specified && !rnoCollect.test(name)) || (attr.specified && !rnoCollect.test(name)) ||
specifiedVars.includes(name) specifiedVars.includes(name)
) { ) {
elem.removeAttribute(name)
if (name.indexOf(ronattr) === 0) { if (name.indexOf(ronattr) === 0) {
name = attr.value.slice(6) name = attr.value.slice(6)
ret[name] = elem[attr.value] ret[name] = elem[attr.value]
@ -3386,7 +3387,6 @@ const _Anot = (function() {
} else { } else {
ret[camelizeName] = parseData(attr.value) ret[camelizeName] = parseData(attr.value)
} }
elem.removeAttribute(name)
} }
} }
} }
@ -3902,17 +3902,9 @@ const _Anot = (function() {
globalHooks.componentWillMount.call(null, vmodel) globalHooks.componentWillMount.call(null, vmodel)
var slots = null var slots = null
var isTemplate = true
if (elem.content) { if (elem.firstElementChild) {
if (elem.content.firstElementChild) { slots = parseSlot(elem.children)
slots = parseSlot(elem.content.children)
}
} else {
isTemplate = false
if (elem.firstElementChild) {
slots = parseSlot(elem.children)
}
} }
Anot.clearHTML(elem) Anot.clearHTML(elem)
@ -3924,27 +3916,6 @@ const _Anot = (function() {
elem.innerHTML = html 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) hideProperty(vmodel, '$elem', elem)
Anot.fireDom(elem, 'datasetchanged', { Anot.fireDom(elem, 'datasetchanged', {
@ -4013,9 +3984,6 @@ const _Anot = (function() {
function isWidget(el) { function isWidget(el) {
//如果是组件,则返回组件的名字 //如果是组件,则返回组件的名字
var name = el.nodeName.toLowerCase() var name = el.nodeName.toLowerCase()
if (name === 'template' && el.getAttribute('name')) {
return el.getAttribute('name')
}
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) { if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
return RegExp.$1 return RegExp.$1
} }

38
src/js/anot.shim.js
View File

@ -3382,6 +3382,7 @@
(attr.specified && !rnoCollect.test(name)) || (attr.specified && !rnoCollect.test(name)) ||
specifiedVars.includes(name) specifiedVars.includes(name)
) { ) {
elem.removeAttribute(name)
if (name.indexOf(ronattr) === 0) { if (name.indexOf(ronattr) === 0) {
name = attr.value.slice(6) name = attr.value.slice(6)
ret[name] = elem[attr.value] ret[name] = elem[attr.value]
@ -3401,7 +3402,6 @@
} else { } else {
ret[camelizeName] = parseData(attr.value) ret[camelizeName] = parseData(attr.value)
} }
elem.removeAttribute(name)
} }
} }
} }
@ -3917,17 +3917,9 @@
globalHooks.componentWillMount.call(null, vmodel) globalHooks.componentWillMount.call(null, vmodel)
var slots = null var slots = null
var isTemplate = true
if (elem.content) { if (elem.firstElementChild) {
if (elem.content.firstElementChild) { slots = parseSlot(elem.children)
slots = parseSlot(elem.content.children)
}
} else {
isTemplate = false
if (elem.firstElementChild) {
slots = parseSlot(elem.children)
}
} }
Anot.clearHTML(elem) Anot.clearHTML(elem)
@ -3939,27 +3931,6 @@
elem.innerHTML = html 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) hideProperty(vmodel, '$elem', elem)
Anot.fireDom(elem, 'datasetchanged', { Anot.fireDom(elem, 'datasetchanged', {
@ -4028,9 +3999,6 @@
function isWidget(el) { function isWidget(el) {
//如果是组件,则返回组件的名字 //如果是组件,则返回组件的名字
var name = el.nodeName.toLowerCase() var name = el.nodeName.toLowerCase()
if (name === 'template' && el.getAttribute('name')) {
return el.getAttribute('name')
}
if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) { if (/^anot-([a-z][a-z0-9\-]*)$/.test(name)) {
return RegExp.$1 return RegExp.$1
} }

138
src/js/datepicker/index.js
View File

@ -123,78 +123,80 @@ Anot.ui.datepicker = '1.0.0'
export default Anot.component('datepicker', { export default Anot.component('datepicker', {
render: function() { render: function() {
return `<div return `
class="do-datepicker do-fn-noselect" <label class="date-input">
:class="{{props.size}}" <input
:css="{width: props.width, height: props.height, 'line-height': props.height + 'px'}" class="input"
:click="cancelBubble"> 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"> <dl
<input class="calendar-box"
class="input" :if="showCalendar">
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 <dt class="contrl">
class="calendar-box" <a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
:if="showCalendar"> <a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
<a class="do-icon-right next-month" :click="turn(0, 1)"></a>
<dt class="contrl"> <a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
<a class="do-icon-dbl-left" :click="turn(1, -1)"></a> <span
<a class="do-icon-left prev-month" :click="turn(0, -1)"></a> title="双击回到今天"
<a class="do-icon-right next-month" :click="turn(0, 1)"></a> :dblclick="back2today"
<a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a> :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
<span </dt>
title="双击回到今天" <dd class="table">
:dblclick="back2today" <section class="thead">
:text="calendar.year + '-' + numberFormat(calendar.month)"></span> <span class="td">日</span>
</dt> <span class="td">一</span>
<dd class="table"> <span class="td">二</span>
<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>
<span class="td">三</span> </section>
<span class="td">四</span> <section class="tr do-fn-cl">
<span class="td">五</span> <span class="td"
<span class="td">六</span> :class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
</section> :repeat="calendar.list"
<section class="tr do-fn-cl"> :click="pick(el)"
<span class="td" :text="el.day"></span>
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}" </section>
:repeat="calendar.list" </dd>
:click="pick(el)" <dd class="time" :if="props.showTime">
:text="el.day"></span> <label>
</section> <input type="text" :duplex-number="calendar.hour"> 时
</dd> </label>
<dd class="time" :if="props.showTime"> <label>
<label> <input type="text" :duplex-number="calendar.minute"> 分
<input type="text" :duplex-number="calendar.hour"> 时 </label>
</label> <label>
<label> <input type="text" :duplex-number="calendar.second"> 秒
<input type="text" :duplex-number="calendar.minute"> 分 </label>
</label> <a href="javascript:;" class="now" :click="now">现在</a>
<label> </dd>
<input type="text" :duplex-number="calendar.second"> 秒 <dt class="confirm">
</label> <a :click="close" class="cancel">取消</a>
<a href="javascript:;" class="now" :click="now">现在</a> <a :click="onConfirm" class="ok">确定</a>
</dd> </dt>
<dt class="confirm"> <dd class="tips" :if="tips" :text="tips"></dd>
<a :click="close" class="cancel">取消</a> </dl>`
<a :click="onConfirm" class="ok">确定</a>
</dt>
<dd class="tips" :if="tips" :text="tips"></dd>
</dl>
</div>`
}, },
__init__: function(props, state, next) { __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' // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
if (!props.showTime && !props.format) { if (!props.showTime && !props.format) {
props.format = 'Y-m-d' props.format = 'Y-m-d'

2
src/js/datepicker/style.scss
View File

@ -7,7 +7,7 @@
*/ */
@import "var.scss"; @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;} &.mini {width:155px;height:30px;line-height:30px;}
&.medium {width:175px;height:35px;line-height:35px;} &.medium {width:175px;height:35px;line-height:35px;}

40
src/js/meditor/index.js
View File

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

2
src/js/meditor/skin/main.scss
View File

File diff suppressed because one or more lines are too long

14
src/js/pager/index.js
View File

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

2
src/js/pager/main.scss
View File

@ -8,7 +8,7 @@
@import "var.scss"; @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; &.mini {line-height:30px;
.button,.page {min-width:30px;height:30px} .button,.page {min-width:30px;height:30px}

63
src/js/tree/index.js
View File

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

25
src/js/tree/main.scss
View File

@ -9,19 +9,22 @@
@import '../../css/var.scss'; @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;} &__item {overflow:hidden; min-height:35px;margin:1px 0; 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;} .do-tree {display:none;margin-left:20px;}
li.open>ul {display:block;}
li em, em,span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
li span {display:inline-block;cursor:pointer;color:nth($cgr, 2);} em {float:left;padding:0 5px;font-size:20px;}
li em {float:left;padding:0 5px;font-size:20px;}
li span:hover {color:nth($cgr, 2);} span {
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; &: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;}
} }