@nocobase/client-v2 2.1.0-beta.44 → 2.1.0-beta.45

package/src/flow/models/blocks/form/__tests__/FormItemModel.defineChildren.test.ts

@@ -12,7 +12,7 @@ import { FlowEngine, type FlowModelContext, type SubModelItem } from '@nocobase/
 // Import from the aggregate to preserve the model initialization order used by adjacent tests.
 import { FormItemModel, FormJSFieldItemModel, InputFieldModel, JSEditableFieldModel } from '../../../..';
 
-function createFormMenuContext(prefixFieldPath = 'roles') {
+function createFormMenuContext(prefixFieldPath = 'roles', collectionName = 'roles') {
   const engine = new FlowEngine();
   engine.registerModels({
     FormItemModel,
@@ -36,15 +36,29 @@ function createFormMenuContext(prefixFieldPath = 'roles') {
     fields: [
       { name: 'id', type: 'integer', interface: 'number', title: 'ID' },
       { name: 'name', type: 'string', interface: 'input', title: 'Name' },
+      { name: 'department', type: 'belongsTo', interface: 'm2o', target: 'departments', title: 'Department' },
     ],
   });
+  dataSource.addCollection({
+    name: 'departments',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'name', type: 'string', interface: 'input', title: 'Name' },
+      { name: 'company', type: 'belongsTo', interface: 'm2o', target: 'companies', title: 'Company' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'companies',
+    filterTargetKey: 'id',
+    fields: [{ name: 'name', type: 'string', interface: 'input', title: 'Name' }],
+  });
 
   const blockModel = engine.createModel({ use: 'FlowModel', uid: 'users-form-block' });
   (blockModel as any).collection = dataSource.getCollection('users');
 
   const gridModel = engine.createModel({ use: 'FlowModel', uid: 'users-form-grid' });
   gridModel.context.defineProperty('blockModel', { value: blockModel });
-  gridModel.context.defineProperty('collection', { value: dataSource.getCollection('roles') });
+  gridModel.context.defineProperty('collection', { value: dataSource.getCollection(collectionName) });
   gridModel.context.defineProperty('prefixFieldPath', { value: prefixFieldPath });
 
   return gridModel.context as FlowModelContext;
@@ -105,4 +119,15 @@ describe('FormItemModel defineChildren', () => {
 
     expect((jsNameItem?.toggleable as (model: any) => boolean)(createModelLike(normalCreateOptions))).toBe(true);
   });
+
+  it('hides association fields after two association levels in form add-field menus', async () => {
+    const ctx = createFormMenuContext('roles.department', 'departments');
+    const formItems = FormItemModel.defineChildren(ctx) as SubModelItem[];
+    const jsItems = (await FormJSFieldItemModel.defineChildren(ctx)) as SubModelItem[];
+
+    expect(formItems.map((item) => item.key)).toContain('roles.department.name');
+    expect(formItems.map((item) => item.key)).not.toContain('roles.department.company');
+    expect(jsItems.map((item) => item.key)).toContain('roles.department.name');
+    expect(jsItems.map((item) => item.key)).not.toContain('roles.department.company');
+  });
 });

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -47,7 +47,7 @@ export function FieldDeletePlaceholder(props: any) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const content = t(`The {{type}} "{{name}}" may have been deleted. Please remove this {{blockType}}.`, {
     type: t('Field'),
     name: nameValue,
@@ -71,7 +71,7 @@ function FieldWithoutPermissionPlaceholder() {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const { actionName } = model.forbidden;
   const messageValue = useMemo(() => {
     return t(
@@ -81,7 +81,7 @@ function FieldWithoutPermissionPlaceholder() {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return (
     <Tooltip title={messageValue}>
       <LockOutlined style={{ opacity: '0.3' }} />
@@ -89,6 +89,15 @@ function FieldWithoutPermissionPlaceholder() {
   );
 }
 
+export const TABLE_COLUMN_MIN_WIDTH = 10;
+
+export function normalizeTableColumnWidth(width: number | null | undefined) {
+  if (typeof width === 'number' && width < TABLE_COLUMN_MIN_WIDTH) {
+    return TABLE_COLUMN_MIN_WIDTH;
+  }
+  return width;
+}
+
 export const CustomWidth = ({ setOpen, t, handleChange, defaultValue }) => {
   const [customWidth, setCustomWidth] = useState(defaultValue);
   return (
@@ -104,13 +113,14 @@ export const CustomWidth = ({ setOpen, t, handleChange, defaultValue }) => {
       <Space.Compact block>
         <InputNumber
           placeholder={t('Custom column width')}
+          min={TABLE_COLUMN_MIN_WIDTH}
           value={customWidth}
           onChange={(val) => {
             setCustomWidth(val);
           }}
           style={{ width: '100%', minWidth: 200 }}
         />
-        <Button type="primary" onClick={() => handleChange(customWidth)}>
+        <Button type="primary" onClick={() => handleChange(normalizeTableColumnWidth(customWidth))}>
           OK
         </Button>
       </Space.Compact>
@@ -442,7 +452,7 @@ TableColumnModel.registerFlow({
         width: 150,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     aclCheck: {

package/src/flow/models/blocks/table/TableCustomColumnModel.tsx

@@ -10,7 +10,7 @@
 import { tExpr, FlowModel, ModelRenderMode } from '@nocobase/flow-engine';
 import { Divider } from 'antd';
 import React from 'react';
-import { CustomWidth } from './TableColumnModel';
+import { CustomWidth, normalizeTableColumnWidth } from './TableColumnModel';
 export class TableCustomColumnModel extends FlowModel {
   static renderMode: ModelRenderMode = ModelRenderMode.RenderFunction;
 }
@@ -100,7 +100,7 @@ TableCustomColumnModel.registerFlow({
         width: 150,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     fixed: {

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -12,6 +12,24 @@ import { describe, expect, it, vi } from 'vitest';
 import { TableColumnModel } from '../TableColumnModel';
 
 describe('TableColumnModel sorter settings', () => {
+  it('clamps custom column width to the minimum value', () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-min-width', flowEngine: engine } as any);
+    const widthStep = model.getFlow('tableColumnSettings')?.steps?.width as any;
+    const setProps = vi.fn();
+
+    widthStep.handler(
+      {
+        model: {
+          setProps,
+        },
+      },
+      { width: 0 },
+    );
+
+    expect(setProps).toHaveBeenCalledWith('width', 10);
+  });
+
   it('hides quick edit setting for relation path columns added from association groups', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-relation-path-quick-edit', flowEngine: engine } as any);

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -33,7 +33,7 @@ import React, { useRef, useMemo, useEffect } from 'react';
 import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
 import { DetailsItemModel } from '../../../blocks/details/DetailsItemModel';
-import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
+import { FieldDeletePlaceholder, CustomWidth, normalizeTableColumnWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
@@ -67,7 +67,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const { actionName } = fieldModel.forbidden || {};
   const messageValue = useMemo(() => {
     return t(
@@ -77,7 +77,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return (
     <Tooltip title={messageValue}>
       <LockOutlined style={{ opacity: '0.3' }} />
@@ -100,10 +100,9 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
     const handleChange = useMemo(
       () =>
         debounce((val) => {
-          if (props.onChange) props.onChange(val);
           if (onChange) onChange(val);
         }, 200),
-      [props.onChange, onChange],
+      [onChange],
     );
 
     return <FieldModelRenderer model={model} {...rest} onChange={handleChange} />;
@@ -149,7 +148,7 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
         </Space>
       );
     }
-  }, [collectionField.interface, defaultValue, fieldModel]);
+  }, [collectionField.interface, defaultValue, disabled, fieldModel]);
   return (
     <div
       ref={ref}
@@ -830,7 +829,7 @@ SubTableColumnModel.registerFlow({
         width: 200,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     aclCheck: {