From 5531e4f4d045125c55fc0be157dafb55c560ca49 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Fri, 18 Aug 2023 11:25:07 +0530
Subject: feat: adds on focus and blur events + todo-list is feature complete

---
 examples/todo-list/style.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'examples/todo-list')

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;
-- 
cgit v1.3.1