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))
    return element
}

/* HTML5 语义标签 */
export function Header(options) {
    return createElement(options, 'header')
}

export function Nav(options) {
    return createElement(options, 'nav')
}

export function Main(options) {
    return createElement(options, 'main')
}

export function Article(options) {
    return createElement(options, 'article')
}

export function Section(options) {
    return createElement(options, 'section')
}

export function Aside(options) {
    return createElement(options, 'aside')
}

export function Footer(options) {
    return createElement(options, 'footer')
}

export function H1(options) {
    return createElement(options, 'h1')
}

export function H2(options) {
    return createElement(options, 'h2')
}

export function H3(options) {
    return createElement(options, 'h3')
}

export function H4(options) {
    return createElement(options, 'h4')
}

export function H5(options) {
    return createElement(options, 'h5')
}

export function H6(options) {
    return createElement(options, 'h6')
}

export function P(options) {
    return createElement(options, 'p')
}

export function A(options) {
    return createElement(options, 'a')
}

export function Strong(options) {
    return createElement(options, 'strong')
}

export function Em(options) {
    return createElement(options, 'em')
}

export function Small(options) {
    return createElement(options, 'small')
}

export function Mark(options) {
    return createElement(options, 'mark')
}

export function Del(options) {
    return createElement(options, 'del')
}

export function Ins(options) {
    return createElement(options, 'ins')
}

export function Pre(options) {
    return createElement(options, 'pre')
}

export function Code(options) {
    return createElement(options, 'code')
}

export function Blockquote(options) {
    return createElement(options, 'blockquote')
}

export function Q(options) {
    return createElement(options, 'q')
}

export function Cite(options) {
    return createElement(options, 'cite')
}

export function Br(options) {
    return createElement(options, 'br')
}

export function Hr(options) {
    return createElement(options, 'hr')
}

export function Ol(options) {
    return createElement(options, 'ol')
}

export function Ul(options) {
    return createElement(options, 'ul')
}

export function Li(options) {
    return createElement(options, 'li')
}

export function Dl(options) {
    return createElement(options, 'dl')
}

export function Dt(options) {
    return createElement(options, 'dt')
}

export function Dd(options) {
    return createElement(options, 'dd')
}

export function Figure(options) {
    return createElement(options, 'figure')
}

export function Figcaption(options) {
    return createElement(options, 'figcaption')
}

export function Div(options) {
    return createElement(options, 'div')
}

export function Table(options) {
    return createElement(options, 'table')
}

export function Caption(options) {
    return createElement(options, 'caption')
}

export function Thead(options) {
    return createElement(options, 'thead')
}

export function Tfoot(options) {
    return createElement(options, 'tfoot')
}

export function Tbody(options) {
    return createElement(options, 'tbody')
}

export function Tr(options) {
    return createElement(options, 'tr')
}

export function Th(options) {
    return createElement(options, 'th')
}

export function Td(options) {
    return createElement(options, 'td')
}

export function Col(options) {
    return createElement(options, 'col')
}

export function Colgroup(options) {
    return createElement(options, 'colgroup')
}

export function Td(options) {
    return createElement(options, 'td')
}

export function Th(options) {
    return createElement(options, 'th')
}

export function Thead(options) {
    return createElement(options, 'thead')
}

export function Tfoot(options) {
    return createElement(options, 'tfoot')
}

export function Tbody(options) {
    return createElement(options, 'tbody')
}

export function Tr(options) {
    return createElement(options, 'tr')
}

/* 扩展标签 */
export function List(options) {
    return createElement(options, 'ul')
}

export function ListItem(options) {
    return createElement(options, 'li')
}

export function Span(options) {
    return createElement(options, 'span')
}

export function Button(options) {
    return createElement({
        ...options,
        style: {
            cursor: 'pointer',
            ...options.style
        }
    }, 'button')
}

export function Img(options) {
    return createElement(options, 'img')
}

export function Input(options) {
    return createElement(options, 'input')
}

export function TextArea(options) {
    return createElement(options, 'textarea')
}

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
}

export default { createElement, List, ListItem, Span, Button, Img, Input, TextArea, Avatar, Dialog }