@blocklet/pages-kit 0.4.121 → 0.4.122

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/cjs/builtin/color-picker.js +35 -25
  2. package/lib/cjs/contexts/color.js +4 -2
  3. package/lib/cjs/tsconfig.tsbuildinfo +1 -1
  4. package/lib/cjs/utils/style.js +4 -0
  5. package/lib/esm/builtin/color-picker.js +37 -28
  6. package/lib/esm/contexts/color.js +5 -3
  7. package/lib/esm/tsconfig.tsbuildinfo +1 -1
  8. package/lib/esm/utils/style.js +3 -0
  9. package/lib/types/builtin/color-picker.d.ts +9 -5
  10. package/lib/types/contexts/color.d.ts +1 -1
  11. package/lib/types/tsconfig.tsbuildinfo +1 -1
  12. package/lib/types/utils/style.d.ts +1 -0
  13. package/package.json +1 -1
package/lib/cjs/builtin/color-picker.js CHANGED
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.ConfigColorDialog = void 0;
30
+ exports.BlockletThemeProvider = BlockletThemeProvider;
30
31
  exports.ColorItem = ColorItem;
31
32
  exports.ColorPicker = ColorPicker;
32
33
  const jsx_runtime_1 = require("react/jsx-runtime");
@@ -41,39 +42,38 @@ const style_1 = require("../utils/style");
41
42
  const ColorPickerLib = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-best-gradient-color-picker'))));
42
43
  const HEIGHT = 400;
43
44
  const WIDTH = 270;
45
+ const blockletTheme = (0, style_1.getBlockletTheme)();
46
+ function BlockletThemeProvider({ children }) {
47
+ return (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: blockletTheme, children: children });
48
+ }
44
49
  function ColorItem({ color, sx = {}, ...props }) {
45
50
  (0, style_1.isColorString)(color);
46
51
  const styleMap = {};
47
52
  if ((0, style_1.isGradient)(color)) {
48
53
  styleMap.backgroundImage = color;
49
54
  }
55
+ else if (color === 'transparent') {
56
+ styleMap.background = (0, style_1.getTransparentBackground)();
57
+ }
50
58
  else {
51
59
  styleMap.backgroundColor = color;
52
60
  }
53
- return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
54
- ...sx,
55
- width: '100%',
56
- paddingBottom: '100%',
57
- cursor: 'pointer',
58
- transition: 'opacity 0.2s',
59
- border: '1px solid #ccc',
60
- borderRadius: 0.5,
61
- '&:hover': {
62
- opacity: 0.75,
63
- },
64
- ...styleMap,
65
- }, ...props }));
66
- }
67
- function ColorPicker({ value, onChange, style = {}, sx = {} }) {
68
- const refDialog = (0, react_1.useRef)(null);
69
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorItem, { color: value, style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
70
- refDialog.current?.open({ value });
71
- } }), (0, jsx_runtime_1.jsx)(exports.ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
72
- onChange(value);
73
- close();
74
- } })] }));
61
+ return (
62
+ // @FIXME：临时方案，等 theme 功能定下来之后去掉
63
+ (0, jsx_runtime_1.jsx)(BlockletThemeProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
64
+ width: '100%',
65
+ height: '100%',
66
+ cursor: 'pointer',
67
+ transition: 'opacity 0.2s',
68
+ border: '1px solid #ccc',
69
+ borderRadius: 0.5,
70
+ '&:hover': {
71
+ opacity: 0.75,
72
+ },
73
+ ...sx,
74
+ ...styleMap,
75
+ }, ...props }) }));
75
76
  }
76
- exports.default = ColorPicker;
77
77
  exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({ onSave, enableMuiPalette = true }, ref) {
78
78
  const state = (0, ahooks_1.useReactive)({
79
79
  value: '',
@@ -187,7 +187,7 @@ exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({
187
187
  selectedColor = 'rgba(0,0,0,0.7)';
188
188
  }
189
189
  }
190
- return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: item.colorKey, children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: () => {
190
+ return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: item.colorKey, children: (0, jsx_runtime_1.jsx)(ColorItem, { color: item.colorValue, onClick: () => {
191
191
  state.value = item.colorValue;
192
192
  state.originalMuiKey = item.colorKey;
193
193
  }, sx: {
@@ -206,7 +206,7 @@ exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({
206
206
  // 透明色时显示棋盘背景
207
207
  ...(item.colorValue === 'transparent'
208
208
  ? {
209
- background: 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px',
209
+ background: (0, style_1.getTransparentBackground)(),
210
210
  }
211
211
  : {}),
212
212
  }, children: state.originalMuiKey === item.colorKey && ((0, jsx_runtime_1.jsx)("i", { className: "i-mdi:check", style: {
@@ -222,3 +222,13 @@ exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({
222
222
  state.originalMuiKey = null;
223
223
  }, hidePresets: true, hideAdvancedSliders: true, hideColorGuide: true, hideInputType: true }) }) })) })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: handleClose, children: t('common.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", onClick: handleSave, children: t('maker.save') })] })] }));
224
224
  });
225
+ function ColorPicker({ value, onChange, style = {}, sx = {} }) {
226
+ const refDialog = (0, react_1.useRef)(null);
227
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorItem, { color: value || '', style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
228
+ refDialog.current?.open({ value });
229
+ } }), (0, jsx_runtime_1.jsx)(exports.ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
230
+ onChange(value);
231
+ close();
232
+ } })] }));
233
+ }
234
+ exports.default = ColorPicker;
package/lib/cjs/contexts/color.js CHANGED
@@ -2,14 +2,16 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useMuiColorPalette = useMuiColorPalette;
4
4
  exports.useColorConvert = useColorConvert;
5
- const styles_1 = require("@mui/material/styles");
5
+ // import { useTheme } from '@mui/material/styles';
6
6
  const react_1 = require("react");
7
7
  const style_1 = require("../utils/style");
8
8
  /**
9
9
  * Hook 用于获取和操作 MUI 主题色
10
10
  */
11
11
  function useMuiColorPalette() {
12
- const theme = (0, styles_1.useTheme)();
12
+ // @FIXME：临时方案，等 theme 功能定下来之后去掉
13
+ const theme = (0, style_1.getBlockletTheme)();
14
+ // const theme = useTheme();
13
15
  // 创建 MUI 色板预设及映射关系
14
16
  const muiPaletteColors = (0, react_1.useMemo)(() => {
15
17
  const colors = [];