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 2022/10/27 10:50:10 UTC
[myfaces-tobago] branch t5_selectMany updated (a76a934121 -> eb6388e2b3)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
from a76a934121 feat(selectMany): filter after badges
new 917e602d2d feat(selectMany): dummy typescript
new eb6388e2b3 feat(selectMany): inline
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../internal/component/AbstractUISelectMany.java | 2 +
.../renderkit/renderer/SelectManyRenderer.java | 16 ++++-
.../taglib/component/SelectManyTagDeclaration.java | 3 +-
.../tobago/renderkit/css/BootstrapClass.java | 2 +
.../myfaces/tobago/renderkit/css/TobagoClass.java | 1 +
.../030-select/80-selectMany/SelectMany.xhtml | 6 ++
tobago-theme/src/main/scss/_tobago.scss | 13 +++-
.../src/main/ts/tobago-all.ts | 1 +
.../src/main/ts/tobago-select-many.ts | 70 ++++++++++++++++++++++
9 files changed, 111 insertions(+), 3 deletions(-)
create mode 100644 tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
[myfaces-tobago] 02/02: feat(selectMany): inline
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit eb6388e2b3dbf9dae7f8468e469438ffa4bae46f
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 27 12:40:17 2022 +0200
feat(selectMany): inline
* impl inline attribute
* add example
Issue: TOBAGO-2159
---
.../tobago/internal/component/AbstractUISelectMany.java | 2 ++
.../internal/renderkit/renderer/SelectManyRenderer.java | 14 +++++++++++++-
.../taglib/component/SelectManyTagDeclaration.java | 3 ++-
.../myfaces/tobago/renderkit/css/BootstrapClass.java | 2 ++
.../apache/myfaces/tobago/renderkit/css/TobagoClass.java | 1 +
.../content/030-select/80-selectMany/SelectMany.xhtml | 6 ++++++
tobago-theme/src/main/scss/_tobago.scss | 13 ++++++++++++-
7 files changed, 38 insertions(+), 3 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectMany.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectMany.java
index 97c6e10982..061f571e38 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectMany.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectMany.java
@@ -61,6 +61,8 @@ public abstract class AbstractUISelectMany extends AbstractUISelectManyBase
public abstract boolean isReadonly();
+ public abstract boolean isInline();
+
public boolean isError() {
final FacesContext facesContext = FacesContext.getCurrentInstance();
return !isValid()
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
index 2b592c6ec3..2acbceb26d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
@@ -25,6 +25,7 @@ import org.apache.myfaces.tobago.internal.util.ArrayUtils;
import org.apache.myfaces.tobago.internal.util.HtmlRendererUtils;
import org.apache.myfaces.tobago.internal.util.SelectItemUtils;
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
+import org.apache.myfaces.tobago.renderkit.css.CssItem;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -43,6 +44,12 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
return HtmlElements.TOBAGO_SELECT_MANY;
}
+ @Override
+ protected CssItem[] getComponentCss(final FacesContext facesContext, final T component) {
+ final boolean inline = component.isInline();
+ return inline ? new CssItem[]{BootstrapClass.LIST_GROUP} : null;
+ }
+
@Override
protected String getFieldId(FacesContext facesContext, T component) {
return component.getFieldId(facesContext);
@@ -59,6 +66,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
final boolean readonly = component.isReadonly();
final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || readonly;
final String filter = component.getFilter();
+ final boolean inline = component.isInline();
final Markup markup = component.getMarkup();
final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
@@ -66,7 +74,9 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
renderFilterInput(facesContext, component);
writer.startElement(HtmlElements.DIV);
- writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU);
+ writer.writeClassAttribute(
+ TobagoClass.OPTIONS,
+ inline ? BootstrapClass.LIST_GROUP_ITEM : BootstrapClass.DROPDOWN_MENU);
writer.writeNameAttribute(clientId);
writer.startElement(HtmlElements.TABLE);
@@ -143,6 +153,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
final boolean readonly = component.isReadonly();
final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || readonly;
final String filter = component.getFilter();
+ final boolean inline = component.isInline();
final Markup markup = component.getMarkup();
final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
@@ -153,6 +164,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.writeClassAttribute(
BootstrapClass.FORM_SELECT,
TobagoClass.FILTER__WRAPPER,
+ inline ? BootstrapClass.LIST_GROUP_ITEM : null,
BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
component.getCustomClass());
writer.writeAttribute(HtmlAttributes.TITLE, title, true);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyTagDeclaration.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyTagDeclaration.java
index 8ee3774ef2..f3aaed379c 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyTagDeclaration.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyTagDeclaration.java
@@ -43,6 +43,7 @@ import org.apache.myfaces.tobago.internal.taglib.declaration.HasValidatorMessage
import org.apache.myfaces.tobago.internal.taglib.declaration.HasValueChangeListener;
import org.apache.myfaces.tobago.internal.taglib.declaration.IsDisabled;
import org.apache.myfaces.tobago.internal.taglib.declaration.IsFocus;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsInline;
import org.apache.myfaces.tobago.internal.taglib.declaration.IsReadonly;
import org.apache.myfaces.tobago.internal.taglib.declaration.IsRendered;
import org.apache.myfaces.tobago.internal.taglib.declaration.IsRequiredForSelect;
@@ -80,7 +81,7 @@ public interface SelectManyTagDeclaration
extends HasId, IsDisabled, IsRendered, HasBinding, HasTip, HasHelp,
IsReadonly, HasConverter, IsRequiredForSelect, HasLabel, HasValidator, HasValueChangeListener, HasLabelLayout,
HasValidatorMessage, HasConverterMessage, HasRequiredMessageForSelect, HasTabIndex, IsFocus, IsVisual,
- HasAutoSpacing, HasFilter {
+ HasAutoSpacing, HasFilter, IsInline {
/**
* The value of the multi select.
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
index 5667fc53c1..32c642d2bf 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
@@ -410,6 +410,8 @@ public enum BootstrapClass implements CssItem {
JUSTIFY_CONTENT_CENTER("justify-content-center"),
JUSTIFY_CONTENT_END("justify-content-end"),
JUSTIFY_CONTENT_START("justify-content-start"),
+ LIST_GROUP("list-group"),
+ LIST_GROUP_ITEM("list-group-item"),
MB_0("mb-0"),
MB_1("mb-1"),
MB_2("mb-2"),
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 46b880456e..8d503c4eee 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
@@ -71,6 +71,7 @@ public enum TobagoClass implements CssItem {
NOW("tobago-now"),
NUMBER("tobago-number"),
OBJECT("tobago-object"),
+ OPTIONS("tobago-options"),
OUT("tobago-out"),
// PAGE("tobago-page"),
PAGE__MENU_STORE("tobago-page-menuStore"),
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml
index 3d6086ae41..9f71e91167 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml
@@ -26,6 +26,12 @@
<tc:selectItems value="#{selectManyController.planets}"
var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
</tc:selectMany>
+
+ inline:
+ <tc:selectMany value="#{selectManyController.selectedPlanets}" filter="contains" inline="true">
+ <tc:selectItems value="#{selectManyController.planets}"
+ var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
+ </tc:selectMany>
<tc:button label="Submit"/>
</ui:composition>
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 00633390f4..9e8c66d4e6 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1180,6 +1180,13 @@ tobago-select-many {
flex-wrap: wrap;
align-items: center;
+ &.list-group-item.form-select {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+
+ padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+ }
+
.badge {
margin-right: 0.125rem;
}
@@ -1200,7 +1207,11 @@ tobago-select-many {
}
}
- .dropdown-menu {
+ .tobago-options {
+ &.list-group-item {
+ padding: 0;
+ }
+
.table {
margin-bottom: 0;
}
[myfaces-tobago] 01/02: feat(selectMany): dummy typescript
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 917e602d2d7841f10218d9e20d10faa003902381
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 27 12:16:57 2022 +0200
feat(selectMany): dummy typescript
* add typescript file (there is only a dummy click-event to open the dropdown-menu)
Issue: TOBAGO-2159
---
.../renderkit/renderer/SelectManyRenderer.java | 2 +
.../src/main/ts/tobago-all.ts | 1 +
.../src/main/ts/tobago-select-many.ts | 70 ++++++++++++++++++++++
3 files changed, 73 insertions(+)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
index 09bcf9360b..2b592c6ec3 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
@@ -67,6 +67,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.startElement(HtmlElements.DIV);
writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU);
+ writer.writeNameAttribute(clientId);
writer.startElement(HtmlElements.TABLE);
writer.writeClassAttribute(BootstrapClass.TABLE, BootstrapClass.TABLE_HOVER, BootstrapClass.TABLE_SM);
@@ -165,6 +166,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.TEXT);
writer.writeIdAttribute(filterId);
writer.writeClassAttribute(TobagoClass.FILTER, BootstrapClass.FORM_CONTROL);
+ writer.writeAttribute(HtmlAttributes.AUTOCOMPLETE, "off", false);
writer.endElement(HtmlElements.INPUT);
writer.endElement(HtmlElements.DIV);
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts
index 15bd6e250a..913c8cd499 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts
@@ -36,6 +36,7 @@ import "./tobago-reload";
import "./tobago-scroll";
import "./tobago-select-boolean-checkbox";
import "./tobago-select-boolean-toggle";
+import "./tobago-select-many";
import "./tobago-select-many-checkbox";
import "./tobago-select-many-listbox";
import "./tobago-select-many-shuttle";
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
new file mode 100644
index 0000000000..68ff5fc38d
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
@@ -0,0 +1,70 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class SelectMany extends HTMLElement {
+
+ private readonly CssClass = {
+ SHOW: "show"
+ };
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback(): void {
+ // todo: implement open/close dropdown-menu
+ // todo: position/size of dropdown-menu
+ // todo: implement select/deselect options
+ // todo: implement remove badge
+
+ this.selectField.addEventListener("click", this.showDropdownMenu.bind(this));
+ }
+
+ private showDropdownMenu(event: MouseEvent): void {
+ this.dropdownMenu.classList.add(this.CssClass.SHOW);
+ }
+
+ get hiddenSelect(): HTMLScriptElement {
+ return this.root.querySelector(`select[name='${this.id}']`);
+ }
+
+ get selectField(): HTMLInputElement {
+ return this.root.querySelector(`.tobago-filter-wrapper[name='${this.id}']`);
+ }
+
+ get filterInput(): HTMLInputElement {
+ return this.root.querySelector(".tobago-filter");
+ }
+
+ get dropdownMenu(): HTMLDivElement {
+ return this.root.querySelector(`.dropdown-menu[name='${this.id}']`);
+ }
+
+ get menuStore(): HTMLDivElement {
+ return this.root.querySelector(".tobago-page-menuStore");
+ }
+
+ get root(): ShadowRoot | Document {
+ return this.getRootNode() as ShadowRoot | Document;
+ }
+}
+
+document.addEventListener("tobago.init", function (event: Event): void {
+ if (window.customElements.get("tobago-select-many") == null) {
+ window.customElements.define("tobago-select-many", SelectMany);
+ }
+});