habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: update to new formatting rules, make eslint warnings fail ci

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-01 17:27:19 +01:00
parent 7195b77606
commit e6391b64f0
33 changed files with 192 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/elements/Tabs.ts
View File

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
// @ts-ignore
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore
@ -10,12 +10,23 @@ export class Tabs extends LitElement {
@property()
currentPage?: string;
static get styles() {
static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle];
}
render() {
const pages = Array.from(this.querySelectorAll("[slot]")!);
renderTab(page: Element): TemplateResult {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
<button class="pf-c-tabs__link" @click=${() => { this.currentPage = slot; }}>
<span class="pf-c-tabs__item-text">
${page.attributes.getNamedItem("tab-title")?.value}
</span>
</button>
</li>`;
}
render(): TemplateResult {
const pages = Array.from(this.querySelectorAll("[slot]"));
if (!this.currentPage) {
if (pages.length < 1) {
return html`<h1>no tabs defined</h1>`;
@ -24,25 +35,7 @@ export class Tabs extends LitElement {
}
return html`<div class="pf-c-tabs">
<ul class="pf-c-tabs__list">
${pages.map((page) => {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li
class="pf-c-tabs__item ${slot === this.currentPage
? CURRENT_CLASS
: ""}"
>
<button
class="pf-c-tabs__link"
@click=${() => {
this.currentPage = slot;
}}
>
<span class="pf-c-tabs__item-text">
${page.attributes.getNamedItem("tab-title")?.value}
</span>
</button>
</li>`;
})}
${pages.map((page) => this.renderTab(page))}
</ul>
</div>
<slot name="${this.currentPage}"></slot>`;