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

封存此仓库, 迁移到新地址

pull/1/head
yutent 2023-03-06 15:27:00 +08:00
parent 539a79c288
commit 333c4378fa
1 changed files with 85 additions and 6 deletions

View File

@ -3,9 +3,23 @@
* @author yutent<yutent.io@gmail.com>
* @date 2023/03/03 11:21:44
*/
const finalize = Symbol('finalize')
const RESET_CSS_STYLE = css`
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::before,
::after {
box-sizing: border-box;
}
`
export function css(strs, ...args) {
let output = ''
let output = `
`
let tmp = Array.from(strs)
while (tmp.length) {
output += tmp.shift() + (args.shift() || '')
@ -50,14 +64,61 @@ function getTemplate(html) {
return template.content.cloneNode(true)
}
export class Compoent extends HTMLElement {
function adoptStyles(root, styles = '') {
let sheet = new CSSStyleSheet()
if (typeof styles === 'string') {
styles = [styles]
} else {
styles = styles.flat(Infinity)
}
styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
sheet.replaceSync(styles)
root.adoptedStyleSheets.push(sheet)
}
function render(root, html) {
root.appendChild(getTemplate(html))
}
export class Component extends HTMLElement {
static get observedAttributes() {
console.log(this.properties)
return []
this[finalize]()
let list = []
this.elemProps.forEach((it, prop) => {
list.push(prop)
})
return list
}
constructor() {
super()
this.created && this.created()
}
static [finalize]() {
if (this.finalized) {
return
}
this.finalized = true
this.elemProps = new Map()
for (let k in this.props) {
let prop = Symbol(k)
let options = this.props[k]
this.elemProps.set(k, prop)
Object.defineProperty(this.prototype, k, {
get() {
return this[prop] || options.default
},
set(val) {
this[prop] = val
},
enumerable: false
})
}
}
render() {
@ -66,10 +127,28 @@ export class Compoent extends HTMLElement {
connectedCallback() {
Object.defineProperty(this, 'root', {
value: this.attachShadow({ mode: 'open' }),
value: this.shadowRoot || this.attachShadow({ mode: 'open' }),
enumerable: false
})
this.root.appendChild(getTemplate(this.render()))
adoptStyles(this.root, this.constructor.styles)
render(this.root, this.render())
this.mounted && this.mounted()
}
disconnectedCallback() {
console.log('>>>>')
}
attributeChangedCallback(name, old, val) {
if (old === val) {
return
}
}
adoptedCallback() {
//
}
}