@nocobase/client-v2 2.1.0-beta.34 → 2.1.0-beta.36

package/src/flow/actions/__tests__/dataScopeFormValueClear.test.ts

@@ -0,0 +1,96 @@
+/**
+ * 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, vi } from 'vitest';
+import { EventEmitter } from 'events';
+import { ensureFormValueDrivenDataScopeClear } from '../../utils/dataScopeFormValueClear';
+
+describe('ensureFormValueDrivenDataScopeClear', () => {
+  it('clears field value when referenced formValues dependency changes', () => {
+    const emitter = new EventEmitter();
+    const formBlock = {
+      uid: 'form-1',
+      disposed: false,
+      emitter,
+      context: { form: {} },
+    };
+
+    const onChange = vi.fn();
+    const model: any = {
+      disposed: false,
+      props: {
+        value: { id: 1 },
+        onChange,
+      },
+      context: {
+        blockModel: formBlock,
+      },
+    };
+
+    const ctx: any = {
+      model,
+      flowKey: 'selectSettings',
+    };
+
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'schoolId', operator: '$eq', value: '{{ ctx.formValues.school.id }}' }],
+    };
+
+    ensureFormValueDrivenDataScopeClear(ctx, filter);
+
+    emitter.emit('formValuesChange', {
+      changedValues: { school: { id: 2 } },
+      allValues: { school: { id: 2 }, class: { id: 1 } },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('does not clear when dependency did not change', () => {
+    const emitter = new EventEmitter();
+    const formBlock = {
+      uid: 'form-1',
+      disposed: false,
+      emitter,
+      context: { form: {} },
+    };
+
+    const onChange = vi.fn();
+    const model: any = {
+      disposed: false,
+      props: {
+        value: { id: 1 },
+        onChange,
+      },
+      context: {
+        blockModel: formBlock,
+      },
+    };
+
+    const ctx: any = {
+      model,
+      flowKey: 'selectSettings',
+    };
+
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'schoolId', operator: '$eq', value: '{{ ctx.formValues.school.id }}' }],
+    };
+
+    ensureFormValueDrivenDataScopeClear(ctx, filter);
+
+    emitter.emit('formValuesChange', {
+      changedValues: { class: null },
+      allValues: { school: { id: 2 }, class: null },
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/flow/actions/dataScope.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import { FilterGroup, VariableFilterItem } from '../components/filter';
 import { FieldModel } from '../models/base/FieldModel';
 import { normalizeDataScopeFilter } from './dataScopeFilter';
+import { ensureFormValueDrivenDataScopeClear } from '../utils/dataScopeFormValueClear';
 
 export const dataScope = defineAction({
   name: 'dataScope',
@@ -54,6 +55,8 @@ export const dataScope = defineAction({
     const resolvedFilter = await ctx.resolveJsonTemplate(params.filter);
     const filter = normalizeDataScopeFilter(params.filter, resolvedFilter);
 
+    ensureFormValueDrivenDataScopeClear(ctx as any, params.filter);
+
     if (isEmptyFilter(filter)) {
       resource.removeFilterGroup(ctx.model.uid);
     } else {

package/src/flow/actions/filterFormDefaultValues.tsx

@@ -122,12 +122,11 @@ const FilterFormDefaultValuesUI = observer(
         rootCollection={getCollectionFromModel(ctx.model)}
         value={value}
         onChange={handleChange}
-        fixedMode="default"
-        showCondition={false}
         showValueEditorWhenNoField
         getValueInputProps={getValueInputProps}
         isTitleFieldCandidate={isTitleFieldCandidate}
         onSyncAssociationTitleField={onSyncAssociationTitleField}
+        enableDateVariableAsConstant
       />
     );
   },

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -371,15 +371,12 @@ export const AdminLayoutComponent = observer((props: any) => {
   const [allAccessRoutes, setAllAccessRoutes] = useState<NocoBaseDesktopRoute[]>(
     () => flowEngine.context.routeRepository?.listAccessible?.() || [],
   );
-  const screens = Grid.useBreakpoint();
-  const isMobileViewport =
-    screens.md === false || (screens.md === undefined && typeof window !== 'undefined' && window.innerWidth < 768);
   const location = useLocation();
   const { token } = antdTheme.useToken();
   const customToken = token as CustomToken;
   const isMobileLayout = !!adminLayoutModel?.isMobileLayout;
   const menuRouteRefreshVersion = adminLayoutModel?.menuRouteRefreshVersion || 0;
-  const isMobileSider = isMobileLayout || isMobileViewport;
+  const isMobileSider = isMobileLayout;
   const [collapsed, setCollapsed] = useState(isMobileSider);
   const [preferredFlowSettingsEnabled, setPreferredFlowSettingsEnabled] = useState(() => readFlowSettingsPreference());
   const [route, setRoute] = useState<{ path: string; children: AdminLayoutMenuNode[] }>({

package/src/flow/admin-shell/admin-layout/HelpLite.tsx

@@ -9,45 +9,19 @@
 
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
-import { observer, useFlowEngine } from '@nocobase/flow-engine';
+import { observer } from '@nocobase/flow-engine';
 import { parseHTML } from '@nocobase/utils/client';
 import { Dropdown, Menu, Popover, theme as antdTheme } from 'antd';
 import type { MenuItemType, MenuDividerType } from 'antd/es/menu/interface';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePlugin } from '../../../flow-compat';
+import { useCurrentAppInfo } from '../../../hooks';
 import type { CustomToken } from '../../../theme';
+import { getAppVersionHTML } from '../../../utils';
 
 type SettingsMenuItemType = MenuItemType | MenuDividerType;
 
-/**
- * 读取当前应用信息，避免继续依赖旧的 CurrentAppInfoProvider。
- */
-function useCurrentAppInfoLite() {
-  const flowEngine = useFlowEngine();
-  const [data, setData] = useState<any>();
-
-  useEffect(() => {
-    let active = true;
-
-    Promise.resolve(flowEngine.context.appInfo)
-      .then((info) => {
-        if (active) {
-          setData(info);
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [flowEngine]);
-
-  return data;
-}
-
 const helpClassName = css`
   display: inline-block;
   vertical-align: top;
@@ -60,7 +34,7 @@ const helpClassName = css`
 
 const SettingsMenu: React.FC = () => {
   const { t } = useTranslation();
-  const appInfo = useCurrentAppInfoLite();
+  const appInfo = useCurrentAppInfo();
   const { token } = antdTheme.useToken();
   const isSimplifiedChinese = appInfo?.lang === 'zh-CN';
 
@@ -136,7 +110,7 @@ export const HelpLite = observer(
     const { token } = antdTheme.useToken();
     const customToken = token as CustomToken;
     const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand');
-    const appInfo = useCurrentAppInfoLite();
+    const appInfo = useCurrentAppInfo();
 
     const icon = (
       <span
@@ -156,7 +130,7 @@ export const HelpLite = observer(
     );
 
     if (customBrandPlugin?.options?.options?.about) {
-      const appVersion = `<span class="nb-app-version">v${appInfo?.version}</span>`;
+      const appVersion = getAppVersionHTML(appInfo?.version);
       const content = parseHTML(customBrandPlugin.options.options.about, { appVersion });
 
       return (

package/src/flow/components/BlockItemCard.tsx

@@ -91,7 +91,7 @@ const useBlockHeight = ({
     const padding = getPadding(root);
     const addBlockContainer = getAddBlockContainer(root);
     const pageTop = rootRect.top + padding.top;
-    const topOffset = Math.min(Math.max(0, cardRect.top - pageTop), 0);
+    const topOffset = Math.max(0, cardRect.top - pageTop);
     let bottomOffset = padding.bottom + ctx.themeToken.marginBlock;
     if (addBlockContainer) {
       const gapBetween = ctx.themeToken.marginBlock;
@@ -99,7 +99,7 @@ const useBlockHeight = ({
     }
     const nextHeight = Math.max(
       0,
-      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset),
+      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset - 1),
     );
     setFullHeight((prev) => (prev === nextHeight ? prev : nextHeight));
   }, [heightMode, cardRef]);

package/src/flow/models/base/ActionModel.tsx

@@ -48,18 +48,19 @@ ActionModel.registerFlow({
                 title: tExpr('Button icon'),
               }
             : undefined,
+          iconOnly: ctx.model.enableEditIcon
+            ? {
+                'x-decorator': 'FormItem',
+                'x-component': 'Switch',
+                title: tExpr('Icon only'),
+              }
+            : undefined,
           type: ctx.model.enableEditType
             ? {
                 'x-decorator': 'FormItem',
                 'x-component': 'Radio.Group',
                 title: tExpr('Button type'),
-                enum: [
-                  { value: 'default', label: '{{t("Default")}}' },
-                  { value: 'primary', label: '{{t("Primary")}}' },
-                  { value: 'dashed', label: '{{t("Dashed")}}' },
-                  { value: 'link', label: '{{t("Link")}}' },
-                  { value: 'text', label: '{{t("Text")}}' },
-                ],
+                enum: ctx.model.buttonTypeOptions,
               }
             : undefined,
           danger: ctx.model.enableEditDanger

package/src/flow/models/base/ActionModelCore.tsx

@@ -50,12 +50,13 @@ export const ActionSceneEnum = {
 };
 
 export class ActionModel<T extends DefaultStructure = DefaultStructure> extends FlowModel<T> {
-  declare props: ButtonProps & { tooltip?: string };
+  declare props: ButtonProps & { tooltip?: string; iconOnly?: boolean };
   declare scene: ActionSceneType;
 
-  defaultProps: ButtonProps & { tooltip?: string } = {
+  defaultProps: ButtonProps & { tooltip?: string; iconOnly?: boolean } = {
     type: 'default',
     title: tExpr('Action'),
+    iconOnly: false,
   };
 
   enableEditTooltip = true;
@@ -64,6 +65,13 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   enableEditType = true;
   enableEditDanger = true;
   enableEditColor = false;
+  buttonTypeOptions = [
+    { value: 'default', label: '{{t("Default")}}' },
+    { value: 'primary', label: '{{t("Primary")}}' },
+    { value: 'dashed', label: '{{t("Dashed")}}' },
+    { value: 'link', label: '{{t("Link")}}' },
+    { value: 'text', label: '{{t("Text")}}' },
+  ];
 
   static _getScene() {
     return _.castArray(this['scene'] || []);
@@ -133,12 +141,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   }
 
   renderButton() {
-    const props = this.props;
+    const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
 
     return (
       <Button {...props} onClick={this.onClick.bind(this)} icon={icon}>
-        {props.children || this.getTitle()}
+        {iconOnly ? null : props.children || this.getTitle()}
       </Button>
     );
   }
@@ -152,13 +160,13 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   }
 
   renderHiddenInConfig(): React.ReactNode | undefined {
-    const props = this.props;
+    const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
     if (this.forbidden) {
       return (
         <ActionWithoutPermission>
           <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-            {props.children || this.getTitle()}
+            {iconOnly ? null : props.children || this.getTitle()}
           </Button>
         </ActionWithoutPermission>
       );
@@ -166,7 +174,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return (
       <Tooltip title={this.context.t('The button is hidden and only visible when the UI Editor is active')}>
         <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-          {props.children || this.getTitle()}
+          {iconOnly ? null : props.children || this.getTitle()}
         </Button>
       </Tooltip>
     );

package/src/flow/models/base/GridModel.tsx

@@ -359,6 +359,58 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     return rowElement?.parentElement?.clientWidth || fallbackWidth;
   }
 
+  private prunePlaceholderOnlyRows(layout: GridLayoutV2): GridLayoutV2 {
+    type RowCellEntry = {
+      cell: GridCellV2;
+      size: number;
+      hasRealItem: boolean;
+    };
+
+    const pruneRows = (rows: GridRowV2[]): GridRowV2[] => {
+      return rows
+        .map((row) => {
+          const cellsWithSizes = row.cells
+            .map((cell, index) => {
+              const size = row.sizes?.[index] ?? 1;
+              if (cell.rows?.length) {
+                const childRows = pruneRows(cell.rows);
+                if (childRows.length) {
+                  return { cell: { ...cell, rows: childRows }, size, hasRealItem: true };
+                }
+                return null;
+              }
+
+              const items = cell.items || [];
+              const hasRealItem = items.some((uid) => uid !== EMPTY_COLUMN_UID);
+              const hasEmptyPlaceholder = items.includes(EMPTY_COLUMN_UID);
+              if (hasRealItem || hasEmptyPlaceholder) {
+                return { cell, size, hasRealItem };
+              }
+              return null;
+            })
+            .filter(Boolean) as RowCellEntry[];
+
+          if (!cellsWithSizes.some((entry) => entry.hasRealItem)) {
+            return null;
+          }
+
+          return {
+            ...row,
+            cells: cellsWithSizes.map((entry) => entry.cell),
+            sizes: cellsWithSizes.map((entry) => entry.size),
+          };
+        })
+        .filter(Boolean) as GridRowV2[];
+    };
+
+    return normalizeGridLayout({
+      layout: { ...layout, rows: pruneRows(layout.rows || []) },
+      itemUids: this.getItemUids(),
+      gridUid: this.uid,
+      logger: console,
+    });
+  }
+
   private resizeGridLayout({
     direction,
     resizeDistance,
@@ -428,7 +480,9 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     this.emitter.on('onSubModelDestroyed', (model: FlowModel) => {
       const modelUid = model.uid;
       this.resetRows(true);
-      this.setGridStepLayout(this.props.layout);
+      const layout = this.prunePlaceholderOnlyRows(this.props.layout);
+      this.setGridStepLayout(layout);
+      this.syncLayoutProps(layout);
 
       // 删除筛选配置
       this.context.filterManager?.removeFilterConfig({ targetId: modelUid });
@@ -855,6 +909,7 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
    * 运行态按可见 block 过滤行/列，避免“整行都是 hidden block”但依然保留行间距占位。
    * - 配置态（flowSettingsEnabled）保持原始 rows/sizes 以便拖拽和布局编辑。
    * - 运行态仅在判断为“整列/整行都不可见”时做过滤，不写回 props/stepParams，布局元数据保持不变。
+   * - 空列是拖拽缩窄后保存的布局占位，运行态需要保留其宽度，但 Grid 渲染层不会渲染其内容。
    */
   private getVisibleLayout() {
     const rawLayout = this.normalizeLayoutFromSource();
@@ -877,51 +932,53 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     }
 
     const items = this.subModels?.items || [];
-    if (!items.length) {
-      return { layout: baseLayout, rows: baseProjection.rows, sizes: baseProjection.sizes };
-    }
-
     const modelByUid = new Map(items.map((m: FlowModel) => [m.uid, m]));
+    type VisibleCellEntry = {
+      cell: GridLayoutV2['rows'][number]['cells'][number];
+      size: number;
+      hasVisibleContent: boolean;
+    };
 
     const filterRows = (rows: GridLayoutV2['rows']): GridLayoutV2['rows'] => {
       return rows
         .map((row) => {
-          const cells: GridLayoutV2['rows'][number]['cells'] = [];
-          const keptSizes: number[] = [];
-
-          row.cells.forEach((cell, index) => {
-            const sourceSize = row.sizes?.[index];
-            const keepSize = Number.isFinite(sourceSize) && sourceSize > 0 ? sourceSize : 1;
-            if (cell.rows) {
-              const childRows = filterRows(cell.rows);
-              if (childRows.length) {
-                cells.push({ ...cell, rows: childRows });
-                keptSizes.push(keepSize);
+          const cellsWithSizes = row.cells
+            .map((cell, index) => {
+              const sourceSize = row.sizes?.[index];
+              const keepSize = Number.isFinite(sourceSize) && sourceSize > 0 ? sourceSize : 1;
+              if (cell.rows) {
+                const childRows = filterRows(cell.rows);
+                if (childRows.length) {
+                  return { cell: { ...cell, rows: childRows }, size: keepSize, hasVisibleContent: true };
+                }
+                return null;
               }
-              return;
-            }
 
-            const cellItems = (cell.items || []).filter((uid) => {
-              if (uid === EMPTY_COLUMN_UID) {
-                return false;
+              const cellItems = (cell.items || []).filter((uid) => {
+                if (uid === EMPTY_COLUMN_UID) {
+                  return true;
+                }
+                return modelByUid.get(uid)?.hidden !== true;
+              });
+              const hasVisibleContent = cellItems.some((uid) => {
+                if (uid === EMPTY_COLUMN_UID) return false;
+                const model = modelByUid.get(uid);
+                return !model || !model.hidden;
+              });
+              const hasEmptyPlaceholder = cellItems.includes(EMPTY_COLUMN_UID);
+              if (hasVisibleContent || hasEmptyPlaceholder) {
+                return { cell: { ...cell, items: cellItems }, size: keepSize, hasVisibleContent };
               }
-              return modelByUid.get(uid)?.hidden !== true;
-            });
-            const hasVisibleItem = cellItems.some((uid) => {
-              const model = modelByUid.get(uid);
-              return !model || !model.hidden;
-            });
-            if (hasVisibleItem) {
-              cells.push({ ...cell, items: cellItems });
-              keptSizes.push(keepSize);
-            }
-          });
-
-          return cells.length
+              return null;
+            })
+            .filter(Boolean) as VisibleCellEntry[];
+          const hasVisibleContent = cellsWithSizes.some((entry) => entry.hasVisibleContent);
+
+          return hasVisibleContent
             ? {
                 ...row,
-                cells,
-                sizes: keptSizes,
+                cells: cellsWithSizes.map((entry) => entry.cell),
+                sizes: cellsWithSizes.map((entry) => entry.size),
               }
             : null;
         })

package/src/flow/models/base/__tests__/GridModel.visibleLayout.test.ts

@@ -9,7 +9,7 @@
 
 import { EMPTY_COLUMN_UID, FlowEngine } from '@nocobase/flow-engine';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { GridModel } from '../GridModel';
+import { GRID_FLOW_KEY, GRID_STEP, GridModel } from '../GridModel';
 
 describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
   let engine: FlowEngine;
@@ -228,8 +228,8 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     expect(sizes.row1).toEqual([10, 14]);
   });
 
-  it('ignores EMPTY_COLUMN uid in runtime mode without crashing', async () => {
-    await engine.flowSettings.disable();
+  it('preserves EMPTY_COLUMN placeholder width in runtime mode', () => {
+    engine.flowSettings.disable();
 
     const visible = engine.createModel({ use: 'FlowModel', uid: 'v' });
 
@@ -237,11 +237,18 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
       use: 'GridModel',
       uid: 'grid-8',
       props: {
-        rows: {
-          row1: [[EMPTY_COLUMN_UID, 'ghost', 'v'], ['ghost-2']],
-        },
-        sizes: {
-          row1: [8, 16],
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'row1',
+              cells: [
+                { id: 'cell1', items: ['v'] },
+                { id: 'cell2', items: [EMPTY_COLUMN_UID] },
+              ],
+              sizes: [8, 16],
+            },
+          ],
         },
       },
       structure: {} as any,
@@ -250,8 +257,73 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     (model as any).subModels = { items: [visible] };
 
     const { rows, sizes } = (model as any).getVisibleLayout();
-    // 新布局归一化会移除不在 subModels.items 中的 uid，EMPTY_COLUMN_UID 也不会在运行态显示
-    expect(rows.row1).toEqual([['v']]);
-    expect(sizes.row1).toEqual([24]);
+    // 空列是拖拽缩窄区块后的布局占位；运行态也要保留其宽度，避免剩余区块被拉满整行。
+    expect(rows.row1).toEqual([['v'], [EMPTY_COLUMN_UID]]);
+    expect(sizes.row1).toEqual([8, 16]);
+  });
+
+  it('removes rows that only contain EMPTY_COLUMN placeholders in runtime mode when there are no items', () => {
+    engine.flowSettings.disable();
+
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-9',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'row1',
+              cells: [{ id: 'cell1', items: [EMPTY_COLUMN_UID] }],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+
+    (model as any).subModels = { items: [] };
+
+    const { rows, sizes } = (model as any).getVisibleLayout();
+    expect(rows).toEqual({});
+    expect(sizes).toEqual({});
+  });
+
+  it('removes the placeholder-only row after the last real item in the row is deleted', () => {
+    engine.flowSettings.disable();
+
+    const visible = engine.createModel({ use: 'FlowModel', uid: 'v' });
+    const layout = {
+      version: 2 as const,
+      rows: [
+        {
+          id: 'row1',
+          cells: [
+            { id: 'cell1', items: ['v'] },
+            { id: 'cell2', items: [EMPTY_COLUMN_UID] },
+          ],
+          sizes: [8, 16],
+        },
+      ],
+    };
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-10',
+      props: { layout },
+      structure: {} as any,
+    });
+    (model as any).subModels = { items: [visible] };
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, { layout });
+    model.syncLayoutProps(model.getGridLayout());
+    model.onMount();
+
+    (model as any).subModels = { items: [] };
+    model.emitter.emit('onSubModelDestroyed', visible);
+
+    expect(model.props.rows).toEqual({});
+    expect(model.props.sizes).toEqual({});
+    expect(model.props.layout.rows).toEqual([]);
+    expect(model.getStepParams(GRID_FLOW_KEY, GRID_STEP).layout.rows).toEqual([]);
   });
 });

package/src/flow/models/blocks/details/DetailsItemModel.tsx

@@ -227,6 +227,8 @@ export class DetailsItemModel extends DisplayItemModel<{
 
 DetailsItemModel.define({
   label: tExpr('Display fields'),
+  searchable: true,
+  searchPlaceholder: tExpr('Search fields'),
   sort: 100,
 });