Skip to content

Commit 0571300

Browse files
elenastoyanovaaelenastoyanovaa
authored
feat(ui5-search): add samples to playground (#11148)
1 parent 67eb583 commit 0571300

File tree

11 files changed

+188
-0
lines changed

11 files changed

+188
-0
lines changed

‎packages/fiori/src/SearchFieldScopeOption.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type { ISearchFieldScopeOption } from "./SearchField.js";
1212
* @implements {ISearchFieldScopeOption}
1313
* @public
1414
* @since 2.9.0
15+
* @experimental
1516
*/
1617
@customElement("ui5-search-field-scope-option")
1718
class SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {

‎packages/website/docs/_components_pages/fiori/Search/Search.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
sidebar_class_name: newComponentBadge
3+
---
4+
5+
import Basic from "../../../_samples/fiori/Search/Basic/Basic.md";
6+
import Advanced from "../../../_samples/fiori/Search/Advanced/Advanced.md";
7+
8+
<%COMPONENT_OVERVIEW%>
9+
10+
## Basic Sample
11+
A Search component with enabled scope and items and filtering by scope.
12+
13+
<Basic />
14+
15+
<%COMPONENT_METADATA%>
16+
17+
## More Samples
18+
19+
### Filtering
20+
The examples shows filtering per user input, typeahead and highlighting suggestions per user input.
21+
22+
<Advanced />

‎packages/website/docs/_components_pages/fiori/Search/SearchFieldScopeOption.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
slug: ../SearchFieldScopeOption
3+
sidebar_class_name: newComponentBadge
4+
---
5+
6+
<%COMPONENT_OVERVIEW%>
7+
8+
<%COMPONENT_METADATA%>

‎packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
slug: ../SearchItem
3+
sidebar_class_name: newComponentBadge
4+
---
5+
6+
<%COMPONENT_OVERVIEW%>
7+
8+
<%COMPONENT_METADATA%>

‎packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
slug: ../SearchItemGroup
3+
sidebar_class_name: newComponentBadge
4+
---
5+
6+
<%COMPONENT_OVERVIEW%>
7+
8+
<%COMPONENT_METADATA%>

‎packages/website/docs/_samples/fiori/Search/Advanced/Advanced.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
4+
<Editor html={html} js={js} />

‎packages/website/docs/_samples/fiori/Search/Advanced/main.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
import "@ui5/webcomponents-fiori/dist/Search.js";
3+
import "@ui5/webcomponents-fiori/dist/SearchItem.js";
4+
5+
const data = [
6+
{ name: "Red Apple", category: "Fruit" },
7+
{ name: "Apple", category: "Fruit" },
8+
{ name: "Cucumber", category: "Vegetable" },
9+
{ name: "Orange", category: "Fruit" },
10+
{ name: "Tomato", category: "Vegetable" },
11+
];
12+
13+
function onDelete(event) {
14+
const item = event.target;
15+
if (item) {
16+
item.remove();
17+
}
18+
}
19+
20+
function createItems(parent, data) {
21+
data.forEach(item => {
22+
const searchItem = document.createElement("ui5-search-item");
23+
searchItem.headingText = item.name;
24+
searchItem.icon = "search";
25+
searchItem.addEventListener("ui5-delete", onDelete);
26+
parent.appendChild(searchItem);
27+
});
28+
}
29+
30+
const filtering = document.getElementById("filtering");
31+
createItems(filtering, data);
32+
filtering.addEventListener("ui5-input", (event) => {
33+
const value = event.target.value.toLowerCase();
34+
const filteredData = data.filter(item => item.name.toLowerCase().includes(value));
35+
36+
// clear search items
37+
filtering.innerHTML = "";
38+
39+
filtering.getSlottedNodes("items").forEach(item => {
40+
item.remove();
41+
});
42+
43+
// create search items based on search
44+
createItems(filtering, filteredData);
45+
});

‎packages/website/docs/_samples/fiori/Search/Advanced/sample.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Sample</title>
9+
</head>
10+
11+
<body style="background-color: var(--sapBackgroundColor); height: 350px">
12+
<!-- playground-fold-end -->
13+
<ui5-search id="filtering" show-popup-action popup-action-text="Show all search results" expanded show-clear-icon placeholder="Start typing ..."></ui5-search>
14+
</div>
15+
<!-- playground-fold -->
16+
<script type="module" src="main.js"></script>
17+
</body>
18+
19+
</html>
20+
<!-- playground-fold-end -->

‎packages/website/docs/_samples/fiori/Search/Basic/Basic.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
4+
<Editor html={html} js={js} />

‎packages/website/docs/_samples/fiori/Search/Basic/main.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
import "@ui5/webcomponents-fiori/dist/Search.js";
3+
import "@ui5/webcomponents-fiori/dist/SearchItem.js";
4+
import "@ui5/webcomponents-fiori/dist/SearchFieldScopeOption.js";
5+
6+
const scopeData = [
7+
{ name: "Laptop", scope: "products" },
8+
{ name: "Leave Requests", scope: "apps" },
9+
{ name: "Log work", scope: "apps" },
10+
{ name: "Manage Products", scope: "apps" },
11+
{ name: "Mobile Phones", scope: "products" },
12+
{ name: "Tablet", scope: "products" },
13+
];
14+
15+
function createScopeItems(scope) {
16+
let filterData = [];
17+
18+
if (!scope) {
19+
filterData = scopeData;
20+
} else {
21+
filterData = scopeData.filter(item => item.scope === scope);
22+
}
23+
24+
filterData.forEach(item => {
25+
const searchItem = document.createElement("ui5-search-item");
26+
searchItem.headingText = item.name;
27+
searchItem.scopeName = item.scope;
28+
searchScope.appendChild(searchItem);
29+
});
30+
}
31+
32+
const searchScope = document.getElementById("search-scope");
33+
34+
createScopeItems();
35+
36+
searchScope.addEventListener("ui5-scope-change", (event) => {
37+
const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
38+
39+
searchScope.items.forEach(item => {
40+
item.remove();
41+
});
42+
43+
createScopeItems(scope);
44+
});

0 commit comments

Comments
 (0)