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

package/lib/client/utils/changeAlgorithmFromFunctionToString.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.changeAlgorithmFromFunctionToString = changeAlgorithmFromFunctionToString;
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
-    return data;
-  };
-  return data;
-}
-function _lodash() {
-  const data = _interopRequireDefault(require("lodash"));
-  _lodash = function _lodash() {
-    return data;
-  };
-  return data;
-}
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function changeAlgorithmFromFunctionToString(themeConfig) {
-  themeConfig = _lodash().default.cloneDeep(themeConfig);
-  if (!themeConfig.algorithm) {
-    return themeConfig;
-  }
-  if (Array.isArray(themeConfig.algorithm)) {
-    themeConfig.algorithm = themeConfig.algorithm.map(algorithm => parseAlgorithm(algorithm));
-  } else {
-    themeConfig.algorithm = parseAlgorithm(themeConfig.algorithm);
-  }
-  return themeConfig;
-}
-function parseAlgorithm(algorithm) {
-  if (typeof algorithm === 'string') {
-    return algorithm;
-  }
-  if (algorithm.toString() === _antd().theme.darkAlgorithm.toString()) {
-    return 'darkAlgorithm';
-  }
-  if (algorithm.toString() === _antd().theme.compactAlgorithm.toString()) {
-    return 'compactAlgorithm';
-  }
-  return algorithm.toString();
-}

package/lib/client/utils/changeAlgorithmFromStringToFunction.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.changeAlgorithmFromStringToFunction = changeAlgorithmFromStringToFunction;
-function _utils() {
-  const data = require("@nocobase/utils");
-  _utils = function _utils() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
-    return data;
-  };
-  return data;
-}
-function _lodash() {
-  const data = _interopRequireDefault(require("lodash"));
-  _lodash = function _lodash() {
-    return data;
-  };
-  return data;
-}
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 把算法函数由字符串转换为函数
- * 注: 之所以要保存为字符串, 是因为 JSON 无法保存函数
- */
-function changeAlgorithmFromStringToFunction(themeConfig) {
-  themeConfig = _lodash().default.cloneDeep(themeConfig);
-  if ((0, _utils().isString)(themeConfig.config.algorithm)) {
-    themeConfig.config.algorithm = _antd().theme[themeConfig.config.algorithm];
-  }
-  if (Array.isArray(themeConfig.config.algorithm)) {
-    themeConfig.config.algorithm = themeConfig.config.algorithm.map(item => {
-      if ((0, _utils().isString)(item)) {
-        return _antd().theme[item];
-      }
-      return item;
-    });
-  }
-  return themeConfig;
-}

package/lib/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _server.default;
-  }
-});
-var _server = _interopRequireDefault(require("./server"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/locale/en-US.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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 _default = locale;
-exports.default = _default;

package/lib/locale/fr-FR.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const locale = {
-  Theme: 'Thème',
-  Local: 'Local',
-  'Dark theme': 'Thème sombre',
-  Optional: 'Optionnel',
-  'Non-optional': 'Non-optionnel',
-  Current: 'Actuel',
-  Default: 'Par défaut',
-  // 主题编辑器
-  'Theme Editor': 'Éditeur de thème',
-  Save: 'Enregistrer',
-  Close: 'Fermer',
-  Edit: 'Modifier',
-  Export: 'Exporter',
-  'edit Theme Config': 'Modifier la configuration du thème',
-  'The theme of the JSON format is incorrect': 'Le thème au format JSON est incorrect',
-  'Edited successfully': 'Modifié avec succès',
-  'Saved successfully': 'Enregistré avec succès',
-  'Initializing Editor...': "Initialisation de l'éditeur...",
-  'Save theme': 'Enregistrer le thème',
-  'Please set a name for this theme': 'Veuillez définir un nom pour ce thème',
-  'Please input the theme name': 'Veuillez saisir le nom du thème'
-};
-var _default = locale;
-exports.default = _default;

package/lib/locale/zh-CN.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const locale = {
-  'Theme editor': '主题编辑器',
-  Themes: '主题',
-  'Dark theme': '暗黑主题',
-  Optional: '可选',
-  'Non-optional': '不可选',
-  Current: '当前主题',
-  Default: '默认',
-  'Delete theme': '删除主题',
-  'Deletion is unrecoverable. Confirm deletion?': '删除后不可恢复，确认删除？',
-  'Deleted successfully': '删除成功',
-  'Updated successfully': '更新成功',
-  'User selectable': '可被用户选择',
-  'Default theme': '默认主题',
-  'Add new theme': '添加新主题',
-  'Edit based on current theme': '基于当前主题进行编辑',
-  'Create a brand new theme': '创建一个全新的主题',
-  // 内置主题的名字
-  'Default theme of antd': 'antd 默认主题',
-  Dark: '暗黑',
-  Compact: '紧凑',
-  'Compact dark': '紧凑暗黑',
-  // 主题编辑器
-  'Theme Editor': '主题编辑器',
-  Save: '保存',
-  Close: '关闭',
-  Edit: '编辑',
-  Export: '导出',
-  'edit Theme Config': '编辑主题配置',
-  'The theme of the JSON format is incorrect': '主题 JSON 格式错误',
-  'Edited successfully': '编辑成功',
-  'Saved successfully': '保存成功',
-  'Initializing Editor...': '正在初始化编辑器...',
-  'Save theme': '保存主题',
-  'Please set a name for this theme': '请为该主题设置一个名字',
-  'Please input the theme name': '请输入主题名字'
-};
-var _default = locale;
-exports.default = _default;

package/lib/server/builtinThemes.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dark = exports.compactDark = exports.compact = exports.antd = void 0;
-/** antd 默认主题 */
-const antd = {
-  config: {
-    name: 'Default theme of antd'
-  },
-  optional: true,
-  isBuiltIn: true
-};
-exports.antd = antd;
-const dark = {
-  config: {
-    name: 'Dark',
-    // @ts-ignore
-    algorithm: 'darkAlgorithm'
-  },
-  optional: true,
-  isBuiltIn: true
-};
-exports.dark = dark;
-const compact = {
-  config: {
-    name: 'Compact',
-    // @ts-ignore
-    algorithm: 'compactAlgorithm'
-  },
-  optional: true,
-  isBuiltIn: true
-};
-/** 同时包含 `紧凑` 和 `暗黑` 两种模式 */
-exports.compact = compact;
-const compactDark = {
-  config: {
-    name: 'Compact dark',
-    // @ts-ignore
-    algorithm: ['compactAlgorithm', 'darkAlgorithm']
-  },
-  optional: true,
-  isBuiltIn: true
-};
-exports.compactDark = compactDark;

package/lib/server/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _plugin.default;
-  }
-});
-var _plugin = _interopRequireDefault(require("./plugin"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/server/plugin.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ThemeEditorPlugin = void 0;
-function _server() {
-  const data = require("@nocobase/server");
-  _server = function _server() {
-    return data;
-  };
-  return data;
-}
-var _builtinThemes = require("./builtinThemes");
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-class ThemeEditorPlugin extends _server().Plugin {
-  constructor(...args) {
-    super(...args);
-    this.theme = void 0;
-  }
-  afterAdd() {}
-  beforeLoad() {}
-  load() {
-    var _this = this;
-    return _asyncToGenerator(function* () {
-      _this.theme = _this.db.collection({
-        name: 'themeConfig',
-        fields: [
-        // 主题配置内容，一个 JSON 字符串
-        {
-          type: 'json',
-          name: 'config'
-        },
-        // 主题是否可选
-        {
-          type: 'boolean',
-          name: 'optional'
-        }, {
-          type: 'boolean',
-          name: 'isBuiltIn'
-        }]
-      });
-    })();
-  }
-  install(options) {
-    var _this2 = this;
-    return _asyncToGenerator(function* () {
-      if ((yield _this2.theme.repository.count()) === 0) {
-        yield _this2.theme.repository.create({
-          values: [_builtinThemes.antd, _builtinThemes.dark, _builtinThemes.compact, _builtinThemes.compactDark]
-        });
-      }
-    })();
-  }
-  afterEnable() {
-    return _asyncToGenerator(function* () {})();
-  }
-  afterDisable() {
-    return _asyncToGenerator(function* () {})();
-  }
-  remove() {
-    return _asyncToGenerator(function* () {})();
-  }
-}
-exports.ThemeEditorPlugin = ThemeEditorPlugin;
-var _default = ThemeEditorPlugin;
-exports.default = _default;

package/lib/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/src/client/antd-token-previewer/ColorPanel.tsx

@@ -1,328 +0,0 @@
-import type { InputProps } from 'antd';
-import { ConfigProvider, Input, InputNumber, Select, theme } from 'antd';
-import classNames from 'classnames';
-import useMergedState from 'rc-util/es/hooks/useMergedState';
-import type { CSSProperties, FC } from 'react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { HexColorPicker, RgbaColorPicker } from 'react-colorful';
-import tinycolor from 'tinycolor2';
-import makeStyle from './utils/makeStyle';
-
-const { useToken } = theme;
-
-const useStyle = makeStyle('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',
-          },
-        },
-      },
-    },
-  },
-}));
-
-export type HexColorInputProps = {
-  value: string;
-  onChange?: (value: string) => void;
-  alpha?: boolean;
-};
-
-const getHexValue = (value: string, alpha = false) => {
-  return alpha ? tinycolor(value).toHex8() : tinycolor(value).toHex();
-};
-
-const HexColorInput: FC<HexColorInputProps> = ({ value, onChange, alpha }) => {
-  const [hexValue, setHexValue] = useState<string>(value);
-  const focusRef = useRef<boolean>(false);
-
-  const handleChange: InputProps['onChange'] = (e) => {
-    setHexValue(e.target.value);
-    onChange?.(getHexValue(e.target.value, alpha));
-  };
-
-  const handleBlur: InputProps['onBlur'] = (e) => {
-    focusRef.current = false;
-    setHexValue(getHexValue(e.target.value, alpha));
-  };
-
-  const handleFocus = () => {
-    focusRef.current = true;
-  };
-
-  useEffect(() => {
-    if (!focusRef.current) {
-      setHexValue(getHexValue(value, alpha));
-    }
-  }, [value, alpha]);
-
-  return (
-    <div>
-      <Input
-        prefix="#"
-        size="small"
-        value={hexValue}
-        onFocus={handleFocus}
-        onChange={handleChange}
-        onBlur={handleBlur}
-      />
-      <div className="color-panel-mode-title">HEX{alpha ? '8' : ''}</div>
-    </div>
-  );
-};
-
-type RgbaColor = tinycolor.ColorFormats.RGBA;
-
-export type RgbColorInputProps = {
-  value?: RgbaColor;
-  onChange?: (value: RgbaColor) => void;
-  alpha?: boolean;
-};
-
-const RgbColorInput: FC<RgbColorInputProps> = ({ value: customValue, onChange, alpha }) => {
-  const [value, setValue] = useMergedState<RgbaColor>(customValue ?? { r: 0, g: 0, b: 0, a: 1 }, {
-    value: customValue,
-    onChange,
-  });
-
-  return (
-    <div className="color-panel-rgba-input">
-      <ConfigProvider theme={{ components: { InputNumber: { handleWidth: 12 } } }}>
-        <div className="color-panel-rgba-input-part">
-          <InputNumber
-            min={0}
-            max={255}
-            size="small"
-            value={value.r}
-            onChange={(v) => setValue({ ...value, r: v ?? 0 })}
-          />
-          <div className="color-panel-mode-title">R</div>
-        </div>
-        <div className="color-panel-rgba-input-part">
-          <InputNumber
-            min={0}
-            max={255}
-            size="small"
-            value={value.g}
-            onChange={(v) => setValue({ ...value, g: v ?? 0 })}
-          />
-          <div className="color-panel-mode-title">G</div>
-        </div>
-        <div className="color-panel-rgba-input-part">
-          <InputNumber
-            min={0}
-            max={255}
-            size="small"
-            value={value.b}
-            onChange={(v) => setValue({ ...value, b: v ?? 0 })}
-          />
-          <div className="color-panel-mode-title">B</div>
-        </div>
-        {alpha && (
-          <div className="color-panel-rgba-input-part">
-            <InputNumber
-              min={0}
-              max={1}
-              step={0.01}
-              size="small"
-              value={value.a}
-              onChange={(v) => setValue({ ...value, a: v ?? 0 })}
-            />
-            <div className="color-panel-mode-title">A</div>
-          </div>
-        )}
-      </ConfigProvider>
-    </div>
-  );
-};
-
-export type ColorPanelProps = {
-  color: string;
-  onChange: (color: string) => void;
-  alpha?: boolean;
-  style?: CSSProperties;
-};
-
-const colorModes = ['HEX', 'HEX8', 'RGB', 'RGBA'] as const;
-
-type ColorMode = (typeof colorModes)[number];
-
-const getColorStr = (color: any, mode: ColorMode) => {
-  switch (mode) {
-    case 'HEX':
-      return tinycolor(color).toHexString();
-    case 'HEX8':
-      return tinycolor(color).toHex8String();
-    case 'RGBA':
-    case 'RGB':
-    default:
-      return tinycolor(color).toRgbString();
-  }
-};
-
-const ColorPanel: FC<ColorPanelProps> = ({ color, onChange, alpha, style }) => {
-  const { token } = useToken();
-  const [wrapSSR, hashId] = useStyle();
-  const [colorMode, setColorMode] = React.useState<ColorMode>('HEX');
-
-  const presetColors = 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: ColorMode) => {
-    setColorMode(value);
-    onChange(getColorStr(color, value));
-  };
-
-  return wrapSSR(
-    <div className={classNames(hashId, 'color-panel')} style={style}>
-      {(colorMode === 'HEX' || colorMode === 'RGB') && (
-        <HexColorPicker
-          style={{ height: 160 }}
-          color={tinycolor(color).toHex()}
-          onChange={(value) => {
-            onChange(getColorStr(value, colorMode));
-          }}
-        />
-      )}
-      {(colorMode === 'RGBA' || colorMode === 'HEX8') && (
-        <RgbaColorPicker
-          style={{ height: 160 }}
-          color={tinycolor(color).toRgb()}
-          onChange={(value) => {
-            onChange(getColorStr(value, colorMode));
-          }}
-        />
-      )}
-      <div style={{ marginTop: 12 }}>
-        <div className="color-panel-mode">
-          <div className="color-panel-preview">
-            <div style={{ backgroundColor: color, width: '100%', height: '100%' }} />
-          </div>
-          <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}
-          />
-        </div>
-        {colorMode === 'HEX' && (
-          <HexColorInput value={tinycolor(color).toHex()} onChange={(v) => onChange?.(tinycolor(v).toHexString())} />
-        )}
-        {colorMode === 'HEX8' && (
-          <HexColorInput
-            alpha
-            value={tinycolor(color).toHex8()}
-            onChange={(v) => onChange?.(tinycolor(v).toHex8String())}
-          />
-        )}
-        {(colorMode === 'RGBA' || colorMode === 'RGB') && (
-          <RgbColorInput
-            alpha={colorMode === 'RGBA'}
-            value={tinycolor(color).toRgb()}
-            onChange={(v) => onChange?.(tinycolor(v).toRgbString())}
-          />
-        )}
-      </div>
-      <div className="color-panel-preset-colors">
-        {presetColors.map((presetColor) => (
-          <button
-            key={presetColor}
-            className="color-panel-preset-color-btn"
-            style={{ backgroundColor: presetColor }}
-            onClick={() => onChange(presetColor)}
-          />
-        ))}
-      </div>
-    </div>,
-  );
-};
-
-export default ColorPanel;