diff --git a/js/elemwrapper.js b/js/elemwrapper.js index 78e306f..ede4e2f 100644 --- a/js/elemwrapper.js +++ b/js/elemwrapper.js @@ -9,6 +9,7 @@ export class ElemWrapper { cloneNode; contains; querySelectorAll; + querySelector; constructor(elem) { this.elem = elem; this.appendChild = this.elem.appendChild.bind(this.elem); @@ -20,6 +21,7 @@ export class ElemWrapper { 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); } static create(tagName) { return new ElemWrapper(document.createElement(tagName)); @@ -27,16 +29,6 @@ export class ElemWrapper { append(elem) { this.appendChild(elem.elem); } - appendAfterLastChild(tagName, elem) { - const children = this.querySelectorAll(tagName); - if (children.length > 0) { - const lastChild = children[children.length - 1]; - lastChild.after(elem.elem); - } - else { - this.appendChild(elem.elem); - } - } add(name, ...attrs) { const elem = ElemWrapper.create(name); this.append(elem); @@ -46,4 +38,4 @@ export class ElemWrapper { return elem; } } -//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNiLElBQUksQ0FBYztJQUNsQixXQUFXLENBQXVCO0lBQ2xDLFlBQVksQ0FBd0M7SUFDcEQsS0FBSyxDQUFzQjtJQUMzQixTQUFTLENBQWU7SUFDeEIsZ0JBQWdCLENBQWdJO0lBQ2hKLE1BQU0sQ0FBdUI7SUFDN0IsU0FBUyxDQUF1QztJQUNoRCxRQUFRLENBQTBCO0lBQ2xDLGdCQUFnQixDQUE2QztJQUNwRSxZQUFZLElBQWlCO1FBQ3pCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN6RCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkUsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2RSxDQUFDO0lBRUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFlO1FBQ3pCLE9BQU8sSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxNQUFNLENBQUMsSUFBaUI7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELG9CQUFvQixDQUFDLE9BQWUsRUFBRSxJQUFpQjtRQUNuRCxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFaEQsSUFBSSxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ3RCLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ2hELFNBQVMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9CLENBQUM7YUFBTSxDQUFDO1lBQ0osSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDaEMsQ0FBQztJQUNMLENBQUM7SUFFRCxHQUFHLENBQUMsSUFBWSxFQUFFLEdBQUcsS0FBZTtRQUNoQyxNQUFNLElBQUksR0FBRyxXQUFXLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFbEIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM5QyxDQUFDO1FBRUQsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQztDQUNKIn0= \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxlbXdyYXBwZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9lbGVtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUNiLElBQUksQ0FBYztJQUNsQixXQUFXLENBQXVCO0lBQ2xDLFlBQVksQ0FBd0M7SUFDcEQsS0FBSyxDQUFzQjtJQUMzQixTQUFTLENBQWU7SUFDeEIsZ0JBQWdCLENBQWdJO0lBQ2hKLE1BQU0sQ0FBdUI7SUFDN0IsU0FBUyxDQUF1QztJQUNoRCxRQUFRLENBQTBCO0lBQ2xDLGdCQUFnQixDQUE2QztJQUM3RCxhQUFhLENBQXdDO0lBRTVELFlBQVksSUFBaUI7UUFDekIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMzRCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQzdCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDckMsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuRSxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDL0MsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3JELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25FLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRUQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFlO1FBQ3pCLE9BQU8sSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxNQUFNLENBQUMsSUFBaUI7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELEdBQUcsQ0FBQyxJQUFZLEVBQUUsR0FBRyxLQUFlO1FBQ2hDLE1BQU0sSUFBSSxHQUFHLFdBQVcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzlDLENBQUM7UUFFRCxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0NBQ0oifQ== \ No newline at end of file diff --git a/js/main.js b/js/main.js index 245efbf..5033f29 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,14 @@ import { ElemWrapper } from "./elemwrapper"; +import { SLIcon } from "./slicon"; 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 - .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px"); + tasksTab.append(new SLIcon("slash-circle")); const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags"); - tagsTab - .add("sl-icon", "name", "tags", "style", "font-size: 20px"); + tagsTab.append(new SLIcon("tags")); } document.addEventListener("DOMContentLoaded", main); -//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBRTFDLEtBQUssVUFBVSxJQUFJO0lBQ2YsTUFBTSxJQUFJLEdBQUcsSUFBSSxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRTVDLE1BQU0sUUFBUSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7SUFDbEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUV0QixNQUFNLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7SUFFM0QsUUFBUTtTQUNILEdBQUcsQ0FDQSxTQUFTLEVBQ1QsTUFBTSxFQUFFLGNBQWMsRUFDdEIsT0FBTyxFQUFFLGlCQUFpQixDQUM3QixDQUFDO0lBRU4sTUFBTSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhELE9BQU87U0FDRixHQUFHLENBQ0EsU0FBUyxFQUNULE1BQU0sRUFBRSxNQUFNLEVBQ2QsT0FBTyxFQUFFLGlCQUFpQixDQUM3QixDQUFDO0FBQ1YsQ0FBQztBQUVELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsQ0FBQyJ9 \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL21haW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFMUMsS0FBSyxVQUFVLElBQUk7SUFDZixNQUFNLElBQUksR0FBRyxJQUFJLFdBQVcsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFFNUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztJQUNsQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRXRCLE1BQU0sQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUMzRCxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7SUFFNUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3hELE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztBQUN2QyxDQUFDO0FBRUQsUUFBUSxDQUFDLGdCQUFnQixDQUFDLGtCQUFrQixFQUFFLElBQUksQ0FBQyxDQUFDIn0= \ No newline at end of file diff --git a/js/slicon.js b/js/slicon.js new file mode 100644 index 0000000..c0a4123 --- /dev/null +++ b/js/slicon.js @@ -0,0 +1,8 @@ +import { ElemWrapper } from "./elemwrapper"; +export class SLIcon extends ElemWrapper { + constructor(name) { + super(document.createElement("sl-icon")); + this.setAttribute("name", name); + } +} +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpY29uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvc2xpY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUMsTUFBTSxPQUFPLE1BQU8sU0FBUSxXQUFXO0lBQ25DLFlBQVksSUFBWTtRQUNwQixLQUFLLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3BDLENBQUM7Q0FDSiJ9 \ No newline at end of file diff --git a/js/sltabgroup.js b/js/sltabgroup.js index 392d99a..d868c6e 100644 --- a/js/sltabgroup.js +++ b/js/sltabgroup.js @@ -7,12 +7,12 @@ export class SLTabGroup extends ElemWrapper { } addTab(panel) { const tab = new SLTab(panel); - this.appendAfterLastChild("sl-tab", tab); + this.append(tab); return tab; } addTabPanel(name) { const tabPanel = new SLTabPanel(name); - this.appendAfterLastChild("sl-tab-panel", tabPanel); + this.append(tabPanel); return tabPanel; } addTabSet(name) { @@ -22,4 +22,4 @@ export class SLTabGroup extends ElemWrapper { ]; } } -//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFiZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsTUFBTSxPQUFPLFVBQVcsU0FBUSxXQUFXO0lBQ3ZDO1FBQ0ksS0FBSyxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQWE7UUFDaEIsTUFBTSxHQUFHLEdBQUcsSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0IsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUN6QyxPQUFPLEdBQUcsQ0FBQztJQUNmLENBQUM7SUFFRCxXQUFXLENBQUMsSUFBWTtRQUNwQixNQUFNLFFBQVEsR0FBRyxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsb0JBQW9CLENBQUMsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUFDO1FBQ3BELE9BQU8sUUFBUSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTLENBQUMsSUFBWTtRQUNsQixPQUFPO1lBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDakIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7U0FDekIsQ0FBQztJQUNOLENBQUM7Q0FDSiJ9 \ No newline at end of file +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2x0YWJncm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL3NsdGFiZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ2hDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsTUFBTSxPQUFPLFVBQVcsU0FBUSxXQUFXO0lBQ3ZDO1FBQ0ksS0FBSyxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQWE7UUFDaEIsTUFBTSxHQUFHLEdBQUcsSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNqQixPQUFPLEdBQUcsQ0FBQztJQUNmLENBQUM7SUFFRCxXQUFXLENBQUMsSUFBWTtRQUNwQixNQUFNLFFBQVEsR0FBRyxJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3RCLE9BQU8sUUFBUSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTLENBQUMsSUFBWTtRQUNsQixPQUFPO1lBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDakIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7U0FDekIsQ0FBQztJQUNOLENBQUM7Q0FDSiJ9 \ No newline at end of file diff --git a/static/app.mjs b/static/app.mjs index 604b1b8..53bbffd 100644 --- a/static/app.mjs +++ b/static/app.mjs @@ -10,6 +10,7 @@ var ElemWrapper = class _ElemWrapper { cloneNode; contains; querySelectorAll; + querySelector; constructor(elem) { this.elem = elem; this.appendChild = this.elem.appendChild.bind(this.elem); @@ -21,6 +22,7 @@ var ElemWrapper = class _ElemWrapper { 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); } static create(tagName) { return new _ElemWrapper(document.createElement(tagName)); @@ -28,15 +30,6 @@ var ElemWrapper = class _ElemWrapper { append(elem) { this.appendChild(elem.elem); } - appendAfterLastChild(tagName, elem) { - const children = this.querySelectorAll(tagName); - if (children.length > 0) { - const lastChild = children[children.length - 1]; - lastChild.after(elem.elem); - } else { - this.appendChild(elem.elem); - } - } add(name, ...attrs) { const elem = _ElemWrapper.create(name); this.append(elem); @@ -47,6 +40,14 @@ var ElemWrapper = class _ElemWrapper { } }; +// js/slicon.js +var SLIcon = class extends ElemWrapper { + constructor(name) { + super(document.createElement("sl-icon")); + this.setAttribute("name", name); + } +}; + // js/sltab.js var SLTab = class extends ElemWrapper { constructor(panel) { @@ -71,12 +72,12 @@ var SLTabGroup = class extends ElemWrapper { } addTab(panel) { const tab = new SLTab(panel); - this.appendAfterLastChild("sl-tab", tab); + this.append(tab); return tab; } addTabPanel(name) { const tabPanel = new SLTabPanel(name); - this.appendAfterLastChild("sl-tab-panel", tabPanel); + this.append(tabPanel); return tabPanel; } addTabSet(name) { @@ -93,9 +94,9 @@ async function main() { const tabGroup = new SLTabGroup(); root.append(tabGroup); const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks"); - tasksTab.add("sl-icon", "name", "slash-circle", "style", "font-size: 20px"); + tasksTab.append(new SLIcon("slash-circle")); const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags"); - tagsTab.add("sl-icon", "name", "tags", "style", "font-size: 20px"); + tagsTab.append(new SLIcon("tags")); } document.addEventListener("DOMContentLoaded", main); -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvc2x0YWIudHMiLCAiLi4vdHMvc2x0YWJwYW5lbC50cyIsICIuLi90cy9zbHRhYmdyb3VwLnRzIiwgIi4uL3RzL21haW4udHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbbnVsbCwgbnVsbCwgbnVsbCwgbnVsbCwgbnVsbF0sCiAgIm1hcHBpbmdzIjogIjtBQUFNLElBQU8sY0FBUCxNQUFPLGFBQVc7RUFDYjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNQLFlBQVksTUFBaUI7QUFDekIsU0FBSyxPQUFPO0FBQ1osU0FBSyxjQUFjLEtBQUssS0FBSyxZQUFZLEtBQUssS0FBSyxJQUFJO0FBQ3ZELFNBQUssZUFBZSxLQUFLLEtBQUssYUFBYSxLQUFLLEtBQUssSUFBSTtBQUN6RCxTQUFLLFFBQVEsS0FBSyxLQUFLO0FBQ3ZCLFNBQUssWUFBWSxLQUFLLEtBQUs7QUFDM0IsU0FBSyxtQkFBbUIsS0FBSyxLQUFLLGlCQUFpQixLQUFLLEtBQUssSUFBSTtBQUNqRSxTQUFLLFNBQVMsS0FBSyxLQUFLLE9BQU8sS0FBSyxLQUFLLElBQUk7QUFDN0MsU0FBSyxZQUFZLEtBQUssS0FBSyxVQUFVLEtBQUssS0FBSyxJQUFJO0FBQ25ELFNBQUssV0FBVyxLQUFLLEtBQUssU0FBUyxLQUFLLEtBQUssSUFBSTtBQUNqRCxTQUFLLG1CQUFtQixLQUFLLEtBQUssaUJBQWlCLEtBQUssS0FBSyxJQUFJO0VBQ3JFO0VBRUEsT0FBTyxPQUFPLFNBQWU7QUFDekIsV0FBTyxJQUFJLGFBQVksU0FBUyxjQUFjLE9BQU8sQ0FBQztFQUMxRDtFQUVBLE9BQU8sTUFBaUI7QUFDcEIsU0FBSyxZQUFZLEtBQUssSUFBSTtFQUM5QjtFQUVBLHFCQUFxQixTQUFpQixNQUFpQjtBQUNuRCxVQUFNLFdBQVcsS0FBSyxpQkFBaUIsT0FBTztBQUU5QyxRQUFJLFNBQVMsU0FBUyxHQUFHO0FBQ3JCLFlBQU0sWUFBWSxTQUFTLFNBQVMsU0FBUyxDQUFDO0FBQzlDLGdCQUFVLE1BQU0sS0FBSyxJQUFJO0lBQzdCLE9BQU87QUFDSCxXQUFLLFlBQVksS0FBSyxJQUFJO0lBQzlCO0VBQ0o7RUFFQSxJQUFJLFNBQWlCLE9BQWU7QUFDaEMsVUFBTSxPQUFPLGFBQVksT0FBTyxJQUFJO0FBQ3BDLFNBQUssT0FBTyxJQUFJO0FBRWhCLGFBQVMsSUFBSSxHQUFHLElBQUksTUFBTSxRQUFRLEtBQUssR0FBRztBQUN0QyxXQUFLLGFBQWEsTUFBTSxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztJQUM1QztBQUVBLFdBQU87RUFDWDs7OztBQ2xERSxJQUFPLFFBQVAsY0FBcUIsWUFBVztFQUNsQyxZQUFZLE9BQWE7QUFDckIsVUFBTSxTQUFTLGNBQWMsUUFBUSxDQUFDO0FBQ3RDLFNBQUssYUFBYSxTQUFTLEtBQUs7QUFDaEMsU0FBSyxhQUFhLFFBQVEsS0FBSztFQUNuQzs7OztBQ0xFLElBQU8sYUFBUCxjQUEwQixZQUFXO0VBQ3ZDLFlBQVksTUFBWTtBQUNwQixVQUFNLFNBQVMsY0FBYyxjQUFjLENBQUM7QUFDNUMsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ0hFLElBQU8sYUFBUCxjQUEwQixZQUFXO0VBQ3ZDLGNBQUE7QUFDSSxVQUFNLFNBQVMsY0FBYyxjQUFjLENBQUM7RUFDaEQ7RUFFQSxPQUFPLE9BQWE7QUFDaEIsVUFBTSxNQUFNLElBQUksTUFBTSxLQUFLO0FBQzNCLFNBQUsscUJBQXFCLFVBQVUsR0FBRztBQUN2QyxXQUFPO0VBQ1g7RUFFQSxZQUFZLE1BQVk7QUFDcEIsVUFBTSxXQUFXLElBQUksV0FBVyxJQUFJO0FBQ3BDLFNBQUsscUJBQXFCLGdCQUFnQixRQUFRO0FBQ2xELFdBQU87RUFDWDtFQUVBLFVBQVUsTUFBWTtBQUNsQixXQUFPO01BQ0gsS0FBSyxPQUFPLElBQUk7TUFDaEIsS0FBSyxZQUFZLElBQUk7O0VBRTdCOzs7O0FDdEJKLGVBQWUsT0FBSTtBQUNmLFFBQU0sT0FBTyxJQUFJLFlBQVksU0FBUyxJQUFJO0FBRTFDLFFBQU0sV0FBVyxJQUFJLFdBQVU7QUFDL0IsT0FBSyxPQUFPLFFBQVE7QUFFcEIsUUFBTSxDQUFDLFVBQVUsVUFBVSxJQUFJLFNBQVMsVUFBVSxPQUFPO0FBRXpELFdBQ0ssSUFDRyxXQUNBLFFBQVEsZ0JBQ1IsU0FBUyxpQkFBaUI7QUFHbEMsUUFBTSxDQUFDLFNBQVMsU0FBUyxJQUFJLFNBQVMsVUFBVSxNQUFNO0FBRXRELFVBQ0ssSUFDRyxXQUNBLFFBQVEsUUFDUixTQUFTLGlCQUFpQjtBQUV0QztBQUVBLFNBQVMsaUJBQWlCLG9CQUFvQixJQUFJOyIsCiAgIm5hbWVzIjogW10KfQo= +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vdHMvZWxlbXdyYXBwZXIudHMiLCAiLi4vdHMvc2xpY29uLnRzIiwgIi4uL3RzL3NsdGFiLnRzIiwgIi4uL3RzL3NsdGFicGFuZWwudHMiLCAiLi4vdHMvc2x0YWJncm91cC50cyIsICIuLi90cy9tYWluLnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogW251bGwsIG51bGwsIG51bGwsIG51bGwsIG51bGwsIG51bGxdLAogICJtYXBwaW5ncyI6ICI7QUFBTSxJQUFPLGNBQVAsTUFBTyxhQUFXO0VBQ2I7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUVQLFlBQVksTUFBaUI7QUFDekIsU0FBSyxPQUFPO0FBQ1osU0FBSyxjQUFjLEtBQUssS0FBSyxZQUFZLEtBQUssS0FBSyxJQUFJO0FBQ3ZELFNBQUssZUFBZSxLQUFLLEtBQUssYUFBYSxLQUFLLEtBQUssSUFBSTtBQUN6RCxTQUFLLFFBQVEsS0FBSyxLQUFLO0FBQ3ZCLFNBQUssWUFBWSxLQUFLLEtBQUs7QUFDM0IsU0FBSyxtQkFBbUIsS0FBSyxLQUFLLGlCQUFpQixLQUFLLEtBQUssSUFBSTtBQUNqRSxTQUFLLFNBQVMsS0FBSyxLQUFLLE9BQU8sS0FBSyxLQUFLLElBQUk7QUFDN0MsU0FBSyxZQUFZLEtBQUssS0FBSyxVQUFVLEtBQUssS0FBSyxJQUFJO0FBQ25ELFNBQUssV0FBVyxLQUFLLEtBQUssU0FBUyxLQUFLLEtBQUssSUFBSTtBQUNqRCxTQUFLLG1CQUFtQixLQUFLLEtBQUssaUJBQWlCLEtBQUssS0FBSyxJQUFJO0FBQ2pFLFNBQUssZ0JBQWdCLEtBQUssS0FBSyxjQUFjLEtBQUssS0FBSyxJQUFJO0VBQy9EO0VBRUEsT0FBTyxPQUFPLFNBQWU7QUFDekIsV0FBTyxJQUFJLGFBQVksU0FBUyxjQUFjLE9BQU8sQ0FBQztFQUMxRDtFQUVBLE9BQU8sTUFBaUI7QUFDcEIsU0FBSyxZQUFZLEtBQUssSUFBSTtFQUM5QjtFQUVBLElBQUksU0FBaUIsT0FBZTtBQUNoQyxVQUFNLE9BQU8sYUFBWSxPQUFPLElBQUk7QUFDcEMsU0FBSyxPQUFPLElBQUk7QUFFaEIsYUFBUyxJQUFJLEdBQUcsSUFBSSxNQUFNLFFBQVEsS0FBSyxHQUFHO0FBQ3RDLFdBQUssYUFBYSxNQUFNLENBQUMsR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDO0lBQzVDO0FBRUEsV0FBTztFQUNYOzs7O0FDMUNFLElBQU8sU0FBUCxjQUFzQixZQUFXO0VBQ25DLFlBQVksTUFBWTtBQUNwQixVQUFNLFNBQVMsY0FBYyxTQUFTLENBQUM7QUFDdkMsU0FBSyxhQUFhLFFBQVEsSUFBSTtFQUNsQzs7OztBQ0pFLElBQU8sUUFBUCxjQUFxQixZQUFXO0VBQ2xDLFlBQVksT0FBYTtBQUNyQixVQUFNLFNBQVMsY0FBYyxRQUFRLENBQUM7QUFDdEMsU0FBSyxhQUFhLFNBQVMsS0FBSztBQUNoQyxTQUFLLGFBQWEsUUFBUSxLQUFLO0VBQ25DOzs7O0FDTEUsSUFBTyxhQUFQLGNBQTBCLFlBQVc7RUFDdkMsWUFBWSxNQUFZO0FBQ3BCLFVBQU0sU0FBUyxjQUFjLGNBQWMsQ0FBQztBQUM1QyxTQUFLLGFBQWEsUUFBUSxJQUFJO0VBQ2xDOzs7O0FDSEUsSUFBTyxhQUFQLGNBQTBCLFlBQVc7RUFDdkMsY0FBQTtBQUNJLFVBQU0sU0FBUyxjQUFjLGNBQWMsQ0FBQztFQUNoRDtFQUVBLE9BQU8sT0FBYTtBQUNoQixVQUFNLE1BQU0sSUFBSSxNQUFNLEtBQUs7QUFDM0IsU0FBSyxPQUFPLEdBQUc7QUFDZixXQUFPO0VBQ1g7RUFFQSxZQUFZLE1BQVk7QUFDcEIsVUFBTSxXQUFXLElBQUksV0FBVyxJQUFJO0FBQ3BDLFNBQUssT0FBTyxRQUFRO0FBQ3BCLFdBQU87RUFDWDtFQUVBLFVBQVUsTUFBWTtBQUNsQixXQUFPO01BQ0gsS0FBSyxPQUFPLElBQUk7TUFDaEIsS0FBSyxZQUFZLElBQUk7O0VBRTdCOzs7O0FDckJKLGVBQWUsT0FBSTtBQUNmLFFBQU0sT0FBTyxJQUFJLFlBQVksU0FBUyxJQUFJO0FBRTFDLFFBQU0sV0FBVyxJQUFJLFdBQVU7QUFDL0IsT0FBSyxPQUFPLFFBQVE7QUFFcEIsUUFBTSxDQUFDLFVBQVUsVUFBVSxJQUFJLFNBQVMsVUFBVSxPQUFPO0FBQ3pELFdBQVMsT0FBTyxJQUFJLE9BQU8sY0FBYyxDQUFDO0FBRTFDLFFBQU0sQ0FBQyxTQUFTLFNBQVMsSUFBSSxTQUFTLFVBQVUsTUFBTTtBQUN0RCxVQUFRLE9BQU8sSUFBSSxPQUFPLE1BQU0sQ0FBQztBQUNyQztBQUVBLFNBQVMsaUJBQWlCLG9CQUFvQixJQUFJOyIsCiAgIm5hbWVzIjogW10KfQo= diff --git a/static/index.html b/static/index.html index bd21aa0..0cd18dd 100644 --- a/static/index.html +++ b/static/index.html @@ -34,6 +34,10 @@ --sl-color-primary-950: rgb(70 11 71); } +sl-tab sl-icon { + font-size: 20px; +} + body { font: 12px var(--sl-font-mono); display: flex; diff --git a/ts/elemwrapper.ts b/ts/elemwrapper.ts index f48aecc..8f78f31 100644 --- a/ts/elemwrapper.ts +++ b/ts/elemwrapper.ts @@ -9,6 +9,8 @@ export class ElemWrapper { public cloneNode: (deep?: boolean | undefined) => Node; public contains: (node: Node) => boolean; public querySelectorAll: (selectors: string) => NodeListOf; + public querySelector: (selectors: string) => Element | null; + constructor(elem: HTMLElement) { this.elem = elem; this.appendChild = this.elem.appendChild.bind(this.elem); @@ -20,6 +22,7 @@ export class ElemWrapper { 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); } static create(tagName: string) { @@ -30,17 +33,6 @@ export class ElemWrapper { this.appendChild(elem.elem); } - appendAfterLastChild(tagName: string, elem: ElemWrapper) { - const children = this.querySelectorAll(tagName); - - if (children.length > 0) { - const lastChild = children[children.length - 1]; - lastChild.after(elem.elem); - } else { - this.appendChild(elem.elem); - } - } - add(name: string, ...attrs: string[]): ElemWrapper { const elem = ElemWrapper.create(name); this.append(elem); diff --git a/ts/main.ts b/ts/main.ts index 8f83c5c..6a4fc2a 100644 --- a/ts/main.ts +++ b/ts/main.ts @@ -1,4 +1,5 @@ import { ElemWrapper } from "./elemwrapper"; +import { SLIcon } from "./slicon"; import { SLTabGroup } from "./sltabgroup"; async function main() { @@ -8,22 +9,10 @@ async function main() { root.append(tabGroup); const [tasksTab, tasksPanel] = tabGroup.addTabSet("tasks"); - - tasksTab - .add( - "sl-icon", - "name", "slash-circle", - "style", "font-size: 20px", - ); + tasksTab.append(new SLIcon("slash-circle")); const [tagsTab, tagsPanel] = tabGroup.addTabSet("tags"); - - tagsTab - .add( - "sl-icon", - "name", "tags", - "style", "font-size: 20px", - ); + tagsTab.append(new SLIcon("tags")); } document.addEventListener("DOMContentLoaded", main); diff --git a/ts/slicon.ts b/ts/slicon.ts new file mode 100644 index 0000000..1d0f7a5 --- /dev/null +++ b/ts/slicon.ts @@ -0,0 +1,8 @@ +import { ElemWrapper } from "./elemwrapper"; + +export class SLIcon extends ElemWrapper { + constructor(name: string) { + super(document.createElement("sl-icon")); + this.setAttribute("name", name); + } +} \ No newline at end of file diff --git a/ts/sltabgroup.ts b/ts/sltabgroup.ts index 6a7d417..9725c33 100644 --- a/ts/sltabgroup.ts +++ b/ts/sltabgroup.ts @@ -8,13 +8,13 @@ export class SLTabGroup extends ElemWrapper { addTab(panel: string): SLTab { const tab = new SLTab(panel); - this.appendAfterLastChild("sl-tab", tab); + this.append(tab); return tab; } addTabPanel(name: string): SLTabPanel { const tabPanel = new SLTabPanel(name); - this.appendAfterLastChild("sl-tab-panel", tabPanel); + this.append(tabPanel); return tabPanel; }