diff --git a/js/elemwrapper.js b/js/elemwrapper.js index ede4e2f..229c812 100644 --- a/js/elemwrapper.js +++ b/js/elemwrapper.js @@ -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== \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNiLElBQUksQ0FBYztJQUVsQixLQUFLLENBQXNCO0lBQzNCLFNBQVMsQ0FBZTtJQUV4QixnQkFBZ0IsQ0FBZ0k7SUFDaEosV0FBVyxDQUF1QjtJQUNsQyxTQUFTLENBQXVDO0lBQ2hELFFBQVEsQ0FBMEI7SUFDbEMsYUFBYSxDQUF3QztJQUNyRCxnQkFBZ0IsQ0FBNkM7SUFDN0QsTUFBTSxDQUF1QjtJQUM3QixZQUFZLENBQXdDO0lBRTNELFlBQVksSUFBaUI7UUFDekIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFFakIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBRXJDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkUsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkUsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvRCxDQUFDO0lBRUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFlO1FBQ3pCLE9BQU8sSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxNQUFNLENBQUMsSUFBaUI7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELEdBQUcsQ0FBQyxJQUFZLEVBQUUsR0FBRyxLQUFlO1FBQ2hDLE1BQU0sSUFBSSxHQUFHLFdBQVcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzlDLENBQUM7UUFFRCxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0lBRUQsS0FBSyxDQUFDLEVBQVU7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztDQUNKIn0= \ No newline at end of file diff --git a/js/main.js b/js/main.js index 5033f29..1f48b4f 100644 --- a/js/main.js +++ b/js/main.js @@ -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= \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbEMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNwQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBRTFDLEtBQUssVUFBVSxJQUFJO0lBQ2YsTUFBTSxJQUFJLEdBQUcsSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRTVDLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7SUFDbEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUV0QixNQUFNLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDM0QsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO0lBRXpDLE1BQU0sU0FBUyxHQUFHLElBQUksTUFBTSxFQUFFLENBQUM7SUFDL0IsVUFBVSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUU3QixNQUFNLFVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO0lBQ2pDLFNBQVMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDN0IsVUFBVSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBRXJCLE1BQU0sWUFBWSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLENBQUM7SUFFN0QsTUFBTSxPQUFPLEdBQUcsR0FBRyxFQUFFO1FBQ2pCLE1BQU0sSUFBSSxHQUFHLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNuQyxJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDcEIsT0FBTztRQUNYLENBQUM7UUFFRCxVQUFVLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDbkIsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBRW5CLFlBQVksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQzNDLEtBQUssWUFBWSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlO1FBQ25ELFlBQVksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzVDLENBQUMsQ0FBQztJQUVGLFlBQVksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsR0FBRyxFQUFFO1FBQ3hDLE9BQU8sRUFBRSxDQUFDO0lBQ2QsQ0FBQyxDQUFDLENBQUM7SUFFSCxVQUFVLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUU7UUFDekMsSUFBSyxDQUFtQixDQUFDLEdBQUcsS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUN2QyxPQUFPLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztJQUVILE1BQU0sQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFDLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN4RCxPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDdkMsQ0FBQztBQUVELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyJ9 \ No newline at end of file diff --git a/js/slcard.js b/js/slcard.js new file mode 100644 index 0000000..a743a19 --- /dev/null +++ b/js/slcard.js @@ -0,0 +1,7 @@ +import { SLElem } from "./slelem"; +export class SLCard extends SLElem { + constructor() { + super("sl-card"); + } +} +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xjYXJkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xjYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFbEMsTUFBTSxPQUFPLE1BQU8sU0FBUSxNQUFNO0lBQzlCO1FBQ0ksS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7Q0FDSiJ9 \ No newline at end of file diff --git a/js/slelem.js b/js/slelem.js new file mode 100644 index 0000000..f0e4857 --- /dev/null +++ b/js/slelem.js @@ -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== \ No newline at end of file diff --git a/js/slicon.js b/js/slicon.js index c0a4123..4d713ca 100644 --- a/js/slicon.js +++ b/js/slicon.js @@ -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 \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpY29uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xpY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFbEMsTUFBTSxPQUFPLE1BQU8sU0FBUSxNQUFNO0lBQzlCLFlBQVksSUFBWTtRQUNwQixLQUFLLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDakIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQztDQUNKIn0= \ No newline at end of file diff --git a/js/slinput.js b/js/slinput.js new file mode 100644 index 0000000..51d28c8 --- /dev/null +++ b/js/slinput.js @@ -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 \ No newline at end of file diff --git a/js/sltab.js b/js/sltab.js index f7d57c3..e60237f 100644 --- a/js/sltab.js +++ b/js/sltab.js @@ -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== \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9zbHRhYi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRWxDLE1BQU0sT0FBTyxLQUFNLFNBQVEsTUFBTTtJQUM3QixZQUFZLEtBQWE7UUFDckIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2hCLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ3JDLENBQUM7Q0FDSiJ9 \ No newline at end of file diff --git a/js/sltabgroup.js b/js/sltabgroup.js index d868c6e..feb746d 100644 --- a/js/sltabgroup.js +++ b/js/sltabgroup.js @@ -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 \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFiZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNsQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFMUMsTUFBTSxPQUFPLFVBQVcsU0FBUSxNQUFNO0lBQ2xDO1FBQ0ksS0FBSyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRCxNQUFNLENBQUMsS0FBYTtRQUNoQixNQUFNLEdBQUcsR0FBRyxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ2pCLE9BQU8sR0FBRyxDQUFDO0lBQ2YsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUFZO1FBQ3BCLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDdEIsT0FBTyxRQUFRLENBQUM7SUFDcEIsQ0FBQztJQUVELFNBQVMsQ0FBQyxJQUFZO1FBQ2xCLE9BQU87WUFDSCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQztZQUNqQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztTQUN6QixDQUFDO0lBQ04sQ0FBQztDQUNKIn0= \ No newline at end of file diff --git a/js/sltabpanel.js b/js/sltabpanel.js index db3800f..5ba0028 100644 --- a/js/sltabpanel.js +++ b/js/sltabpanel.js @@ -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= \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJwYW5lbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFicGFuZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUVsQyxNQUFNLE9BQU8sVUFBVyxTQUFRLE1BQU07SUFDbEMsWUFBWSxJQUFZO1FBQ3BCLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN0QixJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNwQyxDQUFDO0NBQ0oifQ== \ No newline at end of file diff --git a/static/app.css b/static/app.css new file mode 100644 index 0000000..cdfc0c7 --- /dev/null +++ b/static/app.css @@ -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; +} \ No newline at end of file diff --git a/static/app.mjs b/static/app.mjs index 53bbffd..eaf35cf 100644 --- a/static/app.mjs +++ b/static/app.mjs @@ -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,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvc2xlbGVtLnRzIiwgIi4uL3RzL3NsY2FyZC50cyIsICIuLi90cy9zbGljb24udHMiLCAiLi4vdHMvc2xpbnB1dC50cyIsICIuLi90cy9zbHRhYi50cyIsICIuLi90cy9zbHRhYnBhbmVsLnRzIiwgIi4uL3RzL3NsdGFiZ3JvdXAudHMiLCAiLi4vdHMvbWFpbi50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFtudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsLCBudWxsXSwKICAibWFwcGluZ3MiOiAiO0FBQU0sSUFBTyxjQUFQLE1BQU8sYUFBVztFQUNiO0VBRUE7RUFDQTtFQUVBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFUCxZQUFZLE1BQWlCO0FBQ3pCLFNBQUssT0FBTztBQUVaLFNBQUssUUFBUSxLQUFLLEtBQUs7QUFDdkIsU0FBSyxZQUFZLEtBQUssS0FBSztBQUUzQixTQUFLLG1CQUFtQixLQUFLLEtBQUssaUJBQWlCLEtBQUssS0FBSyxJQUFJO0FBQ2pFLFNBQUssY0FBYyxLQUFLLEtBQUssWUFBWSxLQUFLLEtBQUssSUFBSTtBQUN2RCxTQUFLLFlBQVksS0FBSyxLQUFLLFVBQVUsS0FBSyxLQUFLLElBQUk7QUFDbkQsU0FBSyxXQUFXLEtBQUssS0FBSyxTQUFTLEtBQUssS0FBSyxJQUFJO0FBQ2pELFNBQUssZ0JBQWdCLEtBQUssS0FBSyxjQUFjLEtBQUssS0FBSyxJQUFJO0FBQzNELFNBQUssbUJBQW1CLEtBQUssS0FBSyxpQkFBaUIsS0FBSyxLQUFLLElBQUk7QUFDakUsU0FBSyxTQUFTLEtBQUssS0FBSyxPQUFPLEtBQUssS0FBSyxJQUFJO0FBQzdDLFNBQUssZUFBZSxLQUFLLEtBQUssYUFBYSxLQUFLLEtBQUssSUFBSTtFQUM3RDtFQUVBLE9BQU8sT0FBTyxTQUFlO0FBQ3pCLFdBQU8sSUFBSSxhQUFZLFNBQVMs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 diff --git a/static/index.html b/static/index.html index 0cd18dd..7fe65b7 100644 --- a/static/index.html +++ b/static/index.html @@ -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');" /> - - + + diff --git a/ts/elemwrapper.ts b/ts/elemwrapper.ts index 8f78f31..07e1c4c 100644 --- a/ts/elemwrapper.ts +++ b/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; public querySelector: (selectors: string) => Element | null; + public querySelectorAll: (selectors: string) => NodeListOf; + 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; + } } \ No newline at end of file diff --git a/ts/main.ts b/ts/main.ts index 6a4fc2a..60bf2f3 100644 --- a/ts/main.ts +++ b/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")); diff --git a/ts/slcard.ts b/ts/slcard.ts new file mode 100644 index 0000000..fdcc17e --- /dev/null +++ b/ts/slcard.ts @@ -0,0 +1,7 @@ +import { SLElem } from "./slelem"; + +export class SLCard extends SLElem { + constructor() { + super("sl-card"); + } +} \ No newline at end of file diff --git a/ts/slelem.ts b/ts/slelem.ts new file mode 100644 index 0000000..04a283a --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/ts/slicon.ts b/ts/slicon.ts index 1d0f7a5..b063a2f 100644 --- a/ts/slicon.ts +++ b/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); } } \ No newline at end of file diff --git a/ts/slinput.ts b/ts/slinput.ts new file mode 100644 index 0000000..ad4077b --- /dev/null +++ b/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", ""); + } +} \ No newline at end of file diff --git a/ts/sltab.ts b/ts/sltab.ts index c668d8b..96d4567 100644 --- a/ts/sltab.ts +++ b/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"); } diff --git a/ts/sltabgroup.ts b/ts/sltabgroup.ts index 9725c33..93fe6cc 100644 --- a/ts/sltabgroup.ts +++ b/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 { diff --git a/ts/sltabpanel.ts b/ts/sltabpanel.ts index 4490811..d2feec1 100644 --- a/ts/sltabpanel.ts +++ b/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); } } \ No newline at end of file