diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts index 7121710110..3531f9de2a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts @@ -7,6 +7,7 @@ export class UmbCollectionToolbarElement extends UmbLitElement { override render() { return html` +
`; } @@ -20,6 +21,9 @@ export class UmbCollectionToolbarElement extends UmbLitElement { justify-content: space-between; width: 100%; } + #slot { + flex: 1; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts new file mode 100644 index 0000000000..d4372f22ec --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts @@ -0,0 +1,54 @@ +import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit'; +import { + UMB_COLLECTION_CONTEXT, + UmbCollectionDefaultElement, + type UmbDefaultCollectionContext, +} from '@umbraco-cms/backoffice/collection'; + +@customElement('umb-dictionary-collection') +export class UmbDictionaryCollectionElement extends UmbCollectionDefaultElement { + #collectionContext?: UmbDefaultCollectionContext; + #inputTimer?: NodeJS.Timeout; + #inputTimerAmount = 500; + + constructor() { + super(); + this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => { + this.#collectionContext = context; + }); + } + + #updateSearch(event: InputEvent) { + const target = event.target as HTMLInputElement; + const filter = target.value || ''; + clearTimeout(this.#inputTimer); + this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount); + } + + protected override renderToolbar() { + return html`${this.#renderSearch()}`; + } + + #renderSearch() { + return html``; + } + + static override styles = [ + css` + #input-search { + width: 100%; + } + `, + ]; +} + +export default UmbDictionaryCollectionElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-dictionary-collection': UmbDictionaryCollectionElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts index dbab8a757d..eeffe2cb95 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts @@ -9,6 +9,7 @@ const collectionManifest: ManifestCollection = { type: 'collection', kind: 'default', alias: UMB_DICTIONARY_COLLECTION_ALIAS, + element: () => import('./dictionary-collection.element.js'), name: 'Dictionary Collection', meta: { repositoryAlias: UMB_DICTIONARY_COLLECTION_REPOSITORY_ALIAS,