From 30f29233447cb0f56a0e1b58768fb32ba7a79d22 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 2 Oct 2025 18:19:51 +0500 Subject: [PATCH 01/54] [Fix]: #2021 add map mode for NAV --- .../src/comps/comps/navComp/navComp.tsx | 134 +++++++++++++++--- 1 file changed, 111 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index e3727508e..5842fcc92 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -1,9 +1,10 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; +import { MultiCompBuilder } from "comps/generators/multi"; import { UICompBuilder, withDefault } from "comps/generators"; import { Section, sectionNames } from "lowcoder-design"; import styled from "styled-components"; import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; -import { StringControl } from "comps/controls/codeControl"; +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { alignWithJustifyControl } from "comps/controls/alignControl"; import { navListComp } from "./navItemComp"; import { menuPropertyView } from "./components/MenuItemList"; @@ -22,6 +23,9 @@ import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { controlItem } from "lowcoder-design"; +import { mapOptionsControl } from "comps/controls/optionsControl"; type IProps = { $justify: boolean; @@ -137,35 +141,50 @@ const childrenMap = { horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData), animationStyle: styleControl(AnimationStyle, 'animationStyle'), - items: withDefault(navListComp(), [ - { - label: trans("menuItem") + " 1", - }, - ]), + items: withDefault(createNavItemsControl(), { + optionType: "manual", + manual: [ + { + label: trans("menuItem") + " 1", + }, + ], + }), }; const NavCompBase = new UICompBuilder(childrenMap, (props) => { const data = props.items; const items = ( <> - {data.map((menuItem, idx) => { - const { hidden, label, items, active, onEvent } = menuItem.getView(); + {data.map((menuItem: any, idx: number) => { + const isCompItem = typeof menuItem?.getView === "function"; + const view = isCompItem ? menuItem.getView() : menuItem; + const hidden = !!view?.hidden; if (hidden) { return null; } + + const label = view?.label; + const active = !!view?.active; + const onEvent = view?.onEvent; + const subItems = isCompItem ? view?.items : []; + const subMenuItems: Array<{ key: string; label: string }> = []; const subMenuSelectedKeys: Array = []; - items.forEach((subItem, originalIndex) => { - if (subItem.children.hidden.getView()) { - return; - } - const key = originalIndex + ""; - subItem.children.active.getView() && subMenuSelectedKeys.push(key); - subMenuItems.push({ - key: key, - label: subItem.children.label.getView(), + + if (Array.isArray(subItems)) { + subItems.forEach((subItem: any, originalIndex: number) => { + if (subItem.children.hidden.getView()) { + return; + } + const key = originalIndex + ""; + subItem.children.active.getView() && subMenuSelectedKeys.push(key); + subMenuItems.push({ + key: key, + label: subItem.children.label.getView(), + }); }); - }); + } + const item = ( { $textTransform={props.style.textTransform} $textDecoration={props.style.textDecoration} $margin={props.style.margin} - onClick={() => onEvent("click")} + onClick={() => onEvent && onEvent("click")} > {label} - {items.length > 0 && } + {Array.isArray(subItems) && subItems.length > 0 && } ); if (subMenuItems.length > 0) { const subMenu = ( { - const { onEvent: onSubEvent } = items[Number(e.key)]?.getView(); - onSubEvent("click"); + const subItem = subItems[Number(e.key)]; + const onSubEvent = subItem?.getView()?.onEvent; + onSubEvent && onSubEvent("click"); }} selectedKeys={subMenuSelectedKeys} items={subMenuItems} @@ -237,7 +257,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { return ( <>
- {menuPropertyView(children.items)} + {children.items.propertyView()}
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( @@ -285,3 +305,71 @@ export const NavComp = withExposingConfigs(NavCompBase, [ NameConfigHidden, new NameConfig("items", trans("navigation.itemsDesc")), ]); + +// ---------------------------------------- +// Nav Items Control (Manual / Map modes) +// ---------------------------------------- +function createNavItemsControl() { + const OptionTypes = [ + { label: trans("prop.manual"), value: "manual" }, + { label: trans("prop.map"), value: "map" }, + ] as const; + + // Variant used in Map mode + const NavMapOption = new MultiCompBuilder( + { + label: StringControl, + hidden: BoolCodeControl, + active: BoolCodeControl, + onEvent: eventHandlerControl([clickEvent]), + }, + (props) => props + ) + .setPropertyViewFn((children) => ( + <> + {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })} + {children.active.propertyView({ label: trans("navItemComp.active") })} + {children.hidden.propertyView({ label: trans("hidden") })} + {children.onEvent.propertyView({ inline: true })} + + )) + .build(); + + const TmpNavItemsControl = new MultiCompBuilder( + { + optionType: dropdownControl(OptionTypes, "manual"), + manual: navListComp(), + mapData: mapOptionsControl(NavMapOption), + }, + (props) => { + return props.optionType === "manual" ? props.manual : props.mapData; + } + ) + .setPropertyViewFn(() => { + throw new Error("Method not implemented."); + }) + .build(); + + return class NavItemsControl extends TmpNavItemsControl { + exposingNode() { + return this.children.optionType.getView() === "manual" + ? (this.children.manual as any).exposingNode() + : (this.children.mapData as any).exposingNode(); + } + + propertyView() { + const isManual = this.children.optionType.getView() === "manual"; + const content = isManual + ? menuPropertyView(this.children.manual as any) + : this.children.mapData.getPropertyView(); + + return controlItem( + { searchChild: true }, + <> + {this.children.optionType.propertyView({ radioButton: true, type: "oneline" })} + {content} + + ); + } + }; +} From 6741bf545b6659a90d5bdffa2213b79e6102fedd Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 2 Oct 2025 18:24:04 +0500 Subject: [PATCH 02/54] update Menu Items name --- client/packages/lowcoder/src/i18n/locales/en.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 60095c146..9ec7f365e 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -3204,7 +3204,7 @@ export const en = { "logoURL": "Navigation Logo URL", "horizontalAlignment": "Horizontal Alignment", "logoURLDesc": "You can display a Logo on the left side by entering URI Value or Base64 String like data:image/png;base64,AAA... CCC", - "itemsDesc": "Hierarchical Navigation Menu Items" + "itemsDesc": "Menu Items" }, "droppadbleMenuItem": { "subMenu": "Submenu {number}" From bd23748840e5738f3e0e49e264c4930974af12ac Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 2 Oct 2025 19:05:06 +0500 Subject: [PATCH 03/54] [Feat]: #2021 add disabled property for nav --- .../src/comps/comps/navComp/navComp.tsx | 17 ++++++++++++----- .../src/comps/comps/navComp/navItemComp.tsx | 7 ++++++- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 5842fcc92..6be3f9ce7 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -67,11 +67,12 @@ const Item = styled.div<{ $padding: string; $textTransform:string; $textDecoration:string; + $disabled?: boolean; }>` height: 30px; line-height: 30px; padding: ${(props) => props.$padding ? props.$padding : '0 16px'}; - color: ${(props) => (props.$active ? props.$activeColor : props.$color)}; + color: ${(props) => props.$disabled ? `${props.$color}80` : (props.$active ? props.$activeColor : props.$color)}; font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)}; font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')}; font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')}; @@ -81,8 +82,8 @@ const Item = styled.div<{ margin:${(props) => props.$margin ? props.$margin : '0px'}; &:hover { - color: ${(props) => props.$activeColor}; - cursor: pointer; + color: ${(props) => props.$disabled ? (props.$active ? props.$activeColor : props.$color) : props.$activeColor}; + cursor: ${(props) => props.$disabled ? 'not-allowed' : 'pointer'}; } .anticon { @@ -166,6 +167,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const label = view?.label; const active = !!view?.active; const onEvent = view?.onEvent; + const disabled = !!view?.disabled; const subItems = isCompItem ? view?.items : []; const subMenuItems: Array<{ key: string; label: string }> = []; @@ -199,7 +201,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { $textTransform={props.style.textTransform} $textDecoration={props.style.textDecoration} $margin={props.style.margin} - onClick={() => onEvent && onEvent("click")} + $disabled={disabled} + onClick={() => { if (!disabled && onEvent) onEvent("click"); }} > {label} {Array.isArray(subItems) && subItems.length > 0 && } @@ -209,6 +212,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const subMenu = ( { + if (disabled) return; const subItem = subItems[Number(e.key)]; const onSubEvent = subItem?.getView()?.onEvent; onSubEvent && onSubEvent("click"); @@ -221,6 +225,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { subMenu} + disabled={disabled} > {item} @@ -320,6 +325,7 @@ function createNavItemsControl() { { label: StringControl, hidden: BoolCodeControl, + disabled: BoolCodeControl, active: BoolCodeControl, onEvent: eventHandlerControl([clickEvent]), }, @@ -330,7 +336,8 @@ function createNavItemsControl() { {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })} {children.active.propertyView({ label: trans("navItemComp.active") })} {children.hidden.propertyView({ label: trans("hidden") })} - {children.onEvent.propertyView({ inline: true })} + {children.disabled.propertyView({ label: trans("disabled") })} + {children.onEvent.getPropertyView()} )) .build(); diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx index 565013ab4..c0b0695d7 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx @@ -3,7 +3,7 @@ import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerCont import { list } from "comps/generators/list"; import { parseChildrenFromValueAndChildrenMap, ToViewReturn } from "comps/generators/multi"; import { withDefault } from "comps/generators/simpleGenerators"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import _ from "lodash"; import { fromRecord, MultiBaseComp, Node, RecordNode, RecordNodeToValue } from "lowcoder-core"; @@ -14,6 +14,7 @@ const events = [clickEvent]; const childrenMap = { label: StringControl, hidden: BoolCodeControl, + disabled: BoolCodeControl, active: BoolCodeControl, onEvent: withDefault(eventHandlerControl(events), [ { @@ -29,6 +30,7 @@ const childrenMap = { type ChildrenType = { label: InstanceType; hidden: InstanceType; + disabled: InstanceType; active: InstanceType; onEvent: InstanceType>; items: InstanceType>; @@ -43,6 +45,7 @@ export class NavItemComp extends MultiBaseComp { return ( <> {this.children.label.propertyView({ label: trans("label") })} + {disabledPropertyView(this.children)} {hiddenPropertyView(this.children)} {this.children.active.propertyView({ label: trans("navItemComp.active") })} {this.children.onEvent.propertyView({ inline: true })} @@ -69,6 +72,7 @@ export class NavItemComp extends MultiBaseComp { return fromRecord({ label: this.children.label.exposingNode(), hidden: this.children.hidden.exposingNode(), + disabled: this.children.disabled.exposingNode(), active: this.children.active.exposingNode(), items: this.children.items.exposingNode(), }); @@ -78,6 +82,7 @@ export class NavItemComp extends MultiBaseComp { type NavItemExposing = { label: Node; hidden: Node; + disabled: Node; active: Node; items: Node[]>; }; From 8dc2af3bd574a51f70cdfd2a6a56c330d7a6b652 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 3 Oct 2025 16:08:29 +0500 Subject: [PATCH 04/54] [Fix]: #2021 import nav app data issue --- .../src/comps/comps/navComp/navComp.tsx | 19 +++++++++++++++++-- .../packages/lowcoder/src/i18n/locales/en.ts | 2 ++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 6be3f9ce7..b752f414e 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -136,13 +136,29 @@ function fixOldStyleData(oldData: any) { return oldData; } +function fixOldItemsData(oldData: any) { + if (Array.isArray(oldData)) { + return { + optionType: "manual", + manual: oldData, + }; + } + if (oldData && !oldData.optionType && Array.isArray(oldData.manual)) { + return { + optionType: "manual", + manual: oldData.manual, + }; + } + return oldData; +} + const childrenMap = { logoUrl: StringControl, logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]), horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData), animationStyle: styleControl(AnimationStyle, 'animationStyle'), - items: withDefault(createNavItemsControl(), { + items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), { optionType: "manual", manual: [ { @@ -320,7 +336,6 @@ function createNavItemsControl() { { label: trans("prop.map"), value: "map" }, ] as const; - // Variant used in Map mode const NavMapOption = new MultiCompBuilder( { label: StringControl, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 9ec7f365e..c607a218b 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -26,6 +26,8 @@ export const en = { "text": "Text", "basic": "Basic", "label": "Label", + "hidden": "Hidden", + "disabled": "Disabled", "layout": "Layout", "color": "Color", "form": "Form", From 18fadd684b48352febf5c202944ecfb2cd091c55 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 3 Oct 2025 16:22:54 +0500 Subject: [PATCH 05/54] [Fix]: #2021 disabled for the submenu item --- client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index b752f414e..e14dc94f6 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -186,7 +186,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const disabled = !!view?.disabled; const subItems = isCompItem ? view?.items : []; - const subMenuItems: Array<{ key: string; label: string }> = []; + const subMenuItems: Array<{ key: string; label: any; disabled?: boolean }> = []; const subMenuSelectedKeys: Array = []; if (Array.isArray(subItems)) { @@ -199,6 +199,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { subMenuItems.push({ key: key, label: subItem.children.label.getView(), + disabled: !!subItem.children.disabled.getView(), }); }); } @@ -230,6 +231,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { onClick={(e) => { if (disabled) return; const subItem = subItems[Number(e.key)]; + const isSubDisabled = !!subItem?.children?.disabled?.getView?.(); + if (isSubDisabled) return; const onSubEvent = subItem?.getView()?.onEvent; onSubEvent && onSubEvent("click"); }} From 1d8656248f8ad6e724c572c3d871dc3b3bb61da9 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 3 Oct 2025 18:32:13 +0500 Subject: [PATCH 06/54] refactor navComp --- .../navComp/components/NavItemsControl.tsx | 77 +++++++++++++++++++ .../src/comps/comps/navComp/navComp.tsx | 72 +---------------- .../src/comps/comps/navComp/navItemComp.tsx | 2 +- 3 files changed, 79 insertions(+), 72 deletions(-) create mode 100644 client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx new file mode 100644 index 000000000..ee0817b49 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx @@ -0,0 +1,77 @@ +import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; +import { MultiCompBuilder } from "comps/generators/multi"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { mapOptionsControl } from "comps/controls/optionsControl"; +import { trans } from "i18n"; +import { navListComp } from "../navItemComp"; +import { controlItem } from "lowcoder-design"; +import { menuPropertyView } from "./MenuItemList"; + +export function createNavItemsControl() { + const OptionTypes = [ + { label: trans("prop.manual"), value: "manual" }, + { label: trans("prop.map"), value: "map" }, + ] as const; + + const NavMapOption = new MultiCompBuilder( + { + label: StringControl, + hidden: BoolCodeControl, + disabled: BoolCodeControl, + active: BoolCodeControl, + onEvent: eventHandlerControl([clickEvent]), + }, + (props) => props + ) + .setPropertyViewFn((children) => ( + <> + {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })} + {children.active.propertyView({ label: trans("navItemComp.active") })} + {children.hidden.propertyView({ label: trans("hidden") })} + {children.disabled.propertyView({ label: trans("disabled") })} + {children.onEvent.getPropertyView()} + + )) + .build(); + + const TmpNavItemsControl = new MultiCompBuilder( + { + optionType: dropdownControl(OptionTypes, "manual"), + manual: navListComp(), + mapData: mapOptionsControl(NavMapOption), + }, + (props) => { + return props.optionType === "manual" ? props.manual : props.mapData; + } + ) + .setPropertyViewFn(() => { + throw new Error("Method not implemented."); + }) + .build(); + + return class NavItemsControl extends TmpNavItemsControl { + exposingNode() { + return this.children.optionType.getView() === "manual" + ? (this.children.manual as any).exposingNode() + : (this.children.mapData as any).exposingNode(); + } + + propertyView() { + const isManual = this.children.optionType.getView() === "manual"; + const content = isManual + ? menuPropertyView(this.children.manual as any) + : this.children.mapData.getPropertyView(); + + return controlItem( + { searchChild: true }, + <> + {this.children.optionType.propertyView({ radioButton: true, type: "oneline" })} + {content} + + ); + } + }; +} + + diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index e14dc94f6..670f4bba9 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -23,9 +23,8 @@ import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { dropdownControl } from "comps/controls/dropdownControl"; import { controlItem } from "lowcoder-design"; -import { mapOptionsControl } from "comps/controls/optionsControl"; +import { createNavItemsControl } from "./components/NavItemsControl"; type IProps = { $justify: boolean; @@ -329,72 +328,3 @@ export const NavComp = withExposingConfigs(NavCompBase, [ NameConfigHidden, new NameConfig("items", trans("navigation.itemsDesc")), ]); - -// ---------------------------------------- -// Nav Items Control (Manual / Map modes) -// ---------------------------------------- -function createNavItemsControl() { - const OptionTypes = [ - { label: trans("prop.manual"), value: "manual" }, - { label: trans("prop.map"), value: "map" }, - ] as const; - - const NavMapOption = new MultiCompBuilder( - { - label: StringControl, - hidden: BoolCodeControl, - disabled: BoolCodeControl, - active: BoolCodeControl, - onEvent: eventHandlerControl([clickEvent]), - }, - (props) => props - ) - .setPropertyViewFn((children) => ( - <> - {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })} - {children.active.propertyView({ label: trans("navItemComp.active") })} - {children.hidden.propertyView({ label: trans("hidden") })} - {children.disabled.propertyView({ label: trans("disabled") })} - {children.onEvent.getPropertyView()} - - )) - .build(); - - const TmpNavItemsControl = new MultiCompBuilder( - { - optionType: dropdownControl(OptionTypes, "manual"), - manual: navListComp(), - mapData: mapOptionsControl(NavMapOption), - }, - (props) => { - return props.optionType === "manual" ? props.manual : props.mapData; - } - ) - .setPropertyViewFn(() => { - throw new Error("Method not implemented."); - }) - .build(); - - return class NavItemsControl extends TmpNavItemsControl { - exposingNode() { - return this.children.optionType.getView() === "manual" - ? (this.children.manual as any).exposingNode() - : (this.children.mapData as any).exposingNode(); - } - - propertyView() { - const isManual = this.children.optionType.getView() === "manual"; - const content = isManual - ? menuPropertyView(this.children.manual as any) - : this.children.mapData.getPropertyView(); - - return controlItem( - { searchChild: true }, - <> - {this.children.optionType.propertyView({ radioButton: true, type: "oneline" })} - {content} - - ); - } - }; -} diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx index c0b0695d7..e8ce0f011 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx @@ -45,9 +45,9 @@ export class NavItemComp extends MultiBaseComp { return ( <> {this.children.label.propertyView({ label: trans("label") })} - {disabledPropertyView(this.children)} {hiddenPropertyView(this.children)} {this.children.active.propertyView({ label: trans("navItemComp.active") })} + {disabledPropertyView(this.children)} {this.children.onEvent.propertyView({ inline: true })} ); From adccc1621db4db065a981f5799cc630963b0c77e Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 3 Oct 2025 22:15:44 +0500 Subject: [PATCH 07/54] [Feat]: #1979 expose hide/showcolumns methods --- .../src/comps/comps/tableComp/tableComp.tsx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx index 725543eff..f050997a0 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx @@ -822,6 +822,55 @@ TableTmpComp = withMethodExposing(TableTmpComp, [ } }, } + , + { + method: { + name: "hideColumns", + description: "Hide specified columns by dataIndex or title", + params: [ + { name: "columns", type: "arrayString" }, + ], + }, + execute: (comp, values) => { + const columns = values[0]; + if (!isArray(columns)) { + return Promise.reject("hideColumns expects an array of strings, e.g. ['id','name']"); + } + const targets = new Set((columns as any[]).map((c) => String(c))); + comp.children.columns.getView().forEach((c) => { + const view = c.getView(); + if (targets.has(view.dataIndex) || targets.has(view.title)) { + // Ensure both persistent and temporary flags are updated + c.children.hide.dispatchChangeValueAction(true); + c.children.tempHide.dispatchChangeValueAction(true); + } + }); + }, + } + , + { + method: { + name: "showColumns", + description: "Show specified columns by dataIndex or title", + params: [ + { name: "columns", type: "arrayString" }, + ], + }, + execute: (comp, values) => { + const columns = values[0]; + if (!isArray(columns)) { + return Promise.reject("showColumns expects an array of strings, e.g. ['id','name']"); + } + const targets = new Set((columns as any[]).map((c) => String(c))); + comp.children.columns.getView().forEach((c) => { + const view = c.getView(); + if (targets.has(view.dataIndex) || targets.has(view.title)) { + c.children.hide.dispatchChangeValueAction(false); + c.children.tempHide.dispatchChangeValueAction(false); + } + }); + }, + } ]); // exposing data @@ -1052,6 +1101,30 @@ export const TableComp = withExposingConfigs(TableTmpComp, [ }, trans("table.displayDataDesc") ), + new CompDepsConfig( + "hiddenColumns", + (comp) => { + return { + dataIndexes: comp.children.columns.getColumnsNode("dataIndex"), + hides: comp.children.columns.getColumnsNode("hide"), + tempHides: comp.children.columns.getColumnsNode("tempHide"), + columnSetting: comp.children.toolbar.children.columnSetting.node(), + }; + }, + (input) => { + const hidden: string[] = []; + _.forEach(input.dataIndexes, (dataIndex, idx) => { + const isHidden = columnHide({ + hide: input.hides[idx].value, + tempHide: input.tempHides[idx], + enableColumnSetting: input.columnSetting.value, + }); + if (isHidden) hidden.push(dataIndex); + }); + return hidden; + }, + trans("table.displayDataDesc") + ), new DepsConfig( "filter", (children) => { From 46599c4f64ca1de44450b1cfba845bfd60551212 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 6 Oct 2025 16:58:55 +0500 Subject: [PATCH 08/54] [Fix]: #1065 duplicates in continuous mode --- .../src/comps/comps/buttonComp/scannerComp.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx index 8b061cb4c..c4387f55c 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -150,11 +150,19 @@ const ScannerTmpComp = (function () { }, [success, showModal]); const continuousValue = useRef([]); + const seenSetRef = useRef>(new Set()); const handleUpdate = (err: any, result: any) => { if (result) { if (props.continuous) { - continuousValue.current = [...continuousValue.current, result.text]; + const scannedText: string = result.text; + if (props.uniqueData && seenSetRef.current.has(scannedText)) { + return; + } + continuousValue.current = [...continuousValue.current, scannedText]; + if (props.uniqueData) { + seenSetRef.current.add(scannedText); + } const val = props.uniqueData ? [...new Set(continuousValue.current)] : continuousValue.current; @@ -205,6 +213,7 @@ const ScannerTmpComp = (function () { props.onEvent("click"); setShowModal(true); continuousValue.current = []; + seenSetRef.current = new Set(); }} > {props.text} From 022cd512b3217af6f11c832e84ae84432ac72550 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 6 Oct 2025 19:35:48 +0500 Subject: [PATCH 09/54] [Fix]: #1060 exposed .value to open correct URL --- .../lowcoder/src/comps/comps/buttonComp/scannerComp.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx index c4387f55c..8900ea914 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -30,7 +30,7 @@ import React, { useState, useContext, } from "react"; -import { arrayStringExposingStateControl } from "comps/controls/codeStateControl"; +import { arrayStringExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl"; import { BoolControl } from "comps/controls/boolControl"; import { RefControl } from "comps/controls/refControl"; import { EditorContext } from "comps/editorState"; @@ -120,6 +120,7 @@ const BarcodeScannerComponent = React.lazy( const ScannerTmpComp = (function () { const childrenMap = { data: arrayStringExposingStateControl("data"), + value: stringExposingStateControl("value"), text: withDefault(StringControl, trans("scanner.text")), continuous: BoolControl, uniqueData: withDefault(BoolControl, true), @@ -166,9 +167,11 @@ const ScannerTmpComp = (function () { const val = props.uniqueData ? [...new Set(continuousValue.current)] : continuousValue.current; + props.value.onChange(scannedText); props.data.onChange(val); props.onEvent("success"); } else { + props.value.onChange(result.text); props.data.onChange([result.text]); setShowModal(false); setSuccess(true); @@ -326,6 +329,7 @@ const ScannerTmpComp = (function () { export const ScannerComp = withExposingConfigs(ScannerTmpComp, [ new NameConfig("data", trans("data")), + new NameConfig("value", trans("value")), new NameConfig("text", trans("button.textDesc")), ...CommonNameConfig, ]); From 7cfa888cf8f908bea025eb8f07421757eb46aca5 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 7 Oct 2025 18:29:00 +0500 Subject: [PATCH 10/54] [Fix]: #2039 copyToClipboard utility content --- client/packages/lowcoder/src/comps/hooks/utilsComp.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/hooks/utilsComp.ts b/client/packages/lowcoder/src/comps/hooks/utilsComp.ts index 2a8689efc..a7190b1f3 100644 --- a/client/packages/lowcoder/src/comps/hooks/utilsComp.ts +++ b/client/packages/lowcoder/src/comps/hooks/utilsComp.ts @@ -87,12 +87,12 @@ UtilsComp = withMethodExposing(UtilsComp, [ method: { name: "copyToClipboard", description: trans("utilsComp.copyToClipboard"), - params: [{ name: "url", type: "string" }], + params: [{ name: "text", type: "string" }], }, execute: (comp, params) => { const text = params?.[0]; if (typeof text === "string" && !isEmpty(text)) { - copy(text); + copy(text, { format: "text/plain" }); } }, }, From a4980bb0eab0ac9624f7cc49ddea355bcdfb4cf8 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 7 Oct 2025 21:55:58 +0500 Subject: [PATCH 11/54] [Fix]: #2041 form content default values --- .../src/comps/comps/formComp/formComp.tsx | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index 825581393..bece24fe2 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -390,15 +390,24 @@ let FormTmpComp = class extends FormBaseComp implements IForm { if (ret.children.initialData !== this.children.initialData) { // FIXME: kill setTimeout ? setTimeout(() => { - this.dispatch( - customAction( - { - type: "setData", - initialData: (action.value["initialData"] as ValueAndMsg).value || {}, - }, - false - ) - ); + const newInitialData = (action.value["initialData"] as ValueAndMsg) + .value; + // only setData when initialData has explicit keys. + if ( + newInitialData && + typeof newInitialData === "object" && + Object.keys(newInitialData).length > 0 + ) { + this.dispatch( + customAction( + { + type: "setData", + initialData: newInitialData, + }, + false + ) + ); + } }, 1000); } return ret; From 32b706f205649258e20271c5c477c9a3ca31c149 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 8 Oct 2025 20:52:11 +0500 Subject: [PATCH 12/54] [Feat]: #1867 add styles for the button column --- .../tableComp/column/simpleColumnTypeComps.tsx | 13 +++++++++---- .../lowcoder/src/comps/controls/styleControl.tsx | 6 ++++-- .../src/comps/controls/styleControlConstants.tsx | 13 +++++++++++++ 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx index f9bedc754..eaac53327 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx @@ -4,8 +4,8 @@ import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { disabledPropertyView, loadingPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; -import { useStyle } from "comps/controls/styleControl"; -import { ButtonStyle } from "comps/controls/styleControlConstants"; +import { styleControl, useStyle } from "comps/controls/styleControl"; +import { ButtonStyle, TableColumnButtonStyle } from "comps/controls/styleControlConstants"; import { Button100 } from "comps/comps/buttonComp/buttonCompConstants"; import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; @@ -58,10 +58,11 @@ const childrenMap = { disabled: BoolCodeControl, prefixIcon: IconControl, suffixIcon: IconControl, + style: styleControl(TableColumnButtonStyle, 'style', { boldTitle: true }), }; const ButtonStyled = React.memo(({ props }: { props: ToViewReturn>}) => { - const style = useStyle(ButtonStyle); + const themeButtonStyle = useStyle(ButtonStyle); const hasText = !!props.text; const hasPrefixIcon = hasIcon(props.prefixIcon); const hasSuffixIcon = hasIcon(props.suffixIcon); @@ -85,7 +86,10 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn @@ -120,6 +124,7 @@ const ButtonCompTmp = (function () { })} {loadingPropertyView(children)} {disabledPropertyView(children)} + {children.style.getPropertyView()} {children.onClick.propertyView()} )) diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 5d40a2db4..a743d466d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -937,11 +937,12 @@ function calcColors>( return res as ColorMap; } -const TitleDiv = styled.div` +const TitleDiv = styled.div<{ $boldTitle?: boolean }>` display: flex; justify-content: space-between; font-size: 13px; line-height: 1; + font-weight: ${(props) => (props.$boldTitle ? 600 : 400)}; span:nth-of-type(2) { cursor: pointer; @@ -1149,6 +1150,7 @@ const useThemeStyles = ( export function styleControl( colorConfigs: T, styleKey: string = '', + options?: { boldTitle?: boolean }, ) { type ColorMap = { [K in Names]: string }; const childrenMap: any = {}; @@ -1268,7 +1270,7 @@ export function styleControl( return ( <> - + {label} {showReset && ( ; export type TimeLineStyleType = StyleConfigType; export type AvatarStyleType = StyleConfigType; @@ -2437,6 +2449,7 @@ export type TableColumnStyleType = StyleConfigType; export type TableColumnLinkStyleType = StyleConfigType< typeof TableColumnLinkStyle >; +export type TableColumnButtonStyleType = StyleConfigType; export type TableSummaryRowStyleType = StyleConfigType; export type FileStyleType = StyleConfigType; export type FileViewerStyleType = StyleConfigType; From e8bc8815a9b2e1252bfc3df3b2d4e7a414159b68 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 9 Oct 2025 19:55:47 +0500 Subject: [PATCH 13/54] [Fix]: #1290 add zindex property for stacking issue --- .../packages/lowcoder/src/comps/hooks/drawerComp.tsx | 8 ++++++-- client/packages/lowcoder/src/comps/hooks/modalComp.tsx | 10 +++++++--- client/packages/lowcoder/src/i18n/locales/en.ts | 3 ++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx index 3b33c3fb9..42a7d392f 100644 --- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx @@ -4,7 +4,7 @@ import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBui import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; import { BoolControl } from "comps/controls/boolControl"; -import { StringControl } from "comps/controls/codeControl"; +import { StringControl, NumberControl } from "comps/controls/codeControl"; import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { PositionControl, LeftRightControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl"; import { eventHandlerControl } from "comps/controls/eventHandlerControl"; @@ -122,6 +122,7 @@ const childrenMap = { showMask: withDefault(BoolControl, true), toggleClose:withDefault(BoolControl,true), escapeClosable: withDefault(BoolControl, true), + zIndex: withDefault(NumberControl, Layers.drawer), }; type ChildrenType = NewChildren> & { @@ -168,6 +169,9 @@ const DrawerPropertyView = React.memo((props: { {props.children.escapeClosable.propertyView({ label: trans("prop.escapeClose"), })} + {props.children.zIndex.propertyView({ + label: trans("prop.zIndex"), + })}
{props.children.onEvent.getPropertyView()}
{props.children.style.getPropertyView()}
@@ -251,7 +255,7 @@ const DrawerView = React.memo(( height={!props.autoHeight ? transToPxSize(props.height || DEFAULT_SIZE) : ""} onClose={onClose} afterOpenChange={afterOpenChange} - zIndex={Layers.drawer} + zIndex={props.zIndex} maskClosable={props.maskClosable} mask={true} className={clsx(`app-${appID}`, props.className)} diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx index 933495b5f..cf898ff1a 100644 --- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx @@ -1,7 +1,7 @@ import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder"; import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { StringControl } from "comps/controls/codeControl"; +import { StringControl, NumberControl } from "comps/controls/codeControl"; import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { eventHandlerControl } from "comps/controls/eventHandlerControl"; import { styleControl } from "comps/controls/styleControl"; @@ -117,7 +117,8 @@ const childrenMap = { style: styleControl(ModalStyle), maskClosable: withDefault(BoolControl, true), showMask: withDefault(BoolControl, true), - toggleClose:withDefault(BoolControl,true) + toggleClose:withDefault(BoolControl,true), + zIndex: withDefault(NumberControl, Layers.modal) }; const ModalPropertyView = React.memo((props: { @@ -156,6 +157,9 @@ const ModalPropertyView = React.memo((props: { {props.children.toggleClose.propertyView({ label: trans("prop.toggleClose"), })} + {props.children.zIndex.propertyView({ + label: trans("prop.zIndex"), + })}
{props.children.onEvent.getPropertyView()}
{props.children.style.getPropertyView()}
@@ -278,7 +282,7 @@ const ModalView = React.memo(( onCancel={handleCancel} afterClose={handleAfterClose} afterOpenChange={handleAfterOpenChange} - zIndex={Layers.modal} + zIndex={props.zIndex} modalRender={modalRender} mask={props.showMask} className={clsx(`app-${appID}`, props.className)} diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 60095c146..18e71b23c 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -237,7 +237,8 @@ export const en = { "timeZone": "TimeZone", "pickerMode": "Picker Mode", "customTags": "Allow Custom Tags", - "customTagsTooltip": "Allow users to enter custom tags that are not in the options list." + "customTagsTooltip": "Allow users to enter custom tags that are not in the options list.", + "zIndex": "z-Index" }, "autoHeightProp": { "auto": "Auto", From e74e078ebba4b3d8ac8c84d406549a0bff1ea050 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 10 Oct 2025 20:33:30 +0500 Subject: [PATCH 14/54] [Feat]: #1866 add class/id identifies for Table/TableLite --- .../comps/comps/tableComp/ResizeableTable.tsx | 4 +++ .../tableComp/column/tableColumnComp.tsx | 28 ++++++++++++------- .../comps/comps/tableComp/tableCompView.tsx | 4 +++ .../comps/tableComp/tablePropertyView.tsx | 5 ++++ .../src/comps/comps/tableComp/tableStyles.ts | 8 +++++- .../src/comps/comps/tableComp/tableUtils.tsx | 4 +++ .../tableLiteComp/column/tableColumnComp.tsx | 28 ++++++++++++------- .../comps/tableLiteComp/parts/BaseTable.tsx | 4 +++ .../tableLiteComp/parts/ResizeableTable.tsx | 4 +++ .../tableLiteComp/parts/TableContainer.tsx | 16 +++++++++-- .../comps/tableLiteComp/tableCompView.tsx | 6 ++++ .../comps/tableLiteComp/tablePropertyView.tsx | 5 ++++ .../comps/comps/tableLiteComp/tableUtils.tsx | 4 +++ 13 files changed, 97 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx index 55bf8d694..3cdf9119a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/ResizeableTable.tsx @@ -165,6 +165,8 @@ function ResizeableTableComp(props: CustomTableProps< onClick: () => onCellClick(col.titleText, String(col.dataIndex)), loading: customLoading, customAlign: col.align, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [rowColorFn, rowHeightFn, columnsStyle, size, rowAutoHeight, onCellClick, customLoading]); @@ -182,6 +184,8 @@ function ResizeableTableComp(props: CustomTableProps< onResizeStop: (e: React.SyntheticEvent, { size }: { size: { width: number } }) => { handleResizeStop(size.width, index, col.onWidthResize); }, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [viewModeResizable, handleResize, handleResizeStop]); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 938983ac9..f94b17816 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx @@ -134,6 +134,9 @@ export const columnChildrenMap = { align: HorizontalAlignmentControl, tempHide: stateComp(false), fixed: dropdownControl(columnFixOptions, "close"), + // identifiers + className: StringControl, + dataTestId: StringControl, editable: BoolControl, background: withDefault(ColorControl, ""), margin: withDefault(RadiusControl, ""), @@ -162,6 +165,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`; const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`; +const SectionHeading = styled.div` + font-weight: bold; + margin-bottom: 8px; +`; + /** * export for test. * Put it here temporarily to avoid circular dependencies @@ -283,11 +291,7 @@ const ColumnPropertyView = React.memo(({ {(columnType === 'link' || columnType === 'links') && ( <> - {controlItem({}, ( -
- {"Link Style"} -
- ))} + Link Style {comp.children.linkColor.propertyView({ label: trans('text') // trans('style.background'), })} @@ -300,11 +304,7 @@ const ColumnPropertyView = React.memo(({ )} - {controlItem({}, ( -
- {"Column Style"} -
- ))} + Column Style {comp.children.background.propertyView({ label: trans('style.background'), })} @@ -346,6 +346,14 @@ const ColumnPropertyView = React.memo(({ })} {comp.children.textOverflow.getPropertyView()} {comp.children.cellColor.getPropertyView()} + + Identifiers + {comp.children.className.propertyView({ + label: trans("prop.className"), + })} + {comp.children.dataTestId.propertyView({ + label: trans("prop.dataTestId"), + })} )} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 53d423129..74d431f7a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -100,6 +100,8 @@ export const TableCompView = React.memo((props: { const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]); const currentExpandedRows = useMemo(() => compChildren.currentExpandedRows.getView(), [compChildren.currentExpandedRows]); const dynamicColumn = compChildren.dynamicColumn.getView(); + const className = compChildren.className.getView(); + const dataTestId = compChildren.dataTestId.getView(); const dynamicColumnConfig = useMemo( () => compChildren.dynamicColumnConfig.getView(), @@ -360,6 +362,8 @@ export const TableCompView = React.memo((props: { suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && !(tableMode.isAutoMode && showHorizontalScrollbar) && toolbarView} > tooltip: trans("table.dynamicColumnConfigDesc"), })} + +
+ {comp.children.className.propertyView({ label: trans("prop.className") })} + {comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts index 5e3cc6dcd..54c856c14 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts @@ -122,7 +122,13 @@ export const BackgroundWrapper = styled.div<{ `; // TODO: find a way to limit the calc function for max-height only to first Margin value -export const TableWrapper = styled.div<{ +export const TableWrapper = styled.div.attrs<{ + className?: string; + "data-testid"?: string; +}>((props) => ({ + className: props.className, + "data-testid": props["data-testid"], +}))<{ $style: TableStyleType; $headerStyle: TableHeaderStyleType; $toolbarStyle: TableToolbarStyleType; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx index d71ae5a8d..fdc5c775d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx @@ -333,6 +333,8 @@ export type CustomColumnType = ColumnType & { style: TableColumnStyleType; linkStyle: TableColumnLinkStyleType; cellColorFn: CellColorViewType; + columnClassName?: string; + columnDataTestId?: string; }; /** @@ -400,6 +402,8 @@ export function columnsToAntdFormat( align: column.align, width: column.autoWidth === "auto" ? 0 : column.width, fixed: column.fixed === "close" ? false : column.fixed, + columnClassName: column.className, + columnDataTestId: column.dataTestId, style: { background: column.background, margin: column.margin, diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx index 4951dea4e..fcfab56af 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx @@ -136,6 +136,9 @@ export const columnChildrenMap = { align: HorizontalAlignmentControl, tempHide: stateComp(false), fixed: dropdownControl(columnFixOptions, "close"), + // identifiers + className: StringControl, + dataTestId: StringControl, background: withDefault(ColorControl, ""), margin: withDefault(RadiusControl, ""), text: withDefault(ColorControl, ""), @@ -163,6 +166,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`; const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`; +const SectionHeading = styled.div` + font-weight: bold; + margin-bottom: 8px; +`; + /** * export for test. * Put it here temporarily to avoid circular dependencies @@ -285,11 +293,7 @@ const ColumnPropertyView = React.memo(({ {(columnType === 'link' || columnType === 'links') && ( <> - {controlItem({}, ( -
- {"Link Style"} -
- ))} + Link Style {comp.children.linkColor.propertyView({ label: trans('text') // trans('style.background'), })} @@ -302,11 +306,7 @@ const ColumnPropertyView = React.memo(({ )} - {controlItem({}, ( -
- {"Column Style"} -
- ))} + Column Style {comp.children.background.propertyView({ label: trans('style.background'), })} @@ -348,6 +348,14 @@ const ColumnPropertyView = React.memo(({ })} {comp.children.textOverflow.getPropertyView()} {comp.children.cellColor.getPropertyView()} + + Identifiers + {comp.children.className.propertyView({ + label: trans("prop.className"), + })} + {comp.children.dataTestId.propertyView({ + label: trans("prop.dataTestId"), + })} )} diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx index 31aa30f33..fffde7f21 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx @@ -106,6 +106,8 @@ import React, { onClick: () => onCellClick(col.titleText, String(col.dataIndex)), loading: customLoading, customAlign: col.align, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [ @@ -135,6 +137,8 @@ import React, { ) => { handleResizeStop(size.width, index, col.onWidthResize); }, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [viewModeResizable, handleResize, handleResizeStop] diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx index c7a5d39c2..16ca3a7d6 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/ResizeableTable.tsx @@ -108,6 +108,8 @@ function ResizeableTableComp( onClick: () => onCellClick(col.titleText, String(col.dataIndex)), loading: customLoading, customAlign: col.align, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [ @@ -138,6 +140,8 @@ function ResizeableTableComp( ) => { handleResizeStop(size.width, index, col.onWidthResize); }, + className: col.columnClassName, + 'data-testid': col.columnDataTestId, }); }, [viewModeResizable, handleResize, handleResizeStop] diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx index 1a44cfa7d..247c0e0d4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableContainer.tsx @@ -4,7 +4,13 @@ import styled from 'styled-components'; import SimpleBar from 'simplebar-react'; // import 'simplebar-react/dist/simplebar.min.css'; -const MainContainer = styled.div<{ +const MainContainer = styled.div.attrs<{ + className?: string; + "data-testid"?: string; +}>((props) => ({ + className: props.className, + "data-testid": props["data-testid"], +}))<{ $mode: 'AUTO' | 'FIXED'; $showHorizontalScrollbar: boolean; $showVerticalScrollbar: boolean; @@ -114,6 +120,8 @@ interface TableContainerProps { showVerticalScrollbar: boolean; showHorizontalScrollbar: boolean; virtual: boolean; + className?: string; + dataTestId?: string; } export const TableContainer: React.FC = ({ @@ -126,7 +134,9 @@ export const TableContainer: React.FC = ({ containerRef, showVerticalScrollbar, showHorizontalScrollbar, - virtual + virtual, + className, + dataTestId }) => { return ( = ({ $showHorizontalScrollbar={showHorizontalScrollbar} $showVerticalScrollbar={showVerticalScrollbar} $virtual={virtual} + className={className} + data-testid={dataTestId} > {/* Sticky above toolbar - always visible */} {stickyToolbar && toolbarPosition === 'above' && showToolbar && ( diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx index c35fcc0ba..4d792e056 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx @@ -34,6 +34,8 @@ export const TableCompView = React.memo((props: { const headerStyle = compChildren.headerStyle.getView(); const toolbarStyle = compChildren.toolbarStyle.getView(); const showHRowGridBorder = compChildren.showHRowGridBorder.getView(); + const className = compChildren.className.getView(); + const dataTestId = compChildren.dataTestId.getView(); const columns = useMemo(() => compChildren.columns.getView(), [compChildren.columns]); const columnViews = useMemo(() => columns.map((c) => c.getView()), [columns]); const data = comp.filterData; @@ -185,6 +187,8 @@ export const TableCompView = React.memo((props: { showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()} virtual={virtualization.enabled} containerRef={containerRef} + className={className} + dataTestId={dataTestId} > @@ -206,6 +210,8 @@ export const TableCompView = React.memo((props: { showVerticalScrollbar={compChildren.showVerticalScrollbar.getView()} showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()} virtual={virtualization.enabled} + className={className} + dataTestId={dataTestId} > diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx index 62f3f1ffb..dbe4edcf8 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tablePropertyView.tsx @@ -586,6 +586,11 @@ export function compTablePropertyView tooltip: trans("table.dynamicColumnConfigDesc"), })} + +
+ {comp.children.className.propertyView({ label: trans("prop.className") })} + {comp.children.dataTestId.propertyView({ label: trans("prop.dataTestId") })} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx index 9297eded8..69f18ae83 100644 --- a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableUtils.tsx @@ -286,6 +286,8 @@ export type CustomColumnType = ColumnType & { style: TableColumnStyleType; linkStyle: TableColumnLinkStyleType; cellColorFn: CellColorViewType; + columnClassName?: string; + columnDataTestId?: string; }; /** @@ -539,6 +541,8 @@ export function columnsToAntdFormat( fixed: column.fixed === "close" ? false : column.fixed, style, linkStyle, + columnClassName: column.className, + columnDataTestId: column.dataTestId, cellColorFn: column.cellColor, onWidthResize: column.onWidthResize, render: buildRenderFn( From a9ed70490204910bcbc7720d9aec66926770619f Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 13 Oct 2025 17:21:14 +0500 Subject: [PATCH 15/54] [Fix]: #1945 allow null value --- .../src/comps/comps/numberInputComp/numberInputComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 9573e2a3b..fad9d36d1 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -331,7 +331,7 @@ const CustomInputNumber = (props: RecordConstructorToView) = value = Number(defaultValue); } props.value.onChange(value); - }, [defaultValue]); + }, [defaultValue, props.allowNull]); const formatFn = (value: number) => format(value, props.allowNull, props.formatter, props.precision, props.thousandsSeparator); From 99ce13d1bb9b70c87fd489908598d2f561089952 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 13 Oct 2025 22:21:48 +0500 Subject: [PATCH 16/54] [Feat]: #1289 add close icon customization --- client/packages/lowcoder/src/comps/hooks/drawerComp.tsx | 8 +++++++- client/packages/lowcoder/src/i18n/locales/en.ts | 4 +++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx index 3b33c3fb9..1d89aa33d 100644 --- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx @@ -24,6 +24,8 @@ import styled from "styled-components"; import { useUserViewMode } from "util/hooks"; import { isNumeric } from "util/stringUtils"; import { NameConfig, withExposingConfigs } from "../generators/withExposing"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; import { title } from "process"; import { SliderControl } from "../controls/sliderControl"; import clsx from "clsx"; @@ -122,6 +124,7 @@ const childrenMap = { showMask: withDefault(BoolControl, true), toggleClose:withDefault(BoolControl,true), escapeClosable: withDefault(BoolControl, true), + closeIcon: withDefault(IconControl, ""), }; type ChildrenType = NewChildren> & { @@ -138,6 +141,9 @@ const DrawerPropertyView = React.memo((props: { {props.children.title.getView() && props.children.titleAlign.propertyView({ label: trans("drawer.titleAlign"), radioButton: true })} {props.children.closePosition.propertyView({ label: trans("drawer.closePosition"), radioButton: true })} {props.children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true })} + {props.children.toggleClose.getView() && props.children.closeIcon.propertyView({ + label: trans("drawer.closeIcon"), + })} {["top", "bottom"].includes(props.children.placement.getView()) ? props.children.autoHeight.getPropertyView() : props.children.width.propertyView({ @@ -262,7 +268,7 @@ const DrawerView = React.memo(( $closePosition={props.closePosition} onClick={onClose} > - + {hasIcon(props.closeIcon) ? props.closeIcon : } )} Date: Tue, 14 Oct 2025 16:46:46 +0500 Subject: [PATCH 17/54] [Fix]: #1837 fix table header border styles --- .../lowcoder/src/comps/comps/tableComp/tableCompView.tsx | 2 ++ .../lowcoder/src/comps/comps/tableComp/tableStyles.ts | 6 +++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 74d431f7a..3b3b47f6e 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -81,6 +81,7 @@ export const TableCompView = React.memo((props: { const showVerticalScrollbar = compChildren.showVerticalScrollbar.getView(); const visibleResizables = compChildren.visibleResizables.getView(); const showHRowGridBorder = compChildren.showHRowGridBorder.getView(); + const showRowGridBorder = compChildren.showRowGridBorder.getView(); const columnsStyle = compChildren.columnsStyle.getView(); const summaryRowStyle = compChildren.summaryRowStyle.getView(); const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]); @@ -373,6 +374,7 @@ export const TableCompView = React.memo((props: { $fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'} $visibleResizables={visibleResizables} $showHRowGridBorder={showHRowGridBorder} + $showRowGridBorder={showRowGridBorder} $isVirtual={scrollConfig.virtual} $showHorizontalScrollbar={showHorizontalScrollbar} $showVerticalScrollbar={showVerticalScrollbar} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts index 54c856c14..3f783c84e 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts @@ -138,6 +138,7 @@ export const TableWrapper = styled.div.attrs<{ $fixedToolbar: boolean; $visibleResizables: boolean; $showHRowGridBorder?: boolean; + $showRowGridBorder?: boolean; $isVirtual?: boolean; $showHorizontalScrollbar?: boolean; $showVerticalScrollbar?: boolean; @@ -207,7 +208,10 @@ export const TableWrapper = styled.div.attrs<{ border-color: ${(props) => props.$headerStyle.border}; border-width: ${(props) => props.$headerStyle.borderWidth}; color: ${(props) => props.$headerStyle.headerText}; - // border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important; + ${(props) => props.$showRowGridBorder + ? `border-inline-end: ${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border} !important;` + : `border-inline-end: none !important;` + } /* Proper styling for fixed header cells */ &.ant-table-cell-fix-left, &.ant-table-cell-fix-right { From 984eaa56e84929c07e7020b4733bf3ff69fb3b5a Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 14 Oct 2025 23:11:15 +0500 Subject: [PATCH 18/54] [Feat]: #1837 add pagination styles for table --- .../comps/tableComp/tableToolbarComp.tsx | 43 ++++++++++++++++--- .../src/comps/controls/colorControl.tsx | 3 +- .../src/comps/controls/styleControl.tsx | 1 + .../comps/controls/styleControlConstants.tsx | 34 ++++++++++++++- .../packages/lowcoder/src/i18n/locales/en.ts | 10 ++++- 5 files changed, 83 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx index d29299c1a..cf977e96e 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx @@ -61,7 +61,7 @@ const getStyle = ( // Implement horizontal scrollbar and vertical page number selection is not blocked padding: 13px 12px; position: sticky; - postion: -webkit-sticky; + position: -webkit-sticky; left: 0px !important; margin: ${style.margin} !important; z-index: 999; @@ -116,7 +116,7 @@ const getStyle = ( .ant-pagination-prev, .ant-pagination-next { path { - ${style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : null}; + ${style.paginationText || style.toolbarText !== defaultTheme.textDark ? `fill: ${style.paginationText || style.toolbarText}` : null}; } svg:hover { @@ -127,25 +127,53 @@ const getStyle = ( } .ant-pagination { - color: ${style.toolbarText}; + color: ${style.paginationText || style.toolbarText}; + } + + // number items + .ant-pagination-item { + background: ${style.paginationBackground || 'transparent'}; + border-color: ${style.border || 'transparent'}; + a { + color: ${style.paginationText || style.toolbarText}; + } + &:hover a { + color: ${theme?.primary}; + } } .ant-pagination-item-active { + background: ${style.paginationActiveBackground || style.paginationBackground || 'transparent'}; border-color: ${style.border || theme?.primary}; a { - color: ${theme?.textDark}; + color: ${style.paginationActiveText || theme?.textDark}; } } .ant-pagination-item:not(.ant-pagination-item-active) a { - color: ${style.toolbarText}; + color: ${style.paginationText || style.toolbarText}; &:hover { color: ${theme?.primary}; } } + // size changer select + .ant-pagination-options { + .ant-select-selector { + background: ${style.paginationBackground || 'transparent'}; + color: ${style.paginationText || style.toolbarText}; + border-color: ${style.border || theme?.primary}; + } + .ant-select-selection-item { + color: ${style.paginationText || style.toolbarText}; + } + .ant-select-arrow { + color: ${style.paginationText || style.toolbarText}; + } + } + .ant-select:not(.ant-select-disabled):hover .ant-select-selector, .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector, @@ -153,6 +181,11 @@ const getStyle = ( .ant-pagination-options-quick-jumper input:focus { border-color: ${style.border || theme?.primary}; } + + .ant-pagination-options-quick-jumper input { + background: ${style.paginationBackground || 'transparent'}; + color: ${style.paginationText || style.toolbarText}; + } `; }; diff --git a/client/packages/lowcoder/src/comps/controls/colorControl.tsx b/client/packages/lowcoder/src/comps/controls/colorControl.tsx index 6b45a982d..333622ece 100644 --- a/client/packages/lowcoder/src/comps/controls/colorControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/colorControl.tsx @@ -74,6 +74,7 @@ type PropertyViewParam = { // auto-generated message? depMsg?: string; allowGradient?: boolean; + tooltip?: React.ReactNode; }; export class ColorControl extends ColorCodeControl { @@ -134,7 +135,7 @@ function ColorItem(props: { }, [containerRef]); return ( - + ( depMsg: depMsg, allowGradient: config.name.includes('background'), + tooltip: config.tooltip || getTooltip(name), })} ); diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 569ada9c4..602a062f2 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -10,6 +10,7 @@ type CommonColorConfig = { readonly name: string; readonly label: string; readonly platform?: SupportPlatform; // support all if undefined + readonly tooltip?: string; // Tooltip text to show on hover }; export type SimpleColorConfig = CommonColorConfig & { @@ -1767,6 +1768,38 @@ export const TableToolbarStyle = [ depType: DEP_TYPE.CONTRAST_TEXT, transformer: toSelf, }, + // Pagination specific styling + { + name: "paginationBackground", + label: trans("style.paginationBackground"), + tooltip: trans("style.paginationBackgroundTooltip"), + depName: "background", + depType: DEP_TYPE.SELF, + transformer: toSelf, + }, + { + name: "paginationText", + label: trans("style.paginationText"), + tooltip: trans("style.paginationTextTooltip"), + depName: "paginationBackground", + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, + }, + { + name: "paginationActiveBackground", + label: trans("style.paginationActiveBackground"), + tooltip: trans("style.paginationActiveBackgroundTooltip"), + depName: "paginationBackground", + transformer: contrastBackground, + }, + { + name: "paginationActiveText", + label: trans("style.paginationActiveText"), + tooltip: trans("style.paginationActiveTextTooltip"), + depName: "paginationActiveBackground", + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, + }, ] as const; export const TableHeaderStyle = [ @@ -1774,7 +1807,6 @@ export const TableHeaderStyle = [ PADDING, FONT_FAMILY, FONT_STYLE, - TEXT, // getStaticBackground(SURFACE_COLOR), // getBackground("primarySurface"), { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 98f07f3cc..4faaa1670 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -669,7 +669,15 @@ export const en = { "headerBackgroundImageOriginTip": "Specifies the positioning area of the header's background image. Example: padding-box, border-box, content-box.", "footerBackgroundImageOriginTip": "Specifies the positioning area of the footer's background image. Example: padding-box, border-box, content-box.", "rotationTip": "Specifies the rotation angle of the element. Example: 45deg, 90deg, -180deg.", - "lineHeightTip": "Sets the height of a line of text. Example: 1.5, 2, 120%." + "lineHeightTip": "Sets the height of a line of text. Example: 1.5, 2, 120%.", + "paginationBackground": "Pagination Background", + "paginationBackgroundTooltip": "Background color for pagination controls", + "paginationText": "Pagination Text", + "paginationTextTooltip": "Text color for pagination numbers and controls", + "paginationActiveBackground": "Pagination Active Background", + "paginationActiveBackgroundTooltip": "Background color for the active/selected page number", + "paginationActiveText": "Pagination Active Text", + "paginationActiveTextTooltip": "Text color for the active/selected page number", }, "export": { "hiddenDesc": "If true, the component is hidden", From b96646417e81d799b838c990ea9baea7956d54f4 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 15 Oct 2025 16:35:54 +0500 Subject: [PATCH 19/54] [Feat]: #1868 prevent cell styles on selected row --- .../src/comps/comps/tableComp/tableStyles.ts | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts index 54c856c14..48575922c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts @@ -36,9 +36,6 @@ export const getStyle = ( // selected row > tr:nth-of-type(2n + 1).ant-table-row-selected { background: ${selectedRowBackground || rowStyle.background} !important; - > td.ant-table-cell { - background: transparent !important; - } // > td.ant-table-cell-row-hover, &:hover { @@ -48,9 +45,6 @@ export const getStyle = ( > tr:nth-of-type(2n).ant-table-row-selected { background: ${selectedRowBackground || alternateBackground} !important; - > td.ant-table-cell { - background: transparent !important; - } // > td.ant-table-cell-row-hover, &:hover { @@ -272,15 +266,8 @@ export const TableWrapper = styled.div.attrs<{ } /* Fix for selected and hovered rows */ - tr.ant-table-row-selected td.ant-table-cell-fix-left, - tr.ant-table-row-selected td.ant-table-cell-fix-right { - background-color: ${(props) => props.$rowStyle?.selectedRowBackground || '#e6f7ff'} !important; - } - tr.ant-table-row:hover td.ant-table-cell-fix-left, - tr.ant-table-row:hover td.ant-table-cell-fix-right { - background-color: ${(props) => props.$rowStyle?.hoverRowBackground || '#f5f5f5'} !important; - } + thead > tr:first-child { th:last-child { From ac3f139b71e5b0ee4e18ccaa08e0e683000c60e9 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 16 Oct 2025 21:38:15 +0500 Subject: [PATCH 20/54] [Fix]: #1811 column alignment --- client/packages/lowcoder/src/components/table/EditableCell.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx index 5064fffa1..b88616744 100644 --- a/client/packages/lowcoder/src/components/table/EditableCell.tsx +++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx @@ -225,7 +225,6 @@ function EditableCellComp(props: EditableCellProps) { key={`normal-view-${cellIndex}`} tabIndex={editable ? 0 : -1 } onFocus={enterEditFn} - style={{ width: '100%', height: '100%'}} > {normalView} From 7c17a4852577c6e6290cd0b1fb4278b8b4584ff7 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 17 Oct 2025 17:43:56 +0500 Subject: [PATCH 21/54] [Feat]: #1795 add table download --- .../src/comps/comps/tableComp/tableComp.tsx | 65 +++++++++++++++++-- 1 file changed, 59 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx index f050997a0..a8d151d1e 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx @@ -99,12 +99,65 @@ export class TableImplComp extends TableInitComp implements IContainer { } downloadData(fileName: string) { - saveDataAsFile({ - data: (this as any).exposingValues["displayData"], - filename: fileName, - fileType: "csv", - delimiter: this.children.toolbar.children.columnSeparator.getView(), - }); + const allDisplayData = (this as any).exposingValues["displayData"]; + const delimiter = this.children.toolbar.children.columnSeparator.getView(); + + try { + // Build the set of visible column keys as shown to the user (title or dataIndex) + const enableColumnSetting = this.children.toolbar.children.columnSetting.getView(); + const visibleColumnKeys = new Set(); + this.children.columns.getView().forEach((col) => { + const colView = col.getView(); + const isHidden = columnHide({ + hide: colView.hide, + tempHide: colView.tempHide, + enableColumnSetting, + }); + if (!isHidden) { + const headerKey = (colView.title as any) || colView.dataIndex; + if (headerKey) { + visibleColumnKeys.add(String(headerKey)); + } + } + }); + + const pickVisible = (row: any): any => { + const result: any = {}; + // copy only allowed keys + Object.keys(row || {}).forEach((key) => { + if (key !== COLUMN_CHILDREN_KEY && visibleColumnKeys.has(key)) { + result[key] = row[key]; + } + }); + // retain children recursively if present + if (Array.isArray(row?.[COLUMN_CHILDREN_KEY])) { + const children = row[COLUMN_CHILDREN_KEY].map((r: any) => pickVisible(r)); + if (children.length) { + result[COLUMN_CHILDREN_KEY] = children; + } + } + return result; + }; + + const dataToSave = Array.isArray(allDisplayData) + ? allDisplayData.map((r: any) => pickVisible(r)) + : allDisplayData; + + saveDataAsFile({ + data: dataToSave, + filename: fileName, + fileType: "csv", + delimiter, + }); + } catch (_e) { + // Fallback to previous behavior if anything goes wrong + saveDataAsFile({ + data: allDisplayData, + filename: fileName, + fileType: "csv", + delimiter, + }); + } } refreshData(allQueryNames: Array, setLoading: (loading: boolean) => void) { From 9d5e0aae15726dc3bb9b71feb1e5e79e963216e1 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 17 Oct 2025 22:39:56 +0500 Subject: [PATCH 22/54] [Fix]: #1795 remove unnecessary code --- .../src/comps/comps/tableComp/tableComp.tsx | 65 +++---------------- .../src/comps/comps/tableComp/tableUtils.tsx | 3 +- 2 files changed, 10 insertions(+), 58 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx index a8d151d1e..52b1acf4a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx @@ -99,65 +99,16 @@ export class TableImplComp extends TableInitComp implements IContainer { } downloadData(fileName: string) { - const allDisplayData = (this as any).exposingValues["displayData"]; + // displayData already contains only visible columns (filtered in transformDispalyData) + const displayData = (this as any).exposingValues["displayData"]; const delimiter = this.children.toolbar.children.columnSeparator.getView(); - try { - // Build the set of visible column keys as shown to the user (title or dataIndex) - const enableColumnSetting = this.children.toolbar.children.columnSetting.getView(); - const visibleColumnKeys = new Set(); - this.children.columns.getView().forEach((col) => { - const colView = col.getView(); - const isHidden = columnHide({ - hide: colView.hide, - tempHide: colView.tempHide, - enableColumnSetting, - }); - if (!isHidden) { - const headerKey = (colView.title as any) || colView.dataIndex; - if (headerKey) { - visibleColumnKeys.add(String(headerKey)); - } - } - }); - - const pickVisible = (row: any): any => { - const result: any = {}; - // copy only allowed keys - Object.keys(row || {}).forEach((key) => { - if (key !== COLUMN_CHILDREN_KEY && visibleColumnKeys.has(key)) { - result[key] = row[key]; - } - }); - // retain children recursively if present - if (Array.isArray(row?.[COLUMN_CHILDREN_KEY])) { - const children = row[COLUMN_CHILDREN_KEY].map((r: any) => pickVisible(r)); - if (children.length) { - result[COLUMN_CHILDREN_KEY] = children; - } - } - return result; - }; - - const dataToSave = Array.isArray(allDisplayData) - ? allDisplayData.map((r: any) => pickVisible(r)) - : allDisplayData; - - saveDataAsFile({ - data: dataToSave, - filename: fileName, - fileType: "csv", - delimiter, - }); - } catch (_e) { - // Fallback to previous behavior if anything goes wrong - saveDataAsFile({ - data: allDisplayData, - filename: fileName, - fileType: "csv", - delimiter, - }); - } + saveDataAsFile({ + data: displayData, + filename: fileName, + fileType: "csv", + delimiter, + }); } refreshData(allQueryNames: Array, setLoading: (loading: boolean) => void) { diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx index fdc5c775d..edb26ca61 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx @@ -209,7 +209,8 @@ export function transformDispalyData( return oriDisplayData.map((row) => { const transData = _(row) .omit(OB_ROW_ORI_INDEX) - .mapKeys((value, key) => dataIndexTitleDict[key] || key) + .pickBy((value, key) => key in dataIndexTitleDict) // Only include columns in the dictionary + .mapKeys((value, key) => dataIndexTitleDict[key]) .value(); if (Array.isArray(row[COLUMN_CHILDREN_KEY])) { return { From 86674b68c5bb33f0652594f810ed3b4d298117f2 Mon Sep 17 00:00:00 2001 From: Ludo Mikula Date: Sat, 18 Oct 2025 20:00:23 +0200 Subject: [PATCH 23/54] fix: #1732 - fixed typos in secrets.yaml files --- deploy/helm/templates/api-service/secrets.yaml | 4 ++-- deploy/helm/templates/node-service/secrets.yaml | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/deploy/helm/templates/api-service/secrets.yaml b/deploy/helm/templates/api-service/secrets.yaml index c1e45ced8..c670b36c2 100644 --- a/deploy/helm/templates/api-service/secrets.yaml +++ b/deploy/helm/templates/api-service/secrets.yaml @@ -31,6 +31,6 @@ stringData: LOWCODER_API_KEY_SECRET: "{{ .Values.global.config.apiKeySecret }}" LOWCODER_SUPERUSER_USERNAME: {{ .Values.global.config.superuser.username | default "admin@localhost" | quote }} LOWCODER_SUPERUSER_PASSWORD: {{ .Values.global.config.superuser.password | default "" | quote }} - LOWCODER_NODE_SERVICE_SECRET: {{ .values.global.config.nodeServiceSecret | default "62e348319ab9f5c43c3b5a380b4d82525cdb68740f21140e767989b509ab0aa2" | quote }} - LOWCODER_NODE_SERVICE_SECRET_SALT: {{ .values.global.config.nodeServiceSalt | default "lowcoder.org" | quote }} + LOWCODER_NODE_SERVICE_SECRET: {{ .Values.global.config.nodeServiceSecret | default "62e348319ab9f5c43c3b5a380b4d82525cdb68740f21140e767989b509ab0aa2" | quote }} + LOWCODER_NODE_SERVICE_SECRET_SALT: {{ .Values.global.config.nodeServiceSalt | default "lowcoder.org" | quote }} diff --git a/deploy/helm/templates/node-service/secrets.yaml b/deploy/helm/templates/node-service/secrets.yaml index 2af6cfa30..88888d60f 100644 --- a/deploy/helm/templates/node-service/secrets.yaml +++ b/deploy/helm/templates/node-service/secrets.yaml @@ -10,6 +10,6 @@ metadata: {{- toYaml . | nindent 4 }} {{- end }} stringData: - LOWCODER_NODE_SERVICE_SECRET: {{ .values.global.config.nodeServiceSecret | default "62e348319ab9f5c43c3b5a380b4d82525cdb68740f21140e767989b509ab0aa2" | quote }} - LOWCODER_NODE_SERVICE_SECRET_SALT: {{ .values.global.config.nodeServiceSalt | default "lowcoder.org" | quote }} + LOWCODER_NODE_SERVICE_SECRET: {{ .Values.global.config.nodeServiceSecret | default "62e348319ab9f5c43c3b5a380b4d82525cdb68740f21140e767989b509ab0aa2" | quote }} + LOWCODER_NODE_SERVICE_SECRET_SALT: {{ .Values.global.config.nodeServiceSalt | default "lowcoder.org" | quote }} From ad164cbce417e4e268317e0bd54f820224419f4f Mon Sep 17 00:00:00 2001 From: Ludo Mikula Date: Sun, 19 Oct 2025 13:06:08 +0200 Subject: [PATCH 24/54] fix #1968: add null checks when retrieving marketplace info --- .../api/home/UserHomeApiServiceImpl.java | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java index d8520a9d5..e7e840e01 100644 --- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java +++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java @@ -344,7 +344,7 @@ public Flux getAllMarketplaceApplications(@Nulla return applicationFlux - .flatMap(application -> Mono.zip(Mono.just(application), userMapMono, orgMapMono)) + .flatMap(application -> Mono.zip(Mono.justOrEmpty(application), userMapMono, orgMapMono)) .flatMap(tuple2 -> { // build view Application application = tuple2.getT1(); @@ -356,24 +356,33 @@ public Flux getAllMarketplaceApplications(@Nulla .applicationType(application.getApplicationType()) .applicationStatus(application.getApplicationStatus()) .orgId(application.getOrganizationId()) - .orgName(orgMap.get(application.getOrganizationId()).getName()) + .orgName(Optional.ofNullable(orgMap.get(application.getOrganizationId())) + .map(Organization::getName) + .orElse("")) .creatorEmail(Optional.ofNullable(userMap.get(application.getCreatedBy())) .map(User::getName) .orElse("")) - .createAt(application.getCreatedAt().toEpochMilli()) + .createAt(Optional.ofNullable(application.getCreatedAt()) + .map(Instant::toEpochMilli) + .orElse(0L)) .createBy(application.getCreatedBy()) .build(); // marketplace specific fields return application.getPublishedApplicationDSL(applicationRecordService) - .map(pubishedApplicationDSL -> - (Map) new HashMap((Map) pubishedApplicationDSL.getOrDefault("settings", new HashMap<>()))) - .switchIfEmpty(Mono.just(new HashMap<>())) + .map(dsl -> { + Object settingsObj = dsl.getOrDefault("settings", new HashMap<>()); + if (!(settingsObj instanceof Map)) { + return new HashMap(); // fallback if not a map + } + return (Map) settingsObj; + }) + .defaultIfEmpty(new HashMap<>()) .map(settings -> { - marketplaceApplicationInfoView.setTitle((String)settings.getOrDefault("title", application.getName())); - marketplaceApplicationInfoView.setCategory((String)settings.get("category")); - marketplaceApplicationInfoView.setDescription((String)settings.get("description")); - marketplaceApplicationInfoView.setImage((String)settings.get("icon")); + marketplaceApplicationInfoView.setTitle((String) settings.getOrDefault("title", application.getName())); + marketplaceApplicationInfoView.setCategory((String) settings.get("category")); + marketplaceApplicationInfoView.setDescription((String) settings.get("description")); + marketplaceApplicationInfoView.setImage((String) settings.get("icon")); return marketplaceApplicationInfoView; }); }); From 412b6488ee012a9198fa2963f8c9f21ff3079be1 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 20 Oct 2025 20:40:35 +0500 Subject: [PATCH 25/54] fix app header dropdown warning --- .../lowcoder/src/pages/common/headerStartDropdown.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx index 498a857f0..201cf9225 100644 --- a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx +++ b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx @@ -167,7 +167,9 @@ export function HeaderStartDropdown(props: { setEdit: () => void, isViewMarketpl }); } }} - items={menuItems.filter(item => item.visible)} + items={menuItems + .filter((item) => item.visible) + .map(({ visible, ...rest }) => rest)} /> )} > From 9a900cc80885f48c63b46dc406ab683332761ed5 Mon Sep 17 00:00:00 2001 From: Ludo Mikula Date: Mon, 20 Oct 2025 19:49:57 +0200 Subject: [PATCH 26/54] fix: normalize max request size for nginx --- deploy/docker/default.env | 4 ++-- deploy/docker/frontend/01-update-nginx-conf.sh | 8 ++++++-- deploy/helm/values.yaml | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/deploy/docker/default.env b/deploy/docker/default.env index 8b4445a3d..d37f0ce81 100644 --- a/deploy/docker/default.env +++ b/deploy/docker/default.env @@ -116,8 +116,8 @@ LOWCODER_NODE_SERVICE_SECRET_SALT="lowcoder.org" ## ## Frontend parameters ## -# Lowcoder max request size -LOWCODER_MAX_REQUEST_SIZE=20m +# Lowcoder max request size in kb/mb/gb +LOWCODER_MAX_REQUEST_SIZE=20mb # Lowcoder max query timeout (in seconds) LOWCODER_MAX_QUERY_TIMEOUT=120 # Default lowcoder query timeout diff --git a/deploy/docker/frontend/01-update-nginx-conf.sh b/deploy/docker/frontend/01-update-nginx-conf.sh index 3499286b2..88e8928e9 100644 --- a/deploy/docker/frontend/01-update-nginx-conf.sh +++ b/deploy/docker/frontend/01-update-nginx-conf.sh @@ -18,12 +18,16 @@ else ln -s /etc/nginx/nginx-http.conf /etc/nginx/nginx.conf fi; -sed -i "s@__LOWCODER_MAX_REQUEST_SIZE__@${LOWCODER_MAX_REQUEST_SIZE:=20m}@" /etc/nginx/nginx.conf +# Normalize max. request size for usage with nginx +MAX_REQUEST_SIZE=$(echo "${LOWCODER_MAX_REQUEST_SIZE:=20m}" | perl -pe 's/^([ \t]*)(?\d+(\.\d+)?)([ \t]*)(?[kKmMgGtT]{1})?([bB \t]*)$/"$+{number}" . lc($+{unit})/e') + + +sed -i "s@__LOWCODER_MAX_REQUEST_SIZE__@${MAX_REQUEST_SIZE}@" /etc/nginx/nginx.conf sed -i "s@__LOWCODER_MAX_QUERY_TIMEOUT__@${LOWCODER_MAX_QUERY_TIMEOUT:=120}@" /etc/nginx/server.conf sed -i "s@__LOWCODER_API_SERVICE_URL__@${LOWCODER_API_SERVICE_URL:=http://localhost:8080}@" /etc/nginx/server.conf sed -i "s@__LOWCODER_NODE_SERVICE_URL__@${LOWCODER_NODE_SERVICE_URL:=http://localhost:6060}@" /etc/nginx/server.conf echo "nginx config updated with:" -echo " Lowcoder max upload size: ${LOWCODER_MAX_REQUEST_SIZE:=20m}" +echo " Lowcoder max upload size: ${MAX_REQUEST_SIZE:=20m}" echo " Lowcoder api service URL: ${LOWCODER_API_SERVICE_URL:=http://localhost:8080}" echo " Lowcoder node service URL: ${LOWCODER_NODE_SERVICE_URL:=http://localhost:6060}" diff --git a/deploy/helm/values.yaml b/deploy/helm/values.yaml index 3723fec4b..ddfe76491 100644 --- a/deploy/helm/values.yaml +++ b/deploy/helm/values.yaml @@ -34,7 +34,7 @@ global: nodeServiceSecret: "62e348319ab9f5c43c3b5a380b4d82525cdb68740f21140e767989b509ab0aa2" nodeServiceSalt: "lowcoder.org" maxQueryTimeout: 120 - maxRequestSize: "20m" + maxRequestSize: "20mb" snapshotRetentionTime: 30 marketplacePrivateMode: true cookie: From 2acc744a3a2a16d722dfac37fc66b005ea839694 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 22 Oct 2025 22:38:48 +0500 Subject: [PATCH 27/54] fix piechart default x-axis --- .../lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx index aaa5f0198..607a9a368 100644 --- a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx @@ -302,7 +302,7 @@ let PieChartComp = withExposingConfigs(PieChartTmpComp, [ export const PieChartCompWithDefault = withDefault(PieChartComp, { - xAxisKey: "date", + xAxisKey: "name", series: [ { dataIndex: genRandomKey(), From 02f61ebbc705fffd95db95e624309fd1649d34de Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 23 Oct 2025 22:38:44 +0500 Subject: [PATCH 28/54] fix chart theme --- .../lowcoder-comps/src/comps/barChartComp/barChartComp.tsx | 3 ++- .../lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx | 1 + .../lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx | 1 + .../src/comps/scatterChartComp/scatterChartComp.tsx | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx index 7b64f0f6c..0998492ae 100644 --- a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx @@ -75,6 +75,7 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => { log.error('theme chart error: ', error); } + // Detect race mode changes and force chart recreation const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView(); useEffect(() => { @@ -172,7 +173,6 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => { useResizeDetector({ targetRef: containerRef, onResize: ({width, height}) => { - console.log('barChart - resize'); if (width && height) { setChartSize({ w: width, h: height }); } @@ -194,6 +194,7 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => { notMerge={!currentRaceMode} lazyUpdate={!currentRaceMode} opts={{ locale: getEchartsLocale() }} + theme={themeConfig} option={option} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx index 032607625..ed2f1654e 100644 --- a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx @@ -174,6 +174,7 @@ LineChartTmpComp = withViewFn(LineChartTmpComp, (comp) => { notMerge lazyUpdate opts={{ locale: getEchartsLocale() }} + theme={themeConfig} option={option} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx index aaa5f0198..3b1dc0f34 100644 --- a/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartComp.tsx @@ -194,6 +194,7 @@ PieChartTmpComp = withViewFn(PieChartTmpComp, (comp) => { notMerge lazyUpdate opts={{ locale: getEchartsLocale() }} + theme={themeConfig} option={option} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartComp.tsx b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartComp.tsx index c7fd7da9c..527a4ca2d 100644 --- a/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartComp.tsx @@ -175,6 +175,7 @@ ScatterChartTmpComp = withViewFn(ScatterChartTmpComp, (comp) => { notMerge lazyUpdate opts={{ locale: getEchartsLocale() }} + theme={themeConfig} option={option} mode={mode} /> From e0ddfb8a01e3723c0c806bafdc3eaf4d54a0f1a2 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 24 Oct 2025 21:37:57 +0500 Subject: [PATCH 29/54] [Feat]: add click/double click events for lotte --- .../src/comps/comps/jsonComp/jsonLottieComp.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx index 466c37e9f..92f355936 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx @@ -10,7 +10,7 @@ import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { Section, sectionNames } from "lowcoder-design"; -import { useContext, lazy, useEffect, useState } from "react"; +import { useContext, lazy, useEffect, useState, useCallback } from "react"; import { stateComp, UICompBuilder, withDefault } from "../../generators"; import { NameConfig, @@ -23,9 +23,10 @@ import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconsco import { DotLottie } from "@lottiefiles/dotlottie-react"; import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl"; import { useResizeDetector } from "react-resize-detector"; -import { eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; +import { eventHandlerControl, clickEvent, doubleClickEvent } from "@lowcoder-ee/comps/controls/eventHandlerControl"; import { withMethodExposing } from "@lowcoder-ee/comps/generators/withMethodExposing"; import { changeChildAction } from "lowcoder-core"; +import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler"; // const Player = lazy( // () => import('@lottiefiles/react-lottie-player') @@ -128,6 +129,8 @@ const ModeOptions = [ ] as const; const EventOptions = [ + clickEvent, + doubleClickEvent, { label: trans("jsonLottie.load"), value: "load", description: trans("jsonLottie.load") }, { label: trans("jsonLottie.play"), value: "play", description: trans("jsonLottie.play") }, { label: trans("jsonLottie.pause"), value: "pause", description: trans("jsonLottie.pause") }, @@ -160,6 +163,10 @@ let JsonLottieTmpComp = (function () { }; return new UICompBuilder(childrenMap, (props, dispatch) => { const [dotLottie, setDotLottie] = useState(null); + const handleClickEvent = useCompClickEventHandler({ onEvent: props.onEvent }); + const handleClick = useCallback(() => { + handleClickEvent(); + }, [handleClickEvent]); const setLayoutAndResize = () => { const align = props.align.split(','); @@ -244,6 +251,7 @@ let JsonLottieTmpComp = (function () { padding: `${props.container.padding}`, rotate: props.container.rotation, }} + onClick={handleClick} > Date: Wed, 29 Oct 2025 17:51:20 +0100 Subject: [PATCH 30/54] fix #2070: error while listing mobile nav apps --- .../java/org/lowcoder/domain/application/model/Application.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java index 3e2a7c2ae..da9b3c083 100644 --- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java +++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java @@ -242,7 +242,7 @@ public Mono getLiveContainerSize(ApplicationRecordService applicationRec if (ApplicationType.APPLICATION.getValue() == getApplicationType()) { return Mono.empty(); } - return Mono.just(getContainerSizeFromDSL(dsl)); + return Mono.justOrEmpty(getContainerSizeFromDSL(dsl)); }); } From a1828453d09a57465e4b2e9c0653680afde9e75e Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 30 Oct 2025 22:29:20 +0500 Subject: [PATCH 31/54] [Fix]: #1840 table theme sort color column --- .../lowcoder/src/comps/comps/tableComp/tableStyles.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts index 54c856c14..b89ca0b4a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts @@ -269,6 +269,15 @@ export const TableWrapper = styled.div.attrs<{ transition: background-color 0.3s; } + /* Ensure sorted column cells respect theme/row background instead of AntD default */ + &.ant-table-column-sort { + background: transparent; + } + &.ant-table-cell-fix-left.ant-table-column-sort, + &.ant-table-cell-fix-right.ant-table-column-sort { + background: transparent; + } + } /* Fix for selected and hovered rows */ From 507efa65ebbb72abb5e57ab39bf7d50020dc3589 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 31 Oct 2025 22:30:39 +0500 Subject: [PATCH 32/54] [Feat]: #1827 #1937 markdown + tooltip on events --- .../src/comps/controls/eventHandlerControl.tsx | 7 ++++++- .../queries/queryComp/queryConfirmationModal.tsx | 14 +++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx index dac3dd023..631c322c8 100644 --- a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx @@ -14,6 +14,7 @@ import { EventContent, EventDiv, EventTitle, + Tooltip, InlineEventFormWrapper, LinkButton, OptionType, @@ -123,7 +124,11 @@ class SingleEventHandlerControl< defaultVisible={props.popup} > - {!_.isEmpty(eventName) && {eventName}} + {!_.isEmpty(eventName) && ( + + {eventName} + + )} {eventAction} diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryConfirmationModal.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryConfirmationModal.tsx index 66f5de712..0ad6c73bc 100644 --- a/client/packages/lowcoder/src/comps/queries/queryComp/queryConfirmationModal.tsx +++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryConfirmationModal.tsx @@ -1,7 +1,7 @@ import { MultiCompBuilder } from "../../generators"; import { BoolPureControl } from "../../controls/boolControl"; import { StringControl } from "../../controls/codeControl"; -import { CustomModal } from "lowcoder-design"; +import { CustomModal, TacoMarkDown } from "lowcoder-design"; import { isEmpty } from "lodash"; import { QueryResult } from "../queryComp"; import { trans } from "i18n"; @@ -16,15 +16,19 @@ export const QueryConfirmationModal = new MultiCompBuilder( new Promise((resolve) => { props.showConfirmationModal && isManual ? CustomModal.confirm({ - content: isEmpty(props.confirmationMessage) - ? trans("query.confirmationMessage") - : props.confirmationMessage, + content: ( + + {isEmpty(props.confirmationMessage) + ? trans("query.confirmationMessage") + : props.confirmationMessage} + + ), onConfirm: () => { resolve(onConfirm()); }, confirmBtnType: "primary", style: { top: "-100px" }, - bodyStyle: { marginTop: 0, height: "42px" }, + bodyStyle: { marginTop: 0 }, }) : resolve(onConfirm()); }) From f4109c652bd621d4c5e63e588109972212aa1d2e Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 4 Nov 2025 19:36:12 +0500 Subject: [PATCH 33/54] [Fix]: #2076 mobile nav app not passing params --- .../comps/comps/layout/mobileTabLayout.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index c1a04c14e..d5c052269 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -34,6 +34,8 @@ import { LayoutActionComp } from "./layoutActionComp"; import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; +import { useAppPathParam } from "util/hooks"; +import { ALL_APPLICATIONS_URL } from "constants/routesURL"; const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar")); const TabBarItem = React.lazy(() => @@ -389,6 +391,7 @@ let MobileTabLayoutTmp = (function () { MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const [tabIndex, setTabIndex] = useState(0); const { readOnly } = useContext(ExternalEditorContext); + const pathParam = useAppPathParam(); const navStyle = comp.children.navStyle.getView(); const navItemStyle = comp.children.navItemStyle.getView(); const navItemHoverStyle = comp.children.navItemHoverStyle.getView(); @@ -466,7 +469,23 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { : undefined, }))} selectedKey={tabIndex + ""} - onChange={(key) => setTabIndex(Number(key))} + onChange={(key) => { + const nextIndex = Number(key); + setTabIndex(nextIndex); + // push URL with query/hash params like desktop nav + if (dataOptionType === DataOption.Manual) { + const selectedTab = tabViews[nextIndex]; + if (selectedTab) { + const url = [ + ALL_APPLICATIONS_URL, + pathParam.applicationId, + pathParam.viewMode, + nextIndex, + ].join("/"); + selectedTab.children.action.act(url); + } + } + }} readOnly={!!readOnly} canvasBg={bgColor} tabStyle={{ From 16e9d0a3881986646be2958b64681668bf917cc0 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 4 Nov 2025 22:30:04 +0500 Subject: [PATCH 34/54] [Feat]: Add hamburger menu mode for Mobile Nav App + refactor --- .../comps/comps/layout/mobileTabLayout.tsx | 305 +++++++++++++++--- .../comps/comps/layout/navLayoutConstants.ts | 39 +++ 2 files changed, 298 insertions(+), 46 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index d5c052269..a283c5f39 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -18,7 +18,7 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext"; import { default as Skeleton } from "antd/es/skeleton"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl"; -import { DataOption, DataOptionType, ModeOptions, menuItemStyleOptions, mobileNavJsonMenuItems } from "./navLayoutConstants"; +import { DataOption, DataOptionType, menuItemStyleOptions, mobileNavJsonMenuItems, MobileModeOptions, MobileMode, HamburgerPositionOptions, DrawerPlacementOptions } from "./navLayoutConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; import Segmented from "antd/es/segmented"; @@ -43,6 +43,7 @@ const TabBarItem = React.lazy(() => default: module.TabBarItem, })) ); +const Popup = React.lazy(() => import("antd-mobile/es/components/popup")); const EventOptions = [clickEvent] as const; const AppViewContainer = styled.div` @@ -67,6 +68,92 @@ const TabLayoutViewContainer = styled.div<{ flex-direction: column; `; +const HamburgerButton = styled.button<{ + $size: string; + $position: string; // bottom-right | bottom-left | top-right | top-left + $zIndex: number; +}>` + position: fixed; + ${(props) => (props.$position.includes('bottom') ? 'bottom: 16px;' : 'top: 16px;')} + ${(props) => (props.$position.includes('right') ? 'right: 16px;' : 'left: 16px;')} + width: ${(props) => props.$size}; + height: ${(props) => props.$size}; + border-radius: 50%; + border: 1px solid rgba(0,0,0,0.1); + background: white; + display: flex; + align-items: center; + justify-content: center; + z-index: ${(props) => props.$zIndex}; + cursor: pointer; + box-shadow: 0 6px 16px rgba(0,0,0,0.15); +`; + +const BurgerIcon = styled.div<{ + $lineColor?: string; +}>` + width: 60%; + height: 2px; + background: ${(p) => p.$lineColor || '#333'}; + position: relative; + &::before, &::after { + content: ''; + position: absolute; + left: 0; + width: 100%; + height: 2px; + background: inherit; + } + &::before { top: -6px; } + &::after { top: 6px; } +`; + +const DrawerContent = styled.div<{ + $background: string; +}>` + background: ${(p) => p.$background}; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding: 12px; + box-sizing: border-box; +`; + +const DrawerList = styled.div<{ + $itemStyle: NavLayoutItemStyleType; + $hoverStyle: NavLayoutItemHoverStyleType; + $activeStyle: NavLayoutItemActiveStyleType; +}>` + display: flex; + flex-direction: column; + gap: 8px; + + .drawer-item { + display: flex; + align-items: center; + gap: 8px; + background-color: ${(p) => p.$itemStyle.background}; + color: ${(p) => p.$itemStyle.text}; + border-radius: ${(p) => p.$itemStyle.radius}; + border: 1px solid ${(p) => p.$itemStyle.border}; + margin: ${(p) => p.$itemStyle.margin}; + padding: ${(p) => p.$itemStyle.padding}; + cursor: pointer; + user-select: none; + } + .drawer-item:hover { + background-color: ${(p) => p.$hoverStyle.background}; + color: ${(p) => p.$hoverStyle.text}; + border: 1px solid ${(p) => p.$hoverStyle.border}; + } + .drawer-item.active { + background-color: ${(p) => p.$activeStyle.background}; + color: ${(p) => p.$activeStyle.text}; + border: 1px solid ${(p) => p.$activeStyle.border}; + } +`; + const TabBarWrapper = styled.div<{ $readOnly: boolean, $canvasBg: string, @@ -118,7 +205,7 @@ const StyledTabBar = styled(TabBar)<{ .adm-tab-bar-item-icon, .adm-tab-bar-item-title { color: ${(props) => props.$tabStyle.text}; } - .adm-tab-bar-item-icon, { + .adm-tab-bar-item-icon { font-size: ${(props) => props.$navIconSize}; } @@ -289,6 +376,69 @@ const TabOptionComp = (function () { .build(); })(); +function renderDataSection(children: any): any { + return ( +
+ {children.dataOptionType.propertyView({ + radioButton: true, + type: "oneline", + })} + {children.dataOptionType.getView() === DataOption.Manual + ? children.tabs.propertyView({}) + : children.jsonItems.propertyView({ + label: "Json Data", + })} +
+ ); +} + +function renderEventHandlersSection(children: any): any { + return ( +
+ {children.onEvent.getPropertyView()} +
+ ); +} + +function renderHamburgerLayoutSection(children: any): any { + const drawerPlacement = children.drawerPlacement.getView(); + return ( + <> + {children.hamburgerPosition.propertyView({ label: "Hamburger Position" })} + {children.hamburgerSize.propertyView({ label: "Hamburger Size" })} + {children.drawerPlacement.propertyView({ label: "Drawer Placement" })} + {(drawerPlacement === 'top' || drawerPlacement === 'bottom') && + children.drawerHeight.propertyView({ label: "Drawer Height" })} + {(drawerPlacement === 'left' || drawerPlacement === 'right') && + children.drawerWidth.propertyView({ label: "Drawer Width" })} + {children.shadowOverlay.propertyView({ label: "Shadow Overlay" })} + {children.backgroundImage.propertyView({ + label: `Background Image`, + placeholder: 'https://temp.im/350x400', + })} + + ); +} + +function renderVerticalLayoutSection(children: any): any { + return ( + <> + {children.backgroundImage.propertyView({ + label: `Background Image`, + placeholder: 'https://temp.im/350x400', + })} + {children.showSeparator.propertyView({label: trans("navLayout.mobileNavVerticalShowSeparator")})} + {children.tabBarHeight.propertyView({label: trans("navLayout.mobileNavBarHeight")})} + {children.navIconSize.propertyView({label: trans("navLayout.mobileNavIconSize")})} + {children.maxWidth.propertyView({label: trans("navLayout.mobileNavVerticalMaxWidth")})} + {children.verticalAlignment.propertyView({ + label: trans("navLayout.mobileNavVerticalOrientation"), + radioButton: true + })} + + ); +} + let MobileTabLayoutTmp = (function () { const childrenMap = { onEvent: eventHandlerControl(EventOptions), @@ -313,6 +463,14 @@ let MobileTabLayoutTmp = (function () { jsonTabs: manualOptionsControl(TabOptionComp, { initOptions: [], }), + // Mode & hamburger/drawer config + menuMode: dropdownControl(MobileModeOptions, MobileMode.Vertical), + hamburgerPosition: dropdownControl(HamburgerPositionOptions, "bottom-right"), + hamburgerSize: withDefault(StringControl, "56px"), + drawerPlacement: dropdownControl(DrawerPlacementOptions, "bottom"), + drawerHeight: withDefault(StringControl, "60%"), + drawerWidth: withDefault(StringControl, "250px"), + shadowOverlay: withDefault(BoolCodeControl, true), backgroundImage: withDefault(StringControl, ""), tabBarHeight: withDefault(StringControl, "56px"), navIconSize: withDefault(StringControl, "32px"), @@ -328,40 +486,21 @@ let MobileTabLayoutTmp = (function () { return null; }) .setPropertyViewFn((children) => { - const [styleSegment, setStyleSegment] = useState('normal') + const [styleSegment, setStyleSegment] = useState('normal'); + const isHamburgerMode = children.menuMode.getView() === MobileMode.Hamburger; + return ( -
-
- {children.dataOptionType.propertyView({ - radioButton: true, - type: "oneline", - })} - { - children.dataOptionType.getView() === DataOption.Manual - ? children.tabs.propertyView({}) - : children.jsonItems.propertyView({ - label: "Json Data", - }) - } -
-
- { children.onEvent.getPropertyView() } -
+ <> + {renderDataSection(children)} + {renderEventHandlersSection(children)}
- {children.backgroundImage.propertyView({ - label: `Background Image`, - placeholder: 'https://temp.im/350x400', - })} - { children.showSeparator.propertyView({label: trans("navLayout.mobileNavVerticalShowSeparator")})} - {children.tabBarHeight.propertyView({label: trans("navLayout.mobileNavBarHeight")})} - {children.navIconSize.propertyView({label: trans("navLayout.mobileNavIconSize")})} - {children.maxWidth.propertyView({label: trans("navLayout.mobileNavVerticalMaxWidth")})} - {children.verticalAlignment.propertyView( - { label: trans("navLayout.mobileNavVerticalOrientation"),radioButton: true } - )} + {children.menuMode.propertyView({ label: "Mode", radioButton: true })} + {isHamburgerMode + ? renderHamburgerLayoutSection(children) + : renderVerticalLayoutSection(children)}
- { children.navStyle.getPropertyView() } + {children.navStyle.getPropertyView()}
{controlItem({}, ( @@ -372,17 +511,11 @@ let MobileTabLayoutTmp = (function () { onChange={(k) => setStyleSegment(k as MenuItemStyleOptionValue)} /> ))} - {styleSegment === 'normal' && ( - children.navItemStyle.getPropertyView() - )} - {styleSegment === 'hover' && ( - children.navItemHoverStyle.getPropertyView() - )} - {styleSegment === 'active' && ( - children.navItemActiveStyle.getPropertyView() - )} + {styleSegment === 'normal' && children.navItemStyle.getPropertyView()} + {styleSegment === 'hover' && children.navItemHoverStyle.getPropertyView()} + {styleSegment === 'active' && children.navItemActiveStyle.getPropertyView()}
-
+ ); }) .build(); @@ -390,6 +523,7 @@ let MobileTabLayoutTmp = (function () { MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const [tabIndex, setTabIndex] = useState(0); + const [drawerVisible, setDrawerVisible] = useState(false); const { readOnly } = useContext(ExternalEditorContext); const pathParam = useAppPathParam(); const navStyle = comp.children.navStyle.getView(); @@ -399,6 +533,13 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const backgroundImage = comp.children.backgroundImage.getView(); const jsonItems = comp.children.jsonItems.getView(); const dataOptionType = comp.children.dataOptionType.getView(); + const menuMode = comp.children.menuMode.getView(); + const hamburgerPosition = comp.children.hamburgerPosition.getView(); + const hamburgerSize = comp.children.hamburgerSize.getView(); + const drawerPlacement = comp.children.drawerPlacement.getView(); + const drawerHeight = comp.children.drawerHeight.getView(); + const drawerWidth = comp.children.drawerWidth.getView(); + const shadowOverlay = comp.children.shadowOverlay.getView(); const tabBarHeight = comp.children.tabBarHeight.getView(); const navIconSize = comp.children.navIconSize.getView(); const maxWidth = comp.children.maxWidth.getView(); @@ -472,7 +613,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { onChange={(key) => { const nextIndex = Number(key); setTabIndex(nextIndex); - // push URL with query/hash params like desktop nav + // push URL with query/hash params if (dataOptionType === DataOption.Manual) { const selectedTab = tabViews[nextIndex]; if (selectedTab) { @@ -507,11 +648,76 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { /> ); + const containerTabBarHeight = menuMode === MobileMode.Hamburger ? '0px' : tabBarHeight; + + const hamburgerButton = ( + setDrawerVisible(true)} + > + + + ); + + const drawerBodyStyle = useMemo(() => { + if (drawerPlacement === 'left' || drawerPlacement === 'right') { + return { width: drawerWidth } as React.CSSProperties; + } + return { height: drawerHeight } as React.CSSProperties; + }, [drawerPlacement, drawerHeight, drawerWidth]); + + const drawerView = ( + }> + setDrawerVisible(false)} + onClose={() => setDrawerVisible(false)} + position={drawerPlacement as any} + mask={shadowOverlay} + bodyStyle={drawerBodyStyle} + > + + + {tabViews.map((tab, index) => ( +
{ + setTabIndex(index); + setDrawerVisible(false); + onEvent('click'); + }} + > + {tab.children.icon.toJsonValue() ? ( + {tab.children.icon.getView()} + ) : null} + {tab.children.label.getView()} +
+ ))} + + + + + ); + if (readOnly) { return ( - + {appView} - {tabBarView} + {menuMode === MobileMode.Hamburger ? ( + <> + {hamburgerButton} + {drawerView} + + ) : ( + tabBarView + )} ); } @@ -519,7 +725,14 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { return ( {appView} - {tabBarView} + {menuMode === MobileMode.Hamburger ? ( + <> + {hamburgerButton} + {drawerView} + + ) : ( + tabBarView + )} ); }); diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts index 66043303a..aa33423d0 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts @@ -6,6 +6,45 @@ export const ModeOptions = [ { label: trans("navLayout.modeHorizontal"), value: "horizontal" }, ] as const; +// Mobile navigation specific modes and options +export const MobileMode = { + Vertical: "vertical", + Hamburger: "hamburger", +} as const; + +export const MobileModeOptions = [ + { label: "Normal", value: MobileMode.Vertical }, + { label: "Hamburger", value: MobileMode.Hamburger }, +]; + +export const HamburgerPosition = { + BottomRight: "bottom-right", + BottomLeft: "bottom-left", + TopRight: "top-right", + TopLeft: "top-left", +} as const; + +export const HamburgerPositionOptions = [ + { label: "Bottom Right", value: HamburgerPosition.BottomRight }, + { label: "Bottom Left", value: HamburgerPosition.BottomLeft }, + { label: "Top Right", value: HamburgerPosition.TopRight }, + { label: "Top Left", value: HamburgerPosition.TopLeft }, +] as const; + +export const DrawerPlacement = { + Bottom: "bottom", + Top: "top", + Left: "left", + Right: "right", +} as const; + +export const DrawerPlacementOptions = [ + { label: "Bottom", value: DrawerPlacement.Bottom }, + { label: "Top", value: DrawerPlacement.Top }, + { label: "Left", value: DrawerPlacement.Left }, + { label: "Right", value: DrawerPlacement.Right }, +]; + export const DataOption = { Manual: 'manual', Json: 'json', From 9408350f87339f2a67900096ce50f421f4f9d744 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 4 Nov 2025 22:35:23 +0500 Subject: [PATCH 35/54] add customizeable icon burger icon --- .../lowcoder/src/comps/comps/layout/mobileTabLayout.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index a283c5f39..a019c97ef 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -404,6 +404,7 @@ function renderHamburgerLayoutSection(children: any): any { const drawerPlacement = children.drawerPlacement.getView(); return ( <> + {children.hamburgerIcon.propertyView({ label: "Icon" })} {children.hamburgerPosition.propertyView({ label: "Hamburger Position" })} {children.hamburgerSize.propertyView({ label: "Hamburger Size" })} {children.drawerPlacement.propertyView({ label: "Drawer Placement" })} @@ -465,6 +466,7 @@ let MobileTabLayoutTmp = (function () { }), // Mode & hamburger/drawer config menuMode: dropdownControl(MobileModeOptions, MobileMode.Vertical), + hamburgerIcon: IconControl, hamburgerPosition: dropdownControl(HamburgerPositionOptions, "bottom-right"), hamburgerSize: withDefault(StringControl, "56px"), drawerPlacement: dropdownControl(DrawerPlacementOptions, "bottom"), @@ -536,6 +538,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const menuMode = comp.children.menuMode.getView(); const hamburgerPosition = comp.children.hamburgerPosition.getView(); const hamburgerSize = comp.children.hamburgerSize.getView(); + const hamburgerIconComp = comp.children.hamburgerIcon; const drawerPlacement = comp.children.drawerPlacement.getView(); const drawerHeight = comp.children.drawerHeight.getView(); const drawerWidth = comp.children.drawerWidth.getView(); @@ -657,7 +660,9 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { $zIndex={Layers.tabBar + 1} onClick={() => setDrawerVisible(true)} > - + {hamburgerIconComp.toJsonValue() + ? hamburgerIconComp.getView() + : } ); From b15b10ac5fed17d489c9dc4e3beefc8d399e7d02 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 5 Nov 2025 15:03:09 +0500 Subject: [PATCH 36/54] add close icon in the drawer --- .../comps/comps/layout/mobileTabLayout.tsx | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index a019c97ef..1d498be4f 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -120,6 +120,27 @@ const DrawerContent = styled.div<{ box-sizing: border-box; `; +const DrawerHeader = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; +`; + +const DrawerCloseButton = styled.button<{ + $color: string; +}>` + background: transparent; + border: none; + cursor: pointer; + color: ${(p) => p.$color}; + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 16px; +`; + const DrawerList = styled.div<{ $itemStyle: NavLayoutItemStyleType; $hoverStyle: NavLayoutItemHoverStyleType; @@ -404,7 +425,8 @@ function renderHamburgerLayoutSection(children: any): any { const drawerPlacement = children.drawerPlacement.getView(); return ( <> - {children.hamburgerIcon.propertyView({ label: "Icon" })} + {children.hamburgerIcon.propertyView({ label: "MenuIcon" })} + {children.drawerCloseIcon.propertyView({ label: "Close Icon" })} {children.hamburgerPosition.propertyView({ label: "Hamburger Position" })} {children.hamburgerSize.propertyView({ label: "Hamburger Size" })} {children.drawerPlacement.propertyView({ label: "Drawer Placement" })} @@ -467,6 +489,7 @@ let MobileTabLayoutTmp = (function () { // Mode & hamburger/drawer config menuMode: dropdownControl(MobileModeOptions, MobileMode.Vertical), hamburgerIcon: IconControl, + drawerCloseIcon: IconControl, hamburgerPosition: dropdownControl(HamburgerPositionOptions, "bottom-right"), hamburgerSize: withDefault(StringControl, "56px"), drawerPlacement: dropdownControl(DrawerPlacementOptions, "bottom"), @@ -539,6 +562,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const hamburgerPosition = comp.children.hamburgerPosition.getView(); const hamburgerSize = comp.children.hamburgerSize.getView(); const hamburgerIconComp = comp.children.hamburgerIcon; + const drawerCloseIconComp = comp.children.drawerCloseIcon; const drawerPlacement = comp.children.drawerPlacement.getView(); const drawerHeight = comp.children.drawerHeight.getView(); const drawerWidth = comp.children.drawerWidth.getView(); @@ -684,6 +708,17 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { bodyStyle={drawerBodyStyle} > + + setDrawerVisible(false)} + > + {drawerCloseIconComp.toJsonValue() + ? drawerCloseIconComp.getView() + : ×} + + Date: Wed, 5 Nov 2025 19:37:27 +0500 Subject: [PATCH 37/54] add style customization for hamburger menu mode --- .../comps/comps/layout/mobileTabLayout.tsx | 120 ++++++++++++++---- .../comps/controls/styleControlConstants.tsx | 24 ++++ 2 files changed, 117 insertions(+), 27 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index 1d498be4f..5073dddc9 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -20,7 +20,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl"; import { DataOption, DataOptionType, menuItemStyleOptions, mobileNavJsonMenuItems, MobileModeOptions, MobileMode, HamburgerPositionOptions, DrawerPlacementOptions } from "./navLayoutConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; -import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { HamburgerButtonStyle, DrawerContainerStyle, NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; import Segmented from "antd/es/segmented"; import { controlItem } from "components/control"; import { check } from "@lowcoder-ee/util/convertUtils"; @@ -72,15 +72,23 @@ const HamburgerButton = styled.button<{ $size: string; $position: string; // bottom-right | bottom-left | top-right | top-left $zIndex: number; + $background?: string; + $borderColor?: string; + $radius?: string; + $margin?: string; + $padding?: string; + $borderWidth?: string; }>` position: fixed; ${(props) => (props.$position.includes('bottom') ? 'bottom: 16px;' : 'top: 16px;')} ${(props) => (props.$position.includes('right') ? 'right: 16px;' : 'left: 16px;')} width: ${(props) => props.$size}; height: ${(props) => props.$size}; - border-radius: 50%; - border: 1px solid rgba(0,0,0,0.1); - background: white; + border-radius: ${(props) => props.$radius || '50%'}; + border: ${(props) => props.$borderWidth || '1px'} solid ${(props) => props.$borderColor || 'rgba(0,0,0,0.1)'}; + background: ${(props) => props.$background || 'white'}; + margin: ${(props) => props.$margin || '0px'}; + padding: ${(props) => props.$padding || '0px'}; display: flex; align-items: center; justify-content: center; @@ -108,16 +116,34 @@ const BurgerIcon = styled.div<{ &::after { top: 6px; } `; +const IconWrapper = styled.div<{ + $iconColor?: string; +}>` + display: inline-flex; + align-items: center; + justify-content: center; + svg { + color: ${(p) => p.$iconColor || 'inherit'}; + fill: ${(p) => p.$iconColor || 'currentColor'}; + } +`; + const DrawerContent = styled.div<{ $background: string; + $padding?: string; + $borderColor?: string; + $borderWidth?: string; + $margin?: string; }>` background: ${(p) => p.$background}; width: 100%; height: 100%; display: flex; flex-direction: column; - padding: 12px; + padding: ${(p) => p.$padding || '12px'}; + margin: ${(p) => p.$margin || '0px'}; box-sizing: border-box; + border: ${(p) => p.$borderWidth || '1px'} solid ${(p) => p.$borderColor || 'transparent'}; `; const DrawerHeader = styled.div` @@ -425,7 +451,7 @@ function renderHamburgerLayoutSection(children: any): any { const drawerPlacement = children.drawerPlacement.getView(); return ( <> - {children.hamburgerIcon.propertyView({ label: "MenuIcon" })} + {children.hamburgerIcon.propertyView({ label: "Menu Icon" })} {children.drawerCloseIcon.propertyView({ label: "Close Icon" })} {children.hamburgerPosition.propertyView({ label: "Hamburger Position" })} {children.hamburgerSize.propertyView({ label: "Hamburger Size" })} @@ -462,6 +488,8 @@ function renderVerticalLayoutSection(children: any): any { ); } + + let MobileTabLayoutTmp = (function () { const childrenMap = { onEvent: eventHandlerControl(EventOptions), @@ -492,7 +520,7 @@ let MobileTabLayoutTmp = (function () { drawerCloseIcon: IconControl, hamburgerPosition: dropdownControl(HamburgerPositionOptions, "bottom-right"), hamburgerSize: withDefault(StringControl, "56px"), - drawerPlacement: dropdownControl(DrawerPlacementOptions, "bottom"), + drawerPlacement: dropdownControl(DrawerPlacementOptions, "right"), drawerHeight: withDefault(StringControl, "60%"), drawerWidth: withDefault(StringControl, "250px"), shadowOverlay: withDefault(BoolCodeControl, true), @@ -506,6 +534,8 @@ let MobileTabLayoutTmp = (function () { navItemStyle: styleControl(NavLayoutItemStyle, 'navItemStyle'), navItemHoverStyle: styleControl(NavLayoutItemHoverStyle, 'navItemHoverStyle'), navItemActiveStyle: styleControl(NavLayoutItemActiveStyle, 'navItemActiveStyle'), + hamburgerButtonStyle: styleControl(HamburgerButtonStyle, 'hamburgerButtonStyle'), + drawerContainerStyle: styleControl(DrawerContainerStyle, 'drawerContainerStyle'), }; return new MultiCompBuilder(childrenMap, (props, dispatch) => { return null; @@ -524,10 +554,18 @@ let MobileTabLayoutTmp = (function () { ? renderHamburgerLayoutSection(children) : renderVerticalLayoutSection(children)} -
- {children.navStyle.getPropertyView()} -
-
+ {!isHamburgerMode && ( +
+ {children.navStyle.getPropertyView()} +
+ )} + + {isHamburgerMode && ( +
+ {children.hamburgerButtonStyle.getPropertyView()} +
+ )} +
{controlItem({}, ( + {isHamburgerMode && ( +
+ {children.drawerContainerStyle.getPropertyView()} +
+ )} ); }) @@ -563,6 +606,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const hamburgerSize = comp.children.hamburgerSize.getView(); const hamburgerIconComp = comp.children.hamburgerIcon; const drawerCloseIconComp = comp.children.drawerCloseIcon; + const hamburgerButtonStyle = comp.children.hamburgerButtonStyle.getView(); const drawerPlacement = comp.children.drawerPlacement.getView(); const drawerHeight = comp.children.drawerHeight.getView(); const drawerWidth = comp.children.drawerWidth.getView(); @@ -572,6 +616,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const maxWidth = comp.children.maxWidth.getView(); const verticalAlignment = comp.children.verticalAlignment.getView(); const showSeparator = comp.children.showSeparator.getView(); + const drawerContainerStyle = comp.children.drawerContainerStyle.getView(); const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas; const onEvent = comp.children.onEvent.getView(); @@ -626,6 +671,21 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { backgroundStyle = `center / cover url('${backgroundImage}') no-repeat, ${backgroundStyle}`; } + const navigateToApp = (nextIndex: number) => { + if (dataOptionType === DataOption.Manual) { + const selectedTab = tabViews[nextIndex]; + if (selectedTab) { + const url = [ + ALL_APPLICATIONS_URL, + pathParam.applicationId, + pathParam.viewMode, + nextIndex, + ].join("/"); + selectedTab.children.action.act(url); + } + } + }; + const tabBarView = ( { const nextIndex = Number(key); setTabIndex(nextIndex); // push URL with query/hash params - if (dataOptionType === DataOption.Manual) { - const selectedTab = tabViews[nextIndex]; - if (selectedTab) { - const url = [ - ALL_APPLICATIONS_URL, - pathParam.applicationId, - pathParam.viewMode, - nextIndex, - ].join("/"); - selectedTab.children.action.act(url); - } - } + navigateToApp(nextIndex); }} readOnly={!!readOnly} canvasBg={bgColor} @@ -682,11 +731,21 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { $size={hamburgerSize} $position={hamburgerPosition} $zIndex={Layers.tabBar + 1} + $background={hamburgerButtonStyle?.background} + $borderColor={hamburgerButtonStyle?.border} + $radius={hamburgerButtonStyle?.radius} + $margin={hamburgerButtonStyle?.margin} + $padding={hamburgerButtonStyle?.padding} + $borderWidth={hamburgerButtonStyle?.borderWidth} onClick={() => setDrawerVisible(true)} > - {hamburgerIconComp.toJsonValue() - ? hamburgerIconComp.getView() - : } + {hamburgerIconComp.toJsonValue() ? ( + + {hamburgerIconComp.getView()} + + ) : ( + + )} ); @@ -707,7 +766,13 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { mask={shadowOverlay} bodyStyle={drawerBodyStyle} > - + { setTabIndex(index); setDrawerVisible(false); onEvent('click'); + navigateToApp(index); }} > {tab.children.icon.toJsonValue() ? ( diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 569ada9c4..175448bf3 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1382,6 +1382,30 @@ export const FloatButtonStyle = [ BORDER_WIDTH, ] as const; +export const HamburgerButtonStyle = [ + getBackground(), + { + name: "iconFill", + label: trans("style.fill"), + depTheme: "primary", + depType: DEP_TYPE.SELF, + transformer: toSelf, + }, + MARGIN, + PADDING, + BORDER, + RADIUS, + BORDER_WIDTH, +] as const; + +export const DrawerContainerStyle = [ + getBackground(), + MARGIN, + PADDING, + BORDER, + BORDER_WIDTH, +] as const; + export const TransferStyle = [ getStaticBackground(SURFACE_COLOR), ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(style=>style.name!=='rotation'), From b2254a0656ce7808962820295fa56ee9ddfbe63c Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 5 Nov 2025 22:40:14 +0500 Subject: [PATCH 38/54] fix scroll issue for the nav apps propertyview --- .../packages/lowcoder/src/pages/editor/right/PropertyView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx b/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx index f5e90bd7b..f051a2898 100644 --- a/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx +++ b/client/packages/lowcoder/src/pages/editor/right/PropertyView.tsx @@ -26,7 +26,7 @@ export default function PropertyView(props: PropertyViewProps) { let propertyView; if (selectedComp) { - return <>{selectedComp.getPropertyView()}; + propertyView = selectedComp.getPropertyView(); } else if (selectedCompNames.size > 1) { propertyView = ( Date: Thu, 6 Nov 2025 18:31:10 +0500 Subject: [PATCH 39/54] [Fix]: navigation apps render inside the preview --- client/packages/lowcoder/src/pages/editor/editorView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx index c722f907f..a6ae58db3 100644 --- a/client/packages/lowcoder/src/pages/editor/editorView.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx @@ -270,6 +270,7 @@ const DeviceWrapperInner = styled(Flex)` > div:first-child { > div:first-child { > div:nth-child(2) { + contain: paint; display: block !important; overflow: hidden auto !important; } From 2a8295566b56ddb1284ecc855209773893317d78 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 6 Nov 2025 21:05:18 +0500 Subject: [PATCH 40/54] [Fix]: render the drawer inside the preivew/app canvas --- .../comps/comps/layout/mobileTabLayout.tsx | 43 ++++++++++++------- .../lowcoder/src/constants/domLocators.ts | 1 + .../lowcoder/src/pages/editor/editorView.tsx | 7 ++- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index 5073dddc9..dfe9539af 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -5,13 +5,14 @@ import { manualOptionsControl } from "comps/controls/optionsControl"; import { BoolCodeControl, StringControl, jsonControl, NumberControl } from "comps/controls/codeControl"; import { IconControl } from "comps/controls/iconControl"; import styled from "styled-components"; -import React, { Suspense, useContext, useEffect, useMemo, useState } from "react"; +import React, { Suspense, useContext, useEffect, useMemo, useState, useCallback } from "react"; import { registerLayoutMap } from "comps/comps/uiComp"; import { AppSelectComp } from "comps/comps/layout/appSelectComp"; import { NameAndExposingInfo } from "comps/utils/exposingTypes"; import { ConstructorToComp, ConstructorToDataType } from "lowcoder-core"; import { CanvasContainer } from "comps/comps/gridLayoutComp/canvasView"; import { CanvasContainerID } from "constants/domLocators"; +import { PreviewContainerID } from "constants/domLocators"; import { EditorContainer, EmptyContent } from "pages/common/styledComponent"; import { Layers } from "constants/Layers"; import { ExternalEditorContext } from "util/context/ExternalEditorContext"; @@ -30,6 +31,7 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext"; import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; +import { Drawer } from "lowcoder-design"; import { LayoutActionComp } from "./layoutActionComp"; import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; @@ -43,7 +45,6 @@ const TabBarItem = React.lazy(() => default: module.TabBarItem, })) ); -const Popup = React.lazy(() => import("antd-mobile/es/components/popup")); const EventOptions = [clickEvent] as const; const AppViewContainer = styled.div` @@ -620,6 +621,13 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas; const onEvent = comp.children.onEvent.getView(); + const getContainer = useCallback(() => + document.querySelector(`#${PreviewContainerID}`) || + document.querySelector(`#${CanvasContainerID}`) || + document.body, + [] + ); + useEffect(() => { comp.children.jsonTabs.dispatchChangeValueAction({ manual: jsonItems as unknown as Array> @@ -749,22 +757,27 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { ); - const drawerBodyStyle = useMemo(() => { - if (drawerPlacement === 'left' || drawerPlacement === 'right') { - return { width: drawerWidth } as React.CSSProperties; - } - return { height: drawerHeight } as React.CSSProperties; - }, [drawerPlacement, drawerHeight, drawerWidth]); - const drawerView = ( }> - setDrawerVisible(false)} + setDrawerVisible(false)} - position={drawerPlacement as any} + placement={drawerPlacement as any} mask={shadowOverlay} - bodyStyle={drawerBodyStyle} + maskClosable={true} + closable={false} + styles={{ body: { padding: 0 } } as any} + getContainer={getContainer} + width={ + (drawerPlacement === 'left' || drawerPlacement === 'right') + ? (drawerWidth as any) + : undefined + } + height={ + (drawerPlacement === 'top' || drawerPlacement === 'bottom') + ? (drawerHeight as any) + : undefined + } > { ))} - + ); diff --git a/client/packages/lowcoder/src/constants/domLocators.ts b/client/packages/lowcoder/src/constants/domLocators.ts index b3d1709a5..2fefcb5f1 100644 --- a/client/packages/lowcoder/src/constants/domLocators.ts +++ b/client/packages/lowcoder/src/constants/domLocators.ts @@ -1,2 +1,3 @@ export const CanvasContainerID = "__canvas_container__"; export const CodeEditorTooltipContainerID = "__code_editor_tooltip__"; +export const PreviewContainerID = "__preview_container__"; diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx index a6ae58db3..a60f9f0ef 100644 --- a/client/packages/lowcoder/src/pages/editor/editorView.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx @@ -64,6 +64,7 @@ import { isEqual, noop } from "lodash"; import { AppSettingContext, AppSettingType } from "@lowcoder-ee/comps/utils/appSettingContext"; import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors"; import Flex from "antd/es/flex"; +import { PreviewContainerID } from "constants/domLocators"; // import { BottomSkeleton } from "./bottom/BottomContent"; const Header = lazy( @@ -534,10 +535,12 @@ function EditorView(props: EditorViewProps) { deviceType={editorState.deviceType} deviceOrientation={editorState.deviceOrientation} > - {uiComp.getView()} +
+ {uiComp.getView()} +
) : ( -
+
{uiComp.getView()}
) From 1ceefdb0ed02713bb54ce83fd8ee09fb1a74f582 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 7 Nov 2025 19:45:34 +0500 Subject: [PATCH 41/54] add navigation component burger mode --- .../src/comps/comps/navComp/navComp.tsx | 199 ++++++++++++++++-- 1 file changed, 176 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 670f4bba9..27ea11677 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -5,26 +5,34 @@ import { Section, sectionNames } from "lowcoder-design"; import styled from "styled-components"; import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; import { alignWithJustifyControl } from "comps/controls/alignControl"; import { navListComp } from "./navItemComp"; import { menuPropertyView } from "./components/MenuItemList"; import { default as DownOutlined } from "@ant-design/icons/DownOutlined"; +import { default as MenuOutlined } from "@ant-design/icons/MenuOutlined"; import { default as Dropdown } from "antd/es/dropdown"; import { default as Menu, MenuProps } from "antd/es/menu"; +import { default as Drawer } from "antd/es/drawer"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, NavigationStyle, + HamburgerButtonStyle, + DrawerContainerStyle, + NavLayoutItemStyle, + NavLayoutItemHoverStyle, + NavLayoutItemActiveStyle, } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; -import { useContext } from "react"; +import { useContext, useState } from "react"; import { EditorContext } from "comps/editorState"; -import { controlItem } from "lowcoder-design"; import { createNavItemsControl } from "./components/NavItemsControl"; +import { Layers } from "constants/Layers"; type IProps = { $justify: boolean; @@ -34,6 +42,7 @@ type IProps = { $borderRadius: string; $borderStyle: string; $animationStyle: AnimationStyleType; + $orientation: "horizontal" | "vertical"; }; const Wrapper = styled("div")< @@ -45,18 +54,21 @@ ${props=>props.$animationStyle} box-sizing: border-box; border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} ${props=>props.$borderStyle} ${(props) => props.$borderColor}; background: ${(props) => props.$bgColor}; + position: relative; `; -const NavInner = styled("div") >` +const NavInner = styled("div") >` // margin: 0 -16px; height: 100%; display: flex; - justify-content: ${(props) => (props.$justify ? "space-between" : "left")}; + flex-direction: ${(props) => (props.$orientation === "vertical" ? "column" : "row")}; + justify-content: ${(props) => (props.$orientation === "vertical" ? "flex-start" : (props.$justify ? "space-between" : "left"))}; `; const Item = styled.div<{ $active: boolean; $activeColor: string; + $hoverColor: string; $color: string; $fontFamily: string; $fontStyle: string; @@ -66,12 +78,22 @@ const Item = styled.div<{ $padding: string; $textTransform:string; $textDecoration:string; + $bg?: string; + $hoverBg?: string; + $activeBg?: string; + $border?: string; + $hoverBorder?: string; + $activeBorder?: string; + $radius?: string; $disabled?: boolean; }>` height: 30px; line-height: 30px; padding: ${(props) => props.$padding ? props.$padding : '0 16px'}; color: ${(props) => props.$disabled ? `${props.$color}80` : (props.$active ? props.$activeColor : props.$color)}; + background-color: ${(props) => (props.$active ? (props.$activeBg || 'transparent') : (props.$bg || 'transparent'))}; + border: ${(props) => props.$border ? `1px solid ${props.$border}` : '1px solid transparent'}; + border-radius: ${(props) => props.$radius ? props.$radius : '0px'}; font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)}; font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')}; font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')}; @@ -81,7 +103,9 @@ const Item = styled.div<{ margin:${(props) => props.$margin ? props.$margin : '0px'}; &:hover { - color: ${(props) => props.$disabled ? (props.$active ? props.$activeColor : props.$color) : props.$activeColor}; + color: ${(props) => props.$disabled ? (props.$active ? props.$activeColor : props.$color) : (props.$hoverColor || props.$activeColor)}; + background-color: ${(props) => props.$disabled ? (props.$active ? (props.$activeBg || 'transparent') : (props.$bg || 'transparent')) : (props.$hoverBg || props.$activeBg || props.$bg || 'transparent')}; + border: ${(props) => props.$hoverBorder ? `1px solid ${props.$hoverBorder}` : (props.$activeBorder ? `1px solid ${props.$activeBorder}` : (props.$border ? `1px solid ${props.$border}` : '1px solid transparent'))}; cursor: ${(props) => props.$disabled ? 'not-allowed' : 'pointer'}; } @@ -101,10 +125,10 @@ const LogoWrapper = styled.div` } `; -const ItemList = styled.div<{ $align: string }>` +const ItemList = styled.div<{ $align: string, $orientation?: string }>` flex: 1; display: flex; - flex-direction: row; + flex-direction: ${(props) => (props.$orientation === "vertical" ? "column" : "row")}; justify-content: ${(props) => props.$align}; `; @@ -114,6 +138,37 @@ const StyledMenu = styled(Menu) ` } `; +const FloatingHamburgerButton = styled.button<{ + $size: string; + $position: string; // top-right | top-left | bottom-right | bottom-left + $zIndex: number; + $background?: string; + $borderColor?: string; + $radius?: string; + $margin?: string; + $padding?: string; + $borderWidth?: string; + $iconColor?: string; +}>` + position: fixed; + ${(props) => (props.$position.includes('bottom') ? 'bottom: 16px;' : 'top: 16px;')} + ${(props) => (props.$position.includes('right') ? 'right: 16px;' : 'left: 16px;')} + width: ${(props) => props.$size}; + height: ${(props) => props.$size}; + border-radius: ${(props) => props.$radius || '50%'}; + border: ${(props) => props.$borderWidth || '1px'} solid ${(props) => props.$borderColor || 'rgba(0,0,0,0.1)'}; + background: ${(props) => props.$background || 'white'}; + margin: ${(props) => props.$margin || '0px'}; + padding: ${(props) => props.$padding || '0px'}; + display: flex; + align-items: center; + justify-content: center; + z-index: ${(props) => props.$zIndex}; + cursor: pointer; + box-shadow: 0 6px 16px rgba(0,0,0,0.15); + color: ${(props) => props.$iconColor || 'inherit'}; +`; + const logoEventHandlers = [clickEvent]; // Compatible with historical style data 2022-8-26 @@ -154,8 +209,33 @@ function fixOldItemsData(oldData: any) { const childrenMap = { logoUrl: StringControl, logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]), + orientation: dropdownControl([ + { label: "Horizontal", value: "horizontal" }, + { label: "Vertical", value: "vertical" }, + ], "horizontal"), + displayMode: dropdownControl([ + { label: "Bar", value: "bar" }, + { label: "Hamburger", value: "hamburger" }, + ], "bar"), + hamburgerPosition: dropdownControl([ + { label: "Top Right", value: "top-right" }, + { label: "Top Left", value: "top-left" }, + { label: "Bottom Right", value: "bottom-right" }, + { label: "Bottom Left", value: "bottom-left" }, + ], "top-right"), + hamburgerSize: withDefault(StringControl, "56px"), + drawerPlacement: dropdownControl([ + { label: "Left", value: "left" }, + { label: "Right", value: "right" }, + ], "right"), + shadowOverlay: withDefault(BoolCodeControl, true), horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData), + navItemStyle: styleControl(NavLayoutItemStyle, 'navItemStyle'), + navItemHoverStyle: styleControl(NavLayoutItemHoverStyle, 'navItemHoverStyle'), + navItemActiveStyle: styleControl(NavLayoutItemActiveStyle, 'navItemActiveStyle'), + hamburgerButtonStyle: styleControl(HamburgerButtonStyle, 'hamburgerButtonStyle'), + drawerContainerStyle: styleControl(DrawerContainerStyle, 'drawerContainerStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), { optionType: "manual", @@ -168,6 +248,7 @@ const childrenMap = { }; const NavCompBase = new UICompBuilder(childrenMap, (props) => { + const [drawerVisible, setDrawerVisible] = useState(false); const data = props.items; const items = ( <> @@ -207,16 +288,24 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { 0} - $color={props.style.text} - $activeColor={props.style.accent} + $color={(props.navItemStyle && props.navItemStyle.text) || props.style.text} + $hoverColor={(props.navItemHoverStyle && props.navItemHoverStyle.text) || props.style.accent} + $activeColor={(props.navItemActiveStyle && props.navItemActiveStyle.text) || props.style.accent} $fontFamily={props.style.fontFamily} $fontStyle={props.style.fontStyle} $textWeight={props.style.textWeight} $textSize={props.style.textSize} - $padding={props.style.padding} + $padding={(props.navItemStyle && props.navItemStyle.padding) || props.style.padding} $textTransform={props.style.textTransform} $textDecoration={props.style.textDecoration} - $margin={props.style.margin} + $margin={(props.navItemStyle && props.navItemStyle.margin) || props.style.margin} + $bg={(props.navItemStyle && props.navItemStyle.background) || undefined} + $hoverBg={(props.navItemHoverStyle && props.navItemHoverStyle.background) || undefined} + $activeBg={(props.navItemActiveStyle && props.navItemActiveStyle.background) || undefined} + $border={(props.navItemStyle && props.navItemStyle.border) || undefined} + $hoverBorder={(props.navItemHoverStyle && props.navItemHoverStyle.border) || undefined} + $activeBorder={(props.navItemActiveStyle && props.navItemActiveStyle.border) || undefined} + $radius={(props.navItemStyle && props.navItemStyle.radius) || undefined} $disabled={disabled} onClick={() => { if (!disabled && onEvent) onEvent("click"); }} > @@ -255,6 +344,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { ); const justify = props.horizontalAlignment === "justify"; + const isVertical = props.orientation === "vertical"; + const isHamburger = props.displayMode === "hamburger"; return ( { $borderWidth={props.style.borderWidth} $borderRadius={props.style.radius} > - - {props.logoUrl && ( - props.logoEvent("click")}> - LOGO - - )} - {!justify ? {items} : items} - + {!isHamburger && ( + + {props.logoUrl && ( + props.logoEvent("click")}> + LOGO + + )} + {!justify ? {items} : items} + + )} + {isHamburger && ( + <> + setDrawerVisible(true)} + > + + + setDrawerVisible(false)} + open={drawerVisible} + mask={props.shadowOverlay} + styles={{ body: { padding: "8px", background: props.drawerContainerStyle?.background } }} + destroyOnClose + > + {items} + + + )} ); }) @@ -292,10 +415,21 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- {children.horizontalAlignment.propertyView({ - label: trans("navigation.horizontalAlignment"), - radioButton: true, - })} + {children.orientation.propertyView({ label: "Orientation", radioButton: true })} + {children.displayMode.propertyView({ label: "Display Mode", radioButton: true })} + {children.displayMode.getView() === 'hamburger' ? ( + [ + children.hamburgerPosition.propertyView({ label: "Hamburger Position" }), + children.hamburgerSize.propertyView({ label: "Hamburger Size" }), + children.drawerPlacement.propertyView({ label: "Drawer Placement", radioButton: true }), + children.shadowOverlay.propertyView({ label: "Shadow Overlay" }), + ] + ) : ( + children.horizontalAlignment.propertyView({ + label: trans("navigation.horizontalAlignment"), + radioButton: true, + }) + )} {hiddenPropertyView(children)}
)} @@ -313,6 +447,25 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
+
+ {children.navItemStyle.getPropertyView()} +
+
+ {children.navItemHoverStyle.getPropertyView()} +
+
+ {children.navItemActiveStyle.getPropertyView()} +
+ {children.displayMode.getView() === 'hamburger' && ( + <> +
+ {children.hamburgerButtonStyle.getPropertyView()} +
+
+ {children.drawerContainerStyle.getPropertyView()} +
+ + )}
{children.animationStyle.getPropertyView()}
From 795c181f80ce2b6bf3e08ea65492801cda930ba2 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 10 Nov 2025 17:25:28 +0500 Subject: [PATCH 42/54] refactor navigation component --- .../src/comps/comps/navComp/navComp.tsx | 165 ++++++++++-------- 1 file changed, 96 insertions(+), 69 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 27ea11677..6d4b87288 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -206,6 +206,93 @@ function fixOldItemsData(oldData: any) { return oldData; } +// Property View Helpers +function renderBasicSection(children: any) { + return ( +
+ {children.items.propertyView()} +
+ ); +} + +function renderInteractionSection(children: any) { + return ( +
+ {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} +
+ ); +} + +function renderLayoutSection(children: any) { + const isHamburger = children.displayMode.getView() === 'hamburger'; + const common = [ + children.orientation.propertyView({ label: "Orientation", radioButton: true }), + children.displayMode.propertyView({ label: "Display Mode", radioButton: true }), + ]; + const hamburger = [ + ...common, + children.hamburgerPosition.propertyView({ label: "Hamburger Position" }), + children.hamburgerSize.propertyView({ label: "Hamburger Size" }), + children.drawerPlacement.propertyView({ label: "Drawer Placement", radioButton: true }), + children.shadowOverlay.propertyView({ label: "Shadow Overlay" }), + ]; + const bar = [ + ...common, + children.horizontalAlignment.propertyView({ + label: trans("navigation.horizontalAlignment"), + radioButton: true, + }), + ]; + + return ( +
+ {isHamburger ? hamburger : bar} +
+ ); +} + +function renderAdvancedSection(children: any) { + return ( +
+ {children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })} + {children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })} +
+ ); +} + +function renderStyleSections(children: any) { + return ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.navItemStyle.getPropertyView()} +
+
+ {children.navItemHoverStyle.getPropertyView()} +
+
+ {children.navItemActiveStyle.getPropertyView()} +
+ {children.displayMode.getView() === 'hamburger' && ( + <> +
+ {children.hamburgerButtonStyle.getPropertyView()} +
+
+ {children.drawerContainerStyle.getPropertyView()} +
+ + )} +
+ {children.animationStyle.getPropertyView()} +
+ + ); +} + const childrenMap = { logoUrl: StringControl, logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]), @@ -400,77 +487,17 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { ); }) .setPropertyViewFn((children) => { + const mode = useContext(EditorContext).editorModeStatus; + const showLogic = mode === "logic" || mode === "both"; + const showLayout = mode === "layout" || mode === "both"; + return ( <> -
- {children.items.propertyView()} -
- - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {hiddenPropertyView(children)} - {showDataLoadingIndicatorsPropertyView(children)} -
- )} - - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.orientation.propertyView({ label: "Orientation", radioButton: true })} - {children.displayMode.propertyView({ label: "Display Mode", radioButton: true })} - {children.displayMode.getView() === 'hamburger' ? ( - [ - children.hamburgerPosition.propertyView({ label: "Hamburger Position" }), - children.hamburgerSize.propertyView({ label: "Hamburger Size" }), - children.drawerPlacement.propertyView({ label: "Drawer Placement", radioButton: true }), - children.shadowOverlay.propertyView({ label: "Shadow Overlay" }), - ] - ) : ( - children.horizontalAlignment.propertyView({ - label: trans("navigation.horizontalAlignment"), - radioButton: true, - }) - )} - {hiddenPropertyView(children)} -
- )} - - {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })} - {children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })} -
- )} - - {(useContext(EditorContext).editorModeStatus === "layout" || - useContext(EditorContext).editorModeStatus === "both") && ( - <> -
- {children.style.getPropertyView()} -
-
- {children.navItemStyle.getPropertyView()} -
-
- {children.navItemHoverStyle.getPropertyView()} -
-
- {children.navItemActiveStyle.getPropertyView()} -
- {children.displayMode.getView() === 'hamburger' && ( - <> -
- {children.hamburgerButtonStyle.getPropertyView()} -
-
- {children.drawerContainerStyle.getPropertyView()} -
- - )} -
- {children.animationStyle.getPropertyView()} -
- - )} + {renderBasicSection(children)} + {showLogic && renderInteractionSection(children)} + {showLayout && renderLayoutSection(children)} + {showLogic && renderAdvancedSection(children)} + {showLayout && renderStyleSections(children)} ); }) From 0d2d8e40783762d0f55619401ab161500fec8821 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 10 Nov 2025 18:25:16 +0500 Subject: [PATCH 43/54] make drawer placement control consistent --- .../src/comps/comps/navComp/navComp.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 6d4b87288..d7123c322 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -5,7 +5,7 @@ import { Section, sectionNames } from "lowcoder-design"; import styled from "styled-components"; import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; -import { dropdownControl } from "comps/controls/dropdownControl"; +import { dropdownControl, PositionControl } from "comps/controls/dropdownControl"; import { alignWithJustifyControl } from "comps/controls/alignControl"; import { navListComp } from "./navItemComp"; import { menuPropertyView } from "./components/MenuItemList"; @@ -29,10 +29,11 @@ import { import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; -import { useContext, useState } from "react"; +import { useContext, useState, useCallback } from "react"; import { EditorContext } from "comps/editorState"; import { createNavItemsControl } from "./components/NavItemsControl"; import { Layers } from "constants/Layers"; +import { CanvasContainerID } from "constants/domLocators"; type IProps = { $justify: boolean; @@ -234,7 +235,7 @@ function renderLayoutSection(children: any) { ...common, children.hamburgerPosition.propertyView({ label: "Hamburger Position" }), children.hamburgerSize.propertyView({ label: "Hamburger Size" }), - children.drawerPlacement.propertyView({ label: "Drawer Placement", radioButton: true }), + children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true }), children.shadowOverlay.propertyView({ label: "Shadow Overlay" }), ]; const bar = [ @@ -311,10 +312,7 @@ const childrenMap = { { label: "Bottom Left", value: "bottom-left" }, ], "top-right"), hamburgerSize: withDefault(StringControl, "56px"), - drawerPlacement: dropdownControl([ - { label: "Left", value: "left" }, - { label: "Right", value: "right" }, - ], "right"), + placement: PositionControl, shadowOverlay: withDefault(BoolCodeControl, true), horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData), @@ -336,6 +334,10 @@ const childrenMap = { const NavCompBase = new UICompBuilder(childrenMap, (props) => { const [drawerVisible, setDrawerVisible] = useState(false); + const getContainer = useCallback(() => + document.querySelector(`#${CanvasContainerID}`) || document.body, + [] + ); const data = props.items; const items = ( <> @@ -471,11 +473,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { setDrawerVisible(false)} open={drawerVisible} mask={props.shadowOverlay} + getContainer={getContainer} styles={{ body: { padding: "8px", background: props.drawerContainerStyle?.background } }} destroyOnClose > From 5addc3273c20df542a03f6e6a8856b3bd5460bc7 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 10 Nov 2025 18:26:10 +0500 Subject: [PATCH 44/54] fix hamburger menu options --- .../src/comps/comps/navComp/navComp.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index d7123c322..5234096a8 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -141,7 +141,7 @@ const StyledMenu = styled(Menu) ` const FloatingHamburgerButton = styled.button<{ $size: string; - $position: string; // top-right | top-left | bottom-right | bottom-left + $position: string; // left | right $zIndex: number; $background?: string; $borderColor?: string; @@ -152,8 +152,8 @@ const FloatingHamburgerButton = styled.button<{ $iconColor?: string; }>` position: fixed; - ${(props) => (props.$position.includes('bottom') ? 'bottom: 16px;' : 'top: 16px;')} - ${(props) => (props.$position.includes('right') ? 'right: 16px;' : 'left: 16px;')} + top: 16px; + ${(props) => (props.$position === 'right' ? 'right: 16px;' : 'left: 16px;')} width: ${(props) => props.$size}; height: ${(props) => props.$size}; border-radius: ${(props) => props.$radius || '50%'}; @@ -233,7 +233,7 @@ function renderLayoutSection(children: any) { ]; const hamburger = [ ...common, - children.hamburgerPosition.propertyView({ label: "Hamburger Position" }), + children.hamburgerPosition.propertyView({ label: "Hamburger Position", radioButton: true }), children.hamburgerSize.propertyView({ label: "Hamburger Size" }), children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true }), children.shadowOverlay.propertyView({ label: "Shadow Overlay" }), @@ -306,11 +306,9 @@ const childrenMap = { { label: "Hamburger", value: "hamburger" }, ], "bar"), hamburgerPosition: dropdownControl([ - { label: "Top Right", value: "top-right" }, - { label: "Top Left", value: "top-left" }, - { label: "Bottom Right", value: "bottom-right" }, - { label: "Bottom Left", value: "bottom-left" }, - ], "top-right"), + { label: "Left", value: "left" }, + { label: "Right", value: "right" }, + ], "right"), hamburgerSize: withDefault(StringControl, "56px"), placement: PositionControl, shadowOverlay: withDefault(BoolCodeControl, true), @@ -459,7 +457,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { <> Date: Mon, 10 Nov 2025 20:11:46 +0500 Subject: [PATCH 45/54] add conditional UI on basis of mode --- .../src/comps/comps/navComp/navComp.tsx | 65 ++++++++++++++----- 1 file changed, 50 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 5234096a8..cc56e3a86 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -16,6 +16,7 @@ import { default as Menu, MenuProps } from "antd/es/menu"; import { default as Drawer } from "antd/es/drawer"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { styleControl } from "comps/controls/styleControl"; +import { IconControl } from "comps/controls/iconControl"; import { AnimationStyle, AnimationStyleType, @@ -34,6 +35,8 @@ import { EditorContext } from "comps/editorState"; import { createNavItemsControl } from "./components/NavItemsControl"; import { Layers } from "constants/Layers"; import { CanvasContainerID } from "constants/domLocators"; +import { isNumeric } from "util/stringUtils"; +import { hasIcon } from "comps/utils"; type IProps = { $justify: boolean; @@ -58,6 +61,13 @@ ${props=>props.$animationStyle} position: relative; `; +const DEFAULT_SIZE = 378; + +// If it is a number, use the px unit by default +function transToPxSize(size: string | number) { + return isNumeric(size) ? size + "px" : (size as string); +} + const NavInner = styled("div") >` // margin: 0 -16px; height: 100%; @@ -228,7 +238,6 @@ function renderInteractionSection(children: any) { function renderLayoutSection(children: any) { const isHamburger = children.displayMode.getView() === 'hamburger'; const common = [ - children.orientation.propertyView({ label: "Orientation", radioButton: true }), children.displayMode.propertyView({ label: "Display Mode", radioButton: true }), ]; const hamburger = [ @@ -236,10 +245,24 @@ function renderLayoutSection(children: any) { children.hamburgerPosition.propertyView({ label: "Hamburger Position", radioButton: true }), children.hamburgerSize.propertyView({ label: "Hamburger Size" }), children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true }), + ...(["top", "bottom"].includes(children.placement.getView()) + ? [children.drawerHeight.propertyView({ + label: trans("drawer.height"), + tooltip: trans("drawer.heightTooltip"), + placeholder: DEFAULT_SIZE + "", + })] + : [children.drawerWidth.propertyView({ + label: trans("drawer.width"), + tooltip: trans("drawer.widthTooltip"), + placeholder: DEFAULT_SIZE + "", + })]), + children.hamburgerIcon.propertyView({ label: "Menu Icon" }), + children.drawerCloseIcon.propertyView({ label: "Close Icon" }), children.shadowOverlay.propertyView({ label: "Shadow Overlay" }), ]; const bar = [ ...common, + children.orientation.propertyView({ label: "Orientation", radioButton: true }), children.horizontalAlignment.propertyView({ label: trans("navigation.horizontalAlignment"), radioButton: true, @@ -263,21 +286,26 @@ function renderAdvancedSection(children: any) { } function renderStyleSections(children: any) { + const isHamburger = children.displayMode.getView() === 'hamburger'; return ( <> -
- {children.style.getPropertyView()} -
-
- {children.navItemStyle.getPropertyView()} -
-
- {children.navItemHoverStyle.getPropertyView()} -
-
- {children.navItemActiveStyle.getPropertyView()} -
- {children.displayMode.getView() === 'hamburger' && ( + {!isHamburger && ( + <> +
+ {children.style.getPropertyView()} +
+
+ {children.navItemStyle.getPropertyView()} +
+
+ {children.navItemHoverStyle.getPropertyView()} +
+
+ {children.navItemActiveStyle.getPropertyView()} +
+ + )} + {isHamburger && ( <>
{children.hamburgerButtonStyle.getPropertyView()} @@ -311,6 +339,10 @@ const childrenMap = { ], "right"), hamburgerSize: withDefault(StringControl, "56px"), placement: PositionControl, + drawerWidth: StringControl, + drawerHeight: StringControl, + hamburgerIcon: withDefault(IconControl, ""), + drawerCloseIcon: withDefault(IconControl, ""), shadowOverlay: withDefault(BoolCodeControl, true), horizontalAlignment: alignWithJustifyControl(), style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData), @@ -468,15 +500,18 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { $iconColor={props.hamburgerButtonStyle?.iconFill} onClick={() => setDrawerVisible(true)} > - + {hasIcon(props.hamburgerIcon) ? props.hamburgerIcon : } setDrawerVisible(false)} open={drawerVisible} mask={props.shadowOverlay} getContainer={getContainer} + width={["left", "right"].includes(props.placement as any) ? transToPxSize(props.drawerWidth || DEFAULT_SIZE) : undefined as any} + height={["top", "bottom"].includes(props.placement as any) ? transToPxSize(props.drawerHeight || DEFAULT_SIZE) : undefined as any} styles={{ body: { padding: "8px", background: props.drawerContainerStyle?.background } }} destroyOnClose > From 5c5d19ba27beb5ffab5376fdff301d51477cf87f Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Mon, 10 Nov 2025 22:31:20 +0500 Subject: [PATCH 46/54] add segmented control for both modes in the navComp --- .../src/comps/comps/navComp/navComp.tsx | 44 ++++++++++++------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index cc56e3a86..5608d7884 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -13,10 +13,12 @@ import { default as DownOutlined } from "@ant-design/icons/DownOutlined"; import { default as MenuOutlined } from "@ant-design/icons/MenuOutlined"; import { default as Dropdown } from "antd/es/dropdown"; import { default as Menu, MenuProps } from "antd/es/menu"; +import Segmented from "antd/es/segmented"; import { default as Drawer } from "antd/es/drawer"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { styleControl } from "comps/controls/styleControl"; import { IconControl } from "comps/controls/iconControl"; +import { controlItem } from "components/control"; import { AnimationStyle, AnimationStyleType, @@ -68,6 +70,13 @@ function transToPxSize(size: string | number) { return isNumeric(size) ? size + "px" : (size as string); } +type MenuItemStyleOptionValue = "normal" | "hover" | "active"; +const menuItemStyleOptions = [ + { label: "Normal", value: "normal" }, + { label: "Hover", value: "hover" }, + { label: "Active", value: "active" }, +] as const; + const NavInner = styled("div") >` // margin: 0 -16px; height: 100%; @@ -285,26 +294,28 @@ function renderAdvancedSection(children: any) { ); } -function renderStyleSections(children: any) { +function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionValue, setStyleSegment: (k: MenuItemStyleOptionValue) => void) { const isHamburger = children.displayMode.getView() === 'hamburger'; return ( <> {!isHamburger && ( - <> -
- {children.style.getPropertyView()} -
-
- {children.navItemStyle.getPropertyView()} -
-
- {children.navItemHoverStyle.getPropertyView()} -
-
- {children.navItemActiveStyle.getPropertyView()} -
- +
+ {children.style.getPropertyView()} +
)} +
+ {controlItem({}, ( + setStyleSegment(k as MenuItemStyleOptionValue)} + /> + ))} + {styleSegment === "normal" && children.navItemStyle.getPropertyView()} + {styleSegment === "hover" && children.navItemHoverStyle.getPropertyView()} + {styleSegment === "active" && children.navItemActiveStyle.getPropertyView()} +
{isHamburger && ( <>
@@ -526,6 +537,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const mode = useContext(EditorContext).editorModeStatus; const showLogic = mode === "logic" || mode === "both"; const showLayout = mode === "layout" || mode === "both"; + const [styleSegment, setStyleSegment] = useState("normal"); return ( <> @@ -533,7 +545,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {showLogic && renderInteractionSection(children)} {showLayout && renderLayoutSection(children)} {showLogic && renderAdvancedSection(children)} - {showLayout && renderStyleSections(children)} + {showLayout && renderStyleSections(children, styleSegment, setStyleSegment)} ); }) From 2eb467519904cb12f31029eff1389901a61009a7 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 11 Nov 2025 16:28:07 +0500 Subject: [PATCH 47/54] add ability to add icon on nav items / sub menu --- .../comps/navComp/components/NavItemsControl.tsx | 3 +++ .../lowcoder/src/comps/comps/navComp/navComp.tsx | 14 ++++++++++---- .../src/comps/comps/navComp/navItemComp.tsx | 6 ++++++ 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx index ee0817b49..752685f78 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx @@ -5,6 +5,7 @@ import { dropdownControl } from "comps/controls/dropdownControl"; import { mapOptionsControl } from "comps/controls/optionsControl"; import { trans } from "i18n"; import { navListComp } from "../navItemComp"; +import { IconControl } from "comps/controls/iconControl"; import { controlItem } from "lowcoder-design"; import { menuPropertyView } from "./MenuItemList"; @@ -17,6 +18,7 @@ export function createNavItemsControl() { const NavMapOption = new MultiCompBuilder( { label: StringControl, + icon: IconControl, hidden: BoolCodeControl, disabled: BoolCodeControl, active: BoolCodeControl, @@ -27,6 +29,7 @@ export function createNavItemsControl() { .setPropertyViewFn((children) => ( <> {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })} + {children.icon.propertyView({ label: trans("icon") })} {children.active.propertyView({ label: trans("navItemComp.active") })} {children.hidden.propertyView({ label: trans("hidden") })} {children.disabled.propertyView({ label: trans("disabled") })} diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 5608d7884..8a42aaa52 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -107,7 +107,6 @@ const Item = styled.div<{ $radius?: string; $disabled?: boolean; }>` - height: 30px; line-height: 30px; padding: ${(props) => props.$padding ? props.$padding : '0 16px'}; color: ${(props) => props.$disabled ? `${props.$color}80` : (props.$active ? props.$activeColor : props.$color)}; @@ -303,7 +302,7 @@ function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionVal {children.style.getPropertyView()}
)} -
+
{controlItem({}, ( { } const label = view?.label; + const icon = hasIcon(view?.icon) ? view.icon : undefined; const active = !!view?.active; const onEvent = view?.onEvent; const disabled = !!view?.disabled; const subItems = isCompItem ? view?.items : []; - const subMenuItems: Array<{ key: string; label: any; disabled?: boolean }> = []; + const subMenuItems: Array<{ key: string; label: any; icon?: any; disabled?: boolean }> = []; const subMenuSelectedKeys: Array = []; if (Array.isArray(subItems)) { @@ -406,9 +406,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { } const key = originalIndex + ""; subItem.children.active.getView() && subMenuSelectedKeys.push(key); + const subIcon = hasIcon(subItem.children.icon?.getView?.()) ? subItem.children.icon.getView() : undefined; subMenuItems.push({ key: key, label: subItem.children.label.getView(), + icon: subIcon, disabled: !!subItem.children.disabled.getView(), }); }); @@ -439,6 +441,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { $disabled={disabled} onClick={() => { if (!disabled && onEvent) onEvent("click"); }} > + {icon && {icon}} {label} {Array.isArray(subItems) && subItems.length > 0 && } @@ -455,7 +458,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { onSubEvent && onSubEvent("click"); }} selectedKeys={subMenuSelectedKeys} - items={subMenuItems} + items={subMenuItems.map(item => ({ + ...item, + icon: item.icon || undefined, + }))} /> ); return ( diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx index e8ce0f011..6b6458094 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx @@ -8,11 +8,13 @@ import { trans } from "i18n"; import _ from "lodash"; import { fromRecord, MultiBaseComp, Node, RecordNode, RecordNodeToValue } from "lowcoder-core"; import { ReactNode } from "react"; +import { IconControl } from "comps/controls/iconControl"; const events = [clickEvent]; const childrenMap = { label: StringControl, + icon: IconControl, hidden: BoolCodeControl, disabled: BoolCodeControl, active: BoolCodeControl, @@ -29,6 +31,7 @@ const childrenMap = { type ChildrenType = { label: InstanceType; + icon: InstanceType; hidden: InstanceType; disabled: InstanceType; active: InstanceType; @@ -45,6 +48,7 @@ export class NavItemComp extends MultiBaseComp { return ( <> {this.children.label.propertyView({ label: trans("label") })} + {this.children.icon.propertyView({ label: trans("icon") })} {hiddenPropertyView(this.children)} {this.children.active.propertyView({ label: trans("navItemComp.active") })} {disabledPropertyView(this.children)} @@ -71,6 +75,7 @@ export class NavItemComp extends MultiBaseComp { exposingNode(): RecordNode { return fromRecord({ label: this.children.label.exposingNode(), + icon: this.children.icon.exposingNode(), hidden: this.children.hidden.exposingNode(), disabled: this.children.disabled.exposingNode(), active: this.children.active.exposingNode(), @@ -81,6 +86,7 @@ export class NavItemComp extends MultiBaseComp { type NavItemExposing = { label: Node; + icon: Node; hidden: Node; disabled: Node; active: Node; From 7c1837a0b12e7b72732b5a1156c8792d2cf815c5 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 11 Nov 2025 17:12:23 +0500 Subject: [PATCH 48/54] fix drawer styles customization --- .../src/comps/comps/navComp/navComp.tsx | 71 +++++++++++++++++-- 1 file changed, 65 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 8a42aaa52..4d7fd3450 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -14,11 +14,12 @@ import { default as MenuOutlined } from "@ant-design/icons/MenuOutlined"; import { default as Dropdown } from "antd/es/dropdown"; import { default as Menu, MenuProps } from "antd/es/menu"; import Segmented from "antd/es/segmented"; -import { default as Drawer } from "antd/es/drawer"; +import { Drawer } from "lowcoder-design"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { styleControl } from "comps/controls/styleControl"; import { IconControl } from "comps/controls/iconControl"; import { controlItem } from "components/control"; +import { PreviewContainerID } from "constants/domLocators"; import { AnimationStyle, AnimationStyleType, @@ -188,6 +189,45 @@ const FloatingHamburgerButton = styled.button<{ color: ${(props) => props.$iconColor || 'inherit'}; `; +const DrawerContent = styled.div<{ + $background: string; + $padding?: string; + $borderColor?: string; + $borderWidth?: string; + $margin?: string; +}>` + background: ${(p) => p.$background}; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding: ${(p) => p.$padding || '12px'}; + margin: ${(p) => p.$margin || '0px'}; + box-sizing: border-box; + border: ${(p) => p.$borderWidth || '1px'} solid ${(p) => p.$borderColor || 'transparent'}; +`; + +const DrawerHeader = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; +`; + +const DrawerCloseButton = styled.button<{ + $color: string; +}>` + background: transparent; + border: none; + cursor: pointer; + color: ${(p) => p.$color}; + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 16px; +`; + const logoEventHandlers = [clickEvent]; // Compatible with historical style data 2022-8-26 @@ -375,7 +415,7 @@ const childrenMap = { const NavCompBase = new UICompBuilder(childrenMap, (props) => { const [drawerVisible, setDrawerVisible] = useState(false); const getContainer = useCallback(() => - document.querySelector(`#${CanvasContainerID}`) || document.body, + document.querySelector(`#${CanvasContainerID}`) || document.querySelector(`#${PreviewContainerID}`) || document.body, [] ); const data = props.items; @@ -521,18 +561,37 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { setDrawerVisible(false)} open={drawerVisible} mask={props.shadowOverlay} + maskClosable={true} + closable={false} getContainer={getContainer} width={["left", "right"].includes(props.placement as any) ? transToPxSize(props.drawerWidth || DEFAULT_SIZE) : undefined as any} height={["top", "bottom"].includes(props.placement as any) ? transToPxSize(props.drawerHeight || DEFAULT_SIZE) : undefined as any} - styles={{ body: { padding: "8px", background: props.drawerContainerStyle?.background } }} + styles={{ body: { padding: 0 } }} destroyOnClose > - {items} + + + setDrawerVisible(false)} + > + {hasIcon(props.drawerCloseIcon) + ? props.drawerCloseIcon + : ×} + + + {items} + )} From 978c641898965659437c0044b654e47d40ddd82a Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 11 Nov 2025 20:44:56 +0500 Subject: [PATCH 49/54] add styles for the submenu --- .../src/components/Dropdown.tsx | 10 -- .../src/comps/comps/navComp/navComp.tsx | 107 +++++++++++++++++- .../comps/controls/styleControlConstants.tsx | 43 +++++++ 3 files changed, 145 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx index b2a9d2766..55bd8b830 100644 --- a/client/packages/lowcoder-design/src/components/Dropdown.tsx +++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx @@ -159,16 +159,6 @@ export function Dropdown(props: DropdownProps) { const { placement = "right" } = props; const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option])); - useEffect(() => { - const dropdownElems = document.querySelectorAll("div.ant-dropdown ul.ant-dropdown-menu"); - for (let index = 0; index < dropdownElems.length; index++) { - const element = dropdownElems[index]; - element.style.maxHeight = "300px"; - element.style.overflowY = "scroll"; - element.style.minWidth = "150px"; - element.style.paddingRight = "10px"; - } - }, []); return ( diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 4d7fd3450..e4ae7bba2 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -29,6 +29,9 @@ import { NavLayoutItemStyle, NavLayoutItemHoverStyle, NavLayoutItemActiveStyle, + NavSubMenuItemStyle, + NavSubMenuItemHoverStyle, + NavSubMenuItemActiveStyle, } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -152,9 +155,61 @@ const ItemList = styled.div<{ $align: string, $orientation?: string }>` justify-content: ${(props) => props.$align}; `; -const StyledMenu = styled(Menu) ` - &.ant-dropdown-menu { - min-width: 160px; +const StyledMenu = styled(Menu) < + MenuProps & { + $color: string; + $hoverColor: string; + $activeColor: string; + $bg?: string; + $hoverBg?: string; + $activeBg?: string; + $border?: string; + $hoverBorder?: string; + $activeBorder?: string; + $radius?: string; + $fontFamily?: string; + $fontStyle?: string; + $textWeight?: string; + $textSize?: string; + $padding?: string; + $margin?: string; + $textTransform?: string; + $textDecoration?: string; + } +>` + /* Base submenu item styles */ + .ant-dropdown-menu-item{ + color: ${(p) => p.$color}; + background-color: ${(p) => p.$bg || "transparent"}; + border-radius: ${(p) => p.$radius || "0px"}; + font-weight: ${(p) => p.$textWeight || 500}; + font-family: ${(p) => p.$fontFamily || "sans-serif"}; + font-style: ${(p) => p.$fontStyle || "normal"}; + font-size: ${(p) => p.$textSize || "14px"}; + text-transform: ${(p) => p.$textTransform || "none"}; + text-decoration: ${(p) => p.$textDecoration || "none"}; + padding: ${(p) => p.$padding || "0 16px"}; + margin: ${(p) => p.$margin || "0px"}; + line-height: 30px; + } + /* Hover state */ + .ant-dropdown-menu-item:hover{ + color: ${(p) => p.$hoverColor || p.$activeColor}; + background-color: ${(p) => p.$hoverBg || "transparent"}; + cursor: pointer; + } + /* Selected/active state */ + .ant-dropdown-menu-item-selected, + .ant-menu-item-selected { + color: ${(p) => p.$activeColor}; + background-color: ${(p) => p.$activeBg || p.$bg || "transparent"}; + border: ${(p) => (p.$activeBorder ? `1px solid ${p.$activeBorder}` : "1px solid transparent")}; + } + /* Disabled state */ + .ant-dropdown-menu-item-disabled, + .ant-menu-item-disabled { + opacity: 0.5; + cursor: not-allowed; } `; @@ -333,7 +388,13 @@ function renderAdvancedSection(children: any) { ); } -function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionValue, setStyleSegment: (k: MenuItemStyleOptionValue) => void) { +function renderStyleSections( + children: any, + styleSegment: MenuItemStyleOptionValue, + setStyleSegment: (k: MenuItemStyleOptionValue) => void, + subStyleSegment: MenuItemStyleOptionValue, + setSubStyleSegment: (k: MenuItemStyleOptionValue) => void +) { const isHamburger = children.displayMode.getView() === 'hamburger'; return ( <> @@ -355,6 +416,19 @@ function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionVal {styleSegment === "hover" && children.navItemHoverStyle.getPropertyView()} {styleSegment === "active" && children.navItemActiveStyle.getPropertyView()}
+
+ {controlItem({}, ( + setSubStyleSegment(k as MenuItemStyleOptionValue)} + /> + ))} + {subStyleSegment === "normal" && children.subNavItemStyle.getPropertyView()} + {subStyleSegment === "hover" && children.subNavItemHoverStyle.getPropertyView()} + {subStyleSegment === "active" && children.subNavItemActiveStyle.getPropertyView()} +
{isHamburger && ( <>
@@ -402,6 +476,9 @@ const childrenMap = { hamburgerButtonStyle: styleControl(HamburgerButtonStyle, 'hamburgerButtonStyle'), drawerContainerStyle: styleControl(DrawerContainerStyle, 'drawerContainerStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), + subNavItemStyle: styleControl(NavSubMenuItemStyle, 'subNavItemStyle'), + subNavItemHoverStyle: styleControl(NavSubMenuItemHoverStyle, 'subNavItemHoverStyle'), + subNavItemActiveStyle: styleControl(NavSubMenuItemActiveStyle, 'subNavItemActiveStyle'), items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), { optionType: "manual", manual: [ @@ -502,6 +579,24 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { ...item, icon: item.icon || undefined, }))} + $color={(props.subNavItemStyle && props.subNavItemStyle.text) || props.style.text} + $hoverColor={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.text) || props.style.accent} + $activeColor={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.text) || props.style.accent} + $bg={(props.subNavItemStyle && props.subNavItemStyle.background) || undefined} + $hoverBg={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.background) || undefined} + $activeBg={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.background) || undefined} + $border={(props.subNavItemStyle && props.subNavItemStyle.border) || undefined} + $hoverBorder={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.border) || undefined} + $activeBorder={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.border) || undefined} + $radius={(props.subNavItemStyle && props.subNavItemStyle.radius) || undefined} + $fontFamily={props.style.fontFamily} + $fontStyle={props.style.fontStyle} + $textWeight={props.style.textWeight} + $textSize={props.style.textSize} + $padding={(props.subNavItemStyle && props.subNavItemStyle.padding) || props.style.padding} + $margin={(props.subNavItemStyle && props.subNavItemStyle.margin) || props.style.margin} + $textTransform={props.style.textTransform} + $textDecoration={props.style.textDecoration} /> ); return ( @@ -509,6 +604,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { key={idx} popupRender={() => subMenu} disabled={disabled} + trigger={["click"]} > {item} @@ -603,6 +699,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const showLogic = mode === "logic" || mode === "both"; const showLayout = mode === "layout" || mode === "both"; const [styleSegment, setStyleSegment] = useState("normal"); + const [subStyleSegment, setSubStyleSegment] = useState("normal"); return ( <> @@ -610,7 +707,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {showLogic && renderInteractionSection(children)} {showLayout && renderLayoutSection(children)} {showLogic && renderAdvancedSection(children)} - {showLayout && renderStyleSections(children, styleSegment, setStyleSegment)} + {showLayout && renderStyleSections(children, styleSegment, setStyleSegment, subStyleSegment, setSubStyleSegment)} ); }) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 175448bf3..dc187461b 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -2386,6 +2386,46 @@ export const NavLayoutItemActiveStyle = [ }, ] as const; +// Submenu item styles (normal/hover/active), similar to top-level menu items +export const NavSubMenuItemStyle = [ + 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 NavSubMenuItemHoverStyle = [ + getBackground("canvas"), + getStaticBorder("transparent"), + { + name: "text", + label: trans("text"), + depName: "background", + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, + }, +] as const; + +export const NavSubMenuItemActiveStyle = [ + 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 = [ @@ -2525,6 +2565,9 @@ export type NavLayoutItemHoverStyleType = StyleConfigType< export type NavLayoutItemActiveStyleType = StyleConfigType< typeof NavLayoutItemActiveStyle >; +export type NavSubMenuItemStyleType = StyleConfigType; +export type NavSubMenuItemHoverStyleType = StyleConfigType; +export type NavSubMenuItemActiveStyleType = StyleConfigType; export function widthCalculator(margin: string) { const marginArr = margin?.trim().replace(/\s+/g, " ").split(" ") || ""; From 228bd0c389fa31bc3140529c1ab0adf7ff42d03a Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 12 Nov 2025 23:34:42 +0500 Subject: [PATCH 50/54] fix submenu style issues --- .../src/comps/comps/navComp/navComp.tsx | 72 ++++++++++--------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index e4ae7bba2..d4ecd3f19 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -14,7 +14,7 @@ import { default as MenuOutlined } from "@ant-design/icons/MenuOutlined"; import { default as Dropdown } from "antd/es/dropdown"; import { default as Menu, MenuProps } from "antd/es/menu"; import Segmented from "antd/es/segmented"; -import { Drawer } from "lowcoder-design"; +import { Drawer, ScrollBar } from "lowcoder-design"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { styleControl } from "comps/controls/styleControl"; import { IconControl } from "comps/controls/iconControl"; @@ -195,7 +195,7 @@ const StyledMenu = styled(Menu) < /* Hover state */ .ant-dropdown-menu-item:hover{ color: ${(p) => p.$hoverColor || p.$activeColor}; - background-color: ${(p) => p.$hoverBg || "transparent"}; + background-color: ${(p) => p.$hoverBg || "transparent"} !important; cursor: pointer; } /* Selected/active state */ @@ -565,39 +565,41 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { ); if (subMenuItems.length > 0) { const subMenu = ( - { - if (disabled) return; - const subItem = subItems[Number(e.key)]; - const isSubDisabled = !!subItem?.children?.disabled?.getView?.(); - if (isSubDisabled) return; - const onSubEvent = subItem?.getView()?.onEvent; - onSubEvent && onSubEvent("click"); - }} - selectedKeys={subMenuSelectedKeys} - items={subMenuItems.map(item => ({ - ...item, - icon: item.icon || undefined, - }))} - $color={(props.subNavItemStyle && props.subNavItemStyle.text) || props.style.text} - $hoverColor={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.text) || props.style.accent} - $activeColor={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.text) || props.style.accent} - $bg={(props.subNavItemStyle && props.subNavItemStyle.background) || undefined} - $hoverBg={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.background) || undefined} - $activeBg={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.background) || undefined} - $border={(props.subNavItemStyle && props.subNavItemStyle.border) || undefined} - $hoverBorder={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.border) || undefined} - $activeBorder={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.border) || undefined} - $radius={(props.subNavItemStyle && props.subNavItemStyle.radius) || undefined} - $fontFamily={props.style.fontFamily} - $fontStyle={props.style.fontStyle} - $textWeight={props.style.textWeight} - $textSize={props.style.textSize} - $padding={(props.subNavItemStyle && props.subNavItemStyle.padding) || props.style.padding} - $margin={(props.subNavItemStyle && props.subNavItemStyle.margin) || props.style.margin} - $textTransform={props.style.textTransform} - $textDecoration={props.style.textDecoration} - /> + + { + if (disabled) return; + const subItem = subItems[Number(e.key)]; + const isSubDisabled = !!subItem?.children?.disabled?.getView?.(); + if (isSubDisabled) return; + const onSubEvent = subItem?.getView()?.onEvent; + onSubEvent && onSubEvent("click"); + }} + selectedKeys={subMenuSelectedKeys} + items={subMenuItems.map(item => ({ + ...item, + icon: item.icon || undefined, + }))} + $color={(props.subNavItemStyle && props.subNavItemStyle.text) || props.style.text} + $hoverColor={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.text) || props.style.accent} + $activeColor={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.text) || props.style.accent} + $bg={(props.subNavItemStyle && props.subNavItemStyle.background) || undefined} + $hoverBg={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.background) || undefined} + $activeBg={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.background) || undefined} + $border={(props.subNavItemStyle && props.subNavItemStyle.border) || undefined} + $hoverBorder={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.border) || undefined} + $activeBorder={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.border) || undefined} + $radius={(props.subNavItemStyle && props.subNavItemStyle.radius) || undefined} + $fontFamily={props.style.fontFamily} + $fontStyle={props.style.fontStyle} + $textWeight={props.style.textWeight} + $textSize={props.style.textSize} + $padding={(props.subNavItemStyle && props.subNavItemStyle.padding) || props.style.padding} + $margin={(props.subNavItemStyle && props.subNavItemStyle.margin) || props.style.margin} + $textTransform={props.style.textTransform} + $textDecoration={props.style.textDecoration} + /> + ); return ( Date: Wed, 12 Nov 2025 23:37:55 +0500 Subject: [PATCH 51/54] remove trigger --- client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index d4ecd3f19..940e0110d 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -565,7 +565,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { ); if (subMenuItems.length > 0) { const subMenu = ( - + { if (disabled) return; @@ -606,7 +606,6 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { key={idx} popupRender={() => subMenu} disabled={disabled} - trigger={["click"]} > {item} From 571122d4917de6f549009c1fadae154c93143685 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 13 Nov 2025 19:46:42 +0500 Subject: [PATCH 52/54] add desktop nav positions --- .../src/comps/comps/layout/navLayout.tsx | 35 +++++++++++++------ .../comps/comps/layout/navLayoutConstants.ts | 15 ++++++++ 2 files changed, 39 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index 2f07839ca..ad13d415f 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -36,14 +36,14 @@ import history from "util/history"; import { DataOption, DataOptionType, - ModeOptions, jsonMenuItems, menuItemStyleOptions } from "./navLayoutConstants"; import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; +import { NavPosition, NavPositionOptions } from "./navLayoutConstants"; -const { Header } = Layout; +const { Header, Footer } = Layout; const DEFAULT_WIDTH = 240; type MenuItemStyleOptionValue = "normal" | "hover" | "active"; @@ -197,7 +197,7 @@ let NavTmpLayout = (function () { jsonItems: jsonControl(convertTreeData, jsonMenuItems), width: withDefault(StringControl, DEFAULT_WIDTH), backgroundImage: withDefault(StringControl, ""), - mode: dropdownControl(ModeOptions, "inline"), + position: dropdownControl(NavPositionOptions, NavPosition.Left), collapse: BoolCodeControl, navStyle: styleControl(NavLayoutStyle, 'navStyle'), navItemStyle: styleControl(NavLayoutItemStyle, 'navItemStyle'), @@ -234,7 +234,7 @@ let NavTmpLayout = (function () { tooltip: trans("navLayout.widthTooltip"), placeholder: DEFAULT_WIDTH + "", })} - { children.mode.propertyView({ + { children.position.propertyView({ label: trans("labelProp.position"), radioButton: true })} @@ -280,7 +280,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { const [selectedKey, setSelectedKey] = useState(""); const items = comp.children.items.getView(); const navWidth = comp.children.width.getView(); - const navMode = comp.children.mode.getView(); + const navPosition = comp.children.position.getView(); const navCollapse = comp.children.collapse.getView(); const navStyle = comp.children.navStyle.getView(); const navItemStyle = comp.children.navItemStyle.getView(); @@ -568,12 +568,14 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { let navMenu = ( { defaultOpenKeys={defaultOpenKeys} selectedKeys={[selectedKey]} $navItemStyle={{ - width: navMode === 'horizontal' ? 'auto' : `calc(100% - ${getHorizontalMargin(navItemStyle.margin.split(' '))})`, + width: (navPosition === 'top' || navPosition === 'bottom') ? 'auto' : `calc(100% - ${getHorizontalMargin(navItemStyle.margin.split(' '))})`, ...navItemStyle, }} $navItemHoverStyle={navItemHoverStyle} @@ -595,16 +597,27 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => { let content = ( - {navMode === 'horizontal' ? ( + {(navPosition === 'top') && (
{ navMenu }
- ) : ( + )} + {(navPosition === 'left') && ( {navMenu} )} {pageView} + {(navPosition === 'bottom') && ( +
+ { navMenu } +
+ )} + {(navPosition === 'right') && ( + + {navMenu} + + )} ); return isViewMode ? ( diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts index aa33423d0..f9a2dc456 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts @@ -6,6 +6,21 @@ export const ModeOptions = [ { label: trans("navLayout.modeHorizontal"), value: "horizontal" }, ] as const; +// Desktop navigation position +export const NavPosition = { + Top: "top", + Left: "left", + Bottom: "bottom", + Right: "right", +} as const; + +export const NavPositionOptions = [ + { label: "Top", value: NavPosition.Top }, + { label: "Left", value: NavPosition.Left }, + { label: "Bottom", value: NavPosition.Bottom }, + { label: "Right", value: NavPosition.Right }, +] as const; + // Mobile navigation specific modes and options export const MobileMode = { Vertical: "vertical", From 288fe92a92e51c2fc9ae07024bdcd6611727f18b Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 14 Nov 2025 18:19:15 +0500 Subject: [PATCH 53/54] refactor navlayout --- .../src/comps/comps/layout/navLayout.tsx | 152 ++++++++++-------- 1 file changed, 87 insertions(+), 65 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index ad13d415f..e9ad7207a 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -148,12 +148,6 @@ const StyledImage = styled.img` color: currentColor; `; -const defaultStyle = { - radius: '0px', - margin: '0px', - padding: '0px', -} - type UrlActionType = { url?: string; newTab?: boolean; @@ -163,7 +157,7 @@ export type MenuItemNode = { label: string; key: string; hidden?: boolean; - icon?: any; + icon?: string; action?: UrlActionType, children?: MenuItemNode[]; } @@ -208,66 +202,94 @@ let NavTmpLayout = (function () { return null; }) .setPropertyViewFn((children) => { - const [styleSegment, setStyleSegment] = useState('normal') + const [styleSegment, setStyleSegment] = useState("normal"); + + const { + dataOptionType, + items, + jsonItems, + onEvent, + width, + position, + collapse, + backgroundImage, + navStyle, + navItemStyle, + navItemHoverStyle, + navItemActiveStyle, + } = children; + + const renderMenuSection = () => ( +
+ {dataOptionType.propertyView({ + radioButton: true, + type: "oneline", + })} + {dataOptionType.getView() === DataOption.Manual + ? menuPropertyView(items) + : jsonItems.propertyView({ + label: "Json Data", + })} +
+ ); + + const renderEventHandlerSection = () => ( +
+ {onEvent.getPropertyView()} +
+ ); + + const renderLayoutSection = () => ( +
+ {width.propertyView({ + label: trans("navLayout.width"), + tooltip: trans("navLayout.widthTooltip"), + placeholder: `${DEFAULT_WIDTH}`, + })} + {position.propertyView({ + label: trans("labelProp.position"), + radioButton: true, + })} + {collapse.propertyView({ + label: trans("labelProp.collapse"), + })} + {backgroundImage.propertyView({ + label: "Background Image", + placeholder: "https://temp.im/350x400", + })} +
+ ); + + const renderNavStyleSection = () => ( +
+ {navStyle.getPropertyView()} +
+ ); + + const renderNavItemStyleSection = () => ( +
+ {controlItem( + {}, + setStyleSegment(k as MenuItemStyleOptionValue)} + /> + )} + {styleSegment === "normal" && navItemStyle.getPropertyView()} + {styleSegment === "hover" && navItemHoverStyle.getPropertyView()} + {styleSegment === "active" && navItemActiveStyle.getPropertyView()} +
+ ); return ( -
-
- {children.dataOptionType.propertyView({ - radioButton: true, - type: "oneline", - })} - { - children.dataOptionType.getView() === DataOption.Manual - ? menuPropertyView(children.items) - : children.jsonItems.propertyView({ - label: "Json Data", - }) - } -
-
- { children.onEvent.getPropertyView() } -
-
- { children.width.propertyView({ - label: trans("navLayout.width"), - tooltip: trans("navLayout.widthTooltip"), - placeholder: DEFAULT_WIDTH + "", - })} - { children.position.propertyView({ - label: trans("labelProp.position"), - radioButton: true - })} - { children.collapse.propertyView({ - label: trans("labelProp.collapse"), - })} - {children.backgroundImage.propertyView({ - label: `Background Image`, - placeholder: 'https://temp.im/350x400', - })} -
-
- { children.navStyle.getPropertyView() } -
-
- {controlItem({}, ( - setStyleSegment(k as MenuItemStyleOptionValue)} - /> - ))} - {styleSegment === 'normal' && ( - children.navItemStyle.getPropertyView() - )} - {styleSegment === 'hover' && ( - children.navItemHoverStyle.getPropertyView() - )} - {styleSegment === 'active' && ( - children.navItemActiveStyle.getPropertyView() - )} -
+
+ {renderMenuSection()} + {renderEventHandlerSection()} + {renderLayoutSection()} + {renderNavStyleSection()} + {renderNavItemStyleSection()}
); }) From 0c1c6904ce9bf5e8eb6dd09fe5bfb58a5ab95583 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 14 Nov 2025 22:18:48 +0500 Subject: [PATCH 54/54] fix center icons on collapse + mount issue --- .../src/comps/comps/layout/navLayout.tsx | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx index e9ad7207a..b94fe8965 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx @@ -17,7 +17,8 @@ import { EditorContainer, EmptyContent } from "pages/common/styledComponent"; import { useCallback, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; import { isUserViewMode, useAppPathParam } from "util/hooks"; -import { BoolCodeControl, StringControl, jsonControl } from "comps/controls/codeControl"; +import { StringControl, jsonControl } from "comps/controls/codeControl"; +import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; import { NavLayoutStyle, @@ -40,7 +41,6 @@ import { menuItemStyleOptions } from "./navLayoutConstants"; import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl"; -import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { NavPosition, NavPositionOptions } from "./navLayoutConstants"; const { Header, Footer } = Layout; @@ -141,6 +141,24 @@ const StyledMenu = styled(AntdMenu)<{ } } + /* Collapse mode: hide label text and center icons */ + &.ant-menu-inline-collapsed { + .ant-menu-title-content { + display: none !important; + } + + > .ant-menu-item, + > .ant-menu-submenu > .ant-menu-submenu-title { + display: flex; + justify-content: center; + align-items: center; + } + + .anticon { + line-height: 1 !important; + } + } + `; const StyledImage = styled.img` @@ -192,7 +210,7 @@ let NavTmpLayout = (function () { width: withDefault(StringControl, DEFAULT_WIDTH), backgroundImage: withDefault(StringControl, ""), position: dropdownControl(NavPositionOptions, NavPosition.Left), - collapse: BoolCodeControl, + collapse: BoolControl, navStyle: styleControl(NavLayoutStyle, 'navStyle'), navItemStyle: styleControl(NavLayoutItemStyle, 'navItemStyle'), navItemHoverStyle: styleControl(NavLayoutItemHoverStyle, 'navItemHoverStyle'), @@ -672,7 +690,7 @@ NavTmpLayout = withDispatchHook(NavTmpLayout, (dispatch) => (action) => { }); }); -export const NavLayout = class extends NavTmpLayout { +export class NavLayout extends NavTmpLayout { getAllCompItems() { return {}; } @@ -680,5 +698,5 @@ export const NavLayout = class extends NavTmpLayout { nameAndExposingInfo(): NameAndExposingInfo { return {}; } -}; +} registerLayoutMap({ compType: navLayoutCompType, comp: NavLayout });