KERNEL-14081 refactor: case/loader、segment、toolbar

es6.js

@@ -104,6 +104,8 @@ collection.methods.forEach(el => {
         "each",
         "contains",
         "remove",
+        "createItems",
+        "makeArrayByArray",
     ];
 
     target.forEach(t => {

src/case/index.js

@@ -3,6 +3,9 @@ import * as calendarItem from "./calendar";
 import * as pager from "./pager";
 import * as editor from "./editor";
 import * as trigger from "./trigger";
+import * as loader from "./loader";
+import * as segment from "./segment";
+import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
 
 Object.assign(BI, {
     ...button,
@@ -10,6 +13,9 @@ Object.assign(BI, {
     ...pager,
     ...editor,
     ...trigger,
+    ...loader,
+    ...segment,
+    MultiSelectBar,
 });
 
 export * from "./button";
@@ -17,4 +23,8 @@ export * from "./calendar";
 export * from "./pager";
 export * from "./editor";
 export * from "./trigger";
-
+export * from "./loader";
+export * from "./segment";
+export {
+    MultiSelectBar
+};

src/case/loader/index.js

@@ -0,0 +1,3 @@
+export { LazyLoader } from "./loader.lazy";
+export { ListLoader } from "./loader.list";
+export { SortList } from "./sort.list";

src/case/loader/loader.lazy.js

@@ -1,103 +1,106 @@
-/**
- * Created by roy on 15/11/6.
- */
-BI.LazyLoader = BI.inherit(BI.Widget, {
-    _const: {
-        PAGE: 100
-    },
-    _defaultConfig: function () {
-        return BI.extend(BI.LazyLoader.superclass._defaultConfig.apply(this, arguments), {
+import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core";
+import { Loader } from "@/base";
+
+@shortcut()
+export class LazyLoader extends Widget {
+    static xtype = "bi.lazy_loader"
+
+    _const = {
+        PAGE: 100,
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-lazy-loader",
             el: {},
-            items: []
+            items: [],
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.LazyLoader.superclass._init.apply(this, arguments);
-        var all = o.items.length;
-        this.loader = BI.createWidget({
+    _init() {
+        const o = this.options;
+        super._init(...arguments);
+        const all = o.items.length;
+        this.loader = createWidget({
             type: "bi.loader",
             element: this,
             // 下面是button_group的属性
             el: o.el,
-
-            itemsCreator: function (options, populate) {
-                populate(self._getNextItems(options));
+            itemsCreator: (options, populate) => {
+                populate(this._getNextItems(options));
             },
-            hasNext: function (option) {
-                return option.count < all;
-            }
+            hasNext: option => option.count < all,
         });
 
-        this.loader.on(BI.Loader.EVENT_CHANGE, function (obj) {
-            self.fireEvent(BI.LazyLoader.EVENT_CHANGE, obj);
+        this.loader.on(Loader.EVENT_CHANGE, obj => {
+            this.fireEvent(LazyLoader.EVENT_CHANGE, obj);
         });
-    },
-    _getNextItems: function (options) {
-        var self = this, o = this.options;
-        var lastNum = o.items.length - this._const.PAGE * (options.times - 1);
-        var lastItems = BI.takeRight(o.items, lastNum);
-        var nextItems = BI.take(lastItems, this._const.PAGE);
+    }
+
+    _getNextItems(options) {
+        const o = this.options;
+        const lastNum = o.items.length - this._const.PAGE * (options.times - 1);
+        const lastItems = takeRight(o.items, lastNum);
+        const nextItems = take(lastItems, this._const.PAGE);
+        
         return nextItems;
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.loader.populate(items);
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.loader.addItems(items);
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.loader.empty();
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.loader.setNotSelectedValue.apply(this.loader, arguments);
-    },
+    setNotSelectedValue() {
+        this.loader.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.loader.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.loader.setValue.apply(this.loader, arguments);
-    },
+    setValue() {
+        this.loader.setValue(...arguments);
+    }
 
-    getValue: function () {
-        return this.loader.getValue.apply(this.loader, arguments);
-    },
+    getValue() {
+        return this.loader.getValue(...arguments);
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.loader.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.loader.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.loader.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.loader.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.loader.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.loader.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.loader.getNodeByValue(value);
     }
-});
-BI.LazyLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.lazy_loader", BI.LazyLoader);
+}

src/case/loader/loader.list.js

@@ -1,105 +1,112 @@
+import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core";
+
 /**
  * 恶心的加载控件， 为解决排序问题引入的控件
  *
  * Created by GUY on 2015/11/12.
- * @class BI.ListLoader
- * @extends BI.Widget
+ * @class ListLoader
+ * @extends Widget
  */
-BI.ListLoader = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.ListLoader.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-list-loader",
+@shortcut()
+export class ListLoader extends Widget {
+    static xtype = "bi.list_loader"
 
-            isDefaultInit: true, // 是否默认初始化数据
+    static EVENT_CHANGE = "EVENT_CHANGE"
 
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls: "bi-list-loader",
+            isDefaultInit: true, // 是否默认初始化数据
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group"
+                type: "bi.button_group",
             },
-
             items: [],
-            itemsCreator: BI.emptyFn,
-            onLoaded: BI.emptyFn,
-
+            itemsCreator: emptyFn,
+            onLoaded: emptyFn,
             // 下面是分页信息
             count: false,
             next: {},
-            hasNext: BI.emptyFn
+            hasNext: emptyFn,
         });
-    },
+    }
 
-    _nextLoad: function () {
-        var self = this, o = this.options;
+    _nextLoad() {
+        const o = this.options;
         this.next.setLoading();
-        o.itemsCreator.apply(this, [{times: ++this.times}, function () {
-            self.next.setLoaded();
-            self.addItems.apply(self, arguments);
+        o.itemsCreator.apply(this, [{
+            times: ++this.times,
+        }, (...args) => {
+            this.next.setLoaded();
+            this.addItems(...args);
         }]);
-    },
+    }
 
-    _init: function () {
-        BI.ListLoader.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
         if (o.itemsCreator === false) {
             o.next = false;
         }
 
-        this.button_group = BI.createWidget(o.el, {
+        this.button_group = createWidget(o.el, {
             type: "bi.button_group",
             element: this,
             chooseType: 0,
             items: o.items,
             behaviors: {},
             layouts: [{
-                type: "bi.vertical"
-            }]
+                type: "bi.vertical",
+            }],
         });
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.ListLoader.EVENT_CHANGE, obj);
+        this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, , obj] = args;
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
+            if (type === Events.CLICK) {
+                this.fireEvent(ListLoader.EVENT_CHANGE, obj);
             }
         });
 
         if (o.next !== false) {
-            this.next = BI.createWidget(BI.extend({
-                type: "bi.loading_bar"
+            this.next = createWidget(extend({
+                type: "bi.loading_bar",
             }, o.next));
-            this.next.on(BI.Controller.EVENT_CHANGE, function (type) {
-                if (type === BI.Events.CLICK) {
-                    self._nextLoad();
+            this.next.on(Controller.EVENT_CHANGE, type => {
+                if (type === Events.CLICK) {
+                    this._nextLoad();
                 }
             });
         }
 
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
-            items: [this.next]
+            items: [this.next],
         });
 
-        o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
+        o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () {
             this.populate();
         }, this));
-        if (BI.isNotEmptyArray(o.items)) {
+        if (isNotEmptyArray(o.items)) {
             this.populate(o.items);
         }
-    },
+    }
 
-    hasNext: function () {
-        var o = this.options;
-        if (BI.isNumber(o.count)) {
+    hasNext() {
+        const o = this.options;
+        if (isNumber(o.count)) {
             return this.count < o.count;
         }
+        
         return !!o.hasNext.apply(this, [{
             times: this.times,
-            count: this.count
+            count: this.count,
         }]);
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             this.options.items = this.options.items.concat(items);
             if (this.hasNext()) {
                 this.next.setLoaded();
@@ -107,90 +114,91 @@ BI.ListLoader = BI.inherit(BI.Widget, {
                 this.next.setEnd();
             }
         }
-        this.button_group.addItems.apply(this.button_group, arguments);
+        this.button_group.addItems(...arguments);
         this.next.element.appendTo(this.element);
-    },
+    }
 
-    populate: function (items) {
-        var self = this, o = this.options;
-        if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {
-            o.itemsCreator.apply(this, [{times: 1}, function () {
-                if (arguments.length === 0) {
+    populate(items) {
+        const o = this.options;
+        if (arguments.length === 0 && (isFunction(o.itemsCreator))) {
+            o.itemsCreator.apply(this, [{
+                times: 1,
+            }, (...args) => {
+                if (args.length === 0) {
                     throw new Error("参数不能为空");
                 }
-                self.populate.apply(self, arguments);
+                this.populate(...args);
                 o.onLoaded();
             }]);
+            
             return;
         }
         this.options.items = items;
         this.times = 1;
         this.count = 0;
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             if (this.hasNext()) {
                 this.next.setLoaded();
             } else {
                 this.next.invisible();
             }
         }
-        BI.DOM.hang([this.next]);
-        this.button_group.populate.apply(this.button_group, arguments);
+        DOM.hang([this.next]);
+        this.button_group.populate(...arguments);
         this.next.element.appendTo(this.element);
-    },
+    }
 
-    empty: function () {
-        BI.DOM.hang([this.next]);
+    empty() {
+        DOM.hang([this.next]);
         this.button_group.empty();
         this.next.element.appendTo(this.element);
-        BI.each([this.next], function (i, ob) {
+        each([this.next], (i, ob) => {
             ob && ob.setVisible(false);
         });
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
-    },
+    setNotSelectedValue() {
+        this.button_group.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.button_group.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.button_group.setValue.apply(this.button_group, arguments);
-    },
+    setValue() {
+        this.button_group.setValue(...arguments);
+    }
 
-    getValue: function () {
-        return this.button_group.getValue.apply(this.button_group, arguments);
-    },
+    getValue() {
+        return this.button_group.getValue(...arguments);
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.button_group.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.button_group.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.button_group.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.button_group.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.button_group.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.button_group.getNodeByValue(value);
     }
-});
-BI.ListLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.list_loader", BI.ListLoader);
+}

src/case/loader/sort.list.js

@@ -1,58 +1,61 @@
+import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core";
+
 /**
  * Created by GUY on 2016/4/29.
  *
- * @class BI.SortList
- * @extends BI.Widget
+ * @class SortList
+ * @extends Widget
  */
-BI.SortList = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.SortList.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-sort-list",
+@shortcut()
+export class SortList extends Widget {
+    static xtype = "bi.sort_list"
 
-            isDefaultInit: true, // 是否默认初始化数据
+    static EVENT_CHANGE = "EVENT_CHANGE"
 
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls: "bi-sort-list",
+            isDefaultInit: true, // 是否默认初始化数据
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group"
+                type: "bi.button_group",
             },
-
             items: [],
-            itemsCreator: BI.emptyFn,
-            onLoaded: BI.emptyFn,
-
+            itemsCreator: emptyFn,
+            onLoaded: emptyFn,
             // 下面是分页信息
             count: false,
             next: {},
-            hasNext: BI.emptyFn
-
+            hasNext: emptyFn,
             // containment: this.element,
             // connectWith: ".bi-sort-list",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SortList.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.loader = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.loader = createWidget({
             type: "bi.list_loader",
             element: this,
             isDefaultInit: o.isDefaultInit,
             el: o.el,
             items: this._formatItems(o.items),
-            itemsCreator: function (op, callback) {
-                o.itemsCreator(op, function (items) {
-                    callback(self._formatItems(items));
+            itemsCreator (op, callback) {
+                o.itemsCreator(op, items => {
+                    callback(this._formatItems(items));
                 });
             },
             onLoaded: o.onLoaded,
             count: o.count,
             next: o.next,
-            hasNext: o.hasNext
+            hasNext: o.hasNext,
         });
-        this.loader.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.SortList.EVENT_CHANGE, value, obj);
+        this.loader.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, value, obj] = args;
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
+            if (type === Events.CLICK) {
+                this.fireEvent(SortList.EVENT_CHANGE, value, obj);
             }
         });
 
@@ -63,114 +66,116 @@ BI.SortList = BI.inherit(BI.Widget, {
             cursor: o.cursor || "drag",
             tolerance: o.tolerance || "intersect",
             placeholder: {
-                element: function ($currentItem) {
-                    var holder = BI.createWidget({
+                element ($currentItem) {
+                    const holder = createWidget({
                         type: "bi.layout",
                         cls: "bi-sortable-holder",
-                        height: $currentItem.outerHeight()
+                        height: $currentItem.outerHeight(),
                     });
                     holder.element.css({
                         "margin-left": $currentItem.css("margin-left"),
                         "margin-right": $currentItem.css("margin-right"),
                         "margin-top": $currentItem.css("margin-top"),
                         "margin-bottom": $currentItem.css("margin-bottom"),
-                        margin: $currentItem.css("margin")
+                        margin: $currentItem.css("margin"),
                     });
+                    
                     return holder.element;
                 },
-                update: function () {
+                update () {
 
-                }
                 },
-            start: function (event, ui) {
+            },
+            start (event, ui) {
 
             },
-            stop: function (event, ui) {
-                self.fireEvent(BI.SortList.EVENT_CHANGE);
+            stop: (event, ui) => {
+                this.fireEvent(SortList.EVENT_CHANGE);
             },
-            over: function (event, ui) {
+            over (event, ui) {
 
-            }
-        });
             },
+        });
+    }
 
-    _formatItems: function (items) {
-        BI.each(items, function (i, item) {
-            item = BI.stripEL(item);
-            item.cls = item.cls ? item.cls + " sort-item" : "sort-item";
+    _formatItems(items) {
+        each(items, (i, item) => {
+            item = stripEL(item);
+            item.cls = item.cls ? `${item.cls} sort-item` : "sort-item";
             item.attributes = {
-                sorted: item.value
+                sorted: item.value,
             };
         });
+        
         return items;
-    },
+    }
 
-    hasNext: function () {
+    hasNext() {
         return this.loader.hasNext();
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.loader.addItems(items);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         if (items) {
             arguments[0] = this._formatItems(items);
         }
-        this.loader.populate.apply(this.loader, arguments);
-    },
+        this.loader.populate(...arguments);
+    }
 
-    empty: function () {
+    empty() {
         this.loader.empty();
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.loader.setNotSelectedValue.apply(this.loader, arguments);
-    },
+    setNotSelectedValue() {
+        this.loader.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.loader.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.loader.setValue.apply(this.loader, arguments);
-    },
+    setValue() {
+        this.loader.setValue(...arguments);
+    }
 
-    getValue: function () {
+    getValue() {
         return this.loader.getValue();
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.loader.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.loader.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.loader.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.loader.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.loader.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.loader.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.loader.getNodeByValue(value);
-    },
-
-    getSortedValues: function () {
-        return this.loader.element.sortable("toArray", {attribute: "sorted"});
     }
+
+    getSortedValues() {
+        return this.loader.element.sortable("toArray", {
+            attribute: "sorted",
         });
-BI.SortList.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.sort_list", BI.SortList);
+    }
+}

src/case/segment/button.segment.js

@@ -1,43 +1,48 @@
+import { shortcut, extend, createWidget } from "@/core";
+import { BasicButton } from "@/base";
+
 /**
  * 分段控件使用的button
  *
  * Created by GUY on 2015/9/7.
- * @class BI.SegmentButton
- * @extends BI.BasicButton
+ * @class SegmentButton
+ * @extends BasicButton
  */
-BI.SegmentButton = BI.inherit(BI.BasicButton, {
+@shortcut()
+export class SegmentButton extends BasicButton {
+    static xtype = "bi.segment_button"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
         
-    _defaultConfig: function () {
-        var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select bi-card",
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`,
             shadow: true,
             readonly: true,
-            hgap: 5
+            hgap: 5,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SegmentButton.superclass._init.apply(this, arguments);
-        var opts = this.options, self = this;
-        this.text = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const opts = this.options;
+        this.text = createWidget({
             type: "bi.label",
             element: this,
             textHeight: opts.height,
             whiteSpace: opts.whiteSpace,
             text: opts.text,
             value: opts.value,
-            hgap: opts.hgap
+            hgap: opts.hgap,
         });
-    },
+    }
 
-    setSelected: function () {
-        BI.SegmentButton.superclass.setSelected.apply(this, arguments);
-    },
+    setSelected() {
+        super.setSelected(...arguments);
+    }
 
-    setText: function (text) {
-        BI.SegmentButton.superclass.setText.apply(this, arguments);
+    setText(text) {
+        super.setText(...arguments);
         this.text.setText(text);
     }
-});
-BI.shortcut("bi.segment_button", BI.SegmentButton);
+}

src/case/segment/index.js

@@ -0,0 +1,2 @@
+export { SegmentButton } from "./button.segment";
+export { Segment } from "./segment";

src/case/segment/segment.js

@@ -1,72 +1,79 @@
+import { shortcut, Widget, extend, toPix, Controller, createWidget, createItems, makeArrayByArray } from "@/core";
+import { ButtonGroup } from "@/base";
+
 /**
  * 单选按钮组
  *
  * Created by GUY on 2015/9/7.
- * @class BI.Segment
- * @extends BI.Widget
+ * @class Segment
+ * @extends Widget
  */
-BI.Segment = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class Segment extends Widget {
+    static xtype = "bi.segment"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-segment",
             items: [],
             height: 24,
         });
-    },
-    _init: function () {
-        BI.Segment.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.buttonGroup = BI.createWidget({
+    }
+
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.buttonGroup = createWidget({
             element: this,
             type: "bi.button_group",
             value: o.value,
-            items: [BI.createItems(o.items, {
+            items: [createItems(o.items, {
                 type: "bi.segment_button",
-                height: BI.toPix(o.height, 2),
+                height: toPix(o.height, 2),
                 whiteSpace: o.whiteSpace,
             })],
             layouts: [{
                 type: "bi.table",
-                columnSize: BI.makeArrayByArray(o.items, "fill"),
+                columnSize: makeArrayByArray(o.items, "fill"),
             }],
         });
-        this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.buttonGroup.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.buttonGroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) {
-            self.fireEvent(BI.Segment.EVENT_CHANGE, value, obj);
+        this.buttonGroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
+            this.fireEvent(Segment.EVENT_CHANGE, value, obj);
         });
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.Segment.superclass._setEnable.apply(this, arguments);
+    _setEnable(enable) {
+        super._setEnable(...arguments);
         if (enable === true) {
             this.element.removeClass("base-disabled disabled");
         } else if (enable === false) {
             this.element.addClass("base-disabled disabled");
         }
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.buttonGroup.setValue(v);
-    },
+    }
 
-    setEnabledValue: function (v) {
+    setEnabledValue(v) {
         this.buttonGroup.setEnabledValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.buttonGroup.getValue();
-    },
+    }
 
-    populate: function (buttons) {
-        var o = this.options;
-        this.buttonGroup.populate([BI.createItems(buttons, {
+    populate(buttons) {
+        const o = this.options;
+        this.buttonGroup.populate([createItems(buttons, {
             type: "bi.segment_button",
-            height: BI.toPix(o.height, 2),
+            height: toPix(o.height, 2),
             whiteSpace: o.whiteSpace,
         })]);
-    },
-});
-BI.Segment.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.segment", BI.Segment);
+    }
+}

src/case/toolbar/toolbar.multiselect.js

@@ -1,20 +1,29 @@
+import { shortcut, extend, emptyFn, i18nText, Controller, createWidget, Events } from "@/core";
+import { BasicButton, Checkbox } from "@/base";
+import { HalfIconButton } from "../button";
+
 /**
  * guy
  * 复选导航条
  * Created by GUY on 2015/8/25.
- * @class BI.MultiSelectBar
- * @extends BI.BasicButton
+ * @class MultiSelectBar
+ * @extends BasicButton
  */
-BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectBar.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class MultiSelectBar extends BasicButton {
+    static xtype = "bi.multi_select_bar"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-multi-select-bar",
             height: 25,
-            text: BI.i18nText("BI-Select_All"),
-            isAllCheckedBySelectedValue: BI.emptyFn,
+            text: i18nText("BI-Select_All"),
+            isAllCheckedBySelectedValue: emptyFn,
             // 手动控制选中
             disableSelected: true,
-            isHalfCheckedBySelectedValue: function (selectedValues) {
+            isHalfCheckedBySelectedValue (selectedValues) {
                 return selectedValues.length > 0;
             },
             halfSelected: false,
@@ -22,46 +31,47 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
             iconWidth: 14,
             iconHeight: 14,
         });
-    },
-    _init: function () {
-        BI.MultiSelectBar.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var isSelect = o.selected === true;
-        var isHalfSelect = !o.selected && o.halfSelected;
-        this.checkbox = BI.createWidget({
+    }
+
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        const isSelect = o.selected === true;
+        const isHalfSelect = !o.selected && o.halfSelected;
+        this.checkbox = createWidget({
             type: "bi.checkbox",
             stopPropagation: true,
-            handler: function () {
-                self.setSelected(self.isSelected());
+            handler: () => {
+                this.setSelected(this.isSelected());
             },
             selected: isSelect,
             invisible: isHalfSelect,
             iconWidth: o.iconWidth,
-            iconHeight: o.iconHeight
+            iconHeight: o.iconHeight,
         });
-        this.half = BI.createWidget({
+        this.half = createWidget({
             type: "bi.half_icon_button",
             stopPropagation: true,
-            handler: function () {
-                self.setSelected(true);
+            handler: () => {
+                this.setSelected(true);
             },
             invisible: isSelect || !isHalfSelect,
             iconWidth: o.iconWidth,
-            iconHeight: o.iconHeight
+            iconHeight: o.iconHeight,
         });
-        this.checkbox.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self);
+        this.checkbox.on(Controller.EVENT_CHANGE, () => {
+            this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this);
         });
-        this.checkbox.on(BI.Checkbox.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self);
+        this.checkbox.on(Checkbox.EVENT_CHANGE, () => {
+            this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
         });
-        this.half.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self);
+        this.half.on(Controller.EVENT_CHANGE, () => {
+            this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this);
         });
-        this.half.on(BI.HalfIconButton.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self);
+        this.half.on(HalfIconButton.EVENT_CHANGE, () => {
+            this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.label",
             textAlign: "left",
             whiteSpace: "nowrap",
@@ -71,43 +81,43 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
             text: o.text,
             keyword: o.keyword,
             value: o.value,
-            py: o.py
+            py: o.py,
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.htape",
             element: this,
             items: [{
                 width: o.iconWrapperWidth,
                 el: {
                     type: "bi.center_adapt",
-                    items: [this.checkbox, this.half]
-                }
+                    items: [this.checkbox, this.half],
+                },
             }, {
-                el: this.text
-            }]
+                el: this.text,
+            }],
         });
-    },
+    }
 
-    _setSelected: function (v) {
+    _setSelected(v) {
         this.checkbox.setSelected(!!v);
-    },
+    }
 
-    // 自己手动控制选中
-    beforeClick: function () {
-        var isHalf = this.isHalfSelected(), isSelected = this.isSelected();
+    beforeClick() {
+        const isHalf = this.isHalfSelected(),
+            isSelected = this.isSelected();
         if (isHalf === true) {
             this.setSelected(true);
         } else {
             this.setSelected(!isSelected);
         }
-    },
+    }
 
-    setSelected: function (v) {
+    setSelected(v) {
         this.checkbox.setSelected(v);
         this.setHalfSelected(false);
-    },
+    }
 
-    setHalfSelected: function (b) {
+    setHalfSelected(b) {
         this.halfSelected = !!b;
         if (b === true) {
             this.checkbox.setSelected(false);
@@ -117,29 +127,27 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
             this.half.invisible();
             this.checkbox.visible();
         }
-    },
+    }
 
-    isHalfSelected: function () {
+    isHalfSelected() {
         return !this.isSelected() && !!this.halfSelected;
-    },
+    }
 
-    isSelected: function () {
+    isSelected() {
         return this.checkbox.isSelected();
-    },
+    }
 
-    setValue: function (selectedValues) {
-        BI.MultiSelectBar.superclass.setValue.apply(this, arguments);
-        var isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments);
+    setValue(selectedValues) {
+        super.setValue(...arguments);
+        const isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments);
         this.setSelected(isAllChecked);
         !isAllChecked && this.setHalfSelected(this.options.isHalfCheckedBySelectedValue.apply(this, arguments));
-    },
+    }
 
-    doClick: function () {
-        BI.MultiSelectBar.superclass.doClick.apply(this, arguments);
+    doClick() {
+        super.doClick(...arguments);
         if (this.isValid()) {
-            this.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
+            this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
+        }
     }
 }
-});
-BI.MultiSelectBar.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_bar", BI.MultiSelectBar);

src/core/platform/web/dom.js

@@ -525,11 +525,12 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
         }
     }
     for (i = 0; i < directions.length; i++) {
+        let tW, tH;
         direct = directions[i];
         switch (direct) {
         case "left":
             if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
                 if (isLeftSpaceEnough(combo, popup, tW)) {
                     left = getLeftPosition(combo, popup, tW, container).left;
                     if (topBottom[0] === "bottom") {
@@ -550,7 +551,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
             break;
         case "right":
             if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
                 if (isRightSpaceEnough(combo, popup, tW)) {
                     left = getRightPosition(combo, popup, tW, container).left;
                     if (topBottom[0] === "bottom") {
@@ -570,7 +571,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
             lrFirst = true;
             break;
         case "top":
-                var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
+            tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
             if (isTopSpaceEnough(combo, popup, tH)) {
                 top = getTopPosition(combo, popup, tH, container).top;
                 if (leftRight[0] === "right") {
@@ -592,7 +593,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
             tbFirst = true;
             break;
         case "bottom":
-                var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
+            tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
             if (isBottomSpaceEnough(combo, popup, tH)) {
                 top = getBottomPosition(combo, popup, tH, container).top;
                 if (leftRight[0] === "right") {
@@ -615,7 +616,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
             break;
         case "innerLeft":
             if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
                 if (isInnerLeftSpaceEnough(combo, popup, tW)) {
                     left = getInnerLeftPosition(combo, popup, tW).left;
                     if (topBottom[0] === "bottom") {
@@ -636,7 +637,7 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
             break;
         case "innerRight":
             if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
                 if (isInnerRightSpaceEnough(combo, popup, tW)) {
                     left = getInnerRightPosition(combo, popup, tW).left;
                     if (topBottom[0] === "bottom") {
@@ -717,19 +718,19 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap
     switch (offsetStyle) {
     case "center":
         if (position.change) {
-                var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
+            const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
             position.top = p.top;
         } else {
-                var p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
+            const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
             position.left = p.left;
         }
         break;
     case "middle":
         if (position.change) {
-                var p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
+            const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
             position.left = p.left;
         } else {
-                var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
+            const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
             position.top = p.top;
         }
         break;

src/core/utils/color.js

@@ -1,4 +1,5 @@
 import { parseInt, parseFloat, isNull, isKey } from "../2.base";
+import * as DOMUtils from "../platform/web/dom";
 
 export const DOM = {
     isColor(color) {
@@ -198,4 +199,6 @@ export const DOM = {
             Math.floor(255 * (bgColor * (1 - A)) + G * A)},${
             Math.floor(255 * (bgColor * (1 - A)) + B * A)})`;
     },
+
+    ...DOMUtils,
 };