addTask skeleton

ts/elemwrapper.ts

@@ -1,28 +1,32 @@
 export class ElemWrapper {
     public elem: HTMLElement;
-    public appendChild: (node: Node) => void;
-    public setAttribute: (name: string, value: string) => void;
+
     public style: CSSStyleDeclaration;
     public classList: DOMTokenList;
+
     public addEventListener: (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined) => void;
-    public remove: (node: Node) => void;
+    public appendChild: (node: Node) => void;
     public cloneNode: (deep?: boolean | undefined) => Node;
     public contains: (node: Node) => boolean;
-    public querySelectorAll: (selectors: string) => NodeListOf<Element>;
     public querySelector: (selectors: string) => Element | null;
+    public querySelectorAll: (selectors: string) => NodeListOf<Element>;
+    public remove: (node: Node) => void;
+    public setAttribute: (name: string, value: string) => void;
 
     constructor(elem: HTMLElement) {
         this.elem = elem;
-        this.appendChild = this.elem.appendChild.bind(this.elem);
-        this.setAttribute = this.elem.setAttribute.bind(this.elem);
+
         this.style = this.elem.style;
         this.classList = this.elem.classList;
+
         this.addEventListener = this.elem.addEventListener.bind(this.elem);
-        this.remove = this.elem.remove.bind(this.elem);
+        this.appendChild = this.elem.appendChild.bind(this.elem);
         this.cloneNode = this.elem.cloneNode.bind(this.elem);
-        this.contains = this.elem.contains.bind(this.elem);
-        this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+        this.contains = this.elem.contains.bind(this.elem); 
         this.querySelector = this.elem.querySelector.bind(this.elem);
+        this.querySelectorAll = this.elem.querySelectorAll.bind(this.elem);
+        this.remove = this.elem.remove.bind(this.elem);
+        this.setAttribute = this.elem.setAttribute.bind(this.elem);
     }
 
     static create(tagName: string) {
@@ -43,4 +47,8 @@ export class ElemWrapper {
 
         return elem;
     }
+
+    setID(id: string) {
+        this.elem.id = id;
+    }
 }

ts/main.ts

@@ -1,5 +1,7 @@
 import { ElemWrapper } from "./elemwrapper";
+import { SLCard } from "./slcard";
 import { SLIcon } from "./slicon";
+import { SLInput } from "./slinput";
 import { SLTabGroup } from "./sltabgroup";
 
 async function main() {
@@ -9,7 +11,40 @@ async function main() {
     root.append(tabGroup);
 
     const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks");
-    tasksTab.append(new SLIcon("slash-circle"));
+    tasksTab.append(new SLIcon("list-task"));
+
+    const tasksCard = new SLCard();
+    tasksPanel.append(tasksCard);
+
+    const tasksInput = new SLInput();
+    tasksCard.append(tasksInput);
+    tasksInput.setPill();
+    
+    const tasksAddIcon = tasksInput.addSuffixIcon("plus-circle");
+
+    const addTask = () => {
+        const task = tasksInput.getValue();
+        if (task.length === 0) {
+            return;
+        }
+
+        tasksInput.clear();
+        tasksInput.focus();
+
+        tasksAddIcon.classList.remove("highlight");
+        void tasksAddIcon.elem.offsetWidth; // force reflow
+        tasksAddIcon.classList.add("highlight");
+    };
+
+    tasksAddIcon.addEventListener("click", () => {
+        addTask();
+    });
+
+    tasksInput.addEventListener("keydown", (e) => {
+        if ((e as KeyboardEvent).key === "Enter") {
+            addTask();
+        }
+    });
 
     const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
     tagsTab.append(new SLIcon("tags"));

ts/slcard.ts

@@ -0,0 +1,7 @@
+import { SLElem } from "./slelem";
+
+export class SLCard extends SLElem {
+    constructor() {
+        super("sl-card");
+    }
+}

ts/slelem.ts

@@ -0,0 +1,11 @@
+import { ElemWrapper } from "./elemwrapper";
+
+export class SLElem extends ElemWrapper {
+    constructor(tagName: string) {
+        super(document.createElement(tagName));
+    }
+
+    public setSlot(slot: string) {
+        this.setAttribute("slot", slot);
+    }
+}

ts/slicon.ts

@@ -1,8 +1,8 @@
-import { ElemWrapper } from "./elemwrapper";
+import { SLElem } from "./slelem";
 
-export class SLIcon extends ElemWrapper {
+export class SLIcon extends SLElem {
     constructor(name: string) {
-        super(document.createElement("sl-icon"));
+        super("sl-icon");
         this.setAttribute("name", name);
     }
 }

ts/slinput.ts

@@ -0,0 +1,39 @@
+import { SLElem } from "./slelem";
+import { SLIcon } from "./slicon";
+
+export class SLInput extends SLElem {
+    constructor() {
+        super("sl-input");
+    }
+
+    public addIcon(name: string, slot: "prefix" | "suffix"): SLIcon {
+        const icon = new SLIcon(name);
+        icon.setSlot(slot);
+        this.append(icon);
+        return icon;
+    }
+
+    public addPrefixIcon(name: string): SLIcon {
+        return this.addIcon(name, "prefix");
+    }
+
+    public addSuffixIcon(name: string): SLIcon {
+        return this.addIcon(name, "suffix");
+    }
+
+    public clear() {
+        (this.elem as HTMLInputElement).value = "";
+    }
+
+    public getValue(): string {
+        return (this.elem as HTMLInputElement).value;
+    }
+
+    public focus() {
+        (this.elem as HTMLInputElement).focus();
+    }
+
+    public setPill() {
+        this.setAttribute("pill", "");
+    }
+}

ts/sltab.ts

@@ -1,8 +1,8 @@
-import { ElemWrapper } from "./elemwrapper";
+import { SLElem } from "./slelem";
 
-export class SLTab extends ElemWrapper {
+export class SLTab extends SLElem {
     constructor(panel: string) {
-        super(document.createElement("sl-tab"));
+        super("sl-tab");
         this.setAttribute("panel", panel);
         this.setAttribute("slot", "nav");
     }

ts/sltabgroup.ts

@@ -1,9 +1,10 @@
-import { ElemWrapper } from "./elemwrapper";
+import { SLElem } from "./slelem";
 import { SLTab } from "./sltab";
 import { SLTabPanel } from "./sltabpanel";
-export class SLTabGroup extends ElemWrapper {
+
+export class SLTabGroup extends SLElem {
     constructor() {
-        super(document.createElement("sl-tab-group"));
+        super("sl-tab-group");
     }
 
     addTab(panel: string): SLTab {

ts/sltabpanel.ts

@@ -1,8 +1,8 @@
-import { ElemWrapper } from "./elemwrapper";
+import { SLElem } from "./slelem";
 
-export class SLTabPanel extends ElemWrapper {
+export class SLTabPanel extends SLElem {
     constructor(name: string) {
-        super(document.createElement("sl-tab-panel"));
+        super("sl-tab-panel");
         this.setAttribute("name", name);
     }
 }