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

es6.js

@@ -3,7 +3,8 @@ const path = require("path");
 const prettier = require("prettier");
 const { exec } = require("child_process");
 const { search, initDepts, depts } = require("./es6.xtype");
-const _ = require("lodash");
+const lodash = require("lodash");
+const DEPTS = depts;
 
 // const XTYPE_ONLY = false;
 // const THIS_REPLACE = false;
@@ -12,6 +13,10 @@ const ConflictImport = [];
 const CircularDependency = [];
 
 function objHaveFunction(obj) {
+    if (obj === null) {
+        return false;
+    }
+
     return Object.keys(obj).some(key => {
         const value = obj[key];
         if (typeof value === "object") {
@@ -32,10 +37,11 @@ function parserImport(code) {
     while (regResult) {
         importMap[regResult[2]] = regResult[1]
             .split(",")
-            .map(el => el.trim()).filter(el => el);
+            .map(el => el.trim())
+            .filter(el => el);
         regResult = reg.exec(code);
     }
-    
+
     return importMap;
 }
 
@@ -46,7 +52,7 @@ async function saveAndFixCode(path, code) {
     }
     const prettierCode = prettier.format(_code, {
         tabWidth: 4,
-        parser: 'babel',
+        parser: "babel",
         printWidth: 120,
     });
     fs.writeFileSync(path, prettierCode);
@@ -58,56 +64,18 @@ async function saveAndFixCode(path, code) {
     });
 }
 
-const target = [
-    "isNull",
-    "toPix",
-    "isKey",
-    "isObject",
-    "map",
-    "extend",
-    "isFunction",
-    "isEmptyArray",
-    "isArray",
-    "Controller",
-    "createWidget",
-    "Events",
-    "emptyFn",
-    "nextTick",
-    "bind",
-    "i18nText",
-    "isNotNull",
-    "isString",
-    "isNumber",
-    "isEmpty",
-    "isEmptyString",
-    "any",
-    "deepContains",
-    "isNotEmptyString",
-    "each",
-    "contains",
-    "remove",
-    "createItems",
-    "makeArrayByArray",
-    "VerticalAlign",
-    "pushDistinct",
-    "endWith",
-    "transformItems",
-    "print",
-    "Tree",
-    "Func",
-    "Selection",
-];
+// const target = [];
 
 // 加载模块
 const loader = {
     // G: { "@/core": { shortcut: true } },
     load(srcName, module) {
         const G = loader.G;
-        if (target.indexOf(module) >= 0) {
-            G["@/core"][module] = true;
+        // if (target.indexOf(module) >= 0) {
+        //     G["@/core"][module] = true;
 
-            return true;
-        }
+        //     return true;
+        // }
         if (module.startsWith('"bi.')) {
             const key = search(srcName, module);
             if (key) {
@@ -136,15 +104,16 @@ const loader = {
 async function handleFile(srcName) {
     await saveAndFixCode(srcName);
     // 全局状态回归
-    let G = loader.G = { };
-    
+    let G = (loader.G = {});
+
     const sourceCode = fs.readFileSync(srcName).toString();
 
     const result = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(sourceCode);
+
     if (!result) {
         // console.log(`已经es6过，替换 xtype =>  ${srcName}`);
         if (!/export class/.test(sourceCode)) {
-            console.log("忽略文件", srcName);
+            // console.log("忽略文件", srcName);
 
             return;
         }
@@ -165,9 +134,9 @@ async function handleFile(srcName) {
         });
         // 识别 import
         const importMap = parserImport(noXtypeCode);
-       
+
         // 合并原来的 import 到 G
-        _.forEach(importMap, (depts, module) => {
+        lodash.forEach(importMap, (depts, module) => {
             depts.forEach(dept => {
                 if (!G[module]) {
                     G[module] = {};
@@ -176,56 +145,113 @@ async function handleFile(srcName) {
                 G[module][dept] = true;
             });
         });
+        
 
-        // 合并 core
-        const crossPackages = fs.readdirSync("src");
-        _.forEach(G, (depts, module) => {
+        // 合并包
+        const crossPackages = fs.readdirSync("src").map(el => `@/${el}`);
+        lodash.forEach(G, (depts, module) => {
             crossPackages.forEach(crosspackage => {
-                if (module.indexOf(crosspackage) >= 0) {
-                    if (!G[`@/${crosspackage}`]) {
-                        G[`@/${crosspackage}`] = {};
+                if (module.indexOf(crosspackage.replace(/^@\//, "")) >= 0) {
+                    if (!G[crosspackage]) {
+                        G[crosspackage] = {};
                     }
-                    Object.assign(G[`@/${crosspackage}`], depts);
+                    Object.assign(G[crosspackage], depts);
                 }
             });
         });
-        
         const tmpG = {};
-        _.forEach(G, (depts, module) => {
-            const flag = _.some(crossPackages, crosspackage => module.indexOf(crosspackage) >= 0 && !module.startsWith("@"));
+        lodash.forEach(G, (depts, module) => {
+            const flag = lodash.some(
+                crossPackages,
+                crosspackage =>
+                    module.indexOf(crosspackage) >= 0 && !module.startsWith("@"),
+            );
             if (!flag) {
                 tmpG[module] = depts;
             }
         });
+
+        let circle = false;
+        // 处理循环依赖，base: ["@/case", "@/base", "@/widget"] 等于 base 不能直接引数组内的包
+        const forbiddenCrossRules = {
+            base: ["@/case", "@/base", "@/widget"],
+            "case": ["@/case", "@/widget"],
+            widget: ["@/widget"],
+            component: ["@/component"],
+            core: ["@/core", "@base", "@/widget", "@/case"],
+        };
+
+        const forbiddenKeys = [];
+        const circleG = {};
+
+        lodash.forEach(G, (depts, module) => {
+            // 找出 rule
+            const packages = Object.keys(forbiddenCrossRules);
+
+            let key = packages.filter(
+                _package => srcName.indexOf(_package) >= 0,
+            );
+            if (key.length !== 1) {
+                throw new Error(
+                    "理论不可能出现这个问题，需要 treecat 优化下找包逻辑1",
+                );
+            }
+            key = key[0];
+            const rule = forbiddenCrossRules[key];
+
+            if (lodash.includes(rule, module)) {
+                circle = true;
+
+                const deptsArr = Object.keys(depts);
+                if (deptsArr.filter(dept => !DEPTS[dept]).length > 0) {
+                    throw new Error(
+                        "理论不可能出现这个问题，需要 treecat 优化下找包逻辑2",
+                    );
+                }
+                deptsArr
+                    .filter(dept => DEPTS[dept])
+                    .forEach(dept => {
+                        const value = `@${DEPTS[dept].replace(path.resolve("src"), "").replace(/\\/g, "/").replace(/\.js$/, "")}`;
+                        if (!tmpG[value]) {
+                            tmpG[value] = {};
+                        }
+                        tmpG[value][dept] = true;
+                    });
+                forbiddenKeys.push(module);
+            }
+        });
+        Object.assign(tmpG, circleG);
+        forbiddenKeys.forEach(key => {
+            delete tmpG[key];
+        });
         
 
         // 较验手工 import 错误
         const map = {};
         let conflict = false;
-        let circle = false;
-        _.forEach(tmpG, (imports, fromStr) => {
-            if (srcName.indexOf("base") >= 0) {
-                if (fromStr === "@/case" || fromStr === "@/base") {
-                    circle = true;
-                }
-            }
 
-            _.forEach(imports, (bools, _import) => {
-                if (map[_import] && map[_import] !== fromStr) {
+        lodash.forEach(tmpG, (depts, module) => {
+            lodash.forEach(depts, (_, _import) => {
+                if (map[_import] && map[_import] !== module) {
                     conflict = true;
                 }
-                
-                map[_import] = fromStr;
+
+                map[_import] = module;
             });
         });
 
         conflict && ConflictImport.push(srcName);
         circle && CircularDependency.push(srcName);
 
+   
+
         G = tmpG;
-  
-        const noImportCode = noXtypeCode.replace(/import {([\s\S]*?)} from "(.*?)";/g, "");
-        
+
+        const noImportCode = noXtypeCode.replace(
+            /import {([\s\S]*?)} from "(.*?)";/g,
+            "",
+        );
+
         let I = "";
         Object.keys(G).forEach(key => {
             let moduleKey = key;
@@ -236,14 +262,13 @@ async function handleFile(srcName) {
             Object.keys(G[moduleKey]).forEach(key => {
                 i += `${key}, `;
             });
-    
+
             // 必须以 . 开头
             const moduleInValid = /^[^@.]/.test(moduleKey);
             if (moduleInValid) {
                 moduleKey = `./${moduleKey}`;
             }
-            
-            
+
             I += `import {${i}} from '${moduleKey}'\n`;
         });
         const code = `${I}\n${noImportCode}`;
@@ -255,17 +280,16 @@ async function handleFile(srcName) {
 
     G["@/core"] = { shortcut: true };
 
-
     const clzName = result[1];
 
     if (!clzName) {
         console.log(`${srcName} 不需要 es6 化`);
-        
+
         return;
     }
 
     const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1];
-    
+
     // const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1];
 
     const collection = {
@@ -391,6 +415,10 @@ async function handleFile(srcName) {
         M += `${f}\n`;
     });
 
+    if (!collection.xtype) {
+        delete G["@/core"].shortcut;
+    }
+
     Object.keys(G).forEach(key => {
         let moduleKey = key;
         if (moduleKey === path.basename(srcName).replace(/.js$/g, "")) {
@@ -413,9 +441,9 @@ async function handleFile(srcName) {
     const outputCode = `
 ${I}
 
-@shortcut()
+${collection.xtype ? "@shortcut()" : ""}
 export class ${clzName} extends ${superName} {
-\tstatic xtype = "${collection.xtype}"
+${collection.xtype ? `static xtype = "${collection.xtype}"` : ""}
 
 ${A}
 
@@ -463,19 +491,6 @@ async function traverse(srcName) {
 const srcName = process.argv[2];
 
 initDepts().then(async () => {
-    const content = fs.readFileSync("src/core/2.base.js").toString();
-
-    let result = content.match(/export function (.*?)\(/g);
-    target.push(
-        ...result.map(el =>
-            el.replace("export function ", "").replace("(", ""),
-        ),
-    );
-    result = content.match(/export const (.*?) =/g);
-    target.push(
-        ...result.map(el => el.replace("export const ", "").replace(" =", "")),
-    );
-
     await traverse(srcName);
 
     // 对数据处理
@@ -483,6 +498,6 @@ initDepts().then(async () => {
         console.log(`导入冲突 ${el}`);
     });
     CircularDependency.forEach(el => {
-        console.log(`出现循环依赖 ${el}`);
+        console.log(`出现循环依赖(已经fixed) ${el}`);
     });
 });

es6.xtype.js

@@ -1,35 +1,49 @@
 const fs = require("fs");
 const path = require("path");
+const lodash = require("lodash");
 
 const depts = {};
 
 async function handle(filename) {
-    // 找clzName
-    const code = fs.readFileSync(filename);
+    if (path.extname(filename) !== ".js") {
+        return;
+    }
+    const code = fs.readFileSync(filename).toString();
+    
     const inheritRegResult = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(code);
-    let clzName;
     if (inheritRegResult) {
-        clzName = inheritRegResult[1];
+        const clzName = inheritRegResult[1];
+        depts[clzName] = filename;
     } else {
-        const clzRegResult = /export\s+class\s+(.*?)\s+/.exec(code);
-
-        if (clzRegResult) {
-            clzName = clzRegResult[1];
-        } else {
-            return;
-        }
-        const xtypeResult = /static xtype = (.*?)(;|\s)/.exec(code);
-        // 找一下 xtype
-        if (xtypeResult) {
-            depts[xtypeResult[1]] = {
-                clzName,
+        // 一个文件夹里面可能有多个 xtype
+        const reg = /export\s+class\s+(.*?)([\s|{])([\w\W]*?)static xtype\s?=\s?((["|'])(.*?)(\5))/g;
+        Array.from(code.matchAll(reg)).forEach(res => {
+            const xtype = res[4];
+            depts[xtype] = {
+                clzName: res[1],
                 clzPath: filename,
             };
-        } else {
-            // console.log(`${filename} 没有 xtype`);
+        });
+        // 同时找一下 export
+        if (path.basename(filename) !== "index.js") {
+            const regs = [
+                /export function (.*?)\(/g,
+                /export const (.*?) =/g,
+                /export class (.*?) /g,
+                /export \{([\w\W]*?)\}/g,
+            ];
+            regs.forEach((reg, index) => {
+                Array.from(code.matchAll(reg)).forEach(el => {
+                    depts[el[1]] = filename;
+                    if (index === 3) {
+                        el[1].split(",").map(el => el.trim()).forEach(key => {
+                            depts[key] = filename;
+                        });
+                    }
+                });
+            });
         }
     }
-    depts[clzName] = filename;
 }
 
 function isExist(filePath) {
@@ -53,6 +67,13 @@ async function bfs(filename) {
 async function initDepts() {
     // dfs 构建依赖关系
     await bfs(path.resolve("src"));
+    const m = {};
+    lodash.forEach(depts, value => {
+        if (typeof value === "object") {
+            m[value.clzName] = value.clzPath;
+        }
+    });
+    Object.assign(depts, m);
 }
 
 

src/base/1.pane.js

@@ -1,5 +1,5 @@
-import { Label, Text } from "./single";
 import {
+    AbsoluteCenterLayout,
     CenterAdaptLayout,
     HorizontalAdaptLayout,
     VerticalLayout,
@@ -12,7 +12,8 @@ import {
     createWidget,
     Providers
 } from "@/core";
-import { Layers } from "@/base";
+import { Label, Text } from "./single";
+import { Layers } from "@/base/0.base";
 
 /**
  * 当没有元素时有提示信息的view
@@ -43,7 +44,7 @@ export class Pane extends Widget {
     _assertTip() {
         if (!this._tipText) {
             createWidget({
-                type: "bi.absolute_center_adapt",
+                type: AbsoluteCenterLayout.xtype,
                 element: this,
                 items: [
                     {

src/base/combination/group.button.js

@@ -1,4 +1,5 @@
 import {
+    Selection,
     CenterLayout,
     shortcut,
     Widget,
@@ -24,14 +25,16 @@ import {
     removeAt,
     deepContains,
     has,
-    any
+    any,
+    BehaviorFactory,
+    Events
 } from "@/core";
 import { TextButton } from "../single";
 
 /**
  * Created by GUY on 2015/6/26.
- * @class BI.ButtonGroup
- * @extends BI.Widget
+ * @class ButtonGroup
+ * @extends Widget
  */
 
 @shortcut()
@@ -39,6 +42,12 @@ export class ButtonGroup extends Widget {
     static xtype = "bi.button_group";
 
     static EVENT_CHANGE = "EVENT_CHANGE";
+    
+    static CHOOSE_TYPE_SINGLE = Selection.Single;
+    static CHOOSE_TYPE_MULTI = Selection.Multi;
+    static CHOOSE_TYPE_ALL = Selection.All;
+    static CHOOSE_TYPE_NONE = Selection.None;
+    static CHOOSE_TYPE_DEFAULT = Selection.Default;
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
@@ -46,7 +55,7 @@ export class ButtonGroup extends Widget {
             behaviors: {},
             items: [],
             value: "",
-            chooseType: BI.Selection.Single,
+            chooseType: Selection.Single,
             layouts: [
                 {
                     type: CenterLayout.xtype,
@@ -61,7 +70,7 @@ export class ButtonGroup extends Widget {
         const { behaviors: optionsBehaviors, items: optionsItems, value } = this.options;
         const behaviors = {};
         each(optionsBehaviors, (key, rule) => {
-            behaviors[key] = BI.BehaviorFactory.createBehavior(key, {
+            behaviors[key] = BehaviorFactory.createBehavior(key, {
                 rule,
             });
         });
@@ -107,7 +116,7 @@ export class ButtonGroup extends Widget {
         each(buttons, (i, btn) => {
             btn.on(Controller.EVENT_CHANGE, (...arg) => {
                 const [type, value, obj] = arg;
-                if (type === BI.Events.CLICK) {
+                if (type === Events.CLICK) {
                     switch (chooseType) {
                     case ButtonGroup.CHOOSE_TYPE_SINGLE:
                         this.setValue(btn.getValue());
@@ -124,7 +133,7 @@ export class ButtonGroup extends Widget {
                     this.fireEvent(Controller.EVENT_CHANGE, ...arg);
                 }
             });
-            btn.on(BI.Events.DESTROY, () => {
+            btn.on(Events.DESTROY, () => {
                 remove(this.buttons, btn);
             });
         });
@@ -418,11 +427,3 @@ export class ButtonGroup extends Widget {
         this.options.items = [];
     }
 }
-
-extend(ButtonGroup, {
-    CHOOSE_TYPE_SINGLE: BI.Selection.Single,
-    CHOOSE_TYPE_MULTI: BI.Selection.Multi,
-    CHOOSE_TYPE_ALL: BI.Selection.All,
-    CHOOSE_TYPE_NONE: BI.Selection.None,
-    CHOOSE_TYPE_DEFAULT: BI.Selection.Default,
-});

src/base/combination/searcher.js

@@ -13,7 +13,8 @@ import {
     deepWithout,
     nextTick,
     isEmptyString,
-    isNull
+    isNull,
+    BlankSplitChar
 } from "@/core";
 import { ButtonGroup } from "./group.button";
 import { Maskers } from "@/base/0.base";
@@ -109,7 +110,7 @@ export class Searcher extends Widget {
                 search();
                 break;
             case BI.Events.PAUSE:
-                if (endWith(this.getValue(), BI.BlankSplitChar)) {
+                if (endWith(this.editor.getValue(), BlankSplitChar)) {
                     this._pauseSearch();
                 }
                 break;
@@ -229,14 +230,14 @@ export class Searcher extends Widget {
                 keyword,
                 selectedValues: adapter && adapter.getValue(),
             },
-            (searchResult, matchResult, ...arg) => {
+            (...args) => {
                 if (!this._stop && keyword === this.editor.getValue()) {
-                    const args = [searchResult, matchResult, ...arg];
-                    if (args.length > 0) {
-                        args.push(keyword);
+                    const _args = args;
+                    if (_args.length > 0) {
+                        _args.push(keyword);
                     }
                     Maskers.show(this.getName());
-                    this.popupView.populate.apply(this.popupView, args);
+                    this.popupView.populate.apply(this.popupView, _args);
                     isAutoSync && adapter && adapter.getValue && this.popupView.setValue(adapter.getValue());
                     this.popupView.loaded && this.popupView.loaded();
                     this.fireEvent(Searcher.EVENT_SEARCHING);

src/base/index.js

@@ -1,32 +1,12 @@
-import { Pane } from "./1.pane";
-import * as single from "./single";
-import * as layer from "./layer";
-import * as list from "./list";
-import { GridView } from "./grid/grid";
-import { Pager } from "./pager/pager";
-import * as combination from "./combination";
-import { Msg } from "./foundation/message";
-import * as base from "./0.base";
-import { CollectionView } from "./collection/collection";
-import { CustomTree } from "./tree/customtree";
-
-Object.assign(BI, {
-    Pane,
-    ...layer,
-    ...list,
-    ...single,
-    GridView,
-    Pager,
-    ...combination,
-    Msg,
-    ...base,
-    CollectionView,
-    CustomTree,
-});
+export { Pane } from "./1.pane";
+export { GridView } from "./grid/grid";
+export { Pager } from "./pager/pager";
+export { Msg } from "./foundation/message";
+export { CollectionView } from "./collection/collection";
+export { CustomTree } from "./tree/customtree";
 
 export * from "./0.base";
 export * from "./combination";
 export * from "./layer";
 export * from "./list";
 export * from "./single";
-export { Pane, GridView, Pager, Msg, CollectionView, CustomTree };

src/base/layer/layer.drawer.js

@@ -1,4 +1,14 @@
-import { HTapeLayout, AbsoluteLayout, Layout, VerticalLayout, Widget, shortcut, isPlainObject, extend } from "@/core";
+import {
+    VTapeLayout,
+    HTapeLayout,
+    AbsoluteLayout,
+    Layout,
+    VerticalLayout,
+    Widget,
+    shortcut,
+    isPlainObject,
+    extend
+} from "@/core";
 import { Label, IconButton } from "../single";
 
 /**
@@ -128,7 +138,7 @@ export class Drawer extends Widget {
 
         return extend(
             {
-                type: "bi.vtape",
+                type: VTapeLayout.xtype,
                 items,
             },
             this._getSuitableSize()

src/base/layer/layer.popover.js

@@ -1,4 +1,6 @@
 import {
+    VTapeLayout,
+    RightVerticalAdaptLayout,
     HTapeLayout,
     AbsoluteLayout,
     VerticalLayout,
@@ -202,7 +204,7 @@ export class Popover extends Widget {
                     scrolly: false,
                 }
                 : {
-                    type: "bi.vtape",
+                    type: VTapeLayout.xtype,
                     height: this._getSuitableHeight(size.height),
                 }
         );
@@ -302,7 +304,7 @@ export class BarPopover extends Popover {
         const { footer, warningTitle } = this.options;
         footer ||
             (this.options.footer = {
-                type: "bi.right_vertical_adapt",
+                type: RightVerticalAdaptLayout.xtype,
                 lgap: 10,
                 items: [
                     {

src/base/single/0.single.js

@@ -1,5 +1,5 @@
 import { Widget, shortcut, Actions, extend, isKey, isNotNull, isFunction, isPlainObject, isNull, delay } from "@/core";
-import { Tooltips } from "@/base";
+import { Tooltips } from "@/base/0.base";
 
 /**
  * guy

src/base/single/bar/bar.loading.js

@@ -26,7 +26,7 @@ export class LoadingBar extends Single {
             handler: this.options.handler,
         });
         this.loaded.on(BI.Controller.EVENT_CHANGE, (...args) => {
-            this.fireEvent(BI.Controller.EVENT_CHANGE, args);
+            this.fireEvent(BI.Controller.EVENT_CHANGE, ...args);
         });
 
         this.loading = BI.createWidget({

src/base/single/button/button.basic.js

@@ -12,6 +12,7 @@ import {
 } from "@/core";
 import { BubbleCombo } from "@/case/combo/bubblecombo/combo.bubble";
 import { Single } from "../0.single";
+import { BubblePopupView } from "@/case/combo/bubblecombo/popup.bubble";
 
 /**
  * guy
@@ -56,8 +57,8 @@ export class BasicButton extends Single {
         const opts = this.options;
         opts.selected = isFunction(opts.selected)
             ? this.__watch(opts.selected, (context, newValue) => {
-                  this.setSelected(newValue);
-              })
+                this.setSelected(newValue);
+            })
             : opts.selected;
         super._init(arguments);
 
@@ -105,7 +106,7 @@ export class BasicButton extends Single {
                             right: 0,
                             top: 0,
                             bottom: 0,
-                        },
+                        }
                     ],
                 });
             }
@@ -117,7 +118,7 @@ export class BasicButton extends Single {
                 this.$mask.invisible();
             }
         });
-        this.element.on(`mouseenter.${this.getName()}`, (e) => {
+        this.element.on(`mouseenter.${this.getName()}`, e => {
             if (this.element.__isMouseInBounds__(e)) {
                 if (this.isEnabled() && !this._hover && (o.isShadowShowingOnSelected || !this.isSelected())) {
                     assertMask();
@@ -125,7 +126,7 @@ export class BasicButton extends Single {
                 }
             }
         });
-        this.element.on(`mousemove.${this.getName()}`, (e) => {
+        this.element.on(`mousemove.${this.getName()}`, e => {
             if (!this.element.__isMouseInBounds__(e)) {
                 if (this.isEnabled() && !this._hover) {
                     assertMask();
@@ -158,7 +159,7 @@ export class BasicButton extends Single {
             return bubble;
         };
 
-        const clk = (e) => {
+        const clk = e => {
             ev(e);
             if (!this.isEnabled() || !this.isValid()) {
                 return;
@@ -179,7 +180,7 @@ export class BasicButton extends Single {
                                     trigger: "",
                                     // bubble的提示不需要一直存在在界面上
                                     destroyWhenHide: true,
-                                    ref: (_ref) => {
+                                    ref: _ref => {
                                         this.combo = _ref;
                                     },
                                     el: {
@@ -187,9 +188,9 @@ export class BasicButton extends Single {
                                         height: "100%",
                                     },
                                     popup: {
-                                        type: "bi.text_bubble_bar_popup_view",
+                                        type: BubblePopupView.xtype,
                                         text: getBubble(),
-                                        ref: (_ref) => {
+                                        ref: _ref => {
                                             popup = _ref;
                                         },
                                         listeners: [
@@ -202,7 +203,7 @@ export class BasicButton extends Single {
                                                         onClick.apply(this, args);
                                                     }
                                                 },
-                                            },
+                                            }
                                         ],
                                     },
                                     listeners: [
@@ -211,14 +212,14 @@ export class BasicButton extends Single {
                                             action() {
                                                 popup.populate(getBubble());
                                             },
-                                        },
+                                        }
                                     ],
                                 },
                                 left: 0,
                                 right: 0,
                                 bottom: 0,
                                 top: 0,
-                            },
+                            }
                         ],
                     });
                 }
@@ -234,117 +235,117 @@ export class BasicButton extends Single {
         };
 
         const triggerArr = (o.trigger || "").split(",");
-        triggerArr.forEach((trigger) => {
+        triggerArr.forEach(trigger => {
             let mouseDown = false;
             let selected = false;
             let interval;
             switch (trigger) {
-                case "mouseup":
-                    hand.mousedown(() => {
-                        mouseDown = true;
-                    });
-                    hand.mouseup((e) => {
-                        if (mouseDown === true) {
-                            clk(e);
-                        }
-                        mouseDown = false;
-                        ev(e);
-                    });
-                    break;
-                case "mousedown":
-                    // let mouseDown = false;
-                    hand.mousedown((e) => {
+            case "mouseup":
+                hand.mousedown(() => {
+                    mouseDown = true;
+                });
+                hand.mouseup(e => {
+                    if (mouseDown === true) {
+                        clk(e);
+                    }
+                    mouseDown = false;
+                    ev(e);
+                });
+                break;
+            case "mousedown":
+                // let mouseDown = false;
+                hand.mousedown(e => {
+                    // if (e.button === 0) {
+                    Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, e => {
                         // if (e.button === 0) {
-                        Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, (e) => {
-                            // if (e.button === 0) {
-                            if (
-                                BI.DOM.isExist(this) &&
+                        if (
+                            BI.DOM.isExist(this) &&
                                 !hand.__isMouseInBounds__(e) &&
                                 mouseDown === true &&
                                 !selected
-                            ) {
-                                // self.setSelected(!self.isSelected());
-                                this._trigger();
-                            }
-                            mouseDown = false;
-                            Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`);
-                            // }
-                        });
-                        if (mouseDown === true) {
-                            return;
-                        }
-                        if (this.isSelected()) {
-                            selected = true;
-                        } else {
-                            clk(e);
+                        ) {
+                            // self.setSelected(!self.isSelected());
+                            this._trigger();
                         }
-                        mouseDown = true;
-                        ev(e);
+                        mouseDown = false;
+                        Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`);
                         // }
                     });
-                    hand.mouseup((e) => {
-                        // if (e.button === 0) {
-                        if (BI.DOM.isExist(this) && mouseDown === true && selected === true) {
-                            clk(e);
-                        }
+                    if (mouseDown === true) {
+                        return;
+                    }
+                    if (this.isSelected()) {
+                        selected = true;
+                    } else {
+                        clk(e);
+                    }
+                    mouseDown = true;
+                    ev(e);
+                    // }
+                });
+                hand.mouseup(e => {
+                    // if (e.button === 0) {
+                    if (BI.DOM.isExist(this) && mouseDown === true && selected === true) {
+                        clk(e);
+                    }
+                    mouseDown = false;
+                    selected = false;
+                    Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`);
+                    // }
+                });
+                break;
+            case "dblclick":
+                hand.dblclick(clk);
+                break;
+            case "lclick":
+                hand.mousedown(e => {
+                    Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, () => {
+                        interval && clearInterval(interval);
+                        interval = null;
                         mouseDown = false;
-                        selected = false;
                         Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`);
-                        // }
                     });
-                    break;
-                case "dblclick":
-                    hand.dblclick(clk);
-                    break;
-                case "lclick":
-                    hand.mousedown((e) => {
-                        Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, () => {
-                            interval && clearInterval(interval);
-                            interval = null;
-                            mouseDown = false;
-                            Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`);
-                        });
-                        if (mouseDown === true) {
-                            return;
-                        }
-                        if (!this.isEnabled() || !this.isValid()) {
-                            return;
-                        }
-                        if (this.isOnce() && this.isSelected()) {
-                            return;
-                        }
-                        interval = setInterval(() => {
-                            clk(e);
-                        }, 180);
-                        mouseDown = true;
+                    if (mouseDown === true) {
+                        return;
+                    }
+                    if (!this.isEnabled() || !this.isValid()) {
+                        return;
+                    }
+                    if (this.isOnce() && this.isSelected()) {
+                        return;
+                    }
+                    interval = setInterval(() => {
+                        clk(e);
+                    }, 180);
+                    mouseDown = true;
+                    ev(e);
+                });
+                break;
+            default:
+                if (o.stopEvent || o.stopPropagation) {
+                    hand.mousedown(e => {
                         ev(e);
                     });
-                    break;
-                default:
-                    if (o.stopEvent || o.stopPropagation) {
-                        hand.mousedown((e) => {
-                            ev(e);
-                        });
-                    }
-                    hand.click(clk);
-                    // enter键等同于点击
-                    o.attributes &&
+                }
+                hand.click(clk);
+                // enter键等同于点击
+                o.attributes &&
                         o.attributes.zIndex >= 0 &&
-                        hand.keyup((e) => {
+                        hand.keyup(e => {
                             if (e.keyCode === BI.KeyCode.ENTER) {
                                 clk(e);
                             }
                         });
-                    break;
+                break;
             }
         });
 
         // 之后的300ms点击无效
         const onClick = o.debounce
             ? BI.debounce(this._doClick, BI.EVENT_RESPONSE_TIME, {
-                  leading: true,
-                  trailing: false,
-              })
+                leading: true,
+                trailing: false,
+            })
             : this._doClick;
 
         function ev(e) {
@@ -366,8 +367,8 @@ export class BasicButton extends Single {
             this.isForceSelected()
                 ? this.setSelected(true)
                 : this.isForceNotSelected()
-                ? this.setSelected(false)
-                : this.setSelected(!this.isSelected());
+                    ? this.setSelected(false)
+                    : this.setSelected(!this.isSelected());
         }
         if (this.isValid()) {
             const v = this.getValue();

src/base/single/editor/editor.js

@@ -13,7 +13,7 @@ import {
 } from "@/core";
 import { Label } from "../label";
 import { Single } from "../0.single";
-import { Bubbles } from "@/base";
+import { Bubbles } from "@/base/0.base";
 
 /**
  * Created by GUY on 2015/4/15.

src/base/single/editor/editor.textarea.js

@@ -16,7 +16,7 @@ import {
 } from "@/core";
 import { Label } from "../label";
 import { Single } from "../0.single";
-import { Bubbles } from "@/base";
+import { Bubbles } from "@/base/0.base";
 
 /**
  *

src/bundle.js

@@ -0,0 +1,4 @@
+import * as fineui from "./index";
+import { shortcut, provider } from "@/core/5.inject";
+
+Object.assign(BI, fineui, { shortcut, provider });

src/case/button/icon/icon.change.js

@@ -1,6 +1,5 @@
-import { Single } from "../../../base/single/0.single";
-import { IconButton } from "../../../base/single/button/buttons/button.icon";
-import { shortcut, extend, emptyFn, isFunction, createWidget, Controller } from "../../../core";
+import { IconButton, Single } from "@/base";
+import { shortcut, extend, emptyFn, isFunction, createWidget, Controller } from "@/core";
 
 /**
  * 可以改变图标的button
@@ -15,10 +14,9 @@ export class IconChangeButton extends Single {
     static xtype = "bi.icon_change_button";
     static EVENT_CHANGE = "EVENT_CHANGE";
 
-
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: "bi-icon-change-button",
             iconCls: "",
@@ -42,12 +40,14 @@ export class IconChangeButton extends Single {
 
     _init() {
         const o = this.options;
-        o.iconCls = isFunction(o.iconCls) ? this.__watch(o.iconCls, (context, newValue) => {
-            this.setIcon(newValue);
-        }) : o.iconCls;
+        o.iconCls = isFunction(o.iconCls)
+            ? this.__watch(o.iconCls, (context, newValue) => {
+                  this.setIcon(newValue);
+              })
+            : o.iconCls;
         super._init(...arguments);
         this.button = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             element: this,
             cls: o.iconCls,
             height: o.height,

src/case/button/icon/icon.trigger.js

@@ -1,5 +1,5 @@
-import { IconButton } from "../../../base/single/button/buttons/button.icon";
-import { shortcut, extend } from "../../../core";
+import { IconButton } from "@/base";
+import { shortcut, extend } from "@/core";
 
 /**
  *  统一的trigger图标按钮
@@ -12,10 +12,10 @@ import { shortcut, extend } from "../../../core";
 export class TriggerIconButton extends IconButton {
     static xtype = "bi.trigger_icon_button";
     static EVENT_CHANGE = IconButton.EVENT_CHANGE;
-    
+
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-trigger-icon-button overflow-hidden`,
             extraCls: "pull-down-font",

src/case/button/icon/iconhalf/icon.half.image.js

@@ -1,6 +1,5 @@
-import { IconButton } from "../../../../base/single/button/buttons/button.icon";
-import { shortcut, extend } from "../../../../core";
-
+import { IconButton } from "@/base";
+import { shortcut, extend } from "@/core";
 
 /**
  * guy
@@ -10,11 +9,11 @@ import { shortcut, extend } from "../../../../core";
 @shortcut()
 export class HalfIconButton extends IconButton {
     static xtype = "bi.half_icon_button";
-    static EVENT_CHANGE = IconButton.EVENT_CHANGE
+    static EVENT_CHANGE = IconButton.EVENT_CHANGE;
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             extraCls: "bi-half-icon-button check-half-select-icon",
             height: 16,
@@ -25,4 +24,3 @@ export class HalfIconButton extends IconButton {
         });
     }
 }
-

src/case/button/icon/iconhalf/icon.half.js

@@ -1,5 +1,5 @@
-import { BasicButton } from "../../../../base/single/button/button.basic";
-import { shortcut, extend } from "../../../../core";
+import { CenterAdaptLayout, DefaultLayout, shortcut, extend } from "@/core";
+import { BasicButton } from "@/base";
 
 /**
  * guy
@@ -13,7 +13,7 @@ export class HalfButton extends BasicButton {
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             selected: false,
             width: 14,
@@ -25,15 +25,17 @@ export class HalfButton extends BasicButton {
 
     render() {
         const o = this.options;
-        
+
         return {
-            type: "bi.center_adapt",
-            items: [{
-                type: "bi.default",
-                cls: "bi-half-button bi-high-light-border",
-                width: o.iconWidth,
-                height: o.iconHeight,
-            }],
+            type: CenterAdaptLayout.xtype,
+            items: [
+                {
+                    type: DefaultLayout.xtype,
+                    cls: "bi-half-button bi-high-light-border",
+                    width: o.iconWidth,
+                    height: o.iconHeight,
+                },
+            ],
         };
     }
 

src/case/button/item.multiselect.js

@@ -1,5 +1,5 @@
-import { BasicButton } from "../../base/single/button/button.basic";
-import { shortcut, extend, createWidget } from "../../core";
+import { Checkbox, Label, BasicButton } from "@/base";
+import { VerticalAdaptLayout, CenterAdaptLayout, shortcut, extend, createWidget } from "@/core";
 
 /**
  * guy
@@ -10,7 +10,6 @@ import { shortcut, extend, createWidget } from "../../core";
 export class MultiSelectItem extends BasicButton {
     static xtype = "bi.multi_select_item";
     static EVENT_CHANGE = "EVENT_CHANGE";
-  
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
@@ -26,36 +25,39 @@ export class MultiSelectItem extends BasicButton {
     render() {
         const o = this.options;
         this.checkbox = createWidget({
-            type: "bi.checkbox",
+            type: Checkbox.xtype,
         });
-        
+
         return {
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
-            items: [{
-                type: "bi.center_adapt",
-                items: [this.checkbox],
-            }, {
-                el: {
-                    type: "bi.label",
-                    ref: _ref => {
-                        this.text = _ref;
+            items: [
+                {
+                    type: CenterAdaptLayout.xtype,
+                    items: [this.checkbox],
+                },
+                {
+                    el: {
+                        type: Label.xtype,
+                        ref: (_ref) => {
+                            this.text = _ref;
+                        },
+                        cls: "list-item-text",
+                        textAlign: "left",
+                        whiteSpace: "nowrap",
+                        textHeight: o.height,
+                        height: o.height,
+                        hgap: o.textHgap,
+                        rgap: o.textRgap,
+                        lgap: o.textLgap,
+                        vgap: o.textVgap,
+                        text: o.text,
+                        keyword: o.keyword,
+                        value: o.value,
+                        py: o.py,
                     },
-                    cls: "list-item-text",
-                    textAlign: "left",
-                    whiteSpace: "nowrap",
-                    textHeight: o.height,
-                    height: o.height,
-                    hgap: o.textHgap,
-                    rgap: o.textRgap,
-                    lgap: o.textLgap,
-                    vgap: o.textVgap,
-                    text: o.text,
-                    keyword: o.keyword,
-                    value: o.value,
-                    py: o.py,
                 },
-            }],
+            ],
         };
     }
 
@@ -88,4 +90,3 @@ export class MultiSelectItem extends BasicButton {
         this.checkbox.setSelected(v);
     }
 }
-

src/case/button/item.singleselect.icontext.js

@@ -1,5 +1,5 @@
-import { Single } from "../../base/single/0.single";
-import { shortcut, extend, createWidget, Controller } from "../../core";
+import { IconTextItem, Single } from "@/base";
+import { shortcut, extend, createWidget, Controller } from "@/core";
 
 /**
  * Created by GUY on 2016/2/2.
@@ -25,7 +25,7 @@ export class SingleSelectIconTextItem extends Single {
     render() {
         const o = this.options;
         this.text = createWidget({
-            type: "bi.icon_text_item",
+            type: IconTextItem.xtype,
             element: this,
             cls: o.iconCls,
             once: o.once,
@@ -73,5 +73,3 @@ export class SingleSelectIconTextItem extends Single {
         this.text.unRedMark(...arguments);
     }
 }
-
-

src/case/button/item.singleselect.js

@@ -1,6 +1,6 @@
-import { BasicButton } from "../../base/single/button/button.basic";
-import { shortcut, extend, createWidget } from "../../core";
- 
+import { Label, BasicButton } from "@/base";
+import { shortcut, extend, createWidget } from "@/core";
+
 @shortcut()
 export class SingleSelectItem extends BasicButton {
     static xtype = "bi.single_select_item";
@@ -21,7 +21,7 @@ export class SingleSelectItem extends BasicButton {
     render() {
         const o = this.options;
         this.text = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             element: this,
             textAlign: o.textAlign,
             whiteSpace: "nowrap",
@@ -66,6 +66,3 @@ export class SingleSelectItem extends BasicButton {
         super.setSelected(...arguments);
     }
 }
-
-
-

src/case/button/item.singleselect.radio.js

@@ -1,5 +1,5 @@
-import { BasicButton } from "../../base/single/button/button.basic";
-import { shortcut, extend } from "../../core";
+import { VerticalAdaptLayout, CenterAdaptLayout, shortcut, extend } from "@/core";
+import { Radio, Label, BasicButton } from "@/base";
 
 /**
  * guy
@@ -27,37 +27,42 @@ export class SingleSelectRadioItem extends BasicButton {
         const o = this.options;
 
         return {
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
-            items: [{
-                type: "bi.center_adapt",
-                items: [{
-                    type: "bi.radio",
-                    ref: _ref => {
-                        this.radio = _ref;
-                    },
-                }],
-            }, {
-                el: {
-                    type: "bi.label",
-                    ref: _ref => {
-                        this.text = _ref;
+            items: [
+                {
+                    type: CenterAdaptLayout.xtype,
+                    items: [
+                        {
+                            type: Radio.xtype,
+                            ref: (_ref) => {
+                                this.radio = _ref;
+                            },
+                        },
+                    ],
+                },
+                {
+                    el: {
+                        type: Label.xtype,
+                        ref: (_ref) => {
+                            this.text = _ref;
+                        },
+                        cls: "list-item-text",
+                        textAlign: "left",
+                        whiteSpace: "nowrap",
+                        textHeight: o.height,
+                        height: o.height,
+                        hgap: o.hgap || o.textHgap,
+                        vgap: o.textVgap,
+                        lgap: o.textLgap,
+                        rgap: o.textRgap,
+                        text: o.text,
+                        keyword: o.keyword,
+                        value: o.value,
+                        py: o.py,
                     },
-                    cls: "list-item-text",
-                    textAlign: "left",
-                    whiteSpace: "nowrap",
-                    textHeight: o.height,
-                    height: o.height,
-                    hgap: o.hgap || o.textHgap,
-                    vgap: o.textVgap,
-                    lgap: o.textLgap,
-                    rgap: o.textRgap,
-                    text: o.text,
-                    keyword: o.keyword,
-                    value: o.value,
-                    py: o.py,
                 },
-            }],
+            ],
         };
     }
 
@@ -90,4 +95,3 @@ export class SingleSelectRadioItem extends BasicButton {
         this.radio.setSelected(v);
     }
 }
-

src/case/button/node/node.arrow.js

@@ -1,5 +1,6 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend, createWidget } from "../../../core";
+import { ArrowTreeGroupNodeCheckbox } from "../../checkbox";
+import { VerticalAdaptLayout, shortcut, extend, createWidget } from "@/core";
+import { Label, NodeButton } from "@/base";
 
 /**
  * Created by roy on 15/10/16.
@@ -10,7 +11,7 @@ export class ArrowNode extends NodeButton {
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-arrow-group-node bi-list-item`,
             id: "",
@@ -24,34 +25,37 @@ export class ArrowNode extends NodeButton {
     render() {
         const o = this.options;
         this.checkbox = createWidget({
-            type: "bi.arrow_group_node_checkbox",
+            type: ArrowTreeGroupNodeCheckbox.xtype,
             expandIcon: o.expandIcon,
             collapseIcon: o.collapseIcon,
         });
-        
+
         return {
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
-            items: [this.checkbox, {
-                el: {
-                    type: "bi.label",
-                    ref: _ref => {
-                        this.text = _ref;
+            items: [
+                this.checkbox,
+                {
+                    el: {
+                        type: Label.xtype,
+                        ref: (_ref) => {
+                            this.text = _ref;
+                        },
+                        textAlign: "left",
+                        whiteSpace: "nowrap",
+                        textHeight: o.height,
+                        height: o.height,
+                        hgap: o.hgap || o.textHgap,
+                        vgap: o.textVgap,
+                        lgap: o.textLgap,
+                        rgap: o.textRgap,
+                        text: o.text,
+                        value: o.value,
+                        py: o.py,
+                        keyword: o.keyword,
                     },
-                    textAlign: "left",
-                    whiteSpace: "nowrap",
-                    textHeight: o.height,
-                    height: o.height,
-                    hgap: o.hgap || o.textHgap,
-                    vgap: o.textVgap,
-                    lgap: o.textLgap,
-                    rgap: o.textRgap,
-                    text: o.text,
-                    value: o.value,
-                    py: o.py,
-                    keyword: o.keyword,
                 },
-            }],
+            ],
         };
     }
 
@@ -78,4 +82,3 @@ export class ArrowNode extends NodeButton {
         this.checkbox.setSelected(v);
     }
 }
-

src/case/button/node/node.icon.arrow.js

@@ -1,5 +1,6 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend, createWidget, Controller, isNotNull } from "../../../core";
+import { ArrowTreeGroupNodeCheckbox } from "../../checkbox";
+import { IconLabel, Label, NodeButton } from "@/base";
+import { shortcut, extend, createWidget, Controller, isNotNull } from "@/core";
 
 /**
  * Created by User on 2016/3/31.
@@ -14,7 +15,7 @@ export class IconArrowNode extends NodeButton {
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-icon-arrow-node bi-list-item`,
             logic: {
@@ -35,7 +36,7 @@ export class IconArrowNode extends NodeButton {
         super._init.apply(this, arguments);
         const o = this.options;
         this.checkbox = createWidget({
-            type: "bi.arrow_group_node_checkbox",
+            type: ArrowTreeGroupNodeCheckbox.xtype,
             expandIcon: o.expandIcon,
             collapseIcon: o.collapseIcon,
             width: 24,
@@ -43,7 +44,7 @@ export class IconArrowNode extends NodeButton {
         });
 
         const icon = createWidget({
-            type: "bi.icon_label",
+            type: IconLabel.xtype,
             width: 24,
             cls: o.iconCls,
             iconWidth: o.iconWidth,
@@ -51,7 +52,7 @@ export class IconArrowNode extends NodeButton {
         });
 
         createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             textAlign: "left",
             whiteSpace: "nowrap",
             textHeight: o.height,
@@ -62,7 +63,7 @@ export class IconArrowNode extends NodeButton {
             py: o.py,
             keyword: o.keyword,
         });
-        this.checkbox.on(Controller.EVENT_CHANGE, type => {
+        this.checkbox.on(Controller.EVENT_CHANGE, (type) => {
             if (type === BI.Events.CLICK) {
                 if (this.checkbox.isSelected()) {
                     this.triggerExpand();
@@ -72,22 +73,35 @@ export class IconArrowNode extends NodeButton {
             }
         });
         const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
-        const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: o.iconWrapperWidth,
-            el: this.checkbox,
-        }, {
-            width: 16,
-            el: icon,
-        }, this.text);
-        createWidget(extend({
-            element: this,
-        }, BI.LogicFactory.createLogic(type, extend(o.logic, {
-            items,
-            rgap: 5,
-        }))));
+        const items = BI.LogicFactory.createLogicItemsByDirection(
+            BI.Direction.Left,
+            {
+                width: o.iconWrapperWidth,
+                el: this.checkbox,
+            },
+            {
+                width: 16,
+                el: icon,
+            },
+            this.text
+        );
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                BI.LogicFactory.createLogic(
+                    type,
+                    extend(o.logic, {
+                        items,
+                        rgap: 5,
+                    })
+                )
+            )
+        );
     }
 
-    doRedMark () {
+    doRedMark() {
         this.text.doRedMark(...arguments);
     }
 

src/case/button/node/node.multilayer.icon.arrow.js

@@ -1,5 +1,6 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend, createWidget, Controller, count, makeArray } from "../../../core";
+import { IconArrowNode } from "./node.icon.arrow";
+import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, count, makeArray } from "@/core";
+import { NodeButton } from "@/base";
 
 @shortcut()
 export class MultiLayerIconArrowNode extends NodeButton {
@@ -7,7 +8,7 @@ export class MultiLayerIconArrowNode extends NodeButton {
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             extraCls: "bi-multilayer-icon-arrow-node bi-list-item",
             layer: 0, // 第几层级
@@ -25,7 +26,7 @@ export class MultiLayerIconArrowNode extends NodeButton {
         super._init(...arguments);
         const o = this.options;
         this.node = createWidget({
-            type: "bi.icon_arrow_node",
+            type: IconArrowNode.xtype,
             iconCls: o.iconCls,
             cls: "bi-list-item-none",
             id: o.id,
@@ -48,14 +49,14 @@ export class MultiLayerIconArrowNode extends NodeButton {
         const items = [];
         count(0, o.layer, () => {
             items.push({
-                type: "bi.layout",
+                type: Layout.xtype,
                 width: 15,
                 height: o.height,
             });
         });
         items.push(this.node);
         createWidget({
-            type: "bi.horizontal_adapt",
+            type: HorizontalAdaptLayout.xtype,
             element: this,
             columnSize: makeArray(o.layer, 15),
             items,

src/case/button/node/node.plus.js

@@ -1,5 +1,6 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend, createWidget, Controller } from "../../../core";
+import { TreeNodeCheckbox } from "../../checkbox";
+import { VerticalAdaptLayout, shortcut, extend, createWidget, Controller } from "@/core";
+import { Label, NodeButton } from "@/base";
 
 /**
  * 加号表示的组节点
@@ -10,10 +11,10 @@ import { shortcut, extend, createWidget, Controller } from "../../../core";
 @shortcut()
 export class PlusGroupNode extends NodeButton {
     static xtype = "bi.plus_group_node";
-    
+
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-plus-group-node bi-list-item`,
             id: "",
@@ -26,7 +27,7 @@ export class PlusGroupNode extends NodeButton {
     render() {
         const o = this.options;
         this.checkbox = createWidget({
-            type: "bi.tree_node_checkbox",
+            type: TreeNodeCheckbox.xtype,
             iconHeight: o.height,
             iconWidth: o.iconWrapperWidth || o.height,
         });
@@ -37,30 +38,33 @@ export class PlusGroupNode extends NodeButton {
             }
             this.fireEvent(Controller.EVENT_CHANGE, args);
         });
-        
+
         return {
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
-            items: [this.checkbox, {
-                el: {
-                    type: "bi.label",
-                    ref: _ref => {
-                        this.text = _ref;
+            items: [
+                this.checkbox,
+                {
+                    el: {
+                        type: Label.xtype,
+                        ref: (_ref) => {
+                            this.text = _ref;
+                        },
+                        textAlign: "left",
+                        whiteSpace: "nowrap",
+                        textHeight: o.height,
+                        height: o.height,
+                        hgap: o.hgap || o.textHgap,
+                        vgap: o.textVgap,
+                        lgap: o.textLgap,
+                        rgap: o.textRgap,
+                        text: o.text,
+                        value: o.value,
+                        keyword: o.keyword,
+                        py: o.py,
                     },
-                    textAlign: "left",
-                    whiteSpace: "nowrap",
-                    textHeight: o.height,
-                    height: o.height,
-                    hgap: o.hgap || o.textHgap,
-                    vgap: o.textVgap,
-                    lgap: o.textLgap,
-                    rgap: o.textRgap,
-                    text: o.text,
-                    value: o.value,
-                    keyword: o.keyword,
-                    py: o.py,
                 },
-            }],
+            ],
         };
     }
 

src/case/button/node/siwtcher.tree.node.js

@@ -1,11 +1,11 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend } from "../../../core";
+import { IconLabel, NodeButton } from "@/base";
+import { shortcut, extend } from "@/core";
 
 @shortcut()
 export class TreeNodeSwitcher extends NodeButton {
     static xtype = "bi.tree_node_switcher";
     static EVENT_CHANGE = "EVENT_CHANGE";
-    
+
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-tree-node-switcher",
@@ -21,7 +21,7 @@ export class TreeNodeSwitcher extends NodeButton {
         const [collapse, expand] = this.getIconCls();
 
         return {
-            type: "bi.icon_label",
+            type: IconLabel.xtype,
             iconWidth: this.options.iconWidth,
             iconHeight: this.options.iconHeight,
             cls: this.options.open ? expand : collapse,
@@ -32,16 +32,24 @@ export class TreeNodeSwitcher extends NodeButton {
         const options = this.options;
         if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
             //  只有一层，并且是第一个节点，并且是最后一个节点
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"]
+                : ["tree-collapse-icon-type1", "tree-expand-icon-type1"];
         } else if (options.layer === 0 && options.isFirstNode) {
             //  第一层，并且是第一个节点
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"]
+                : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
         } else if (options.isLastNode) {
             //  最后一个节点
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"]
+                : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
         } else {
             //  其他情况
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"]
+                : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
         }
     }
 

src/case/button/switch.js

@@ -1,10 +1,11 @@
+import { AbsoluteLayout, shortcut } from "@/core";
+import { TextButton, Label, BasicButton } from "@/base";
+
+
 /**
  * Created by Windy on 2018/2/1.
  */
 
-import { BasicButton } from "../../base/single/button/button.basic";
-import { shortcut } from "../../core";
-
 @shortcut()
 export class Switch extends BasicButton {
     static xtype = "bi.switch";
@@ -28,16 +29,16 @@ export class Switch extends BasicButton {
         const o = this.options,
             c = this.constants;
         const tgap = (o.height - c.CIRCLE_SIZE) / 2;
-        
+
         return {
-            type: "bi.absolute",
-            ref: _ref => {
+            type: AbsoluteLayout.xtype,
+            ref: (_ref) => {
                 this.layout = _ref;
             },
             items: [
                 {
                     el: {
-                        type: "bi.text_button",
+                        type: TextButton.xtype,
                         cls: "circle-button",
                     },
                     width: 12,
@@ -46,27 +47,27 @@ export class Switch extends BasicButton {
                     left: o.selected ? 28 : 4,
                 },
                 {
-                    type: "bi.label",
+                    type: Label.xtype,
                     text: BI.i18nText("BI-Basic_Simple_Open"),
                     cls: "content-tip",
                     left: 8,
                     top: tgap - 2,
                     invisible: !(o.showTip && o.selected),
-                    ref: _ref => {
+                    ref: (_ref) => {
                         this.openTip = _ref;
                     },
                 },
                 {
-                    type: "bi.label",
+                    type: Label.xtype,
                     text: BI.i18nText("BI-Basic_Simple_Close"),
                     cls: "content-tip",
                     right: 8,
                     top: tgap - 2,
                     invisible: !(o.showTip && !o.selected),
-                    ref: _ref => {
+                    ref: (_ref) => {
                         this.closeTip = _ref;
                     },
-                }
+                },
             ],
         };
     }

src/case/button/treeitem/item.icon.treeleaf.js

@@ -1,5 +1,5 @@
-import { BasicButton } from "../../../base/single/button/button.basic";
-import { shortcut, extend, createWidget } from "../../../core";
+import { CenterAdaptLayout, shortcut, extend, createWidget } from "@/core";
+import { Icon, Label, BasicButton } from "@/base";
 
 @shortcut()
 export class IconTreeLeafItem extends BasicButton {
@@ -23,18 +23,20 @@ export class IconTreeLeafItem extends BasicButton {
         const o = this.options;
 
         const icon = createWidget({
-            type: "bi.center_adapt",
+            type: CenterAdaptLayout.xtype,
             width: 24,
             cls: o.iconCls,
-            items: [{
-                type: "bi.icon",
-                width: o.iconWidth,
-                height: o.iconHeight,
-            }],
+            items: [
+                {
+                    type: Icon.xtype,
+                    width: o.iconWidth,
+                    height: o.iconHeight,
+                },
+            ],
         });
 
         this.text = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             textAlign: "left",
             whiteSpace: "nowrap",
             textHeight: o.height,
@@ -46,18 +48,30 @@ export class IconTreeLeafItem extends BasicButton {
             keyword: o.keyword,
         });
         const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
-        const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: 16,
-            el: icon,
-        }, {
-            el: this.text,
-        });
-        createWidget(extend({
-            element: this,
-        }, BI.LogicFactory.createLogic(type, extend(o.logic, {
-            items,
-            hgap: 5,
-        }))));
+        const items = BI.LogicFactory.createLogicItemsByDirection(
+            BI.Direction.Left,
+            {
+                width: 16,
+                el: icon,
+            },
+            {
+                el: this.text,
+            }
+        );
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                BI.LogicFactory.createLogic(
+                    type,
+                    extend(o.logic, {
+                        items,
+                        hgap: 5,
+                    })
+                )
+            )
+        );
     }
 
     doRedMark() {

src/case/button/treeitem/item.multilayer.icon.treeleaf.js

@@ -1,5 +1,6 @@
-import { BasicButton } from "../../../base/single/button/button.basic";
-import { shortcut, extend, createWidget, Controller, makeArray, count } from "../../../core";
+import { IconTreeLeafItem } from "./item.icon.treeleaf";
+import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, makeArray, count } from "@/core";
+import { BasicButton } from "@/base";
 
 /**
  * @class BI.MultiLayerIconTreeLeafItem
@@ -8,7 +9,7 @@ import { shortcut, extend, createWidget, Controller, makeArray, count } from "..
 @shortcut()
 export class MultiLayerIconTreeLeafItem extends BasicButton {
     static xtype = "bi.multilayer_icon_tree_leaf_item";
-    
+
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-multilayer-icon-tree-leaf-item bi-list-item-active",
@@ -24,7 +25,7 @@ export class MultiLayerIconTreeLeafItem extends BasicButton {
         super._init(...arguments);
         const o = this.options;
         this.item = createWidget({
-            type: "bi.icon_tree_leaf_item",
+            type: IconTreeLeafItem.xtype,
             cls: "bi-list-item-none",
             iconCls: o.iconCls,
             id: o.id,
@@ -41,7 +42,8 @@ export class MultiLayerIconTreeLeafItem extends BasicButton {
         });
         this.item.on(Controller.EVENT_CHANGE, (...args) => {
             const [type] = args;
-            if (type === BI.Events.CLICK) {// 本身实现click功能
+            if (type === BI.Events.CLICK) {
+                // 本身实现click功能
                 return;
             }
             this.fireEvent(Controller.EVENT_CHANGE, ...args);
@@ -50,45 +52,45 @@ export class MultiLayerIconTreeLeafItem extends BasicButton {
         const items = [];
         count(0, o.layer, () => {
             items.push({
-                type: "bi.layout",
+                type: Layout.xtype,
                 width: 15,
                 height: o.height,
             });
         });
         items.push(this.item);
         createWidget({
-            type: "bi.horizontal_adapt",
+            type: HorizontalAdaptLayout.xtype,
             element: this,
             columnSize: makeArray(o.layer, 15),
             items,
         });
     }
 
-    doRedMark () {
+    doRedMark() {
         this.item.doRedMark(...arguments);
     }
 
-    unRedMark () {
+    unRedMark() {
         this.item.unRedMark(...arguments);
     }
-    
+
     doHighLight() {
         this.item.doHighLight(...arguments);
     }
 
-    unHighLight () {
+    unHighLight() {
         this.item.unHighLight(...arguments);
     }
 
-    getId () {
+    getId() {
         return this.options.id;
     }
 
-    getPId () {
+    getPId() {
         return this.options.pId;
     }
 
-    doClick () {
+    doClick() {
         super.doClick(...arguments);
         this.item.setSelected(this.isSelected());
     }
@@ -102,5 +104,3 @@ export class MultiLayerIconTreeLeafItem extends BasicButton {
         return this.options.value;
     }
 }
-
-

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

@@ -1,5 +1,5 @@
-import { shortcut } from "@/core";
-import { BasicButton } from "@/base";
+import { AbsoluteLayout, shortcut } from "@/core";
+import { TextItem, BasicButton } from "@/base";
 
 /**
  * 专门为calendar的视觉加的button，作为私有button,不能配置任何属性，也不要用这个玩意
@@ -15,50 +15,52 @@ export class CalendarDateItem extends BasicButton {
 
     static xtype = "bi.calendar_date_item";
 
-    render () {
+    render() {
         const { text, value, lgap, rgap, tgap, bgap } = this.options;
 
         return {
-            type: "bi.absolute",
-            items: [{
-                el: {
-                    type: "bi.text_item",
-                    cls: "bi-border-radius bi-list-item-select",
-                    textAlign: "center",
-                    text,
-                    value,
-                    ref: _ref => {
-                        this.text = _ref;
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: TextItem.xtype,
+                        cls: "bi-border-radius bi-list-item-select",
+                        textAlign: "center",
+                        text,
+                        value,
+                        ref: _ref => {
+                            this.text = _ref;
+                        },
                     },
-                },
-                left: lgap,
-                right: rgap,
-                top: tgap,
-                bottom: bgap,
-            }],
+                    left: lgap,
+                    right: rgap,
+                    top: tgap,
+                    bottom: bgap,
+                }
+            ],
         };
     }
 
-    doHighLight () {
+    doHighLight() {
         this.text.doHighLight(...arguments);
     }
 
-    unHighLight () {
+    unHighLight() {
         this.text.unHighLight(...arguments);
     }
 
-    setValue () {
+    setValue() {
         if (!this.isReadOnly()) {
             this.text.setValue(...arguments);
         }
     }
 
-    setSelected (b) {
+    setSelected(b) {
         super.setSelected(...arguments);
         this.text.setSelected(b);
     }
 
-    getValue () {
+    getValue() {
         return this.text.getValue();
     }
 }

src/case/calendar/calendar.js

@@ -1,4 +1,27 @@
-import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core";
+import { Label, ButtonGroup } from "@/base";
+import {
+    CenterLayout,
+    shortcut,
+    Widget,
+    getDate,
+    each,
+    range,
+    extend,
+    isLeapYear,
+    Date,
+    StartOfWeek,
+    checkDateVoid,
+    map,
+    createWidget,
+    createItems,
+    LogicFactory,
+    Controller,
+    getShortDayName,
+    getOffsetDate,
+    isNotEmptyString,
+    parseInt
+} from "@/core";
+import { CalendarDateItem } from "./calendar.date.item";
 
 /**
  * Created by GUY on 2015/8/28.
@@ -8,17 +31,17 @@ import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, Start
 @shortcut()
 export class Calendar extends Widget {
     static xtype = "bi.calendar";
-    
-    static getPageByDateJSON (json) {
+
+    static getPageByDateJSON(json) {
         const year = getDate().getFullYear();
         const month = getDate().getMonth();
         let page = (json.year - year) * 12;
         page += json.month - 1 - month;
-        
+
         return page;
     }
 
-    static getDateJSONByPage (v) {
+    static getDateJSONByPage(v) {
         const months = getDate().getMonth();
         let page = v;
 
@@ -29,17 +52,17 @@ export class Calendar extends Widget {
         if (page < 0 && page % 12 !== 0) {
             year--;
         }
-        const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12);
-        
+        const month = page >= 0 ? page % 12 : (12 + (page % 12)) % 12;
+
         return {
             year: getDate().getFullYear() + year,
             month: month + 1,
         };
     }
 
-    _defaultConfig () {
+    _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: "bi-calendar",
             logic: {
@@ -52,8 +75,10 @@ export class Calendar extends Widget {
             day: 25,
         });
     }
-    _dateCreator (Y, M, D) {
-        const { min, max } = this.options, log = {}, De = getDate();
+    _dateCreator(Y, M, D) {
+        const { min, max } = this.options,
+            log = {},
+            De = getDate();
         const mins = min.match(/\d+/g);
         const maxs = max.match(/\d+/g);
 
@@ -78,7 +103,9 @@ export class Calendar extends Widget {
         const items = [];
         each(range(42), i => {
             const td = {};
-            let YY = log.ymd[0], MM = log.ymd[1] + 1, DD;
+            let YY = log.ymd[0],
+                MM = log.ymd[1] + 1,
+                DD;
             // 上个月的日期
             if (i < offSetFDay) {
                 td.lastMonth = true;
@@ -103,83 +130,101 @@ export class Calendar extends Widget {
             td.text = DD;
             items.push(td);
         });
-        
+
         return items;
     }
 
-    _init () {
+    _init() {
         super._init(...arguments);
         const { year, month, day, logic } = this.options;
         const items = map(this._getWeekLabel(), (i, value) => {
             return {
-                type: "bi.label",
+                type: Label.xtype,
                 height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 text: value,
             };
         });
         const title = createWidget({
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             height: 44,
             items,
-            layouts: [{
-                type: "bi.center",
-                hgap: 5,
-                vgap: 10,
-            }],
+            layouts: [
+                {
+                    type: CenterLayout.xtype,
+                    hgap: 5,
+                    vgap: 10,
+                }
+            ],
         });
 
         this.days = createWidget({
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             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,
-            }))],
+            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,
+                    })
+                )
+            ],
         });
         this.days.on(Controller.EVENT_CHANGE, (...args) => {
             this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        createWidget(extend({
-            element: this,
-
-        }, LogicFactory.createLogic("vertical", extend({}, logic, {
-            items: LogicFactory.createLogicItemsByDirection("top", title, {
-                el: this.days,
-                tgap: -5,
-            }),
-        }))));
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    "vertical",
+                    extend({}, logic, {
+                        items: LogicFactory.createLogicItemsByDirection("top", title, {
+                            el: this.days,
+                            tgap: -5,
+                        }),
+                    })
+                )
+            )
+        );
     }
 
-    _getWeekLabel () {
+    _getWeekLabel() {
         return map(range(0, 7), (idx, v) => getShortDayName((v + StartOfWeek) % 7));
     }
 
-    isFrontDate () {
+    isFrontDate() {
         const { year, month, min, max } = this.options;
         let Y = year;
-        const M = month, De = getDate(), day = De.getDay();
+        const M = month,
+            De = getDate(),
+            day = De.getDay();
         Y = Y | 0;
         De.setFullYear(Y, M, 1);
         const newDate = getOffsetDate(De, -1 * (day + 1));
-        
+
         return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0];
     }
 
-    isFinalDate () {
+    isFinalDate() {
         const { year, month, min, max } = this.options;
         let Y = year;
-        const M = month, De = getDate(), day = De.getDay();
+        const M = month,
+            De = getDate(),
+            day = De.getDay();
         Y = Y | 0;
         De.setFullYear(Y, M, 1);
         const newDate = getOffsetDate(De, 42 - day);
-        
+
         return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0];
     }
 
-    _getItems () {
+    _getItems() {
         const o = this.options;
         const days = this._dateCreator(o.year, o.month - 1, o.day);
         const items = [];
@@ -190,38 +235,40 @@ export class Calendar extends Widget {
         items.push(days.slice(28, 35));
         items.push(days.slice(35, 42));
 
-        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++;
-            } else if (month < 1) {
-                month = 12;
-                year--;
-            }
-            
-            return extend(td, {
-                type: "bi.calendar_date_item",
-                once: false,
-                forceSelected: true,
-                value: `${year}-${month}-${td.text}`,
-                disabled: td.disabled,
-                cls: td.lastMonth || td.nextMonth ? "bi-tips" : "",
-                lgap: 2,
-                rgap: 2,
-                tgap: 4,
-                bgap: 4,
-                // selected: td.currentDay
-            });
-        }));
+        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++;
+                } else if (month < 1) {
+                    month = 12;
+                    year--;
+                }
+
+                return extend(td, {
+                    type: CalendarDateItem.xtype,
+                    once: false,
+                    forceSelected: true,
+                    value: `${year}-${month}-${td.text}`,
+                    disabled: td.disabled,
+                    cls: td.lastMonth || td.nextMonth ? "bi-tips" : "",
+                    lgap: 2,
+                    rgap: 2,
+                    tgap: 4,
+                    bgap: 4,
+                    // selected: td.currentDay
+                });
+            })
+        );
     }
 
     _populate() {
         this.days.populate(this._getItems());
     }
 
-    setMinDate (minDate) {
+    setMinDate(minDate) {
         const o = this.options;
         if (isNotEmptyString(o.min)) {
             o.min = minDate;
@@ -229,7 +276,7 @@ export class Calendar extends Widget {
         }
     }
 
-    setMaxDate (maxDate) {
+    setMaxDate(maxDate) {
         const o = this.options;
         if (isNotEmptyString(o.max)) {
             o.max = maxDate;
@@ -237,13 +284,13 @@ export class Calendar extends Widget {
         }
     }
 
-    setValue (ob) {
+    setValue(ob) {
         this.days.setValue([`${ob.year}-${ob.month}-${ob.day}`]);
     }
 
-    getValue () {
+    getValue() {
         const date = this.days.getValue()[0].match(/\d+/g);
-        
+
         return {
             year: date[0] | 0,
             month: date[1] | 0,

src/case/calendar/calendar.year.js

@@ -1,4 +1,23 @@
-import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core";
+import { ButtonGroup, TextItem } from "@/base";
+import {
+    CenterAdaptLayout,
+    shortcut,
+    Widget,
+    extend,
+    parseDateTime,
+    range,
+    checkDateVoid,
+    print,
+    getDate,
+    each,
+    createWidget,
+    createItems,
+    LogicFactory,
+    Controller,
+    makeArray,
+    map,
+    isNotEmptyString
+} from "@/core";
 
 /**
  * Created by GUY on 2015/8/28.
@@ -11,26 +30,26 @@ export class YearCalendar extends Widget {
     static INTERVAL = 12;
 
     // 获取显示的第一年
-    static getStartYear (year) {
+    static getStartYear(year) {
         const cur = getDate().getFullYear();
-        
-        return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL;
+
+        return year - ((((year - cur + 3) % YearCalendar.INTERVAL) + 12) % YearCalendar.INTERVAL);
     }
 
-    static getEndYear (year) {
+    static getEndYear(year) {
         return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1;
     }
 
-    static getPageByYear (year) {
+    static getPageByYear(year) {
         const cur = getDate().getFullYear();
         year = YearCalendar.getStartYear(year);
-        
+
         return (year - cur + 3) / YearCalendar.INTERVAL;
     }
 
-    _defaultConfig () {
+    _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: "bi-year-calendar",
             behaviors: {},
@@ -43,7 +62,7 @@ export class YearCalendar extends Widget {
         });
     }
 
-    _yearCreator (Y) {
+    _yearCreator(Y) {
         const { min, max } = this.options;
         Y = Y | 0;
         const start = YearCalendar.getStartYear(Y);
@@ -53,69 +72,92 @@ export class YearCalendar extends Widget {
         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]) {
+            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 () {
+    _init() {
         super._init(...arguments);
         const { behaviors, logic } = this.options;
         this.currentYear = getDate().getFullYear();
 
         this.years = createWidget({
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             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,
-            }],
+            layouts: [
+                LogicFactory.createLogic(
+                    "table",
+                    extend({}, logic, {
+                        columns: 2,
+                        rows: 6,
+                        columnSize: [1 / 2, 1 / 2],
+                        rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                    })
+                ),
+                {
+                    type: CenterAdaptLayout.xtype,
+                    vgap: 2,
+                }
+            ],
         });
         this.years.on(Controller.EVENT_CHANGE, (...args) => {
             this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        createWidget(extend({
-            element: this,
-        }, LogicFactory.createLogic("vertical", extend({}, logic, {
-            scrolly: true,
-            vgap: 5,
-            hgap: 6,
-            items: LogicFactory.createLogicItemsByDirection("top", this.years),
-        }))));
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    "vertical",
+                    extend({}, logic, {
+                        scrolly: true,
+                        vgap: 5,
+                        hgap: 6,
+                        items: LogicFactory.createLogicItemsByDirection("top", this.years),
+                    })
+                )
+            )
+        );
     }
 
-    isFrontYear () {
+    isFrontYear() {
         const { min, max } = this.options;
         let Y = this.options.year;
         Y = Y | 0;
-        
+
         return !!checkDateVoid(YearCalendar.getStartYear(Y) - 1, 1, 1, min, max)[0];
     }
 
-    isFinalYear () {
+    isFinalYear() {
         const { min, max } = this.options;
         let Y = this.options.year;
         Y = Y | 0;
-        
+
         return !!checkDateVoid(YearCalendar.getEndYear(Y) + 1, 1, 1, min, max)[0];
     }
 
-    _getItems () {
+    _getItems() {
         const { year } = this.options;
         const years = this._yearCreator(year || this.currentYear);
 
         // 纵向排列年
-        const len = years.length, tyears = makeArray(len, "");
+        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]];
@@ -129,25 +171,29 @@ export class YearCalendar extends Widget {
         items.push(tyears.slice(8, 10));
         items.push(tyears.slice(10, 12));
 
-        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",
-            whiteSpace: "normal",
-            once: false,
-            forceSelected: true,
-            height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            width: 45,
-            value: td.text,
-            disabled: td.disabled,
-        })));
+        return map(items, (i, item) =>
+            map(item, (j, td) =>
+                extend(td, {
+                    type: TextItem.xtype,
+                    cls: "bi-list-item-select bi-border-radius",
+                    textAlign: "center",
+                    whiteSpace: "normal",
+                    once: false,
+                    forceSelected: true,
+                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                    width: 45,
+                    value: td.text,
+                    disabled: td.disabled,
+                })
+            )
+        );
     }
 
-    _populate () {
+    _populate() {
         this.years.populate(this._getItems());
     }
 
-    setMinDate (minDate) {
+    setMinDate(minDate) {
         const o = this.options;
         if (isNotEmptyString(o.min)) {
             o.min = minDate;
@@ -155,7 +201,7 @@ export class YearCalendar extends Widget {
         }
     }
 
-    setMaxDate (maxDate) {
+    setMaxDate(maxDate) {
         const o = this.options;
         if (isNotEmptyString(this.options.max)) {
             o.max = maxDate;
@@ -163,11 +209,11 @@ export class YearCalendar extends Widget {
         }
     }
 
-    setValue (val) {
+    setValue(val) {
         this.years.setValue([val]);
     }
 
-    getValue () {
+    getValue() {
         return this.years.getValue()[0];
     }
 }

src/case/calendar/index.js

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

src/case/checkbox/check.arrownode.js

@@ -1,9 +1,10 @@
+import { shortcut } from "@/core";
+import { IconButton } from "@/base";
+
 /**
  * Created by roy on 15/10/16.
  * 右与下箭头切换的树节点
  */
-import { shortcut } from "@/core";
-import { IconButton } from "@/base";
 
 @shortcut()
 export class ArrowTreeGroupNodeCheckbox extends IconButton {

src/case/checkbox/check.checkingmarknode.js

@@ -1,10 +1,11 @@
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
 /**
  * 十字型的树节点
  * @class BI.CheckingMarkNode
  * @extends BI.IconButton
  */
-import { extend, shortcut } from "@/core";
-import { IconButton } from "@/base";
 
 @shortcut()
 export class CheckingMarkNode extends IconButton {

src/case/checkbox/check.first.treenode.js

@@ -1,10 +1,11 @@
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
 /**
  * 十字型的树节点
  * @class BI.FirstTreeNodeCheckbox
  * @extends BI.IconButton
  */
-import { extend, shortcut } from "@/core";
-import { IconButton } from "@/base";
 
 @shortcut()
 export class FirstTreeNodeCheckbox extends IconButton {
@@ -12,7 +13,10 @@ export class FirstTreeNodeCheckbox extends IconButton {
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
-            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2",
+            extraCls:
+                BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                    ? "tree-solid-collapse-icon-type2"
+                    : "tree-collapse-icon-type2",
             iconWidth: 24,
             iconHeight: 24,
         });

src/case/checkbox/check.last.treenode.js

@@ -1,10 +1,11 @@
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
 /**
  * 十字型的树节点
  * @class BI.LastTreeNodeCheckbox
  * @extends BI.IconButton
  */
-import { extend, shortcut } from "@/core";
-import { IconButton } from "@/base";
 
 @shortcut()
 export class LastTreeNodeCheckbox extends IconButton {
@@ -12,7 +13,10 @@ export class LastTreeNodeCheckbox extends IconButton {
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
-            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4",
+            extraCls:
+                BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                    ? "tree-solid-collapse-icon-type4"
+                    : "tree-collapse-icon-type4",
             iconWidth: 24,
             iconHeight: 24,
         });

src/case/checkbox/check.mid.treenode.js

@@ -1,10 +1,11 @@
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
 /**
  * 十字型的树节点
  * @class BI.MidTreeNodeCheckbox
  * @extends BI.IconButton
  */
-import { extend, shortcut } from "@/core";
-import { IconButton } from "@/base";
 
 @shortcut()
 export class MidTreeNodeCheckbox extends IconButton {
@@ -12,7 +13,10 @@ export class MidTreeNodeCheckbox extends IconButton {
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
-            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3",
+            extraCls:
+                BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                    ? "tree-solid-collapse-icon-type3"
+                    : "tree-collapse-icon-type3",
             iconWidth: 24,
             iconHeight: 24,
         });

src/case/checkbox/check.treenode.js

@@ -1,18 +1,22 @@
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
 /**
  * 十字型的树节点
  * @class BI.TreeNodeCheckbox
  * @extends BI.IconButton
  */
-import { extend, shortcut } from "@/core";
-import { IconButton } from "@/base";
 
 @shortcut()
 export class TreeNodeCheckbox extends IconButton {
     static xtype = "bi.tree_node_checkbox";
-    
+
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
-            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type1" : "tree-collapse-icon-type1",
+            extraCls:
+                BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid"
+                    ? "tree-solid-collapse-icon-type1"
+                    : "tree-collapse-icon-type1",
             iconWidth: 24,
             iconHeight: 24,
         });

src/case/colorchooser/colorchooser.custom.js

@@ -1,6 +1,7 @@
-import { shortcut, Widget, extend, createWidget } from "@/core";
-import { ColorPickerEditor } from "./colorpicker";
+import { SimpleHexColorPickerEditor, ColorPickerEditor } from "./colorpicker";
 import { Farbtastic } from "./farbtastic/farbtastic";
+import { VTapeLayout, AbsoluteLayout, shortcut, Widget, extend, createWidget } from "@/core";
+
 
 /**
  * 自定义选色
@@ -27,14 +28,14 @@ export class CustomColorChooser extends Widget {
         super._init(...arguments);
         const o = this.options;
         this.editor = createWidget(o.editor, {
-            type: "bi.simple_hex_color_picker_editor",
+            type: SimpleHexColorPickerEditor.xtype,
             value: o.value,
         });
         this.editor.on(ColorPickerEditor.EVENT_CHANGE, () => {
             this.setValue(this.editor.getValue());
         });
         this.farbtastic = createWidget({
-            type: "bi.farbtastic",
+            type: Farbtastic.xtype,
             value: o.value,
         });
         this.farbtastic.on(Farbtastic.EVENT_CHANGE, () => {
@@ -42,27 +43,34 @@ export class CustomColorChooser extends Widget {
         });
 
         createWidget({
-            type: "bi.vtape",
+            type: VTapeLayout.xtype,
             element: this,
-            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: this.editor,
-                    left: 10,
-                    top: 0,
-                    right: 10,
-                }],
-                height: 50,
-            }, {
-                type: "bi.absolute",
-                items: [{
-                    el: this.farbtastic,
-                    left: 46,
-                    right: 46,
-                    top: 7,
-                }],
-                height: 215,
-            }],
+            items: [
+                {
+                    type: AbsoluteLayout.xtype,
+                    items: [
+                        {
+                            el: this.editor,
+                            left: 10,
+                            top: 0,
+                            right: 10,
+                        },
+                    ],
+                    height: 50,
+                },
+                {
+                    type: AbsoluteLayout.xtype,
+                    items: [
+                        {
+                            el: this.farbtastic,
+                            left: 46,
+                            right: 46,
+                            top: 7,
+                        },
+                    ],
+                    height: 215,
+                },
+            ],
         });
     }
 
@@ -75,4 +83,3 @@ export class CustomColorChooser extends Widget {
         return this.editor.getValue();
     }
 }
-

src/case/colorchooser/colorchooser.js

@@ -1,5 +1,6 @@
-import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core";
 import { Combo } from "@/base";
+import { HexColorChooserPopup } from "./colorchooser.popup.hex";
+import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core";
 import { ColorChooserPopup } from "./colorchooser.popup";
 
 /**
@@ -36,47 +37,56 @@ export class ColorChooser extends Widget {
         super._init(...arguments);
         o.value = (o.value || "").toLowerCase();
         this.combo = createWidget({
-            type: "bi.combo",
+            type: Combo.xtype,
             element: this,
             container: o.container,
             adjustLength: 1,
             destroyWhenHide: o.destroyWhenHide,
             isNeedAdjustWidth: false,
             isNeedAdjustHeight: false,
-            el: extend({
-                type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger",
-                simple: o.simple,
-                ref: _ref => {
-                    this.trigger = _ref;
+            el: extend(
+                {
+                    type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger",
+                    simple: o.simple,
+                    ref: _ref => {
+                        this.trigger = _ref;
+                    },
+                    value: o.value,
+                    width: o.el.type ? o.width : toPix(o.width, 2),
+                    height: o.el.type ? o.height : toPix(o.height, 2),
                 },
-                value: o.value,
-                width: o.el.type ? o.width : toPix(o.width, 2),
-                height: o.el.type ? o.height : toPix(o.height, 2),
-            }, o.el),
+                o.el
+            ),
             popup: () => {
                 return {
-                    el: extend({
-                        type: "bi.hex_color_chooser_popup",
-                        recommendColorsGetter: o.recommendColorsGetter,
-                        ref: _ref => {
-                            this.colorPicker = _ref;
-                        },
-                        listeners: [{
-                            eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
-                            action: () => {
-                                fn();
-                                if (!this._isRGBColor(this.colorPicker.getValue())) {
-                                    this.combo.hideView();
-                                }
-                            },
-                        }, {
-                            eventName: ColorChooserPopup.EVENT_CHANGE,
-                            action: () => {
-                                fn();
-                                this.combo.hideView();
+                    el: extend(
+                        {
+                            type: HexColorChooserPopup.xtype,
+                            recommendColorsGetter: o.recommendColorsGetter,
+                            ref: _ref => {
+                                this.colorPicker = _ref;
                             },
-                        }],
-                    }, o.popup),
+                            listeners: [
+                                {
+                                    eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
+                                    action: () => {
+                                        fn();
+                                        if (!this._isRGBColor(this.colorPicker.getValue())) {
+                                            this.combo.hideView();
+                                        }
+                                    },
+                                },
+                                {
+                                    eventName: ColorChooserPopup.EVENT_CHANGE,
+                                    action: () => {
+                                        fn();
+                                        this.combo.hideView();
+                                    },
+                                }
+                            ],
+                        },
+                        o.popup
+                    ),
                     value: o.value,
                     width: 300,
                 };

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

@@ -1,7 +1,26 @@
-import { shortcut, Widget, isNotNull, extend, isNotEmptyString, array2String, map, count, string2Array, filter, isArray, Cache, Queue } from "@/core";
-import { Combo } from "@/base";
+import {
+    VerticalLayout,
+    Layout,
+    AbsoluteLayout,
+    shortcut,
+    Widget,
+    isNotNull,
+    extend,
+    isNotEmptyString,
+    array2String,
+    map,
+    count,
+    string2Array,
+    filter,
+    isArray,
+    Cache,
+    Queue
+} from "@/core";
+import { Label, Combo, TextItem } from "@/base";
+import { PopupPanel } from "../layer";
+import { CustomColorChooser } from "./colorchooser.custom";
 import { ColorChooserPopup } from "./colorchooser.popup";
-import { ColorPickerEditor, ColorPicker } from "./colorpicker";
+import { ColorPickerEditor, ColorPicker, HexColorPicker } from "./colorpicker";
 
 /**
  * @author windy
@@ -20,203 +39,244 @@ export class HexColorChooserPopup extends Widget {
         width: 300,
         recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
         simple: false, // 简单模式, popup中没有自动和透明
-    }
+    };
 
     render() {
         const o = this.options;
         const hasRecommendColors = isNotNull(o.recommendColorsGetter());
-        
-        return [{
-            type: "bi.vertical",
-            items: [{
-                el: {
-                    type: "bi.vertical",
-                    hgap: 15,
-                    items: [extend({
-                        type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
-                        value: o.value,
-                        height: o.simple ? 36 : 70,
-                        listeners: [{
-                            eventName: ColorPickerEditor.EVENT_CHANGE,
-                            action: (...args) => {
-                                this.setValue(this.colorEditor.getValue());
-                                this._dealStoreColors();
-                                this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
-                            },
-                        }],
-                        ref: _ref => {
-                            this.colorEditor = _ref;
-                        },
-                    }, o.editor), {
+
+        return [
+            {
+                type: VerticalLayout.xtype,
+                items: [
+                    {
                         el: {
-                            type: "bi.hex_color_picker",
-                            cls: "bi-border-bottom bi-border-right",
-                            items: [this._digestStoreColors(this._getStoreColors())],
-                            height: 22,
-                            value: o.value,
-                            listeners: [{
-                                eventName: ColorPicker.EVENT_CHANGE,
-                                action: (...args) => {
-                                    this.setValue(this.storeColors.getValue()[0]);
-                                    this._dealStoreColors();
-                                    this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                            type: VerticalLayout.xtype,
+                            hgap: 15,
+                            items: [
+                                extend(
+                                    {
+                                        type: o.simple
+                                            ? "bi.simple_hex_color_picker_editor"
+                                            : "bi.hex_color_picker_editor",
+                                        value: o.value,
+                                        height: o.simple ? 36 : 70,
+                                        listeners: [
+                                            {
+                                                eventName: ColorPickerEditor.EVENT_CHANGE,
+                                                action: (...args) => {
+                                                    this.setValue(this.colorEditor.getValue());
+                                                    this._dealStoreColors();
+                                                    this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
+                                                },
+                                            }
+                                        ],
+                                        ref: _ref => {
+                                            this.colorEditor = _ref;
+                                        },
+                                    },
+                                    o.editor
+                                ),
+                                {
+                                    el: {
+                                        type: HexColorPicker.xtype,
+                                        cls: "bi-border-bottom bi-border-right",
+                                        items: [this._digestStoreColors(this._getStoreColors())],
+                                        height: 22,
+                                        value: o.value,
+                                        listeners: [
+                                            {
+                                                eventName: ColorPicker.EVENT_CHANGE,
+                                                action: (...args) => {
+                                                    this.setValue(this.storeColors.getValue()[0]);
+                                                    this._dealStoreColors();
+                                                    this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                                },
+                                            }
+                                        ],
+                                        ref: _ref => {
+                                            this.storeColors = _ref;
+                                        },
+                                    },
+                                    tgap: 10,
+                                    height: 22,
                                 },
-                            }],
-                            ref: _ref => {
-                                this.storeColors = _ref;
-                            },
-                        },
-                        tgap: 10,
-                        height: 22,
-                    }, {
-                        el: hasRecommendColors ? {
-                            type: "bi.vertical",
-                            items: [{
-                                type: "bi.label",
-                                text: BI.i18nText("BI-Basic_Recommend_Color"),
-                                textAlign: "left",
-                                height: 24,
-                            }, {
-                                type: "bi.hex_color_picker",
-                                cls: "bi-border-bottom bi-border-right",
-                                items: [this._digestStoreColors(o.recommendColorsGetter())],
-                                height: 22,
-                                value: o.value,
-                                listeners: [{
-                                    eventName: ColorPicker.EVENT_CHANGE,
-                                    action: (...args) => {
-                                        this.setValue(this.recommendColors.getValue()[0]);
-                                        this._dealStoreColors();
-                                        this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                {
+                                    el: hasRecommendColors
+                                        ? {
+                                            type: VerticalLayout.xtype,
+                                            items: [
+                                                {
+                                                    type: Label.xtype,
+                                                    text: BI.i18nText("BI-Basic_Recommend_Color"),
+                                                    textAlign: "left",
+                                                    height: 24,
+                                                },
+                                                {
+                                                    type: HexColorPicker.xtype,
+                                                    cls: "bi-border-bottom bi-border-right",
+                                                    items: [this._digestStoreColors(o.recommendColorsGetter())],
+                                                    height: 22,
+                                                    value: o.value,
+                                                    listeners: [
+                                                        {
+                                                            eventName: ColorPicker.EVENT_CHANGE,
+                                                            action: (...args) => {
+                                                                this.setValue(this.recommendColors.getValue()[0]);
+                                                                this._dealStoreColors();
+                                                                this.fireEvent(
+                                                                    ColorChooserPopup.EVENT_CHANGE,
+                                                                    ...args
+                                                                );
+                                                            },
+                                                        }
+                                                    ],
+                                                    ref: _ref => {
+                                                        this.recommendColors = _ref;
+                                                    },
+                                                }
+                                            ],
+                                        }
+                                        : { type: Layout.xtype },
+                                    tgap: hasRecommendColors ? 10 : 0,
+                                    height: hasRecommendColors ? 47 : 0,
+                                },
+                                {
+                                    el: {
+                                        type: Layout.xtype,
+                                        cls: "bi-border-top",
                                     },
-                                }],
-                                ref: _ref => {
-                                    this.recommendColors = _ref;
+                                    vgap: 10,
+                                    height: 1,
                                 },
-                            }],
-                        } : { type: "bi.layout" },
-                        tgap: hasRecommendColors ? 10 : 0,
-                        height: hasRecommendColors ? 47 : 0,
-                    }, {
+                                {
+                                    type: AbsoluteLayout.xtype,
+                                    items: [
+                                        {
+                                            el: {
+                                                type: HexColorPicker.xtype,
+                                                space: true,
+                                                value: o.value,
+                                                listeners: [
+                                                    {
+                                                        eventName: ColorPicker.EVENT_CHANGE,
+                                                        action: (...args) => {
+                                                            this.setValue(this.colorPicker.getValue()[0]);
+                                                            this._dealStoreColors();
+                                                            this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                                        },
+                                                    }
+                                                ],
+                                                ref: _ref => {
+                                                    this.colorPicker = _ref;
+                                                },
+                                            },
+                                            top: 0,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 1,
+                                        }
+                                    ],
+                                    height: 80,
+                                }
+                            ],
+                        },
+                    },
+                    {
                         el: {
-                            type: "bi.layout",
+                            type: Combo.xtype,
                             cls: "bi-border-top",
-                        },
-                        vgap: 10,
-                        height: 1,
-                    }, {
-                        type: "bi.absolute",
-                        items: [{
+                            container: null,
+                            direction: "right,top",
+                            isNeedAdjustHeight: false,
                             el: {
-                                type: "bi.hex_color_picker",
-                                space: true,
-                                value: o.value,
-                                listeners: [{
-                                    eventName: ColorPicker.EVENT_CHANGE,
-                                    action: (...args) => {
-                                        this.setValue(this.colorPicker.getValue()[0]);
-                                        this._dealStoreColors();
-                                        this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
+                                type: TextItem.xtype,
+                                cls: "color-chooser-popup-more bi-list-item",
+                                textAlign: "center",
+                                height: 24,
+                                textLgap: 10,
+                                text: `${BI.i18nText("BI-Basic_More")}...`,
+                            },
+                            popup: {
+                                type: PopupPanel.xtype,
+                                buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")],
+                                title: BI.i18nText("BI-Custom_Color"),
+                                el: {
+                                    type: CustomColorChooser.xtype,
+                                    value: o.value,
+                                    editor: o.editor,
+                                    ref: _ref => {
+                                        this.customColorChooser = _ref;
                                     },
-                                }],
-                                ref: _ref => {
-                                    this.colorPicker = _ref;
                                 },
+                                stopPropagation: false,
+                                bgap: -1,
+                                rgap: 1,
+                                lgap: 1,
+                                minWidth: 227,
+                                listeners: [
+                                    {
+                                        eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
+                                        action: (index, ...args) => {
+                                            switch (index) {
+                                            case 0:
+                                                this.more.hideView();
+                                                break;
+                                            case 1: {
+                                                const color = this.customColorChooser.getValue();
+                                                // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明
+                                                if (isNotEmptyString(color)) {
+                                                    this.setValue(color);
+                                                    this._dealStoreColors();
+                                                }
+                                                this.more.hideView();
+                                                this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
+                                                break;
+                                            }
+                                            default:
+                                                break;
+                                            }
+                                        },
+                                    }
+                                ],
                             },
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 1,
-                        }],
-                        height: 80,
-                    }],
-                },
-            }, {
-                el: {
-                    type: "bi.combo",
-                    cls: "bi-border-top",
-                    container: null,
-                    direction: "right,top",
-                    isNeedAdjustHeight: false,
-                    el: {
-                        type: "bi.text_item",
-                        cls: "color-chooser-popup-more bi-list-item",
-                        textAlign: "center",
-                        height: 24,
-                        textLgap: 10,
-                        text: `${BI.i18nText("BI-Basic_More")}...`,
-                    },
-                    popup: {
-                        type: "bi.popup_panel",
-                        buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")],
-                        title: BI.i18nText("BI-Custom_Color"),
-                        el: {
-                            type: "bi.custom_color_chooser",
-                            value: o.value,
-                            editor: o.editor,
+                            listeners: [
+                                {
+                                    eventName: Combo.EVENT_AFTER_POPUPVIEW,
+                                    action: () => {
+                                        this.customColorChooser.setValue(this.getValue());
+                                    },
+                                }
+                            ],
                             ref: _ref => {
-                                this.customColorChooser = _ref;
+                                this.more = _ref;
                             },
                         },
-                        stopPropagation: false,
-                        bgap: -1,
-                        rgap: 1,
-                        lgap: 1,
-                        minWidth: 227,
-                        listeners: [{
-                            eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
-                            action: (index, ...args) => {
-                                switch (index) {
-                                case 0:
-                                    this.more.hideView();
-                                    break;
-                                case 1: {
-                                    const color = this.customColorChooser.getValue();
-                                    // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明
-                                    if (isNotEmptyString(color)) {
-                                        this.setValue(color);
-                                        this._dealStoreColors();
-                                    }
-                                    this.more.hideView();
-                                    this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
-                                    break;
-                                }
-                                default:
-                                    break;
-                                }
+                        tgap: 10,
+                        height: 24,
+                    }
+                ],
+            },
+            {
+                type: AbsoluteLayout.xtype,
+                items: [
+                    {
+                        el: {
+                            type: Layout.xtype,
+                            cls: "disable-mask",
+                            invisible: !o.disabled,
+                            ref: () => {
+                                this.mask = this;
                             },
-                        }],
-                    },
-                    listeners: [{
-                        eventName: Combo.EVENT_AFTER_POPUPVIEW,
-                        action: () => {
-                            this.customColorChooser.setValue(this.getValue());
                         },
-                    }],
-                    ref: _ref => {
-                        this.more = _ref;
-                    },
-                },
-                tgap: 10,
-                height: 24,
-            }],
-        }, {
-            type: "bi.absolute",
-            items: [{
-                el: {
-                    type: "bi.layout",
-                    cls: "disable-mask",
-                    invisible: !o.disabled,
-                    ref: () => {
-                        this.mask = this;
-                    },
-                },
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }],
-        }];
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        bottom: 0,
+                    }
+                ],
+            }
+        ];
     }
 
     // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示
@@ -256,15 +316,15 @@ export class HexColorChooserPopup extends Widget {
                 disabled: true,
             });
         });
-        
+
         return items;
     }
 
     _getStoreColors() {
         const o = this.options;
         const colorsArray = string2Array(Cache.getItem("colors") || "");
-        
-        return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
+
+        return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true));
     }
 
     _isRGBColor(color) {

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

@@ -1,3 +1,4 @@
+import { HexColorChooserPopup } from "./colorchooser.popup.hex";
 import { shortcut, Widget } from "@/core";
 import { ColorChooserPopup } from "./colorchooser.popup";
 import { SimpleColorChooserPopup } from "./colorchooser.popup.simple";
@@ -16,27 +17,30 @@ export class SimpleHexColorChooserPopup extends Widget {
 
     props = {
         baseCls: "bi-color-chooser-popup",
-    }
+    };
 
     render() {
         const o = this.options;
 
         return {
-            type: "bi.hex_color_chooser_popup",
+            type: HexColorChooserPopup.xtype,
             recommendColorsGetter: o.recommendColorsGetter,
             value: o.value,
             simple: true, // 是否有自动
-            listeners: [{
-                eventName: ColorChooserPopup.EVENT_CHANGE,
-                action: (...args) => {
-                    this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args);
-                },
-            }, {
-                eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
-                action: (...args) => {
-                    this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
+            listeners: [
+                {
+                    eventName: ColorChooserPopup.EVENT_CHANGE,
+                    action: (...args) => {
+                        this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args);
+                    },
                 },
-            }],
+                {
+                    eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
+                    action: (...args) => {
+                        this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
+                    },
+                }
+            ],
             ref: _ref => {
                 this.popup = _ref;
             },

src/case/colorchooser/colorchooser.popup.js

@@ -1,5 +1,24 @@
-import { shortcut, Widget, createWidget, Cache, string2Array, isNotNull, Queue, array2String, map, count, filter, isNotEmptyString, isArray } from "@/core";
-import { Combo } from "@/base";
+import { CustomColorChooser } from "./colorchooser.custom";
+import { PopupPanel } from "../layer";
+import { Combo, TextItem } from "@/base";
+import {
+    AbsoluteLayout,
+    VTapeLayout,
+    Layout,
+    shortcut,
+    Widget,
+    createWidget,
+    Cache,
+    string2Array,
+    isNotNull,
+    Queue,
+    array2String,
+    map,
+    count,
+    filter,
+    isNotEmptyString,
+    isArray
+} from "@/core";
 import { ColorPickerEditor, ColorPicker } from "./colorpicker";
 
 /**
@@ -21,9 +40,9 @@ export class ColorChooserPopup extends Widget {
         width: 230,
         height: 145,
         simple: false, // 简单模式, popup中没有自动和透明
-    }
+    };
 
-    render () {
+    render() {
         const o = this.options;
         this.colorEditor = createWidget(o.editor, {
             type: o.simple ? "bi.simple_color_picker_editor" : "bi.color_picker_editor",
@@ -39,7 +58,7 @@ export class ColorChooserPopup extends Widget {
         });
 
         this.storeColors = createWidget({
-            type: "bi.color_picker",
+            type: ColorPicker.xtype,
             cls: "bi-border-bottom bi-border-right",
             items: [this._digestStoreColors(this._getStoreColors())],
             width: 210,
@@ -53,7 +72,7 @@ export class ColorChooserPopup extends Widget {
         });
 
         this.colorPicker = createWidget({
-            type: "bi.color_picker",
+            type: ColorPicker.xtype,
             width: 210,
             height: 50,
             value: o.value,
@@ -66,12 +85,12 @@ export class ColorChooserPopup extends Widget {
         });
 
         this.customColorChooser = createWidget({
-            type: "bi.custom_color_chooser",
+            type: CustomColorChooser.xtype,
             editor: o.editor,
         });
 
         const panel = createWidget({
-            type: "bi.popup_panel",
+            type: PopupPanel.xtype,
             buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")],
             title: BI.i18nText("BI-Custom_Color"),
             el: this.customColorChooser,
@@ -83,13 +102,13 @@ export class ColorChooserPopup extends Widget {
         });
 
         this.more = createWidget({
-            type: "bi.combo",
+            type: Combo.xtype,
             cls: "bi-border-top",
             container: null,
             direction: "right,top",
             isNeedAdjustHeight: false,
             el: {
-                type: "bi.text_item",
+                type: TextItem.xtype,
                 cls: "color-chooser-popup-more bi-list-item",
                 textAlign: "center",
                 height: 24,
@@ -104,88 +123,100 @@ export class ColorChooserPopup extends Widget {
         });
         panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, (index, ...args) => {
             switch (index) {
-            case 0:
-                this.more.hideView();
-                break;
-            case 1:
-                this.setValue(this.customColorChooser.getValue());
-                this._dealStoreColors();
-                this.more.hideView();
-                this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
-                break;
-            default:
-                break;
+                case 0:
+                    this.more.hideView();
+                    break;
+                case 1:
+                    this.setValue(this.customColorChooser.getValue());
+                    this._dealStoreColors();
+                    this.more.hideView();
+                    this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
+                    break;
+                default:
+                    break;
             }
         });
 
         return {
-            type: "bi.absolute",
-            items: [{
-                el: {
-                    type: "bi.vtape",
-                    items: [this.colorEditor, {
-                        el: {
-                            type: "bi.absolute",
-                            items: [{
-                                el: this.storeColors,
-                                left: 10,
-                                right: 10,
-                                top: 5,
-                            }],
-                        },
-                        height: 29,
-                    }, {
-                        el: {
-                            type: "bi.absolute",
-                            items: [{
-                                el: this.colorPicker,
-                                left: 10,
-                                right: 10,
-                                top: 5,
-                                bottom: 5,
-                            }],
-                        },
-                        height: 60,
-                    }, {
-                        el: this.more,
-                        height: 24,
-                    }],
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: VTapeLayout.xtype,
+                        items: [
+                            this.colorEditor,
+                            {
+                                el: {
+                                    type: AbsoluteLayout.xtype,
+                                    items: [
+                                        {
+                                            el: this.storeColors,
+                                            left: 10,
+                                            right: 10,
+                                            top: 5,
+                                        },
+                                    ],
+                                },
+                                height: 29,
+                            },
+                            {
+                                el: {
+                                    type: AbsoluteLayout.xtype,
+                                    items: [
+                                        {
+                                            el: this.colorPicker,
+                                            left: 10,
+                                            right: 10,
+                                            top: 5,
+                                            bottom: 5,
+                                        },
+                                    ],
+                                },
+                                height: 60,
+                            },
+                            {
+                                el: this.more,
+                                height: 24,
+                            },
+                        ],
+                    },
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
                 },
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }, {
-                el: {
-                    type: "bi.layout",
-                    cls: "disable-mask",
-                    invisible: !o.disabled,
-                    ref: () => {
-                        this.mask = this;
+                {
+                    el: {
+                        type: Layout.xtype,
+                        cls: "disable-mask",
+                        invisible: !o.disabled,
+                        ref: () => {
+                            this.mask = this;
+                        },
                     },
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
                 },
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }],
+            ],
         };
     }
 
     // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示
-    mounted () {
+    mounted() {
         const o = this.options;
         if (isNotNull(o.value)) {
             this.setValue(o.value);
         }
     }
 
-    _setEnable (enable) {
+    _setEnable(enable) {
         super._setEnable(...arguments);
         this.mask.setVisible(!enable);
     }
 
-    _dealStoreColors () {
+    _dealStoreColors() {
         const color = this.getValue();
         const colors = this._getStoreColors();
         const que = new Queue(8);
@@ -197,34 +228,34 @@ export class ColorChooserPopup extends Widget {
         this.setStoreColors(array);
     }
 
-    _digestStoreColors (colors) {
+    _digestStoreColors(colors) {
         const items = map(colors, (i, color) => {
             return {
                 value: color,
             };
         });
-        count(colors.length, 8, i => {
+        count(colors.length, 8, (i) => {
             items.push({
                 value: "",
                 disabled: true,
             });
         });
-        
+
         return items;
     }
 
     _getStoreColors() {
         const o = this.options;
         const colorsArray = string2Array(Cache.getItem("colors") || "");
-        
-        return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
+
+        return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true));
     }
 
-    _isRGBColor (color) {
+    _isRGBColor(color) {
         return isNotEmptyString(color) && color !== "transparent";
     }
 
-    setStoreColors (colors) {
+    setStoreColors(colors) {
         if (isArray(colors)) {
             this.storeColors.populate([this._digestStoreColors(colors)]);
             // BI-66973 选中颜色的同时选中历史
@@ -232,13 +263,13 @@ export class ColorChooserPopup extends Widget {
         }
     }
 
-    setValue (color) {
+    setValue(color) {
         this.colorEditor.setValue(color);
         this.colorPicker.setValue(color);
         this.storeColors.setValue(color);
     }
 
-    getValue () {
+    getValue() {
         return this.colorEditor.getValue();
     }
 }

src/case/colorchooser/colorchooser.simple.js

@@ -1,3 +1,4 @@
+import { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple";
 import { shortcut, Widget, extend, createWidget } from "@/core";
 import { ColorChooser } from "./colorchooser";
 
@@ -27,7 +28,7 @@ export class SimpleColorChooser extends Widget {
         const o = this.options;
 
         this.combo = createWidget({
-            type: "bi.color_chooser",
+            type: ColorChooser.xtype,
             simple: o.simple,
             element: this,
             container: o.container,
@@ -36,7 +37,7 @@ export class SimpleColorChooser extends Widget {
             height: o.height,
             destroyWhenHide: o.destroyWhenHide,
             popup: {
-                type: "bi.simple_hex_color_chooser_popup",
+                type: SimpleHexColorChooserPopup.xtype,
                 recommendColorsGetter: o.recommendColorsGetter,
             },
         });

src/case/colorchooser/colorchooser.trigger.js

@@ -1,5 +1,5 @@
-import { shortcut, extend, createWidget, isNotNull } from "@/core";
-import { Trigger } from "@/base";
+import { Layout, AbsoluteLayout, shortcut, extend, createWidget, isNotNull } from "@/core";
+import { IconButton, Trigger } from "@/base";
 
 /**
  * 选色控件
@@ -14,24 +14,26 @@ export class ColorChooserTrigger extends Trigger {
 
     static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig (config) {
+    _defaultConfig(config) {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
-            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
+            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${
+                config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"
+            }`,
             height: 22,
         });
     }
 
-    _init () {
+    _init() {
         super._init(...arguments);
         this.colorContainer = createWidget({
-            type: "bi.layout",
-            cls: "color-chooser-trigger-content" + (BI.isIE9Below && BI.isIE9Below() ? " hack" : "")
+            type: Layout.xtype,
+            cls: `color-chooser-trigger-content${BI.isIE9Below && BI.isIE9Below() ? " hack" : ""}`,
         });
 
         const down = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             disableSelected: true,
             cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
             width: 12,
@@ -39,33 +41,45 @@ export class ColorChooserTrigger extends Trigger {
         });
 
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.colorContainer,
-                left: 2,
-                right: 2,
-                top: 2,
-                bottom: 2,
-            }, {
-                el: down,
-                right: -1,
-                bottom: 1,
-            }],
+            items: [
+                {
+                    el: this.colorContainer,
+                    left: 2,
+                    right: 2,
+                    top: 2,
+                    bottom: 2,
+                },
+                {
+                    el: down,
+                    right: -1,
+                    bottom: 1,
+                }
+            ],
         });
         if (isNotNull(this.options.value)) {
             this.setValue(this.options.value);
         }
     }
 
-    setValue (color) {
+    setValue(color) {
         super.setValue(...arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+            this.colorContainer.element
+                .css("background-color", "")
+                .removeClass("trans-color-background")
+                .addClass("auto-color-background");
         } else if (color === "transparent") {
-            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background");
+            this.colorContainer.element
+                .css("background-color", "")
+                .removeClass("auto-color-background")
+                .addClass("trans-color-background");
         } else {
-            this.colorContainer.element.css({ "background-color": color }).removeClass("auto-color-background").removeClass("trans-color-background");
+            this.colorContainer.element
+                .css({ "background-color": color })
+                .removeClass("auto-color-background")
+                .removeClass("trans-color-background");
         }
     }
 }

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

@@ -1,5 +1,6 @@
-import { shortcut, extend, createWidget } from "@/core";
-import { Trigger } from "@/base";
+import { HTapeLayout, AbsoluteLayout, shortcut, extend, createWidget } from "@/core";
+import { IconChangeButton } from "../button";
+import { Label, IconButton, Trigger } from "@/base";
 
 /**
  * 选色控件
@@ -14,46 +15,51 @@ export class LongColorChooserTrigger extends Trigger {
 
     static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig (config) {
+    _defaultConfig(config) {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
-            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
+            baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${
+                config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"
+            }`,
             height: 24,
         });
     }
 
-    _init () {
+    _init() {
         super._init(...arguments);
         this.colorContainer = createWidget({
-            type: "bi.htape",
+            type: HTapeLayout.xtype,
             cls: "color-chooser-trigger-content",
-            items: [{
-                type: "bi.icon_change_button",
-                ref: _ref => {
-                    this.changeIcon = _ref;
-                },
-                disableSelected: true,
-                iconCls: "auto-color-icon",
-                width: 24,
-                iconWidth: 16,
-                iconHeight: 16,
-            }, {
-                el: {
-                    type: "bi.label",
+            items: [
+                {
+                    type: IconChangeButton.xtype,
                     ref: _ref => {
-                        this.label = _ref;
+                        this.changeIcon = _ref;
                     },
-                    textAlign: "left",
-                    hgap: 5,
-                    height: 18,
-                    text: BI.i18nText("BI-Basic_Auto"),
+                    disableSelected: true,
+                    iconCls: "auto-color-icon",
+                    width: 24,
+                    iconWidth: 16,
+                    iconHeight: 16,
                 },
-            }],
+                {
+                    el: {
+                        type: Label.xtype,
+                        ref: _ref => {
+                            this.label = _ref;
+                        },
+                        textAlign: "left",
+                        hgap: 5,
+                        height: 18,
+                        text: BI.i18nText("BI-Basic_Auto"),
+                    },
+                }
+            ],
         });
 
         const down = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             disableSelected: true,
             cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
             width: 12,
@@ -61,26 +67,29 @@ export class LongColorChooserTrigger extends Trigger {
         });
 
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.colorContainer,
-                left: 2,
-                right: 2,
-                top: 2,
-                bottom: 2,
-            }, {
-                el: down,
-                right: 3,
-                bottom: 3,
-            }],
+            items: [
+                {
+                    el: this.colorContainer,
+                    left: 2,
+                    right: 2,
+                    top: 2,
+                    bottom: 2,
+                },
+                {
+                    el: down,
+                    right: 3,
+                    bottom: 3,
+                }
+            ],
         });
         if (this.options.value) {
             this.setValue(this.options.value);
         }
     }
 
-    setValue (color) {
+    setValue(color) {
         super.setValue(...arguments);
         if (color === "") {
             this.colorContainer.element.css("background-color", "");

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

@@ -16,7 +16,7 @@ export class ColorPickerButton extends BasicButton {
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-color-picker-button bi-background bi-border-top bi-border-left`,
         });
@@ -34,21 +34,25 @@ export class ColorPickerButton extends BasicButton {
                 this.element.css("background-color", o.value);
             }
             const name = this.getName();
-            this.element.hover(() => {
-                this._createMask();
-                if (this.isEnabled()) {
-                    Maskers.show(name);
-                }
-            }, () => {
-                if (!this.isSelected()) {
-                    Maskers.hide(name);
+            this.element.hover(
+                () => {
+                    this._createMask();
+                    if (this.isEnabled()) {
+                        Maskers.show(name);
+                    }
+                },
+                () => {
+                    if (!this.isSelected()) {
+                        Maskers.hide(name);
+                    }
                 }
-            });
+            );
         }
     }
 
     _createMask() {
-        const o = this.options, name = this.getName();
+        const o = this.options,
+            name = this.getName();
         if (this.isEnabled() && !Maskers.has(name)) {
             const w = Maskers.make(name, this, {
                 offset: {

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

@@ -1,5 +1,5 @@
-import { shortcut } from "@/core";
-import { BasicButton } from "@/base";
+import { HTapeLayout, shortcut } from "@/core";
+import { IconLabel, Label, BasicButton } from "@/base";
 
 /**
  * @author windy
@@ -14,17 +14,17 @@ export class ColorChooserShowButton extends BasicButton {
 
     props = {
         baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius",
-    }
+    };
 
     render() {
         const o = this.options;
-        
+
         return {
-            type: "bi.htape",
+            type: HTapeLayout.xtype,
             items: [
                 {
                     el: {
-                        type: "bi.icon_label",
+                        type: IconLabel.xtype,
                         ref: _ref => {
                             this.icon = _ref;
                         },
@@ -33,8 +33,9 @@ export class ColorChooserShowButton extends BasicButton {
                     },
                     hgap: 20,
                     width: 16,
-                }, {
-                    type: "bi.label",
+                },
+                {
+                    type: Label.xtype,
                     textAlign: "left",
                     text: o.text,
                 }

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

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

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

@@ -1,5 +1,6 @@
-import { shortcut, Widget, extend, each } from "@/core";
 import { ButtonGroup } from "@/base";
+import { GridLayout, Layout, shortcut, Widget, extend, each } from "@/core";
+import { ColorPickerButton } from "./button";
 
 /**
  * @author windy
@@ -15,7 +16,7 @@ export class HexColorPicker extends Widget {
     props = {
         baseCls: "bi-hex-color-picker",
         items: null,
-    }
+    };
 
     _items = [
         [
@@ -163,17 +164,17 @@ export class HexColorPicker extends Widget {
                 value: "#B30072",
             }
         ]
-    ]
+    ];
 
     render() {
         const o = this.options;
 
         return {
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             items: this._digest(o.items || this._items),
             layouts: [
                 {
-                    type: "bi.grid",
+                    type: GridLayout.xtype,
                 }
             ],
             value: o.value,
@@ -197,13 +198,18 @@ export class HexColorPicker extends Widget {
         each(items, (idx, row) => {
             const bRow = [];
             each(row, (idx, item) => {
-                bRow.push(extend({
-                    type: "bi.color_picker_button",
-                    once: false,
-                    cls: o.space ? "bi-border-right" : "",
-                }, item));
+                bRow.push(
+                    extend(
+                        {
+                            type: ColorPickerButton.xtype,
+                            once: false,
+                            cls: o.space ? "bi-border-right" : "",
+                        },
+                        item
+                    )
+                );
                 if (o.space && idx < row.length - 1) {
-                    bRow.push({ type: "bi.layout" });
+                    bRow.push({ type: Layout.xtype });
                 }
             });
             blocks.push(bRow);

src/case/colorchooser/colorpicker/colorpicker.js

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

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

@@ -1,8 +1,27 @@
-import { shortcut, Widget, createItems, map, isNumeric, range, extend, isEmptyString, isNull, DOM } from "@/core";
-import { ColorPickerEditor } from "./editor.colorpicker";
+import { Label } from "@/base";
+import {
+    AbsoluteLayout,
+    VerticalLayout,
+    VerticalAdaptLayout,
+    Layout,
+    shortcut,
+    Widget,
+    createItems,
+    map,
+    isNumeric,
+    range,
+    extend,
+    isEmptyString,
+    isNull,
+    DOM
+} from "@/core";
 import { ColorChooserShowButton } from "./button";
+import { ColorPickerEditor } from "./editor.colorpicker";
+import { SmallTextEditor } from "@/widget/editor/editor.text.small.js";
 
-const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
+const RGB_WIDTH = 32,
+    HEX_WIDTH = 70,
+    HEX_PREFIX_POSITION = 1;
 
 /**
  * 简单选色控件
@@ -14,18 +33,18 @@ const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
 @shortcut()
 export class HexColorPickerEditor extends Widget {
     static xtype = "bi.hex_color_picker_editor";
-    
+
     static EVENT_CHANGE = "EVENT_CHANGE";
-    
+
     props = {
         baseCls: "bi-color-picker-editor",
         height: 30,
-    }
+    };
 
     render() {
         this.storeValue = {};
         const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
-            type: "bi.label",
+            type: Label.xtype,
             cls: "color-picker-editor-label",
             height: 20,
         });
@@ -33,7 +52,7 @@ export class HexColorPickerEditor extends Widget {
         const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
         const Ws = map(range(0, 3), () => {
             return {
-                type: "bi.small_text_editor",
+                type: SmallTextEditor.xtype,
                 cls: "color-picker-editor-input bi-border-radius",
                 validationChecker: checker,
                 errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
@@ -46,7 +65,11 @@ export class HexColorPickerEditor extends Widget {
                         eventName: BI.TextEditor.EVENT_CHANGE,
                         action: () => {
                             this._checkEditors();
-                            if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
+                            if (
+                                checker(this.storeValue.r) &&
+                                checker(this.storeValue.g) &&
+                                checker(this.storeValue.b)
+                            ) {
                                 this.colorShow.element.css("background-color", this.getValue());
                                 this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                             }
@@ -57,20 +80,20 @@ export class HexColorPickerEditor extends Widget {
         });
 
         return {
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             items: [
                 {
                     el: {
-                        type: "bi.vertical",
+                        type: VerticalLayout.xtype,
                         tgap: 10,
                         items: [
                             {
-                                type: "bi.vertical_adapt",
+                                type: VerticalAdaptLayout.xtype,
                                 columnSize: ["fill", "fill"],
                                 height: 24,
                                 items: [
                                     {
-                                        type: "bi.color_picker_show_button",
+                                        type: ColorChooserShowButton.xtype,
                                         cls: "trans-color-icon",
                                         height: 22,
                                         title: BI.i18nText("BI-Transparent_Color"),
@@ -87,9 +110,10 @@ export class HexColorPickerEditor extends Widget {
                                         ref: _ref => {
                                             this.transparent = _ref;
                                         },
-                                    }, {
+                                    },
+                                    {
                                         el: {
-                                            type: "bi.color_picker_show_button",
+                                            type: ColorChooserShowButton.xtype,
                                             cls: "auto-color-icon",
                                             height: 22,
                                             title: BI.i18nText("BI-Basic_Auto"),
@@ -110,16 +134,17 @@ export class HexColorPickerEditor extends Widget {
                                         lgap: 10,
                                     }
                                 ],
-                            }, {
+                            },
+                            {
                                 el: {
-                                    type: "bi.vertical_adapt",
+                                    type: VerticalAdaptLayout.xtype,
                                     columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
 
                                     rgap: 5,
                                     items: [
                                         {
                                             el: {
-                                                type: "bi.layout",
+                                                type: Layout.xtype,
                                                 cls: "color-picker-editor-display bi-card bi-border",
                                                 height: 22,
                                                 width: 22,
@@ -128,12 +153,14 @@ export class HexColorPickerEditor extends Widget {
                                                 },
                                             },
                                             width: 18,
-                                        }, {
-                                            type: "bi.label",
+                                        },
+                                        {
+                                            type: Label.xtype,
                                             text: "#",
                                             width: 10,
-                                        }, {
-                                            type: "bi.small_text_editor",
+                                        },
+                                        {
+                                            type: SmallTextEditor.xtype,
                                             ref: _ref => {
                                                 this.hexEditor = _ref;
                                             },
@@ -148,28 +175,41 @@ export class HexColorPickerEditor extends Widget {
                                                     eventName: "EVENT_CHANGE",
                                                     action: () => {
                                                         this._checkHexEditor();
-                                                        if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
-                                                            this.colorShow.element.css("background-color", this.getValue());
+                                                        if (
+                                                            checker(this.storeValue.r) &&
+                                                            checker(this.storeValue.g) &&
+                                                            checker(this.storeValue.b)
+                                                        ) {
+                                                            this.colorShow.element.css(
+                                                                "background-color",
+                                                                this.getValue()
+                                                            );
                                                             this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                                                         }
                                                     },
                                                 }
                                             ],
-                                        }, RGB[0], {
+                                        },
+                                        RGB[0],
+                                        {
                                             el: extend(Ws[0], {
                                                 ref: _ref => {
                                                     this.R = _ref;
                                                 },
                                             }),
                                             width: RGB_WIDTH,
-                                        }, RGB[1], {
+                                        },
+                                        RGB[1],
+                                        {
                                             el: extend(Ws[1], {
                                                 ref: _ref => {
                                                     this.G = _ref;
                                                 },
                                             }),
                                             width: RGB_WIDTH,
-                                        }, RGB[2], {
+                                        },
+                                        RGB[2],
+                                        {
                                             el: extend(Ws[2], {
                                                 ref: _ref => {
                                                     this.B = _ref;
@@ -235,11 +275,20 @@ export class HexColorPickerEditor extends Widget {
 
     _showPreColor(color) {
         if (color === "") {
-            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background");
+            this.colorShow.element
+                .css("background-color", "")
+                .removeClass("trans-color-background")
+                .addClass("auto-color-square-normal-background");
         } else if (color === "transparent") {
-            this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background");
+            this.colorShow.element
+                .css("background-color", "")
+                .removeClass("auto-color-square-normal-background")
+                .addClass("trans-color-background");
         } else {
-            this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background");
+            this.colorShow.element
+                .css({ "background-color": color })
+                .removeClass("auto-color-square-normal-background")
+                .removeClass("trans-color-background");
         }
     }
 
@@ -266,7 +315,7 @@ export class HexColorPickerEditor extends Widget {
                 g: "",
                 b: "",
             };
-            
+
             return;
         }
         if (!color) {
@@ -293,11 +342,13 @@ export class HexColorPickerEditor extends Widget {
         if (this._isEmptyRGB() && this.transparent.isSelected()) {
             return "transparent";
         }
-        
-        return DOM.rgb2hex(DOM.json2rgb({
-            r: this.storeValue.r,
-            g: this.storeValue.g,
-            b: this.storeValue.b,
-        }));
+
+        return DOM.rgb2hex(
+            DOM.json2rgb({
+                r: this.storeValue.r,
+                g: this.storeValue.g,
+                b: this.storeValue.b,
+            })
+        );
     }
 }

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

@@ -1,8 +1,27 @@
-import { shortcut, Widget, extend, isEmptyObject, createItems, isNull, isNumeric, map, isEmptyString, range, DOM } from "@/core";
+import { Label } from "@/base";
+import {
+    VerticalLayout,
+    VerticalAdaptLayout,
+    Layout,
+    shortcut,
+    Widget,
+    extend,
+    isEmptyObject,
+    createItems,
+    isNull,
+    isNumeric,
+    map,
+    isEmptyString,
+    range,
+    DOM
+} from "@/core";
 import { SimpleColorPickerEditor } from "./editor.colorpicker.simple";
 import { ColorPickerEditor } from "./editor.colorpicker";
+import { SmallTextEditor } from "@/widget/editor/editor.text.small.js";
 
-const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
+const RGB_WIDTH = 32,
+    HEX_WIDTH = 70,
+    HEX_PREFIX_POSITION = 1;
 
 /**
  * @author windy
@@ -18,19 +37,19 @@ export class SimpleHexColorPickerEditor extends Widget {
     props = {
         baseCls: "bi-color-picker-editor",
         height: 36,
-    }
+    };
 
-    render () {
+    render() {
         const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
-            type: "bi.label",
+            type: Label.xtype,
             cls: "color-picker-editor-label",
             height: 20,
         });
 
-        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
         const Ws = map(range(0, 3), () => {
             return {
-                type: "bi.small_text_editor",
+                type: SmallTextEditor.xtype,
                 cls: "color-picker-editor-input bi-border-radius",
                 validationChecker: checker,
                 errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
@@ -48,39 +67,41 @@ export class SimpleHexColorPickerEditor extends Widget {
                                 this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE);
                             }
                         },
-                    }
+                    },
                 ],
             };
         });
 
         return {
-            type: "bi.vertical",
+            type: VerticalLayout.xtype,
             tgap: 10,
             items: [
                 {
                     el: {
-                        type: "bi.vertical_adapt",
+                        type: VerticalAdaptLayout.xtype,
                         rgap: 5,
                         columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
                         items: [
                             {
                                 el: {
-                                    type: "bi.layout",
+                                    type: Layout.xtype,
                                     cls: "color-picker-editor-display bi-card bi-border",
                                     height: 22,
                                     width: 22,
-                                    ref: _ref => {
+                                    ref: (_ref) => {
                                         this.colorShow = _ref;
                                     },
                                 },
                                 width: 18,
-                            }, {
-                                type: "bi.label",
+                            },
+                            {
+                                type: Label.xtype,
                                 text: "#",
                                 width: 10,
-                            }, {
-                                type: "bi.small_text_editor",
-                                ref: _ref => {
+                            },
+                            {
+                                type: SmallTextEditor.xtype,
+                                ref: (_ref) => {
                                     this.hexEditor = _ref;
                                 },
                                 cls: "color-picker-editor-input bi-border-radius",
@@ -94,49 +115,58 @@ export class SimpleHexColorPickerEditor extends Widget {
                                         eventName: "EVENT_CHANGE",
                                         action: () => {
                                             this._checkHexEditor();
-                                            if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
+                                            if (
+                                                checker(this.storeValue.r) &&
+                                                checker(this.storeValue.g) &&
+                                                checker(this.storeValue.b)
+                                            ) {
                                                 this.colorShow.element.css("background-color", this.getValue());
                                                 this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
                                             }
                                         },
-                                    }
+                                    },
                                 ],
-                            }, RGB[0], {
+                            },
+                            RGB[0],
+                            {
                                 el: extend(Ws[0], {
-                                    ref: _ref => {
+                                    ref: (_ref) => {
                                         this.R = _ref;
                                     },
                                 }),
                                 width: RGB_WIDTH,
-                            }, RGB[1], {
+                            },
+                            RGB[1],
+                            {
                                 el: extend(Ws[1], {
-                                    ref: _ref => {
+                                    ref: (_ref) => {
                                         this.G = _ref;
                                     },
                                 }),
                                 width: RGB_WIDTH,
-                            }, RGB[2], {
+                            },
+                            RGB[2],
+                            {
                                 el: extend(Ws[2], {
-                                    ref: _ref => {
+                                    ref: (_ref) => {
                                         this.B = _ref;
                                     },
                                 }),
                                 rgap: -5,
                                 width: RGB_WIDTH,
-                            }
+                            },
                         ],
                     },
-                }
+                },
             ],
-
         };
     }
 
-    _hexChecker (v) {
+    _hexChecker(v) {
         return /^[0-9a-fA-F]{6}$/.test(v);
     }
 
-    _checkEditors () {
+    _checkEditors() {
         if (isEmptyString(this.R.getValue())) {
             this.R.setValue(0);
         }
@@ -149,7 +179,7 @@ export class SimpleHexColorPickerEditor extends Widget {
         this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION));
     }
 
-    _checkHexEditor () {
+    _checkHexEditor() {
         if (isEmptyString(this.hexEditor.getValue())) {
             this.hexEditor.setValue("000000");
         }
@@ -164,7 +194,7 @@ export class SimpleHexColorPickerEditor extends Widget {
         this.B.setValue(this.storeValue.b);
     }
 
-    setValue (color) {
+    setValue(color) {
         this.colorShow.element.css({ "background-color": color });
         const json = DOM.rgb2json(DOM.hex2rgb(color));
         this.R.setValue(isNull(json.r) ? "" : json.r);
@@ -173,11 +203,13 @@ export class SimpleHexColorPickerEditor extends Widget {
         this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION));
     }
 
-    getValue () {
-        return DOM.rgb2hex(DOM.json2rgb({
-            r: this.R.getValue(),
-            g: this.G.getValue(),
-            b: this.B.getValue(),
-        }));
+    getValue() {
+        return DOM.rgb2hex(
+            DOM.json2rgb({
+                r: this.R.getValue(),
+                g: this.G.getValue(),
+                b: this.B.getValue(),
+            })
+        );
     }
 }

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

@@ -1,5 +1,21 @@
-import { shortcut, Widget, extend, createWidgets, createItems, createWidget, each, isEmptyString, isNumeric, isNull, DOM } from "@/core";
-import { IconButton } from "@/base";
+import {
+    Layout,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    shortcut,
+    Widget,
+    extend,
+    createWidgets,
+    createItems,
+    createWidget,
+    each,
+    isEmptyString,
+    isNumeric,
+    isNull,
+    DOM
+} from "@/core";
+import { Label, IconButton } from "@/base";
+import { SmallTextEditor } from "@/widget/editor/editor.text.small.js";
 
 const RGB_WIDTH = 32;
 
@@ -16,7 +32,7 @@ export class ColorPickerEditor extends Widget {
 
     static EVENT_CHANGE = "EVENT_CHANGE";
 
-    _defaultConfig () {
+    _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-color-picker-editor",
             // width: 200,
@@ -24,25 +40,27 @@ export class ColorPickerEditor extends Widget {
         });
     }
 
-    _init () {
+    _init() {
         super._init(...arguments);
         this.storeValue = {};
         this.colorShow = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "color-picker-editor-display bi-card bi-border",
             height: 16,
             width: 16,
         });
-        const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
-            type: "bi.label",
-            cls: "color-picker-editor-label",
-            width: 20,
-            height: 20,
-        }));
+        const RGB = createWidgets(
+            createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
+                type: Label.xtype,
+                cls: "color-picker-editor-label",
+                width: 20,
+                height: 20,
+            })
+        );
 
-        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
         const Ws = createWidgets([{}, {}, {}], {
-            type: "bi.small_text_editor",
+            type: SmallTextEditor.xtype,
             cls: "color-picker-editor-input bi-border-radius",
             validationChecker: checker,
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
@@ -65,7 +83,7 @@ export class ColorPickerEditor extends Widget {
         this.B = Ws[2];
 
         this.none = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             cls: "auto-color-icon",
             width: 16,
             height: 16,
@@ -76,11 +94,11 @@ export class ColorPickerEditor extends Widget {
         this.none.on(IconButton.EVENT_CHANGE, () => {
             const value = this.getValue();
             this.setValue("");
-            (value !== "") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
+            value !== "" && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
         });
 
         this.transparent = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             cls: "trans-color-icon",
             width: 16,
             height: 16,
@@ -91,59 +109,67 @@ export class ColorPickerEditor extends Widget {
         this.transparent.on(IconButton.EVENT_CHANGE, () => {
             const value = this.getValue();
             this.setValue("transparent");
-            (value !== "transparent") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
+            value !== "transparent" && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
         });
 
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
                     el: {
-                        type: "bi.vertical_adapt",
+                        type: VerticalAdaptLayout.xtype,
                         items: [
                             {
                                 el: this.colorShow,
                                 width: 16,
-                            }, {
+                            },
+                            {
                                 el: RGB[0],
                                 width: 20,
-                            }, {
+                            },
+                            {
                                 el: this.R,
                                 width: RGB_WIDTH,
-                            }, {
+                            },
+                            {
                                 el: RGB[1],
                                 width: 20,
-                            }, {
+                            },
+                            {
                                 el: this.G,
                                 width: RGB_WIDTH,
-                            }, {
+                            },
+                            {
                                 el: RGB[2],
                                 width: 20,
-                            }, {
+                            },
+                            {
                                 el: this.B,
                                 width: RGB_WIDTH,
-                            }, {
+                            },
+                            {
                                 el: this.transparent,
                                 width: 16,
                                 lgap: 5,
-                            }, {
+                            },
+                            {
                                 el: this.none,
                                 width: 16,
                                 lgap: 5,
-                            }
+                            },
                         ],
                     },
                     left: 10,
                     right: 10,
                     top: 0,
                     bottom: 0,
-                }
+                },
             ],
         });
     }
 
-    _checkEditors () {
+    _checkEditors() {
         if (isEmptyString(this.R.getValue())) {
             this.R.setValue(0);
         }
@@ -160,21 +186,30 @@ export class ColorPickerEditor extends Widget {
         };
     }
 
-    _isEmptyRGB () {
+    _isEmptyRGB() {
         return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b);
     }
 
-    _showPreColor (color) {
+    _showPreColor(color) {
         if (color === "") {
-            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background");
+            this.colorShow.element
+                .css("background-color", "")
+                .removeClass("trans-color-background")
+                .addClass("auto-color-normal-background");
         } else if (color === "transparent") {
-            this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background");
+            this.colorShow.element
+                .css("background-color", "")
+                .removeClass("auto-color-normal-background")
+                .addClass("trans-color-background");
         } else {
-            this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background");
+            this.colorShow.element
+                .css({ "background-color": color })
+                .removeClass("auto-color-normal-background")
+                .removeClass("trans-color-background");
         }
     }
 
-    _setEnable (enable) {
+    _setEnable(enable) {
         super._setEnable(...arguments);
         if (enable === true) {
             this.element.removeClass("base-disabled disabled");
@@ -183,7 +218,7 @@ export class ColorPickerEditor extends Widget {
         }
     }
 
-    setValue (color) {
+    setValue(color) {
         if (color === "transparent") {
             this.transparent.setSelected(true);
             this.none.setSelected(false);
@@ -196,7 +231,7 @@ export class ColorPickerEditor extends Widget {
                 g: "",
                 b: "",
             };
-            
+
             return;
         }
         if (!color) {
@@ -222,11 +257,13 @@ export class ColorPickerEditor extends Widget {
         if (this._isEmptyRGB() && this.transparent.isSelected()) {
             return "transparent";
         }
-        
-        return DOM.rgb2hex(DOM.json2rgb({
-            r: this.storeValue.r,
-            g: this.storeValue.g,
-            b: this.storeValue.b,
-        }));
+
+        return DOM.rgb2hex(
+            DOM.json2rgb({
+                r: this.storeValue.r,
+                g: this.storeValue.g,
+                b: this.storeValue.b,
+            })
+        );
     }
 }

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

@@ -1,4 +1,20 @@
-import { shortcut, Widget, extend, isNull, createWidget, isNumeric, createItems, createWidgets, each, isEmptyString, DOM } from "@/core";
+import {
+    Layout,
+    VerticalAdaptLayout,
+    shortcut,
+    Widget,
+    extend,
+    isNull,
+    createWidget,
+    isNumeric,
+    createItems,
+    createWidgets,
+    each,
+    isEmptyString,
+    DOM
+} from "@/core";
+import { Label } from "@/base";
+import { SmallTextEditor } from "@/widget/editor/editor.text.small.js";
 
 const RGB_WIDTH = 32;
 
@@ -26,21 +42,23 @@ export class SimpleColorPickerEditor extends Widget {
     _init() {
         super._init(...arguments);
         this.colorShow = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "color-picker-editor-display bi-card bi-border",
             height: 16,
             width: 16,
         });
-        const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
-            type: "bi.label",
-            cls: "color-picker-editor-label",
-            width: 20,
-            height: 20,
-        }));
+        const RGB = createWidgets(
+            createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
+                type: Label.xtype,
+                cls: "color-picker-editor-label",
+                width: 20,
+                height: 20,
+            })
+        );
 
-        const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
+        const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
         const Ws = createWidgets([{}, {}, {}], {
-            type: "bi.small_text_editor",
+            type: SmallTextEditor.xtype,
             cls: "color-picker-editor-input bi-border-radius",
             validationChecker: checker,
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
@@ -63,7 +81,7 @@ export class SimpleColorPickerEditor extends Widget {
         this.B = Ws[2];
 
         createWidget({
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             element: this,
             items: [
                 {
@@ -71,25 +89,31 @@ export class SimpleColorPickerEditor extends Widget {
                     width: 16,
                     lgap: 20,
                     rgap: 15,
-                }, {
+                },
+                {
                     el: RGB[0],
                     width: 20,
-                }, {
+                },
+                {
                     el: this.R,
                     width: RGB_WIDTH,
-                }, {
+                },
+                {
                     el: RGB[1],
                     width: 20,
-                }, {
+                },
+                {
                     el: this.G,
                     width: RGB_WIDTH,
-                }, {
+                },
+                {
                     el: RGB[2],
                     width: 20,
-                }, {
+                },
+                {
                     el: this.B,
                     width: RGB_WIDTH,
-                }
+                },
             ],
         });
     }
@@ -115,10 +139,12 @@ export class SimpleColorPickerEditor extends Widget {
     }
 
     getValue() {
-        return DOM.rgb2hex(DOM.json2rgb({
-            r: this.R.getValue(),
-            g: this.G.getValue(),
-            b: this.B.getValue(),
-        }));
+        return DOM.rgb2hex(
+            DOM.json2rgb({
+                r: this.R.getValue(),
+                g: this.G.getValue(),
+                b: this.B.getValue(),
+            })
+        );
     }
 }

src/case/colorchooser/colorpicker/index.js

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

src/case/colorchooser/farbtastic/farbtastic.js

@@ -1,7 +1,9 @@
-import { shortcut, isKey, DOM } from "@/core";
+import { AbsoluteLayout, Layout, shortcut, isKey, DOM } from "@/core";
 import { BasicButton } from "@/base";
 
-const RADIUS = 84, SQUARE = 100, WIDTH = 194;
+const RADIUS = 84,
+    SQUARE = 100,
+    WIDTH = 194;
 
 @shortcut()
 export class Farbtastic extends BasicButton {
@@ -15,72 +17,78 @@ export class Farbtastic extends BasicButton {
         height: 195,
         stopPropagation: true,
         value: "#000000",
-    }
+    };
 
     render() {
         this._defaultState();
-        
+
         return {
-            type: "bi.absolute",
-            items: [{
-                el: {
-                    type: "bi.layout",
-                    cls: "",
-                    ref: _ref => {
-                        this.colorWrapper = _ref;
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: {
+                        type: Layout.xtype,
+                        cls: "",
+                        ref: _ref => {
+                            this.colorWrapper = _ref;
+                        },
                     },
+                    top: 47,
+                    left: 47,
+                    width: 101,
+                    height: 101,
                 },
-                top: 47,
-                left: 47,
-                width: 101,
-                height: 101,
-            }, {
-                el: {
-                    type: "bi.layout",
-                    cls: "wheel",
-                    ref: _ref => {
-                        this.wheel = _ref;
+                {
+                    el: {
+                        type: Layout.xtype,
+                        cls: "wheel",
+                        ref: _ref => {
+                            this.wheel = _ref;
+                        },
                     },
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
                 },
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }, {
-                el: {
-                    type: "bi.layout",
-                    cls: "overlay",
-                    ref: _ref => {
-                        this.overlay = _ref;
+                {
+                    el: {
+                        type: Layout.xtype,
+                        cls: "overlay",
+                        ref: _ref => {
+                            this.overlay = _ref;
+                        },
                     },
+                    top: 47,
+                    left: 47,
+                    width: 101,
+                    height: 101,
                 },
-                top: 47,
-                left: 47,
-                width: 101,
-                height: 101,
-            }, {
-                el: {
-                    type: "bi.layout",
-                    cls: "marker",
-                    ref: _ref => {
-                        this.hMarker = _ref;
+                {
+                    el: {
+                        type: Layout.xtype,
+                        cls: "marker",
+                        ref: _ref => {
+                            this.hMarker = _ref;
+                        },
+                        scrollable: false,
+                        width: 17,
+                        height: 17,
                     },
-                    scrollable: false,
-                    width: 17,
-                    height: 17,
                 },
-            }, {
-                el: {
-                    type: "bi.layout",
-                    cls: "marker",
-                    ref: _ref => {
-                        this.slMarker = _ref;
+                {
+                    el: {
+                        type: Layout.xtype,
+                        cls: "marker",
+                        ref: _ref => {
+                            this.slMarker = _ref;
+                        },
+                        scrollable: false,
+                        width: 17,
+                        height: 17,
                     },
-                    scrollable: false,
-                    width: 17,
-                    height: 17,
-                },
-            }],
+                }
+            ],
         };
     }
 
@@ -97,13 +105,17 @@ export class Farbtastic extends BasicButton {
 
     _unpack(color) {
         if (color.length === 7) {
-            return [parseInt("0x" + color.substring(1, 3)) / 255,
-                parseInt("0x" + color.substring(3, 5)) / 255,
-                parseInt("0x" + color.substring(5, 7)) / 255];
+            return [
+                parseInt(`0x${color.substring(1, 3)}`) / 255,
+                parseInt(`0x${color.substring(3, 5)}`) / 255,
+                parseInt(`0x${color.substring(5, 7)}`) / 255
+            ];
         } else if (color.length === 4) {
-            return [parseInt("0x" + color.substring(1, 2)) / 15,
-                parseInt("0x" + color.substring(2, 3)) / 15,
-                parseInt("0x" + color.substring(3, 4)) / 15];
+            return [
+                parseInt(`0x${color.substring(1, 2)}`) / 15,
+                parseInt(`0x${color.substring(2, 3)}`) / 15,
+                parseInt(`0x${color.substring(3, 4)}`) / 15
+            ];
         }
     }
 
@@ -111,10 +123,16 @@ export class Farbtastic extends BasicButton {
         const r = Math.round(rgb[0] * 255);
         const g = Math.round(rgb[1] * 255);
         const b = Math.round(rgb[2] * 255);
-        
-        return "#" + (r < 16 ? "0" : "") + r.toString(16) +
-        (g < 16 ? "0" : "") + g.toString(16) +
-        (b < 16 ? "0" : "") + b.toString(16);
+
+        return (
+            `#${
+                r < 16 ? "0" : ""
+            }${r.toString(16)
+            }${g < 16 ? "0" : ""
+            }${g.toString(16)
+            }${b < 16 ? "0" : ""
+            }${b.toString(16)}`
+        );
     }
 
     _setColor(color) {
@@ -132,7 +150,7 @@ export class Farbtastic extends BasicButton {
         this.rgb = this._HSLToRGB(hsl);
         this.value = this._pack(this.rgb);
         this._updateDisplay();
-        
+
         return this;
     }
 
@@ -152,8 +170,8 @@ export class Farbtastic extends BasicButton {
         });
 
         this.slMarker.element.css({
-            left: `${Math.round(SQUARE * (.5 - this.hsl[1]) + WIDTH / 2)}px`,
-            top: `${Math.round(SQUARE * (.5 - this.hsl[2]) + WIDTH / 2)}px`,
+            left: `${Math.round(SQUARE * (0.5 - this.hsl[1]) + WIDTH / 2)}px`,
+            top: `${Math.round(SQUARE * (0.5 - this.hsl[2]) + WIDTH / 2)}px`,
         });
 
         // Saturation/Luminance gradient
@@ -168,7 +186,7 @@ export class Farbtastic extends BasicButton {
             r.x += tmp.x;
             r.y += tmp.y;
         }
-        
+
         return r;
     }
 
@@ -218,7 +236,7 @@ export class Farbtastic extends BasicButton {
             x = (event.pageX || 0) - pos.x;
             y = (event.pageY || 0) - pos.y;
         }
-        
+
         // Subtract distance to middle
         return { x: x - WIDTH / 2, y: y - WIDTH / 2 };
     }
@@ -232,8 +250,8 @@ export class Farbtastic extends BasicButton {
             if (hue < 0) hue += 1;
             this._setHSL([hue, this.hsl[1], this.hsl[2]]);
         } else {
-            const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + .5));
-            const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + .5));
+            const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + 0.5));
+            const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + 0.5));
             this._setHSL([this.hsl[0], sat, lum]);
         }
         this.fireEvent(Farbtastic.EVENT_CHANGE, this.getValue(), this);
@@ -245,7 +263,7 @@ export class Farbtastic extends BasicButton {
 
         // Process
         this._doMouseMove(event);
-        
+
         return false;
     }
 

src/case/colorchooser/index.js

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

src/case/combo/bubblecombo/combo.bubble.js

@@ -1,11 +1,5 @@
-import {
-    shortcut,
-    Widget,
-    extend,
-    emptyFn,
-    createWidget,
-    isFunction
-} from "@/core";
+import { BubblePopupView } from "./popup.bubble";
+import { shortcut, Widget, extend, emptyFn, createWidget, isFunction } from "@/core";
 import { Combo } from "@/base";
 
 @shortcut()
@@ -76,14 +70,12 @@ export class BubbleCombo extends Widget {
             popup: () =>
                 extend(
                     {
-                        type: "bi.bubble_popup_view",
+                        type: BubblePopupView.xtype,
                         animation: "bi-zoom-big",
                         animationDuring: 200,
                         primary: o.primary,
                     },
-                    isFunction(this.options.popup)
-                        ? this.options.popup()
-                        : this.options.popup
+                    isFunction(this.options.popup) ? this.options.popup() : this.options.popup
                 ),
         });
         this.combo.on(Combo.EVENT_TRIGGER_CHANGE, (...args) => {
@@ -135,5 +127,3 @@ export class BubbleCombo extends Widget {
         this.combo.adjustHeight();
     }
 }
-
-

src/case/combo/bubblecombo/popup.bubble.js

@@ -4,14 +4,14 @@ import { Label } from "@/base/single/label/label";
 
 @shortcut()
 export class BubblePopupView extends PopupView {
-    static xtype = "bi.bubble_popup_view";
-
+    static xtype = "bi.text_bubble_bar_popup_view";
+    
     static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
     static EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON";
 
     _defaultConfig() {
         const config = super._defaultConfig(...arguments);
-        
+
         return extend(config, {
             baseCls: `${config.baseCls} bi-text-bubble-bar-popup-view`,
             text: "",
@@ -20,13 +20,13 @@ export class BubblePopupView extends PopupView {
 
     _createContent() {
         const o = this.options;
-        
+
         return {
             type: Label.xtype,
             text: o.text,
             whiteSpace: "normal",
             textAlign: "left",
-            ref: _ref => {
+            ref: (_ref) => {
                 this.text = _ref;
             },
         };

src/case/combo/editoriconcheckcombo/combo.editiconcheck.js

@@ -1,14 +1,7 @@
-import {
-    shortcut,
-    Widget,
-    extend,
-    emptyFn,
-    createWidget,
-    Controller
-} from "@/core";
+import { TextValueCheckComboPopup } from "../textvaluecheckcombo/popup.textvaluecheck";
+import { shortcut, Widget, extend, emptyFn, createWidget, Controller } from "@/core";
 import { ButtonGroup, Combo } from "@/base";
 import { EditorTrigger } from "../../trigger";
-import { TextValueCheckComboPopup } from "../textvaluecheckcombo/popup.textvaluecheck";
 
 @shortcut()
 export class EditorIconCheckCombo extends Widget {
@@ -66,7 +59,7 @@ export class EditorIconCheckCombo extends Widget {
         });
 
         this.popup = createWidget({
-            type: "bi.text_value_check_combo_popup",
+            type: TextValueCheckComboPopup.xtype,
             chooseType: o.chooseType,
             items: o.items,
             value: o.value,
@@ -105,4 +98,4 @@ export class EditorIconCheckCombo extends Widget {
         this.options.items = items;
         this.editorIconCheckCombo.populate(items);
     }
-}
+}

src/case/combo/iconcombo/combo.icon.js

@@ -1,13 +1,5 @@
-import {
-    shortcut,
-    Widget,
-    extend,
-    isFunction,
-    createWidget,
-    Controller,
-    isNull,
-    isArray
-} from "@/core";
+import { IconComboTrigger } from "./trigger.iconcombo";
+import { shortcut, Widget, extend, isFunction, createWidget, Controller, isNull, isArray } from "@/core";
 import { ButtonGroup, Combo } from "@/base";
 import { IconComboPopup } from "./popup.iconcombo";
 
@@ -52,7 +44,7 @@ export class IconCombo extends Widget {
             : o.items;
         super._init(...arguments);
         this.trigger = createWidget(o.el, {
-            type: "bi.icon_combo_trigger",
+            type: IconComboTrigger.xtype,
             iconCls: o.iconCls,
             title: o.title,
             items: o.items,
@@ -113,7 +105,7 @@ export class IconCombo extends Widget {
 
     getValue() {
         const value = this.popup.getValue();
-        
+
         return isNull(value) ? [] : isArray(value) ? value : [value];
     }
 

src/case/combo/iconcombo/popup.iconcombo.js

@@ -1,12 +1,4 @@
-import {
-    shortcut,
-    extend,
-    createWidget,
-    createItems,
-    Controller,
-    Events,
-    VerticalLayout
-} from "@/core";
+import { shortcut, extend, createWidget, createItems, Controller, Events, VerticalLayout } from "@/core";
 import { Pane, ButtonGroup } from "@/base";
 import { SingleSelectIconTextItem } from "../../button";
 

src/case/combo/iconcombo/trigger.iconcombo.js

@@ -1,13 +1,4 @@
-import {
-    shortcut,
-    extend,
-    isKey,
-    createWidget,
-    isNotEmptyString,
-    AbsoluteLayout,
-    isArray,
-    any
-} from "@/core";
+import { shortcut, extend, isKey, createWidget, isNotEmptyString, AbsoluteLayout, isArray, any } from "@/core";
 import { Trigger, IconButton } from "@/base";
 import { IconChangeButton } from "../../button";
 
@@ -83,11 +74,11 @@ export class IconComboTrigger extends Trigger {
         any(items, (i, item) => {
             if (v === item.value) {
                 iconCls = item.iconCls;
-                
+
                 return true;
             }
         });
-        
+
         return iconCls;
     }
 

src/case/combo/icontextvaluecombo/combo.icontextvalue.js

@@ -1,3 +1,4 @@
+import { IconTextValueComboPopup } from "./popup.icontextvalue";
 import {
     shortcut,
     Widget,
@@ -14,7 +15,6 @@ import {
     find,
     contains
 } from "@/core";
-import { IconTextValueComboPopup } from "./popup.icontextvalue";
 import { SelectIconTextTrigger } from "../../trigger";
 import { Combo } from "@/base";
 
@@ -26,11 +26,7 @@ export class IconTextValueCombo extends Widget {
 
     _defaultConfig(config) {
         return extend(super._defaultConfig(...arguments), {
-            baseCls:
-                `bi-icon-text-value-combo ${
-                    config.simple
-                        ? "bi-border-bottom"
-                        : "bi-border bi-border-radius"}`,
+            baseCls: `bi-icon-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
             height: 24,
             iconHeight: null,
             iconWidth: null,
@@ -42,13 +38,13 @@ export class IconTextValueCombo extends Widget {
         const o = this.options;
         o.value = isFunction(o.value)
             ? this.__watch(o.value, (context, newValue) => {
-                this.setValue(newValue);
-            })
+                  this.setValue(newValue);
+              })
             : o.value;
         o.items = isFunction(o.items)
             ? this.__watch(o.items, (context, newValue) => {
-                this.populate(newValue);
-            })
+                  this.populate(newValue);
+              })
             : o.items;
         super._init(...arguments);
         this.trigger = createWidget({
@@ -66,7 +62,7 @@ export class IconTextValueCombo extends Widget {
             warningTitle: o.warningTitle,
         });
         this.popup = createWidget({
-            type: "bi.icon_text_value_combo_popup",
+            type: IconTextValueComboPopup.xtype,
             items: o.items,
             value: o.value,
             iconHeight: o.iconHeight,
@@ -126,7 +122,7 @@ export class IconTextValueCombo extends Widget {
 
     getValue() {
         const value = this.popup.getValue();
-        
+
         return isNull(value) ? [] : isArray(value) ? value : [value];
     }
 

src/case/combo/icontextvaluecombo/popup.icontextvalue.js

@@ -1,12 +1,4 @@
-import {
-    shortcut,
-    extend,
-    createWidget,
-    createItems,
-    Controller,
-    Events,
-    VerticalLayout
-} from "@/core";
+import { shortcut, extend, createWidget, createItems, Controller, Events, VerticalLayout } from "@/core";
 import { Pane, ButtonGroup } from "@/base";
 import { SingleSelectIconTextItem } from "../../button";
 
@@ -20,7 +12,7 @@ export class IconTextValueComboPopup extends Pane {
         return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-icon-text-icon-popup",
             behaviors: {
-                redmark () {
+                redmark() {
                     return true;
                 },
             },

src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js

@@ -1,3 +1,5 @@
+import { SearchTextValueTrigger } from "./trigger.searchtextvalue";
+import { TextValueComboPopup } from "../textvaluecombo/popup.textvalue";
 import {
     shortcut,
     Widget,
@@ -11,9 +13,7 @@ import {
     find,
     contains
 } from "@/core";
-import { SearchTextValueTrigger } from "./trigger.searchtextvalue";
 import { ButtonGroup, Combo } from "@/base";
-import { TextValueComboPopup } from "../textvaluecombo/popup.textvalue";
 
 @shortcut()
 export class SearchTextValueCombo extends Widget {
@@ -38,32 +38,30 @@ export class SearchTextValueCombo extends Widget {
         const o = this.options;
         o.value = isFunction(o.value)
             ? this.__watch(o.value, (context, newValue) => {
-                this.setValue(newValue);
-            })
+                  this.setValue(newValue);
+              })
             : o.value;
         o.items = isFunction(o.items)
             ? this.__watch(o.items, (context, newValue) => {
-                this.populate(newValue);
-            })
+                  this.populate(newValue);
+              })
             : o.items;
 
         return {
             type: Combo.xtype,
-            cls:
-                `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"
-                } bi-focus-shadow`,
+            cls: `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`,
             container: o.container,
             adjustLength: 2,
             height: toPix(o.height, o.simple ? 1 : 2),
             width: toPix(o.width, 2),
-            ref: _ref => {
+            ref: (_ref) => {
                 this.combo = _ref;
             },
             el: {
-                type: "bi.search_text_value_trigger",
+                type: SearchTextValueTrigger.xtype,
                 cls: "search-text-value-trigger",
                 watermark: o.watermark,
-                ref: _ref => {
+                ref: (_ref) => {
                     this.trigger = _ref;
                 },
                 items: o.items,
@@ -90,16 +88,16 @@ export class SearchTextValueCombo extends Widget {
                             this._clear();
                             this.fireEvent(SearchTextValueCombo.EVENT_CHANGE);
                         },
-                    }
+                    },
                 ],
             },
             popup: {
                 el: {
-                    type: "bi.text_value_combo_popup",
+                    type: TextValueComboPopup.xtype,
                     chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
                     value: o.value,
                     items: o.items,
-                    ref: _ref => {
+                    ref: (_ref) => {
                         this.popup = _ref;
                         this.trigger.getSearcher().setAdapter(this.popup);
                     },
@@ -109,11 +107,9 @@ export class SearchTextValueCombo extends Widget {
                             action: () => {
                                 this.setValue(this.getValue()[0]);
                                 this.combo.hideView();
-                                this.fireEvent(
-                                    SearchTextValueCombo.EVENT_CHANGE
-                                );
+                                this.fireEvent(SearchTextValueCombo.EVENT_CHANGE);
                             },
-                        }
+                        },
                     ],
                 },
                 value: o.value,
@@ -125,19 +121,15 @@ export class SearchTextValueCombo extends Widget {
                     eventName: Combo.EVENT_AFTER_HIDEVIEW,
                     action: () => {
                         this.trigger.stopEditing();
-                        this.fireEvent(
-                            SearchTextValueCombo.EVENT_AFTER_HIDEVIEW
-                        );
+                        this.fireEvent(SearchTextValueCombo.EVENT_AFTER_HIDEVIEW);
                     },
                 },
                 {
                     eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                     action: () => {
-                        this.fireEvent(
-                            SearchTextValueCombo.EVENT_BEFORE_POPUPVIEW
-                        );
+                        this.fireEvent(SearchTextValueCombo.EVENT_BEFORE_POPUPVIEW);
                     },
-                }
+                },
             ],
         };
     }
@@ -182,7 +174,7 @@ export class SearchTextValueCombo extends Widget {
 
     getValue() {
         const value = this.combo.getValue();
-        
+
         return isNull(value) ? [] : isArray(value) ? value : [value];
     }
 }

src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js

@@ -1,12 +1,4 @@
-import {
-    shortcut,
-    Controller,
-    Events,
-    VerticalLayout,
-    map,
-    extend,
-    concat
-} from "@/core";
+import { shortcut, Controller, Events, VerticalLayout, map, extend, concat } from "@/core";
 import { ButtonGroup, Pane } from "@/base";
 import { SingleSelectItem } from "../../button";
 
@@ -20,7 +12,7 @@ export class SearchTextValueComboPopup extends Pane {
 
     render() {
         const o = this.options;
-        
+
         return {
             type: VerticalLayout.xtype,
             vgap: 5,
@@ -38,7 +30,7 @@ export class SearchTextValueComboPopup extends Pane {
                         }
                     ],
                     behaviors: {
-                        redmark () {
+                        redmark() {
                             return true;
                         },
                     },
@@ -48,16 +40,9 @@ export class SearchTextValueComboPopup extends Pane {
                             eventName: Controller.EVENT_CHANGE,
                             action: (...args) => {
                                 const [type, val, obj] = args;
-                                this.fireEvent(
-                                    Controller.EVENT_CHANGE,
-                                    ...args
-                                );
+                                this.fireEvent(Controller.EVENT_CHANGE, ...args);
                                 if (type === Events.CLICK) {
-                                    this.fireEvent(
-                                        SearchTextValueComboPopup.EVENT_CHANGE,
-                                        val,
-                                        obj
-                                    );
+                                    this.fireEvent(SearchTextValueComboPopup.EVENT_CHANGE, val, obj);
                                 }
                             },
                         }
@@ -69,15 +54,17 @@ export class SearchTextValueComboPopup extends Pane {
 
     _formatItems(items) {
         const o = this.options;
-        
-        return map(items, (i, item) => extend(
-            {
-                type: SingleSelectItem.xtype,
-                textAlign: o.textAlign,
-                title: item.title || item.text,
-            },
-            item
-        ));
+
+        return map(items, (i, item) =>
+            extend(
+                {
+                    type: SingleSelectItem.xtype,
+                    textAlign: o.textAlign,
+                    title: item.title || item.text,
+                },
+                item
+            )
+        );
     }
 
     mounted() {

src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js

@@ -1,16 +1,6 @@
-import {
-    shortcut,
-    find,
-    i18nText,
-    isNotEmptyString,
-    VerticalAdaptLayout
-} from "@/core";
-import {
-    ButtonGroup,
-    Trigger,
-    Searcher,
-    IconButton
-} from "@/base";
+import { HorizontalFillLayout, shortcut, find, i18nText, isNotEmptyString, VerticalAdaptLayout } from "@/core";
+import { SearchTextValueComboPopup } from "./popup.searchtextvalue";
+import { ButtonGroup, Trigger, Searcher, IconButton } from "@/base";
 import { TriggerIconButton } from "../../button";
 import { DefaultTextEditor } from "../../editor";
 
@@ -50,7 +40,7 @@ export class SearchTextValueTrigger extends Trigger {
         const stateText = this._digest(o.value, o.items) || o.text;
 
         return {
-            type: "bi.horizontal_fill",
+            type: HorizontalFillLayout.xtype,
             columnSize: ["fill", 24],
             items: [
                 {
@@ -72,17 +62,14 @@ export class SearchTextValueTrigger extends Trigger {
                             height: o.height,
                         },
                         popup: {
-                            type: "bi.search_text_value_combo_popup",
+                            type: SearchTextValueComboPopup.xtype,
                             cls: "bi-card",
                             chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
                             tipText: i18nText("BI-No_Select"),
                         },
-                        onSearch (obj, callback) {
+                        onSearch(obj, callback) {
                             const keyword = obj.keyword;
-                            const finding = BI.Func.getSearchResult(
-                                o.items,
-                                keyword
-                            );
+                            const finding = BI.Func.getSearchResult(o.items, keyword);
                             const matched = finding.match,
                                 find = finding.find;
                             callback(matched, find);
@@ -91,9 +78,7 @@ export class SearchTextValueTrigger extends Trigger {
                             {
                                 eventName: Searcher.EVENT_CHANGE,
                                 action: () => {
-                                    this.fireEvent(
-                                        SearchTextValueTrigger.EVENT_CHANGE
-                                    );
+                                    this.fireEvent(SearchTextValueTrigger.EVENT_CHANGE);
                                 },
                             }
                         ],
@@ -112,20 +97,13 @@ export class SearchTextValueTrigger extends Trigger {
                                         ref: _ref => {
                                             this.clearBtn = _ref;
                                         },
-                                        cls:
-                                              `close-h-font ${
-                                                  o.allowClear
-                                                      ? "clear-button"
-                                                      : ""}`,
+                                        cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`,
                                         stopPropagation: true,
-                                        invisible:
-                                              !isNotEmptyString(stateText),
+                                        invisible: !isNotEmptyString(stateText),
                                         width: o.height,
                                         height: o.height,
                                         handler: () => {
-                                            this.fireEvent(
-                                                SearchTextValueTrigger.EVENT_CLEAR
-                                            );
+                                            this.fireEvent(SearchTextValueTrigger.EVENT_CLEAR);
                                         },
                                     },
                                 },
@@ -147,7 +125,7 @@ export class SearchTextValueTrigger extends Trigger {
 
     _digest(value, items) {
         const result = find(items, (i, item) => item.value === value);
-        
+
         return result?.text;
     }
 
@@ -166,8 +144,7 @@ export class SearchTextValueTrigger extends Trigger {
     setValue(vals) {
         const digestText = this._digest(vals, this.options.items);
         this._setState(digestText);
-        this.options.allowClear &&
-            this.clearBtn.setVisible(isNotEmptyString(digestText));
+        this.options.allowClear && this.clearBtn.setVisible(isNotEmptyString(digestText));
     }
 
     getValue() {

src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js

@@ -1,15 +1,4 @@
-import {
-    shortcut,
-    Widget,
-    extend,
-    isFunction,
-    createWidget,
-    toPix,
-    Controller,
-    isKey,
-    isNull,
-    isArray
-} from "@/core";
+import { shortcut, Widget, extend, isFunction, createWidget, toPix, Controller, isKey, isNull, isArray } from "@/core";
 import { ButtonGroup, Combo } from "@/base";
 import { TextValueCheckComboPopup } from "./popup.textvaluecheck";
 import { SelectTextTrigger } from "../../trigger";
@@ -22,9 +11,7 @@ export class TextValueCheckCombo extends Widget {
 
     _defaultConfig(config) {
         return extend(super._defaultConfig(...arguments), {
-            baseCls:
-                `bi-text-value-check-combo ${
-                    config.simple ? "bi-border-bottom" : "bi-border"}`,
+            baseCls: `bi-text-value-check-combo ${config.simple ? "bi-border-bottom" : "bi-border"}`,
             width: 100,
             height: 24,
             chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
@@ -64,9 +51,12 @@ export class TextValueCheckCombo extends Widget {
             this.textIconCheckCombo.hideView();
             this.fireEvent(TextValueCheckCombo.EVENT_CHANGE);
         });
-        this.popup.on(Controller.EVENT_CHANGE, ...args => {
-            this.fireEvent(Controller.EVENT_CHANGE, ...args);
-        });
+        this.popup.on(
+            Controller.EVENT_CHANGE,
+            ...args => {
+                this.fireEvent(Controller.EVENT_CHANGE, ...args);
+            }
+        );
         this.textIconCheckCombo = createWidget({
             type: Combo.xtype,
             container: o.container,
@@ -102,7 +92,7 @@ export class TextValueCheckCombo extends Widget {
 
     getValue() {
         const value = this.popup.getValue();
-        
+
         return isNull(value) ? [] : isArray(value) ? value : [value];
     }
 

src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js

@@ -1,12 +1,4 @@
-import {
-    shortcut,
-    extend,
-    createWidget,
-    Controller,
-    Events,
-    VerticalLayout,
-    map
-} from "@/core";
+import { shortcut, extend, createWidget, Controller, Events, VerticalLayout, map } from "@/core";
 import { Pane, ButtonGroup } from "@/base";
 import { SingleSelectItem } from "../../button";
 
@@ -56,16 +48,18 @@ export class TextValueCheckComboPopup extends Pane {
 
     _formatItems(items) {
         const o = this.options;
-        
-        return map(items, (i, item) => extend(
-            {
-                type: SingleSelectItem.xtype,
-                cls: "bi-list-item",
-                textAlign: o.textAlign,
-                title: item.title || item.text,
-            },
-            item
-        ));
+
+        return map(items, (i, item) =>
+            extend(
+                {
+                    type: SingleSelectItem.xtype,
+                    cls: "bi-list-item",
+                    textAlign: o.textAlign,
+                    title: item.title || item.text,
+                },
+                item
+            )
+        );
     }
 
     populate(items) {

src/case/combo/textvaluecombo/combo.textvalue.js

@@ -1,3 +1,4 @@
+import { TextValueComboPopup } from "./popup.textvalue";
 import {
     shortcut,
     Widget,
@@ -15,7 +16,6 @@ import {
 } from "@/core";
 import { ButtonGroup, Combo } from "@/base";
 import { SelectTextTrigger } from "../../trigger";
-import { TextValueComboPopup } from "./popup.textvalue";
 
 @shortcut()
 export class TextValueCombo extends Widget {
@@ -25,11 +25,7 @@ export class TextValueCombo extends Widget {
 
     _defaultConfig(config) {
         return extend(super._defaultConfig(...arguments), {
-            baseCls:
-                `bi-text-value-combo ${
-                    config.simple
-                        ? "bi-border-bottom"
-                        : "bi-border bi-border-radius"}`,
+            baseCls: `bi-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
             height: 24,
             chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
             text: "",
@@ -47,13 +43,13 @@ export class TextValueCombo extends Widget {
         const o = this.options;
         o.value = isFunction(o.value)
             ? this.__watch(o.value, (context, newValue) => {
-                this.setValue(newValue);
-            })
+                  this.setValue(newValue);
+              })
             : o.value;
         o.items = isFunction(o.items)
             ? this.__watch(o.items, (context, newValue) => {
-                this.populate(newValue);
-            })
+                  this.populate(newValue);
+              })
             : o.items;
         super._init(...arguments);
     }
@@ -71,7 +67,7 @@ export class TextValueCombo extends Widget {
                     text: o.warningTitle,
                 };
             }
-            
+
             return {
                 level: "success",
             };
@@ -79,7 +75,7 @@ export class TextValueCombo extends Widget {
 
         const trigger = {
             type: SelectTextTrigger.xtype,
-            ref: ref => (this.trigger = ref),
+            ref: (ref) => (this.trigger = ref),
             cls: "text-value-trigger",
             items: o.items,
             height: toPix(o.height, o.simple ? 1 : 2),
@@ -95,14 +91,14 @@ export class TextValueCombo extends Widget {
                         this._clear();
                         this.fireEvent(TextValueCombo.EVENT_CHANGE);
                     },
-                }
+                },
             ],
             ...o.el,
         };
         let changeTag = false;
         const popup = {
-            type: "bi.text_value_combo_popup",
-            ref: ref => (this.popup = ref),
+            type: TextValueComboPopup.xtype,
+            ref: (ref) => (this.popup = ref),
             chooseType: o.chooseType,
             items: o.items,
             allowSelectAll: o.allowSelectAll,
@@ -115,15 +111,9 @@ export class TextValueCombo extends Widget {
                         this.setValue(value);
                         if (o.chooseType === ButtonGroup.CHOOSE_TYPE_SINGLE) {
                             this.combo.hideView(...args);
-                            this.fireEvent(
-                                TextValueCombo.EVENT_CHANGE,
-                                ...args
-                            );
+                            this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args);
                         }
-                        if (
-                            o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI &&
-                            isEmptyArray(value)
-                        ) {
+                        if (o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && isEmptyArray(value)) {
                             this._clear();
                         }
                     },
@@ -147,7 +137,7 @@ export class TextValueCombo extends Widget {
                     action: (...args) => {
                         this.combo.hideView();
                     },
-                }
+                },
             ],
         };
 
@@ -155,7 +145,7 @@ export class TextValueCombo extends Widget {
             type: Combo.xtype,
             height: toPix(o.height, 2),
             width: toPix(o.width, 2),
-            ref: ref => (this.combo = ref),
+            ref: (ref) => (this.combo = ref),
             container: o.container,
             direction: o.direction,
             adjustLength: 2,
@@ -170,27 +160,17 @@ export class TextValueCombo extends Widget {
                 {
                     eventName: Combo.EVENT_AFTER_HIDEVIEW,
                     action: (...args) => {
-                        if (
-                            o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE &&
-                            changeTag
-                        ) {
-                            this.fireEvent(
-                                TextValueCombo.EVENT_CHANGE,
-                                ...args
-                            );
+                        if (o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) {
+                            this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args);
                         }
                     },
-                }
+                },
             ],
             popup: {
                 el: popup,
                 value: o.value,
                 maxHeight: 240,
-                minHeight:
-                    o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI &&
-                    o.allowSelectAll
-                        ? 55
-                        : 25,
+                minHeight: o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && o.allowSelectAll ? 55 : 25,
             },
         };
     }
@@ -211,7 +191,7 @@ export class TextValueCombo extends Widget {
     _checkError(v) {
         if (isNull(v)) {
             this.setStatus("success");
-            
+
             return;
         }
 
@@ -247,7 +227,7 @@ export class TextValueCombo extends Widget {
 
     getValue() {
         const value = this.combo.getValue();
-        
+
         return isNull(value) ? [] : isArray(value) ? value : [value];
     }
 

src/case/combo/textvaluecombo/combo.textvaluesmall.js

@@ -1,11 +1,7 @@
-import {
-    shortcut,
-    Widget,
-    extend
-} from "@/core";
+import { TextValueCombo } from "./combo.textvalue";
+import { shortcut, Widget, extend } from "@/core";
 import { ButtonGroup } from "@/base";
 import { SmallSelectTextTrigger } from "../../trigger";
-import { TextValueCombo } from "./combo.textvalue";
 
 @shortcut()
 export class SmallTextValueCombo extends Widget {
@@ -25,10 +21,10 @@ export class SmallTextValueCombo extends Widget {
 
     render() {
         const o = this.options;
-        
+
         return {
-            type: "bi.text_value_combo",
-            ref: _ref => {
+            type: TextValueCombo.xtype,
+            ref: (_ref) => {
                 this.combo = _ref;
             },
             height: o.height,
@@ -47,12 +43,9 @@ export class SmallTextValueCombo extends Widget {
                 {
                     eventName: TextValueCombo.EVENT_CHANGE,
                     action: (...args) => {
-                        this.fireEvent(
-                            SmallTextValueCombo.EVENT_CHANGE,
-                            ...args
-                        );
+                        this.fireEvent(SmallTextValueCombo.EVENT_CHANGE, ...args);
                     },
-                }
+                },
             ],
         };
     }

src/case/combo/textvaluecombo/popup.textvalue.js

@@ -55,16 +55,9 @@ export class TextValueComboPopup extends Pane {
                             {
                                 eventName: Controller.EVENT_CHANGE,
                                 action: (type, val, obj) => {
-                                    this.fireEvent(
-                                        Controller.EVENT_CHANGE,
-                                        arguments
-                                    );
+                                    this.fireEvent(Controller.EVENT_CHANGE, arguments);
                                     if (type === Events.CLICK) {
-                                        this.fireEvent(
-                                            TextValueComboPopup.EVENT_CHANGE,
-                                            val,
-                                            obj
-                                        );
+                                        this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val, obj);
                                     }
                                 },
                             }
@@ -73,7 +66,7 @@ export class TextValueComboPopup extends Pane {
                 ],
             };
         }
-        
+
         return {
             type: VerticalLayout.xtype,
             verticalAlign: VerticalAlign.Stretch,
@@ -104,11 +97,8 @@ export class TextValueComboPopup extends Pane {
                         listeners: [
                             {
                                 eventName: SelectList.EVENT_CHANGE,
-                                action (val) {
-                                    this.fireEvent(
-                                        TextValueComboPopup.EVENT_CHANGE,
-                                        val
-                                    );
+                                action(val) {
+                                    this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val);
                                 },
                             }
                         ],
@@ -123,18 +113,14 @@ export class TextValueComboPopup extends Pane {
                                     type: TextButton.xtype,
                                     text: i18nText("BI-Basic_Clears"),
                                     handler: () => {
-                                        this.fireEvent(
-                                            TextValueComboPopup.EVENT_CLEAR
-                                        );
+                                        this.fireEvent(TextValueComboPopup.EVENT_CLEAR);
                                     },
                                 },
                                 {
                                     type: TextButton.xtype,
                                     text: i18nText("BI-Basic_OK"),
                                     handler: () => {
-                                        this.fireEvent(
-                                            TextValueComboPopup.EVENT_CONFIRM
-                                        );
+                                        this.fireEvent(TextValueComboPopup.EVENT_CONFIRM);
                                     },
                                 }
                             ],
@@ -168,10 +154,7 @@ export class TextValueComboPopup extends Pane {
                             {
                                 eventName: ListPane.EVENT_CHANGE,
                                 action: val => {
-                                    this.fireEvent(
-                                        TextValueComboPopup.EVENT_CHANGE,
-                                        val
-                                    );
+                                    this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val);
                                 },
                             }
                         ],
@@ -188,19 +171,19 @@ export class TextValueComboPopup extends Pane {
 
     _formatItems(items) {
         const o = this.options;
-        
-        return map(items, (i, item) => extend(
-            {
-                type:
-                        o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI
-                            ? SingleSelectItem.xtype
-                            : MultiSelectItem.xtype,
-                iconWrapperWidth: 36,
-                textAlign: o.textAlign,
-                title: item.title || item.text,
-            },
-            item
-        ));
+
+        return map(items, (i, item) =>
+            extend(
+                {
+                    type:
+                        o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI ? SingleSelectItem.xtype : MultiSelectItem.xtype,
+                    iconWrapperWidth: 36,
+                    textAlign: o.textAlign,
+                    title: item.title || item.text,
+                },
+                item
+            )
+        );
     }
 
     populate(items) {
@@ -229,7 +212,7 @@ export class TextValueComboPopup extends Pane {
         }
         if (!this.options.allowSelectAll) {
             this.popup.setValue(v);
-            
+
             return;
         }
         this.popup.setValue({

src/case/editor/editor.clear.js

@@ -1,5 +1,16 @@
-import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core";
 import { Editor, IconButton } from "@/base";
+import {
+    HTapeLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    isKey,
+    isFunction,
+    createWidget,
+    Controller,
+    Events
+} from "@/core";
 
 /**
  * 有清除按钮的文本框
@@ -9,31 +20,31 @@ import { Editor, IconButton } from "@/base";
  */
 @shortcut()
 export class ClearEditor extends Widget {
-    static xtype = "bi.clear_editor"
+    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"
+    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,
@@ -46,12 +57,14 @@ export class ClearEditor extends Widget {
 
     _init() {
         const o = this.options;
-        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
-            this.setValue(newValue);
-        }) : o.value;
+        o.value = isFunction(o.value)
+            ? this.__watch(o.value, (context, newValue) => {
+                this.setValue(newValue);
+            })
+            : o.value;
         super._init(...arguments);
         this.editor = createWidget({
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             watermark: o.watermark,
@@ -63,7 +76,7 @@ export class ClearEditor extends Widget {
             autoTrim: o.autoTrim,
         });
         this.clear = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             stopEvent: true,
             invisible: !isKey(o.value),
             cls: "search-close-h-font",
@@ -75,14 +88,15 @@ export class ClearEditor extends Widget {
         });
         createWidget({
             element: this,
-            type: "bi.htape",
-            items: [{
-                el: this.editor,
-            },
-            {
-                el: this.clear,
-                width: 24,
-            }
+            type: HTapeLayout.xtype,
+            items: [
+                {
+                    el: this.editor,
+                },
+                {
+                    el: this.clear,
+                    width: 24,
+                }
             ],
         });
         this.editor.on(Controller.EVENT_CHANGE, (...args) => {
@@ -112,7 +126,6 @@ export class ClearEditor extends Widget {
             this.fireEvent(ClearEditor.EVENT_BACKSPACE);
         });
 
-
         this.editor.on(Editor.EVENT_VALID, () => {
             this.fireEvent(ClearEditor.EVENT_VALID);
         });

src/case/editor/editor.defaulttext.js

@@ -1,6 +1,15 @@
-
-import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core";
 import { Editor, TextButton } from "@/base";
+import {
+    AbsoluteLayout,
+    shortcut,
+    Widget,
+    emptyFn,
+    isKey,
+    isFunction,
+    createWidget,
+    nextTick,
+    Controller
+} from "@/core";
 
 /**
  * dailer
@@ -10,25 +19,25 @@ import { Editor, TextButton } from "@/base";
  */
 @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"
+    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 {
@@ -54,7 +63,7 @@ export class DefaultTextEditor extends Widget {
     render() {
         const o = this.options;
         this.editor = createWidget(o.el, {
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: o.hgap,
@@ -76,7 +85,7 @@ export class DefaultTextEditor extends Widget {
         const showText = isFunction(o.text) ? o.text() : o.text;
 
         this.text = createWidget({
-            type: "bi.text_button",
+            type: TextButton.xtype,
             cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style",
             textAlign: "left",
             height: o.height,
@@ -153,20 +162,23 @@ export class DefaultTextEditor extends Widget {
         });
 
         return {
-            type: "bi.absolute",
-            items: [{
-                el: this.editor,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }, {
-                el: this.text,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }],
+            type: AbsoluteLayout.xtype,
+            items: [
+                {
+                    el: this.editor,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                },
+                {
+                    el: this.text,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }
+            ],
         };
     }
 
@@ -273,7 +285,7 @@ export class DefaultTextEditor extends Widget {
         if (isKey(v)) {
             this.text.setText(v);
             this.text.element.removeClass("bi-water-mark");
-            
+
             return;
         }
         this.text.setText(o.defaultText);

src/case/editor/editor.shelter.js

@@ -1,5 +1,17 @@
-import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core";
 import { Editor, TextButton } from "@/base";
+import {
+    AbsoluteLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    isFunction,
+    createWidget,
+    Controller,
+    isKey,
+    nextTick,
+    bind
+} from "@/core";
 
 /**
  * 带标记的文本框
@@ -9,29 +21,29 @@ import { Editor, TextButton } from "@/base";
  */
 @shortcut()
 export class ShelterEditor extends Widget {
-    static xtype = "bi.shelter_editor"
+    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"
+    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,
@@ -49,15 +61,17 @@ export class ShelterEditor extends Widget {
             textAlign: "left",
         });
     }
-    
+
     _init() {
         const o = this.options;
-        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
-            this.setValue(newValue);
-        }) : o.value;
+        o.value = isFunction(o.value)
+            ? this.__watch(o.value, (context, newValue) => {
+                this.setValue(newValue);
+            })
+            : o.value;
         super._init(...arguments);
         this.editor = createWidget({
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: o.hgap,
@@ -75,7 +89,7 @@ export class ShelterEditor extends Widget {
             autoTrim: o.autoTrim,
         });
         this.text = createWidget({
-            type: "bi.text_button",
+            type: TextButton.xtype,
             cls: "shelter-editor-text",
             title: o.title,
             warningTitle: o.warningTitle,
@@ -149,131 +163,136 @@ export class ShelterEditor extends Widget {
             this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args);
         });
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.text,
-                inset: 0,
-            }, {
-                el: this.editor,
-                inset: 0,
-            }],
+            items: [
+                {
+                    el: this.text,
+                    inset: 0,
+                },
+                {
+                    el: this.editor,
+                    inset: 0,
+                }
+            ],
         });
         this._showHint();
         this._checkText();
     }
-    
+
     _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");
-            }
-            isKey(o.keyword) && this.text.doRedMark(o.keyword);
-        }, this));
+        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");
+                }
+                isKey(o.keyword) && this.text.doRedMark(o.keyword);
+            }, this)
+        );
     }
-    
+
     _showInput() {
         this.editor.visible();
         this.text.invisible();
     }
-    
+
     _showHint() {
         this.editor.invisible();
         this.text.visible();
     }
-    
+
     setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
     }
-    
+
     setTitle(title) {
         this.text.setTitle(title);
     }
-    
+
     setWarningTitle(title) {
         this.text.setWarningTitle(title);
     }
-    
+
     focus() {
         this._showInput();
         this.editor.focus();
     }
-    
+
     blur() {
         this.editor.blur();
         this._showHint();
         this._checkText();
     }
-    
+
     doRedMark() {
         if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
         this.text.doRedMark(...arguments);
     }
-    
+
     unRedMark() {
         this.text.unRedMark(...arguments);
     }
-    
+
     doHighLight() {
         if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
         this.text.doHighLight(...arguments);
     }
-    
+
     unHighLight() {
         this.text.unHighLight(...arguments);
     }
-    
+
     isValid() {
         return this.editor.isValid();
     }
-    
+
     setErrorText(text) {
         this.editor.setErrorText(text);
     }
-    
+
     getErrorText() {
         return this.editor.getErrorText();
     }
-    
+
     isEditing() {
         return this.editor.isEditing();
     }
-    
+
     getLastValidValue() {
         return this.editor.getLastValidValue();
     }
-    
+
     getLastChangedValue() {
         return this.editor.getLastChangedValue();
     }
-    
+
     setTextStyle(style) {
         this.text.setStyle(style);
     }
-    
+
     setValue(k) {
         this.editor.setValue(k);
         this._checkText();
     }
-    
+
     getValue() {
         return this.editor.getValue();
     }
-    
+
     getState() {
         return this.text.getValue();
     }
-    
+
     setState(v) {
         this._showHint();
         this.text.setValue(v);

src/case/editor/editor.sign.js

@@ -1,5 +1,17 @@
-import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core";
 import { Editor, TextButton } from "@/base";
+import {
+    AbsoluteLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    isFunction,
+    createWidget,
+    nextTick,
+    isKey,
+    bind,
+    Controller
+} from "@/core";
 
 /**
  * 带标记的文本框
@@ -9,30 +21,30 @@ import { Editor, TextButton } from "@/base";
  */
 @shortcut()
 export class SignEditor extends Widget {
-    static xtype = "bi.sign_editor"
+    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"
+    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,
@@ -53,12 +65,14 @@ export class SignEditor extends Widget {
 
     _init() {
         const o = this.options;
-        o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => {
-            this.setValue(newValue);
-        }) : o.value;
+        o.value = isFunction(o.value)
+            ? this.__watch(o.value, (context, newValue) => {
+                this.setValue(newValue);
+            })
+            : o.value;
         super._init(...arguments);
         this.editor = createWidget({
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: o.hgap,
@@ -76,7 +90,7 @@ export class SignEditor extends Widget {
             autoTrim: o.autoTrim,
         });
         this.text = createWidget({
-            type: "bi.text_button",
+            type: TextButton.xtype,
             cls: "sign-editor-text",
             title: o.title,
             warningTitle: o.warningTitle,
@@ -156,15 +170,18 @@ export class SignEditor extends Widget {
             this.fireEvent(SignEditor.EVENT_EMPTY, ...args);
         });
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.text,
-                inset: 0,
-            }, {
-                el: this.editor,
-                inset: 0,
-            }],
+            items: [
+                {
+                    el: this.text,
+                    inset: 0,
+                },
+                {
+                    el: this.editor,
+                    inset: 0,
+                }
+            ],
         });
         this._showHint();
         this._checkText();
@@ -172,16 +189,18 @@ export class SignEditor extends Widget {
 
     _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");
-                isKey(o.keyword) && this.text.doRedMark(o.keyword);
-            }
-        }, this));
+        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");
+                    isKey(o.keyword) && this.text.doRedMark(o.keyword);
+                }
+            }, this)
+        );
     }
 
     _showInput() {
@@ -256,7 +275,7 @@ export class SignEditor extends Widget {
     getErrorText() {
         return this.editor.getErrorText();
     }
-    
+
     isEditing() {
         return this.editor.isEditing();
     }

src/case/editor/editor.state.js

@@ -1,5 +1,23 @@
-import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core";
-import { TextButton, Editor } from "@/base";
+import { Editor, TextButton } from "@/base";
+import {
+    AbsoluteLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    i18nText,
+    isArray,
+    createWidget,
+    nextTick,
+    Controller,
+    isNotNull,
+    isString,
+    isKey,
+    isFunction,
+    isNumber,
+    isEmpty,
+    Selection
+} from "@/core";
 
 /**
  * guy
@@ -9,29 +27,29 @@ import { TextButton, Editor } from "@/base";
  */
 @shortcut()
 export class StateEditor extends Widget {
-    static xtype = "bi.state_editor"
+    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"
+    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,
@@ -51,12 +69,12 @@ export class StateEditor extends Widget {
             el: {},
         });
     }
-    
+
     _init() {
         super._init(...arguments);
         const o = this.options;
         this.editor = createWidget(o.el, {
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: o.hgap,
@@ -74,7 +92,7 @@ export class StateEditor extends Widget {
             autoTrim: o.autoTrim,
         });
         this.text = createWidget({
-            type: "bi.text_button",
+            type: TextButton.xtype,
             cls: "bi-water-mark tip-text-style",
             textAlign: "left",
             height: o.height,
@@ -85,17 +103,19 @@ export class StateEditor extends Widget {
                 this.editor.focus();
                 this.editor.setValue("");
             },
-            title: isNotNull(o.tipText) ? o.tipText : () => {
-                let title = "";
-                if (isString(this.stateValue)) {
-                    title = this.stateValue;
-                }
-                if (isArray(this.stateValue) && this.stateValue.length === 1) {
-                    title = this.stateValue[0];
-                }
-                
-                return title;
-            },
+            title: isNotNull(o.tipText)
+                ? o.tipText
+                : () => {
+                    let title = "";
+                    if (isString(this.stateValue)) {
+                        title = this.stateValue;
+                    }
+                    if (isArray(this.stateValue) && this.stateValue.length === 1) {
+                        title = this.stateValue[0];
+                    }
+
+                    return title;
+                },
             warningTitle: o.warningTitle,
             tipType: o.tipType,
         });
@@ -159,112 +179,115 @@ export class StateEditor extends Widget {
             this.fireEvent(StateEditor.EVENT_EMPTY, ...args);
         });
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.text,
-                inset: 0,
-            }, {
-                el: this.editor,
-                inset: 0,
-            }],
+            items: [
+                {
+                    el: this.text,
+                    inset: 0,
+                },
+                {
+                    el: this.editor,
+                    inset: 0,
+                }
+            ],
         });
         this._showHint();
         if (isNotNull(o.text)) {
             this.setState(o.text);
         }
     }
-    
+
     setWaterMark(v) {
         this.options.watermark = v;
         this.editor.setWaterMark(v);
     }
-    
+
     doRedMark() {
         if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
         this.text.doRedMark(...arguments);
     }
-    
+
     unRedMark() {
         this.text.unRedMark(...arguments);
     }
-    
+
     doHighLight() {
         if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
         this.text.doHighLight(...arguments);
     }
-    
+
     unHighLight() {
         this.text.unHighLight(...arguments);
     }
-    
+
     focus() {
         if (this.options.disabled === false) {
             this._showInput();
             this.editor.focus();
         }
     }
-    
+
     blur() {
         this.editor.blur();
         this._showHint();
     }
-    
+
     _showInput() {
         this.editor.visible();
         this.text.invisible();
     }
-    
+
     _showHint() {
         this.editor.invisible();
         this.text.visible();
     }
-    
+
     _setText(v) {
         this.text.setText(v);
         this.text.setTitle(v);
     }
-    
+
     isValid() {
         return this.editor.isValid();
     }
-    
+
     setErrorText(text) {
         this.editor.setErrorText(text);
     }
-    
+
     getErrorText() {
         return this.editor.getErrorText();
     }
-    
+
     isEditing() {
         return this.editor.isEditing();
     }
-    
+
     getLastValidValue() {
         return this.editor.getLastValidValue();
     }
-    
+
     getLastChangedValue() {
         return this.editor.getLastChangedValue();
     }
-    
+
     setValue(k) {
         this.editor.setValue(k);
     }
-    
+
     getValue() {
         return this.editor.getValue();
     }
-    
+
     getState() {
         return this.editor.getValue().match(/[^\s]+/g);
     }
-    
+
     setState(v) {
         const o = this.options;
         const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
@@ -279,22 +302,28 @@ export class StateEditor extends Widget {
                 this.text.element.removeClass("bi-water-mark");
             } else {
                 this._setText(isKey(defaultText) ? defaultText : o.text);
-                isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark");
+                isKey(defaultText)
+                    ? this.text.element.addClass("bi-water-mark")
+                    : this.text.element.removeClass("bi-water-mark");
             }
-            
+
             return;
         }
         if (isString(v)) {
             this._setText(v);
             // 配置了defaultText才判断标灰，其他情况不标灰
-            (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 (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");
+                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");
@@ -304,11 +333,11 @@ export class StateEditor extends Widget {
             }
         }
     }
-    
+
     setTipType(v) {
         this.text.options.tipType = v;
     }
-    
+
     getText() {
         return this.text.getText();
     }

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

@@ -1,5 +1,23 @@
-import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core";
 import { Editor, TextButton } from "@/base";
+import {
+    AbsoluteLayout,
+    VerticalLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    i18nText,
+    Controller,
+    createWidget,
+    nextTick,
+    isNotNull,
+    isKey,
+    isFunction,
+    isArray,
+    isNumber,
+    isEmpty,
+    Selection
+} from "@/core";
 
 /**
  * 无限制-已选择状态输入框
@@ -9,29 +27,29 @@ import { Editor, TextButton } from "@/base";
  */
 @shortcut()
 export class SimpleStateEditor extends Widget {
-    static xtype = "bi.simple_state_editor"
+    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"
+    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,
@@ -56,7 +74,7 @@ export class SimpleStateEditor extends Widget {
         super._init(...arguments);
         const o = this.options;
         this.editor = createWidget({
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: o.hgap,
@@ -74,7 +92,7 @@ export class SimpleStateEditor extends Widget {
             autoTrim: o.autoTrim,
         });
         this.text = createWidget({
-            type: "bi.text_button",
+            type: TextButton.xtype,
             cls: "bi-water-mark",
             textAlign: "left",
             text: o.text,
@@ -92,15 +110,17 @@ export class SimpleStateEditor extends Widget {
             });
         });
         createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.text,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }],
+            items: [
+                {
+                    el: this.text,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                }
+            ],
         });
         this.editor.on(Controller.EVENT_CHANGE, (...args) => {
             this.fireEvent(Controller.EVENT_CHANGE, ...args);
@@ -157,7 +177,7 @@ export class SimpleStateEditor extends Widget {
             this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args);
         });
         createWidget({
-            type: "bi.vertical",
+            type: VerticalLayout.xtype,
             scrolly: false,
             element: this,
             items: [this.editor],
@@ -271,7 +291,7 @@ export class SimpleStateEditor extends Widget {
                 this._setText(isKey(defaultText) ? defaultText : o.text);
                 this.text.element.addClass("bi-water-mark");
             }
-            
+
             return;
         }
         if (!isArray(v) || v.length === 1) {

src/case/index.js

@@ -1,36 +1,5 @@
-import * as button from "./button";
-import * as calendarItem from "./calendar";
-import * as pager from "./pager";
-import * as editor from "./editor";
-import * as tree from "./tree";
-import * as ztree from "./ztree";
-import * as trigger from "./trigger";
-import * as loader from "./loader";
-import * as segment from "./segment";
-import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
-import * as layer from "./layer";
-import * as linearSegment from "./linearsegment";
-import * as colorchooser from "./colorchooser";
-import { SelectList } from "./list/list.select";
-import * as combo from "./combo";
-
-Object.assign(BI, {
-    ...combo,
-    ...button,
-    ...calendarItem,
-    ...pager,
-    ...editor,
-    ...ztree,
-    ...tree,
-    ...trigger,
-    ...loader,
-    ...segment,
-    MultiSelectBar,
-    ...layer,
-    ...linearSegment,
-    ...colorchooser,
-    SelectList,
-});
+export { MultiSelectBar } from "./toolbar/toolbar.multiselect";
+export { SelectList } from "./list/list.select";
 
 export * from "./combo";
 export * from "./button";
@@ -39,7 +8,6 @@ export * from "./pager";
 export * from "./editor";
 export * from "./tree";
 export * from "./ztree";
-
 export * from "./trigger";
 export * from "./loader";
 export * from "./segment";
@@ -47,8 +15,4 @@ export * from "./layer";
 export * from "./linearsegment";
 export * from "./checkbox";
 export * from "./colorchooser";
-export {
-    MultiSelectBar,
-    SelectList
-};
 

src/case/layer/index.js

@@ -1,4 +1,4 @@
-export { MultiPopupView } from "./layer.multipopup";
-export { PopupPanel } from "./layer.panel";
-export { ListPane } from "./pane.list";
-export { Panel } from "./panel";
+export { MultiPopupView } from "./layer.multipopup";
+export { PopupPanel } from "./layer.panel";
+export { ListPane } from "./pane.list";
+export { Panel } from "./panel";

src/case/layer/layer.multipopup.js

@@ -1,26 +1,27 @@
+import { ButtonGroup, TextButton, PopupView } from "@/base";
+import { CenterLayout, shortcut, extend, i18nText, each, createWidget, createItems } from "@/core";
+
 /**
  * 下拉框弹出层的多选版本，toolbar带有若干按钮, zIndex在1000w
  * @class BI.MultiPopupView
  * @extends BI.Widget
  */
 
-import { shortcut, extend, i18nText, each, createWidget, createItems } from "@/core";
-import { PopupView, ButtonGroup } from "@/base";
 @shortcut()
 export class MultiPopupView extends PopupView {
     static xtype = "bi.multi_popup_view";
     static EVENT_CHANGE = "EVENT_CHANGE";
     static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
-    _defaultConfig () {
+    _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             _baseCls: `${conf._baseCls || ""} bi-multi-list-view`,
             buttons: [i18nText("BI-Basic_OK")],
         });
     }
 
-    _createToolBar () {
+    _createToolBar() {
         const o = this.options;
         if (o.buttons.length === 0) {
             return;
@@ -35,20 +36,22 @@ export class MultiPopupView extends PopupView {
         });
 
         this.buttongroup = createWidget({
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             cls: "list-view-toolbar bi-high-light bi-split-top",
             height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             items: createItems(text, {
-                type: "bi.text_button",
+                type: TextButton.xtype,
                 once: false,
                 shadow: true,
                 isShadowShowingOnSelected: true,
             }),
-            layouts: [{
-                type: "bi.center",
-                hgap: 0,
-                vgap: 0,
-            }],
+            layouts: [
+                {
+                    type: CenterLayout.xtype,
+                    hgap: 0,
+                    vgap: 0,
+                }
+            ],
         });
 
         this.buttongroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {

src/case/layer/layer.panel.js

@@ -1,31 +1,32 @@
+import { IconButton, Label } from "@/base";
+import { HTapeLayout, shortcut, extend, createWidget } from "@/core";
+import { MultiPopupView } from "./layer.multipopup";
+
 /**
  * 可以理解为MultiPopupView和Panel两个面板的结合体
  * @class BI.PopupPanel
  * @extends BI.MultiPopupView
  */
 
-import { shortcut, extend, createWidget } from "@/core";
-import { IconButton } from "@/base";
-import { MultiPopupView } from "./layer.multipopup";
 @shortcut()
 export class PopupPanel extends MultiPopupView {
     static xtype = "bi.popup_panel";
     static EVENT_CHANGE = "EVENT_CHANGE";
     static EVENT_CLOSE = "EVENT_CLOSE";
     static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
-    _defaultConfig () {
+    _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-popup-panel`,
             title: "",
         });
     }
 
-    _createTool () {
+    _createTool() {
         const o = this.options;
         const close = createWidget({
-            type: "bi.icon_button",
+            type: IconButton.xtype,
             cls: "close-h-font",
             width: 25,
             height: 25,
@@ -34,23 +35,26 @@ export class PopupPanel extends MultiPopupView {
             this.setVisible(false);
             this.fireEvent(PopupPanel.EVENT_CLOSE);
         });
-        
+
         return createWidget({
-            type: "bi.htape",
+            type: HTapeLayout.xtype,
             cls: "popup-panel-title bi-header-background",
             height: 25,
-            items: [{
-                el: {
-                    type: "bi.label",
-                    textAlign: "left",
-                    text: o.title,
-                    height: 25,
-                    lgap: 10,
+            items: [
+                {
+                    el: {
+                        type: Label.xtype,
+                        textAlign: "left",
+                        text: o.title,
+                        height: 25,
+                        lgap: 10,
+                    },
                 },
-            }, {
-                el: close,
-                width: 25,
-            }],
+                {
+                    el: close,
+                    width: 25,
+                }
+            ],
         });
     }
 }

src/case/layer/pane.list.js

@@ -1,10 +1,3 @@
-/**
- * list面板
- *
- * Created by GUY on 2015/10/30.
- * @class BI.ListPane
- * @extends BI.Pane
- */
 import {
     shortcut,
     extend,
@@ -27,6 +20,14 @@ import {
 } from "@/core";
 import { Pane, ButtonGroup } from "@/base";
 
+/**
+ * list面板
+ *
+ * Created by GUY on 2015/10/30.
+ * @class BI.ListPane
+ * @extends BI.Pane
+ */
+
 @shortcut()
 export class ListPane extends Pane {
     static xtype = "bi.list_pane";
@@ -102,19 +103,31 @@ export class ListPane extends Pane {
         });
         this.check();
 
-        createWidget(extend({
-            element: this,
-        }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({
-            scrolly: true,
-            lgap: o.lgap,
-            rgap: o.rgap,
-            tgap: o.tgap,
-            bgap: o.bgap,
-            vgap: o.vgap,
-            hgap: o.hgap,
-        }, o.logic, {
-            items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group),
-        }))));
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    LogicFactory.createLogicTypeByDirection(Direction.Top),
+                    extend(
+                        {
+                            scrolly: true,
+                            lgap: o.lgap,
+                            rgap: o.rgap,
+                            tgap: o.tgap,
+                            bgap: o.bgap,
+                            vgap: o.vgap,
+                            hgap: o.hgap,
+                        },
+                        o.logic,
+                        {
+                            items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group),
+                        }
+                    )
+                )
+            )
+        );
     }
 
     hasPrev() {
@@ -146,9 +159,11 @@ export class ListPane extends Pane {
 
     populate(items) {
         const o = this.options;
-        if (arguments.length === 0 && (isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法
+        if (arguments.length === 0 && isFunction(this.button_group.attr("itemsCreator"))) {
+            // 接管loader的populate方法
             this.button_group.attr("itemsCreator").apply(this, [
-                { times: 1 }, (...args) => {
+                { times: 1 },
+                (...args) => {
                     if (args.length === 0) {
                         throw new Error("参数不能为空");
                     }
@@ -229,4 +244,3 @@ export class ListPane extends Pane {
         return this.button_group.getNodeByValue(value);
     }
 }
-

src/case/layer/panel.js

@@ -1,15 +1,21 @@
-
-import { shortcut, Widget, extend, toPix, Controller, createWidget } from "@/core";
-import { ButtonGroup } from "@/base";
+import {
+    VerticalFillLayout,
+    CenterAdaptLayout,
+    LeftRightVerticalAdaptLayout,
+    shortcut,
+    Widget,
+    extend,
+    toPix,
+    Controller,
+    createWidget
+} from "@/core";
+import { Label, ButtonGroup } from "@/base";
 
 @shortcut()
 export class Panel extends Widget {
-    static xtype = "bi.panel"
-
-
-
-    static EVENT_CHANGE = "EVENT_CHANGE"
+    static xtype = "bi.panel";
 
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
@@ -26,7 +32,7 @@ export class Panel extends Widget {
 
     render() {
         return {
-            type: "bi.vertical_fill",
+            type: VerticalFillLayout.xtype,
             rowSize: ["", "fill"],
             items: [this._createTitle(), this.options.el],
         };
@@ -35,19 +41,21 @@ export class Panel extends Widget {
     _createTitle() {
         const o = this.options;
         this.text = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             cls: "panel-title-text",
             text: o.title,
             height: o.titleHeight,
         });
 
         this.button_group = createWidget({
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             items: o.titleButtons,
-            layouts: [{
-                type: "bi.center_adapt",
-                lgap: 10,
-            }],
+            layouts: [
+                {
+                    type: CenterAdaptLayout.xtype,
+                    lgap: 10,
+                }
+            ],
         });
 
         this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
@@ -60,7 +68,7 @@ export class Panel extends Widget {
 
         return {
             // el: {
-            type: "bi.left_right_vertical_adapt",
+            type: LeftRightVerticalAdaptLayout.xtype,
             cls: "panel-title bi-header-background bi-border-bottom",
             height: toPix(o.titleHeight, 1),
             items: {

src/case/linearsegment/button.linear.segment.js

@@ -1,47 +1,55 @@
-
-import { shortcut, toPix } from "@/core";
-import { BasicButton } from "@/base";
+import { Label, BasicButton } from "@/base";
+import { AbsoluteLayout, Layout, shortcut, toPix } from "@/core";
 
 @shortcut()
 export class LinearSegmentButton extends BasicButton {
-	static xtype = "bi.linear_segment_button"
-
-    props = { extraCls:"bi-line-segment-button bi-list-item-effect", once:true, readonly:true, hgap:10, height:24 };
-
+    static xtype = "bi.linear_segment_button";
 
+    props = {
+        extraCls: "bi-line-segment-button bi-list-item-effect",
+        once: true,
+        readonly: true,
+        hgap: 10,
+        height: 24,
+    };
 
-    render () {
+    render() {
         const o = this.options;
 
-        return [{
-            type: "bi.label",
-            text: o.text,
-            height: o.height,
-            textHeight: toPix(o.height, 2),
-            value: o.value,
-            hgap: o.hgap,
-            ref : _ref => {
-                this.text = _ref;
-            },
-        }, {
-            type: "bi.absolute",
-            items: [{
-                el: {
-                    type: "bi.layout",
-                    cls: "line-segment-button-line",
-                    height: 2,
-                    ref : _ref => {
-                        this.line = _ref;
-                    },
+        return [
+            {
+                type: Label.xtype,
+                text: o.text,
+                height: o.height,
+                textHeight: toPix(o.height, 2),
+                value: o.value,
+                hgap: o.hgap,
+                ref: _ref => {
+                    this.text = _ref;
                 },
-                left: 0,
-                right: 0,
-                bottom: 0,
-            }],
-        }];
+            },
+            {
+                type: AbsoluteLayout.xtype,
+                items: [
+                    {
+                        el: {
+                            type: Layout.xtype,
+                            cls: "line-segment-button-line",
+                            height: 2,
+                            ref: _ref => {
+                                this.line = _ref;
+                            },
+                        },
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                    }
+                ],
+            }
+        ];
     }
 
-    setSelected (v) {
+    setSelected(v) {
         super.setSelected(...arguments);
         if (v) {
             this.line.element.addClass("bi-high-light-background");
@@ -50,7 +58,7 @@ export class LinearSegmentButton extends BasicButton {
         }
     }
 
-    setText (text) {
+    setText(text) {
         this.text.setText(text);
     }
 }

src/case/linearsegment/index.js

@@ -1,2 +1,2 @@
-export { LinearSegmentButton } from "./button.linear.segment";
-export { LinearSegment } from "./linear.segment";
+export { LinearSegmentButton } from "./button.linear.segment";
+export { LinearSegment } from "./linear.segment";

src/case/linearsegment/linear.segment.js

@@ -1,62 +1,70 @@
-
-import { shortcut, Widget, createItems, makeArrayByArray } from "@/core";
+import { ButtonGroup } from "@/base";
+import { LinearSegmentButton } from "./button.linear.segment";
+import { TableLayout, shortcut, Widget, createItems, makeArrayByArray } from "@/core";
 
 @shortcut()
 export class LinearSegment extends Widget {
-	static xtype = "bi.linear_segment"
-
-    props = { baseCls:"bi-linear-segment", items:[], height:30 };
+    static xtype = "bi.linear_segment";
 
+    props = { baseCls: "bi-linear-segment", items: [], height: 30 };
 
-
-    render () {
+    render() {
         const o = this.options;
-        
+
         return {
-            type: "bi.button_group",
-            items: [createItems(o.items, {
-                type: "bi.linear_segment_button",
-                height: o.height,
-            })],
-            layouts: [{
-                type: "bi.table",
-                columnSize: makeArrayByArray(o.items, "fill"),
-            }],
+            type: ButtonGroup.xtype,
+            items: [
+                createItems(o.items, {
+                    type: LinearSegmentButton.xtype,
+                    height: o.height,
+                })
+            ],
+            layouts: [
+                {
+                    type: TableLayout.xtype,
+                    columnSize: makeArrayByArray(o.items, "fill"),
+                }
+            ],
             value: o.value,
-            listeners: [{
-                eventName: "__EVENT_CHANGE__",
-                action: (...args) => {
-                    this.fireEvent("__EVENT_CHANGE__", ...args);
-                },
-            }, {
-                eventName: "EVENT_CHANGE",
-                action: () => {
-                    this.fireEvent("EVENT_CHANGE");
+            listeners: [
+                {
+                    eventName: "__EVENT_CHANGE__",
+                    action: (...args) => {
+                        this.fireEvent("__EVENT_CHANGE__", ...args);
+                    },
                 },
-            }],
+                {
+                    eventName: "EVENT_CHANGE",
+                    action: () => {
+                        this.fireEvent("EVENT_CHANGE");
+                    },
+                }
+            ],
             ref: _ref => {
                 this.buttonGroup = _ref;
             },
         };
     }
 
-    setValue (v) {
+    setValue(v) {
         this.buttonGroup.setValue(v);
     }
 
-    setEnabledValue (v) {
+    setEnabledValue(v) {
         this.buttonGroup.setEnabledValue(v);
     }
 
-    getValue () {
+    getValue() {
         return this.buttonGroup.getValue();
     }
 
-    populate (buttons) {
+    populate(buttons) {
         const o = this.options;
-        this.buttonGroup.populate([createItems(buttons, {
-            type: "bi.linear_segment_button",
-            height: o.height,
-        })]);
+        this.buttonGroup.populate([
+            createItems(buttons, {
+                type: LinearSegmentButton.xtype,
+                height: o.height,
+            })
+        ]);
     }
 }

src/case/list/list.select.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-mixed-spaces-and-tabs */
-
 import {
     shortcut,
     Widget,
@@ -21,6 +19,8 @@ import { ButtonGroup } from "@/base";
 import { MultiSelectBar } from "../toolbar/toolbar.multiselect";
 import { ListPane } from "../layer/pane.list";
 
+/* eslint-disable no-mixed-spaces-and-tabs */
+
 @shortcut()
 export class SelectList extends Widget {
     static xtype = "bi.select_list";
@@ -94,13 +94,25 @@ export class SelectList extends Widget {
             this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
-        createWidget(extend({
-            element: this,
-        }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(o.direction), extend({
-            scrolly: true,
-        }, o.logic, {
-            items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list),
-        }))));
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    LogicFactory.createLogicTypeByDirection(o.direction),
+                    extend(
+                        {
+                            scrolly: true,
+                        },
+                        o.logic,
+                        {
+                            items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list),
+                        }
+                    )
+                )
+            )
+        );
 
         if (o.items.length <= 0) {
             this.toolbar.setVisible(false);
@@ -214,8 +226,9 @@ export class SelectList extends Widget {
 
     resetHeight(h) {
         const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0);
-        this.list.resetHeight ? this.list.resetHeight(h - toolHeight) :
-            this.list.element.css({ "max-height": pixFormat(h - toolHeight) });
+        this.list.resetHeight
+            ? this.list.resetHeight(h - toolHeight)
+            : this.list.element.css({ "max-height": pixFormat(h - toolHeight) });
     }
 
     setNotSelectedValue() {

src/case/loader/loader.lazy.js

@@ -1,15 +1,15 @@
-import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core";
 import { Loader } from "@/base";
+import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core";
 
 @shortcut()
 export class LazyLoader extends Widget {
-    static xtype = "bi.lazy_loader"
+    static xtype = "bi.lazy_loader";
 
     _const = {
         PAGE: 100,
     };
 
-    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
@@ -24,7 +24,7 @@ export class LazyLoader extends Widget {
         super._init(...arguments);
         const all = o.items.length;
         this.loader = createWidget({
-            type: "bi.loader",
+            type: Loader.xtype,
             element: this,
             // 下面是button_group的属性
             el: o.el,
@@ -44,7 +44,7 @@ export class LazyLoader extends Widget {
         const lastNum = o.items.length - this._const.PAGE * (options.times - 1);
         const lastItems = takeRight(o.items, lastNum);
         const nextItems = take(lastItems, this._const.PAGE);
-        
+
         return nextItems;
     }
 

src/case/loader/loader.list.js

@@ -1,4 +1,23 @@
-import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core";
+import { ButtonGroup, LoadingBar } from "@/base";
+import {
+    VerticalLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    Controller,
+    createWidget,
+    Events,
+    nextTick,
+    bind,
+    isEmpty,
+    isNumber,
+    isObject,
+    isFunction,
+    each,
+    isNotEmptyArray,
+    DOM
+} from "@/core";
 
 /**
  * 恶心的加载控件， 为解决排序问题引入的控件
@@ -9,9 +28,9 @@ import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, ne
  */
 @shortcut()
 export class ListLoader extends Widget {
-    static xtype = "bi.list_loader"
+    static xtype = "bi.list_loader";
 
-    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
@@ -19,7 +38,7 @@ export class ListLoader extends Widget {
             isDefaultInit: true, // 是否默认初始化数据
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group",
+                type: ButtonGroup.xtype,
             },
             items: [],
             itemsCreator: emptyFn,
@@ -34,12 +53,15 @@ export class ListLoader extends Widget {
     _nextLoad() {
         const o = this.options;
         this.next.setLoading();
-        o.itemsCreator.apply(this, [{
-            times: ++this.times,
-        }, (...args) => {
-            this.next.setLoaded();
-            this.addItems(...args);
-        }]);
+        o.itemsCreator.apply(this, [
+            {
+                times: ++this.times,
+            },
+            (...args) => {
+                this.next.setLoaded();
+                this.addItems(...args);
+            }
+        ]);
     }
 
     _init() {
@@ -50,14 +72,16 @@ export class ListLoader extends Widget {
         }
 
         this.button_group = createWidget(o.el, {
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             element: this,
             chooseType: 0,
             items: o.items,
             behaviors: {},
-            layouts: [{
-                type: "bi.vertical",
-            }],
+            layouts: [
+                {
+                    type: VerticalLayout.xtype,
+                }
+            ],
         });
         this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
             const [type, , obj] = args;
@@ -68,9 +92,14 @@ export class ListLoader extends Widget {
         });
 
         if (o.next !== false) {
-            this.next = createWidget(extend({
-                type: "bi.loading_bar",
-            }, o.next));
+            this.next = createWidget(
+                extend(
+                    {
+                        type: LoadingBar.xtype,
+                    },
+                    o.next
+                )
+            );
             this.next.on(Controller.EVENT_CHANGE, type => {
                 if (type === Events.CLICK) {
                     this._nextLoad();
@@ -79,14 +108,18 @@ export class ListLoader extends Widget {
         }
 
         createWidget({
-            type: "bi.vertical",
+            type: VerticalLayout.xtype,
             element: this,
             items: [this.next],
         });
 
-        o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () {
-            this.populate();
-        }, this));
+        o.isDefaultInit &&
+            isEmpty(o.items) &&
+            nextTick(
+                bind(function () {
+                    this.populate();
+                }, this)
+            );
         if (isNotEmptyArray(o.items)) {
             this.populate(o.items);
         }
@@ -97,11 +130,13 @@ export class ListLoader extends Widget {
         if (isNumber(o.count)) {
             return this.count < o.count;
         }
-        
-        return !!o.hasNext.apply(this, [{
-            times: this.times,
-            count: this.count,
-        }]);
+
+        return !!o.hasNext.apply(this, [
+            {
+                times: this.times,
+                count: this.count,
+            }
+        ]);
     }
 
     addItems(items) {
@@ -120,17 +155,20 @@ export class ListLoader extends Widget {
 
     populate(items) {
         const o = this.options;
-        if (arguments.length === 0 && (isFunction(o.itemsCreator))) {
-            o.itemsCreator.apply(this, [{
-                times: 1,
-            }, (...args) => {
-                if (args.length === 0) {
-                    throw new Error("参数不能为空");
+        if (arguments.length === 0 && isFunction(o.itemsCreator)) {
+            o.itemsCreator.apply(this, [
+                {
+                    times: 1,
+                },
+                (...args) => {
+                    if (args.length === 0) {
+                        throw new Error("参数不能为空");
+                    }
+                    this.populate(...args);
+                    o.onLoaded();
                 }
-                this.populate(...args);
-                o.onLoaded();
-            }]);
-            
+            ]);
+
             return;
         }
         this.options.items = items;

src/case/loader/sort.list.js

@@ -1,4 +1,6 @@
-import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core";
+import { ButtonGroup } from "@/base";
+import { ListLoader } from "./loader.list";
+import { Layout, shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core";
 
 /**
  * Created by GUY on 2016/4/29.
@@ -8,9 +10,9 @@ import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, ea
  */
 @shortcut()
 export class SortList extends Widget {
-    static xtype = "bi.sort_list"
+    static xtype = "bi.sort_list";
 
-    static EVENT_CHANGE = "EVENT_CHANGE"
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
     _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
@@ -18,7 +20,7 @@ export class SortList extends Widget {
             isDefaultInit: true, // 是否默认初始化数据
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group",
+                type: ButtonGroup.xtype,
             },
             items: [],
             itemsCreator: emptyFn,
@@ -36,12 +38,12 @@ export class SortList extends Widget {
         super._init(...arguments);
         const o = this.options;
         this.loader = createWidget({
-            type: "bi.list_loader",
+            type: ListLoader.xtype,
             element: this,
             isDefaultInit: o.isDefaultInit,
             el: o.el,
             items: this._formatItems(o.items),
-            itemsCreator (op, callback) {
+            itemsCreator(op, callback) {
                 o.itemsCreator(op, items => {
                     callback(this._formatItems(items));
                 });
@@ -66,9 +68,9 @@ export class SortList extends Widget {
             cursor: o.cursor || "drag",
             tolerance: o.tolerance || "intersect",
             placeholder: {
-                element ($currentItem) {
+                element($currentItem) {
                     const holder = createWidget({
-                        type: "bi.layout",
+                        type: Layout.xtype,
                         cls: "bi-sortable-holder",
                         height: $currentItem.outerHeight(),
                     });
@@ -79,22 +81,16 @@ export class SortList extends Widget {
                         "margin-bottom": $currentItem.css("margin-bottom"),
                         margin: $currentItem.css("margin"),
                     });
-                    
-                    return holder.element;
-                },
-                update () {
 
+                    return holder.element;
                 },
+                update() {},
             },
-            start (event, ui) {
-
-            },
+            start(event, ui) {},
             stop: (event, ui) => {
                 this.fireEvent(SortList.EVENT_CHANGE);
             },
-            over (event, ui) {
-
-            },
+            over(event, ui) {},
         });
     }
 
@@ -106,7 +102,7 @@ export class SortList extends Widget {
                 sorted: item.value,
             };
         });
-        
+
         return items;
     }
 

src/case/pager/index.js

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

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

@@ -1,15 +1,32 @@
+import { Pager, IconButton, Label } from "@/base";
+import {
+    HorizontalLayout,
+    VerticalAdaptLayout,
+    FloatLeftLayout,
+    shortcut,
+    Widget,
+    extend,
+    isPositiveInteger,
+    createWidget,
+    parseInt,
+    HorizontalAlign,
+    isNotEmptyObject
+} from "@/core";
+import { SmallTextEditor } from "@/widget/editor/editor.text.small";
+import { TextEditor } from "@/widget/editor/editor.text";
+
 /**
  * 有总页数和总行数的分页控件
  * Created by Young's on 2016/10/13.
  */
-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 () {
+    _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-all-count-pager",
             pagerDirection: "vertical", // 翻页按钮方向，可选值：vertical/horizontal
@@ -22,13 +39,14 @@ export class AllCountPager extends Widget {
             showRowInfo: true,
         });
     }
-    _init () {
+    _init() {
         super._init(...arguments);
-        const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, pagerIconCls = this._getPagerIconCls();
+        const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options,
+            pagerIconCls = this._getPagerIconCls();
         this.editor = createWidget({
-            type: "bi.small_text_editor",
+            type: SmallTextEditor.xtype,
             cls: "pager-editor bi-border-radius",
-            validationChecker (v) {
+            validationChecker(v) {
                 return (pages === 0 && v === "0") || isPositiveInteger(v);
             },
             hgap: 4,
@@ -41,12 +59,14 @@ export class AllCountPager extends Widget {
         });
 
         this.pager = createWidget({
-            type: "bi.pager",
+            type: Pager.xtype,
             width: 58,
-            layouts: [{
-                type: "bi.horizontal",
-                lgap: 5,
-            }],
+            layouts: [
+                {
+                    type: HorizontalLayout.xtype,
+                    lgap: 5,
+                }
+            ],
 
             dynamicShow: false,
             pages,
@@ -56,7 +76,7 @@ export class AllCountPager extends Widget {
             first: false,
             last: false,
             prev: {
-                type: "bi.icon_button",
+                type: IconButton.xtype,
                 value: "prev",
                 title: BI.i18nText("BI-Previous_Page"),
                 warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
@@ -65,7 +85,7 @@ export class AllCountPager extends Widget {
                 cls: `bi-border bi-border-radius all-pager-prev bi-list-item-select2 ${pagerIconCls.preCls}`,
             },
             next: {
-                type: "bi.icon_button",
+                type: IconButton.xtype,
                 value: "next",
                 title: BI.i18nText("BI-Next_Page"),
                 warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
@@ -81,8 +101,7 @@ export class AllCountPager extends Widget {
             invisible: pages <= 1,
         });
 
-        //  TODO:需等到TextEditor 完成es6化后才可替换BI.TextEditor
-        this.editor.on(BI.TextEditor.EVENT_CONFIRM, () => {
+        this.editor.on(TextEditor.EVENT_CONFIRM, () => {
             this.pager.setValue(parseInt(this.editor.getValue()));
             this.fireEvent(AllCountPager.EVENT_CHANGE);
         });
@@ -94,7 +113,7 @@ export class AllCountPager extends Widget {
         });
 
         this.allPages = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             title: pages,
             height,
             text: `/${pages}`,
@@ -102,24 +121,25 @@ export class AllCountPager extends Widget {
             invisible: pages <= 1,
         });
 
-        createWidget(showRowCount ? {
-            type: "bi.vertical_adapt",
-            element: this,
-            scrollx: false,
-            columnSize: ["fill", ""],
-            horizontalAlign: HorizontalAlign.Right,
-            items: [
-                this._getRowCountObject(),
-                this.editor, this.allPages, this.pager
-            ],
-        } : {
-            type: "bi.vertical_adapt",
-            element: this,
-            items: [this.editor, this.allPages, this.pager],
-        });
+        createWidget(
+            showRowCount
+                ? {
+                    type: VerticalAdaptLayout.xtype,
+                    element: this,
+                    scrollx: false,
+                    columnSize: ["fill", ""],
+                    horizontalAlign: HorizontalAlign.Right,
+                    items: [this._getRowCountObject(), this.editor, this.allPages, this.pager],
+                }
+                : {
+                    type: VerticalAdaptLayout.xtype,
+                    element: this,
+                    items: [this.editor, this.allPages, this.pager],
+                }
+        );
     }
 
-    _getPagerIconCls () {
+    _getPagerIconCls() {
         const { pagerDirection } = this.options;
         switch (pagerDirection) {
         case "horizontal":
@@ -140,41 +160,46 @@ export class AllCountPager extends Widget {
         const { height, count, rowInfoObject } = this.options;
 
         return {
-            type: "bi.left",
+            type: FloatLeftLayout.xtype,
             height,
             scrollable: false,
-            ref:  _ref => {
+            ref: _ref => {
                 this.rowCountObject = _ref;
             },
-            items: [{
-                type: "bi.label",
-                height,
-                text: BI.i18nText("BI-Basic_Total"),
-                ref:  _ref => {
-                    this.prevText = _ref;
-                },
-            }, {
-                el: {
-                    type: "bi.label",
+            items: [
+                {
+                    type: Label.xtype,
+                    height,
+                    text: BI.i18nText("BI-Basic_Total"),
                     ref: _ref => {
-                        this.rowCount = _ref;
+                        this.prevText = _ref;
                     },
-                    cls: "row-count",
+                },
+                {
+                    el: {
+                        type: Label.xtype,
+                        ref: _ref => {
+                            this.rowCount = _ref;
+                        },
+                        cls: "row-count",
+                        height,
+                        text: count,
+                        title: count,
+                    },
+                    hgap: 5,
+                },
+                {
+                    type: Label.xtype,
                     height,
-                    text: count,
-                    title: count,
+                    text: BI.i18nText("BI-Tiao_Data"),
+                    textAlign: "left",
                 },
-                hgap: 5,
-            }, {
-                type: "bi.label",
-                height,
-                text: BI.i18nText("BI-Tiao_Data"),
-                textAlign: "left",
-            }, isNotEmptyObject(rowInfoObject) ? rowInfoObject : null],
+                isNotEmptyObject(rowInfoObject) ? rowInfoObject : null
+            ],
         };
     }
 
-    setAllPages (v) {
+    setAllPages(v) {
         this.allPages.setText(`/${v}`);
         this.allPages.setTitle(v);
         this.options.pages = v;
@@ -183,55 +208,55 @@ export class AllCountPager extends Widget {
         this.setPagerVisible(v > 1);
     }
 
-    setShowRowInfo (b) {
+    setShowRowInfo(b) {
         this.options.showRowInfo = b;
         this.rowCountObject.setVisible(b);
     }
 
-    setValue (v) {
+    setValue(v) {
         this.pager.setValue(v);
     }
 
-    setVPage (v) {
+    setVPage(v) {
         this.pager.setValue(v);
     }
 
-    setCount (count) {
+    setCount(count) {
         if (this.options.showRowCount) {
             this.rowCount.setText(count);
             this.rowCount.setTitle(count);
         }
     }
 
-    setCountPrevText (text) {
+    setCountPrevText(text) {
         if (this.options.showRowCount) {
             this.prevText.setText(text);
         }
     }
 
-    getCurrentPage () {
+    getCurrentPage() {
         return this.pager.getCurrentPage();
     }
 
-    hasPrev () {
+    hasPrev() {
         return this.pager.hasPrev();
     }
 
-    hasNext () {
+    hasNext() {
         return this.pager.hasNext();
     }
 
-    isShowPager () {
+    isShowPager() {
         return this.options.showRowInfo || this.options.pages > 1;
     }
 
-    setPagerVisible (b) {
+    setPagerVisible(b) {
         this.editor.setVisible(b);
         this.allPages.setVisible(b);
         this.pager.setVisible(b);
     }
 
-    populate () {
+    populate() {
         this.pager.populate();
         this.setPagerVisible(this.options.pages > 1);
     }

src/case/pager/pager.detail.js

@@ -1,3 +1,21 @@
+import {
+    HorizontalLayout,
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    result,
+    debounce,
+    isKey,
+    createWidget,
+    createItems,
+    Controller,
+    Events,
+    MIN,
+    MAX
+} from "@/core";
+import { Label, ButtonGroup } from "@/base";
+
 /**
  * 分页控件
  *
@@ -6,26 +24,27 @@
  * @extends BI.Widget
  */
 
-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 () {
+    _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-detail-pager",
             behaviors: {},
-            layouts: [{
-                type: "bi.horizontal",
-            }],
+            layouts: [
+                {
+                    type: HorizontalLayout.xtype,
+                }
+            ],
 
             dynamicShow: true, // 是否动态显示上一页、下一页、首页、尾页， 若为false，则指对其设置使能状态
             // dynamicShow为false时以下两个有用
             dynamicShowFirstLast: false, // 是否动态显示首页、尾页
             dynamicShowPrevNext: false, // 是否动态显示上一页、下一页
             pages: false, // 总页数
-            curr () {
+            curr() {
                 return 1;
             }, // 初始化当前页
             groups: 0, // 连续显示分页数
@@ -37,14 +56,15 @@ export class DetailPager extends Widget {
             next: "下一页",
 
             firstPage: 1,
-            lastPage () { // 在万不得已时才会调用这个函数获取最后一页的页码,  主要作用于setValue方法
+            lastPage() {
+                // 在万不得已时才会调用这个函数获取最后一页的页码,  主要作用于setValue方法
                 return 1;
             },
             hasPrev: emptyFn, // pages不可用时有效
             hasNext: emptyFn, // pages不可用时有效
         });
     }
-    _init () {
+    _init() {
         super._init(...arguments);
         this.currPage = result(this.options, "curr");
         // 翻页太灵敏
@@ -54,9 +74,12 @@ export class DetailPager extends Widget {
         }, 300);
         this._populate();
     }
-    _populate () {
-        const o = this.options, view = [], dict = {};
-        const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options;
+    _populate() {
+        const o = this.options,
+            view = [],
+            dict = {};
+        const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } =
+            this.options;
         this.empty();
         const pages = result(o, "pages");
         const curr = result(this, "currPage");
@@ -75,7 +98,7 @@ export class DetailPager extends Widget {
         }
 
         // 计算当前组
-        dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups));
+        dict.index = Math.ceil((curr + (groups > 1 && groups !== pages ? 1 : 0)) / (groups === 0 ? 1 : groups));
 
         // 当前页非首页，则输出上一页
         if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) {
@@ -86,9 +109,14 @@ export class DetailPager extends Widget {
                     disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
                 });
             } else {
-                view.push(extend({
-                    disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
-                }, prev));
+                view.push(
+                    extend(
+                        {
+                            disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false),
+                        },
+                        prev
+                    )
+                );
             }
         }
 
@@ -101,7 +129,7 @@ export class DetailPager extends Widget {
             });
             if (dict.index > 1 && groups !== 0) {
                 view.push({
-                    type: "bi.label",
+                    type: Label.xtype,
                     cls: "page-ellipsis",
                     text: "\u2026",
                 });
@@ -111,16 +139,21 @@ export class DetailPager extends Widget {
         // 输出当前页组
         dict.poor = Math.floor((groups - 1) / 2);
         dict.start = dict.index > 1 ? curr - dict.poor : 1;
-        dict.end = dict.index > 1 ? (function () {
-            const max = curr + (groups - dict.poor - 1);
-            
-            return max > pages ? pages : max;
-        }()) : groups;
-        if (dict.end - dict.start < groups - 1) { // 最后一组状态
+        dict.end =
+            dict.index > 1
+                ? (function () {
+                    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;
         }
-        let s = dict.start, e = dict.end;
-        if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) {
+        let s = dict.start,
+            e = dict.end;
+        if (first && last && dict.index > 1 && groups !== 0 && pages > groups && dict.end < pages && groups !== 0) {
             s++;
             e--;
         }
@@ -143,7 +176,7 @@ export class DetailPager extends Widget {
         if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) {
             if (pages > groups && dict.end < pages && groups !== 0) {
                 view.push({
-                    type: "bi.label",
+                    type: Label.xtype,
                     cls: "page-ellipsis",
                     text: "\u2026",
                 });
@@ -157,28 +190,32 @@ export class DetailPager extends Widget {
 
         // 当前页不为尾页时，输出下一页
         dict.flow = !prev && groups === 0;
-        if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) {
-            view.push((function () {
-                if (isKey(next)) {
-                    if (pages === false) {
-                        return { text: next, value: "next", disabled: hasNext(curr) === false };
+        if ((!dynamicShow && !dynamicShowPrevNext && next) || (curr !== pages && next) || dict.flow) {
+            view.push(
+                (function () {
+                    if (isKey(next)) {
+                        if (pages === 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 (dict.flow && curr === pages)
-                        ?
-                        { text: next, value: "next", disabled: true }
-                        :
-                        { text: next, value: "next", disabled: !(curr !== pages && next || dict.flow) };
-                }
-                
-                return extend({
-                    disabled: pages === false ? 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 = createWidget({
-            type: "bi.button_group",
+            type: ButtonGroup.xtype,
             element: this,
             items: createItems(view, {
                 cls: "page-item bi-border bi-list-item-active",
@@ -212,10 +249,12 @@ export class DetailPager extends Widget {
                     this.currPage = v;
                     break;
                 }
-                jump.apply(this, [{
-                    pages,
-                    curr: this.currPage,
-                }]);
+                jump.apply(this, [
+                    {
+                        pages,
+                        curr: this.currPage,
+                    }
+                ]);
                 this._populate();
                 this.fireEvent(DetailPager.EVENT_CHANGE, obj);
             }
@@ -224,32 +263,32 @@ export class DetailPager extends Widget {
         this.fireEvent(DetailPager.EVENT_AFTER_POPULATE);
     }
 
-    getCurrentPage () {
+    getCurrentPage() {
         return this.currPage;
     }
 
-    setAllPages (pages) {
+    setAllPages(pages) {
         this.options.pages = pages;
         this._populate();
     }
 
-    hasPrev (v) {
+    hasPrev(v) {
         v || (v = 1);
         const { hasPrev } = this.options;
         const pages = this.options.pages;
-        
+
         return pages === false ? hasPrev(v) : v > 1;
     }
 
-    hasNext (v) {
+    hasNext(v) {
         v || (v = 1);
         const { hasNext } = this.options;
         const pages = this.options.pages;
-        
+
         return pages === false ? hasNext(v) : v < pages;
     }
 
-    setValue (v) {
+    setValue(v) {
         const o = this.options;
         const { pages } = this.options;
         v = v || 0;
@@ -257,7 +296,8 @@ export class DetailPager extends Widget {
         if (pages === false) {
             const lastPage = result(o, "lastPage");
             let firstPage = 1;
-            this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v));
+            this.currPage =
+                v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), v < firstPage ? firstPage : v);
         } else {
             v = v > pages ? pages : v;
             this.currPage = v;
@@ -265,7 +305,7 @@ export class DetailPager extends Widget {
         this._populate();
     }
 
-    getValue () {
+    getValue() {
         const val = this.button_group.getValue()[0];
         switch (val) {
         case "prev":
@@ -276,19 +316,19 @@ export class DetailPager extends Widget {
             return MIN;
         case "last":
             return MAX;
-        default :
+        default:
             return val;
         }
     }
 
-    attr (key, value) {
+    attr(key, value) {
         super.attr(...arguments);
         if (key === "curr") {
             this.currPage = result(this.options, "curr");
         }
     }
 
-    populate () {
+    populate() {
         this._populate();
     }
 }

src/case/pager/pager.direction.js

@@ -1,3 +1,6 @@
+import { AbsoluteLayout, HorizontalLayout, shortcut, Widget, extend, emptyFn, createWidget } from "@/core";
+import { Label, Pager, IconButton } from "@/base";
+
 /**
  * 显示页码的分页控件
  *
@@ -6,14 +9,12 @@
  * @extends BI.Widget
  */
 
-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 () {
+    _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-direction-pager",
             height: 24,
@@ -37,38 +38,43 @@ export class DirectionPager extends Widget {
             },
         });
     }
-    _init () {
+    _init() {
         super._init(...arguments);
         this._createVPager();
         this._createHPager();
         this.layout = createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             scrollable: false,
             element: this,
-            items: [{
-                el: this.vpager,
-                top: 0,
-                right: 86,
-            }, {
-                el: this.vlabel,
-                top: 0,
-                right: 110,
-            }, {
-                el: this.hpager,
-                top: 0,
-                right: 0,
-            }, {
-                el: this.hlabel,
-                top: 0,
-                right: 24,
-            }],
+            items: [
+                {
+                    el: this.vpager,
+                    top: 0,
+                    right: 86,
+                },
+                {
+                    el: this.vlabel,
+                    top: 0,
+                    right: 110,
+                },
+                {
+                    el: this.hpager,
+                    top: 0,
+                    right: 0,
+                },
+                {
+                    el: this.hlabel,
+                    top: 0,
+                    right: 24,
+                }
+            ],
         });
     }
 
-    _createVPager () {
+    _createVPager() {
         const v = this.options.vertical;
         this.vlabel = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             width: 24,
             height: 24,
             value: v.curr,
@@ -76,13 +82,15 @@ export class DirectionPager extends Widget {
             invisible: true,
         });
         this.vpager = createWidget({
-            type: "bi.pager",
+            type: Pager.xtype,
             width: 72,
-            layouts: [{
-                type: "bi.horizontal",
-                scrollx: false,
-                rgap: 24,
-            }],
+            layouts: [
+                {
+                    type: HorizontalLayout.xtype,
+                    scrollx: false,
+                    rgap: 24,
+                }
+            ],
             invisible: true,
 
             dynamicShow: false,
@@ -93,7 +101,7 @@ export class DirectionPager extends Widget {
             first: false,
             last: false,
             prev: {
-                type: "bi.icon_button",
+                type: IconButton.xtype,
                 value: "prev",
                 title: BI.i18nText("BI-Up_Page"),
                 warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
@@ -102,7 +110,7 @@ export class DirectionPager extends Widget {
                 cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
             },
             next: {
-                type: "bi.icon_button",
+                type: IconButton.xtype,
                 value: "next",
                 title: BI.i18nText("BI-Down_Page"),
                 warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
@@ -125,10 +133,10 @@ export class DirectionPager extends Widget {
             this.vlabel.setTitle(this.vpager.getCurrentPage());
         });
     }
-    _createHPager () {
+    _createHPager() {
         const h = this.options.horizontal;
         this.hlabel = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             width: 24,
             height: 24,
             value: h.curr,
@@ -136,13 +144,15 @@ export class DirectionPager extends Widget {
             invisible: true,
         });
         this.hpager = createWidget({
-            type: "bi.pager",
+            type: Pager.xtype,
             width: 72,
-            layouts: [{
-                type: "bi.horizontal",
-                scrollx: false,
-                rgap: 24,
-            }],
+            layouts: [
+                {
+                    type: HorizontalLayout.xtype,
+                    scrollx: false,
+                    rgap: 24,
+                }
+            ],
             invisible: true,
 
             dynamicShow: false,
@@ -153,7 +163,7 @@ export class DirectionPager extends Widget {
             first: false,
             last: false,
             prev: {
-                type: "bi.icon_button",
+                type: IconButton.xtype,
                 value: "prev",
                 title: BI.i18nText("BI-Left_Page"),
                 warningTitle: BI.i18nText("BI-Current_Is_First_Page"),
@@ -162,7 +172,7 @@ export class DirectionPager extends Widget {
                 cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
             },
             next: {
-                type: "bi.icon_button",
+                type: IconButton.xtype,
                 value: "next",
                 title: BI.i18nText("BI-Right_Page"),
                 warningTitle: BI.i18nText("BI-Current_Is_Last_Page"),
@@ -186,56 +196,57 @@ export class DirectionPager extends Widget {
         });
     }
 
-    getVPage () {
+    getVPage() {
         return this.vpager.getCurrentPage();
     }
 
-    getHPage () {
+    getHPage() {
         return this.hpager.getCurrentPage();
     }
 
-    setVPage (v) {
+    setVPage(v) {
         this.vpager.setValue(v);
         this.vlabel.setValue(v);
         this.vlabel.setTitle(v);
     }
 
-    setHPage (v) {
+    setHPage(v) {
         this.hpager.setValue(v);
         this.hlabel.setValue(v);
         this.hlabel.setTitle(v);
     }
 
-    hasVNext () {
+    hasVNext() {
         return this.vpager.hasNext();
     }
 
-    hasHNext () {
+    hasHNext() {
         return this.hpager.hasNext();
     }
 
-    hasVPrev () {
+    hasVPrev() {
         return this.vpager.hasPrev();
     }
 
-    hasHPrev () {
+    hasHPrev() {
         return this.hpager.hasPrev();
     }
 
-    setHPagerVisible (b) {
+    setHPagerVisible(b) {
         this.hpager.setVisible(b);
         this.hlabel.setVisible(b);
     }
 
-    setVPagerVisible (b) {
+    setVPagerVisible(b) {
         this.vpager.setVisible(b);
         this.vlabel.setVisible(b);
     }
 
-    populate () {
+    populate() {
         this.vpager.populate();
         this.hpager.populate();
-        let vShow = false, hShow = false;
+        let vShow = false,
+            hShow = false;
         if (!this.hasHNext() && !this.hasHPrev()) {
             this.setHPagerVisible(false);
         } else {
@@ -268,7 +279,7 @@ export class DirectionPager extends Widget {
         this.layout.resize();
     }
 
-    clear () {
+    clear() {
         this.vpager.attr("curr", 1);
         this.hpager.attr("curr", 1);
     }

src/case/segment/button.segment.js

@@ -1,5 +1,5 @@
+import { Label, BasicButton } from "@/base";
 import { shortcut, extend, createWidget } from "@/core";
-import { BasicButton } from "@/base";
 
 /**
  * 分段控件使用的button
@@ -10,11 +10,11 @@ import { BasicButton } from "@/base";
  */
 @shortcut()
 export class SegmentButton extends BasicButton {
-    static xtype = "bi.segment_button"
+    static xtype = "bi.segment_button";
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`,
             shadow: true,
@@ -27,7 +27,7 @@ export class SegmentButton extends BasicButton {
         super._init(...arguments);
         const opts = this.options;
         this.text = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             element: this,
             textHeight: opts.height,
             whiteSpace: opts.whiteSpace,