widgets/main.js

export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div', names = []) {
    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))

    // 分解类名生成样式, 直接将样式赋予元素
    names.map(name => name.split('_')).forEach(item => {

        if (item.length === 1) {
            const key = item[0]

            // 支持快捷定位 position
            if (['static', 'fixed', 'absolute', 'relative', 'sticky'].includes(key)) {
                element.style.position = key
                return
            }

            // 支持快捷布局 display
            if (['block', 'inline-block', 'flex', 'grid'].includes(key)) {
                element.style.display = key
                return
            }
        }

        // 两个参数的情况下, 第一个参数是样式名, 第二个参数是样式值
        if (item.length === 2) {
            const [key, value] = item

            if (key === 'cursor') {
                element.style.cursor = value
                return
            }
            if (key === 'overflow') {
                element.style.overflow = value
                return
            }
            if (key === 'bg') {
                element.style.backgroundColor = value
                return
            }

            const styleMap = {
                'w': ['width'],
                'h': ['height'],
                'p': ['padding'],
                'm': ['margin'],
                'pt': ['paddingTop'],
                'pl': ['paddingLeft'],
                'pr': ['paddingRight'],
                'pb': ['paddingBottom'],
                'mt': ['marginTop'],
                'ml': ['marginLeft'],
                'mr': ['marginRight'],
                'mb': ['marginBottom'],
                'px': ['paddingLeft', 'paddingRight'],
                'py': ['paddingTop', 'paddingBottom'],
                'mx': ['marginLeft', 'marginRight'],
                'my': ['marginTop', 'marginBottom'],
                't': ['top'],
                'b': ['bottom'],
                'l': ['left'],
                'r': ['right'],
                'x': ['left', 'right'],
                'y': ['top', 'bottom'],
                'gap': ['gap'],
            }

            if (styleMap.hasOwnProperty(key)) {
                styleMap[key].forEach(style => {
                    element.style[style] = isNaN(value) ? value : `${value}px`
                })
                return
            }

            // TODO 支持颜色输入
            if (key === 'color') {
                element.style.color = value
                return
            }

            // TODO 支持各角和单边圆角
            if (key === 'radius' || key === 'rounded') {
                element.style.borderRadius = value
                return
            }

            if (key === 'justify') {
                if (['start', 'end', 'center', 'between', 'around'].includes(value)) {
                    element.style.justifyContent = `flex-${value}`
                    return
                }
                return
            }

            if (key === 'font') {
                if (['medium', 'bold', 'semibold'].includes(value)) {
                    const fontWeightMap = { 'medium':500, 'semibold': 600, 'bold': 700 }
                    element.style.fontWeight = fontWeightMap[value]
                    return
                }

                element.style.font = value
                return
            }

            if (key === 'text') {

                // 字体常用尺寸
                if (value === 'xs') {
                    element.style.fontSize = '0.75rem'
                    element.style.lineHeight = '1rem'
                    return
                }
                if (value === 'sm') {
                    element.style.fontSize = '0.875rem'
                    element.style.lineHeight = '1.25rem'
                    return
                }
                if (value === 'base') {
                    element.style.fontSize = '1rem'
                    element.style.lineHeight = '1.5rem'
                    return
                }
                if (value === 'lg') {
                    element.style.fontSize = '1.125rem'
                    element.style.lineHeight = '1.75rem'
                    return
                }
                if (value === 'xl') {
                    element.style.fontSize = '1.25rem'
                    element.style.lineHeight = '1.75rem'
                    return
                }
                if (value === '2xl') {
                    element.style.fontSize = '1.5rem'
                    element.style.lineHeight = '2rem'
                    return
                }
                if (value === '3xl') {
                    element.style.fontSize = '1.875rem'
                    element.style.lineHeight = '2.25rem'
                    return
                }
                if (value === '4xl') {
                    element.style.fontSize = '2.25rem'
                    element.style.lineHeight = '2.5rem'
                    return
                }

                // 字体对齐方式
                if (value === 'center') {
                    element.style.textAlign = value
                    return
                }

                element.textContent = value
                return
            }

        }

        // 三个参数的情况下, 第一个参数是样式名, 第二个参数是样式, 第三个参数是数值
        if (item.length === 3) {
            if (item[0] === 'color') {
                element.style.color = item[1]
                return
            }
        }
    })

    // 元素 增加链式操作方法
    element.w = (width) => { element.style.width = width; return element }
    element.h = (height) => { element.style.height = height; return element }
    element.x = (left) => { element.style.left = left; return element } // 以居中线对齐(flex)
    element.y = (top) => { element.style.top = top; return element }    // 以居中线对齐(flex)
    element.z = (zIndex) => { element.style.zIndex = zIndex; return element }
    element.cursor = (cursor) => { element.style.cursor = cursor; 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.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.radius = (radius) => { element.style.borderRadius = radius; return element }

    element.m = (margin) => applyStyle(element, 'margin', margin)
    element.mx = (value) => { element.style.marginLeft = value; element.style.marginRight = value; return element }
    element.my = (value) => { element.style.marginTop = value; element.style.marginBottom = value; return element }
    element.mt = (value) => { element.style.marginTop = value; return element }
    element.ml = (value) => { element.style.marginLeft = value; return element }
    element.mr = (value) => { element.style.marginRight = value; return element }
    element.mb = (value) => { element.style.marginBottom = value; return element }

    element.p = (padding) => applyStyle(element, 'padding', padding)
    element.px = (value) => { element.style.paddingLeft = value; element.style.paddingRight = value; return element }
    element.py = (value) => { element.style.paddingTop = value; element.style.paddingBottom = value; return element }
    element.pt = (value) => { element.style.paddingTop = value; return element }
    element.pl = (value) => { element.style.paddingLeft = value; return element }
    element.pr = (value) => { element.style.paddingRight = value; return element }
    element.pb = (value) => { element.style.paddingBottom = value; return element }

    element.font = (font) => { element.style.font = font; return element }
    element.color = (color) => { element.style.color = color; return element }
    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, tagName, names) {
        return createElement({ textContent: text }, tagName, names)
    }
    static html(html, tagName, names) {
        return createElement({ innerHTML: html }, tagName, names)
    }
    static childs(childs, tagName, names) {
        return createElement({ children: childs }, tagName, names)
    }
    static w(width, tagName, names) {
        if (typeof width === 'number') width = width + 'px'
        return createElement({ style: { width } }, tagName, names)
    }
    static h(height, tagName, names) {
        if (typeof height === 'number') height = height + 'px'
        return createElement({ style: { height } }, tagName, names)
    }
    static bg(color, tagName, names) {
        return createElement({ style: { backgroundColor: color } }, tagName, names)
    }
    static p(args, tagName, names) {
        if (typeof args === 'string') {
            return createElement({ style: { padding: args } }, tagName, names)
        }
        if (typeof args === 'object') {
            const { left = 0, right = 0, top = 0, bottom = 0 } = args
            const style = { paddingLeft: left, paddingRight: right, paddingTop: top, paddingBottom: bottom }
            return createElement({ style }, tagName, names)
        }
        if (Array.isArray(args)) {
            const [top, right, bottom, left] = args
            const style = { paddingTop: top, paddingRight: right, paddingBottom: bottom, paddingLeft: left }
            return createElement({ style }, tagName, names)
        }
    }
    static m(args, tagName, names) {
        if (typeof args === 'string') {
            return createElement({ style: { margin: args } }, tagName, names)
        }
        if (typeof args === 'object') {
            const { left = 0, right = 0, top = 0, bottom = 0 } = args
            const style = { marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom }
            return createElement({ style }, tagName, names)
        }
        if (Array.isArray(args)) {
            const [top, right, bottom, left] = args
            const style = { marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left }
            return createElement({ style }, tagName, names)
        }
    }
    static mx(value, tagName, names) {
        if (typeof value === 'number') value = value + 'px'
        return createElement({ style: { marginLeft: value, marginRight: value } }, tagName, names)
    }
    static my(value, tagName, names) {
        if (typeof value === 'number') value = value + 'px'
        return createElement({ style: { marginTop: value, marginBottom: value } }, tagName, names)
    }
    static px(value, tagName, names) {
        if (typeof value === 'number') value = value + 'px'
        return createElement({ style: { paddingLeft: value, paddingRight: value } }, tagName, names)
    }
    static py(value, tagName, names) {
        if (typeof value === 'number') value = value + 'px'
        return createElement({ style: { paddingTop: value, paddingBottom: value } }, tagName, names)
    }
    static radius(radius, tagName, names) {
        return createElement({ style: { borderRadius: radius } }, tagName, names)
    }
    static font(font, tagName, names) {
        return createElement({ style: { font } }, tagName, names)
    }
    static color(color, tagName, names) {
        return createElement({ style: { color } }, tagName, names)
    }
}

function createProxy(tagName) {
    return new Proxy(BaseElement, {
        get(target, property) {
            if (property in target) {
                const __name = this.__name ?? tagName
                if (typeof target[property] === 'function') {
                    return function (...args) {
                        const [tagname, ...names] = __name.split('.')
                        return target[property](...args, tagName, names)
                    }
                }
                return target[property]
            } else {
                if (!this.__name) this.__name = tagName
                const __name = this.__name ? this.__name + '.' + property : property
                return new Proxy(target, { __name, get: this.get })
            }
        }
    })
}

export const div = createProxy('div')
export const pre = createProxy('pre')


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 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 const a = createProxy('a')
export const p = createProxy('p')

export const h1 = createProxy('h1')
export const h2 = createProxy('h2')
export const h3 = createProxy('h3')
export const h4 = createProxy('h4')
export const h5 = createProxy('h5')
export const h6 = createProxy('h6')

export const ul = createProxy('ul')
export const ol = createProxy('ol')
export const dl = createProxy('dl')
export const li = createProxy('li')
export const dt = createProxy('dt')
export const dd = createProxy('dd')

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