diff --git a/client/packages/lowcoder-design/src/components/Trees.tsx b/client/packages/lowcoder-design/src/components/Trees.tsx index 6e7112f1f..be2687201 100644 --- a/client/packages/lowcoder-design/src/components/Trees.tsx +++ b/client/packages/lowcoder-design/src/components/Trees.tsx @@ -52,7 +52,7 @@ const BranchStyle = css` background-color: #d7d9e0; } `; -export const BranchDiv = styled.div<{ $type?: "inline" | "switch" }>` +export const BranchDiv = styled.div<{ $type?: "inline" | "switch" | "center" }>` position: relative; ${BranchStyle} ${(props) => { @@ -81,6 +81,16 @@ export const BranchDiv = styled.div<{ $type?: "inline" | "switch" }>` bottom: 11px; } `; + case "center": + return css` + &::before { + top: calc(50% - 2px); + } + + &::after { + top: 50%; + } + `; default: return css``; } diff --git a/client/packages/lowcoder-design/src/components/keyValueList.tsx b/client/packages/lowcoder-design/src/components/keyValueList.tsx index 6cedce3c4..acc2b3cdc 100644 --- a/client/packages/lowcoder-design/src/components/keyValueList.tsx +++ b/client/packages/lowcoder-design/src/components/keyValueList.tsx @@ -4,6 +4,7 @@ import { TacoButton } from "./button"; import { ReactNode } from "react"; import { BluePlusIcon } from "icons"; import { trans } from "i18n/design"; +import { BranchDiv } from "./Trees"; const KeyValueListItem = styled.div` display: flex; @@ -77,18 +78,23 @@ export const KeyValueList = (props: { onAdd: () => void; onDelete: (item: ReactNode, index: number) => void; isStatic?: boolean; -}) => ( - <> + indicatorForAll?: boolean; +}) => { + let IndicatorWrapper = ({children}: any) => (<>{children}); + if(props.indicatorForAll) IndicatorWrapper = BranchDiv; + return <> {props.list.map((item, index) => ( - - {item} - {!props.isStatic && - props.list.length > 1 && props.onDelete(item, index)} - $forbidden={props.list.length === 1} - /> - } - + + + {item} + {!props.isStatic && + props.list.length > 1 && props.onDelete(item, index)} + $forbidden={props.list.length === 1} + /> + } + + ))} {!props.isStatic && @@ -97,4 +103,4 @@ export const KeyValueList = (props: { } -); +}; diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx index cc4018bd5..0bf33a399 100644 --- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx +++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx @@ -61,6 +61,7 @@ const ExecuteQueryPropertyView = ({ layout: "vertical", isStatic: true, keyFixed: true, + indicatorForAll: true, }); }, [comp.children.queryVariables.getView()]) @@ -89,11 +90,9 @@ const ExecuteQueryPropertyView = ({ )} - - - {(editorState) => getVariableOptions(editorState)} - - + + {(editorState) => getVariableOptions(editorState)} + ); } diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx index 1f4d722a2..acfe36b23 100644 --- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx @@ -49,6 +49,7 @@ export type KeyValueControlParams = ControlParams & { valueFlexBasics?: number; isStatic?: boolean; keyFixed?: boolean; + indicatorForAll?: boolean; }; /** @@ -143,6 +144,7 @@ export function keyValueListControl( onAdd={() => this.dispatch(this.pushAction({}))} onDelete={(item, index) => this.dispatch(this.deleteAction(index))} isStatic={params.isStatic} + indicatorForAll={params.indicatorForAll} /> );