优化编译脚本;增加表格组件
parent
77c1022a8e
commit
3d33539a4a
|
@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
|
||||||
::after{box-sizing:border-box;}
|
::after{box-sizing:border-box;}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
function parseName(str) {
|
||||||
|
return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
|
||||||
|
}
|
||||||
|
|
||||||
function fixImport(str) {
|
function fixImport(str) {
|
||||||
return str
|
return str
|
||||||
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
||||||
|
@ -140,8 +144,8 @@ const log = console.log
|
||||||
|
|
||||||
${js}
|
${js}
|
||||||
|
|
||||||
if(!customElements.get('wc-${name.toLowerCase()}')){
|
if(!customElements.get('wc-${parseName(name)}')){
|
||||||
customElements.define('wc-${name.toLowerCase()}', ${name})
|
customElements.define('wc-${parseName(name)}', ${name})
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
|
||||||
::after{box-sizing:border-box;}
|
::after{box-sizing:border-box;}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
function parseName(str) {
|
||||||
|
return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
|
||||||
|
}
|
||||||
|
|
||||||
function fixImport(str) {
|
function fixImport(str) {
|
||||||
return str
|
return str
|
||||||
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
|
||||||
|
@ -149,8 +153,8 @@ function mkWCFile({ style, html, js }) {
|
||||||
|
|
||||||
${res.code}
|
${res.code}
|
||||||
|
|
||||||
if(!customElements.get('wc-${name.toLowerCase()}')){
|
if(!customElements.get('wc-${parseName(name)}')){
|
||||||
customElements.define('wc-${name.toLowerCase()}', ${name})
|
customElements.define('wc-${parseName(name)}', ${name})
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,98 @@
|
||||||
|
<template>
|
||||||
|
<div class="table"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.table {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import './item'
|
||||||
|
|
||||||
|
export default class Table {
|
||||||
|
props = {
|
||||||
|
list: null
|
||||||
|
}
|
||||||
|
|
||||||
|
__init__() {
|
||||||
|
/* render */
|
||||||
|
this.__OUTER__ = this.root.children[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
__updateTable__() {
|
||||||
|
if (this._clear) {
|
||||||
|
delete this._clear
|
||||||
|
return
|
||||||
|
}
|
||||||
|
log('-----------')
|
||||||
|
var { list } = this.props
|
||||||
|
var items = Array.from(this.children)
|
||||||
|
.filter(it => it.tagName === 'WC-TABLE-ITEM')
|
||||||
|
.map(it => {
|
||||||
|
return {
|
||||||
|
label: it.getAttribute('label'),
|
||||||
|
prop: it.getAttribute('prop')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this._clear = true
|
||||||
|
this.innerText = ''
|
||||||
|
if (list) {
|
||||||
|
this.__OUTER__.innerHTML =
|
||||||
|
'<ul>' +
|
||||||
|
list
|
||||||
|
.map((it, i) => {
|
||||||
|
return (
|
||||||
|
'<li>' +
|
||||||
|
items
|
||||||
|
.map(_ => {
|
||||||
|
return `<section>${it[_.prop]}</section>`
|
||||||
|
})
|
||||||
|
.join('') +
|
||||||
|
'</li>'
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.join('') +
|
||||||
|
'</ul>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.__observer = new MutationObserver(_ => this.__updateTable__())
|
||||||
|
this.__observer.observe(this, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
characterData: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
watch() {
|
||||||
|
switch (name) {
|
||||||
|
case 'list':
|
||||||
|
if (val) {
|
||||||
|
log('===========')
|
||||||
|
try {
|
||||||
|
this.props.list = JSON.parse(val)
|
||||||
|
} catch (err) {}
|
||||||
|
this.removeAttribute('options')
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<div><slot /></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
div {
|
||||||
|
color: #f30;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default class TableItem {
|
||||||
|
props = {
|
||||||
|
foo: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
__init__() {
|
||||||
|
/* render */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Reference in New Issue