@nocobase/flow-engine 2.1.0-alpha.30 → 2.1.0-alpha.31

package/lib/components/FormItem.d.ts

@@ -14,5 +14,11 @@ interface ExtendedFormItemProps extends FormItemProps {
     labelWrap?: boolean;
     showLabel?: boolean;
 }
+export declare const verticalFormItemLabelStyle: {
+    paddingBottom: number;
+};
+export declare const formItemStyle: {
+    marginBottom: number;
+};
 export declare const FormItem: ({ children, showLabel, labelWidth, ...rest }: ExtendedFormItemProps & ChildExtraProps) => React.JSX.Element;
 export {};

package/lib/components/FormItem.js

@@ -37,11 +37,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FormItem_exports = {};
 __export(FormItem_exports, {
-  FormItem: () => FormItem
+  FormItem: () => FormItem,
+  formItemStyle: () => formItemStyle,
+  verticalFormItemLabelStyle: () => verticalFormItemLabelStyle
 });
 module.exports = __toCommonJS(FormItem_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+const verticalFormItemLabelStyle = { paddingBottom: 0 };
+const formItemStyle = { marginBottom: 12 };
 const formItemPropKeys = [
   "colon",
   "dependencies",
@@ -90,6 +94,7 @@ const FormItem = /* @__PURE__ */ __name(({
   });
   const { label, labelWrap, colon = true, layout } = rest;
   const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
+  const labelColStyle = layout === "vertical" ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = /* @__PURE__ */ __name(() => {
     if (!showLabel) return null;
     if (effectiveLabelWrap) {
@@ -132,7 +137,8 @@ const FormItem = /* @__PURE__ */ __name(({
     import_antd.Form.Item,
     {
       ...rest,
-      labelCol: { style: { width: labelWidth } },
+      style: { ...formItemStyle, ...rest.style },
+      labelCol: { style: labelColStyle },
       layout,
       label: renderLabel(),
       colon: false,
@@ -147,5 +153,7 @@ const FormItem = /* @__PURE__ */ __name(({
 }, "FormItem");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  FormItem
+  FormItem,
+  formItemStyle,
+  verticalFormItemLabelStyle
 });

package/lib/components/dnd/gridDragPlanner.js

@@ -851,6 +851,18 @@ const findCellByPath = /* @__PURE__ */ __name((layout, path) => {
   }
   return null;
 }, "findCellByPath");
+const findCellByPathOrClosestAncestor = /* @__PURE__ */ __name((layout, path) => {
+  if (!(path == null ? void 0 : path.length)) {
+    return null;
+  }
+  for (let length = path.length; length > 0; length -= 1) {
+    const target = findCellByPath(layout, path.slice(0, length));
+    if (target) {
+      return target;
+    }
+  }
+  return null;
+}, "findCellByPathOrClosestAncestor");
 const removeItemFromGridLayout = /* @__PURE__ */ __name((layout, sourceUid) => {
   const removeFromRows = /* @__PURE__ */ __name((rows) => rows.map((row) => {
     const cellsWithSizes = row.cells.map((cell, index) => {
@@ -918,7 +930,7 @@ const simulateGridLayoutForSlot = /* @__PURE__ */ __name(({
   removeItemFromGridLayout(cloned, sourceUid);
   switch (slot.type) {
     case "column": {
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (!target) {
         break;
       }
@@ -934,7 +946,7 @@ const simulateGridLayoutForSlot = /* @__PURE__ */ __name(({
       break;
     }
     case "empty-column": {
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (target) {
         delete target.cell.rows;
         target.cell.items = [sourceUid];
@@ -942,7 +954,7 @@ const simulateGridLayoutForSlot = /* @__PURE__ */ __name(({
       break;
     }
     case "column-edge": {
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (!target) {
         break;
       }
@@ -969,7 +981,7 @@ const simulateGridLayoutForSlot = /* @__PURE__ */ __name(({
       if (!targetItemUid) {
         break;
       }
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (!(target == null ? void 0 : target.cell.items)) {
         break;
       }

package/lib/data-source/index.d.ts

@@ -90,6 +90,8 @@ export declare class DataSourceManager {
         force: boolean;
     }): Promise<void>;
 }
+export type CollectionFieldInterfaceDataSourceManager = Pick<DataSourceManager, 'collectionFieldInterfaceManager'>;
+export declare function getCollectionFieldInterface(interfaceName: string | undefined, ...dataSourceManagers: Array<CollectionFieldInterfaceDataSourceManager | null | undefined>): any;
 export declare class DataSource {
     dataSourceManager: DataSourceManager;
     collectionManager: CollectionManager;

package/lib/data-source/index.js

@@ -42,6 +42,7 @@ __export(data_source_exports, {
   CollectionManager: () => CollectionManager,
   DataSource: () => DataSource,
   DataSourceManager: () => DataSourceManager,
+  getCollectionFieldInterface: () => getCollectionFieldInterface,
   isFieldInterfaceMatch: () => isFieldInterfaceMatch,
   jioToJoiSchema: () => import_jioToJoiSchema.jioToJoiSchema
 });
@@ -279,6 +280,20 @@ const _DataSourceManager = class _DataSourceManager {
 };
 __name(_DataSourceManager, "DataSourceManager");
 let DataSourceManager = _DataSourceManager;
+function getCollectionFieldInterface(interfaceName, ...dataSourceManagers) {
+  if (!interfaceName) {
+    return void 0;
+  }
+  for (const dataSourceManager of dataSourceManagers) {
+    const collectionFieldInterfaceManager = dataSourceManager == null ? void 0 : dataSourceManager.collectionFieldInterfaceManager;
+    const getFieldInterface = collectionFieldInterfaceManager == null ? void 0 : collectionFieldInterfaceManager.getFieldInterface;
+    if (typeof getFieldInterface === "function") {
+      return getFieldInterface.call(collectionFieldInterfaceManager, interfaceName);
+    }
+  }
+  return void 0;
+}
+__name(getCollectionFieldInterface, "getCollectionFieldInterface");
 const _DataSource = class _DataSource {
   dataSourceManager;
   collectionManager;
@@ -982,7 +997,17 @@ const _CollectionField = class _CollectionField {
             abortEarly: false
           });
           if (error) {
-            const message = error.details.map((d) => d.message.replace(/"value"/g, `"${label}"`)).join(", ");
+            const message = error.details.map((d) => {
+              const translated = this.flowEngine.translate(d.type, {
+                ...d.context,
+                ns: "data-source-main",
+                label
+              });
+              if (translated && translated !== d.type) {
+                return translated;
+              }
+              return d.message.replace(/"value"/g, `"${label}"`);
+            }).join(", ");
             return Promise.reject(message);
           }
           return Promise.resolve();
@@ -1002,8 +1027,14 @@ const _CollectionField = class _CollectionField {
     return this.targetCollection.getFields();
   }
   getInterfaceOptions() {
-    const app = this.flowEngine.context.app;
-    return app.dataSourceManager.collectionFieldInterfaceManager.getFieldInterface(this.interface);
+    var _a, _b, _c;
+    const ctx = this.flowEngine.context;
+    return getCollectionFieldInterface(
+      this.interface,
+      (_b = (_a = this.collection) == null ? void 0 : _a.dataSource) == null ? void 0 : _b.dataSourceManager,
+      ctx.dataSourceManager,
+      (_c = ctx.app) == null ? void 0 : _c.dataSourceManager
+    );
   }
   getFilterOperators() {
     var _a;
@@ -1068,6 +1099,7 @@ __name(isFieldInterfaceMatch, "isFieldInterfaceMatch");
   CollectionManager,
   DataSource,
   DataSourceManager,
+  getCollectionFieldInterface,
   isFieldInterfaceMatch,
   jioToJoiSchema
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-alpha.30",
+  "version": "2.1.0-alpha.31",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.0-alpha.30",
-    "@nocobase/shared": "2.1.0-alpha.30",
+    "@nocobase/sdk": "2.1.0-alpha.31",
+    "@nocobase/shared": "2.1.0-alpha.31",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "292ae0ad87f195ed201b274902d21ecd96f5ddd0"
+  "gitHead": "e2bc6b461a9bfd336043069c3211c9c5b01ebcc3"
 }

package/src/components/FormItem.tsx

@@ -19,6 +19,9 @@ interface ExtendedFormItemProps extends FormItemProps {
   showLabel?: boolean;
 }
 
+export const verticalFormItemLabelStyle = { paddingBottom: 0 };
+export const formItemStyle = { marginBottom: 12 };
+
 const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'colon',
   'dependencies',
@@ -73,6 +76,8 @@ export const FormItem = ({
         });
   const { label, labelWrap, colon = true, layout } = rest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
+  const labelColStyle =
+    layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = () => {
     if (!showLabel) return null;
     if (effectiveLabelWrap) {
@@ -118,7 +123,8 @@ export const FormItem = ({
   return (
     <Form.Item
       {...rest}
-      labelCol={{ style: { width: labelWidth } }}
+      style={{ ...formItemStyle, ...rest.style }}
+      labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}

package/src/components/__tests__/FormItem.test.tsx

@@ -0,0 +1,25 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
+
+describe('FormItem', () => {
+  it('keeps vertical label-to-value spacing consistent with v1', () => {
+    expect(verticalFormItemLabelStyle).toEqual({
+      paddingBottom: 0,
+    });
+  });
+
+  it('keeps spacing between form items consistent with v1', () => {
+    expect(formItemStyle).toEqual({
+      marginBottom: 12,
+    });
+  });
+});

package/src/components/__tests__/gridDragPlanner.test.ts

@@ -829,6 +829,52 @@ describe('simulateLayoutForSlot', () => {
     expect(nestedRows[1].sizes).toEqual([12, 12]);
   });
 
+  it('keeps nested column insertion target when removing a sibling collapses the original path', () => {
+    const layout = createLayout(
+      {
+        vyvfw2jw071: [['6ad3ccaabd5', 'ff8b4b57f65']],
+        ablhoqw51gb: [['21b422021b8']],
+      },
+      {
+        vyvfw2jw071: [24],
+        ablhoqw51gb: [24],
+      },
+      ['vyvfw2jw071', 'ablhoqw51gb'],
+    );
+    layout.layout = normalizeGridLayout({
+      rows: layout.rows,
+      sizes: layout.sizes,
+      rowOrder: layout.rowOrder,
+      itemUids: ['6ad3ccaabd5', 'ff8b4b57f65', '21b422021b8'],
+    });
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'll5vo5pzj3u',
+      columnIndex: 0,
+      insertIndex: 1,
+      position: 'after',
+      path: [
+        { rowId: 'vyvfw2jw071', cellId: 'vyvfw2jw071:cell:0' },
+        { rowId: 'll5vo5pzj3u', cellId: 'ghy612j5zzg' },
+      ],
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'ff8b4b57f65', layout });
+
+    expect(result.layout!.rows).toMatchObject([
+      {
+        id: 'vyvfw2jw071',
+        cells: [{ items: ['6ad3ccaabd5', 'ff8b4b57f65'] }],
+      },
+      {
+        id: 'ablhoqw51gb',
+        cells: [{ items: ['21b422021b8'] }],
+      },
+    ]);
+  });
+
   it('treats dragging an item to its own item-edge as no-op', () => {
     const layout = createLayout(
       {

package/src/components/dnd/gridDragPlanner.ts

@@ -1146,6 +1146,21 @@ const findCellByPath = (layout: GridLayoutV2, path?: GridLayoutPath) => {
   return null;
 };
 
+const findCellByPathOrClosestAncestor = (layout: GridLayoutV2, path?: GridLayoutPath) => {
+  if (!path?.length) {
+    return null;
+  }
+
+  for (let length = path.length; length > 0; length -= 1) {
+    const target = findCellByPath(layout, path.slice(0, length));
+    if (target) {
+      return target;
+    }
+  }
+
+  return null;
+};
+
 const removeItemFromGridLayout = (layout: GridLayoutV2, sourceUid: string) => {
   const removeFromRows = (rows: GridRowV2[]): GridRowV2[] =>
     rows
@@ -1231,7 +1246,7 @@ const simulateGridLayoutForSlot = ({
 
   switch (slot.type) {
     case 'column': {
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (!target) {
         break;
       }
@@ -1247,7 +1262,7 @@ const simulateGridLayoutForSlot = ({
       break;
     }
     case 'empty-column': {
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (target) {
         delete target.cell.rows;
         target.cell.items = [sourceUid];
@@ -1255,7 +1270,7 @@ const simulateGridLayoutForSlot = ({
       break;
     }
     case 'column-edge': {
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (!target) {
         break;
       }
@@ -1282,7 +1297,7 @@ const simulateGridLayoutForSlot = ({
       if (!targetItemUid) {
         break;
       }
-      const target = findCellByPath(cloned, targetPath);
+      const target = findCellByPathOrClosestAncestor(cloned, targetPath);
       if (!target?.cell.items) {
         break;
       }

package/src/data-source/__tests__/collection.test.ts

@@ -7,8 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it } from 'vitest';
-import { DataSource, DataSourceManager, isFieldInterfaceMatch } from '../index';
+import { describe, expect, it, vi } from 'vitest';
+import { DataSource, DataSourceManager, getCollectionFieldInterface, isFieldInterfaceMatch } from '../index';
 import { FlowEngine } from '../../flowEngine';
 
 describe('Collection/Field helpers', () => {
@@ -55,4 +55,43 @@ describe('Collection/Field helpers', () => {
     const field = posts.getFieldByPath('category.name');
     expect(field?.name).toBe('name');
   });
+
+  it('resolves collection field interfaces from the first available manager', () => {
+    const first = { collectionFieldInterfaceManager: { getFieldInterface: vi.fn((name) => ({ name })) } };
+    const second = { collectionFieldInterfaceManager: { getFieldInterface: vi.fn((name) => ({ name })) } };
+
+    expect(getCollectionFieldInterface('input', {}, first, second)).toEqual({ name: 'input' });
+    expect(first.collectionFieldInterfaceManager.getFieldInterface).toHaveBeenCalledWith('input');
+    expect(second.collectionFieldInterfaceManager.getFieldInterface).not.toHaveBeenCalled();
+    expect(getCollectionFieldInterface(undefined, first)).toBeUndefined();
+    expect(getCollectionFieldInterface('input', {})).toBeUndefined();
+  });
+
+  it('uses collection field interface resolver from getInterfaceOptions', () => {
+    const { ds, m } = setup();
+    const ctx = m.flowEngine.context;
+    const getOwnerFieldInterface = vi.fn((name: string) => ({ name, source: 'owner' }));
+    const getLegacyFieldInterface = vi.fn((name: string) => ({ name, source: 'legacy' }));
+
+    ctx.defineProperty('app', {
+      value: {
+        dataSourceManager: {
+          collectionFieldInterfaceManager: {
+            getFieldInterface: getLegacyFieldInterface,
+          },
+        },
+      },
+    });
+    ds.addCollection({
+      name: 'posts',
+      fields: [{ name: 'title', type: 'string', interface: 'input' }],
+    });
+
+    const field = ds.getCollection('posts')!.getField('title')!;
+    expect(field.getInterfaceOptions()).toEqual({ name: 'input', source: 'legacy' });
+
+    m.setCollectionFieldInterfaceManager({ getFieldInterface: getOwnerFieldInterface });
+    expect(field.getInterfaceOptions()).toEqual({ name: 'input', source: 'owner' });
+    expect(getLegacyFieldInterface).toHaveBeenCalledTimes(1);
+  });
 });

package/src/data-source/__tests__/index.test.ts

@@ -80,6 +80,40 @@ describe('DataSource & Collection APIs', () => {
     ).toThrow(/circular/);
   });
 
+  it('translates validation messages from data-source-main in component rules', async () => {
+    const { m, engine } = makeManager();
+    engine.context.i18n = {
+      t: (key: string, options?: Record<string, any>) => {
+        if (key === 'string.length' && options?.ns === 'data-source-main') {
+          return `${options.label} 长度必须为 ${options.limit} 个字符`;
+        }
+        return key;
+      },
+    } as any;
+
+    const ds = new DataSource({ key: 'main' });
+    m.addDataSource(ds);
+    ds.addCollection({
+      name: 'posts',
+      fields: [
+        {
+          name: 'title',
+          type: 'string',
+          interface: 'text',
+          title: '单行文本',
+          validation: {
+            type: 'string',
+            rules: [{ name: 'length', args: { limit: 18 } }],
+          },
+        },
+      ],
+    });
+
+    const rules = ds.getCollection('posts')!.getField('title')!.getComponentProps().rules;
+
+    await expect(rules[0].validator({}, '123')).rejects.toBe('单行文本 长度必须为 18 个字符');
+  });
+
   it('ensureLoaded, reload and data source events work for main loader', async () => {
     const { m, engine } = makeManager();
     const loadedListener = vi.fn();

package/src/data-source/index.ts

@@ -295,6 +295,29 @@ export class DataSourceManager {
   }
 }
 
+export type CollectionFieldInterfaceDataSourceManager = Pick<DataSourceManager, 'collectionFieldInterfaceManager'>;
+
+export function getCollectionFieldInterface(
+  interfaceName: string | undefined,
+  ...dataSourceManagers: Array<CollectionFieldInterfaceDataSourceManager | null | undefined>
+) {
+  if (!interfaceName) {
+    return undefined;
+  }
+
+  // TODO: Once legacy client is removed and all runtimes share the client-v2 flow-engine
+  // DataSourceManager, callers should only pass the flow-engine context DataSourceManager.
+  for (const dataSourceManager of dataSourceManagers) {
+    const collectionFieldInterfaceManager = dataSourceManager?.collectionFieldInterfaceManager;
+    const getFieldInterface = collectionFieldInterfaceManager?.getFieldInterface;
+    if (typeof getFieldInterface === 'function') {
+      return getFieldInterface.call(collectionFieldInterfaceManager, interfaceName);
+    }
+  }
+
+  return undefined;
+}
+
 export class DataSource {
   dataSourceManager: DataSourceManager;
   collectionManager: CollectionManager;
@@ -1112,7 +1135,21 @@ export class CollectionField {
           });
 
           if (error) {
-            const message = error.details.map((d: any) => d.message.replace(/"value"/g, `"${label}"`)).join(', ');
+            const message = error.details
+              .map((d: any) => {
+                const translated = this.flowEngine.translate(d.type, {
+                  ...d.context,
+                  ns: 'data-source-main',
+                  label,
+                });
+
+                if (translated && translated !== d.type) {
+                  return translated;
+                }
+
+                return d.message.replace(/"value"/g, `"${label}"`);
+              })
+              .join(', ');
             return Promise.reject(message);
           }
 
@@ -1135,8 +1172,13 @@ export class CollectionField {
   }
 
   getInterfaceOptions() {
-    const app = this.flowEngine.context.app;
-    return app.dataSourceManager.collectionFieldInterfaceManager.getFieldInterface(this.interface);
+    const ctx = this.flowEngine.context;
+    return getCollectionFieldInterface(
+      this.interface,
+      this.collection?.dataSource?.dataSourceManager,
+      ctx.dataSourceManager,
+      ctx.app?.dataSourceManager,
+    );
   }
 
   getFilterOperators() {