From 6411d58b48682c65165a1e717a9bf837737887f3 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Sun, 13 Aug 2023 21:12:14 +0530 Subject: fix: get-var hack --- examples/todo-list/index.html | 10 ++++ examples/todo-list/style.css | 106 +++++++++++++++++++++++++++++++++--------- 2 files changed, 95 insertions(+), 21 deletions(-) create mode 100644 examples/todo-list/index.html (limited to 'examples/todo-list') diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html new file mode 100644 index 0000000..064ef2b --- /dev/null +++ b/examples/todo-list/index.html @@ -0,0 +1,10 @@ + + + + Task destroyer + + + + + + diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index 7533210..5316d41 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -1,33 +1,97 @@ -body { - --cssx-children: todo-container; -} +:root { + --color-gray: #cccccc; + --color-accent: #5180e9; + + font-size: 16px; + color: #555; -#todo-container { - --cssx-children: todo-input todo-list; - --todo-list: list(); + --cssx-children: main#container; } -#todo-input { - --cssx-children: input-field submit-btn; +#container { + max-width: 600px; + margin: 2rem auto; + border: 1px solid var(--color-gray); + border-radius: 5px; + overflow: hidden; + + --cssx-children: form#task-input-form #task-list; } -#submit-btn { - --cssx-on-click: update( - todo-container, - --todo-list, - list-append(var(--todo-list), tuple(get-attr(input-field, value), false)) - ); +#task-input-form { + display: flex; + width: 100%; + + /* prettier-ignore */ + --cssx-on-submit: + prevent-default() + add-children( + task-list, + instance(div#task-item, map(--text: attr(text-input, 'value'))) + ) + set-attr(text-input, value, '') + ; + + /* prettier-ignore */ + --cssx-on-mount: + add-children( + task-list, + instance(div#task-item, map(--text: "Buy lemons")) + ) + add-children( + task-list, + instance(div#task-item, map(--text: "Make lemonaide")) + ) + add-children( + task-list, + instance(div#task-item, map(--text: "Kill all the non-believers")) + ) + ; + + /* prettier-ignore */ + --cssx-children: + input#text-input[placeholder="Eg: Buy Milk"] + button#create-task-btn[type=submit] + ; } -#submit-btn::after { - content: 'Submit'; + +#text-input { + display: block; + width: 100%; + padding: 0.7rem 1rem; + font-size: 1rem; + border: none; + border-bottom: 1px solid var(--color-gray); } -#todo-list { - --cssx-iter-children: iter(var(--todo-list), --todo-item, todo-item); +#create-task-btn { + padding: 0 2rem; + background-color: var(--color-accent); + color: white; + font-weight: bold; + border: none; + font-size: 1.2rem; + + --cssx-text: '+'; } -#todo-item { + +[data-instance=task-item] { + --text: "default text"; + --checked: "false"; + + padding: 1rem; + cursor: pointer; + + --cssx-on-click: update(--checked, if(get-var(--checked), "false", "true")); } -#todo-item::after { - content: var(--todo-item); +[data-instance=task-item]::after { + content: "[" var(--checked) "] " var(--text); } + +[data-instance=task-item]:not(:first-child) { + content: ""; + display: block; + border-top: 1px solid var(--color-gray); +} + -- cgit v1.3.1