expand search input and use textarea for multiline

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-11-23 15:18:47 +01:00
parent 8937c0b63b
commit df81499054
No known key found for this signature in database
2 changed files with 14 additions and 6 deletions

View File

@ -162,6 +162,12 @@ export abstract class Table<T> extends AKElement {
PFDropdown,
PFPagination,
css`
.pf-c-toolbar__group.pf-m-search-filter {
flex-grow: 1;
}
ak-table-search {
width: 100% !important;
}
.pf-c-table thead .pf-c-table__check {
min-width: 3rem;
}

View File

@ -30,6 +30,9 @@ export class TableSearch extends AKElement {
::-webkit-search-cancel-button {
display: none;
}
.pf-c-form-control {
font-family: monospace;
}
`,
];
}
@ -41,23 +44,22 @@ export class TableSearch extends AKElement {
@submit=${(e: Event) => {
e.preventDefault();
if (!this.onSearch) return;
const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
const el = this.shadowRoot?.querySelector<HTMLInputElement>("[name=search]");
if (!el) return;
if (el.value === "") return;
this.onSearch(el?.value);
}}
>
<input
<textarea
class="pf-c-form-control"
name="search"
type="search"
placeholder=${msg("Search...")}
value="${ifDefined(this.value)}"
@search=${(ev: Event) => {
spellcheck="false"
@submit=${(ev: Event) => {
if (!this.onSearch) return;
this.onSearch((ev.target as HTMLInputElement).value);
}}
/>
>${ifDefined(this.value)}</textarea>
<button
class="pf-c-button pf-m-control"
type="reset"