@nocobase/flow-engine 2.1.0-beta.35 → 2.1.0-beta.37

package/lib/FlowContextProvider.d.ts

@@ -8,7 +8,7 @@
  */
 import React from 'react';
 import { FlowContext, FlowEngineContext } from './flowContext';
-import { FlowView } from './views/FlowView';
+import { FlowView, FlowViewer } from './views/FlowView';
 export declare const FlowReactContext: React.Context<FlowContext>;
 export declare const FlowViewContext: React.Context<FlowContext>;
 export declare function FlowContextProvider(props: {
@@ -22,3 +22,7 @@ export declare const FlowViewContextProvider: React.MemoExoticComponent<(props:
 export declare function useFlowContext<T = FlowEngineContext>(): T;
 export declare function useFlowViewContext<T = FlowEngineContext>(): T;
 export declare function useFlowView(): FlowView;
+/**
+ * Access the `FlowViewer` that opens new drawers / modals / pages (`viewer.drawer({...})`, `viewer.modal({...})`, etc.). This is the counterpart to `useFlowView()`: `useFlowView()` returns the *current* mounted view (use it to close yourself, render Header/Footer slots, etc.), while `useFlowViewer()` returns the surface that lets you open a *new* view from inside any flow-context subtree.
+ */
+export declare function useFlowViewer(): FlowViewer;

package/lib/FlowContextProvider.js

@@ -43,7 +43,8 @@ __export(FlowContextProvider_exports, {
   FlowViewContextProvider: () => FlowViewContextProvider,
   useFlowContext: () => useFlowContext,
   useFlowView: () => useFlowView,
-  useFlowViewContext: () => useFlowViewContext
+  useFlowViewContext: () => useFlowViewContext,
+  useFlowViewer: () => useFlowViewer
 });
 module.exports = __toCommonJS(FlowContextProvider_exports);
 var import_react = __toESM(require("react"));
@@ -70,6 +71,11 @@ function useFlowView() {
   return ctx.view;
 }
 __name(useFlowView, "useFlowView");
+function useFlowViewer() {
+  const ctx = useFlowContext();
+  return ctx.viewer;
+}
+__name(useFlowViewer, "useFlowViewer");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FlowContextProvider,
@@ -78,5 +84,6 @@ __name(useFlowView, "useFlowView");
   FlowViewContextProvider,
   useFlowContext,
   useFlowView,
-  useFlowViewContext
+  useFlowViewContext,
+  useFlowViewer
 });

package/lib/components/subModel/LazyDropdown.js

@@ -260,6 +260,21 @@ const normalizeOpenKeys = /* @__PURE__ */ __name((nextOpenKeys) => {
   }
   return nextOpenKeys.filter((key) => latestKey === key || latestKey.startsWith(`${key}/`));
 }, "normalizeOpenKeys");
+const getLabelSearchText = /* @__PURE__ */ __name((label) => {
+  if (label === null || label === void 0 || typeof label === "boolean") {
+    return "";
+  }
+  if (typeof label === "string" || typeof label === "number") {
+    return String(label);
+  }
+  if (Array.isArray(label)) {
+    return label.map(getLabelSearchText).join(" ");
+  }
+  if (import_react.default.isValidElement(label)) {
+    return getLabelSearchText(label.props.children);
+  }
+  return "";
+}, "getLabelSearchText");
 const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchValue, menuVisible, t, updateSearchValue) => ({
   key: `${searchKey}-search`,
   type: "group",
@@ -378,13 +393,9 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
     const currentSearchValue = searchValues[searchKey] || "";
     const filteredChildren = currentSearchValue ? (/* @__PURE__ */ __name(function deepFilter(items2) {
       const searchText = currentSearchValue.toLowerCase();
-      const tryString = /* @__PURE__ */ __name((v) => {
-        if (!v) return "";
-        return typeof v === "string" ? v : String(v);
-      }, "tryString");
       return items2.map((child) => {
-        const labelStr = tryString(child.label).toLowerCase();
-        const selfMatch = labelStr.includes(searchText) || child.key && String(child.key).toLowerCase().includes(searchText);
+        const labelStr = getLabelSearchText(child.label).toLowerCase();
+        const selfMatch = labelStr.includes(searchText);
         if (child.type === "group" && Array.isArray(child.children)) {
           const nested = deepFilter(child.children);
           if (selfMatch || nested.length > 0) {

package/lib/components/subModel/utils.js

@@ -172,7 +172,7 @@ function buildSubModelItems(subModelBaseClass, exclude = []) {
 __name(buildSubModelItems, "buildSubModelItems");
 function buildSubModelGroups(subModelBaseClasses = []) {
   return async (ctx) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const items = [];
     const exclude = [];
     for (const subModelBaseClass of subModelBaseClasses) {
@@ -203,11 +203,15 @@ function buildSubModelGroups(subModelBaseClasses = []) {
       const baseKey = typeof subModelBaseClass === "string" ? subModelBaseClass : BaseClass.name;
       const menuType = ((_b = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _b.menuType) || "group";
       const groupSort = ((_c = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _c.sort) ?? 1e3;
+      const searchable = !!((_d = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _d.searchable);
+      const searchPlaceholder = (_e = BaseClass == null ? void 0 : BaseClass.meta) == null ? void 0 : _e.searchPlaceholder;
       if (menuType === "submenu") {
         items.push({
           key: baseKey,
           label: groupLabel,
           sort: groupSort,
+          searchable,
+          searchPlaceholder,
           children
         });
       } else {
@@ -216,6 +220,8 @@ function buildSubModelGroups(subModelBaseClasses = []) {
           type: "group",
           label: groupLabel,
           sort: groupSort,
+          searchable,
+          searchPlaceholder,
           children
         });
       }

package/lib/data-source/index.js

@@ -978,7 +978,7 @@ const _CollectionField = class _CollectionField {
       {
         ...import_lodash.default.omit(((_a = this.options.uiSchema) == null ? void 0 : _a["x-component-props"]) || {}, "fieldNames"),
         options: this.enum.length ? this.enum : void 0,
-        mode: this.type === "array" ? "multiple" : void 0,
+        mode: this.interface === "multipleSelect" ? "multiple" : void 0,
         multiple: target ? ["belongsToMany", "hasMany", "belongsToArray"].includes(type) : void 0,
         maxCount: target && !["belongsToMany", "hasMany", "belongsToArray"].includes(type) ? 1 : void 0,
         target,

package/lib/utils/index.d.ts

@@ -29,3 +29,4 @@ export { createEphemeralContext } from './createEphemeralContext';
 export { pruneFilter } from './pruneFilter';
 export { isBeforeRenderFlow } from './flows';
 export { resolveModuleUrl, isCssFile } from './resolveModuleUrl';
+export { randomId } from './randomId';

package/lib/utils/index.js

@@ -74,6 +74,7 @@ __export(utils_exports, {
   prepareRunJsCode: () => import_runjsTemplateCompat.prepareRunJsCode,
   preprocessRunJsTemplates: () => import_runjsTemplateCompat.preprocessRunJsTemplates,
   pruneFilter: () => import_pruneFilter.pruneFilter,
+  randomId: () => import_randomId.randomId,
   resolveCreateModelOptions: () => import_params_resolvers.resolveCreateModelOptions,
   resolveCtxDatePath: () => import_dateVariable.resolveCtxDatePath,
   resolveDefaultParams: () => import_params_resolvers.resolveDefaultParams,
@@ -115,6 +116,7 @@ var import_createEphemeralContext = require("./createEphemeralContext");
 var import_pruneFilter = require("./pruneFilter");
 var import_flows = require("./flows");
 var import_resolveModuleUrl = require("./resolveModuleUrl");
+var import_randomId = require("./randomId");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BLOCK_GROUP_CONFIGS,
@@ -165,6 +167,7 @@ var import_resolveModuleUrl = require("./resolveModuleUrl");
   prepareRunJsCode,
   preprocessRunJsTemplates,
   pruneFilter,
+  randomId,
   resolveCreateModelOptions,
   resolveCtxDatePath,
   resolveDefaultParams,

package/lib/utils/randomId.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+/**
+ * Generate a random base36 identifier with an optional semantic prefix.
+ *
+ * Equivalent in shape to v1's `uid()` from `@formily/shared` (11 chars
+ * of `[0-9a-z]`), with an opt-in prefix appended at the front. v2 forbids
+ * direct `@formily/*` imports in `src/client-v2/`, so this helper is the
+ * single substitute the rest of the codebase should reach for.
+ *
+ * Common semantic prefixes observed across the codebase — pass the one
+ * that matches your domain rather than relying on a default, so the
+ * intent is explicit at the call site:
+ *
+ *   - `s_` — service / settings record (authenticators, channels, …)
+ *   - `v_` — verifier / variable / LLM service
+ *   - `f_` — field
+ *   - `t_` — through table
+ *
+ * Example:
+ *
+ * ```ts
+ * import { randomId } from '@nocobase/flow-engine';
+ *
+ * name: randomId('s_'),  // → 's_keeoaui1ubi'
+ * name: randomId('v_'),  // → 'v_a8f3kp2x9qm'
+ * name: randomId(),      // → 'a8f3kp2x9qm'
+ * ```
+ *
+ * Not cryptographically secure — uses `Math.random()`. Good enough for
+ * unique form names / schema keys, NOT for security tokens.
+ */
+export declare function randomId(prefix?: string, length?: number): string;

package/lib/utils/randomId.js

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var randomId_exports = {};
+__export(randomId_exports, {
+  randomId: () => randomId
+});
+module.exports = __toCommonJS(randomId_exports);
+const CHARSET = "0123456789abcdefghijklmnopqrstuvwxyz";
+function randomId(prefix = "", length = 11) {
+  let id = "";
+  for (let i = 0; i < length; i++) {
+    id += CHARSET[Math.random() * CHARSET.length | 0];
+  }
+  return `${prefix}${id}`;
+}
+__name(randomId, "randomId");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  randomId
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-beta.35",
+  "version": "2.1.0-beta.37",
   "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-beta.35",
-    "@nocobase/shared": "2.1.0-beta.35",
+    "@nocobase/sdk": "2.1.0-beta.37",
+    "@nocobase/shared": "2.1.0-beta.37",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "74310d8b9e9581fcde14b5a93d12b41ddb5bb325"
+  "gitHead": "7132e5b83ecc0e42b54715eaf1429c72bcef34ae"
 }

package/src/FlowContextProvider.tsx

@@ -9,7 +9,7 @@
 
 import React, { createContext, useContext } from 'react';
 import { FlowContext, FlowEngineContext } from './flowContext';
-import { FlowView } from './views/FlowView';
+import { FlowView, FlowViewer } from './views/FlowView';
 
 export const FlowReactContext = createContext<FlowContext>(null);
 export const FlowViewContext = createContext<FlowContext>(null);
@@ -40,3 +40,11 @@ export function useFlowView() {
   const ctx = useFlowContext();
   return ctx.view as FlowView;
 }
+
+/**
+ * Access the `FlowViewer` that opens new drawers / modals / pages (`viewer.drawer({...})`, `viewer.modal({...})`, etc.). This is the counterpart to `useFlowView()`: `useFlowView()` returns the *current* mounted view (use it to close yourself, render Header/Footer slots, etc.), while `useFlowViewer()` returns the surface that lets you open a *new* view from inside any flow-context subtree.
+ */
+export function useFlowViewer() {
+  const ctx = useFlowContext();
+  return ctx.viewer as FlowViewer;
+}

package/src/components/subModel/LazyDropdown.tsx

@@ -368,6 +368,22 @@ const normalizeOpenKeys = (nextOpenKeys: string[]) => {
   return nextOpenKeys.filter((key) => latestKey === key || latestKey.startsWith(`${key}/`));
 };
 
+const getLabelSearchText = (label: React.ReactNode): string => {
+  if (label === null || label === undefined || typeof label === 'boolean') {
+    return '';
+  }
+  if (typeof label === 'string' || typeof label === 'number') {
+    return String(label);
+  }
+  if (Array.isArray(label)) {
+    return label.map(getLabelSearchText).join(' ');
+  }
+  if (React.isValidElement(label)) {
+    return getLabelSearchText(label.props.children);
+  }
+  return '';
+};
+
 const createSearchItem = (
   item: Item,
   searchKey: string,
@@ -532,15 +548,10 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     const filteredChildren = currentSearchValue
       ? (function deepFilter(items: Item[]): Item[] {
           const searchText = currentSearchValue.toLowerCase();
-          const tryString = (v: any) => {
-            if (!v) return '';
-            return typeof v === 'string' ? v : String(v);
-          };
           return items
             .map((child) => {
-              const labelStr = tryString(child.label).toLowerCase();
-              const selfMatch =
-                labelStr.includes(searchText) || (child.key && String(child.key).toLowerCase().includes(searchText));
+              const labelStr = getLabelSearchText(child.label).toLowerCase();
+              const selfMatch = labelStr.includes(searchText);
               if (child.type === 'group' && Array.isArray(child.children)) {
                 const nested = deepFilter(child.children);
                 if (selfMatch || nested.length > 0) {

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -310,6 +310,50 @@ describe('transformItems - searchable flags', () => {
     expect(submenu.searchPlaceholder).toBe('Search blocks');
     expect(Array.isArray(submenu.children)).toBe(true);
   });
+
+  it('filters searchable field menus by display label instead of item key', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parent = engine.createModel<FlowModel>({ use: FlowModel });
+    const user = userEvent.setup();
+
+    const items = [
+      {
+        key: 'fields',
+        label: '',
+        type: 'group' as const,
+        searchable: true,
+        searchPlaceholder: 'Search fields',
+        children: [
+          { key: 'field_name', label: 'Field display name' },
+          { key: 'other_field', label: 'Other field' },
+        ],
+      },
+    ];
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton model={parent} items={items as any} subModelKey="items">
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    const searchInput = await screen.findByPlaceholderText('Search fields');
+    expect(screen.getByText('Field display name')).toBeInTheDocument();
+
+    await user.type(searchInput, 'field_name');
+    await waitFor(() => expect(screen.queryByText('Field display name')).not.toBeInTheDocument());
+
+    await user.clear(searchInput);
+    await user.type(searchInput, 'display');
+    await waitFor(() => expect(screen.getByText('Field display name')).toBeInTheDocument());
+  });
 });
 
 describe('transformItems - hide', () => {

package/src/components/subModel/__tests__/utils.test.ts

@@ -100,6 +100,30 @@ describe('subModel/utils', () => {
       expect(groups[0].children).toBeTruthy();
     });
 
+    it('preserves searchable meta on generated groups', async () => {
+      const engine = new FlowEngine();
+
+      class Base extends FlowModel {}
+      Base.define({
+        label: 'Base Group',
+        searchable: true,
+        searchPlaceholder: 'Search fields',
+      });
+      const BaseDC = attachDefineChildren(Base, async () => [{ key: 'title', label: 'Title' }]);
+
+      engine.registerModels({ Base: BaseDC });
+
+      const model = engine.createModel({ use: 'FlowModel' });
+      const ctx = model.context;
+
+      const groupsFactory = buildSubModelGroups([BaseDC]);
+      const groups = await groupsFactory(ctx);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].searchable).toBe(true);
+      expect(groups[0].searchPlaceholder).toBe('Search fields');
+    });
+
     it('invokes buildSubModelItems when meta.children is false', async () => {
       const engine = new FlowEngine();
 

package/src/components/subModel/utils.ts

@@ -196,12 +196,16 @@ export function buildSubModelGroups(subModelBaseClasses: (string | ModelConstruc
       const baseKey = typeof subModelBaseClass === 'string' ? subModelBaseClass : BaseClass.name;
       const menuType = BaseClass?.meta?.menuType || 'group';
       const groupSort = BaseClass?.meta?.sort ?? 1000;
+      const searchable = !!BaseClass?.meta?.searchable;
+      const searchPlaceholder = BaseClass?.meta?.searchPlaceholder;
       if (menuType === 'submenu') {
         // 作为可点击的一级项，展开二级子菜单
         items.push({
           key: baseKey,
           label: groupLabel,
           sort: groupSort,
+          searchable,
+          searchPlaceholder,
           children,
         });
       } else {
@@ -211,6 +215,8 @@ export function buildSubModelGroups(subModelBaseClasses: (string | ModelConstruc
           type: 'group',
           label: groupLabel,
           sort: groupSort,
+          searchable,
+          searchPlaceholder,
           children,
         });
       }

package/src/data-source/index.ts

@@ -1114,7 +1114,7 @@ export class CollectionField {
       {
         ..._.omit(this.options.uiSchema?.['x-component-props'] || {}, 'fieldNames'),
         options: this.enum.length ? this.enum : undefined,
-        mode: this.type === 'array' ? 'multiple' : undefined,
+        mode: this.interface === 'multipleSelect' ? 'multiple' : undefined,
         multiple: target ? ['belongsToMany', 'hasMany', 'belongsToArray'].includes(type) : undefined,
         maxCount: target && !['belongsToMany', 'hasMany', 'belongsToArray'].includes(type) ? 1 : undefined,
         target: target,

package/src/utils/index.ts

@@ -104,3 +104,6 @@ export { isBeforeRenderFlow } from './flows';
 
 // Module URL resolver
 export { resolveModuleUrl, isCssFile } from './resolveModuleUrl';
+
+// Random base36 identifier with optional semantic prefix
+export { randomId } from './randomId';

package/src/utils/randomId.ts

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+const CHARSET = '0123456789abcdefghijklmnopqrstuvwxyz';
+
+/**
+ * Generate a random base36 identifier with an optional semantic prefix.
+ *
+ * Equivalent in shape to v1's `uid()` from `@formily/shared` (11 chars
+ * of `[0-9a-z]`), with an opt-in prefix appended at the front. v2 forbids
+ * direct `@formily/*` imports in `src/client-v2/`, so this helper is the
+ * single substitute the rest of the codebase should reach for.
+ *
+ * Common semantic prefixes observed across the codebase — pass the one
+ * that matches your domain rather than relying on a default, so the
+ * intent is explicit at the call site:
+ *
+ *   - `s_` — service / settings record (authenticators, channels, …)
+ *   - `v_` — verifier / variable / LLM service
+ *   - `f_` — field
+ *   - `t_` — through table
+ *
+ * Example:
+ *
+ * ```ts
+ * import { randomId } from '@nocobase/flow-engine';
+ *
+ * name: randomId('s_'),  // → 's_keeoaui1ubi'
+ * name: randomId('v_'),  // → 'v_a8f3kp2x9qm'
+ * name: randomId(),      // → 'a8f3kp2x9qm'
+ * ```
+ *
+ * Not cryptographically secure — uses `Math.random()`. Good enough for
+ * unique form names / schema keys, NOT for security tokens.
+ */
+export function randomId(prefix = '', length = 11): string {
+  let id = '';
+  for (let i = 0; i < length; i++) {
+    id += CHARSET[(Math.random() * CHARSET.length) | 0];
+  }
+  return `${prefix}${id}`;
+}