amis-core 3.1.1 → 3.3.0

package/lib/renderers/wrapControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.1.1
+ * amis-core v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -32,20 +32,23 @@ var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var hoistNonReactStatic__default = /*#__PURE__*/_interopDefaultLegacy(hoistNonReactStatic);
 var pick__default = /*#__PURE__*/_interopDefaultLegacy(pick);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 function wrapControl(ComposedComponent) {
     var _a;
     var result = hoistNonReactStatic__default["default"](WithRootStore.withRootStore(mobxReact.observer((_a = /** @class */ (function (_super) {
             tslib.__extends(class_1, _super);
             function class_1(props) {
                 var _this = this;
-                var _a, _b;
+                var _a;
                 _this = _super.call(this, props) || this;
                 _this.value = undefined;
                 _this.lazyEmitChange = debounce__default["default"](_this.emitChange.bind(_this), 250, {
                     trailing: true,
                     leading: false
                 });
-                var _c = _this.props, form = _c.formStore, formItem$1 = _c.formItem, rootStore = _c.rootStore, store = _c.store, onChange = _c.onChange, data = _c.data, inputGroupControl = _c.inputGroupControl, _d = _c.$schema, name = _d.name, id = _d.id, type = _d.type, required = _d.required, validations = _d.validations, validationErrors = _d.validationErrors, unique = _d.unique, value = _d.value; _d.multiple; var delimiter = _d.delimiter, valueField = _d.valueField, labelField = _d.labelField, joinValues = _d.joinValues, extractValue = _d.extractValue, selectFirst = _d.selectFirst, autoFill = _d.autoFill, clearValueOnHidden = _d.clearValueOnHidden, validateApi = _d.validateApi, minLength = _d.minLength, maxLength = _d.maxLength, validateOnChange = _d.validateOnChange, label = _d.label;
+                var _b = _this.props, form = _b.formStore, formItem$1 = _b.formItem, rootStore = _b.rootStore, store = _b.store, onChange = _b.onChange, data = _b.data, inputGroupControl = _b.inputGroupControl, _c = _b.$schema, name = _c.name, id = _c.id, type = _c.type, required = _c.required, validations = _c.validations, validationErrors = _c.validationErrors, unique = _c.unique, value = _c.value, extraName = _c.extraName; _c.multiple; var delimiter = _c.delimiter, valueField = _c.valueField, labelField = _c.labelField, joinValues = _c.joinValues, extractValue = _c.extractValue, selectFirst = _c.selectFirst, autoFill = _c.autoFill, clearValueOnHidden = _c.clearValueOnHidden, validateApi = _c.validateApi, minLength = _c.minLength, maxLength = _c.maxLength, validateOnChange = _c.validateOnChange, label = _c.label;
                 _this.getValue = _this.getValue.bind(_this);
                 _this.setValue = _this.setValue.bind(_this);
                 _this.handleChange = _this.handleChange.bind(_this);
@@ -76,7 +79,7 @@ function wrapControl(ComposedComponent) {
                 _this.model = model;
                 // @issue 打算干掉这个
                 formItem$1 === null || formItem$1 === void 0 ? void 0 : formItem$1.addSubFormItem(model);
-                model.config(tslib.__assign(tslib.__assign({}, pick__default["default"](tslib.__assign(tslib.__assign({}, ComposedComponent.defaultProps), _this.props.$schema), ['multiple'])), { id: id, type: type, required: required, unique: unique, value: value, isValueSchemaExp: formula.isExpression(value), rules: validations, messages: validationErrors, delimiter: delimiter, valueField: valueField, labelField: labelField, joinValues: joinValues, extractValue: extractValue, selectFirst: selectFirst, autoFill: autoFill, clearValueOnHidden: clearValueOnHidden, validateApi: validateApi, minLength: minLength, maxLength: maxLength, validateOnChange: validateOnChange, label: label, inputGroupControl: inputGroupControl }));
+                model.config(tslib.__assign(tslib.__assign({}, pick__default["default"](tslib.__assign(tslib.__assign({}, ComposedComponent.defaultProps), _this.props.$schema), ['multiple'])), { id: id, type: type, required: required, unique: unique, value: value, isValueSchemaExp: formula.isExpression(value), rules: validations, messages: validationErrors, delimiter: delimiter, valueField: valueField, labelField: labelField, joinValues: joinValues, extractValue: extractValue, selectFirst: selectFirst, autoFill: autoFill, clearValueOnHidden: clearValueOnHidden, validateApi: validateApi, minLength: minLength, maxLength: maxLength, validateOnChange: validateOnChange, label: label, inputGroupControl: inputGroupControl, extraName: extraName }));
                 // issue 这个逻辑应该在 combo 里面自己实现。
                 if (_this.model.unique &&
                     ((_a = form === null || form === void 0 ? void 0 : form.parentStore) === null || _a === void 0 ? void 0 : _a.storeType) === combo.ComboStore.name) {
@@ -85,21 +88,42 @@ function wrapControl(ComposedComponent) {
                 }
                 if (propValue !== undefined && propValue !== null) {
                     // 同步 value: 优先使用 props 中的 value
-                    model.changeTmpValue(propValue);
+                    model.changeTmpValue(propValue, 'controlled');
                 }
                 else {
-                    // 备注: 此处的 value 是 schema 中的 value（和props.defaultValue相同）
-                    var curTmpValue = formula.isExpression(value)
-                        ? formula.FormulaExec['formula'](value, data) // 对组件默认值进行运算
-                        : (_b = store === null || store === void 0 ? void 0 : store.getValueByName(model.name)) !== null && _b !== void 0 ? _b : formula.replaceExpression(value); // 优先使用公式表达式
-                    // 同步 value
-                    model.changeTmpValue(curTmpValue);
+                    var isExp = formula.isExpression(value);
+                    if (isExp) {
+                        model.changeTmpValue(formula.FormulaExec['formula'](value, data), // 对组件默认值进行运算
+                        'formulaChanged');
+                    }
+                    else {
+                        var initialValue = model.extraName
+                            ? [
+                                store === null || store === void 0 ? void 0 : store.getValueByName(model.name, form === null || form === void 0 ? void 0 : form.canAccessSuperData),
+                                store === null || store === void 0 ? void 0 : store.getValueByName(model.extraName, form === null || form === void 0 ? void 0 : form.canAccessSuperData)
+                            ]
+                            : store === null || store === void 0 ? void 0 : store.getValueByName(model.name, form === null || form === void 0 ? void 0 : form.canAccessSuperData);
+                        if (model.extraName &&
+                            initialValue.every(function (item) { return item === undefined; })) {
+                            initialValue = undefined;
+                        }
+                        model.changeTmpValue(initialValue !== null && initialValue !== void 0 ? initialValue : formula.replaceExpression(value), typeof initialValue !== 'undefined'
+                            ? 'initialValue'
+                            : 'defaultValue');
+                    }
                 }
                 if (onChange &&
                     value !== undefined &&
                     model.tmpValue !== undefined) {
                     // 组件默认值支持表达式需要: 避免初始化时上下文中丢失组件默认值
-                    onChange(model.tmpValue, model.name, false, true);
+                    if (model.extraName) {
+                        var values = model.splitExtraValue(model.tmpValue);
+                        onChange(values[0], model.name, false, true);
+                        onChange(values[1], model.extraName, false, true);
+                    }
+                    else {
+                        onChange(model.tmpValue, model.name, false, true);
+                    }
                 }
                 else if (onChange &&
                     typeof propValue === 'undefined' &&
@@ -109,7 +133,14 @@ function wrapControl(ComposedComponent) {
                     // 对应 issue 为 https://github.com/baidu/amis/issues/2674
                     (store === null || store === void 0 ? void 0 : store.storeType) !== table.TableStore.name) {
                     // 如果没有初始值，通过 onChange 设置过去
-                    onChange(model.tmpValue, model.name, false, true);
+                    if (model.extraName) {
+                        var values = model.splitExtraValue(model.tmpValue);
+                        onChange(values[0], model.name, false, true);
+                        onChange(values[1], model.extraName, false, true);
+                    }
+                    else {
+                        onChange(model.tmpValue, model.name, false, true);
+                    }
                 }
                 return _this;
             }
@@ -136,7 +167,7 @@ function wrapControl(ComposedComponent) {
                 }
             };
             class_1.prototype.componentDidUpdate = function (prevProps) {
-                var _a, _b;
+                var _a, _b, _c;
                 var props = this.props;
                 props.formStore;
                 var model = this.model;
@@ -161,7 +192,8 @@ function wrapControl(ComposedComponent) {
                         'validateApi',
                         'minLength',
                         'maxLength',
-                        'label'
+                        'label',
+                        'extraName'
                     ], prevProps.$schema, props.$schema)) {
                     model.config({
                         required: props.$schema.required,
@@ -184,7 +216,8 @@ function wrapControl(ComposedComponent) {
                         minLength: props.$schema.minLength,
                         maxLength: props.$schema.maxLength,
                         label: props.$schema.label,
-                        inputGroupControl: props === null || props === void 0 ? void 0 : props.inputGroupControl
+                        inputGroupControl: props === null || props === void 0 ? void 0 : props.inputGroupControl,
+                        extraName: props.$schema.extraName
                     });
                 }
                 // 此处需要同时考虑 defaultValue 和 value
@@ -193,60 +226,56 @@ function wrapControl(ComposedComponent) {
                     if (!isEqual__default["default"](props.value, prevProps.value) &&
                         !isEqual__default["default"](props.value, model.tmpValue)) {
                         // 外部直接传入的 value 无需执行运算器
-                        model.changeTmpValue(props.value);
+                        model.changeTmpValue(props.value, 'controlled');
                     }
                 }
                 else if (model &&
                     typeof props.defaultValue !== 'undefined' &&
-                    formula.isExpression(props.defaultValue)) {
-                    var nowFormulaChecked = false;
-                    // 渲染器中的 defaultValue 优先（备注: SchemaRenderer中会将 value 改成 defaultValue）
-                    if (!isEqual__default["default"](props.defaultValue, prevProps.defaultValue) ||
+                    formula.isExpression(props.defaultValue) &&
+                    (!isEqual__default["default"](props.defaultValue, prevProps.defaultValue) ||
                         (props.data !== prevProps.data &&
-                            (formula.isNeedFormula(props.defaultValue, props.data, prevProps.data) ||
-                                (nowFormulaChecked = formula.isNowFormula(props.defaultValue))))) {
-                        var curResult = formula.FormulaExec['formula'](props.defaultValue, props.data);
-                        var prevResult = formula.FormulaExec['formula'](prevProps.defaultValue, prevProps.data);
-                        if (!isEqual__default["default"](curResult, prevResult) &&
-                            !isEqual__default["default"](curResult, model.tmpValue)) {
-                            // 识别上下文变动、自身数值变动、公式运算结果变动
-                            model.changeTmpValue(curResult);
-                            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, curResult, model.name, false);
+                            formula.isNeedFormula(props.defaultValue, props.data, prevProps.data)))) {
+                    var curResult = formula.FormulaExec['formula'](props.defaultValue, props.data);
+                    var prevResult = formula.FormulaExec['formula'](prevProps.defaultValue, prevProps.data);
+                    if (!isEqual__default["default"](curResult, prevResult) &&
+                        !isEqual__default["default"](curResult, model.tmpValue)) {
+                        // 识别上下文变动、自身数值变动、公式运算结果变动
+                        model.changeTmpValue(curResult, 'formulaChanged');
+                        if (model.extraName) {
+                            var values = model.splitExtraValue(curResult);
+                            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values[0], model.name, false);
+                            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, values[1], model.extraName, false);
                         }
-                        else if (nowFormulaChecked) {
-                            var nowData = props.data[model.name];
-                            // now 表达式，计算后的值永远相同
-                            model.changeTmpValue(nowData);
-                            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, nowData, model.name, false);
+                        else {
+                            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, curResult, model.name, false);
                         }
                     }
                 }
                 else if (model) {
-                    var valueByName = getVariable.getVariable(props.data, model.name);
-                    if (isEqual__default["default"](props.defaultValue, prevProps.defaultValue)) {
-                        // value 非公式表达式时，name 值优先，若 defaultValue 主动变动时，则使用 defaultValue
-                        if (
-                        // 然后才是查看关联的 name 属性值是否变化
-                        props.data !== prevProps.data &&
-                            (!model.emitedValue ||
-                                isEqual__default["default"](model.emitedValue, model.tmpValue))) {
-                            model.changeEmitedValue(undefined);
-                            var prevValueByName = getVariable.getVariable(props.data, model.name);
-                            if ((!isEqual__default["default"](valueByName, prevValueByName) ||
-                                getVariable.getVariable(props.data, model.name, false) !==
-                                    getVariable.getVariable(prevProps.data, model.name, false)) &&
-                                !isEqual__default["default"](valueByName, model.tmpValue)) {
-                                model.changeTmpValue(valueByName);
-                            }
-                        }
-                    }
-                    else if (!isEqual__default["default"](props.defaultValue, prevProps.defaultValue) &&
-                        !isEqual__default["default"](props.defaultValue, model.tmpValue)) {
-                        // 组件默认值非公式
-                        var curValue = formula.replaceExpression(props.defaultValue);
-                        model.changeTmpValue(curValue);
-                        if (props.onChange) {
-                            props.onChange(curValue, model.name, false);
+                    // value 非公式表达式时，name 值优先，若 defaultValue 主动变动时，则使用 defaultValue
+                    if (
+                    // 然后才是查看关联的 name 属性值是否变化
+                    props.data !== prevProps.data &&
+                        (!model.emitedValue ||
+                            isEqual__default["default"](model.emitedValue, model.tmpValue))) {
+                        model.changeEmitedValue(undefined);
+                        var valueByName = model.extraName
+                            ? [
+                                getVariable.getVariable(props.data, model.name, false),
+                                getVariable.getVariable(props.data, model.extraName, false)
+                            ]
+                            : getVariable.getVariable(props.data, model.name, false);
+                        if (!isEqual__default["default"](valueByName, model.extraName
+                            ? model.splitExtraValue(model.tmpValue)
+                            : model.tmpValue) &&
+                            (!isEqual__default["default"](model.extraName ? valueByName[0] : valueByName, getVariable.getVariable(prevProps.data, model.name, false)) ||
+                                // extraName
+                                (model.extraName &&
+                                    !isEqual__default["default"](valueByName[1], getVariable.getVariable(prevProps.data, model.extraName, false))))) {
+                            model.changeTmpValue(valueByName, props.formInited && !prevProps.formInited
+                                ? 'formInited'
+                                : 'dataChanged');
+                            this.checkValidate();
                         }
                     }
                 }
@@ -317,14 +346,33 @@ function wrapControl(ComposedComponent) {
                     scoped.unRegisterComponent(originRef);
                 }
             };
+            class_1.prototype.checkValidate = function () {
+                var _a;
+                if (!this.model)
+                    return; // 如果 model 为 undefined 则直接返回
+                var validated = this.model.validated;
+                var _b = this.props, formSubmited = _b.formSubmited, validateOnChange = _b.validateOnChange;
+                if (
+                // 如果配置了 minLength 或者 maxLength 就切成及时验证
+                // this.model.rules.minLength ||
+                // this.model.rules.maxLength ||
+                validateOnChange === true ||
+                    (validateOnChange !== false && (formSubmited || validated))) {
+                    this.validate();
+                }
+                else if (validateOnChange === false) {
+                    (_a = this.model) === null || _a === void 0 ? void 0 : _a.reset();
+                }
+            };
             class_1.prototype.validate = function () {
                 return tslib.__awaiter(this, void 0, void 0, function () {
-                    var _a, form, data, formItemDispatchEvent, result, combo$1, group, validPromises, validPromises;
+                    var _a, form, data, formItemDispatchEvent, result, combo$1, group, validPromises;
                     return tslib.__generator(this, function (_b) {
                         switch (_b.label) {
                             case 0:
+                                if (!this.model)
+                                    return [2 /*return*/];
                                 _a = this.props, form = _a.formStore, data = _a.data, formItemDispatchEvent = _a.formItemDispatchEvent;
-                                if (!this.model) return [3 /*break*/, 4];
                                 if (!(this.model.unique &&
                                     (form === null || form === void 0 ? void 0 : form.parentStore) &&
                                     form.parentStore.storeType === combo.ComboStore.name)) return [3 /*break*/, 2];
@@ -337,12 +385,9 @@ function wrapControl(ComposedComponent) {
                             case 1:
                                 result = _b.sent();
                                 return [3 /*break*/, 4];
-                            case 2:
-                                validPromises = form === null || form === void 0 ? void 0 : form.getItemsByName(this.model.name).map(function (item) { return item.validate(data); });
-                                if (!(validPromises && validPromises.length)) return [3 /*break*/, 4];
-                                return [4 /*yield*/, Promise.all(validPromises)];
+                            case 2: return [4 /*yield*/, this.model.validate(data)];
                             case 3:
-                                result = _b.sent();
+                                result = [_b.sent()];
                                 _b.label = 4;
                             case 4:
                                 if (result && result.length) {
@@ -377,9 +422,9 @@ function wrapControl(ComposedComponent) {
                 }
                 if (pipeOut) {
                     var oldValue = this.model.value;
-                    value = pipeOut(value, oldValue, data);
+                    value = pipeOut.call(this, value, oldValue, data);
                 }
-                this.model.changeTmpValue(value);
+                this.model.changeTmpValue(value, 'input');
                 if (changeImmediately || conrolChangeImmediately || !formInited) {
                     this.emitChange(submitOnChange);
                 }
@@ -389,15 +434,20 @@ function wrapControl(ComposedComponent) {
                 }
             };
             class_1.prototype.emitChange = function (submitOnChange) {
-                var _a;
                 if (submitOnChange === void 0) { submitOnChange = this.props.$schema.submitOnChange; }
-                var _b = this.props, form = _b.formStore, onChange = _b.onChange, _c = _b.$schema, name = _c.name, id = _c.id, label = _c.label, type = _c.type, onFormItemChange = _c.onChange; _c.maxLength; _c.minLength; var data = _b.data, env = _b.env, validateOnChange = _b.validateOnChange, formSubmited = _b.formSubmited;
+                var _a = this.props, form = _a.formStore, onChange = _a.onChange, _b = _a.$schema, name = _b.name, id = _b.id, label = _b.label, type = _b.type, onFormItemChange = _b.onChange; _b.maxLength; _b.minLength; var data = _a.data, env = _a.env; _a.validateOnChange; _a.formSubmited;
                 if (!this.model) {
                     return;
                 }
+                var model = this.model;
                 var value = this.model.tmpValue;
-                var oldValue = getVariable.getVariable(data, this.model.name, false);
-                if (oldValue === value) {
+                var oldValue = model.extraName
+                    ? [
+                        getVariable.getVariable(data, model.name, false),
+                        getVariable.getVariable(data, model.extraName, false)
+                    ]
+                    : getVariable.getVariable(data, model.name, false);
+                if (model.extraName ? isEqual__default["default"](oldValue, value) : oldValue === value) {
                     return;
                 }
                 if (type !== 'input-password') {
@@ -420,19 +470,15 @@ function wrapControl(ComposedComponent) {
                 if (!this.model) {
                     return;
                 }
-                var validated = this.model.validated;
-                onChange === null || onChange === void 0 ? void 0 : onChange(value, name, submitOnChange === true);
-                if (
-                // 如果配置了 minLength 或者 maxLength 就切成及时验证
-                // this.model.rules.minLength ||
-                // this.model.rules.maxLength ||
-                validateOnChange === true ||
-                    (validateOnChange !== false && (formSubmited || validated))) {
-                    this.validate();
+                if (model.extraName) {
+                    var values = model.splitExtraValue(value);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(values[0], name);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(values[1], model.extraName, submitOnChange === true);
                 }
-                else if (validateOnChange === false) {
-                    (_a = this.model) === null || _a === void 0 ? void 0 : _a.reset();
+                else {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(value, name, submitOnChange === true);
                 }
+                this.checkValidate();
             };
             class_1.prototype.handleBlur = function (e) {
                 var _a = this.props, onBlur = _a.onBlur, validateOnBlur = _a.$schema.validateOnBlur;
@@ -445,17 +491,25 @@ function wrapControl(ComposedComponent) {
                 if (!this.model) {
                     return;
                 }
+                var model = this.model;
                 var _a = this.props; _a.formStore; var name = _a.name, pipeOut = _a.$schema.pipeOut, onChange = _a.onChange, oldValue = _a.value, data = _a.data;
                 if (pipeOut) {
-                    value = pipeOut(value, oldValue, data);
+                    value = pipeOut.call(this, value, oldValue, data);
+                }
+                if (model.extraName) {
+                    var values = model.splitExtraValue(value);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(values[0], name, false, true);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(values[1], model.extraName, false, true);
+                }
+                else {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(value, name, false, true);
                 }
-                onChange === null || onChange === void 0 ? void 0 : onChange(value, name, false, true);
             };
             class_1.prototype.getValue = function () {
                 var _a = this.props, data = _a.formStore, control = _a.$schema;
                 var value = this.model ? this.model.tmpValue : control.value;
                 if (control.pipeIn) {
-                    value = control.pipeIn(value, data);
+                    value = control.pipeIn.call(this, value, data);
                 }
                 return value;
             };
@@ -489,6 +543,7 @@ function wrapControl(ComposedComponent) {
                     ref: this.controlRef,
                     data: data || (store === null || store === void 0 ? void 0 : store.data),
                     value: value,
+                    changeMotivation: model === null || model === void 0 ? void 0 : model.changeMotivation,
                     defaultValue: control.value,
                     formItemValue: value,
                     onChange: this.handleChange,
@@ -500,7 +555,7 @@ function wrapControl(ComposedComponent) {
                     // !没了这个， tree 里的 options 渲染会出问题
                     _filteredOptions: (_a = this.model) === null || _a === void 0 ? void 0 : _a.filteredOptions
                 };
-                return (React__default["default"].createElement(ComposedComponent, tslib.__assign({}, this.props, injectedProps)));
+                return (_J$X_(ComposedComponent, tslib.__assign({}, this.props, injectedProps)));
             };
             return class_1;
         }(React__default["default"].Component)),

package/lib/store/app.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.1.1
+ * amis-core v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -11,7 +11,44 @@ var tslib = require('tslib');
 var mobxStateTree = require('mobx-state-tree');
 var helper = require('../utils/helper.js');
 var service = require('./service.js');
+require('../utils/api.js');
+require('../utils/ColorScale.js');
+require('../utils/columnsSplit.js');
+require('amis-formula');
+require('lodash/isPlainObject');
 var object = require('../utils/object.js');
+require('../utils/DataSchema.js');
+require('../utils/DataScope.js');
+require('moment');
+require('../utils/debug.js');
+require('../utils/dom.js');
+require('../utils/errors.js');
+var tpl = require('../utils/tpl.js');
+require('classnames');
+require('../utils/filter.js');
+require('lodash/isObject');
+require('lodash/isString');
+require('lodash/isBoolean');
+require('../utils/highlight.js');
+require('../utils/icon.js');
+require('../utils/image.js');
+require('lodash/isEqual');
+require('../actions/Action.js');
+require('lodash/debounce');
+require('lodash/cloneDeep');
+require('../utils/resize-sensor.js');
+require('react');
+require('react-overlays/useRootClose');
+require('react-dom');
+require('../utils/SimpleMap.js');
+require('lodash/mapValues');
+require('lodash/camelCase');
+require('uncontrollable');
+require('hoist-non-react-statics');
+require('../utils/validations.js');
+require('../utils/resolveCondition.js');
+require('mobx');
+require('../utils/Animation.js');
 
 var AppStore = service.ServiceStore.named('AppStore')
     .props({
@@ -24,7 +61,7 @@ var AppStore = service.ServiceStore.named('AppStore')
     get navigations() {
         if (Array.isArray(self.pages)) {
             return helper.mapTree(self.pages, function (item) {
-                var visible = item.visible;
+                var visible = helper.isVisible(item, self.data);
                 if (visible !== false &&
                     item.path &&
                     !~item.path.indexOf('http') &&
@@ -37,7 +74,11 @@ var AppStore = service.ServiceStore.named('AppStore')
                     path: item.path,
                     children: item.children,
                     className: item.className,
-                    visible: visible
+                    visible: visible,
+                    badge: typeof item.badge === 'string'
+                        ? tpl.filter(item.badge, self.data)
+                        : item.badge,
+                    badgeClassName: tpl.filter(item.badgeClassName, self.data)
                 };
             });
         }