From d575735bb47976453ec743de925922a8e2c9e7db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Wed, 15 May 2024 20:56:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A0=E6=B3=95=E5=8A=A8=E6=80=81=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA,=20=E6=81=A2=E5=A4=8D=E9=BB=98=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js     |  29 +++--
 main.js      | 295 ++++++++++++---------------------------------------
 package.json |   2 +-
 3 files changed, 89 insertions(+), 237 deletions(-)

diff --git a/index.js b/index.js
index 10b399a..2d53253 100644
--- a/index.js
+++ b/index.js
@@ -1,12 +1,21 @@
-import { div, pre } from './main.js'
+import { Button, Main } from "./main.js";
 
-const demo = div.w(128).h(64) //.onclick.stop('click')
-demo.textContent = 'Hello world'
+document.body.appendChild(Main({
+    children: [Button({
+        textContent: 'Hello world',
+        onclick: event => console.log('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))
-})
+//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))
+//})
diff --git a/main.js b/main.js
index c265122..2dc7da8 100644
--- a/main.js
+++ b/main.js
@@ -16,228 +16,70 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
 }
 
 /* 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 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 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')
+export const Header = (options) => createElement(options, 'header')
+export const Nav = (options) => createElement(options, 'nav')
+export const Main = (options) => createElement(options, 'main')
+export const Article = (options) => createElement(options, 'article')
+export const Section = (options) => createElement(options, 'section')
+export const Aside = (options) => createElement(options, 'aside')
+export const Footer = (options) => createElement(options, 'footer')
+export const H1 = (options) => createElement(options, 'h1')
+export const H2 = (options) => createElement(options, 'h2')
+export const H3 = (options) => createElement(options, 'h3')
+export const H4 = (options) => createElement(options, 'h4')
+export const H5 = (options) => createElement(options, 'h5')
+export const H6 = (options) => createElement(options, 'h6')
+export const P = (options) => createElement(options, 'p')
+export const A = (options) => createElement(options, 'a')
+export const Strong = (options) => createElement(options, 'strong')
+export const Em = (options) => createElement(options, 'em')
+export const Small = (options) => createElement(options, 'small')
+export const Mark = (options) => createElement(options, 'mark')
+export const Del = (options) => createElement(options, 'del')
+export const Ins = (options) => createElement(options, 'ins')
+export const Pre = (options) => createElement(options, 'pre')
+export const Code = (options) => createElement(options, 'code')
+export const Blockquote = (options) => createElement(options, 'blockquote')
+export const Q = (options) => createElement(options, 'q')
+export const Cite = (options) => createElement(options, 'cite')
+export const Hr = (options) => createElement(options, 'hr')
+export const Br = (options) => createElement(options, 'br')
+export const Ol = (options) => createElement(options, 'ol')
+export const Ul = (options) => createElement(options, 'ul')
+export const Li = (options) => createElement(options, 'li')
+export const Dl = (options) => createElement(options, 'dl')
+export const Dt = (options) => createElement(options, 'dt')
+export const Dd = (options) => createElement(options, 'dd')
+export const Figure = (options) => createElement(options, 'figure')
+export const Figcaption = (options) => createElement(options, 'figcaption')
+export const Img = (options) => createElement(options, 'img')
+export const Video = (options) => createElement(options, 'video')
+export const Audio = (options) => createElement(options, 'audio')
+export const Canvas = (options) => createElement(options, 'canvas')
+export const Svg = (options) => createElement(options, 'svg')
+export const Math = (options) => createElement(options, 'math')
+export const Table = (options) => createElement(options, 'table')
+export const Caption = (options) => createElement(options, 'caption')
+export const Thead = (options) => createElement(options, 'thead')
+export const Tfoot = (options) => createElement(options, 'tfoot')
+export const Tbody = (options) => createElement(options, 'tbody')
+export const Tr = (options) => createElement(options, 'tr')
+export const Th = (options) => createElement(options, 'th')
+export const Td = (options) => createElement(options, 'td')
+export const Col = (options) => createElement(options, 'col')
+export const Colgroup = (options) => createElement(options, 'colgroup')
+export const Fieldset = (options) => createElement(options, 'fieldset')
+export const Legend = (options) => createElement(options, 'legend')
+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 function Avatar(options) {
     const element = createElement(options, 'img')
@@ -303,8 +145,9 @@ export function Dialog(options) {
 
 export default {
     createElement, List, ListItem, Span, Button, Img, Input, TextArea, Avatar, Dialog,
-    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, Br, Hr,
-    Ol, Ul, Li, Dl, Dt, Dd, Figure, Figcaption, Div,
-    Table, Caption, Thead, Tfoot, Tbody, Tr, Th, Td, Col, Colgroup
+    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
 }
diff --git a/package.json b/package.json
index 6a628bd..dc5bcac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@laniakeasupercluster/widgets",
   "description": "A simple widgets tracker",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "main.js",
   "author": "Laniakea Supercluster <huan0016@gmail.com>",