@para-ui/core 3.0.86 → 4.0.0-alpha

package/_verture/index-5c77417d.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SwatchesPicker as SwatchesPicker$1, CompactPicker as CompactPicker$1, ChromePicker as ChromePicker$1, SketchPicker as SketchPicker$1 } from 'react-color';
+import clsx from 'clsx';
+import { $ as $prefixCls } from './constant-0d9802f7.js';
+import { s as styleInject } from './style-inject.es-300983ab.js';
+import { useRef } from 'react';
+
+var css_248z$4 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-swatches-picker .swatches-picker {\n  box-shadow: 0px 2px 8px 0px #eaecf1 !important;\n}\n.paraui-v4-swatches-picker .swatches-picker > div > div {\n  box-shadow: unset;\n}\n.paraui-v4-swatches-picker > div > div > div > div > div > div {\n  margin-right: 8px !important;\n}";
+styleInject(css_248z$4);
+
+var SwatchesPicker = function SwatchesPicker(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className;
+  return jsx("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-swatches-picker"), className)
+  }, {
+    children: jsx(SwatchesPicker$1, Object.assign({
+      width: 256,
+      styles: {
+        default: {
+          body: {
+            padding: '10px 0px 6px 10px'
+          }
+        }
+      }
+    }, props))
+  }));
+};
+
+var colorCardList = ['#FFFFFF', '#A1A8B3', '#999999', '#E15B46', '#F7DD4A', '#DCDF48', '#B0DB44', '#81CAC9', '#8CD6FB', '#ACA1F9', '#FD98FD', '#EAECF1', '#5C6573', '#808080', '#C24027', '#D4792C', '#B2BC3B', '#7CBA37', '#4DA2A4', '#459ADA', '#7765F6', '#FA01FD', '#D4DAE3', '#1D2126', '#666666', '#911E12', '#B65821', '#828929', '#284C35', '#36777C', '#2860AB', '#5E358F', '#AB009D'];
+var colorCardSketchList = colorCardList.map(function (color) {
+  return {
+    color: color,
+    title: color
+  };
+});
+
+var css_248z$3 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-compact-picker > div > div {\n  box-shadow: unset !important;\n}\n.paraui-v4-compact-picker .compact-picker {\n  width: 220px !important;\n  box-shadow: 0px 2px 8px 0px #eaecf1 !important;\n}\n.paraui-v4-compact-picker .compact-picker > div > span > div {\n  width: 14px !important;\n  height: 14px !important;\n  margin-right: 4px !important;\n  margin-bottom: 4px !important;\n  box-shadow: unset !important;\n  border: 1px solid rgba(29, 33, 38, 0.4);\n}\n.paraui-v4-compact-picker .compact-picker > div > span > div > div {\n  inset: 4px !important;\n  background: rgb(255, 255, 255) !important;\n}\n.paraui-v4-compact-picker .compact-picker > div > span > div[title=\"#FFFFFF\"] > div {\n  background: rgb(0, 0, 0) !important;\n}";
+styleInject(css_248z$3);
+
+var CompactPicker = function CompactPicker(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className;
+  return jsx("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-compact-picker"), className)
+  }, {
+    children: jsx(CompactPicker$1, Object.assign({
+      styles: {
+        default: {
+          compact: {
+            paddingLeft: '4px',
+            paddingTop: '4px'
+          }
+        }
+      },
+      colors: colorCardList
+    }, props))
+  }));
+};
+
+var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-chrome-picker .chrome-picker > div > div > div > div > div > div > div > div {\n  margin-top: 1px !important;\n  width: 4px !important;\n  border-radius: 1px !important;\n  height: 8px !important;\n  box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 2px !important;\n  background: rgb(255, 255, 255) !important;\n  transform: translateX(-2px) !important;\n}\n.paraui-v4-chrome-picker .chrome-picker > div:nth-child(1) > div > div > div > div {\n  width: 10px !important;\n  height: 10px !important;\n  transform: translate(-5px, -5px) !important;\n}";
+styleInject(css_248z$2);
+
+var ChromePicker = function ChromePicker(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className;
+  return jsx("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-chrome-picker"), className)
+  }, {
+    children: jsx(ChromePicker$1, Object.assign({
+      styles: {
+        default: {
+          picker: {
+            padding: '10px',
+            boxShadow: '0px 2px 8px 0px #eaecf1'
+          },
+          body: {
+            padding: '5px 0 0 0 '
+          }
+        }
+      }
+    }, props))
+  }));
+};
+
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-sketch-picker {\n  width: 236px;\n  box-sizing: border-box;\n  padding: 10px 10px 6px;\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: 0px 2px 8px 0px #eaecf1;\n}\n.paraui-v4-sketch-picker .sketch-picker > div > div > span > div {\n  position: relative !important;\n  width: 16px !important;\n  height: 16px !important;\n  border: 1px solid rgba(29, 33, 38, 0.4) !important;\n  border-radius: 2px !important;\n  box-shadow: unset !important;\n  box-sizing: border-box !important;\n}\n.paraui-v4-sketch-picker .sketch-picker > div:nth-child(1) > div > div > div > div {\n  box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset !important;\n  width: 10px !important;\n  height: 10px !important;\n  transform: translate(-5px, -5px) !important;\n}\n.paraui-v4-sketch-picker .sketch-picker > div:nth-child(3) #rc-editable-input-1, .paraui-v4-sketch-picker .sketch-picker > div:nth-child(3) #rc-editable-input-2, .paraui-v4-sketch-picker .sketch-picker > div:nth-child(3) #rc-editable-input-3, .paraui-v4-sketch-picker .sketch-picker > div:nth-child(3) #rc-editable-input-4, .paraui-v4-sketch-picker .sketch-picker > div:nth-child(3) #rc-editable-input-5 {\n  box-shadow: unset !important;\n  border: 1px solid #d4dae3 !important;\n  border-radius: 2px !important;\n  color: rgb(29, 33, 38) !important;\n}\n.paraui-v4-sketch-picker .sketch-picker > div:nth-child(4) {\n  margin: 0 !important;\n  padding: 0 !important;\n  padding-top: 10px !important;\n  margin-right: -4px !important;\n}\n.paraui-v4-sketch-picker .sketch-picker > div:nth-child(4) > div {\n  margin: 0px 4px 4px 0px !important;\n}\n.paraui-v4-sketch-picker .sketch-picker > div > div > span > div.active::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  inset: 4px;\n  background: rgb(255, 255, 255);\n}\n.paraui-v4-sketch-picker .sketch-picker > div > div > span > div[title=\"#FFFFFF\"]::after {\n  background: rgb(0, 0, 0) !important;\n}\n.paraui-v4-sketch-picker .square {\n  width: 16px;\n  height: 16px;\n  background: #ffffff;\n  border: 1px solid rgba(29, 33, 38, 0.4);\n  border-radius: 2px;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n.paraui-v4-sketch-picker .square::before {\n  width: 24px;\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg);\n  height: 1px;\n  background-color: #a4a6a8;\n}";
+styleInject(css_248z$1);
+
+var SketchPicker = function SketchPicker(props) {
+  var onChange = props.onChange,
+    clear = props.clear,
+    onClear = props.onClear,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className;
+  // 容器节点
+  var wrapperRef = useRef(null);
+  var onPickerChange = function onPickerChange(color, event) {
+    var _a, _b, _c, _d;
+    var hex = (_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    // 找到标签上title属性为hex的元素
+    var el = document.querySelector("div[title=\"".concat(hex, "\"]"));
+    // 现移除el父元素下所有的active类名
+    var parents = (_c = (_b = el === null || el === void 0 ? void 0 : el.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement;
+    if (parents) {
+      (_d = parents.querySelectorAll(".active")) === null || _d === void 0 ? void 0 : _d.forEach(function (item) {
+        item.classList.remove("active");
+      });
+    }
+    // 为el元素添加active类名
+    el === null || el === void 0 ? void 0 : el.classList.add("active");
+    onChange && onChange(color, event);
+  };
+  var onClearCallback = function onClearCallback() {
+    var _a;
+    var elList = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".active");
+    if (elList === null || elList === void 0 ? void 0 : elList.length) {
+      elList.forEach(function (item) {
+        item.classList.remove("active");
+      });
+    }
+    onClear && onClear();
+  };
+  return jsxs("div", Object.assign({
+    ref: wrapperRef,
+    className: clsx("".concat($prefixCls, "-sketch-picker"), className)
+  }, {
+    children: [jsx(SketchPicker$1, Object.assign({
+      width: '100%',
+      styles: {
+        default: {
+          picker: {
+            padding: '0',
+            boxShadow: 'unset'
+          }
+        }
+      },
+      presetColors: colorCardSketchList
+    }, props, {
+      onChange: onPickerChange
+    })), clear && jsx("div", {
+      className: 'square',
+      onClick: onClearCallback
+    })]
+  }));
+};
+
+var css_248z = ".sketch-picker, .chrome-picker,\n.swatches-picker, .compact-picker {\n  box-sizing: content-box !important;\n}\n.sketch-picker *, .chrome-picker *,\n.swatches-picker *, .compact-picker * {\n  box-sizing: content-box !important;\n}";
+styleInject(css_248z);
+
+export { ChromePicker as C, SketchPicker as S, CompactPicker as a, SwatchesPicker as b };