docs

docs/index.html

@@ -116,6 +116,13 @@
                     <i-route name="repeat" caption="Repeat" :content="load(this)">
                     </i-route>
 
+                    <i-route name="input" caption="Input" :content="load(this)">
+                    </i-route>
+
+                    <i-route name="select" caption="Select" :content="load(this)">
+                    </i-route>
+
+
                 </i-route>
 
 

docs/md/components/input.md

@@ -1,5 +1,48 @@
 # I-Input
 
+Text input
 <i-codepreview>
-    
+    <i-input :data="'Hello World'"> </i-input>
-</i-codepreview>
+</i-codepreview>
+
+Field attribute
+
+<i-codepreview>
+    <div :data="{msg: 'Hello World'}">
+        <i-input field="msg"></i-input>
+    </div>
+</i-codepreview>
+
+Auto
+
+<i-codepreview>
+    <div :data="{msg: 'Edit me'}">
+        <i-input field="msg" auto></i-input>
+        <button onclick="alert(this.data.msg)"> Click Me </button>
+    </div>
+</i-codepreview>
+
+Auto with Modifiable
+
+<i-codepreview>
+    <div :data="new Modifiable({msg: 'Write something'})">
+        <i-input field="msg" auto></i-input>
+        <div>${d.msg}</div>
+    </div>
+</i-codepreview>
+
+
+Types
+
+<i-codepreview>
+    <i-input type="number"></i-input>
+    <i-input type="checkbox"></i-input>
+    <i-input type="date"></i-input>
+    <i-input type="file"></i-input>
+</i-codepreview>
+
+Validation
+
+<i-codepreview>
+    <i-input auto :validate="() => this.data.length > 5" vmsg="Min length 6 letters"></i-input>
+</i-codepreview>

docs/md/components/select.md

@@ -0,0 +1,7 @@
+# I-Select
+
+<i-codepreview>
+    <i-select :query=>
+    </i-select>
+</i-codepreview>
+ 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esiur/iui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Interactive User Interface",
   "main": "iui.js",
   "type": "module",

src/Data/Form.js

@@ -25,17 +25,13 @@ export default IUI.module(class Form extends IUIElement {
     }
 
     async create() {
-        //var elements = this.querySelectorAll("*[field]");
+
-        //for (var i = 0; i < elements.length; i++)
-        //    this.form[elements[i].getAttribute("field")] = elements[i];
     }
 
     async setData(value) {
         this.original = value;
-        //var copy = {};
+        super.setData(new Modifiable(this.original, true)); 
-        //Object.assign(copy, value);
+
-        super.setData(new Modifiable(this.original));//  Form._copy(this.original));
-        //super.setData({ ...this.original });
     }
 
   

src/Data/Modifiable.js

@@ -33,10 +33,10 @@ export default class Modifiable
         return true;
     }
 
-    constructor(original){
+    constructor(original, copy = false){
 
         this._events = {};
-        this._data = Modifiable._copy(original);
+        this._data = copy ?  Modifiable._copy(original) : original;
         this._original = original;
 
         for(let p in this._data)

src/UI/Input.js

@@ -150,6 +150,9 @@ export default IUI.module(class Input extends IUIElement {
             this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
         else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
             this._input.value = value == null ? '' : value;
+        else if (this.type == "file") {
+            // can't set value on file input
+        }
         else
             this._input.value = value;
 
@@ -163,7 +166,7 @@ export default IUI.module(class Input extends IUIElement {
             this.value = value[this.field];
         else if (this.field != null)
             this.value = null;
-            */
+        */
     }
 
 

src/iui.js

@@ -1,5 +1,6 @@
 import {IUI, iui} from "./Core/IUI.js";
 
+ 
 import "./Core/IUIElement.js";
 import './Core/App.js';
 
@@ -40,6 +41,7 @@ import './UI/Grid.js';
 
 import './UI/Location.js';
 import './UI/CodePreview.js';
+import Modifiable from "./Data/Modifiable.js";
 
 window.addEventListener("beforeprint", (e)=>{
    let viewRoute = router.current.viewRoute;
@@ -56,9 +58,9 @@ window.addEventListener("afterprint", (e)=>{
 window.addEventListener("load", async function () {
     await IUI.create(document.body);
     await IUI.created(document.body);
-    //if (window.app != null) {
+
-      //  window.app._emit("load", { app: window.app });
-   // }
 });
 
-window.iui = iui;
+window.iui = iui;
+
+window.Modifiable = Modifiable;