模态窗

index.js

@@ -1,6 +1,9 @@
-import { div, span, pre, h1, p, ul, li, button, createElement } from './main.js'
+import { div, span, pre, h1, h2, p, ul, li, button, createElement } from './main.js'
 import { Dialog } from './widgets/dialog.js'
 
+document.body.style.fontFamily = 'Arial, sans-serif'
+document.body.style.fontSize = '14px'
+
 document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
     div.text('会话/账户')
 ]))
@@ -8,8 +11,8 @@ document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
 // cursor-pointer overflow-clip hover:text-pink-500
 document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.childs([
     h1.m_2rem.pt_2rem.text('Widgets!'),
-    p.m('2rem').p({ top: '2rem' }).text('是什么, 为什么, 怎么做?'),
+    p.m('1rem').p({ top: '1rem' }).text('是什么, 为什么, 怎么做?'),
-    ul.m('2rem').p({ top: '2rem' }).childs([
+    ul.m('1rem').p({ top: '1rem' }).childs([
         li.text('让事情变简单直观, 仅使用js代码, 而不必在 js/html/css 文件之间来回翻找'),
         li.text('大幅提高代码信息密度, 灵感来自 pug/winicss/flutter, 减少布局与样式冗余'),
         li.text('为dom对象添加链式操作方法, 使其返回值都是dom自身')
@@ -18,14 +21,20 @@ document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.chi
         textContent: '模态窗口 dialog',
         onclick: event => {
             document.body.appendChild(Dialog({
+                style: { width: '32rem', padding: '24px' },
                 children: [
-                    new span({ textContent: 'Hello world!' }),
+                    div.childs([
-                    new span({ textContent: 'Hello world!' }),
+                        h2.m_0.font_semibold.text('Are you absolutely sure?'),
+                        p.mt_8.color('#71717a').text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.')
+                    ]),
+                    div.flex.justify_end.gap_8.childs([
+                        button.text('Cancel'),
+                        button.text('Delete'),
+                    ]),
                 ]
             }))
         }
     }),
-    new span({ textContent: 'Hello world!' }),
 
     // 三类参数
     p.text(`

main.js

@@ -71,7 +71,8 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
                 'l': ['left'],
                 'r': ['right'],
                 'x': ['left', 'right'],
-                'y': ['top', 'bottom']
+                'y': ['top', 'bottom'],
+                'gap': ['gap'],
             }
 
             if (styleMap.hasOwnProperty(key)) {
@@ -93,10 +94,86 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
                 return
             }
 
+            if (key === 'justify') {
+                if (value === 'center') {
+                    element.style.justifyContent = 'center'
+                    return
+                }
+                if (value === 'end') {
+                    element.style.justifyContent = 'flex-end'
+                    return
+                }
+                return
+            }
+
             if (key === 'font') {
+                if (value === 'bold') {
+                    element.style.fontWeight = value
+                    return
+                }
+                if (value === 'semibold') {
+                    element.style.fontWeight = 600
+                    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
+            }
+
         }
 
         // 三个参数的情况下, 第一个参数是样式名, 第二个参数是样式, 第三个参数是数值
@@ -122,13 +199,25 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
     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.p = (padding) => applyStyle(element, 'padding', padding)
+
     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
 }
 
@@ -153,8 +242,8 @@ export class BaseElement {
     static text(text, tagName, names) {
         return createElement({ textContent: text }, tagName, names)
     }
-    static html(html) {
+    static html(html, tagName, names) {
-        return createElement({ innerHTML: html }, this.name)
+        return createElement({ innerHTML: html }, tagName, names)
     }
     static childs(childs, tagName, names) {
         return createElement({ children: childs }, tagName, names)
@@ -163,12 +252,12 @@ export class BaseElement {
         if (typeof width === 'number') width = width + 'px'
         return createElement({ style: { width } }, tagName, names)
     }
-    static h(height) {
+    static h(height, tagName, names) {
         if (typeof height === 'number') height = height + 'px'
-        return createElement({ style: { height } }, this.name)
+        return createElement({ style: { height } }, tagName, names)
     }
-    static bg(color) {
+    static bg(color, tagName, names) {
-        return createElement({ style: { backgroundColor: color } }, this.name)
+        return createElement({ style: { backgroundColor: color } }, tagName, names)
     }
     static p(args, tagName, names) {
         if (typeof args === 'string') {
@@ -200,33 +289,30 @@ export class BaseElement {
             return createElement({ style }, tagName, names)
         }
     }
-    static mx(value) {
+    static mx(value, tagName, names) {
         if (typeof value === 'number') value = value + 'px'
-        return createElement({ style: { marginLeft: value, marginRight: value } }, this.name)
+        return createElement({ style: { marginLeft: value, marginRight: value } }, tagName, names)
     }
-    static my(value) {
+    static my(value, tagName, names) {
         if (typeof value === 'number') value = value + 'px'
-        return createElement({ style: { marginTop: value, marginBottom: value } }, this.name)
+        return createElement({ style: { marginTop: value, marginBottom: value } }, tagName, names)
     }
-    static px(value) {
+    static px(value, tagName, names) {
         if (typeof value === 'number') value = value + 'px'
-        return createElement({ style: { paddingLeft: value, paddingRight: value } }, this.name)
+        return createElement({ style: { paddingLeft: value, paddingRight: value } }, tagName, names)
     }
-    static py(value) {
+    static py(value, tagName, names) {
         if (typeof value === 'number') value = value + 'px'
-        return createElement({ style: { paddingTop: value, paddingBottom: value } }, this.name)
+        return createElement({ style: { paddingTop: value, paddingBottom: value } }, tagName, names)
     }
-    static grid(options) {
+    static radius(radius, tagName, names) {
-        return createElement({ style: { display: 'grid', ...options } }, this.name)
+        return createElement({ style: { borderRadius: radius } }, tagName, names)
     }
-    static flex(options) {
+    static font(font, tagName, names) {
-        return createElement({ style: { display: 'flex', ...options } }, this.name)
+        return createElement({ style: { font } }, tagName, names)
     }
-    static radius(radius) {
+    static color(color, tagName, names) {
-        return createElement({ style: { borderRadius: radius } }, this.name)
+        return createElement({ style: { color } }, tagName, names)
-    }
-    static font(font) {
-        return createElement({ style: { font } }, this.name)
     }
 }
 

widgets/dialog.js

@@ -11,8 +11,8 @@ export function Dialog(options) {
             width: '100%',
             height: '100%',
             backdropFilter: 'blur(5px)',
-            duration: '0.5s',
+            duration: '0.2s',
-            transition: 'all 0.5s'
+            transition: 'all 0.2s'
         },
         onclick: async event => {
             if (event.target !== event.currentTarget) return
@@ -33,10 +33,9 @@ export function Dialog(options) {
                     left: '50%',
                     transform: 'translate(-50%, -50%)',
                     backgroundColor: '#fff',
-                    borderRadius: '150px',
+                    borderRadius: '0.5rem',
                     boxShadow: '0 0 1em #ccc',
                     overflow: 'hidden',
-                    display: 'flex',
                     justifyContent: 'center',
                     ...options.style,
                 }