Counter example

From 5531e4f4d045125c55fc0be157dafb55c560ca49 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Fri, 18 Aug 2023 11:25:07 +0530 Subject: feat: adds on focus and blur events + todo-list is feature complete --- TODO.norg | 7 ++++--- examples/counter/index.html | 11 ----------- examples/counter/style.css | 25 ------------------------- examples/todo-list/style.css | 12 ++++++------ src/index.ts | 2 ++ 5 files changed, 12 insertions(+), 45 deletions(-) delete mode 100644 examples/counter/index.html delete mode 100644 examples/counter/style.css diff --git a/TODO.norg b/TODO.norg index 3c428d9..b3eca07 100644 --- a/TODO.norg +++ b/TODO.norg @@ -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 @@ - - - - Counter example - - - - - - - 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 @@ -101,9 +101,6 @@ body * { box-sizing: border-box; } display, 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', } -- cgit v1.3.1