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

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

old
宇天 2018-08-02 18:00:09 +08:00
parent 220d67d610
commit 8bf5c2d272
9 changed files with 133 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/reset-basic.scss
View File

@ -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;}

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

@ -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)

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

@ -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)

18
src/js/anot.js
View File

@ -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)

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

@ -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)

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

@ -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'

7
src/js/form/index.js
View File

@ -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
}

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

@ -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] || ''

2
src/js/router/index.js
View File

@ -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 {