Dev > Main 2.4.10

client/packages/lowcoder-comps/package.json

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

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

@@ -84,34 +84,67 @@ function fixOldData(oldData: any) {
   if(!Boolean(oldData)) return;
   let {events, resourcesEvents, ...data } = oldData;
   let allEvents: any[] = [];
+  let isDynamicEventData = false;
 
   if (events && typeof events === 'string') {
-    let eventsList = JSON.parse(events);
-    if (eventsList && eventsList.length) {
-      eventsList = eventsList?.map(event => {
-        const {title, ...eventData} = event;
-        return {
-          ...eventData,
-          label: title, // replace title field with label
-        }
-      });
-      allEvents = allEvents.concat(eventsList);
+    try {
+      let eventsList = JSON.parse(events);
+      if (eventsList && eventsList.length) {
+        eventsList = eventsList?.map(event => {
+          const {title, ...eventData} = event;
+          return {
+            ...eventData,
+            label: title, // replace title field with label
+          }
+        });
+        allEvents = allEvents.concat(eventsList);
+      }
+    } catch (_) {
+      isDynamicEventData = true;
     }
   }
   if (resourcesEvents && typeof resourcesEvents === 'string') {
-    let resourceEventsList = JSON.parse(resourcesEvents);
-    if (resourceEventsList && resourceEventsList.length) {
-      resourceEventsList = resourceEventsList?.map(event => {
-        const {title, ...eventData} = event;
-        return {
-          ...eventData,
-          label: title, // replace title field with label
-        }
-      });
-      allEvents = allEvents.concat(resourceEventsList);
-    }
+    try {
+      let resourceEventsList = JSON.parse(resourcesEvents);
+      if (resourceEventsList && resourceEventsList.length) {
+        resourceEventsList = resourceEventsList?.map(event => {
+          const {title, ...eventData} = event;
+          return {
+            ...eventData,
+            label: title, // replace title field with label
+          }
+        });
+        allEvents = allEvents.concat(resourceEventsList);
+      }
+    } catch (_) {}
   }
 
+  if (isDynamicEventData) {
+    return {
+      ...data,
+      events: {
+        manual: {
+          manual: allEvents,
+        },
+        mapData: {
+          data: events,
+          mapData: {
+            id: "{{item.id}}",
+            label: "{{item.title}}",
+            detail: "{{item.detail}}",
+            start: "{{item.start}}",
+            end: "{{item.end}}",
+            color: "{{item.color}}",
+            allDay: "{{item.allDay}}",
+            groupId: "{{item.groupId}}",
+            resourceId: "{{item.resourceId}}",
+          }
+        },
+        optionType: "map",
+      },
+    };
+  }
+
   if (allEvents.length) {
     return {
       ...data,
@@ -121,11 +154,23 @@ function fixOldData(oldData: any) {
         },
         mapData: {
           data: JSON.stringify(allEvents, null, 2),
+          mapData: {
+            id: "{{item.id}}",
+            label: "{{item.title}}",
+            detail: "{{item.detail}}",
+            start: "{{item.start}}",
+            end: "{{item.end}}",
+            color: "{{item.color}}",
+            allDay: "{{item.allDay}}",
+            groupId: "{{item.groupId}}",
+            resourceId: "{{item.resourceId}}",
+          }
         },
         optionType: "manual",
       },
     };
   }
+
   return {
     ...data,
     events,

client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx

@@ -8,13 +8,16 @@ import {
 } from "types/remoteComp";
 
 async function npmLoader(
-  remoteInfo: RemoteCompInfo
+  {
+    appId,
+    ...remoteInfo
+  }: RemoteCompInfo & {appId?: string}
 ): Promise<CompConstructor | null> {
 
   // Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping.
   const localPackageVersion = remoteInfo.packageVersion || "latest";
   const { packageName, packageVersion, compName } = remoteInfo;
-  const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${localPackageVersion}/index.js`;
+  const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${localPackageVersion}/index.js`;
 
   try {
     const module = await import(
@@ -51,7 +54,7 @@ async function bundleLoader(
   return comp;
 }
 
-export const loaders: Record<RemoteCompSource, RemoteCompLoader> = {
+export const loaders: Record<RemoteCompSource, RemoteCompLoader<RemoteCompInfo & {appId?: string}>> = {
   npm: npmLoader,
   bundle: bundleLoader,
 };

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

@@ -16,6 +16,7 @@ import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
 import React from "react";
 import type { AppState } from "@lowcoder-ee/redux/reducers";
 import { useSelector } from "react-redux";
+import { useApplicationId } from "@lowcoder-ee/util/hooks";
 
 const ViewError = styled.div`
   display: flex;
@@ -51,7 +52,7 @@ interface RemoteCompReadyAction {
 
 interface RemoteCompViewProps {
   isLowcoderComp?: boolean;
-  loadComp: (packageVersion?: string) => Promise<void>;
+  loadComp: (packageVersion?: string, appId?: string) => Promise<void>;
   loadingElement?: () => React.ReactNode;
   errorElement?: (error: any) => React.ReactNode;
   source?: RemoteCompSource;
@@ -62,6 +63,7 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView
   const [error, setError] = useState<any>("");
   const editorState = useContext(EditorContext);
   const compState = useContext(CompContext);
+  const appId = useApplicationId();
   const lowcoderCompPackageVersion = editorState?.getAppSettings().lowcoderCompVersion || 'latest';
   const latestLowcoderCompsVersion = useSelector((state: AppState) => state.npmPlugin.packageVersion['lowcoder-comps']);
 
@@ -79,7 +81,7 @@ const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompView
 
   useMount(() => {
     setError("");
-    loadComp(packageVersion).catch((e) => {
+    loadComp(packageVersion, appId).catch((e) => {
       setError(String(e));
     });
   });
@@ -117,7 +119,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
       this.compValue = params.value;
     }
 
-    private async load(packageVersion = 'latest') {
+    private async load(packageVersion = 'latest', appId = 'none') {
       if (!remoteInfo) {
         return;
       }
@@ -129,7 +131,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
         log.error("loader not found, remote info:", remoteInfo);
         return;
       }
-      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion});
+      const RemoteExportedComp = await finalLoader({...remoteInfo, packageVersion, appId});
       if (!RemoteExportedComp) {
         return;
       }
@@ -159,7 +161,7 @@ export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
         <RemoteCompView
           key={key}
           isLowcoderComp={remoteInfo?.packageName === 'lowcoder-comps'}
-          loadComp={(packageVersion?: string) => this.load(packageVersion)}
+          loadComp={(packageVersion?: string, appId?: string) => this.load(packageVersion, appId)}
           loadingElement={loadingElement}
           source={remoteInfo?.source}
         />

client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx

@@ -95,7 +95,7 @@ const StepsChildrenMap = {
   style: styleControl(StepsStyle , 'style'),
   viewRef: RefControl<HTMLDivElement>,
   animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
-  showVerticalScrollbar: withDefault(BoolControl, false),
+  showScrollBars: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, ''),
 };
 
@@ -182,7 +182,7 @@ let StepControlBasicComp = (function () {
               padding: "0px",
             }}
             overflow="scroll"
-            hideScrollbar={!props.showVerticalScrollbar}>
+            hideScrollbar={!props.showScrollBars}>
             <Steps 
               initial={props.initialValue.value -1}
               current={current}
@@ -197,6 +197,7 @@ let StepControlBasicComp = (function () {
             >
               {props.options.map((option, index) => (
                 <Steps.Step 
+                  style={{minWidth:props.minHorizontalWidth || '100%'}}
                   key={index}
                   title={option.label}
                   subTitle={option.subTitle}
@@ -234,15 +235,6 @@ let StepControlBasicComp = (function () {
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <Section name={sectionNames.layout}>
             {children.autoHeight.getPropertyView()}
-            {!children.autoHeight.getView() && (
-              children.showVerticalScrollbar.propertyView({
-                label: trans("prop.showVerticalScrollbar"),
-              })
-            )}
-            {children.minHorizontalWidth.propertyView({
-                label: trans("prop.minHorizontalWidth"),
-                placeholder: '100px',
-              })}
             {children.size.propertyView({
               label: trans("step.size"),
               radioButton: true,
@@ -261,15 +253,23 @@ let StepControlBasicComp = (function () {
                 radioButton: true,
               })
             }
+            {children.direction.getView() == "horizontal" && (
+              children.minHorizontalWidth.propertyView({
+                label: trans("prop.minHorizontalWidth"),
+                  placeholder: '100px',
+              })
+            )}
+            {!children.autoHeight.getView() && (
+              children.showScrollBars.propertyView({
+              label: trans("prop.scrollbar"),
+            })
+            )}
             { children.displayType.getView() != "inline" && !children.showIcons.getView() && (
               children.showDots.propertyView({label: trans("step.showDots")}
             ))}
             { children.displayType.getView() != "inline" && !children.showDots.getView() && (
               children.showIcons.propertyView({label: trans("step.showIcons")}
             ))}
-            {!children.autoHeight.getView() && (
-              children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")})
-            )}
           </Section>
         )}
 

client/packages/lowcoder/src/comps/utils/remote.ts

@@ -39,7 +39,7 @@ export function parseCompType(compType: string) {
 }
 
 export async function getNpmPackageMeta(packageName: string) {
-  const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${packageName}`);
+  const res = await axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/none/${packageName}`);
   if (res.status >= 400) {
     return null;
   }

client/packages/lowcoder/src/constants/npmPlugins.ts

@@ -1,3 +1,7 @@
-export const SERVER_HOST = `${REACT_APP_NODE_SERVICE_URL ?? ""}`;
-export const NPM_REGISTRY_URL = `${SERVER_HOST}/node-service/api/npm/registry`;
-export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/node-service/api/npm/package`;
+// export const SERVER_HOST = `${REACT_APP_NODE_SERVICE_URL ?? ""}`;
+// export const NPM_REGISTRY_URL = `${SERVER_HOST}/node-service/api/npm/registry`;
+// export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/node-service/api/npm/package`;
+
+export const SERVER_HOST = `${REACT_APP_API_SERVICE_URL ?? ""}`;
+export const NPM_REGISTRY_URL = `${SERVER_HOST}/api/npm/registry`;
+export const NPM_PLUGIN_ASSETS_BASE_URL = `${SERVER_HOST}/api/npm/package`;

client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginCompItem.tsx

@@ -11,6 +11,7 @@ import { LowcoderCompMeta } from "types/remoteComp";
 import { TransparentImg } from "util/commonUtils";
 import { ModuleIcon } from "lowcoder-design";
 import { NPM_PLUGIN_ASSETS_BASE_URL } from "constants/npmPlugins";
+import { useApplicationId } from "@lowcoder-ee/index.sdk";
 
 const ItemWrapper = styled.div`
   display: flex;
@@ -75,10 +76,11 @@ interface PluginCompItemProps {
 }
 
 export function PluginCompItem(props: PluginCompItemProps) {
+  const appId = useApplicationId();
   const { packageName, packageVersion, compName, compMeta, onDrag } = props;
   const compType = getRemoteCompType("npm", packageName, packageVersion, compName);
 
-  const icon = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/${compMeta.icon}`;
+  const icon = `${NPM_PLUGIN_ASSETS_BASE_URL}/${appId}/${packageName}@${packageVersion}/${compMeta.icon}`;
 
   return (
     <ItemWrapper

client/packages/lowcoder/src/pages/editor/right/PluginPanel/PluginItem.tsx

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { EmptyContent } from "components/EmptyContent";
 import { LinkButton } from "lowcoder-design";
-import { useShallowEqualSelector } from "util/hooks";
+import { useApplicationId, useShallowEqualSelector } from "util/hooks";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "redux/reducers";
@@ -55,6 +55,7 @@ interface PluginViewProps {
 export function PluginItem(props: PluginViewProps) {
   const { name, onRemove } = props;
   const dispatch = useDispatch();
+  const appId = useApplicationId();
   const { onDrag, searchValue } = useContext(RightContext);
   const [loading, setLoading] = useState(false);
   const packageMeta = useShallowEqualSelector(
@@ -67,7 +68,7 @@ export function PluginItem(props: PluginViewProps) {
 
   useEffect(() => {
     setLoading(true);
-    axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${name}`).then((res) => {
+    axios.get<NpmPackageMeta>(`${NPM_REGISTRY_URL}/${appId}/${name}`).then((res) => {
       if (res.status >= 400) {
         return;
       }

server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java

@@ -145,6 +145,7 @@ SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
                         ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.ORGANIZATION_URL + "/*/datasourceTypes"), // datasource types
                         ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.ORGANIZATION_URL + "/byuser/*"),
                         ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.DATASOURCE_URL + "/jsDatasourcePlugins"),
+                        ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.NPM_REGISTRY + "/**"),
                         ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, "/api/docs/**")
                 )
                 .permitAll()