Merge pull request #24 in FUI/fineui from ~GUY/fineui:master to master

* commit 'ff195e77a937db627b809c728ffd9ec6d577e235':
  主题

Gruntfile.js

@@ -103,7 +103,7 @@ module.exports = function (grunt) {
                 dest: "dist/widget.js"
             },
             coreCss: {
-                src: ['src/css/core/**/*.css'],
+                src: ['src/css/core/**/*.css', 'src/css/theme/**/*.css'],
                 dest: 'dist/core.css'
             },
             baseCss: {
@@ -202,7 +202,7 @@ module.exports = function (grunt) {
                 dest: "bi/widget.js"
             },
             bi_coreCss: {
-                src: ['src/css/core/**/*.css'],
+                src: ['src/css/core/**/*.css', 'src/css/theme/**/*.css'],
                 dest: 'bi/core.css'
             },
             bi_baseCss: {

bi/base.css

@@ -4,17 +4,6 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-combine-chart .bi-linkage-list {
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  z-index: 1000000000;
-}
-.bi-combine-chart .bi-linkage-list .bi-linkage-list-item:hover {
-  background-color: #f4f4f4;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
 .bi-color-chooser-popup .color-chooser-popup-title {
   background: #f4f4f4;
   border-bottom: 1px solid #d4dadd;
@@ -949,13 +938,6 @@ li.CodeMirror-hint-active {
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-record-editor .record-editor-text {
-  font-size: 12px;
-  background: #f4f4f4;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
 .bi-shelter-editor .shelter-editor-text {
   font-size: 12px;
 }
@@ -1021,9 +1003,6 @@ li.CodeMirror-hint-active {
   border: none;
   color: #e85050 !important;
 }
-.bi-input.disabled {
-  background-color: white;
-}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
@@ -1279,11 +1258,19 @@ li.CodeMirror-hint-active {
 .public-scrollbar-face:after {
   background-color: #c2c2c2;
 }
+.bi-theme-dark .public-scrollbar-face:after {
+  background-color: #7d7d7d;
+}
 .public-scrollbar-main:hover .public-scrollbar-face:after,
 .public-scrollbar-main-active .public-scrollbar-face:after,
 .public-scrollbar-faceActive:after {
   background-color: #7d7d7d;
 }
+.bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after,
+.bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after,
+.bi-theme-dark .public-scrollbar-faceActive:after {
+  background-color: #c2c2c2;
+}
 .horizontal-scrollbar {
   bottom: 0;
   position: absolute;
@@ -1437,3 +1424,7 @@ li.CodeMirror-hint-active {
 .bi-list-view .list-view-toolbar > .first-element {
   border-left: none;
 }
+.bi-theme-dark .bi-list-view .list-view-outer {
+  color: #b2b2b2;
+  background: #191a2c;
+}

bi/case.js

@@ -5225,232 +5225,6 @@ BI.ClearEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
 BI.ClearEditor.EVENT_REMOVE = "EVENT_REMOVE";
 BI.ClearEditor.EVENT_EMPTY = "EVENT_EMPTY";
 BI.shortcut("bi.clear_editor", BI.ClearEditor);/**
- * guy
- * 记录内容的输入框
- * @class BI.RecordEditor
- * @extends BI.Single
- */
-BI.RecordEditor = BI.inherit(BI.Single, {
-    _defaultConfig: function () {
-        var conf = BI.RecordEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-record-editor",
-            hgap: 4,
-            vgap: 2,
-            lgap: 0,
-            rgap: 0,
-            tgap: 0,
-            bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
-            allowBlank: true,
-            watermark: "",
-            errorText: "",
-            height: 30
-        })
-    },
-
-    _init: function () {
-        BI.RecordEditor.superclass._init.apply(this, arguments);
-        this.contents = [];
-        var self = this, o = this.options;
-
-        this.editor = BI.createWidget({
-            type: "bi.editor",
-            height: o.height,
-            hgap: o.hgap,
-            vgap: o.vgap,
-            lgap: o.lgap,
-            rgap: o.rgap,
-            tgap: o.tgap,
-            bgap: o.bgap,
-            value: o.value,
-            validationChecker: o.validationChecker,
-            quitChecker: o.quitChecker,
-            mouseOut: o.mouseOut,
-            allowBlank: o.allowBlank,
-            watermark: o.watermark,
-            errorText: o.errorText
-        });
-        this.textContainer = BI.createWidget({
-            type: "bi.vertical_adapt",
-            hgap: 2,
-            height: o.height
-        });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_FOCUS, function () {
-            self._checkInputState();
-            self.fireEvent(BI.RecordEditor.EVENT_FOCUS, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self._checkInputState();
-            self.fireEvent(BI.RecordEditor.EVENT_BLUR, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_CLICK, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_CHANGE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.RecordEditor.EVENT_KEY_DOWN, arguments);
-        });
-
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_VALID, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_SPACE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self.setState(self.getValue());
-            self.editor.isValid() && self.editor.setValue("");
-            self.fireEvent(BI.RecordEditor.EVENT_CONFIRM, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_START, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_PAUSE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_STOP, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_ENTER, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_BACKSPACE, function () {
-            self._checkInputState();
-        });
-        this.editor.on(BI.Editor.EVENT_REMOVE, function () {
-            if (!BI.isEmpty(self.contents)) {
-                self.contents.pop().destroy();
-                self.setValue(self.getValue());
-                self._adjustInputWidth();
-            }
-        });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_ERROR, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_RESTRICT, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_EMPTY, arguments);
-        });
-        BI.createWidget({
-            type: "bi.inline",
-            element: this,
-            items: [this.textContainer, this.editor]
-        });
-        BI.ResizeDetector.addResizeListener(this, BI.bind(this._adjustInputWidth, this));
-        this._adjustInputWidth();
-    },
-
-    _adjustInputWidth: function () {
-        BI.nextTick(BI.bind(function () {
-            this.editor.element.css("width", this.element.width() - this.textContainer.element.outerWidth() - 10);
-        }, this));
-    },
-
-    _checkInputState: function () {
-        if (BI.isEmpty(this.contents)) {
-            this.editor.enableWarterMark();
-        } else {
-            this.editor.disableWarterMark();
-        }
-    },
-
-    focus: function () {
-        this.editor.focus();
-    },
-
-    blur: function () {
-        this.editor.blur();
-    },
-
-    isValid: function () {
-        return this.editor.isValid();
-    },
-
-    setErrorText: function (text) {
-        this.editor.setErrorText(text);
-    },
-
-    getErrorText: function () {
-        return this.editor.getErrorText();
-    },
-
-    isEditing: function () {
-        return this.editor.isEditing();
-    },
-
-    getLastValidValue: function () {
-        return this.editor.getLastValidValue();
-    },
-
-    setValue: function (k) {
-        this.editor.setValue(k);
-    },
-
-    getValue: function () {
-        return this.editor.getValue();
-    },
-
-    getState: function () {
-        var values = BI.map(this.contents, function (i, lb) {
-            return lb.getText();
-        });
-        if (BI.isNotEmptyString(this.editor.getValue())) {
-            return values.concat([this.editor.getValue()]);
-        }
-        return values;
-    },
-
-    setState: function (v) {
-        BI.RecordEditor.superclass.setValue.apply(this, arguments);
-        v = BI.isArray(v) ? v : (v == "" ? [] : [v]);
-        var contents = this.contents = [];
-        BI.each(v, function (i, lb) {
-            contents.push(BI.createWidget({
-                type: "bi.label",
-                height: 25,
-                cls: "record-editor-text",
-                text: lb
-            }))
-        });
-        this.textContainer.empty();
-        this.textContainer.populate(contents);
-        this.editor.isValid() && this.editor.setValue("");
-        this._checkInputState();
-        this._adjustInputWidth();
-    },
-
-    destroy: function () {
-        BI.Resizers.remove(this.getName());
-        BI.RecordEditor.superclass.destroy.apply(this, arguments);
-    }
-});
-BI.RecordEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.RecordEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.RecordEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.RecordEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.RecordEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-
-BI.RecordEditor.EVENT_START = "EVENT_START";
-BI.RecordEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.RecordEditor.EVENT_STOP = "EVENT_STOP";
-BI.RecordEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.RecordEditor.EVENT_VALID = "EVENT_VALID";
-BI.RecordEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.RecordEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.RecordEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.RecordEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.RecordEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.record_editor", BI.RecordEditor);/**
  * Created by roy on 15/9/14.
  */
 BI.SearchEditor = BI.inherit(BI.Widget, {

bi/core.css

@@ -2958,6 +2958,16 @@
 .bi-list-item.disabled:active {
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item:hover,
+.bi-theme-dark .bi-list-item.hover {
+  background-color: #04070d;
+  color: #ffffff;
+}
+.bi-theme-dark .bi-list-item.disabled,
+.bi-theme-dark .bi-list-item.disabled:hover,
+.bi-theme-dark .bi-list-item.disabled:active {
+  background-color: transparent;
+}
 .bi-list-item-effect.active,
 .bi-list-item-effect:active {
   color: #009de3;
@@ -2965,7 +2975,16 @@
 .bi-list-item-effect.disabled,
 .bi-list-item-effect.disabled:hover,
 .bi-list-item-effect.disabled:active {
-  color: #1a1a1a;
+  color: #c4c6c6;
+}
+.bi-theme-dark .bi-list-item-effect.active,
+.bi-theme-dark .bi-list-item-effect:active {
+  color: #009de3;
+}
+.bi-theme-dark .bi-list-item-effect.disabled,
+.bi-theme-dark .bi-list-item-effect.disabled:hover,
+.bi-theme-dark .bi-list-item-effect.disabled:active {
+  color: #c4c6c6;
 }
 .bi-list-item-hover:hover,
 .bi-list-item-hover.hover {
@@ -2975,9 +2994,20 @@
 .bi-list-item-hover.disabled,
 .bi-list-item-hover.disabled:hover,
 .bi-list-item-hover.disabled:active {
-  color: #1a1a1a;
+  color: #c4c6c6;
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-hover:hover,
+.bi-theme-dark .bi-list-item-hover.hover {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .bi-list-item-hover.disabled,
+.bi-theme-dark .bi-list-item-hover.disabled:hover,
+.bi-theme-dark .bi-list-item-hover.disabled:active {
+  color: #c4c6c6;
+  background-color: transparent;
+}
 .bi-list-item-active:hover,
 .bi-list-item-active.hover {
   background-color: #f4f4f4;
@@ -2992,6 +3022,21 @@
 .bi-list-item-active.disabled:active {
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active:hover,
+.bi-theme-dark .bi-list-item-active.hover {
+  background-color: #04070d;
+  color: #ffffff;
+}
+.bi-theme-dark .bi-list-item-active.active,
+.bi-theme-dark .bi-list-item-active:active {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .bi-list-item-active.disabled,
+.bi-theme-dark .bi-list-item-active.disabled:hover,
+.bi-theme-dark .bi-list-item-active.disabled:active {
+  background-color: transparent;
+}
 .bi-list-item-select:hover,
 .bi-list-item-select.hover {
   color: #009de3;
@@ -3017,6 +3062,31 @@
 .bi-list-item-select.disabled:active .bi-high-light {
   color: #c4c6c6 !important;
 }
+.bi-theme-dark .list-item-select:hover,
+.bi-theme-dark .list-item-select.hover {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .list-item-select:active,
+.bi-theme-dark .list-item-select.active {
+  color: #ffffff;
+  background-color: #009de3;
+}
+.bi-theme-dark .list-item-select:active .bi-high-light,
+.bi-theme-dark .list-item-select.active .bi-high-light {
+  color: #ffffff;
+}
+.bi-theme-dark .list-item-select.disabled,
+.bi-theme-dark .list-item-select.disabled:hover,
+.bi-theme-dark .list-item-select.disabled:active {
+  color: #c4c6c6 !important;
+  background-color: transparent !important;
+}
+.bi-theme-dark .list-item-select.disabled .bi-high-light,
+.bi-theme-dark .list-item-select.disabled:hover .bi-high-light,
+.bi-theme-dark .list-item-select.disabled:active .bi-high-light {
+  color: #c4c6c6 !important;
+}
 /*****************cursor*****************/
 .cursor-pointer {
   cursor: pointer;
@@ -3447,3 +3517,19 @@
   vertical-align: middle;
   content: ' ';
 }
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-theme-dark {
+  background-color: #191a2c;
+  color: #b2b2b2;
+}
+.bi-theme-dark .bi-input {
+  color: #ffffff;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/

bi/core.js

@@ -15830,7 +15830,8 @@ BI.LayerController = BI.inherit(BI.Controller, {
             return this.get(name);
         }
         var widget = BI.createWidget((op.render || {}), {
-            type: "bi.layout"
+            type: "bi.layout",
+            cls: op.cls
         });
         var layout = BI.createWidget({
             type: "bi.absolute",
@@ -17046,6 +17047,14 @@ $(function () {
             return false;
         },
 
+        //获取对比颜色
+        getContrastColor: function (color) {
+            if (this.isDarkColor(color)) {
+                return "#ffffff";
+            }
+            return "#1a1a1a";
+        },
+
         rgb2hex: function (rgbColour) {
             if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
                 return "";

bi/widget.css

@@ -139,35 +139,12 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item .b-font:before {
-  background-color: #f4f4f4;
-}
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled .b-font:before,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled .b-font:before {
-  background-color: #ffffff;
-}
 .bi-down-list-combo .bi-down-list-spliter {
   border-top: 1px solid #eaeaea;
 }
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-popup .bi-down-list-item:hover,
-.bi-down-list-popup .bi-down-list-item.hover {
-  background-color: #f4f4f4;
-}
-.bi-down-list-popup .bi-down-list-item.disabled,
-.bi-down-list-popup .bi-down-list-item.disabled:hover,
-.bi-down-list-popup .bi-down-list-item.disabled:active {
-  background-color: #ffffff;
-}
-.bi-down-list-popup .bi-down-list-item:active {
-  color: #009de3;
-  background-color: #f4f4f4;
-}
 .bi-down-list-popup .bi-down-list-item .list-item-text {
   max-width: 203px;
 }
@@ -359,6 +336,9 @@
   background-color: #ffffff;
   z-index: 1;
 }
+.bi-theme-dark .bi-multi-select-check-selected-button {
+  background-color: #191a2c;
+}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/

bi/widget.js

@@ -5670,7 +5670,7 @@ BI.shortcut("bi.down_list_group", BI.DownListGroup);BI.DownListItem = BI.inherit
     _defaultConfig: function () {
         var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: "bi-down-list-item",
+            baseCls: "bi-down-list-item bi-list-item-active",
             cls: "",
             height: 25,
             logic: {

demo.html

@@ -22,7 +22,7 @@
     <script src="demo/dist/demo.js"></script>
 </head>
 <body>
-<div id="wrapper"></div>
+<div id="wrapper" class="bi-theme-dark"></div>
 
 </body>
 </html>

demo/js/north.js

@@ -22,7 +22,21 @@ Demo.North = BI.inherit(BI.Widget, {
                 }
             }, {
                 el: {
-                    type: "bi.layout"
+                    type: "bi.right",
+                    hgap: 10,
+                    items: [{
+                        type: "bi.text_button",
+                        text: "星空蓝",
+                        handler: function () {
+                            $("#wrapper").removeClass("bi-theme-default").addClass("bi-theme-dark");
+                        }
+                    }, {
+                        type: "bi.text_button",
+                        text: "典雅白",
+                        handler: function () {
+                            $("#wrapper").removeClass("bi-theme-dark").addClass("bi-theme-default");
+                        }
+                    }]
                 }
             }]
         }

dist/base.css

@@ -4,17 +4,6 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-combine-chart .bi-linkage-list {
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  z-index: 1000000000;
-}
-.bi-combine-chart .bi-linkage-list .bi-linkage-list-item:hover {
-  background-color: #f4f4f4;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
 .bi-color-chooser-popup .color-chooser-popup-title {
   background: #f4f4f4;
   border-bottom: 1px solid #d4dadd;
@@ -949,13 +938,6 @@ li.CodeMirror-hint-active {
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-record-editor .record-editor-text {
-  font-size: 12px;
-  background: #f4f4f4;
-}
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
 .bi-shelter-editor .shelter-editor-text {
   font-size: 12px;
 }
@@ -1021,9 +1003,6 @@ li.CodeMirror-hint-active {
   border: none;
   color: #e85050 !important;
 }
-.bi-input.disabled {
-  background-color: white;
-}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
@@ -1279,11 +1258,19 @@ li.CodeMirror-hint-active {
 .public-scrollbar-face:after {
   background-color: #c2c2c2;
 }
+.bi-theme-dark .public-scrollbar-face:after {
+  background-color: #7d7d7d;
+}
 .public-scrollbar-main:hover .public-scrollbar-face:after,
 .public-scrollbar-main-active .public-scrollbar-face:after,
 .public-scrollbar-faceActive:after {
   background-color: #7d7d7d;
 }
+.bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after,
+.bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after,
+.bi-theme-dark .public-scrollbar-faceActive:after {
+  background-color: #c2c2c2;
+}
 .horizontal-scrollbar {
   bottom: 0;
   position: absolute;
@@ -1437,3 +1424,7 @@ li.CodeMirror-hint-active {
 .bi-list-view .list-view-toolbar > .first-element {
   border-left: none;
 }
+.bi-theme-dark .bi-list-view .list-view-outer {
+  color: #b2b2b2;
+  background: #191a2c;
+}

dist/case.js

@@ -5225,232 +5225,6 @@ BI.ClearEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
 BI.ClearEditor.EVENT_REMOVE = "EVENT_REMOVE";
 BI.ClearEditor.EVENT_EMPTY = "EVENT_EMPTY";
 BI.shortcut("bi.clear_editor", BI.ClearEditor);/**
- * guy
- * 记录内容的输入框
- * @class BI.RecordEditor
- * @extends BI.Single
- */
-BI.RecordEditor = BI.inherit(BI.Single, {
-    _defaultConfig: function () {
-        var conf = BI.RecordEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-record-editor",
-            hgap: 4,
-            vgap: 2,
-            lgap: 0,
-            rgap: 0,
-            tgap: 0,
-            bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
-            allowBlank: true,
-            watermark: "",
-            errorText: "",
-            height: 30
-        })
-    },
-
-    _init: function () {
-        BI.RecordEditor.superclass._init.apply(this, arguments);
-        this.contents = [];
-        var self = this, o = this.options;
-
-        this.editor = BI.createWidget({
-            type: "bi.editor",
-            height: o.height,
-            hgap: o.hgap,
-            vgap: o.vgap,
-            lgap: o.lgap,
-            rgap: o.rgap,
-            tgap: o.tgap,
-            bgap: o.bgap,
-            value: o.value,
-            validationChecker: o.validationChecker,
-            quitChecker: o.quitChecker,
-            mouseOut: o.mouseOut,
-            allowBlank: o.allowBlank,
-            watermark: o.watermark,
-            errorText: o.errorText
-        });
-        this.textContainer = BI.createWidget({
-            type: "bi.vertical_adapt",
-            hgap: 2,
-            height: o.height
-        });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_FOCUS, function () {
-            self._checkInputState();
-            self.fireEvent(BI.RecordEditor.EVENT_FOCUS, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self._checkInputState();
-            self.fireEvent(BI.RecordEditor.EVENT_BLUR, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_CLICK, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_CHANGE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.RecordEditor.EVENT_KEY_DOWN, arguments);
-        });
-
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_VALID, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_SPACE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self.setState(self.getValue());
-            self.editor.isValid() && self.editor.setValue("");
-            self.fireEvent(BI.RecordEditor.EVENT_CONFIRM, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_START, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_PAUSE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_STOP, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_ENTER, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_BACKSPACE, function () {
-            self._checkInputState();
-        });
-        this.editor.on(BI.Editor.EVENT_REMOVE, function () {
-            if (!BI.isEmpty(self.contents)) {
-                self.contents.pop().destroy();
-                self.setValue(self.getValue());
-                self._adjustInputWidth();
-            }
-        });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_ERROR, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_RESTRICT, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_EMPTY, arguments);
-        });
-        BI.createWidget({
-            type: "bi.inline",
-            element: this,
-            items: [this.textContainer, this.editor]
-        });
-        BI.ResizeDetector.addResizeListener(this, BI.bind(this._adjustInputWidth, this));
-        this._adjustInputWidth();
-    },
-
-    _adjustInputWidth: function () {
-        BI.nextTick(BI.bind(function () {
-            this.editor.element.css("width", this.element.width() - this.textContainer.element.outerWidth() - 10);
-        }, this));
-    },
-
-    _checkInputState: function () {
-        if (BI.isEmpty(this.contents)) {
-            this.editor.enableWarterMark();
-        } else {
-            this.editor.disableWarterMark();
-        }
-    },
-
-    focus: function () {
-        this.editor.focus();
-    },
-
-    blur: function () {
-        this.editor.blur();
-    },
-
-    isValid: function () {
-        return this.editor.isValid();
-    },
-
-    setErrorText: function (text) {
-        this.editor.setErrorText(text);
-    },
-
-    getErrorText: function () {
-        return this.editor.getErrorText();
-    },
-
-    isEditing: function () {
-        return this.editor.isEditing();
-    },
-
-    getLastValidValue: function () {
-        return this.editor.getLastValidValue();
-    },
-
-    setValue: function (k) {
-        this.editor.setValue(k);
-    },
-
-    getValue: function () {
-        return this.editor.getValue();
-    },
-
-    getState: function () {
-        var values = BI.map(this.contents, function (i, lb) {
-            return lb.getText();
-        });
-        if (BI.isNotEmptyString(this.editor.getValue())) {
-            return values.concat([this.editor.getValue()]);
-        }
-        return values;
-    },
-
-    setState: function (v) {
-        BI.RecordEditor.superclass.setValue.apply(this, arguments);
-        v = BI.isArray(v) ? v : (v == "" ? [] : [v]);
-        var contents = this.contents = [];
-        BI.each(v, function (i, lb) {
-            contents.push(BI.createWidget({
-                type: "bi.label",
-                height: 25,
-                cls: "record-editor-text",
-                text: lb
-            }))
-        });
-        this.textContainer.empty();
-        this.textContainer.populate(contents);
-        this.editor.isValid() && this.editor.setValue("");
-        this._checkInputState();
-        this._adjustInputWidth();
-    },
-
-    destroy: function () {
-        BI.Resizers.remove(this.getName());
-        BI.RecordEditor.superclass.destroy.apply(this, arguments);
-    }
-});
-BI.RecordEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.RecordEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.RecordEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.RecordEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.RecordEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-
-BI.RecordEditor.EVENT_START = "EVENT_START";
-BI.RecordEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.RecordEditor.EVENT_STOP = "EVENT_STOP";
-BI.RecordEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.RecordEditor.EVENT_VALID = "EVENT_VALID";
-BI.RecordEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.RecordEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.RecordEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.RecordEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.RecordEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.record_editor", BI.RecordEditor);/**
  * Created by roy on 15/9/14.
  */
 BI.SearchEditor = BI.inherit(BI.Widget, {

dist/core.css

@@ -2958,6 +2958,16 @@
 .bi-list-item.disabled:active {
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item:hover,
+.bi-theme-dark .bi-list-item.hover {
+  background-color: #04070d;
+  color: #ffffff;
+}
+.bi-theme-dark .bi-list-item.disabled,
+.bi-theme-dark .bi-list-item.disabled:hover,
+.bi-theme-dark .bi-list-item.disabled:active {
+  background-color: transparent;
+}
 .bi-list-item-effect.active,
 .bi-list-item-effect:active {
   color: #009de3;
@@ -2965,7 +2975,16 @@
 .bi-list-item-effect.disabled,
 .bi-list-item-effect.disabled:hover,
 .bi-list-item-effect.disabled:active {
-  color: #1a1a1a;
+  color: #c4c6c6;
+}
+.bi-theme-dark .bi-list-item-effect.active,
+.bi-theme-dark .bi-list-item-effect:active {
+  color: #009de3;
+}
+.bi-theme-dark .bi-list-item-effect.disabled,
+.bi-theme-dark .bi-list-item-effect.disabled:hover,
+.bi-theme-dark .bi-list-item-effect.disabled:active {
+  color: #c4c6c6;
 }
 .bi-list-item-hover:hover,
 .bi-list-item-hover.hover {
@@ -2975,9 +2994,20 @@
 .bi-list-item-hover.disabled,
 .bi-list-item-hover.disabled:hover,
 .bi-list-item-hover.disabled:active {
-  color: #1a1a1a;
+  color: #c4c6c6;
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-hover:hover,
+.bi-theme-dark .bi-list-item-hover.hover {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .bi-list-item-hover.disabled,
+.bi-theme-dark .bi-list-item-hover.disabled:hover,
+.bi-theme-dark .bi-list-item-hover.disabled:active {
+  color: #c4c6c6;
+  background-color: transparent;
+}
 .bi-list-item-active:hover,
 .bi-list-item-active.hover {
   background-color: #f4f4f4;
@@ -2992,6 +3022,21 @@
 .bi-list-item-active.disabled:active {
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active:hover,
+.bi-theme-dark .bi-list-item-active.hover {
+  background-color: #04070d;
+  color: #ffffff;
+}
+.bi-theme-dark .bi-list-item-active.active,
+.bi-theme-dark .bi-list-item-active:active {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .bi-list-item-active.disabled,
+.bi-theme-dark .bi-list-item-active.disabled:hover,
+.bi-theme-dark .bi-list-item-active.disabled:active {
+  background-color: transparent;
+}
 .bi-list-item-select:hover,
 .bi-list-item-select.hover {
   color: #009de3;
@@ -3017,6 +3062,31 @@
 .bi-list-item-select.disabled:active .bi-high-light {
   color: #c4c6c6 !important;
 }
+.bi-theme-dark .list-item-select:hover,
+.bi-theme-dark .list-item-select.hover {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .list-item-select:active,
+.bi-theme-dark .list-item-select.active {
+  color: #ffffff;
+  background-color: #009de3;
+}
+.bi-theme-dark .list-item-select:active .bi-high-light,
+.bi-theme-dark .list-item-select.active .bi-high-light {
+  color: #ffffff;
+}
+.bi-theme-dark .list-item-select.disabled,
+.bi-theme-dark .list-item-select.disabled:hover,
+.bi-theme-dark .list-item-select.disabled:active {
+  color: #c4c6c6 !important;
+  background-color: transparent !important;
+}
+.bi-theme-dark .list-item-select.disabled .bi-high-light,
+.bi-theme-dark .list-item-select.disabled:hover .bi-high-light,
+.bi-theme-dark .list-item-select.disabled:active .bi-high-light {
+  color: #c4c6c6 !important;
+}
 /*****************cursor*****************/
 .cursor-pointer {
   cursor: pointer;
@@ -3447,3 +3517,19 @@
   vertical-align: middle;
   content: ' ';
 }
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-theme-dark {
+  background-color: #191a2c;
+  color: #b2b2b2;
+}
+.bi-theme-dark .bi-input {
+  color: #ffffff;
+}
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/

dist/core.js

@@ -21029,7 +21029,8 @@ BI.LayerController = BI.inherit(BI.Controller, {
             return this.get(name);
         }
         var widget = BI.createWidget((op.render || {}), {
-            type: "bi.layout"
+            type: "bi.layout",
+            cls: op.cls
         });
         var layout = BI.createWidget({
             type: "bi.absolute",
@@ -22670,6 +22671,14 @@ $(function () {
             return false;
         },
 
+        //获取对比颜色
+        getContrastColor: function (color) {
+            if (this.isDarkColor(color)) {
+                return "#ffffff";
+            }
+            return "#1a1a1a";
+        },
+
         rgb2hex: function (rgbColour) {
             if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
                 return "";

dist/widget.css

@@ -139,35 +139,12 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item .b-font:before {
-  background-color: #f4f4f4;
-}
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled .b-font:before,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled .b-font:before {
-  background-color: #ffffff;
-}
 .bi-down-list-combo .bi-down-list-spliter {
   border-top: 1px solid #eaeaea;
 }
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-popup .bi-down-list-item:hover,
-.bi-down-list-popup .bi-down-list-item.hover {
-  background-color: #f4f4f4;
-}
-.bi-down-list-popup .bi-down-list-item.disabled,
-.bi-down-list-popup .bi-down-list-item.disabled:hover,
-.bi-down-list-popup .bi-down-list-item.disabled:active {
-  background-color: #ffffff;
-}
-.bi-down-list-popup .bi-down-list-item:active {
-  color: #009de3;
-  background-color: #f4f4f4;
-}
 .bi-down-list-popup .bi-down-list-item .list-item-text {
   max-width: 203px;
 }
@@ -359,6 +336,9 @@
   background-color: #ffffff;
   z-index: 1;
 }
+.bi-theme-dark .bi-multi-select-check-selected-button {
+  background-color: #191a2c;
+}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/

dist/widget.js

@@ -5670,7 +5670,7 @@ BI.shortcut("bi.down_list_group", BI.DownListGroup);BI.DownListItem = BI.inherit
     _defaultConfig: function () {
         var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: "bi-down-list-item",
+            baseCls: "bi-down-list-item bi-list-item-active",
             cls: "",
             height: 25,
             logic: {

docs/index.html

@@ -12,14 +12,16 @@
           href="../dist/widget.css"/>
     <link rel="stylesheet" type="text/css"
           href="../dist/resource.css"/>
+    <link rel="stylesheet" type="text/css"
+          href="../demo/dist/demo.css"/>
 
     <script src="../dist/core.js"></script>
     <script src="../dist/base.js"></script>
     <script src="../dist/case.js"></script>
     <script src="../dist/widget.js"></script>
+    <script src="../demo/dist/demo.js"></script>
 </head>
 <body>
-<div id="description">Demo</div>
+<div id="wrapper" class="bi-theme-dark"></div>
-<div id="wrapper"></div>
 </body>
 </html>

src/case/editor/editor.record.js

@@ -1,227 +0,0 @@
-/**
- * guy
- * 记录内容的输入框
- * @class BI.RecordEditor
- * @extends BI.Single
- */
-BI.RecordEditor = BI.inherit(BI.Single, {
-    _defaultConfig: function () {
-        var conf = BI.RecordEditor.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-record-editor",
-            hgap: 4,
-            vgap: 2,
-            lgap: 0,
-            rgap: 0,
-            tgap: 0,
-            bgap: 0,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
-            allowBlank: true,
-            watermark: "",
-            errorText: "",
-            height: 30
-        })
-    },
-
-    _init: function () {
-        BI.RecordEditor.superclass._init.apply(this, arguments);
-        this.contents = [];
-        var self = this, o = this.options;
-
-        this.editor = BI.createWidget({
-            type: "bi.editor",
-            height: o.height,
-            hgap: o.hgap,
-            vgap: o.vgap,
-            lgap: o.lgap,
-            rgap: o.rgap,
-            tgap: o.tgap,
-            bgap: o.bgap,
-            value: o.value,
-            validationChecker: o.validationChecker,
-            quitChecker: o.quitChecker,
-            mouseOut: o.mouseOut,
-            allowBlank: o.allowBlank,
-            watermark: o.watermark,
-            errorText: o.errorText
-        });
-        this.textContainer = BI.createWidget({
-            type: "bi.vertical_adapt",
-            hgap: 2,
-            height: o.height
-        });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_FOCUS, function () {
-            self._checkInputState();
-            self.fireEvent(BI.RecordEditor.EVENT_FOCUS, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_BLUR, function () {
-            self._checkInputState();
-            self.fireEvent(BI.RecordEditor.EVENT_BLUR, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CLICK, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_CLICK, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_CHANGE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) {
-            self.fireEvent(BI.RecordEditor.EVENT_KEY_DOWN, arguments);
-        });
-
-        this.editor.on(BI.Editor.EVENT_VALID, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_VALID, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_SPACE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_SPACE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
-            self.setState(self.getValue());
-            self.editor.isValid() && self.editor.setValue("");
-            self.fireEvent(BI.RecordEditor.EVENT_CONFIRM, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_START, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_START, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_PAUSE, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_PAUSE, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_STOP, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_STOP, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_ENTER, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_ENTER, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_BACKSPACE, function () {
-            self._checkInputState();
-        });
-        this.editor.on(BI.Editor.EVENT_REMOVE, function () {
-            if (!BI.isEmpty(self.contents)) {
-                self.contents.pop().destroy();
-                self.setValue(self.getValue());
-                self._adjustInputWidth();
-            }
-        });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_ERROR, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_RESTRICT, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_RESTRICT, arguments);
-        });
-        this.editor.on(BI.Editor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.RecordEditor.EVENT_EMPTY, arguments);
-        });
-        BI.createWidget({
-            type: "bi.inline",
-            element: this,
-            items: [this.textContainer, this.editor]
-        });
-        BI.ResizeDetector.addResizeListener(this, BI.bind(this._adjustInputWidth, this));
-        this._adjustInputWidth();
-    },
-
-    _adjustInputWidth: function () {
-        BI.nextTick(BI.bind(function () {
-            this.editor.element.css("width", this.element.width() - this.textContainer.element.outerWidth() - 10);
-        }, this));
-    },
-
-    _checkInputState: function () {
-        if (BI.isEmpty(this.contents)) {
-            this.editor.enableWarterMark();
-        } else {
-            this.editor.disableWarterMark();
-        }
-    },
-
-    focus: function () {
-        this.editor.focus();
-    },
-
-    blur: function () {
-        this.editor.blur();
-    },
-
-    isValid: function () {
-        return this.editor.isValid();
-    },
-
-    setErrorText: function (text) {
-        this.editor.setErrorText(text);
-    },
-
-    getErrorText: function () {
-        return this.editor.getErrorText();
-    },
-
-    isEditing: function () {
-        return this.editor.isEditing();
-    },
-
-    getLastValidValue: function () {
-        return this.editor.getLastValidValue();
-    },
-
-    setValue: function (k) {
-        this.editor.setValue(k);
-    },
-
-    getValue: function () {
-        return this.editor.getValue();
-    },
-
-    getState: function () {
-        var values = BI.map(this.contents, function (i, lb) {
-            return lb.getText();
-        });
-        if (BI.isNotEmptyString(this.editor.getValue())) {
-            return values.concat([this.editor.getValue()]);
-        }
-        return values;
-    },
-
-    setState: function (v) {
-        BI.RecordEditor.superclass.setValue.apply(this, arguments);
-        v = BI.isArray(v) ? v : (v == "" ? [] : [v]);
-        var contents = this.contents = [];
-        BI.each(v, function (i, lb) {
-            contents.push(BI.createWidget({
-                type: "bi.label",
-                height: 25,
-                cls: "record-editor-text",
-                text: lb
-            }))
-        });
-        this.textContainer.empty();
-        this.textContainer.populate(contents);
-        this.editor.isValid() && this.editor.setValue("");
-        this._checkInputState();
-        this._adjustInputWidth();
-    },
-
-    destroy: function () {
-        BI.Resizers.remove(this.getName());
-        BI.RecordEditor.superclass.destroy.apply(this, arguments);
-    }
-});
-BI.RecordEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.RecordEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.RecordEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.RecordEditor.EVENT_CLICK = "EVENT_CLICK";
-BI.RecordEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
-
-BI.RecordEditor.EVENT_START = "EVENT_START";
-BI.RecordEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.RecordEditor.EVENT_STOP = "EVENT_STOP";
-BI.RecordEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.RecordEditor.EVENT_VALID = "EVENT_VALID";
-BI.RecordEditor.EVENT_ERROR = "EVENT_ERROR";
-BI.RecordEditor.EVENT_ENTER = "EVENT_ENTER";
-BI.RecordEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
-BI.RecordEditor.EVENT_SPACE = "EVENT_SPACE";
-BI.RecordEditor.EVENT_EMPTY = "EVENT_EMPTY";
-
-BI.shortcut("bi.record_editor", BI.RecordEditor);

src/core/controller/controller.layer.js

@@ -68,7 +68,8 @@ BI.LayerController = BI.inherit(BI.Controller, {
             return this.get(name);
         }
         var widget = BI.createWidget((op.render || {}), {
-            type: "bi.layout"
+            type: "bi.layout",
+            cls: op.cls
         });
         var layout = BI.createWidget({
             type: "bi.absolute",

src/core/func/function.js

@@ -117,6 +117,14 @@ $(function () {
             return false;
         },
 
+        //获取对比颜色
+        getContrastColor: function (color) {
+            if (this.isDarkColor(color)) {
+                return "#ffffff";
+            }
+            return "#1a1a1a";
+        },
+
         rgb2hex: function (rgbColour) {
             if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
                 return "";

src/css/base/chart/chart.combine.css

@@ -1,11 +0,0 @@
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-combine-chart .bi-linkage-list {
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  z-index: 1000000000;
-}
-.bi-combine-chart .bi-linkage-list .bi-linkage-list-item:hover {
-  background-color: #f4f4f4;
-}

src/css/base/single/input/input.css

@@ -17,6 +17,3 @@
   border: none;
   color: #e85050 !important;
 }
-.bi-input.disabled {
-  background-color: white;
-}

src/css/base/table/table.grid.scrollbar.css

@@ -80,11 +80,19 @@
 .public-scrollbar-face:after {
   background-color: #c2c2c2;
 }
+.bi-theme-dark .public-scrollbar-face:after {
+  background-color: #7d7d7d;
+}
 .public-scrollbar-main:hover .public-scrollbar-face:after,
 .public-scrollbar-main-active .public-scrollbar-face:after,
 .public-scrollbar-faceActive:after {
   background-color: #7d7d7d;
 }
+.bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after,
+.bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after,
+.bi-theme-dark .public-scrollbar-faceActive:after {
+  background-color: #c2c2c2;
+}
 .horizontal-scrollbar {
   bottom: 0;
   position: absolute;

src/css/base/view/popupview.css

@@ -28,3 +28,7 @@
 .bi-list-view .list-view-toolbar > .first-element {
   border-left: none;
 }
+.bi-theme-dark .bi-list-view .list-view-outer {
+  color: #b2b2b2;
+  background: #191a2c;
+}

src/css/core/utils/common.css

@@ -56,6 +56,16 @@
 .bi-list-item.disabled:active {
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item:hover,
+.bi-theme-dark .bi-list-item.hover {
+  background-color: #04070d;
+  color: #ffffff;
+}
+.bi-theme-dark .bi-list-item.disabled,
+.bi-theme-dark .bi-list-item.disabled:hover,
+.bi-theme-dark .bi-list-item.disabled:active {
+  background-color: transparent;
+}
 .bi-list-item-effect.active,
 .bi-list-item-effect:active {
   color: #009de3;
@@ -63,7 +73,16 @@
 .bi-list-item-effect.disabled,
 .bi-list-item-effect.disabled:hover,
 .bi-list-item-effect.disabled:active {
-  color: #1a1a1a;
+  color: #c4c6c6;
+}
+.bi-theme-dark .bi-list-item-effect.active,
+.bi-theme-dark .bi-list-item-effect:active {
+  color: #009de3;
+}
+.bi-theme-dark .bi-list-item-effect.disabled,
+.bi-theme-dark .bi-list-item-effect.disabled:hover,
+.bi-theme-dark .bi-list-item-effect.disabled:active {
+  color: #c4c6c6;
 }
 .bi-list-item-hover:hover,
 .bi-list-item-hover.hover {
@@ -73,9 +92,20 @@
 .bi-list-item-hover.disabled,
 .bi-list-item-hover.disabled:hover,
 .bi-list-item-hover.disabled:active {
-  color: #1a1a1a;
+  color: #c4c6c6;
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-hover:hover,
+.bi-theme-dark .bi-list-item-hover.hover {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .bi-list-item-hover.disabled,
+.bi-theme-dark .bi-list-item-hover.disabled:hover,
+.bi-theme-dark .bi-list-item-hover.disabled:active {
+  color: #c4c6c6;
+  background-color: transparent;
+}
 .bi-list-item-active:hover,
 .bi-list-item-active.hover {
   background-color: #f4f4f4;
@@ -90,6 +120,21 @@
 .bi-list-item-active.disabled:active {
   background-color: #ffffff;
 }
+.bi-theme-dark .bi-list-item-active:hover,
+.bi-theme-dark .bi-list-item-active.hover {
+  background-color: #04070d;
+  color: #ffffff;
+}
+.bi-theme-dark .bi-list-item-active.active,
+.bi-theme-dark .bi-list-item-active:active {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .bi-list-item-active.disabled,
+.bi-theme-dark .bi-list-item-active.disabled:hover,
+.bi-theme-dark .bi-list-item-active.disabled:active {
+  background-color: transparent;
+}
 .bi-list-item-select:hover,
 .bi-list-item-select.hover {
   color: #009de3;
@@ -115,3 +160,28 @@
 .bi-list-item-select.disabled:active .bi-high-light {
   color: #c4c6c6 !important;
 }
+.bi-theme-dark .list-item-select:hover,
+.bi-theme-dark .list-item-select.hover {
+  color: #009de3;
+  background-color: #04070d;
+}
+.bi-theme-dark .list-item-select:active,
+.bi-theme-dark .list-item-select.active {
+  color: #ffffff;
+  background-color: #009de3;
+}
+.bi-theme-dark .list-item-select:active .bi-high-light,
+.bi-theme-dark .list-item-select.active .bi-high-light {
+  color: #ffffff;
+}
+.bi-theme-dark .list-item-select.disabled,
+.bi-theme-dark .list-item-select.disabled:hover,
+.bi-theme-dark .list-item-select.disabled:active {
+  color: #c4c6c6 !important;
+  background-color: transparent !important;
+}
+.bi-theme-dark .list-item-select.disabled .bi-high-light,
+.bi-theme-dark .list-item-select.disabled:hover .bi-high-light,
+.bi-theme-dark .list-item-select.disabled:active .bi-high-light {
+  color: #c4c6c6 !important;
+}

src/css/resource/app.css

@@ -106,3 +106,17 @@ textarea::-webkit-scrollbar-thumb {
   border-radius: 0;
   background-color: #e2e2e2;
 }
+.bi-theme-dark div::-webkit-scrollbar,
+.bi-theme-dark textarea::-webkit-scrollbar {
+  -webkit-appearance: none;
+  background-color: #191a2c;
+  width: 6px;
+  height: 6px;
+}
+.bi-theme-dark div::-webkit-scrollbar-thumb,
+.bi-theme-dark textarea::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  background-color: #7d7d7d;
+}

src/css/theme/dark.css

@@ -0,0 +1,10 @@
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-theme-dark {
+  background-color: #191a2c;
+  color: #b2b2b2;
+}
+.bi-theme-dark .bi-input {
+  color: #ffffff;
+}

src/css/theme/default.css

@@ -1,7 +1,3 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-record-editor .record-editor-text {
-  font-size: 12px;
-  background: #f4f4f4;
-}

src/css/theme/light.css

@@ -0,0 +1,3 @@
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/

src/css/widget/downlist/combo.downlist.css

@@ -1,16 +1,6 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item .b-font:before {
-  background-color: #f4f4f4;
-}
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled .b-font:before,
-.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled .b-font:before {
-  background-color: #ffffff;
-}
 .bi-down-list-combo .bi-down-list-spliter {
   border-top: 1px solid #eaeaea;
 }

src/css/widget/downlist/popup.downlist.css

@@ -1,19 +1,6 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-down-list-popup .bi-down-list-item:hover,
-.bi-down-list-popup .bi-down-list-item.hover {
-  background-color: #f4f4f4;
-}
-.bi-down-list-popup .bi-down-list-item.disabled,
-.bi-down-list-popup .bi-down-list-item.disabled:hover,
-.bi-down-list-popup .bi-down-list-item.disabled:active {
-  background-color: #ffffff;
-}
-.bi-down-list-popup .bi-down-list-item:active {
-  color: #009de3;
-  background-color: #f4f4f4;
-}
 .bi-down-list-popup .bi-down-list-item .list-item-text {
   max-width: 203px;
 }

src/css/widget/multiselect/trigger/button.checkselected.css

@@ -10,3 +10,6 @@
   background-color: #ffffff;
   z-index: 1;
 }
+.bi-theme-dark .bi-multi-select-check-selected-button {
+  background-color: #191a2c;
+}

src/less/base/chart/chart.combine.less

@@ -1,13 +0,0 @@
-@import "../../bibase";
-.bi-combine-chart {
-  & .bi-linkage-list {
-    background-color: @background-color-default;
-    border: 1px solid @border-color-line;
-    z-index: @zIndex-tip;
-    & .bi-linkage-list-item {
-      &:hover {
-        background-color: @color-bi-background-gray;
-      }
-    }
-  }
-}

src/less/base/single/editor/editor.record.less

@@ -1,8 +0,0 @@
-@import "../../../bibase";
-
-.bi-record-editor{
-  .record-editor-text{
-    font-size: @font-size-12;
-    background: @color-bi-background-gray;
-  }
-}

src/less/base/single/input/input.less

@@ -16,7 +16,4 @@
     border: none;
     color:@color-bi-text-warning !important;
   }
-  &.disabled{
-    background-color: white;
-  }
 }

src/less/base/table/table.grid.scrollbar.less

@@ -7,14 +7,14 @@
   transition-timing-function: ease;
   user-select: none;
   background-color: rgba(0, 0, 0, 0.1);
-  border-radius:5px;
+  border-radius: 5px;
 }
 
 .scrollbar-layout-main-vertical {
   bottom: 0;
   right: 0;
   top: 0;
-  transition-property: background-color ;
+  transition-property: background-color;
   width: 10px;
 }
 
@@ -27,7 +27,7 @@
   bottom: 0;
   height: 10px;
   left: 0;
-  transition-property: background-color ;
+  transition-property: background-color;
   background-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -104,12 +104,26 @@
   background-color: #c2c2c2;
 }
 
+.bi-theme-dark {
+  .public-scrollbar-face:after {
+    background-color: #7d7d7d;
+  }
+}
+
 .public-scrollbar-main:hover .public-scrollbar-face:after,
 .public-scrollbar-main-active .public-scrollbar-face:after,
 .public-scrollbar-faceActive:after {
   background-color: #7d7d7d;
 }
 
+.bi-theme-dark {
+  .public-scrollbar-main:hover .public-scrollbar-face:after,
+  .public-scrollbar-main-active .public-scrollbar-face:after,
+  .public-scrollbar-faceActive:after {
+    background-color: #c2c2c2;
+  }
+}
+
 //horizontalScrollbar
 .horizontal-scrollbar {
   bottom: 0;

src/less/base/view/popupview.less

@@ -1,6 +1,5 @@
 @import "../../bibase";
 
-
 /**********BI.BIListView*************/
 .bi-list-view {
   position: fixed !important;
@@ -8,11 +7,11 @@
   overflow-x: visible !important;
   overflow: visible !important;
   cursor: default;
-  & .list-view-outer{
+  & .list-view-outer {
     border: 1px solid @color-bi-split-dark;
     .border-radius(2px);
     color: @color-bi-text-black;
-    background:@color-bi-background-default;
+    background: @color-bi-background-default;
   }
   & .list-view-toolbar {
     border-top: 1px solid @color-bi-split-light;
@@ -21,8 +20,17 @@
     & > .center-element {
       border-left: 1px solid @color-bi-split-light;
     }
-    & > .first-element{
+    & > .first-element {
       border-left: none;
     }
   }
+}
+
+.bi-theme-dark {
+  .bi-list-view {
+    & .list-view-outer {
+      color: @color-bi-text-theme-dark;
+      background: @color-bi-background-theme-dark;
+    }
+  }
 }

src/less/core/utils/common.less

@@ -39,33 +39,119 @@
 }
 
 //resize
-.bi-resizer{
+.bi-resizer {
-  background:@color-bi-background-virtual-blue;
+  background: @color-bi-background-virtual-blue;
   .opacity(0.8);
   z-index: @zIndex-tip;
 }
 
-.bi-z-index-mask{
+.bi-z-index-mask {
   background-color: @color-bi-background-black;
   .opacity(0.5);
 }
+@color-list-item-hover: #04070d;
 
 .bi-list-item {
   .list-item();
 }
 
+.bi-theme-dark {
+  .bi-list-item {
+    &:hover, &.hover {
+      background-color: @color-list-item-hover;
+      color: @color-bi-text;
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
 .bi-list-item-effect {
   .list-item-effect();
 }
 
+.bi-theme-dark {
+  .bi-list-item-effect {
+    &.active, &:active {
+      color: @color-bi-text-highlight;
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        color: @color-bi-text-disabled;
+      }
+    }
+  }
+}
+
 .bi-list-item-hover {
   .list-item-hover();
 }
 
+.bi-theme-dark {
+  .bi-list-item-hover {
+    &:hover, &.hover {
+      color: @color-bi-text-highlight;
+      background-color: @color-list-item-hover;
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        color: @color-bi-text-disabled;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
 .bi-list-item-active {
   .list-item-active();
 }
 
+.bi-theme-dark {
+  .bi-list-item-active {
+    &:hover, &.hover {
+      background-color: @color-list-item-hover;
+      color: @color-bi-text;
+    }
+    &.active, &:active {
+      color: @color-bi-text-highlight;
+      background-color: @color-list-item-hover;
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
 .bi-list-item-select {
   .list-item-select();
+}
+
+.bi-theme-dark {
+  .list-item-select {
+    &:hover, &.hover {
+      color: @color-bi-text-highlight;
+      background-color: @color-list-item-hover;
+    }
+    &:active, &.active {
+      color: @color-bi-text;
+      background-color: @color-bi-background-highlight;
+      & .bi-high-light {
+        color: @color-bi-text;
+      }
+    }
+    &.disabled {
+      &, &:hover, &:active {
+        color: @color-bi-text-disabled !important;
+        background-color: transparent !important;
+        & .bi-high-light {
+          color: @color-bi-text-disabled !important;
+        }
+      }
+    }
+  }
 }

src/less/image.less

@@ -168,9 +168,9 @@
 }
 
 //
-@color-bi-font-native: #808080;
+@color-bi-font-native: inherit;
 //active
-@color-bi-font-hover: #808080;
+@color-bi-font-hover: inherit;
 //hover
 @color-bi-font-active: #009de3;
 

src/less/lib/colors.less

@@ -3,8 +3,10 @@
 // 色彩库,从constant.less中获取相关颜色,不要出现#xxxxxx
 
 /****** common color(常用颜色,可用于普遍场景) *****/
-//黑色字体颜色
+//默认字体颜色
 @color-bi-text-black: @font-color-normal;
+//深色主题默认字体颜色
+@color-bi-text-theme-dark: #b2b2b2;
 //深灰色字体颜色
 @color-bi-text-dark: @font-color-dark;
 //灰色字体颜色
@@ -26,6 +28,8 @@
 
 //默认背景
 @color-bi-background-default: @background-color-default;
+//深色主题默认背景
+@color-bi-background-theme-dark: #191A2C;
 //普通背景
 @color-bi-background-normal: @background-color-normal;
 //黑色背景

src/less/lib/style.less

@@ -21,7 +21,7 @@
   }
   &.disabled {
     &, &:hover, &:active {
-      color: @color-bi-text-black;
+      color: @color-bi-text-disabled;
     }
   }
 }
@@ -34,7 +34,7 @@
   }
   &.disabled {
     &, &:hover, &:active {
-      color: @color-bi-text-black;
+      color: @color-bi-text-disabled;
       background-color: @color-bi-background-default;
     }
   }

src/less/resource/app.less

@@ -107,4 +107,18 @@ div, textarea {
     .border-radius(0);
     background-color: @scroll-thumb-color;
   }
+}
+.bi-theme-dark{
+  div, textarea {
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      background-color: @color-bi-background-theme-dark;
+      width: 6px;
+      height: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      .border-radius(0);
+      background-color: #7d7d7d;
+    }
+  }
 }

src/less/theme/dark.less

@@ -0,0 +1,9 @@
+@import "../bibase";
+
+.bi-theme-dark {
+  background-color: @color-bi-background-theme-dark;
+  color: @color-bi-text-theme-dark;
+  & .bi-input {
+    color: @color-bi-text;
+  }
+}

src/less/theme/default.less

@@ -0,0 +1,5 @@
+@import "../bibase";
+
+.bi-theme-default{
+
+}

src/less/theme/light.less

@@ -0,0 +1,4 @@
+@import "../bibase";
+
+.bi-theme-light {
+}

src/less/widget/downlist/combo.downlist.less

@@ -4,18 +4,6 @@
 
 .bi-down-list-combo{
   & .down-list-group{
-    &.bi-combo-hover{
-      & .bi-down-list-group-item{
-        &, & .b-font:before{
-          background-color: @color-bi-background-gray;
-        }
-        &:disabled, &.disabled{
-          &, & .b-font:before{
-            background-color: @color-bi-background-default
-          }
-        }
-      }
-    }
   }
   & .bi-down-list-spliter{
     border-top: 1px solid @color-bi-split-light;

src/less/widget/downlist/popup.downlist.less

@@ -2,18 +2,6 @@
 
 .bi-down-list-popup {
   & .bi-down-list-item {
-    &:hover, &.hover {
-      background-color: @color-bi-background-gray;
-    }
-    &.disabled {
-      &, &:hover, &:active {
-        background-color: @color-bi-background-default;
-      }
-    }
-    &:active {
-      color: @color-bi-text-highlight;
-      background-color: @color-bi-background-gray;
-    }
     & .list-item-text {
       max-width: 203px;
     }

src/less/widget/multiselect/trigger/button.checkselected.less

@@ -6,4 +6,10 @@
   color: @color-bi-text-highlight;
   background-color: @color-bi-background-default;
   z-index: 1;
+}
+
+.bi-theme-dark {
+  .bi-multi-select-check-selected-button {
+    background-color: @color-bi-background-theme-dark;
+  }
 }

src/widget/downlist/item.downlist.js

@@ -2,7 +2,7 @@ BI.DownListItem = BI.inherit(BI.Single, {
     _defaultConfig: function () {
         var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: "bi-down-list-item",
+            baseCls: "bi-down-list-item bi-list-item-active",
             cls: "",
             height: 25,
             logic: {