Nav Layout Fixes/Updates

client/packages/lowcoder/src/comps/comps/layout/layoutMenuItemComp.tsx

@@ -38,15 +38,13 @@ export class LayoutMenuItemComp extends MultiBaseComp<ChildrenType> {
   }
 
   override getPropertyView(): ReactNode {
-    const isLeaf = this.children.items.getView().length === 0;
     return (
       <>
-        {isLeaf &&
-          this.children.action.propertyView({
-            onAppChange: (label) => {
-              label && this.children.label.dispatchChangeValueAction(label);
-            },
-          })}
+        {this.children.action.propertyView({
+          onAppChange: (label) => {
+            label && this.children.label.dispatchChangeValueAction(label);
+          },
+        })}
         {this.children.label.propertyView({ label: trans("label") })}
         {this.children.icon.propertyView({
           label: trans("icon"),
@@ -98,12 +96,17 @@ const LayoutMenuItemCompMigrate = migrateOldData(LayoutMenuItemComp, (oldData: a
 export class LayoutMenuItemListComp extends list(LayoutMenuItemCompMigrate) {
   addItem(value?: any) {
     const data = this.getView();
+
     this.dispatch(
       this.pushAction(
-        value || {
-          label: trans("menuItem") + " " + (data.length + 1),
-          itemKey: genRandomKey(),
-        }
+        value
+          ? {
+            ...value,
+            itemKey: value.itemKey || genRandomKey(),
+          } : {
+            label: trans("menuItem") + " " + (data.length + 1),
+            itemKey: genRandomKey(),
+          }
       )
     );
   }

client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts

@@ -0,0 +1,77 @@
+import { trans } from "i18n";
+
+export const ModeOptions = [
+  { label: trans("navLayout.modeInline"), value: "inline" },
+  { label: trans("navLayout.modeVertical"), value: "vertical" },
+] as const;
+
+export const DataOption = {
+  Manual: 'manual',
+  Json: 'json',
+}
+export const DataOptionType = [
+  {
+    label: trans("prop.manual"),
+    value: DataOption.Manual,
+  },
+  {
+    label: trans("prop.json"),
+    value: DataOption.Json,
+  },
+];
+
+export const menuItemStyleOptions = [
+  {
+    value: "normal",
+    label: "Normal",
+  },
+  {
+    value: "hover",
+    label: "Hover",
+  },
+  {
+    value: "active",
+    label: "Active",
+  }
+];
+
+export const jsonMenuItems = [
+  {
+    label: "Menu Item 1",
+    key: 'menu-item-1',
+    icon: "https://cdn-icons-png.flaticon.com/128/149/149338.png",
+    action: {
+      url: "https://www.lowcoder.cloud",
+      newTab: false,
+    },
+    children: [
+      {
+        label: "Submenu Item 1",
+        key: 'submenu-item-11',
+        icon: "",
+        action: {
+          url: "https://www.lowcoder.cloud",
+          newTab: false,
+        },
+      },
+      {
+        label: "Submenu Item 2",
+        key: 'submenu-item-12',
+        icon: "",
+        action: {
+          url: "https://www.lowcoder.cloud",
+          newTab: false,
+        },
+      },
+    ]
+  },
+  {
+    label: "Menu Item 2",
+    key: 'menu-item-2',
+    icon: "https://cdn-icons-png.flaticon.com/128/149/149206.png",
+    action: {
+      url: "https://www.lowcoder.cloud",
+      newTab: true,
+    },
+  }
+]

client/packages/lowcoder/src/comps/comps/navComp/components/DroppableMenuItem.tsx

@@ -1,10 +1,12 @@
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import { trans } from "i18n";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import styled from "styled-components";
 import DroppablePlaceholder from "./DroppablePlaceHolder";
 import MenuItem, { ICommonItemProps } from "./MenuItem";
 import { IDragData, IDropData } from "./types";
+import { LayoutMenuItemComp } from "comps/comps/layout/layoutMenuItemComp";
+import { genRandomKey } from "comps/utils/idGenerator";
 
 const DraggableMenuItemWrapper = styled.div`
   position: relative;
@@ -63,6 +65,22 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
     disabled: isDragging || disabled || disableDropIn,
     data: dropData,
   });
+
+  // TODO: Remove this later.
+  // Set ItemKey for previously added sub-menus
+  useEffect(() => {
+    if(!items.length) return;
+    if(!(items[0] instanceof LayoutMenuItemComp)) return;
+
+    return items.forEach(item  => {
+      const subItem = item as LayoutMenuItemComp;
+      const itemKey = subItem.children.itemKey.getView();
+      if(itemKey === '') {
+        subItem.children.itemKey.dispatchChangeValueAction(genRandomKey())
+      }
+    })
+  }, [items])
+
   return (
     <>
       <DraggableMenuItemWrapper>
@@ -99,7 +117,7 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
                 item={subItem}
                 level={0}
                 disabled={disabled || isDragging || disableDropIn}
-                // onAddSubMenu={onAddSubMenu}
+                onAddSubMenu={onAddSubMenu}
                 onDelete={onDelete}
                 parentDragging={isDragging}
               />

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -821,7 +821,7 @@ export const TreeStyle = [
 
 export const TreeSelectStyle = [...multiSelectCommon, ...ACCENT_VALIDATE] as const;
 
-export const DrawerStyle = [getBackground()] as const;
+export const DrawerStyle = [getBackground()] as const
 
 export const JsonEditorStyle = [LABEL] as const;
 
@@ -928,6 +928,59 @@ export const ResponsiveLayoutColStyle = [
   PADDING,
 ] as const;
 
+export const NavLayoutStyle = [
+  ...getBgBorderRadiusByBg(),
+  {
+    name: "text",
+    label: trans("text"),
+    depName: "background",
+    // depTheme: "primary",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+  MARGIN,
+  PADDING,
+] as const;
+
+export const NavLayoutItemStyle = [
+  getBackground("primarySurface"),
+  getStaticBorder('transparent'),
+  RADIUS,
+  {
+    name: "text",
+    label: trans("text"),
+    depName: "background",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+  MARGIN,
+  PADDING,
+] as const;
+
+export const NavLayoutItemHoverStyle = [
+  getBackground("canvas"),
+  getStaticBorder('transparent'),
+  {
+    name: "text",
+    label: trans("text"),
+    depName: "background",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+] as const;
+
+export const NavLayoutItemActiveStyle = [
+  getBackground("primary"),
+  getStaticBorder('transparent'),
+  {
+    name: "text",
+    label: trans("text"),
+    depName: "background",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+] as const;
+
 export const CarouselStyle = [getBackground("canvas")] as const;
 
 export const RichTextEditorStyle = [getStaticBorder(), RADIUS] as const;
@@ -968,6 +1021,10 @@ export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
 export type RichTextEditorStyleType = StyleConfigType<typeof RichTextEditorStyle>;
 export type ResponsiveLayoutRowStyleType = StyleConfigType<typeof ResponsiveLayoutRowStyle>;
 export type ResponsiveLayoutColStyleType = StyleConfigType<typeof ResponsiveLayoutColStyle>;
+export type NavLayoutStyleType = StyleConfigType<typeof NavLayoutStyle>;
+export type NavLayoutItemStyleType = StyleConfigType<typeof NavLayoutItemStyle>;
+export type NavLayoutItemHoverStyleType = StyleConfigType<typeof NavLayoutItemHoverStyle>;
+export type NavLayoutItemActiveStyleType = StyleConfigType<typeof NavLayoutItemActiveStyle>;
 
 export function widthCalculator(margin: string) {
   const marginArr = margin?.trim().replace(/\s+/g,' ').split(" ") || "";

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -177,6 +177,7 @@ export const en = {
       "If the result is non-empty string, it is an error message. If empty or null, the validation passes. Example: ",
     manual: "Manual",
     map: "Mapped",
+    json: "JSON",
     use12Hours: "Use 12-hours",
     hourStep: "Hour step",
     minuteStep: "Minute step",
@@ -2713,4 +2714,13 @@ export const en = {
     rowLayout: "Row Layout",
     columnsLayout: "Columns Layout",
   },
+  navLayout: {
+    mode: "Mode",
+    modeInline: "Inline",
+    modeVertical: "Vertical",
+    width: "Width",
+    widthTooltip: "Number or percentage, e.g. 520, 60%",
+    navStyle: "Menu Style",
+    navItemStyle: "Menu Item Style",
+  }
 };

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -167,6 +167,7 @@ prop: {
     customRuleTooltip: "如果结果是非空字符串,则为错误消息.如果为空或null,则验证通过.\n示例:",
     manual: "手动",
     map: "映射",
+    json: "JSON",
     use12Hours: "使用12小时制",
     hourStep: "小时步长",
     minuteStep: "分钟步长",
@@ -2559,6 +2560,15 @@ timeLine: {
         matchColumnsHeight: "匹配列高度",
         rowLayout: "行布局",
         columnsLayout: "栏目布局",
+    },
+    navLayout: {
+        mode: "模式",
+        modeInline: "排队",
+        modeVertical: "垂直的",
+        width: "宽度",
+        widthTooltip: "数字或百分比,例如 520,60%",
+        navStyle: "菜单风格",
+        navItemStyle: "菜单项样式",
     }
 };