Pull request #2671: 无JIRA feat:单选下拉框支持清除

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

* commit '59b332512a06f79dbfc37b5d999ece082e05f48e':
  DESIGN-4103 feat: 下拉框组件支持clear,下拉树支持缺失标红
  update changelog
  无JIRA feat:单选下拉框支持清除
  Revert "无JIRA bi.search_editor 在有初始值的时候显示clear按钮"
  无JIRA bi.search_editor 在有初始值的时候显示clear按钮

changelog.md

@@ -1,4 +1,19 @@
 # 更新日志
+
+3.0(2022-05)
+- 下拉选择框支持清空
+
+3.0(2022-03)
+- 支持响应式
+- 全面支持Typescript
+- 增加JSX支持
+- 布局组件支持更多动态特性
+- 底层API支持动画
+- 增加WebWorker支持
+- 支持路由
+- 插件支持版本控制
+- Fix数据流支持proxy版本
+
 2.0(2022-01)
 - 提供自定义表单
 

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

@@ -11,6 +11,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
         items: [],
         tipType: "",
         warningTitle: "",
+        allowClear: false,
     },
 
     render: function () {
@@ -48,6 +49,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                         tipType: o.tipType,
                         warningTitle: o.warningTitle,
                         title: o.title,
+                        allowClear: o.allowClear,
                         listeners: [{
                             eventName: BI.SearchTextValueTrigger.EVENT_CHANGE,
                             action: function () {
@@ -55,6 +57,13 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                                 self.combo.hideView();
                                 self.fireEvent(BI.SearchTextValueCombo.EVENT_CHANGE);
                             }
+                        }, {
+                            eventName: BI.SearchTextValueTrigger.EVENT_CLEAR,
+                            action: function () {
+                                self.setValue();
+                                self.combo.hideView();
+                                self.fireEvent(BI.SearchTextValueCombo.EVENT_CHANGE);
+                            }
                         }]
                     },
                     popup: {

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

@@ -111,4 +111,5 @@ BI.SearchTextValueTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
 BI.SearchTextValueTrigger.EVENT_STOP = "EVENT_STOP";
 BI.SearchTextValueTrigger.EVENT_START = "EVENT_START";
 BI.SearchTextValueTrigger.EVENT_CHANGE = "EVENT_CHANGE";
+BI.SearchTextValueTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.search_text_value_trigger", BI.SearchTextValueTrigger);

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

@@ -12,6 +12,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
             text: "",
             value: "",
+            allowClear: false,
         });
     },
 
@@ -33,7 +34,16 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             height: o.height,
             text: o.text,
             value: o.value,
-            warningTitle: o.warningTitle
+            warningTitle: o.warningTitle,
+            allowClear: o.allowClear,
+            listeners: [
+                {
+                    eventName: BI.SelectTextTrigger.EVENT_CLEAR,
+                    action: function () {
+                        self._clear();
+                    }
+                }
+            ],
         });
         this.popup = BI.createWidget({
             type: "bi.text_value_combo_popup",
@@ -67,10 +77,15 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
         }
     },
 
+    _clear: function () {
+        this.setValue();
+    },
+
     _checkError: function (v) {
         if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
             this.trigger.options.tipType = "success";
-            this.element.removeClass("combo-error");
+            this.element.removeClass("error");
+            this.trigger.element.removeClass("error");
         } else {
             v = BI.isArray(v) ? v : [v];
             var result = BI.find(this.options.items, function (idx, item) {
@@ -78,10 +93,12 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             });
             if (BI.isNull(result)) {
                 this.trigger.setTipType("warning");
-                this.element.removeClass("combo-error").addClass("combo-error");
+                this.element.addClass("error");
+                this.trigger.element.addClass("error");
             } else {
                 this.trigger.setTipType("success");
-                this.element.removeClass("combo-error");
+                this.element.removeClass("error");
+                this.trigger.element.removeClass("error");
             }
         }
     },

src/case/trigger/trigger.text.js

@@ -7,25 +7,27 @@
  */
 BI.TextTrigger = BI.inherit(BI.Trigger, {
 
-    _defaultConfig: function () {
+    props: function () {
         var self = this;
-        var conf = BI.TextTrigger.superclass._defaultConfig.apply(this, arguments);
+        return {
-        return BI.extend(conf, {
+            baseCls: "bi-text-trigger",
-            baseCls: (conf.baseCls || "") + " bi-text-trigger",
             height: 24,
             textHgap: 6,
             textCls: "",
+            allowClear: false,
             title: function () {
                 return self.text.getText();
             }
-        });
+        };
     },
 
-    _init: function () {
+    render: function () {
-        BI.TextTrigger.superclass._init.apply(this, arguments);
         var self = this, o = this.options, c = this._const;
-        this.text = BI.createWidget({
+        var text = {
             type: "bi.label",
+            ref: function (_ref) {
+                self.text = _ref;
+            },
             cls: "select-text-label" + (BI.isKey(o.textCls) ? (" " + o.textCls) : ""),
             textAlign: "left",
             height: o.height,
@@ -39,22 +41,46 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
             tgap: o.textTgap,
             bgap: o.textBgap,
             readonly: o.readonly
-        });
+        };
-        this.trigerButton = BI.createWidget({
+
+        var triggerButton = {
             type: "bi.trigger_icon_button",
+            ref: function (_ref) {
+                self.triggerButton = _ref;
+            },
             width: o.triggerWidth || o.height
-        });
+        };
 
-        BI.createWidget({
+        return ({
-            element: this,
             type: "bi.horizontal_fill",
+            columnSize: ["fill", o.triggerWidth || o.height],
             items: [
                 {
-                    el: this.text,
+                    el: text,
                     width: "fill"
                 }, {
-                    el: this.trigerButton,
+                    el: o.allowClear ? {
-                    width: o.triggerWidth || o.height
+                        type: "bi.vertical_adapt",
+                        horizontalAlign: "left",
+                        scrollable: false,
+                        items: [
+                            {
+                                el: {
+                                    type: "bi.icon_button",
+                                    ref: function (_ref) {
+                                        self.clearBtn = _ref;
+                                    },
+                                    cls: "close-h-font " + (o.allowClear ? "clear-button" : ""),
+                                    stopPropagation: true,
+                                    handler: function () {
+                                        self.fireEvent(BI.TextTrigger.EVENT_CLEAR);
+                                    },
+                                },
+                            }, {
+                                el: triggerButton,
+                            }
+                        ]
+                    } : triggerButton,
                 }
             ]
         });
@@ -73,6 +99,9 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
 
     setText: function (text) {
         this.text.setText(text);
+        if (this.options.allowClear) {
+            this.clearBtn.setVisible(BI.isNotEmptyString(text));
+        }
     },
 
     setTipType: function (v) {
@@ -80,4 +109,6 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
         this.options.tipType = v;
     }
 });
+
+BI.TextTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.text_trigger", BI.TextTrigger);

src/case/trigger/trigger.text.select.js

@@ -11,6 +11,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
         return BI.extend(BI.SelectTextTrigger.superclass._defaultConfig.apply(this, arguments), {
             baseCls: "bi-select-text-trigger",
             height: 24,
+            allowClear: false,
         });
     },
 
@@ -32,7 +33,17 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
             textTgap: o.textTgap,
             textBgap: o.textBgap,
             tipType: o.tipType,
-            warningTitle: o.warningTitle
+            warningTitle: o.warningTitle,
+            allowClear: o.allowClear,
+            listeners: [
+                {
+                    eventName: BI.TextTrigger.EVENT_CLEAR,
+                    action: function () {
+                        self.setText("");
+                        self.fireEvent(BI.SelectTextTrigger.EVENT_CLEAR);
+                    }
+                }
+            ]
         });
     },
 
@@ -51,15 +62,20 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
             return {
                 textCls: "",
                 text: result.join(",")
-            }
+            };
         } else {
             return {
                 textCls: "bi-water-mark",
                 text: BI.isFunction(o.text) ? o.text() : o.text
-            }
+            };
         }
     },
 
+    setText: function (text) {
+        this.options.text = text;
+        this.trigger.setText(text);
+    },
+
     setValue: function (vals) {
         var formatValue = this._digest(vals, this.options.items);
         this.trigger.setTextCls(formatValue.textCls);
@@ -78,4 +94,6 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
         this.options.items = items;
     }
 });
+
+BI.SelectTextTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.select_text_trigger", BI.SelectTextTrigger);

src/less/base/combo/combo.less

@@ -1,4 +1,5 @@
 @import "../../index.less";
+
 @val: transform .3s ease;
 .bi-combo {
   & > .bi-trigger {
@@ -9,9 +10,11 @@
       }
     }
   }
+
   &.bi-combo-popup {
     display: block !important;
     visibility: visible !important;
+
     & > .bi-trigger {
       & .bi-trigger-icon-button {
         & .x-icon {
@@ -21,11 +24,13 @@
       }
     }
   }
+
   &.bi-combo-popup, &.bi-combo-hover, &:hover {
     &.bi-border, &.bi-border-bottom {
       border-color: @color-bi-border-hover-combo;
     }
   }
+
   &.disabled {
     &.bi-combo-hover, &:hover {
       &.bi-border, &.bi-border-bottom {
@@ -33,6 +38,14 @@
       }
     }
   }
+
+  &.error {
+    &.bi-combo-hover, &:hover {
+      &.bi-border, &.bi-border-bottom {
+        border-color: @border-color-negative;
+      }
+    }
+  }
 }
 
 .bi-theme-dark {

src/less/base/combo/combo.textvalue.less

@@ -1,14 +0,0 @@
-@import "../../index.less";
-
-.bi-text-value-combo {
-  &.combo-error {
-    & .bi-select-text-trigger {
-      & .select-text-label {
-        color: @color-bi-text-error-hover-text-value-combo;
-      }
-    }
-    &.bi-border, &.bi-border-bottom {
-      border-color: @border-color-negative;
-    }
-  }
-}

src/less/base/trigger/trigger.text.less

@@ -0,0 +1,11 @@
+@import "../../index.less";
+
+.bi-text-trigger {
+  &.error .select-text-label {
+    color: @color-bi-text-error-text-trigger;
+  }
+  
+  &:where(:not(&:hover)) .clear-button {
+    display: none;
+  }
+}

src/less/lib/theme.less

@@ -179,6 +179,7 @@
 @color-bi-border-hover-text-value-down-list-combo: @color-bi-border-highlight;
 @color-bi-border-hover-text-value-check-combo: @color-bi-border-highlight;
 @color-bi-text-error-hover-text-value-combo: @color-bi-text-failure;
+@color-bi-text-error-text-trigger: @color-bi-text-failure;
 @color-bi-text-error-hover-text-value-icon-combo: @color-bi-text-failure;
 @color-bi-text-error-hover-search-text-value-combo: @color-bi-text-failure;
 @color-bi-background-bubble-combo-triangle: @color-bi-background-default;

src/widget/selecttree/selecttree.combo.js

@@ -11,6 +11,7 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
             text: "",
             items: [],
             value: "",
+            allowClear: false,
         });
     },
 
@@ -25,7 +26,13 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
             text: o.text,
             height: o.height,
             items: o.items,
-            value: o.value
+            value: o.value,
+            allowClear: o.allowClear,
+            warningTitle: o.warningTitle,
+        });
+
+        this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () {
+            self._clear();
         });
 
         this.popup = BI.createWidget({
@@ -53,12 +60,43 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
             self.setValue(self.popup.getValue());
             self.combo.hideView();
         });
+
+        if (BI.isKey(o.value)) {
+            this._checkError(o.value);
+        }
+    },
+
+    _checkError: function (v) {
+        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+            this.trigger.options.tipType = "success";
+            this.trigger.element.removeClass("error");
+            this.element.removeClass("error");
+        } else {
+            v = BI.isArray(v) ? v : [v];
+            var result = BI.find(this.options.items, function (idx, item) {
+                return BI.contains(v, item.value);
+            });
+            if (BI.isNull(result)) {
+                this.trigger.setTipType("warning");
+                this.element.removeClass("error").addClass("error");
+                this.trigger.element.removeClass("error").addClass("error");
+            } else {
+                this.trigger.setTipType("success");
+                this.trigger.element.removeClass("error");
+                this.element.removeClass("error");
+            }
+        }
+    },
+
+    _clear: function () {
+        this.setValue([]);
     },
 
     setValue: function (v) {
         v = BI.isArray(v) ? v : [v];
         this.trigger.setValue(v);
         this.popup.setValue(v);
+        this._checkError(v);
     },
 
     getValue: function () {

src/widget/singletree/singletree.combo.js

@@ -12,6 +12,7 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
             text: "",
             items: [],
             value: "",
+            allowClear: false,
         });
     },
 
@@ -26,9 +27,15 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
             text: o.text,
             height: o.height,
             items: o.items,
-            value: o.value
+            value: o.value,
+            allowClear: o.allowClear,
+            warningTitle: o.warningTitle,
         }, o.trigger));
 
+        this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () {
+            self._clear();
+        });
+
         this.popup = BI.createWidget({
             type: "bi.single_level_tree",
             items: o.items,
@@ -58,6 +65,36 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
             self.combo.hideView();
             self.fireEvent(BI.SingleTreeCombo.EVENT_CHANGE);
         });
+
+        if (BI.isKey(o.value)) {
+            this._checkError(o.value);
+        }
+    },
+
+    _checkError: function (v) {
+        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+            this.trigger.options.tipType = "success";
+            this.trigger.element.removeClass("error");
+            this.element.removeClass("error");
+        } else {
+            v = BI.isArray(v) ? v : [v];
+            var result = BI.find(this.options.items, function (idx, item) {
+                return BI.contains(v, item.value);
+            });
+            if (BI.isNull(result)) {
+                this.trigger.setTipType("warning");
+                this.element.removeClass("error").addClass("error");
+                this.trigger.element.removeClass("error").addClass("error");
+            } else {
+                this.trigger.setTipType("success");
+                this.trigger.element.removeClass("error");
+                this.element.removeClass("error");
+            }
+        }
+    },
+
+    _clear: function () {
+        this.setValue([]);
     },
 
     populate: function (items) {
@@ -68,6 +105,7 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
         v = BI.isArray(v) ? v : [v];
         this.trigger.setValue(v);
         this.popup.setValue(v);
+        this._checkError(v);
     },
 
     getValue: function () {

src/widget/singletree/singletree.trigger.js

@@ -11,7 +11,8 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
             height: 24,
             text: "",
             items: [],
-            value: ""
+            value: "",
+            allowClear: false,
         });
     },
 
@@ -26,7 +27,17 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
             text: o.text,
             items: o.items,
             height: o.height,
-            value: o.value
+            warningTitle: o.warningTitle,
+            value: o.value,
+            allowClear: o.allowClear,
+            listeners: [
+                {
+                    eventName: BI.SelectTextTrigger.EVENT_CLEAR,
+                    action: function () {
+                        self.fireEvent(BI.SingleTreeTrigger.EVENT_CLEAR);
+                    }
+                }
+            ]
         });
     },
 
@@ -47,6 +58,10 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
         this._checkTitle();
     },
 
+    setTipType: function (v) {
+        this.trigger.setTipType(v);
+    },
+
     getValue: function () {
         return this.options.value || [];
     },
@@ -61,4 +76,5 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
 
 });
 
+BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);