df16dc3088
This commit replaces various ad-hoc implementations of the Patternfly Toggle Group HTML with a web
component that encapsulates all of the needed behavior and exposes a single API with a single event
handler, return the value of the option clicked.
The results are: Lots of visual clutter is eliminated. A single link of:
```
<div class="pf-c-toggle-group__item">
<button
class="pf-c-toggle-group__button ${this.mode === ProxyMode.Proxy
? "pf-m-selected"
: ""}"
type="button"
@click=${() => {
this.mode = ProxyMode.Proxy;
}}>
<span class="pf-c-toggle-group__text">${msg("Proxy")}</span>
</button>
</div>
<div class="pf-c-divider pf-m-vertical" role="separator"></div>
```
Now looks like:
```
<option value=${ProxyMode.Proxy}>${msg("Proxy")}</option>
```
This also means that the three pages that used the Patternfly Toggle Group could eliminate all of
their Patternfly PFToggleGroup needs, as well as the `justify-content: center` extension, which also
eliminated the `css` import.
The savings aren't as spectacular as I'd hoped: removed 178 lines, but added 123; total savings 55
lines of code. I still count this a win: we need never write another toggle component again, and
any bugs, extensions or features we may want to add can be centralized or forked without risking the
whole edifice.
65 lines
2.1 KiB
JSON
65 lines
2.1 KiB
JSON
{
|
|
"compilerOptions": {
|
|
"strict": true,
|
|
"paths": {
|
|
"@goauthentik/app/*": ["src/*"],
|
|
"@goauthentik/admin/*": ["src/admin/*"],
|
|
"@goauthentik/common/*": ["src/common/*"],
|
|
"@goauthentik/components/*": ["src/components/*"],
|
|
"@goauthentik/docs/*": ["../website/docs/*"],
|
|
"@goauthentik/elements/*": ["src/elements/*"],
|
|
"@goauthentik/flow/*": ["src/flow/*"],
|
|
"@goauthentik/locales/*": ["src/locales/*"],
|
|
"@goauthentik/polyfill/*": ["src/polyfill/*"],
|
|
"@goauthentik/standalone/*": ["src/standalone/*"],
|
|
"@goauthentik/user/*": ["src/user/*"]
|
|
},
|
|
"baseUrl": ".",
|
|
"esModuleInterop": true,
|
|
"skipLibCheck": true,
|
|
"forceConsistentCasingInFileNames": true,
|
|
"experimentalDecorators": true,
|
|
"sourceMap": true,
|
|
"target": "esnext",
|
|
"module": "esnext",
|
|
"moduleResolution": "node",
|
|
"lib": [
|
|
"ES5",
|
|
"ES2015",
|
|
"ES2016",
|
|
"ES2017",
|
|
"ES2018",
|
|
"ES2019",
|
|
"ES2020",
|
|
"ESNext",
|
|
"DOM",
|
|
"DOM.Iterable",
|
|
"WebWorker"
|
|
],
|
|
"noUnusedLocals": true,
|
|
"noImplicitReturns": true,
|
|
"noFallthroughCasesInSwitch": true,
|
|
"strictBindCallApply": true,
|
|
"strictFunctionTypes": true,
|
|
"strictNullChecks": true,
|
|
"allowUnreachableCode": false,
|
|
"allowUnusedLabels": false,
|
|
"useDefineForClassFields": false,
|
|
"alwaysStrict": true,
|
|
"noImplicitAny": true,
|
|
"plugins": [
|
|
{
|
|
"name": "ts-lit-plugin",
|
|
"strict": true,
|
|
"rules": {
|
|
"no-unknown-tag-name": "off",
|
|
"no-missing-import": "off",
|
|
"no-incompatible-type-binding": "off",
|
|
"no-unknown-property": "off",
|
|
"no-unknown-attribute": "off"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|