bkui-vue 2.0.1-beta.11 → 2.0.1-beta.111

package/lib/color-picker/index.js

@@ -40,38 +40,38 @@ var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
 const shared_namespaceObject = x({ ["BKPopover"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.BKPopover, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.bkZIndexManager, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.classes, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.useFormItem, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
-function _typeof(o) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
 
-function toPrimitive(t, r) {
-  if ("object" != _typeof(t) || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != _typeof(i)) return i;
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r ? String : Number)(t);
+  return (hint === "string" ? String : Number)(input);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
 
 
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
 
 function _defineProperty(obj, key, value) {
-  key = toPropertyKey(key);
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -88,6 +88,22 @@ function _defineProperty(obj, key, value) {
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
 const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeMount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeMount, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+;// CONCATENATED MODULE: external "vue-types"
+var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_types_y = x => () => x
+const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
+;// CONCATENATED MODULE: external "../config-provider"
+var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var config_provider_y = x => () => x
+const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: external "../directives"
+var directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var directives_y = x => () => x
+const directives_namespaceObject = directives_x({ ["clickoutside"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_directives_45d4776f__.clickoutside });
+;// CONCATENATED MODULE: external "../icon"
+var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var icon_y = x => () => x
+const icon_namespaceObject = icon_x({ ["AngleUp"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AngleUp });
 ;// CONCATENATED MODULE: ../../node_modules/tinycolor2/esm/tinycolor.js
 // This file is autogenerated. It's used to publish ESM to npm.
 function tinycolor_typeof(obj) {
@@ -1270,22 +1286,6 @@ function validateWCAG2Parms(parms) {
 
 
 
-;// CONCATENATED MODULE: external "vue-types"
-var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var external_vue_types_y = x => () => x
-const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
-;// CONCATENATED MODULE: external "../config-provider"
-var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var config_provider_y = x => () => x
-const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
-;// CONCATENATED MODULE: external "../directives"
-var directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var directives_y = x => () => x
-const directives_namespaceObject = directives_x({ ["clickoutside"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_directives_45d4776f__.clickoutside });
-;// CONCATENATED MODULE: external "../icon"
-var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["AngleUp"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AngleUp });
 ;// CONCATENATED MODULE: ../../packages/date-picker/src/base/picker-dropdown.tsx
 
 
@@ -1377,7 +1377,7 @@ var pickerDropdownProps = {
     var forceUpdate = function forceUpdate() {
       if (popoverInstance) {
         var _popoverInstance, _popoverInstance$forc;
-        (_popoverInstance = popoverInstance) === null || _popoverInstance === void 0 || (_popoverInstance$forc = _popoverInstance.forceUpdate) === null || _popoverInstance$forc === void 0 || _popoverInstance$forc.call(_popoverInstance);
+        (_popoverInstance = popoverInstance) === null || _popoverInstance === void 0 || (_popoverInstance$forc = _popoverInstance.forceUpdate) === null || _popoverInstance$forc === void 0 ? void 0 : _popoverInstance$forc.call(_popoverInstance);
       }
     };
     var destoryDropdown = function destoryDropdown() {
@@ -1531,8 +1531,8 @@ var pickerDropdownProps = {
     var _this$$slots$default, _this$$slots$default2, _this$$slots;
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "ref": "refContentRef",
-      "class": [this.resolveClassName('date-picker-dropdown'), this.className, this.extPopoverCls],
       "style": this.styles,
+      "class": [this.resolveClassName('date-picker-dropdown'), this.className, this.extPopoverCls],
       "onClick": this.onClick
     }, [(_this$$slots$default = (_this$$slots$default2 = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : '']);
   }
@@ -1566,11 +1566,10 @@ var pickerDropdownProps = {
  */
 
 
-
 var inputContainerProps = {
   info: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const input_container = ((0,external_vue_namespaceObject.defineComponent)({
+/* harmony default export */ const input_container = (defineComponent({
   props: inputContainerProps,
   emits: ['tab', 'input'],
   setup: function setup(props, _ref) {
@@ -1587,7 +1586,7 @@ var inputContainerProps = {
     };
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
-    var colorPickerCls = (0,external_vue_namespaceObject.computed)(function () {
+    var colorPickerCls = computed(function () {
       return (0,shared_namespaceObject.classes)({
         error: props.info.error
       }, "".concat(resolveClassName('color-picker-input-value')));
@@ -1596,11 +1595,11 @@ var inputContainerProps = {
       return (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-input-part'))
       }, [(0,external_vue_namespaceObject.createVNode)("input", {
-        "type": props.info.name === 'HEX' ? 'text' : 'number',
         "class": colorPickerCls.value,
+        "type": props.info.name === 'HEX' ? 'text' : 'number',
         "value": props.info.value,
-        "onKeydown": handleTab,
-        "onInput": handleInput
+        "onInput": handleInput,
+        "onKeydown": handleTab
       }, null), (0,external_vue_namespaceObject.createVNode)("span", {
         "class": "".concat(resolveClassName('color-picker-input-text'))
       }, [props.info.name])]);
@@ -1638,47 +1637,46 @@ var inputContainerProps = {
 
 
 
-
 var colorPickerProps = {
   colorObj: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const color_input = ((0,external_vue_namespaceObject.defineComponent)({
+/* harmony default export */ const color_input = (defineComponent({
   name: 'ColorPicker',
   props: colorPickerProps,
   emits: ['change', 'tab'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
-    var hex = (0,external_vue_namespaceObject.reactive)({
+    var hex = reactive({
       key: 'hex',
       name: 'HEX',
       value: props.colorObj.hex,
       error: false
     });
-    var r = (0,external_vue_namespaceObject.reactive)({
+    var r = reactive({
       key: 'r',
       name: 'R',
       value: props.colorObj.rgba.r.toString(),
       error: false
     });
-    var g = (0,external_vue_namespaceObject.reactive)({
+    var g = reactive({
       key: 'g',
       name: 'G',
       value: props.colorObj.rgba.g.toString(),
       error: false
     });
-    var b = (0,external_vue_namespaceObject.reactive)({
+    var b = reactive({
       key: 'b',
       name: 'B',
       value: props.colorObj.rgba.b.toString(),
       error: false
     });
-    var a = (0,external_vue_namespaceObject.reactive)({
+    var a = reactive({
       key: 'a',
       name: 'Alpha',
       value: props.colorObj.rgba.a.toString(),
       error: false
     });
-    (0,external_vue_namespaceObject.watch)(function () {
+    watch(function () {
       return props.colorObj;
     }, function (val) {
       if (tinycolor(val.hex).toString() !== tinycolor(hex.value).toString()) {
@@ -1912,18 +1910,17 @@ var toRGBAString = function toRGBAString(rgba) {
 
 
 
-
 var hue_slider_colorPickerProps = {
   colorObj: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const hue_slider = ((0,external_vue_namespaceObject.defineComponent)({
+/* harmony default export */ const hue_slider = (defineComponent({
   name: 'ColorPicker',
   props: hue_slider_colorPickerProps,
   emits: ['change'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
-    var containerRef = (0,external_vue_namespaceObject.ref)(null);
-    var pointerStyle = (0,external_vue_namespaceObject.computed)(function () {
+    var containerRef = ref(null);
+    var pointerStyle = computed(function () {
       return {
         left: "".concat(props.colorObj.hsv.h / 360 * 100, "%")
       };
@@ -2003,8 +2000,8 @@ var hue_slider_colorPickerProps = {
     return function () {
       return (0,external_vue_namespaceObject.createVNode)("div", {
         "ref": containerRef,
-        "tabindex": "0",
         "class": "".concat(resolveClassName('color-picker-hue')),
+        "tabindex": "0",
         "onKeydown": handleArrowKeydown,
         "onMousedown": function onMousedown(e) {
           e.stopPropagation();
@@ -2012,8 +2009,8 @@ var hue_slider_colorPickerProps = {
           handleMouseDown(e);
         }
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
-        "class": "".concat(resolveClassName('color-picker-hue-pointer')),
-        "style": pointerStyle.value
+        "style": pointerStyle.value,
+        "class": "".concat(resolveClassName('color-picker-hue-pointer'))
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-hue-rectangle'))
       }, null)])]);
@@ -2084,7 +2081,8 @@ var recommend_colors_colorPickerProps = {
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var getColorClass = function getColorClass(color, index) {
-      return (0,shared_namespaceObject.classes)(_defineProperty(_defineProperty({}, "".concat(resolveClassName('color-picker-empty')), color === ''), "".concat(resolveClassName('color-picker-recommend-selected-color')), isFocused.value && selectedIndex.value === index), "".concat(resolveClassName('color-picker-recommend-color')));
+      var _classes;
+      return (0,shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(resolveClassName('color-picker-empty')), color === ''), _defineProperty(_classes, "".concat(resolveClassName('color-picker-recommend-selected-color')), isFocused.value && selectedIndex.value === index), _classes), "".concat(resolveClassName('color-picker-recommend-color')));
     };
     var handleKeydown = function handleKeydown(e) {
       if (e.code === 'Tab') {
@@ -2147,14 +2145,14 @@ var recommend_colors_colorPickerProps = {
     };
     return function () {
       return (0,external_vue_namespaceObject.createVNode)("div", {
-        "tabindex": "0",
         "class": "".concat(resolveClassName('color-picker-recommend'), " "),
-        "onFocus": function onFocus() {
-          return isFocused.value = true;
-        },
+        "tabindex": "0",
         "onBlur": function onBlur() {
           return isFocused.value = false;
         },
+        "onFocus": function onFocus() {
+          return isFocused.value = true;
+        },
         "onKeydown": handleKeydown
       }, [colors.value.map(function (color, index) {
         return (0,external_vue_namespaceObject.createVNode)("div", {
@@ -2202,22 +2200,21 @@ var recommend_colors_colorPickerProps = {
 
 
 
-
 var saturation_panel_colorPickerProps = {
   colorObj: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const saturation_panel = ((0,external_vue_namespaceObject.defineComponent)({
+/* harmony default export */ const saturation_panel = (defineComponent({
   props: saturation_panel_colorPickerProps,
   emits: ['change'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
-    var containerRef = (0,external_vue_namespaceObject.ref)(null);
-    var backgroundStyle = (0,external_vue_namespaceObject.computed)(function () {
+    var containerRef = ref(null);
+    var backgroundStyle = computed(function () {
       return {
         background: "hsl(".concat(props.colorObj.hsv.h, ", 100%, 50%)")
       };
     });
-    var pointerStyle = (0,external_vue_namespaceObject.computed)(function () {
+    var pointerStyle = computed(function () {
       return {
         top: "".concat((1 - props.colorObj.hsv.v) * 100, "%"),
         left: "".concat(props.colorObj.hsv.s * 100, "%")
@@ -2303,9 +2300,9 @@ var saturation_panel_colorPickerProps = {
     return function () {
       return (0,external_vue_namespaceObject.createVNode)("div", {
         "ref": containerRef,
-        "tabindex": "0",
-        "class": "".concat(resolveClassName('color-picker-saturation')),
         "style": backgroundStyle.value,
+        "class": "".concat(resolveClassName('color-picker-saturation')),
+        "tabindex": "0",
         "onKeydown": handleArrowKeydown,
         "onMousedown": function onMousedown(e) {
           e.stopPropagation();
@@ -2316,8 +2313,8 @@ var saturation_panel_colorPickerProps = {
       }, null), (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-saturation-black'))
       }, null), (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": "".concat(resolveClassName('color-picker-pointer')),
-        "style": pointerStyle.value
+        "style": pointerStyle.value,
+        "class": "".concat(resolveClassName('color-picker-pointer'))
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-circle'))
       }, null)])]);
@@ -2367,9 +2364,9 @@ var saturation_panel_colorPickerProps = {
 
 var ColorPickSizeEnum;
 (function (ColorPickSizeEnum) {
-  ColorPickSizeEnum["UNKNOWN"] = "";
-  ColorPickSizeEnum["SMALL"] = "small";
   ColorPickSizeEnum["LARGE"] = "large";
+  ColorPickSizeEnum["SMALL"] = "small";
+  ColorPickSizeEnum["UNKNOWN"] = "";
 })(ColorPickSizeEnum || (ColorPickSizeEnum = {}));
 var color_picker_colorPickerProps = {
   modelValue: shared_namespaceObject.PropTypes.string.def(''),
@@ -2386,7 +2383,9 @@ var color_picker_colorPickerProps = {
   }), shared_namespaceObject.PropTypes.bool.def(true)]).def(true),
   extCls: shared_namespaceObject.PropTypes.string.def(''),
   withValidate: shared_namespaceObject.PropTypes.bool.def(true),
-  recommendEmpty: shared_namespaceObject.PropTypes.bool.def(true)
+  recommendEmpty: shared_namespaceObject.PropTypes.bool.def(true),
+  // 初始化默认展开
+  showOnInit: shared_namespaceObject.PropTypes.bool.def(false)
 };
 var whiteColorObj = formatColor('#FFFFFF');
 /* harmony default export */ const color_picker = ((0,external_vue_namespaceObject.defineComponent)({
@@ -2411,7 +2410,8 @@ var whiteColorObj = formatColor('#FFFFFF');
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var colorPickerCls = (0,external_vue_namespaceObject.computed)(function () {
-      return (0,shared_namespaceObject.classes)(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(resolveClassName("color-picker-".concat(props.size))), props.size), "".concat(resolveClassName('color-picker-show-dropdown')), showDropdown.value), "".concat(resolveClassName('color-picker-show-value')), props.showValue), "".concat(resolveClassName('color-picker-disabled')), props.disabled || props.readonly), "".concat(resolveClassName('color-picker'), " ").concat(props.extCls));
+      var _classes;
+      return (0,shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(resolveClassName("color-picker-".concat(props.size))), props.size), _defineProperty(_classes, "".concat(resolveClassName('color-picker-show-dropdown')), showDropdown.value), _defineProperty(_classes, "".concat(resolveClassName('color-picker-show-value')), props.showValue), _defineProperty(_classes, "".concat(resolveClassName('color-picker-disabled')), props.disabled || props.readonly), _classes), "".concat(resolveClassName('color-picker'), " ").concat(props.extCls));
     });
     // 是否渲染预设值
     var isRenderRecommend = (0,external_vue_namespaceObject.computed)(function () {
@@ -2422,6 +2422,11 @@ var whiteColorObj = formatColor('#FFFFFF');
       changeColorFromProps({
         isCreated: true
       });
+      if (props.showOnInit) {
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          openDropdown();
+        });
+      }
     });
     (0,external_vue_namespaceObject.watch)(function () {
       return props.modelValue;
@@ -2430,7 +2435,7 @@ var whiteColorObj = formatColor('#FFFFFF');
       changeColorFromProps();
       if (props.withValidate) {
         var _formItem$validate;
-        formItem === null || formItem === void 0 || (_formItem$validate = formItem.validate) === null || _formItem$validate === void 0 || _formItem$validate.call(formItem, 'change');
+        formItem === null || formItem === void 0 || (_formItem$validate = formItem.validate) === null || _formItem$validate === void 0 ? void 0 : _formItem$validate.call(formItem, 'change');
       }
     });
     var handleTriggerKeydown = function handleTriggerKeydown(e) {
@@ -2466,7 +2471,7 @@ var whiteColorObj = formatColor('#FFFFFF');
     var openDropdown = function openDropdown() {
       var _dropRef$value;
       showDropdown.value = true;
-      (_dropRef$value = dropRef.value) === null || _dropRef$value === void 0 || _dropRef$value.updateDropdown();
+      (_dropRef$value = dropRef.value) === null || _dropRef$value === void 0 ? void 0 : _dropRef$value.updateDropdown();
       // 展开后默认聚焦于 HEX 输入框，setTimeout 等 transfer 出现
       setTimeout(function () {
         var hexInput = dropRef.value.$el.querySelector(".".concat(resolveClassName('color-picker-input-hex'), " .").concat(resolveClassName('color-picker-input-value')));
@@ -2480,7 +2485,7 @@ var whiteColorObj = formatColor('#FFFFFF');
           return referenceRef.value.focus();
         });
         showDropdown.value = false;
-        (_dropRef$value2 = dropRef.value) === null || _dropRef$value2 === void 0 || _dropRef$value2.destoryDropdown();
+        (_dropRef$value2 = dropRef.value) === null || _dropRef$value2 === void 0 ? void 0 : _dropRef$value2.destoryDropdown();
         // 3. 关闭组件时如果绑定值与组件内部选择的值不一致（比如既没有使用 v-model 也没有监听 change 事件）显示绑定值
         changeColorFromProps();
       }
@@ -2565,18 +2570,18 @@ var whiteColorObj = formatColor('#FFFFFF');
     return function () {
       return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
         "ref": referenceRef,
-        "tabindex": "0",
         "class": colorPickerCls.value,
-        "onKeydown": handleTriggerKeydown,
-        "onClick": toggleDropdown
+        "tabindex": "0",
+        "onClick": toggleDropdown,
+        "onKeydown": handleTriggerKeydown
       }, [typeof slots.trigger === 'function' ? slots.trigger({
         value: colorStr.value,
         isShowDropdown: showDropdown.value
       }) : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-color'))
       }, [(0,external_vue_namespaceObject.createVNode)("span", {
-        "class": "".concat(resolveClassName('color-picker-color-square'), " ").concat(!colorStr.value && "".concat(resolveClassName('color-picker-empty'))),
-        "style": "background: ".concat(colorStr.value || '#FFF')
+        "style": "background: ".concat(colorStr.value || '#FFF'),
+        "class": "".concat(resolveClassName('color-picker-color-square'), " ").concat(!colorStr.value && "".concat(resolveClassName('color-picker-empty')))
       }, null)]), props.showValue ? (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName('color-picker-text'))
       }, [(0,external_vue_namespaceObject.createVNode)("span", null, [colorStr.value])]) : undefined, (0,external_vue_namespaceObject.createVNode)("div", {
@@ -2599,10 +2604,10 @@ var whiteColorObj = formatColor('#FFFFFF');
                 "onClick": function onClick(e) {
                   e.stopPropagation();
                 },
+                "onKeydown": handleDropdownKeydown,
                 "onMousedown": function onMousedown(e) {
                   e.stopPropagation();
-                },
-                "onKeydown": handleDropdownKeydown
+                }
               }, [(0,external_vue_namespaceObject.createVNode)(saturation_panel, {
                 "ref": saturationPanelRef,
                 "colorObj": colorObj,
@@ -2612,16 +2617,16 @@ var whiteColorObj = formatColor('#FFFFFF');
                 "onChange": handleColorChange
               }, null), (0,external_vue_namespaceObject.createVNode)(color_input, {
                 "colorObj": colorObj,
-                "onTab": handleTabInput,
-                "onChange": handleColorChange
+                "onChange": handleColorChange,
+                "onTab": handleTabInput
               }, null), isRenderRecommend.value ? (0,external_vue_namespaceObject.createVNode)("div", {
                 "class": "".concat(resolveClassName('color-picker-recommend-container'))
               }, [(0,external_vue_namespaceObject.createVNode)(recommend_colors, {
                 "colorObj": colorObj,
                 "recommend": props.recommend,
                 "recommendEmpty": props.recommendEmpty,
-                "onTab": handleTabRecommend,
-                "onChange": handleColorChange
+                "onChange": handleColorChange,
+                "onTab": handleTabRecommend
               }, null)]) : undefined])])];
             }
           }), [[external_vue_namespaceObject.vShow, showDropdown.value]])];

package/lib/components.d.ts

@@ -1,65 +1,63 @@
+export { default as Affix } from './affix';
 export { default as Alert } from './alert';
 export { default as AnimateNumber } from './animate-number';
-export { default as Affix } from './affix';
 export { default as Backtop } from './backtop';
 export { default as Badge } from './badge';
 export { default as Breadcrumb } from './breadcrumb';
 export { default as Button } from './button';
 export { default as Card } from './card';
+export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
+export { default as CodeDiff } from './code-diff';
 export type { CollapseProps, CollapsePanelProps } from './collapse';
 export { default as Collapse } from './collapse';
+export { default as ColorPicker } from './color-picker';
+export { default as ConfigProvider } from './config-provider';
+export { default as Container } from './container';
+export { default as DatePicker } from './date-picker';
 export { default as Dialog } from './dialog';
+export { default as Divider } from './divider';
+export { default as Dropdown } from './dropdown';
 export { default as Exception } from './exception';
 export { default as FixedNavbar } from './fixed-navbar';
+export { default as Form } from './form';
+export { default as InfoBox } from './info-box';
 export { default as Input } from './input';
 export { default as Link } from './link';
 export { default as Loading } from './loading';
+export { default as Menu } from './menu';
+export { default as Message } from './message';
 export { default as Modal } from './modal';
+export { default as Navigation } from './navigation';
+export { default as Notify } from './notify';
+export { default as OverflowTitle } from './overflow-title';
+export { default as Pagination } from './pagination';
+export { default as $bkPopover } from './plugin-popover';
+export { default as PopConfirm } from './pop-confirm';
 export { default as Popover } from './popover';
 export { default as Popover2 } from './popover2';
+export { default as Process } from './process';
 export { default as Progress } from './progress';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
-export { default as Swiper } from './swiper';
+export { default as ResizeLayout } from './resize-layout';
+export { default as scrollbar } from './scrollbar';
+export { default as SearchSelect } from './search-select';
 export { default as Select } from './select';
 export { default as Sideslider } from './sideslider';
+export { default as Slider } from './slider';
 export { default as Steps } from './steps';
+export { default as Swiper } from './swiper';
 export { default as Switcher } from './switcher';
+export type { TabProps, TabPanelProps } from './tab';
+export { default as Tab } from './tab';
 export type { TableSettings, TableIColumn, TableProps } from './table';
 export { default as Table } from './table';
 export { default as Tag } from './tag';
 export { default as TagInput } from './tag-input';
-export { default as Divider } from './divider';
-export type { TabProps, TabPanelProps } from './tab';
-export { default as Tab } from './tab';
-export { default as Message } from './message';
-export { default as InfoBox } from './info-box';
-export { default as Notify } from './notify';
-export { default as Menu } from './menu';
-export { default as Navigation } from './navigation';
-export { default as DatePicker } from './date-picker';
+export { default as TimePicker } from './time-picker';
+export { default as Timeline } from './timeline';
 export { default as Transfer } from './transfer';
 export { default as Tree } from './tree';
-export { default as VirtualRender } from './virtual-render';
-export { default as Form } from './form';
-export { default as Pagination } from './pagination';
-export { default as Container } from './container';
-export { default as containerProps } from './container';
-export { default as Dropdown } from './dropdown';
-export { default as Cascader } from './cascader';
-export { default as Slider } from './slider';
-export { default as ResizeLayout } from './resize-layout';
-export { default as TimeLine } from './timeline';
-export { default as Timeline } from './timeline';
-export { default as Process } from './process';
 export { default as Upload } from './upload';
-export { default as CodeDiff } from './code-diff';
-export { default as ColorPicker } from './color-picker';
-export { default as TimePicker } from './time-picker';
-export { default as SearchSelect } from './search-select';
-export { default as OverflowTitle } from './overflow-title';
-export { default as $bkPopover } from './plugin-popover';
-export { default as ConfigProvider } from './config-provider';
-export { default as PopConfirm } from './pop-confirm';
-export { default as scrollbar } from './scrollbar';
+export { default as VirtualRender } from './virtual-render';