From c12ca95c423d4189aaff2bc71457690ef085c864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Thu, 16 May 2024 06:46:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js |  2 +-
 main.js  | 45 +++++++++++++++++++++++++++++++++++++++------
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/index.js b/index.js
index 022f769..7d8ff14 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,7 @@
 import { div, span, pre } from './main.js'
 
 document.body.appendChild(div.w(128).h(64).childs([
-    span.text('Hello world!'),
+    span.m('2rem').p({ top: '2rem' }).text('Hello world!'),
     new span({ textContent: 'Hello world!' }),
 ]))
 
diff --git a/main.js b/main.js
index 3d53beb..38b9852 100644
--- a/main.js
+++ b/main.js
@@ -19,13 +19,29 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
     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.p = (padding) => { element.style.padding = padding; return element }
-    element.m = (margin) => { element.style.margin = margin; return element }
+    //element.p = (padding) => { element.style.padding = padding; return element }
+    //element.m = (margin) => { element.style.margin = margin; 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.borderRadius = (radius) => { element.style.borderRadius = radius; return element }
+    element.p = (padding) => applyStyle(element, 'padding', padding)
+    element.m = (margin) => applyStyle(element, 'margin', margin)
     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) {
@@ -49,11 +65,25 @@ export class BaseElement {
     static bg(color) {
         return createElement({ style: { backgroundColor: color } }, this.name)
     }
-    static p(padding) {
-        return createElement({ style: { padding } }, this.name)
+    static p(...args) {
+        if (args.length === 1 && typeof args[0] === 'string') {
+            return createElement({ style: { padding: args[0] } }, this.name)
+        }
+        if (args.length === 1 && typeof args[0] === 'object') {
+            const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
+            const style = { paddingLeft: left, paddingRight: right, paddingTop: top, paddingBottom: bottom }
+            return createElement({ style }, this.name)
+        }
     }
-    static m(margin) {
-        return createElement({ style: { margin } }, this.name)
+    static m(...args) {
+        if (args.length === 1 && typeof args[0] === 'string') {
+            return createElement({ style: { margin: args[0] } }, this.name)
+        }
+        if (args.length === 1 && typeof args[0] === 'object') {
+            const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
+            const style = { marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom }
+            return createElement({ style }, this.name)
+        }
     }
     static grid(options) {
         return createElement({ style: { display: 'grid', ...options } }, this.name)
@@ -61,6 +91,9 @@ export class BaseElement {
     static flex(options) {
         return createElement({ style: { display: 'flex', ...options } }, this.name)
     }
+    static radius(radius) {
+        return createElement({ style: { borderRadius: radius } }, this.name)
+    }
 }
 
 export class div extends BaseElement {