组件拆分

wigets/avatar.js

@@ -0,0 +1,7 @@
+import { createElement } from '../main.js'
+
+export function Avatar(options) {
+    const element = createElement(options, 'img')
+    element.onerror = () => element.src = '/favicon.ico'
+    return element
+}

wigets/dialog.js

@@ -0,0 +1,57 @@
+import { createElement } from '../main.js'
+
+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
+}

wigets/navbar.js

@@ -0,0 +1,7 @@
+import { nav } from '../main.js'
+
+export default function navbar(options) {
+    return nav.bg_gray_500.w_full.h_12.childs([
+        new span({ textContent: 'Hello world!' }),
+    ])
+}