diff --git a/pyscriptjs/examples/todo-pylist.html b/pyscriptjs/examples/todo-pylist.html index e38be33..11d54fa 100644 --- a/pyscriptjs/examples/todo-pylist.html +++ b/pyscriptjs/examples/todo-pylist.html @@ -17,29 +17,20 @@ - - -
-
- - To Do List -
- - - - 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() - -
- - - + + To Do List + + + + 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() + + - - -
-
- + + + + diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts new file mode 100644 index 0000000..0bdbd51 --- /dev/null +++ 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; + 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'); + } + } + + \ No newline at end of file diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts index 2dc38fa..3aedd3f 100644 --- 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 index 6eb5679..321a79e 100644 --- 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);