geoff
/
um
mirror of https://github.com/n2geoff/um
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

start to refine/expand example todo

This commit is contained in:
Geoff Doty 2024-07-20 16:45:38 -04:00
parent ed2e84ee0a
commit 323d5c062a
1 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
example/index.html
View File

@ -4,50 +4,81 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tagged UI Creation Lib</title> <title>UM | Todo Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">
<style>
button.link {
height: 1rem;
padding: .25rem;
}
div, span {margin-top: .25rem; margin-bottom: .25rem;}
label>* {vertical-align: top;}
</style>
</head> </head>
<body> <body>
<main>
<div id="app"></div> <div id="app"></div>
</main>
<script type="module"> <script type="module">
import {app, h} from "../src/index.js"; import {app, h} from "../index.js";
const $ = document.querySelector.bind(document); const $ = document.querySelector.bind(document);
const todo = app({ const todo = app({
state: {todos: ["one", "two", "three"], value: ""}, state: {todos: [], value: ""},
actions: { actions: {
add: (state, event) => { submit: (state, event) => {
return {...state, todos: [...state.todos, $("#todo").value]}; if(event.key === "Enter") {
const value = $("#todo").value;
if(String(value).trim()) {
$("#todo").value = "";
return {...state, todos: [...state.todos, value]}
}
}
} }
}, },
view: (state, actions) => { view: (state, actions) => {
return h("main", [ return h("main", [
h("h1", "Todo App"), h("h1", {style:"text-align: center"}, "Todos"),
h("hr"),
h("div", [ h("div", [
h("label", "Todo"), h("input", {
h("input", {id: "todo", value: state.value}), id: "todo",
h("button", {onclick: actions.add}, "Add") placeholder: "What needs to be done?",
onkeypress: actions.submit,
value: state.value
}),
]), ]),
h("hr"), h("div", state.todos.map((i) => {
h("ul", state.todos.map((i) => { return h("div", {style: "border-bottom: 1px solid #CCC"}, [
return h("li", {}, i) h("label", [
h("input", {type: "checkbox"}),
h("span", i)
])
])
}) })
), ),
h("hr"), h("hr"),
h("strong", `Count: ${state.todos.length}`), h("div",{class: "grid"}, [
h("div",{style: "margin-left: 1rem"} ,`${state.todos.length} items left`),
h("div",{class: "grid"}, [
h("button",{class: "link"}, "All"),
h("button",{class: "link"}, "Active"),
h("button",{class: "link"}, "Completed"),
]),
h("div", [
h("button",{class: "link", style: "float:right"}, "Clear Completed")
]),
]),
h("hr"), h("hr"),
]); ]);
}, },
mount: "#app" mount: "#app"
}); });
console.log({todo}); // Update State outside Creation
// todo.state.todos[0] = "Hello";
// todo.update();
todo.state.todos[0] = "Hello";
todo.update();
</script> </script>
</body> </body>