@nocobase/flow-engine 2.2.0-alpha.6 → 2.2.0-alpha.8

package/lib/components/FlowContextSelector.js

@@ -243,8 +243,8 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   }, [options, pathToPreload, triggerUpdate]);
   const defaultChildren = (0, import_react.useMemo)(() => {
     const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle }, "x");
-  }, [active, currentPath]);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle, disabled: cascaderProps.disabled }, "x");
+  }, [active, cascaderProps.disabled, currentPath]);
   const handleChange = (0, import_react.useCallback)(
     (selectedValues, selectedOptions) => {
       const lastOption = selectedOptions == null ? void 0 : selectedOptions[selectedOptions.length - 1];

package/lib/components/FormItem.js

@@ -77,14 +77,18 @@ const formItemPropKeys = [
   "required",
   "showLabel"
 ];
+const modelInternalPropKeys = ["globalSort"];
 const FormItem = /* @__PURE__ */ __name(({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key))
+  );
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key))
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key))
   );
   const processedChildren = typeof children === "function" ? children : import_react.default.Children.map(children, (child) => {
     if (import_react.default.isValidElement(child)) {
@@ -92,7 +96,7 @@ const FormItem = /* @__PURE__ */ __name(({
     }
     return child;
   });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
   const labelColStyle = layout === "vertical" ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = /* @__PURE__ */ __name(() => {
@@ -136,15 +140,15 @@ const FormItem = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Form.Item,
     {
-      ...rest,
-      style: { ...formItemStyle, ...rest.style },
+      ...forwardedRest,
+      style: { ...formItemStyle, ...forwardedRest.style },
       labelCol: { style: labelColStyle },
       layout,
       label: renderLabel(),
       colon: false,
-      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra),
-      tooltip: rest.tooltip && {
-        title: rest.tooltip,
+      extra: forwardedRest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, forwardedRest.extra),
+      tooltip: forwardedRest.tooltip && {
+        title: forwardedRest.tooltip,
         overlayInnerStyle: { whiteSpace: "pre-line" }
       }
     },

package/lib/components/MobilePopup.js

@@ -48,14 +48,34 @@ var import_lazy_helper = require("../lazy-helper");
 const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
 const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
+  var _a;
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
   const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
-  const style = (0, import_react.useMemo)(() => {
+  const bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const popupStyle = (0, import_react.useMemo)(() => {
     return {
-      minHeight
+      minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
+      height: bodyStyles == null ? void 0 : bodyStyles.height,
+      maxHeight: bodyStyles == null ? void 0 : bodyStyles.maxHeight
     };
-  }, [minHeight]);
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, minHeight]);
+  const bodyStyle = (0, import_react.useMemo)(() => {
+    return {
+      padding: 0,
+      ...bodyStyles
+    };
+  }, [bodyStyles]);
+  const handleCloseKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup]
+  );
   const theme = (0, import_react.useMemo)(() => {
     return {
       token: {
@@ -75,21 +95,19 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       onClose: closePopup,
       onMaskClick: closePopup,
       bodyClassName: "nb-mobile-action-drawer-body",
-      bodyStyle: {
-        padding: 0
-      },
-      maskStyle: style,
-      style,
+      bodyStyle,
+      style: popupStyle,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-title" }, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
         onClick: closePopup,
         role: "button",
         tabIndex: 0,
-        "aria-label": t("Close")
+        "aria-label": t("Close"),
+        onKeyDown: handleCloseKeyDown
       },
       /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),

package/lib/components/MobilePopup.style.js

@@ -127,7 +127,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
         borderBottom: `1px solid ${token.colorSplit}`,
         position: "sticky",
         top: 0,
-        backgroundColor: "white",
+        backgroundColor: token.colorBgContainer,
         zIndex: 1e3,
         // to match the button named 'Add block'
         "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
@@ -137,11 +137,21 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".nb-mobile-action-drawer-placeholder": {
         display: "inline-block",
         padding: 12,
+        flex: "0 0 auto",
         visibility: "hidden"
       },
+      ".nb-mobile-action-drawer-title": {
+        flex: "1 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        textAlign: "center",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
       ".nb-mobile-action-drawer-close-icon": {
         display: "inline-block",
         padding: 12,
+        flex: "0 0 auto",
         cursor: "pointer"
       },
       ".nb-mobile-action-drawer-body": {

package/lib/components/variables/VariableInput.js

@@ -132,16 +132,18 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     },
     [onChange]
   );
+  const resolvedPath = (0, import_react.useMemo)(() => {
+    return resolvePathFromValue == null ? void 0 : resolvePathFromValue(innerValue);
+  }, [innerValue, resolvePathFromValue]);
   const resolvedMetaTreeNode = (0, import_react.useMemo)(() => {
     if (currentMetaTreeNode) return currentMetaTreeNode;
     if (Array.isArray(resolvedMetaTree)) {
-      const path = resolvePathFromValue == null ? void 0 : resolvePathFromValue(innerValue);
-      if (path) {
-        return findMetaTreeNodeByPath(resolvedMetaTree, path);
+      if (resolvedPath) {
+        return findMetaTreeNodeByPath(resolvedMetaTree, resolvedPath);
       }
     }
     return null;
-  }, [currentMetaTreeNode, innerValue, resolvedMetaTree, resolvePathFromValue]);
+  }, [currentMetaTreeNode, resolvedMetaTree, resolvedPath]);
   (0, import_react.useEffect)(() => {
     const restoreFromValue = /* @__PURE__ */ __name(async () => {
       if (!Array.isArray(resolvedMetaTree) || value == null) return;
@@ -192,9 +194,13 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   const ValueComponent = (0, import_react.useMemo)(() => {
     const Component = renderInputComponent == null ? void 0 : renderInputComponent(resolvedMetaTreeNode);
     const CustomComponent = resolvedMetaTreeNode == null ? void 0 : resolvedMetaTreeNode.render;
-    const finalComponent = (0, import_utils.isVariableValue)(innerValue) ? import_VariableTag.VariableTag : Component || CustomComponent || import_antd.Input;
+    const shouldRenderVariableTag = (0, import_utils.isVariableValue)(innerValue) || Boolean(resolvedMetaTreeNode) && Array.isArray(resolvedPath) && resolvedPath.length > 0 && !Component && !CustomComponent;
+    const finalComponent = shouldRenderVariableTag ? import_VariableTag.VariableTag : Component || CustomComponent || import_antd.Input;
     return finalComponent;
-  }, [renderInputComponent, resolvedMetaTreeNode, innerValue]);
+  }, [renderInputComponent, resolvedMetaTreeNode, innerValue, resolvedPath]);
+  const isVariableActive = (0, import_react.useMemo)(() => {
+    return (0, import_utils.isVariableValue)(innerValue) || Boolean(resolvedMetaTreeNode) && Array.isArray(resolvedPath) && resolvedPath.length > 0 && !(renderInputComponent == null ? void 0 : renderInputComponent(resolvedMetaTreeNode)) && !(resolvedMetaTreeNode == null ? void 0 : resolvedMetaTreeNode.render);
+  }, [innerValue, renderInputComponent, resolvedMetaTreeNode, resolvedPath]);
   (0, import_react.useEffect)(() => {
     if (!resolvedMetaTreeNode) return;
     if (!Array.isArray(resolvedMetaTree) || innerValue == null) return;
@@ -278,6 +284,8 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       return {
         ...baseProps,
         onClear: handleClear,
+        disabled,
+        allowCustomTagInput: false,
         metaTreeNode: resolvedMetaTreeNode,
         metaTree,
         style: stableProps.style
@@ -325,7 +333,8 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     {
       metaTree: resolvedMetaTree,
       value: innerValue,
-      active: (0, import_utils.isVariableValue)(innerValue),
+      active: isVariableActive,
+      disabled,
       onChange: handleVariableSelect,
       parseValueToPath: resolvePathFromValue,
       formatPathToValue: resolveValueFromPath,

package/lib/components/variables/VariableTag.js

@@ -47,9 +47,12 @@ var import_utils = require("./utils");
 var import_useResolvedMetaTree = require("./useResolvedMetaTree");
 var import_ahooks = require("ahooks");
 var import_FlowContextProvider = require("../../FlowContextProvider");
+const VARIABLE_PARSING_FAILED_TEXT = "Variable parsing failed";
 const VariableTagComponent = /* @__PURE__ */ __name(({
   value,
   onClear,
+  disabled = false,
+  allowCustomTagInput = true,
   className,
   style,
   metaTreeNode,
@@ -57,25 +60,23 @@ const VariableTagComponent = /* @__PURE__ */ __name(({
 }) => {
   const { resolvedMetaTree } = (0, import_useResolvedMetaTree.useResolvedMetaTree)(metaTree);
   const ctx = (0, import_FlowContextProvider.useFlowContext)();
-  const { data: displayedValue } = (0, import_ahooks.useRequest)(
+  const { data: displayState } = (0, import_ahooks.useRequest)(
     async () => {
       const resolveLabelFromPath = /* @__PURE__ */ __name(async (rawPath2) => {
-        if (!rawPath2) return null;
-        if (!Array.isArray(rawPath2)) return null;
-        if (!Array.isArray(resolvedMetaTree)) return null;
+        if (!rawPath2) return { label: null, resolved: false, attempted: false };
+        if (!Array.isArray(rawPath2)) return { label: null, resolved: false, attempted: false };
+        if (!Array.isArray(resolvedMetaTree)) return { label: null, resolved: false, attempted: false };
         const topNames = new Set((resolvedMetaTree || []).map((n) => String(n == null ? void 0 : n.name)));
         const path = !topNames.has(String(rawPath2[0])) ? rawPath2.slice(1) : rawPath2;
-        if (!path.length) return "";
+        if (!path.length) return { label: "", resolved: true, attempted: true };
         let nodes = resolvedMetaTree;
         const titleChain = [];
-        let matchedCount = 0;
         for (let i = 0; i < path.length; i++) {
-          if (!nodes) break;
+          if (!nodes) return { label: null, resolved: false, attempted: true };
           const seg = String(path[i]);
           const node = nodes.find((n) => String(n == null ? void 0 : n.name) === seg);
-          if (!node) break;
+          if (!node) return { label: null, resolved: false, attempted: true };
           titleChain.push(String(node.title ?? node.name ?? seg));
-          matchedCount = i + 1;
           if (i < path.length - 1) {
             if (Array.isArray(node.children)) {
               nodes = node.children;
@@ -92,27 +93,35 @@ const VariableTagComponent = /* @__PURE__ */ __name(({
             }
           }
         }
-        if (matchedCount === 0) return null;
-        let label2 = titleChain.map(ctx.t).join("/");
-        if (matchedCount < path.length) {
-          const tail = path.slice(matchedCount).join("/");
-          label2 = tail ? `${label2}/${tail}` : label2;
-        }
-        return label2;
+        return { label: titleChain.map(ctx.t).join("/"), resolved: true, attempted: true };
       }, "resolveLabelFromPath");
       if (metaTreeNode == null ? void 0 : metaTreeNode.parentTitles) {
-        return [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join("/");
+        return {
+          text: [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join("/"),
+          invalid: false
+        };
       }
       if (metaTreeNode) {
         const rawPath2 = (0, import_utils.parseValueToPath)(value) || metaTreeNode.paths;
-        const label2 = await resolveLabelFromPath(rawPath2);
-        return label2 ?? ctx.t(metaTreeNode.title) ?? "";
+        const result2 = await resolveLabelFromPath(rawPath2);
+        if (result2.resolved && result2.label != null) {
+          return { text: result2.label, invalid: false };
+        }
+        if (result2.attempted) {
+          return { text: VARIABLE_PARSING_FAILED_TEXT, invalid: true, rawValue: String(value ?? "") };
+        }
+        return { text: ctx.t(metaTreeNode.title) ?? "", invalid: false };
       }
-      if (!value) return String(value);
+      if (!value) return { text: String(value), invalid: false };
       const rawPath = (0, import_utils.parseValueToPath)(value);
-      const label = await resolveLabelFromPath(rawPath);
-      if (label != null) return label;
-      return Array.isArray(rawPath) ? rawPath.join("/") : String(value);
+      const result = await resolveLabelFromPath(rawPath);
+      if (result.resolved && result.label != null) {
+        return { text: result.label, invalid: false };
+      }
+      if (result.attempted) {
+        return { text: VARIABLE_PARSING_FAILED_TEXT, invalid: true, rawValue: String(value ?? "") };
+      }
+      return { text: Array.isArray(rawPath) ? rawPath.join("/") : String(value), invalid: false };
     },
     { refreshDeps: [resolvedMetaTree, value, metaTreeNode] }
   );
@@ -129,12 +138,12 @@ const VariableTagComponent = /* @__PURE__ */ __name(({
     }
   `;
   const customTagRender = /* @__PURE__ */ __name((props) => {
-    const { label } = props;
-    const fullText = typeof label === "string" ? label : String(label);
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: fullText, placement: "top", getPopupContainer: () => document.body }, /* @__PURE__ */ import_react.default.createElement(
+    const fullText = (displayState == null ? void 0 : displayState.text) || (typeof props.label === "string" ? props.label : String(props.label));
+    const tooltipText = (displayState == null ? void 0 : displayState.invalid) ? displayState.rawValue || fullText : fullText;
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltipText, placement: "top", getPopupContainer: () => document.body }, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tag,
       {
-        color: "blue",
+        color: (displayState == null ? void 0 : displayState.invalid) ? "error" : "blue",
         style: {
           margin: `0 ${token.marginXXS || token.marginXS}px`,
           borderRadius: token.borderRadiusSM,
@@ -175,12 +184,14 @@ const VariableTagComponent = /* @__PURE__ */ __name(({
         flex: "1 1 auto",
         ...style
       },
-      value: displayedValue ? [displayedValue] : [],
-      mode: "tags",
+      value: (displayState == null ? void 0 : displayState.text) ? [displayState.text] : [],
+      mode: allowCustomTagInput ? "tags" : "multiple",
       open: false,
-      allowClear: !!onClear,
-      onClear,
-      disabled: !onClear,
+      showSearch: allowCustomTagInput,
+      searchValue: allowCustomTagInput ? void 0 : "",
+      allowClear: !disabled && !!onClear,
+      onClear: disabled ? void 0 : onClear,
+      disabled: disabled || !onClear,
       variant: "outlined",
       suffixIcon: null,
       tagRender: customTagRender,

package/lib/components/variables/types.d.ts

@@ -87,6 +87,8 @@ export interface VariableInputProps {
 export interface VariableTagProps {
     value?: string;
     onClear?: () => void;
+    disabled?: boolean;
+    allowCustomTagInput?: boolean;
     className?: string;
     style?: React.CSSProperties;
     metaTreeNode?: MetaTreeNode | null;

package/lib/flowEngine.js

@@ -1141,6 +1141,9 @@ const _FlowEngine = class _FlowEngine {
     if (!this.ensureModelRepository()) return;
     const refresh = !!(options == null ? void 0 : options.refresh);
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (!refresh && !bypassLoadedPageCache) {
       const model2 = this.findModelByParentId(options.parentId, options.subKey);
       if (model2) {
@@ -1201,6 +1204,9 @@ const _FlowEngine = class _FlowEngine {
     if (!this.ensureModelRepository()) return;
     const { uid, parentId, subKey } = options;
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (uid && !bypassLoadedPageCache && this._modelInstances.has(uid)) {
       return this._modelInstances.get(uid);
     }