terbshaeusser/website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Activity

change base of tag to button

Browse Source 
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
This commit is contained in:
Tobias Erbshäußer
2026-05-24 09:22:54 +02:00
parent 0e07967dab
commit 7cd2dee64c
2 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/tag.njk
+14 -9
View File
@@ -6,21 +6,26 @@
display: block; display: block;
} }
:host > div { tesoft-button::part(children) {
align-items: center;
display: grid; display: grid;
gap: 0.5rem;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: auto; grid-template-rows: auto;
} }
svg {
height: 2.4rem;
width: 2.4rem;
}
</style> </style>
<a> <tesoft-button>
<tesoft-badge> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem"> <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
<path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/> </svg>
</svg> <slot></slot>
<slot></slot> </tesoft-button>
</tesoft-badge>
</a>
</template> </template>
<script src="/src/components/tag.ts" type="module"></script> <script src="/src/components/tag.ts" type="module"></script>
frontend/src/components/tag.ts
+19 -4
View File
@@ -1,9 +1,10 @@
import {TesoftComponent} from "../scripts/main.ts"; import {TesoftComponent} from "../scripts/main.ts";
import {TesoftButton} from "./button.ts";
export class TesoftTag extends TesoftComponent { export class TesoftTag extends TesoftComponent {
static observedAttributes = ["href"]; static observedAttributes = ["href", "selected"];
private readonly anchor: HTMLAnchorElement; private readonly button: TesoftButton;
constructor() { constructor() {
super(); super();
@@ -14,13 +15,19 @@ export class TesoftTag extends TesoftComponent {
const shadowRoot = this.attachShadow({mode: "open"}); const shadowRoot = this.attachShadow({mode: "open"});
shadowRoot.appendChild(templateContent.cloneNode(true)); shadowRoot.appendChild(templateContent.cloneNode(true));
this.anchor = shadowRoot.querySelector<HTMLAnchorElement>("a")!; this.button = shadowRoot.querySelector<TesoftButton>("tesoft-button")!;
} }
// noinspection JSUnusedGlobalSymbols // noinspection JSUnusedGlobalSymbols
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) { attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
if (name === "href") { if (name === "href") {
this.anchor.href = newValue ?? ""; setTimeout(() => {
this.button.href = newValue ?? "";
});
} else if (name === "selected") {
setTimeout(() => {
this.button.selected = newValue;
});
} }
} }
@@ -31,6 +38,14 @@ export class TesoftTag extends TesoftComponent {
this.removeAttribute("href"); this.removeAttribute("href");
} }
} }
set selected(value: string | null) {
if (value === null) {
this.removeAttribute("selected");
} else {
this.setAttribute("selected", "");
}
}
} }
customElements.define("tesoft-tag", TesoftTag); customElements.define("tesoft-tag", TesoftTag);