@aloudata/aloudata-design 2.15.8 → 2.15.9

package/dist/ColorPicker/ComplexColorPicker/index.js

@@ -1,3 +1,7 @@
+function _typeof(obj) { "@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); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+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 (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -10,6 +14,7 @@ import ColorInput from "./ColorInput";
 import useColor from "../hooks/useColor";
 import { genAlphaColor, generateColor, getColorAlpha } from "../util";
 import Dropdown from "../../Dropdown";
+import classNames from 'classnames';
 var prefixCls = 'ald-color-picker';
 export default function ColorPicker(props) {
   var value = props.value,
@@ -19,7 +24,9 @@ export default function ColorPicker(props) {
     onChangeComplete = props.onChangeComplete,
     trigger = props.trigger,
     open = props.open,
-    onOpenChange = props.onOpenChange;
+    onOpenChange = props.onOpenChange,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size;
   var _useColor = useColor(defaultValue, value),
     _useColor2 = _slicedToArray(_useColor, 2),
     mergedColor = _useColor2[0],
@@ -51,6 +58,7 @@ export default function ColorPicker(props) {
     open: open,
     trigger: trigger,
     onOpenChange: onOpenChange,
+    overlayClassName: "".concat(prefixCls, "-overlay-wrapper"),
     dropdownRender: function dropdownRender() {
       return /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-wrapper")
@@ -71,9 +79,9 @@ export default function ColorPicker(props) {
       }));
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-trigger-wrapper")
+    className: classNames("".concat(prefixCls, "-trigger-wrapper"), _defineProperty({}, "".concat(prefixCls, "-trigger-wrapper-").concat(size), !!size))
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-trigger-default"),
+    className: "".concat(prefixCls, "-trigger-inner"),
     style: {
       backgroundColor: mergedColor.toCssString()
     }

package/dist/ColorPicker/index.js

@@ -164,6 +164,7 @@ export default function ColorPicker(_ref) {
       open: open,
       disabled: disabled,
       placement: 'bottom-start',
+      overlayClassName: 'ald-color-picker-overlay-wrapper',
       dropdownRender: function dropdownRender() {
         return overlay;
       }

package/dist/ColorPicker/interface.d.ts

@@ -3,6 +3,7 @@ import type { ColorGenInput, ColorPickerProps as RcColorPickerProps } from '@rc-
 import type { PopoverProps } from '../Popover';
 import type { AggregationColor } from './color';
 import { ITooltipProps } from '../Tooltip';
+import { SizeType } from '../ConfigProvider/sizeContext';
 export type { ColorGenInput };
 export type Colors<T> = {
     color: ColorGenInput<T>;
@@ -20,6 +21,7 @@ export type SingleValueType = AggregationColor | string;
 export type ColorValueType = SingleValueType | null;
 export type ColorPickerProps = Omit<RcColorPickerProps, 'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'disabledAlpha' | 'onChangeComplete' | 'components'> & {
     value?: ColorValueType;
+    size?: SizeType;
     defaultValue?: ColorValueType;
     children?: React.ReactNode;
     open?: boolean;

package/dist/ColorPicker/style/complex.less

@@ -152,8 +152,45 @@
 
 .ald-color-picker-trigger-wrapper {
   display: inline-flex;
+  padding: 3px;
+  border: 1px solid #d1d5db;
+  background-color: #fff;
+
+  .ald-color-picker-trigger-inner {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+}
+
+.ald-color-picker-trigger-wrapper-small {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+
+  .ald-color-picker-trigger-inner {
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+  }
+}
+
+.ald-color-picker-trigger-wrapper-middle {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+
+  .ald-color-picker-trigger-inner {
+    width: 24px;
+    height: 24px;
+    border-radius: 3px;
+  }
+}
+
+.ald-color-picker-trigger-wrapper-large {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
 
-  .ald-color-picker-trigger-default {
+  .ald-color-picker-trigger-inner {
     width: 28px;
     height: 28px;
     border-radius: 4px;

package/dist/ColorPicker/style/index.less

@@ -49,13 +49,16 @@
   }
 }
 
+.ald-dropdown-overlay.ald-color-picker-overlay-wrapper {
+  padding: 0 !important;
+  overflow: hidden;
+}
+
 .ald-color-picker-overlay {
   position: relative;
   width: 253px;
   background: #fff;
-  border: 1px solid #dbdbdb;
   box-sizing: border-box;
-  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
   border-radius: 2px;
   padding: 8px 7px;