diff options
Diffstat (limited to '')
| -rw-r--r-- | TODO.norg | 7 | ||||
| -rw-r--r-- | examples/counter/index.html | 11 | ||||
| -rw-r--r-- | examples/counter/style.css | 25 | ||||
| -rw-r--r-- | examples/todo-list/style.css | 12 | ||||
| -rw-r--r-- | src/index.ts | 2 |
5 files changed, 12 insertions, 45 deletions
@@ -21,16 +21,17 @@ - (x) on update - (x) access child from an instance (update checkbox) - (x) access instance from child (delete task) - - ( ) Update --cssx-text on update - - ( ) keyboard events + - (x) focus blur events - ( ) string concatenation - ( ) eval + - ( ) Update --cssx-text on update + - ( ) keyboard events - ( ) Code cleanup - ( ) `request` error handling * Later - - ( ) `add-class` & `remove-class` should use self if id is not specified? - ( ) Evaluate `calc` + - ( ) `add-class` & `remove-class` should use self if id is not specified? - ( ) access an instance of component - ( ) Additional events - ( ) Improve error messages diff --git a/examples/counter/index.html b/examples/counter/index.html deleted file mode 100644 index 367aa63..0000000 --- a/examples/counter/index.html +++ /dev/null @@ -1,11 +0,0 @@ -<!doctype html> -<html lang="en"> - <head> - <title>Counter example</title> - <meta charset="UTF-8" /> - <link href="./style.css" rel="stylesheet" /> - </head> - <body> - <script async defer src="../../dist/renderer/index.js"></script> - </body> -</html> diff --git a/examples/counter/style.css b/examples/counter/style.css deleted file mode 100644 index b193f23..0000000 --- a/examples/counter/style.css +++ /dev/null @@ -1,25 +0,0 @@ -body { - --cssx-children: container todo-container; -} - -#container { - --cssx-children: counter btn-increment; - --count: '0'; -} - -#counter { -} -#counter::before { - content: 'Count: ' var(--count); -} - -#btn-increment { - display: inline-block; - padding: 0.5rem 1rem; - border: 1px solid gray; - - --cssx-on-click: update(container, --count, calc(var(--count) + 1)); -} -#btn-increment::after { - content: 'Increment'; -} diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index 35e44fd..efe888f 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -102,9 +102,6 @@ body * { box-sizing: border-box; } if(get-var(--is-editing), 'none', 'block') ) if(get-var(--is-editing), - set-attr(':scope [data-element=edit-task-input]', value, get-var(--text)), - "") - if(get-var(--is-editing), call(':scope [data-element=edit-task-input]', focus), "") ; @@ -123,19 +120,18 @@ body * { box-sizing: border-box; } } [data-element=task-text] { + padding: .2rem .8rem; flex: 2; - --cssx-on-click: update(get-var(--task-item-id), --is-editing, "true"); } [data-element=task-text]::after { content: var(--text); - padding-left: 0.8rem; } [data-element=edit-task-form] { display: none; width: 100%; - padding: 0 .8rem; + padding: 0 .5rem; --cssx-children: input#edit-task-input; --cssx-on-submit: @@ -154,6 +150,10 @@ body * { box-sizing: border-box; } border: none; border-bottom: 1px solid gray; font-size: 1rem; + padding: .2rem .3rem; + + --cssx-on-focus: set-attr(value, get-var(--text)); + --cssx-on-blur: update(get-var(--task-item-id), --is-editing, "false"); } [data-element=edit-task-input]:focus { outline: 1px solid #aaa; diff --git a/src/index.ts b/src/index.ts index ec22b70..a448924 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,8 @@ const EVENT_HANDLERS = { click: '--cssx-on-click', load: '--cssx-on-load', submit: '--cssx-on-submit', + blur: '--cssx-on-blur', + focus: '--cssx-on-focus', [CSSX_ON_MOUNT_EVENT]: '--cssx-on-mount', [CSSX_ON_UPDATE_EVENT]: '--cssx-on-update', } |