From 2fa9aee666b4ede337805b2c1f33b5120b1a3fee Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 11 Apr 2024 12:44:54 +0200
Subject: [PATCH] search result
---
src/Umbraco.Web.UI.Client/package.json | 1 +
.../document-search-result-item.element.ts | 24 ++++++++++---
.../src/packages/search/index.ts | 1 +
.../search-modal/search-modal.element.ts | 2 +-
.../search-result-item.element.ts | 21 -----------
.../search-result-item.element.ts | 36 +++++++++++++++++++
.../src/packages/search/types.ts | 5 +++
src/Umbraco.Web.UI.Client/tsconfig.json | 1 +
8 files changed, 64 insertions(+), 27 deletions(-)
create mode 100644 src/Umbraco.Web.UI.Client/src/packages/search/index.ts
delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-result-item.element.ts
create mode 100644 src/Umbraco.Web.UI.Client/src/packages/search/search-result/search-result-item.element.ts
create mode 100644 src/Umbraco.Web.UI.Client/src/packages/search/types.ts
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 8b9792bc73..e8ea2524c6 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -68,6 +68,7 @@
"./repository": "./dist-cms/packages/core/repository/index.js",
"./resources": "./dist-cms/packages/core/resources/index.js",
"./router": "./dist-cms/packages/core/router/index.js",
+ "./search": "./dist-cms/packages/search/index.js",
"./section": "./dist-cms/packages/core/section/index.js",
"./server-file-system": "./dist-cms/packages/core/server-file-system/index.js",
"./sorter": "./dist-cms/packages/core/sorter/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/document-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/document-search-result-item.element.ts
index e016ddf597..8e1556711a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/document-search-result-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/document-search-result-item.element.ts
@@ -1,16 +1,30 @@
-import type { UmbDocumentItemModel } from '../repository/index.js';
+import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
const elementName = 'umb-document-search-result-item';
@customElement(elementName)
export class UmbDocumentSearchResultItemElement extends UmbLitElement {
- @property({ attribute: false })
- item?: UmbDocumentItemModel;
+ @property({ type: Object })
+ item?: UmbSearchResultItemModel;
render() {
- return html`HELLO WORLD ${this.item?.unique}`;
+ return html`
+ ICON
+ ${this.item?.name}
+ `;
}
+
+ static styles = [
+ UmbTextStyles,
+ css`
+ :host {
+ display: flex;
+ gap: 12px;
+ }
+ `,
+ ];
}
export { UmbDocumentSearchResultItemElement as element };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/search/index.ts
new file mode 100644
index 0000000000..9b7dfb03df
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/index.ts
@@ -0,0 +1 @@
+export { type UmbSearchResultItemModel } from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
index dc3df95850..52fc2f1b33 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
@@ -5,7 +5,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registr
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbExtensionsManifestInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
-import './search-result-item.element.js';
+import '../search-result/search-result-item.element.js';
export type SearchItem = {
entityType: string;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-result-item.element.ts
deleted file mode 100644
index fee8a881de..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-result-item.element.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
-
-const elementName = 'umb-search-result-item';
-@customElement(elementName)
-export class UmbSearchResultItemElement extends UmbLitElement {
- @property({ type: Object })
- item: any;
-
- render() {
- return html`Helloasasdas`;
- }
-}
-
-export { UmbSearchResultItemElement as element };
-
-declare global {
- interface HTMLElementTagNameMap {
- [elementName]: UmbSearchResultItemElement;
- }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-result/search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-result/search-result-item.element.ts
new file mode 100644
index 0000000000..103fa70187
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-result/search-result-item.element.ts
@@ -0,0 +1,36 @@
+import type { UmbSearchResultItemModel } from '../types.js';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+const elementName = 'umb-search-result-item';
+@customElement(elementName)
+export class UmbSearchResultItemElement extends UmbLitElement {
+ @property({ type: Object })
+ item?: UmbSearchResultItemModel;
+
+ render() {
+ return html`
+ ICON
+ ${this.item?.name}
+ `;
+ }
+
+ static styles = [
+ UmbTextStyles,
+ css`
+ :host {
+ display: flex;
+ gap: 12px;
+ }
+ `,
+ ];
+}
+
+export { UmbSearchResultItemElement as element };
+
+declare global {
+ interface HTMLElementTagNameMap {
+ [elementName]: UmbSearchResultItemElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/types.ts b/src/Umbraco.Web.UI.Client/src/packages/search/types.ts
new file mode 100644
index 0000000000..e4952bdd42
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/types.ts
@@ -0,0 +1,5 @@
+export type UmbSearchResultItemModel = {
+ icon?: string;
+ name: string;
+ unique: string;
+};
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index eee2db6359..736aea9e17 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -86,6 +86,7 @@
"@umbraco-cms/backoffice/repository": ["./src/packages/core/repository/index.ts"],
"@umbraco-cms/backoffice/resources": ["./src/packages/core/resources/index.ts"],
"@umbraco-cms/backoffice/router": ["./src/packages/core/router/index.ts"],
+ "@umbraco-cms/backoffice/search": ["./src/packages/search/index.ts"],
"@umbraco-cms/backoffice/section": ["./src/packages/core/section/index.ts"],
"@umbraco-cms/backoffice/server-file-system": ["./src/packages/core/server-file-system/index.ts"],
"@umbraco-cms/backoffice/sorter": ["./src/packages/core/sorter/index.ts"],