vxe-pc-ui 4.20.25 → 4.20.26

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

@@ -34,13 +34,14 @@ module.exports = __toCommonJS(color_picker_exports);
 var import_vue = require("vue");
 var import_comp = require("../../ui/src/comp");
 var import_xe_utils = __toESM(require("xe-utils"));
-var import_ui = require("../../ui");
+var import_core = require("@vxe-ui/core");
 var import_dom = require("../../ui/src/dom");
 var import_utils = require("../../ui/src/utils");
 var import_util = require("./util");
 var import_button = __toESM(require("../../button"));
 var import_input = __toESM(require("../../input"));
 var import_number_input = __toESM(require("../../number-input"));
+const { getIcon, getConfig, getI18n, globalEvents, createEvent, useFns, renderEmptyElement } = import_core.VxeUI;
 var color_picker_default = (0, import_comp.defineVxeComponent)({
   name: "VxeColorPicker",
   props: {
@@ -48,38 +49,38 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
     placeholder: String,
     clearable: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().colorPicker.clearable
+      default: () => getConfig().colorPicker.clearable
     },
     type: {
       type: String,
-      default: () => (0, import_ui.getConfig)().colorPicker.type
+      default: () => getConfig().colorPicker.type
     },
     width: [Number, String],
     size: {
       type: String,
-      default: () => (0, import_ui.getConfig)().colorPicker.size || (0, import_ui.getConfig)().size
+      default: () => getConfig().colorPicker.size || getConfig().size
     },
     className: [String, Function],
     popupClassName: [String, Function],
     colors: {
       type: Array,
-      default: () => import_xe_utils.default.clone((0, import_ui.getConfig)().colorPicker.colors, true) || []
+      default: () => import_xe_utils.default.clone(getConfig().colorPicker.colors, true) || []
     },
     showAlpha: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().colorPicker.showAlpha
+      default: () => getConfig().colorPicker.showAlpha
     },
     showEyeDropper: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().colorPicker.showEyeDropper
+      default: () => getConfig().colorPicker.showEyeDropper
     },
     showColorExtractor: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().colorPicker.showColorExtractor
+      default: () => getConfig().colorPicker.showColorExtractor
     },
     showQuick: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().colorPicker.showQuick
+      default: () => getConfig().colorPicker.showQuick
     },
     readonly: {
       type: Boolean,
@@ -91,11 +92,11 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
     },
     clickToCopy: {
       type: Boolean,
-      default: () => (0, import_ui.getConfig)().colorPicker.clickToCopy
+      default: () => getConfig().colorPicker.clickToCopy
     },
     defaultColor: {
       type: String,
-      default: () => (0, import_ui.getConfig)().colorPicker.defaultColor
+      default: () => getConfig().colorPicker.defaultColor
     },
     /**
      * 已废弃，请使用 popupConfig.placement
@@ -112,12 +113,7 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
     },
     popupConfig: Object
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "clear",
-    "click"
-  ],
+  emits: ["update:modelValue", "change", "clear", "click"],
   setup(props, context) {
     const { emit } = context;
     const $xeModal = (0, import_vue.inject)("$xeModal", null);
@@ -128,7 +124,7 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
     const formItemInfo = (0, import_vue.inject)("xeFormItemInfo", null);
     const WinEyeDropper = typeof window !== "undefined" ? window.EyeDropper : null;
     const xID = import_xe_utils.default.uniqueId();
-    const { computeSize } = (0, import_ui.useSize)(props);
+    const { computeSize } = useFns.useSize(props);
     const refElem = (0, import_vue.ref)();
     const refInputTarget = (0, import_vue.ref)();
     const refOptionPanel = (0, import_vue.ref)();
@@ -186,7 +182,7 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
     const computeBtnTransfer = (0, import_vue.computed)(() => {
       const { transfer } = props;
       if (transfer === null) {
-        const globalTransfer = (0, import_ui.getConfig)().colorPicker.transfer;
+        const globalTransfer = getConfig().colorPicker.transfer;
         if (import_xe_utils.default.isBoolean(globalTransfer)) {
           return globalTransfer;
         }
@@ -223,7 +219,7 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
       return stys;
     });
     const computePopupOpts = (0, import_vue.computed)(() => {
-      return Object.assign({}, (0, import_ui.getConfig)().colorPicker.popupConfig, props.popupConfig);
+      return Object.assign({}, getConfig().colorPicker.popupConfig, props.popupConfig);
     });
     const computeIsRgb = (0, import_vue.computed)(() => {
       const { selectTyle } = reactData;
@@ -625,10 +621,10 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
     const handleCopyColorEvent = () => {
       const { selectColor } = reactData;
       if (selectColor) {
-        if (import_ui.VxeUI.clipboard.copy(selectColor)) {
-          if (import_ui.VxeUI.modal) {
-            import_ui.VxeUI.modal.message({
-              content: (0, import_ui.getI18n)("vxe.colorPicker.copySuccess", [selectColor]),
+        if (import_core.VxeUI.clipboard.copy(selectColor)) {
+          if (import_core.VxeUI.modal) {
+            import_core.VxeUI.modal.message({
+              content: getI18n("vxe.colorPicker.copySuccess", [selectColor]),
               status: "success"
             });
           }
@@ -675,7 +671,7 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
       }
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, import_ui.createEvent)(evnt, { $colorPicker: $xeColorPicker }, params));
+      emit(type, createEvent(evnt, { $colorPicker: $xeColorPicker }, params));
     };
     const colorPickerMethods = {
       dispatchEvent
@@ -686,280 +682,374 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
       const { showColorExtractor } = props;
       const { panelColor } = reactData;
       if (showColorExtractor) {
-        return (0, import_vue.h)("div", {
-          ref: refColorPanelElem,
-          class: "vxe-color-picker--color-wrapper",
-          onMousedown: handleSelectColorMousedownEvent
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--color-bg",
-            style: {
-              backgroundColor: panelColor
-            }
-          }),
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--white-bg"
-          }),
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--black-bg"
-          }),
-          (0, import_vue.h)("div", {
-            ref: refColorActiveElem,
-            class: "vxe-color-picker--color-active"
-          })
-        ]);
+        return (0, import_vue.h)(
+          "div",
+          {
+            ref: refColorPanelElem,
+            class: "vxe-color-picker--color-wrapper",
+            onMousedown: handleSelectColorMousedownEvent
+          },
+          [
+            (0, import_vue.h)("div", {
+              class: "vxe-color-picker--color-bg",
+              style: {
+                backgroundColor: panelColor
+              }
+            }),
+            (0, import_vue.h)("div", {
+              class: "vxe-color-picker--white-bg"
+            }),
+            (0, import_vue.h)("div", {
+              class: "vxe-color-picker--black-bg"
+            }),
+            (0, import_vue.h)("div", {
+              ref: refColorActiveElem,
+              class: "vxe-color-picker--color-active"
+            })
+          ]
+        );
       }
-      return (0, import_ui.renderEmptyElement)($xeColorPicker);
+      return renderEmptyElement($xeColorPicker);
     };
     const renderColorBar = () => {
       const { showAlpha, clickToCopy, showEyeDropper } = props;
       const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
       const isRgb = computeIsRgb.value;
       const selectTypeItem = computeSelectTypeItem.value;
-      return (0, import_vue.h)("div", {
-        class: "vxe-color-picker--bar-wrapper"
-      }, [
-        (0, import_vue.h)("div", {
-          class: "vxe-color-picker--slider-wrapper"
-        }, [
-          showEyeDropper && WinEyeDropper ? (0, import_vue.h)("div", {
-            class: "vxe-color-picker--color-dropper"
-          }, [
-            (0, import_vue.h)("span", {
-              class: "vxe-color-picker--color-dropper-btn",
-              onClick: handleEyeDropperEvent
-            }, [
-              (0, import_vue.h)("i", {
-                class: (0, import_ui.getIcon)().COLOR_PICKER_EYE_DROPPER
-              })
-            ])
-          ]) : (0, import_ui.renderEmptyElement)($xeColorPicker),
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--slider-preview"
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-color-picker--preview-btn"
-            }, [
-              (0, import_vue.h)("div", {
-                class: "vxe-color-picker--preview-color",
-                style: {
-                  backgroundColor: selectColor
-                }
-              }, clickToCopy ? [
-                (0, import_vue.h)("span", {
-                  class: "vxe-color-picker--preview-copy-btn",
-                  onClick: handleCopyColorEvent
-                }, [
-                  (0, import_vue.h)("i", {
-                    class: (0, import_ui.getIcon)().COLOR_PICKER_COLOR_COPY
-                  })
-                ])
-              ] : [])
-            ])
-          ]),
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--slider-handle"
-          }, [
-            (0, import_vue.h)("div", {
-              ref: refHueSliderElem,
-              class: "vxe-color-picker--bar-hue-slider",
-              onClick: handleHueBarEvent
-            }, [
-              (0, import_vue.h)("div", {
-                ref: refHueSliderBtnElem,
-                class: "vxe-color-picker--bar-hue-btn",
-                onMousedown: handleHueSliderMousedownEvent
-              })
-            ]),
-            showAlpha ? (0, import_vue.h)("div", {
-              ref: refAlphaSliderElem,
-              class: "vxe-color-picker--bar-alpha-slider",
-              onClick: handleAlphaBarEvent
-            }, [
-              (0, import_vue.h)("div", {
-                class: "vxe-color-picker--bar-alpha-bg",
-                style: {
-                  background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${panelColor})`
-                }
-              }),
-              (0, import_vue.h)("div", {
-                ref: refAlphaSliderBtnElem,
-                class: "vxe-color-picker--bar-alpha-btn",
-                onMousedown: handleAlphaSliderMousedownEvent
-              })
-            ]) : (0, import_ui.renderEmptyElement)($xeColorPicker)
-          ])
-        ]),
-        (0, import_vue.h)("div", {
-          class: "vxe-color-picker--custom-wrapper"
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--type-switch"
-          }, [
-            (0, import_vue.h)("div", {
-              class: "vxe-color-picker--type-label",
-              onClick: toggleTypeVisibleEvent
-            }, [
-              (0, import_vue.h)("span", `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
-              (0, import_vue.h)("span", {
-                class: "vxe-color-picker--type-icon"
-              }, [
-                (0, import_vue.h)("i", {
-                  class: showTypePopup ? (0, import_ui.getIcon)().COLOR_PICKER_TPTY_OPEN : (0, import_ui.getIcon)().COLOR_PICKER_TPTY_CLOSE
-                })
-              ])
-            ]),
-            (0, import_vue.h)("div", {
-              class: ["vxe-color-picker--type-popup", {
-                "is--visible": showTypePopup
-              }]
-            }, typeList.map((item) => {
-              return (0, import_vue.h)("div", {
-                class: "vxe-color-picker--type-item",
-                onClick(evnt) {
-                  evnt.stopPropagation();
-                  handleChangeType(item.value);
-                }
-              }, item.label);
-            }))
-          ]),
-          (0, import_vue.h)("div", {
-            class: `vxe-color-picker--${selectTyle}-wrapper`
-          }, isRgb ? [
-            (0, import_vue.h)("div", {
-              class: "vxe-color-picker--input-wrapper"
-            }, [
-              (0, import_vue.h)(import_number_input.default, {
-                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
-              }),
-              (0, import_vue.h)(import_number_input.default, {
-                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
-              }),
-              (0, import_vue.h)(import_number_input.default, {
-                type: "integer",
-                size: "mini",
-                align: "center",
-                min: 0,
-                max: 255,
-                maxLength: 3,
-                placeholder: "",
-                modelValue: bValue,
-                controlConfig: {
-                  showButton: false
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: "vxe-color-picker--bar-wrapper"
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-color-picker--slider-wrapper"
+            },
+            [
+              showEyeDropper && WinEyeDropper ? (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-color-picker--color-dropper"
                 },
-                "onUpdate:modelValue"(val) {
-                  reactData.bValue = val;
+                [
+                  (0, import_vue.h)(
+                    "span",
+                    {
+                      class: "vxe-color-picker--color-dropper-btn",
+                      onClick: handleEyeDropperEvent
+                    },
+                    [
+                      (0, import_vue.h)("i", {
+                        class: getIcon().COLOR_PICKER_EYE_DROPPER
+                      })
+                    ]
+                  )
+                ]
+              ) : renderEmptyElement($xeColorPicker),
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-color-picker--slider-preview"
                 },
-                onChange: handleInputRgbEvent
-              }),
-              (0, import_vue.h)(import_number_input.default, {
-                type: "number",
-                size: "mini",
-                align: "center",
-                min: 0,
-                max: 1,
-                step: 0.01,
-                maxLength: 4,
-                placeholder: "",
-                modelValue: aValue,
-                controlConfig: {
-                  showButton: false
+                [
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-color-picker--preview-btn"
+                    },
+                    [
+                      (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-color-picker--preview-color",
+                          style: {
+                            backgroundColor: selectColor
+                          }
+                        },
+                        clickToCopy ? [
+                          (0, import_vue.h)(
+                            "span",
+                            {
+                              class: "vxe-color-picker--preview-copy-btn",
+                              onClick: handleCopyColorEvent
+                            },
+                            [
+                              (0, import_vue.h)("i", {
+                                class: getIcon().COLOR_PICKER_COLOR_COPY
+                              })
+                            ]
+                          )
+                        ] : []
+                      )
+                    ]
+                  )
+                ]
+              ),
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-color-picker--slider-handle"
                 },
-                "onUpdate:modelValue"(val) {
-                  reactData.aValue = val;
+                [
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      ref: refHueSliderElem,
+                      class: "vxe-color-picker--bar-hue-slider",
+                      onClick: handleHueBarEvent
+                    },
+                    [
+                      (0, import_vue.h)("div", {
+                        ref: refHueSliderBtnElem,
+                        class: "vxe-color-picker--bar-hue-btn",
+                        onMousedown: handleHueSliderMousedownEvent
+                      })
+                    ]
+                  ),
+                  showAlpha ? (0, import_vue.h)(
+                    "div",
+                    {
+                      ref: refAlphaSliderElem,
+                      class: "vxe-color-picker--bar-alpha-slider",
+                      onClick: handleAlphaBarEvent
+                    },
+                    [
+                      (0, import_vue.h)("div", {
+                        class: "vxe-color-picker--bar-alpha-bg",
+                        style: {
+                          background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${panelColor})`
+                        }
+                      }),
+                      (0, import_vue.h)("div", {
+                        ref: refAlphaSliderBtnElem,
+                        class: "vxe-color-picker--bar-alpha-btn",
+                        onMousedown: handleAlphaSliderMousedownEvent
+                      })
+                    ]
+                  ) : renderEmptyElement($xeColorPicker)
+                ]
+              )
+            ]
+          ),
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-color-picker--custom-wrapper"
+            },
+            [
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: "vxe-color-picker--type-switch"
                 },
-                onChange: handleInputAlphaEvent
-              })
-            ]),
-            (0, import_vue.h)("div", {
-              class: "vxe-color-picker--input-title"
-            }, [
-              (0, import_vue.h)("span", "R"),
-              (0, import_vue.h)("span", "G"),
-              (0, import_vue.h)("span", "B"),
-              (0, import_vue.h)("span", "A")
-            ])
-          ] : [
-            (0, import_vue.h)("div", {
-              class: "vxe-color-picker--input-wrapper"
-            }, [
-              (0, import_vue.h)(import_input.default, {
-                type: "text",
-                size: "mini",
-                align: "center",
-                maxLength: 9,
-                placeholder: "",
-                modelValue: hexValue,
-                "onUpdate:modelValue"(val) {
-                  reactData.hexValue = val;
+                [
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-color-picker--type-label",
+                      onClick: toggleTypeVisibleEvent
+                    },
+                    [
+                      (0, import_vue.h)("span", `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
+                      (0, import_vue.h)(
+                        "span",
+                        {
+                          class: "vxe-color-picker--type-icon"
+                        },
+                        [
+                          (0, import_vue.h)("i", {
+                            class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
+                          })
+                        ]
+                      )
+                    ]
+                  ),
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: [
+                        "vxe-color-picker--type-popup",
+                        {
+                          "is--visible": showTypePopup
+                        }
+                      ]
+                    },
+                    typeList.map((item) => {
+                      return (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-color-picker--type-item",
+                          onClick(evnt) {
+                            evnt.stopPropagation();
+                            handleChangeType(item.value);
+                          }
+                        },
+                        item.label
+                      );
+                    })
+                  )
+                ]
+              ),
+              (0, import_vue.h)(
+                "div",
+                {
+                  class: `vxe-color-picker--${selectTyle}-wrapper`
                 },
-                onChange() {
-                  const colorRest = (0, import_util.parseValColor)(reactData.hexValue);
-                  if (colorRest) {
-                    if (colorRest.value) {
-                      reactData.selectColor = colorRest.value;
-                      updateModelColor();
-                    }
-                  }
-                }
-              })
-            ]),
-            (0, import_vue.h)("div", {
-              class: "vxe-color-picker--input-title"
-            }, (0, import_ui.getI18n)("vxe.colorPicker.hex"))
-          ])
-        ])
-      ]);
+                isRgb ? [
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-wrapper"
+                    },
+                    [
+                      (0, import_vue.h)(import_number_input.default, {
+                        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
+                      }),
+                      (0, import_vue.h)(import_number_input.default, {
+                        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
+                      }),
+                      (0, import_vue.h)(import_number_input.default, {
+                        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
+                      }),
+                      (0, import_vue.h)(import_number_input.default, {
+                        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
+                      })
+                    ]
+                  ),
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-title"
+                    },
+                    [(0, import_vue.h)("span", "R"), (0, import_vue.h)("span", "G"), (0, import_vue.h)("span", "B"), (0, import_vue.h)("span", "A")]
+                  )
+                ] : [
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-color-picker--input-wrapper"
+                    },
+                    [
+                      (0, import_vue.h)(import_input.default, {
+                        type: "text",
+                        size: "mini",
+                        align: "center",
+                        maxLength: 9,
+                        placeholder: "",
+                        modelValue: hexValue,
+                        "onUpdate:modelValue"(val) {
+                          reactData.hexValue = val;
+                        },
+                        onChange() {
+                          const colorRest = (0, import_util.parseValColor)(reactData.hexValue);
+                          if (colorRest) {
+                            if (colorRest.value) {
+                              reactData.selectColor = colorRest.value;
+                              updateModelColor();
+                            }
+                          }
+                        }
+                      })
+                    ]
+                  ),
+                  (0, import_vue.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 (0, import_vue.h)("div", {
-          class: "vxe-color-picker--quick-wrapper"
-        }, colorList.map((item, i) => {
-          return (0, import_vue.h)("div", {
-            key: i,
-            class: "vxe-color-picker--quick-item",
-            title: item.label || "",
-            style: {
-              backgroundColor: item.value
-            },
-            onClick(evnt) {
-              handleQuickEvent(evnt, item);
-            }
-          });
-        }));
+        return (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-color-picker--quick-wrapper"
+          },
+          colorList.map((item, i) => {
+            return (0, import_vue.h)("div", {
+              key: i,
+              class: "vxe-color-picker--quick-item",
+              title: item.label || "",
+              style: {
+                backgroundColor: item.value
+              },
+              onClick(evnt) {
+                handleQuickEvent(evnt, item);
+              }
+            });
+          })
+        );
       }
-      return (0, import_ui.renderEmptyElement)($xeColorPicker);
+      return renderEmptyElement($xeColorPicker);
     };
     const renderVN = () => {
       const { className, popupClassName, clearable, modelValue } = props;
@@ -969,112 +1059,161 @@ var color_picker_default = (0, import_comp.defineVxeComponent)({
       const btnTransfer = computeBtnTransfer.value;
       const formReadonly = computeFormReadonly.value;
       if (formReadonly) {
-        return (0, import_vue.h)("div", {
-          ref: refElem,
-          class: ["vxe-color-picker--readonly", className, {
-            [`size--${vSize}`]: vSize
-          }]
-        }, [
-          (0, import_vue.h)("div", {
-            class: ["vxe-color-picker--readonly-color", {
-              "is--empty": !modelValue
-            }],
-            style: modelValue ? {
-              backgroundColor: modelValue
-            } : void 0
-          })
-        ]);
+        return (0, import_vue.h)(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-color-picker--readonly",
+              className,
+              {
+                [`size--${vSize}`]: vSize
+              }
+            ]
+          },
+          [
+            (0, import_vue.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 (0, import_vue.h)("div", {
-        ref: refElem,
-        class: ["vxe-color-picker", className ? import_xe_utils.default.isFunction(className) ? className({ $colorPicker: $xeColorPicker }) : className : "", {
-          [`size--${vSize}`]: vSize,
-          "is--selected": !!modelValue,
-          "is--visible": visiblePanel,
-          "is--disabled": isDisabled,
-          "is--active": isActivated
-        }],
-        style: currStyle
-      }, [
-        (0, import_vue.h)("input", {
-          ref: refInputTarget,
-          class: "vxe-color-picker--input",
-          onFocus: focusEvent,
-          onBlur: blurEvent
-        }),
-        (0, import_vue.h)("div", {
-          class: "vxe-color-picker--inner",
-          onClick: clickEvent
-        }, [
-          (0, import_vue.h)("div", {
-            class: "vxe-color-picker--inner-color",
-            style: {
-              backgroundColor: modelValue
-            }
-          })
-        ]),
-        (0, import_vue.h)(import_vue.Teleport, {
-          to: (0, import_dom.getPopupContainer)(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          (0, import_vue.h)("div", {
-            ref: refOptionPanel,
-            class: ["vxe-table--ignore-clear vxe-color-picker--panel", popupClassName ? import_xe_utils.default.isFunction(popupClassName) ? popupClassName({ $colorPicker: $xeColorPicker }) : popupClassName : "", {
+      return (0, import_vue.h)(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-color-picker",
+            className ? import_xe_utils.default.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) ? (0, import_vue.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
+        },
+        [
+          (0, import_vue.h)("input", {
+            ref: refInputTarget,
+            class: "vxe-color-picker--input",
+            onFocus: focusEvent,
+            onBlur: blurEvent
+          }),
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-color-picker--inner",
+              onClick: clickEvent
+            },
+            [
               (0, import_vue.h)("div", {
-                class: "vxe-color-picker--footer-wrapper"
-              }, [
-                clearable ? (0, import_vue.h)(import_button.default, {
-                  content: (0, import_ui.getI18n)("vxe.colorPicker.clear"),
-                  size: "mini",
-                  onClick: clearEvent
-                }) : (0, import_ui.renderEmptyElement)($xeColorPicker),
-                (0, import_vue.h)(import_button.default, {
-                  content: (0, import_ui.getI18n)("vxe.colorPicker.confirm"),
-                  size: "mini",
-                  status: "primary",
-                  onClick: confirmEvent
-                })
-              ])
-            ]) : (0, import_ui.renderEmptyElement)($xeColorPicker)
-          ])
-        ])
-      ]);
+                class: "vxe-color-picker--inner-color",
+                style: {
+                  backgroundColor: modelValue
+                }
+              })
+            ]
+          ),
+          (0, import_vue.h)(
+            import_vue.Teleport,
+            {
+              to: (0, import_dom.getPopupContainer)(appendTo),
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              (0, import_vue.h)(
+                "div",
+                {
+                  ref: refOptionPanel,
+                  class: [
+                    "vxe-table--ignore-clear vxe-color-picker--panel",
+                    popupClassName ? import_xe_utils.default.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) ? (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-color-picker--panel-wrapper",
+                      onClick: handlePanelClickEvent
+                    },
+                    [
+                      renderColorWrapper(),
+                      renderColorBar(),
+                      renderQuickWrapper(),
+                      (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-color-picker--footer-wrapper"
+                        },
+                        [
+                          clearable ? (0, import_vue.h)(import_button.default, {
+                            content: getI18n("vxe.colorPicker.clear"),
+                            size: "mini",
+                            onClick: clearEvent
+                          }) : renderEmptyElement($xeColorPicker),
+                          (0, import_vue.h)(import_button.default, {
+                            content: getI18n("vxe.colorPicker.confirm"),
+                            size: "mini",
+                            status: "primary",
+                            onClick: confirmEvent
+                          })
+                        ]
+                      )
+                    ]
+                  ) : renderEmptyElement($xeColorPicker)
+                ]
+              )
+            ]
+          )
+        ]
+      );
     };
-    (0, import_vue.watch)(() => props.modelValue, () => {
-      updateMode();
-    });
-    (0, import_vue.watch)(() => props.type, () => {
-      updateType();
-    });
+    (0, import_vue.watch)(
+      () => props.modelValue,
+      () => {
+        updateMode();
+      }
+    );
+    (0, import_vue.watch)(
+      () => props.type,
+      () => {
+        updateType();
+      }
+    );
     (0, import_vue.onMounted)(() => {
-      import_ui.globalEvents.on($xeColorPicker, "mousedown", handleGlobalMousedownEvent);
-      import_ui.globalEvents.on($xeColorPicker, "blur", handleGlobalBlurEvent);
-      import_ui.globalEvents.on($xeColorPicker, "resize", handleGlobalResizeEvent);
-      import_ui.globalEvents.on($xeColorPicker, "scroll", handleGlobalScrollEvent);
+      globalEvents.on($xeColorPicker, "mousedown", handleGlobalMousedownEvent);
+      globalEvents.on($xeColorPicker, "blur", handleGlobalBlurEvent);
+      globalEvents.on($xeColorPicker, "resize", handleGlobalResizeEvent);
+      globalEvents.on($xeColorPicker, "scroll", handleGlobalScrollEvent);
     });
     (0, import_vue.onUnmounted)(() => {
-      import_ui.globalEvents.off($xeColorPicker, "mousedown");
-      import_ui.globalEvents.off($xeColorPicker, "blur");
-      import_ui.globalEvents.off($xeColorPicker, "resize");
-      import_ui.globalEvents.off($xeColorPicker, "scroll");
+      globalEvents.off($xeColorPicker, "mousedown");
+      globalEvents.off($xeColorPicker, "blur");
+      globalEvents.off($xeColorPicker, "resize");
+      globalEvents.off($xeColorPicker, "scroll");
     });
     updateType();
     (0, import_vue.provide)("$xeColorPicker", $xeColorPicker);