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

优化编译脚本;增加表格组件

old
宇天 2020-05-06 21:10:08 +08:00
parent 77c1022a8e
commit 3d33539a4a
4 changed files with 131 additions and 4 deletions

View File

@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
::after{box-sizing:border-box;}
`
function parseName(str) {
return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
}
function fixImport(str) {
return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
@ -140,8 +144,8 @@ const log = console.log
${js}
if(!customElements.get('wc-${name.toLowerCase()}')){
customElements.define('wc-${name.toLowerCase()}', ${name})
if(!customElements.get('wc-${parseName(name)}')){
customElements.define('wc-${parseName(name)}', ${name})
}
`
}

View File

@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
::after{box-sizing:border-box;}
`
function parseName(str) {
return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
}
function fixImport(str) {
return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
@ -149,8 +153,8 @@ function mkWCFile({ style, html, js }) {
${res.code}
if(!customElements.get('wc-${name.toLowerCase()}')){
customElements.define('wc-${name.toLowerCase()}', ${name})
if(!customElements.get('wc-${parseName(name)}')){
customElements.define('wc-${parseName(name)}', ${name})
}
`
}

98
src/table/index.wc Normal file
View File

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

21
src/table/item.wc Normal file
View File

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