vxe-pc-ui 4.20.24 → 4.20.26

package/es/color-picker/src/color-picker.js

@@ -1,13 +1,14 @@
 import { watch, computed, provide, ref, inject, Teleport, h, nextTick, reactive, onMounted, onUnmounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { VxeUI, getIcon, getConfig, getI18n, globalEvents, createEvent, useSize, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from "../../ui/src/dom";
 import { getLastZIndex, nextZIndex } from "../../ui/src/utils";
 import { parseValColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHexVal, hexToRgb, hsvToRgb, toValRgb } from "./util";
 import VxeButtonComponent from "../../button";
 import VxeInputComponent from "../../input";
 import VxeNumberInputComponent from "../../number-input";
+const { getIcon, getConfig, getI18n, globalEvents, createEvent, useFns, renderEmptyElement } = VxeUI;
 var color_picker_default = defineVxeComponent({
   name: "VxeColorPicker",
   props: {
@@ -79,12 +80,7 @@ var color_picker_default = defineVxeComponent({
     },
     popupConfig: Object
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "clear",
-    "click"
-  ],
+  emits: ["update:modelValue", "change", "clear", "click"],
   setup(props, context) {
     const { emit } = context;
     const $xeModal = inject("$xeModal", null);
@@ -95,7 +91,7 @@ var color_picker_default = defineVxeComponent({
     const formItemInfo = inject("xeFormItemInfo", null);
     const WinEyeDropper = typeof window !== "undefined" ? window.EyeDropper : null;
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const refElem = ref();
     const refInputTarget = ref();
     const refOptionPanel = ref();
@@ -653,28 +649,32 @@ var color_picker_default = defineVxeComponent({
       const { showColorExtractor } = props;
       const { panelColor } = reactData;
       if (showColorExtractor) {
-        return h("div", {
-          ref: refColorPanelElem,
-          class: "vxe-color-picker--color-wrapper",
-          onMousedown: handleSelectColorMousedownEvent
-        }, [
-          h("div", {
-            class: "vxe-color-picker--color-bg",
-            style: {
-              backgroundColor: panelColor
-            }
-          }),
-          h("div", {
-            class: "vxe-color-picker--white-bg"
-          }),
-          h("div", {
-            class: "vxe-color-picker--black-bg"
-          }),
-          h("div", {
-            ref: refColorActiveElem,
-            class: "vxe-color-picker--color-active"
-          })
-        ]);
+        return h(
+          "div",
+          {
+            ref: refColorPanelElem,
+            class: "vxe-color-picker--color-wrapper",
+            onMousedown: handleSelectColorMousedownEvent
+          },
+          [
+            h("div", {
+              class: "vxe-color-picker--color-bg",
+              style: {
+                backgroundColor: panelColor
+              }
+            }),
+            h("div", {
+              class: "vxe-color-picker--white-bg"
+            }),
+            h("div", {
+              class: "vxe-color-picker--black-bg"
+            }),
+            h("div", {
+              ref: refColorActiveElem,
+              class: "vxe-color-picker--color-active"
+            })
+          ]
+        );
       }
       return renderEmptyElement($xeColorPicker);
     };
@@ -683,248 +683,338 @@ var color_picker_default = defineVxeComponent({
       const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
       const isRgb = computeIsRgb.value;
       const selectTypeItem = computeSelectTypeItem.value;
-      return h("div", {
-        class: "vxe-color-picker--bar-wrapper"
-      }, [
-        h("div", {
-          class: "vxe-color-picker--slider-wrapper"
-        }, [
-          showEyeDropper && WinEyeDropper ? h("div", {
-            class: "vxe-color-picker--color-dropper"
-          }, [
-            h("span", {
-              class: "vxe-color-picker--color-dropper-btn",
-              onClick: handleEyeDropperEvent
-            }, [
-              h("i", {
-                class: getIcon().COLOR_PICKER_EYE_DROPPER
-              })
-            ])
-          ]) : renderEmptyElement($xeColorPicker),
-          h("div", {
-            class: "vxe-color-picker--slider-preview"
-          }, [
-            h("div", {
-              class: "vxe-color-picker--preview-btn"
-            }, [
-              h("div", {
-                class: "vxe-color-picker--preview-color",
-                style: {
-                  backgroundColor: selectColor
-                }
-              }, clickToCopy ? [
-                h("span", {
-                  class: "vxe-color-picker--preview-copy-btn",
-                  onClick: handleCopyColorEvent
-                }, [
-                  h("i", {
-                    class: getIcon().COLOR_PICKER_COLOR_COPY
-                  })
-                ])
-              ] : [])
-            ])
-          ]),
-          h("div", {
-            class: "vxe-color-picker--slider-handle"
-          }, [
-            h("div", {
-              ref: refHueSliderElem,
-              class: "vxe-color-picker--bar-hue-slider",
-              onClick: handleHueBarEvent
-            }, [
-              h("div", {
-                ref: refHueSliderBtnElem,
-                class: "vxe-color-picker--bar-hue-btn",
-                onMousedown: handleHueSliderMousedownEvent
-              })
-            ]),
-            showAlpha ? h("div", {
-              ref: refAlphaSliderElem,
-              class: "vxe-color-picker--bar-alpha-slider",
-              onClick: handleAlphaBarEvent
-            }, [
-              h("div", {
-                class: "vxe-color-picker--bar-alpha-bg",
-                style: {
-                  background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${panelColor})`
-                }
-              }),
-              h("div", {
-                ref: refAlphaSliderBtnElem,
-                class: "vxe-color-picker--bar-alpha-btn",
-                onMousedown: handleAlphaSliderMousedownEvent
-              })
-            ]) : renderEmptyElement($xeColorPicker)
-          ])
-        ]),
-        h("div", {
-          class: "vxe-color-picker--custom-wrapper"
-        }, [
-          h("div", {
-            class: "vxe-color-picker--type-switch"
-          }, [
-            h("div", {
-              class: "vxe-color-picker--type-label",
-              onClick: toggleTypeVisibleEvent
-            }, [
-              h("span", `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
-              h("span", {
-                class: "vxe-color-picker--type-icon"
-              }, [
-                h("i", {
-                  class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
-                })
-              ])
-            ]),
-            h("div", {
-              class: ["vxe-color-picker--type-popup", {
-                "is--visible": showTypePopup
-              }]
-            }, typeList.map((item) => {
-              return h("div", {
-                class: "vxe-color-picker--type-item",
-                onClick(evnt) {
-                  evnt.stopPropagation();
-                  handleChangeType(item.value);
-                }
-              }, item.label);
-            }))
-          ]),
-          h("div", {
-            class: `vxe-color-picker--${selectTyle}-wrapper`
-          }, isRgb ? [
-            h("div", {
-              class: "vxe-color-picker--input-wrapper"
-            }, [
-              h(VxeNumberInputComponent, {
-                type: "integer",
-                size: "mini",
-                align: "center",
-                min: 0,
-                max: 255,
-                maxLength: 3,
-                placeholder: "",
-                modelValue: rValue,
-                controlConfig: {
-                  showButton: false
-                },
-                "onUpdate:modelValue"(val) {
-                  reactData.rValue = val;
-                },
-                onChange: handleInputRgbEvent
-              }),
-              h(VxeNumberInputComponent, {
-                type: "integer",
-                size: "mini",
-                align: "center",
-                min: 0,
-                max: 255,
-                maxLength: 3,
-                placeholder: "",
-                modelValue: gValue,
-                controlConfig: {
-                  showButton: false
-                },
-                "onUpdate:modelValue"(val) {
-                  reactData.gValue = val;
-                },
-                onChange: handleInputRgbEvent
-              }),
-              h(VxeNumberInputComponent, {
-                type: "integer",
-                size: "mini",
-                align: "center",
-                min: 0,
-                max: 255,
-                maxLength: 3,
-                placeholder: "",
-                modelValue: bValue,
-                controlConfig: {
-                  showButton: false
+      return h(
+        "div",
+        {
+          class: "vxe-color-picker--bar-wrapper"
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-color-picker--slider-wrapper"
+            },
+            [
+              showEyeDropper && WinEyeDropper ? h(
+                "div",
+                {
+                  class: "vxe-color-picker--color-dropper"
                 },
-                "onUpdate:modelValue"(val) {
-                  reactData.bValue = val;
+                [
+                  h(
+                    "span",
+                    {
+                      class: "vxe-color-picker--color-dropper-btn",
+                      onClick: handleEyeDropperEvent
+                    },
+                    [
+                      h("i", {
+                        class: getIcon().COLOR_PICKER_EYE_DROPPER
+                      })
+                    ]
+                  )
+                ]
+              ) : renderEmptyElement($xeColorPicker),
+              h(
+                "div",
+                {
+                  class: "vxe-color-picker--slider-preview"
                 },
-                onChange: handleInputRgbEvent
-              }),
-              h(VxeNumberInputComponent, {
-                type: "number",
-                size: "mini",
-                align: "center",
-                min: 0,
-                max: 1,
-                step: 0.01,
-                maxLength: 4,
-                placeholder: "",
-                modelValue: aValue,
-                controlConfig: {
-                  showButton: false
+                [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--preview-btn"
+                    },
+                    [
+                      h(
+                        "div",
+                        {
+                          class: "vxe-color-picker--preview-color",
+                          style: {
+                            backgroundColor: selectColor
+                          }
+                        },
+                        clickToCopy ? [
+                          h(
+                            "span",
+                            {
+                              class: "vxe-color-picker--preview-copy-btn",
+                              onClick: handleCopyColorEvent
+                            },
+                            [
+                              h("i", {
+                                class: getIcon().COLOR_PICKER_COLOR_COPY
+                              })
+                            ]
+                          )
+                        ] : []
+                      )
+                    ]
+                  )
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-color-picker--slider-handle"
                 },
-                "onUpdate:modelValue"(val) {
-                  reactData.aValue = val;
+                [
+                  h(
+                    "div",
+                    {
+                      ref: refHueSliderElem,
+                      class: "vxe-color-picker--bar-hue-slider",
+                      onClick: handleHueBarEvent
+                    },
+                    [
+                      h("div", {
+                        ref: refHueSliderBtnElem,
+                        class: "vxe-color-picker--bar-hue-btn",
+                        onMousedown: handleHueSliderMousedownEvent
+                      })
+                    ]
+                  ),
+                  showAlpha ? h(
+                    "div",
+                    {
+                      ref: refAlphaSliderElem,
+                      class: "vxe-color-picker--bar-alpha-slider",
+                      onClick: handleAlphaBarEvent
+                    },
+                    [
+                      h("div", {
+                        class: "vxe-color-picker--bar-alpha-bg",
+                        style: {
+                          background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${panelColor})`
+                        }
+                      }),
+                      h("div", {
+                        ref: refAlphaSliderBtnElem,
+                        class: "vxe-color-picker--bar-alpha-btn",
+                        onMousedown: handleAlphaSliderMousedownEvent
+                      })
+                    ]
+                  ) : renderEmptyElement($xeColorPicker)
+                ]
+              )
+            ]
+          ),
+          h(
+            "div",
+            {
+              class: "vxe-color-picker--custom-wrapper"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-color-picker--type-switch"
                 },
-                onChange: handleInputAlphaEvent
-              })
-            ]),
-            h("div", {
-              class: "vxe-color-picker--input-title"
-            }, [
-              h("span", "R"),
-              h("span", "G"),
-              h("span", "B"),
-              h("span", "A")
-            ])
-          ] : [
-            h("div", {
-              class: "vxe-color-picker--input-wrapper"
-            }, [
-              h(VxeInputComponent, {
-                type: "text",
-                size: "mini",
-                align: "center",
-                maxLength: 9,
-                placeholder: "",
-                modelValue: hexValue,
-                "onUpdate:modelValue"(val) {
-                  reactData.hexValue = val;
+                [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--type-label",
+                      onClick: toggleTypeVisibleEvent
+                    },
+                    [
+                      h("span", `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
+                      h(
+                        "span",
+                        {
+                          class: "vxe-color-picker--type-icon"
+                        },
+                        [
+                          h("i", {
+                            class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
+                          })
+                        ]
+                      )
+                    ]
+                  ),
+                  h(
+                    "div",
+                    {
+                      class: [
+                        "vxe-color-picker--type-popup",
+                        {
+                          "is--visible": showTypePopup
+                        }
+                      ]
+                    },
+                    typeList.map((item) => {
+                      return h(
+                        "div",
+                        {
+                          class: "vxe-color-picker--type-item",
+                          onClick(evnt) {
+                            evnt.stopPropagation();
+                            handleChangeType(item.value);
+                          }
+                        },
+                        item.label
+                      );
+                    })
+                  )
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: `vxe-color-picker--${selectTyle}-wrapper`
                 },
-                onChange() {
-                  const colorRest = parseValColor(reactData.hexValue);
-                  if (colorRest) {
-                    if (colorRest.value) {
-                      reactData.selectColor = colorRest.value;
-                      updateModelColor();
-                    }
-                  }
-                }
-              })
-            ]),
-            h("div", {
-              class: "vxe-color-picker--input-title"
-            }, getI18n("vxe.colorPicker.hex"))
-          ])
-        ])
-      ]);
+                isRgb ? [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-wrapper"
+                    },
+                    [
+                      h(VxeNumberInputComponent, {
+                        type: "integer",
+                        size: "mini",
+                        align: "center",
+                        min: 0,
+                        max: 255,
+                        maxLength: 3,
+                        placeholder: "",
+                        modelValue: rValue,
+                        controlConfig: {
+                          showButton: false
+                        },
+                        "onUpdate:modelValue"(val) {
+                          reactData.rValue = val;
+                        },
+                        onChange: handleInputRgbEvent
+                      }),
+                      h(VxeNumberInputComponent, {
+                        type: "integer",
+                        size: "mini",
+                        align: "center",
+                        min: 0,
+                        max: 255,
+                        maxLength: 3,
+                        placeholder: "",
+                        modelValue: gValue,
+                        controlConfig: {
+                          showButton: false
+                        },
+                        "onUpdate:modelValue"(val) {
+                          reactData.gValue = val;
+                        },
+                        onChange: handleInputRgbEvent
+                      }),
+                      h(VxeNumberInputComponent, {
+                        type: "integer",
+                        size: "mini",
+                        align: "center",
+                        min: 0,
+                        max: 255,
+                        maxLength: 3,
+                        placeholder: "",
+                        modelValue: bValue,
+                        controlConfig: {
+                          showButton: false
+                        },
+                        "onUpdate:modelValue"(val) {
+                          reactData.bValue = val;
+                        },
+                        onChange: handleInputRgbEvent
+                      }),
+                      h(VxeNumberInputComponent, {
+                        type: "number",
+                        size: "mini",
+                        align: "center",
+                        min: 0,
+                        max: 1,
+                        step: 0.01,
+                        maxLength: 4,
+                        placeholder: "",
+                        modelValue: aValue,
+                        controlConfig: {
+                          showButton: false
+                        },
+                        "onUpdate:modelValue"(val) {
+                          reactData.aValue = val;
+                        },
+                        onChange: handleInputAlphaEvent
+                      })
+                    ]
+                  ),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-title"
+                    },
+                    [h("span", "R"), h("span", "G"), h("span", "B"), h("span", "A")]
+                  )
+                ] : [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-wrapper"
+                    },
+                    [
+                      h(VxeInputComponent, {
+                        type: "text",
+                        size: "mini",
+                        align: "center",
+                        maxLength: 9,
+                        placeholder: "",
+                        modelValue: hexValue,
+                        "onUpdate:modelValue"(val) {
+                          reactData.hexValue = val;
+                        },
+                        onChange() {
+                          const colorRest = parseValColor(reactData.hexValue);
+                          if (colorRest) {
+                            if (colorRest.value) {
+                              reactData.selectColor = colorRest.value;
+                              updateModelColor();
+                            }
+                          }
+                        }
+                      })
+                    ]
+                  ),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-title"
+                    },
+                    getI18n("vxe.colorPicker.hex")
+                  )
+                ]
+              )
+            ]
+          )
+        ]
+      );
     };
     const renderQuickWrapper = () => {
       const { showQuick } = props;
       const colorList = computeColorList.value;
       if (showQuick && colorList.length) {
-        return h("div", {
-          class: "vxe-color-picker--quick-wrapper"
-        }, colorList.map((item, i) => {
-          return h("div", {
-            key: i,
-            class: "vxe-color-picker--quick-item",
-            title: item.label || "",
-            style: {
-              backgroundColor: item.value
-            },
-            onClick(evnt) {
-              handleQuickEvent(evnt, item);
-            }
-          });
-        }));
+        return h(
+          "div",
+          {
+            class: "vxe-color-picker--quick-wrapper"
+          },
+          colorList.map((item, i) => {
+            return h("div", {
+              key: i,
+              class: "vxe-color-picker--quick-item",
+              title: item.label || "",
+              style: {
+                backgroundColor: item.value
+              },
+              onClick(evnt) {
+                handleQuickEvent(evnt, item);
+              }
+            });
+          })
+        );
       }
       return renderEmptyElement($xeColorPicker);
     };
@@ -936,101 +1026,150 @@ var color_picker_default = defineVxeComponent({
       const btnTransfer = computeBtnTransfer.value;
       const formReadonly = computeFormReadonly.value;
       if (formReadonly) {
-        return h("div", {
-          ref: refElem,
-          class: ["vxe-color-picker--readonly", className, {
-            [`size--${vSize}`]: vSize
-          }]
-        }, [
-          h("div", {
-            class: ["vxe-color-picker--readonly-color", {
-              "is--empty": !modelValue
-            }],
-            style: modelValue ? {
-              backgroundColor: modelValue
-            } : void 0
-          })
-        ]);
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-color-picker--readonly",
+              className,
+              {
+                [`size--${vSize}`]: vSize
+              }
+            ]
+          },
+          [
+            h("div", {
+              class: [
+                "vxe-color-picker--readonly-color",
+                {
+                  "is--empty": !modelValue
+                }
+              ],
+              style: modelValue ? {
+                backgroundColor: modelValue
+              } : void 0
+            })
+          ]
+        );
       }
       const currStyle = computeCurrStyle.value;
       const popupOpts = computePopupOpts.value;
       const { appendTo } = popupOpts;
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-color-picker", className ? XEUtils.isFunction(className) ? className({ $colorPicker: $xeColorPicker }) : className : "", {
-          [`size--${vSize}`]: vSize,
-          "is--selected": !!modelValue,
-          "is--visible": visiblePanel,
-          "is--disabled": isDisabled,
-          "is--active": isActivated
-        }],
-        style: currStyle
-      }, [
-        h("input", {
-          ref: refInputTarget,
-          class: "vxe-color-picker--input",
-          onFocus: focusEvent,
-          onBlur: blurEvent
-        }),
-        h("div", {
-          class: "vxe-color-picker--inner",
-          onClick: clickEvent
-        }, [
-          h("div", {
-            class: "vxe-color-picker--inner-color",
-            style: {
-              backgroundColor: modelValue
-            }
-          })
-        ]),
-        h(Teleport, {
-          to: getPopupContainer(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          h("div", {
-            ref: refOptionPanel,
-            class: ["vxe-table--ignore-clear vxe-color-picker--panel", popupClassName ? XEUtils.isFunction(popupClassName) ? popupClassName({ $colorPicker: $xeColorPicker }) : popupClassName : "", {
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-color-picker",
+            className ? XEUtils.isFunction(className) ? className({ $colorPicker: $xeColorPicker }) : className : "",
+            {
               [`size--${vSize}`]: vSize,
-              "is--transfer": btnTransfer,
-              "ani--leave": isAniVisible,
-              "ani--enter": visiblePanel
-            }],
-            placement: reactData.panelPlacement,
-            style: reactData.panelStyle
-          }, [
-            initialized && (visiblePanel || isAniVisible) ? h("div", {
-              class: "vxe-color-picker--panel-wrapper",
-              onClick: handlePanelClickEvent
-            }, [
-              renderColorWrapper(),
-              renderColorBar(),
-              renderQuickWrapper(),
+              "is--selected": !!modelValue,
+              "is--visible": visiblePanel,
+              "is--disabled": isDisabled,
+              "is--active": isActivated
+            }
+          ],
+          style: currStyle
+        },
+        [
+          h("input", {
+            ref: refInputTarget,
+            class: "vxe-color-picker--input",
+            onFocus: focusEvent,
+            onBlur: blurEvent
+          }),
+          h(
+            "div",
+            {
+              class: "vxe-color-picker--inner",
+              onClick: clickEvent
+            },
+            [
               h("div", {
-                class: "vxe-color-picker--footer-wrapper"
-              }, [
-                clearable ? h(VxeButtonComponent, {
-                  content: getI18n("vxe.colorPicker.clear"),
-                  size: "mini",
-                  onClick: clearEvent
-                }) : renderEmptyElement($xeColorPicker),
-                h(VxeButtonComponent, {
-                  content: getI18n("vxe.colorPicker.confirm"),
-                  size: "mini",
-                  status: "primary",
-                  onClick: confirmEvent
-                })
-              ])
-            ]) : renderEmptyElement($xeColorPicker)
-          ])
-        ])
-      ]);
+                class: "vxe-color-picker--inner-color",
+                style: {
+                  backgroundColor: modelValue
+                }
+              })
+            ]
+          ),
+          h(
+            Teleport,
+            {
+              to: getPopupContainer(appendTo),
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: refOptionPanel,
+                  class: [
+                    "vxe-table--ignore-clear vxe-color-picker--panel",
+                    popupClassName ? XEUtils.isFunction(popupClassName) ? popupClassName({ $colorPicker: $xeColorPicker }) : popupClassName : "",
+                    {
+                      [`size--${vSize}`]: vSize,
+                      "is--transfer": btnTransfer,
+                      "ani--leave": isAniVisible,
+                      "ani--enter": visiblePanel
+                    }
+                  ],
+                  placement: reactData.panelPlacement,
+                  style: reactData.panelStyle
+                },
+                [
+                  initialized && (visiblePanel || isAniVisible) ? h(
+                    "div",
+                    {
+                      class: "vxe-color-picker--panel-wrapper",
+                      onClick: handlePanelClickEvent
+                    },
+                    [
+                      renderColorWrapper(),
+                      renderColorBar(),
+                      renderQuickWrapper(),
+                      h(
+                        "div",
+                        {
+                          class: "vxe-color-picker--footer-wrapper"
+                        },
+                        [
+                          clearable ? h(VxeButtonComponent, {
+                            content: getI18n("vxe.colorPicker.clear"),
+                            size: "mini",
+                            onClick: clearEvent
+                          }) : renderEmptyElement($xeColorPicker),
+                          h(VxeButtonComponent, {
+                            content: getI18n("vxe.colorPicker.confirm"),
+                            size: "mini",
+                            status: "primary",
+                            onClick: confirmEvent
+                          })
+                        ]
+                      )
+                    ]
+                  ) : renderEmptyElement($xeColorPicker)
+                ]
+              )
+            ]
+          )
+        ]
+      );
     };
-    watch(() => props.modelValue, () => {
-      updateMode();
-    });
-    watch(() => props.type, () => {
-      updateType();
-    });
+    watch(
+      () => props.modelValue,
+      () => {
+        updateMode();
+      }
+    );
+    watch(
+      () => props.type,
+      () => {
+        updateType();
+      }
+    );
     onMounted(() => {
       globalEvents.on($xeColorPicker, "mousedown", handleGlobalMousedownEvent);
       globalEvents.on($xeColorPicker, "blur", handleGlobalBlurEvent);