@nocobase/plugin-theme-editor 0.11.1-alpha.5 → 0.12.0-alpha.1

package/{lib → dist}/index.d.ts

@@ -1 +1,2 @@
+export * from './server';
 export { default } from './server';

package/dist/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var server = require('./server');
+
+
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function () { return server__namespace.default; }
+});
+Object.keys(server).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return server[k]; }
+  });
+});

package/dist/locale/en-US.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const locale = {
+  Theme: "Theme",
+  Local: "Local",
+  "Dark theme": "Dark theme",
+  Optional: "Optional",
+  "Non-optional": "Non-optional",
+  Current: "Current",
+  Default: "Default",
+  // 主题编辑器
+  "Theme Editor": "Theme Editor",
+  Save: "Save",
+  Close: "Close",
+  Edit: "Edit",
+  Export: "Export",
+  "edit Theme Config": "edit Theme Config",
+  "The theme of the JSON format is incorrect": "The theme of the JSON format is incorrect",
+  "Edited successfully": "Edited successfully",
+  "Saved successfully": "Saved successfully",
+  "Initializing Editor...": "Initializing Editor...",
+  "Save theme": "Save theme",
+  "Please set a name for this theme": "Please set a name for this theme",
+  "Please input the theme name": "Please input the theme name"
+};
+var en_US_default = locale;
+
+module.exports = en_US_default;

package/dist/locale/fr-FR.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const locale = {
+  Theme: "Th\xE8me",
+  Local: "Local",
+  "Dark theme": "Th\xE8me sombre",
+  Optional: "Optionnel",
+  "Non-optional": "Non-optionnel",
+  Current: "Actuel",
+  Default: "Par d\xE9faut",
+  // 主题编辑器
+  "Theme Editor": "\xC9diteur de th\xE8me",
+  Save: "Enregistrer",
+  Close: "Fermer",
+  Edit: "Modifier",
+  Export: "Exporter",
+  "edit Theme Config": "Modifier la configuration du th\xE8me",
+  "The theme of the JSON format is incorrect": "Le th\xE8me au format JSON est incorrect",
+  "Edited successfully": "Modifi\xE9 avec succ\xE8s",
+  "Saved successfully": "Enregistr\xE9 avec succ\xE8s",
+  "Initializing Editor...": "Initialisation de l'\xE9diteur...",
+  "Save theme": "Enregistrer le th\xE8me",
+  "Please set a name for this theme": "Veuillez d\xE9finir un nom pour ce th\xE8me",
+  "Please input the theme name": "Veuillez saisir le nom du th\xE8me"
+};
+var fr_FR_default = locale;
+
+module.exports = fr_FR_default;

package/dist/locale/zh-CN.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const locale = {
+  "Theme editor": "\u4E3B\u9898\u7F16\u8F91\u5668",
+  Themes: "\u4E3B\u9898",
+  "Dark theme": "\u6697\u9ED1\u4E3B\u9898",
+  Optional: "\u53EF\u9009",
+  "Non-optional": "\u4E0D\u53EF\u9009",
+  Current: "\u5F53\u524D\u4E3B\u9898",
+  Default: "\u9ED8\u8BA4",
+  "Delete theme": "\u5220\u9664\u4E3B\u9898",
+  "Deletion is unrecoverable. Confirm deletion?": "\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\uFF0C\u786E\u8BA4\u5220\u9664\uFF1F",
+  "Deleted successfully": "\u5220\u9664\u6210\u529F",
+  "Updated successfully": "\u66F4\u65B0\u6210\u529F",
+  "User selectable": "\u53EF\u88AB\u7528\u6237\u9009\u62E9",
+  "Default theme": "\u9ED8\u8BA4\u4E3B\u9898",
+  "Add new theme": "\u6DFB\u52A0\u65B0\u4E3B\u9898",
+  "Edit based on current theme": "\u57FA\u4E8E\u5F53\u524D\u4E3B\u9898\u8FDB\u884C\u7F16\u8F91",
+  "Create a brand new theme": "\u521B\u5EFA\u4E00\u4E2A\u5168\u65B0\u7684\u4E3B\u9898",
+  // 内置主题的名字
+  "Default theme of antd": "antd \u9ED8\u8BA4\u4E3B\u9898",
+  Dark: "\u6697\u9ED1",
+  Compact: "\u7D27\u51D1",
+  "Compact dark": "\u7D27\u51D1\u6697\u9ED1",
+  // 主题编辑器
+  "Theme Editor": "\u4E3B\u9898\u7F16\u8F91\u5668",
+  Save: "\u4FDD\u5B58",
+  Close: "\u5173\u95ED",
+  Edit: "\u7F16\u8F91",
+  Export: "\u5BFC\u51FA",
+  "edit Theme Config": "\u7F16\u8F91\u4E3B\u9898\u914D\u7F6E",
+  "The theme of the JSON format is incorrect": "\u4E3B\u9898 JSON \u683C\u5F0F\u9519\u8BEF",
+  "Edited successfully": "\u7F16\u8F91\u6210\u529F",
+  "Saved successfully": "\u4FDD\u5B58\u6210\u529F",
+  "Initializing Editor...": "\u6B63\u5728\u521D\u59CB\u5316\u7F16\u8F91\u5668...",
+  "Save theme": "\u4FDD\u5B58\u4E3B\u9898",
+  "Please set a name for this theme": "\u8BF7\u4E3A\u8BE5\u4E3B\u9898\u8BBE\u7F6E\u4E00\u4E2A\u540D\u5B57",
+  "Please input the theme name": "\u8BF7\u8F93\u5165\u4E3B\u9898\u540D\u5B57"
+};
+var zh_CN_default = locale;
+
+module.exports = zh_CN_default;

package/dist/server/builtinThemes.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const antd = {
+  config: {
+    name: "Default theme of antd"
+  },
+  optional: true,
+  isBuiltIn: true
+};
+const dark = {
+  config: {
+    name: "Dark",
+    // @ts-ignore
+    algorithm: "darkAlgorithm"
+  },
+  optional: true,
+  isBuiltIn: true
+};
+const compact = {
+  config: {
+    name: "Compact",
+    // @ts-ignore
+    algorithm: "compactAlgorithm"
+  },
+  optional: true,
+  isBuiltIn: true
+};
+const compactDark = {
+  config: {
+    name: "Compact dark",
+    // @ts-ignore
+    algorithm: ["compactAlgorithm", "darkAlgorithm"]
+  },
+  optional: true,
+  isBuiltIn: true
+};
+
+exports.antd = antd;
+exports.compact = compact;
+exports.compactDark = compactDark;
+exports.dark = dark;

package/dist/server/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var plugin = require('./plugin');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var plugin__default = /*#__PURE__*/_interopDefault(plugin);
+
+
+
+module.exports = plugin__default.default;

package/{lib → dist}/server/plugin.d.ts

@@ -1,7 +1,6 @@
-import { Collection } from '@nocobase/database';
 import { InstallOptions, Plugin } from '@nocobase/server';
 export declare class ThemeEditorPlugin extends Plugin {
-    theme: Collection<any, any>;
+    theme: any;
     afterAdd(): void;
     beforeLoad(): void;
     load(): Promise<void>;

package/dist/server/plugin.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var server = require('@nocobase/server');
+var builtinThemes = require('./builtinThemes');
+
+class ThemeEditorPlugin extends server.Plugin {
+  theme;
+  afterAdd() {
+  }
+  beforeLoad() {
+  }
+  async load() {
+    this.theme = this.db.collection({
+      name: "themeConfig",
+      fields: [
+        // 主题配置内容，一个 JSON 字符串
+        {
+          type: "json",
+          name: "config"
+        },
+        // 主题是否可选
+        {
+          type: "boolean",
+          name: "optional"
+        },
+        {
+          type: "boolean",
+          name: "isBuiltIn"
+        }
+      ]
+    });
+  }
+  async install(options) {
+    if (await this.theme.repository.count() === 0) {
+      await this.theme.repository.create({
+        values: [builtinThemes.antd, builtinThemes.dark, builtinThemes.compact, builtinThemes.compactDark]
+      });
+    }
+  }
+  async afterEnable() {
+  }
+  async afterDisable() {
+  }
+  async remove() {
+  }
+}
+var plugin_default = ThemeEditorPlugin;
+
+exports.ThemeEditorPlugin = ThemeEditorPlugin;
+exports.default = plugin_default;

package/dist/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/package.json

@@ -1,34 +1,34 @@
 {
   "name": "@nocobase/plugin-theme-editor",
-  "version": "0.11.1-alpha.5",
-  "main": "lib/server/index.js",
+  "version": "0.12.0-alpha.1",
+  "main": "dist/server/index.js",
   "displayName": "Theme editor",
   "displayName.zh-CN": "主题编辑器",
-  "description": "Allows you to customize UI colors, sizes, etc.",
-  "description.zh-CN": "允许你自定义 UI 的颜色、尺寸等。",
-  "dependencies": {
+  "description": "Allows you to customize UI colors, sizes, etc",
+  "description.zh-CN": "允许你自定义 UI 的颜色、尺寸等",
+  "devDependencies": {
+    "@ant-design/cssinjs": "^1.11.1",
+    "@ant-design/icons": "5.x",
     "@arvinxu/layout-kit": "^1",
     "@ctrl/tinycolor": "^3.6.0",
+    "@emotion/css": "^11.11.2",
+    "antd": "5.x",
     "antd-token-previewer": "2.0.0-alpha.8",
     "classnames": "^2.3.1",
+    "lodash": "4.17.21",
     "rc-util": "^5.32.0",
+    "react": "^18.2.0",
     "react-colorful": "^5.5.1",
     "tinycolor2": "^1.6.0",
     "use-debouncy": "^4.3.0",
     "vanilla-jsoneditor": "^0.17.8"
   },
-  "devDependencies": {
-    "@ant-design/cssinjs": "^1.11.1",
-    "@ant-design/icons": "^5.1.4",
-    "@emotion/css": "^11.11.2",
-    "@nocobase/client": "0.11.1-alpha.5",
-    "@nocobase/database": "0.11.1-alpha.5",
-    "@nocobase/server": "0.11.1-alpha.5",
-    "@nocobase/test": "0.11.1-alpha.5",
-    "@nocobase/utils": "0.11.1-alpha.5",
-    "antd": "^5.6.4",
-    "lodash": "4.17.21",
-    "react": "^18.2.0"
+  "peerDependencies": {
+    "@nocobase/client": "0.x",
+    "@nocobase/database": "0.x",
+    "@nocobase/server": "0.x",
+    "@nocobase/test": "0.x",
+    "@nocobase/utils": "0.x"
   },
-  "gitHead": "1dcfd15a7d95a40b0a2f60e1de19ec574066fb20"
+  "gitHead": "543dcc0216b7b1451b552b0f685bc3e0682f9d59"
 }

package/server.d.ts

@@ -1,3 +1,3 @@
 // @ts-nocheck
-export * from './lib/server';
-export { default } from './lib/server';
+export * from './dist/server';
+export { default } from './dist/server';

package/server.js

@@ -39,7 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
   return newObj;
 }
 
-var _index = _interopRequireWildcard(require('./lib/server'));
+var _index = _interopRequireWildcard(require('./dist/server'));
 
 Object.defineProperty(exports, '__esModule', {
   value: true,

package/lib/client/antd-token-previewer/ColorPanel.js

@@ -1,359 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
-    return data;
-  };
-  return data;
-}
-function _classnames() {
-  const data = _interopRequireDefault(require("classnames"));
-  _classnames = function _classnames() {
-    return data;
-  };
-  return data;
-}
-function _useMergedState3() {
-  const data = _interopRequireDefault(require("rc-util/es/hooks/useMergedState"));
-  _useMergedState3 = function _useMergedState3() {
-    return data;
-  };
-  return data;
-}
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
-function _reactColorful() {
-  const data = require("react-colorful");
-  _reactColorful = function _reactColorful() {
-    return data;
-  };
-  return data;
-}
-function _tinycolor() {
-  const data = _interopRequireDefault(require("tinycolor2"));
-  _tinycolor = function _tinycolor() {
-    return data;
-  };
-  return data;
-}
-var _makeStyle = _interopRequireDefault(require("./utils/makeStyle"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-const useToken = _antd().theme.useToken;
-const useStyle = (0, _makeStyle.default)('ColorPanel', token => ({
-  '.color-panel': {
-    padding: 12,
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    border: '1px solid rgba(0, 0, 0, 0.06)',
-    boxShadow: token.boxShadow,
-    width: 224,
-    boxSizing: 'border-box',
-    '.color-panel-mode': {
-      display: 'flex',
-      alignItems: 'center',
-      marginBottom: 6
-    },
-    '.color-panel-preview': {
-      width: 24,
-      height: 24,
-      borderRadius: 4,
-      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)',
-      flex: 'none',
-      overflow: 'hidden',
-      background: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 32px'
-    },
-    '.color-panel-preset-colors': {
-      paddingTop: 12,
-      display: 'flex',
-      flexWrap: 'wrap',
-      width: 200
-    },
-    '.color-panel-preset-color-btn': {
-      borderRadius: 4,
-      width: 20,
-      height: 20,
-      border: 'none',
-      outline: 'none',
-      margin: 4,
-      cursor: 'pointer',
-      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)'
-    },
-    '.color-panel-mode-title': {
-      color: token.colorTextPlaceholder,
-      marginTop: 2,
-      fontSize: 12,
-      textAlign: 'center'
-    },
-    '.color-panel-rgba-input': {
-      display: 'flex',
-      alignItems: 'center',
-      '&-part': {
-        flex: 1,
-        width: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        '&-title': {
-          color: token.colorTextPlaceholder,
-          marginTop: 2,
-          fontSize: 12
-        },
-        '&:not(:last-child)': {
-          marginRight: 4
-        },
-        [`${token.rootCls}-input-number`]: {
-          width: '100%',
-          input: {
-            fontSize: 12,
-            padding: '0 4px'
-          }
-        }
-      }
-    }
-  }
-}));
-const getHexValue = (value, alpha = false) => {
-  return alpha ? (0, _tinycolor().default)(value).toHex8() : (0, _tinycolor().default)(value).toHex();
-};
-const HexColorInput = ({
-  value,
-  onChange,
-  alpha
-}) => {
-  const _useState = (0, _react().useState)(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    hexValue = _useState2[0],
-    setHexValue = _useState2[1];
-  const focusRef = (0, _react().useRef)(false);
-  const handleChange = e => {
-    setHexValue(e.target.value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(getHexValue(e.target.value, alpha));
-  };
-  const handleBlur = e => {
-    focusRef.current = false;
-    setHexValue(getHexValue(e.target.value, alpha));
-  };
-  const handleFocus = () => {
-    focusRef.current = true;
-  };
-  (0, _react().useEffect)(() => {
-    if (!focusRef.current) {
-      setHexValue(getHexValue(value, alpha));
-    }
-  }, [value, alpha]);
-  return _react().default.createElement("div", null, _react().default.createElement(_antd().Input, {
-    prefix: "#",
-    size: "small",
-    value: hexValue,
-    onFocus: handleFocus,
-    onChange: handleChange,
-    onBlur: handleBlur
-  }), _react().default.createElement("div", {
-    className: "color-panel-mode-title"
-  }, "HEX", alpha ? '8' : ''));
-};
-const RgbColorInput = ({
-  value: customValue,
-  onChange,
-  alpha
-}) => {
-  const _useMergedState = (0, _useMergedState3().default)(customValue !== null && customValue !== void 0 ? customValue : {
-      r: 0,
-      g: 0,
-      b: 0,
-      a: 1
-    }, {
-      value: customValue,
-      onChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    value = _useMergedState2[0],
-    setValue = _useMergedState2[1];
-  return _react().default.createElement("div", {
-    className: "color-panel-rgba-input"
-  }, _react().default.createElement(_antd().ConfigProvider, {
-    theme: {
-      components: {
-        InputNumber: {
-          handleWidth: 12
-        }
-      }
-    }
-  }, _react().default.createElement("div", {
-    className: "color-panel-rgba-input-part"
-  }, _react().default.createElement(_antd().InputNumber, {
-    min: 0,
-    max: 255,
-    size: "small",
-    value: value.r,
-    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
-      r: v !== null && v !== void 0 ? v : 0
-    }))
-  }), _react().default.createElement("div", {
-    className: "color-panel-mode-title"
-  }, "R")), _react().default.createElement("div", {
-    className: "color-panel-rgba-input-part"
-  }, _react().default.createElement(_antd().InputNumber, {
-    min: 0,
-    max: 255,
-    size: "small",
-    value: value.g,
-    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
-      g: v !== null && v !== void 0 ? v : 0
-    }))
-  }), _react().default.createElement("div", {
-    className: "color-panel-mode-title"
-  }, "G")), _react().default.createElement("div", {
-    className: "color-panel-rgba-input-part"
-  }, _react().default.createElement(_antd().InputNumber, {
-    min: 0,
-    max: 255,
-    size: "small",
-    value: value.b,
-    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
-      b: v !== null && v !== void 0 ? v : 0
-    }))
-  }), _react().default.createElement("div", {
-    className: "color-panel-mode-title"
-  }, "B")), alpha && _react().default.createElement("div", {
-    className: "color-panel-rgba-input-part"
-  }, _react().default.createElement(_antd().InputNumber, {
-    min: 0,
-    max: 1,
-    step: 0.01,
-    size: "small",
-    value: value.a,
-    onChange: v => setValue(_objectSpread(_objectSpread({}, value), {}, {
-      a: v !== null && v !== void 0 ? v : 0
-    }))
-  }), _react().default.createElement("div", {
-    className: "color-panel-mode-title"
-  }, "A"))));
-};
-const colorModes = ['HEX', 'HEX8', 'RGB', 'RGBA'];
-const getColorStr = (color, mode) => {
-  switch (mode) {
-    case 'HEX':
-      return (0, _tinycolor().default)(color).toHexString();
-    case 'HEX8':
-      return (0, _tinycolor().default)(color).toHex8String();
-    case 'RGBA':
-    case 'RGB':
-    default:
-      return (0, _tinycolor().default)(color).toRgbString();
-  }
-};
-const ColorPanel = ({
-  color,
-  onChange: _onChange,
-  alpha,
-  style
-}) => {
-  const _useToken = useToken(),
-    token = _useToken.token;
-  const _useStyle = useStyle(),
-    _useStyle2 = _slicedToArray(_useStyle, 2),
-    wrapSSR = _useStyle2[0],
-    hashId = _useStyle2[1];
-  const _React$useState = _react().default.useState('HEX'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    colorMode = _React$useState2[0],
-    setColorMode = _React$useState2[1];
-  const presetColors = (0, _react().useMemo)(() => {
-    return [token.blue, token.purple, token.cyan, token.green, token.magenta, token.pink, token.red, token.orange, token.yellow, token.volcano, token.geekblue, token.gold, token.lime, '#000'];
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, []);
-  const handleColorModeChange = value => {
-    setColorMode(value);
-    _onChange(getColorStr(color, value));
-  };
-  return wrapSSR(_react().default.createElement("div", {
-    className: (0, _classnames().default)(hashId, 'color-panel'),
-    style: style
-  }, (colorMode === 'HEX' || colorMode === 'RGB') && _react().default.createElement(_reactColorful().HexColorPicker, {
-    style: {
-      height: 160
-    },
-    color: (0, _tinycolor().default)(color).toHex(),
-    onChange: value => {
-      _onChange(getColorStr(value, colorMode));
-    }
-  }), (colorMode === 'RGBA' || colorMode === 'HEX8') && _react().default.createElement(_reactColorful().RgbaColorPicker, {
-    style: {
-      height: 160
-    },
-    color: (0, _tinycolor().default)(color).toRgb(),
-    onChange: value => {
-      _onChange(getColorStr(value, colorMode));
-    }
-  }), _react().default.createElement("div", {
-    style: {
-      marginTop: 12
-    }
-  }, _react().default.createElement("div", {
-    className: "color-panel-mode"
-  }, _react().default.createElement("div", {
-    className: "color-panel-preview"
-  }, _react().default.createElement("div", {
-    style: {
-      backgroundColor: color,
-      width: '100%',
-      height: '100%'
-    }
-  })), _react().default.createElement(_antd().Select, {
-    value: colorMode,
-    onChange: handleColorModeChange,
-    options: colorModes.filter(item => alpha || item === 'HEX' || item === 'RGB').map(item => ({
-      value: item,
-      key: item
-    })),
-    size: "small",
-    bordered: false,
-    dropdownMatchSelectWidth: false
-  })), colorMode === 'HEX' && _react().default.createElement(HexColorInput, {
-    value: (0, _tinycolor().default)(color).toHex(),
-    onChange: v => _onChange === null || _onChange === void 0 ? void 0 : _onChange((0, _tinycolor().default)(v).toHexString())
-  }), colorMode === 'HEX8' && _react().default.createElement(HexColorInput, {
-    alpha: true,
-    value: (0, _tinycolor().default)(color).toHex8(),
-    onChange: v => _onChange === null || _onChange === void 0 ? void 0 : _onChange((0, _tinycolor().default)(v).toHex8String())
-  }), (colorMode === 'RGBA' || colorMode === 'RGB') && _react().default.createElement(RgbColorInput, {
-    alpha: colorMode === 'RGBA',
-    value: (0, _tinycolor().default)(color).toRgb(),
-    onChange: v => _onChange === null || _onChange === void 0 ? void 0 : _onChange((0, _tinycolor().default)(v).toRgbString())
-  })), _react().default.createElement("div", {
-    className: "color-panel-preset-colors"
-  }, presetColors.map(presetColor => _react().default.createElement("button", {
-    key: presetColor,
-    className: "color-panel-preset-color-btn",
-    style: {
-      backgroundColor: presetColor
-    },
-    onClick: () => _onChange(presetColor)
-  })))));
-};
-var _default = ColorPanel;
-exports.default = _default;