Merge branch 'es6' of ssh://code.fineres.com:7999/~treecat/fineui into es6

src/case/calendar/calendar.js

@@ -139,8 +139,8 @@ export class Calendar extends Widget {
                 rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
             }))],
         });
-        this.days.on(Controller.EVENT_CHANGE, () => {
-            this.fireEvent(Controller.EVENT_CHANGE, arguments);
+        this.days.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
         createWidget(extend({
             element: this,

src/case/colorchooser/colorchooser.custom.js

@@ -1,39 +1,47 @@
+import { shortcut, Widget, extend, createWidget } from "@/core";
+import { ColorPickerEditor } from "./colorpicker";
+import { Farbtastic } from "./farbtastic/farbtastic";
+
 /**
  * 自定义选色
  *
  * Created by GUY on 2015/11/17.
- * @class BI.CustomColorChooser
- * @extends BI.Widget
+ * @class CustomColorChooser
+ * @extends Widget
  */
-BI.CustomColorChooser = BI.inherit(BI.Widget, {
+@shortcut()
+export class CustomColorChooser extends Widget {
+    static xtype = "bi.custom_color_chooser";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.CustomColorChooser.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-custom-color-chooser",
             width: 292,
-            height: 265
+            height: 265,
         });
-    },
+    }
 
-    _init: function () {
-        BI.CustomColorChooser.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget(o.editor, {
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.editor = createWidget(o.editor, {
             type: "bi.simple_hex_color_picker_editor",
-            value: o.value
+            value: o.value,
         });
-        this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
-            self.setValue(this.getValue());
+        this.editor.on(ColorPickerEditor.EVENT_CHANGE, () => {
+            this.setValue(this.editor.getValue());
         });
-        this.farbtastic = BI.createWidget({
+        this.farbtastic = createWidget({
             type: "bi.farbtastic",
-            value: o.value
+            value: o.value,
         });
-        this.farbtastic.on(BI.Farbtastic.EVENT_CHANGE, function () {
-            self.setValue(this.getValue());
+        this.farbtastic.on(Farbtastic.EVENT_CHANGE, () => {
+            this.setValue(this.farbtastic.getValue());
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.vtape",
             element: this,
             items: [{
@@ -42,30 +50,29 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
                     el: this.editor,
                     left: 10,
                     top: 0,
-                    right: 10
+                    right: 10,
                 }],
-                height: 50
+                height: 50,
             }, {
                 type: "bi.absolute",
                 items: [{
                     el: this.farbtastic,
                     left: 46,
                     right: 46,
-                    top: 7
+                    top: 7,
+                }],
+                height: 215,
             }],
-                height: 215
-            }]
         });
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.editor.setValue(color);
         this.farbtastic.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
     }
-});
-BI.CustomColorChooser.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.custom_color_chooser", BI.CustomColorChooser);
+}
+

src/case/colorchooser/colorchooser.js

@@ -1,27 +1,41 @@
+import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core";
+import { Combo } from "@/base";
+import { ColorChooserPopup } from "./colorchooser.popup";
+
 /**
  * 选色控件
  *
  * Created by GUY on 2015/11/17.
- * @class BI.ColorChooser
- * @extends BI.Widget
+ * @class ColorChooser
+ * @extends Widget
  */
-BI.ColorChooser = BI.inherit(BI.Widget, {
+@shortcut()
+export class ColorChooser extends Widget {
+    static xtype = "bi.color_chooser";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.ColorChooser.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-color-chooser",
             value: "",
             height: 24,
             el: {},
-            simple: false
+            simple: false,
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.ColorChooser.superclass._init.apply(this, arguments);
+    _init() {
+        const o = this.options;
+        const fn = () => {
+            const color = this.colorPicker.getValue();
+            this.setValue(color);
+        };
+
+        super._init(...arguments);
         o.value = (o.value || "").toLowerCase();
-        this.combo = BI.createWidget({
+        this.combo = createWidget({
             type: "bi.combo",
             element: this,
             container: o.container,
@@ -29,83 +43,77 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
             destroyWhenHide: o.destroyWhenHide,
             isNeedAdjustWidth: false,
             isNeedAdjustHeight: false,
-            el: BI.extend({
+            el: extend({
                 type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger",
                 simple: o.simple,
-                ref: function (_ref) {
-                    self.trigger = _ref;
+                ref: _ref => {
+                    this.trigger = _ref;
                 },
                 value: o.value,
-                width: o.el.type ? o.width : BI.toPix(o.width, 2),
-                height: o.el.type ? o.height : BI.toPix(o.height, 2)
+                width: o.el.type ? o.width : toPix(o.width, 2),
+                height: o.el.type ? o.height : toPix(o.height, 2),
             }, o.el),
-            popup: () => ({
-                el: BI.extend({
+            popup: () => {
+                return {
+                    el: extend({
                         type: "bi.hex_color_chooser_popup",
                         recommendColorsGetter: o.recommendColorsGetter,
-                    ref: function (_ref) {
-                        self.colorPicker = _ref;
+                        ref: _ref => {
+                            this.colorPicker = _ref;
                         },
                         listeners: [{
-                        eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
-                        action: function () {
+                            eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
+                            action: () => {
                                 fn();
-                            if (!self._isRGBColor(self.colorPicker.getValue())) {
-                                self.combo.hideView();
-                            }
+                                if (!this._isRGBColor(this.colorPicker.getValue())) {
+                                    this.combo.hideView();
                                 }
+                            },
                         }, {
-                        eventName: BI.ColorChooserPopup.EVENT_CHANGE,
-                        action: function () {
+                            eventName: ColorChooserPopup.EVENT_CHANGE,
+                            action: () => {
                                 fn();
-                            self.combo.hideView();
-                        }
-                    }]
+                                this.combo.hideView();
+                            },
+                        }],
                     }, o.popup),
                     value: o.value,
-                width: 300
-            }),
-            value: o.value
-        });
-
-        var fn = function () {
-            var color = self.colorPicker.getValue();
-            self.setValue(color);
+                    width: 300,
                 };
+            },
+            value: o.value,
+        });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
-            self.fireEvent(BI.ColorChooser.EVENT_CHANGE, arguments);
+        this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, (...args) => {
+            this.fireEvent(ColorChooser.EVENT_CHANGE, ...args);
         });
-        this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
-            self.fireEvent(BI.ColorChooser.EVENT_AFTER_POPUPVIEW, arguments);
+        this.combo.on(Combo.EVENT_AFTER_POPUPVIEW, (...args) => {
+            this.fireEvent(ColorChooser.EVENT_AFTER_POPUPVIEW, ...args);
         });
-    },
+    }
 
-    _isRGBColor: function (color) {
-        return BI.isNotEmptyString(color) && color !== "transparent";
-    },
+    _isRGBColor(color) {
+        return isNotEmptyString(color) && color !== "transparent";
+    }
 
-    isViewVisible: function () {
+    isViewVisible() {
         return this.combo.isViewVisible();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.options.value = (color || "").toLowerCase();
         this.combo.setValue(this.options.value);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.combo.getValue();
     }
-});
-BI.ColorChooser.EVENT_CHANGE = "EVENT_CHANGE";
-BI.ColorChooser.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
-BI.shortcut("bi.color_chooser", BI.ColorChooser);
+}

src/case/colorchooser/colorchooser.popup.hex.js

@@ -1,41 +1,52 @@
+import { shortcut, Widget, isNotNull, extend, isNotEmptyString, array2String, map, count, string2Array, filter, isArray, Cache, Queue } from "@/core";
+import { Combo } from "@/base";
+import { ColorChooserPopup } from "./colorchooser.popup";
+import { ColorPickerEditor, ColorPicker } from "./colorpicker";
+
 /**
  * @author windy
  * @version 2.0
  * Created by windy on 2020/11/10
  */
-BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
+@shortcut()
+export class HexColorChooserPopup extends Widget {
+    static xtype = "bi.hex_color_chooser_popup";
+
+    static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    props: {
+    props = {
         baseCls: "bi-color-chooser-popup",
         width: 300,
         recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
-        simple: false // 简单模式, popup中没有自动和透明
-    },
+        simple: false, // 简单模式, popup中没有自动和透明
+    }
+
+    render() {
+        const o = this.options;
+        const hasRecommendColors = isNotNull(o.recommendColorsGetter());
         
-    render: function () {
-        var self = this, o = this.options;
-        var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter());
         return [{
             type: "bi.vertical",
             items: [{
                 el: {
                     type: "bi.vertical",
                     hgap: 15,
-                    items: [BI.extend({
+                    items: [extend({
                         type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
                         value: o.value,
                         height: o.simple ? 36 : 70,
                         listeners: [{
-                            eventName: BI.ColorPickerEditor.EVENT_CHANGE,
-                            action: function () {
-                                self.setValue(this.getValue());
-                                self._dealStoreColors();
-                                self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
-                            }
+                            eventName: ColorPickerEditor.EVENT_CHANGE,
+                            action: (...args) => {
+                                this.setValue(this.colorEditor.getValue());
+                                this._dealStoreColors();
+                                this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
+                            },
                         }],
-                        ref: function (_ref) {
-                            self.colorEditor = _ref;
-                        }
+                        ref: _ref => {
+                            this.colorEditor = _ref;
+                        },
                     }, o.editor), {
                         el: {
                             type: "bi.hex_color_picker",
@@ -44,19 +55,19 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                             height: 22,
                             value: o.value,
                             listeners: [{
-                                eventName: BI.ColorPicker.EVENT_CHANGE,
-                                action: function () {
-                                    self.setValue(this.getValue()[0]);
-                                    self._dealStoreColors();
-                                    self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
-                                }
+                                eventName: ColorPicker.EVENT_CHANGE,
+                                action: (...args) => {
+                                    this.setValue(this.storeColors.getValue()[0]);
+                                    this._dealStoreColors();
+                                    this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                },
                             }],
-                            ref: function (_ref) {
-                                self.storeColors = _ref;
-                            }
+                            ref: _ref => {
+                                this.storeColors = _ref;
+                            },
                         },
                         tgap: 10,
-                        height: 22
+                        height: 22,
                     }, {
                         el: hasRecommendColors ? {
                             type: "bi.vertical",
@@ -64,7 +75,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                                 type: "bi.label",
                                 text: BI.i18nText("BI-Basic_Recommend_Color"),
                                 textAlign: "left",
-                                height: 24
+                                height: 24,
                             }, {
                                 type: "bi.hex_color_picker",
                                 cls: "bi-border-bottom bi-border-right",
@@ -72,27 +83,27 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                                 height: 22,
                                 value: o.value,
                                 listeners: [{
-                                    eventName: BI.ColorPicker.EVENT_CHANGE,
-                                    action: function () {
-                                        self.setValue(this.getValue()[0]);
-                                        self._dealStoreColors();
-                                        self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
-                                    }
+                                    eventName: ColorPicker.EVENT_CHANGE,
+                                    action: (...args) => {
+                                        this.setValue(this.recommendColors.getValue()[0]);
+                                        this._dealStoreColors();
+                                        this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                    },
+                                }],
+                                ref: _ref => {
+                                    this.recommendColors = _ref;
+                                },
                             }],
-                                ref: function (_ref) {
-                                    self.recommendColors = _ref;
-                                }
-                            }]
                         } : { type: "bi.layout" },
                         tgap: hasRecommendColors ? 10 : 0,
-                        height: hasRecommendColors ? 47 : 0
+                        height: hasRecommendColors ? 47 : 0,
                     }, {
                         el: {
                             type: "bi.layout",
-                            cls: "bi-border-top"
+                            cls: "bi-border-top",
                         },
                         vgap: 10,
-                        height: 1
+                        height: 1,
                     }, {
                         type: "bi.absolute",
                         items: [{
@@ -101,25 +112,25 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                                 space: true,
                                 value: o.value,
                                 listeners: [{
-                                    eventName: BI.ColorPicker.EVENT_CHANGE,
-                                    action: function () {
-                                        self.setValue(this.getValue()[0]);
-                                        self._dealStoreColors();
-                                        self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
-                                    }
+                                    eventName: ColorPicker.EVENT_CHANGE,
+                                    action: (...args) => {
+                                        this.setValue(this.colorPicker.getValue()[0]);
+                                        this._dealStoreColors();
+                                        this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                    },
                                 }],
-                                ref: function (_ref) {
-                                    self.colorPicker = _ref;
-                                }
+                                ref: _ref => {
+                                    this.colorPicker = _ref;
+                                },
                             },
                             top: 0,
                             left: 0,
                             right: 0,
-                            bottom: 1
+                            bottom: 1,
                         }],
-                        height: 80
-                    }]
-                }
+                        height: 80,
+                    }],
+                },
             }, {
                 el: {
                     type: "bi.combo",
@@ -133,7 +144,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                         textAlign: "center",
                         height: 24,
                         textLgap: 10,
-                        text: BI.i18nText("BI-Basic_More") + "..."
+                        text: `${BI.i18nText("BI-Basic_More")}...`,
                     },
                     popup: {
                         type: "bi.popup_panel",
@@ -143,9 +154,9 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                             type: "bi.custom_color_chooser",
                             value: o.value,
                             editor: o.editor,
-                            ref: function (_ref) {
-                                self.customColorChooser = _ref;
-                            }
+                            ref: _ref => {
+                                this.customColorChooser = _ref;
+                            },
                         },
                         stopPropagation: false,
                         bgap: -1,
@@ -154,38 +165,41 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                         minWidth: 227,
                         listeners: [{
                             eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
-                            action: function (index) {
+                            action: (index, ...args) => {
                                 switch (index) {
                                 case 0:
-                                        self.more.hideView();
+                                    this.more.hideView();
                                     break;
-                                    case 1:
-                                        var color = self.customColorChooser.getValue();
+                                case 1: {
+                                    const color = this.customColorChooser.getValue();
                                     // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明
-                                        if (BI.isNotEmptyString(color)) {
-                                            self.setValue(color);
-                                            self._dealStoreColors();
+                                    if (isNotEmptyString(color)) {
+                                        this.setValue(color);
+                                        this._dealStoreColors();
                                     }
-                                        self.more.hideView();
-                                        self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+                                    this.more.hideView();
+                                    this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
                                     break;
                                 }
+                                default:
+                                    break;
                                 }
-                        }]
+                            },
+                        }],
                     },
                     listeners: [{
-                        eventName: BI.Combo.EVENT_AFTER_POPUPVIEW,
-                        action: function () {
-                            self.customColorChooser.setValue(self.getValue());
-                        }
+                        eventName: Combo.EVENT_AFTER_POPUPVIEW,
+                        action: () => {
+                            this.customColorChooser.setValue(this.getValue());
+                        },
                     }],
-                    ref: function (_ref) {
-                        self.more = _ref;
-                    }
+                    ref: _ref => {
+                        this.more = _ref;
+                    },
                 },
                 tgap: 10,
-                height: 24
-            }]
+                height: 24,
+            }],
         }, {
             type: "bi.absolute",
             items: [{
@@ -193,89 +207,86 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                     type: "bi.layout",
                     cls: "disable-mask",
                     invisible: !o.disabled,
-                    ref: function () {
-                        self.mask = this;
-                    }
+                    ref: () => {
+                        this.mask = this;
+                    },
                 },
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
-            }]
+                bottom: 0,
+            }],
         }];
-    },
+    }
 
     // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示
-    mounted: function () {
-        var o = this.options;
-        if (BI.isNotNull(o.value)) {
+    mounted() {
+        const o = this.options;
+        if (isNotNull(o.value)) {
             this.setValue(o.value);
         }
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments);
+    _setEnable(enable) {
+        super._setEnable(...arguments);
         this.mask.setVisible(!enable);
-    },
+    }
 
-    _dealStoreColors: function () {
-        var color = this.getValue();
-        var colors = this._getStoreColors();
-        var que = new BI.Queue(12);
+    _dealStoreColors() {
+        const color = this.getValue();
+        const colors = this._getStoreColors();
+        const que = new Queue(12);
         que.fromArray(colors);
         que.remove(color);
         que.unshift(color);
-        var array = que.toArray();
-        BI.Cache.setItem("colors", BI.array2String(array));
+        const array = que.toArray();
+        Cache.setItem("colors", array2String(array));
         this.setStoreColors(array);
-    },
+    }
 
-    _digestStoreColors: function (colors) {
-        var items = BI.map(colors.slice(0, 12), function (i, color) {
+    _digestStoreColors(colors) {
+        const items = map(colors.slice(0, 12), (i, color) => {
             return {
-                value: color
+                value: color,
             };
         });
-        BI.count(colors.length, 12, function (i) {
+        count(colors.length, 12, i => {
             items.push({
                 value: "empty",
-                disabled: true
+                disabled: true,
             });
         });
+        
         return items;
-    },
+    }
 
-    _getStoreColors: function () {
-        var self = this, o = this.options;
-        var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || "");
-        return BI.filter(colorsArray, function (idx, color) {
-            return o.simple ? self._isRGBColor(color) : true;
-        });
-    },
+    _getStoreColors() {
+        const o = this.options;
+        const colorsArray = string2Array(Cache.getItem("colors") || "");
         
-    _isRGBColor: function (color) {
-        return BI.isNotEmptyString(color) && color !== "transparent";
-    },
+        return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
+    }
 
-    setStoreColors: function (colors) {
-        if (BI.isArray(colors)) {
+    _isRGBColor(color) {
+        return isNotEmptyString(color) && color !== "transparent";
+    }
+
+    setStoreColors(colors) {
+        if (isArray(colors)) {
             this.storeColors.populate([this._digestStoreColors(colors)]);
             // BI-66973 选中颜色的同时选中历史
             this.storeColors.setValue(this.getValue());
         }
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.colorEditor.setValue(color);
         this.colorPicker.setValue(color);
         this.storeColors.setValue(color);
         this.recommendColors && this.recommendColors.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.colorEditor.getValue();
     }
-});
-BI.HexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
-BI.HexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.hex_color_chooser_popup", BI.HexColorChooserPopup);
+}

src/case/colorchooser/colorchooser.popup.hex.simple.js

@@ -1,50 +1,57 @@
+import { shortcut, Widget } from "@/core";
+import { ColorChooserPopup } from "./colorchooser.popup";
+import { SimpleColorChooserPopup } from "./colorchooser.popup.simple";
+
 /**
  * @author windy
  * @version 2.0
  * Created by windy on 2020/11/10
  */
-BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, {
+@shortcut()
+export class SimpleHexColorChooserPopup extends Widget {
+    static xtype = "bi.simple_hex_color_chooser_popup";
+
+    static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    props: {
+    props = {
         baseCls: "bi-color-chooser-popup",
-    },
+    }
+
+    render() {
+        const o = this.options;
 
-    render: function () {
-        var self = this, o = this.options;
         return {
             type: "bi.hex_color_chooser_popup",
             recommendColorsGetter: o.recommendColorsGetter,
             value: o.value,
             simple: true, // 是否有自动
             listeners: [{
-                eventName: BI.ColorChooserPopup.EVENT_CHANGE,
-                action: function () {
-                    self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments);
-                }
+                eventName: ColorChooserPopup.EVENT_CHANGE,
+                action: (...args) => {
+                    this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args);
+                },
             }, {
-                eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
-                action: function () {
-                    self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
-                }
+                eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
+                action: (...args) => {
+                    this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
+                },
             }],
-            ref: function (_ref) {
-                self.popup = _ref;
-            }
-        }
+            ref: _ref => {
+                this.popup = _ref;
             },
+        };
+    }
 
-    setStoreColors: function (colors) {
+    setStoreColors(colors) {
         this.popup.setStoreColors(colors);
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.popup.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popup.getValue();
     }
-});
-BI.SimpleHexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
-BI.SimpleHexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.simple_hex_color_chooser_popup", BI.SimpleHexColorChooserPopup);
+}

src/case/colorchooser/colorchooser.popup.js

@@ -1,67 +1,76 @@
+import { shortcut, Widget, createWidget, Cache, string2Array, isNotNull, Queue, array2String, map, count, filter, isNotEmptyString, isArray } from "@/core";
+import { Combo } from "@/base";
+import { ColorPickerEditor, ColorPicker } from "./colorpicker";
+
 /**
  * 选色控件
  *
  * Created by GUY on 2015/11/17.
- * @class BI.ColorChooserPopup
- * @extends BI.Widget
+ * @class ColorChooserPopup
+ * @extends Widget
  */
-BI.ColorChooserPopup = BI.inherit(BI.Widget, {
+@shortcut()
+export class ColorChooserPopup extends Widget {
+    static xtype = "bi.color_chooser_popup";
+
+    static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    props: {
+    props = {
         baseCls: "bi-color-chooser-popup",
         width: 230,
         height: 145,
-        simple: false // 简单模式, popup中没有自动和透明
-    },
+        simple: false, // 简单模式, popup中没有自动和透明
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        this.colorEditor = BI.createWidget(o.editor, {
+    render () {
+        const o = this.options;
+        this.colorEditor = createWidget(o.editor, {
             type: o.simple ? "bi.simple_color_picker_editor" : "bi.color_picker_editor",
             value: o.value,
             cls: "bi-header-background bi-border-bottom",
-            height: 30
+            height: 30,
         });
 
-        this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
-            self.setValue(this.getValue());
-            self._dealStoreColors();
-            self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
+        this.colorEditor.on(ColorPickerEditor.EVENT_CHANGE, (...args) => {
+            this.setValue(this.colorEditor.getValue());
+            this._dealStoreColors();
+            this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
         });
 
-        this.storeColors = BI.createWidget({
+        this.storeColors = createWidget({
             type: "bi.color_picker",
             cls: "bi-border-bottom bi-border-right",
             items: [this._digestStoreColors(this._getStoreColors())],
             width: 210,
             height: 24,
-            value: o.value
+            value: o.value,
         });
-        this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () {
-            self.setValue(this.getValue()[0]);
-            self._dealStoreColors();
-            self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+        this.storeColors.on(ColorPicker.EVENT_CHANGE, (...args) => {
+            this.setValue(this.storeColors.getValue()[0]);
+            this._dealStoreColors();
+            this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
         });
 
-        this.colorPicker = BI.createWidget({
+        this.colorPicker = createWidget({
             type: "bi.color_picker",
             width: 210,
             height: 50,
-            value: o.value
+            value: o.value,
         });
 
-        this.colorPicker.on(BI.ColorPicker.EVENT_CHANGE, function () {
-            self.setValue(this.getValue()[0]);
-            self._dealStoreColors();
-            self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+        this.colorPicker.on(ColorPicker.EVENT_CHANGE, (...args) => {
+            this.setValue(this.colorPicker.getValue()[0]);
+            this._dealStoreColors();
+            this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
         });
 
-        this.customColorChooser = BI.createWidget({
+        this.customColorChooser = createWidget({
             type: "bi.custom_color_chooser",
-            editor: o.editor
+            editor: o.editor,
         });
 
-        var panel = BI.createWidget({
+        const panel = createWidget({
             type: "bi.popup_panel",
             buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")],
             title: BI.i18nText("BI-Custom_Color"),
@@ -70,10 +79,10 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
             bgap: -1,
             rgap: 1,
             lgap: 1,
-            minWidth: 227
+            minWidth: 227,
         });
 
-        this.more = BI.createWidget({
+        this.more = createWidget({
             type: "bi.combo",
             cls: "bi-border-top",
             container: null,
@@ -85,24 +94,26 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
                 textAlign: "center",
                 height: 24,
                 textLgap: 10,
-                text: BI.i18nText("BI-Basic_More") + "..."
+                text: `${BI.i18nText("BI-Basic_More")}...`,
             },
-            popup: panel
+            popup: panel,
         });
 
-        this.more.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
-            self.customColorChooser.setValue(self.getValue());
+        this.more.on(Combo.EVENT_AFTER_POPUPVIEW, () => {
+            this.customColorChooser.setValue(this.getValue());
         });
-        panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, function (index) {
+        panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, (index, ...args) => {
             switch (index) {
             case 0:
-                    self.more.hideView();
+                this.more.hideView();
                 break;
             case 1:
-                    self.setValue(self.customColorChooser.getValue());
-                    self._dealStoreColors();
-                    self.more.hideView();
-                    self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+                this.setValue(this.customColorChooser.getValue());
+                this._dealStoreColors();
+                this.more.hideView();
+                this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
+                break;
+            default:
                 break;
             }
         });
@@ -119,10 +130,10 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
                                 el: this.storeColors,
                                 left: 10,
                                 right: 10,
-                                top: 5
-                            }]
+                                top: 5,
+                            }],
                         },
-                        height: 29
+                        height: 29,
                     }, {
                         el: {
                             type: "bi.absolute",
@@ -131,107 +142,103 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
                                 left: 10,
                                 right: 10,
                                 top: 5,
-                                bottom: 5
-                            }]
+                                bottom: 5,
+                            }],
                         },
-                        height: 60
+                        height: 60,
                     }, {
                         el: this.more,
-                        height: 24
-                    }]
+                        height: 24,
+                    }],
                 },
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
             }, {
                 el: {
                     type: "bi.layout",
                     cls: "disable-mask",
                     invisible: !o.disabled,
-                    ref: function () {
-                        self.mask = this;
-                    }
+                    ref: () => {
+                        this.mask = this;
+                    },
                 },
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
-            }]
+                bottom: 0,
+            }],
         };
-    },
+    }
 
     // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示
-    mounted: function () {
-        var self = this;
-        var o = this.options;
-        if (BI.isNotNull(o.value)) {
+    mounted () {
+        const o = this.options;
+        if (isNotNull(o.value)) {
             this.setValue(o.value);
         }
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments);
+    _setEnable (enable) {
+        super._setEnable(...arguments);
         this.mask.setVisible(!enable);
-    },
+    }
 
-    _dealStoreColors: function () {
-        var color = this.getValue();
-        var colors = this._getStoreColors();
-        var que = new BI.Queue(8);
+    _dealStoreColors () {
+        const color = this.getValue();
+        const colors = this._getStoreColors();
+        const que = new Queue(8);
         que.fromArray(colors);
         que.remove(color);
         que.unshift(color);
-        var array = que.toArray();
-        BI.Cache.setItem("colors", BI.array2String(array));
+        const array = que.toArray();
+        Cache.setItem("colors", array2String(array));
         this.setStoreColors(array);
-    },
+    }
 
-    _digestStoreColors: function (colors) {
-        var items = BI.map(colors, function (i, color) {
+    _digestStoreColors (colors) {
+        const items = map(colors, (i, color) => {
             return {
-                value: color
+                value: color,
             };
         });
-        BI.count(colors.length, 8, function (i) {
+        count(colors.length, 8, i => {
             items.push({
                 value: "",
-                disabled: true
+                disabled: true,
             });
         });
+        
         return items;
-    },
+    }
 
-    _getStoreColors: function() {
-        var self = this, o = this.options;
-        var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || "");
-        return BI.filter(colorsArray, function (idx, color) {
-            return o.simple ? self._isRGBColor(color) : true;
-        });
-    },
+    _getStoreColors() {
+        const o = this.options;
+        const colorsArray = string2Array(Cache.getItem("colors") || "");
         
-    _isRGBColor: function (color) {
-        return BI.isNotEmptyString(color) && color !== "transparent";
-    },
+        return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
+    }
 
-    setStoreColors: function (colors) {
-        if (BI.isArray(colors)) {
+    _isRGBColor (color) {
+        return isNotEmptyString(color) && color !== "transparent";
+    }
+
+    setStoreColors (colors) {
+        if (isArray(colors)) {
             this.storeColors.populate([this._digestStoreColors(colors)]);
             // BI-66973 选中颜色的同时选中历史
             this.storeColors.setValue(this.getValue());
         }
-    },
+    }
 
-    setValue: function (color) {
+    setValue (color) {
         this.colorEditor.setValue(color);
         this.colorPicker.setValue(color);
         this.storeColors.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue () {
         return this.colorEditor.getValue();
     }
-});
-BI.ColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
-BI.ColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.color_chooser_popup", BI.ColorChooserPopup);
+}

src/case/colorchooser/colorchooser.popup.simple.js

@@ -1,47 +1,52 @@
+import { shortcut, Widget, extend, createWidget } from "@/core";
+import { ColorChooserPopup } from "./colorchooser.popup";
+
 /**
  * 选色控件
  *
  * Created by GUY on 2015/11/17.
- * @class BI.SimpleColorChooserPopup
- * @extends BI.Widget
+ * @class SimpleColorChooserPopup
+ * @extends Widget
  */
-BI.SimpleColorChooserPopup = BI.inherit(BI.Widget, {
+@shortcut()
+export class SimpleColorChooserPopup extends Widget {
+    static xtype = "bi.simple_color_chooser_popup";
+
+    static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SimpleColorChooserPopup.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-color-chooser-popup"
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls: "bi-color-chooser-popup",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SimpleColorChooserPopup.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.popup = BI.createWidget({
-            type: o.hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup",
-            value: o.value,
+    _init() {
+        super._init(...arguments);
+        const { hex, value } = this.options;
+        this.popup = createWidget({
+            type: hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup",
+            value,
             element: this,
-            simple: true // 是否有自动
+            simple: true, // 是否有自动
         });
-        this.popup.on(BI.ColorChooserPopup.EVENT_CHANGE, function () {
-            self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments);
+        this.popup.on(ColorChooserPopup.EVENT_CHANGE, (...args) => {
+            this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args);
         });
-        this.popup.on(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, function () {
-            self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
+        this.popup.on(ColorChooserPopup.EVENT_VALUE_CHANGE, (...args) => {
+            this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
         });
-    },
+    }
 
-    setStoreColors: function (colors) {
+    setStoreColors(colors) {
         this.popup.setStoreColors(colors);
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.popup.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popup.getValue();
     }
-});
-BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
-BI.SimpleColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.simple_color_chooser_popup", BI.SimpleColorChooserPopup);
+}

src/case/colorchooser/colorchooser.simple.js

@@ -1,24 +1,32 @@
+import { shortcut, Widget, extend, createWidget } from "@/core";
+import { ColorChooser } from "./colorchooser";
+
 /**
  * 简单选色控件，没有自动和透明
  *
  * Created by GUY on 2015/11/17.
- * @class BI.SimpleColorChooser
- * @extends BI.Widget
+ * @class SimpleColorChooser
+ * @extends Widget
  */
-BI.SimpleColorChooser = BI.inherit(BI.Widget, {
+@shortcut()
+export class SimpleColorChooser extends Widget {
+    static xtype = "bi.simple_color_chooser";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SimpleColorChooser.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-simple-color-chooser",
-            value: "#ffffff"
+            value: "#ffffff",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SimpleColorChooser.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
 
-        this.combo = BI.createWidget({
+        this.combo = createWidget({
             type: "bi.color_chooser",
             simple: o.simple,
             element: this,
@@ -30,36 +38,33 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, {
             popup: {
                 type: "bi.simple_hex_color_chooser_popup",
                 recommendColorsGetter: o.recommendColorsGetter,
-            }
+            },
         });
-        this.combo.on(BI.ColorChooser.EVENT_CHANGE, function () {
-            self.fireEvent(BI.SimpleColorChooser.EVENT_CHANGE, arguments);
+        this.combo.on(ColorChooser.EVENT_CHANGE, (...args) => {
+            this.fireEvent(SimpleColorChooser.EVENT_CHANGE, ...args);
         });
-        this.combo.on(BI.ColorChooser.EVENT_AFTER_POPUPVIEW, function () {
-            self.fireEvent(BI.SimpleColorChooser.EVENT_AFTER_POPUPVIEW, arguments);
+        this.combo.on(ColorChooser.EVENT_AFTER_POPUPVIEW, (...args) => {
+            this.fireEvent(SimpleColorChooser.EVENT_AFTER_POPUPVIEW, ...args);
         });
-    },
+    }
 
-    isViewVisible: function () {
+    isViewVisible() {
         return this.combo.isViewVisible();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.combo.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.combo.getValue();
     }
-});
-BI.SimpleColorChooser.EVENT_CHANGE = "EVENT_CHANGE";
-BI.SimpleColorChooser.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
-BI.shortcut("bi.simple_color_chooser", BI.SimpleColorChooser);
+}

src/case/colorchooser/colorchooser.trigger.js

@@ -1,36 +1,44 @@
+import { shortcut, extend, createWidget, isNotNull } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 选色控件
  *
  * Created by GUY on 2015/11/17.
- * @class BI.ColorChooserTrigger
- * @extends BI.Trigger
+ * @class ColorChooserTrigger
+ * @extends Trigger
  */
-BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class ColorChooserTrigger extends Trigger {
+    static xtype = "bi.color_chooser_trigger";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function (config) {
-        var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
-            height: 22
+    _defaultConfig (config) {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
+            height: 22,
         });
-    },
+    }
 
-    _init: function () {
-        BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
-        this.colorContainer = BI.createWidget({
+    _init () {
+        super._init(...arguments);
+        this.colorContainer = createWidget({
             type: "bi.layout",
             cls: "color-chooser-trigger-content" + (BI.isIE9Below && BI.isIE9Below() ? " hack" : "")
         });
 
-        var down = BI.createWidget({
+        const down = createWidget({
             type: "bi.icon_button",
             disableSelected: true,
             cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
             width: 12,
-            height: 8
+            height: 8,
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
             items: [{
@@ -38,20 +46,20 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
                 left: 2,
                 right: 2,
                 top: 2,
-                bottom: 2
+                bottom: 2,
             }, {
                 el: down,
                 right: -1,
-                bottom: 1
-            }]
+                bottom: 1,
+            }],
         });
-        if (BI.isNotNull(this.options.value)) {
+        if (isNotNull(this.options.value)) {
             this.setValue(this.options.value);
         }
-    },
+    }
 
-    setValue: function (color) {
-        BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
+    setValue (color) {
+        super.setValue(...arguments);
         if (color === "") {
             this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
         } else if (color === "transparent") {
@@ -60,6 +68,4 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
             this.colorContainer.element.css({ "background-color": color }).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
-});
-BI.ColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.color_chooser_trigger", BI.ColorChooserTrigger);
+}

src/case/colorchooser/colorchooser.trigger.long.js

@@ -1,59 +1,66 @@
+import { shortcut, extend, createWidget } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 选色控件
  *
  * Created by GUY on 2015/11/17.
- * @class BI.LongColorChooserTrigger
- * @extends BI.Trigger
+ * @class LongColorChooserTrigger
+ * @extends Trigger
  */
-BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class LongColorChooserTrigger extends Trigger {
+    static xtype = "bi.long_color_chooser_trigger";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig (config) {
+        const conf = super._defaultConfig(...arguments);
         
-    _defaultConfig: function (config) {
-        var conf = BI.LongColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
-            height: 24
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
+            height: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.LongColorChooserTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.colorContainer = BI.createWidget({
+    _init () {
+        super._init(...arguments);
+        this.colorContainer = createWidget({
             type: "bi.htape",
             cls: "color-chooser-trigger-content",
             items: [{
                 type: "bi.icon_change_button",
-                ref: function (_ref) {
-                    self.changeIcon = _ref;
+                ref: _ref => {
+                    this.changeIcon = _ref;
                 },
                 disableSelected: true,
                 iconCls: "auto-color-icon",
                 width: 24,
                 iconWidth: 16,
-                iconHeight: 16
+                iconHeight: 16,
             }, {
                 el: {
                     type: "bi.label",
-                    ref: function (_ref) {
-                        self.label = _ref;
+                    ref: _ref => {
+                        this.label = _ref;
                     },
                     textAlign: "left",
                     hgap: 5,
                     height: 18,
-                    text: BI.i18nText("BI-Basic_Auto")
-                }
-            }]
+                    text: BI.i18nText("BI-Basic_Auto"),
+                },
+            }],
         });
 
-        var down = BI.createWidget({
+        const down = createWidget({
             type: "bi.icon_button",
             disableSelected: true,
             cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
             width: 12,
-            height: 8
+            height: 8,
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
             items: [{
@@ -61,20 +68,20 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
                 left: 2,
                 right: 2,
                 top: 2,
-                bottom: 2
+                bottom: 2,
             }, {
                 el: down,
                 right: 3,
-                bottom: 3
-            }]
+                bottom: 3,
+            }],
         });
         if (this.options.value) {
             this.setValue(this.options.value);
         }
-    },
+    }
 
-    setValue: function (color) {
-        BI.LongColorChooserTrigger.superclass.setValue.apply(this, arguments);
+    setValue (color) {
+        super.setValue(...arguments);
         if (color === "") {
             this.colorContainer.element.css("background-color", "");
             this.changeIcon.setVisible(true);
@@ -93,6 +100,4 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
             this.label.setVisible(false);
         }
     }
-});
-BI.LongColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.long_color_chooser_trigger", BI.LongColorChooserTrigger);
+}

src/case/colorchooser/colorpicker/button/button.colorpicker.js

@@ -1,66 +1,72 @@
+import { shortcut, isNotNull, extend } from "@/core";
+import { BasicButton, Maskers } from "@/base";
+
 /**
  * 简单选色控件按钮
  *
  * Created by GUY on 2015/11/16.
- * @class BI.ColorPickerButton
- * @extends BI.BasicButton
+ * @class ColorPickerButton
+ * @extends BasicButton
  */
-BI.ColorPickerButton = BI.inherit(BI.BasicButton, {
+@shortcut()
+export class ColorPickerButton extends BasicButton {
+    static xtype = "bi.color_picker_button";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function () {
-        var conf = BI.ColorPickerButton.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-picker-button bi-background bi-border-top bi-border-left"
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-color-picker-button bi-background bi-border-top bi-border-left`,
         });
-    },
+    }
 
-    _init: function () {
-        BI.ColorPickerButton.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        if (BI.isNotNull(o.value)) {
-            if (o.value === '') {
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        if (isNotNull(o.value)) {
+            if (o.value === "") {
                 this.element.addClass("auto-color-no-square-normal-background");
             } else if (o.value === "transparent") {
                 this.element.addClass("trans-color-background");
             } else {
                 this.element.css("background-color", o.value);
             }
-            var name = this.getName();
-            this.element.hover(function () {
-                self._createMask();
-                if (self.isEnabled()) {
-                    BI.Maskers.show(name);
+            const name = this.getName();
+            this.element.hover(() => {
+                this._createMask();
+                if (this.isEnabled()) {
+                    Maskers.show(name);
                 }
-            }, function () {
-                if (!self.isSelected()) {
-                    BI.Maskers.hide(name);
+            }, () => {
+                if (!this.isSelected()) {
+                    Maskers.hide(name);
                 }
             });
         }
-    },
+    }
 
-    _createMask: function () {
-        var o = this.options, name = this.getName();
-        if (this.isEnabled() && !BI.Maskers.has(name)) {
-            var w = BI.Maskers.make(name, this, {
+    _createMask() {
+        const o = this.options, name = this.getName();
+        if (this.isEnabled() && !Maskers.has(name)) {
+            const w = Maskers.make(name, this, {
                 offset: {
                     left: -1,
                     top: -1,
                     right: -1,
-                    bottom: -1
-                }
+                    bottom: -1,
+                },
             });
             w.element.addClass("color-picker-button-mask").css("background-color", o.value);
         }
-    },
+    }
 
-    setSelected: function (b) {
-        BI.ColorPickerButton.superclass.setSelected.apply(this, arguments);
+    setSelected(b) {
+        super.setSelected(...arguments);
         if (b) {
             this._createMask();
         }
-        BI.Maskers[b ? "show" : "hide"](this.getName());
+        Maskers[b ? "show" : "hide"](this.getName());
+    }
 }
-});
-BI.ColorPickerButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.color_picker_button", BI.ColorPickerButton);

src/case/colorchooser/colorpicker/button/button.colorshow.js

@@ -1,24 +1,32 @@
+import { shortcut } from "@/core";
+import { BasicButton } from "@/base";
+
 /**
  * @author windy
  * @version 2.0
  * Created by windy on 2021/7/28
  */
-BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
+@shortcut()
+export class ColorChooserShowButton extends BasicButton {
+    static xtype = "bi.color_picker_show_button";
 
-    props: {
-        baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius',
-    },
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    props = {
+        baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius",
+    }
+
+    render() {
+        const o = this.options;
         
-    render: function () {
-        var self = this, o = this.options;
         return {
-            type: 'bi.htape',
+            type: "bi.htape",
             items: [
                 {
                     el: {
                         type: "bi.icon_label",
-                        ref: function (_ref) {
-                            self.icon = _ref;
+                        ref: _ref => {
+                            this.icon = _ref;
                         },
                         iconWidth: 16,
                         iconHeight: 16,
@@ -26,20 +34,18 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
                     hgap: 20,
                     width: 16,
                 }, {
-                    type: 'bi.label',
-                    textAlign: 'left',
+                    type: "bi.label",
+                    textAlign: "left",
                     text: o.text,
                 }
-            ]
+            ],
         };
-    },
+    }
 
-    doClick: function () {
-        BI.ColorChooserShowButton.superclass.doClick.apply(this, arguments);
+    doClick() {
+        super.doClick(...arguments);
         if (this.isValid()) {
-            this.fireEvent(BI.ColorChooserShowButton.EVENT_CHANGE, this);
+            this.fireEvent(ColorChooserShowButton.EVENT_CHANGE, this);
+        }
+    }
 }
-    },
-});
-BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton);

src/case/colorchooser/colorpicker/button/index.js

@@ -0,0 +1,2 @@
+export { ColorPickerButton } from "./button.colorpicker";
+export { ColorChooserShowButton } from "./button.colorshow";

src/case/colorchooser/colorpicker/colorpicker.hex.js

@@ -1,165 +1,172 @@
+import { shortcut, Widget, extend, each } from "@/core";
+import { ButtonGroup } from "@/base";
+
 /**
  * @author windy
  * @version 2.0
  * Created by windy on 2021/7/28
  */
-BI.HexColorPicker = BI.inherit(BI.Widget, {
+@shortcut()
+export class HexColorPicker extends Widget {
+    static xtype = "bi.hex_color_picker";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    props: {
+    props = {
         baseCls: "bi-hex-color-picker",
         items: null,
-    },
+    }
 
-    _items: [
+    _items = [
         [
             {
-                "value": "#999999"
+                value: "#999999",
             },
             {
-                "value": "#FFFFFF"
+                value: "#FFFFFF",
             },
             {
-                "value": "#FFE5E5"
+                value: "#FFE5E5",
             },
             {
-                "value": "#FFF1E5"
+                value: "#FFF1E5",
             },
             {
-                "value": "#FFF9E5"
+                value: "#FFF9E5",
             },
             {
-                "value": "#E9F5E9"
+                value: "#E9F5E9",
             },
             {
-                "value": "#EAEEFF"
+                value: "#EAEEFF",
             },
             {
-                "value": "#EFEBF7"
+                value: "#EFEBF7",
             },
             {
-                "value": "#FCE8EF"
+                value: "#FCE8EF",
             }
         ],
         [
             {
-                "value": "#737373"
+                value: "#737373",
             },
             {
-                "value": "#F2F2F2"
+                value: "#F2F2F2",
             },
             {
-                "value": "#FFA6A6"
+                value: "#FFA6A6",
             },
             {
-                "value": "#FFD0A6"
+                value: "#FFD0A6",
             },
             {
-                "value": "#FFEDA6"
+                value: "#FFEDA6",
             },
             {
-                "value": "#B3DCB2"
+                value: "#B3DCB2",
             },
             {
-                "value": "#B9C6FF"
+                value: "#B9C6FF",
             },
             {
-                "value": "#CABAE6"
+                value: "#CABAE6",
             },
             {
-                "value": "#F8B1C9"
+                value: "#F8B1C9",
             }
         ],
         [
             {
-                "value": "#4C4C4C"
+                value: "#4C4C4C",
             },
             {
-                "value": "#D9D9D9"
+                value: "#D9D9D9",
             },
             {
-                "value": "#FF5959"
+                value: "#FF5959",
             },
             {
-                "value": "#FFA759"
+                value: "#FFA759",
             },
             {
-                "value": "#FFDD59"
+                value: "#FFDD59",
             },
             {
-                "value": "#7EBE70"
+                value: "#7EBE70",
             },
             {
-                "value": "#7B95FF"
+                value: "#7B95FF",
             },
             {
-                "value": "#9C7FD0"
+                value: "#9C7FD0",
             },
             {
-                "value": "#F06D99"
+                value: "#F06D99",
             }
         ],
         [
             {
-                "value": "#262626"
+                value: "#262626",
             },
             {
-                "value": "#BFBFBF"
+                value: "#BFBFBF",
             },
             {
-                "value": "#FF0000"
+                value: "#FF0000",
             },
             {
-                "value": "#FF7800"
+                value: "#FF7800",
             },
             {
-                "value": "#FFCB00"
+                value: "#FFCB00",
             },
             {
-                "value": "#259B23"
+                value: "#259B23",
             },
             {
-                "value": "#355CFF"
+                value: "#355CFF",
             },
             {
-                "value": "#673AB7"
+                value: "#673AB7",
             },
             {
-                "value": "#E91E63"
+                value: "#E91E63",
             }
         ],
         [
             {
-                "value": "#000000"
+                value: "#000000",
             },
             {
-                "value": "#A6A6A6"
+                value: "#A6A6A6",
             },
             {
-                "value": "#A80000"
+                value: "#A80000",
             },
             {
-                "value": "#B65600"
+                value: "#B65600",
             },
             {
-                "value": "#CEB000"
+                value: "#CEB000",
             },
             {
-                "value": "#0E550C"
+                value: "#0E550C",
             },
             {
-                "value": "#09269C"
+                value: "#09269C",
             },
             {
-                "value": "#3A1A73"
+                value: "#3A1A73",
             },
             {
-                "value": "#B30072"
+                value: "#B30072",
             }
         ]
-    ],
+    ]
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const o = this.options;
 
         return {
             type: "bi.button_group",
@@ -172,52 +179,50 @@ BI.HexColorPicker = BI.inherit(BI.Widget, {
             value: o.value,
             listeners: [
                 {
-                    eventName: BI.ButtonGroup.EVENT_CHANGE,
-                    action: function () {
-                        self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments);
-                    }
+                    eventName: ButtonGroup.EVENT_CHANGE,
+                    action: (...args) => {
+                        this.fireEvent(HexColorPicker.EVENT_CHANGE, ...args);
+                    },
                 }
             ],
-            ref: function (_ref) {
-                self.colors = _ref;
-            }
-        };
+            ref: _ref => {
+                this.colors = _ref;
             },
+        };
+    }
 
-    _digest: function (items) {
-        var o = this.options;
-        var blocks = [];
-        BI.each(items, function (idx, row) {
-            var bRow = [];
-            BI.each(row, function (idx, item) {
-                bRow.push(BI.extend({
+    _digest(items) {
+        const o = this.options;
+        const blocks = [];
+        each(items, (idx, row) => {
+            const bRow = [];
+            each(row, (idx, item) => {
+                bRow.push(extend({
                     type: "bi.color_picker_button",
                     once: false,
-                    cls: o.space ? 'bi-border-right' : '',
+                    cls: o.space ? "bi-border-right" : "",
                 }, item));
                 if (o.space && idx < row.length - 1) {
-                    bRow.push({ type: 'bi.layout' });
+                    bRow.push({ type: "bi.layout" });
                 }
             });
             blocks.push(bRow);
         });
 
         return blocks;
-    },
+    }
 
-    populate: function (items) {
-        var args = [].slice.call(arguments);
+    populate(items) {
+        const args = [].slice.call(arguments);
         args[0] = this._digest(items);
         this.colors.populate.apply(this.colors, args);
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.colors.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.colors.getValue();
     }
-});
-BI.HexColorPicker.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.hex_color_picker", BI.HexColorPicker);
+}

src/case/colorchooser/colorpicker/colorpicker.js

@@ -1,190 +1,195 @@
+import { shortcut, Widget, extend, createItems, createWidget } from "@/core";
+import { ButtonGroup } from "@/base";
+
 /**
  * 简单选色控件
  *
  * Created by GUY on 2015/11/16.
- * @class BI.ColorPicker
- * @extends BI.Widget
+ * @class ColorPicker
+ * @extends Widget
  */
-BI.ColorPicker = BI.inherit(BI.Widget, {
+@shortcut()
+export class ColorPicker extends Widget {
+    static xtype = "bi.color_picker";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.ColorPicker.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-color-picker",
-            items: null
+            items: null,
         });
-    },
+    }
 
-    _items: [
+    _items = [
         [{
-            value: "#ffffff"
+            value: "#ffffff",
         }, {
-            value: "#f2f2f2"
+            value: "#f2f2f2",
         }, {
-            value: "#e5e5e5"
+            value: "#e5e5e5",
         }, {
-            value: "#d9d9d9"
+            value: "#d9d9d9",
         }, {
-            value: "#cccccc"
+            value: "#cccccc",
         }, {
-            value: "#bfbfbf"
+            value: "#bfbfbf",
         }, {
-            value: "#b2b2b2"
+            value: "#b2b2b2",
         }, {
-            value: "#a6a6a6"
+            value: "#a6a6a6",
         }, {
-            value: "#999999"
+            value: "#999999",
         }, {
-            value: "#8c8c8c"
+            value: "#8c8c8c",
         }, {
-            value: "#808080"
+            value: "#808080",
         }, {
-            value: "#737373"
+            value: "#737373",
         }, {
-            value: "#666666"
+            value: "#666666",
         }, {
-            value: "#4d4d4d"
+            value: "#4d4d4d",
         }, {
-            value: "#333333"
+            value: "#333333",
         }, {
-            value: "#000000"
+            value: "#000000",
         }],
         [{
-            value: "#d8b5a6"
+            value: "#d8b5a6",
         }, {
-            value: "#ff9e9a"
+            value: "#ff9e9a",
         }, {
-            value: "#ffc17d"
+            value: "#ffc17d",
         }, {
-            value: "#f5e56b"
+            value: "#f5e56b",
         }, {
-            value: "#d8e698"
+            value: "#d8e698",
         }, {
-            value: "#e0ebaf"
+            value: "#e0ebaf",
         }, {
-            value: "#c3d825"
+            value: "#c3d825",
         }, {
-            value: "#bbe2e7"
+            value: "#bbe2e7",
         }, {
-            value: "#85d3cd"
+            value: "#85d3cd",
         }, {
-            value: "#bde1e6"
+            value: "#bde1e6",
         }, {
-            value: "#a0d8ef"
+            value: "#a0d8ef",
         }, {
-            value: "#89c3eb"
+            value: "#89c3eb",
         }, {
-            value: "#bbc8e6"
+            value: "#bbc8e6",
         }, {
-            value: "#bbbcde"
+            value: "#bbbcde",
         }, {
-            value: "#d6b4cc"
+            value: "#d6b4cc",
         }, {
-            value: "#fbc0d3"
+            value: "#fbc0d3",
         }],
         [{
-            value: "#bb9581"
+            value: "#bb9581",
         }, {
-            value: "#f37d79"
+            value: "#f37d79",
         }, {
-            value: "#fba74f"
+            value: "#fba74f",
         }, {
-            value: "#ffdb4f"
+            value: "#ffdb4f",
         }, {
-            value: "#c7dc68"
+            value: "#c7dc68",
         }, {
-            value: "#b0ca71"
+            value: "#b0ca71",
         }, {
-            value: "#99ab4e"
+            value: "#99ab4e",
         }, {
-            value: "#84b9cb"
+            value: "#84b9cb",
         }, {
-            value: "#00a3af"
+            value: "#00a3af",
         }, {
-            value: "#2ca9e1"
+            value: "#2ca9e1",
         }, {
-            value: "#0095d9"
+            value: "#0095d9",
         }, {
-            value: "#4c6cb3"
+            value: "#4c6cb3",
         }, {
-            value: "#8491c3"
+            value: "#8491c3",
         }, {
-            value: "#a59aca"
+            value: "#a59aca",
         }, {
-            value: "#cc7eb1"
+            value: "#cc7eb1",
         }, {
-            value: "#e89bb4"
+            value: "#e89bb4",
         }],
         [{
-            value: "#9d775f"
+            value: "#9d775f",
         }, {
-            value: "#dd4b4b"
+            value: "#dd4b4b",
         }, {
-            value: "#ef8b07"
+            value: "#ef8b07",
         }, {
-            value: "#fcc800"
+            value: "#fcc800",
         }, {
-            value: "#aacf53"
+            value: "#aacf53",
         }, {
-            value: "#82ae46"
+            value: "#82ae46",
         }, {
-            value: "#69821b"
+            value: "#69821b",
         }, {
-            value: "#59b9c6"
+            value: "#59b9c6",
         }, {
-            value: "#2a83a2"
+            value: "#2a83a2",
         }, {
-            value: "#007bbb"
+            value: "#007bbb",
         }, {
-            value: "#19448e"
+            value: "#19448e",
         }, {
-            value: "#274a78"
+            value: "#274a78",
         }, {
-            value: "#4a488e"
+            value: "#4a488e",
         }, {
-            value: "#7058a3"
+            value: "#7058a3",
         }, {
-            value: "#884898"
+            value: "#884898",
         }, {
-            value: "#d47596"
+            value: "#d47596",
         }]
-    ],
+    ]
 
-    _init: function () {
-        BI.ColorPicker.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.colors = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.colors = createWidget({
             type: "bi.button_group",
             element: this,
-            items: BI.createItems(o.items || this._items, {
+            items: createItems(o.items || this._items, {
                 type: "bi.color_picker_button",
-                once: false
+                once: false,
             }),
             layouts: [{
-                type: "bi.grid"
+                type: "bi.grid",
             }],
-            value: o.value
+            value: o.value,
         });
-        this.colors.on(BI.ButtonGroup.EVENT_CHANGE, function () {
-            self.fireEvent(BI.ColorPicker.EVENT_CHANGE, arguments);
+        this.colors.on(ButtonGroup.EVENT_CHANGE, (...args) => {
+            this.fireEvent(ColorPicker.EVENT_CHANGE, ...args);
         });
-    },
+    }
 
-    populate: function (items) {
-        var args  = [].slice.call(arguments);
-        args[0] = BI.createItems(items, {
+    populate(items) {
+        const args = [].slice.call(arguments);
+        args[0] = createItems(items, {
             type: "bi.color_picker_button",
-            once: false
+            once: false,
         });
         this.colors.populate.apply(this.colors, args);
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.colors.setValue(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.colors.getValue();
     }
-});
-BI.ColorPicker.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.color_picker", BI.ColorPicker);
+}

src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

@@ -1,36 +1,37 @@
+import { shortcut, Widget, createItems, map, isNumeric, range, extend, isEmptyString, isNull, DOM } from "@/core";
+import { ColorPickerEditor } from "./editor.colorpicker";
+import { ColorChooserShowButton } from "./button";
+
+const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
+
 /**
  * 简单选色控件
  *
  * Created by GUY on 2015/11/16.
- * @class BI.ColorPickerEditor
- * @extends BI.Widget
+ * @class HexColorPickerEditor
+ * @extends Widget
  */
-BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
+@shortcut()
+export class HexColorPickerEditor extends Widget {
+    static xtype = "bi.hex_color_picker_editor";
     
-    constants: {
-        RGB_WIDTH: 32,
-        HEX_WIDTH: 70,
-        HEX_PREFIX_POSITION: 1
-    },
+    static EVENT_CHANGE = "EVENT_CHANGE";
     
-    props: {
+    props = {
         baseCls: "bi-color-picker-editor",
-        height: 30
-    },
+        height: 30,
+    }
 
-    render: function () {
-        var self = this, o = this.options, c = this.constants;
+    render() {
         this.storeValue = {};
-        var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
+        const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
             type: "bi.label",
             cls: "color-picker-editor-label",
-            height: 20
+            height: 20,
         });
 
-        var checker = function (v) {
-            return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
-        };
-        var Ws = BI.map(BI.range(0, 3), function () {
+        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const Ws = map(range(0, 3), () => {
             return {
                 type: "bi.small_text_editor",
                 cls: "color-picker-editor-input bi-border-radius",
@@ -38,20 +39,20 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                 errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
                 allowBlank: true,
                 value: 255,
-                width: c.RGB_WIDTH,
+                width: RGB_WIDTH,
                 height: 24,
                 listeners: [
                     {
                         eventName: BI.TextEditor.EVENT_CHANGE,
-                        action: function () {
-                            self._checkEditors();
-                            if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
-                                self.colorShow.element.css("background-color", self.getValue());
-                                self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                            }
+                        action: () => {
+                            this._checkEditors();
+                            if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
+                                this.colorShow.element.css("background-color", this.getValue());
+                                this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                             }
+                        },
                     }
-                ]
+                ],
             };
         });
 
@@ -64,8 +65,8 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                         tgap: 10,
                         items: [
                             {
-                                type: 'bi.vertical_adapt',
-                                columnSize: ["fill", 'fill'],
+                                type: "bi.vertical_adapt",
+                                columnSize: ["fill", "fill"],
                                 height: 24,
                                 items: [
                                     {
@@ -76,16 +77,16 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                                         text: BI.i18nText("BI-Transparent_Color"),
                                         listeners: [
                                             {
-                                                eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
-                                                action: function () {
-                                                    self.setValue("transparent");
-                                                    self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                                                }
+                                                eventName: ColorChooserShowButton.EVENT_CHANGE,
+                                                action: () => {
+                                                    this.setValue("transparent");
+                                                    this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
+                                                },
                                             }
                                         ],
-                                        ref: function (_ref) {
-                                            self.transparent = _ref;
-                                        }
+                                        ref: _ref => {
+                                            this.transparent = _ref;
+                                        },
                                     }, {
                                         el: {
                                             type: "bi.color_picker_show_button",
@@ -95,24 +96,24 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                                             text: BI.i18nText("BI-Basic_Auto"),
                                             listeners: [
                                                 {
-                                                    eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
-                                                    action: function () {
-                                                        self.setValue("");
-                                                        self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                                                    }
+                                                    eventName: ColorChooserShowButton.EVENT_CHANGE,
+                                                    action: () => {
+                                                        this.setValue("");
+                                                        this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
+                                                    },
                                                 }
                                             ],
-                                            ref: function (_ref) {
-                                                self.none = _ref;
-                                            }
+                                            ref: _ref => {
+                                                this.none = _ref;
+                                            },
                                         },
                                         lgap: 10,
                                     }
-                                ]
+                                ],
                             }, {
                                 el: {
                                     type: "bi.vertical_adapt",
-                                    columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
+                                    columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
 
                                     rgap: 5,
                                     items: [
@@ -122,107 +123,106 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                                                 cls: "color-picker-editor-display bi-card bi-border",
                                                 height: 22,
                                                 width: 22,
-                                                ref: function (_ref) {
-                                                    self.colorShow = _ref;
-                                                }
+                                                ref: _ref => {
+                                                    this.colorShow = _ref;
+                                                },
                                             },
-                                            width: 18
+                                            width: 18,
                                         }, {
                                             type: "bi.label",
                                             text: "#",
-                                            width: 10
+                                            width: 10,
                                         }, {
                                             type: "bi.small_text_editor",
-                                            ref: function (_ref) {
-                                                self.hexEditor = _ref;
+                                            ref: _ref => {
+                                                this.hexEditor = _ref;
                                             },
                                             cls: "color-picker-editor-input bi-border-radius",
                                             validationChecker: this._hexChecker,
                                             allowBlank: true,
                                             errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
-                                            width: c.HEX_WIDTH,
+                                            width: HEX_WIDTH,
                                             height: 24,
                                             listeners: [
                                                 {
                                                     eventName: "EVENT_CHANGE",
-                                                    action: function () {
-                                                        self._checkHexEditor();
-                                                        if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
-                                                            self.colorShow.element.css("background-color", self.getValue());
-                                                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                                                        }
-
+                                                    action: () => {
+                                                        this._checkHexEditor();
+                                                        if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
+                                                            this.colorShow.element.css("background-color", this.getValue());
+                                                            this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                                                         }
+                                                    },
                                                 }
-                                            ]
+                                            ],
                                         }, RGB[0], {
-                                            el: BI.extend(Ws[0], {
-                                                ref: function (_ref) {
-                                                    self.R = _ref;
-                                                }
+                                            el: extend(Ws[0], {
+                                                ref: _ref => {
+                                                    this.R = _ref;
+                                                },
                                             }),
-                                            width: c.RGB_WIDTH
+                                            width: RGB_WIDTH,
                                         }, RGB[1], {
-                                            el: BI.extend(Ws[1], {
-                                                ref: function (_ref) {
-                                                    self.G = _ref;
-                                                }
+                                            el: extend(Ws[1], {
+                                                ref: _ref => {
+                                                    this.G = _ref;
+                                                },
                                             }),
-                                            width: c.RGB_WIDTH
+                                            width: RGB_WIDTH,
                                         }, RGB[2], {
-                                            el: BI.extend(Ws[2], {
-                                                ref: function (_ref) {
-                                                    self.B = _ref;
-                                                }
+                                            el: extend(Ws[2], {
+                                                ref: _ref => {
+                                                    this.B = _ref;
+                                                },
                                             }),
                                             rgap: -5,
-                                            width: c.RGB_WIDTH
-                                        }
-                                    ]
+                                            width: RGB_WIDTH,
                                         }
+                                    ],
+                                },
                             }
-                        ]
+                        ],
                     },
                     left: 0,
                     right: 0,
                     top: 0,
-                    bottom: 0
+                    bottom: 0,
                 }
-            ]
+            ],
         };
-    },
+    }
 
-    _hexChecker: function (v) {
+    _hexChecker(v) {
         return /^[0-9a-fA-F]{6}$/.test(v);
-    },
+    }
 
-    _checkEditors: function () {
-        if (BI.isEmptyString(this.R.getValue())) {
+    _checkEditors() {
+        if (isEmptyString(this.R.getValue())) {
             this.R.setValue(0);
         }
-        if (BI.isEmptyString(this.G.getValue())) {
+        if (isEmptyString(this.G.getValue())) {
             this.G.setValue(0);
         }
-        if (BI.isEmptyString(this.B.getValue())) {
+        if (isEmptyString(this.B.getValue())) {
             this.B.setValue(0);
         }
         this.storeValue = {
             r: this.R.getValue() || 0,
             g: this.G.getValue() || 0,
-            b: this.B.getValue() || 0
+            b: this.B.getValue() || 0,
         };
-        this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
-    },
+        this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION));
+    }
 
-    _isEmptyRGB: function () {
-        return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b);
-    },
+    _isEmptyRGB() {
+        return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b);
+    }
 
-    _checkHexEditor: function () {
-        if (BI.isEmptyString(this.hexEditor.getValue())) {
+    _checkHexEditor() {
+        if (isEmptyString(this.hexEditor.getValue())) {
             this.hexEditor.setValue("000000");
         }
-        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb("#" + this.hexEditor.getValue()));
+        const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
         this.storeValue = {
             r: json.r || 0,
             g: json.g || 0,
@@ -231,9 +231,9 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
         this.R.setValue(this.storeValue.r);
         this.G.setValue(this.storeValue.g);
         this.B.setValue(this.storeValue.b);
-    },
+    }
 
-    _showPreColor: function (color) {
+    _showPreColor(color) {
         if (color === "") {
             this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background");
         } else if (color === "transparent") {
@@ -241,18 +241,18 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
         } else {
             this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background");
         }
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.ColorPickerEditor.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 (color) {
+    setValue(color) {
         if (color === "transparent") {
             this.transparent.setSelected(true);
             this.none.setSelected(false);
@@ -264,8 +264,9 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
             this.storeValue = {
                 r: "",
                 g: "",
-                b: ""
+                b: "",
             };
+            
             return;
         }
         if (!color) {
@@ -276,28 +277,27 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
         }
         this.transparent.setSelected(false);
         this._showPreColor(color);
-        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
+        const json = DOM.rgb2json(DOM.hex2rgb(color));
         this.storeValue = {
-            r: BI.isNull(json.r) ? "" : json.r,
-            g: BI.isNull(json.g) ? "" : json.g,
-            b: BI.isNull(json.b) ? "" : json.b
+            r: isNull(json.r) ? "" : json.r,
+            g: isNull(json.g) ? "" : json.g,
+            b: isNull(json.b) ? "" : json.b,
         };
         this.R.setValue(this.storeValue.r);
         this.G.setValue(this.storeValue.g);
         this.B.setValue(this.storeValue.b);
-        this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION));
-    },
+        this.hexEditor.setValue(color.slice(HEX_PREFIX_POSITION));
+    }
 
-    getValue: function () {
+    getValue() {
         if (this._isEmptyRGB() && this.transparent.isSelected()) {
             return "transparent";
         }
-        return BI.DOM.rgb2hex(BI.DOM.json2rgb({
+        
+        return DOM.rgb2hex(DOM.json2rgb({
             r: this.storeValue.r,
             g: this.storeValue.g,
-            b: this.storeValue.b
+            b: this.storeValue.b,
         }));
     }
-});
-BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor);
+}

src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

@@ -1,34 +1,34 @@
+import { shortcut, Widget, extend, isEmptyObject, createItems, isNull, isNumeric, map, isEmptyString, range, DOM } from "@/core";
+import { SimpleColorPickerEditor } from "./editor.colorpicker.simple";
+import { ColorPickerEditor } from "./editor.colorpicker";
+
+const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
+
 /**
  * @author windy
  * @version 2.0
  * Created by windy on 2020/11/10
  */
-BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
+@shortcut()
+export class SimpleHexColorPickerEditor extends Widget {
+    static xtype = "bi.simple_hex_color_picker_editor";
 
-    constants: {
-        RGB_WIDTH: 32,
-        HEX_WIDTH: 70,
-        HEX_PREFIX_POSITION: 1
-    },
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    props: {
+    props = {
         baseCls: "bi-color-picker-editor",
-        height: 36
-    },
-
-    render: function () {
-        var self = this, o = this.options, c = this.constants;
+        height: 36,
+    }
 
-        var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
+    render () {
+        const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
             type: "bi.label",
             cls: "color-picker-editor-label",
-            height: 20
+            height: 20,
         });
 
-        var checker = function (v) {
-            return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
-        };
-        var Ws = BI.map(BI.range(0, 3), function () {
+        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const Ws = map(range(0, 3), () => {
             return {
                 type: "bi.small_text_editor",
                 cls: "color-picker-editor-input bi-border-radius",
@@ -36,20 +36,20 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                 errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
                 allowBlank: true,
                 value: 255,
-                width: c.RGB_WIDTH,
+                width: RGB_WIDTH,
                 height: 24,
                 listeners: [
                     {
                         eventName: BI.TextEditor.EVENT_CHANGE,
-                        action: function () {
-                            self._checkEditors();
-                            if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
-                                self.colorShow.element.css("background-color", self.getValue());
-                                self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
-                            }
+                        action: () => {
+                            this._checkEditors();
+                            if (this.R.isValid() && this.G.isValid() && this.B.isValid()) {
+                                this.colorShow.element.css("background-color", this.getValue());
+                                this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE);
                             }
+                        },
                     }
-                ]
+                ],
             };
         });
 
@@ -61,7 +61,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                     el: {
                         type: "bi.vertical_adapt",
                         rgap: 5,
-                        columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
+                        columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
                         items: [
                             {
                                 el: {
@@ -69,91 +69,91 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                                     cls: "color-picker-editor-display bi-card bi-border",
                                     height: 22,
                                     width: 22,
-                                    ref: function (_ref) {
-                                        self.colorShow = _ref;
-                                    }
+                                    ref: _ref => {
+                                        this.colorShow = _ref;
+                                    },
                                 },
                                 width: 18,
                             }, {
                                 type: "bi.label",
                                 text: "#",
-                                width: 10
+                                width: 10,
                             }, {
                                 type: "bi.small_text_editor",
-                                ref: function (_ref) {
-                                    self.hexEditor = _ref;
+                                ref: _ref => {
+                                    this.hexEditor = _ref;
                                 },
                                 cls: "color-picker-editor-input bi-border-radius",
                                 validationChecker: this._hexChecker,
                                 allowBlank: true,
                                 errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
-                                width: c.HEX_WIDTH,
+                                width: HEX_WIDTH,
                                 height: 24,
                                 listeners: [
                                     {
                                         eventName: "EVENT_CHANGE",
-                                        action: function () {
-                                            self._checkHexEditor();
-                                            if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
-                                                self.colorShow.element.css("background-color", self.getValue());
-                                                self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                                            }
+                                        action: () => {
+                                            this._checkHexEditor();
+                                            if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
+                                                this.colorShow.element.css("background-color", this.getValue());
+                                                this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                                             }
+                                        },
                                     }
-                                ]
+                                ],
                             }, RGB[0], {
-                                el: BI.extend(Ws[0], {
-                                    ref: function (_ref) {
-                                        self.R = _ref;
-                                    }
+                                el: extend(Ws[0], {
+                                    ref: _ref => {
+                                        this.R = _ref;
+                                    },
                                 }),
-                                width: c.RGB_WIDTH
+                                width: RGB_WIDTH,
                             }, RGB[1], {
-                                el: BI.extend(Ws[1], {
-                                    ref: function (_ref) {
-                                        self.G = _ref;
-                                    }
+                                el: extend(Ws[1], {
+                                    ref: _ref => {
+                                        this.G = _ref;
+                                    },
                                 }),
-                                width: c.RGB_WIDTH
+                                width: RGB_WIDTH,
                             }, RGB[2], {
-                                el: BI.extend(Ws[2], {
-                                    ref: function (_ref) {
-                                        self.B = _ref;
-                                    }
+                                el: extend(Ws[2], {
+                                    ref: _ref => {
+                                        this.B = _ref;
+                                    },
                                 }),
                                 rgap: -5,
-                                width: c.RGB_WIDTH
-                            }
-                        ]
+                                width: RGB_WIDTH,
                             }
+                        ],
+                    },
                 }
-            ]
+            ],
 
         };
-    },
+    }
 
-    _hexChecker: function (v) {
+    _hexChecker (v) {
         return /^[0-9a-fA-F]{6}$/.test(v);
-    },
+    }
 
-    _checkEditors: function () {
-        if (BI.isEmptyString(this.R.getValue())) {
+    _checkEditors () {
+        if (isEmptyString(this.R.getValue())) {
             this.R.setValue(0);
         }
-        if (BI.isEmptyString(this.G.getValue())) {
+        if (isEmptyString(this.G.getValue())) {
             this.G.setValue(0);
         }
-        if (BI.isEmptyString(this.B.getValue())) {
+        if (isEmptyString(this.B.getValue())) {
             this.B.setValue(0);
         }
-        this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
-    },
+        this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION));
+    }
 
-    _checkHexEditor: function () {
-        if (BI.isEmptyString(this.hexEditor.getValue())) {
+    _checkHexEditor () {
+        if (isEmptyString(this.hexEditor.getValue())) {
             this.hexEditor.setValue("000000");
         }
-        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb("#" + this.hexEditor.getValue()));
+        const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
         this.storeValue = {
             r: json.r || 0,
             g: json.g || 0,
@@ -162,24 +162,22 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
         this.R.setValue(this.storeValue.r);
         this.G.setValue(this.storeValue.g);
         this.B.setValue(this.storeValue.b);
-    },
+    }
 
-    setValue: function (color) {
+    setValue (color) {
         this.colorShow.element.css({ "background-color": color });
-        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
-        this.R.setValue(BI.isNull(json.r) ? "" : json.r);
-        this.G.setValue(BI.isNull(json.g) ? "" : json.g);
-        this.B.setValue(BI.isNull(json.b) ? "" : json.b);
-        this.hexEditor.setValue(BI.isEmptyObject(json) ? "" : color.slice(this.constants.HEX_PREFIX_POSITION));
-    },
+        const json = DOM.rgb2json(DOM.hex2rgb(color));
+        this.R.setValue(isNull(json.r) ? "" : json.r);
+        this.G.setValue(isNull(json.g) ? "" : json.g);
+        this.B.setValue(isNull(json.b) ? "" : json.b);
+        this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION));
+    }
 
-    getValue: function () {
-        return BI.DOM.rgb2hex(BI.DOM.json2rgb({
+    getValue () {
+        return DOM.rgb2hex(DOM.json2rgb({
             r: this.R.getValue(),
             g: this.G.getValue(),
-            b: this.B.getValue()
+            b: this.B.getValue(),
         }));
     }
-});
-BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor);
+}

src/case/colorchooser/colorpicker/editor.colorpicker.js

@@ -1,60 +1,62 @@
+import { shortcut, Widget, extend, createWidgets, createItems, createWidget, each, isEmptyString, isNumeric, isNull, DOM } from "@/core";
+import { IconButton } from "@/base";
+
+const RGB_WIDTH = 32;
+
 /**
  * 简单选色控件
  *
  * Created by GUY on 2015/11/16.
- * @class BI.ColorPickerEditor
- * @extends BI.Widget
+ * @class ColorPickerEditor
+ * @extends Widget
  */
-BI.ColorPickerEditor = BI.inherit(BI.Widget, {
+@shortcut()
+export class ColorPickerEditor extends Widget {
+    static xtype = "bi.color_picker_editor";
 
-    constants: {
-        RGB_WIDTH: 32
-    },
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig () {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-color-picker-editor",
             // width: 200,
-            height: 30
+            height: 30,
         });
-    },
+    }
 
-    _init: function () {
-        BI.ColorPickerEditor.superclass._init.apply(this, arguments);
-        var self = this, o = this.options, c = this.constants;
+    _init () {
+        super._init(...arguments);
         this.storeValue = {};
-        this.colorShow = BI.createWidget({
+        this.colorShow = createWidget({
             type: "bi.layout",
             cls: "color-picker-editor-display bi-card bi-border",
             height: 16,
-            width: 16
+            width: 16,
         });
-        var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
+        const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
             type: "bi.label",
             cls: "color-picker-editor-label",
             width: 20,
-            height: 20
+            height: 20,
         }));
 
-        var checker = function (v) {
-            return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
-        };
-        var Ws = BI.createWidgets([{}, {}, {}], {
+        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const Ws = createWidgets([{}, {}, {}], {
             type: "bi.small_text_editor",
             cls: "color-picker-editor-input bi-border-radius",
             validationChecker: checker,
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: c.RGB_WIDTH,
-            height: 20
+            width: RGB_WIDTH,
+            height: 20,
         });
-        BI.each(Ws, function (i, w) {
-            w.on(BI.TextEditor.EVENT_CHANGE, function () {
-                self._checkEditors();
-                if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
-                    self.colorShow.element.css("background-color", self.getValue());
-                    self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+        each(Ws, (i, w) => {
+            w.on(BI.TextEditor.EVENT_CHANGE, () => {
+                this._checkEditors();
+                if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
+                    this.colorShow.element.css("background-color", this.getValue());
+                    this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                 }
             });
         });
@@ -62,37 +64,37 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.G = Ws[1];
         this.B = Ws[2];
 
-        this.none = BI.createWidget({
+        this.none = createWidget({
             type: "bi.icon_button",
             cls: "auto-color-icon",
             width: 16,
             height: 16,
             iconWidth: 16,
             iconHeight: 16,
-            title: BI.i18nText("BI-Basic_Auto")
+            title: BI.i18nText("BI-Basic_Auto"),
         });
-        this.none.on(BI.IconButton.EVENT_CHANGE, function () {
-            var value = self.getValue();
-            self.setValue("");
-            (value !== "") && self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+        this.none.on(IconButton.EVENT_CHANGE, () => {
+            const value = this.getValue();
+            this.setValue("");
+            (value !== "") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
         });
 
-        this.transparent = BI.createWidget({
+        this.transparent = createWidget({
             type: "bi.icon_button",
             cls: "trans-color-icon",
             width: 16,
             height: 16,
             iconWidth: 16,
             iconHeight: 16,
-            title: BI.i18nText("BI-Transparent_Color")
+            title: BI.i18nText("BI-Transparent_Color"),
         });
-        this.transparent.on(BI.IconButton.EVENT_CHANGE, function () {
-            var value = self.getValue();
-            self.setValue("transparent");
-            (value !== "transparent") && self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+        this.transparent.on(IconButton.EVENT_CHANGE, () => {
+            const value = this.getValue();
+            this.setValue("transparent");
+            (value !== "transparent") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
             items: [
@@ -102,67 +104,67 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
                         items: [
                             {
                                 el: this.colorShow,
-                                width: 16
+                                width: 16,
                             }, {
                                 el: RGB[0],
-                                width: 20
+                                width: 20,
                             }, {
                                 el: this.R,
-                                width: c.RGB_WIDTH
+                                width: RGB_WIDTH,
                             }, {
                                 el: RGB[1],
-                                width: 20
+                                width: 20,
                             }, {
                                 el: this.G,
-                                width: c.RGB_WIDTH
+                                width: RGB_WIDTH,
                             }, {
                                 el: RGB[2],
-                                width: 20
+                                width: 20,
                             }, {
                                 el: this.B,
-                                width: c.RGB_WIDTH
+                                width: RGB_WIDTH,
                             }, {
                                 el: this.transparent,
                                 width: 16,
-                                lgap: 5
+                                lgap: 5,
                             }, {
                                 el: this.none,
                                 width: 16,
-                                lgap: 5
+                                lgap: 5,
                             }
-                        ]
+                        ],
                     },
                     left: 10,
                     right: 10,
                     top: 0,
-                    bottom: 0
+                    bottom: 0,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _checkEditors: function () {
-        if (BI.isEmptyString(this.R.getValue())) {
+    _checkEditors () {
+        if (isEmptyString(this.R.getValue())) {
             this.R.setValue(0);
         }
-        if (BI.isEmptyString(this.G.getValue())) {
+        if (isEmptyString(this.G.getValue())) {
             this.G.setValue(0);
         }
-        if (BI.isEmptyString(this.B.getValue())) {
+        if (isEmptyString(this.B.getValue())) {
             this.B.setValue(0);
         }
         this.storeValue = {
             r: this.R.getValue() || 0,
             g: this.G.getValue() || 0,
-            b: this.B.getValue() || 0
+            b: this.B.getValue() || 0,
         };
-    },
+    }
 
-    _isEmptyRGB: function () {
-        return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b);
-    },
+    _isEmptyRGB () {
+        return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b);
+    }
 
-    _showPreColor: function (color) {
+    _showPreColor (color) {
         if (color === "") {
             this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background");
         } else if (color === "transparent") {
@@ -170,18 +172,18 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         } else {
             this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background");
         }
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.ColorPickerEditor.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 (color) {
+    setValue (color) {
         if (color === "transparent") {
             this.transparent.setSelected(true);
             this.none.setSelected(false);
@@ -192,8 +194,9 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             this.storeValue = {
                 r: "",
                 g: "",
-                b: ""
+                b: "",
             };
+            
             return;
         }
         if (!color) {
@@ -204,27 +207,26 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         }
         this.transparent.setSelected(false);
         this._showPreColor(color);
-        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
+        const json = DOM.rgb2json(DOM.hex2rgb(color));
         this.storeValue = {
-            r: BI.isNull(json.r) ? "" : json.r,
-            g: BI.isNull(json.g) ? "" : json.g,
-            b: BI.isNull(json.b) ? "" : json.b
+            r: isNull(json.r) ? "" : json.r,
+            g: isNull(json.g) ? "" : json.g,
+            b: isNull(json.b) ? "" : json.b,
         };
         this.R.setValue(this.storeValue.r);
         this.G.setValue(this.storeValue.g);
         this.B.setValue(this.storeValue.b);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         if (this._isEmptyRGB() && this.transparent.isSelected()) {
             return "transparent";
         }
-        return BI.DOM.rgb2hex(BI.DOM.json2rgb({
+        
+        return DOM.rgb2hex(DOM.json2rgb({
             r: this.storeValue.r,
             g: this.storeValue.g,
-            b: this.storeValue.b
+            b: this.storeValue.b,
         }));
     }
-});
-BI.ColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor);
+}

src/case/colorchooser/colorpicker/editor.colorpicker.simple.js

@@ -1,59 +1,60 @@
+import { shortcut, Widget, extend, isNull, createWidget, isNumeric, createItems, createWidgets, each, isEmptyString, DOM } from "@/core";
+
+const RGB_WIDTH = 32;
+
 /**
  * 简单选色控件
  *
  * Created by GUY on 2015/11/16.
- * @class BI.SimpleColorPickerEditor
- * @extends BI.Widget
+ * @class SimpleColorPickerEditor
+ * @extends Widget
  */
-BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
+@shortcut()
+export class SimpleColorPickerEditor extends Widget {
+    static xtype = "bi.simple_color_picker_editor";
 
-    constants: {
-        RGB_WIDTH: 32
-    },
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SimpleColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-color-picker-editor",
             // width: 200,
-            height: 30
+            height: 30,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SimpleColorPickerEditor.superclass._init.apply(this, arguments);
-        var self = this, o = this.options, c = this.constants;
-        this.colorShow = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        this.colorShow = createWidget({
             type: "bi.layout",
             cls: "color-picker-editor-display bi-card bi-border",
             height: 16,
-            width: 16
+            width: 16,
         });
-        var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
+        const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
             type: "bi.label",
             cls: "color-picker-editor-label",
             width: 20,
-            height: 20
+            height: 20,
         }));
 
-        var checker = function (v) {
-            return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
-        };
-        var Ws = BI.createWidgets([{}, {}, {}], {
+        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const Ws = createWidgets([{}, {}, {}], {
             type: "bi.small_text_editor",
             cls: "color-picker-editor-input bi-border-radius",
             validationChecker: checker,
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: c.RGB_WIDTH,
-            height: 20
+            width: RGB_WIDTH,
+            height: 20,
         });
-        BI.each(Ws, function (i, w) {
-            w.on(BI.TextEditor.EVENT_CHANGE, function () {
-                self._checkEditors();
-                if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
-                    self.colorShow.element.css("background-color", self.getValue());
-                    self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
+        each(Ws, (i, w) => {
+            w.on(BI.TextEditor.EVENT_CHANGE, () => {
+                this._checkEditors();
+                if (this.R.isValid() && this.G.isValid() && this.B.isValid()) {
+                    this.colorShow.element.css("background-color", this.getValue());
+                    this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE);
                 }
             });
         });
@@ -61,7 +62,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
         this.G = Ws[1];
         this.B = Ws[2];
 
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical_adapt",
             element: this,
             items: [
@@ -69,57 +70,55 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
                     el: this.colorShow,
                     width: 16,
                     lgap: 20,
-                    rgap: 15
+                    rgap: 15,
                 }, {
                     el: RGB[0],
-                    width: 20
+                    width: 20,
                 }, {
                     el: this.R,
-                    width: c.RGB_WIDTH
+                    width: RGB_WIDTH,
                 }, {
                     el: RGB[1],
-                    width: 20
+                    width: 20,
                 }, {
                     el: this.G,
-                    width: c.RGB_WIDTH
+                    width: RGB_WIDTH,
                 }, {
                     el: RGB[2],
-                    width: 20
+                    width: 20,
                 }, {
                     el: this.B,
-                    width: c.RGB_WIDTH
+                    width: RGB_WIDTH,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _checkEditors: function () {
-        if (BI.isEmptyString(this.R.getValue())) {
+    _checkEditors() {
+        if (isEmptyString(this.R.getValue())) {
             this.R.setValue(0);
         }
-        if (BI.isEmptyString(this.G.getValue())) {
+        if (isEmptyString(this.G.getValue())) {
             this.G.setValue(0);
         }
-        if (BI.isEmptyString(this.B.getValue())) {
+        if (isEmptyString(this.B.getValue())) {
             this.B.setValue(0);
         }
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this.colorShow.element.css({ "background-color": color });
-        var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
-        this.R.setValue(BI.isNull(json.r) ? "" : json.r);
-        this.G.setValue(BI.isNull(json.g) ? "" : json.g);
-        this.B.setValue(BI.isNull(json.b) ? "" : json.b);
-    },
+        const json = DOM.rgb2json(DOM.hex2rgb(color));
+        this.R.setValue(isNull(json.r) ? "" : json.r);
+        this.G.setValue(isNull(json.g) ? "" : json.g);
+        this.B.setValue(isNull(json.b) ? "" : json.b);
+    }
 
-    getValue: function () {
-        return BI.DOM.rgb2hex(BI.DOM.json2rgb({
+    getValue() {
+        return DOM.rgb2hex(DOM.json2rgb({
             r: this.R.getValue(),
             g: this.G.getValue(),
-            b: this.B.getValue()
+            b: this.B.getValue(),
         }));
     }
-});
-BI.SimpleColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);
+}

src/case/colorchooser/colorpicker/index.js

@@ -0,0 +1,7 @@
+export { ColorPicker } from "./colorpicker";
+export { HexColorPicker } from "./colorpicker.hex";
+export { ColorPickerEditor } from "./editor.colorpicker";
+export { HexColorPickerEditor } from "./editor.colorpicker.hex";
+export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple";
+export { SimpleColorPickerEditor } from "./editor.colorpicker.simple";
+export * from "./button";

src/case/colorchooser/farbtastic/farbtastic.js

@@ -1,98 +1,101 @@
-BI.Farbtastic = BI.inherit(BI.BasicButton, {
+import { shortcut, isKey, DOM } from "@/core";
+import { BasicButton } from "@/base";
 
-    constants: {
-        RADIUS: 84,
-        SQUARE: 100,
-        WIDTH: 194
-    },
+const RADIUS = 84, SQUARE = 100, WIDTH = 194;
+
+@shortcut()
+export class Farbtastic extends BasicButton {
+    static xtype = "bi.farbtastic";
 
-    props: {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    props = {
         baseCls: "bi-farbtastic",
         width: 195,
         height: 195,
         stopPropagation: true,
-        value: "#000000"
-    },
+        value: "#000000",
+    }
 
-    render: function () {
-        var self = this;
+    render() {
         this._defaultState();
+        
         return {
             type: "bi.absolute",
             items: [{
                 el: {
                     type: "bi.layout",
                     cls: "",
-                    ref: function (_ref) {
-                        self.colorWrapper = _ref;
-                    }
+                    ref: _ref => {
+                        this.colorWrapper = _ref;
+                    },
                 },
                 top: 47,
                 left: 47,
                 width: 101,
-                height: 101
+                height: 101,
             }, {
                 el: {
                     type: "bi.layout",
                     cls: "wheel",
-                    ref: function (_ref) {
-                        self.wheel = _ref;
-                    }
+                    ref: _ref => {
+                        this.wheel = _ref;
+                    },
                 },
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
             }, {
                 el: {
                     type: "bi.layout",
                     cls: "overlay",
-                    ref: function (_ref) {
-                        self.overlay = _ref;
-                    }
+                    ref: _ref => {
+                        this.overlay = _ref;
+                    },
                 },
                 top: 47,
                 left: 47,
                 width: 101,
-                height: 101
+                height: 101,
             }, {
                 el: {
                     type: "bi.layout",
                     cls: "marker",
-                    ref: function (_ref) {
-                        self.hMarker = _ref;
+                    ref: _ref => {
+                        this.hMarker = _ref;
                     },
                     scrollable: false,
                     width: 17,
-                    height: 17
-                }
+                    height: 17,
+                },
             }, {
                 el: {
                     type: "bi.layout",
                     cls: "marker",
-                    ref: function (_ref) {
-                        self.slMarker = _ref;
+                    ref: _ref => {
+                        this.slMarker = _ref;
                     },
                     scrollable: false,
                     width: 17,
-                    height: 17
-                }
-            }]
-        };
+                    height: 17,
                 },
+            }],
+        };
+    }
 
-    created: function () {
-        var o = this.options;
-        if (BI.isKey(o.value)) {
+    created() {
+        const o = this.options;
+        if (isKey(o.value)) {
             this.setValue(o.value);
         }
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this.hsl = [0, 0, 0];
-    },
+    }
 
-    _unpack: function (color) {
+    _unpack(color) {
         if (color.length === 7) {
             return [parseInt("0x" + color.substring(1, 3)) / 255,
                 parseInt("0x" + color.substring(3, 5)) / 255,
@@ -102,81 +105,84 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, {
                 parseInt("0x" + color.substring(2, 3)) / 15,
                 parseInt("0x" + color.substring(3, 4)) / 15];
         }
-    },
+    }
+
+    _pack(rgb) {
+        const r = Math.round(rgb[0] * 255);
+        const g = Math.round(rgb[1] * 255);
+        const b = Math.round(rgb[2] * 255);
         
-    _pack: function (rgb) {
-        var r = Math.round(rgb[0] * 255);
-        var g = Math.round(rgb[1] * 255);
-        var b = Math.round(rgb[2] * 255);
         return "#" + (r < 16 ? "0" : "") + r.toString(16) +
         (g < 16 ? "0" : "") + g.toString(16) +
         (b < 16 ? "0" : "") + b.toString(16);
-    },
+    }
 
-    _setColor: function (color) {
-        var unpack = this._unpack(color);
+    _setColor(color) {
+        const unpack = this._unpack(color);
         if (this.value !== color && unpack) {
             this.value = color;
             this.rgb = unpack;
             this.hsl = this._RGBToHSL(this.rgb);
             this._updateDisplay();
         }
-    },
+    }
 
-    _setHSL: function (hsl) {
+    _setHSL(hsl) {
         this.hsl = hsl;
         this.rgb = this._HSLToRGB(hsl);
         this.value = this._pack(this.rgb);
         this._updateDisplay();
+        
         return this;
-    },
+    }
 
-    _HSLToRGB: function (hsl) {
-        return BI.DOM.hsl2rgb(hsl);
-    },
+    _HSLToRGB(hsl) {
+        return DOM.hsl2rgb(hsl);
+    }
 
-    _RGBToHSL: function (rgb) {
-        return BI.DOM.rgb2hsl(rgb);
-    },
+    _RGBToHSL(rgb) {
+        return DOM.rgb2hsl(rgb);
+    }
 
-    _updateDisplay: function () {
-        var angle = this.hsl[0] * 6.28;
+    _updateDisplay() {
+        const angle = this.hsl[0] * 6.28;
         this.hMarker.element.css({
-            left: Math.round(Math.sin(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px",
-            top: Math.round(-Math.cos(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px"
+            left: `${Math.round(Math.sin(angle) * RADIUS + WIDTH / 2)}px`,
+            top: `${Math.round(-Math.cos(angle) * RADIUS + WIDTH / 2)}px`,
         });
 
         this.slMarker.element.css({
-            left: Math.round(this.constants.SQUARE * (.5 - this.hsl[1]) + this.constants.WIDTH / 2) + "px",
-            top: Math.round(this.constants.SQUARE * (.5 - this.hsl[2]) + this.constants.WIDTH / 2) + "px"
+            left: `${Math.round(SQUARE * (.5 - this.hsl[1]) + WIDTH / 2)}px`,
+            top: `${Math.round(SQUARE * (.5 - this.hsl[2]) + WIDTH / 2)}px`,
         });
 
         // Saturation/Luminance gradient
         this.colorWrapper.element.css("backgroundColor", this._pack(this._HSLToRGB([this.hsl[0], 1, 0.5])));
-    },
+    }
 
-    _absolutePosition: function (el) {
-        var r = {x: el.offsetLeft, y: el.offsetTop};
+    _absolutePosition(el) {
+        const r = { x: el.offsetLeft, y: el.offsetTop };
         // Resolve relative to offsetParent
         if (el.offsetParent) {
-            var tmp = this._absolutePosition(el.offsetParent);
+            const tmp = this._absolutePosition(el.offsetParent);
             r.x += tmp.x;
             r.y += tmp.y;
         }
+        
         return r;
-    },
+    }
 
-    _widgetCoords: function (event) {
-        var x, y;
-        var el = event.target || event.srcElement;
-        var reference = this.wheel.element[0];
+    _widgetCoords(event) {
+        let x, y;
+        const el = event.target || event.srcElement;
+        const reference = this.wheel.element[0];
 
         if (typeof event.offsetX !== "undefined") {
             // Use offset coordinates and find common offsetParent
-            var pos = {x: event.offsetX, y: event.offsetY};
+            const pos = { x: event.offsetX, y: event.offsetY };
 
             // Send the coordinates upwards through the offsetParent chain.
-            var e = el;
+            let e = el;
             while (e) {
                 e.mouseX = pos.x;
                 e.mouseY = pos.y;
@@ -186,8 +192,8 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, {
             }
 
             // Look for the coordinates starting from the wheel widget.
-            var e = reference;
-            var offset = {x: 0, y: 0};
+            e = reference;
+            const offset = { x: 0, y: 0 };
             while (e) {
                 if (typeof e.mouseX !== "undefined") {
                     x = e.mouseX - offset.x;
@@ -208,46 +214,46 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, {
             }
         } else {
             // Use absolute coordinates
-            var pos = this._absolutePosition(reference);
+            const pos = this._absolutePosition(reference);
             x = (event.pageX || 0) - pos.x;
             y = (event.pageY || 0) - pos.y;
         }
+        
         // Subtract distance to middle
-        return {x: x - this.constants.WIDTH / 2, y: y - this.constants.WIDTH / 2};
-    },
+        return { x: x - WIDTH / 2, y: y - WIDTH / 2 };
+    }
 
-    _doMouseMove: function (event) {
-        var pos = this._widgetCoords(event);
+    _doMouseMove(event) {
+        const pos = this._widgetCoords(event);
 
         // Set new HSL parameters
         if (this.circleDrag) {
-            var hue = Math.atan2(pos.x, -pos.y) / 6.28;
+            let hue = Math.atan2(pos.x, -pos.y) / 6.28;
             if (hue < 0) hue += 1;
             this._setHSL([hue, this.hsl[1], this.hsl[2]]);
         } else {
-            var sat = Math.max(0, Math.min(1, -(pos.x / this.constants.SQUARE) + .5));
-            var lum = Math.max(0, Math.min(1, -(pos.y / this.constants.SQUARE) + .5));
+            const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + .5));
+            const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + .5));
             this._setHSL([this.hsl[0], sat, lum]);
         }
-        this.fireEvent(BI.Farbtastic.EVENT_CHANGE, this.getValue(), this);
-    },
+        this.fireEvent(Farbtastic.EVENT_CHANGE, this.getValue(), this);
+    }
 
-    doClick: function (event) {
-        var pos = this._widgetCoords(event);
-        this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > this.constants.SQUARE;
+    doClick(event) {
+        const pos = this._widgetCoords(event);
+        this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > SQUARE;
 
         // Process
         this._doMouseMove(event);
+        
         return false;
-    },
+    }
 
-    setValue: function (color) {
+    setValue(color) {
         this._setColor(color);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.value;
     }
-});
-BI.Farbtastic.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.farbtastic", BI.Farbtastic);
+}

src/case/colorchooser/index.js

@@ -0,0 +1,11 @@
+export { ColorChooser } from "./colorchooser";
+export { CustomColorChooser } from "./colorchooser.custom";
+export { ColorChooserPopup } from "./colorchooser.popup";
+export { HexColorChooserPopup } from "./colorchooser.popup.hex";
+export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple";
+export { SimpleColorChooserPopup } from "./colorchooser.popup.simple";
+export { SimpleColorChooser } from "./colorchooser.simple";
+export { ColorChooserTrigger } from "./colorchooser.trigger";
+export { LongColorChooserTrigger } from "./colorchooser.trigger.long";
+export { Farbtastic } from "./farbtastic/farbtastic";
+export * from "./colorpicker";

src/case/index.js

@@ -10,6 +10,7 @@ import * as segment from "./segment";
 import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
 import * as layer from "./layer";
 import * as linearSegment from "./linearsegment";
+import * as colorchooser from "./colorchooser";
 import { SelectList } from "./list/list.select";
 import * as combo from "./combo";
 
@@ -27,6 +28,7 @@ Object.assign(BI, {
     MultiSelectBar,
     ...layer,
     ...linearSegment,
+    ...colorchooser,
     SelectList,
 });
 
@@ -44,6 +46,7 @@ export * from "./segment";
 export * from "./layer";
 export * from "./linearsegment";
 export * from "./checkbox";
+export * from "./colorchooser";
 export {
     MultiSelectBar,
     SelectList

src/case/layer/panel.js

@@ -50,8 +50,8 @@ export class Panel extends Widget {
             }],
         });
 
-        this.button_group.on(Controller.EVENT_CHANGE, () => {
-            this.fireEvent(Controller.EVENT_CHANGE, ...arguments);
+        this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
         this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {

src/case/list/list.select.js

@@ -55,13 +55,14 @@ export class SelectList extends Widget {
         // 全选
         this.toolbar = createWidget(o.toolbar);
         this.allSelected = false;
-        this.toolbar.on(Controller.EVENT_CHANGE, (type, value, obj) => {
+        this.toolbar.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, value, obj] = args;
             this.allSelected = this.toolbar.isSelected();
             if (type === Events.CLICK) {
                 this.setAllSelected(this.allSelected);
                 this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
             }
-            this.fireEvent(Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
         this.list = createWidget(o.el, {
@@ -84,12 +85,13 @@ export class SelectList extends Widget {
             hasNext: o.hasNext,
         });
 
-        this.list.on(Controller.EVENT_CHANGE, (type, value, obj) => {
+        this.list.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, value, obj] = args;
             if (type === Events.CLICK) {
                 this._checkAllSelected();
                 this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
             }
-            this.fireEvent(Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
         createWidget(extend({

src/core/1.lodash.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /**
  * @license
  * Lodash (Custom Build) <https://lodash.com/>
@@ -272,7 +273,8 @@
     var nodeUtil = (function () {
         try {
             return freeProcess && freeProcess.binding && freeProcess.binding('util');
-        } catch (e) {}
+        } catch (e) {
+        }
     }());
 
     /* Node.js helper references. */
@@ -296,10 +298,14 @@
      */
     function apply(func, thisArg, args) {
         switch (args.length) {
-            case 0: return func.call(thisArg);
-            case 1: return func.call(thisArg, args[0]);
-            case 2: return func.call(thisArg, args[0], args[1]);
-            case 3: return func.call(thisArg, args[0], args[1], args[2]);
+            case 0:
+                return func.call(thisArg);
+            case 1:
+                return func.call(thisArg, args[0]);
+            case 2:
+                return func.call(thisArg, args[0], args[1]);
+            case 3:
+                return func.call(thisArg, args[0], args[1], args[2]);
         }
         return func.apply(thisArg, args);
     }
@@ -745,7 +751,8 @@
         var index = -1,
             length = strSymbols.length;
 
-        while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}
+        while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
+        }
         return index;
     }
 
@@ -761,7 +768,8 @@
     function charsEndIndex(strSymbols, chrSymbols) {
         var index = strSymbols.length;
 
-        while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}
+        while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
+        }
         return index;
     }
 
@@ -1066,7 +1074,8 @@
             var func = getNative(Object, 'defineProperty');
             func({}, '', {});
             return func;
-        } catch (e) {}
+        } catch (e) {
+        }
     }());
 
     /* Built-in method references for those with the same name as other `lodash` methods. */
@@ -1248,7 +1257,9 @@
      * @returns {Object} Returns the new object.
      */
     var baseCreate = (function () {
-        function object() {}
+        function object() {
+        }
+
         return function (proto) {
             if (!isObject(proto)) {
                 return {};
@@ -2199,7 +2210,9 @@
         if (typeof func != 'function') {
             throw new TypeError(FUNC_ERROR_TEXT);
         }
-        return setTimeout(function() { func.apply(undefined, args); }, wait);
+        return setTimeout(function () {
+            func.apply(undefined, args);
+        }, wait);
     }
 
     /**
@@ -2230,8 +2243,7 @@
         if (comparator) {
             includes = arrayIncludesWith;
             isCommon = false;
-        }
-        else if (values.length >= LARGE_ARRAY_SIZE) {
+        } else if (values.length >= LARGE_ARRAY_SIZE) {
             includes = cacheHas;
             isCommon = false;
             values = new SetCache(values);
@@ -2250,8 +2262,7 @@
                         }
                     }
                     result.push(value);
-                }
-                else if (!includes(values, computed, comparator)) {
+                } else if (!includes(values, computed, comparator)) {
                     result.push(value);
                 }
             }
@@ -2991,8 +3002,7 @@
             if (isObject(srcValue)) {
                 stack || (stack = new Stack);
                 baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
-            }
-            else {
+            } else {
                 var newValue = customizer
                     ? customizer(safeGet(object, key), srcValue, (key + ''), object, source, stack)
                     : undefined;
@@ -3044,32 +3054,25 @@
             if (isArr || isBuff || isTyped) {
                 if (isArray(objValue)) {
                     newValue = objValue;
-                }
-                else if (isArrayLikeObject(objValue)) {
+                } else if (isArrayLikeObject(objValue)) {
                     newValue = copyArray(objValue);
-                }
-                else if (isBuff) {
+                } else if (isBuff) {
                     isCommon = false;
                     newValue = cloneBuffer(srcValue, true);
-                }
-                else if (isTyped) {
+                } else if (isTyped) {
                     isCommon = false;
                     newValue = cloneTypedArray(srcValue, true);
-                }
-                else {
+                } else {
                     newValue = [];
                 }
-            }
-            else if (isPlainObject(srcValue) || isArguments(srcValue)) {
+            } else if (isPlainObject(srcValue) || isArguments(srcValue)) {
                 newValue = objValue;
                 if (isArguments(objValue)) {
                     newValue = toPlainObject(objValue);
-                }
-                else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) {
+                } else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) {
                     newValue = initCloneObject(srcValue);
                 }
-            }
-            else {
+            } else {
                 isCommon = false;
             }
         }
@@ -3371,8 +3374,7 @@
         if (comparator) {
             isCommon = false;
             includes = arrayIncludesWith;
-        }
-        else if (length >= LARGE_ARRAY_SIZE) {
+        } else if (length >= LARGE_ARRAY_SIZE) {
             var set = iteratee ? null : createSet(array);
             if (set) {
                 return setToArray(set);
@@ -3380,8 +3382,7 @@
             isCommon = false;
             includes = cacheHas;
             seen = new SetCache;
-        }
-        else {
+        } else {
             seen = iteratee ? [] : result;
         }
         outer:
@@ -3401,8 +3402,7 @@
                         seen.push(computed);
                     }
                     result.push(value);
-                }
-                else if (!includes(seen, computed, comparator)) {
+                } else if (!includes(seen, computed, comparator)) {
                     if (seen !== result) {
                         seen.push(computed);
                     }
@@ -3942,6 +3942,7 @@
             var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;
             return fn.apply(isBind ? thisArg : this, arguments);
         }
+
         return wrapper;
     }
 
@@ -3960,14 +3961,22 @@
             // for more details.
             var args = arguments;
             switch (args.length) {
-                case 0: return new Ctor;
-                case 1: return new Ctor(args[0]);
-                case 2: return new Ctor(args[0], args[1]);
-                case 3: return new Ctor(args[0], args[1], args[2]);
-                case 4: return new Ctor(args[0], args[1], args[2], args[3]);
-                case 5: return new Ctor(args[0], args[1], args[2], args[3], args[4]);
-                case 6: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]);
-                case 7: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
+                case 0:
+                    return new Ctor;
+                case 1:
+                    return new Ctor(args[0]);
+                case 2:
+                    return new Ctor(args[0], args[1]);
+                case 3:
+                    return new Ctor(args[0], args[1], args[2]);
+                case 4:
+                    return new Ctor(args[0], args[1], args[2], args[3]);
+                case 5:
+                    return new Ctor(args[0], args[1], args[2], args[3], args[4]);
+                case 6:
+                    return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]);
+                case 7:
+                    return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
             }
             var thisBinding = baseCreate(Ctor.prototype),
                 result = Ctor.apply(thisBinding, args);
@@ -4012,6 +4021,7 @@
             var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;
             return apply(fn, this, args);
         }
+
         return wrapper;
     }
 
@@ -4028,7 +4038,9 @@
             if (!isArrayLike(collection)) {
                 var iteratee = baseIteratee(predicate, 3);
                 collection = keys(collection);
-                predicate = function(key) { return iteratee(iterable[key], key, iterable); };
+                predicate = function (key) {
+                    return iteratee(iterable[key], key, iterable);
+                };
             }
             var index = findIndexFunc(collection, predicate, fromIndex);
             return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
@@ -4105,6 +4117,7 @@
             }
             return fn.apply(thisBinding, args);
         }
+
         return wrapper;
     }
 
@@ -4154,6 +4167,7 @@
             }
             return apply(fn, isBind ? thisArg : this, args);
         }
+
         return wrapper;
     }
 
@@ -4727,7 +4741,8 @@
         try {
             value[symToStringTag] = undefined;
             var unmasked = true;
-        } catch (e) {}
+        } catch (e) {
+        }
 
         var result = nativeObjectToString.call(value);
         if (unmasked) {
@@ -4795,11 +4810,16 @@
 
             if (ctorString) {
                 switch (ctorString) {
-                    case dataViewCtorString: return dataViewTag;
-                    case mapCtorString: return mapTag;
-                    case promiseCtorString: return promiseTag;
-                    case setCtorString: return setTag;
-                    case weakMapCtorString: return weakMapTag;
+                    case dataViewCtorString:
+                        return dataViewTag;
+                    case mapCtorString:
+                        return mapTag;
+                    case promiseCtorString:
+                        return promiseTag;
+                    case setCtorString:
+                        return setTag;
+                    case weakMapCtorString:
+                        return weakMapTag;
                 }
             }
             return result;
@@ -4825,10 +4845,18 @@
                 size = data.size;
 
             switch (data.type) {
-                case 'drop':      start += size; break;
-                case 'dropRight': end -= size; break;
-                case 'take':      end = nativeMin(end, start + size); break;
-                case 'takeRight': start = nativeMax(start, end - size); break;
+                case 'drop':
+                    start += size;
+                    break;
+                case 'dropRight':
+                    end -= size;
+                    break;
+                case 'take':
+                    end = nativeMin(end, start + size);
+                    break;
+                case 'takeRight':
+                    start = nativeMax(start, end - size);
+                    break;
             }
         }
         return { 'start': start, 'end': end };
@@ -4934,9 +4962,15 @@
             case dataViewTag:
                 return cloneDataView(object, isDeep);
 
-            case float32Tag: case float64Tag:
-            case int8Tag: case int16Tag: case int32Tag:
-            case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag:
+            case float32Tag:
+            case float64Tag:
+            case int8Tag:
+            case int16Tag:
+            case int32Tag:
+            case uint8Tag:
+            case uint8ClampedTag:
+            case uint16Tag:
+            case uint32Tag:
                 return cloneTypedArray(object, isDeep);
 
             case mapTag:
@@ -5442,10 +5476,12 @@
         if (func != null) {
             try {
                 return funcToString.call(func);
-            } catch (e) {}
+            } catch (e) {
+            }
             try {
                 return (func + '');
-            } catch (e) {}
+            } catch (e) {
+            }
         }
         return '';
     }
@@ -5962,8 +5998,7 @@
         if (end && typeof end != 'number' && isIterateeCall(array, start, end)) {
             start = 0;
             end = length;
-        }
-        else {
+        } else {
             start = start == null ? 0 : toInteger(start);
             end = end === undefined ? length : toInteger(end);
         }
@@ -6318,7 +6353,9 @@
         var length = paths.length,
             start = length ? paths[0] : 0,
             value = this.__wrapped__,
-            interceptor = function(object) { return baseAt(object, paths); };
+            interceptor = function (object) {
+                return baseAt(object, paths);
+            };
 
         if (length > 1 || this.__actions__.length ||
             !(value instanceof LazyWrapper) || !isIndex(start)) {
@@ -7342,6 +7379,7 @@
             }
             return result;
         }
+
         debounced.cancel = cancel;
         debounced.flush = flush;
         return debounced;
@@ -7486,10 +7524,14 @@
         return function () {
             var args = arguments;
             switch (args.length) {
-                case 0: return !predicate.call(this);
-                case 1: return !predicate.call(this, args[0]);
-                case 2: return !predicate.call(this, args[0], args[1]);
-                case 3: return !predicate.call(this, args[0], args[1], args[2]);
+                case 0:
+                    return !predicate.call(this);
+                case 1:
+                    return !predicate.call(this, args[0]);
+                case 2:
+                    return !predicate.call(this, args[0], args[1]);
+                case 3:
+                    return !predicate.call(this, args[0], args[1], args[2]);
             }
             return !predicate.apply(this, args);
         };
@@ -7720,7 +7762,9 @@
      * _.isArguments([1, 2, 3]);
      * // => false
      */
-    var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
+    var isArguments = baseIsArguments(function () {
+        return arguments;
+    }()) ? baseIsArguments : function (value) {
         return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&
             !propertyIsEnumerable.call(value, 'callee');
     };
@@ -9399,8 +9443,7 @@
             if (typeof upper == 'boolean') {
                 floating = upper;
                 upper = undefined;
-            }
-            else if (typeof lower == 'boolean') {
+            } else if (typeof lower == 'boolean') {
                 floating = lower;
                 lower = undefined;
             }
@@ -9408,8 +9451,7 @@
         if (lower === undefined && upper === undefined) {
             lower = 0;
             upper = 1;
-        }
-        else {
+        } else {
             lower = toFinite(lower);
             if (upper === undefined) {
                 upper = lower;
@@ -10271,10 +10313,12 @@
         }
     });
 
-    realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [{
+    realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [
+        {
             'name': 'wrapper',
             'func': undefined
-    }];
+        }
+    ];
 
     // Add methods to `LazyWrapper`.
     LazyWrapper.prototype.clone = lazyClone;
@@ -10310,8 +10354,7 @@
         (freeModule.exports = lodash)._ = lodash;
         // Export for CommonJS support.
         freeExports._ = lodash;
-    }
-    else {
+    } else {
         // Export to the global object.
         BI._ = lodash;
     }

src/core/structure/queue.js

@@ -75,7 +75,7 @@ export class Queue {
     }
 
     fromArray(array) {
-        array.each(v => this.push(v));
+        array.forEach(v => this.push(v));
     }
 
     clear() {

src/core/wrapper/layout/flex/flex.vertical.js

@@ -12,7 +12,6 @@ import { Layout } from "../../layout";
 @shortcut()
 export class FlexVerticalLayout extends Layout {
     static xtype = "bi.flex_vertical";
-
     props() {
         return extend(super.props(...arguments), {
             baseCls: "bi-f-v",

src/widget/downlist/combo.downlist.js

@@ -1,37 +1,45 @@
-(function() {
+import { shortcut, Widget, extend, createWidget, cloneDeep, some, isArray, each } from "@/core";
+import { DownListPopup } from "./popup.downlist";
+import { Combo } from "@/base";
+import { IconTrigger } from "@/case";
+
+
 function transformItems(items) {
     if (!items) return items;
-        var result = BI.cloneDeep(items);
-        var isComplexItmes = BI.some(items, function (_, item) {
-            return BI.isArray(item);
-        });
+    let result = cloneDeep(items);
+    const isComplexItmes = some(items, (_, item) => isArray(item));
     // 传一维数组，帮转二维
     if (!isComplexItmes) {
         result = [result];
     }
     // 帮转 el
-        BI.each(result, function (_, arr) {
-            BI.each(arr, function (_, item) {
+    each(result, (_, arr) => {
+        each(arr, (_, item) => {
             if (item.children && !item.el) {
                 item.el = {
                     text: item.text,
                     icon: item.icon,
                     cls: item.cls,
                     iconCls1: item.iconCls1,
-                        value: item.value
+                    value: item.value,
                 };
             }
         });
     });
+    
     return result;
 }
 
-    /**
-     * Created by roy on 15/8/14.
-     */
-    BI.DownListCombo = BI.inherit(BI.Widget, {
-        _defaultConfig: function () {
-            return BI.extend(BI.DownListCombo.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class DownListCombo extends Widget {
+    static xtype = "bi.down_list_combo";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-down-list-combo",
             height: 24,
             items: [],
@@ -47,15 +55,15 @@
             destroyWhenHide: false,
             isDefaultInit: true,
         });
-        },
+    }
 
-        _init: function () {
-            BI.DownListCombo.superclass._init.apply(this, arguments);
-            var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
 
-            this.downlistcombo = BI.createWidget({
+        this.downlistcombo = createWidget({
             element: this,
-                type: "bi.combo",
+            type: Combo.xtype,
             trigger: o.trigger,
             isNeedAdjustWidth: false,
             isDefaultInit: o.isDefaultInit,
@@ -66,78 +74,82 @@
             stopPropagation: o.stopPropagation,
             destroyWhenHide: o.destroyWhenHide,
             el: {
-                    type: "bi.icon_trigger",
+                type: IconTrigger.xtype,
                 extraCls: o.iconCls,
                 width: o.width,
                 height: o.height,
-                    ...o.el
+                ...o.el,
             },
             popup: {
                 el: {
-                        type: "bi.down_list_popup",
-                        ref: function (ref) {
-                            self.popupView = ref;
+                    type: DownListPopup.xtype,
+                    ref: _ref => {
+                        this.popupView = _ref;
                     },
                     items: transformItems(o.items),
                     chooseType: o.chooseType,
                     value: o.value,
-                        listeners: [{
-                            eventName: BI.DownListPopup.EVENT_CHANGE,
-                            action: function (value) {
-                                self.fireEvent(BI.DownListCombo.EVENT_CHANGE, value);
-                                self.downlistcombo.hideView();
-                            }
-                        }, {
-                            eventName: BI.DownListPopup.EVENT_SON_VALUE_CHANGE,
-                            action: function (value, fatherValue) {
-                                self.fireEvent(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue);
-                                self.downlistcombo.hideView();
+                    listeners: [
+                        {
+                            eventName: DownListPopup.EVENT_CHANGE,
+                            action: value => {
+                                this.fireEvent(
+                                    DownListCombo.EVENT_CHANGE,
+                                    value
+                                );
+                                this.downlistcombo.hideView();
+                            },
+                        },
+                        {
+                            eventName: DownListPopup.EVENT_SON_VALUE_CHANGE,
+                            action: (value, fatherValue) => {
+                                this.fireEvent(
+                                    DownListCombo.EVENT_SON_VALUE_CHANGE,
+                                    value,
+                                    fatherValue
+                                );
+                                this.downlistcombo.hideView();
+                            },
                         }
-                        }]
+                    ],
                 },
                 stopPropagation: o.stopPropagation,
                 maxHeight: o.maxHeight,
                 minWidth: o.minWidth,
-                    ...o.popup
-                }
+                ...o.popup,
+            },
         });
 
-            this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
-                self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW);
+        this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW);
         });
-        },
+    }
 
-        hideView: function () {
+    hideView() {
         this.downlistcombo.hideView();
-        },
+    }
 
-        showView: function (e) {
+    showView(e) {
         this.downlistcombo.showView(e);
-        },
+    }
 
-        populate: function (items) {
+    populate(items) {
         this.popupView.populate(items);
-        },
+    }
 
-        setValue: function (v) {
+    setValue(v) {
         this.popupView.setValue(v);
-        },
+    }
 
-        getValue: function () {
+    getValue() {
         return this.popupView.getValue();
-        },
+    }
 
-        adjustWidth: function () {
+    adjustWidth() {
         this.downlistcombo.adjustWidth();
-        },
+    }
 
-        adjustHeight: function () {
+    adjustHeight() {
         this.downlistcombo.adjustHeight();
     }
-    });
-    BI.DownListCombo.EVENT_CHANGE = "EVENT_CHANGE";
-    BI.DownListCombo.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
-    BI.DownListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-
-    BI.shortcut("bi.down_list_combo", BI.DownListCombo);
-}());
+}

src/widget/downlist/group.downlist.js

@@ -1,51 +1,62 @@
-/**
- * Created by roy on 15/9/6.
- */
-BI.DownListGroup = BI.inherit(BI.Widget, {
-    constants: {
-        iconCls: "check-mark-ha-font"
-    },
-    _defaultConfig: function () {
-        return BI.extend(BI.DownListGroup.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    createWidget,
+    Controller,
+    Events
+} from "@/core";
+
+@shortcut()
+export class DownListGroup extends Widget {
+  static xtype = "bi.down_list_group";
+
+  constants = { iconCls: "check-mark-ha-font" };
+
+  static EVENT_CHANGE = "EVENT_CHANGE";
+
+  _defaultConfig() {
+      return extend(super._defaultConfig(...arguments), {
           baseCls: "bi-down-list-group",
           items: [
               {
-                    el: {}
+                  el: {},
               }
-            ]
+          ],
       });
-    },
-    _init: function () {
-        BI.DownListGroup.superclass._init.apply(this, arguments);
-        var o = this.options, self = this;
+  }
+
+  _init() {
+      super._init(...arguments);
+      const o = this.options;
 
-        this.downlistgroup = BI.createWidget({
+      this.downlistgroup = createWidget({
           element: this,
           type: "bi.button_tree",
           items: o.items,
           chooseType: 0, // 0单选，1多选
-            layouts: [{
+          layouts: [
+              {
                   type: "bi.vertical",
                   hgap: 0,
-                vgap: 0
-            }],
-            value: o.value
+                  vgap: 0,
+              }
+          ],
+          value: o.value,
       });
-        this.downlistgroup.on(BI.Controller.EVENT_CHANGE, function (type) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if(type === BI.Events.CLICK) {
-                self.fireEvent(BI.DownListGroup.EVENT_CHANGE, arguments);
+      this.downlistgroup.on(Controller.EVENT_CHANGE, (type, ...args) => {
+          this.fireEvent(Controller.EVENT_CHANGE, type, ...args);
+          if (type === Events.CLICK) {
+              this.fireEvent(DownListGroup.EVENT_CHANGE, type, ...args);
           }
       });
-    },
-    getValue: function () {
-        return this.downlistgroup.getValue();
-    },
-    setValue: function (v) {
-        this.downlistgroup.setValue(v);
   }
 
+  getValue() {
+      return this.downlistgroup.getValue();
+  }
 
-});
-BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.down_list_group", BI.DownListGroup);
+  setValue(v) {
+      this.downlistgroup.setValue(v);
+  }
+}

src/widget/downlist/index.js

@@ -0,0 +1,5 @@
+export { DownListGroup } from "./group.downlist";
+export { DownListItem } from "./item.downlist";
+export { DownListGroupItem } from "./item.downlistgroup";
+export { DownListPopup } from "./popup.downlist";
+export { DownListCombo } from "./combo.downlist";

src/widget/downlist/item.downlist.js

@@ -1,12 +1,21 @@
-BI.DownListItem = BI.inherit(BI.BasicButton, {
-    _defaultConfig: function () {
-        var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
+import { shortcut, extend, createWidget, isPlainObject, LogicFactory, Direction } from "@/core";
+import { BasicButton } from "@/base";
+
+@shortcut()
+export class DownListItem extends BasicButton {
+  static xtype = "bi.down_list_item";
+
+  static EVENT_CHANGE = "EVENT_CHANGE";
+
+  _defaultConfig() {
+      const conf = super._defaultConfig(...arguments);
+      
+      return extend(conf, {
           baseCls: "bi-down-list-item bi-list-item-active",
           cls: "",
           height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
           logic: {
-                dynamic: true
+              dynamic: true,
           },
           selected: false,
           iconHeight: null,
@@ -14,13 +23,14 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
           textHgap: 0,
           textVgap: 0,
           textLgap: 0,
-            textRgap: 0
+          textRgap: 0,
       });
-    },
-    _init: function () {
-        BI.DownListItem.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.text = BI.createWidget({
+  }
+
+  _init() {
+      super._init(...arguments);
+      const o = this.options;
+      this.text = createWidget({
           type: "bi.label",
           cls: "list-item-text",
           textAlign: "left",
@@ -31,72 +41,85 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
           text: o.text,
           value: o.value,
           keyword: o.keyword,
-            height: o.height
+          height: o.height,
       });
 
-
-        var icon = BI.isPlainObject(o.icon) ? o.icon : {
+      const icon = isPlainObject(o.icon)
+          ? o.icon
+          : {
               type: "bi.icon",
               width: o.iconWidth,
               height: o.iconHeight,
-        }
+          };
 
-        this.icon = BI.createWidget({
+      this.icon = createWidget({
           type: "bi.center_adapt",
           width: 36,
           height: o.height,
-            items: [{
+          items: [
+              {
                   el: icon,
-            }],
+              }
+          ],
       });
 
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left), BI.extend(o.logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, this.icon, this.text)
-        }))));
+      createWidget(
+          extend(
+              {
+                  element: this,
               },
+              LogicFactory.createLogic(
+                  LogicFactory.createLogicTypeByDirection(Direction.Left),
+                  extend(o.logic, {
+                      items: LogicFactory.createLogicItemsByDirection(
+                          Direction.Left,
+                          this.icon,
+                          this.text
+                      ),
+                  })
+              )
+          )
+      );
+  }
 
-    setValue: function () {
+  setValue() {
       if (!this.isReadOnly()) {
-            this.text.setValue.apply(this.text, arguments);
+          this.text.setValue(...arguments);
+      }
   }
-    },
 
-    getValue: function () {
+  getValue() {
       return this.text.getValue();
-    },
+  }
 
-    setText: function () {
-        this.text.setText.apply(this.text, arguments);
-    },
+  setText() {
+      this.text.setText(...arguments);
+  }
 
-    getText: function () {
+  getText() {
       return this.text.getText();
-    },
+  }
 
-    doClick: function () {
-        BI.DownListItem.superclass.doClick.apply(this, arguments);
+  doClick() {
+      super.doClick(...arguments);
       if (this.isValid()) {
-            this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this);
+          this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this);
+      }
   }
-    },
 
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+  doRedMark() {
+      this.text.doRedMark(...arguments);
+  }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+  unRedMark() {
+      this.text.unRedMark(...arguments);
+  }
 
-    doHighLight: function () {
-        this.text.doHighLight.apply(this.text, arguments);
-    },
+  doHighLight() {
+      this.text.doHighLight(...arguments);
+  }
 
-    unHighLight: function () {
-        this.text.unHighLight.apply(this.text, arguments);
+  unHighLight() {
+      this.text.unHighLight(...arguments);
+  }
 }
-});
-BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.down_list_item", BI.DownListItem);

src/widget/downlist/item.downlistgroup.js

@@ -1,21 +1,41 @@
-BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
-    _defaultConfig: function () {
-        var conf = BI.DownListGroupItem.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-down-list-group-item",
+import {
+    shortcut,
+    extend,
+    createWidget,
+    isNotNull,
+    isArray,
+    any,
+    contains,
+    isPlainObject,
+    first,
+    BlankSplitChar
+} from "@/core";
+import { BasicButton } from "@/base";
+
+@shortcut()
+export class DownListGroupItem extends BasicButton {
+  static xtype = "bi.down_list_group_item";
+
+  static EVENT_CHANGE = "EVENT_CHANGE";
+
+  _defaultConfig() {
+      const conf = super._defaultConfig(...arguments);
+      
+      return extend(conf, {
+          baseCls: `${conf.baseCls || ""} bi-down-list-group-item`,
           logic: {
-                dynamic: false
+              dynamic: false,
           },
           // invalid: true,
           iconCls1: "dot-e-font",
           icon: "",
-            iconCls2: "pull-right-e-font"
+          iconCls2: "pull-right-e-font",
       });
-    },
-    render: function () {
-        var o = this.options;
-        var self = this;
-        this.text = BI.createWidget({
+  }
+
+  render() {
+      const o = this.options;
+      this.text = createWidget({
           type: "bi.label",
           cls: "list-group-item-text",
           textAlign: "left",
@@ -24,15 +44,15 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
           height: o.height,
       });
 
-        if (BI.isPlainObject(o.icon)) {
-            this.icon1 = BI.createWidget({
+      if (isPlainObject(o.icon)) {
+          this.icon1 = createWidget({
               width: 36,
               height: o.height,
               type: "bi.center_adapt",
               items: [o.icon],
           });
       } else {
-            this.icon1 = BI.createWidget({
+          this.icon1 = createWidget({
               type: "bi.icon_button",
               cls: o.iconCls1,
               width: 36,
@@ -44,75 +64,78 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
           });
       }
 
-        this.icon2 = BI.createWidget({
+      this.icon2 = createWidget({
           type: "bi.icon_button",
           cls: o.iconCls2,
           width: 24,
-            forceNotSelected: true
+          forceNotSelected: true,
       });
 
-        this.element.hover(function () {
-            if (self.isEnabled()) {
-                self.hover();
+      this.element.hover(
+          () => {
+              if (this.isEnabled()) {
+                  this.hover();
               }
-        }, function () {
-            if (self.isEnabled()) {
-                self.dishover();
+          },
+          () => {
+              if (this.isEnabled()) {
+                  this.dishover();
               }
-        });
+          }
+      );
 
       return {
           type: "bi.horizontal_fill",
           columnSize: [36, "fill", 24],
-            items: [this.icon1, this.text, this.icon2]
+          items: [this.icon1, this.text, this.icon2],
+      };
   }
-    },
 
-    _getLevel: function () {
-        var child = BI.first(this.options.childValues);
-        return BI.isNotNull(child) ? (child + "").split(BI.BlankSplitChar).length : 0;
-    },
+  _getLevel() {
+      const child = first(this.options.childValues);
       
-    _digest: function (v) {
-        var self = this, o = this.options;
-        v = BI.isArray(v) ? v : [v];
-        var level = this._getLevel();
-        return BI.any(v, function (idx, value) {
-            return BI.contains(o.childValues, (value + "").split(BI.BlankSplitChar).slice(0, level).join(BI.BlankSplitChar));
-        });
-    },
+      return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0;
+  }
 
-    hover: function () {
-        BI.DownListGroupItem.superclass.hover.apply(this, arguments);
+  _digest(v) {
+      const o = this.options;
+      v = isArray(v) ? v : [v];
+      const level = this._getLevel();
+      
+      return any(v, (idx, value) => contains(
+          o.childValues,
+          (`${value}`).split(BlankSplitChar).slice(0, level).join(BlankSplitChar)
+      ));
+  }
+
+  hover() {
+      super.hover(...arguments);
       this.icon1.element.addClass("hover");
       this.icon2.element.addClass("hover");
+  }
 
-    },
-
-    dishover: function () {
-        BI.DownListGroupItem.superclass.dishover.apply(this, arguments);
+  dishover() {
+      super.dishover(...arguments);
       this.icon1.element.removeClass("hover");
       this.icon2.element.removeClass("hover");
-    },
+  }
 
-    doClick: function () {
-        BI.DownListGroupItem.superclass.doClick.apply(this, arguments);
+  doClick() {
+      super.doClick(...arguments);
       if (this.isValid()) {
-            this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue());
+          this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue());
+      }
   }
-    },
 
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+  doRedMark() {
+      this.text.doRedMark(...arguments);
+  }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+  unRedMark() {
+      this.text.unRedMark(...arguments);
+  }
 
-    setValue: function (v) {
+  setValue(v) {
       this.icon1.setSelected && this.icon1.setSelected(this._digest(v));
-    },
-});
-BI.DownListGroupItem.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem);
+  }
+}

src/widget/downlist/popup.downlist.js

@@ -1,94 +1,122 @@
-/**
- * Created by roy on 15/9/8.
- * 处理popup中的item分组样式
- * 一个item分组中的成员大于一时，该分组设置为单选，并且默认状态第一个成员设置为已选择项
- */
-BI.DownListPopup = BI.inherit(BI.Pane, {
-    constants: {
+import {
+    shortcut,
+    extend,
+    createWidget,
+    createItems,
+    isNotNull,
+    contains,
+    each,
+    isEmpty,
+    map,
+    isNotEmptyString,
+    isNotEmptyArray,
+    some,
+    deepClone
+} from "@/core";
+import { Pane, ButtonTree } from "@/base";
+
+@shortcut()
+export class DownListPopup extends Pane {
+  static xtype = "bi.down_list_popup";
+
+  constants = {
       nextIcon: "pull-right-e-font",
       height: 24,
       iconHeight: 12,
       iconWidth: 12,
       hgap: 0,
       vgap: 0,
-        border: 1
-    },
-    _defaultConfig: function () {
-        var conf = BI.DownListPopup.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
+      border: 1,
+  };
+
+  static EVENT_CHANGE = "EVENT_CHANGE";
+  static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
+
+  _defaultConfig() {
+      const conf = super._defaultConfig(...arguments);
+      
+      return extend(conf, {
           baseCls: "bi-down-list-popup",
           items: [],
-            chooseType: BI.Selection.Multi
+          chooseType: Selection.Multi,
       });
-    },
-    _init: function () {
-        BI.DownListPopup.superclass._init.apply(this, arguments);
+  }
+
+  _init() {
+      super._init(...arguments);
       this.singleValues = [];
       this.childValueMap = {};
       this.fatherValueMap = {};
       this.items = [];
-        var self = this, o = this.options, children = this._createPopupItems(o.items);
-        this.popup = BI.createWidget({
+      const o = this.options,
+          children = this._createPopupItems(o.items);
+      this.popup = createWidget({
           type: "bi.button_tree",
-            items: BI.createItems(children,
-                {}, {
-                    adjustLength: -2
+          items: createItems(
+              children,
+              {},
+              {
+                  adjustLength: -2,
               }
           ),
-            layouts: [{
+          layouts: [
+              {
                   type: "bi.vertical",
                   hgap: this.constants.hgap,
-                vgap: this.constants.vgap
-            }],
+                  vgap: this.constants.vgap,
+              }
+          ],
           value: this._digest(o.value),
-            chooseType: o.chooseType
+          chooseType: o.chooseType,
       });
 
-        this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) {
-            var changedValue = value;
-            if (BI.isNotNull(self.childValueMap[value])) {
-                changedValue = self.childValueMap[value];
-                self.fireEvent(BI.DownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, self.fatherValueMap[value]);
+      this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => {
+          let changedValue = value;
+          if (isNotNull(this.childValueMap[value])) {
+              changedValue = this.childValueMap[value];
+              this.fireEvent(
+                  DownListPopup.EVENT_SON_VALUE_CHANGE,
+                  changedValue,
+                  this.fatherValueMap[value]
+              );
           } else {
-                self.fireEvent(BI.DownListPopup.EVENT_CHANGE, changedValue, object);
+              this.fireEvent(DownListPopup.EVENT_CHANGE, changedValue, object);
           }
 
-
-            if (!BI.contains(self.singleValues, changedValue)) {
-                var item = self.getValue();
-                var result = [];
-                BI.each(item, function (i, valueObject) {
-                    if (valueObject.value != changedValue) {
+          if (!contains(this.singleValues, changedValue)) {
+              const item = this.getValue();
+              const result = [];
+              each(item, (i, valueObject) => {
+                  if (valueObject.value !== changedValue) {
                       result.push(valueObject);
                   }
               });
-                self.setValue(result);
+              this.setValue(result);
           }
-
       });
 
-        BI.createWidget({
+      createWidget({
           type: "bi.vertical",
           element: this,
           items: [this.popup],
-            vgap: 5
+          vgap: 5,
       });
+  }
 
-    },
-    _createPopupItems: function (items) {
-        var self = this, result = [];
+  _createPopupItems(items) {
+      const result = [];
       // 不能修改populate进来的item的引用
-        BI.each(items, function (i, it) {
-            var item_done = {
+      each(items, (i, it) => {
+          const item_done = {
               type: "bi.down_list_group",
-                items: []
+              items: [],
           };
 
-            var storeItem = [];
+          const storeItem = [];
 
-            BI.each(it, function (i, sourceItem) {
-                var item = BI.extend({}, sourceItem);
-                if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) {
+          each(it, (i, sourceItem) => {
+              const item = extend({}, sourceItem);
+              if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) {
                   item.type = "bi.combo_group";
                   // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options
                   // 还是item自身, 这边控制defaultInit为true来避免这个问题
@@ -100,130 +128,134 @@ BI.DownListPopup = BI.inherit(BI.Pane, {
                   item.el.title = sourceItem.el.title || sourceItem.el.text;
                   item.el.type = "bi.down_list_group_item";
                   item.el.logic = {
-                        dynamic: true
+                      dynamic: true,
                   };
-                    item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
-                    item.el.iconCls2 = self.constants.nextIcon;
+                  item.el.height =
+            sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
+                  item.el.iconCls2 = this.constants.nextIcon;
                   item.popup = {
                       lgap: 1,
                       el: {
                           type: "bi.button_tree",
                           chooseType: 0,
-                            layouts: [{
-                                type: "bi.vertical"
-                            }]
-
+                          layouts: [
+                              {
+                                  type: "bi.vertical",
+                              }
+                          ],
                       },
                       innerVgap: 5,
-                        maxHeight: 378
+                      maxHeight: 378,
                   };
-                    self._createChildren(item, sourceItem);
+                  this._createChildren(item, sourceItem);
               } else {
                   item.type = sourceItem.type || "bi.down_list_item";
                   item.title = sourceItem.title || sourceItem.text;
                   item.textRgap = 10;
                   item.isNeedAdjustWidth = false;
                   item.logic = {
-                        dynamic: true
+                      dynamic: true,
                   };
               }
-                var el_done = {};
+              const el_done = {};
               el_done.el = item;
               item_done.items.push(el_done);
               storeItem.push(item);
           });
-            if (self._isGroup(item_done.items)) {
-                BI.each(item_done.items, function (i, item) {
-                    self.singleValues.push(item.el.value);
+          if (this._isGroup(item_done.items)) {
+              each(item_done.items, (i, item) => {
+                  this.singleValues.push(item.el.value);
               });
           }
 
           result.push(item_done);
-            self.items.push(storeItem);
-            if (self._needSpliter(i, items.length)) {
-                var spliter_container = BI.createWidget({
+          this.items.push(storeItem);
+          if (this._needSpliter(i, items.length)) {
+              const spliter_container = createWidget({
                   type: "bi.vertical",
-                    items: [{
+                  items: [
+                      {
                           el: {
                               type: "bi.layout",
                               cls: "bi-down-list-spliter bi-split-top cursor-pointer",
-                            height: 0
+                              height: 0,
+                          },
                       }
-
-                    }],
+                  ],
                   cls: "bi-down-list-spliter-container cursor-pointer",
                   vgap: 5,
-                    hgap: 12
+                  hgap: 12,
               });
               result.push(spliter_container);
           }
       });
+      
       return result;
-    },
+  }
 
-    _createChildren: function (targetItem, sourceItem) {
-        var self = this;
+  _createChildren(targetItem, sourceItem) {
       targetItem.el.childValues = [];
       targetItem.items = targetItem.children = [];
-        BI.each(sourceItem.children, function (i, child) {
-            var item = BI.extend({}, child);
-            var fatherValue = BI.deepClone(targetItem.el.value);
-            var childValue = BI.deepClone(item.value);
-            self.singleValues.push(item.value);
+      each(sourceItem.children, (i, child) => {
+          const item = extend({}, child);
+          const fatherValue = deepClone(targetItem.el.value);
+          const childValue = deepClone(item.value);
+          this.singleValues.push(item.value);
           item.type = item.type || "bi.down_list_item";
           item.extraCls = " child-down-list-item";
           item.title = item.title || item.text;
           item.textRgap = 10;
           item.isNeedAdjustWidth = false;
           item.logic = {
-                dynamic: true
+              dynamic: true,
           };
           item.father = fatherValue;
           item.childValue = item.value;
-            self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue;
-            self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue;
-            item.value = self._createChildValue(fatherValue, childValue);
+          this.fatherValueMap[this._createChildValue(fatherValue, childValue)] =
+        fatherValue;
+          this.childValueMap[this._createChildValue(fatherValue, childValue)] =
+        childValue;
+          item.value = this._createChildValue(fatherValue, childValue);
           targetItem.el.childValues.push(item.value);
           targetItem.items.push(item);
       });
-    },
+  }
 
-    _isGroup: function (i) {
+  _isGroup(i) {
       return i.length > 1;
-    },
+  }
 
-    _needSpliter: function (i, itemLength) {
+  _needSpliter(i, itemLength) {
       return i < itemLength - 1;
-    },
+  }
 
-    _createChildValue: function (fatherValue, childValue) {
+  _createChildValue(fatherValue, childValue) {
       return fatherValue + BI.BlankSplitChar + childValue;
-    },
+  }
 
-    _digest: function (valueItem) {
-        var self = this;
-        var valueArray = [];
-        BI.each(valueItem, function (i, item) {
-                var value;
-                if (BI.isNotNull(item.childValue)) {
-                    value = self._createChildValue(item.value, item.childValue);
+  _digest(valueItem) {
+      const valueArray = [];
+      each(valueItem, (i, item) => {
+          let value;
+          if (isNotNull(item.childValue)) {
+              value = this._createChildValue(item.value, item.childValue);
           } else {
               value = item.value;
           }
           valueArray.push(value);
-            }
-        );
+      });
+      
       return valueArray;
-    },
+  }
 
-    _checkValues: function (values) {
-        var value = [];
-        BI.each(this.items, function (idx, itemGroup) {
-            BI.each(itemGroup, function (id, item) {
-                if(BI.isNotNull(item.children)) {
-                    var childValues = BI.map(item.children, "value");
-                    var v = joinValue(childValues, values[idx]);
-                    if(BI.isNotEmptyString(v)) {
+  _checkValues(values) {
+      const value = [];
+      each(this.items, (idx, itemGroup) => {
+          each(itemGroup, (id, item) => {
+              if (isNotNull(item.children)) {
+                  const childValues = map(item.children, "value");
+                  const v = joinValue(childValues, values[idx]);
+                  if (isNotEmptyString(v)) {
                       value.push(v);
                   }
               } else {
@@ -233,69 +265,68 @@ BI.DownListPopup = BI.inherit(BI.Pane, {
               }
           });
       });
+      
       return value;
 
       function joinValue(sources, targets) {
-            var value = "";
-            BI.some(sources, function (idx, s) {
-                return BI.some(targets, function (id, t) {
+          let value = "";
+          some(sources, (idx, s) => some(targets, (id, t) => {
               if (s === t) {
                   value = s;
+                  
                   return true;
               }
-                });
-            });
+          }));
+          
           return value;
       }
-    },
+  }
 
-    populate: function (items) {
-        BI.DownListPopup.superclass.populate.apply(this, arguments);
+  populate(items) {
+      super.populate(...arguments);
       this.items = [];
       this.childValueMap = {};
       this.fatherValueMap = {};
       this.singleValues = [];
-        var children = this._createPopupItems(items);
-        var popupItem = BI.createItems(children,
-            {}, {
-                adjustLength: -2
+      const children = this._createPopupItems(items);
+      const popupItem = createItems(
+          children,
+          {},
+          {
+              adjustLength: -2,
           }
       );
       this.popup.populate(popupItem);
-    },
+  }
 
-    setValue: function (valueItem) {
+  setValue(valueItem) {
       this.popup.setValue(this._digest(valueItem));
-    },
+  }
 
-    _getValue: function () {
-        var v = [];
-        BI.each(this.popup.getAllButtons(), function (i, item) {
+  _getValue() {
+      const v = [];
+      each(this.popup.getAllButtons(), (i, item) => {
           i % 2 === 0 && v.push(item.getValue());
       });
+      
       return v;
-    },
+  }
 
-    getValue: function () {
-        var self = this, result = [];
-        var values = this._checkValues(this._getValue());
-        BI.each(values, function (i, value) {
-            var valueItem = {};
-            if (BI.isNotNull(self.childValueMap[value])) {
-                var fartherValue = self.fatherValueMap[value];
-                valueItem.childValue = self.childValueMap[value];
+  getValue() {
+      const result = [];
+      const values = this._checkValues(this._getValue());
+      each(values, (i, value) => {
+          const valueItem = {};
+          if (isNotNull(this.childValueMap[value])) {
+              const fartherValue = this.fatherValueMap[value];
+              valueItem.childValue = this.childValueMap[value];
               valueItem.value = fartherValue;
           } else {
               valueItem.value = value;
           }
           result.push(valueItem);
       });
+      
       return result;
   }
-
-
-});
-
-BI.DownListPopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.DownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
-BI.shortcut("bi.down_list_popup", BI.DownListPopup);
+}

src/widget/index.js

@@ -7,6 +7,9 @@ import * as datetimepane from "./datetimepane";
 import * as dynamicdatetime from "./dynamicdatetime";
 import * as time from "./time";
 import * as editor from "./editor";
+import * as downList from "./downlist";
+import * as singleSliderItem from "./singleslider";
+import * as intervalSliderItem from "./intervalslider";
 import { SelectTreeCombo } from "./selecttree/selecttree.combo";
 import { SingleTreeCombo } from "./singletree/singletree.combo";
 import { MultiTreeCombo } from "./multitree/multi.tree.combo";
@@ -27,6 +30,9 @@ Object.assign(BI, {
     ...dynamicdatetime,
     ...time,
     ...editor,
+    ...downList,
+    ...singleSliderItem,
+    ...intervalSliderItem,
     SelectTreeCombo,
     SingleTreeCombo,
     MultiTreeCombo,
@@ -44,15 +50,13 @@ export * from "./datepane";
 export * from "./datetime";
 export * from "./datetimepane";
 export * from "./dynamicdatetime";
-export * from "./time
+export * from "./time";
 export * from "./editor";
-export { SelectTreeCombo } from "./selecttree/selecttree.combo";
-export { SingleTreeCombo } from "./singletree/singletree.combo";
-export { MultiTreeCombo } from "./multitree/multi.tree.combo";
-export { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
-export { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
 export * from "./multiselect";
 export * from "./multiselectlist";
+export * from "./downlist";
+export * from "./singleslider";
+export * from "./intervalslider";
 
 export {
     Collapse,

src/widget/intervalslider/index.js

@@ -0,0 +1,2 @@
+export { AccurateCalculationModel } from "./model.accuratecalculation";
+export { IntervalSlider } from "./intervalslider";

src/widget/intervalslider/intervalslider.js

@@ -1,30 +1,50 @@
-/**
- * Created by zcf on 2016/9/26.
- */
-BI.IntervalSlider = BI.inherit(BI.Single, {
-    _constant: {
+import {
+    shortcut,
+    createWidget,
+    toPix,
+    parseFloat,
+    Layout,
+    AbsoluteLayout,
+    clamp,
+    VerticalLayout,
+    isEmptyString,
+    isNumeric,
+    isNull,
+    isInteger,
+    i18nText,
+    size,
+    parseInt,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single, Editor } from "@/base";
+import { AccurateCalculationModel } from "./model.accuratecalculation";
+import { SignTextEditor, SliderIconButton } from "../singleslider";
+
+@shortcut()
+export class IntervalSlider extends Single {
+    static xtype = "bi.interval_slider";
+    _constant = {
         EDITOR_WIDTH: 58,
         EDITOR_R_GAP: 60,
         EDITOR_HEIGHT: 20,
         SLIDER_WIDTH_HALF: 15,
         SLIDER_WIDTH: 30,
         SLIDER_HEIGHT: 30,
-        TRACK_HEIGHT: 24
-    },
-
-    props: {
+        TRACK_HEIGHT: 24,
+    }
+    props = {
         baseCls: "bi-interval-slider bi-slider-track",
         digit: false,
         unit: "",
         min: 0,
         max: 100,
-        value: {
-            min: "",
-            max: "",
-        }
-    },
+        value: { min: "", max: "" },
+    };
 
-    beforeMount: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this._setMinAndMax({
             min,
@@ -32,90 +52,104 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
-
-    render: function () {
+    }
 
-        var self = this;
-        var c = this._constant;
+    render() {
+        const c = this._constant;
         this.enable = false;
         this.valueOne = "";
         this.valueTwo = "";
 
-        this.calculation = new BI.AccurateCalculationModel();
-        this.grayTrack = BI.createWidget({
-            type: "bi.layout",
+        this.calculation = new AccurateCalculationModel();
+        this.grayTrack = createWidget({
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
-            type: "bi.layout",
+        this.blueTrack = createWidget({
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         this.track = this._createTrackWrapper();
 
-        this.labelOne = BI.createWidget({
-            type: "bi.sign_text_editor",
+        this.labelOne = createWidget({
+            type: SignTextEditor.xtype,
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: BI.toPix(c.EDITOR_WIDTH, 2),
-            height: BI.toPix(c.EDITOR_HEIGHT, 2),
-            validationChecker: function (v) {
-                return self._checkValidation(v);
-            }
-        });
-        this.labelOne.element.hover(function () {
-            self.labelOne.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.labelOne.element.removeClass("bi-border");
+            width: toPix(c.EDITOR_WIDTH, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
+            validationChecker: v => this._checkValidation(v),
         });
-        this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () {
-            var oldValueOne = self.valueOne;
-            var v = BI.parseFloat(this.getValue());
-            self.valueOne = v;
-            var percent = self._getPercentByValue(v);
-            var significantPercent = BI.parseFloat(percent.toFixed(1));// 分成1000份
-            self._setSliderOnePosition(significantPercent);
-            self._setBlueTrack();
-            self._checkLabelPosition(oldValueOne, self.valueTwo, self.valueOne, self.valueTwo);
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        this.labelOne.element.hover(
+            () => {
+                this.labelOne.element
+                    .removeClass("bi-border")
+                    .addClass("bi-border");
+            },
+            () => {
+                this.labelOne.element.removeClass("bi-border");
+            }
+        );
+        this.labelOne.on(Editor.EVENT_CONFIRM, () => {
+            const oldValueOne = this.valueOne;
+            const v = parseFloat(this.getValue());
+            this.valueOne = v;
+            const percent = this._getPercentByValue(v);
+            const significantPercent = parseFloat(percent.toFixed(1)); // 分成1000份
+            this._setSliderOnePosition(significantPercent);
+            this._setBlueTrack();
+            this._checkLabelPosition(
+                oldValueOne,
+                this.valueTwo,
+                this.valueOne,
+                this.valueTwo
+            );
+            this.fireEvent(IntervalSlider.EVENT_CHANGE);
         });
 
-        this.labelTwo = BI.createWidget({
-            type: "bi.sign_text_editor",
+        this.labelTwo = createWidget({
+            type: SignTextEditor.xtype,
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: BI.toPix(c.EDITOR_WIDTH, 2),
-            height: BI.toPix(c.EDITOR_HEIGHT, 2),
-            validationChecker: function (v) {
-                return self._checkValidation(v);
-            }
+            width: toPix(c.EDITOR_WIDTH, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
+            validationChecker: v => this._checkValidation(v),
         });
-        this.labelTwo.element.hover(function () {
-            self.labelTwo.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.labelTwo.element.removeClass("bi-border");
-        });
-        this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () {
-            var oldValueTwo = self.valueTwo;
-            var v = BI.parseFloat(this.getValue());
-            self.valueTwo = v;
-            var percent = self._getPercentByValue(v);
-            var significantPercent = BI.parseFloat(percent.toFixed(1));
-            self._setSliderTwoPosition(significantPercent);
-            self._setBlueTrack();
-            self._checkLabelPosition(self.valueOne, oldValueTwo, self.valueOne, self.valueTwo);
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        this.labelTwo.element.hover(
+            () => {
+                this.labelTwo.element
+                    .removeClass("bi-border")
+                    .addClass("bi-border");
+            },
+            () => {
+                this.labelTwo.element.removeClass("bi-border");
+            }
+        );
+        this.labelTwo.on(Editor.EVENT_CONFIRM, () => {
+            const oldValueTwo = this.valueTwo;
+            const v = parseFloat(this.getValue());
+            this.valueTwo = v;
+            const percent = this._getPercentByValue(v);
+            const significantPercent = parseFloat(percent.toFixed(1));
+            this._setSliderTwoPosition(significantPercent);
+            this._setBlueTrack();
+            this._checkLabelPosition(
+                this.valueOne,
+                oldValueTwo,
+                this.valueOne,
+                this.valueTwo
+            );
+            this.fireEvent(IntervalSlider.EVENT_CHANGE);
         });
 
-        this.sliderOne = BI.createWidget({
-            type: "bi.single_slider_button"
+        this.sliderOne = createWidget({
+            type: SliderIconButton.xtype,
         });
-        this.sliderTwo = BI.createWidget({
-            type: "bi.single_slider_button"
+        this.sliderTwo = createWidget({
+            type: SliderIconButton.xtype,
         });
         this._draggable(this.sliderOne, true);
         this._draggable(this.sliderTwo, false);
@@ -127,7 +161,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             items: [
                 this._createLabelWrapper(),
                 {
-                    type: "bi.absolute",
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             el: {
@@ -135,64 +169,82 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                                 horizontalAlign: "stretch",
                                 verticalAlign: "middle",
                                 columnSize: ["fill"],
-                                items: [{
+                                items: [
+                                    {
                                         el: this.track,
-                                }],
+                                    }
+                                ],
                                 hgap: 10,
                             },
-                            inset: 0
+                            inset: 0,
                         },
-                        this._createSliderWrapper(),
-                    ]
+                        this._createSliderWrapper()
+                    ],
                 }
-            ]
+            ],
         };
-    },
+    }
 
-    _rePosBySizeAfterMove: function (size, isLeft) {
-        var o = this.options;
-        var percent = size * 100 / (this._getGrayTrackLength());
-        var significantPercent = BI.parseFloat(percent.toFixed(1));
-        var v = this._getValueByPercent(significantPercent);
+    _rePosBySizeAfterMove(size, isLeft) {
+        const o = this.options;
+        const percent = (size * 100) / this._getGrayTrackLength();
+        const significantPercent = parseFloat(percent.toFixed(1));
+        let v = this._getValueByPercent(significantPercent);
         v = this._assertValue(v);
         v = o.digit === false ? v : v.toFixed(o.digit);
-        var oldValueOne = this.valueOne, oldValueTwo = this.valueTwo;
+        const oldValueOne = this.valueOne,
+            oldValueTwo = this.valueTwo;
         if (isLeft) {
             this._setSliderOnePosition(significantPercent);
             this.labelOne.setValue(v);
             this.valueOne = v;
-            this._checkLabelPosition(oldValueOne, oldValueTwo, v, this.valueTwo);
+            this._checkLabelPosition(
+                oldValueOne,
+                oldValueTwo,
+                v,
+                this.valueTwo
+            );
         } else {
             this._setSliderTwoPosition(significantPercent);
             this.labelTwo.setValue(v);
             this.valueTwo = v;
-            this._checkLabelPosition(oldValueOne, oldValueTwo, this.valueOne, v);
+            this._checkLabelPosition(
+                oldValueOne,
+                oldValueTwo,
+                this.valueOne,
+                v
+            );
         }
         this._setBlueTrack();
-    },
+    }
 
-    _rePosBySizeAfterStop: function (size, isLeft) {
-        var percent = size * 100 / (this._getGrayTrackLength());
-        var significantPercent = BI.parseFloat(percent.toFixed(1));
-        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
-    },
+    _rePosBySizeAfterStop(size, isLeft) {
+        const percent = (size * 100) / this._getGrayTrackLength();
+        const significantPercent = parseFloat(percent.toFixed(1));
+        isLeft
+            ? this._setSliderOnePosition(significantPercent)
+            : this._setSliderTwoPosition(significantPercent);
+    }
 
-    _draggable: function (widget, isLeft) {
-        var self = this, o = this.options;
-        var startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+    _draggable(widget, isLeft) {
+        let startDrag = false;
+        let size = 0,
+            offset = 0,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                self._rePosBySizeAfterMove(size, isLeft);
+                    this._rePosBySizeAfterMove(size, isLeft);
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                self._rePosBySizeAfterStop(size, isLeft);
+                    this._rePosBySizeAfterStop(size, isLeft);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -200,8 +252,10 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-        }, window);
+                this.fireEvent(IntervalSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -211,42 +265,47 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
     }
-    },
 
-    _createLabelWrapper: function () {
-        var c = this._constant;
+    _createLabelWrapper() {
+        const c = this._constant;
+        
         return {
             el: {
-                type: "bi.vertical",
-                items: [{
-                    type: "bi.absolute",
-                    items: [{
+                type: VerticalLayout.xtype,
+                items: [
+                    {
+                        type: AbsoluteLayout.xtype,
+                        items: [
+                            {
                                 el: this.labelOne,
                                 top: 0,
                                 left: 0,
-                    }]
-                }, {
-                    type: "bi.absolute",
-                    items: [{
+                            }
+                        ],
+                    },
+                    {
+                        type: AbsoluteLayout.xtype,
+                        items: [
+                            {
                                 el: this.labelTwo,
                                 top: 0,
                                 right: 0,
-                    }]
-                }],
+                            }
+                        ],
+                    }
+                ],
                 rgap: c.EDITOR_R_GAP,
-                height: c.SLIDER_HEIGHT
+                height: c.SLIDER_HEIGHT,
             },
             top: 0,
             left: 0,
-            width: "100%"
+            width: "100%",
         };
-    },
+    }
 
-    _createSliderWrapper: function () {
-        var c = this._constant;
+    _createSliderWrapper() {
         return {
             el: {
                 type: "bi.horizontal",
@@ -254,7 +313,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                 verticalAlign: "middle",
                 items: [
                     {
-                        type: "bi.absolute",
+                        type: AbsoluteLayout.xtype,
                         height: 12,
                         width: "fill",
                         items: [
@@ -262,24 +321,25 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                                 el: this.sliderOne,
                                 top: 0,
                                 bottom: 0,
-                                left: 0
-                            }, {
+                                left: 0,
+                            },
+                            {
                                 el: this.sliderTwo,
                                 top: 0,
                                 bottom: 0,
-                                left: "100%"
+                                left: "100%",
                             }
                         ],
                     }
                 ],
                 hgap: 10,
             },
-            inset: 0
+            inset: 0,
         };
-    },
+    }
 
-    _createTrackWrapper: function () {
-        return BI.createWidget({
+    _createTrackWrapper() {
+        return createWidget({
             type: "bi.horizontal",
             cls: "track-wrapper",
             horizontalAlign: "stretch",
@@ -288,100 +348,110 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             scrollx: false,
             items: [
                 {
-                    type: "bi.absolute",
+                    type: AbsoluteLayout.xtype,
                     height: 6,
-                    items: [{
+                    items: [
+                        {
                             el: this.grayTrack,
                             top: 0,
                             left: 0,
                             bottom: 0,
-                        width: "100%"
-                    }, {
+                            width: "100%",
+                        },
+                        {
                             el: this.blueTrack,
                             top: 0,
                             left: 0,
                             bottom: 0,
-                        width: "0%"
-                    }]
+                            width: "0%",
+                        }
+                    ],
                 }
             ],
         });
-    },
+    }
 
-    _checkValidation: function (v) {
-        var o = this.options;
-        var valid = false;
+    _checkValidation(v) {
+        const o = this.options;
+        let valid = false;
         // 像90.这样的既不属于整数又不属于小数，是不合法的值
-        var dotText = (v + "").split(".")[1];
-        if (BI.isEmptyString(dotText)) {
+        let dotText = (`${v}`).split(".")[1];
+        // eslint-disable-next-line no-empty
+        if (isEmptyString(dotText)) {
         } else {
-            if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
+            if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) {
                 // 虽然规定了所填写的小数位数，但是我们认为所有的整数都是满足设置的小数位数的
                 // 100等价于100.0 100.00 100.000
-                if(o.digit === false || BI.isInteger(v)) {
+                if (o.digit === false || isInteger(v)) {
                     valid = true;
                 } else {
                     dotText = dotText || "";
-                    valid = (dotText.length === o.digit);
+                    valid = dotText.length === o.digit;
                 }
             }
         }
+        
         return valid;
-    },
+    }
 
-    _checkOverlap: function () {
-        var labelOneLeft = this.labelOne.element[0].offsetLeft;
-        var labelTwoLeft = this.labelTwo.element[0].offsetLeft;
+    _checkOverlap() {
+        const labelOneLeft = this.labelOne.element[0].offsetLeft;
+        const labelTwoLeft = this.labelTwo.element[0].offsetLeft;
         if (labelOneLeft <= labelTwoLeft) {
-            if ((labelTwoLeft - labelOneLeft) < 90) {
+            if (labelTwoLeft - labelOneLeft < 90) {
                 this.labelTwo.element.css({ top: 40 });
             } else {
                 this.labelTwo.element.css({ top: 0 });
             }
         } else {
-            if ((labelOneLeft - labelTwoLeft) < 90) {
+            if (labelOneLeft - labelTwoLeft < 90) {
                 this.labelTwo.element.css({ top: 40 });
             } else {
                 this.labelTwo.element.css({ top: 0 });
             }
         }
-    },
+    }
 
-    _checkLabelPosition: function (oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) {
-        oldValueOne = BI.parseFloat(oldValueOne);
-        oldValueTwo = BI.parseFloat(oldValueTwo);
-        valueOne = BI.parseFloat(valueOne);
-        valueTwo = BI.parseFloat(valueTwo);
-        if((oldValueOne <= oldValueTwo && valueOne > valueTwo) || (oldValueOne >= oldValueTwo && valueOne < valueTwo)) {
-            var isSliderOneLeft = BI.parseFloat(this.labelOne.getValue()) < BI.parseFloat(this.labelTwo.getValue());
+    _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) {
+        oldValueOne = parseFloat(oldValueOne);
+        oldValueTwo = parseFloat(oldValueTwo);
+        valueOne = parseFloat(valueOne);
+        valueTwo = parseFloat(valueTwo);
+        if (
+            (oldValueOne <= oldValueTwo && valueOne > valueTwo) ||
+            (oldValueOne >= oldValueTwo && valueOne < valueTwo)
+        ) {
+            const isSliderOneLeft =
+                parseFloat(this.labelOne.getValue()) <
+                parseFloat(this.labelTwo.getValue());
             this._resetLabelPosition(!isSliderOneLeft);
         }
-    },
+    }
 
-    _resetLabelPosition: function(needReverse) {
+    _resetLabelPosition(needReverse) {
         this.labelOne.element.css({ left: needReverse ? "100%" : "0%" });
         this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" });
-    },
+    }
 
-    _setSliderOnePosition: function (percent) {
-        this.sliderOne.element.css({left: percent + "%"});
-    },
+    _setSliderOnePosition(percent) {
+        this.sliderOne.element.css({ left: `${percent}%` });
+    }
 
-    _setSliderTwoPosition: function (percent) {
-        this.sliderTwo.element.css({left: percent + "%"});
-    },
+    _setSliderTwoPosition(percent) {
+        this.sliderTwo.element.css({ left: `${percent}%` });
+    }
 
-    _setBlueTrackLeft: function (percent) {
-        this.blueTrack.element.css({left: percent + "%"});
-    },
+    _setBlueTrackLeft(percent) {
+        this.blueTrack.element.css({ left: `${percent}%` });
+    }
 
-    _setBlueTrackWidth: function (percent) {
-        this.blueTrack.element.css({width: percent + "%"});
-    },
+    _setBlueTrackWidth(percent) {
+        this.blueTrack.element.css({ width: `${percent}%` });
+    }
 
-    _setBlueTrack: function () {
-        var percentOne = this._getPercentByValue(this.labelOne.getValue());
-        var percentTwo = this._getPercentByValue(this.labelTwo.getValue());
+    _setBlueTrack() {
+        const percentOne = this._getPercentByValue(this.labelOne.getValue());
+        const percentTwo = this._getPercentByValue(this.labelTwo.getValue());
         if (percentOne <= percentTwo) {
             this._setBlueTrackLeft(percentOne);
             this._setBlueTrackWidth(percentTwo - percentOne);
@@ -389,133 +459,165 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             this._setBlueTrackLeft(percentTwo);
             this._setBlueTrackWidth(percentOne - percentTwo);
         }
-    },
+    }
 
-    _setAllPosition: function (one, two) {
+    _setAllPosition(one, two) {
         this._setSliderOnePosition(one);
         this._setSliderTwoPosition(two);
         this._setBlueTrack();
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.sliderOne.setVisible(visible);
         this.sliderTwo.setVisible(visible);
         this.labelOne.setVisible(visible);
         this.labelTwo.setVisible(visible);
-    },
+    }
 
-    _setErrorText: function () {
-        var errorText = BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max);
+    _setErrorText() {
+        const errorText = i18nText(
+            "BI-Basic_Please_Enter_Number_Between",
+            this.min,
+            this.max
+        );
         this.labelOne.setErrorText(errorText);
         this.labelTwo.setErrorText(errorText);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    // 其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
-    // 端点处的值有可能因为min,max相差量级很大(precision很大)而丢失精度，此时直接返回端点值即可
-    _getValueByPercent: function (percent) {// return (((max-min)*percent)/100+min)
+    _getValueByPercent(percent) {
+        // return (((max-min)*percent)/100+min)
         if (percent === 0) {
             return this.min;
         }
         if (percent === 100) {
             return this.max;
         }
-        var sub = this.calculation.accurateSubtraction(this.max, this.min);
-        var mul = this.calculation.accurateMultiplication(sub, percent);
-        var div = this.calculation.accurateDivisionTenExponent(mul, 2);
+        const sub = this.calculation.accurateSubtraction(this.max, this.min);
+        const mul = this.calculation.accurateMultiplication(sub, percent);
+        const div = this.calculation.accurateDivisionTenExponent(mul, 2);
         if (this.precision < 0) {
-            var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min));
-            var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision));
-            return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision));
+            const value = parseFloat(
+                this.calculation.accurateAddition(div, this.min)
+            );
+            const reduceValue = Math.round(
+                this.calculation.accurateDivisionTenExponent(
+                    value,
+                    -this.precision
+                )
+            );
+            
+            return this.calculation.accurateMultiplication(
+                reduceValue,
+                Math.pow(10, -this.precision)
+            );
         }
-        return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision));
         
-    },
+        return parseFloat(
+            this.calculation
+                .accurateAddition(div, this.min)
+                .toFixed(this.precision)
+        );
+    }
 
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - this.min);
-    },
+    _getPercentByValue(v) {
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
 
-    _getPrecision: function () {
+    _getPrecision() {
         // 计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
         // 如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5
         // 返回非负值: 保留的小数位数
         // 返回负值: 保留的10^n精度中的n
-        var sub = this.calculation.accurateSubtraction(this.max, this.min);
-        var pre = sub.toPrecision(4);
+        const sub = this.calculation.accurateSubtraction(this.max, this.min);
+        const pre = sub.toPrecision(4);
         // 科学计数法
-        var eIndex = pre.indexOf("e");
-        var arr = [];
+        const eIndex = pre.indexOf("e");
+        let arr = [];
         if (eIndex > -1) {
             arr = pre.split("e");
-            var decimalPartLength = BI.size(arr[0].split(".")[1]);
-            var sciencePartLength = BI.parseInt(arr[1].substring(1));
+            const decimalPartLength = size(arr[0].split(".")[1]);
+            const sciencePartLength = parseInt(arr[1].substring(1));
+            
             return decimalPartLength - sciencePartLength;
         }
         arr = pre.split(".");
-        return arr.length > 1 ? arr[1].length : 0;
         
-    },
+        return arr.length > 1 ? arr[1].length : 0;
+    }
 
-    _assertValue: function (value) {
+    _assertValue(value) {
         if (value <= this.min) {
             return this.min;
         }
         if (value >= this.max) {
             return this.max;
         }
+        
         return value;
-    },
+    }
 
-    _setEnable: function (b) {
-        BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
         if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
+        }
     }
-    },
 
-    getValue: function () {
+    getValue() {
         if (this.valueOne <= this.valueTwo) {
             return { min: this.valueOne, max: this.valueTwo };
         }
-        return {min: this.valueTwo, max: this.valueOne};
         
-    },
+        return { min: this.valueTwo, max: this.valueOne };
+    }
 
-    _setMinAndMax: function (v) {
-        var minNumber = BI.parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) {
+    _setMinAndMax(v) {
+        const minNumber = parseFloat(v.min);
+        const maxNumber = parseFloat(v.max);
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber >= minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
             this.valueOne = minNumber;
             this.valueTwo = maxNumber;
             this.precision = this._getPrecision();
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
+    setMinAndMax(v) {
         this._setMinAndMax(v);
         this.setEnable(v.min <= v.max);
-    },
+    }
 
-    setValue: function (v) {
-        var o = this.options;
-        var valueOne = BI.parseFloat(v.min);
-        var valueTwo = BI.parseFloat(v.max);
-        valueOne = o.digit === false ? valueOne : BI.parseFloat(valueOne.toFixed(o.digit));
-        valueTwo = o.digit === false ? valueTwo : BI.parseFloat(valueTwo.toFixed(o.digit));
+    setValue(v) {
+        const o = this.options;
+        let valueOne = parseFloat(v.min);
+        let valueTwo = parseFloat(v.max);
+        valueOne =
+            o.digit === false
+                ? valueOne
+                : parseFloat(valueOne.toFixed(o.digit));
+        valueTwo =
+            o.digit === false
+                ? valueTwo
+                : parseFloat(valueTwo.toFixed(o.digit));
         if (!isNaN(valueOne) && !isNaN(valueTwo)) {
             if (this._checkValidation(valueOne)) {
-                this.valueOne = (this.valueOne <= this.valueTwo ? valueOne : valueTwo);
+                this.valueOne =
+                    this.valueOne <= this.valueTwo ? valueOne : valueTwo;
             }
             if (this._checkValidation(valueTwo)) {
-                this.valueTwo = (this.valueOne <= this.valueTwo ? valueTwo : valueOne);
+                this.valueTwo =
+                    this.valueOne <= this.valueTwo ? valueTwo : valueOne;
             }
             if (valueOne < this.min) {
                 this.valueOne = this.min;
@@ -524,9 +626,9 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                 this.valueTwo = this.max;
             }
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.valueOne = "";
@@ -534,18 +636,32 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
         this.min = NaN;
         this.max = NaN;
         this._setBlueTrackWidth(0);
-    },
+    }
 
-    populate: function () {
-        var o = this.options;
+    populate() {
+        const o = this.options;
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this.enable = true;
             this._setVisible(true);
             this._setErrorText();
-            if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) {
-                this.labelOne.setValue(o.digit === false ? this.valueOne : BI.parseFloat(this.valueOne).toFixed(o.digit));
-                this.labelTwo.setValue(o.digit === false ? this.valueTwo : BI.parseFloat(this.valueTwo).toFixed(o.digit));
-                this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo));
+            if (
+                (isNumeric(this.valueOne) || isNotEmptyString(this.valueOne)) &&
+                (isNumeric(this.valueTwo) || isNotEmptyString(this.valueTwo))
+            ) {
+                this.labelOne.setValue(
+                    o.digit === false
+                        ? this.valueOne
+                        : parseFloat(this.valueOne).toFixed(o.digit)
+                );
+                this.labelTwo.setValue(
+                    o.digit === false
+                        ? this.valueTwo
+                        : parseFloat(this.valueTwo).toFixed(o.digit)
+                );
+                this._setAllPosition(
+                    this._getPercentByValue(this.valueOne),
+                    this._getPercentByValue(this.valueTwo)
+                );
             } else {
                 this.labelOne.setValue(this.min);
                 this.labelTwo.setValue(this.max);
@@ -554,6 +670,4 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             this._resetLabelPosition(this.valueOne > this.valueTwo);
         }
     }
-});
-BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.interval_slider", BI.IntervalSlider);
+}

src/widget/intervalslider/model.accuratecalculation.js

@@ -1,172 +1,239 @@
-/**
- * Created by zcf on 2017/3/1.
- * 万恶的IEEE-754
- * 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数
- */
-BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: ""
+import { Widget, extend, parseInt, parseFloat } from "@/core";
+
+export class AccurateCalculationModel extends Widget {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls: "",
         });
-    },
+    }
 
-    _init: function () {
-        BI.AccurateCalculationModel.superclass._init.apply(this, arguments);
-    },
+    _init() {
+        super._init(...arguments);
+    }
 
-    _getMagnitude: function (n) {
-        var magnitude = "1";
-        for (var i = 0; i < n; i++) {
+    _getMagnitude(n) {
+        let magnitude = "1";
+        for (let i = 0; i < n; i++) {
             magnitude += "0";
         }
-        return BI.parseInt(magnitude);
-    },
         
-    _formatDecimal: function (stringNumber1, stringNumber2) {
+        return parseInt(magnitude);
+    }
+
+    _formatDecimal(stringNumber1, stringNumber2) {
         if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) {
             return;
         }
-        var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
+        let magnitudeDiff =
+            stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
+        let needAddZero;
         if (magnitudeDiff > 0) {
-            var needAddZero = stringNumber2;
+            needAddZero = stringNumber2;
         } else {
-            var needAddZero = stringNumber1;
-            magnitudeDiff = (0 - magnitudeDiff);
+            needAddZero = stringNumber1;
+            magnitudeDiff = 0 - magnitudeDiff;
         }
-        for (var i = 0; i < magnitudeDiff; i++) {
+        for (let i = 0; i < magnitudeDiff; i++) {
             if (needAddZero.numDecimal === "0" && i === 0) {
                 continue;
             }
             needAddZero.numDecimal += "0";
         }
-    },
+    }
 
-    _stringNumberFactory: function (num) {
-        var strNum = num.toString();
-        var numStrArray = strNum.split(".");
-        var numInteger = numStrArray[0];
+    _stringNumberFactory(num) {
+        const strNum = num.toString();
+        const numStrArray = strNum.split(".");
+        const numInteger = numStrArray[0];
+        let numDecimal;
+        let numDecimalLength;
         if (numStrArray.length === 1) {
-            var numDecimal = "0";
-            var numDecimalLength = 0;
+            numDecimal = "0";
+            numDecimalLength = 0;
         } else {
-            var numDecimal = numStrArray[1];
-            var numDecimalLength = numStrArray[1].length;
+            numDecimal = numStrArray[1];
+            numDecimalLength = numStrArray[1].length;
         }
+        
         return {
-            numInteger: numInteger,
-            numDecimal: numDecimal,
-            numDecimalLength: numDecimalLength
+            numInteger,
+            numDecimal,
+            numDecimalLength,
         };
-    },
+    }
 
-    _accurateSubtraction: function (num1, num2) {// num1-num2 && num1>num2
-        var stringNumber1 = this._stringNumberFactory(num1);
-        var stringNumber2 = this._stringNumberFactory(num2);
+    _accurateSubtraction(num1, num2) {
+        // num1-num2 && num1>num2
+        const stringNumber1 = this._stringNumberFactory(num1);
+        const stringNumber2 = this._stringNumberFactory(num2);
         // 整数部分计算
-        var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger);
+        let integerResult =
+            parseInt(stringNumber1.numInteger) -
+            parseInt(stringNumber2.numInteger);
         // 小数部分
         this._formatDecimal(stringNumber1, stringNumber2);
-        var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2);
+        const decimalMaxLength = getDecimalMaxLength(
+            stringNumber1,
+            stringNumber2
+        );
 
-        if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) {
-            var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
-            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
-        } else {// 否则借位
+        let decimalResultTemp;
+        let decimalResult;
+
+        if (
+            parseInt(stringNumber1.numDecimal) >=
+            parseInt(stringNumber2.numDecimal)
+        ) {
+            decimalResultTemp = (
+                parseInt(stringNumber1.numDecimal) -
+                parseInt(stringNumber2.numDecimal)
+            ).toString();
+            decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        } else {
+            // 否则借位
             integerResult--;
-            var borrow = this._getMagnitude(decimalMaxLength);
-            var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
-            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
-        }
-        var result = integerResult + "." + decimalResult;
-        return BI.parseFloat(result);
+            const borrow = this._getMagnitude(decimalMaxLength);
+            decimalResultTemp = (
+                borrow +
+                parseInt(stringNumber1.numDecimal) -
+                parseInt(stringNumber2.numDecimal)
+            ).toString();
+            decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        }
+        const result = `${integerResult}.${decimalResult}`;
+        
+        return parseFloat(result);
 
         function getDecimalMaxLength(num1, num2) {
             if (num1.numDecimal.length >= num2.numDecimal.length) {
                 return num1.numDecimal.length;
             }
+            
             return num2.numDecimal.length;
         }
 
         function addZero(resultTemp, length) {
-            var diff = length - resultTemp.length;
-            for (var i = 0; i < diff; i++) {
-                resultTemp = "0" + resultTemp;
+            const diff = length - resultTemp.length;
+            for (let i = 0; i < diff; i++) {
+                resultTemp = `0${resultTemp}`;
             }
+            
             return resultTemp;
         }
-    },
+    }
 
-    _accurateAddition: function (num1, num2) {// 加法结合律
-        var stringNumber1 = this._stringNumberFactory(num1);
-        var stringNumber2 = this._stringNumberFactory(num2);
+    _accurateAddition(num1, num2) {
+        // 加法结合律
+        const stringNumber1 = this._stringNumberFactory(num1);
+        const stringNumber2 = this._stringNumberFactory(num2);
         // 整数部分计算
-        var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger);
+        let integerResult =
+            parseInt(stringNumber1.numInteger) +
+            parseInt(stringNumber2.numInteger);
         // 小数部分
         this._formatDecimal(stringNumber1, stringNumber2);
 
-        var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString();
+        let decimalResult = (
+            parseInt(stringNumber1.numDecimal) +
+            parseInt(stringNumber2.numDecimal)
+        ).toString();
 
         if (decimalResult !== "0") {
             if (decimalResult.length <= stringNumber1.numDecimal.length) {
-                decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length);
+                decimalResult = addZero(
+                    decimalResult,
+                    stringNumber1.numDecimal.length
+                );
             } else {
                 integerResult++; // 进一
                 decimalResult = decimalResult.slice(1);
             }
         }
-        var result = integerResult + "." + decimalResult;
-        return BI.parseFloat(result);
+        const result = `${integerResult}.${decimalResult}`;
+        
+        return parseFloat(result);
 
         function addZero(resultTemp, length) {
-            var diff = length - resultTemp.length;
-            for (var i = 0; i < diff; i++) {
-                resultTemp = "0" + resultTemp;
+            const diff = length - resultTemp.length;
+            for (let i = 0; i < diff; i++) {
+                resultTemp = `0${resultTemp}`;
             }
+            
             return resultTemp;
         }
-    },
+    }
 
-    _accurateMultiplication: function (num1, num2) {// 乘法分配律
-        var stringNumber1 = this._stringNumberFactory(num1);
-        var stringNumber2 = this._stringNumberFactory(num2);
+    _accurateMultiplication(num1, num2) {
+        // 乘法分配律
+        const stringNumber1 = this._stringNumberFactory(num1);
+        const stringNumber2 = this._stringNumberFactory(num2);
         // 整数部分计算
-        var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger);
+        const integerResult =
+            parseInt(stringNumber1.numInteger) *
+            parseInt(stringNumber2.numInteger);
         // num1的小数和num2的整数
-        var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength);
+        const dec1Int2 = this._accurateDivisionTenExponent(
+            parseInt(stringNumber1.numDecimal) *
+                parseInt(stringNumber2.numInteger),
+            stringNumber1.numDecimalLength
+        );
         // num1的整数和num2的小数
-        var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength);
+        const int1dec2 = this._accurateDivisionTenExponent(
+            parseInt(stringNumber1.numInteger) *
+                parseInt(stringNumber2.numDecimal),
+            stringNumber2.numDecimalLength
+        );
         // 小数*小数
-        var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength));
+        const dec1dec2 = this._accurateDivisionTenExponent(
+            parseInt(stringNumber1.numDecimal) *
+                parseInt(stringNumber2.numDecimal),
+            stringNumber1.numDecimalLength + stringNumber2.numDecimalLength
+        );
 
-        return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2);
-    },
+        return this._accurateAddition(
+            this._accurateAddition(
+                this._accurateAddition(integerResult, dec1Int2),
+                int1dec2
+            ),
+            dec1dec2
+        );
+    }
 
-    _accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
-        var stringNumber = this._stringNumberFactory(num);
+    _accurateDivisionTenExponent(num, n) {
+        // num/10^n && n>0
+        const stringNumber = this._stringNumberFactory(num);
+        let integerResult, partDecimalResult;
         if (stringNumber.numInteger.length > n) {
-            var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n));
-            var partDecimalResult = stringNumber.numInteger.slice(-n);
+            integerResult = stringNumber.numInteger.slice(
+                0,
+                stringNumber.numInteger.length - n
+            );
+            partDecimalResult = stringNumber.numInteger.slice(-n);
         } else {
-            var integerResult = "0";
-            var partDecimalResult = addZero(stringNumber.numInteger, n);
+            integerResult = "0";
+            partDecimalResult = addZero(stringNumber.numInteger, n);
         }
-        var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal;
-        return BI.parseFloat(result);
+        const result =
+            `${integerResult}.${partDecimalResult}${stringNumber.numDecimal}`;
+        
+        return parseFloat(result);
 
         function addZero(resultTemp, length) {
-            var diff = length - resultTemp.length;
-            for (var i = 0; i < diff; i++) {
-                resultTemp = "0" + resultTemp;
+            const diff = length - resultTemp.length;
+            for (let i = 0; i < diff; i++) {
+                resultTemp = `0${resultTemp}`;
             }
+            
             return resultTemp;
         }
-    },
+    }
 
-    accurateSubtraction: function (num1, num2) {
+    accurateSubtraction(num1, num2) {
         if (num1 >= 0 && num2 >= 0) {
             if (num1 >= num2) {
                 return this._accurateSubtraction(num1, num2);
             }
+            
             return -this._accurateSubtraction(num2, num1);
         }
         if (num1 >= 0 && num2 < 0) {
@@ -179,11 +246,12 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
             if (num1 >= num2) {
                 return this._accurateSubtraction(-num2, -num1);
             }
+            
             return this._accurateSubtraction(-num1, -num2);
         }
-    },
+    }
 
-    accurateAddition: function (num1, num2) {
+    accurateAddition(num1, num2) {
         if (num1 >= 0 && num2 >= 0) {
             return this._accurateAddition(num1, num2);
         }
@@ -196,9 +264,9 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
         if (num1 < 0 && num2 < 0) {
             return -this._accurateAddition(-num1, -num2);
         }
-    },
+    }
 
-    accurateMultiplication: function (num1, num2) {
+    accurateMultiplication(num1, num2) {
         if (num1 >= 0 && num2 >= 0) {
             return this._accurateMultiplication(num1, num2);
         }
@@ -211,12 +279,13 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
         if (num1 < 0 && num2 < 0) {
             return this._accurateMultiplication(-num1, -num2);
         }
-    },
+    }
 
-    accurateDivisionTenExponent: function (num1, n) {
+    accurateDivisionTenExponent(num1, n) {
         if (num1 >= 0) {
             return this._accurateDivisionTenExponent(num1, n);
         }
+        
         return -this._accurateDivisionTenExponent(-num1, n);
     }
-});
+}

src/widget/singleslider/button/editor.sign.text.js

@@ -1,196 +1,217 @@
-BI.SignTextEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.SignTextEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-sign-initial-editor",
-            validationChecker: BI.emptyFn,
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    nextTick,
+    Controller,
+    AbsoluteLayout,
+    VerticalLayout,
+    bind,
+    isEmpty,
+    isKey
+} from "@/core";
+import { TextButton, Editor } from "@/base";
+
+@shortcut()
+export class SignTextEditor extends Widget {
+    static xtype = "bi.sign_text_editor";
+
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-sign-initial-editor`,
+            validationChecker: emptyFn,
             text: "",
-            height: 24
+            height: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SignTextEditor.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget({
-            type: "bi.editor",
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.editor = createWidget({
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: 4,
             vgap: 2,
             value: o.value,
             validationChecker: o.validationChecker,
-            allowBlank: false
+            allowBlank: false,
         });
-        this.text = BI.createWidget({
-            type: "bi.text_button",
+        this.text = createWidget({
+            type: TextButton.xtype,
             cls: "sign-editor-text",
-            title: function () {
-                return self.getValue();
-            },
+            title: () => this.getValue(),
             textAlign: o.textAlign,
             height: o.height,
             hgap: 4,
-            handler: function () {
-                self._showInput();
-                self.editor.focus();
-                self.editor.selectAll();
-            }
+            handler: () => {
+                this._showInput();
+                this.editor.focus();
+                this.editor.selectAll();
+            },
         });
-        this.text.on(BI.TextButton.EVENT_CHANGE, function () {
-            BI.nextTick(function () {
-                self.fireEvent(BI.SignTextEditor.EVENT_CLICK_LABEL);
+        this.text.on(TextButton.EVENT_CHANGE, () => {
+            nextTick(() => {
+                this.fireEvent(SignTextEditor.EVENT_CLICK_LABEL);
             });
         });
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
+            items: [
+                {
                     el: this.text,
                     left: 0,
                     right: 0,
                     top: 0,
-                bottom: 0
-            }]
+                    bottom: 0,
+                }
+            ],
         });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self._showHint();
-            self._checkText();
-            self.fireEvent(BI.SignTextEditor.EVENT_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
+            this._showHint();
+            this._checkText();
+            this.fireEvent(SignTextEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self._showHint();
-            self._checkText();
-            self.fireEvent(BI.SignTextEditor.EVENT_CHANGE_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
+            this._showHint();
+            this._checkText();
+            this.fireEvent(SignTextEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self._checkText();
+        this.editor.on(Editor.EVENT_ERROR, () => {
+            this._checkText();
         });
-        BI.createWidget({
-            type: "bi.vertical",
+        createWidget({
+            type: VerticalLayout.xtype,
             scrolly: false,
             element: this,
-            items: [this.editor]
+            items: [this.editor],
         });
         this._showHint();
-        self._checkText();
-    },
+        this._checkText();
+    }
 
-    _checkText: function () {
-        var o = this.options;
-        BI.nextTick(BI.bind(function () {
+    _checkText() {
+        const o = this.options;
+        nextTick(
+            bind(() => {
                 if (this.editor.getValue() === "") {
                     this.text.setValue(o.watermark || "");
                     this.text.element.addClass("bi-water-mark");
                 } else {
-                var v = this.editor.getValue();
-                v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text;
+                    let v = this.editor.getValue();
+                    v = isEmpty(v) || v === o.text ? o.text : v + o.text;
                     this.text.setValue(v);
                     this.text.element.removeClass("bi-water-mark");
                 }
-        }, this));
-    },
+            }, this)
+        );
+    }
 
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
 
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
 
-    setTitle: function (title) {
+    setTitle(title) {
         this.text.setTitle(title);
-    },
+    }
 
-    setWarningTitle: function (title) {
+    setWarningTitle(title) {
         this.text.setWarningTitle(title);
-    },
+    }
 
-    focus: function () {
+    focus() {
         this._showInput();
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
         this._showHint();
         this._checkText();
-    },
+    }
 
-    doRedMark: function () {
-        if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) {
+    doRedMark() {
+        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+        this.text.doRedMark(...arguments);
+    }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+    unRedMark() {
+        this.text.unRedMark(...arguments);
+    }
 
-    doHighLight: function () {
-        if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) {
+    doHighLight() {
+        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
-        this.text.doHighLight.apply(this.text, arguments);
-    },
+        this.text.doHighLight(...arguments);
+    }
 
-    unHighLight: function () {
-        this.text.unHighLight.apply(this.text, arguments);
-    },
+    unHighLight() {
+        this.text.unHighLight(...arguments);
+    }
 
-    isValid: function () {
+    isValid() {
         return this.editor.isValid();
-    },
+    }
 
-    setErrorText: function (text) {
+    setErrorText(text) {
         this.editor.setErrorText(text);
-    },
+    }
 
-    getErrorText: function () {
+    getErrorText() {
         return this.editor.getErrorText();
-    },
+    }
 
-    isEditing: function () {
+    isEditing() {
         return this.editor.isEditing();
-    },
+    }
 
-    getLastValidValue: function () {
+    getLastValidValue() {
         return this.editor.getLastValidValue();
-    },
+    }
 
-    getLastChangedValue: function () {
+    getLastChangedValue() {
         return this.editor.getLastChangedValue();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.editor.setValue(v);
         this._checkText();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.text.getValue();
-    },
+    }
 
-    setState: function (v) {
-        var o = this.options;
+    setState(v) {
+        const o = this.options;
         this._showHint();
-        v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text;
+        v = isEmpty(v) || v === o.text ? o.text : v + o.text;
         this.text.setValue(v);
     }
-});
-BI.SignTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.SignTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.SignTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.shortcut("bi.sign_text_editor", BI.SignTextEditor);
+}

src/widget/singleslider/button/iconbutton.slider.js

@@ -1,26 +1,24 @@
-/**
- * Created by zcf on 2016/9/22.
- */
-BI.SliderIconButton = BI.inherit(BI.Widget, {
+import { shortcut, Widget, Layout } from "@/core";
 
-    props: {
+@shortcut()
+export class SliderIconButton extends Widget {
+    static xtype = "bi.single_slider_button";
+
+    props = {
         baseCls: "bi-single-slider-button slider-button bi-high-light-border",
         height: 8,
         width: 8,
-    },
-
-    constants: {
+    }
+    constants = {
         LARGE_SIZE: 16,
         NORMAL_SIZE: 12,
         LARGE_OFFSET: 4,
-        NORMAL_OFFSET: 6
-    },
+        NORMAL_OFFSET: 6,
+    };
 
-    render: function () {
-        var self = this;
+    render() {
         return {
-            type: "bi.layout",
+            type: Layout.xtype,
         };
     }
-});
-BI.shortcut("bi.single_slider_button", BI.SliderIconButton);
+}

src/widget/singleslider/index.js

@@ -0,0 +1,5 @@
+export { SingleSlider } from "./singleslider";
+export { SingleSliderLabel } from "./singleslider.label";
+export { SingleSliderNormal } from "./singleslider.normal";
+export { SignTextEditor } from "./button/editor.sign.text";
+export { SliderIconButton } from "./button/iconbutton.slider";

src/widget/singleslider/singleslider.js

@@ -1,8 +1,29 @@
-/**
- * Created by zcf on 2016/9/22.
- */
-BI.SingleSlider = BI.inherit(BI.Single, {
-    _constant: {
+import {
+    shortcut,
+    createWidget,
+    parseFloat,
+    toPix,
+    Layout,
+    VerticalAdaptLayout,
+    AbsoluteLayout,
+    VerticalLayout,
+    HorizontalAutoLayout,
+    clamp,
+    isNumeric,
+    isNull,
+    parseInt,
+    i18nText,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single } from "@/base";
+import { SignEditor } from "@/case";
+
+@shortcut()
+export class SingleSlider extends Single {
+    static xtype = "bi.single_slider";
+
+    _constant = {
         EDITOR_WIDTH: 90,
         EDITOR_HEIGHT: 20,
         SLIDER_WIDTH_HALF: 15,
@@ -10,19 +31,21 @@ BI.SingleSlider = BI.inherit(BI.Single, {
         SLIDER_HEIGHT: 30,
         TRACK_HEIGHT: 24,
         TRACK_GAP_HALF: 7,
-        TRACK_GAP: 14
-    },
+        TRACK_GAP: 14,
+    }
 
-    props: {
+    props = {
         baseCls: "bi-single-slider bi-slider-track",
         digit: false,
         unit: "",
         value: "",
         min: 0,
         max: 100,
-    },
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    beforeMount: function () {
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -30,164 +53,192 @@ BI.SingleSlider = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        var c = this._constant;
+    render() {
+        const o = this.options;
+        const c = this._constant;
         this.enable = false;
         this.value = "";
 
-        this.grayTrack = BI.createWidget({
-            type: "bi.layout",
+        this.grayTrack = createWidget({
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
-            type: "bi.layout",
+        this.blueTrack = createWidget({
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         this.track = this._createTrackWrapper();
 
-        this.slider = BI.createWidget({
-            type: "bi.single_slider_button"
+        this.slider = createWidget({
+            type: "bi.single_slider_button",
         });
         this._draggable(this.slider);
-        var sliderVertical = BI.createWidget({
-            type: "bi.vertical_adapt",
+        const sliderVertical = createWidget({
+            type: VerticalAdaptLayout.xtype,
             cls: "slider-wrapper",
             columnSize: ["fill"],
-            items: [{
-                type: "bi.absolute",
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             el: this.slider,
                             top: 8,
                         }
                     ],
-                height: c.SLIDER_HEIGHT
-            }],
+                    height: c.SLIDER_HEIGHT,
+                }
+            ],
             hgap: c.SLIDER_WIDTH_HALF,
-            height: c.SLIDER_HEIGHT
+            height: c.SLIDER_HEIGHT,
         });
         // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
-        sliderVertical.element.click(function (e) {
-            if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) {
-                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
-                var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP;
-                var percent = 0;
+        sliderVertical.element.click(e => {
+            if (
+                this.enable &&
+                this.isEnabled() &&
+                sliderVertical.element[0] === e.originalEvent.target
+            ) {
+                const offset =
+                    e.clientX -
+                    this.element.offset().left -
+                    c.SLIDER_WIDTH_HALF;
+                const trackLength =
+                    this.track.element[0].scrollWidth - c.TRACK_GAP;
+                let percent = 0;
                 if (offset < 0) {
                     percent = 0;
                 }
                 if (offset > 0 && offset < trackLength) {
-                    percent = offset * 100 / self._getGrayTrackLength();
+                    percent = (offset * 100) / this._getGrayTrackLength();
                 }
                 if (offset >= trackLength) {
                     percent = 100;
                 }
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setAllPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                const significantPercent = parseFloat(percent.toFixed(1));
+                this._setAllPosition(significantPercent);
+                let v = this._getValueByPercent(significantPercent);
                 v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                this.label.setValue(v);
+                this.value = v;
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
             }
         });
-        this.label = BI.createWidget({
+        this.label = createWidget({
             type: "bi.sign_text_editor",
             cls: "slider-editor-button",
             text: o.unit,
-            width: BI.toPix(c.EDITOR_WIDTH, 2),
-            height: BI.toPix(c.EDITOR_HEIGHT, 2),
+            width: toPix(c.EDITOR_WIDTH, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
             allowBlank: false,
             textAlign: "center",
-            validationChecker: function (v) {
-                return self._checkValidation(v);
-            }
-        });
-        this.label.element.hover(function () {
-            self.label.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.label.element.removeClass("bi-border");
+            validationChecker: v => this._checkValidation(v),
         });
-        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
-            var v = BI.parseFloat(this.getValue());
-            var percent = self._getPercentByValue(v);
-            var significantPercent = BI.parseFloat(percent.toFixed(1));
-            self._setAllPosition(significantPercent);
+        this.label.element.hover(
+            () => {
+                this.label.element
+                    .removeClass("bi-border")
+                    .addClass("bi-border");
+            },
+            () => {
+                this.label.element.removeClass("bi-border");
+            }
+        );
+        this.label.on(SignEditor.EVENT_CONFIRM, () => {
+            const v = parseFloat(this.getValue());
+            const percent = this._getPercentByValue(v);
+            const significantPercent = parseFloat(percent.toFixed(1));
+            this._setAllPosition(significantPercent);
             this.setValue(v);
-            self.value = v;
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            this.value = v;
+            this.fireEvent(SingleSlider.EVENT_CHANGE);
         });
         this._setVisible(false);
+        
         return {
-            type: "bi.absolute",
-            items: [{
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.track,
                                         width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
-                    }],
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
                         hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+                        height: c.TRACK_HEIGHT,
                     },
                     top: 23,
                     left: 0,
-                width: "100%"
-            }, {
+                    width: "100%",
+                },
+                {
                     el: sliderVertical,
                     top: 20,
                     left: 0,
-                width: "100%"
-            }, {
+                    width: "100%",
+                },
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.horizontal_auto",
-                        items: [this.label]
-                    }],
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: HorizontalAutoLayout.xtype,
+                                items: [this.label],
+                            }
+                        ],
                         // height: c.EDITOR_HEIGHT
                     },
                     top: 0,
                     left: 0,
-                width: "100%"
-            }]
+                    width: "100%",
+                }
+            ],
         };
-    },
+    }
 
-    _draggable: function (widget) {
-        var self = this, o = this.options;
-        var startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+    _draggable(widget) {
+        const o = this.options;
+        let startDrag = false;
+        let size = 0,
+            offset = 0,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                var percent = size * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                self._setSliderPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    this._setBlueTrack(significantPercent);
+                    this._setLabelPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
+                    let v = this._getValueByPercent(significantPercent);
                     v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
+                    this.label.setValue(v);
+                    this.value = v;
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                var percent = size * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1));
+                    this._setSliderPosition(significantPercent);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -195,8 +246,10 @@ BI.SingleSlider = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-        }, window);
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -206,100 +259,107 @@ BI.SingleSlider = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
     }
-    },
 
-    _createTrackWrapper: function () {
-        return BI.createWidget({
-            type: "bi.absolute",
-            items: [{
+    _createTrackWrapper() {
+        return createWidget({
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.grayTrack,
                                         top: 0,
                                         left: 0,
-                            width: "100%"
-                        }, {
+                                        width: "100%",
+                                    },
+                                    {
                                         el: this.blueTrack,
                                         top: 0,
                                         left: 0,
-                            width: "0%"
-                        }]
-                    }],
+                                        width: "0%",
+                                    }
+                                ],
+                            }
+                        ],
                         hgap: 8,
-                    height: 8
+                        height: 8,
                     },
                     top: 8,
                     left: 0,
-                width: "100%"
-            }]
+                    width: "100%",
+                }
+            ],
         });
-    },
+    }
 
-    _checkValidation: function (v) {
-        var o = this.options;
-        var valid = false;
-        if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
+    _checkValidation(v) {
+        const o = this.options;
+        let valid = false;
+        if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) {
             if (o.digit === false) {
                 valid = true;
             } else {
-                var dotText = (v + "").split(".")[1] || "";
-                valid = (dotText.length === o.digit);
+                const dotText = (`${v}`).split(".")[1] || "";
+                valid = dotText.length === o.digit;
             }
         }
+        
         return valid;
-    },
+    }
 
-    _setBlueTrack: function (percent) {
-        this.blueTrack.element.css({width: percent + "%"});
-    },
+    _setBlueTrack(percent) {
+        this.blueTrack.element.css({ width: `${percent}%` });
+    }
 
-    _setLabelPosition: function (percent) {
+    _setLabelPosition(percent) {
         // this.label.element.css({left: percent + "%"});
-    },
+    }
 
-    _setSliderPosition: function (percent) {
-        this.slider.element.css({left: percent + "%"});
-    },
+    _setSliderPosition(percent) {
+        this.slider.element.css({ left: `${percent}%` });
+    }
 
-    _setAllPosition: function (percent) {
+    _setAllPosition(percent) {
         this._setSliderPosition(percent);
         this._setLabelPosition(percent);
         this._setBlueTrack(percent);
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.slider.setVisible(visible);
         this.label.setVisible(visible);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    _getValueByPercent: function (percent) {
-        var thousandth = BI.parseInt(percent * 10);
-        return (((this.max - this.min) * thousandth) / 1000 + this.min);
-    },
+    _getValueByPercent(percent) {
+        const thousandth = parseInt(percent * 10);
         
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - this.min);
-    },
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
+
+    _getPercentByValue(v) {
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
 
-    getValue: function () {
+    getValue() {
         return this.value;
-    },
+    }
 
-    setValue: function (v) {
-        var o = this.options;
-        v = BI.parseFloat(v);
+    setValue(v) {
+        const o = this.options;
+        v = parseFloat(v);
         v = o.digit === false ? v : v.toFixed(o.digit);
-        if ((!isNaN(v))) {
+        if (!isNaN(v)) {
             if (this._checkValidation(v)) {
                 this.value = v;
             }
@@ -310,47 +370,63 @@ BI.SingleSlider = BI.inherit(BI.Single, {
                 this.value = this.min;
             }
         }
-    },
+    }
 
-    _setEnable: function (b) {
-        BI.SingleSlider.superclass._setEnable.apply(this, [b]);
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
         if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
+        }
     }
-    },
 
-    setMinAndMax: function (v) {
-        var minNumber = BI.parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+    setMinAndMax(v) {
+        const minNumber = parseFloat(v.min);
+        const maxNumber = parseFloat(v.max);
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.value = "";
         this.min = 0;
         this.max = 0;
         this._setBlueTrack(0);
-    },
+    }
 
-    populate: function () {
-        var o = this.options;
+    populate() {
+        const o = this.options;
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this._setVisible(true);
             this.enable = true;
             if (o.digit) {
-                this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max));
+                this.label.setErrorText(
+                    i18nText(
+                        "BI-Basic_Please_Enter_Number_Between",
+                        this.min,
+                        this.max
+                    )
+                );
             } else {
-                this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Integer_Number_Between", this.min, this.max));
+                this.label.setErrorText(
+                    i18nText(
+                        "BI-Basic_Please_Enter_Integer_Number_Between",
+                        this.min,
+                        this.max
+                    )
+                );
             }
 
-            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+            if (isNumeric(this.value) || isNotEmptyString(this.value)) {
                 this.label.setValue(this.value);
                 this._setAllPosition(this._getPercentByValue(this.value));
             } else {
@@ -359,6 +435,4 @@ BI.SingleSlider = BI.inherit(BI.Single, {
             }
         }
     }
-});
-BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.single_slider", BI.SingleSlider);
+}

src/widget/singleslider/singleslider.label.js

@@ -1,8 +1,26 @@
-/**
- * Created by Urthur on 2017/9/12.
- */
-BI.SingleSliderLabel = BI.inherit(BI.Single, {
-    _constant: {
+import {
+    shortcut,
+    createWidget,
+    parseFloat,
+    toPix,
+    Layout,
+    VerticalAdaptLayout,
+    AbsoluteLayout,
+    VerticalLayout,
+    HorizontalAutoLayout,
+    clamp,
+    isNumeric,
+    isNull,
+    parseInt,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single, Label } from "@/base";
+
+@shortcut()
+export class SingleSliderLabel extends Single {
+    static xtype = "bi.single_slider_label";
+    _constant = {
         EDITOR_WIDTH: 90,
         EDITOR_HEIGHT: 20,
         HEIGHT: 20,
@@ -11,19 +29,20 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
         SLIDER_HEIGHT: 30,
         TRACK_HEIGHT: 24,
         TRACK_GAP_HALF: 7,
-        TRACK_GAP: 14
-    },
-
-    props: {
+        TRACK_GAP: 14,
+    }
+    props = {
         baseCls: "bi-single-slider-label bi-slider-track",
         digit: false,
         unit: "",
         value: "",
         min: 0,
         max: 100,
-    },
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    beforeMount: function () {
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -31,143 +50,168 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        var c = this._constant;
+    render() {
+        const o = this.options;
+        const c = this._constant;
         this.enable = false;
         this.value = "";
 
-        this.grayTrack = BI.createWidget({
-            type: "bi.layout",
+        this.grayTrack = createWidget({
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
-            type: "bi.layout",
+        this.blueTrack = createWidget({
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         this.track = this._createTrackWrapper();
 
-        this.slider = BI.createWidget({
-            type: "bi.single_slider_button"
+        this.slider = createWidget({
+            type: "bi.single_slider_button",
         });
         this._draggable(this.slider);
-        var sliderVertical = BI.createWidget({
-            type: "bi.vertical_adapt",
+        const sliderVertical = createWidget({
+            type: VerticalAdaptLayout.xtype,
             columnSize: ["fill"],
-            items: [{
-                type: "bi.absolute",
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             el: this.slider,
                             top: 8,
                         }
                     ],
-                height: c.SLIDER_HEIGHT
-            }],
+                    height: c.SLIDER_HEIGHT,
+                }
+            ],
             hgap: c.SLIDER_WIDTH_HALF,
-            height: c.SLIDER_HEIGHT
+            height: c.SLIDER_HEIGHT,
         });
-        sliderVertical.element.click(function (e) {
-            if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) {
-                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
-                var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP;
-                var percent = 0;
+        sliderVertical.element.click(e => {
+            if (
+                this.enable &&
+                this.isEnabled() &&
+                sliderVertical.element[0] === e.originalEvent.target
+            ) {
+                const offset =
+                    e.clientX -
+                    this.element.offset().left -
+                    c.SLIDER_WIDTH_HALF;
+                const trackLength =
+                    this.track.element[0].scrollWidth - c.TRACK_GAP;
+                let percent = 0;
                 if (offset < 0) {
                     percent = 0;
                 }
                 if (offset > 0 && offset < trackLength) {
-                    percent = offset * 100 / self._getGrayTrackLength();
+                    percent = (offset * 100) / this._getGrayTrackLength();
                 }
                 if (offset >= trackLength) {
                     percent = 100;
                 }
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setAllPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                const significantPercent = parseFloat(percent.toFixed(1));
+                this._setAllPosition(significantPercent);
+                let v = this._getValueByPercent(significantPercent);
                 v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                this.label.setText(v + o.unit);
+                this.value = v;
+                this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
             }
         });
-        this.label = BI.createWidget({
-            type: "bi.label",
+        this.label = createWidget({
+            type: Label.xtype,
             height: c.HEIGHT,
-            width: BI.toPix(c.EDITOR_WIDTH, 2)
+            width: toPix(c.EDITOR_WIDTH, 2),
         });
 
         this._setVisible(false);
-        return ({
-            type: "bi.absolute",
-            items: [{
+        
+        return {
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.track,
                                         width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
-                    }],
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
                         hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+                        height: c.TRACK_HEIGHT,
                     },
                     top: 13,
                     left: 0,
-                width: "100%"
-            }, {
+                    width: "100%",
+                },
+                {
                     el: sliderVertical,
                     top: 10,
                     left: 0,
-                width: "100%"
-            }, {
+                    width: "100%",
+                },
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.horizontal_auto",
-                        items: [this.label]
-                    }],
-                    height: c.EDITOR_HEIGHT
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: HorizontalAutoLayout.xtype,
+                                items: [this.label],
+                            }
+                        ],
+                        height: c.EDITOR_HEIGHT,
                     },
                     top: 0,
                     left: 0,
-                width: "100%"
-            }]
-        });
-    },
+                    width: "100%",
+                }
+            ],
+        };
+    }
 
-    _draggable: function (widget) {
-        var self = this, o = this.options;
-        var startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+    _draggable(widget) {
+        const o = this.options;
+        let startDrag = false;
+        let size = 0,
+            offset = 0,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                var percent = size * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                self._setSliderPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    this._setBlueTrack(significantPercent);
+                    this._setLabelPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
+                    let v = this._getValueByPercent(significantPercent);
                     v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                    this.label.setValue(v + o.unit);
+                    this.value = v;
+                    this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                var percent = size * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1));
+                    this._setSliderPosition(significantPercent);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -175,8 +219,10 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-        }, window);
+                this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -186,99 +232,109 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize(s) {
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
     }
-    },
 
-    _createTrackWrapper: function () {
-        return BI.createWidget({
-            type: "bi.absolute",
-            items: [{
+    _createTrackWrapper() {
+        return createWidget({
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.grayTrack,
                                         top: 0,
                                         left: 0,
-                            width: "100%"
-                        }, {
+                                        width: "100%",
+                                    },
+                                    {
                                         el: this.blueTrack,
                                         top: 0,
                                         left: 0,
-                            width: "0%"
-                        }]
-                    }],
+                                        width: "0%",
+                                    }
+                                ],
+                            }
+                        ],
                         hgap: 8,
-                    height: 8
+                        height: 8,
                     },
                     top: 8,
                     left: 0,
-                width: "100%"
-            }]
+                    width: "100%",
+                }
+            ],
         });
-    },
+    }
 
-    _checkValidation: function (v) {
-        return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max);
-    },
+    _checkValidation(v) {
+        return isNumeric(v) && !(isNull(v) || v < this.min || v > this.max);
+    }
 
-    _setBlueTrack: function (percent) {
-        this.blueTrack.element.css({ width: percent + "%" });
-    },
+    _setBlueTrack(percent) {
+        this.blueTrack.element.css({ width: `${percent}%` });
+    }
 
-    _setLabelPosition: function (percent) {
+    _setLabelPosition(percent) {
         // this.label.element.css({left: percent + "%"});
-    },
+    }
 
-    _setSliderPosition: function (percent) {
-        this.slider.element.css({ left: percent + "%" });
-    },
+    _setSliderPosition(percent) {
+        this.slider.element.css({ left: `${percent}%` });
+    }
 
-    _setAllPosition: function (percent) {
+    _setAllPosition(percent) {
         this._setSliderPosition(percent);
         this._setLabelPosition(percent);
         this._setBlueTrack(percent);
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.slider.setVisible(visible);
         this.label.setVisible(visible);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    _getValueByPercent: function (percent) {
-        var thousandth = BI.parseInt(percent * 10);
-        return (((this.max - this.min) * thousandth) / 1000 + this.min);
-    },
+    _getValueByPercent(percent) {
+        const thousandth = parseInt(percent * 10);
         
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - this.min);
-    },
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _setEnable: function (b) {
-        BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
+    _getPercentByValue(v) {
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
+
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
         if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
+        }
     }
-    },
 
-    getValue: function () {
+    getValue() {
         return this.value;
-    },
+    }
 
-    setValue: function (v) {
-        var o = this.options;
-        v = BI.parseFloat(v);
+    setValue(v) {
+        const o = this.options;
+        v = parseFloat(v);
         v = o.digit === false ? v : v.toFixed(o.digit);
-        if ((!isNaN(v))) {
+        if (!isNaN(v)) {
             if (this._checkValidation(v)) {
                 this.value = v;
             }
@@ -289,32 +345,32 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
                 this.value = this.min;
             }
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
-        var minNumber = BI.parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
+    setMinAndMax(v) {
+        const minNumber = parseFloat(v.min);
+        const maxNumber = parseFloat(v.max);
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.value = "";
         this.min = 0;
         this.max = 0;
         this._setBlueTrack(0);
-    },
+    }
 
-    populate: function () {
-        var o = this.options;
+    populate() {
+        const o = this.options;
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this._setVisible(true);
             this.enable = true;
-            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+            if (isNumeric(this.value) || isNotEmptyString(this.value)) {
                 this.label.setValue(this.value + o.unit);
                 this._setAllPosition(this._getPercentByValue(this.value));
             } else {
@@ -323,6 +379,4 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
             }
         }
     }
-});
-BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);
+}

src/widget/singleslider/singleslider.normal.js

@@ -1,28 +1,43 @@
-/**
- * normal single slider
- * Created by Young on 2017/6/21.
- */
-BI.SingleSliderNormal = BI.inherit(BI.Single, {
+import {
+    shortcut,
+    createWidget,
+    parseFloat,
+    VerticalAdaptLayout,
+    AbsoluteLayout,
+    VerticalLayout,
+    clamp,
+    Layout,
+    isNull,
+    parseInt,
+    isNumeric,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single } from "@/base";
+import { SingleSlider } from "./singleslider";
 
-    _constant: {
+@shortcut()
+export class SingleSliderNormal extends Single {
+    static xtype = "bi.single_slider_normal";
+    _constant = {
         HEIGHT: 28,
         SLIDER_WIDTH_HALF: 15,
         SLIDER_WIDTH: 30,
         SLIDER_HEIGHT: 30,
         TRACK_HEIGHT: 24,
         TRACK_GAP_HALF: 7,
-        TRACK_GAP: 14
-    },
-
-    props: {
+        TRACK_GAP: 14,
+    }
+    props = {
         baseCls: "bi-single-slider-normal bi-slider-track",
         min: 0,
         max: 100,
         value: "",
-        // color: "#3f8ce8"
-    },
+    };
 
-    beforeMount: function () {
+    static EVENT_DRAG = "EVENT_DRAG";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -30,111 +45,130 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
 
-    render: function () {
-        var self = this;
-        var o = this.options;
-        var c = this._constant;
+    render() {
+        const c = this._constant;
 
-        var track = this._createTrack();
-        this.slider = BI.createWidget({
-            type: "bi.single_slider_button"
+        const track = this._createTrack();
+        this.slider = createWidget({
+            type: "bi.single_slider_button",
         });
         this._draggable(this.slider);
 
-        var sliderVertical = BI.createWidget({
-            type: "bi.vertical_adapt",
+        const sliderVertical = createWidget({
+            type: VerticalAdaptLayout.xtype,
             columnSize: ["fill"],
-            items: [{
-                type: "bi.absolute",
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             el: this.slider,
                             top: 8,
                         }
                     ],
-                height: c.SLIDER_HEIGHT
-            }],
+                    height: c.SLIDER_HEIGHT,
+                }
+            ],
             hgap: c.SLIDER_WIDTH_HALF,
-            height: c.SLIDER_HEIGHT
+            height: c.SLIDER_HEIGHT,
         });
-        sliderVertical.element.click(function (e) {
-            if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) {
-                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
-                var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP;
-                var percent = 0;
+        sliderVertical.element.click(e => {
+            if (
+                this.enable &&
+                this.isEnabled() &&
+                sliderVertical.element[0] === e.originalEvent.target
+            ) {
+                const offset =
+                    e.clientX -
+                    this.element.offset().left -
+                    c.SLIDER_WIDTH_HALF;
+                const trackLength =
+                    this.track.element[0].scrollWidth - c.TRACK_GAP;
+                let percent = 0;
                 if (offset < 0) {
                     percent = 0;
                 }
                 if (offset > 0 && offset < trackLength) {
-                    percent = offset * 100 / self._getGrayTrackLength();
+                    percent = (offset * 100) / this._getGrayTrackLength();
                 }
                 if (offset >= trackLength) {
                     percent = 100;
                 }
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setAllPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                const significantPercent = parseFloat(percent.toFixed(1));
+                this._setAllPosition(significantPercent);
+                const v = this._getValueByPercent(significantPercent);
+                this.value = v;
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
             }
         });
 
         return {
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: track,
                                         width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
-                    }],
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
                         hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+                        height: c.TRACK_HEIGHT,
                     },
                     top: 3,
                     left: 0,
-                width: "100%"
-            }, {
+                    width: "100%",
+                },
+                {
                     el: sliderVertical,
                     top: 0,
                     left: 0,
-                width: "100%"
-            }]
+                    width: "100%",
+                }
+            ],
         };
-    },
+    }
 
-    _draggable: function (widget) {
-        var self = this, o = this.options;
-        var startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+    _draggable(widget) {
+        const o = this.options;
+        let startDrag = false;
+        let size = 0,
+            offset = 0,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                var percent = size * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setSliderPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    this._setBlueTrack(significantPercent);
+                    this._setSliderPosition(significantPercent);
+                    let v = this._getValueByPercent(significantPercent);
                     v = o.digit === false ? v : v.toFixed(o.digit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+                    this.value = v;
+                    this.fireEvent(SingleSliderNormal.EVENT_DRAG, v);
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                var percent = size * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1));
+                    this._setSliderPosition(significantPercent);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -142,8 +176,10 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-        }, window);
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -153,110 +189,120 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
     }
-    },
 
-    _createTrack: function () {
-        var self = this;
-        var c = this._constant;
-        this.grayTrack = BI.createWidget({
-            type: "bi.layout",
+    _createTrack() {
+        this.grayTrack = createWidget({
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
-            type: "bi.layout",
+        this.blueTrack = createWidget({
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         if (this.options.color) {
-            this.blueTrack.element.css({"background-color": this.options.color});
+            this.blueTrack.element.css({
+                "background-color": this.options.color,
+            });
         }
 
         return {
-            type: "bi.absolute",
-            items: [{
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.grayTrack,
                                         top: 0,
                                         left: 0,
-                            width: "100%"
-                        }, {
+                                        width: "100%",
+                                    },
+                                    {
                                         el: this.blueTrack,
                                         top: 0,
                                         left: 0,
-                            width: "0%"
-                        }]
-                    }],
+                                        width: "0%",
+                                    }
+                                ],
+                            }
+                        ],
                         hgap: 8,
-                    height: 8
+                        height: 8,
                     },
                     top: 8,
                     left: 0,
-                width: "100%"
-            }],
-            ref: function (ref) {
-                self.track = ref;
+                    width: "100%",
                 }
-        };
+            ],
+            ref: _ref => {
+                this.track = _ref;
             },
+        };
+    }
 
-    _checkValidation: function (v) {
-        return !(BI.isNull(v) || v < this.min || v > this.max);
-    },
+    _checkValidation(v) {
+        return !(isNull(v) || v < this.min || v > this.max);
+    }
 
-    _setBlueTrack: function (percent) {
-        this.blueTrack.element.css({width: percent + "%"});
-    },
+    _setBlueTrack(percent) {
+        this.blueTrack.element.css({ width: `${percent}%` });
+    }
 
-    _setSliderPosition: function (percent) {
-        this.slider.element.css({left: percent + "%"});
-    },
+    _setSliderPosition(percent) {
+        this.slider.element.css({ left: `${percent}%` });
+    }
 
-    _setAllPosition: function (percent) {
+    _setAllPosition(percent) {
         this._setSliderPosition(percent);
         this._setBlueTrack(percent);
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.slider.setVisible(visible);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    _getValueByPercent: function (percent) {
-        var thousandth = BI.parseInt(percent * 10);
-        return (((this.max - this.min) * thousandth) / 1000 + this.min);
-    },
+    _getValueByPercent(percent) {
+        const thousandth = parseInt(percent * 10);
         
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - this.min);
-    },
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _setEnable: function (b) {
-        BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
+    _getPercentByValue(v) {
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
+
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
         if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
+        }
     }
-    },
 
-    getValue: function () {
+    getValue() {
         return this.value;
-    },
+    }
 
-    setValue: function (v) {
-        var value = BI.parseFloat(v);
-        if ((!isNaN(value))) {
+    setValue(v) {
+        const value = parseFloat(v);
+        if (!isNaN(value)) {
             if (this._checkValidation(value)) {
                 this.value = value;
             }
@@ -267,37 +313,35 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
                 this.value = this.min;
             }
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
-        var minNumber = BI.parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+    setMinAndMax(v) {
+        const minNumber = parseFloat(v.min);
+        const maxNumber = parseFloat(v.max);
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.value = "";
         this.min = 0;
         this.max = 0;
         this._setBlueTrack(0);
-    },
+    }
 
-    populate: function () {
+    populate() {
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this._setVisible(true);
             this.enable = true;
-            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+            if (isNumeric(this.value) || isNotEmptyString(this.value)) {
                 this._setAllPosition(this._getPercentByValue(this.value));
             } else {
                 this._setAllPosition(100);
             }
         }
     }
-});
-BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
-BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);
+}