#135 and #146 done (#148)

added `SuperTabs.isMultiline`
also cleaned up some sonar warnings

demo-v14/frontend/styles/demo-styles.css

@@ -17,7 +17,7 @@ p.selected-tab {
     background: #2b908f;
     font-weight: bold;
     border: 3px solid darkblue;
-    padding: 0px;
+    padding: 0;
 }
 
 div.item-grid-cell {
@@ -65,4 +65,3 @@ span.highlighted {
     padding: 1em;
     margin: 1em;
 }
-

demo-v14/frontend/styles/super-tabs-styles.css

@@ -0,0 +1,3 @@
+:host(#belongs-to-super-tabs) [part="tabs"] {
+    width: 400px;
+}

demo-v14/src/main/java/org/vaadin/miki/MainView.java

@@ -63,6 +63,7 @@
  */
 @CssImport("./styles/demo-styles.css")
 @CssImport(value = "./styles/super-number-fields-styles.css", themeFor = "vaadin-text-field")
+@CssImport(value = "./styles/super-tabs-styles.css", themeFor = "vaadin-tabs")
 @Route
 @PageTitle("SuperFields Demo")
 public class MainView extends VerticalLayout {
@@ -247,14 +248,16 @@ private void buildUnloadObserver(Component component, Consumer<Component[]> call
     }
 
     private void buildSuperTabs(Component component, Consumer<Component[]> callback) {
+        final Checkbox multilineTabs = new Checkbox("Multiline tabs?", event -> ((SuperTabs<?>)component).setMultiline(event.getValue()));
+
         final ComboBox<TabHandler> tabHandlers = new ComboBox<>("Select a tab handler: ",
                 TabHandlers.VISIBILITY_HANDLER, TabHandlers.REMOVING_HANDLER, TabHandlers.selectedContentHasClassName("selected-tab"));
         tabHandlers.addValueChangeListener(event -> {
             if(event.getValue() != null)
                 ((SuperTabs<?>)component).setTabHandler(event.getValue());
         });
 
-        callback.accept(new Component[]{tabHandlers});
+        callback.accept(new Component[]{multilineTabs, tabHandlers});
     }
 
     private Component buildContentsFor(Class<?> type) {
@@ -302,7 +305,10 @@ public MainView() {
         this.components.put(SuperTextArea.class, new SuperTextArea("Type a lot of something:").withPlaceholder("(nothing typed)").withId("super-text-area"));
         this.components.put(SuperTabs.class, new SuperTabs<String>((Supplier<HorizontalLayout>) HorizontalLayout::new)
                 .withTabContentGenerator(s -> new Paragraph("Did you know? All SuperFields are "+s))
-                .withItems("Java friendly", "Super-configurable", "Open source")
+                .withItems(
+                        "Java friendly", "Super-configurable", "Open source",
+                        "Fun to use", "Reasonably well documented"
+                ).withId("super-tabs")
         );
         this.components.put(ObservedField.class, new ObservedField());
         this.components.put(ComponentObserver.class, new ComponentObserver());

superfields/src/main/java/org/vaadin/miki/superfields/tabs/SuperTabs.java

@@ -7,6 +7,7 @@
 import com.vaadin.flow.component.HasStyle;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.customfield.CustomField;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.tabs.Tab;
@@ -36,6 +37,7 @@
  * @since 2020-04-10
  */
 @Tag("super-tabs")
+@CssImport(value = "./styles/super-tabs-multiline.css", themeFor = "vaadin-tabs")
 public class SuperTabs<T>
         extends CustomField<T>
         implements HasLabel, HasStyle, WithItemsMixin<T, SuperTabs<T>>, WithIdMixin<SuperTabs<T>>,
@@ -46,13 +48,18 @@ public class SuperTabs<T>
      */
     public static final Supplier<Div> DEFAULT_TAB_CONTENTS_CONTAINER = Div::new;
 
+    /**
+     * Name of the theme for multiline tabs.
+     */
+    public static final String MULTILINE_THEME_NAME = "multi-line-tabs";
+
     private final Tabs tabs = new Tabs();
 
     private final HasComponents contents;
 
     private final Map<Tab, Component> tabsToContents = new HashMap<>();
 
-    private final List<Map.Entry<T, Tab>> values = new ArrayList<>();
+    private final transient List<Map.Entry<T, Tab>> values = new ArrayList<>();
 
     private TabHandler tabHandler;
 
@@ -62,6 +69,8 @@ public class SuperTabs<T>
 
     private boolean customValueAllowed = false;
 
+    private boolean multiline = false;
+
     /**
      * Creates the component with no tabs and default {@link TabHandler}, {@link TabHeaderGenerator} and {@link TabContentGenerator}.
      */
@@ -145,6 +154,7 @@ public <C extends Component & HasComponents> SuperTabs(T defaultValue, Supplier<
         this.setTabContentGenerator(tabContentGenerator);
         this.tabs.setAutoselect(false);
         this.tabs.setWidthFull();
+        this.tabs.getElement().getClassList().add("part-of-supertabs");
         final C mainContents = mainContentSupplier.get();
         if(mainContents instanceof HasSize)
             ((HasSize) mainContents).setWidthFull();
@@ -460,8 +470,50 @@ public SuperTabs<T> withTabHandler(TabHandler tabHandler) {
         return this;
     }
 
+    /**
+     * Checks whether tabs wrap to a new line.
+     * @return When {@code true} and tabs would overflow current viewport, the extra ones will drop to the next line; {@code false} otherwise and by default.
+     */
+    public boolean isMultiline() {
+        return this.multiline;
+    }
+
+    /**
+     * Sets whether or not tabs should overflow to next line.
+     * @param multiline When {@code true} and tabs overflow current viewport, the extra ones will drop to the next line; {@code false} when all should be displayed in one line (with navigation buttons if needed).
+     */
+    public void setMultiline(boolean multiline) {
+        this.multiline = multiline;
+        if(this.multiline)
+            this.tabs.setThemeName(MULTILINE_THEME_NAME);
+        else this.tabs.removeThemeName(MULTILINE_THEME_NAME);
+    }
+
+    /**
+     * Chains {@link #setMultiline(boolean)} and returns itself.
+     * @param multiline Whether or not wrap tabs into new line on overflow.
+     * @return This.
+     * @see #setMultiline(boolean)
+     */
+    public SuperTabs<T> withMultiline(boolean multiline) {
+        this.setMultiline(multiline);
+        return this;
+    }
+
     @Override
     public void setItems(Collection<T> collection) {
         this.addTabs(collection);
     }
+
+    @Override
+    public void setId(String id) {
+        this.tabs.setId(id == null ? null : "belongs-to-"+id);
+        super.setId(id);
+    }
+
+    @Override
+    public SuperTabs<T> withId(String id) {
+        this.setId(id);
+        return this;
+    }
 }

superfields/src/main/java/org/vaadin/miki/superfields/tabs/TabContentGenerator.java

@@ -2,14 +2,16 @@
 
 import com.vaadin.flow.component.Component;
 
+import java.io.Serializable;
+
 /**
  * Marker interface for objects that produce components for tabs.
  * @param <V> Type of object to generate content for.
  * @author miki
  * @since 2020-04-10
  */
 @FunctionalInterface
-public interface TabContentGenerator<V> {
+public interface TabContentGenerator<V> extends Serializable {
 
     /**
      * Creates a new instance of a component that corresponds to the given object.

superfields/src/main/java/org/vaadin/miki/superfields/tabs/TabHandler.java

@@ -4,13 +4,15 @@
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.tabs.Tab;
 
+import java.io.Serializable;
+
 /**
  * Interface for objects handling the tab adding, displaying and hiding.
  *
  * @author miki
  * @since 2020-04-30
  */
-public interface TabHandler {
+public interface TabHandler extends Serializable {
 
     /**
      * Called when a tab has been added, but its contents have not.

superfields/src/main/java/org/vaadin/miki/superfields/tabs/TabHeaderGenerator.java

@@ -2,14 +2,16 @@
 
 import com.vaadin.flow.component.tabs.Tab;
 
+import java.io.Serializable;
+
 /**
  * Marker interface for objects that produce tabs.
  * @param <V> Type of object to generate tabs for.
  * @author miki
  * @since 2020-04-10
  */
 @FunctionalInterface
-public interface TabHeaderGenerator<V> {
+public interface TabHeaderGenerator<V> extends Serializable {
 
     /**
      * Creates a new instance of a tab that corresponds to the given object.

superfields/src/main/resources/META-INF/resources/frontend/styles/super-tabs-multiline.css

@@ -0,0 +1,9 @@
+:host([theme="multi-line-tabs"]) [part="tabs"] {
+  flex-wrap: wrap;
+--_lumo-tabs-overflow-mask-image: none !important;
+}
+
+:host([theme="multi-line-tabs"]) [part="forward-button"],
+:host([theme="multi-line-tabs"]) [part="back-button"] {
+  display: none;
+}