add inputbox and clearn todo html even more

fpliger · fpliger · commit 44afda7aa84b · 2022-04-20T16:12:01.000-05:00
diff --git a/pyscriptjs/examples/todo-pylist.html b/pyscriptjs/examples/todo-pylist.html
@@ -17,29 +17,20 @@
     <py-register-widget src="/pylist.py" name="py-list" klass="PyList"></py-widget>
   </head>
 
-  <body class="container">
-
-  <main class="max-w-xs mx-auto mt-4">
-    <section>
-
-    <py-title>To Do List</py-title>
-    <div>
-      <input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text" py-mount>
-      
-      <py-button id="new-task-btn" label="Add Task!">
-        def on_click(evt):
-          task = { "content": new_task_content.value,  "done": False, "created_at": dt.now() }
-          myList.add(PyItem(task, labels=['content'], state_key="done"))
-          new_task_content.clear()
-      </button>
-    </div>
-  
-    <py-list id="myList"></py-list>
-
+  <body>
+      <py-title>To Do List</py-title>
+      <py-box widths="2/3;1/3">
+        <py-inputbox id="new-task-content"></py-inputbox>
+        <py-button id="new-task-btn" label="Add Task!">
+          def on_click(evt):
+            task = { "content": new_task_content.value,  "done": False, "created_at": dt.now() }
+            myList.add(PyItem(task, labels=['content'], state_key="done"))
+            new_task_content.clear()
+        </button>
+      </py-box>
     
-    <py-repl id="my-repl" auto-generate="true"> </py-repl>
-  
-  </section>
-  </main>
-</body>
+      <py-list id="myList"></py-list>
+
+      <py-repl id="my-repl" auto-generate="true"> </py-repl>
+  </body>
 </html>
diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts
@@ -0,0 +1,51 @@
+import { BaseEvalElement } from './base';
+import { addClasses, ltrim, htmlDecode } from '../utils';
+
+export class PyInputBox extends BaseEvalElement {
+    shadow: ShadowRoot;
+    wrapper: HTMLElement;
+    theme: string;
+    widths: Array<string>;
+    label: string;
+    mount_name: string;
+    constructor() {
+        super();
+  
+        // attach shadow so we can preserve the element original innerHtml content
+        // this.shadow = this.attachShadow({ mode: 'open'});
+  
+        // this.wrapper = document.createElement('slot');
+        // this.shadow.appendChild(this.wrapper);
+        if (this.hasAttribute('label')) {
+          this.label = this.getAttribute('label');
+        }
+      }
+
+
+      connectedCallback() {
+        this.label = htmlDecode(this.innerHTML);
+        this.mount_name  = this.id.split("-").join("_");
+        this.innerHTML = '';
+        
+        let mainDiv = document.createElement('input');
+        mainDiv.type = "text";
+        addClasses(mainDiv, ["border", "flex-1", "w-full", "mr-3", "border-gray-300", "p-2", "rounded"]);
+          
+        mainDiv.id = this.id;
+        this.id = `${this.id}-container`;
+        this.appendChild(mainDiv);
+      
+      // now that we appended and the element is attached, lets connect with the event handlers
+      // defined for this widget
+      this.code = `${this.mount_name} = Element("${ mainDiv.id }")`;
+      setTimeout(() => { 
+        this.eval(this.code).then(() => {
+          console.log('registered handlers');
+        });
+       }, 4000);
+          
+        console.log('py-title connected');
+      }
+  }
+
+  
diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts
@@ -156,7 +156,6 @@ class PyListTemplate:
   def data(self):
     return [c.data for c in self._children]
 
-  @property
   def render_children(self):
     return [c.element.innerHTML.replace("\\n", "") for c in self._children]
 
diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
@@ -6,6 +6,7 @@ import { PyEnv } from "./components/pyenv";
 import { PyBox } from "./components/pybox";
 import { PyButton } from "./components/pybutton";
 import { PyTitle } from "./components/pytitle";
+import { PyInputBox } from "./components/pyinputbox";
 import { PyWidget } from "./components/base";
 
 let xPyScript = customElements.define('py-script', PyScript);
@@ -14,6 +15,7 @@ let xPyEnv = customElements.define('py-env', PyEnv);
 let xPyBox = customElements.define('py-box', PyBox);
 let xPyButton = customElements.define('py-button', PyButton);
 let xPyTitle = customElements.define('py-title', PyTitle);
+let xPyInputBox = customElements.define('py-inputbox', PyInputBox);
 let xPyWidget = customElements.define('py-register-widget', PyWidget);
 
 
