BI-129591 feat: HexColorChooserPopup 支持配置自动和透明

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

@@ -69,6 +69,8 @@ export class HexColorChooserPopup extends Widget {
                                             : HexColorPickerEditor.xtype,
                                         value: o.value,
                                         height: o.simple ? 36 : 70,
+                                        transparent: o.transparent,
+                                        auto: o.auto,
                                         listeners: [
                                             {
                                                 eventName: ColorPickerEditor.EVENT_CHANGE,

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

@@ -41,6 +41,8 @@ export class HexColorPickerEditor extends Widget {
     props = {
         baseCls: "bi-color-picker-editor bi-hex-color-picker-editor",
         height: 30,
+        transparent: true,
+        auto: true,
     };
 
     render() {
@@ -95,11 +97,13 @@ export class HexColorPickerEditor extends Widget {
                                 height: 24,
                                 items: [
                                     {
+                                        el: {
                                             type: ColorChooserShowButton.xtype,
                                             cls: "trans-color-icon",
                                             height: 22,
                                             title: i18nText("BI-Transparent_Color"),
                                             text: i18nText("BI-Transparent_Color"),
+                                            invisible: !this.options.transparent,
                                             listeners: [
                                                 {
                                                     eventName: ColorChooserShowButton.EVENT_CHANGE,
@@ -113,6 +117,8 @@ export class HexColorPickerEditor extends Widget {
                                                 this.transparent = _ref;
                                             },
                                         },
+                                        rgap: this.options.auto ? 5 : 0,
+                                    },
                                     {
                                         el: {
                                             type: ColorChooserShowButton.xtype,
@@ -120,6 +126,7 @@ export class HexColorPickerEditor extends Widget {
                                             height: 22,
                                             title: i18nText("BI-Basic_Auto"),
                                             text: i18nText("BI-Basic_Auto"),
+                                            invisible: !this.options.auto,
                                             listeners: [
                                                 {
                                                     eventName: ColorChooserShowButton.EVENT_CHANGE,
@@ -133,7 +140,7 @@ export class HexColorPickerEditor extends Widget {
                                                 this.none = _ref;
                                             },
                                         },
-                                        lgap: 10,
+                                        lgap: this.options.transparent ? 5 : 0,
                                     }
                                 ],
                             },
@@ -176,6 +183,9 @@ export class HexColorPickerEditor extends Widget {
                                                 {
                                                     eventName: "EVENT_CHANGE",
                                                     action: () => {
+                                                        if (isEmptyString(this.hexEditor.getValue())) {
+                                                            return;
+                                                        }
                                                         this._checkHexEditor();
                                                         if (
                                                             checker(this.storeValue.r) &&
@@ -261,9 +271,6 @@ export class HexColorPickerEditor extends Widget {
     }
 
     _checkHexEditor() {
-        if (isEmptyString(this.hexEditor.getValue())) {
-            this.hexEditor.setValue("000000");
-        }
         const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
         this.storeValue = {
             r: json.r || 0,