Merge branch 'develop'

README.md

@@ -11,16 +11,17 @@ npm i @quasi-dev/autoform
 ## Demo
 
 ```typescript
-import { AutoForm } from '@quasi-dev/autoform'
-const af = new AutoForm({
-    type: 'input',
-    hint: 'Input a string.'
+import { AButton, AButtonModel } from '@quasi-dev/autoform'
+
+let el = document.getElementById('root') as HTMLDivElement
+
+let btn = new AButton(new AButtonModel())
+btn.mount(el)
+btn.patch({
+  caption: '123'
 })
-af.init(document.getElementById('root') as HTMLDivElement)
 ```
 
 ## 文档
 
-[Api](./doc/api.md)
-
-[JSON模板格式](./doc/template.md)
+暂缺

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quasi-dev/autoform",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "license": "MIT",
   "description": "A simple form generator",
@@ -10,16 +10,16 @@
     "_KermanX"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "publish": "npm publish --access=public"
   },
   "dependencies": {
     "mdui": "^1.0.2"
   },
   "devDependencies": {
     "typescript": "^5.0.2"
   },
-  "main": "./dist/src/index.js",
-  "types": "./dist/src/index.d.ts",
+  "main": "./src/index.ts",
   "files": [
     "dist/src",
     "README.md",
@@ -28,8 +28,7 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/src/index.d.ts",
-        "default": "./dist/src/index.js"
+        "default": "./src/index.ts"
       }
     }
   }

src/component/base.ts

@@ -0,0 +1,27 @@
+abstract class ComponentModel<MsgType> {
+    abstract update(payload: any, forward: (msg: MsgType) => void): void
+}
+
+abstract class ComponentBase<Model extends ComponentModel<MsgType>, MsgType> {
+    el: HTMLDivElement
+    // model: Model
+
+    constructor(public model: Model) {
+        this.el = document.createElement('div')
+        // this.model = new componentModelCtor()
+    }
+
+    public patch(payload: any): void {
+        this.model.update(payload, this.update.bind(this))
+    }
+
+    public abstract mount(el: HTMLDivElement): void
+
+    protected abstract update(msg: MsgType): void
+}
+
+
+export {
+    ComponentModel,
+    ComponentBase
+}

src/component/button.ts

@@ -0,0 +1,52 @@
+import mdui from "mdui"
+import { ComponentBase, ComponentModel } from ".."
+
+type AButtonMsgType = 'caption'
+
+class AButtonModel extends ComponentModel<AButtonMsgType> {
+    caption: string = ''
+    onclick: () => void = () => {}
+
+    update(payload: any, forward: (msg: AButtonMsgType) => void): void {
+        if (payload.caption !== undefined) {
+            this.caption = payload.caption
+            forward('caption')
+        }
+
+        if (payload.onclick !== undefined) {
+            this.onclick = payload.onclick
+        }
+    }
+}
+
+class AButton extends ComponentBase<AButtonModel, AButtonMsgType> {
+
+    button_el: HTMLButtonElement
+
+    mount(el: HTMLDivElement): void {
+        this.button_el = document.createElement('button')
+        this.button_el.classList.add('mdui-btn')
+        this.button_el.classList.add('mdui-btn-raised')
+        this.button_el.classList.add('mdui-ripple')
+        this.update('caption')
+        this.el.appendChild(this.button_el)
+
+        this.button_el.addEventListener('click', (_) => {
+            this.model.onclick()
+        })
+
+        el.appendChild(this.el)
+    }
+
+    update(msg: AButtonMsgType): void {
+        if (msg === 'caption') {
+            this.button_el.innerText = this.model.caption
+        }
+        mdui.mutation()
+    }
+}
+
+export {
+    AButtonModel,
+    AButton
+}

src/component/checkbox.ts

@@ -0,0 +1,78 @@
+import mdui from "mdui"
+import { ComponentBase, ComponentModel } from ".."
+
+type ACheckboxMsgType = 'value' | 'label'
+
+type ACheckboxStatus = 'checked' | 'unchecked' // | 'partial'
+
+class ACheckboxModel extends ComponentModel<ACheckboxMsgType> {
+    value: ACheckboxStatus = 'unchecked'
+    label: string = ''
+    onchange: () => void = () => {}
+
+    update(payload: any, forward: (msg: ACheckboxMsgType) => void): void {
+        if (payload.value !== undefined) {
+            this.value = payload.value
+            forward('value')
+        }
+        if (payload.label !== undefined) {
+            this.label = payload.label
+            forward('label')
+        }
+        if (payload.onchange !== undefined) {
+            this.onchange = payload.onchange
+        }
+    }
+}
+
+class ACheckbox extends ComponentBase<ACheckboxModel, ACheckboxMsgType> {
+
+    label_el: HTMLLabelElement
+    input_el: HTMLInputElement
+    i_el: HTMLElement
+
+    mount(el: HTMLDivElement): void {
+        this.label_el = document.createElement('label')
+        this.label_el.classList.add('mdui-checkbox')
+        // this.label_el.textContent = this.model.label
+
+        this.input_el = document.createElement('input')
+        this.input_el.type = 'checkbox'
+        this.label_el.appendChild(this.input_el)
+
+        this.i_el = document.createElement('i')
+        this.i_el.classList.add('mdui-checkbox-icon')
+        this.label_el.appendChild(this.i_el)
+
+        this.label_el.appendChild(new Text(this.model.label))
+        this.update('value')
+        this.input_el.addEventListener('change', () => {
+            this.model.value = this.input_el.checked ? 'checked': 'unchecked'
+            this.update('value')
+            this.model.onchange()
+        } )
+        this.el.appendChild(this.label_el)
+
+        el.appendChild(this.el)
+    }
+
+    update(msg: ACheckboxMsgType): void {
+        if (msg === 'label') {
+            // this.label_el.textContent = this.model.label
+            // this.label_el.appendChild(new Text(this.model.label))
+            (this.label_el.lastChild as Text).textContent = this.model.label
+            // this.label_el.appendChild(this.input_el)
+            // this.label_el.appendChild(this.i_el)
+            return
+        }
+        if (msg === 'value') {
+            this.input_el.checked = this.model.value === 'checked'
+        }
+        mdui.mutation()
+    }
+}
+
+export {
+    ACheckboxModel,
+    ACheckbox
+}