Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit44afda7

Browse files
committed
add inputbox and clearn todo html even more
1 parent3aa3ba0 commit44afda7

File tree

4 files changed

+68
-25
lines changed

4 files changed

+68
-25
lines changed

‎pyscriptjs/examples/todo-pylist.html

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,20 @@
1717
<py-register-widgetsrc="/pylist.py"name="py-list"klass="PyList"></py-widget>
1818
</head>
1919

20-
<bodyclass="container">
21-
22-
<mainclass="max-w-xs mx-auto mt-4">
23-
<section>
24-
25-
<py-title>To Do List</py-title>
26-
<div>
27-
<inputid="new-task-content"class="border flex-1 mr-3 border-gray-300 p-2 rounded"type="text"py-mount>
28-
29-
<py-buttonid="new-task-btn"label="Add Task!">
30-
def on_click(evt):
31-
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
32-
myList.add(PyItem(task, labels=['content'], state_key="done"))
33-
new_task_content.clear()
34-
</button>
35-
</div>
36-
37-
<py-listid="myList"></py-list>
38-
20+
<body>
21+
<py-title>To Do List</py-title>
22+
<py-boxwidths="2/3;1/3">
23+
<py-inputboxid="new-task-content"></py-inputbox>
24+
<py-buttonid="new-task-btn"label="Add Task!">
25+
def on_click(evt):
26+
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
27+
myList.add(PyItem(task, labels=['content'], state_key="done"))
28+
new_task_content.clear()
29+
</button>
30+
</py-box>
3931

40-
<py-replid="my-repl"auto-generate="true"></py-repl>
41-
42-
</section>
43-
</main>
44-
</body>
32+
<py-listid="myList"></py-list>
33+
34+
<py-replid="my-repl"auto-generate="true"></py-repl>
35+
</body>
4536
</html>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import{BaseEvalElement}from'./base';
2+
import{addClasses,ltrim,htmlDecode}from'../utils';
3+
4+
exportclassPyInputBoxextendsBaseEvalElement{
5+
shadow:ShadowRoot;
6+
wrapper:HTMLElement;
7+
theme:string;
8+
widths:Array<string>;
9+
label:string;
10+
mount_name:string;
11+
constructor(){
12+
super();
13+
14+
// attach shadow so we can preserve the element original innerHtml content
15+
// this.shadow = this.attachShadow({ mode: 'open'});
16+
17+
// this.wrapper = document.createElement('slot');
18+
// this.shadow.appendChild(this.wrapper);
19+
if(this.hasAttribute('label')){
20+
this.label=this.getAttribute('label');
21+
}
22+
}
23+
24+
25+
connectedCallback(){
26+
this.label=htmlDecode(this.innerHTML);
27+
this.mount_name=this.id.split("-").join("_");
28+
this.innerHTML='';
29+
30+
letmainDiv=document.createElement('input');
31+
mainDiv.type="text";
32+
addClasses(mainDiv,["border","flex-1","w-full","mr-3","border-gray-300","p-2","rounded"]);
33+
34+
mainDiv.id=this.id;
35+
this.id=`${this.id}-container`;
36+
this.appendChild(mainDiv);
37+
38+
// now that we appended and the element is attached, lets connect with the event handlers
39+
// defined for this widget
40+
this.code=`${this.mount_name} = Element("${mainDiv.id}")`;
41+
setTimeout(()=>{
42+
this.eval(this.code).then(()=>{
43+
console.log('registered handlers');
44+
});
45+
},4000);
46+
47+
console.log('py-title connected');
48+
}
49+
}
50+
51+

‎pyscriptjs/src/interpreter.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,6 @@ class PyListTemplate:
156156
def data(self):
157157
return [c.data for c in self._children]
158158
159-
@property
160159
def render_children(self):
161160
return [c.element.innerHTML.replace("\\n", "") for c in self._children]
162161

‎pyscriptjs/src/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { PyEnv } from "./components/pyenv";
66
import{PyBox}from"./components/pybox";
77
import{PyButton}from"./components/pybutton";
88
import{PyTitle}from"./components/pytitle";
9+
import{PyInputBox}from"./components/pyinputbox";
910
import{PyWidget}from"./components/base";
1011

1112
letxPyScript=customElements.define('py-script',PyScript);
@@ -14,6 +15,7 @@ let xPyEnv = customElements.define('py-env', PyEnv);
1415
letxPyBox=customElements.define('py-box',PyBox);
1516
letxPyButton=customElements.define('py-button',PyButton);
1617
letxPyTitle=customElements.define('py-title',PyTitle);
18+
letxPyInputBox=customElements.define('py-inputbox',PyInputBox);
1719
letxPyWidget=customElements.define('py-register-widget',PyWidget);
1820

1921

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp