diff --git a/build.dev.js b/build.dev.js index 3ff091b..744163d 100755 --- a/build.dev.js +++ b/build.dev.js @@ -23,51 +23,40 @@ const compileJs = (entry, output) => { if (/touch\.patch/.test(entry)) { return } - let t1 = Date.now() - if (/anot/.test(entry)) { - setTimeout(() => { + setTimeout(() => { + if (/anot/.test(entry)) { fs.cp(entry, output) - }, 100) - } else { - try { - const { code } = babel.transformFileSync(entry, jsOpt) - fs.echo(code, output) - } catch (err) { - return log(err) + } else { + try { + const { code } = babel.transformFileSync(entry, jsOpt) + fs.echo(code, output) + } catch (err) { + return log(err) + } } - } - log( - '编译JS: %s, 耗时 %s ms', - chalk.green(entry), - chalk.yellow(Date.now() - t1) - ) + }, 100) + log('编译JS: %s', chalk.green(entry)) } const compileCss = (entry, output) => { - try { - let t1 = Date.now() - const { css } = scss.renderSync({ ...cssOpt, file: entry }) - log( - '编译scss: %s, 耗时 %s ms', - chalk.green(entry), - chalk.yellow(Date.now() - t1) - ) - fs.echo(css, output) - } catch (err) { - log(err) - } + setTimeout(() => { + try { + const { css } = scss.renderSync({ ...cssOpt, file: entry }) + fs.echo(css, output) + } catch (err) { + log(err) + } + }, 100) + log('编译scss: %s', chalk.green(entry)) } const compileHtm = (entry, output) => { - let t1 = Date.now() - let htm = fs.cat(entry).toString('utf8') - htm = htm.replace(/[\r\n\t]+/g, ' ').replace(/\s{2,}/g, ' ') - log( - '压缩HTML: %s, 耗时 %s ms', - chalk.green(entry), - chalk.yellow(Date.now() - t1) - ) - fs.echo(htm, output) + setTimeout(() => { + let htm = fs.cat(entry).toString('utf8') + htm = htm.replace(/[\r\n\t]+/g, ' ').replace(/\s{2,}/g, ' ') + fs.echo(htm, output) + }, 100) + log('压缩HTML: %s', chalk.green(entry)) } /*=======================================================*/ diff --git a/src/js/anot.shim.js b/src/js/anot.shim.js index 2bb2730..0d97598 100644 --- a/src/js/anot.shim.js +++ b/src/js/anot.shim.js @@ -3082,17 +3082,19 @@ } var rnoCollect = /^(:\S+|data-\S+|on[a-z]+|id|style|class)$/ - var ronattr = /^on\-[\w-]+$/ + var ronattr = '__fn__' function getOptionsFromTag(elem, vmodels) { var attributes = elem.attributes var ret = {} for (var i = 0, attr; (attr = attributes[i++]); ) { var name = attr.name if (attr.specified && !rnoCollect.test(name)) { - var camelizeName = camelize(attr.name) - if (/^on\-[\w-]+$/.test(name)) { - ret[camelizeName] = getBindingCallback(elem, name, vmodels) + if (name.indexOf(ronattr) === 0) { + name = attr.value.slice(6) + ret[name] = elem[attr.value] + delete elem[attr.value] } else { + var camelizeName = camelize(name) ret[camelizeName] = parseData(attr.value) } } @@ -3471,34 +3473,19 @@ return } var props = getOptionsFromTag(elem, host.vmodels) - var vmOpts = getOptionsFromVM(host.vmodels, props.config) var $id = props.uuid || generateID(widget) - var componentDefinition = {} - 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 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) - }) + Object.assign(hooks.props, props) - componentDefinition.$id = $id + hooks.construct.call(elem, hooks.props, hooks.state) + + hooks.$id = $id //==========构建VM========= var { @@ -3507,15 +3494,15 @@ childComponentDidMount, componentWillUnmount, render - } = componentDefinition + } = hooks - delete componentDefinition.construct - delete componentDefinition.componentWillMount - delete componentDefinition.componentDidMount - delete componentDefinition.childComponentDidMount - delete componentDefinition.componentWillUnmount + delete hooks.construct + delete hooks.componentWillMount + delete hooks.componentDidMount + delete hooks.childComponentDidMount + delete hooks.componentWillUnmount - var vmodel = Anot(componentDefinition) + var vmodel = Anot(hooks) vmodel.$refs = {} elem.msResolved = 1 //防止二进扫描此元素 @@ -3525,18 +3512,30 @@ if (!elem.content.firstElementChild) { Anot.clearHTML(elem) - elem.innerHTML = render() + var html = render.call(vmodel) || '' + + html = html.replace(/<\w+[^>]*>/g, function(m, s) { + return m.replace(/[\n\t\s]{1,}/g, ' ') + }) + + elem.innerHTML = html } // 组件所使用的标签是temlate,所以必须要要用子元素替换掉 var child = elem.content.firstElementChild - elem.parentNode.replaceChild(child, elem) + 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.cssText += ';' + cssText + elem.style && (elem.style.cssText += ';' + cssText) if (className) { Anot(elem).addClass(className) @@ -3554,9 +3553,10 @@ dependencies += ev.childReady if (vmodel !== ev.vm) { vmodel.$refs[ev.vm.$id] = ev.vm + ev.vm.$up = vmodel if (ev.childReady === -1) { children++ - childComponentDidMount.call(vmodel, elem, ev) + childComponentDidMount.call(vmodel, ev.vm) } ev.stopPropagation() } @@ -3601,24 +3601,11 @@ }) }, 17) } - })(obj, Anot.components[name], obj.element, obj.name) // jshint ignore:line + })(obj, toJson(Anot.components[name]), obj.element, obj.name) // jshint ignore:line } } } - function getOptionsFromVM(vmodels, pre) { - if (pre) { - for (var i = 0, v; (v = vmodels[i++]); ) { - if (v.hasOwnProperty(pre) && typeof v[pre] === 'object') { - var vmOptions = v[pre] - return vmOptions.$model || vmOptions - break - } - } - } - return {} - } - function isWidget(el) { //如果是组件,则返回组件的名字 var name = el.nodeName.toLowerCase() @@ -3726,7 +3713,7 @@ //chrome v37- 下embed标签动态设置的src，无法发起请求 if (window.chrome && elem.tagName === 'EMBED') { var parent = elem.parentNode - var com = document.createComment(':src') + var com = DOC.createComment(':src') parent.replaceChild(com, elem) parent.replaceChild(elem, com) } @@ -3757,9 +3744,9 @@ 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__' + k = '__fn__' + camelize(k) + elem[k] = obj[i] + obj[i] = k } elem.setAttribute(k, obj[i]) } diff --git a/src/js/pages/index.js b/src/js/pages/index.js index 0bc5a33..9483ae5 100644 --- a/src/js/pages/index.js +++ b/src/js/pages/index.js @@ -1,5 +1,5 @@ 'use strict' -import tpl from './main.htm' + import './main.scss' Anot.ui.pages = '1.0.0' @@ -50,15 +50,46 @@ function update(currPage, vm) { } export default Anot.component('pages', { - construct: function(props, state, next) { + construct: function(props, state) { props.className = 'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain') delete props.theme delete props.color - next(props, state) }, render: function() { - return tpl + return ` +
+ + + + {{props.btns.next}} + {{props.btns.end}} + +
+ 共 {{totalPages}} 页 {{totalItems}} 条，前往 + + 页 +
+
` }, componentWillMount: function() { const { currPage, totalPages, props } = this @@ -68,7 +99,9 @@ export default Anot.component('pages', { ) }, componentDidMount: function() { - this.props.onSuccess.call(null, this) + if (typeof this.props.onCreated === 'function') { + this.props.onCreated.call(null, this) + } }, state: { currPage: 1, @@ -95,7 +128,7 @@ export default Anot.component('pages', { className: '', simpleMode: !1, onPageChange: Anot.noop, - onSuccess: Anot.noop + onCreated: Anot.noop }, methods: { // 格式化页码的URL diff --git a/src/js/pages/main.htm b/src/js/pages/main.htm deleted file mode 100644 index 2d688f9..0000000 --- a/src/js/pages/main.htm +++ /dev/null @@ -1,32 +0,0 @@ -
- - - - {{props.btns.next}} - {{props.btns.end}} - -
- 共 {{totalPages}} 页 {{totalItems}} 条，前往 - - 页 -
-
\ No newline at end of file diff --git a/src/js/tree/index.js b/src/js/tree/index.js index 89d237b..548391b 100644 --- a/src/js/tree/index.js +++ b/src/js/tree/index.js @@ -12,141 +12,135 @@ import './main.scss' //储存版本信息 Anot.ui.tree = '1.0.0' -var box = '', - ul = '', - li = - '
  • ' + - '' + - '' + - '{child}
    • ' -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 = [] +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 }) arr.forEach(function(it) { - tmp[it.id] = it - keyPath[it.id] = '' - var parentItem = tmp[it.pid] + it.checked = !!it.checked + it.open = !!it.open + tmp[it[id]] = it + var parentItem = tmp[it[parent]] if (!parentItem) { - return farr.push(tmp[it.id]) + 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) + parentItem[children] = parentItem[children] || [] + parentItem[children].push(it) }) return farr } export default Anot.component('tree', { render: function() { - // return '
    ' + if (!this.list.size()) { + return null + } return ` ` }, - construct: function(props, state, next) { + construct: function(props, state) { props.className = 'skin-' + (props.theme || 'def') - state.list = format(props.list || []) - + props.id = props.id || 'id' + props.label = props.label || 'label' + props.parent = props.parent || 'parent' + props.children = props.children || 'children' + state.list = format(props.list || [], props) 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) + if (typeof this.props.onCreated === 'function') { + this.props.onCreated.call(null, this) } }, state: { - treeHTML: '', list: [], - currItem: -1 + currItem: -1, + checked: {} }, + skip: ['checked'], props: { className: '', - created: Anot.PropsTypes.isFunction(), - componentWillMount: Anot.PropsTypes.isFunction() + id: 'id', + label: 'label', + parent: 'parent', + children: 'children', + onCreated: Anot.PropsTypes.isFunction(), + onSelected: Anot.PropsTypes.isFunction(), + onChecked: 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) + onChecked: function(el, childChecked) { + let item = null + let arr = [] + let { id, onChecked } = this.props + + if (!childChecked) { + el.checked = !el.checked + item = el.$model + this.checked[item[id]] = el.checked ? item : null + } else { + item = el + Object.assign(this.checked, childChecked) } - }, - $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 + if (!this.$up) { + for (let i in this.checked) { + if (!this.checked[i]) { + delete this.checked[i] + } else { + arr.push(this.checked[i]) } } + } else { + arr = this.checked } - for (var j in obj) { - tmpobj[j] = obj[j] + + if (typeof onChecked === 'function') { + onChecked.call(this.$up, item, arr) } }, - $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) - })*/ + onSelected: function(el) { + let { id, onSelected } = this.props + this.currItem = el[id] + if (typeof onSelected === 'function') { + onSelected(el.$model) + } + }, + reset: function(arr) { + this.checked = {} + this.list.clear() + this.list.pushArray(format(arr || [])) } } }) diff --git a/src/js/tree/main.scss b/src/js/tree/main.scss index 8a5cff7..69cc345 100644 --- a/src/js/tree/main.scss +++ b/src/js/tree/main.scss @@ -9,23 +9,29 @@ @import '../../css/var.scss'; -.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;font-size:13px; +.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;font-size:13px;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} - ul {width:100%;height:auto;} - li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis} + li ul {display:none;margin-left:20px;} + li.open ul {display:block;} - 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 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; + + &::after {display:block;width:12px;height:12px;line-height:12px;} + &.checked::after {content:"\e60f";} + } - 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:nth($cgr, 2);} - li span.active {color:#000;font-weight:bold;} - - &.skin-def { - li>em::before {content:"\e612";} - li.dir>em::before {content:"\e622";} - li.dir.open>em::before {content:"\e8ea";} - } + &.skin-def { + li>em::before {content:"\e612";} + li.dir>em::before {content:"\e622";} + li.dir.open>em::before {content:"\e8ea";} + } } \ No newline at end of file