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

tab group

Browse Source
This commit is contained in:
Ian Gulliver
2024-12-21 07:17:19 -08:00
parent fb8a126a33
commit 4dc3675dbd
3 changed files with 86 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
static/index.html
View File

@@ -1,6 +1,19 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Tasks</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="(prefers-color-scheme:light)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme:dark)"
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> <style>
:not(:defined) { :not(:defined) {
visibility: hidden; visibility: hidden;
@@ -28,18 +41,6 @@ body {
align-items: center; align-items: center;
} }
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="(prefers-color-scheme:light)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme:dark)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');"
/>
<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="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="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>

33
static/main.js
View File

@@ -1,5 +1,36 @@
"use strict"; "use strict";
function main() { async function main() {
console.log("Hello, world!"); console.log("Hello, world!");
const root = new ElemWrapper(document.body);
const tabGroup = root.add("sl-tab-group");
tabGroup
.add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
.add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
tabGroup
.add("sl-tab", "slot", "nav", "panel", "tags")
.add("sl-icon", "name", "tags", "style", "font-size: 20px");
}
function add(name, parent, ...attrs) {
const elem = document.createElement(name);
parent.appendChild(elem);
for (let i = 0; i < attrs.length; i += 2) {
elem.setAttribute(attrs[i], attrs[i + 1]);
}
return elem;
}
class ElemWrapper {
elem;
constructor(elem) {
this.elem = elem;
this.elem = elem;
}
add(name, ...attrs) {
const elem = document.createElement(name);
this.elem.appendChild(elem);
for (let i = 0; i < attrs.length; i += 2) {
elem.setAttribute(attrs[i], attrs[i + 1]);
}
return new ElemWrapper(elem);
}
} }
document.addEventListener("DOMContentLoaded", main); document.addEventListener("DOMContentLoaded", main);

42
ts/main.ts
View File

@@ -1,5 +1,45 @@
function main() { async function main() {
console.log("Hello, world!"); console.log("Hello, world!");
const root = new ElemWrapper(document.body);
const tabGroup = root.add("sl-tab-group");
tabGroup
.add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
.add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
tabGroup
.add("sl-tab", "slot", "nav", "panel", "tags")
.add("sl-icon", "name", "tags", "style", "font-size: 20px");
}
function add(name: string, parent: HTMLElement, ...attrs: any[]) {
const elem = document.createElement(name);
parent.appendChild(elem);
for (let i = 0; i < attrs.length; i += 2) {
elem.setAttribute(attrs[i], attrs[i + 1]);
}
return elem;
}
class ElemWrapper {
constructor(private elem: HTMLElement) {
this.elem = elem;
}
add(name: string, ...attrs: string[]): ElemWrapper {
const elem = document.createElement(name);
this.elem.appendChild(elem);
for (let i = 0; i < attrs.length; i += 2) {
elem.setAttribute(attrs[i], attrs[i + 1]);
}
return new ElemWrapper(elem);
}
} }
document.addEventListener("DOMContentLoaded", main); document.addEventListener("DOMContentLoaded", main);