Pull request #2224: 无JIRA任务 修复边框不高亮+高度不准确问题

Merge in VISUAL/fineui from ~TELLER/fineui:master to master

* commit '217d08f70329c31057cd78916cee0118958f19e0':
  fix: 修复bi-focus-shadow在下拉框收起时不会blur导致focus-within伪类一直存在的问题
  BI-95299 fix: 修复边框不高亮+高度不准确问题
  chore: 修改eslint

.eslintrc

@@ -27,7 +27,10 @@
   "plugins": ["@typescript-eslint/eslint-plugin"],
   "overrides": [{
     "files": ["src/*.js","src/**/*.js", "demo/*.js", "demo/**/*.js", "i18n/**/*.js", "i18n/*.js", "test/**/*.js", "test/*.js"],
-    "extends": "plugin:@fui/es5"
+    "extends": "plugin:@fui/es5",
+    "rules": {
+      "comma-dangle": ["error", "never"] // 多行对象字面量中要求拖尾逗号
+    }
   }, {
     "files": ["webpack/*.js", "types/*.ts", "typescript/*.ts","typescript/**/*.ts", "./*.js", "lib/**/*.js", "lib/*.js"],
     "extends": "plugin:@fui/typescript"

src/base/combination/combo.js

@@ -296,12 +296,14 @@
                 this.popupView && this.popupView.destroy();
                 this.popupView = null;
                 this._rendered = false;
+            } else {
+                this.popupView && this.popupView.invisible();
+            }
 
             if (!e || !this.combo.element.__isMouseInBounds__(e)) {
                 this.element.removeClass(this.options.hoverClass);
-                }
-            } else {
-                this.popupView && this.popupView.invisible();
+                // 应对bi-focus-shadow在收起时不失焦
+                this.element.blur();
             }
 
             this.element.removeClass(this.options.comboClass);

src/widget/dynamicdate/dynamicdate.combo.js

@@ -30,20 +30,24 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
         this.storeTriggerValue = "";
         var date = BI.getDate();
         this.storeValue = opts.value;
+        
         return {
+            type: "bi.absolute",
+            items: [{
+                el: {
                     type: "bi.htape",
-            cls: "bi-border bi-border-radius",
+                    cls: "bi-border bi-border-radius bi-focus-shadow",
                     items: [{
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                    width: opts.height,
+                            width: opts.height - 2,
                             height: opts.height - 2,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                width: opts.height
+                        width: opts.height - 2
                     }, {
                         type: "bi.absolute",
                         items: [{
@@ -178,7 +182,7 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                                             eventName: BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE,
                                             action: function () {
                                                 var value = self.popup.getValue();
-                                        if(self._checkValue(value)) {
+                                                if (self._checkValue(value)) {
                                                     self.setValue(value);
                                                 }
                                                 self.combo.hideView();
@@ -222,8 +226,8 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                             el: {
                                 type: "bi.icon_button",
                                 cls: "bi-trigger-icon-button date-font",
-                        width: opts.height,
-                        height: opts.height,
+                                width: opts.height - 2,
+                                height: opts.height - 2,
                                 listeners: [{
                                     eventName: BI.IconButton.EVENT_CHANGE,
                                     action: function () {
@@ -245,6 +249,12 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                     ref: function (_ref) {
                         self.comboWrapper = _ref;
                     }
+                },
+                top: 1,
+                left: 1,
+                right: 1,
+                bottom: 1
+            }]
         };
     },
 
@@ -261,7 +271,7 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicDateCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = o.height;
+                this.comboWrapper.attr("items")[0].width = o.height - 2;
                 this.comboWrapper.resize();
                 break;
             default:
@@ -279,6 +289,7 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                 return BI.isNotEmptyObject(v.value);
             case BI.DynamicDateCombo.Static:
                 var value = v.value || {};
+                
                 return !BI.checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0];
             default:
                 return true;

src/widget/dynamicdatetime/dynamicdatetime.combo.js

@@ -30,25 +30,30 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
         this.storeTriggerValue = "";
         var date = BI.getDate();
         this.storeValue = opts.value;
+        
         return {
+            type: "bi.absolute",
+            items: [{
+                el: {
                     type: "bi.htape",
-            cls: "bi-border bi-border-radius",
+                    cls: "bi-border bi-border-radius bi-focus-shadow",
                     items: [{
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                    width: opts.height,
+                            width: opts.height - 2,
                             height: opts.height - 2,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                width: opts.height
+                        width: opts.height - 2
                     }, {
                         type: "bi.absolute",
                         items: [{
                             el: {
                                 type: "bi.combo",
+                                cls: "bi-focus-shadow",
                                 destroyWhenHide: true,
                                 container: opts.container,
                                 ref: function () {
@@ -186,7 +191,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                                             eventName: BI.DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE,
                                             action: function () {
                                                 var value = self.popup.getValue();
-                                        if(self._checkValue(value)) {
+                                                if (self._checkValue(value)) {
                                                     self.setValue(value);
                                                 }
                                                 self.combo.hideView();
@@ -230,8 +235,8 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                             el: {
                                 type: "bi.icon_button",
                                 cls: "bi-trigger-icon-button date-font",
-                        width: opts.height,
-                        height: opts.height,
+                                width: opts.height - 2,
+                                height: opts.height - 2,
                                 listeners: [{
                                     eventName: BI.IconButton.EVENT_CHANGE,
                                     action: function () {
@@ -253,6 +258,12 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                     ref: function (_ref) {
                         self.comboWrapper = _ref;
                     }
+                },
+                top: 1,
+                left: 1,
+                right: 1,
+                bottom: 1
+            }]
         };
     },
 
@@ -269,7 +280,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicDateTimeCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = o.height;
+                this.comboWrapper.attr("items")[0].width = o.height - 2;
                 this.comboWrapper.resize();
                 break;
             default:
@@ -287,6 +298,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                 return BI.isNotEmptyObject(v.value);
             case BI.DynamicDateCombo.Static:
                 var value = v.value || {};
+
                 return !BI.checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0];
             default:
                 return true;

src/widget/year/combo.year.js

@@ -6,7 +6,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         minDate: "1900-01-01", // 最小日期
         maxDate: "2099-12-31", // 最大日期
         height: 24,
-        supportDynamic: true,
+        supportDynamic: true
     },
 
     _init: function () {
@@ -92,7 +92,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
                         eventName: BI.DynamicYearPopup.BUTTON_lABEL_EVENT_CHANGE,
                         action: function () {
                             var date = BI.getDate();
-                            self.setValue({type: BI.DynamicYearCombo.Static, value: {year: date.getFullYear()}});
+                            self.setValue({ type: BI.DynamicYearCombo.Static, value: { year: date.getFullYear() } });
                             self.combo.hideView();
                             self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM);
                         }
@@ -119,9 +119,12 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         });
 
         BI.createWidget({
-            type: "bi.htape",
-            cls: "bi-border bi-border-radius",
+            type: "bi.absolute",
             element: this,
+            items: [{
+                el: {
+                    type: "bi.htape",
+                    cls: "bi-border bi-border-radius bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
                     },
@@ -129,14 +132,20 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                    width: 24,
+                            width: o.height - 2,
                             height: o.height - 2,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                width: 24
+                        width: o.height - 2
                     }, this.combo]
+                },
+                top: 1,
+                left: 1,
+                right: 1,
+                bottom: 1
+            }]
         });
         this._checkDynamicValue(o.value);
     },
@@ -149,7 +158,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
         switch (type) {
             case BI.DynamicYearCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = 24;
+                this.comboWrapper.attr("items")[0].width = this.options.height - 2,
                 this.comboWrapper.resize();
                 break;
             default:

src/widget/yearmonth/combo.yearmonth.js

@@ -93,7 +93,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
                         eventName: BI.DynamicYearMonthPopup.BUTTON_lABEL_EVENT_CHANGE,
                         action: function () {
                             var date = BI.getDate();
-                            self.setValue({type: BI.DynamicYearMonthCombo.Static, value: {year: date.getFullYear(), month: date.getMonth() + 1}});
+                            self.setValue({ type: BI.DynamicYearMonthCombo.Static, value: { year: date.getFullYear(), month: date.getMonth() + 1 } });
                             self.combo.hideView();
                             self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM);
                         }
@@ -123,9 +123,12 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
         });
 
         BI.createWidget({
-            type: "bi.htape",
-            cls: "bi-border bi-border-radius",
+            type: "bi.absolute",
             element: this,
+            items: [{
+                el: {
+                    type: "bi.htape",
+                    cls: "bi-border bi-border-radius bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
                     },
@@ -133,14 +136,20 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                    width: 24,
+                            width:  o.height - 2,
                             height: o.height - 2,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                width: 24
+                        width:  o.height - 2
                     }, this.combo]
+                },
+                top: 1,
+                left: 1,
+                right: 1,
+                bottom: 1
+            }]
         });
         this._checkDynamicValue(o.value);
     },
@@ -153,7 +162,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
         switch (type) {
             case BI.DynamicYearMonthCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = 24;
+                this.comboWrapper.attr("items")[0].width = this.options.height - 2,
                 this.comboWrapper.resize();
                 break;
             default:
@@ -171,6 +180,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
                 return BI.isNotEmptyObject(v.value);
             case BI.DynamicDateCombo.Static:
                 var value = v.value || {};
+
                 return !BI.checkDateVoid(value.year, value.month, 1, o.minDate, o.maxDate)[0];
             default:
                 return true;

src/widget/yearquarter/combo.yearquarter.js

@@ -93,7 +93,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
                         eventName: BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE,
                         action: function () {
                             var date = BI.getDate();
-                            self.setValue({type: BI.DynamicYearMonthCombo.Static, value: {year: date.getFullYear(), quarter: BI.getQuarter(date)}});
+                            self.setValue({ type: BI.DynamicYearMonthCombo.Static, value: { year: date.getFullYear(), quarter: BI.getQuarter(date) } });
                             self.combo.hideView();
                             self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM);
                         }
@@ -123,9 +123,12 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
         });
 
         BI.createWidget({
-            type: "bi.htape",
-            cls: "bi-border bi-border-radius",
+            type: "bi.absolute",
             element: this,
+            items: [{
+                el: {
+                    type: "bi.htape",
+                    cls: "bi-border bi-border-radius bi-focus-shadow",
                     ref: function () {
                         self.comboWrapper = this;
                     },
@@ -133,14 +136,20 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
                         el: {
                             type: "bi.icon_button",
                             cls: "bi-trigger-icon-button date-change-h-font",
-                    width: 24,
+                            width: o.height - 2,
                             height: o.height - 2,
                             ref: function () {
                                 self.changeIcon = this;
                             }
                         },
-                width: 24
+                        width: o.height - 2
                     }, this.combo]
+                },
+                top: 1,
+                left: 1,
+                right: 1,
+                bottom: 1
+            }]
         });
         this._checkDynamicValue(o.value);
     },
@@ -153,7 +162,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
         switch (type) {
             case BI.DynamicYearQuarterCombo.Dynamic:
                 this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = 24;
+                this.comboWrapper.attr("items")[0].width = this.options.height - 2;
                 this.comboWrapper.resize();
                 break;
             default:
@@ -171,6 +180,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
                 return BI.isNotEmptyObject(v.value);
             case BI.DynamicDateCombo.Static:
                 var value = v.value || {};
+
                 return !BI.checkDateVoid(value.year, (value.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0];
             default:
                 return true;