Merge remote-tracking branch 'origin/es6' into es6

es6.js

@@ -0,0 +1,134 @@
+const fs = require("fs");
+
+const srcName = process.argv[2];
+
+const sourceCode = fs.readFileSync(srcName).toString();
+
+const clzName = /BI\.(.*?)\s\=\sBI\.inherit\(/.exec(sourceCode)[1];
+
+const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1];
+
+// const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1];
+
+const collection = {
+    "static": {},
+    attr: {},
+};
+
+const BI = {
+    inherit(_, options) {
+        collection.methods = Object.keys(options)
+            .filter(key => typeof options[key] === "function")
+            .map(key => options[key]);
+        Object.keys(options)
+            .filter(key => typeof options[key] !== "function")
+            .forEach(key => {
+                collection.attr[key] = options[key];
+            });
+
+        return collection.static;
+    },
+    shortcut(xtype) {
+        collection.xtype = xtype;
+    },
+};
+
+eval(sourceCode);
+
+let M = "";
+let E = "";
+let I = "";
+let A = "";
+
+const coreImport = {
+    shortcut: true,
+};
+
+if (superName === "Widget") {
+    coreImport.Widget = true;
+}
+
+Object.keys(collection.attr).forEach(key => {
+    A = `${key} = ${JSON.stringify(collection.attr[key])};`;
+});
+
+// 静态方法
+Object.keys(collection.static).forEach(key => {
+    E += `\tstatic ${key} = "${collection.static[key]}"\n`;
+});
+
+// 对函数进行替换
+collection.methods.forEach(el => {
+    let f = `${el.toString().replace(/^function/, el.name)}\n`;
+
+    // 换 BI.Button.superclass
+    f = f.replace(`BI.${clzName}.superclass`, "super");
+    // 换 super._defaultConfig
+    f = f.replace(
+        `super\._defaultConfig\.apply\(this\,\sarguments\)`,
+        "super._defaultConfig(arguments)"
+    );
+    // 换 super.xxx.apply
+    f = f.replace(/super\.(.*?)\.apply\(this\,\sarguments\)/, a => {
+        const f = /super\.(.*?)\.apply\(this\,\sarguments\)/.exec(a);
+
+        return `super.${f[1]}(...arguments)`;
+    });
+
+    const target = [
+        "isNull",
+        "toPix",
+        "isKey",
+        "isObject",
+        "map",
+        "extend",
+        "isFunction",
+        "isEmptyArray",
+        "isArray",
+        "Controller",
+        clzName,
+        "createWidget",
+        "Events",
+        "emptyFn",
+        "nextTick",
+        "bind",
+        "i18nText",
+        "isNotNull",
+        "isString",
+        "isNumber",
+        "isEmpty",
+    ];
+
+    target.forEach(t => {
+        const arr = f.split(`BI.${t}`);
+        // nodejs 低版本没有 replaceAll
+        if (arr.length > 1) {
+            if (t !== clzName) coreImport[t] = true;
+            f = arr.join(t);
+        }
+    });
+
+    M += `${f}\n`;
+});
+
+Object.keys(coreImport).forEach(el => {
+    I += `${el},`;
+});
+
+const outputCode = `
+import {${I}} from "@/core"
+
+@shortcut()
+export class ${clzName} extends ${superName} {
+\tstatic xtype = "${collection.xtype}"
+
+${A}
+
+${E}
+
+${M}
+}
+`;
+
+// fs.writeFileSync(`${srcName}.js.raw`, sourceCode);
+fs.writeFileSync(srcName, outputCode);

src/base/0.base.js

@@ -7,7 +7,7 @@ import {
     PopoverController,
     ResizeController,
     TooltipsController,
-    StyleLoaderManager,
+    StyleLoaderManager
 } from "../core";
 
 const Resizers = new ResizeController();

src/case/calendar/calendar.date.item.js

@@ -1,16 +1,23 @@
 /**
  * 专门为calendar的视觉加的button，作为私有button,不能配置任何属性，也不要用这个玩意
  */
-BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
-    props: function() {
+
+import { shortcut } from "@/core";
+import { BasicButton } from "@/base";
+@shortcut()
+export class CalendarDateItem extends BasicButton {
+    props() {
         return {
             baseCls: "bi-calendar-date-item",
             height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
+        };
     }
-    },
 
-    render: function () {
-        var self = this, o = this.options;
+    static xtype = "bi.calendar_date_item";
+
+    render () {
+        const { text, value, lgap, rgap, tgap, bgap } = this.options;
+      
         return {
             type: "bi.absolute",
             items: [{
@@ -18,41 +25,40 @@ BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
                     type: "bi.text_item",
                     cls: "bi-border-radius bi-list-item-select",
                     textAlign: "center",
-                    text: o.text,
-                    value: o.value,
-                    ref: function () {
-                        self.text = this;
-                    }
+                    text,
+                    value,
+                    ref: _ref => {
+                        this.text = _ref;
                     },
-                left: o.lgap,
-                right: o.rgap,
-                top: o.tgap,
-                bottom: o.bgap
-            }]
-        };
                 },
+                left: lgap,
+                right: rgap,
+                top: tgap,
+                bottom: bgap,
+            }],
+        };
+    }
 
-    doHighLight: function () {
-        this.text.doHighLight.apply(this.text, arguments);
-    },
+    doHighLight () {
+        this.text.doHighLight(...arguments);
+    }
 
-    unHighLight: function () {
-        this.text.unHighLight.apply(this.text, arguments);
-    },
+    unHighLight () {
+        this.text.unHighLight(...arguments);
+    }
 
-    setValue: function () {
+    setValue () {
         if (!this.isReadOnly()) {
-            this.text.setValue.apply(this.text, arguments);
+            this.text.setValue(...arguments);
+        }
     }
-    },
 
-    setSelected: function (b) {
-        BI.CalendarDateItem.superclass.setSelected.apply(this, arguments);
+    setSelected (b) {
+        super.setSelected(...arguments);
         this.text.setSelected(b);
-    },
+    }
 
-    getValue: function () {
+    getValue () {
         return this.text.getValue();
     }
-});
-BI.shortcut("bi.calendar_date_item", BI.CalendarDateItem);
+}

src/case/calendar/calendar.js

@@ -3,32 +3,36 @@
  * @class BI.Calendar
  * @extends BI.Widget
  */
-BI.Calendar = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.Calendar.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
+import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core";
+@shortcut()
+export class Calendar extends Widget {
+    static xtype = "bi.calendar";
+
+    _defaultConfig () {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
             baseCls: "bi-calendar",
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             min: "1900-01-01", // 最小日期
             max: "2099-12-31", // 最大日期
             year: 2015,
             month: 8,
-            day: 25
+            day: 25,
         });
-    },
-
-    _dateCreator: function (Y, M, D) {
-        var self = this, o = this.options, log = {}, De = BI.getDate();
-        var mins = o.min.match(/\d+/g);
-        var maxs = o.max.match(/\d+/g);
+    }
+    _dateCreator (Y, M, D) {
+        const { min, max } = this.options, log = {}, De = getDate();
+        const mins = min.match(/\d+/g);
+        const maxs = max.match(/\d+/g);
 
         De.setFullYear(Y, M, D);
         log.ymd = [De.getFullYear(), De.getMonth(), De.getDate()];
 
-        var MD = BI.Date._MD.slice(0);
-        MD[1] = BI.isLeapYear(log.ymd[0]) ? 29 : 28;
+        const MD = Date._MD.slice(0);
+        MD[1] = isLeapYear(log.ymd[0]) ? 29 : 28;
 
         // 日期所在月第一天
         De.setFullYear(log.ymd[0], log.ymd[1], 1);
@@ -36,15 +40,16 @@ BI.Calendar = BI.inherit(BI.Widget, {
         log.FDay = De.getDay();
 
         // 当前BI.StartOfWeek与周日对齐后的FDay是周几
-        var offSetFDay = (7 - BI.StartOfWeek + log.FDay) % 7;
+        const offSetFDay = (7 - StartOfWeek + log.FDay) % 7;
 
         // 当前月页第一天是几号
         log.PDay = MD[M === 0 ? 11 : M - 1] - offSetFDay + 1;
         log.NDay = 1;
 
-        var items = [];
-        BI.each(BI.range(42), function (i) {
-            var td = {}, YY = log.ymd[0], MM = log.ymd[1] + 1, DD;
+        const items = [];
+        each(range(42), i => {
+            const td = {};
+            let YY = log.ymd[0], MM = log.ymd[1] + 1, DD;
             // 上个月的日期
             if (i < offSetFDay) {
                 td.lastMonth = true;
@@ -63,89 +68,92 @@ BI.Calendar = BI.inherit(BI.Widget, {
                 MM === 12 && (YY += 1);
                 MM = MM === 12 ? 1 : MM + 1;
             }
-            if (BI.checkDateVoid(YY, MM, DD, mins, maxs)[0]) {
+            if (checkDateVoid(YY, MM, DD, mins, maxs)[0]) {
                 td.disabled = true;
             }
             td.text = DD;
             items.push(td);
         });
+        
         return items;
-    },
+    }
 
-    _init: function () {
-        BI.Calendar.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.map(this._getWeekLabel(), function (i, value) {
+    _init () {
+        super._init(...arguments);
+        const { year, month, day, logic } = this.options;
+        const items = map(this._getWeekLabel(), (i, value) => {
             return {
                 type: "bi.label",
                 height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-                text: value
+                text: value,
             };
         });
-        var title = BI.createWidget({
+        const title = createWidget({
             type: "bi.button_group",
             height: 44,
-            items: items,
+            items,
             layouts: [{
                 type: "bi.center",
                 hgap: 5,
-                vgap: 10
-            }]
+                vgap: 10,
+            }],
         });
 
-        this.days = BI.createWidget({
+        this.days = createWidget({
             type: "bi.button_group",
-            items: BI.createItems(this._getItems(), {}),
-            value: o.year + "-" + o.month + "-" + o.day,
-            layouts: [BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, {
+            items: createItems(this._getItems(), {}),
+            value: `${year}-${month}-${day}`,
+            layouts: [LogicFactory.createLogic("table", extend({}, logic, {
                 columns: 7,
                 rows: 6,
                 columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7],
-                rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8
-            }))]
+                rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
+            }))],
         });
-        this.days.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.days.on(Controller.EVENT_CHANGE, () => {
+            this.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-        BI.createWidget(BI.extend({
-            element: this
+        createWidget(extend({
+            element: this,
 
-        }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection("top", title, {
+        }, LogicFactory.createLogic("vertical", extend({}, logic, {
+            items: LogicFactory.createLogicItemsByDirection("top", title, {
                 el: this.days,
-                tgap: -5
-            })
+                tgap: -5,
+            }),
         }))));
-    },
+    }
 
-    _getWeekLabel: function () {
-        return BI.map(BI.range(0, 7), function (idx, v) {
-            return BI.getShortDayName((v + BI.StartOfWeek) % 7);
-        });
-    },
+    _getWeekLabel () {
+        return map(range(0, 7), (idx, v) => getShortDayName((v + StartOfWeek) % 7));
+    }
 
-    isFrontDate: function () {
-        var o = this.options, c = this._const;
-        var Y = o.year, M = o.month, De = BI.getDate(), day = De.getDay();
+    isFrontDate () {
+        const { year, month, min, max } = this.options;
+        let Y = year;
+        const M = month, De = getDate(), day = De.getDay();
         Y = Y | 0;
         De.setFullYear(Y, M, 1);
-        var newDate = BI.getOffsetDate(De, -1 * (day + 1));
-        return !!BI.checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), o.min, o.max)[0];
-    },
+        const newDate = getOffsetDate(De, -1 * (day + 1));
+        
+        return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0];
+    }
 
-    isFinalDate: function () {
-        var o = this.options, c = this._const;
-        var Y = o.year, M = o.month, De = BI.getDate(), day = De.getDay();
+    isFinalDate () {
+        const { year, month, min, max } = this.options;
+        let Y = year;
+        const M = month, De = getDate(), day = De.getDay();
         Y = Y | 0;
         De.setFullYear(Y, M, 1);
-        var newDate = BI.getOffsetDate(De, 42 - day);
-        return !!BI.checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), o.min, o.max)[0];
-    },
+        const newDate = getOffsetDate(De, 42 - day);
         
-    _getItems: function () {
-        var o = this.options;
-        var days = this._dateCreator(o.year, o.month - 1, o.day);
-        var items = [];
+        return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0];
+    }
+
+    _getItems () {
+        const o = this.options;
+        const days = this._dateCreator(o.year, o.month - 1, o.day);
+        const items = [];
         items.push(days.slice(0, 7));
         items.push(days.slice(7, 14));
         items.push(days.slice(14, 21));
@@ -153,10 +161,9 @@ BI.Calendar = BI.inherit(BI.Widget, {
         items.push(days.slice(28, 35));
         items.push(days.slice(35, 42));
 
-        return BI.map(items, function (i, item) {
-            return BI.map(item, function (j, td) {
-                var month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month);
-                var year = o.year;
+        return map(items, (i, item) => map(item, (j, td) => {
+            let month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month);
+            let year = o.year;
             if (month > 12) {
                 month = 1;
                 year++;
@@ -164,82 +171,84 @@ BI.Calendar = BI.inherit(BI.Widget, {
                 month = 12;
                 year--;
             }
-                return BI.extend(td, {
+            
+            return extend(td, {
                 type: "bi.calendar_date_item",
                 once: false,
                 forceSelected: true,
-                    value: year + "-" + month + "-" + td.text,
+                value: `${year}-${month}-${td.text}`,
                 disabled: td.disabled,
                 cls: td.lastMonth || td.nextMonth ? "bi-tips" : "",
                 lgap: 2,
                 rgap: 2,
                 tgap: 4,
-                    bgap: 4
+                bgap: 4,
                 // selected: td.currentDay
             });
-            });
-        });
-    },
+        }));
+    }
 
-    _populate: function() {
+    _populate() {
         this.days.populate(this._getItems());
-    },
+    }
 
-    setMinDate: function (minDate) {
-        var o = this.options;
-        if (BI.isNotEmptyString(o.min)) {
+    setMinDate (minDate) {
+        const o = this.options;
+        if (isNotEmptyString(o.min)) {
             o.min = minDate;
             this._populate();
         }
-    },
+    }
 
-    setMaxDate: function (maxDate) {
-        var o = this.options;
-        if (BI.isNotEmptyString(o.max)) {
+    setMaxDate (maxDate) {
+        const o = this.options;
+        if (isNotEmptyString(o.max)) {
             o.max = maxDate;
             this._populate();
         }
-    },
+    }
 
-    setValue: function (ob) {
-        this.days.setValue([ob.year + "-" + ob.month + "-" + ob.day]);
-    },
+    setValue (ob) {
+        this.days.setValue([`${ob.year}-${ob.month}-${ob.day}`]);
+    }
+
+    getValue () {
+        const date = this.days.getValue()[0].match(/\d+/g);
         
-    getValue: function () {
-        var date = this.days.getValue()[0].match(/\d+/g);
         return {
             year: date[0] | 0,
             month: date[1] | 0,
-            day: date[2] | 0
+            day: date[2] | 0,
         };
     }
-});
+}
 
-BI.extend(BI.Calendar, {
-    getPageByDateJSON: function (json) {
-        var year = BI.getDate().getFullYear();
-        var month = BI.getDate().getMonth();
-        var page = (json.year - year) * 12;
+extend(Calendar, {
+    getPageByDateJSON (json) {
+        const year = getDate().getFullYear();
+        const month = getDate().getMonth();
+        let page = (json.year - year) * 12;
         page += json.month - 1 - month;
+        
         return page;
     },
-    getDateJSONByPage: function (v) {
-        var months = BI.getDate().getMonth();
-        var page = v;
+    getDateJSONByPage (v) {
+        const months = getDate().getMonth();
+        let page = v;
 
         // 对当前page做偏移,使到当前年初
         page = page + months;
 
-        var year = BI.parseInt(page / 12);
+        let year = parseInt(page / 12);
         if (page < 0 && page % 12 !== 0) {
             year--;
         }
-        var month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12);
+        const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12);
+        
         return {
-            year: BI.getDate().getFullYear() + year,
-            month: month + 1
+            year: getDate().getFullYear() + year,
+            month: month + 1,
         };
-    }
+    },
 });
 
-BI.shortcut("bi.calendar", BI.Calendar);

src/case/calendar/calendar.year.js

@@ -3,99 +3,104 @@
  * @class BI.YearCalendar
  * @extends BI.Widget
  */
-BI.YearCalendar = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        var conf = BI.YearCalendar.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
+import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core";
+@shortcut()
+export class YearCalendar extends Widget {
+    static xtype = "bi.year_calendar";
+    _defaultConfig () {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
             baseCls: "bi-year-calendar",
             behaviors: {},
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             min: "1900-01-01", // 最小日期
             max: "2099-12-31", // 最大日期
-            year: null
+            year: null,
         });
-    },
+    }
 
-    _yearCreator: function (Y) {
-        var o = this.options;
+    _yearCreator (Y) {
+        const { min, max } = this.options;
         Y = Y | 0;
-        var start = BI.YearCalendar.getStartYear(Y);
-        var items = [];
+        const start = YearCalendar.getStartYear(Y);
+        const items = [];
         // 对于年控件来说，只要传入的minDate和maxDate的year区间包含v就是合法的
-        var startDate = BI.parseDateTime(o.min, "%Y-%X-%d");
-        var endDate = BI.parseDateTime(o.max, "%Y-%X-%d");
-        BI.each(BI.range(BI.YearCalendar.INTERVAL), function (i) {
-            var td = {};
-            if (BI.checkDateVoid(start + i, 1, 1, BI.print(BI.getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), BI.print(BI.getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) {
+        const startDate = parseDateTime(min, "%Y-%X-%d");
+        const endDate = parseDateTime(max, "%Y-%X-%d");
+        each(range(YearCalendar.INTERVAL), i => {
+            const td = {};
+            if (checkDateVoid(start + i, 1, 1, print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) {
                 td.disabled = true;
             }
             td.text = start + i;
             items.push(td);
         });
-        return items;
-    },
         
-    _init: function () {
-        BI.YearCalendar.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.currentYear = BI.getDate().getFullYear();
+        return items;
+    }
+    _init () {
+        super._init(...arguments);
+        const { behaviors, logic } = this.options;
+        this.currentYear = getDate().getFullYear();
 
-        this.years = BI.createWidget({
+        this.years = createWidget({
             type: "bi.button_group",
-            behaviors: o.behaviors,
-            items: BI.createItems(this._getItems(), {}),
-            layouts: [BI.LogicFactory.createLogic("table", BI.extend({}, o.logic, {
+            behaviors,
+            items: createItems(this._getItems(), {}),
+            layouts: [LogicFactory.createLogic("table", extend({}, logic, {
                 columns: 2,
                 rows: 6,
                 columnSize: [1 / 2, 1 / 2],
                 rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             })), {
                 type: "bi.center_adapt",
-                vgap: 2
-            }]
+                vgap: 2,
+            }],
         });
-        this.years.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.years.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic("vertical", BI.extend({}, o.logic, {
+        createWidget(extend({
+            element: this,
+        }, LogicFactory.createLogic("vertical", extend({}, logic, {
             scrolly: true,
             vgap: 5,
             hgap: 6,
-            items: BI.LogicFactory.createLogicItemsByDirection("top", this.years)
+            items: LogicFactory.createLogicItemsByDirection("top", this.years),
         }))));
-    },
+    }
 
-    isFrontYear: function () {
-        var o = this.options;
-        var Y = o.year;
+    isFrontYear () {
+        const { min, max } = this.options;
+        let Y = this.options.year;
         Y = Y | 0;
-        return !!BI.checkDateVoid(BI.YearCalendar.getStartYear(Y) - 1, 1, 1, o.min, o.max)[0];
-    },
         
-    isFinalYear: function () {
-        var o = this.options, c = this._const;
-        var Y = o.year;
+        return !!checkDateVoid(YearCalendar.getStartYear(Y) - 1, 1, 1, min, max)[0];
+    }
+
+    isFinalYear () {
+        const { min, max } = this.options;
+        let Y = this.options.year;
         Y = Y | 0;
-        return !!BI.checkDateVoid(BI.YearCalendar.getEndYear(Y) + 1, 1, 1, o.min, o.max)[0];
-    },
         
-    _getItems: function () {
-        var o = this.options;
-        var years = this._yearCreator(o.year || this.currentYear);
+        return !!checkDateVoid(YearCalendar.getEndYear(Y) + 1, 1, 1, min, max)[0];
+    }
+
+    _getItems () {
+        const { year } = this.options;
+        const years = this._yearCreator(year || this.currentYear);
 
         // 纵向排列年
-        var len = years.length, tyears = BI.makeArray(len, "");
-        var map = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11];
-        BI.each(years, function (i, y) {
-            tyears[i] = years[map[i]];
+        const len = years.length, tyears = makeArray(len, "");
+        const mapArr = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11];
+        each(years, (i, y) => {
+            tyears[i] = years[mapArr[i]];
         });
 
-        var items = [];
+        const items = [];
         items.push(tyears.slice(0, 2));
         items.push(tyears.slice(2, 4));
         items.push(tyears.slice(4, 6));
@@ -103,9 +108,7 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
         items.push(tyears.slice(8, 10));
         items.push(tyears.slice(10, 12));
 
-        return BI.map(items, function (i, item) {
-            return BI.map(item, function (j, td) {
-                return BI.extend(td, {
+        return map(items, (i, item) => map(item, (j, td) => extend(td, {
             type: "bi.text_item",
             cls: "bi-list-item-select bi-border-radius",
             textAlign: "center",
@@ -115,59 +118,60 @@ BI.YearCalendar = BI.inherit(BI.Widget, {
             height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             width: 45,
             value: td.text,
-                    disabled: td.disabled
-                });
-            });
-        });
-    },
+            disabled: td.disabled,
+        })));
+    }
 
-    _populate: function () {
+    _populate () {
         this.years.populate(this._getItems());
-    },
+    }
 
-    setMinDate: function (minDate) {
-        var o = this.options;
-        if (BI.isNotEmptyString(o.min)) {
+    setMinDate (minDate) {
+        const o = this.options;
+        if (isNotEmptyString(o.min)) {
             o.min = minDate;
             this._populate();
         }
-    },
+    }
 
-    setMaxDate: function (maxDate) {
-        var o = this.options;
-        if (BI.isNotEmptyString(this.options.max)) {
+    setMaxDate (maxDate) {
+        const o = this.options;
+        if (isNotEmptyString(this.options.max)) {
             o.max = maxDate;
             this._populate();
         }
-    },
+    }
 
-    setValue: function (val) {
+    setValue (val) {
         this.years.setValue([val]);
-    },
+    }
 
-    getValue: function () {
+    getValue () {
         return this.years.getValue()[0];
     }
-});
+}
+
 // 类方法
-BI.extend(BI.YearCalendar, {
+extend(YearCalendar, {
     INTERVAL: 12,
 
     // 获取显示的第一年
-    getStartYear: function (year) {
-        var cur = BI.getDate().getFullYear();
-        return year - ((year - cur + 3) % BI.YearCalendar.INTERVAL + 12) % BI.YearCalendar.INTERVAL;
+    getStartYear (year) {
+        const cur = getDate().getFullYear();
+        
+        return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL;
     },
 
-    getEndYear: function (year) {
-        return BI.YearCalendar.getStartYear(year) + BI.YearCalendar.INTERVAL - 1;
+    getEndYear (year) {
+        return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1;
     },
 
-    getPageByYear: function (year) {
-        var cur = BI.getDate().getFullYear();
-        year = BI.YearCalendar.getStartYear(year);
-        return (year - cur + 3) / BI.YearCalendar.INTERVAL;
-    }
+    getPageByYear (year) {
+        const cur = getDate().getFullYear();
+        year = YearCalendar.getStartYear(year);
+        
+        return (year - cur + 3) / YearCalendar.INTERVAL;
+    },
 });
 
-BI.shortcut("bi.year_calendar", BI.YearCalendar);
+

src/case/calendar/index.js

@@ -0,0 +1,3 @@
+export { CalendarDateItem } from "./calendar.date.item";
+export { Calendar } from "./calendar";
+export { YearCalendar } from "./calendar.year";

src/case/editor/editor.clear.js

@@ -1,28 +1,56 @@
+import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core";
+import { Editor, IconButton } from "@/base";
+
 /**
- * 有清楚按钮的文本框
+ * 有清除按钮的文本框
  * Created by GUY on 2015/9/29.
- * @class BI.SmallTextEditor
- * @extends BI.SearchEditor
+ * @class ClearEditor
+ * @extends Widget
  */
-BI.ClearEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.ClearEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
+@shortcut()
+export class ClearEditor extends Widget {
+    static xtype = "bi.clear_editor"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_FOCUS = "EVENT_FOCUS"
+    static EVENT_BLUR = "EVENT_BLUR"
+    static EVENT_CLICK = "EVENT_CLICK"
+    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
+    static EVENT_SPACE = "EVENT_SPACE"
+    static EVENT_BACKSPACE = "EVENT_BACKSPACE"
+    static EVENT_CLEAR = "EVENT_CLEAR"
+    static EVENT_START = "EVENT_START"
+    static EVENT_PAUSE = "EVENT_PAUSE"
+    static EVENT_STOP = "EVENT_STOP"
+    static EVENT_CONFIRM = "EVENT_CONFIRM"
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
+    static EVENT_VALID = "EVENT_VALID"
+    static EVENT_ERROR = "EVENT_ERROR"
+    static EVENT_ENTER = "EVENT_ENTER"
+    static EVENT_RESTRICT = "EVENT_RESTRICT"
+    static EVENT_REMOVE = "EVENT_REMOVE"
+    static EVENT_EMPTY = "EVENT_EMPTY"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
             baseCls: "bi-clear-editor",
             height: 24,
             errorText: "",
             watermark: "",
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
         });
-    },
-    _init: function () {
-        var self = this, o = this.options;
-        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
-            self.setValue(newValue);
+    }
+
+    _init() {
+        const o = this.options;
+        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
+            this.setValue(newValue);
         }) : o.value;
-        BI.ClearEditor.superclass._init.apply(this, arguments);
-        this.editor = BI.createWidget({
+        super._init(...arguments);
+        this.editor = createWidget({
             type: "bi.editor",
             simple: o.simple,
             height: o.height,
@@ -34,150 +62,128 @@ BI.ClearEditor = BI.inherit(BI.Widget, {
             value: o.value,
             autoTrim: o.autoTrim,
         });
-        this.clear = BI.createWidget({
+        this.clear = createWidget({
             type: "bi.icon_button",
             stopEvent: true,
-            invisible: !BI.isKey(o.value),
-            cls: "search-close-h-font"
+            invisible: !isKey(o.value),
+            cls: "search-close-h-font",
         });
-        this.clear.on(BI.IconButton.EVENT_CHANGE, function () {
-            self.setValue("");
-            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT);
-            self.fireEvent(BI.ClearEditor.EVENT_CLEAR);
+        this.clear.on(IconButton.EVENT_CHANGE, () => {
+            this.setValue("");
+            this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT);
+            this.fireEvent(ClearEditor.EVENT_CLEAR);
         });
-        BI.createWidget({
+        createWidget({
             element: this,
             type: "bi.htape",
-            items: [
-                {
-                    el: this.editor
+            items: [{
+                el: this.editor,
             },
             {
                 el: this.clear,
-                    width: 24
+                width: 24,
             }
-            ]
+            ],
         });
-        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_FOCUS, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_FOCUS);
+        this.editor.on(Editor.EVENT_FOCUS, () => {
+            this.fireEvent(ClearEditor.EVENT_FOCUS);
         });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_BLUR);
+        this.editor.on(Editor.EVENT_BLUR, () => {
+            this.fireEvent(ClearEditor.EVENT_BLUR);
         });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_CLICK);
+        this.editor.on(Editor.EVENT_CLICK, () => {
+            this.fireEvent(ClearEditor.EVENT_CLICK);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self._checkClear();
-            self.fireEvent(BI.ClearEditor.EVENT_CHANGE);
+        this.editor.on(Editor.EVENT_CHANGE, () => {
+            this._checkClear();
+            this.fireEvent(ClearEditor.EVENT_CHANGE);
         });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.ClearEditor.EVENT_KEY_DOWN, v);
+        this.editor.on(Editor.EVENT_KEY_DOWN, v => {
+            this.fireEvent(ClearEditor.EVENT_KEY_DOWN, v);
         });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_SPACE);
+        this.editor.on(Editor.EVENT_SPACE, () => {
+            this.fireEvent(ClearEditor.EVENT_SPACE);
         });
-        this.editor.on(BI.Editor.EVENT_BACKSPACE, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_BACKSPACE);
+        this.editor.on(Editor.EVENT_BACKSPACE, () => {
+            this.fireEvent(ClearEditor.EVENT_BACKSPACE);
         });
 
 
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_VALID);
+        this.editor.on(Editor.EVENT_VALID, () => {
+            this.fireEvent(ClearEditor.EVENT_VALID);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_ERROR);
+        this.editor.on(Editor.EVENT_ERROR, () => {
+            this.fireEvent(ClearEditor.EVENT_ERROR);
         });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_ENTER);
+        this.editor.on(Editor.EVENT_ENTER, () => {
+            this.fireEvent(ClearEditor.EVENT_ENTER);
         });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_RESTRICT);
+        this.editor.on(Editor.EVENT_RESTRICT, () => {
+            this.fireEvent(ClearEditor.EVENT_RESTRICT);
         });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self._checkClear();
-            self.fireEvent(BI.ClearEditor.EVENT_EMPTY);
+        this.editor.on(Editor.EVENT_EMPTY, () => {
+            this._checkClear();
+            this.fireEvent(ClearEditor.EVENT_EMPTY);
         });
-        this.editor.on(BI.Editor.EVENT_REMOVE, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_REMOVE);
+        this.editor.on(Editor.EVENT_REMOVE, () => {
+            this.fireEvent(ClearEditor.EVENT_REMOVE);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_CONFIRM);
+        this.editor.on(Editor.EVENT_CONFIRM, () => {
+            this.fireEvent(ClearEditor.EVENT_CONFIRM);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_CHANGE_CONFIRM);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => {
+            this.fireEvent(ClearEditor.EVENT_CHANGE_CONFIRM);
         });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_START);
+        this.editor.on(Editor.EVENT_START, () => {
+            this.fireEvent(ClearEditor.EVENT_START);
         });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_PAUSE);
+        this.editor.on(Editor.EVENT_PAUSE, () => {
+            this.fireEvent(ClearEditor.EVENT_PAUSE);
         });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.ClearEditor.EVENT_STOP);
+        this.editor.on(Editor.EVENT_STOP, () => {
+            this.fireEvent(ClearEditor.EVENT_STOP);
         });
-    },
+    }
 
-    _checkClear: function () {
+    _checkClear() {
         if (!this.getValue()) {
             this.clear.invisible();
         } else {
             this.clear.visible();
         }
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         if (this.isValid()) {
             return this.editor.getValue();
         }
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.editor.setValue(v);
-        if (BI.isKey(v)) {
+        if (isKey(v)) {
             this.clear.visible();
         }
-    },
+    }
 
-    isValid: function () {
+    isValid() {
         return this.editor.isValid();
     }
-});
-BI.ClearEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.ClearEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.ClearEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.ClearEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.ClearEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-BI.ClearEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.ClearEditor.EVENT_BACKSPACE = "EVENT_BACKSPACE";
-BI.ClearEditor.EVENT_CLEAR = "EVENT_CLEAR";
-
-BI.ClearEditor.EVENT_START = "EVENT_START";
-BI.ClearEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.ClearEditor.EVENT_STOP = "EVENT_STOP";
-BI.ClearEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.ClearEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.ClearEditor.EVENT_VALID = "EVENT_VALID";
-BI.ClearEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.ClearEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.ClearEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.ClearEditor.EVENT_REMOVE = "EVENT_REMOVE";
-BI.ClearEditor.EVENT_EMPTY = "EVENT_EMPTY";
-BI.shortcut("bi.clear_editor", BI.ClearEditor);
+}

src/case/editor/editor.defaulttext.js

@@ -1,11 +1,36 @@
+
+import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core";
+import { Editor, TextButton } from "@/base";
+
 /**
  * dailer
  * 有默认提示文字的输入框
- * @class BI.DefaultTextEditor
- * @extends BI.Widget
+ * @class DefaultTextEditor
+ * @extends Widget
  */
-BI.DefaultTextEditor = BI.inherit(BI.Widget, {
-    props: function () {
+@shortcut()
+export class DefaultTextEditor extends Widget {
+    static xtype = "bi.default_text_editor"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_FOCUS = "EVENT_FOCUS"
+    static EVENT_BLUR = "EVENT_BLUR"
+    static EVENT_CLICK = "EVENT_CLICK"
+    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
+    static EVENT_START = "EVENT_START"
+    static EVENT_PAUSE = "EVENT_PAUSE"
+    static EVENT_STOP = "EVENT_STOP"
+    static EVENT_CONFIRM = "EVENT_CONFIRM"
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
+    static EVENT_VALID = "EVENT_VALID"
+    static EVENT_ERROR = "EVENT_ERROR"
+    static EVENT_ENTER = "EVENT_ENTER"
+    static EVENT_RESTRICT = "EVENT_RESTRICT"
+    static EVENT_SPACE = "EVENT_SPACE"
+    static EVENT_EMPTY = "EVENT_EMPTY"
+
+    props() {
         return {
             baseCls: "bi-default-text-editor",
             hgap: 4,
@@ -14,21 +39,21 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, {
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
             allowBlank: true,
             watermark: "",
             errorText: "",
             height: 24,
             defaultText: "", // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色
             text: "", // 显示值
-            el: {}
+            el: {},
         };
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        this.editor = BI.createWidget(o.el, {
+    render() {
+        const o = this.options;
+        this.editor = createWidget(o.el, {
             type: "bi.editor",
             simple: o.simple,
             height: o.height,
@@ -48,239 +73,218 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, {
             autoTrim: o.autoTrim,
         });
 
-        var showText = BI.isFunction(o.text) ? o.text() : o.text;
+        const showText = isFunction(o.text) ? o.text() : o.text;
 
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.text_button",
-            cls: BI.isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style",
+            cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style",
             textAlign: "left",
             height: o.height,
             text: showText || o.defaultText,
             hgap: o.hgap + 2,
-            handler: function () {
-                self._showInput();
-                self.editor.focus();
-                self.editor.setValue("");
+            handler: () => {
+                this._showInput();
+                this.editor.focus();
+                this.editor.setValue("");
             },
             title: o.title,
             warningTitle: o.warningTitle,
-            tipType: o.tipType
+            tipType: o.tipType,
         });
-        this.text.on(BI.TextButton.EVENT_CHANGE, function () {
-            BI.nextTick(function () {
-                self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK_LABEL);
+        this.text.on(TextButton.EVENT_CHANGE, () => {
+            nextTick(() => {
+                this.fireEvent(DefaultTextEditor.EVENT_CLICK_LABEL);
             });
         });
 
-        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_FOCUS, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_FOCUS, arguments);
+        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_FOCUS, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_BLUR, arguments);
+        this.editor.on(Editor.EVENT_BLUR, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_BLUR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_CLICK, arguments);
+        this.editor.on(Editor.EVENT_CLICK, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_CLICK, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE, arguments);
+        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_KEY_DOWN, arguments);
+        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_KEY_DOWN, ...args);
         });
 
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_VALID, arguments);
+        this.editor.on(Editor.EVENT_VALID, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_VALID, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self._showHint();
-            self.fireEvent(BI.DefaultTextEditor.EVENT_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
+            this._showHint();
+            this.fireEvent(DefaultTextEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self._showHint();
-            self.fireEvent(BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
+            this._showHint();
+            this.fireEvent(DefaultTextEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_START, arguments);
+        this.editor.on(Editor.EVENT_START, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_START, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_PAUSE, arguments);
+        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_PAUSE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_STOP, arguments);
+        this.editor.on(Editor.EVENT_STOP, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_STOP, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_SPACE, arguments);
+        this.editor.on(Editor.EVENT_SPACE, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_SPACE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_ERROR, arguments);
+        this.editor.on(Editor.EVENT_ERROR, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_ERROR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_ENTER, arguments);
+        this.editor.on(Editor.EVENT_ENTER, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_ENTER, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_RESTRICT, arguments);
+        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_RESTRICT, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.DefaultTextEditor.EVENT_EMPTY, arguments);
+        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
+            this.fireEvent(DefaultTextEditor.EVENT_EMPTY, ...args);
         });
 
         return {
             type: "bi.absolute",
-            items: [
-                {
+            items: [{
                 el: this.editor,
                 left: 0,
                 right: 0,
                 top: 0,
-                    bottom: 0
+                bottom: 0,
             }, {
                 el: this.text,
                 left: 0,
                 right: 0,
                 top: 0,
-                    bottom: 0
-                }
-            ]
+                bottom: 0,
+            }],
         };
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
-    },
+    }
 
-    setTitle: function (title) {
+    setTitle(title) {
         this.text.setTitle(title);
-    },
+    }
 
-    setWarningTitle: function (title) {
+    setWarningTitle(title) {
         this.text.setWarningTitle(title);
-    },
+    }
 
-    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);
+    }
 
-    focus: function () {
+    focus() {
         if (this.options.disabled === false) {
             this._showInput();
             this.editor.focus();
         }
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
         this._showHint();
-    },
+    }
 
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
 
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
 
-    _setText: function (v) {
+    _setText(v) {
         this.text.setText(v);
         this.text.setTitle(v);
-    },
+    }
 
-    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 (k) {
+    setValue(k) {
         this.editor.setValue(k);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.text.getValue();
-    },
+    }
 
-    setState: function (v) {
-        var o = this.options;
-        if (BI.isKey(v)) {
+    setState(v) {
+        const o = this.options;
+        if (isKey(v)) {
             this.text.setText(v);
             this.text.element.removeClass("bi-water-mark");
+            
             return;
         }
         this.text.setText(o.defaultText);
         this.text.element.addClass("bi-water-mark");
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.text.options.tipType = v;
-    },
+    }
 
-    getText: function () {
+    getText() {
         return this.text.getText();
     }
-});
-BI.DefaultTextEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.DefaultTextEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.DefaultTextEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.DefaultTextEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.DefaultTextEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-BI.DefaultTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.DefaultTextEditor.EVENT_START = "EVENT_START";
-BI.DefaultTextEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.DefaultTextEditor.EVENT_STOP = "EVENT_STOP";
-BI.DefaultTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.DefaultTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.DefaultTextEditor.EVENT_VALID = "EVENT_VALID";
-BI.DefaultTextEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.DefaultTextEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.DefaultTextEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.DefaultTextEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.DefaultTextEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.default_text_editor", BI.DefaultTextEditor);
+}

src/case/editor/editor.shelter.js

@@ -1,37 +1,62 @@
+import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core";
+import { Editor, TextButton } from "@/base";
+
 /**
  * 带标记的文本框
  * Created by GUY on 2016/1/25.
- * @class BI.ShelterEditor
- * @extends BI.Widget
+ * @class ShelterEditor
+ * @extends Widget
  */
-BI.ShelterEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.ShelterEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-shelter-editor",
+@shortcut()
+export class ShelterEditor extends Widget {
+    static xtype = "bi.shelter_editor"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_FOCUS = "EVENT_FOCUS"
+    static EVENT_BLUR = "EVENT_BLUR"
+    static EVENT_CLICK = "EVENT_CLICK"
+    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
+    static EVENT_START = "EVENT_START"
+    static EVENT_PAUSE = "EVENT_PAUSE"
+    static EVENT_STOP = "EVENT_STOP"
+    static EVENT_CONFIRM = "EVENT_CONFIRM"
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
+    static EVENT_VALID = "EVENT_VALID"
+    static EVENT_ERROR = "EVENT_ERROR"
+    static EVENT_ENTER = "EVENT_ENTER"
+    static EVENT_RESTRICT = "EVENT_RESTRICT"
+    static EVENT_SPACE = "EVENT_SPACE"
+    static EVENT_EMPTY = "EVENT_EMPTY"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-shelter-editor`,
             hgap: 4,
             vgap: 2,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
             allowBlank: true,
             watermark: "",
             errorText: "",
             height: 24,
-            textAlign: "left"
+            textAlign: "left",
         });
-    },
+    }
     
-    _init: function () {
-        var self = this, o = this.options;
-        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
-            self.setValue(newValue);
+    _init() {
+        const o = this.options;
+        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
+            this.setValue(newValue);
         }) : o.value;
-        BI.ShelterEditor.superclass._init.apply(this, arguments);
-        this.editor = BI.createWidget({
+        super._init(...arguments);
+        this.editor = createWidget({
             type: "bi.editor",
             simple: o.simple,
             height: o.height,
@@ -49,7 +74,7 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
             errorText: o.errorText,
             autoTrim: o.autoTrim,
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.text_button",
             cls: "shelter-editor-text",
             title: o.title,
@@ -57,92 +82,90 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
             tipType: o.tipType,
             textAlign: o.textAlign,
             height: o.height,
-            hgap: o.hgap + 2
+            hgap: o.hgap + 2,
         });
-        this.text.on(BI.Controller.EVENT_CHANGE, function () {
-            arguments[2] = self;
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.text.on(Controller.EVENT_CHANGE, (...args) => {
+            args[2] = this;
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.text.on(BI.TextButton.EVENT_CHANGE, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_CLICK_LABEL);
+        this.text.on(TextButton.EVENT_CHANGE, () => {
+            this.fireEvent(ShelterEditor.EVENT_CLICK_LABEL);
         });
-        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_FOCUS, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_FOCUS, arguments);
+        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_FOCUS, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_BLUR, arguments);
+        this.editor.on(Editor.EVENT_BLUR, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_BLUR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_CLICK, arguments);
+        this.editor.on(Editor.EVENT_CLICK, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_CLICK, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_CHANGE, arguments);
+        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.ShelterEditor.EVENT_KEY_DOWN, arguments);
+        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_KEY_DOWN, ...args);
         });
 
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_VALID, arguments);
+        this.editor.on(Editor.EVENT_VALID, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_VALID, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self._showHint();
-            self._checkText();
-            self.fireEvent(BI.ShelterEditor.EVENT_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
+            this._showHint();
+            this._checkText();
+            this.fireEvent(ShelterEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self._showHint();
-            self._checkText();
-            self.fireEvent(BI.ShelterEditor.EVENT_CHANGE_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
+            this._showHint();
+            this._checkText();
+            this.fireEvent(ShelterEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_START, arguments);
+        this.editor.on(Editor.EVENT_START, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_START, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_PAUSE, arguments);
+        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_PAUSE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_STOP, arguments);
+        this.editor.on(Editor.EVENT_STOP, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_STOP, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_SPACE, arguments);
+        this.editor.on(Editor.EVENT_SPACE, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_SPACE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self._checkText();
-            self.fireEvent(BI.ShelterEditor.EVENT_ERROR, arguments);
+        this.editor.on(Editor.EVENT_ERROR, (...args) => {
+            this._checkText();
+            this.fireEvent(ShelterEditor.EVENT_ERROR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_ENTER, arguments);
+        this.editor.on(Editor.EVENT_ENTER, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_ENTER, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_RESTRICT, arguments);
+        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_RESTRICT, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.ShelterEditor.EVENT_EMPTY, arguments);
+        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
+            this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args);
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [
-                {
+            items: [{
                 el: this.text,
                 inset: 0,
             }, {
                 el: this.editor,
                 inset: 0,
-                }
-            ]
+            }],
         });
         this._showHint();
-        self._checkText();
-    },
+        this._checkText();
+    }
     
-    _checkText: function () {
-        var o = this.options;
-        BI.nextTick(BI.bind(function () {
+    _checkText() {
+        const o = this.options;
+        nextTick(bind(function () {
             if (this.editor.getValue() === "") {
                 this.text.setValue(o.watermark || "");
                 this.text.element.addClass("bi-water-mark");
@@ -150,130 +173,109 @@ BI.ShelterEditor = BI.inherit(BI.Widget, {
                 this.text.setValue(this.editor.getValue());
                 this.text.element.removeClass("bi-water-mark");
             }
-            BI.isKey(o.keyword) && this.text.doRedMark(o.keyword);
+            isKey(o.keyword) && this.text.doRedMark(o.keyword);
         }, this));
-    },
+    }
     
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
     
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
     
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
-    },
+    }
     
-    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();
-    },
+    }
     
-    setTextStyle: function (style) {
+    setTextStyle(style) {
         this.text.setStyle(style);
-    },
+    }
     
-    setValue: function (k) {
-        var o = this.options;
+    setValue(k) {
         this.editor.setValue(k);
         this._checkText();
-    },
+    }
     
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
     
-    getState: function () {
+    getState() {
         return this.text.getValue();
-    },
+    }
     
-    setState: function (v) {
+    setState(v) {
         this._showHint();
         this.text.setValue(v);
     }
-});
-BI.ShelterEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.ShelterEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.ShelterEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.ShelterEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.ShelterEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-BI.ShelterEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.ShelterEditor.EVENT_START = "EVENT_START";
-BI.ShelterEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.ShelterEditor.EVENT_STOP = "EVENT_STOP";
-BI.ShelterEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.ShelterEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.ShelterEditor.EVENT_VALID = "EVENT_VALID";
-BI.ShelterEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.ShelterEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.ShelterEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.ShelterEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.ShelterEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.shelter_editor", BI.ShelterEditor);
+}

src/case/editor/editor.sign.js

@@ -1,37 +1,63 @@
+import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core";
+import { Editor, TextButton } from "@/base";
+
 /**
  * 带标记的文本框
  * Created by GUY on 2015/8/28.
- * @class BI.SignEditor
- * @extends BI.Widget
+ * @class SignEditor
+ * @extends Widget
  */
-BI.SignEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.SignEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-sign-editor",
+@shortcut()
+export class SignEditor extends Widget {
+    static xtype = "bi.sign_editor"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_FOCUS = "EVENT_FOCUS"
+    static EVENT_BLUR = "EVENT_BLUR"
+    static EVENT_CLICK = "EVENT_CLICK"
+    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
+    static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
+    static EVENT_START = "EVENT_START"
+    static EVENT_PAUSE = "EVENT_PAUSE"
+    static EVENT_STOP = "EVENT_STOP"
+    static EVENT_CONFIRM = "EVENT_CONFIRM"
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
+    static EVENT_VALID = "EVENT_VALID"
+    static EVENT_ERROR = "EVENT_ERROR"
+    static EVENT_ENTER = "EVENT_ENTER"
+    static EVENT_RESTRICT = "EVENT_RESTRICT"
+    static EVENT_SPACE = "EVENT_SPACE"
+    static EVENT_EMPTY = "EVENT_EMPTY"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-sign-editor`,
             hgap: 4,
             vgap: 2,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
             allowBlank: true,
             watermark: "",
             errorText: "",
             textAlign: "left",
-            height: 24
+            height: 24,
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
-            self.setValue(newValue);
+    _init() {
+        const o = this.options;
+        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
+            this.setValue(newValue);
         }) : o.value;
-        BI.SignEditor.superclass._init.apply(this, arguments);
-        this.editor = BI.createWidget({
+        super._init(...arguments);
+        this.editor = createWidget({
             type: "bi.editor",
             simple: o.simple,
             height: o.height,
@@ -49,7 +75,7 @@ BI.SignEditor = BI.inherit(BI.Widget, {
             errorText: o.errorText,
             autoTrim: o.autoTrim,
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.text_button",
             cls: "sign-editor-text",
             title: o.title,
@@ -58,229 +84,206 @@ BI.SignEditor = BI.inherit(BI.Widget, {
             textAlign: o.textAlign,
             height: o.height,
             hgap: o.hgap + 2,
-            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.SignEditor.EVENT_CLICK_LABEL);
+        this.text.on(TextButton.EVENT_CHANGE, () => {
+            nextTick(() => {
+                this.fireEvent(SignEditor.EVENT_CLICK_LABEL);
             });
         });
-        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_FOCUS, function () {
-            self.fireEvent(BI.SignEditor.EVENT_FOCUS, arguments);
+        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
+            this.fireEvent(SignEditor.EVENT_FOCUS, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self.fireEvent(BI.SignEditor.EVENT_BLUR, arguments);
+        this.editor.on(Editor.EVENT_BLUR, (...args) => {
+            this.fireEvent(SignEditor.EVENT_BLUR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.SignEditor.EVENT_CLICK, arguments);
+        this.editor.on(Editor.EVENT_CLICK, (...args) => {
+            this.fireEvent(SignEditor.EVENT_CLICK, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.SignEditor.EVENT_CHANGE, arguments);
+        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
+            this.fireEvent(SignEditor.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.SignEditor.EVENT_KEY_DOWN, arguments);
+        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
+            this.fireEvent(SignEditor.EVENT_KEY_DOWN, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_QUICK_DOWN, function () {
-            self.fireEvent(BI.SignEditor.EVENT_QUICK_DOWN, arguments);
+        this.editor.on(Editor.EVENT_QUICK_DOWN, (...args) => {
+            this.fireEvent(SignEditor.EVENT_QUICK_DOWN, ...args);
         });
 
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.SignEditor.EVENT_VALID, arguments);
+        this.editor.on(Editor.EVENT_VALID, (...args) => {
+            this.fireEvent(SignEditor.EVENT_VALID, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self._showHint();
-            self._checkText();
-            self.fireEvent(BI.SignEditor.EVENT_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
+            this._showHint();
+            this._checkText();
+            this.fireEvent(SignEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self._showHint();
-            self._checkText();
-            self.fireEvent(BI.SignEditor.EVENT_CHANGE_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
+            this._showHint();
+            this._checkText();
+            this.fireEvent(SignEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.SignEditor.EVENT_START, arguments);
+        this.editor.on(Editor.EVENT_START, (...args) => {
+            this.fireEvent(SignEditor.EVENT_START, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.SignEditor.EVENT_PAUSE, arguments);
+        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
+            this.fireEvent(SignEditor.EVENT_PAUSE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.SignEditor.EVENT_STOP, arguments);
+        this.editor.on(Editor.EVENT_STOP, (...args) => {
+            this.fireEvent(SignEditor.EVENT_STOP, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.SignEditor.EVENT_SPACE, arguments);
+        this.editor.on(Editor.EVENT_SPACE, (...args) => {
+            this.fireEvent(SignEditor.EVENT_SPACE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self._checkText();
-            self.fireEvent(BI.SignEditor.EVENT_ERROR, arguments);
+        this.editor.on(Editor.EVENT_ERROR, (...args) => {
+            this._checkText();
+            this.fireEvent(SignEditor.EVENT_ERROR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.SignEditor.EVENT_ENTER, arguments);
+        this.editor.on(Editor.EVENT_ENTER, (...args) => {
+            this.fireEvent(SignEditor.EVENT_ENTER, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.SignEditor.EVENT_RESTRICT, arguments);
+        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
+            this.fireEvent(SignEditor.EVENT_RESTRICT, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.SignEditor.EVENT_EMPTY, arguments);
+        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
+            this.fireEvent(SignEditor.EVENT_EMPTY, ...args);
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [
-                {
+            items: [{
                 el: this.text,
                 inset: 0,
             }, {
                 el: this.editor,
                 inset: 0,
-                }
-            ]
+            }],
         });
         this._showHint();
-        self._checkText();
-    },
+        this._checkText();
+    }
 
-    _checkText: function () {
-        var o = this.options;
-        BI.nextTick(BI.bind(function () {
+    _checkText() {
+        const o = this.options;
+        nextTick(bind(function () {
             if (this.editor.getValue() === "") {
                 this.text.setValue(o.watermark || "");
                 this.text.element.addClass("bi-water-mark");
             } else {
                 this.text.setValue(this.editor.getValue());
                 this.text.element.removeClass("bi-water-mark");
-                BI.isKey(o.keyword) && this.text.doRedMark(o.keyword);
+                isKey(o.keyword) && this.text.doRedMark(o.keyword);
             }
         }, this));
-    },
+    }
 
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
 
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
 
-    setTitle: function (title) {
+    setTitle(title) {
         this.text.setTitle(title);
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.text.setTipType(v);
-    },
+    }
 
-    setWarningTitle: function (title) {
+    setWarningTitle(title) {
         this.text.setWarningTitle(title);
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.options.watermark = v;
         this._checkText();
         this.editor.setWaterMark(v);
-    },
+    }
 
-    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 (k) {
+    setValue(k) {
         this.editor.setValue(k);
         this._checkText();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.text.getValue();
-    },
+    }
 
-    setState: function (v) {
+    setState(v) {
         this._showHint();
         this.text.setValue(v);
     }
-});
-BI.SignEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.SignEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.SignEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.SignEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.SignEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-BI.SignEditor.EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN";
-BI.SignEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.SignEditor.EVENT_START = "EVENT_START";
-BI.SignEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.SignEditor.EVENT_STOP = "EVENT_STOP";
-BI.SignEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.SignEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.SignEditor.EVENT_VALID = "EVENT_VALID";
-BI.SignEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.SignEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.SignEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.SignEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.SignEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.sign_editor", BI.SignEditor);
+}

src/case/editor/editor.state.js

@@ -1,36 +1,61 @@
+import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core";
+import { TextButton, Editor } from "@/base";
+
 /**
  * guy
  * 记录状态的输入框
- * @class BI.StateEditor
- * @extends BI.Single
+ * @class StateEditor
+ * @extends Single
  */
-BI.StateEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.StateEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-state-editor",
+@shortcut()
+export class StateEditor extends Widget {
+    static xtype = "bi.state_editor"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_FOCUS = "EVENT_FOCUS"
+    static EVENT_BLUR = "EVENT_BLUR"
+    static EVENT_CLICK = "EVENT_CLICK"
+    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
+    static EVENT_START = "EVENT_START"
+    static EVENT_PAUSE = "EVENT_PAUSE"
+    static EVENT_STOP = "EVENT_STOP"
+    static EVENT_CONFIRM = "EVENT_CONFIRM"
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
+    static EVENT_VALID = "EVENT_VALID"
+    static EVENT_ERROR = "EVENT_ERROR"
+    static EVENT_ENTER = "EVENT_ENTER"
+    static EVENT_RESTRICT = "EVENT_RESTRICT"
+    static EVENT_SPACE = "EVENT_SPACE"
+    static EVENT_EMPTY = "EVENT_EMPTY"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-state-editor`,
             hgap: 4,
             vgap: 2,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
             allowBlank: true,
             watermark: "",
             errorText: "",
             height: 24,
-            defaultText: BI.i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色
+            defaultText: i18nText("BI-Basic_Unrestricted"), // 默认显示值，默认显示值与显示值的区别是默认显示值标记灰色
             text: "", // 显示值
-            el: {}
+            el: {},
         });
-    },
+    }
     
-    _init: function () {
-        BI.StateEditor.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget(o.el, {
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.editor = createWidget(o.el, {
             type: "bi.editor",
             simple: o.simple,
             height: o.height,
@@ -48,262 +73,243 @@ BI.StateEditor = BI.inherit(BI.Widget, {
             errorText: o.errorText,
             autoTrim: o.autoTrim,
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.text_button",
             cls: "bi-water-mark tip-text-style",
             textAlign: "left",
             height: o.height,
             text: o.text,
             hgap: o.hgap + 2,
-            handler: function () {
-                self._showInput();
-                self.editor.focus();
-                self.editor.setValue("");
+            handler: () => {
+                this._showInput();
+                this.editor.focus();
+                this.editor.setValue("");
             },
-            title: BI.isNotNull(o.tipText) ? o.tipText : function () {
-                var title = "";
-                if (BI.isString(self.stateValue)) {
-                    title = self.stateValue;
+            title: isNotNull(o.tipText) ? o.tipText : () => {
+                let title = "";
+                if (isString(this.stateValue)) {
+                    title = this.stateValue;
                 }
-                if (BI.isArray(self.stateValue) && self.stateValue.length === 1) {
-                    title = self.stateValue[0];
+                if (isArray(this.stateValue) && this.stateValue.length === 1) {
+                    title = this.stateValue[0];
                 }
+                
                 return title;
             },
             warningTitle: o.warningTitle,
-            tipType: o.tipType
+            tipType: o.tipType,
         });
-        this.text.on(BI.TextButton.EVENT_CHANGE, function () {
-            BI.nextTick(function () {
-                self.fireEvent(BI.StateEditor.EVENT_CLICK_LABEL);
+        this.text.on(TextButton.EVENT_CHANGE, () => {
+            nextTick(() => {
+                this.fireEvent(StateEditor.EVENT_CLICK_LABEL);
             });
         });
-        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_FOCUS, function () {
-            self.fireEvent(BI.StateEditor.EVENT_FOCUS, arguments);
+        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
+            this.fireEvent(StateEditor.EVENT_FOCUS, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self.fireEvent(BI.StateEditor.EVENT_BLUR, arguments);
+        this.editor.on(Editor.EVENT_BLUR, (...args) => {
+            this.fireEvent(StateEditor.EVENT_BLUR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.StateEditor.EVENT_CLICK, arguments);
+        this.editor.on(Editor.EVENT_CLICK, (...args) => {
+            this.fireEvent(StateEditor.EVENT_CLICK, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.StateEditor.EVENT_CHANGE, arguments);
+        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
+            this.fireEvent(StateEditor.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.StateEditor.EVENT_KEY_DOWN, arguments);
+        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
+            this.fireEvent(StateEditor.EVENT_KEY_DOWN, ...args);
         });
 
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.StateEditor.EVENT_VALID, arguments);
+        this.editor.on(Editor.EVENT_VALID, (...args) => {
+            this.fireEvent(StateEditor.EVENT_VALID, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self._showHint();
-            self.fireEvent(BI.StateEditor.EVENT_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
+            this._showHint();
+            this.fireEvent(StateEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self._showHint();
-            self.fireEvent(BI.StateEditor.EVENT_CHANGE_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
+            this._showHint();
+            this.fireEvent(StateEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.StateEditor.EVENT_START, arguments);
+        this.editor.on(Editor.EVENT_START, (...args) => {
+            this.fireEvent(StateEditor.EVENT_START, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.StateEditor.EVENT_PAUSE, arguments);
+        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
+            this.fireEvent(StateEditor.EVENT_PAUSE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.StateEditor.EVENT_STOP, arguments);
+        this.editor.on(Editor.EVENT_STOP, (...args) => {
+            this.fireEvent(StateEditor.EVENT_STOP, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.StateEditor.EVENT_SPACE, arguments);
+        this.editor.on(Editor.EVENT_SPACE, (...args) => {
+            this.fireEvent(StateEditor.EVENT_SPACE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.StateEditor.EVENT_ERROR, arguments);
+        this.editor.on(Editor.EVENT_ERROR, (...args) => {
+            this.fireEvent(StateEditor.EVENT_ERROR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.StateEditor.EVENT_ENTER, arguments);
+        this.editor.on(Editor.EVENT_ENTER, (...args) => {
+            this.fireEvent(StateEditor.EVENT_ENTER, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.StateEditor.EVENT_RESTRICT, arguments);
+        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
+            this.fireEvent(StateEditor.EVENT_RESTRICT, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.StateEditor.EVENT_EMPTY, arguments);
+        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
+            this.fireEvent(StateEditor.EVENT_EMPTY, ...args);
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [
-                {
+            items: [{
                 el: this.text,
                 inset: 0,
             }, {
                 el: this.editor,
                 inset: 0,
-                }
-            ]
+            }],
         });
         this._showHint();
-        if (BI.isNotNull(o.text)) {
+        if (isNotNull(o.text)) {
             this.setState(o.text);
         }
-    },
+    }
     
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
-    },
+    }
     
-    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);
+    }
     
-    focus: function () {
+    focus() {
         if (this.options.disabled === false) {
             this._showInput();
             this.editor.focus();
         }
-    },
+    }
     
-    blur: function () {
+    blur() {
         this.editor.blur();
         this._showHint();
-    },
+    }
     
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
     
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
     
-    _setText: function (v) {
+    _setText(v) {
         this.text.setText(v);
         this.text.setTitle(v);
-    },
+    }
     
-    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 (k) {
+    setValue(k) {
         this.editor.setValue(k);
-    },
+    }
     
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
     
-    getState: function () {
+    getState() {
         return this.editor.getValue().match(/[^\s]+/g);
-    },
+    }
     
-    setState: function (v) {
-        var o = this.options;
-        var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
-        BI.StateEditor.superclass.setValue.apply(this, arguments);
+    setState(v) {
+        const o = this.options;
+        const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
+        super.setValue(...arguments);
         this.stateValue = v;
-        if (BI.isNumber(v)) {
-            if (v === BI.Selection.All) {
-                this._setText(BI.i18nText("BI-Select_All"));
+        if (isNumber(v)) {
+            if (v === Selection.All) {
+                this._setText(i18nText("BI-Select_All"));
                 this.text.element.removeClass("bi-water-mark");
-            } else if (v === BI.Selection.Multi) {
-                this._setText(BI.i18nText("BI-Select_Part"));
+            } else if (v === Selection.Multi) {
+                this._setText(i18nText("BI-Select_Part"));
                 this.text.element.removeClass("bi-water-mark");
             } else {
-                this._setText(BI.isKey(defaultText) ? defaultText : o.text);
-                BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
+                this._setText(isKey(defaultText) ? defaultText : o.text);
+                isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
             }
+            
             return;
         }
-        if (BI.isString(v)) {
+        if (isString(v)) {
             this._setText(v);
             // 配置了defaultText才判断标灰，其他情况不标灰
-            (BI.isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
+            (isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
+            
             return;
         }
-        if (BI.isArray(v)) {
-            if (BI.isEmpty(v)) {
-                this._setText(BI.isKey(defaultText) ? defaultText : o.text);
-                BI.isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
+        if (isArray(v)) {
+            if (isEmpty(v)) {
+                this._setText(isKey(defaultText) ? defaultText : o.text);
+                isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
             } else if (v.length === 1) {
                 this._setText(v[0]);
                 this.text.element.removeClass("bi-water-mark");
             } else {
-                this._setText(BI.i18nText("BI-Select_Part"));
+                this._setText(i18nText("BI-Select_Part"));
                 this.text.element.removeClass("bi-water-mark");
             }
         }
-    },
+    }
     
-    setTipType: function (v) {
+    setTipType(v) {
         this.text.options.tipType = v;
-    },
+    }
     
-    getText: function () {
+    getText() {
         return this.text.getText();
     }
-});
-BI.StateEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.StateEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.StateEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.StateEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.StateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-BI.StateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.StateEditor.EVENT_START = "EVENT_START";
-BI.StateEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.StateEditor.EVENT_STOP = "EVENT_STOP";
-BI.StateEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.StateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.StateEditor.EVENT_VALID = "EVENT_VALID";
-BI.StateEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.StateEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.StateEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.StateEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.StateEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.state_editor", BI.StateEditor);
+}

src/case/editor/editor.state.simple.js

@@ -1,36 +1,61 @@
+import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core";
+import { Editor, TextButton } from "@/base";
+
 /**
  * 无限制-已选择状态输入框
  * Created by GUY on 2016/5/18.
- * @class BI.SimpleStateEditor
- * @extends BI.Single
+ * @class SimpleStateEditor
+ * @extends Single
  */
-BI.SimpleStateEditor = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.SimpleStateEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-simple-state-editor",
+@shortcut()
+export class SimpleStateEditor extends Widget {
+    static xtype = "bi.simple_state_editor"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_FOCUS = "EVENT_FOCUS"
+    static EVENT_BLUR = "EVENT_BLUR"
+    static EVENT_CLICK = "EVENT_CLICK"
+    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"
+    static EVENT_START = "EVENT_START"
+    static EVENT_PAUSE = "EVENT_PAUSE"
+    static EVENT_STOP = "EVENT_STOP"
+    static EVENT_CONFIRM = "EVENT_CONFIRM"
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
+    static EVENT_VALID = "EVENT_VALID"
+    static EVENT_ERROR = "EVENT_ERROR"
+    static EVENT_ENTER = "EVENT_ENTER"
+    static EVENT_RESTRICT = "EVENT_RESTRICT"
+    static EVENT_SPACE = "EVENT_SPACE"
+    static EVENT_EMPTY = "EVENT_EMPTY"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-simple-state-editor`,
             hgap: 4,
             vgap: 2,
             lgap: 0,
             rgap: 0,
             tgap: 0,
             bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
             mouseOut: false,
             allowBlank: true,
             watermark: "",
             errorText: "",
             height: 24,
             text: "",
-            defaultText: BI.i18nText("BI-Basic_Unrestricted"),
+            defaultText: i18nText("BI-Basic_Unrestricted"),
         });
-    },
+    }
 
-    _init: function () {
-        BI.SimpleStateEditor.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.editor = createWidget({
             type: "bi.editor",
             simple: o.simple,
             height: o.height,
@@ -48,241 +73,220 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, {
             errorText: o.errorText,
             autoTrim: o.autoTrim,
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.text_button",
             cls: "bi-water-mark",
             textAlign: "left",
             text: o.text,
             height: o.height,
             hgap: o.hgap + 2,
-            handler: function () {
-                self._showInput();
-                self.editor.focus();
-                self.editor.setValue("");
-            }
+            handler: () => {
+                this._showInput();
+                this.editor.focus();
+                this.editor.setValue("");
+            },
         });
-        this.text.on(BI.TextButton.EVENT_CHANGE, function () {
-            BI.nextTick(function () {
-                self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK_LABEL);
+        this.text.on(TextButton.EVENT_CHANGE, () => {
+            nextTick(() => {
+                this.fireEvent(SimpleStateEditor.EVENT_CLICK_LABEL);
             });
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.absolute",
             element: this,
-            items: [
-                {
+            items: [{
                 el: this.text,
                 left: 0,
                 right: 0,
                 top: 0,
-                    bottom: 0
-                }
-            ]
+                bottom: 0,
+            }],
         });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_FOCUS, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_FOCUS, arguments);
+        this.editor.on(Editor.EVENT_FOCUS, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_FOCUS, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_BLUR, arguments);
+        this.editor.on(Editor.EVENT_BLUR, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_BLUR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_CLICK, arguments);
+        this.editor.on(Editor.EVENT_CLICK, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_CLICK, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE, arguments);
+        this.editor.on(Editor.EVENT_CHANGE, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_KEY_DOWN, arguments);
+        this.editor.on(Editor.EVENT_KEY_DOWN, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_KEY_DOWN, ...args);
         });
 
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_VALID, arguments);
+        this.editor.on(Editor.EVENT_VALID, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_VALID, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self._showHint();
-            self.fireEvent(BI.SimpleStateEditor.EVENT_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
+            this._showHint();
+            this.fireEvent(SimpleStateEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
-            self._showHint();
-            self.fireEvent(BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM, arguments);
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
+            this._showHint();
+            this.fireEvent(SimpleStateEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_START, arguments);
+        this.editor.on(Editor.EVENT_START, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_START, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_PAUSE, arguments);
+        this.editor.on(Editor.EVENT_PAUSE, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_PAUSE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_STOP, arguments);
+        this.editor.on(Editor.EVENT_STOP, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_STOP, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_SPACE, arguments);
+        this.editor.on(Editor.EVENT_SPACE, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_SPACE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_ERROR, arguments);
+        this.editor.on(Editor.EVENT_ERROR, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_ERROR, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_ENTER, arguments);
+        this.editor.on(Editor.EVENT_ENTER, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_ENTER, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_RESTRICT, arguments);
+        this.editor.on(Editor.EVENT_RESTRICT, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_RESTRICT, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.SimpleStateEditor.EVENT_EMPTY, arguments);
+        this.editor.on(Editor.EVENT_EMPTY, (...args) => {
+            this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args);
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             scrolly: false,
             element: this,
-            items: [this.editor]
+            items: [this.editor],
         });
         this._showHint();
-        if (BI.isNotNull(o.text)) {
+        if (isNotNull(o.text)) {
             this.setState(o.text);
         }
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
-    },
+    }
 
-    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);
+    }
 
-    focus: function () {
+    focus() {
         this._showInput();
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
         this._showHint();
-    },
+    }
 
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
 
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
 
-    _setText: function (v) {
+    _setText(v) {
         this.text.setText(v);
         this.text.setTitle(v);
-    },
+    }
 
-    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 (k) {
+    setValue(k) {
         this.editor.setValue(k);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getValue().match(/[^\s]+/g);
-    },
+    }
 
-    setState: function (v) {
-        var o = this.options;
-        BI.SimpleStateEditor.superclass.setValue.apply(this, arguments);
-        var defaultText = BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
-        if (BI.isNumber(v)) {
-            if (v === BI.Selection.All) {
-                this._setText(BI.i18nText("BI-Already_Selected"));
+    setState(v) {
+        const o = this.options;
+        super.setValue(...arguments);
+        const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
+        if (isNumber(v)) {
+            if (v === Selection.All) {
+                this._setText(i18nText("BI-Already_Selected"));
                 this.text.element.removeClass("bi-water-mark");
-            } else if (v === BI.Selection.Multi) {
-                this._setText(BI.i18nText("BI-Already_Selected"));
+            } else if (v === Selection.Multi) {
+                this._setText(i18nText("BI-Already_Selected"));
                 this.text.element.removeClass("bi-water-mark");
             } else {
-                this._setText(BI.isKey(defaultText) ? defaultText : o.text);
+                this._setText(isKey(defaultText) ? defaultText : o.text);
                 this.text.element.addClass("bi-water-mark");
             }
+            
             return;
         }
-        if (!BI.isArray(v) || v.length === 1) {
+        if (!isArray(v) || v.length === 1) {
             this._setText(v);
             this.text.element.removeClass("bi-water-mark");
-        } else if (BI.isEmpty(v)) {
+        } else if (isEmpty(v)) {
             this._setText(o.text);
             this.text.element.addClass("bi-water-mark");
         } else {
-            this._setText(BI.i18nText("BI-Already_Selected"));
+            this._setText(i18nText("BI-Already_Selected"));
             this.text.element.removeClass("bi-water-mark");
         }
-    },
+    }
 
-    getText: function () {
+    getText() {
         return this.text.getText();
     }
-});
-BI.SimpleStateEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.SimpleStateEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.SimpleStateEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.SimpleStateEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.SimpleStateEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-BI.SimpleStateEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.SimpleStateEditor.EVENT_START = "EVENT_START";
-BI.SimpleStateEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.SimpleStateEditor.EVENT_STOP = "EVENT_STOP";
-BI.SimpleStateEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.SimpleStateEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.SimpleStateEditor.EVENT_VALID = "EVENT_VALID";
-BI.SimpleStateEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.SimpleStateEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.SimpleStateEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.SimpleStateEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.SimpleStateEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.simple_state_editor", BI.SimpleStateEditor);
+}

src/case/editor/index.js

@@ -0,0 +1,6 @@
+export { ClearEditor } from "./editor.clear";
+export { DefaultTextEditor } from "./editor.defaulttext";
+export { ShelterEditor } from "./editor.shelter";
+export { SignEditor } from "./editor.sign";
+export { StateEditor } from "./editor.state";
+export { SimpleStateEditor } from "./editor.state.simple";

src/case/index.js

@@ -1,7 +1,17 @@
 import * as button from "./button";
+import * as calendarItem from "./calendar";
+import * as pager from "./pager";
+import * as editor from "./editor";
 
 Object.assign(BI, {
     ...button,
+    ...calendarItem,
+    ...pager,
+    ...editor,
 });
 
 export * from "./button";
+export * from "./calendar";
+export * from "./pager";
+export * from "./editor";
+

src/case/pager/index.js

@@ -0,0 +1,3 @@
+export { AllCountPager } from "./pager.all.count";
+export { DetailPager } from "./pager.detail";
+export { DirectionPager } from "./pager.direction";

src/case/pager/pager.all.count.js

@@ -2,10 +2,15 @@
  * 有总页数和总行数的分页控件
  * Created by Young's on 2016/10/13.
  */
-BI.AllCountPager = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.AllCountPager.superclass._defaultConfig.apply(this, arguments), {
+import { shortcut, Widget, extend, isPositiveInteger, createWidget, parseInt, HorizontalAlign, isNotEmptyObject } from "@/core";
+// import { TextEditor } from "@/widget/editor/editor.text";
+import { Pager } from "@/base";
+@shortcut()
+export class AllCountPager extends Widget {
+    static xtype = "bi.all_count_pager";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    _defaultConfig () {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-all-count-pager",
             pagerDirection: "vertical", // 翻页按钮方向，可选值：vertical/horizontal
             height: 24,
@@ -16,36 +21,36 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
             showRowCount: true,
             showRowInfo: true,
         });
-    },
-    _init: function () {
-        BI.AllCountPager.superclass._init.apply(this, arguments);
-        var self = this, o = this.options, pagerIconCls = this._getPagerIconCls();
-        this.editor = BI.createWidget({
+    }
+    _init () {
+        super._init(...arguments);
+        const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, pagerIconCls = this._getPagerIconCls();
+        this.editor = createWidget({
             type: "bi.small_text_editor",
             cls: "pager-editor bi-border-radius",
-            validationChecker: function (v) {
-                return (o.pages === 0 && v === "0") || BI.isPositiveInteger(v);
+            validationChecker (v) {
+                return (pages === 0 && v === "0") || isPositiveInteger(v);
             },
             hgap: 4,
             vgap: 0,
-            value: o.curr,
+            value: curr,
             errorText: BI.i18nText("BI-Please_Input_Positive_Integer"),
             width: 40,
             height: 24,
-            invisible: o.pages <= 1
+            invisible: pages <= 1,
         });
 
-        this.pager = BI.createWidget({
+        this.pager = createWidget({
             type: "bi.pager",
             width: 58,
             layouts: [{
                 type: "bi.horizontal",
-                lgap: 5
+                lgap: 5,
             }],
 
             dynamicShow: false,
-            pages: o.pages,
-            curr: o.curr,
+            pages,
+            curr,
             groups: 0,
 
             first: false,
@@ -57,7 +62,7 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
                 warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
                 height: 22,
                 width: 22,
-                cls: "bi-border bi-border-radius all-pager-prev bi-list-item-select2 " + pagerIconCls.preCls
+                cls: `bi-border bi-border-radius all-pager-prev bi-list-item-select2 ${pagerIconCls.preCls}`,
             },
             next: {
                 type: "bi.icon_button",
@@ -66,42 +71,43 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
                 warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
                 height: 22,
                 width: 22,
-                cls: "bi-border bi-border-radius all-pager-next bi-list-item-select2 " + pagerIconCls.nextCls
+                cls: `bi-border bi-border-radius all-pager-next bi-list-item-select2 ${pagerIconCls.nextCls}`,
             },
 
-            hasPrev: o.hasPrev,
-            hasNext: o.hasNext,
-            firstPage: o.firstPage,
-            lastPage: o.lastPage,
-            invisible: o.pages <= 1
+            hasPrev,
+            hasNext,
+            firstPage,
+            lastPage,
+            invisible: pages <= 1,
         });
 
-        this.editor.on(BI.TextEditor.EVENT_CONFIRM, function () {
-            self.pager.setValue(BI.parseInt(self.editor.getValue()));
-            self.fireEvent(BI.AllCountPager.EVENT_CHANGE);
+        //  TODO:需等到TextEditor 完成es6化后才可替换BI.TextEditor
+        this.editor.on(BI.TextEditor.EVENT_CONFIRM, () => {
+            this.pager.setValue(parseInt(this.editor.getValue()));
+            this.fireEvent(AllCountPager.EVENT_CHANGE);
         });
-        this.pager.on(BI.Pager.EVENT_CHANGE, function () {
-            self.fireEvent(BI.AllCountPager.EVENT_CHANGE);
+        this.pager.on(Pager.EVENT_CHANGE, () => {
+            this.fireEvent(AllCountPager.EVENT_CHANGE);
         });
-        this.pager.on(BI.Pager.EVENT_AFTER_POPULATE, function () {
-            self.editor.setValue(self.pager.getCurrentPage());
+        this.pager.on(Pager.EVENT_AFTER_POPULATE, () => {
+            this.editor.setValue(this.pager.getCurrentPage());
         });
 
-        this.allPages = BI.createWidget({
+        this.allPages = createWidget({
             type: "bi.label",
-            title: o.pages,
-            height: o.height,
-            text: "/" + o.pages,
+            title: pages,
+            height,
+            text: `/${pages}`,
             lgap: 5,
-            invisible: o.pages <= 1
+            invisible: pages <= 1,
         });
 
-        BI.createWidget(o.showRowCount ? {
+        createWidget(showRowCount ? {
             type: "bi.vertical_adapt",
             element: this,
             scrollx: false,
             columnSize: ["fill", ""],
-            horizontalAlign: BI.HorizontalAlign.Right,
+            horizontalAlign: HorizontalAlign.Right,
             items: [
                 this._getRowCountObject(),
                 this.editor, this.allPages, this.pager
@@ -109,126 +115,124 @@ BI.AllCountPager = BI.inherit(BI.Widget, {
         } : {
             type: "bi.vertical_adapt",
             element: this,
-            items: [this.editor, this.allPages, this.pager]
+            items: [this.editor, this.allPages, this.pager],
         });
-    },
+    }
 
-    _getPagerIconCls: function () {
-        var o = this.options;
-        switch (o.pagerDirection) {
+    _getPagerIconCls () {
+        const { pagerDirection } = this.options;
+        switch (pagerDirection) {
         case "horizontal":
             return {
                 preCls: "row-pre-page-h-font ",
-                    nextCls: "row-next-page-h-font "
+                nextCls: "row-next-page-h-font ",
             };
         case "vertical":
         default:
             return {
                 preCls: "column-pre-page-h-font ",
-                    nextCls: "column-next-page-h-font "
+                nextCls: "column-next-page-h-font ",
             };
         }
-    },
+    }
 
-    _getRowCountObject: function() {
-        var self = this, o = this.options;
+    _getRowCountObject() {
+        const { height, count, rowInfoObject } = this.options;
 
         return {
             type: "bi.left",
-            height: o.height,
+            height,
             scrollable: false,
-            ref: function (_ref) {
-                self.rowCountObject = _ref;
+            ref:  _ref => {
+                this.rowCountObject = _ref;
             },
             items: [{
                 type: "bi.label",
-                height: o.height,
+                height,
                 text: BI.i18nText("BI-Basic_Total"),
-                ref: function (_ref) {
-                    self.prevText = _ref;
-                }
+                ref:  _ref => {
+                    this.prevText = _ref;
+                },
             }, {
                 el: {
                     type: "bi.label",
-                    ref: function (_ref) {
-                        self.rowCount = _ref;
+                    ref: _ref => {
+                        this.rowCount = _ref;
                     },
                     cls: "row-count",
-                    height: o.height,
-                    text: o.count,
-                    title: o.count
+                    height,
+                    text: count,
+                    title: count,
                 },
                 hgap: 5,
             }, {
                 type: "bi.label",
-                height: o.height,
+                height,
                 text: BI.i18nText("BI-Tiao_Data"),
-                textAlign: "left"
-            }, BI.isNotEmptyObject(o.rowInfoObject) ? o.rowInfoObject : null]
+                textAlign: "left",
+            }, isNotEmptyObject(rowInfoObject) ? rowInfoObject : null],
         };
-    },
+    }
 
-    setAllPages: function (v) {
-        this.allPages.setText("/" + v);
+    setAllPages (v) {
+        this.allPages.setText(`/${v}`);
         this.allPages.setTitle(v);
         this.options.pages = v;
         this.pager.setAllPages(v);
         this.editor.setEnable(v >= 1);
         this.setPagerVisible(v > 1);
-    },
+    }
 
-    setShowRowInfo: function (b) {
+    setShowRowInfo (b) {
         this.options.showRowInfo = b;
         this.rowCountObject.setVisible(b);
-    },
+    }
 
-    setValue: function (v) {
+    setValue (v) {
         this.pager.setValue(v);
-    },
+    }
 
-    setVPage: function (v) {
+    setVPage (v) {
         this.pager.setValue(v);
-    },
+    }
 
-    setCount: function (count) {
+    setCount (count) {
         if (this.options.showRowCount) {
             this.rowCount.setText(count);
             this.rowCount.setTitle(count);
         }
-    },
+    }
 
-    setCountPrevText: function (text) {
+    setCountPrevText (text) {
         if (this.options.showRowCount) {
             this.prevText.setText(text);
         }
-    },
+    }
 
-    getCurrentPage: function () {
+    getCurrentPage () {
         return this.pager.getCurrentPage();
-    },
+    }
 
-    hasPrev: function () {
+    hasPrev () {
         return this.pager.hasPrev();
-    },
+    }
 
-    hasNext: function () {
+    hasNext () {
         return this.pager.hasNext();
-    },
+    }
 
-    isShowPager: function () {
+    isShowPager () {
         return this.options.showRowInfo || this.options.pages > 1;
-    },
+    }
 
-    setPagerVisible: function (b) {
+    setPagerVisible (b) {
         this.editor.setVisible(b);
         this.allPages.setVisible(b);
         this.pager.setVisible(b);
-    },
+    }
 
-    populate: function () {
+    populate () {
         this.pager.populate();
         this.setPagerVisible(this.options.pages > 1);
     }
-});
-BI.AllCountPager.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.all_count_pager", BI.AllCountPager);
+}

src/case/pager/pager.detail.js

@@ -5,9 +5,15 @@
  * @class BI.DetailPager
  * @extends BI.Widget
  */
-BI.DetailPager = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.DetailPager.superclass._defaultConfig.apply(this, arguments), {
+
+import { shortcut, Widget, extend, emptyFn, result, debounce, isKey, createWidget, createItems, Controller, Events, MIN, MAX } from "@/core";
+@shortcut()
+export class DetailPager extends Widget {
+    static xtype = "bi.detail_pager";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
+    _defaultConfig () {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-detail-pager",
             behaviors: {},
             layouts: [{
@@ -19,11 +25,11 @@ BI.DetailPager = BI.inherit(BI.Widget, {
             dynamicShowFirstLast: false, // 是否动态显示首页、尾页
             dynamicShowPrevNext: false, // 是否动态显示上一页、下一页
             pages: false, // 总页数
-            curr: function () {
+            curr () {
                 return 1;
             }, // 初始化当前页
             groups: 0, // 连续显示分页数
-            jump: BI.emptyFn, // 分页的回调函数
+            jump: emptyFn, // 分页的回调函数
 
             first: false, // 是否显示首页
             last: false, // 是否显示尾页
@@ -31,35 +37,34 @@ BI.DetailPager = BI.inherit(BI.Widget, {
             next: "下一页",
 
             firstPage: 1,
-            lastPage: function () { // 在万不得已时才会调用这个函数获取最后一页的页码,  主要作用于setValue方法
+            lastPage () { // 在万不得已时才会调用这个函数获取最后一页的页码,  主要作用于setValue方法
                 return 1;
             },
-            hasPrev: BI.emptyFn, // pages不可用时有效
-            hasNext: BI.emptyFn  // pages不可用时有效
+            hasPrev: emptyFn, // pages不可用时有效
+            hasNext: emptyFn, // pages不可用时有效
         });
-    },
-    _init: function () {
-        BI.DetailPager.superclass._init.apply(this, arguments);
-        var self = this;
-        this.currPage = BI.result(this.options, "curr");
+    }
+    _init () {
+        super._init(...arguments);
+        this.currPage = result(this.options, "curr");
         // 翻页太灵敏
         this._lock = false;
-        this._debouce = BI.debounce(function () {
-            self._lock = false;
+        this._debouce = debounce(() => {
+            this._lock = false;
         }, 300);
         this._populate();
-    },
-
-    _populate: function () {
-        var self = this, o = this.options, view = [], dict = {};
+    }
+    _populate () {
+        const o = this.options, view = [], dict = {};
+        const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options;
         this.empty();
-        var pages = BI.result(o, "pages");
-        var curr = BI.result(this, "currPage");
-        var groups = BI.result(o, "groups");
-        var first = BI.result(o, "first");
-        var last = BI.result(o, "last");
-        var prev = BI.result(o, "prev");
-        var next = BI.result(o, "next");
+        const pages = result(o, "pages");
+        const curr = result(this, "currPage");
+        let groups = result(o, "groups");
+        let first = result(o, "first");
+        let last = result(o, "last");
+        const prev = result(o, "prev");
+        const next = result(o, "next");
 
         if (pages === false) {
             groups = 0;
@@ -73,32 +78,32 @@ BI.DetailPager = BI.inherit(BI.Widget, {
         dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups));
 
         // 当前页非首页，则输出上一页
-        if (((!o.dynamicShow && !o.dynamicShowPrevNext) || curr > 1) && prev !== false) {
-            if (BI.isKey(prev)) {
+        if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) {
+            if (isKey(prev)) {
                 view.push({
                     text: prev,
                     value: "prev",
-                    disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false)
+                    disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
                 });
             } else {
-                view.push(BI.extend({
-                    disabled: pages === false ? o.hasPrev(curr) === false : !(curr > 1 && prev !== false)
+                view.push(extend({
+                    disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
                 }, prev));
             }
         }
 
         // 当前组非首组，则输出首页
-        if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) {
+        if (((!dynamicShow && !dynamicShowFirstLast) || (dict.index > 1 && groups !== 0)) && first) {
             view.push({
                 text: first,
                 value: "first",
-                disabled: !(dict.index > 1 && groups !== 0)
+                disabled: !(dict.index > 1 && groups !== 0),
             });
             if (dict.index > 1 && groups !== 0) {
                 view.push({
                     type: "bi.label",
                     cls: "page-ellipsis",
-                    text: "\u2026"
+                    text: "\u2026",
                 });
             }
         }
@@ -107,13 +112,14 @@ BI.DetailPager = BI.inherit(BI.Widget, {
         dict.poor = Math.floor((groups - 1) / 2);
         dict.start = dict.index > 1 ? curr - dict.poor : 1;
         dict.end = dict.index > 1 ? (function () {
-            var max = curr + (groups - dict.poor - 1);
+            const max = curr + (groups - dict.poor - 1);
+            
             return max > pages ? pages : max;
         }()) : groups;
         if (dict.end - dict.start < groups - 1) { // 最后一组状态
             dict.start = dict.end - groups + 1;
         }
-        var s = dict.start, e = dict.end;
+        let s = dict.start, e = dict.end;
         if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) {
             s++;
             e--;
@@ -123,164 +129,166 @@ BI.DetailPager = BI.inherit(BI.Widget, {
                 view.push({
                     text: s,
                     value: s,
-                    selected: true
+                    selected: true,
                 });
             } else {
                 view.push({
                     text: s,
-                    value: s
+                    value: s,
                 });
             }
         }
 
         // 总页数大于连续分页数，且当前组最大页小于总页，输出尾页
-        if (((!o.dynamicShow && !o.dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) {
+        if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) {
             if (pages > groups && dict.end < pages && groups !== 0) {
                 view.push({
                     type: "bi.label",
                     cls: "page-ellipsis",
-                    text: "\u2026"
+                    text: "\u2026",
                 });
             }
             view.push({
                 text: last,
                 value: "last",
-                disabled: !(pages > groups && dict.end < pages && groups !== 0)
+                disabled: !(pages > groups && dict.end < pages && groups !== 0),
             });
         }
 
         // 当前页不为尾页时，输出下一页
         dict.flow = !prev && groups === 0;
-        if (((!o.dynamicShow && !o.dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
+        if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
             view.push((function () {
-                if (BI.isKey(next)) {
+                if (isKey(next)) {
                     if (pages === false) {
-                        return {text: next, value: "next", disabled: o.hasNext(curr) === false};
+                        return { text: next, value: "next", disabled: hasNext(curr) === false };
                     }
+                    
                     return (dict.flow && curr === pages)
                         ?
                         { text: next, value: "next", disabled: true }
                         :
                         { text: next, value: "next", disabled: !(curr !== pages && next || dict.flow) };
                 }
-                return BI.extend({
-                    disabled: pages === false ? o.hasNext(curr) === false : !(curr !== pages && next || dict.flow)
-                }, next);
                 
+                return extend({
+                    disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow),
+                }, next);
             }()));
         }
 
-        this.button_group = BI.createWidget({
+        this.button_group = createWidget({
             type: "bi.button_group",
             element: this,
-            items: BI.createItems(view, {
+            items: createItems(view, {
                 cls: "page-item bi-border bi-list-item-active",
-                height: 23
+                height: 23,
             }),
-            behaviors: o.behaviors,
-            layouts: o.layouts
+            behaviors,
+            layouts,
         });
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            if (self._lock === true) {
+        this.button_group.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
+            if (this._lock === true) {
                 return;
             }
-            self._lock = true;
-            self._debouce();
-            if (type === BI.Events.CLICK) {
-                var v = self.button_group.getValue()[0];
+            this._lock = true;
+            this._debouce();
+            if (type === Events.CLICK) {
+                const v = this.button_group.getValue()[0];
                 switch (v) {
                 case "first":
-                        self.currPage = 1;
+                    this.currPage = 1;
                     break;
                 case "last":
-                        self.currPage = pages;
+                    this.currPage = pages;
                     break;
                 case "prev":
-                        self.currPage--;
+                    this.currPage--;
                     break;
                 case "next":
-                        self.currPage++;
+                    this.currPage++;
                     break;
                 default:
-                        self.currPage = v;
+                    this.currPage = v;
                     break;
                 }
-                o.jump.apply(self, [{
-                    pages: pages,
-                    curr: self.currPage
+                jump.apply(this, [{
+                    pages,
+                    curr: this.currPage,
                 }]);
-                self._populate();
-                self.fireEvent(BI.DetailPager.EVENT_CHANGE, obj);
+                this._populate();
+                this.fireEvent(DetailPager.EVENT_CHANGE, obj);
             }
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
         });
-        this.fireEvent(BI.DetailPager.EVENT_AFTER_POPULATE);
-    },
+        this.fireEvent(DetailPager.EVENT_AFTER_POPULATE);
+    }
 
-    getCurrentPage: function () {
+    getCurrentPage () {
         return this.currPage;
-    },
+    }
 
-    setAllPages: function (pages) {
+    setAllPages (pages) {
         this.options.pages = pages;
         this._populate();
-    },
+    }
 
-    hasPrev: function (v) {
+    hasPrev (v) {
         v || (v = 1);
-        var o = this.options;
-        var pages = this.options.pages;
-        return pages === false ? o.hasPrev(v) : v > 1;
-    },
+        const { hasPrev } = this.options;
+        const pages = this.options.pages;
+        
+        return pages === false ? hasPrev(v) : v > 1;
+    }
 
-    hasNext: function (v) {
+    hasNext (v) {
         v || (v = 1);
-        var o = this.options;
-        var pages = this.options.pages;
-        return pages === false ? o.hasNext(v) : v < pages;
-    },
+        const { hasNext } = this.options;
+        const pages = this.options.pages;
+        
+        return pages === false ? hasNext(v) : v < pages;
+    }
 
-    setValue: function (v) {
-        var o = this.options;
+    setValue (v) {
+        const o = this.options;
+        const { pages } = this.options;
         v = v || 0;
         v = v < 1 ? 1 : v;
-        if (o.pages === false) {
-            var lastPage = BI.result(o, "lastPage"), firstPage = 1;
-            this.currPage = v > lastPage ? lastPage : ((firstPage = BI.result(o, "firstPage")), (v < firstPage ? firstPage : v));
+        if (pages === false) {
+            const lastPage = result(o, "lastPage");
+            let firstPage = 1;
+            this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v));
         } else {
-            v = v > o.pages ? o.pages : v;
+            v = v > pages ? pages : v;
             this.currPage = v;
         }
         this._populate();
-    },
+    }
 
-    getValue: function () {
-        var val = this.button_group.getValue()[0];
+    getValue () {
+        const val = this.button_group.getValue()[0];
         switch (val) {
         case "prev":
             return -1;
         case "next":
             return 1;
         case "first":
-                return BI.MIN;
+            return MIN;
         case "last":
-                return BI.MAX;
+            return MAX;
         default :
             return val;
         }
-    },
+    }
 
-    attr: function (key, value) {
-        BI.DetailPager.superclass.attr.apply(this, arguments);
+    attr (key, value) {
+        super.attr(...arguments);
         if (key === "curr") {
-            this.currPage = BI.result(this.options, "curr");
+            this.currPage = result(this.options, "curr");
+        }
     }
-    },
 
-    populate: function () {
+    populate () {
         this._populate();
     }
-});
-BI.DetailPager.EVENT_CHANGE = "EVENT_CHANGE";
-BI.DetailPager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
-BI.shortcut("bi.detail_pager", BI.DetailPager);
+}

src/case/pager/pager.direction.js

@@ -5,80 +5,83 @@
  * @class BI.DirectionPager
  * @extends BI.Widget
  */
-BI.DirectionPager = BI.inherit(BI.Widget, {
 
-    _defaultConfig: function () {
-        return BI.extend(BI.DirectionPager.superclass._defaultConfig.apply(this, arguments), {
+import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core";
+import { Pager } from "@/base";
+@shortcut()
+export class DirectionPager extends Widget {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static xtype = "bi.direction_pager";
+
+    _defaultConfig () {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-direction-pager",
             height: 24,
             horizontal: {
                 pages: false, // 总页数
                 curr: 1, // 初始化当前页， pages为数字时可用
 
-                hasPrev: BI.emptyFn,
-                hasNext: BI.emptyFn,
+                hasPrev: emptyFn,
+                hasNext: emptyFn,
                 firstPage: 1,
-                lastPage: BI.emptyFn
+                lastPage: emptyFn,
             },
             vertical: {
                 pages: false, // 总页数
                 curr: 1, // 初始化当前页， pages为数字时可用
 
-                hasPrev: BI.emptyFn,
-                hasNext: BI.emptyFn,
+                hasPrev: emptyFn,
+                hasNext: emptyFn,
                 firstPage: 1,
-                lastPage: BI.emptyFn
-            }
-        });
+                lastPage: emptyFn,
             },
-    _init: function () {
-        BI.DirectionPager.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var v = o.vertical, h = o.horizontal;
+        });
+    }
+    _init () {
+        super._init(...arguments);
         this._createVPager();
         this._createHPager();
-        this.layout = BI.createWidget({
+        this.layout = createWidget({
             type: "bi.absolute",
             scrollable: false,
             element: this,
             items: [{
                 el: this.vpager,
                 top: 0,
-                right: 86
+                right: 86,
             }, {
                 el: this.vlabel,
                 top: 0,
-                right: 110
+                right: 110,
             }, {
                 el: this.hpager,
                 top: 0,
-                right: 0
+                right: 0,
             }, {
                 el: this.hlabel,
                 top: 0,
-                right: 24
-            }]
+                right: 24,
+            }],
         });
-    },
+    }
 
-    _createVPager: function () {
-        var self = this, o = this.options;
-        var v = o.vertical;
-        this.vlabel = BI.createWidget({
+    _createVPager () {
+        const v = this.options.vertical;
+        this.vlabel = createWidget({
             type: "bi.label",
             width: 24,
             height: 24,
             value: v.curr,
             title: v.curr,
-            invisible: true
+            invisible: true,
         });
-        this.vpager = BI.createWidget({
+        this.vpager = createWidget({
             type: "bi.pager",
             width: 72,
             layouts: [{
                 type: "bi.horizontal",
                 scrollx: false,
-                rgap: 24
+                rgap: 24,
             }],
             invisible: true,
 
@@ -96,7 +99,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
                 warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
                 height: 22,
                 width: 22,
-                cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2"
+                cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
             },
             next: {
                 type: "bi.icon_button",
@@ -105,42 +108,40 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
                 warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
                 height: 22,
                 width: 22,
-                cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2"
+                cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
             },
 
             hasPrev: v.hasPrev,
             hasNext: v.hasNext,
             firstPage: v.firstPage,
-            lastPage: v.lastPage
+            lastPage: v.lastPage,
         });
 
-        this.vpager.on(BI.Pager.EVENT_CHANGE, function () {
-            self.fireEvent(BI.DirectionPager.EVENT_CHANGE);
+        this.vpager.on(Pager.EVENT_CHANGE, () => {
+            this.fireEvent(DirectionPager.EVENT_CHANGE);
         });
-        this.vpager.on(BI.Pager.EVENT_AFTER_POPULATE, function () {
-            self.vlabel.setValue(this.getCurrentPage());
-            self.vlabel.setTitle(this.getCurrentPage());
+        this.vpager.on(Pager.EVENT_AFTER_POPULATE, () => {
+            this.vlabel.setValue(this.vpager.getCurrentPage());
+            this.vlabel.setTitle(this.vpager.getCurrentPage());
         });
-    },
-
-    _createHPager: function () {
-        var self = this, o = this.options;
-        var h = o.horizontal;
-        this.hlabel = BI.createWidget({
+    }
+    _createHPager () {
+        const h = this.options.horizontal;
+        this.hlabel = createWidget({
             type: "bi.label",
             width: 24,
             height: 24,
             value: h.curr,
             title: h.curr,
-            invisible: true
+            invisible: true,
         });
-        this.hpager = BI.createWidget({
+        this.hpager = createWidget({
             type: "bi.pager",
             width: 72,
             layouts: [{
                 type: "bi.horizontal",
                 scrollx: false,
-                rgap: 24
+                rgap: 24,
             }],
             invisible: true,
 
@@ -158,7 +159,7 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
                 warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
                 height: 22,
                 width: 22,
-                cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2"
+                cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
             },
             next: {
                 type: "bi.icon_button",
@@ -167,74 +168,74 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
                 warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
                 height: 22,
                 width: 22,
-                cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2"
+                cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
             },
 
             hasPrev: h.hasPrev,
             hasNext: h.hasNext,
             firstPage: h.firstPage,
-            lastPage: h.lastPage
+            lastPage: h.lastPage,
         });
 
-        this.hpager.on(BI.Pager.EVENT_CHANGE, function () {
-            self.fireEvent(BI.DirectionPager.EVENT_CHANGE);
+        this.hpager.on(Pager.EVENT_CHANGE, () => {
+            this.fireEvent(DirectionPager.EVENT_CHANGE);
         });
-        this.hpager.on(BI.Pager.EVENT_AFTER_POPULATE, function () {
-            self.hlabel.setValue(this.getCurrentPage());
-            self.hlabel.setTitle(this.getCurrentPage());
+        this.hpager.on(Pager.EVENT_AFTER_POPULATE, () => {
+            this.hlabel.setValue(this.hpager.getCurrentPage());
+            this.hlabel.setTitle(this.hpager.getCurrentPage());
         });
-    },
+    }
 
-    getVPage: function () {
+    getVPage () {
         return this.vpager.getCurrentPage();
-    },
+    }
 
-    getHPage: function () {
+    getHPage () {
         return this.hpager.getCurrentPage();
-    },
+    }
 
-    setVPage: function (v) {
+    setVPage (v) {
         this.vpager.setValue(v);
         this.vlabel.setValue(v);
         this.vlabel.setTitle(v);
-    },
+    }
 
-    setHPage: function (v) {
+    setHPage (v) {
         this.hpager.setValue(v);
         this.hlabel.setValue(v);
         this.hlabel.setTitle(v);
-    },
+    }
 
-    hasVNext: function () {
+    hasVNext () {
         return this.vpager.hasNext();
-    },
+    }
 
-    hasHNext: function () {
+    hasHNext () {
         return this.hpager.hasNext();
-    },
+    }
 
-    hasVPrev: function () {
+    hasVPrev () {
         return this.vpager.hasPrev();
-    },
+    }
 
-    hasHPrev: function () {
+    hasHPrev () {
         return this.hpager.hasPrev();
-    },
+    }
 
-    setHPagerVisible: function (b) {
+    setHPagerVisible (b) {
         this.hpager.setVisible(b);
         this.hlabel.setVisible(b);
-    },
+    }
 
-    setVPagerVisible: function (b) {
+    setVPagerVisible (b) {
         this.vpager.setVisible(b);
         this.vlabel.setVisible(b);
-    },
+    }
 
-    populate: function () {
+    populate () {
         this.vpager.populate();
         this.hpager.populate();
-        var vShow = false, hShow = false;
+        let vShow = false, hShow = false;
         if (!this.hasHNext() && !this.hasHPrev()) {
             this.setHPagerVisible(false);
         } else {
@@ -248,8 +249,8 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
             vShow = true;
         }
         this.setVisible(hShow || vShow);
-        var num = [86, 110, 0, 24];
-        var items = this.layout.attr("items");
+        const num = [86, 110, 0, 24];
+        const items = this.layout.attr("items");
 
         if (vShow === true && hShow === true) {
             items[0].right = num[0];
@@ -265,12 +266,10 @@ BI.DirectionPager = BI.inherit(BI.Widget, {
         }
         this.layout.attr("items", items);
         this.layout.resize();
-    },
+    }
 
-    clear: function () {
+    clear () {
         this.vpager.attr("curr", 1);
         this.hpager.attr("curr", 1);
     }
-});
-BI.DirectionPager.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.direction_pager", BI.DirectionPager);
+}

src/core/wrapper/layout/fill/auto.vtape.js

@@ -1,9 +1,17 @@
-BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, any, isEmptyObject, isNull, backAny } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class AutoVerticalTapeLayout extends Layout {
+    static xtype = "bi.vtape_auto";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-auto-htape",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -11,16 +19,17 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             rowSize: [],
-            items: []
+            items: [],
         });
-    },
+    }
+
+    render() {
+        const o = this.options;
         
-    render: function () {
-        var self = this, o = this.options;
         return {
             type: "bi.vtape",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             items: o.items,
             horizontalAlign: o.horizontalAlign,
@@ -35,65 +44,65 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _handleResize: function () {
-        var self = this, o = this.options;
-        var items = o.items;
-        var top = {}, bottom = {};
+    _handleResize() {
+        const o = this.options;
+        const items = o.items;
+        const top = {}, bottom = {};
         top[0] = o.innerVgap;
         bottom[items.length - 1] = o.innerVgap;
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.layout.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            const w = this.layout.getWidgetByName(this._getChildName(i));
+            let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
             if (o.rowSize.length > 0) {
                 if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                     rowSize = item.height;
                 }
             }
-            if (BI.isNull(top[i])) {
-                var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
+            if (isNull(top[i])) {
+                let preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
                 if (preRowSize === "") {
-                    preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height();
+                    preRowSize = this.layout.getWidgetByName(this._getChildName(i - 1)).element.height();
                 }
-                top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
+                top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
+                top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap),
             });
 
             if (rowSize === "fill") {
                 return true;
             }
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var w = self.layout.getWidgetByName(self._getChildName(i));
-            var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
-            if (BI.isNull(bottom[i])) {
-                var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
+            const w = this.layout.getWidgetByName(this._getChildName(i));
+            const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+            if (isNull(bottom[i])) {
+                let nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
                 if (nextRowSize === "") {
-                    nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height();
+                    nextRowSize = this.layout.getWidgetByName(this._getChildName(i + 1)).element.height();
                 }
-                bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
+                bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
             }
             w.element.css({
-                bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap),
+                bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap),
             });
 
             if (rowSize === "fill") {
                 return true;
             }
         });
-    },
+    }
 
-    mounted: function () {
+    mounted() {
         if (window.ResizeObserver) {
             this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this));
             this.resizeObserver.observe(this.element[0]);
@@ -103,23 +112,22 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
             this.mutationObserver.observe(this.element[0], {
                 attributes: true,
                 childList: true,
-                subtree: true
+                subtree: true,
             });
         }
         this._handleResize();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
         this.resizeObserver && this.resizeObserver.unobserve(this.element[0]);
         this.mutationObserver && this.mutationObserver.disconnect();
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(...args) {
+        this.layout.populate(...args);
+    }
 }
-});
-BI.shortcut("bi.vtape_auto", BI.AutoVerticalTapeLayout);

src/core/wrapper/layout/fill/fill.horizontal.js

@@ -1,6 +1,9 @@
+import { shortcut } from "@/core/decorator";
+
 /**
  * 横向填满布局
  */
-BI.HorizontalFillLayout = function () {
-};
-BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout);
+@shortcut()
+export class HorizontalFillLayout {
+    static xtype = "bi.horizontal_fill";
+}

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

@@ -1,6 +1,9 @@
+import { shortcut } from "@/core/decorator";
+
 /**
  * 纵向填满布局
  */
-BI.VerticalFillLayout = function () {
-};
-BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout);
+@shortcut()
+export class VerticalFillLayout {
+    static xtype = "bi.vertical_fill";
+}

src/core/wrapper/layout/fill/float.fill.horizontal.js

@@ -1,9 +1,18 @@
-BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, any, isEmptyObject, isNull, backAny, isFunction, compact, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class FloatHorizontalFillLayout extends Layout {
+    static xtype = "bi.horizontal_float_fill";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-float-fill clearfix",
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
             hgap: 0,
             vgap: 0,
             lgap: 0,
@@ -11,134 +20,136 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
             tgap: 0,
             bgap: 0,
             columnSize: [],
-            items: []
+            items: [],
         });
-    },
-    render: function () {
-        BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    stroke: function (items) {
-        var self = this, o = this.options;
-        items = BI.compact(items);
-        var rank = 0;
+    stroke(items) {
+        const o = this.options;
+        items = compact(items);
+        let rank = 0;
 
-        function createWidget (i, item, desc) {
-            if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
-                var w = BI._lazyCreateWidget({
+        const createWidget = (i, item, desc) => {
+            let w;
+            if (o.verticalAlign !== VerticalAlign.Stretch) {
+                w = _lazyCreateWidget({
                     type: "bi.vertical_adapt",
-                    horizontalAlign: BI.HorizontalAlign.Stretch,
+                    horizontalAlign: HorizontalAlign.Stretch,
                     verticalAlign: o.verticalAlign,
                     columnSize: ["fill"],
-                    items: [item]
+                    items: [item],
                 });
             } else {
-                var w = BI._lazyCreateWidget(item);
+                w = _lazyCreateWidget(item);
             }
-            if (o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
+            if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
                 w.element.css({
-                    "margin-top": self._optimiseGap(o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item))
+                    "margin-top": this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
                 });
             }
             if (desc) {
-                if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item))
+                        "margin-right": this._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
-                if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-left": self._optimiseGap(o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item))
+                        "margin-left": this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
             } else {
-                if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item))
+                        "margin-left": this._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
-                if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
+                if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
                     w.element.css({
-                        "margin-right": self._optimiseGap(o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item))
+                        "margin-right": this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
                     });
                 }
             }
-            if (o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
+            if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
                 w.element.css({
-                    "margin-bottom": self._optimiseGap(o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item))
+                    "margin-bottom": this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
                 });
             }
-            var top = o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item),
-                bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
-            if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
+            const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
+                bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
+            if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
                 w.element.css({
-                    height: "calc(100% - " + self._optimiseGap(top + bottom) + ")"
+                    height: `calc(100% - ${this._optimiseGap(top + bottom)})`,
                 });
             }
             w.element.css({
-                position: "relative"
+                position: "relative",
             });
+            
             return w;
-        }
+        };
 
-        BI.any(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        any(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize === "fill") {
                 return true;
             }
-            var w = createWidget(i, item);
-            self.addWidget(self._getChildName(rank++), w);
+            const w = createWidget(i, item);
+            this.addWidget(this._getChildName(rank++), w);
             w.element.css({
-                float: "left"
+                "float": "left",
             });
         });
-        BI.backAny(items, function (i, item) {
-            if (BI.isEmptyObject(item)) {
+        backAny(items, (i, item) => {
+            if (isEmptyObject(item)) {
                 return true;
             }
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize === "fill") {
                 return true;
             }
-            var w = createWidget(i, item, true);
-            self.addWidget(self._getChildName(rank++), w);
+            const w = createWidget(i, item, true);
+            this.addWidget(this._getChildName(rank++), w);
             w.element.css({
-                float: "right"
+                "float": "right",
             });
         });
-        BI.each(items, function (i, item) {
-            var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+        each(items, (i, item) => {
+            const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
             if (columnSize === "fill") {
-                var w = createWidget(i, item);
-                self.addWidget(self._getChildName(rank++), w);
+                const w = createWidget(i, item);
+                this.addWidget(this._getChildName(rank++), w);
             }
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("填充布局不需要resize");
-    },
+    }
 
-    update: function (opt) {
+    update(opt) {
         return this.forceUpdate(opt);
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.horizontal_float_fill", BI.FloatHorizontalFillLayout);
+}

src/core/wrapper/layout/fill/index.js

@@ -0,0 +1,4 @@
+export { AutoVerticalTapeLayout } from "./auto.vtape";
+export { HorizontalFillLayout } from "./fill.horizontal";
+export { VerticalFillLayout } from "./fill.vertical";
+export { FloatHorizontalFillLayout } from "./float.fill.horizontal";

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

@@ -1,30 +1,40 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexCenterLayout
- * @extends BI.Layout
+ * @class FlexCenterLayout
+ * @extends Layout
  */
-BI.FlexCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexCenterLayout extends Layout {
+    static xtype = "bi.flex_center_adapt";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-c",
-            verticalAlign: BI.VerticalAlign.Middle,
-            horizontalAlign: BI.HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Center,
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var self = this, o = this.options;
+    }
+
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.flex_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -39,16 +49,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
             bgap: o.bgap,
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);
+}

src/core/wrapper/layout/flex/flex.horizontal.center.js

@@ -1,15 +1,23 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexHorizontalCenter
- * @extends BI.Layout
+ * @class FlexHorizontalCenter
+ * @extends Layout
  */
-BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexHorizontalCenter extends Layout {
+    static xtype = "bi.flex_horizontal_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-h-c",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrolly: false,
             hgap: 0,
@@ -17,15 +25,17 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var self = this, o = this.options;
+    }
+
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.flex_vertical",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -40,17 +50,20 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
             bgap: o.bgap,
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
-BI.shortcut("bi.flex_horizontal_center_adapt", BI.FlexHorizontalCenter);
+}
+
+@shortcut()
+export class FlexHorizontalCenterAdapt extends FlexHorizontalCenter {
+    static xtype = "bi.flex_horizontal_center_adapt";
+}

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

@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexHorizontalLayout
- * @extends BI.Layout
+ * @class FlexHorizontalLayout
+ * @extends Layout
  */
-BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexHorizontalLayout extends Layout {
+    static xtype = "bi.flex_horizontal";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-h",
-            verticalAlign: BI.VerticalAlign.Top,
-            horizontalAlign: BI.HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
+            verticalAlign: VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满，设置成Stretch
             columnSize: [],
             scrollx: true,
             hgap: 0,
@@ -18,52 +26,54 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
         }
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.columnSize.length > 0) {
             return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.width === "fill" || item.width === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (o.columnSize.length > 0) {
             if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                 columnSize = null;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (columnSize !== "auto") {
             if (columnSize === "fill" || columnSize === "") {
-                if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) {
+                if (o.horizontalAlign !== HorizontalAlign.Stretch) {
                     if (o.scrollable === true || o.scrollx === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -93,12 +103,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, i);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
+    populate(...args) {
+        super.populate(...args);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);
+}

src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@@ -1,6 +1,13 @@
-BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, isArray, each, map, stripEL } from "@/core/2.base";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class FlexLeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.flex_left_right_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-lr-v-c",
             columnSize: [],
             items: {},
@@ -15,33 +22,35 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
-        var items = this._formatItems(o.items);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        const items = this._formatItems(o.items);
+        
         return {
             type: "bi.flex_vertical_adapt",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []),
-            items: items,
+            items,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
             innerHgap: o.innerHgap,
-            innerVgap: o.innerVgap
+            innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var self = this, o = this.options;
-        var left, right;
-        if (BI.isArray(items)) {
-            BI.each(items, function (i, item) {
+    _formatItems(items) {
+        const o = this.options;
+        let left, right;
+        if (isArray(items)) {
+            each(items, (i, item) => {
                 if (item.left) {
                     left = item.left;
                 }
@@ -50,32 +59,34 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
-        var leftItems = left || items.left || [];
-        var rightItems = right || items.right || [];
-        leftItems = BI.map(leftItems, function (i, item) {
-            var json = {
-                el: BI.stripEL(item)
+        let leftItems = left || items.left || [];
+        const rightItems = right || items.right || [];
+        leftItems = map(leftItems, (i, item) => {
+            const json = {
+                el: stripEL(item),
             };
-            if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
+            if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
             }
-            if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
-                json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item);
+            if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
+                json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
             }
+            
             return json;
         });
+        
         return leftItems.concat({
             el: {
                 type: "bi.flex_vertical_adapt",
                 columnSize: o.columnSize.slice(leftItems.length),
                 css: {
-                    "margin-left": "auto"
+                    "margin-left": "auto",
                 },
                 hgap: o.rhgap,
                 vgap: o.rvgap,
@@ -83,22 +94,21 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 rgap: o.rrgap,
                 tgap: o.rtgap,
                 bgap: o.rbgap,
-                items: rightItems
-            }
-        });
+                items: rightItems,
             },
+        });
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout);
+}

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

@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalCenter
- * @extends BI.Layout
+ * @class FlexVerticalCenter
+ * @extends Layout
  */
-BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexVerticalCenter extends Layout {
+    static xtype = "bi.flex_vertical_adapt";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-v-c",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             scrollx: false,
             hgap: 0,
@@ -18,15 +26,17 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var self = this, o = this.options;
+    }
+
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.flex_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             horizontalAlign: o.horizontalAlign,
@@ -41,17 +51,20 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
             hgap: o.hgap,
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
-BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);
+}
+
+@shortcut()
+export class FlexVerticalCenterAdapt extends FlexVerticalCenter {
+    static xtype = "bi.flex_vertical_center_adapt"
+}

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

@@ -1,15 +1,21 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalLayout
- * @extends BI.Layout
+ * @class FlexVerticalLayout
+ * @extends Layout
  */
-BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexVerticalLayout extends Layout {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-v",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrolly: true,
             hgap: 0,
@@ -17,52 +23,54 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+    }
+
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options;
+        this.element.addClass(`h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
         }
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
             self.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.rowSize.length > 0) {
             return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.height === "fill" || item.height === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
-        var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement.apply(this, arguments);
+        let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
         if (o.rowSize.length > 0) {
             if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                 rowSize = null;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (rowSize !== "auto") {
             if (rowSize === "fill" || rowSize === "") {
-                if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
+                if (o.verticalAlign !== VerticalAlign.Stretch) {
                     if (o.scrollable === true || o.scrolly === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -92,12 +100,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, null, i);
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate.apply(this, arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);
+}

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

@@ -0,0 +1,7 @@
+export { FlexCenterLayout } from "./flex.center";
+export { FlexHorizontalCenter, FlexHorizontalCenterAdapt } from "./flex.horizontal.center";
+export { FlexHorizontalLayout } from "./flex.horizontal";
+export { FlexLeftRightVerticalAdaptLayout } from "./flex.leftrightvertical.center";
+export { FlexVerticalCenter, FlexVerticalCenterAdapt } from "./flex.vertical.center";
+export { FlexVerticalLayout } from "./flex.vertical";
+export * from "./wrapper";

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

@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexWrapperCenterLayout
- * @extends BI.Layout
+ * @class FlexWrapperCenterLayout
+ * @extends Layout
  */
-BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperCenterLayout extends Layout {
+    static xtype = "bi.flex_scrollable_center_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-c",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             scrollx: false,
             scrollable: true,
@@ -19,15 +27,17 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var self = this, o = this.options;
+    }
+
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.flex_scrollable_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -40,16 +50,15 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             lgap: o.lgap,
             rgap: o.rgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout);
+}

src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js

@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalCenter
- * @extends BI.Layout
+ * @class FlexVerticalCenter
+ * @extends Layout
  */
-BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperHorizontalCenter extends Layout {
+    static xtype = "bi.flex_scrollable_horizontal_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-v-c",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrollable: true,
             scrolly: false,
@@ -19,15 +27,17 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var self = this, o = this.options;
+    }
+    
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.flex_scrollable_vertical",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -40,17 +50,20 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             tgap: o.tgap,
             bgap: o.bgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
-BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);
+}
+
+@shortcut()
+export class FlexWrapperHorizontalCenterAdapt extends FlexWrapperHorizontalCenter {
+    static xtype = "bi.flex_scrollable_horizontal_center_adapt";
+}

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

@@ -1,16 +1,25 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { Widget } from "@/core/4.widget";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexHorizontalLayout
- * @extends BI.Layout
+ * @class FlexHorizontalLayout
+ * @extends Layout
  */
-BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperHorizontalLayout extends Layout {
+    static xtype = "bi.flex_scrollable_horizontal";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-h",
-            verticalAlign: BI.VerticalAlign.Top,
-            horizontalAlign: BI.HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
             columnSize: [],
             scrollable: null,
             scrollx: true,
@@ -19,47 +28,49 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
+        this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-h-w v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.columnSize.length > 0) {
             return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.width === "fill" || item.width === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (o.columnSize.length > 0) {
             if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                 columnSize = null;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (columnSize !== "auto") {
             if (columnSize === "fill" || columnSize === "") {
-                if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) {
+                if (o.horizontalAlign !== HorizontalAlign.Stretch) {
                     if (o.scrollable === true || o.scrollx === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -91,21 +102,21 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, i);
+        
         return w;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$wrapper.append(frag);
         this.element.append(this.$wrapper);
-    },
+    }
 
-    _getWrapper: function () {
+    _getWrapper() {
         return this.$wrapper;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);
+}

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

@@ -1,16 +1,24 @@
+import { shortcut } from "@/core/decorator";
+import { extend } from "@/core/2.base";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexVerticalCenter
- * @extends BI.Layout
+ * @class FlexVerticalCenter
+ * @extends Layout
  */
-BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperVerticalCenter extends Layout {
+    static xtype = "bi.flex_scrollable_vertical_adapt";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-v-c",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Middle,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             scrollx: false,
             scrollable: true,
@@ -19,15 +27,17 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        var self = this, o = this.options;
+    }
+
+    render() {
+        const o = this.options;
+        
         return {
             type: "bi.flex_scrollable_horizontal",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             horizontalAlign: o.horizontalAlign,
@@ -40,17 +50,20 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
             vgap: o.vgap,
             lgap: o.lgap,
             rgap: o.rgap,
-            items: o.items
+            items: o.items,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.resize();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(items);
     }
-});
-BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
-BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);
+}
+
+@shortcut()
+export class FlexWrapperVerticalCenterAdapt extends FlexWrapperVerticalCenter {
+    static xtype = "bi.flex_scrollable_vertical_center_adapt";
+}

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

@@ -1,16 +1,25 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction, some } from "@/core/2.base";
+import { Widget } from "@/core/4.widget";
+import { HorizontalAlign, VerticalAlign } from "@/core/constant";
+import { Layout } from "@/core/wrapper/layout";
+
 /**
  *自适应水平和垂直方向都居中容器
  * Created by GUY on 2016/12/2.
  *
- * @class BI.FlexWrapperVerticalLayout
- * @extends BI.Layout
+ * @class FlexWrapperVerticalLayout
+ * @extends Layout
  */
-BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FlexWrapperVerticalLayout extends Layout {
+    static xtype = "bi.flex_scrollable_vertical";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-f-s-v",
-            horizontalAlign: BI.HorizontalAlign.Left,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Left,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             scrollable: null,
             scrolly: true,
@@ -19,47 +28,49 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
+        this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-v-w h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _hasFill: function () {
-        var o = this.options;
+    _hasFill() {
+        const o = this.options;
         if (o.rowSize.length > 0) {
             return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
         }
-        return BI.some(o.items, function (i, item) {
+        
+        return some(o.items, (i, item) => {
             if (item.height === "fill" || item.height === "auto") {
                 return true;
             }
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
-        var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
         if (o.rowSize.length > 0) {
             if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                 rowSize = null;
             }
         }
         w.element.css({
-            position: "relative"
+            position: "relative",
         });
         if (rowSize !== "auto") {
             if (rowSize === "fill" || rowSize === "") {
-                if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
+                if (o.verticalAlign !== VerticalAlign.Stretch) {
                     if (o.scrollable === true || o.scrolly === true) {
                         w.element.addClass("f-s-n");
                     }
@@ -91,21 +102,21 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, null, i);
+        
         return w;
-    },
+    }
 
-    appendFragment: function (frag) {
+    appendFragment(frag) {
         this.$wrapper.append(frag);
         this.element.append(this.$wrapper);
-    },
+    }
 
-    _getWrapper: function () {
+    _getWrapper() {
         return this.$wrapper;
-    },
+    }
 
-    populate: function (items) {
-        BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);
+}

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

@@ -0,0 +1,5 @@
+export { FlexWrapperCenterLayout } from "./flex.wrapper.center";
+export { FlexWrapperHorizontalCenter, FlexWrapperHorizontalCenterAdapt } from "./flex.wrapper.horizontal.center";
+export { FlexWrapperHorizontalLayout } from "./flex.wrapper.horizontal";
+export { FlexWrapperVerticalCenter, FlexWrapperVerticalCenterAdapt } from "./flex.wrapper.vertical.center";
+export { FlexWrapperVerticalLayout } from "./flex.wrapper.vertical";

src/core/wrapper/layout/float/float.absolute.center.js

@@ -1,36 +1,42 @@
+import { shortcut } from "@/core/decorator";
+import { extend, isFunction } from "@/core/2.base";
+import { Layout } from "../../layout";
+
 /**
  * absolute实现的居中布局
- * @class BI.FloatAbsoluteCenterLayout
- * @extends BI.Layout
+ * @class FloatAbsoluteCenterLayout
+ * @extends Layout
  */
-BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatAbsoluteCenterLayout extends Layout {
+    static xtype = "bi.absolute_center_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-c-fl",
         });
-    },
+    }
 
-    render: function () {
-        BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
-            self.populate(newValue);
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
+            this.populate(newValue);
         }) : o.items;
         this.populate(items);
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
+    _addElement(i, item) {
+        const w = super._addElement(...arguments);
         w.element.addClass("bi-abs-c-item").css({
             position: "absolute",
         });
+        
         return w;
-    },
+    }
 
-    populate: function (items) {
-        BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this._mount();
     }
-});
-BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout);
+}

src/core/wrapper/layout/float/float.absolute.horizontal.js

@@ -1,23 +1,32 @@
+import { shortcut } from "@/core/decorator";
+import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * absolute实现的居中布局
- * @class BI.FloatAbsoluteHorizontalLayout
- * @extends BI.Layout
+ * @class FloatAbsoluteHorizontalLayout
+ * @extends Layout
  */
-BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatAbsoluteHorizontalLayout extends Layout {
+    static xtype = "bi.absolute_horizontal_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-h-fl",
-            horizontalAlign: BI.HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center,
             rowSize: [],
             vgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
         
-    render: function () {
-        var self = this, o = this.options;
-        BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
         return {
             type: "bi.vtape",
             horizontalAlign: o.horizontalAlign,
@@ -26,8 +35,8 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             hgap: "50%",
             vgap: o.vgap,
@@ -39,34 +48,35 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options;
-        if (o.horizontalAlign === BI.HorizontalAlign.Left) {
+    _formatItems(items) {
+        const o = this.options;
+        if (o.horizontalAlign === HorizontalAlign.Left) {
             return items;
         }
-        var cls = o.horizontalAlign === BI.HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item";
-        return BI.map(items, function (i, item) {
-            if (!item || BI.isEmptyObject(item)) {
+        const cls = o.horizontalAlign === HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item";
+        
+        return map(items, (i, item) => {
+            if (!item || isEmptyObject(item)) {
                 return item;
             }
-            var el = BI.stripEL(item);
-            if (BI.isWidget(el)) {
+            const el = stripEL(item);
+            if (isWidget(el)) {
                 el.element.addClass(cls);
             } else {
                 el.cls = (el.cls || "") + cls;
             }
+            
             return item;
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout);
+}

src/core/wrapper/layout/float/float.absolute.leftrightvertical.js

@@ -1,8 +1,16 @@
-BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+import { shortcut } from "@/core/decorator";
+import { extend, map, isEmptyObject, stripEL, isWidget, isArray, each } from "@/core/2.base";
+import { VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
+@shortcut()
+export class FloatAbsoluteLeftRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_left_right_vertical_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-lr-v-fl",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: {},
             llgap: 0,
             lrgap: 0,
@@ -15,16 +23,18 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             rhgap: 0,
             rtgap: 0,
             rbgap: 0,
-            rvgap: 0
+            rvgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             items: this._formatItems(o.items),
@@ -33,15 +43,15 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var self = this, o = this.options;
-        var left, right;
-        if (BI.isArray(items)) {
-            BI.each(items, function (i, item) {
+    _formatItems(items) {
+        const o = this.options;
+        let left, right;
+        if (isArray(items)) {
+            each(items, (i, item) => {
                 if (item.left) {
                     left = item.left;
                 }
@@ -50,98 +60,105 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
                 }
             });
         }
-        var leftItems = left || items.left || [];
-        var rightItems = right || items.right || [];
-        leftItems = BI.map(leftItems, function (i, item) {
-            var el = BI.stripEL(item);
-            if (o.verticalAlign === BI.VerticalAlign.Middle) {
-                if (BI.isWidget(el)) {
+        let leftItems = left || items.left || [];
+        let rightItems = right || items.right || [];
+        leftItems = map(leftItems, (i, item) => {
+            const el = stripEL(item);
+            if (o.verticalAlign === VerticalAlign.Middle) {
+                if (isWidget(el)) {
                     el.element.addClass("bi-abs-c-y-item");
                 } else {
-                    el.cls = (el.cls || "") + "bi-abs-c-y-item";
+                    el.cls = `${el.cls || ""}bi-abs-c-y-item`;
                 }
             }
-            var json = {
-                el: el,
-                width: item.width
+            const json = {
+                el,
+                width: item.width,
             };
             // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             //     json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0);
             // }
-            if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
             // if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             //     json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0);
             // }
+
             return json;
         });
-        rightItems = BI.map(rightItems, function (i, item) {
-            var el = BI.stripEL(item);
-            if (o.verticalAlign === BI.VerticalAlign.Middle) {
-                if (BI.isWidget(el)) {
+        rightItems = map(rightItems, (i, item) => {
+            const el = stripEL(item);
+            if (o.verticalAlign === VerticalAlign.Middle) {
+                if (isWidget(el)) {
                     el.element.addClass("bi-abs-c-y-item");
                 } else {
-                    el.cls = (el.cls || "") + "bi-abs-c-y-item";
+                    el.cls = `${el.cls || ""}bi-abs-c-y-item`;
                 }
             }
-            var json = {
-                el: el,
-                width: item.width
+            const json = {
+                el,
+                width: item.width,
             };
             // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
             //     json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0);
             // }
-            if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item);
+            if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
             }
-            if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
-                json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item);
+            if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
+                json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
             }
             // if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
             //     json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0);
             // }
+
             return json;
         });
+        
         return leftItems.concat({}, rightItems);
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_left_right_vertical_float", BI.FloatAbsoluteLeftRightVerticalAdaptLayout);
+}
+
+@shortcut()
+export class FloatAbsoluteRightVerticalAdaptLayout extends Layout {
+    static xtype = "bi.absolute_right_vertical_float";
 
-BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-r-v-fl",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             items: [],
             lgap: 0,
             rgap: 0,
-            hgap: 0
+            hgap: 0,
         });
-    },
-    render: function () {
-        var o = this.options, self = this;
-        BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
+        
         return {
             type: "bi.htape",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             verticalAlign: o.verticalAlign,
             items: [{}].concat(this._formatItems(o.items)),
@@ -151,39 +168,40 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             vgap: "50%",
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        if (this.options.verticalAlign !== BI.VerticalAlign.Middle) {
+    _formatItems(items) {
+        if (this.options.verticalAlign !== VerticalAlign.Middle) {
             return items;
         }
-        return BI.map(items, function (i, item) {
-            if (!item || BI.isEmptyObject(item)) {
+        
+        return map(items, (i, item) => {
+            if (!item || isEmptyObject(item)) {
                 return item;
             }
-            var el = BI.stripEL(item);
-            if (BI.isWidget(el)) {
+            const el = stripEL(item);
+            if (isWidget(el)) {
                 el.element.addClass("bi-abs-c-y-item");
             } else {
-                el.cls = (el.cls || "") + "bi-abs-c-y-item";
+                el.cls = `${el.cls || ""}bi-abs-c-y-item`;
             }
+            
             return item;
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke([{}].concat(this._formatItems(this.options.items)));
-    },
+    }
 
-    addItem: function () {
+    addItem() {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate([{}].concat(this._formatItems(items)));
     }
-});
-BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout);
+}

src/core/wrapper/layout/float/float.absolute.vertical.js

@@ -1,23 +1,32 @@
+import { shortcut } from "@/core/decorator";
+import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
+import { VerticalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * absolute实现的居中布局
- * @class BI.FloatAbsoluteVerticalLayout
- * @extends BI.Layout
+ * @class FloatAbsoluteVerticalLayout
+ * @extends Layout
  */
-BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatAbsoluteVerticalLayout extends Layout {
+    static xtype = "bi.absolute_vertical_float";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-abs-h-fl",
-            verticalAlign: BI.VerticalAlign.Middle,
+            verticalAlign: VerticalAlign.Middle,
             columnSize: [],
             hgap: 0,
             lgap: 0,
-            rgap: 0
+            rgap: 0,
         });
-    },
+    }
+
+    render() {
+        const o = this.options;
+        super.render(...arguments);
         
-    render: function () {
-        var self = this, o = this.options;
-        BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments);
         return {
             type: "bi.htape",
             verticalAlign: o.verticalAlign,
@@ -26,8 +35,8 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             scrollx: o.scrollx,
             scrolly: o.scrolly,
             scrollable: o.scrollable,
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             vgap: "50%",
             hgap: o.hgap,
@@ -39,34 +48,35 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
             innerHgap: o.innerHgap,
             innerVgap: o.innerVgap,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options;
-        if (o.verticalAlign === BI.VerticalAlign.Top) {
+    _formatItems(items) {
+        const o = this.options;
+        if (o.verticalAlign === VerticalAlign.Top) {
             return items;
         }
-        var cls = o.verticalAlign === BI.VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item";
-        return BI.map(items, function (i, item) {
-            if (!item || BI.isEmptyObject(item)) {
+        const cls = o.verticalAlign === VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item";
+        
+        return map(items, (i, item) => {
+            if (!item || isEmptyObject(item)) {
                 return item;
             }
-            var el = BI.stripEL(item);
-            if (BI.isWidget(el)) {
+            const el = stripEL(item);
+            if (isWidget(el)) {
                 el.element.addClass(cls);
             } else {
                 el.cls = (el.cls || "") + cls;
             }
+            
             return item;
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout);
+}

src/core/wrapper/layout/float/float.horizontal.js

@@ -1,30 +1,37 @@
+import { shortcut } from "@/core/decorator";
+import { extend, map } from "@/core/2.base";
+import { VerticalAlign, HorizontalAlign } from "@/core/constant";
+import { Layout } from "../../layout";
+
 /**
  * 浮动的水平居中布局
  */
-BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
+@shortcut()
+export class FloatHorizontalLayout extends Layout {
+    static xtype = "bi.horizontal_float";
 
-    props: function () {
-        return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-fl",
-            horizontalAlign: BI.HorizontalAlign.Center,
-            verticalAlign: BI.VerticalAlign.Top,
+            horizontalAlign: HorizontalAlign.Center,
+            verticalAlign: VerticalAlign.Top,
             rowSize: [],
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options;
-        if (o.verticalAlign === BI.VerticalAlign.Top) {
+    render() {
+        const o = this.options;
+        if (o.verticalAlign === VerticalAlign.Top) {
             return {
                 type: "bi.vertical",
-                ref: function (_ref) {
-                    self.layout = _ref;
+                ref: _ref => {
+                    this.layout = _ref;
                 },
                 items: this._formatItems(o.items),
                 vgap: o.vgap,
@@ -32,22 +39,23 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
                 bgap: o.bgap,
                 scrollx: o.scrollx,
                 scrolly: o.scrolly,
-                scrollable: o.scrollable
+                scrollable: o.scrollable,
             };
         }
+        
         return {
             type: "bi.inline",
             items: [{
                 el: {
                     type: "bi.vertical",
-                    ref: function (_ref) {
-                        self.layout = _ref;
+                    ref: _ref => {
+                        this.layout = _ref;
                     },
                     items: this._formatItems(o.items),
                     vgap: o.vgap,
                     tgap: o.tgap,
-                    bgap: o.bgap
-                }
+                    bgap: o.bgap,
+                },
             }],
             horizontalAlign: o.horizontalAlign,
             verticalAlign: o.verticalAlign,
@@ -55,13 +63,14 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
             innerVgap: o.innerVgap,
             scrollx: o.scrollx,
             scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
         };
-    },
+    }
 
-    _formatItems: function (items) {
-        var o = this.options;
-        return BI.map(items, function (i, item) {
+    _formatItems(items) {
+        const o = this.options;
+        
+        return map(items, (i, item) => {
             return {
                 el: {
                     type: "bi.inline_horizontal_adapt",
@@ -69,18 +78,17 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
                     items: [item],
                     hgap: o.hgap,
                     lgap: o.lgap,
-                    rgap: o.rgap
-                }
+                    rgap: o.rgap,
+                },
             };
         });
-    },
+    }
 
-    resize: function () {
+    resize() {
         this.layout.stroke(this._formatItems(this.options.items));
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.layout.populate(this._formatItems(items));
     }
-});
-BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);
+}

src/core/wrapper/layout/float/index.js

@@ -0,0 +1,5 @@
+export { FloatAbsoluteCenterLayout } from "./float.absolute.center";
+export { FloatAbsoluteHorizontalLayout } from "./float.absolute.horizontal";
+export { FloatAbsoluteLeftRightVerticalAdaptLayout, FloatAbsoluteRightVerticalAdaptLayout } from "./float.absolute.leftrightvertical";
+export { FloatAbsoluteVerticalLayout } from "./float.absolute.vertical";
+export { FloatHorizontalLayout } from "./float.horizontal";

src/core/wrapper/layout/index.js

@@ -15,3 +15,9 @@ export { TdLayout } from "./layout.td";
 export { VerticalLayout } from "./layout.vertical";
 export { WindowLayout } from "./layout.window";
 export * from "./adapt";
+export * from "./fill";
+export * from "./flex";
+export * from "./float";
+export * from "./middle";
+export * from "./responsive";
+export * from "./sticky";

src/core/wrapper/layout/middle/index.js

@@ -0,0 +1,4 @@
+export { CenterLayout } from "./middle.center";
+export { FloatCenterLayout } from "./middle.float.center";
+export { HorizontalCenterLayout } from "./middle.horizontal";
+export { VerticalCenterLayout } from "./middle.vertical";

src/core/wrapper/layout/middle/middle.center.js

@@ -1,72 +1,80 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板
- * @class BI.CenterLayout
- * @extends BI.Layout
+ * @class CenterLayout
+ * @extends Layout
  */
-BI.CenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class CenterLayout extends Layout {
+    static xtype = "bi.center";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.CenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options;
-        var list = [], items = o.items;
-        BI.each(items, function (i) {
+    render() {
+        super.render(...arguments);
+        const o = this.options;
+        const list = [], items = o.items;
+        each(items, i => {
             list.push({
                 column: i,
                 row: 0,
-                el: BI._lazyCreateWidget({
+                el: _lazyCreateWidget({
                     type: "bi.default",
-                    cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")
-                })
+                    cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
+                }),
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: self._optimiseGap(o.hgap + o.lgap),
-                    right: self._optimiseGap(o.hgap + o.rgap),
-                    top: self._optimiseGap(o.vgap + o.tgap),
-                    bottom: self._optimiseGap(o.vgap + o.bgap),
+                    left: this._optimiseGap(o.hgap + o.lgap),
+                    right: this._optimiseGap(o.hgap + o.rgap),
+                    top: this._optimiseGap(o.vgap + o.tgap),
+                    bottom: this._optimiseGap(o.vgap + o.bgap),
                     width: "auto",
-                    height: "auto"
+                    height: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.grid",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columns: list.length,
             rows: 1,
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("center布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
+    }
 }
-});
-BI.shortcut("bi.center", BI.CenterLayout);

src/core/wrapper/layout/middle/middle.float.center.js

@@ -1,71 +1,80 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 浮动布局实现的居中容器
- * @class BI.FloatCenterLayout
- * @extends BI.Layout
+ * @class FloatCenterLayout
+ * @extends Layout
  */
-BI.FloatCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class FloatCenterLayout extends Layout {
+    static xtype = "bi.float_center";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-float-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.FloatCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options, items = o.items;
-        var list = [], width = 100 / items.length;
-        BI.each(items, function (i) {
-            var widget = BI._lazyCreateWidget({
-                type: "bi.default"
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options, items = o.items;
+        const list = [], width = 100 / items.length;
+        each(items, i => {
+            const widget = _lazyCreateWidget({
+                type: "bi.default",
             });
-            widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({
-                width: width + "%",
-                height: "100%"
+            widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({
+                width: `${width}%`,
+                height: "100%",
             });
             list.push({
-                el: widget
+                el: widget,
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: self._optimiseGap(o.hgap + o.lgap),
-                    right: self._optimiseGap(o.hgap + o.rgap),
-                    top: self._optimiseGap(o.vgap + o.tgap),
-                    bottom: self._optimiseGap(o.vgap + o.bgap),
+                    left: this._optimiseGap(o.hgap + o.lgap),
+                    right: this._optimiseGap(o.hgap + o.rgap),
+                    top: this._optimiseGap(o.vgap + o.tgap),
+                    bottom: this._optimiseGap(o.vgap + o.bgap),
                     width: "auto",
-                    height: "auto"
+                    height: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.left",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("floatcenter布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
+    }
 }
-});
-BI.shortcut("bi.float_center", BI.FloatCenterLayout);

src/core/wrapper/layout/middle/middle.horizontal.js

@@ -1,70 +1,79 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板
- * @class BI.HorizontalCenterLayout
- * @extends BI.Layout
+ * @class HorizontalCenterLayout
+ * @extends Layout
  */
-BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HorizontalCenterLayout extends Layout {
+    static xtype = "bi.horizontal_center";
+
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-h-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
-    render: function () {
-        BI.HorizontalCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options, items = o.items;
-        var list = [];
-        BI.each(items, function (i) {
+    }
+
+    render() {
+        super.render(...arguments);
+        const o = this.options, items = o.items;
+        const list = [];
+        each(items, i => {
             list.push({
                 column: i,
                 row: 0,
-                el: BI._lazyCreateWidget({
+                el: _lazyCreateWidget({
                     type: "bi.default",
-                    cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")
-                })
+                    cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
+                }),
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
-                    left: self._optimiseGap(o.hgap + o.lgap),
-                    right: self._optimiseGap(o.hgap + o.rgap),
-                    top: self._optimiseGap(o.vgap + o.tgap),
-                    bottom: self._optimiseGap(o.vgap + o.bgap),
-                    width: "auto"
+                    left: this._optimiseGap(o.hgap + o.lgap),
+                    right: this._optimiseGap(o.hgap + o.rgap),
+                    top: this._optimiseGap(o.vgap + o.tgap),
+                    bottom: this._optimiseGap(o.vgap + o.bgap),
+                    width: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.grid",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columns: list.length,
             rows: 1,
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("horizontal_center布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
+    }
 }
-});
-BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout);

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

@@ -1,71 +1,79 @@
+import { shortcut } from "@/core/decorator";
+import { extend, each } from "@/core/2.base";
+import { _lazyCreateWidget } from "@/core/5.inject";
+import { Layout } from "../../layout";
+
 /**
  * 垂直方向都居中容器, 非自适应，用于高度不固定的面板
- * @class BI.VerticalCenterLayout
- * @extends BI.Layout
+ * @class VerticalCenterLayout
+ * @extends Layout
  */
-BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
-    props: function () {
-        return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VerticalCenterLayout extends Layout {
+    static xtype = "bi.vertical_center";
+    
+    props() {
+        return extend(super.props(...arguments), {
             baseCls: "bi-v-center",
             hgap: 0,
             vgap: 0,
             lgap: 0,
             rgap: 0,
             tgap: 0,
-            bgap: 0
+            bgap: 0,
         });
-    },
+    }
 
-    render: function () {
-        BI.VerticalCenterLayout.superclass.render.apply(this, arguments);
-        var self = this, o = this.options, items = o.items;
-        var list = [];
-        BI.each(items, function (i) {
+    render() {
+        super.render(...arguments);
+        const self = this, o = this.options, items = o.items;
+        const list = [];
+        each(items, i => {
             list.push({
                 column: 0,
                 row: i,
-                el: BI._lazyCreateWidget({
+                el: _lazyCreateWidget({
                     type: "bi.default",
-                    cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")
-                })
+                    cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`,
+                }),
             });
         });
-        BI.each(items, function (i, item) {
+        each(items, (i, item) => {
             if (item) {
-                var w = BI._lazyCreateWidget(item);
+                const w = _lazyCreateWidget(item);
                 w.element.css({
                     position: "absolute",
                     left: self._optimiseGap(o.hgap + o.lgap),
                     right: self._optimiseGap(o.hgap + o.rgap),
                     top: self._optimiseGap(o.vgap + o.tgap),
                     bottom: self._optimiseGap(o.vgap + o.bgap),
-                    height: "auto"
+                    height: "auto",
                 });
                 list[i].el.addItem(w);
             }
         });
+        
         return {
             type: "bi.grid",
-            ref: function (_ref) {
-                self.layout = _ref;
+            ref: _ref => {
+                this.layout = _ref;
             },
             columns: 1,
             rows: list.length,
-            items: list
+            items: list,
         };
-    },
+    }
 
-    resize: function () {
+    resize() {
         // console.log("vertical_center布局不需要resize");
-    },
+    }
 
-    addItem: function (item) {
+    addItem(item) {
         // do nothing
         throw new Error("不能添加子组件");
-    },
+    }
 
-    populate: function (items) {
-        this.layout.populate.apply(this.layout, arguments);
+    populate(items) {
+        this.layout.populate(...arguments);
+    }
 }
-});
-BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout);

src/core/wrapper/layout/responsive/index.js

@@ -0,0 +1,3 @@
+export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal";
+export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal";
+export { ResponsiveInlineLayout } from "./responsive.inline";

src/core/wrapper/layout/responsive/responsive.flex.horizontal.js

@@ -1,57 +1,59 @@
+import { shortcut } from "@/core/decorator";
+import { each } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Resizers } from "@/base";
+import { FlexHorizontalLayout } from "../flex";
+
 /**
  * 横向响应式布局
  * Created by GUY on 2016/12/2.
  *
- * @class BI.ResponsiveFlexHorizontalLayout
- * @extends BI.FlexHorizontalLayout
+ * @class ResponsiveFlexHorizontalLayout
+ * @extends FlexHorizontalLayout
  */
-BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, {
-    // props: function () {
-    //     return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
-    //         // extraCls: "bi-responsive-f-h"
-    //     });
-    // },
+@shortcut()
+export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout {
+    static xtype = "bi.responsive_flex_horizontal";
 
-    mounted: function () {
-        var self = this, o = this.options;
-        if (o.horizontalAlign !== BI.HorizontalAlign.Center){
+    mounted() {
+        const o = this.options;
+        if (o.horizontalAlign !== HorizontalAlign.Center) {
             return;
         }
-        var defaultResize = function () {
+        const defaultResize = () => {
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth <= 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                            self._handleReverseGap(child, o.items[i], i | 0);
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                            this._handleReverseGap(child, o.items[i], i | 0);
                         });
-                        self.element.css("flex-direction", "column");
-                    }
+                        this.element.css("flex-direction", "column");
                     }
                 }
             }
-        var resize = function () {
+        };
+        const resize = () => {
             defaultResize();
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth > 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                        })
-                        self.resize();
-                        self.element.css("flex-direction", "row");
-                    }
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                        });
+                        this.resize();
+                        this.element.css("flex-direction", "row");
                     }
                 }
             }
-        this.unResize = BI.Resizers.add(this.getName(), resize);
+        };
+        this.unResize = Resizers.add(this.getName(), resize);
         defaultResize();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
         this.unResize?.();
     }
-});
-BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout);
+}

src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js

@@ -1,59 +1,61 @@
+import { shortcut } from "@/core/decorator";
+import { each } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Resizers } from "@/base";
+import { FlexWrapperHorizontalLayout } from "../flex";
+
 /**
  * 横向响应式布局
  * Created by GUY on 2016/12/2.
  *
- * @class BI.ResponsiveFlexWrapperHorizontalLayout
- * @extends BI.FlexWrapperHorizontalLayout
+ * @class ResponsiveFlexWrapperHorizontalLayout
+ * @extends FlexWrapperHorizontalLayout
  */
-BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, {
-    // props: function () {
-    //     return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
-    //         extraCls: "bi-responsive-f-h"
-    //     });
-    // },
+@shortcut()
+export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout {
+    static xtype = "bi.responsive_flex_scrollable_horizontal";
 
-    mounted: function () {
-        var self = this, o = this.options;
-        if (o.horizontalAlign !== BI.HorizontalAlign.Center){
+    mounted() {
+        const o = this.options;
+        if (o.horizontalAlign !== HorizontalAlign.Center) {
             return;
         }
-        var defaultResize = function () {
+        const defaultResize = () => {
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth <= 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                            self._handleReverseGap(child, o.items[i], i | 0);
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                            this._handleReverseGap(child, o.items[i], i | 0);
                         });
-                        self.element.css("flex-direction", "column");
-                        self.$wrapper.element.css("flex-direction", "column");
-                    }
+                        this.element.css("flex-direction", "column");
+                        this.$wrapper.element.css("flex-direction", "column");
                     }
                 }
             }
-        var resize = function () {
+        };
+        const resize = () => {
             defaultResize();
             if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
                     if (clientWidth > 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                        })
-                        self.resize();
-                        self.element.css("flex-direction", "row");
-                        self.$wrapper.element.css("flex-direction", "row");
-                    }
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                        });
+                        this.resize();
+                        this.element.css("flex-direction", "row");
+                        this.$wrapper.element.css("flex-direction", "row");
                     }
                 }
             }
-        this.unResize = BI.Resizers.add(this.getName(), resize);
+        };
+        this.unResize = Resizers.add(this.getName(), resize);
         defaultResize();
-    },
+    }
 
-    destroyed: function () {
+    destroyed() {
         this.unResize();
     }
-});
-BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout);
+}

src/core/wrapper/layout/responsive/responsive.inline..js

@@ -1,50 +0,0 @@
-/**
- * 横向响应式布局
- * Created by GUY on 2016/12/2.
- *
- * @class BI.ResponsiveInlineLayout
- * @extends BI.InlineLayout
- */
-BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, {
-    mounted: function () {
-        var self = this, o = this.options;
-        if (o.horizontalAlign !== BI.HorizontalAlign.Center){
-            return;
-        }
-        var defaultResize = function () {
-            if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
-                    if (clientWidth <= 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                            self._handleReverseGap(child, o.items[i], i | 0);
-                            child.elemenet.css("display", "");
-                        });
-                    }
-                }
-            }
-        }
-        var resize = function () {
-            defaultResize();
-            if (o.scrollable !== true && o.scrollx !== true) {
-                var clientWidth = document.body.clientWidth;
-                if(self.element.width() > 2/3 * clientWidth){
-                    if (clientWidth > 768) {
-                        BI.each(self._children, function (i, child) {
-                            self._clearGap(child);
-                        })
-                        self.resize();
-                    }
-                }
-            }
-        }
-        this.unResize = BI.Resizers.add(this.getName(), resize);
-        defaultResize();
-    },
-
-    destroyed: function () {
-        this.unResize();
-    }
-});
-BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout);

src/core/wrapper/layout/responsive/responsive.inline.js

@@ -0,0 +1,58 @@
+import { shortcut } from "@/core/decorator";
+import { each } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { Resizers } from "@/base";
+import { InlineLayout } from "../layout.inline";
+
+/**
+ * 横向响应式布局
+ * Created by GUY on 2016/12/2.
+ *
+ * @class ResponsiveInlineLayout
+ * @extends InlineLayout
+ */
+@shortcut()
+export class ResponsiveInlineLayout extends InlineLayout {
+    static xtype = "bi.responsive_inline";
+
+    mounted() {
+        const o = this.options;
+        if (o.horizontalAlign !== HorizontalAlign.Center) {
+            return;
+        }
+        const defaultResize = () => {
+            if (o.scrollable !== true && o.scrollx !== true) {
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
+                    if (clientWidth <= 768) {
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                            this._handleReverseGap(child, o.items[i], i | 0);
+                            child.element.css("display", "");
+                        });
+                    }
+                }
+            }
+        };
+        const resize = () => {
+            defaultResize();
+            if (o.scrollable !== true && o.scrollx !== true) {
+                const clientWidth = document.body.clientWidth;
+                if (this.element.width() > 2 / 3 * clientWidth) {
+                    if (clientWidth > 768) {
+                        each(this._children, (i, child) => {
+                            this._clearGap(child);
+                        });
+                        this.resize();
+                    }
+                }
+            }
+        };
+        this.unResize = Resizers.add(this.getName(), resize);
+        defaultResize();
+    }
+
+    destroyed() {
+        this.unResize();
+    }
+}

src/core/wrapper/layout/sticky/index.js

@@ -0,0 +1,2 @@
+export { HorizontalStickyLayout } from "./sticky.horizontal";
+export { VerticalStickyLayout } from "./sticky.vertical";

src/core/wrapper/layout/sticky/sticky.horizontal.js

@@ -1,29 +1,37 @@
+import { shortcut } from "@/core/decorator";
+import { extend, count, isNotNull } from "@/core/2.base";
+import { VerticalAlign } from "@/core/constant";
+import { FlexHorizontalLayout } from "../flex";
+
 /**
  * 横向黏性布局
  */
-BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
-    props: function () {
-        return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class HorizontalStickyLayout extends FlexHorizontalLayout {
+    static xtype = "bi.horizontal_sticky";
+
+    props() {
+        return extend(super.props(...arguments), {
             extraCls: "bi-h-sticky",
             scrollx: true,
-            // horizontalAlign: BI.HorizontalAlign.Stretch,
-            verticalAlign: BI.VerticalAlign.Stretch
+            // horizontalAlign: HorizontalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch,
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.HorizontalStickyLayout.superclass._addElement.apply(this, arguments);
-        var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
         if (o.columnSize.length > 0) {
             if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
                 columnSize = null;
             }
         }
         if (columnSize !== "fill") {
-            var fillIndex;
-            BI.count(0, o.items.length, index => {
-                if (BI.isNotNull(fillIndex)) {
+            let fillIndex;
+            count(0, o.items.length, index => {
+                if (isNotNull(fillIndex)) {
                     return;
                 }
                 if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) {
@@ -41,15 +49,15 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
                 w.element.css({
                     position: "sticky",
                     zIndex: 1,
-                    right: 0
+                    right: 0,
                 });
             }
         } else {
             w.element.css({
-                overflow: ""
+                overflow: "",
             });
         }
+        
         return w;
     }
-});
-BI.shortcut("bi.horizontal_sticky", BI.HorizontalStickyLayout);
+}

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

@@ -1,29 +1,37 @@
+import { shortcut } from "@/core/decorator";
+import { extend, count, isNotNull } from "@/core/2.base";
+import { HorizontalAlign } from "@/core/constant";
+import { FlexVerticalLayout } from "../flex";
+
 /**
  * 纵向黏性布局
  */
-BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
-    props: function () {
-        return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), {
+@shortcut()
+export class VerticalStickyLayout extends FlexVerticalLayout {
+    static xtype = "bi.vertical_sticky";
+
+    props() {
+        return extend(super.props(...arguments), {
             extraCls: "bi-v-sticky",
             scrolly: true,
-            horizontalAlign: BI.HorizontalAlign.Stretch,
-            // verticalAlign: BI.VerticalAlign.Stretch
+            horizontalAlign: HorizontalAlign.Stretch,
+            // verticalAlign: VerticalAlign.Stretch
         });
-    },
+    }
 
-    _addElement: function (i, item) {
-        var o = this.options;
-        var w = BI.VerticalStickyLayout.superclass._addElement.apply(this, arguments);
-        var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
+    _addElement(i, item) {
+        const o = this.options;
+        const w = super._addElement(...arguments);
+        let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
         if (o.rowSize.length > 0) {
             if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
                 rowSize = null;
             }
         }
         if (rowSize !== "fill") {
-            var fillIndex;
-            BI.count(0, o.items.length, index => {
-                if (BI.isNotNull(fillIndex)) {
+            let fillIndex;
+            count(0, o.items.length, index => {
+                if (isNotNull(fillIndex)) {
                     return;
                 }
                 if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) {
@@ -41,15 +49,15 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
                 w.element.css({
                     position: "sticky",
                     zIndex: 1,
-                    bottom: 0
+                    bottom: 0,
                 });
             }
         } else {
             w.element.css({
-                overflow: ""
+                overflow: "",
             });
         }
+        
         return w;
     }
-});
-BI.shortcut("bi.vertical_sticky", BI.VerticalStickyLayout);
+}