feat: adding a card demo (#20)

Author: eugenioenko

dist/kasper.js

@@ -64,7 +64,8 @@ textarea {
 }
 
 textarea {
-  height: 120px;
+  height: 76px;
+  min-height: 76px;
 }
 
 button:hover {

dist/kasper.min.js

@@ -48,7 +48,16 @@
                 </div>
                 <div>{{todo.task}}</div>
               </div>
-              <button type="button" @on:click="onAddCard()">
+              <void @if="editing.value === category.name">
+                <textarea
+                  @let="onInputRef($ref)"
+                  @on:change="onCardChange($event, category.name)"
+                  tabindex="0"
+                  name="task"
+                  placeholder="Enter a task"
+                ></textarea>
+              </void>
+              <button type="button" @on:click="onAddCard(category.name)">
                 + Add a card
               </button>
             </div>
@@ -79,8 +88,28 @@
           this.loading.set(false);
         };
 
-        onAddCard = () => {
-          alert("TODO");
+        onAddCard = (category) => {
+          this.editing.set(category);
+          setTimeout(() => {
+            if (this.textarea) {
+              this.textarea.focus();
+            }
+          }, 1);
+        };
+
+        onInputRef = (ref) => {
+          this.textarea = ref;
+        };
+
+        onCardChange = (event, category) => {
+          const todo = {
+            task: event.target.value,
+            id: new Date().getTime(),
+            tags: ["green"],
+          };
+          this.todos.value[category].push(todo);
+          this.editing.set(null);
+          this.todos.set(this.todos.value);
         };
 
         onDragStart = (todoId, category, event) => {

live/css/style.css

@@ -255,12 +255,15 @@ export class Scanner {
         );
         break;
       case "=":
+        if (this.match("=")) {
+          this.addToken(
+            this.match("=") ? TokenType.EqualEqual : TokenType.EqualEqual,
+            null
+          );
+          break;
+        }
         this.addToken(
-          this.match("=")
-            ? TokenType.EqualEqual
-            : this.match(">")
-            ? TokenType.Arrow
-            : TokenType.Equal,
+          this.match(">") ? TokenType.Arrow : TokenType.Equal,
           null
         );
         break;

live/demo.html

@@ -161,8 +161,9 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
   private doLet(init: KNode.Attribute, node: KNode.Element, parent: Node) {
     const originalScope = this.interpreter.scope;
     this.interpreter.scope = new Scope(originalScope);
+    const element = this.createElement(node, parent);
+    this.interpreter.scope.set("$ref", element);
     this.execute(init.value);
-    this.createElement(node, parent);
     this.interpreter.scope = originalScope;
   }
 
@@ -219,7 +220,7 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
     }
   }
 
-  private createElement(node: KNode.Element, parent?: Node): void {
+  private createElement(node: KNode.Element, parent?: Node): Node | undefined {
     const isVoid = node.name === "void";
     const isComponent = !!this.registry[node.name];
     const element = isVoid ? parent : document.createElement(node.name);
@@ -267,7 +268,7 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
     }
 
     if (node.self) {
-      return;
+      return element;
     }
 
     this.createSiblings(node.children, element);
@@ -276,6 +277,7 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
     if (!isVoid && parent) {
       parent.appendChild(element);
     }
+    return element;
   }
 
   private createComponentArgs(args: KNode.Attribute[]): Record<string, any> {