DESIGN-4103 feat: 下拉框组件支持clear,下拉树支持缺失标红

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/textvaluecombo/combo.textvalue.js

@@ -78,14 +78,14 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
     },
 
     _clear: function () {
-        this.trigger.attr("text", "");
         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) {
@@ -93,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

@@ -53,14 +53,15 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
 
         return ({
             type: "bi.horizontal_fill",
+            columnSize: ["fill", o.triggerWidth || o.height],
             items: [
                 {
                     el: text,
                     width: "fill"
                 }, {
+                    el: o.allowClear ? {
                         type: "bi.vertical_adapt",
                         horizontalAlign: "left",
-                    width: o.triggerWidth || o.height,
                         scrollable: false,
                         items: [
                             {
@@ -69,36 +70,22 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
                                     ref: function (_ref) {
                                         self.clearBtn = _ref;
                                     },
-                                cls: "close-h-font",
+                                    cls: "close-h-font " + (o.allowClear ? "clear-button" : ""),
                                     stopPropagation: true,
                                     handler: function () {
                                         self.fireEvent(BI.TextTrigger.EVENT_CLEAR);
-                                    self.clearBtn.setVisible(false);
                                     },
-                                invisible: true,
                                 },
-                            width: o.triggerWidth || o.height
                             }, {
                                 el: triggerButton,
-                            width: o.triggerWidth || o.height
                             }
                         ]
+                    } : triggerButton,
                 }
             ]
         });
     },
 
-    mounted: function () {
-        var self = this;
-        if (this.options.allowClear) {
-            this.element.hover(function () {
-                BI.isKey(self.text.getText()) && self.clearBtn.setVisible(true);
-            }, function () {
-                self.clearBtn.setVisible(false);
-            });
-        }
-    },
-
     getTextor: function () {
         return this.text;
     },
@@ -112,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) {

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

@@ -39,6 +39,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
                 {
                     eventName: BI.TextTrigger.EVENT_CLEAR,
                     action: function () {
+                        self.setText("");
                         self.fireEvent(BI.SelectTextTrigger.EVENT_CLEAR);
                     }
                 }
@@ -70,6 +71,11 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
         }
     },
 
+    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);

src/less/base/combo/combo.less

@@ -1,19 +1,22 @@
 @import "../../index.less";
+
 @val: transform .3s ease;
 .bi-combo {
   & > .bi-trigger {
-    & .bi-trigger-icon-button{
+    & .bi-trigger-icon-button {
       & .x-icon {
         .rotate(0deg);
         .transition(@val);
       }
     }
   }
+
   &.bi-combo-popup {
     display: block !important;
     visibility: visible !important;
+
     & > .bi-trigger {
-      & .bi-trigger-icon-button{
+      & .bi-trigger-icon-button {
         & .x-icon {
           .rotate(180deg);
           .transition(@val);
@@ -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,11 +58,15 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
         this._checkTitle();
     },
 
+    setTipType: function (v) {
+        this.trigger.setTipType(v);
+    },
+
     getValue: function () {
         return this.options.value || [];
     },
 
-    getTextor: function() {
+    getTextor: function () {
         return this.trigger.getTextor();
     },
 
@@ -61,4 +76,5 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
 
 });
 
+BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);