Pull request #3403: KERNEL-14116 refactor: component/allvaluechooser、allvaluemultitextvaluecombo、form

Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:es6 to es6

* commit '88ebbb75adcc0c22fb3bb34fc67d1decabcece69':
  KERNEL-14116 refactor: component/allvaluechooser、allvaluemultitextvaluecombo、form

src/component/allvaluechooser/abstract.allvaluechooser.js

@@ -1,61 +1,74 @@
-/**
- * 简单的复选下拉框控件, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值
- * 封装了字段处理逻辑
- *
- * Created by GUY on 2015/10/29.
- * @class BI.AbstractAllValueChooser
- * @extends BI.Widget
- */
-BI.AbstractAllValueChooser = BI.inherit(BI.Widget, {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    isNotNull,
+    some,
+    isNotEmptyArray,
+    each,
+    Func,
+    uniq,
+    makeObject,
+    filter,
+    difference,
+    map,
+    Selection
+} from "@/core";
+import { MultiSelectCombo } from "@/widget";
 
-    _const: {
-        perPage: 100
-    },
+@shortcut()
+export class AbstractAllValueChooser extends Widget {
+    _const = { perPage: 100 };
 
-    _defaultConfig: function () {
-        return BI.extend(BI.AbstractAllValueChooser.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             width: 200,
             height: 30,
             items: null,
-            itemsCreator: BI.emptyFn,
-            cache: true
+            itemsCreator: emptyFn,
+            cache: true,
         });
-    },
+    }
 
-    _valueFormatter: function (v) {
-        var text = v;
+    _valueFormatter(v) {
+        let text = v;
         if (this.options.valueFormatter) {
             return this.options.valueFormatter(v);
         }
-        if (BI.isNotNull(this.items)) {
-            BI.some(this.items, function (i, item) {
+        if (isNotNull(this.items)) {
+            some(this.items, (i, item) => {
                 // 把value都换成字符串
                 // 需要考虑到value也可能是数字
-                if (item.value === v || item.value + "" === v) {
+                if (item.value === v || `${item.value}` === v) {
                     text = item.text;
+                    
                     return true;
                 }
             });
         }
+        
         return text;
-    },
+    }
 
-    _getItemsByTimes: function (items, times) {
-        var res = [];
-        for (var i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) {
+    _getItemsByTimes(items, times) {
+        const res = [];
+        for (let i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) {
             res.push(items[i]);
         }
+        
         return res;
-    },
+    }
 
-    _hasNextByTimes: function (items, times) {
+    _hasNextByTimes(items, times) {
         return times * this._const.perPage < items.length;
-    },
+    }
 
-    _itemsCreator: function (options, callback) {
-        var self = this, o = this.options;
+    _itemsCreator(options, callback) {
+        const self = this,
+            o = this.options;
         if (!o.cache || !this.items) {
-            o.itemsCreator({}, function (items) {
+            o.itemsCreator({}, items => {
                 self.items = items;
                 call(items);
             });
@@ -64,54 +77,56 @@ BI.AbstractAllValueChooser = BI.inherit(BI.Widget, {
         }
 
         function call(items) {
-            var keywords = (options.keywords || []).slice();
+            const keywords = (options.keywords || []).slice();
             if (options.keyword) {
                 keywords.push(options.keyword);
             }
-            var resultItems = items;
-            if (BI.isNotEmptyArray(keywords)) {
+            let resultItems = items;
+            if (isNotEmptyArray(keywords)) {
                 resultItems = [];
-                BI.each(keywords, function (i, kw) {
-                    var search = BI.Func.getSearchResult(items, kw);
+                each(keywords, (i, kw) => {
+                    const search = Func.getSearchResult(items, kw);
                     resultItems = resultItems.concat(search.match).concat(search.find);
                 });
-                resultItems = BI.uniq(resultItems);
+                resultItems = uniq(resultItems);
             }
-            if (options.selectedValues) {// 过滤
-                var filter = BI.makeObject(options.selectedValues, true);
-                resultItems = BI.filter(resultItems, function (i, ob) {
-                    return !filter[ob.value];
-                });
+            if (options.selectedValues) {
+                // 过滤
+                const values = makeObject(options.selectedValues, true);
+                resultItems = filter(resultItems, (i, ob) => !values[ob.value]);
             }
-            if (options.type === BI.MultiSelectCombo.REQ_GET_ALL_DATA) {
+            if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) {
                 callback({
-                    items: resultItems
+                    items: resultItems,
                 });
+                
                 return;
             }
-            if (options.type === BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) {
+            if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) {
                 callback({ count: resultItems.length });
+                
                 return;
             }
             callback({
                 items: self._getItemsByTimes(resultItems, options.times),
-                hasNext: self._hasNextByTimes(resultItems, options.times)
+                hasNext: self._hasNextByTimes(resultItems, options.times),
             });
         }
-    },
+    }
 
-    _assertValue: function (v) {
+    _assertValue(v) {
         v = v || {};
-        var value = v;
-        if (BI.isNotNull(this.items)) {
-            var isAllSelect = BI.difference(BI.map(this.items, "value"), v.value).length === 0;
+        let value = v;
+        if (isNotNull(this.items)) {
+            const isAllSelect = difference(map(this.items, "value"), v.value).length === 0;
             if (isAllSelect) {
                 value = {
-                    type: BI.Selection.All,
+                    type: Selection.All,
                     value: [],
                 };
             }
         }
+        
         return value;
-    },
-});
+    }
+}

src/component/allvaluechooser/combo.allvaluechooser.js

@@ -1,77 +1,77 @@
-/**
- * 简单的复选下拉框控件, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值
- * 封装了字段处理逻辑
- *
- * Created by GUY on 2015/10/29.
- * @class BI.AllValueChooserCombo
- * @extends BI.AbstractAllValueChooser
- */
-BI.AllValueChooserCombo = BI.inherit(BI.AbstractAllValueChooser, {
+import { shortcut, extend, emptyFn, isNotNull, createWidget, bind, Selection, difference, map } from "@/core";
+import { AbstractAllValueChooser } from "./abstract.allvaluechooser";
+import { MultiSelectCombo } from "@/widget";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.AllValueChooserCombo.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class AllValueChooserCombo extends AbstractAllValueChooser {
+    static xtype = "bi.all_value_chooser_combo";
+
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-all-value-chooser-combo",
             width: 200,
             height: 24,
             items: null,
-            itemsCreator: BI.emptyFn,
-            cache: true
+            itemsCreator: emptyFn,
+            cache: true,
         });
-    },
+    }
 
-    _init: function () {
-        BI.AllValueChooserCombo.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        if (BI.isNotNull(o.items)) {
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        if (isNotNull(o.items)) {
             this.items = o.items;
         }
-        this.combo = BI.createWidget({
-            type: "bi.multi_select_combo",
+        this.combo = createWidget({
+            type: MultiSelectCombo.xtype,
             simple: o.simple,
             text: o.text,
             element: this,
-            itemsCreator: BI.bind(this._itemsCreator, this),
-            valueFormatter: BI.bind(this._valueFormatter, this),
+            itemsCreator: bind(this._itemsCreator, this),
+            valueFormatter: bind(this._valueFormatter, this),
             width: o.width,
             height: o.height,
             value: this._assertValue({
-                type: BI.Selection.Multi,
-                value: o.value || []
-            })
+                type: Selection.Multi,
+                value: o.value || [],
+            }),
         });
 
-        this.combo.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () {
-            self.fireEvent(BI.AllValueChooserCombo.EVENT_CONFIRM);
+        this.combo.on(MultiSelectCombo.EVENT_CONFIRM, () => {
+            this.fireEvent(AllValueChooserCombo.EVENT_CONFIRM);
         });
-    },
+    }
 
-    setValue: function (v) {
-        this.combo.setValue(this._assertValue({
-            type: BI.Selection.Multi,
-            value: v || []
-        }));
-    },
+    setValue(v) {
+        this.combo.setValue(
+            this._assertValue({
+                type: Selection.Multi,
+                value: v || [],
+            })
+        );
+    }
 
-    getValue: function () {
+    getValue() {
         return this.getAllValue();
-    },
+    }
 
-    getAllValue: function () {
-        var val = this.combo.getValue() || {};
-        if (val.type === BI.Selection.Multi) {
+    getAllValue() {
+        const val = this.combo.getValue() || {};
+        if (val.type === Selection.Multi) {
             return val.value || [];
         }
 
-        return BI.difference(BI.map(this.items, "value"), val.value || []);
-    },
+        return difference(map(this.items, "value"), val.value || []);
+    }
 
-    populate: function (items) {
+    populate(items) {
         // 直接用combo的populate不会作用到AbstractValueChooser上
-        if (BI.isNotNull(items)) {
+        if (isNotNull(items)) {
             this.items = items;
         }
         this.combo.populate();
     }
-});
-BI.AllValueChooserCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.shortcut("bi.all_value_chooser_combo", BI.AllValueChooserCombo);
+}

src/component/allvaluechooser/index.js

@@ -0,0 +1,3 @@
+export { AbstractAllValueChooser } from "./abstract.allvaluechooser";
+export { AllValueChooserCombo } from "./combo.allvaluechooser";
+export { AllValueChooserPane } from "./pane.allvaluechooser";

src/component/allvaluechooser/pane.allvaluechooser.js

@@ -1,69 +1,67 @@
-/**
- * 简单的复选面板, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值
- * 封装了字段处理逻辑
- *
- * Created by GUY on 2015/10/29.
- * @class BI.AllValueChooserPane
- * @extends BI.AbstractAllValueChooser
- */
-BI.AllValueChooserPane = BI.inherit(BI.AbstractAllValueChooser, {
+import { shortcut, extend, emptyFn, createWidget, bind, isNotNull, Selection, difference, map } from "@/core";
+import { AbstractAllValueChooser } from "./abstract.allvaluechooser";
+import { MultiSelectList } from "@/widget";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.AllValueChooserPane.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class AllValueChooserPane extends AbstractAllValueChooser {
+    static xtype = "bi.all_value_chooser_pane";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-all-value-chooser-pane",
             width: 200,
             height: 30,
             items: null,
-            itemsCreator: BI.emptyFn,
-            cache: true
+            itemsCreator: emptyFn,
+            cache: true,
         });
-    },
+    }
 
-    _init: function () {
-        BI.AllValueChooserPane.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.list = BI.createWidget({
-            type: "bi.multi_select_list",
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.list = createWidget({
+            type: MultiSelectList.xtype,
             element: this,
-            itemsCreator: BI.bind(this._itemsCreator, this),
-            valueFormatter: BI.bind(this._valueFormatter, this),
+            itemsCreator: bind(this._itemsCreator, this),
+            valueFormatter: bind(this._valueFormatter, this),
             width: o.width,
-            height: o.height
+            height: o.height,
         });
 
-        this.list.on(BI.MultiSelectList.EVENT_CHANGE, function () {
-            self.fireEvent(BI.AllValueChooserPane.EVENT_CHANGE);
+        this.list.on(MultiSelectList.EVENT_CHANGE, () => {
+            this.fireEvent(AllValueChooserPane.EVENT_CHANGE);
         });
 
-        if (BI.isNotNull(o.items)) {
+        if (isNotNull(o.items)) {
             this.items = o.items;
             this.list.populate();
         }
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.list.setValue({
-            type: BI.Selection.Multi,
-            value: v || []
+            type: Selection.Multi,
+            value: v || [],
         });
-    },
+    }
 
-    getValue: function () {
-        var val = this.list.getValue() || {};
-        if (val.type === BI.Selection.Multi) {
+    getValue() {
+        const val = this.list.getValue() || {};
+        if (val.type === Selection.Multi) {
             return val.value || [];
         }
 
-        return BI.difference(BI.map(this.items, "value"), val.value || []);
-    },
+        return difference(map(this.items, "value"), val.value || []);
+    }
 
-    populate: function (items) {
+    populate(items) {
         // 直接用combo的populate不会作用到AbstractValueChooser上
-        if (BI.isNotNull(items)) {
+        if (isNotNull(items)) {
             this.items = items;
         }
         this.list.populate();
     }
-});
-BI.AllValueChooserPane.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.all_value_chooser_pane", BI.AllValueChooserPane);
+}

src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js

@@ -1,66 +1,72 @@
-BI.AllValueMultiTextValueCombo = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Selection, each, contains } from "@/core";
+import { SearchMultiTextValueCombo } from "@/widget";
 
-    props: {
-        baseCls: "bi-all-value-multi-text-value-combo",
-        width: 200,
-        height: 24,
-        items: []
-    },
+@shortcut()
+export class AllValueMultiTextValueCombo extends Widget {
+    static xtype = "bi.all_value_multi_text_value_combo";
+
+    props = { baseCls: "bi-all-value-multi-text-value-combo", width: 200, height: 24, items: [] };
+
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+
+    render() {
+        const self = this,
+            o = this.options;
+        const value = this._digestValue(o.value);
         
-    render: function () {
-        var self = this, o = this.options;
-        var value = this._digestValue(o.value);
         return {
             type: "bi.search_multi_text_value_combo",
             simple: o.simple,
             text: o.text,
             height: o.height,
             items: o.items,
-            value: value,
+            value,
             numOfPage: 100,
             valueFormatter: o.valueFormatter,
             warningTitle: o.warningTitle,
-            listeners: [{
-                eventName: BI.SearchMultiTextValueCombo.EVENT_CONFIRM,
-                action: function () {
-                    self.fireEvent(BI.AllValueMultiTextValueCombo.EVENT_CONFIRM);
+            listeners: [
+                {
+                    eventName: SearchMultiTextValueCombo.EVENT_CONFIRM,
+                    action () {
+                        self.fireEvent(AllValueMultiTextValueCombo.EVENT_CONFIRM);
+                    },
                 }
-            }],
-            ref: function () {
+            ],
+            ref () {
                 self.combo = this;
-            }
+            },
         };
-    },
+    }
 
-    setValue: function (v) {
-        var value = this._digestValue(v);
+    setValue(v) {
+        const value = this._digestValue(v);
         this.combo.setValue(value);
-    },
+    }
 
-    getValue: function () {
-        var obj = this.combo.getValue() || {};
+    getValue() {
+        const obj = this.combo.getValue() || {};
         obj.value = obj.value || [];
-        if(obj.type === BI.Selection.All) {
-            var values = [];
-            BI.each(this.options.items, function (idx, item) {
-                !BI.contains(obj.value, item.value) && values.push(item.value);
+        if (obj.type === Selection.All) {
+            const values = [];
+            each(this.options.items, (idx, item) => {
+                !contains(obj.value, item.value) && values.push(item.value);
             });
+            
             return values;
         }
+        
         return obj.value || [];
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.options.items = items;
-        this.combo.populate.apply(this.combo, arguments);
-    },
+        this.combo.populate(...arguments);
+    }
 
-    _digestValue: function (v) {
+    _digestValue(v) {
         return {
-            type: BI.Selection.Multi,
-            value: v || []
+            type: Selection.Multi,
+            value: v || [],
         };
     }
-});
-BI.AllValueMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.shortcut("bi.all_value_multi_text_value_combo", BI.AllValueMultiTextValueCombo);
+}

src/component/form/form.field.js

@@ -1,98 +1,111 @@
-/**
- * @author windy
- * @version 2.0
- * Created by windy on 2022/1/11
- */
- BI.FormField = BI.inherit(BI.Widget, {
 
-    props: {
+import { shortcut, Widget, extend, concat, isKey, VerticalAlign } from "@/core";
+
+@shortcut()
+export class FormField extends Widget {
+    static xtype = "bi.form_field";
+
+    props = {
         baseCls: "bi-form-field",
         label: "",
         el: {},
         headerCls: "",
         labelAlign: "right", // 文字默认右对齐
-        validate: function () {
+        validate () {
             return true;
-        } // 默认返回true
-    },
+        }, // 默认返回true
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render () {
+        const self = this,
+            o = this.options;
 
-        var field = {
+        const field = {
             type: "bi.absolute",
-            items: [{
-                el: BI.extend({}, o.el, {
-                    ref: function (_ref) {
-                        self.field = _ref;
-                        o.el.ref && o.el.ref.call(this, _ref);
-                    },
-                    height: o.el.height || 28,
-                    listeners: BI.concat(o.el.listeners, [{
-                        eventName: "EVENT_CHANGE",
-                        action: function () {
-                            self.fireEvent("EVENT_CHANGE");
-                        }
-                    }, {
-                        eventName: "EVENT_CONFIRM",
-                        action: function () {
-                            self.fireEvent("EVENT_CONFIRM");
-                        }
-                    }])
-                }),
-                left: 0,
-                bottom: 0,
-                right: 0,
-                top: 0
-            }, {
-                el: {
-                    type: "bi.label",
-                    cls: "error-tip bi-error",
-                    ref: function (_ref) {
-                        self.error = _ref;
-                    },
-                    invisible: true
+            items: [
+                {
+                    el: extend({}, o.el, {
+                        ref (_ref) {
+                            self.field = _ref;
+                            o.el.ref && o.el.ref.call(this, _ref);
+                        },
+                        height: o.el.height || 28,
+                        listeners: concat(o.el.listeners, [
+                            {
+                                eventName: "EVENT_CHANGE",
+                                action () {
+                                    self.fireEvent("EVENT_CHANGE");
+                                },
+                            },
+                            {
+                                eventName: "EVENT_CONFIRM",
+                                action () {
+                                    self.fireEvent("EVENT_CONFIRM");
+                                },
+                            }
+                        ]),
+                    }),
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    top: 0,
                 },
-                bottom: -20,
-                left: 0,
-                right: 0,
-                height: 20
-            }]
+                {
+                    el: {
+                        type: "bi.label",
+                        cls: "error-tip bi-error",
+                        ref (_ref) {
+                            self.error = _ref;
+                        },
+                        invisible: true,
+                    },
+                    bottom: -20,
+                    left: 0,
+                    right: 0,
+                    height: 20,
+                }
+            ],
         };
 
         return {
             type: "bi.vertical_adapt",
             columnSize: ["auto", "fill"],
-            verticalAlign: BI.VerticalAlign.Stretch,
-            items: BI.isKey(o.label) ? [{
-                el: {
-                    type: "bi.label",
-                    textAlign: o.labelAlign,
-                    text: o.label,
-                    width: o.labelWidth,
-                    cls: o.headerCls,
-                    rgap: 20 // 表单文字与右侧输入间距均为20px
-                }
-            }, field] : [field]
+            verticalAlign: VerticalAlign.Stretch,
+            items: isKey(o.label)
+                ? [
+                    {
+                        el: {
+                            type: "bi.label",
+                            textAlign: o.labelAlign,
+                            text: o.label,
+                            width: o.labelWidth,
+                            cls: o.headerCls,
+                            rgap: 20, // 表单文字与右侧输入间距均为20px
+                        },
+                    },
+                    field
+                ]
+                : [field],
         };
-    },
+    }
 
-    getValue: function () {
+    getValue () {
         return this.field.getValue();
-    },
+    }
 
-    validate: function () {
-        var isValid = this.validateWithNoTip();
-        !isValid && this.error.setText(this.options.tip(this.field.getValue(), this.field));
+    validate () {
+        const isValid = this.validateWithNoTip();
+        !isValid &&
+            this.error.setText(
+                this.options.tip(this.field.getValue(), this.field)
+            );
         this.error.setVisible(!isValid);
         this.field.element[isValid ? "removeClass" : "addClass"]("bi-error");
 
         return isValid;
-    },
+    }
 
-    validateWithNoTip: function () {
+    validateWithNoTip () {
         return this.options.validate(this.field.getValue(), this.field);
     }
-});
-
-BI.shortcut("bi.form_field", BI.FormField);
+}

src/component/form/form.js

@@ -1,45 +1,39 @@
-/**
- * @author windy
- * @version 2.0
- * Created by windy on 2022/1/11
- */
- BI.Form = BI.inherit(BI.Widget, {
+import { shortcut, Widget, map, some, each } from "@/core";
+import { ButtonGroup } from "@/base";
 
-    props: {
+@shortcut()
+export class Form extends Widget {
+    static xtype = "bi.custom_form";
+
+    props = {
         baseCls: "bi-form",
         labelAlign: "right",
-        layout: {
-            type: "bi.vertical",
-            vgap: 20
-        },
-        items: [{
-            validate: BI.emptyFn,
-            tip: BI.emptyFn,
-            label: "",
-            el: {}
-        }],
+        layout: { type: "bi.vertical", vgap: 20 },
+        items: [{ label: "", el: {} }],
         labelWidth: "",
-        headerCls: "", // 左侧文字样式
-    },
+        headerCls: "",
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
 
         return {
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             items: this._createItems(),
             layouts: [o.layout],
-            ref: function (ref) {
-                self.group = ref;
-            }
+            ref: _ref => {
+                this.group = _ref;
+            },
         };
-    },
+    }
 
-    _createItems: function () {
-        var self = this;
-        var o = this.options;
+    _createItems() {
+        const self = this;
+        const o = this.options;
 
-        return BI.map(o.items, function (idx, item) {
+        return map(o.items, (idx, item) => {
             return {
                 type: "bi.form_field",
                 height: item.el.height || 28,
@@ -50,46 +44,43 @@
                 label: item.label,
                 tip: item.tip,
                 validate: item.validate,
-                listeners: [{
-                    eventName: "EVENT_CHANGE",
-                    action: function () {
-                        self.fireEvent(BI.Form.EVENT_CHANGE, this.validate());
+                listeners: [
+                    {
+                        eventName: "EVENT_CHANGE",
+                        action () {
+                            self.fireEvent(Form.EVENT_CHANGE, this.validate());
+                        },
                     }
-                }]
+                ],
             };
         });
-    },
+    }
 
-    isAllValid: function () {
-        return !BI.some(this.validateWithNoTip(), function (idx, v) {
-            return !v;
-        });
-    },
+    isAllValid() {
+        return !some(this.validateWithNoTip(), (idx, v) => !v);
+    }
 
-    validateWithNoTip: function () {
-        var validInfo = [];
-        BI.each(this.group.getAllButtons(), function (idx, button) {
+    validateWithNoTip() {
+        const validInfo = [];
+        each(this.group.getAllButtons(), (idx, button) => {
             validInfo.push(button.validateWithNoTip());
         });
 
         return validInfo;
-    },
+    }
 
-    validate: function () {
-        var validInfo = [];
-        BI.each(this.group.getAllButtons(), function (idx, button) {
+    validate() {
+        const validInfo = [];
+        each(this.group.getAllButtons(), (idx, button) => {
             validInfo.push(button.validate());
         });
 
         return validInfo;
-    },
-
-    getValue: function () {
-        return !this.isAllValid() ? null : BI.map(this.group.getAllButtons(), function (idx, button) {
-            return button.getValue();
-        });
     }
-});
 
-BI.Form.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.custom_form", BI.Form);
+    getValue() {
+        return !this.isAllValid()
+            ? null
+            : map(this.group.getAllButtons(), (idx, button) => button.getValue());
+    }
+}

src/component/form/index.js

@@ -0,0 +1,2 @@
+export { Form } from "./form";
+export { FormField } from "./form.field";

src/component/index.js

@@ -0,0 +1,15 @@
+import * as allvaluechooser from "./allvaluechooser";
+import * as form from "./form";
+import { AllValueMultiTextValueCombo } from "./allvaluemultitextvaluecombo/allvalue.multitextvalue.combo";
+
+Object.assign(BI, {
+    ...allvaluechooser,
+    ...form,
+    AllValueMultiTextValueCombo,
+});
+
+export * from "./allvaluechooser";
+export * from "./form";
+export {
+    AllValueMultiTextValueCombo
+};