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({
-                    type: "bi.hex_color_chooser_popup",
-                    recommendColorsGetter: o.recommendColorsGetter,
-                    ref: function (_ref) {
-                        self.colorPicker = _ref;
-                    },
-                    listeners: [{
-                        eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
-                        action: function () {
-                            fn();
-                            if (!self._isRGBColor(self.colorPicker.getValue())) {
-                                self.combo.hideView();
-                            }
-                        }
-                    }, {
-                        eventName: BI.ColorChooserPopup.EVENT_CHANGE,
-                        action: function () {
-                            fn();
-                            self.combo.hideView();
-                        }
-                    }]
-                }, o.popup),
-                value: o.value,
-                width: 300
-            }),
-            value: o.value
+            popup: () => {
+                return {
+                    el: extend({
+                        type: "bi.hex_color_chooser_popup",
+                        recommendColorsGetter: o.recommendColorsGetter,
+                        ref: _ref => {
+                            this.colorPicker = _ref;
+                        },
+                        listeners: [{
+                            eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
+                            action: () => {
+                                fn();
+                                if (!this._isRGBColor(this.colorPicker.getValue())) {
+                                    this.combo.hideView();
+                                }
+                            },
+                        }, {
+                            eventName: ColorChooserPopup.EVENT_CHANGE,
+                            action: () => {
+                                fn();
+                                this.combo.hideView();
+                            },
+                        }],
+                    }, o.popup),
+                    value: o.value,
+                    width: 300,
+                };
+            },
+            value: o.value,
         });
 
-        var fn = function () {
-            var color = self.colorPicker.getValue();
-            self.setValue(color);
-        };
-
-        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: function () {
-        var self = this, o = this.options;
-        var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter());
+    render() {
+        const o = this.options;
+        const hasRecommendColors = 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: function (_ref) {
-                                    self.recommendColors = _ref;
-                                }
-                            }]
-                        } : {type: "bi.layout"},
+                                ref: _ref => {
+                                    this.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();
-                                        break;
-                                    case 1:
-                                        var color = self.customColorChooser.getValue();
-                                        // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明
-                                        if (BI.isNotEmptyString(color)) {
-                                            self.setValue(color);
-                                            self._dealStoreColors();
-                                        }
-                                        self.more.hideView();
-                                        self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
-                                        break;
+                                case 0:
+                                    this.more.hideView();
+                                    break;
+                                case 1: {
+                                    const color = this.customColorChooser.getValue();
+                                    // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明
+                                    if (isNotEmptyString(color)) {
+                                        this.setValue(color);
+                                        this._dealStoreColors();
+                                    }
+                                    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") || "");
+        
+        return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
+    }
 
-    _isRGBColor: function (color) {
-        return BI.isNotEmptyString(color) && color !== "transparent";
-    },
+    _isRGBColor(color) {
+        return isNotEmptyString(color) && color !== "transparent";
+    }
 
-    setStoreColors: function (colors) {
-        if (BI.isArray(colors)) {
+    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,25 +94,27 @@ 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();
-                    break;
-                case 1:
-                    self.setValue(self.customColorChooser.getValue());
-                    self._dealStoreColors();
-                    self.more.hideView();
-                    self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
-                    break;
+            case 0:
+                this.more.hideView();
+                break;
+            case 1:
+                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") || "");
+        
+        return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
+    }
 
-    _isRGBColor: function (color) {
-        return BI.isNotEmptyString(color) && color !== "transparent";
-    },
+    _isRGBColor (color) {
+        return isNotEmptyString(color) && color !== "transparent";
+    }
 
-    setStoreColors: function (colors) {
-        if (BI.isArray(colors)) {
+    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,28 +46,26 @@ 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") {
             this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background");
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
+            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: 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
+    _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: 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);
@@ -88,11 +95,9 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
             this.changeIcon.setIcon("trans-color-icon");
             this.label.setText(BI.i18nText("BI-Transparent_Color"));
         } else {
-            this.colorContainer.element.css({"background-color": color});
+            this.colorContainer.element.css({ "background-color": color });
             this.changeIcon.setVisible(false);
             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";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    props: {
-        baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius',
-    },
+    props = {
+        baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius",
+    }
 
-    render: function () {
-        var self = this, o = this.options;
+    render() {
+        const 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,166 +1,173 @@
+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() {
+        const o = this.options;
 
-    render: function () {
-        var self = this, o = this.options;
-        
         return {
             type: "bi.button_group",
             items: this._digest(o.items || this._items),
@@ -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, {
-
-    constants: {
-        RGB_WIDTH: 32,
-        HEX_WIDTH: 70,
-        HEX_PREFIX_POSITION: 1
-    },
-
-    props: {
+@shortcut()
+export class HexColorPickerEditor extends Widget {
+    static xtype = "bi.hex_color_picker_editor";
+    
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    
+    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;
 
-    props: {
+@shortcut()
+export class Farbtastic extends BasicButton {
+    static xtype = "bi.farbtastic";
+
+    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: function (rgb) {
-        var r = Math.round(rgb[0] * 255);
-        var g = Math.round(rgb[1] * 255);
-        var b = Math.round(rgb[2] * 255);
+    _pack(rgb) {
+        const r = Math.round(rgb[0] * 255);
+        const g = Math.round(rgb[1] * 255);
+        const 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);
-    },
+        (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/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,143 +1,155 @@
-(function() {
-    function transformItems(items) {
-        if (!items) return items;
-        var result = BI.cloneDeep(items);
-        var isComplexItmes = BI.some(items, function (_, item) {
-            return BI.isArray(item);
+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;
+    let result = cloneDeep(items);
+    const isComplexItmes = some(items, (_, item) => isArray(item));
+    // 传一维数组，帮转二维
+    if (!isComplexItmes) {
+        result = [result];
+    }
+    // 帮转 el
+    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,
+                };
+            }
         });
-        // 传一维数组，帮转二维
-        if (!isComplexItmes) {
-            result = [result];
-        }
-        // 帮转 el
-        BI.each(result, function (_, arr) {
-            BI.each(arr, function (_, item) {
-                if (item.children && !item.el) {
-                    item.el = {
-                        text: item.text,
-                        icon: item.icon,
-                        cls: item.cls,
-                        iconCls1: item.iconCls1,
-                        value: item.value
-                    };
-                }
-            });
+    });
+    
+    return result;
+}
+
+@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: [],
+            adjustLength: 0,
+            direction: "bottom",
+            trigger: "click",
+            container: null,
+            stopPropagation: false,
+            el: {},
+            popup: {},
+            minWidth: 140,
+            maxHeight: 1000,
+            destroyWhenHide: false,
+            isDefaultInit: true,
         });
-        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), {
-                baseCls: "bi-down-list-combo",
-                height: 24,
-                items: [],
-                adjustLength: 0,
-                direction: "bottom",
-                trigger: "click",
-                container: null,
-                stopPropagation: false,
-                el: {},
-                popup: {},
-                minWidth: 140,
-                maxHeight: 1000,
-                destroyWhenHide: false,
-                isDefaultInit: true,
-            });
-        },
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
 
-        _init: function () {
-            BI.DownListCombo.superclass._init.apply(this, arguments);
-            var self = this, o = this.options;
-
-            this.downlistcombo = BI.createWidget({
-                element: this,
-                type: "bi.combo",
-                trigger: o.trigger,
-                isNeedAdjustWidth: false,
-                isDefaultInit: o.isDefaultInit,
-                container: o.container,
-                adjustLength: o.adjustLength,
-                direction: o.direction,
-                belowMouse: o.belowMouse,
-                stopPropagation: o.stopPropagation,
-                destroyWhenHide: o.destroyWhenHide,
+        this.downlistcombo = createWidget({
+            element: this,
+            type: Combo.xtype,
+            trigger: o.trigger,
+            isNeedAdjustWidth: false,
+            isDefaultInit: o.isDefaultInit,
+            container: o.container,
+            adjustLength: o.adjustLength,
+            direction: o.direction,
+            belowMouse: o.belowMouse,
+            stopPropagation: o.stopPropagation,
+            destroyWhenHide: o.destroyWhenHide,
+            el: {
+                type: IconTrigger.xtype,
+                extraCls: o.iconCls,
+                width: o.width,
+                height: o.height,
+                ...o.el,
+            },
+            popup: {
                 el: {
-                    type: "bi.icon_trigger",
-                    extraCls: o.iconCls,
-                    width: o.width,
-                    height: o.height,
-                    ...o.el
-                },
-                popup: {
-                    el: {
-                        type: "bi.down_list_popup",
-                        ref: function (ref) {
-                            self.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();
-                            }
-                        }]
+                    type: DownListPopup.xtype,
+                    ref: _ref => {
+                        this.popupView = _ref;
                     },
-                    stopPropagation: o.stopPropagation,
-                    maxHeight: o.maxHeight,
-                    minWidth: o.minWidth,
-                    ...o.popup
-                }
-            });
-
-            this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
-                self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW);
-            });
-        },
+                    items: transformItems(o.items),
+                    chooseType: o.chooseType,
+                    value: o.value,
+                    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,
+            },
+        });
 
-        hideView: function () {
-            this.downlistcombo.hideView();
-        },
+        this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW);
+        });
+    }
 
-        showView: function (e) {
-            this.downlistcombo.showView(e);
-        },
+    hideView() {
+        this.downlistcombo.hideView();
+    }
 
-        populate: function (items) {
-            this.popupView.populate(items);
-        },
+    showView(e) {
+        this.downlistcombo.showView(e);
+    }
 
-        setValue: function (v) {
-            this.popupView.setValue(v);
-        },
+    populate(items) {
+        this.popupView.populate(items);
+    }
 
-        getValue: function () {
-            return this.popupView.getValue();
-        },
+    setValue(v) {
+        this.popupView.setValue(v);
+    }
 
-        adjustWidth: function () {
-            this.downlistcombo.adjustWidth();
-        },
+    getValue() {
+        return this.popupView.getValue();
+    }
 
-        adjustHeight: function () {
-            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";
+    adjustWidth() {
+        this.downlistcombo.adjustWidth();
+    }
 
-    BI.shortcut("bi.down_list_combo", BI.DownListCombo);
-}());
+    adjustHeight() {
+        this.downlistcombo.adjustHeight();
+    }
+}

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), {
-            baseCls: "bi-down-list-group",
-            items: [
-                {
-                    el: {}
-                }
-            ]
-        });
-    },
-    _init: function () {
-        BI.DownListGroup.superclass._init.apply(this, arguments);
-        var o = this.options, self = this;
-
-        this.downlistgroup = BI.createWidget({
-            element: this,
-            type: "bi.button_tree",
-            items: o.items,
-            chooseType: 0, // 0单选，1多选
-            layouts: [{
-                type: "bi.vertical",
-                hgap: 0,
-                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);
-            }
-        });
-    },
-    getValue: function () {
-        return this.downlistgroup.getValue();
-    },
-    setValue: function (v) {
-        this.downlistgroup.setValue(v);
-    }
-
-
-});
-BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.down_list_group", BI.DownListGroup);
+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: {},
+              }
+          ],
+      });
+  }
+
+  _init() {
+      super._init(...arguments);
+      const o = this.options;
+
+      this.downlistgroup = createWidget({
+          element: this,
+          type: "bi.button_tree",
+          items: o.items,
+          chooseType: 0, // 0单选，1多选
+          layouts: [
+              {
+                  type: "bi.vertical",
+                  hgap: 0,
+                  vgap: 0,
+              }
+          ],
+          value: o.value,
+      });
+      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() {
+      return this.downlistgroup.getValue();
+  }
+
+  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,102 +1,125 @@
-BI.DownListItem = BI.inherit(BI.BasicButton, {
-    _defaultConfig: function () {
-        var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: "bi-down-list-item bi-list-item-active",
-            cls: "",
-            height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            logic: {
-                dynamic: true
-            },
-            selected: false,
-            iconHeight: null,
-            iconWidth: null,
-            textHgap: 0,
-            textVgap: 0,
-            textLgap: 0,
-            textRgap: 0
-        });
-    },
-    _init: function () {
-        BI.DownListItem.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.text = BI.createWidget({
-            type: "bi.label",
-            cls: "list-item-text",
-            textAlign: "left",
-            hgap: o.textHgap,
-            vgap: o.textVgap,
-            lgap: o.textLgap,
-            rgap: o.textRgap,
-            text: o.text,
-            value: o.value,
-            keyword: o.keyword,
-            height: o.height
-        });
-
-
-        var icon = BI.isPlainObject(o.icon) ? o.icon : {
-            type: "bi.icon",
-            width: o.iconWidth,
-            height: o.iconHeight,
-        }
-
-        this.icon = BI.createWidget({
-            type: "bi.center_adapt",
-            width: 36,
-            height: o.height,
-            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)
-        }))));
-    },
-
-    setValue: function () {
-        if (!this.isReadOnly()) {
-            this.text.setValue.apply(this.text, arguments);
-        }
-    },
-
-    getValue: function () {
-        return this.text.getValue();
-    },
-
-    setText: function () {
-        this.text.setText.apply(this.text, arguments);
-    },
-
-    getText: function () {
-        return this.text.getText();
-    },
-
-    doClick: function () {
-        BI.DownListItem.superclass.doClick.apply(this, arguments);
-        if (this.isValid()) {
-            this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this);
-        }
-    },
-
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
-
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
-
-    doHighLight: function () {
-        this.text.doHighLight.apply(this.text, arguments);
-    },
-
-    unHighLight: function () {
-        this.text.unHighLight.apply(this.text, arguments);
-    }
-});
-BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.down_list_item", BI.DownListItem);
+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,
+          },
+          selected: false,
+          iconHeight: null,
+          iconWidth: null,
+          textHgap: 0,
+          textVgap: 0,
+          textLgap: 0,
+          textRgap: 0,
+      });
+  }
+
+  _init() {
+      super._init(...arguments);
+      const o = this.options;
+      this.text = createWidget({
+          type: "bi.label",
+          cls: "list-item-text",
+          textAlign: "left",
+          hgap: o.textHgap,
+          vgap: o.textVgap,
+          lgap: o.textLgap,
+          rgap: o.textRgap,
+          text: o.text,
+          value: o.value,
+          keyword: o.keyword,
+          height: o.height,
+      });
+
+      const icon = isPlainObject(o.icon)
+          ? o.icon
+          : {
+              type: "bi.icon",
+              width: o.iconWidth,
+              height: o.iconHeight,
+          };
+
+      this.icon = createWidget({
+          type: "bi.center_adapt",
+          width: 36,
+          height: o.height,
+          items: [
+              {
+                  el: icon,
+              }
+          ],
+      });
+
+      createWidget(
+          extend(
+              {
+                  element: this,
+              },
+              LogicFactory.createLogic(
+                  LogicFactory.createLogicTypeByDirection(Direction.Left),
+                  extend(o.logic, {
+                      items: LogicFactory.createLogicItemsByDirection(
+                          Direction.Left,
+                          this.icon,
+                          this.text
+                      ),
+                  })
+              )
+          )
+      );
+  }
+
+  setValue() {
+      if (!this.isReadOnly()) {
+          this.text.setValue(...arguments);
+      }
+  }
+
+  getValue() {
+      return this.text.getValue();
+  }
+
+  setText() {
+      this.text.setText(...arguments);
+  }
+
+  getText() {
+      return this.text.getText();
+  }
+
+  doClick() {
+      super.doClick(...arguments);
+      if (this.isValid()) {
+          this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this);
+      }
+  }
+
+  doRedMark() {
+      this.text.doRedMark(...arguments);
+  }
+
+  unRedMark() {
+      this.text.unRedMark(...arguments);
+  }
+
+  doHighLight() {
+      this.text.doHighLight(...arguments);
+  }
+
+  unHighLight() {
+      this.text.unHighLight(...arguments);
+  }
+}

src/widget/downlist/item.downlistgroup.js

@@ -1,118 +1,141 @@
-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",
-            logic: {
-                dynamic: false
-            },
-            // invalid: true,
-            iconCls1: "dot-e-font",
-            icon: "",
-            iconCls2: "pull-right-e-font"
-        });
-    },
-    render: function () {
-        var o = this.options;
-        var self = this;
-        this.text = BI.createWidget({
-            type: "bi.label",
-            cls: "list-group-item-text",
-            textAlign: "left",
-            text: o.text,
-            value: o.value,
-            height: o.height,
-        });
-
-        if (BI.isPlainObject(o.icon)) {
-            this.icon1 = BI.createWidget({
-                width: 36,
-                height: o.height,
-                type: "bi.center_adapt",
-                items: [o.icon],
-            });
-        } else {
-            this.icon1 = BI.createWidget({
-                type: "bi.icon_button",
-                cls: o.iconCls1,
-                width: 36,
-                height: o.height,
-                iconHeight: o.iconHeight,
-                iconWidth: 36,
-                disableSelected: true,
-                selected: this._digest(o.value),
-            });
-        }
-
-        this.icon2 = BI.createWidget({
-            type: "bi.icon_button",
-            cls: o.iconCls2,
-            width: 24,
-            forceNotSelected: true
-        });
-
-        this.element.hover(function () {
-            if (self.isEnabled()) {
-                self.hover();
-            }
-        }, function () {
-            if (self.isEnabled()) {
-                self.dishover();
-            }
-        });
-
-        return {
-            type: "bi.horizontal_fill",
-            columnSize: [36,  "fill", 24],
-            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;
-    },
-
-    _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));
-        });
-    },
-
-    hover: function () {
-        BI.DownListGroupItem.superclass.hover.apply(this, arguments);
-        this.icon1.element.addClass("hover");
-        this.icon2.element.addClass("hover");
-
-    },
-
-    dishover: function () {
-        BI.DownListGroupItem.superclass.dishover.apply(this, arguments);
-        this.icon1.element.removeClass("hover");
-        this.icon2.element.removeClass("hover");
-    },
-
-    doClick: function () {
-        BI.DownListGroupItem.superclass.doClick.apply(this, arguments);
-        if (this.isValid()) {
-            this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue());
-        }
-    },
-
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
-
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
-
-    setValue: function (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);
+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,
+          },
+          // invalid: true,
+          iconCls1: "dot-e-font",
+          icon: "",
+          iconCls2: "pull-right-e-font",
+      });
+  }
+
+  render() {
+      const o = this.options;
+      this.text = createWidget({
+          type: "bi.label",
+          cls: "list-group-item-text",
+          textAlign: "left",
+          text: o.text,
+          value: o.value,
+          height: o.height,
+      });
+
+      if (isPlainObject(o.icon)) {
+          this.icon1 = createWidget({
+              width: 36,
+              height: o.height,
+              type: "bi.center_adapt",
+              items: [o.icon],
+          });
+      } else {
+          this.icon1 = createWidget({
+              type: "bi.icon_button",
+              cls: o.iconCls1,
+              width: 36,
+              height: o.height,
+              iconHeight: o.iconHeight,
+              iconWidth: 36,
+              disableSelected: true,
+              selected: this._digest(o.value),
+          });
+      }
+
+      this.icon2 = createWidget({
+          type: "bi.icon_button",
+          cls: o.iconCls2,
+          width: 24,
+          forceNotSelected: true,
+      });
+
+      this.element.hover(
+          () => {
+              if (this.isEnabled()) {
+                  this.hover();
+              }
+          },
+          () => {
+              if (this.isEnabled()) {
+                  this.dishover();
+              }
+          }
+      );
+
+      return {
+          type: "bi.horizontal_fill",
+          columnSize: [36, "fill", 24],
+          items: [this.icon1, this.text, this.icon2],
+      };
+  }
+
+  _getLevel() {
+      const child = first(this.options.childValues);
+      
+      return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0;
+  }
+
+  _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() {
+      super.dishover(...arguments);
+      this.icon1.element.removeClass("hover");
+      this.icon2.element.removeClass("hover");
+  }
+
+  doClick() {
+      super.doClick(...arguments);
+      if (this.isValid()) {
+          this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue());
+      }
+  }
+
+  doRedMark() {
+      this.text.doRedMark(...arguments);
+  }
+
+  unRedMark() {
+      this.text.unRedMark(...arguments);
+  }
+
+  setValue(v) {
+      this.icon1.setSelected && this.icon1.setSelected(this._digest(v));
+  }
+}

src/widget/downlist/popup.downlist.js

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

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,16 +50,14 @@ 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,
     NumberEditor,

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);
-            }
-        });
-        this.labelTwo.element.hover(function () {
-            self.labelTwo.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.labelTwo.element.removeClass("bi-border");
+            width: toPix(c.EDITOR_WIDTH, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
+            validationChecker: v => this._checkValidation(v),
         });
-        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,75 +169,95 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                                 horizontalAlign: "stretch",
                                 verticalAlign: "middle",
                                 columnSize: ["fill"],
-                                items: [{
-                                    el: this.track,
-                                }],
+                                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;
-        if(isLeft) {
+        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);
-        }else{
+            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);
-    },
-
-    _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) {
-            if (mouseMoveTracker.isDragging()) {
-                startDrag = true;
-                offset += deltaX;
-                size = optimizeSize(defaultSize + offset);
-                widget.element.addClass("dragging");
-                self._rePosBySizeAfterMove(size, isLeft);
-            }
-        }, function () {
-            if (startDrag === true) {
-                size = optimizeSize(size);
-                self._rePosBySizeAfterStop(size, isLeft);
-                size = 0;
-                offset = 0;
-                defaultSize = size;
-                startDrag = false;
-            }
-            widget.element.removeClass("dragging");
-            mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-        }, window);
+    }
+
+    _rePosBySizeAfterStop(size, isLeft) {
+        const percent = (size * 100) / this._getGrayTrackLength();
+        const significantPercent = parseFloat(percent.toFixed(1));
+        isLeft
+            ? this._setSliderOnePosition(significantPercent)
+            : this._setSliderTwoPosition(significantPercent);
+    }
+
+    _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");
+                    this._rePosBySizeAfterMove(size, isLeft);
+                }
+            }),
+            (() => {
+                if (startDrag === true) {
+                    size = optimizeSize(size);
+                    this._rePosBySizeAfterStop(size, isLeft);
+                    size = 0;
+                    offset = 0;
+                    defaultSize = size;
+                    startDrag = false;
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(IntervalSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -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: [{
-                        el: this.labelOne,
-                        top: 0,
-                        left: 0,
-                    }]
-                }, {
-                    type: "bi.absolute",
-                    items: [{
-                        el: this.labelTwo,
-                        top: 0,
-                        right: 0,
-                    }]
-                }],
+                type: VerticalLayout.xtype,
+                items: [
+                    {
+                        type: AbsoluteLayout.xtype,
+                        items: [
+                            {
+                                el: this.labelOne,
+                                top: 0,
+                                left: 0,
+                            }
+                        ],
+                    },
+                    {
+                        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: [{
-                        el: this.grayTrack,
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        width: "100%"
-                    }, {
-                        el: this.blueTrack,
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        width: "0%"
-                    }]
+                    items: [
+                        {
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            bottom: 0,
+                            width: "100%",
+                        },
+                        {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            bottom: 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)) {
-        }else{
-            if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
+        let dotText = (`${v}`).split(".")[1];
+        // eslint-disable-next-line no-empty
+        if (isEmptyString(dotText)) {
+        } else {
+            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{
+                } 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) {
-                this.labelTwo.element.css({top: 40});
+            if (labelTwoLeft - labelOneLeft < 90) {
+                this.labelTwo.element.css({ top: 40 });
             } else {
-                this.labelTwo.element.css({top: 0});
+                this.labelTwo.element.css({ top: 0 });
             }
         } else {
-            if ((labelOneLeft - labelTwoLeft) < 90) {
-                this.labelTwo.element.css({top: 40});
+            if (labelOneLeft - labelTwoLeft < 90) {
+                this.labelTwo.element.css({ top: 40 });
             } else {
-                this.labelTwo.element.css({top: 0});
+                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) {
-        this.labelOne.element.css({left: needReverse ? "100%" : "0%"});
-        this.labelTwo.element.css({left: needReverse ? "0%" : "100%"});
-    },
+    _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);
-        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 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) {
+            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 = [];
-        if(eIndex > -1) {
+        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;
+    }
 
-    },
-
-    _assertValue: function (value) {
-        if(value <= this.min) {
+    _assertValue(value) {
+        if (value <= this.min) {
             return this.min;
         }
-        if(value >= this.max) {
+        if (value >= this.max) {
             return this.max;
         }
+        
         return value;
-    },
+    }
 
-    _setEnable: function (b) {
-        BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
-        if(b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
+        if (b) {
+            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.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);
-    },
+        
+        return parseInt(magnitude);
+    }
 
-    _formatDecimal: function (stringNumber1, stringNumber2) {
+    _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);
+            const borrow = this._getMagnitude(decimalMaxLength);
+            decimalResultTemp = (
+                borrow +
+                parseInt(stringNumber1.numDecimal) -
+                parseInt(stringNumber2.numDecimal)
+            ).toString();
+            decimalResult = addZero(decimalResultTemp, decimalMaxLength);
         }
-        var result = integerResult + "." + decimalResult;
-        return BI.parseFloat(result);
+        const result = `${integerResult}.${decimalResult}`;
+        
+        return parseFloat(result);
 
-        function getDecimalMaxLength (num1, num2) {
+        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;
+        function addZero(resultTemp, length) {
+            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++;// 进一
+                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;
+        function addZero(resultTemp, length) {
+            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;
+        function addZero(resultTemp, length) {
+            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: [{
-                el: this.text,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }]
+            items: [
+                {
+                    el: this.text,
+                    left: 0,
+                    right: 0,
+                    top: 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();
-    },
-
-    _checkText: function () {
-        var o = this.options;
-        BI.nextTick(BI.bind(function () {
-            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;
-                this.text.setValue(v);
-                this.text.element.removeClass("bi-water-mark");
-            }
-        }, this));
-    },
-
-    _showInput: function () {
+        this._checkText();
+    }
+
+    _checkText() {
+        const o = this.options;
+        nextTick(
+            bind(() => {
+                if (this.editor.getValue() === "") {
+                    this.text.setValue(o.watermark || "");
+                    this.text.element.addClass("bi-water-mark");
+                } else {
+                    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)
+        );
+    }
+
+    _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,
-    },
+    };
 
-    beforeMount: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -30,175 +53,205 @@ 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: [
-                    {
-                        el: this.slider,
-                        top: 8,
-                    }
-                ],
-                height: c.SLIDER_HEIGHT
-            }],
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
+                    items: [
+                        {
+                            el: this.slider,
+                            top: 8,
+                        }
+                    ],
+                    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);
-            }
+            validationChecker: v => this._checkValidation(v),
         });
-        this.label.element.hover(function () {
-            self.label.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.label.element.removeClass("bi-border");
-        });
-        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: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: this.track,
-                            width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
-                    }],
-                    hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
+                                        el: this.track,
+                                        width: "100%",
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: c.TRACK_GAP_HALF,
+                        height: c.TRACK_HEIGHT,
+                    },
+                    top: 23,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 23,
-                left: 0,
-                width: "100%"
-            }, {
-                el: sliderVertical,
-                top: 20,
-                left: 0,
-                width: "100%"
-            }, {
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.horizontal_auto",
-                        items: [this.label]
-                    }],
-                    // height: c.EDITOR_HEIGHT
+                {
+                    el: sliderVertical,
+                    top: 20,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 0,
-                left: 0,
-                width: "100%"
-            }]
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: HorizontalAutoLayout.xtype,
+                                items: [this.label],
+                            }
+                        ],
+                        // height: c.EDITOR_HEIGHT
+                    },
+                    top: 0,
+                    left: 0,
+                    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) {
-            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);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.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);
-                size = 0;
-                offset = 0;
-                defaultSize = size;
-                startDrag = false;
-            }
-            widget.element.removeClass("dragging");
-            mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-        }, window);
+    _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");
+                    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);
+                    this.label.setValue(v);
+                    this.value = v;
+                }
+            }),
+            (() => {
+                if (startDrag === true) {
+                    size = optimizeSize(size);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1));
+                    this._setSliderPosition(significantPercent);
+                    size = 0;
+                    offset = 0;
+                    defaultSize = size;
+                    startDrag = false;
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -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: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: this.grayTrack,
-                            top: 0,
-                            left: 0,
-                            width: "100%"
-                        }, {
-                            el: this.blueTrack,
-                            top: 0,
-                            left: 0,
-                            width: "0%"
-                        }]
-                    }],
-                    hgap: 8,
-                    height: 8
-                },
-                top: 8,
-                left: 0,
-                width: "100%"
-            }]
+    _createTrackWrapper() {
+        return createWidget({
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
+                                        el: this.grayTrack,
+                                        top: 0,
+                                        left: 0,
+                                        width: "100%",
+                                    },
+                                    {
+                                        el: this.blueTrack,
+                                        top: 0,
+                                        left: 0,
+                                        width: "0%",
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: 8,
+                        height: 8,
+                    },
+                    top: 8,
+                    left: 0,
+                    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)) {
-            if(o.digit === false) {
+    _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);
+            } else {
+                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);
+        
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - 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]);
-        if(b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
+        if (b) {
+            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,
-    },
+    };
 
-    beforeMount: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -31,152 +50,179 @@ 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: [
-                    {
-                        el: this.slider,
-                        top: 8,
-                    }
-                ],
-                height: c.SLIDER_HEIGHT
-            }],
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
+                    items: [
+                        {
+                            el: this.slider,
+                            top: 8,
+                        }
+                    ],
+                    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: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: this.track,
-                            width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
-                    }],
-                    hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+        
+        return {
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
+                                        el: this.track,
+                                        width: "100%",
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: c.TRACK_GAP_HALF,
+                        height: c.TRACK_HEIGHT,
+                    },
+                    top: 13,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 13,
-                left: 0,
-                width: "100%"
-            }, {
-                el: sliderVertical,
-                top: 10,
-                left: 0,
-                width: "100%"
-            }, {
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.horizontal_auto",
-                        items: [this.label]
-                    }],
-                    height: c.EDITOR_HEIGHT
+                {
+                    el: sliderVertical,
+                    top: 10,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 0,
-                left: 0,
-                width: "100%"
-            }]
-        });
-    },
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: HorizontalAutoLayout.xtype,
+                                items: [this.label],
+                            }
+                        ],
+                        height: c.EDITOR_HEIGHT,
+                    },
+                    top: 0,
+                    left: 0,
+                    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) {
-            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);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.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);
-                size = 0;
-                offset = 0;
-                defaultSize = size;
-                startDrag = false;
-            }
-            widget.element.removeClass("dragging");
-            mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-        }, window);
+    _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");
+                    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);
+                    this.label.setValue(v + o.unit);
+                    this.value = v;
+                    this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
+                }
+            }),
+            (() => {
+                if (startDrag === true) {
+                    size = optimizeSize(size);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1));
+                    this._setSliderPosition(significantPercent);
+                    size = 0;
+                    offset = 0;
+                    defaultSize = size;
+                    startDrag = false;
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                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: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: this.grayTrack,
-                            top: 0,
-                            left: 0,
-                            width: "100%"
-                        }, {
-                            el: this.blueTrack,
-                            top: 0,
-                            left: 0,
-                            width: "0%"
-                        }]
-                    }],
-                    hgap: 8,
-                    height: 8
-                },
-                top: 8,
-                left: 0,
-                width: "100%"
-            }]
+    _createTrackWrapper() {
+        return createWidget({
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
+                                        el: this.grayTrack,
+                                        top: 0,
+                                        left: 0,
+                                        width: "100%",
+                                    },
+                                    {
+                                        el: this.blueTrack,
+                                        top: 0,
+                                        left: 0,
+                                        width: "0%",
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: 8,
+                        height: 8,
+                    },
+                    top: 8,
+                    left: 0,
+                    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);
+        
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - this.min);
-    },
+    _getPercentByValue(v) {
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
 
-    _setEnable: function (b) {
-        BI.SingleSliderLabel.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() {
         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,122 +45,143 @@ 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: [
-                    {
-                        el: this.slider,
-                        top: 8,
-                    }
-                ],
-                height: c.SLIDER_HEIGHT
-            }],
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
+                    items: [
+                        {
+                            el: this.slider,
+                            top: 8,
+                        }
+                    ],
+                    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: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: track,
-                            width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
-                    }],
-                    hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+            items: [
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
+                                        el: track,
+                                        width: "100%",
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: c.TRACK_GAP_HALF,
+                        height: c.TRACK_HEIGHT,
+                    },
+                    top: 3,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 3,
-                left: 0,
-                width: "100%"
-            }, {
-                el: sliderVertical,
-                top: 0,
-                left: 0,
-                width: "100%"
-            }]
+                {
+                    el: sliderVertical,
+                    top: 0,
+                    left: 0,
+                    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) {
-            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);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.value = v;
-                self.fireEvent(BI.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);
-                size = 0;
-                offset = 0;
-                defaultSize = size;
-                startDrag = false;
-            }
-            widget.element.removeClass("dragging");
-            mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-        }, window);
+    _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");
+                    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);
+                    this.value = v;
+                    this.fireEvent(SingleSliderNormal.EVENT_DRAG, v);
+                }
+            }),
+            (() => {
+                if (startDrag === true) {
+                    size = optimizeSize(size);
+                    const percent = (size * 100) / this._getGrayTrackLength();
+                    const significantPercent = parseFloat(percent.toFixed(1));
+                    this._setSliderPosition(significantPercent);
+                    size = 0;
+                    offset = 0;
+                    defaultSize = size;
+                    startDrag = false;
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -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: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
-                        items: [{
-                            el: this.grayTrack,
-                            top: 0,
-                            left: 0,
-                            width: "100%"
-                        }, {
-                            el: this.blueTrack,
-                            top: 0,
-                            left: 0,
-                            width: "0%"
-                        }]
-                    }],
-                    hgap: 8,
-                    height: 8
-                },
-                top: 8,
-                left: 0,
-                width: "100%"
-            }],
-            ref: function (ref) {
-                self.track = ref;
-            }
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: VerticalLayout.xtype,
+                        items: [
+                            {
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
+                                        el: this.grayTrack,
+                                        top: 0,
+                                        left: 0,
+                                        width: "100%",
+                                    },
+                                    {
+                                        el: this.blueTrack,
+                                        top: 0,
+                                        left: 0,
+                                        width: "0%",
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: 8,
+                        height: 8,
+                    },
+                    top: 8,
+                    left: 0,
+                    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);
+        
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _getPercentByValue: function (v) {
-        return (v - this.min) * 100 / (this.max - this.min);
-    },
+    _getPercentByValue(v) {
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
 
-    _setEnable: function (b) {
-        BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
-        if(b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+    _setEnable(b) {
+        super._setEnable.apply(this, [b]);
+        if (b) {
+            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);
+}