基本结构

README.md

@@ -33,3 +33,29 @@ git clone git@git.satori.love:LaniakeaSupercluster/widgets.git
 npm i
 npm run dev
 ```
+
+### HTML 基本概念
+对于UI书写划分为两类, 一是外观样式, 一是结构关系
+一个元素的基本构成就是其外观样式, 因此它书写在声明它的同一列
+```javascript
+div.w(128).h(64)
+```
+
+嵌套关系则应该换行并缩进, 保持与 HTML 一致的风格
+```javascript
+document.body.appendChild(div.w(128).h(64).children([
+    div.text('Hello world!'),
+    div.text('Hello world!'),
+    div.text('Hello world!')
+]))
+```
+
+有时期望复用样式
+```javascript
+const option = { style: { width: '128px', height: '64px' } }
+div(option).children([
+    div.text('Hello world!'),
+    div.text('Hello world!'),
+    div.text('Hello world!')
+])
+```

index.js

@@ -1,21 +1,20 @@
-import { Button, Main } from "./main.js";
+//import { Button, Main } from "./main.js";
+//
+//document.body.appendChild(Main({
+//    children: [Button({
+//        textContent: 'Hello world',
+//        onclick: event => console.log('Hello world')
+//    })]
+//}));
 
-document.body.appendChild(Main({
+import { div, pre } from './main.js'
-    children: [Button({
+
-        textContent: 'Hello world',
+//const demo = div.w(128).h(64) //.onclick.stop('click').children([
-        onclick: event => console.log('Hello world')
+
-    })]
+document.body.appendChild(div.w(128).h(64).children([
-}));
+    div.text('Hello world!')
+]))
 
-//import { div, pre } from './main.js'
-//
-//const demo = div.w(128).h(64) //.onclick.stop('click')
-//demo.textContent = 'Hello world'
-//
-//console.log('demo', demo)
-//document.body.appendChild(demo)
-//document.body.appendChild(div.w(128).h(64).text('Hello world'))
-//
 //fetch('./index.js').then(res => res.text()).then(text => {
 //    document.body.appendChild(pre.text(text))
 //})

main.js

@@ -18,7 +18,6 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
 /* HTML5 语义标签 */
 export const List = (options) => createElement(options, 'ul')
 export const ListItem = (options) => createElement(options, 'li')
-export const Div = (options) => createElement(options, 'div')
 export const Span = (options) => createElement(options, 'span')
 export const Button = (options) => createElement({ ...options, style: { cursor: 'pointer', ...options.style } }, 'button')
 export const Form = (options) => createElement(options, 'form')
@@ -80,6 +79,7 @@ export const Label = (options) => createElement(options, 'label')
 export const Input = (options) => createElement(options, 'input')
 export const Select = (options) => createElement(options, 'select')
 export const TextArea = (options) => createElement(options, 'textarea')
+export const Div = (options) => createElement(options, 'div')
 
 export function Avatar(options) {
     const element = createElement(options, 'img')
@@ -143,11 +143,82 @@ export function Dialog(options) {
     return element
 }
 
+export class div extends HTMLDivElement {
+    constructor(options) {
+        super()
+        for (const key in options) {
+            if (key === 'text') {
+                this.textContent = options[key]
+                continue
+            }
+
+            if (key.startsWith('on')) this[key] = options[key]
+            else this.setAttribute(key, options[key])
+        }
+    }
+    static w(width) { return new this({ style: { width } }) }
+    static h(height) { return new this({ style: { height } }) }
+    static x(left) { return new this({ style: { left } }) }
+    static y(top) { return new this({ style: { top } }) }
+    static z(index) { return new this({ style: { zIndex: index } }) }
+    static r(radius) { return new this({ style: { borderRadius: radius } }) }
+    static b(border) { return new this({ style: { border } }) }
+    static p(padding) { return new this({ style: { padding } }) }
+    static m(margin) { return new this({ style: { margin } }) }
+    static o(opacity) { return new this({ style: { opacity } }) }
+    static flex(flex) { return new this({ style: { flex } }) }
+    static grid(grid) { return new this({ style: { grid } }) }
+    static text(text) {
+        console.log('text::', new this({ text }))
+        return new this({ text })
+    }
+    static children(children) { return new this({ children }) }
+
+    w(width) { this.style.width = width + 'px'; return this }
+    h(height) { this.style.height = height + 'px'; return this }
+    x(left) { this.style.left = left; return this }
+    y(top) { this.style.top = top; return this }
+    z(index) { this.style.zIndex = index; return this }
+    r(radius) { this.style.borderRadius = radius; return this }
+    b(border) { this.style.border = border; return this }
+    p(padding) { this.style.padding = padding; return this }
+    m(margin) { this.style.margin = margin; return this }
+    o(opacity) { this.style.opacity = opacity; return this }
+    flex(flex) { this.style.flex = flex; return this }
+    grid(grid) { this.style.grid = grid; return this }
+    text(text) {
+        console.log('text', text)
+        this.textContent = text; return this
+    }
+    children(children) {
+        children.forEach(child => {
+            console.log('child', child)
+            this.appendChild(child)
+        });
+        return this
+    }
+}
+
+export class pre extends HTMLPreElement {
+    constructor(options) {
+        super()
+        for (const key in options) {
+            if (key.startsWith('on')) this[key] = options[key]
+            else this.setAttribute(key, options[key])
+        }
+    }
+    static text(text) { return new this({ textContent: text }) }
+}
+
+customElements.define('my-div', div, { extends: 'div' })
+customElements.define('my-pre', pre, { extends: 'pre' })
+
 export default {
     createElement, List, ListItem, Span, Button, Img, Input, TextArea, Avatar, Dialog,
     Div, Form, Header, Nav, Main, Article, Section, Aside, Footer,
     H1, H2, H3, H4, H5, H6, P, A, Strong, Em, Small, Mark, Del, Ins, Pre, Code,
     Blockquote, Q, Cite, Hr, Br, Ol, Ul, Li, Dl, Dt, Dd, Figure, Figcaption,
     Video, Audio, Canvas, Svg, Math, Table, Caption, Thead, Tfoot, Tbody, Tr, Th, Td,
-    Col, Colgroup, Fieldset, Legend, Label, Select, TextArea
+    Col, Colgroup, Fieldset, Legend, Label, Select, TextArea,
+    div, pre
 }