Horizontal menu component jmix-framework#2492

jmix-flowui/flowui-kit/src/main/java/io/jmix/flowui/kit/component/main/ListMenu.java

@@ -231,7 +231,7 @@ protected ListItem createMenuRecursively(MenuItem menuItem) {
             Details menuBar = createMenuBarComponent(menuBarItem);
             UnorderedList content = getMenuBarContent(menuBar);
 
-            for (MenuItem childItem : menuBarItem.getChildren()) {
+            for (MenuItem childItem : menuBarItem.getChildItems()) {
                 ListItem component = createMenuRecursively(childItem);
                 content.add(component);
             }
@@ -262,7 +262,7 @@ protected void attachMenuItemRecursively(MenuItem menuItem) {
         menuItem.setMenuComponent(this);
 
         if (menuItem.isMenu()) {
-            for (MenuItem item : ((MenuBarItem) menuItem).getChildren()) {
+            for (MenuItem item : ((MenuBarItem) menuItem).getChildItems()) {
                 attachMenuItemRecursively(item);
             }
         }
@@ -272,7 +272,7 @@ protected void detachMenuItemRecursively(MenuItem menuItem) {
         menuItem.setMenuComponent(null);
 
         if (menuItem.isMenu()) {
-            for (MenuItem item : ((MenuBarItem) menuItem).getChildren()) {
+            for (MenuItem item : ((MenuBarItem) menuItem).getChildItems()) {
                 detachMenuItemRecursively(item);
             }
         }
@@ -283,7 +283,7 @@ protected void unregisterMenuItemRecursively(MenuItem menuItem) {
         menuItem.removePropertyChangeListener(menuItemPropertyChangeListener);
 
         if (menuItem.isMenu()) {
-            for (MenuItem item : ((MenuBarItem) menuItem).getChildren()) {
+            for (MenuItem item : ((MenuBarItem) menuItem).getChildItems()) {
                 unregisterMenuItemRecursively(item);
             }
         }
@@ -858,9 +858,15 @@ public void removeAllChildItems() {
 
         /**
          * @return immutable list of child items
+         * @deprecated use {@link #getChildItems()}
          */
-        @Override
+        @Deprecated
         public List<MenuItem> getChildren() {
+            return getChildItems();
+        }
+
+        @Override
+        public List<MenuItem> getChildItems() {
             return hasChildren()
                     ? Collections.unmodifiableList(children)
                     : Collections.emptyList();

jmix-flowui/flowui-kit/src/main/java/io/jmix/flowui/kit/component/menu/ParentMenuItem.java

@@ -28,7 +28,7 @@ public interface ParentMenuItem<T extends MenuItem> extends MenuItem {
     /**
      * @return child items of this parent item
      */
-    List<T> getChildren();
+    List<T> getChildItems();
 
     /**
      * Removes all child items of this parent item

jmix-flowui/flowui-kit/src/main/java/io/jmix/flowui/kit/meta/component/StudioComponents.java

@@ -2875,4 +2875,33 @@ public interface StudioComponents {
             }
     )
     TextField menuFilterField();
+
+    @StudioComponent(
+            name = "NavigationMenuBar",
+            classFqn = "io.jmix.flowui.component.navigationmenubar.NavigationMenuBar",
+            category = "Components",
+            xmlElement = "navigationMenuBar",
+            icon = "io/jmix/flowui/kit/meta/icon/component/navigationMenuBar.svg",
+            properties = {
+                    @StudioProperty(xmlAttribute = "alignSelf", type = StudioPropertyType.ENUMERATION,
+                            classFqn = "com.vaadin.flow.component.orderedlayout.FlexComponent$Alignment",
+                            defaultValue = "AUTO",
+                            options = {"START", "END", "CENTER", "STRETCH", "BASELINE", "AUTO"}),
+                    @StudioProperty(xmlAttribute = "classNames", type = StudioPropertyType.VALUES_LIST),
+                    @StudioProperty(xmlAttribute = "colspan", type = StudioPropertyType.INTEGER),
+                    @StudioProperty(xmlAttribute = "css", type = StudioPropertyType.STRING),
+                    @StudioProperty(xmlAttribute = "height", type = StudioPropertyType.SIZE),
+                    @StudioProperty(xmlAttribute = "id", type = StudioPropertyType.COMPONENT_ID),
+                    @StudioProperty(xmlAttribute = "loadMenuConfig", type = StudioPropertyType.BOOLEAN,
+                            defaultValue = "true"),
+                    @StudioProperty(xmlAttribute = "maxHeight", type = StudioPropertyType.SIZE),
+                    @StudioProperty(xmlAttribute = "maxWidth", type = StudioPropertyType.SIZE),
+                    @StudioProperty(xmlAttribute = "minHeight", type = StudioPropertyType.SIZE),
+                    @StudioProperty(xmlAttribute = "minWidth", type = StudioPropertyType.SIZE),
+                    @StudioProperty(xmlAttribute = "visible", type = StudioPropertyType.BOOLEAN,
+                            defaultValue = "true"),
+                    @StudioProperty(xmlAttribute = "width", type = StudioPropertyType.SIZE)
+            }
+    )
+    JmixMenuBar navigationMenuBar();
 }

jmix-flowui/flowui-themes/src/main/resources/META-INF/resources/themes/jmix-lumo/component/jmix-navigation-menu-bar.css

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2023 Haulmont.
+ *
+ * Licensed 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.
+ */
+
+.jmix-navigation-menu-bar {
+    color: var(--lumo-secondary-text-color);
+}
+
+.jmix-navigation-menu-bar-root-item:hover {
+  color: var(--lumo-contrast-80pct);
+}
+
+.jmix-navigation-menu-bar vaadin-menu-bar-button {
+  color: inherit;
+  background-color: transparent;
+  border-radius: var(--lumo-border-radius-m);
+}
+
+.jmix-navigation-menu-bar vaadin-menu-bar-button[expanded] {
+  background-color: var(--lumo-primary-color-10pct);
+}
+
+vaadin-menu-bar-item .jmix-navigation-menu-bar-menu-item,
+vaadin-menu-bar-list-box .jmix-navigation-menu-bar-menu-item {
+  color: inherit;
+  display: flex;
+  cursor: pointer;
+  width: 100%;
+}
+
+.jmix-navigation-menu-bar-menu-item:hover {
+  text-decoration: none;
+}
+
+.jmix-navigation-menu-bar-item-icon-with-title {
+  margin-right: var(--lumo-space-s);
+}
+
+.jmix-navigation-menu-bar-item-icon {
+  width: var(--lumo-icon-size-s);
+  height: var(--lumo-icon-size-s);
+}

jmix-flowui/flowui-themes/src/main/resources/META-INF/resources/themes/jmix-lumo/styles.css

@@ -31,6 +31,7 @@
 @import url('component/jmix-group-filter.css');
 @import url('component/jmix-grid-column-visibility.css');
 @import url('component/jmix-menu-filter-field.css');
+@import url('component/jmix-navigation-menu-bar.css');
 
 @import url('component/vaadin-form-layout.css');
 @import url('component/vaadin-grid.css');

jmix-flowui/flowui/src/main/java/io/jmix/flowui/component/menufilterfield/MenuFilterField.java

@@ -280,7 +280,7 @@ protected <C extends MenuItem> boolean filterChildren(ParentMenuItem<C> parentMe
                                                               boolean forceRetainAllChildren) {
             boolean anyChildMatch = false;
 
-            List<C> childItems = new ArrayList<>(parentMenuItem.getChildren());
+            List<C> childItems = new ArrayList<>(parentMenuItem.getChildItems());
 
             //update child collection only if force flag is disabled
             if (!forceRetainAllChildren) {

jmix-flowui/flowui/src/main/java/io/jmix/flowui/component/navigationmenubar/MenuConfigNavigationMenuBarItemProvider.java

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2023 Haulmont.
+ *
+ * Licensed 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.
+ */
+
+package io.jmix.flowui.component.navigationmenubar;
+
+import io.jmix.flowui.menu.MenuConfig;
+import io.jmix.flowui.menu.MenuItem;
+import io.jmix.flowui.menu.provider.MenuConfigMenuItemProvider;
+import org.springframework.beans.factory.config.BeanDefinition;
+import org.springframework.context.annotation.Scope;
+import org.springframework.stereotype.Component;
+
+import java.util.Collection;
+import java.util.List;
+
+/**
+ * Menu item provider for {@link io.jmix.flowui.component.navigationmenubar.NavigationMenuBar}
+ */
+@Component("flowui_MenuConfigNavigationMenuBarItemProvider")
+@Scope(BeanDefinition.SCOPE_PROTOTYPE)
+public class MenuConfigNavigationMenuBarItemProvider
+        extends MenuConfigMenuItemProvider<NavigationMenuBar.AbstractMenuItem<?>> {
+
+    protected NavigationMenuBarItemConverter itemConverter;
+
+    public MenuConfigNavigationMenuBarItemProvider(MenuConfig menuConfig,
+                                                   NavigationMenuBarItemConverter itemConverter) {
+        super(menuConfig);
+        this.itemConverter = itemConverter;
+    }
+
+    @Override
+    protected List<NavigationMenuBar.AbstractMenuItem<?>> convertToMenuItems(Collection<MenuItem> menuConfigItems) {
+        return menuConfigItems.stream()
+                .flatMap(item -> itemConverter.createMenuItemWithChildren(item).stream())
+                .toList();
+    }
+}