Dev -> Main 2.6.5

client/VERSION

@@ -1 +1 @@
-2.6.4
+2.6.5

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.6.4",
+  "version": "2.6.5",
   "type": "module",
   "private": true,
   "workspaces": [

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -15,7 +15,10 @@ import {
   lightenColor,
   toHex,
   UnderlineCss,
-  EventModalStyleType
+  EventModalStyleType,
+  DateParser,
+  isValidColor,
+  Theme,
 } from "lowcoder-sdk";
 import styled from "styled-components";
 import dayjs from "dayjs";
@@ -27,6 +30,10 @@ import {
 } from "@fullcalendar/core";
 import { default as Form } from "antd/es/form";
 
+type Theme = typeof Theme;
+type EventModalStyleType = typeof EventModalStyleType;
+type CalendarStyleType = typeof CalendarStyleType;
+
 export const Wrapper = styled.div<{
   $editable?: boolean;
   $style?: CalendarStyleType;
@@ -1135,3 +1142,32 @@ export const viewClassNames = (info: ViewContentArg) => {
   return className;
 };
 
+export const formattedEvents = (events: EventType[], theme?: Theme) => {
+  return events.map((item: EventType) => {
+    return {
+      title: item.label,
+      label: item.label,
+      id: item.id,
+      start: dayjs(item.start, DateParser).format(),
+      end: dayjs(item.end, DateParser).format(),
+      allDay: item.allDay,
+      ...(item.resourceId ? { resourceId: item.resourceId } : {}),
+      ...(item.groupId ? { groupId: item.groupId } : {}),
+      backgroundColor: item.backgroundColor,
+      extendedProps: {   // Ensure color is in extendedProps
+        color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
+        detail: item.detail,
+        titleColor: item.titleColor,
+        detailColor: item.detailColor,
+        titleFontWeight: item.titleFontWeight,
+        titleFontStyle: item.titleFontStyle,
+        detailFontWeight: item.detailFontWeight,
+        detailFontStyle: item.detailFontStyle,
+        animation: item?.animation,
+        animationDelay: item?.animationDelay,
+        animationDuration: item?.animationDuration,
+        animationIterationCount: item?.animationIterationCount
+      }
+    }
+  })
+}

client/packages/lowcoder-design/src/components/keyValueList.tsx

@@ -96,6 +96,7 @@ export const KeyValueList = (props: {
   onDelete: (item: ReactNode, index: number) => void;
   isStatic?: boolean;
   indicatorForAll?: boolean;
+  allowDeletingAll?: boolean;
 }) => {
   return (
     <>
@@ -105,8 +106,8 @@ export const KeyValueList = (props: {
             {item}
             {!props.isStatic &&
               <DelIcon
-                onClick={() => props.list.length > 1 && props.onDelete(item, index)}
-                $forbidden={props.list.length === 1}
+                onClick={() => (props.allowDeletingAll || (!props.allowDeletingAll && props.list.length > 1)) && props.onDelete(item, index)}
+                $forbidden={!props.allowDeletingAll && props.list.length === 1}
               />
             }
           </KeyValueListItem>

client/packages/lowcoder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.6.4",
+  "version": "2.6.5",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",

client/packages/lowcoder/src/appView/bootstrapAt.tsx

@@ -2,8 +2,6 @@ import { loadComps } from "comps";
 import type { AppViewInstanceOptions } from "./AppViewInstance";
 import { createRoot } from "react-dom/client";
 
-loadComps();
-
 export async function bootstrapAppAt<I>(
   appId: string,
   node: Element | null,
@@ -14,6 +12,8 @@ export async function bootstrapAppAt<I>(
     return;
   }
 
+  loadComps();
+
   const { AppViewInstance } = await import("./AppViewInstance");
   return new AppViewInstance(appId, node, createRoot(node), options);
 }

client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx

@@ -191,7 +191,8 @@ function InnerCustomComponent(props: IProps) {
     iframe.addEventListener("load", handleIFrameLoad);
 
     // in dev, load from sdk bundle and on prod load from build package
-    const src = import.meta.env.DEV
+    const src = (REACT_APP_BUNDLE_TYPE && REACT_APP_BUNDLE_TYPE === 'sdk')
+      || (import.meta.env && import.meta.env.DEV)
       ? trans('customComponent.entryUrl')
       : `${window.location.origin}/custom_component/custom_component.html`;
 

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -243,7 +243,7 @@ const TableWrapper = styled.div<{
               position: -webkit-sticky;
               // top: ${props.$fixedToolbar ? '47px' : '0'};
               top: 0;
-              z-index: 99;
+              z-index: 2;
             `
           }
           > tr {
@@ -256,7 +256,14 @@ const TableWrapper = styled.div<{
             color: ${(props) => props.$headerStyle.headerText};
             // border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
 
-
+            /* Proper styling for fixed header cells */
+            &.ant-table-cell-fix-left, &.ant-table-cell-fix-right {
+              z-index: 1; 
+              background: ${(props) => props.$headerStyle.headerBackground};
+            }
+
+
+
             > div {
               margin: ${(props) => props.$headerStyle.margin};
 
@@ -295,7 +302,27 @@ const TableWrapper = styled.div<{
 
         td {
           padding: 0px 0px;
-          // ${(props) => props.$showHRowGridBorder ?'border-bottom: 1px solid #D7D9E0 !important;': `border-bottom: 0px;`}
+          // ${(props) => props.$showHRowGridBorder ? 'border-bottom: 1px solid #D7D9E0 !important;': `border-bottom: 0px;`}
+
+          /* Proper styling for Fixed columns in the table body */
+          &.ant-table-cell-fix-left, &.ant-table-cell-fix-right {
+            z-index: 1; 
+            background: inherit;
+            background-color: ${(props) => props.$style.background};
+            transition: background-color 0.3s;
+          }
+
+        }
+
+        /* 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 {
@@ -428,7 +455,7 @@ const TableTd = styled.td<{
       }
 
       &:active {
-        color: ${(props) => props.$linkStyle?.activeText}};
+        color: ${(props) => props.$linkStyle?.activeText};
       }
     }
   }

client/packages/lowcoder/src/comps/controls/actionSelector/actionSelectorControl.tsx

@@ -251,7 +251,9 @@ function actionSelectorControl(needContext: boolean) {
         const ignorePromise = Promise.resolve();
         const realNeedContext = needContext || getReduceContext().inEventContext;
         const actionPromise = () => {
-          return realNeedContext ? action.value.func() : this.children.comp.getView()();
+          // return realNeedContext ? action.value.func() : this.children.comp.getView()();
+          // commenting because it's using old context for event handlers inside list/grid
+          return this.children.comp.getView()();
         };
         handlePromiseAfterResult(action, ignored ? ignorePromise : actionPromise());
         return this;

client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx

@@ -9,7 +9,7 @@ import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { trans } from "i18n";
 import { withDefault } from "comps/generators";
 import { keyValueListControl} from "comps/controls/keyValueListControl";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 
 const ExecuteQueryPropertyView = ({
   comp,
@@ -19,16 +19,25 @@ const ExecuteQueryPropertyView = ({
   placement?: "query" | "table"
 }) => {
   const getQueryOptions = useCallback((editorState?: EditorState) => {
-    const options: { label: string; value: string; variables?: Record<string, string> }[] =
-      editorState
-        ?.queryCompInfoList()
-        .map((info) => {
+    if (!editorState) return [];
+      const options: {
+        label: string;
+        value: string;
+        variables?: Record<string, string>
+      }[] = editorState.getQueriesComp()
+        .getView()
+        .map((item) => {
+          const name = item.children.name.getView();
+          const qVariables: Record<string, string> = {};
+          item.children.variables.toJsonValue().forEach(v => {
+            qVariables[v.key!] = '';
+          });
           return {
-            label: info.name,
-            value: info.name,
-            variables: info.data.variables,
+            label: name,
+            value: name,
+            variables: qVariables,
           }
-      })
+        })
         .filter(
           // Filter out the current query under query
           (option) => {
@@ -67,7 +76,7 @@ const ExecuteQueryPropertyView = ({
       indicatorForAll: true,
     });
   }, [comp.children.queryVariables.getView()])
-  
+
   return (
     <>
       <BranchDiv $type={"inline"}>
@@ -114,26 +123,27 @@ const ExecuteQueryTmpAction = (function () {
 export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   override getView() {
     const queryName = this.children.queryName.getView();
-    // const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
-    const result = this.children.queryVariables.toJsonValue()
-      .filter(item => item.key !== "" && item.value !== "")
-      .map(item => ({[item.key as string]: item.value}))
-      .reduce((acc, curr) => Object.assign(acc, curr), {});
-
-    result.$queryName = queryName;
     if (!queryName) {
       return () => Promise.resolve();
     }
 
-    return () =>
-      getPromiseAfterDispatch(
+    let result = Object.values(this.children.queryVariables.getView())
+      .filter((item) => item.children.key.getView() !== "" && item.children.value.getView() !== "")
+      .map((item) => ({[item.children.key.getView() as string]: {value: item.children.value.getView()}}))
+      .reduce((acc, curr) => Object.assign(acc, curr), {});
+
+    result.$queryName = {value: this.children.queryName.getView()};
+
+    return () => {
+      return getPromiseAfterDispatch(
         this.dispatch,
         routeByNameAction(
           queryName,
           executeQueryAction({args: result})
         ),
         { notHandledError: trans("eventHandler.notHandledError") }
       );
+    }
   }
 
   displayName() {

client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx

@@ -86,7 +86,12 @@ export function withSelectedMultiContext<TCtor extends MultiCompConstructor>(
         action.editDSL
         || isCustomAction<LazyCompReadyAction>(action, "LazyCompReady")
         || isCustomAction<ModuleReadyAction>(action, "moduleReady")
-      ) && action.path[1] === SELECTED_KEY) {
+      ) && (
+        action.path[1] === SELECTED_KEY
+        || ( // special check added for modules inside list view
+          isCustomAction<ModuleReadyAction>(action, "moduleReady")
+          && action.path[1] === this.selection)
+      )) {
         // broadcast
         const newAction = {
           ...action,

client/packages/lowcoder/src/comps/queries/queryComp.tsx

@@ -37,7 +37,6 @@ import {
   FetchCheckNode,
   FetchInfo,
   fromRecord,
-  fromValue,
   isCustomAction,
   MultiBaseComp,
   multiChangeAction,
@@ -369,7 +368,7 @@ QueryCompTmp = class extends QueryCompTmp {
     }
     if (action.type === CompActionTypes.EXECUTE_QUERY) {
       if (getReduceContext().disableUpdateState) return this;
-      if(!action.args) action.args = this.children.variables.toJsonValue().filter(kv => kv.key).reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
+      action.args = action.args || {};
       action.args.$queryName = this.children.name.getView();
 
       return this.executeQuery(action);
@@ -711,25 +710,18 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
   }
 
   nameAndExposingInfo(): NameAndExposingInfo {
-    const result: NameAndExposingInfo = {};
+    let result: NameAndExposingInfo = {};
     Object.values(this.children).forEach((comp) => {
       result[comp.children.name.getView()] = comp.exposingInfo();
 
-      const variables = comp.children.variables.toJsonValue();
-      variables.forEach((variable: Record<string, any>) => {
-        result[variable.key] = {
-          property: fromRecord({
-            value: fromValue(variable.value),
-          }),
-          propertyValue: {
-            value: variable.value,
-          },
-          propertyDesc: {},
-          methods: {},
-        };
-      })
+      const variables = comp.children.variables.nameAndExposingInfo();
+      if (variables) {
+        result = {
+          ...result,
+          ...variables,
+        }
+      }
     });
-
     return result;
   }