205hlab-mirrors/authentik
2
0
Fork 0
mirror of https://github.com/goauthentik/authentik.git synced 2026-06-17 19:09:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

web/elements: Add preserve-order, no-search and no-status attributes to ak-dual-select (#20749)

Browse Source 
* Add preserve-order, no-search and no-status properties to ak-dual-select

* fix linting
This commit is contained in:
Marcelo Elizeche Landó
2026-03-13 17:11:28 -03:00
committed by GitHub
parent 219a110339
commit 0ff3869ea3
3 changed files with 76 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
+3
View File
@@ -51,6 +51,9 @@ export class AkDualSelectDynamic extends AkDualSelectProvider {
.selected=${this.selected}
available-label=${this.availableLabel}
selected-label=${this.selectedLabel}
?preserve-order=${this.preserveOrder}
?no-search=${this.noSearch}
?no-status=${this.noStatus}
></ak-dual-select>`;
}
}
web/src/elements/ak-dual-select/ak-dual-select-provider.ts
+27
View File
@@ -60,6 +60,30 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
@property({ attribute: "selected-label" })
public selectedLabel = msg("Selected options");
/**
* When true, the selected pane preserves insertion order instead of sorting alphabetically.
*
* @attr
*/
@property({ type: Boolean, attribute: "preserve-order" })
public preserveOrder = false;
/**
* When true, hides the search bars in both the available and selected panes.
*
* @attr
*/
@property({ type: Boolean, attribute: "no-search" })
public noSearch = false;
/**
* When true, hides the item count status displays in both panes.
*
* @attr
*/
@property({ type: Boolean, attribute: "no-status" })
public noStatus = false;
/**
* The debounce for the search as the user is typing in a request
*
@@ -187,6 +211,9 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
.selected=${this.#selected}
available-label=${this.availableLabel}
selected-label=${this.selectedLabel}
?preserve-order=${this.preserveOrder}
?no-search=${this.noSearch}
?no-status=${this.noStatus}
></ak-dual-select>`;
}
}
web/src/elements/ak-dual-select/ak-dual-select.ts
+46 -21
View File
@@ -90,6 +90,19 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
@property({ attribute: "selected-label" })
selectedLabel = msg("Selected options");
@property({ type: Boolean, attribute: "no-search" })
noSearch = false;
@property({ type: Boolean, attribute: "no-status" })
noStatus = false;
/**
* When true, the selected pane preserves insertion order instead of sorting alphabetically.
* Use this when the order of selected items is meaningful (e.g. priority-based lists).
*/
@property({ type: Boolean, attribute: "preserve-order" })
preserveOrder = false;
//#endregion
//#region State
@@ -322,17 +335,21 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
</div>
</div>
</div>
<ak-search-bar
placeholder=${msg(str`Search ${this.availableLabel}...`)}
name="ak-dual-list-available-search"
></ak-search-bar>
<div class="pf-c-dual-list-selector__status">
<span
class="pf-c-dual-list-selector__status-text"
id="basic-available-status-text"
>${unsafeHTML(availableStatus)}</span
>
</div>
${this.noSearch
? nothing
: html`<ak-search-bar
placeholder=${msg(str`Search ${this.availableLabel}...`)}
name="ak-dual-list-available-search"
></ak-search-bar>`}
${this.noStatus
? nothing
: html`<div class="pf-c-dual-list-selector__status">
<span
class="pf-c-dual-list-selector__status-text"
id="basic-available-status-text"
>${unsafeHTML(availableStatus)}</span
>
</div>`}
<ak-dual-select-available-pane
${ref(this.availablePane)}
.options=${this.options}
@@ -359,19 +376,27 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
</div>
</div>
</div>
<ak-search-bar
placeholder=${msg(str`Search ${this.selectedLabel}...`)}
name="ak-dual-list-selected-search"
></ak-search-bar>
<div
class="pf-c-dual-list-selector__status ak-dual-list-selector__status--selected"
>
<span class="pf-c-dual-list-selector__status-text">${selectedStatus}</span>
</div>
${this.noSearch
? nothing
: html`<ak-search-bar
placeholder=${msg(str`Search ${this.selectedLabel}...`)}
name="ak-dual-list-selected-search"
></ak-search-bar>`}
${this.noStatus
? nothing
: html`<div
class="pf-c-dual-list-selector__status ak-dual-list-selector__status--selected"
>
<span class="pf-c-dual-list-selector__status-text"
>${selectedStatus}</span
>
</div>`}
<ak-dual-select-selected-pane
${ref(this.selectedPane)}
.selected=${selected.toSorted(localeComparator)}
.selected=${this.preserveOrder
? selected
: selected.toSorted(localeComparator)}
></ak-dual-select-selected-pane>
</div>
</div>