amis-ui 3.1.0 → 3.2.0

package/lib/components/formula/Picker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -15,6 +15,7 @@ var ResultBox = require('../ResultBox.js');
 var Button = require('../Button.js');
 var icons = require('../icons.js');
 var Modal = require('../Modal.js');
+var PopUp = require('../PopUp.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,7 +30,8 @@ var FormulaPicker = /** @class */ (function (_super) {
             isOpened: false,
             value: _this.props.value,
             editorValue: _this.value2EditorValue(_this.props),
-            isError: false
+            isError: false,
+            variables: Array.isArray(props.variables) ? props.variables : []
         };
         return _this;
     }
@@ -107,14 +109,29 @@ var FormulaPicker = /** @class */ (function (_super) {
     FormulaPicker.prototype.handleClick = function () {
         var _a, _b;
         return tslib.__awaiter(this, void 0, void 0, function () {
-            var state, _c;
-            return tslib.__generator(this, function (_d) {
-                switch (_d.label) {
+            var _c, variables, data, list, result, state, _d;
+            return tslib.__generator(this, function (_e) {
+                switch (_e.label) {
                     case 0:
-                        _c = [{}];
-                        return [4 /*yield*/, ((_b = (_a = this.props).onPickerOpen) === null || _b === void 0 ? void 0 : _b.call(_a, this.props))];
+                        _c = this.props, variables = _c.variables, data = _c.data;
+                        if (!(typeof variables === 'function')) return [3 /*break*/, 2];
+                        return [4 /*yield*/, variables(this.props)];
                     case 1:
-                        state = tslib.__assign.apply(void 0, [tslib.__assign.apply(void 0, _c.concat([(_d.sent())])), { editorValue: this.value2EditorValue(this.props), isOpened: true }]);
+                        list = _e.sent();
+                        this.setState({ variables: list });
+                        return [3 /*break*/, 4];
+                    case 2:
+                        if (!(typeof variables === 'string' && amisCore.isExpression(variables))) return [3 /*break*/, 4];
+                        return [4 /*yield*/, amisCore.resolveVariableAndFilterForAsync(variables, data, '|raw')];
+                    case 3:
+                        result = _e.sent();
+                        this.setState({ variables: result });
+                        _e.label = 4;
+                    case 4:
+                        _d = [{}];
+                        return [4 /*yield*/, ((_b = (_a = this.props).onPickerOpen) === null || _b === void 0 ? void 0 : _b.call(_a, this.props))];
+                    case 5:
+                        state = tslib.__assign.apply(void 0, [tslib.__assign.apply(void 0, _d.concat([(_e.sent())])), { editorValue: this.value2EditorValue(this.props), isOpened: true }]);
                         this.setState(state);
                         return [2 /*return*/];
                 }
@@ -157,10 +174,11 @@ var FormulaPicker = /** @class */ (function (_super) {
     };
     FormulaPicker.prototype.render = function () {
         var _a, _b, _c;
-        var _d, _e, _f, _g, _h;
-        var _j = this.props, cx = _j.classnames, __ = _j.translate, disabled = _j.disabled, _k = _j.allowInput, allowInput = _k === void 0 ? true : _k, className = _j.className, style = _j.style; _j.onChange; _j.size; var borderMode = _j.borderMode, placeholder = _j.placeholder, _l = _j.mode, mode = _l === void 0 ? 'input-button' : _l, btnLabel = _j.btnLabel, level = _j.level, btnSize = _j.btnSize, icon = _j.icon, title = _j.title, clearable = _j.clearable, variables = _j.variables, functions = _j.functions, children = _j.children, variableMode = _j.variableMode, mixedMode = _j.mixedMode, evalMode = _j.evalMode, popOverContainer = _j.popOverContainer, rest = tslib.__rest(_j, ["classnames", "translate", "disabled", "allowInput", "className", "style", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "variables", "functions", "children", "variableMode", "mixedMode", "evalMode", "popOverContainer"]);
-        var _m = this.state, isOpened = _m.isOpened, value = _m.value, editorValue = _m.editorValue, isError = _m.isError;
+        var _d, _e, _f, _g, _h, _j;
+        var _k = this.props, cx = _k.classnames, __ = _k.translate, disabled = _k.disabled, _l = _k.allowInput, allowInput = _l === void 0 ? true : _l, className = _k.className, style = _k.style; _k.onChange; _k.size; var borderMode = _k.borderMode, placeholder = _k.placeholder, _m = _k.mode, mode = _m === void 0 ? 'input-button' : _m, btnLabel = _k.btnLabel, level = _k.level, btnSize = _k.btnSize, icon = _k.icon, title = _k.title, clearable = _k.clearable, functions = _k.functions, children = _k.children, variableMode = _k.variableMode, mixedMode = _k.mixedMode, evalMode = _k.evalMode, popOverContainer = _k.popOverContainer, useMobileUI = _k.useMobileUI, rest = tslib.__rest(_k, ["classnames", "translate", "disabled", "allowInput", "className", "style", "onChange", "size", "borderMode", "placeholder", "mode", "btnLabel", "level", "btnSize", "icon", "title", "clearable", "functions", "children", "variableMode", "mixedMode", "evalMode", "popOverContainer", "useMobileUI"]);
+        var _o = this.state, isOpened = _o.isOpened, value = _o.value, editorValue = _o.editorValue, isError = _o.isError;
         var iconElement = amisCore.generateIcon(cx, icon, 'Icon');
+        var mobileUI = useMobileUI && amisCore.isMobile();
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             children ? (children({
                 isOpened: this.state.isOpened,
@@ -179,7 +197,7 @@ var FormulaPicker = /** @class */ (function (_super) {
                 mode === 'input-button' && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(ResultBox["default"], { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), allowInput: allowInput, clearable: clearable, value: value, result: allowInput
                             ? void 0
-                            : Editor.FormulaEditor.highlightValue(value, variables, this.props.evalMode), itemRender: this.renderFormulaValue, onResultChange: amisCore.noop, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                            : Editor.FormulaEditor.highlightValue(value, this.state.variables, this.props.evalMode), itemRender: this.renderFormulaValue, onResultChange: amisCore.noop, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder, useMobileUI: useMobileUI, showArrow: false }),
                     React__default["default"].createElement(Button["default"], { className: cx('FormulaPicker-action'), onClick: this.handleClick },
                         React__default["default"].createElement(icons.Icon, { icon: "function", className: cx('FormulaPicker-icon', 'icon', (_c = {},
                                 _c['is-filled'] = !!value,
@@ -187,18 +205,22 @@ var FormulaPicker = /** @class */ (function (_super) {
                 mode === 'input-group' && (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(ResultBox["default"], { className: cx('FormulaPicker-input', isOpened ? 'is-active' : '', !!isError ? 'is-error' : ''), allowInput: allowInput, clearable: clearable, value: value, result: allowInput
                             ? void 0
-                            : Editor.FormulaEditor.highlightValue(value, variables, this.props.evalMode), itemRender: this.renderFormulaValue, onResultChange: amisCore.noop, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder }),
+                            : Editor.FormulaEditor.highlightValue(value, this.state.variables, this.props.evalMode), itemRender: this.renderFormulaValue, onResultChange: amisCore.noop, onChange: this.handleInputChange, disabled: disabled, borderMode: borderMode, placeholder: placeholder, useMobileUI: useMobileUI, showArrow: false }),
                     React__default["default"].createElement("a", { className: cx("FormulaPicker-toggler"), onClick: this.handleClick },
                         React__default["default"].createElement(icons.Icon, { icon: "function", className: "icon" })))))),
-            React__default["default"].createElement(Modal["default"], { size: "md", closeOnEsc: true, show: this.state.isOpened, onHide: this.close, container: popOverContainer },
+            mobileUI ? (React__default["default"].createElement(PopUp["default"], { className: cx("FormulaPicker-popup"), isShow: this.state.isOpened, showConfirm: true, onHide: this.close, onConfirm: this.handleEditorConfirm, container: popOverContainer },
+                React__default["default"].createElement("div", { className: cx('FormulaPicker-popup-inner') },
+                    React__default["default"].createElement(Editor["default"], tslib.__assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_f = this.state.functions) !== null && _f !== void 0 ? _f : functions, variableMode: (_g = this.state.variableMode) !== null && _g !== void 0 ? _g : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName })),
+                    !!isError ? (React__default["default"].createElement("div", { className: cx('Dialog-info'), key: "info" },
+                        React__default["default"].createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null))) : (React__default["default"].createElement(Modal["default"], { size: "lg", closeOnEsc: true, show: this.state.isOpened, onHide: this.close, container: popOverContainer },
                 React__default["default"].createElement(Modal["default"].Header, { onClose: this.close, className: "font-bold" }, __(title || 'FormulaEditor.title')),
                 React__default["default"].createElement(Modal["default"].Body, null,
-                    React__default["default"].createElement(Editor["default"], tslib.__assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: (_f = this.state.variables) !== null && _f !== void 0 ? _f : variables, functions: (_g = this.state.functions) !== null && _g !== void 0 ? _g : functions, variableMode: (_h = this.state.variableMode) !== null && _h !== void 0 ? _h : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName }))),
+                    React__default["default"].createElement(Editor["default"], tslib.__assign({}, rest, { evalMode: mixedMode ? true : evalMode, variables: this.state.variables, functions: (_h = this.state.functions) !== null && _h !== void 0 ? _h : functions, variableMode: (_j = this.state.variableMode) !== null && _j !== void 0 ? _j : variableMode, value: editorValue, onChange: this.handleEditorChange, selfVariableName: this.props.selfVariableName }))),
                 React__default["default"].createElement(Modal["default"].Footer, null,
                     !!isError ? (React__default["default"].createElement("div", { className: cx('Dialog-info'), key: "info" },
                         React__default["default"].createElement("span", { className: cx('Dialog-error') }, __('FormulaEditor.invalidData', { err: isError })))) : null,
                     React__default["default"].createElement(Button["default"], { onClick: this.close }, __('cancel')),
-                    React__default["default"].createElement(Button["default"], { onClick: this.handleEditorConfirm, level: "primary" }, __('confirm'))))));
+                    React__default["default"].createElement(Button["default"], { onClick: this.handleEditorConfirm, level: "primary" }, __('confirm')))))));
     };
     FormulaPicker.defaultProps = {
         evalMode: true

package/lib/components/formula/VariableList.d.ts

@@ -17,6 +17,7 @@ export interface VariableListProps extends ThemeProps, SpinnerExtraProps {
     placeholderRender?: (props: any) => JSX.Element | null;
     onSelect?: (item: VariableItem) => void;
     selfVariableName?: string;
+    expandTree?: boolean;
 }
 declare function VariableList(props: VariableListProps): React.JSX.Element;
 declare const _default: {

package/lib/components/formula/VariableList.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -15,45 +15,129 @@ var Tabs = require('../Tabs.js');
 var TreeSelection = require('../TreeSelection.js');
 var SearchBox = require('../SearchBox.js');
 var Badge = require('../Badge.js');
+var PopOverContainer = require('../PopOverContainer.js');
+var matchSorter = require('match-sorter');
+var TooltipWrapper = require('../TooltipWrapper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+// 数组成员读取
+var memberOpers = [
+    {
+        label: '取该成员的记录',
+        value: 'ARRAYMAP(${arr}, item => item.${member})'
+    },
+    {
+        label: '取该成员的记录并过滤',
+        value: 'ARRAYFILTER(${arr}, item => item.${member})'
+    },
+    {
+        label: '取该成员列表记录中符合条件的总数',
+        value: 'COUNT(ARRAYFILTER(${arr}, item => item.${member} === 条件))'
+    },
+    {
+        label: '取该成员去重之后的总数',
+        value: 'COUNT(UNIQ(${arr}, item.${member}))'
+    },
+    {
+        label: '取该成员的总和',
+        value: 'SUM(ARRAYMAP(${arr}, item => item.${member}))'
+    },
+    {
+        label: '取该成员的平均值',
+        value: 'AVG(ARRAYMAP(${arr}, item => item.${member}))'
+    },
+    {
+        label: '取该成员的最大值',
+        value: 'MAX(ARRAYMAP(${arr}, item => item.${member}))'
+    },
+    {
+        label: '取该成员的最小值',
+        value: 'MIN(ARRAYMAP(${arr}, item => item.${member}))'
+    }
+];
 function VariableList(props) {
-    var list = props.data, className = props.className, cx = props.classnames, _a = props.tabsMode, tabsMode = _a === void 0 ? 'line' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect, placeholderRender = props.placeholderRender, selfVariableName = props.selfVariableName;
+    var variableListRef = React__default["default"].useRef(null);
+    var list = props.data, className = props.className, cx = props.classnames, _a = props.tabsMode, tabsMode = _a === void 0 ? 'line' : _a, themePrefix = props.classPrefix, itemClassName = props.itemClassName, selectMode = props.selectMode, onSelect = props.onSelect, placeholderRender = props.placeholderRender, selfVariableName = props.selfVariableName, expandTree = props.expandTree;
     var _b = tslib.__read(React__default["default"].useState(list), 2), filterVars = _b[0], setFilterVars = _b[1];
     var classPrefix = "".concat(themePrefix, "FormulaEditor-VariableList");
+    React.useEffect(function () {
+        var data = props.data;
+        if (data) {
+            setFilterVars(data);
+        }
+    }, [props.data]);
     var itemRender = props.itemRender && typeof props.itemRender === 'function'
         ? props.itemRender
         : function (option, states) {
-            return (React__default["default"].createElement("span", { className: cx("".concat(classPrefix, "-item"), itemClassName) },
-                option.label &&
-                    selfVariableName &&
-                    option.value === selfVariableName && (React__default["default"].createElement(Badge.Badge, { classnames: cx, badge: {
-                        mode: 'text',
-                        text: 'self',
-                        offset: [15, 2]
-                    } },
-                    React__default["default"].createElement("label", null, option.label))),
-                option.label &&
-                    (!selfVariableName || option.value !== selfVariableName) && (React__default["default"].createElement("label", null, option.label)),
-                (option === null || option === void 0 ? void 0 : option.tag) ? (React__default["default"].createElement("span", { className: cx("".concat(classPrefix, "-item-tag")) }, option.tag)) : null));
+            var _a;
+            return (React__default["default"].createElement("div", null,
+                React__default["default"].createElement("div", { className: cx("".concat(classPrefix, "-item"), itemClassName) },
+                    option.label &&
+                        selfVariableName &&
+                        option.value === selfVariableName && (React__default["default"].createElement(Badge.Badge, { classnames: cx, badge: {
+                            mode: 'text',
+                            text: 'self',
+                            offset: [15, 2]
+                        } },
+                        React__default["default"].createElement("label", null, option.label))),
+                    option.label &&
+                        (!selfVariableName || option.value !== selfVariableName) && (React__default["default"].createElement(TooltipWrapper["default"], { tooltip: (_a = option.description) !== null && _a !== void 0 ? _a : option.label, tooltipTheme: "dark" },
+                        React__default["default"].createElement("label", null, option.label))),
+                    option.memberDepth < 2 ? (React__default["default"].createElement(PopOverContainer.PopOverContainer, { popOverContainer: function () {
+                            return document.querySelector(".".concat(cx('FormulaPicker-Modal')));
+                        }, popOverRender: function (_a) {
+                            var onClose = _a.onClose;
+                            return (React__default["default"].createElement("ul", { className: cx("".concat(classPrefix, "-item-oper")) }, memberOpers.map(function (item, i) {
+                                return (React__default["default"].createElement("li", { key: i, onClick: function () {
+                                        return handleMemberClick(tslib.__assign(tslib.__assign({}, item), { isMember: true }), option, onClose);
+                                    } },
+                                    React__default["default"].createElement("span", null, item.label)));
+                            })));
+                        } }, function (_a) {
+                        var onClick = _a.onClick; _a.ref; _a.isOpened;
+                        return (React__default["default"].createElement("i", { className: "fa fa-ellipsis-h", onClick: onClick }));
+                    })) : null,
+                    (option === null || option === void 0 ? void 0 : option.tag) ? (React__default["default"].createElement("span", { className: cx("".concat(classPrefix, "-item-tag")) }, option.tag)) : null)));
         };
+    function handleMemberClick(item, option, onClose) {
+        // todo：暂时只提供一层的快捷操作
+        var lastPointIdx = option.value.lastIndexOf('.');
+        var arr = option.value.substring(0, lastPointIdx);
+        var member = option.value.substring(lastPointIdx + 1);
+        var value = item.value
+            .replace('${arr}', arr)
+            .replace('${member}', member);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(tslib.__assign(tslib.__assign({}, item), { label: value, value: value }));
+    }
     function onSearch(term) {
-        var tree = amisCore.findTreeAll(list, function (i) { return ~i.label.indexOf(term); });
+        var tree = amisCore.filterTree(list, function (i, key, level, paths) {
+            return !!((Array.isArray(i.children) && i.children.length) ||
+                !!matchSorter.matchSorter([i].concat(paths), term, {
+                    keys: ['label', 'value']
+                }).length);
+        }, 1, true);
         setFilterVars(!term ? list : tree);
     }
     function renderSearchBox() {
         return (React__default["default"].createElement("div", { className: cx('FormulaEditor-VariableList-searchBox') },
-            React__default["default"].createElement(SearchBox["default"], { mini: false, onSearch: onSearch })));
+            React__default["default"].createElement(SearchBox["default"], { mini: false, onSearch: onSearch, useMobileUI: true })));
+    }
+    function handleChange(item) {
+        if (item.isMember) {
+            return;
+        }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
     }
-    return (React__default["default"].createElement("div", { className: cx(className, 'FormulaEditor-VariableList', selectMode && "FormulaEditor-VariableList-".concat(selectMode)) }, selectMode === 'tabs' ? (React__default["default"].createElement(Tabs["default"], { tabsMode: tabsMode, className: cx("".concat(classPrefix, "-base ").concat(classPrefix, "-tabs")) }, filterVars.map(function (item, index) { return (React__default["default"].createElement(Tabs.Tab, { className: cx("".concat(classPrefix, "-tab")), eventKey: index, key: index, title: item.label },
-        React__default["default"].createElement(VariableList, { classnames: cx, classPrefix: "".concat(classPrefix, "-sub-"), className: cx("".concat(classPrefix, "-sub")), itemRender: itemRender, placeholderRender: placeholderRender, selectMode: item.selectMode, data: item.children, onSelect: onSelect, selfVariableName: selfVariableName }))); }))) : selectMode === 'tree' ? (React__default["default"].createElement("div", { className: cx('FormulaEditor-VariableList-body') },
+    return (React__default["default"].createElement("div", { className: cx(className, 'FormulaEditor-VariableList', selectMode && "FormulaEditor-VariableList-".concat(selectMode)), ref: variableListRef }, selectMode === 'tabs' ? (React__default["default"].createElement(Tabs["default"], { tabsMode: tabsMode, className: cx("".concat(classPrefix, "-base ").concat(classPrefix, "-tabs")) }, filterVars.map(function (item, index) { return (React__default["default"].createElement(Tabs.Tab, { className: cx("".concat(classPrefix, "-tab")), eventKey: index, key: index, title: item.label },
+        React__default["default"].createElement(VariableList, { classnames: cx, classPrefix: "".concat(classPrefix, "-sub-"), className: cx("".concat(classPrefix, "-sub")), itemRender: itemRender, placeholderRender: placeholderRender, selectMode: item.selectMode, data: item.children, onSelect: handleChange, selfVariableName: selfVariableName }))); }))) : selectMode === 'tree' ? (React__default["default"].createElement("div", { className: cx('FormulaEditor-VariableList-body') },
         renderSearchBox(),
-        React__default["default"].createElement(TreeSelection["default"], { itemRender: itemRender, placeholderRender: placeholderRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, options: filterVars, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } }))) : (React__default["default"].createElement("div", { className: cx('FormulaEditor-VariableList-body') },
+        React__default["default"].createElement(TreeSelection["default"], { itemRender: itemRender, placeholderRender: placeholderRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, expand: expandTree ? 'all' : 'none', options: filterVars, onChange: function (item) { return handleChange(item); } }))) : (React__default["default"].createElement("div", { className: cx('FormulaEditor-VariableList-body') },
         renderSearchBox(),
-        React__default["default"].createElement(GroupedSelection["default"], { itemRender: itemRender, placeholderRender: placeholderRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, options: filterVars, onChange: function (item) { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(item); } })))));
+        React__default["default"].createElement(GroupedSelection["default"], { itemRender: itemRender, placeholderRender: placeholderRender, className: cx("".concat(classPrefix, "-base"), 'is-scrollable'), multiple: false, options: filterVars, onChange: function (item) { return handleChange(item); } })))));
 }
 var VariableList$1 = amisCore.themeable(VariableList);
 

package/lib/components/formula/plugin.d.ts

@@ -3,7 +3,7 @@
  */
 import type CodeMirror from 'codemirror';
 import { FormulaEditorProps, VariableItem } from './Editor';
-export declare function editorFactory(dom: HTMLElement, cm: typeof CodeMirror, props: any): CodeMirror.Editor;
+export declare function editorFactory(dom: HTMLElement, cm: typeof CodeMirror, props: any, options?: any): CodeMirror.Editor;
 export declare class FormulaPlugin {
     readonly editor: CodeMirror.Editor;
     readonly cm: typeof CodeMirror;
@@ -19,7 +19,9 @@ export declare class FormulaPlugin {
         end: number;
     }[]): boolean;
     insertBraces(originFrom: CodeMirror.Position, originTo: CodeMirror.Position): void;
-    insertContent(value: any, type?: 'variable' | 'func'): void;
+    insertContent(value: any, type?: 'variable' | 'func', className?: string, toMark?: boolean): void;
+    setValue(value: string): void;
+    getValue(): string;
     markText(from: CodeMirror.Position, to: CodeMirror.Position, label: string, className?: string): void;
     autoMark(variables: Array<VariableItem>): void;
     focus(value: string): void;

package/lib/components/formula/plugin.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -14,13 +14,9 @@ var Editor = require('./Editor.js');
 /**
  * @file 扩展 codemirror
  */
-function editorFactory(dom, cm, props) {
+function editorFactory(dom, cm, props, options) {
     registerLaunguageMode(cm);
-    return cm(dom, {
-        value: props.value || '',
-        autofocus: true,
-        mode: props.evalMode ? 'text/formula' : 'text/formula-template'
-    });
+    return cm(dom, tslib.__assign({ value: props.value || '', autofocus: true, mode: props.evalMode ? 'text/formula' : 'text/formula-template' }, options));
 }
 var FormulaPlugin = /** @class */ (function () {
     function FormulaPlugin(editor, cm, getProps) {
@@ -94,22 +90,34 @@ var FormulaPlugin = /** @class */ (function () {
             this.editor.replaceSelection('}');
         }
     };
-    FormulaPlugin.prototype.insertContent = function (value, type) {
+    FormulaPlugin.prototype.insertContent = function (value, type, className, toMark) {
+        var _this = this;
+        if (className === void 0) { className = 'cm-field'; }
+        if (toMark === void 0) { toMark = true; }
         var from = this.editor.getCursor();
         var evalMode = this.getProps().evalMode;
         if (type === 'variable') {
             this.editor.replaceSelection(value.key);
-            var to = this.editor.getCursor();
-            this.markText(from, to, value.name, 'cm-field');
-            !evalMode && this.insertBraces(from, to);
+            var to_1 = this.editor.getCursor();
+            if (toMark) {
+                // 路径中每个变量分别进行标记
+                var markFrom_1 = from.ch;
+                value.path.split('.').forEach(function (label, index) {
+                    var val = value.key.split('.')[index];
+                    _this.markText({ line: from.line, ch: markFrom_1 }, { line: to_1.line, ch: markFrom_1 + val.length }, label, className);
+                    markFrom_1 += 1 + val.length;
+                });
+            }
+            !evalMode && this.insertBraces(from, to_1);
         }
         else if (type === 'func') {
             this.editor.replaceSelection("".concat(value, "()"));
             var to = this.editor.getCursor();
-            this.markText(from, {
-                line: to.line,
-                ch: to.ch - 2
-            }, value, 'cm-func');
+            toMark &&
+                this.markText(from, {
+                    line: to.line,
+                    ch: to.ch - 2
+                }, value, 'cm-func');
             this.editor.setCursor({
                 line: to.line,
                 ch: to.ch - 1
@@ -124,9 +132,17 @@ var FormulaPlugin = /** @class */ (function () {
         }
         else if (typeof value === 'string') {
             this.editor.replaceSelection(value);
+            // 非变量、非函数，可能是组合模式，也需要标记
+            toMark && setTimeout(function () { return _this.autoMarkText(); }, 0);
         }
         this.editor.focus();
     };
+    FormulaPlugin.prototype.setValue = function (value) {
+        this.editor.setValue(value);
+    };
+    FormulaPlugin.prototype.getValue = function () {
+        return this.editor.getValue();
+    };
     FormulaPlugin.prototype.markText = function (from, to, label, className) {
         if (className === void 0) { className = 'cm-func'; }
         var text = document.createElement('span');
@@ -144,8 +160,9 @@ var FormulaPlugin = /** @class */ (function () {
         }
         var varMap = {};
         amisCore.eachTree(variables, function (item) {
+            var _a;
             if (item.value) {
-                varMap[item.value] = item.label;
+                varMap[item.value] = (_a = item.path) !== null && _a !== void 0 ? _a : item.label;
             }
         });
         var vars = Object.keys(varMap).sort(function (a, b) { return b.length - a.length; });
@@ -170,19 +187,26 @@ var FormulaPlugin = /** @class */ (function () {
             vars.forEach(function (v) {
                 var from = 0;
                 var idx = -1;
-                while (~(idx = content.indexOf(v, from))) {
+                var _loop_2 = function () {
                     var encode = Editor.FormulaEditor.replaceStrByIndex(content, idx, v, REPLACE_KEY);
                     var reg = Editor.FormulaEditor.getRegExpByMode(evalMode, REPLACE_KEY);
                     if (reg.test(encode)) {
-                        _this.markText({
-                            line: line,
-                            ch: idx
-                        }, {
-                            line: line,
-                            ch: idx + v.length
-                        }, varMap[v], 'cm-field');
+                        var markFrom_2 = idx;
+                        v.split('.').forEach(function (val, index) {
+                            _this.markText({
+                                line: line,
+                                ch: markFrom_2
+                            }, {
+                                line: line,
+                                ch: markFrom_2 + val.length
+                            }, varMap[v].split('.')[index], 'cm-field');
+                            markFrom_2 += 1 + val.length;
+                        });
                     }
                     from = idx + v.length;
+                };
+                while (~(idx = content.indexOf(v, from))) {
+                    _loop_2();
                 }
             });
         };

package/lib/components/icons.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 

package/lib/components/json-schema/Array.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,7 +20,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputJSONSchemaArray(props) {
     var _a, _b, _c;
-    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, collapsable = props.collapsable, renderValue = props.renderValue;
+    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, collapsable = props.collapsable, renderValue = props.renderValue, useMobileUI = props.useMobileUI;
     var buildMembers = React__default["default"].useCallback(function (schema, value) {
         var members = [];
         var len = Array.isArray(value) ? value.length : 1;
@@ -111,12 +111,14 @@ function InputJSONSchemaArray(props) {
     // todo additionalProperties 还有其他格式
     var allowAdd = !maxContains || maxContains > members.length;
     var allowDelete = !minContains || minContains < members.length;
+    var mobileUI = useMobileUI && amisCore.isMobile();
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         collapsable ? (React__default["default"].createElement("a", { className: cx('JSONSchemaObject-caret', {
                 'is-collapsed': collapsed
             }), onClick: toggleCollapsed },
             React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon" }))) : null,
         React__default["default"].createElement("div", { className: cx('JSONSchemaObject', {
+                'is-mobile': mobileUI,
                 'is-expanded': collapsable && !collapsed
             }) },
             collapsed ? (renderValue ? (React__default["default"].createElement(Item.InputJSONSchemaItem, tslib.__assign({}, props, { value: value, onChange: onChange, schema: {

package/lib/components/json-schema/Item.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -31,15 +31,15 @@ function InputJSONSchemaItem(props) {
         return props.renderValue(props.value, props.onChange, schema, props);
     }
     else if (schema.type == 'number') {
-        return (React__default["default"].createElement(NumberInput["default"], { value: props.value, onChange: props.onChange, placeholder: props.placeholder }));
+        return (React__default["default"].createElement(NumberInput["default"], { value: props.value, onChange: props.onChange, placeholder: props.placeholder, useMobileUI: props.useMobileUI }));
     }
     else if (schema.type == 'integer') {
-        return (React__default["default"].createElement(NumberInput["default"], { value: props.value, onChange: props.onChange, precision: 0, placeholder: props.placeholder }));
+        return (React__default["default"].createElement(NumberInput["default"], { value: props.value, onChange: props.onChange, precision: 0, placeholder: props.placeholder, useMobileUI: props.useMobileUI }));
     }
     else if (schema.type == 'boolean') {
         return (React__default["default"].createElement(Switch["default"], { value: props.value, onChange: props.onChange, className: "mt-2" }));
     }
-    return (React__default["default"].createElement(InputBox["default"], { value: props.value, onChange: props.onChange, placeholder: props.placeholder }));
+    return (React__default["default"].createElement(InputBox["default"], { value: props.value, onChange: props.onChange, placeholder: props.placeholder, useMobileUI: props.useMobileUI }));
 }
 
 exports.InputJSONSchemaItem = InputJSONSchemaItem;

package/lib/components/json-schema/Object.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function InputJSONSchemaObject(props) {
     var _a, _b;
-    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, renderKey = props.renderKey, collapsable = props.collapsable, renderValue = props.renderValue;
+    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, renderKey = props.renderKey, collapsable = props.collapsable, renderValue = props.renderValue, useMobileUI = props.useMobileUI;
     var buildMembers = React__default["default"].useCallback(function (schema, value) {
         var e_1, _a;
         var members = [];
@@ -179,12 +179,14 @@ function InputJSONSchemaObject(props) {
     var allowAdd = !(props.schema.additionalProperties === false &&
         options.every(function (o) { return members.find(function (m) { return m.name === o.value; }); }));
     var allowInput = props.schema.additionalProperties !== false;
+    var mobileUI = useMobileUI && amisCore.isMobile();
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         collapsable ? (React__default["default"].createElement("a", { className: cx('JSONSchemaObject-caret', {
                 'is-collapsed': collapsed
             }), onClick: toggleCollapsed },
             React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon" }))) : null,
         React__default["default"].createElement("div", { className: cx('JSONSchemaObject', {
+                'is-mobile': mobileUI,
                 'is-expanded': collapsable && !collapsed
             }) },
             collapsed ? (renderValue ? (React__default["default"].createElement(Item.InputJSONSchemaItem, tslib.__assign({}, props, { value: value, onChange: onChange, schema: {
@@ -193,7 +195,9 @@ function InputJSONSchemaObject(props) {
                 var _a, _b;
                 var filtedOptions = options.filter(function (o) { return !members.find(function (m) { return m !== member && m.name === o.value; }); });
                 return (React__default["default"].createElement("div", { key: member.key, className: cx('JSONSchemaMember') },
-                    React__default["default"].createElement("div", { className: cx('JSONSchemaMember-key') }, member.nameMutable ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderKey ? (renderKey(member.name, onMemberKeyChange.bind(null, member), member.schema, props)) : filtedOptions.length ? (allowInput ? (React__default["default"].createElement(InputBoxWithSuggestion["default"], { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions })) : (React__default["default"].createElement(Select["default"], { simpleValue: true, block: true, value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions }))) : (React__default["default"].createElement(InputBox["default"], { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key') })))) : (React__default["default"].createElement("span", null,
+                    React__default["default"].createElement("div", { className: cx('JSONSchemaMember-key', {
+                            'is-mobile': mobileUI
+                        }) }, member.nameMutable ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderKey ? (renderKey(member.name, onMemberKeyChange.bind(null, member), member.schema, props)) : filtedOptions.length ? (allowInput ? (React__default["default"].createElement(InputBoxWithSuggestion["default"], { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions, useMobileUI: useMobileUI })) : (React__default["default"].createElement(Select["default"], { simpleValue: true, block: true, value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions, useMobileUI: useMobileUI }))) : (React__default["default"].createElement(InputBox["default"], { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), useMobileUI: useMobileUI })))) : (React__default["default"].createElement("span", null,
                         member.required ? (React__default["default"].createElement("span", { className: cx("Form-star") }, "*")) : null,
                         ((_a = member.schema) === null || _a === void 0 ? void 0 : _a.title) || member.name))),
                     React__default["default"].createElement("div", { className: cx('JSONSchemaMember-value') },

package/lib/components/json-schema/index.d.ts

@@ -12,6 +12,7 @@ export interface InputJSONSchemaItemProps extends ThemeProps, LocaleProps {
     renderKey?: (value: any, onChange: (value: any) => void, schema: any, props: any) => JSX.Element;
     collapsable?: boolean;
     placeholder?: string;
+    useMobileUI?: boolean;
 }
 export interface InputJSONSchemaProps extends Omit<InputJSONSchemaItemProps, 'schema'> {
     schema?: any;

package/lib/components/json-schema/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 

package/lib/components/menu/MenuContext.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 

package/lib/components/menu/MenuItem.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -46,7 +46,8 @@ var MenuItem = /** @class */ (function (_super) {
             'attribute',
             'onMouseEnter',
             'onMouseLeave',
-            'onClick'
+            'onClick',
+            'className'
         ];
         return _this;
     }

package/lib/components/menu/SubMenu.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -113,11 +113,11 @@ var SubMenu = /** @class */ (function (_super) {
     };
     SubMenu.prototype.render = function () {
         var _a, _b;
-        var _c = this.props, popupClassName = _c.popupClassName, cx = _c.classnames, hidden = _c.hidden;
+        var _c = this.props, popupClassName = _c.popupClassName, cx = _c.classnames, hidden = _c.hidden, className = _c.className;
         var isDarkTheme = this.context.themeColor === 'dark';
         return hidden ? null : (React__default["default"].createElement(RcMenu.SubMenu, tslib.__assign({}, pick__default["default"](this.props, this.internalProps), { className: cx('Nav-Menu-submenu', (_a = {},
                 _a['Nav-Menu-submenu-dark'] = isDarkTheme,
-                _a)), popupClassName: cx('Nav-Menu-submenu-popup', (_b = {},
+                _a), className), popupClassName: cx((_b = {},
                 _b['Nav-Menu-submenu-popup-dark'] = isDarkTheme,
                 _b), popupClassName), title: this.renderSubMenuTitle(), onTitleClick: this.handleSubmenuTitleActived })));
     };