You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2023/02/22 15:35:30 UTC
[myfaces-tobago] 01/02: feat(SelectOne/ManyList): no-entries hint
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 118008b17e6c0b3f64a29e077cae9589b7df675c
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed Feb 22 15:55:08 2023 +0100
feat(SelectOne/ManyList): no-entries hint
* add a <tfoot> which contains the no-entries hint
* style tobago-no-entries class
* do some cleanup
Issue: TOBAGO-2196
---
.../renderkit/renderer/SelectManyListRenderer.java | 8 ++++++++
.../renderkit/renderer/SelectOneListRenderer.java | 8 ++++++++
.../myfaces/tobago/renderkit/css/TobagoClass.java | 1 +
tobago-theme/src/main/scss/_tobago.scss | 11 ++++++++++-
.../tobago-theme-standard/src/main/ts/tobago-css.ts | 1 +
.../src/main/ts/tobago-select-list-base.ts | 20 +++++++++++++++++---
.../src/main/ts/tobago-select-many-list.ts | 17 ++++-------------
7 files changed, 49 insertions(+), 17 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java
index b34a777893..8a9e1b26b8 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java
@@ -198,6 +198,14 @@ public class SelectManyListRenderer<T extends AbstractUISelectManyList> extends
}
writer.endElement(HtmlElements.TBODY);
+ writer.startElement(HtmlElements.TFOOT);
+ writer.startElement(HtmlElements.TR);
+ writer.writeClassAttribute(TobagoClass.NO__ENTRIES, BootstrapClass.D_NONE);
+ writer.startElement(HtmlElements.TD);
+ writer.writeText("---");
+ writer.endElement(HtmlElements.TD);
+ writer.endElement(HtmlElements.TR);
+ writer.endElement(HtmlElements.TFOOT);
writer.endElement(HtmlElements.TABLE);
writer.endElement(HtmlElements.DIV);
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java
index b68bf488b6..f2442dec28 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java
@@ -170,6 +170,14 @@ public class SelectOneListRenderer<T extends AbstractUISelectOneList> extends Se
}
writer.endElement(HtmlElements.TBODY);
+ writer.startElement(HtmlElements.TFOOT);
+ writer.startElement(HtmlElements.TR);
+ writer.writeClassAttribute(TobagoClass.NO__ENTRIES, BootstrapClass.D_NONE);
+ writer.startElement(HtmlElements.TD);
+ writer.writeText("---");
+ writer.endElement(HtmlElements.TD);
+ writer.endElement(HtmlElements.TR);
+ writer.endElement(HtmlElements.TFOOT);
writer.endElement(HtmlElements.TABLE);
writer.endElement(HtmlElements.DIV);
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index 4e6efa107e..5cb5f87303 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -68,6 +68,7 @@ public enum TobagoClass implements CssItem {
MESSAGES__CONTAINER("tobago-messages-container"),
NOW("tobago-now"),
NUMBER("tobago-number"),
+ NO__ENTRIES("tobago-no-entries"),
NONE("tobago-none"),
OBJECT("tobago-object"),
OPTIONS("tobago-options"),
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 3440fae36c..1d026a45d6 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -294,7 +294,7 @@ $form-select-disabled-color: rgba($form-select-color, $tobago-form-disabled-alph
.table {
margin-bottom: 0;
- tr {
+ tbody tr {
cursor: pointer;
&.tobago-disabled {
@@ -316,6 +316,15 @@ $form-select-disabled-color: rgba($form-select-color, $tobago-form-disabled-alph
}
}
}
+
+ tfoot tr.tobago-no-entries {
+ color: $dropdown-link-disabled-color;
+ text-align: center;
+
+ td {
+ border-bottom-width: 0;
+ }
+ }
}
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts
index 1a60284c5e..e3fed5d73e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts
@@ -39,6 +39,7 @@ export enum Css {
TOBAGO_DROPDOWN_SUBMENU = "tobago-dropdown-submenu",
TOBAGO_EXPANDED = "tobago-expanded",
TOBAGO_FOCUS = "tobago-focus",
+ TOBAGO_NO_ENTRIES = "tobago-no-entries",
TOBAGO_OPTIONS = "tobago-options",
TOBAGO_PLACEHOLDER = "tobago-placeholder",
TOBAGO_PRESELECT = "tobago-preselect",
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
index 28abdb16c8..1f68547a91 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
@@ -64,9 +64,13 @@ export abstract class SelectListBase extends HTMLElement {
return root.querySelector(`.dropdown-menu[name='${this.id}']`);
}
- get tbody(): HTMLElement {
+ get options(): HTMLElement {
const root = this.getRootNode() as ShadowRoot | Document;
- return root.querySelector(`.tobago-options[name='${this.id}'] tbody`);
+ return root.querySelector(`.tobago-options[name='${this.id}'] table`);
+ }
+
+ get tbody(): HTMLElement {
+ return this.options.querySelector("tbody");
}
get rows(): NodeListOf<HTMLTableRowElement> {
@@ -162,17 +166,27 @@ export abstract class SelectListBase extends HTMLElement {
this.showDropdown();
const filterFunction = TobagoFilterRegistry.get(this.filter);
// XXX todo: if filterFunction not found?
+
+ let entriesCount = 0;
if (filterFunction != null) {
- this.querySelectorAll("tr").forEach(row => {
+ this.rows.forEach(row => {
const itemValue = row.dataset.tobagoValue;
if (filterFunction(itemValue, searchString)) {
row.classList.remove(Css.D_NONE);
+ entriesCount++;
} else {
row.classList.add(Css.D_NONE);
row.classList.remove(Css.TOBAGO_PRESELECT);
}
});
}
+
+ const noEntriesHint = this.options.querySelector("." + Css.TOBAGO_NO_ENTRIES);
+ if (entriesCount === 0) {
+ noEntriesHint.classList.remove(Css.D_NONE);
+ } else {
+ noEntriesHint.classList.add(Css.D_NONE);
+ }
}
private tbodyClickEvent(event: MouseEvent): void {
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
index baf3a1c154..bc3585922e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
@@ -17,7 +17,7 @@
import {SelectListBase} from "./tobago-select-list-base";
import {Css} from "./tobago-css";
-import {html, HTMLTemplateResult, render, TemplateResult} from "lit-html";
+import {html, HTMLTemplateResult, render} from "lit-html";
class SelectManyList extends SelectListBase {
constructor() {
@@ -74,18 +74,10 @@ class SelectManyList extends SelectListBase {
const tabIndex: number = this.filterInput.tabIndex;
const span = document.createElement("span");
span.className = "btn-group";
- span.role="group";
+ span.role = "group";
span.dataset.tobagoValue = itemValue;
this.filterInput.insertAdjacentElement("beforebegin", span);
- render(
- this.getRowTemplate(row.innerText, option.disabled || this.hiddenSelect.disabled, tabIndex), span);
-
- // todo: nicer adding the @click with lit-html
- // const closeButton = this.selectField
- // .querySelector(".btn-group[data-tobago-value='" + itemValue + "'] button.btn.badge");
- // closeButton?.addEventListener("click", this.removeBadge.bind(this));
- // closeButton?.addEventListener("focus", this.focusEvent.bind(this));
- // closeButton?.addEventListener("blur", this.blurEvent.bind(this));
+ render(this.getRowTemplate(row.innerText, option.disabled || this.hiddenSelect.disabled, tabIndex), span);
row.classList.add(Css.TABLE_PRIMARY); // highlight list row
} else {
@@ -117,8 +109,7 @@ class SelectManyList extends SelectListBase {
}
}
-
- private getRowTemplate(text: string, disabled: boolean, tabIndex: number): HTMLTemplateResult {
+ private getRowTemplate(text: string, disabled: boolean, tabIndex: number): HTMLTemplateResult {
console.debug("creating span: ", text, disabled, tabIndex);
return disabled
? html`<tobago-badge class="badge text-bg-primary btn disabled">${text}</tobago-badge>`