bkui-vue 2.0.1-beta.110 → 2.0.1-beta.112

package/lib/color-picker/index.js

@@ -4,6 +4,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../sh
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_date_picker_d04526d6__ from "../date-picker";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_directives_45d4776f__ from "../directives";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
 /******/ // The require scope
@@ -38,40 +39,40 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 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 });
+const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["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(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  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);
+  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);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
 
-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;
+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;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
 
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 ;// 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,
@@ -87,7 +88,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 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 });
+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, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["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
@@ -96,6 +97,10 @@ const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: ()
 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 "../date-picker"
+var date_picker_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var date_picker_y = x => () => x
+const date_picker_namespaceObject = date_picker_x({ ["PickerDropdown"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_date_picker_d04526d6__.PickerDropdown });
 ;// CONCATENATED MODULE: external "../directives"
 var directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var directives_y = x => () => x
@@ -1286,257 +1291,6 @@ function validateWCAG2Parms(parms) {
 
 
 
-;// CONCATENATED MODULE: ../../packages/date-picker/src/base/picker-dropdown.tsx
-
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/*
- * Tencent is pleased to support the open source community by making
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
- *
- * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
- *
- * ---------------------------------------------------
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
- * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
- * the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
- * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-
-
-var pickerDropdownProps = {
-  placement: {
-    type: String,
-    "default": 'bottom-start',
-    validator: function validator(value) {
-      var validList = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'];
-      if (validList.indexOf(value) < 0) {
-        console.error("placement property is not valid: '".concat(value, "'"));
-        return false;
-      }
-      return true;
-    }
-  },
-  className: {
-    type: String
-  },
-  extPopoverCls: {
-    type: String
-  },
-  appendToBody: {
-    type: Boolean
-  },
-  triggerRef: {
-    type: Object
-  },
-  onClick: Function
-};
-/* harmony default export */ const picker_dropdown = ((0,external_vue_namespaceObject.defineComponent)({
-  props: pickerDropdownProps,
-  emits: ['changeVisible'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var popoverInstance = Object.create(null);
-    var refContentRef = (0,external_vue_namespaceObject.ref)(null);
-    (0,external_vue_namespaceObject.onMounted)(function () {
-      updateDropdown();
-    });
-    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
-      destoryDropdown();
-    });
-    // const resetTransformOrigin = (state) => {
-    //   if (popoverInstance && Object.keys(popoverInstance).length !== 0) {
-    //     const dataPopperPlacement = state.attributes.popper['data-popper-placement'] as string;
-    //     const arr = dataPopperPlacement.split('-');
-    //     const placementStart = arr[0];
-    //     const placementEnd = arr[1];
-    //     const leftOrRight = dataPopperPlacement === 'left' || dataPopperPlacement === 'right';
-    //     if (!leftOrRight) {
-    //       state.styles.popper.transformOrigin = placementStart === 'bottom'
-    //         || (placementStart !== 'top' && placementEnd === 'start')
-    //         ? 'center top'
-    //         : 'center bottom';
-    //     }
-    //   }
-    // };
-    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 ? void 0 : _popoverInstance$forc.call(_popoverInstance);
-      }
-    };
-    var destoryDropdown = function destoryDropdown() {
-      if (popoverInstance && Object.keys(popoverInstance).length !== 0) {
-        var instance = popoverInstance;
-        instance.isShow && instance.hide();
-        instance.destroy();
-        popoverInstance = null;
-        emit('changeVisible', false);
-      }
-    };
-    // const transforms = {
-    //   top: 'bottom center',
-    //   'top-start': 'bottom left',
-    //   'top-end': 'bottom right',
-    //   bottom: 'top center',
-    //   'bottom-start': 'top left',
-    //   'bottom-end': 'top right',
-    //   left: 'right center',
-    //   'left-start': 'right top',
-    //   'left-end': 'right bottom',
-    //   right: 'left center',
-    //   'right-start': 'left top',
-    //   'right-end': 'left bottom',
-    // };
-    // const toTransformOrigin = (placement: Placement) => transforms[placement];
-    // const toVar = (value: string, fallback?: string) => ({
-    //   var: value,
-    //   varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`,
-    // });
-    // const cssVars = {
-    //   arrowShadowColor: toVar('--popper-arrow-shadow-color'),
-    //   arrowSize: toVar('--popper-arrow-size', '8px'),
-    //   arrowSizeHalf: toVar('--popper-arrow-size-half'),
-    //   arrowBg: toVar('--popper-arrow-bg'),
-    //   transformOrigin: toVar('--popper-transform-origin'),
-    //   arrowOffset: toVar('--popper-arrow-offset'),
-    // } as const;
-    // const setTransformOrigin = (state: State) => {
-    //   state.elements.popper.style.setProperty(
-    //     cssVars.transformOrigin.var,
-    //     toTransformOrigin(state.placement),
-    //   );
-    // };
-    // const transformOrigin: Modifier<'transformOrigin', any> = {
-    //   name: 'transformOrigin',
-    //   enabled: true,
-    //   phase: 'write',
-    //   fn: ({ state }) => {
-    //     setTransformOrigin(state);
-    //   },
-    //   effect: ({ state }) => () => {
-    //     setTransformOrigin(state);
-    //   },
-    // };
-    // const matchWidth: Modifier<'matchWidth', any> = {
-    //   name: 'matchWidth',
-    //   enabled: true,
-    //   phase: 'beforeWrite',
-    //   requires: ['computeStyles'],
-    //   fn: ({ state }) => {
-    //     state.styles.popper.width = `${state.rects.reference.width + 1}px`;
-    //   },
-    //   effect: ({ state }) => () => {
-    //     const reference = state.elements.reference as HTMLElement;
-    //     state.elements.popper.style.width = `${reference.offsetWidth}px`;
-    //   },
-    // };
-    var updateDropdown = function updateDropdown() {
-      if (popoverInstance && Object.keys(popoverInstance).length !== 0) {
-        (0,external_vue_namespaceObject.nextTick)(function () {
-          popoverInstance.update();
-        });
-      } else {
-        (0,external_vue_namespaceObject.nextTick)(function () {
-          popoverInstance = new shared_namespaceObject.BKPopover(props.triggerRef, refContentRef.value, {
-            placement: props.placement,
-            trigger: 'manual',
-            modifiers: [
-            // matchWidth,
-            // transformOrigin,
-            {
-              name: 'computeStyles',
-              options: {
-                adaptive: false,
-                gpuAcceleration: false
-              }
-            }, {
-              name: 'offset',
-              options: {
-                offset: [0, 4]
-              }
-            }
-            // {
-            //   name: 'preventOverflow',
-            //   options: {
-            //     // boundariesElement: 'window',
-            //     padding: {
-            //       top: 2,
-            //       bottom: 2,
-            //       left: 5,
-            //       right: 5,
-            //     },
-            //   },
-            // },
-            // {
-            //   name: 'flip',
-            //   options: {
-            //     padding: 5,
-            //     rootBoundary: 'document',
-            //   },
-            // },
-            // {
-            //   name: 'onUpdate',
-            //   enabled: true,
-            //   phase: 'afterWrite',
-            //   fn({ state }) {
-            //     resetTransformOrigin(state);
-            //   },
-            // },
-            ]
-            // onFirstUpdate: () => {
-            //   resetTransformOrigin(popoverInstance.instance.state);
-            // },
-          });
-          // popoverInstance.update();
-        });
-      }
-    };
-    var styles = (0,external_vue_namespaceObject.computed)(function () {
-      var style = {};
-      if (props.appendToBody) {
-        style['z-index'] = 1060 + shared_namespaceObject.bkZIndexManager.getModalNextIndex();
-      }
-      return style;
-    });
-    var state = (0,external_vue_namespaceObject.reactive)({
-      styles: styles
-    });
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
-    return _objectSpread(_objectSpread({}, (0,external_vue_namespaceObject.toRefs)(state)), {}, {
-      refContentRef: refContentRef,
-      forceUpdate: forceUpdate,
-      updateDropdown: updateDropdown,
-      destoryDropdown: destoryDropdown,
-      resolveClassName: resolveClassName
-    });
-  },
-  render: function render() {
-    var _this$$slots$default, _this$$slots$default2, _this$$slots;
-    return (0,external_vue_namespaceObject.createVNode)("div", {
-      "ref": "refContentRef",
-      "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 : '']);
-  }
-}));
 ;// CONCATENATED MODULE: ../../packages/color-picker/src/components/input-container.tsx
 
 /*
@@ -1566,10 +1320,11 @@ var pickerDropdownProps = {
  */
 
 
+
 var inputContainerProps = {
   info: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const input_container = (defineComponent({
+/* harmony default export */ const input_container = ((0,external_vue_namespaceObject.defineComponent)({
   props: inputContainerProps,
   emits: ['tab', 'input'],
   setup: function setup(props, _ref) {
@@ -1586,7 +1341,7 @@ var inputContainerProps = {
     };
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
-    var colorPickerCls = computed(function () {
+    var colorPickerCls = (0,external_vue_namespaceObject.computed)(function () {
       return (0,shared_namespaceObject.classes)({
         error: props.info.error
       }, "".concat(resolveClassName('color-picker-input-value')));
@@ -1637,46 +1392,47 @@ var inputContainerProps = {
 
 
 
+
 var colorPickerProps = {
   colorObj: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const color_input = (defineComponent({
+/* harmony default export */ const color_input = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'ColorPicker',
   props: colorPickerProps,
   emits: ['change', 'tab'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
-    var hex = reactive({
+    var hex = (0,external_vue_namespaceObject.reactive)({
       key: 'hex',
       name: 'HEX',
       value: props.colorObj.hex,
       error: false
     });
-    var r = reactive({
+    var r = (0,external_vue_namespaceObject.reactive)({
       key: 'r',
       name: 'R',
       value: props.colorObj.rgba.r.toString(),
       error: false
     });
-    var g = reactive({
+    var g = (0,external_vue_namespaceObject.reactive)({
       key: 'g',
       name: 'G',
       value: props.colorObj.rgba.g.toString(),
       error: false
     });
-    var b = reactive({
+    var b = (0,external_vue_namespaceObject.reactive)({
       key: 'b',
       name: 'B',
       value: props.colorObj.rgba.b.toString(),
       error: false
     });
-    var a = reactive({
+    var a = (0,external_vue_namespaceObject.reactive)({
       key: 'a',
       name: 'Alpha',
       value: props.colorObj.rgba.a.toString(),
       error: false
     });
-    watch(function () {
+    (0,external_vue_namespaceObject.watch)(function () {
       return props.colorObj;
     }, function (val) {
       if (tinycolor(val.hex).toString() !== tinycolor(hex.value).toString()) {
@@ -1910,17 +1666,18 @@ var toRGBAString = function toRGBAString(rgba) {
 
 
 
+
 var hue_slider_colorPickerProps = {
   colorObj: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const hue_slider = (defineComponent({
+/* harmony default export */ const hue_slider = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'ColorPicker',
   props: hue_slider_colorPickerProps,
   emits: ['change'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
-    var containerRef = ref(null);
-    var pointerStyle = computed(function () {
+    var containerRef = (0,external_vue_namespaceObject.ref)(null);
+    var pointerStyle = (0,external_vue_namespaceObject.computed)(function () {
       return {
         left: "".concat(props.colorObj.hsv.h / 360 * 100, "%")
       };
@@ -2081,8 +1838,7 @@ var recommend_colors_colorPickerProps = {
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var getColorClass = function getColorClass(color, index) {
-      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')));
+      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 handleKeydown = function handleKeydown(e) {
       if (e.code === 'Tab') {
@@ -2200,21 +1956,22 @@ var recommend_colors_colorPickerProps = {
 
 
 
+
 var saturation_panel_colorPickerProps = {
   colorObj: shared_namespaceObject.PropTypes.object.isRequired
 };
-/* harmony default export */ const saturation_panel = (defineComponent({
+/* harmony default export */ const saturation_panel = ((0,external_vue_namespaceObject.defineComponent)({
   props: saturation_panel_colorPickerProps,
   emits: ['change'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
-    var containerRef = ref(null);
-    var backgroundStyle = computed(function () {
+    var containerRef = (0,external_vue_namespaceObject.ref)(null);
+    var backgroundStyle = (0,external_vue_namespaceObject.computed)(function () {
       return {
         background: "hsl(".concat(props.colorObj.hsv.h, ", 100%, 50%)")
       };
     });
-    var pointerStyle = computed(function () {
+    var pointerStyle = (0,external_vue_namespaceObject.computed)(function () {
       return {
         top: "".concat((1 - props.colorObj.hsv.v) * 100, "%"),
         left: "".concat(props.colorObj.hsv.s * 100, "%")
@@ -2410,8 +2167,7 @@ var whiteColorObj = formatColor('#FFFFFF');
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var colorPickerCls = (0,external_vue_namespaceObject.computed)(function () {
-      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));
+      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 isRenderRecommend = (0,external_vue_namespaceObject.computed)(function () {
@@ -2435,7 +2191,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 ? void 0 : _formItem$validate.call(formItem, 'change');
+        formItem === null || formItem === void 0 || (_formItem$validate = formItem.validate) === null || _formItem$validate === void 0 || _formItem$validate.call(formItem, 'change');
       }
     });
     var handleTriggerKeydown = function handleTriggerKeydown(e) {
@@ -2471,7 +2227,7 @@ var whiteColorObj = formatColor('#FFFFFF');
     var openDropdown = function openDropdown() {
       var _dropRef$value;
       showDropdown.value = true;
-      (_dropRef$value = dropRef.value) === null || _dropRef$value === void 0 ? void 0 : _dropRef$value.updateDropdown();
+      (_dropRef$value = dropRef.value) === null || _dropRef$value === 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')));
@@ -2485,7 +2241,7 @@ var whiteColorObj = formatColor('#FFFFFF');
           return referenceRef.value.focus();
         });
         showDropdown.value = false;
-        (_dropRef$value2 = dropRef.value) === null || _dropRef$value2 === void 0 ? void 0 : _dropRef$value2.destoryDropdown();
+        (_dropRef$value2 = dropRef.value) === null || _dropRef$value2 === void 0 || _dropRef$value2.destoryDropdown();
         // 3. 关闭组件时如果绑定值与组件内部选择的值不一致（比如既没有使用 v-model 也没有监听 change 事件）显示绑定值
         changeColorFromProps();
       }
@@ -2592,7 +2348,7 @@ var whiteColorObj = formatColor('#FFFFFF');
         "name": "bk-fade-down-transition"
       }, {
         "default": function _default() {
-          return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)(picker_dropdown, {
+          return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)(date_picker_namespaceObject.PickerDropdown, {
             "ref": dropRef,
             "triggerRef": referenceRef.value
           }, {