删除js下的lib目录,组件与框架同级;优化组件机制;优化:attr指令
|
@ -3287,10 +3287,7 @@
|
|||
if (newVmodel.props[name].check(value)) {
|
||||
newVmodel.props[name] = value
|
||||
} else {
|
||||
Anot.error(
|
||||
'props「' + name + '」类型错误!' + value,
|
||||
TypeError
|
||||
)
|
||||
Anot.error('props「' + name + '」类型错误!', TypeError)
|
||||
}
|
||||
} else {
|
||||
newVmodel.props[name] = value
|
||||
|
@ -3436,8 +3433,8 @@
|
|||
var componentQueue = []
|
||||
var widgetList = []
|
||||
var componentHooks = {
|
||||
construct: function(props, next) {
|
||||
next(props)
|
||||
construct: function(props, state, next) {
|
||||
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) {
|
||||
Object.assign(hooks.props, val)
|
||||
delete props.name
|
||||
|
||||
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])
|
||||
}
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
@ -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
|
|
@ -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)}
|
||||
}
|
||||
}
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
})
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
@ -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
|
|
@ -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);
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
'use strict'
|
||||
import 'lib/promise/index'
|
||||
import 'promise/index'
|
||||
import Format from './lib/format'
|
||||
|
||||
var _request = function(url, protocol) {
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
'use strict'
|
||||
import 'lib/promise/index'
|
||||
import 'promise/index'
|
||||
import Format from './lib/format'
|
||||
|
||||
var _request = function(url, protocol) {
|
|
@ -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)
|
||||
})*/
|
||||
}
|
||||
}
|
||||
})
|
|
@ -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";}
|
||||
}
|
||||
}
|