widgets/main.js

export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
    const element = document.createElement(tagName)
    for (const key in attributes) {
        if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值
        else element.setAttribute(key, attributes[key])          // 否则是属性则使用setAttribute
    }
    if (dataset) Object.assign(element.dataset, dataset)
    if (style) Object.assign(element.style, style)
    if (classList.length) element.classList.add(...classList)
    if (textContent) element.textContent = textContent
    if (innerText) element.innerText = innerText
    if (innerHTML) element.innerHTML = innerHTML
    if (readOnly) element.readOnly = readOnly
    if (children) children.forEach(child => element.appendChild(child))

    element.w = (width) => { element.style.width = width; return element }
    element.h = (height) => { element.style.height = height; return element }
    element.text = (text) => { element.textContent = text; return element }
    element.html = (html) => { element.innerHTML = html; return element }
    element.childs = (childs) => { childs.forEach(child => element.appendChild(child)); return element }
    element.bg = (color) => { element.style.backgroundColor = color; return element }
    //element.p = (padding) => { element.style.padding = padding; return element }
    //element.m = (margin) => { element.style.margin = margin; return element }
    element.grid = (options) => { element.style.display = 'grid'; Object.assign(element.style, options); return element }
    element.flex = (options) => { element.style.display = 'flex'; Object.assign(element.style, options); return element }
    element.borderRadius = (radius) => { element.style.borderRadius = radius; return element }
    element.p = (padding) => applyStyle(element, 'padding', padding)
    element.m = (margin) => applyStyle(element, 'margin', margin)
    return element
}

function applyStyle(element, styleName, value) {
    if (typeof value === 'string') {
        element.style[styleName] = value;
    } else if (typeof value === 'object') {
        const { left = 0, right = 0, top = 0, bottom = 0 } = value;
        element.style[`${styleName}Left`] = left;
        element.style[`${styleName}Right`] = right;
        element.style[`${styleName}Top`] = top;
        element.style[`${styleName}Bottom`] = bottom;
    }
    return element;
}

/* HTML5 语义标签 */
export class BaseElement {
    constructor(options) {
        return createElement(options, this.constructor.name)
    }
    static text(text) {
        return createElement({ textContent: text }, this.name)
    }
    static html(html) {
        return createElement({ innerHTML: html }, this.name)
    }
    static childs(childs) {
        return createElement({ children: childs }, this.name)
    }
    static w(width) {
        return createElement({ style: { width } }, this.name)
    }
    static h(height) {
        return createElement({ style: { height } }, this.name)
    }
    static bg(color) {
        return createElement({ style: { backgroundColor: color } }, this.name)
    }
    static p(...args) {
        if (args.length === 1 && typeof args[0] === 'string') {
            return createElement({ style: { padding: args[0] } }, this.name)
        }
        if (args.length === 1 && typeof args[0] === 'object') {
            const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
            const style = { paddingLeft: left, paddingRight: right, paddingTop: top, paddingBottom: bottom }
            return createElement({ style }, this.name)
        }
    }
    static m(...args) {
        if (args.length === 1 && typeof args[0] === 'string') {
            return createElement({ style: { margin: args[0] } }, this.name)
        }
        if (args.length === 1 && typeof args[0] === 'object') {
            const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
            const style = { marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom }
            return createElement({ style }, this.name)
        }
    }
    static grid(options) {
        return createElement({ style: { display: 'grid', ...options } }, this.name)
    }
    static flex(options) {
        return createElement({ style: { display: 'flex', ...options } }, this.name)
    }
    static radius(radius) {
        return createElement({ style: { borderRadius: radius } }, this.name)
    }
}

export class div extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class span extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class button extends BaseElement {
    constructor(options) {
        super({ ...options, style: { cursor: 'pointer', ...options.style } })
    }
}

export class img extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class pre extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class input extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class textarea extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class select extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class option extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class nav extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class main extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class article extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class section extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class aside extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class header extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class footer extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class h1 extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class h2 extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class h3 extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class h4 extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class h5 extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class h6 extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class p extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class a extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class ul extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class ol extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class li extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class dl extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class dt extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class dd extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class table extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class caption extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class thead extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class tbody extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class tfoot extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class tr extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class th extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class td extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class colgroup extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class col extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class form extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class fieldset extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class legend extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class label extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class strong extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class small extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class em extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class mark extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class del extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class ins extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class code extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class sub extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class sup extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class i extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class b extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class u extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class s extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class cite extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class q extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class blockquote extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class address extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class time extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class dfn extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class abbr extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class ruby extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class rt extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class rp extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class bdi extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class bdo extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class hr extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class br extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class figure extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class figcaption extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class video extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class audio extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export class canvas extends BaseElement {
    constructor(options) {
        super(options)
    }
}

export function Avatar(options) {
    const element = createElement(options, 'img')
    element.onerror = () => element.src = '/favicon.ico'
    return element
}

export function Dialog(options) {
    const element = createElement({
        tabIndex: 0,
        style: {
            position: 'fixed',
            top: 0,
            left: 0,
            zIndex: 1000,
            width: '100%',
            height: '100%',
            backdropFilter: 'blur(5px)',
            duration: '0.5s',
            transition: 'all 0.5s'
        },
        onclick: async event => {
            if (event.target !== event.currentTarget) return
            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
            await event.target.remove()
        },
        onkeydown: async event => {
            if (event.key !== 'Escape') return
            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
            await event.target.remove()
        },
        children: [
            createElement({
                ...options,
                style: {
                    position: 'fixed',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    backgroundColor: '#fff',
                    borderRadius: '150px',
                    boxShadow: '0 0 1em #ccc',
                    overflow: 'hidden',
                    display: 'flex',
                    justifyContent: 'center',
                    ...options.style,
                }
            })
        ]
    })
    const observer = new MutationObserver(mutationsList => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                element.focus()
                element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
                return observer.disconnect()
            }
        }
    })
    observer.observe(document.body, { childList: true, subtree: true })
    return element
}