expand search input and use textarea for multiline
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
8937c0b63b
commit
df81499054
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
Reference in a new issue