fcrun/t
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

addTask skeleton

Browse Source
This commit is contained in:
Ian Gulliver
2024-12-22 10:23:37 -08:00
parent 721b382e63
commit 3ac8302f11
21 changed files with 381 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/elemwrapper.js
View File

@@ -1,27 +1,27 @@
export class ElemWrapper {
elem;
appendChild;
setAttribute;
style;
classList;
addEventListener;
remove;
appendChild;
cloneNode;
contains;
querySelectorAll;
querySelector;
querySelectorAll;
remove;
setAttribute;
constructor(elem) {
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.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) {
return new ElemWrapper(document.createElement(tagName));
@@ -37,5 +37,8 @@ export class ElemWrapper {
}
return elem;
}
setID(id) {
this.elem.id = id;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNiLElBQUksQ0FBYztJQUNsQixXQUFXLENBQXVCO0lBQ2xDLFlBQVksQ0FBd0M7SUFDcEQsS0FBSyxDQUFzQjtJQUMzQixTQUFTLENBQWU7SUFDeEIsZ0JBQWdCLENBQWdJO0lBQ2hKLE1BQU0sQ0FBdUI7SUFDN0IsU0FBUyxDQUF1QztJQUNoRCxRQUFRLENBQTBCO0lBQ2xDLGdCQUFnQixDQUE2QztJQUM3RCxhQUFhLENBQXdDO0lBRTVELFlBQVksSUFBaUI7UUFDekIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMzRCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQzdCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDckMsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuRSxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDL0MsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3JELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25FLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFlO1FBQ3pCLE9BQU8sSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxNQUFNLENBQUMsSUFBaUI7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELEdBQUcsQ0FBQyxJQUFZLEVBQUUsR0FBRyxLQUFlO1FBQ2hDLE1BQU0sSUFBSSxHQUFHLFdBQVcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzlDLENBQUM7UUFFRCxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0NBQ0oifQ==
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNiLElBQUksQ0FBYztJQUVsQixLQUFLLENBQXNCO0lBQzNCLFNBQVMsQ0FBZTtJQUV4QixnQkFBZ0IsQ0FBZ0k7SUFDaEosV0FBVyxDQUF1QjtJQUNsQyxTQUFTLENBQXVDO0lBQ2hELFFBQVEsQ0FBMEI7SUFDbEMsYUFBYSxDQUF3QztJQUNyRCxnQkFBZ0IsQ0FBNkM7SUFDN0QsTUFBTSxDQUF1QjtJQUM3QixZQUFZLENBQXdDO0lBRTNELFlBQVksSUFBaUI7UUFDekIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFFakIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBRXJDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkUsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkUsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvRCxDQUFDO0lBRUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFlO1FBQ3pCLE9BQU8sSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxNQUFNLENBQUMsSUFBaUI7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELEdBQUcsQ0FBQyxJQUFZLEVBQUUsR0FBRyxLQUFlO1FBQ2hDLE1BQU0sSUFBSSxHQUFHLFdBQVcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzlDLENBQUM7UUFFRCxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0lBRUQsS0FBSyxDQUFDLEVBQVU7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztDQUNKIn0=

31
js/main.js
View File

@@ -1,14 +1,41 @@
import { ElemWrapper } from "./elemwrapper";
import { SLCard } from "./slcard";
import { SLIcon } from "./slicon";
import { SLInput } from "./slinput";
import { SLTabGroup } from "./sltabgroup";
async function main() {
const root = new ElemWrapper(document.body);
const tabGroup = new SLTabGroup();
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.key === "Enter") {
addTask();
}
});
const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
tagsTab.append(new SLIcon("tags"));
}
document.addEventListener("DOMContentLoaded", main);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFMUMsS0FBSyxVQUFVLElBQUk7SUFDZixNQUFNLElBQUksR0FBRyxJQUFJLFdBQVcsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFFNUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztJQUNsQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRXRCLE1BQU0sQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUMzRCxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7SUFFNUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3hELE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztBQUN2QyxDQUFDO0FBRUQsUUFBUSxDQUFDLGdCQUFnQixDQUFDLGtCQUFrQixFQUFFLElBQUksQ0FBQyxDQUFDIn0=
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbEMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNwQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBRTFDLEtBQUssVUFBVSxJQUFJO0lBQ2YsTUFBTSxJQUFJLEdBQUcsSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRTVDLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7SUFDbEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUV0QixNQUFNLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDM0QsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO0lBRXpDLE1BQU0sU0FBUyxHQUFHLElBQUksTUFBTSxFQUFFLENBQUM7SUFDL0IsVUFBVSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUU3QixNQUFNLFVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO0lBQ2pDLFNBQVMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDN0IsVUFBVSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBRXJCLE1BQU0sWUFBWSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLENBQUM7SUFFN0QsTUFBTSxPQUFPLEdBQUcsR0FBRyxFQUFFO1FBQ2pCLE1BQU0sSUFBSSxHQUFHLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNuQyxJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDcEIsT0FBTztRQUNYLENBQUM7UUFFRCxVQUFVLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDbkIsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBRW5CLFlBQVksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQzNDLEtBQUssWUFBWSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlO1FBQ25ELFlBQVksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzVDLENBQUMsQ0FBQztJQUVGLFlBQVksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsR0FBRyxFQUFFO1FBQ3hDLE9BQU8sRUFBRSxDQUFDO0lBQ2QsQ0FBQyxDQUFDLENBQUM7SUFFSCxVQUFVLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUU7UUFDekMsSUFBSyxDQUFtQixDQUFDLEdBQUcsS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUN2QyxPQUFPLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztJQUVILE1BQU0sQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFDLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN4RCxPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDdkMsQ0FBQztBQUVELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyJ9

7
js/slcard.js Normal file
View File

@@ -0,0 +1,7 @@
import { SLElem } from "./slelem";
export class SLCard extends SLElem {
constructor() {
super("sl-card");
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xjYXJkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xjYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFbEMsTUFBTSxPQUFPLE1BQU8sU0FBUSxNQUFNO0lBQzlCO1FBQ0ksS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7Q0FDSiJ9

10
js/slelem.js Normal file
View File

@@ -0,0 +1,10 @@
import { ElemWrapper } from "./elemwrapper";
export class SLElem extends ElemWrapper {
constructor(tagName) {
super(document.createElement(tagName));
}
setSlot(slot) {
this.setAttribute("slot", slot);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xlbGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xlbGVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUMsTUFBTSxPQUFPLE1BQU8sU0FBUSxXQUFXO0lBQ25DLFlBQVksT0FBZTtRQUN2QixLQUFLLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFTSxPQUFPLENBQUMsSUFBWTtRQUN2QixJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNwQyxDQUFDO0NBQ0oifQ==

8
js/slicon.js
View File

@@ -1,8 +1,8 @@
import { ElemWrapper } from "./elemwrapper";
export class SLIcon extends ElemWrapper {
import { SLElem } from "./slelem";
export class SLIcon extends SLElem {
constructor(name) {
super(document.createElement("sl-icon"));
super("sl-icon");
this.setAttribute("name", name);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpY29uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xpY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUMsTUFBTSxPQUFPLE1BQU8sU0FBUSxXQUFXO0lBQ25DLFlBQVksSUFBWTtRQUNwQixLQUFLLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3BDLENBQUM7Q0FDSiJ9
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpY29uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xpY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFbEMsTUFBTSxPQUFPLE1BQU8sU0FBUSxNQUFNO0lBQzlCLFlBQVksSUFBWTtRQUNwQixLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDakIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQztDQUNKIn0=

32
js/slinput.js Normal file
View File

@@ -0,0 +1,32 @@
import { SLElem } from "./slelem";
import { SLIcon } from "./slicon";
export class SLInput extends SLElem {
constructor() {
super("sl-input");
}
addIcon(name, slot) {
const icon = new SLIcon(name);
icon.setSlot(slot);
this.append(icon);
return icon;
}
addPrefixIcon(name) {
return this.addIcon(name, "prefix");
}
addSuffixIcon(name) {
return this.addIcon(name, "suffix");
}
clear() {
this.elem.value = "";
}
getValue() {
return this.elem.value;
}
focus() {
this.elem.focus();
}
setPill() {
this.setAttribute("pill", "");
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpbnB1dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsaW5wdXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNsQyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRWxDLE1BQU0sT0FBTyxPQUFRLFNBQVEsTUFBTTtJQUMvQjtRQUNJLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUN0QixDQUFDO0lBRU0sT0FBTyxDQUFDLElBQVksRUFBRSxJQUF5QjtRQUNsRCxNQUFNLElBQUksR0FBRyxJQUFJLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUM5QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25CLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbEIsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQztJQUVNLGFBQWEsQ0FBQyxJQUFZO1FBQzdCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVNLGFBQWEsQ0FBQyxJQUFZO1FBQzdCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVNLEtBQUs7UUFDUCxJQUFJLENBQUMsSUFBeUIsQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQy9DLENBQUM7SUFFTSxRQUFRO1FBQ1gsT0FBUSxJQUFJLENBQUMsSUFBeUIsQ0FBQyxLQUFLLENBQUM7SUFDakQsQ0FBQztJQUVNLEtBQUs7UUFDUCxJQUFJLENBQUMsSUFBeUIsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUM1QyxDQUFDO0lBRU0sT0FBTztRQUNWLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7Q0FDSiJ9

8
js/sltab.js
View File

@@ -1,9 +1,9 @@
import { ElemWrapper } from "./elemwrapper";
export class SLTab extends ElemWrapper {
import { SLElem } from "./slelem";
export class SLTab extends SLElem {
constructor(panel) {
super(document.createElement("sl-tab"));
super("sl-tab");
this.setAttribute("panel", panel);
this.setAttribute("slot", "nav");
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9zbHRhYi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTVDLE1BQU0sT0FBTyxLQUFNLFNBQVEsV0FBVztJQUNsQyxZQUFZLEtBQWE7UUFDckIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztRQUN4QyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDO0NBQ0oifQ==
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9zbHRhYi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRWxDLE1BQU0sT0FBTyxLQUFNLFNBQVEsTUFBTTtJQUM3QixZQUFZLEtBQWE7UUFDckIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2hCLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ3JDLENBQUM7Q0FDSiJ9

8
js/sltabgroup.js
View File

@@ -1,9 +1,9 @@
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) {
const tab = new SLTab(panel);
@@ -22,4 +22,4 @@ export class SLTabGroup extends ElemWrapper {
];
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFiZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsTUFBTSxPQUFPLFVBQVcsU0FBUSxXQUFXO0lBQ3ZDO1FBQ0ksS0FBSyxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQWE7UUFDaEIsTUFBTSxHQUFHLEdBQUcsSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNqQixPQUFPLEdBQUcsQ0FBQztJQUNmLENBQUM7SUFFRCxXQUFXLENBQUMsSUFBWTtRQUNwQixNQUFNLFFBQVEsR0FBRyxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3RCLE9BQU8sUUFBUSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTLENBQUMsSUFBWTtRQUNsQixPQUFPO1lBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDakIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7U0FDekIsQ0FBQztJQUNOLENBQUM7Q0FDSiJ9
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFiZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNsQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFMUMsTUFBTSxPQUFPLFVBQVcsU0FBUSxNQUFNO0lBQ2xDO1FBQ0ksS0FBSyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRCxNQUFNLENBQUMsS0FBYTtRQUNoQixNQUFNLEdBQUcsR0FBRyxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ2pCLE9BQU8sR0FBRyxDQUFDO0lBQ2YsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUFZO1FBQ3BCLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDdEIsT0FBTyxRQUFRLENBQUM7SUFDcEIsQ0FBQztJQUVELFNBQVMsQ0FBQyxJQUFZO1FBQ2xCLE9BQU87WUFDSCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQztZQUNqQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztTQUN6QixDQUFDO0lBQ04sQ0FBQztDQUNKIn0=

8
js/sltabpanel.js
View File

@@ -1,8 +1,8 @@
import { ElemWrapper } from "./elemwrapper";
export class SLTabPanel extends ElemWrapper {
import { SLElem } from "./slelem";
export class SLTabPanel extends SLElem {
constructor(name) {
super(document.createElement("sl-tab-panel"));
super("sl-tab-panel");
this.setAttribute("name", name);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJwYW5lbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFicGFuZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU1QyxNQUFNLE9BQU8sVUFBVyxTQUFRLFdBQVc7SUFDdkMsWUFBWSxJQUFZO1FBQ3BCLEtBQUssQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7UUFDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQztDQUNKIn0=
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJwYW5lbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFicGFuZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUVsQyxNQUFNLE9BQU8sVUFBVyxTQUFRLE1BQU07SUFDbEMsWUFBWSxJQUFZO1FBQ3BCLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN0QixJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNwQyxDQUFDO0NBQ0oifQ==

56
static/app.css Normal file
View File

@@ -0,0 +1,56 @@
:not(:defined) {
visibility: hidden;
}
:host,
.sl-theme-dark {
--sl-color-primary-50: rgb(254 247 254);
--sl-color-primary-100: rgb(252 229 252);
--sl-color-primary-200: rgb(250 209 250);
--sl-color-primary-300: rgb(247 187 248);
--sl-color-primary-400: rgb(244 154 245);
--sl-color-primary-500: rgb(239 107 240);
--sl-color-primary-600: rgb(226 36 228);
--sl-color-primary-700: rgb(186 30 188);
--sl-color-primary-800: rgb(155 25 156);
--sl-color-primary-900: rgb(111 18 112);
--sl-color-primary-950: rgb(70 11 71);
--sl-input-focus-ring-color: transparent;
}
sl-tab sl-icon {
font-size: 20px;
}
sl-input:focus {
outline: none;
}
sl-input sl-icon {
cursor: pointer;
}
.highlight {
animation: colorFade 1.5s ease forwards;
}
@keyframes colorFade {
0% {
}
5% {
color: var(--sl-color-primary-600);
}
60% {
color: var(--sl-color-primary-600);
}
100% {
}
}
body {
font: 12px var(--sl-font-mono);
display: flex;
flex-direction: column;
align-items: center;
}

112
static/app.mjs
View File

@@ -1,28 +1,28 @@
// js/elemwrapper.js
var ElemWrapper = class _ElemWrapper {
elem;
appendChild;
setAttribute;
style;
classList;
addEventListener;
remove;
appendChild;
cloneNode;
contains;
querySelectorAll;
querySelector;
querySelectorAll;
remove;
setAttribute;
constructor(elem) {
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.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) {
return new _ElemWrapper(document.createElement(tagName));
@@ -38,37 +38,88 @@ var ElemWrapper = class _ElemWrapper {
}
return elem;
}
setID(id) {
this.elem.id = id;
}
};
// js/slelem.js
var SLElem = class extends ElemWrapper {
constructor(tagName) {
super(document.createElement(tagName));
}
setSlot(slot) {
this.setAttribute("slot", slot);
}
};
// js/slcard.js
var SLCard = class extends SLElem {
constructor() {
super("sl-card");
}
};
// js/slicon.js
var SLIcon = class extends ElemWrapper {
var SLIcon = class extends SLElem {
constructor(name) {
super(document.createElement("sl-icon"));
super("sl-icon");
this.setAttribute("name", name);
}
};
// js/slinput.js
var SLInput = class extends SLElem {
constructor() {
super("sl-input");
}
addIcon(name, slot) {
const icon = new SLIcon(name);
icon.setSlot(slot);
this.append(icon);
return icon;
}
addPrefixIcon(name) {
return this.addIcon(name, "prefix");
}
addSuffixIcon(name) {
return this.addIcon(name, "suffix");
}
clear() {
this.elem.value = "";
}
getValue() {
return this.elem.value;
}
focus() {
this.elem.focus();
}
setPill() {
this.setAttribute("pill", "");
}
};
// js/sltab.js
var SLTab = class extends ElemWrapper {
var SLTab = class extends SLElem {
constructor(panel) {
super(document.createElement("sl-tab"));
super("sl-tab");
this.setAttribute("panel", panel);
this.setAttribute("slot", "nav");
}
};
// js/sltabpanel.js
var SLTabPanel = class extends ElemWrapper {
var SLTabPanel = class extends SLElem {
constructor(name) {
super(document.createElement("sl-tab-panel"));
super("sl-tab-panel");
this.setAttribute("name", name);
}
};
// js/sltabgroup.js
var SLTabGroup = class extends ElemWrapper {
var SLTabGroup = class extends SLElem {
constructor() {
super(document.createElement("sl-tab-group"));
super("sl-tab-group");
}
addTab(panel) {
const tab = new SLTab(panel);
@@ -94,9 +145,34 @@ async function main() {
const tabGroup = new SLTabGroup();
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;
tasksAddIcon.classList.add("highlight");
};
tasksAddIcon.addEventListener("click", () => {
addTask();
});
tasksInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
addTask();
}
});
const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags");
tagsTab.append(new SLIcon("tags"));
}
document.addEventListener("DOMContentLoaded", main);
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvc2xpY29uLnRzIiwgIi4uL3RzL3NsdGFiLnRzIiwgIi4uL3RzL3NsdGFicGFuZWwudHMiLCAiLi4vdHMvc2x0YWJncm91cC50cyIsICIuLi90cy9tYWluLnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogW251bGwsIG51bGwsIG51bGwsIG51bGwsIG51bGwsIG51bGxdLAogICJtYXBwaW5ncyI6ICI7QUFBTSxJQUFPLGNBQVAsTUFBTyxhQUFXO0VBQ2I7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUVQLFlBQVksTUFBaUI7QUFDekIsU0FBSyxPQUFPO0FBQ1osU0FBSyxjQUFjLEtBQUssS0FBSyxZQUFZLEtBQUssS0FBSyxJQUFJO0FBQ3ZELFNBQUssZUFBZSxLQUFLLEtBQUssYUFBYSxLQUFLLEtBQUssSUFBSTtBQUN6RCxTQUFLLFFBQVEsS0FBSyxLQUFLO0FBQ3ZCLFNBQUssWUFBWSxLQUFLLEtBQUs7QUFDM0IsU0FBSyxtQkFBbUIsS0FBSyxLQUFLLGlCQUFpQixLQUFLLEtBQUssSUFBSTtBQUNqRSxTQUFLLFNBQVMsS0FBSyxLQUFLLE9BQU8sS0FBSyxLQUFLLElBQUk7QUFDN0MsU0FBSyxZQUFZLEtBQUssS0FBSyxVQUFVLEtBQUssS0FBSyxJQUFJO0FBQ25ELFNBQUssV0FBVyxLQUFLLEtBQUssU0FBUyxLQUFLLEtBQUssSUFBSTtBQUNqRCxTQUFLLG1CQUFtQixLQUFLLEtBQUssaUJBQWlCLEtBQUssS0FBSyxJQUFJO0FBQ2pFLFNBQUssZ0JBQWdCLEtBQUssS0FBSyxjQUFjLEtBQUssS0FBSyxJQUFJO0VBQy9EO0VBRUEsT0FBTyxPQUFPLFNBQWU7QUFDekIsV0FBTyxJQUFJLGFBQVksU0FBUyxjQUFjLE9BQU8sQ0FBQztFQUMxRDtFQUVBLE9BQU8sTUFBaUI7QUFDcEIsU0FBSyxZQUFZLEtBQUssSUFBSTtFQUM5QjtFQUVBLElBQUksU0FBaUIsT0FBZTtBQUNoQyxVQUFNLE9BQU8sYUFBWSxPQUFPLElBQUk7QUFDcEMsU0FBSyxPQUFPLElBQUk7QUFFaEIsYUFBUyxJQUFJLEdBQUcsSUFBSSxNQUFNLFFBQVEsS0FBSyxHQUFHO0FBQ3RDLFdBQUssYUFBYSxNQUFNLENBQUMsR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDO0lBQzVDO0FBRUEsV0FBTztFQUNYOzs7O0FDMUNFLElBQU8sU0FBUCxjQUFzQixZQUFXO0VBQ25DLFlBQVksTUFBWTtBQUNwQixVQUFNLFNBQVMsY0FBYyxTQUFTLENBQUM7QUFDdkMsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ0pFLElBQU8sUUFBUCxjQUFxQixZQUFXO0VBQ2xDLFlBQVksT0FBYTtBQUNyQixVQUFNLFNBQVMsY0FBYyxRQUFRLENBQUM7QUFDdEMsU0FBSyxhQUFhLFNBQVMsS0FBSztBQUNoQyxTQUFLLGFBQWEsUUFBUSxLQUFLO0VBQ25DOzs7O0FDTEUsSUFBTyxhQUFQLGNBQTBCLFlBQVc7RUFDdkMsWUFBWSxNQUFZO0FBQ3BCLFVBQU0sU0FBUyxjQUFjLGNBQWMsQ0FBQztBQUM1QyxTQUFLLGFBQWEsUUFBUSxJQUFJO0VBQ2xDOzs7O0FDSEUsSUFBTyxhQUFQLGNBQTBCLFlBQVc7RUFDdkMsY0FBQTtBQUNJLFVBQU0sU0FBUyxjQUFjLGNBQWMsQ0FBQztFQUNoRDtFQUVBLE9BQU8sT0FBYTtBQUNoQixVQUFNLE1BQU0sSUFBSSxNQUFNLEtBQUs7QUFDM0IsU0FBSyxPQUFPLEdBQUc7QUFDZixXQUFPO0VBQ1g7RUFFQSxZQUFZLE1BQVk7QUFDcEIsVUFBTSxXQUFXLElBQUksV0FBVyxJQUFJO0FBQ3BDLFNBQUssT0FBTyxRQUFRO0FBQ3BCLFdBQU87RUFDWDtFQUVBLFVBQVUsTUFBWTtBQUNsQixXQUFPO01BQ0gsS0FBSyxPQUFPLElBQUk7TUFDaEIsS0FBSyxZQUFZLElBQUk7O0VBRTdCOzs7O0FDckJKLGVBQWUsT0FBSTtBQUNmLFFBQU0sT0FBTyxJQUFJLFlBQVksU0FBUyxJQUFJO0FBRTFDLFFBQU0sV0FBVyxJQUFJLFdBQVU7QUFDL0IsT0FBSyxPQUFPLFFBQVE7QUFFcEIsUUFBTSxDQUFDLFVBQVUsVUFBVSxJQUFJLFNBQVMsVUFBVSxPQUFPO0FBQ3pELFdBQVMsT0FBTyxJQUFJLE9BQU8sY0FBYyxDQUFDO0FBRTFDLFFBQU0sQ0FBQyxTQUFTLFNBQVMsSUFBSSxTQUFTLFVBQVUsTUFBTTtBQUN0RCxVQUFRLE9BQU8sSUFBSSxPQUFPLE1BQU0sQ0FBQztBQUNyQztBQUVBLFNBQVMsaUJBQWlCLG9CQUFvQixJQUFJOyIsCiAgIm5hbWVzIjogW10KfQo=
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvc2xlbGVtLnRzIiwgIi4uL3RzL3NsY2FyZC50cyIsICIuLi90cy9zbGljb24udHMiLCAiLi4vdHMvc2xpbnB1dC50cyIsICIuLi90cy9zbHRhYi50cyIsICIuLi90cy9zbHRhYnBhbmVsLnRzIiwgIi4uL3RzL3NsdGFiZ3JvdXAudHMiLCAiLi4vdHMvbWFpbi50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFtudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsXSwKICAibWFwcGluZ3MiOiAiO0FBQU0sSUFBTyxjQUFQLE1BQU8sYUFBVztFQUNiO0VBRUE7RUFDQTtFQUVBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFUCxZQUFZLE1BQWlCO0FBQ3pCLFNBQUssT0FBTztBQUVaLFNBQUssUUFBUSxLQUFLLEtBQUs7QUFDdkIsU0FBSyxZQUFZLEtBQUssS0FBSztBQUUzQixTQUFLLG1CQUFtQixLQUFLLEtBQUssaUJBQWlCLEtBQUssS0FBSyxJQUFJO0FBQ2pFLFNBQUssY0FBYyxLQUFLLEtBQUssWUFBWSxLQUFLLEtBQUssSUFBSTtBQUN2RCxTQUFLLFlBQVksS0FBSyxLQUFLLFVBQVUsS0FBSyxLQUFLLElBQUk7QUFDbkQsU0FBSyxXQUFXLEtBQUssS0FBSyxTQUFTLEtBQUssS0FBSyxJQUFJO0FBQ2pELFNBQUssZ0JBQWdCLEtBQUssS0FBSyxjQUFjLEtBQUssS0FBSyxJQUFJO0FBQzNELFNBQUssbUJBQW1CLEtBQUssS0FBSyxpQkFBaUIsS0FBSyxLQUFLLElBQUk7QUFDakUsU0FBSyxTQUFTLEtBQUssS0FBSyxPQUFPLEtBQUssS0FBSyxJQUFJO0FBQzdDLFNBQUssZUFBZSxLQUFLLEtBQUssYUFBYSxLQUFLLEtBQUssSUFBSTtFQUM3RDtFQUVBLE9BQU8sT0FBTyxTQUFlO0FBQ3pCLFdBQU8sSUFBSSxhQUFZLFNBQVMsY0FBYyxPQUFPLENBQUM7RUFDMUQ7RUFFQSxPQUFPLE1BQWlCO0FBQ3BCLFNBQUssWUFBWSxLQUFLLElBQUk7RUFDOUI7RUFFQSxJQUFJLFNBQWlCLE9BQWU7QUFDaEMsVUFBTSxPQUFPLGFBQVksT0FBTyxJQUFJO0FBQ3BDLFNBQUssT0FBTyxJQUFJO0FBRWhCLGFBQVMsSUFBSSxHQUFHLElBQUksTUFBTSxRQUFRLEtBQUssR0FBRztBQUN0QyxXQUFLLGFBQWEsTUFBTSxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztJQUM1QztBQUVBLFdBQU87RUFDWDtFQUVBLE1BQU0sSUFBVTtBQUNaLFNBQUssS0FBSyxLQUFLO0VBQ25COzs7O0FDbERFLElBQU8sU0FBUCxjQUFzQixZQUFXO0VBQ25DLFlBQVksU0FBZTtBQUN2QixVQUFNLFNBQVMsY0FBYyxPQUFPLENBQUM7RUFDekM7RUFFTyxRQUFRLE1BQVk7QUFDdkIsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ1BFLElBQU8sU0FBUCxjQUFzQixPQUFNO0VBQzlCLGNBQUE7QUFDSSxVQUFNLFNBQVM7RUFDbkI7Ozs7QUNIRSxJQUFPLFNBQVAsY0FBc0IsT0FBTTtFQUM5QixZQUFZLE1BQVk7QUFDcEIsVUFBTSxTQUFTO0FBQ2YsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ0hFLElBQU8sVUFBUCxjQUF1QixPQUFNO0VBQy9CLGNBQUE7QUFDSSxVQUFNLFVBQVU7RUFDcEI7RUFFTyxRQUFRLE1BQWMsTUFBeUI7QUFDbEQsVUFBTSxPQUFPLElBQUksT0FBTyxJQUFJO0FBQzVCLFNBQUssUUFBUSxJQUFJO0FBQ2pCLFNBQUssT0FBTyxJQUFJO0FBQ2hCLFdBQU87RUFDWDtFQUVPLGNBQWMsTUFBWTtBQUM3QixXQUFPLEtBQUssUUFBUSxNQUFNLFFBQVE7RUFDdEM7RUFFTyxjQUFjLE1BQVk7QUFDN0IsV0FBTyxLQUFLLFFBQVEsTUFBTSxRQUFRO0VBQ3RDO0VBRU8sUUFBSztBQUNQLFNBQUssS0FBMEIsUUFBUTtFQUM1QztFQUVPLFdBQVE7QUFDWCxXQUFRLEtBQUssS0FBMEI7RUFDM0M7RUFFTyxRQUFLO0FBQ1AsU0FBSyxLQUEwQixNQUFLO0VBQ3pDO0VBRU8sVUFBTztBQUNWLFNBQUssYUFBYSxRQUFRLEVBQUU7RUFDaEM7Ozs7QUNuQ0UsSUFBTyxRQUFQLGNBQXFCLE9BQU07RUFDN0IsWUFBWSxPQUFhO0FBQ3JCLFVBQU0sUUFBUTtBQUNkLFNBQUssYUFBYSxTQUFTLEtBQUs7QUFDaEMsU0FBSyxhQUFhLFFBQVEsS0FBSztFQUNuQzs7OztBQ0xFLElBQU8sYUFBUCxjQUEwQixPQUFNO0VBQ2xDLFlBQVksTUFBWTtBQUNwQixVQUFNLGNBQWM7QUFDcEIsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ0ZFLElBQU8sYUFBUCxjQUEwQixPQUFNO0VBQ2xDLGNBQUE7QUFDSSxVQUFNLGNBQWM7RUFDeEI7RUFFQSxPQUFPLE9BQWE7QUFDaEIsVUFBTSxNQUFNLElBQUksTUFBTSxLQUFLO0FBQzNCLFNBQUssT0FBTyxHQUFHO0FBQ2YsV0FBTztFQUNYO0VBRUEsWUFBWSxNQUFZO0FBQ3BCLFVBQU0sV0FBVyxJQUFJLFdBQVcsSUFBSTtBQUNwQyxTQUFLLE9BQU8sUUFBUTtBQUNwQixXQUFPO0VBQ1g7RUFFQSxVQUFVLE1BQVk7QUFDbEIsV0FBTztNQUNILEtBQUssT0FBTyxJQUFJO01BQ2hCLEtBQUssWUFBWSxJQUFJOztFQUU3Qjs7OztBQ3BCSixlQUFlLE9BQUk7QUFDZixRQUFNLE9BQU8sSUFBSSxZQUFZLFNBQVMsSUFBSTtBQUUxQyxRQUFNLFdBQVcsSUFBSSxXQUFVO0FBQy9CLE9BQUssT0FBTyxRQUFRO0FBRXBCLFFBQU0sQ0FBQyxVQUFVLFVBQVUsSUFBSSxTQUFTLFVBQVUsT0FBTztBQUN6RCxXQUFTLE9BQU8sSUFBSSxPQUFPLFdBQVcsQ0FBQztBQUV2QyxRQUFNLFlBQVksSUFBSSxPQUFNO0FBQzVCLGFBQVcsT0FBTyxTQUFTO0FBRTNCLFFBQU0sYUFBYSxJQUFJLFFBQU87QUFDOUIsWUFBVSxPQUFPLFVBQVU7QUFDM0IsYUFBVyxRQUFPO0FBRWxCLFFBQU0sZUFBZSxXQUFXLGNBQWMsYUFBYTtBQUUzRCxRQUFNLFVBQVUsTUFBSztBQUNqQixVQUFNLE9BQU8sV0FBVyxTQUFRO0FBQ2hDLFFBQUksS0FBSyxXQUFXLEdBQUc7QUFDbkI7SUFDSjtBQUVBLGVBQVcsTUFBSztBQUNoQixlQUFXLE1BQUs7QUFFaEIsaUJBQWEsVUFBVSxPQUFPLFdBQVc7QUFDekMsU0FBSyxhQUFhLEtBQUs7QUFDdkIsaUJBQWEsVUFBVSxJQUFJLFdBQVc7RUFDMUM7QUFFQSxlQUFhLGlCQUFpQixTQUFTLE1BQUs7QUFDeEMsWUFBTztFQUNYLENBQUM7QUFFRCxhQUFXLGlCQUFpQixXQUFXLENBQUMsTUFBSztBQUN6QyxRQUFLLEVBQW9CLFFBQVEsU0FBUztBQUN0QyxjQUFPO0lBQ1g7RUFDSixDQUFDO0FBRUQsUUFBTSxDQUFDLFNBQVMsU0FBUyxJQUFJLFNBQVMsVUFBVSxNQUFNO0FBQ3RELFVBQVEsT0FBTyxJQUFJLE9BQU8sTUFBTSxDQUFDO0FBQ3JDO0FBRUEsU0FBUyxpQkFBaUIsb0JBQW9CLElBQUk7IiwKICAibmFtZXMiOiBbXQp9Cg==

34
static/index.html
View File

@@ -14,38 +14,8 @@
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');"
/>
<style>
:not(:defined) {
visibility: hidden;
}
:host,
.sl-theme-dark {
--sl-color-primary-50: rgb(254 247 254);
--sl-color-primary-100: rgb(252 229 252);
--sl-color-primary-200: rgb(250 209 250);
--sl-color-primary-300: rgb(247 187 248);
--sl-color-primary-400: rgb(244 154 245);
--sl-color-primary-500: rgb(239 107 240);
--sl-color-primary-600: rgb(226 36 228);
--sl-color-primary-700: rgb(186 30 188);
--sl-color-primary-800: rgb(155 25 156);
--sl-color-primary-900: rgb(111 18 112);
--sl-color-primary-950: rgb(70 11 71);
}
sl-tab sl-icon {
font-size: 20px;
}
body {
font: 12px var(--sl-font-mono);
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAADb2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTY8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjU2PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIFBybyAzLjYuMTQ8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAyNC0xMi0yMVQwNjo1Njo1MS0wODowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzIwMDAwLzEwMDAwPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqN3zs2AAAEQUlEQVR42u3dsWrbUBSA4UATSItDm46lMcG+wgSTKS+Ql+jzemwHLy0YPKQR0rkyQYGQTE3I4L5DKJZcfR+cXXDOr0mggwMAAAAAAAAAAAAAAAAAAAAAAHiL8rw8Xs/WJ32YxfXi0EZgR5ppc1an/KdOedv1RNr88gIA8QPiB8QPiB8QPyB+QPyA+AHxA+IH8YsfxC9+EL/4QfziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8YsfxA+IHxA/IH5A/ID4AfED4gfED4gfxC9+EL/4QfziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8YsfxC9+EL/4YTdiGmmf41/N21GV8l2V4qXrqVPOyy/LD66K/Yj/Ioq6yK/7HH+kpu3D89cp37fzduSqEL/4QfziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8YsfxC9+EL/4QfziB/GLH8QvfsTffTxFU26vtkfiB/GLH8QvfhC/+EH84gfxix+GFH91WZ2KHwYZ/+NpleJJ/CB+8YP4xQ/iFz+IX/wgfvEjfvGLH/GLX/yIX/ziR/ziFz/iF7/4Eb/4xY/4xS9+xC9+EL/4QfziB/H/2/jrlB/FD+LvcJqn6rI6dVWIf4Dxxzw+uyrEL34Qv/hB/OIH8YsfxD/Q+JdXy6NI+XukHF1PnfJNeV5+UoX4xb+j+OsibnvyncLzZrIZq0L84hc/4he/+BG/+MWP+MUvfsQvfvEjfvGLH/GLX/z01800kvjFL/4BaqbNWZXiWfziF7/4xS9+xC9+8SN+8Ysf8Ytf/Ihf/OJH/OIXP+IXv/gRv/j3J/4omte4iEIV4hf/AOO/nd3OVCF+8Ysf8Ytf/Ihf/OJH/OIXP+IXv/gRv/jFj/jFL37662Hy8LFO+aYPv4uKlH+IX/wgfvGD+MUP4hc/iF/8iF/84mdw8Y8r8YufIVrNV6NIuRW/+BG/+MWP+MUvfsQvfvEjfvGLH/GLX/yIX/ziR/ziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8Ysf/qv48734YaDxt/N2JH4Qv/hB/OIH8YsfxC9+EL/4YUjxb79t30WRf4ofBhh/LX4Qv/hB/OIH8YsfxC9+EL/4Eb/4xY/4xS9+xC9+8SN+8Ysf8Ytf/Ihf/OJH/OIXP+IXv6tC/OIH8Ysfeia+xvtITVQpXrqffLfP8dcpP/+eROGqYAf6Fv9mshnbCogfED8gfkD8gPgB8QPiB8QPiB8QP4hf/CB+8YP4xQ/iFz+IX/wgfvGD+MUP4hc/iF/8IH7xg/jFD+IXP4hf/CB+QPyA+AHxA+IHxA+IHxA/IH5A/CB+8YP4xQ/iFz+IX/wgfvGD+MUP4hc/iF/8IH7xg/jFD+IXP4hf/CB+8YP4gd1YXC8O17P1SR+mPC+PbQQAAAAAAAAAAAAAAAAAAAAAgDf5Cx0DM6ztMrCxAAAAAElFTkSuQmCC">
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAADb2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTY8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjU2PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIFBybyAzLjYuMTQ8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAyNC0xMi0yMVQwNjo1Njo1MS0wODowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzIwMDAwLzEwMDAwPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqN3zs2AAAEQUlEQVR42u3dsWrbUBSA4UATSItDm46lMcG+wgSTKS+Ql+jzemwHLy0YPKQR0rkyQYGQTE3I4L5DKJZcfR+cXXDOr0mggwMAAAAAAAAAAAAAAAAAAAAAAHiL8rw8Xs/WJ32YxfXi0EZgR5ppc1an/KdOedv1RNr88gIA8QPiB8QPiB8QPyB+QPyA+AHxA+IH8YsfxC9+EL/4QfziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8YsfxA+IHxA/IH5A/ID4AfED4gfED4gfxC9+EL/4QfziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8YsfxC9+EL/4YTdiGmmf41/N21GV8l2V4qXrqVPOyy/LD66K/Yj/Ioq6yK/7HH+kpu3D89cp37fzduSqEL/4QfziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8YsfxC9+EL/4QfziB/GLH8QvfsTffTxFU26vtkfiB/GLH8QvfhC/+EH84gfxix+GFH91WZ2KHwYZ/+NpleJJ/CB+8YP4xQ/iFz+IX/wgfvEjfvGLH/GLX/yIX/ziR/ziFz/iF7/4Eb/4xY/4xS9+xC9+EL/4QfziB/H/2/jrlB/FD+LvcJqn6rI6dVWIf4Dxxzw+uyrEL34Qv/hB/OIH8YsfxD/Q+JdXy6NI+XukHF1PnfJNeV5+UoX4xb+j+OsibnvyncLzZrIZq0L84hc/4he/+BG/+MWP+MUvfsQvfvEjfvGLH/GLX/z01800kvjFL/4BaqbNWZXiWfziF7/4xS9+xC9+8SN+8Ysf8Ytf/Ihf/OJH/OIXP+IXv/gRv/j3J/4omte4iEIV4hf/AOO/nd3OVCF+8Ysf8Ytf/Ihf/OJH/OIXP+IXv/gRv/jFj/jFL37662Hy8LFO+aYPv4uKlH+IX/wgfvGD+MUP4hc/iF/8iF/84mdw8Y8r8YufIVrNV6NIuRW/+BG/+MWP+MUvfsQvfvEjfvGLH/GLX/yIX/ziR/ziB/GLH8QvfhC/+EH84gfxix/EL34Qv/hB/OIH8Ysf/qv48734YaDxt/N2JH4Qv/hB/OIH8YsfxC9+EL/4YUjxb79t30WRf4ofBhh/LX4Qv/hB/OIH8YsfxC9+EL/4Eb/4xY/4xS9+xC9+8SN+8Ysf8Ytf/Ihf/OJH/OIXP+IXv6tC/OIH8Ysfeia+xvtITVQpXrqffLfP8dcpP/+eROGqYAf6Fv9mshnbCogfED8gfkD8gPgB8QPiB8QPiB8QP4hf/CB+8YP4xQ/iFz+IX/wgfvGD+MUP4hc/iF/8IH7xg/jFD+IXP4hf/CB+QPyA+AHxA+IHxA+IHxA/IH5A/CB+8YP4xQ/iFz+IX/wgfvGD+MUP4hc/iF/8IH7xg/jFD+IXP4hf/CB+8YP4gd1YXC8O17P1SR+mPC+PbQQAAAAAAAAAAAAAAAAAAAAAgDf5Cx0DM6ztMrCxAAAAAElFTkSuQmCC" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
<script type="module" src="app.mjs"></script>
</head>

26
ts/elemwrapper.ts
View File

@@ -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;
}
}

37
ts/main.ts
View File

@@ -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"));

7
ts/slcard.ts Normal file
View File

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

11
ts/slelem.ts Normal file
View File

@@ -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);
}
}

6
ts/slicon.ts
View File

@@ -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);
}
}

39
ts/slinput.ts Normal file
View File

@@ -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", "");
}
}

6
ts/sltab.ts
View File

@@ -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");
}

7
ts/sltabgroup.ts
View File

@@ -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 {

6
ts/sltabpanel.ts
View File

@@ -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);
}
}