@blocklet/pages-kit 0.4.99 → 0.4.100

package/lib/cjs/components/CustomComponentRenderer/state.js

@@ -108,7 +108,7 @@ function importCustomComponent(m, { componentId }) {
                 }
                 return null;
             }, [loading, error, ResolvedComponent, props]);
-            return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: !loading, timeout: 500, children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: content }) }));
+            return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: !loading, timeout: 500, children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "CustomComponent-root", children: content }) }));
         };
     }
     // non-Promise case
@@ -282,7 +282,10 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
                 if (!property)
                     return undefined;
                 // keep preload props
-                let v = (0, property_1.parsePropertyValue)(property, value, { locale, defaultLocale: dev?.defaultLocale });
+                let v = (0, property_1.parsePropertyValue)(property, value, {
+                    locale,
+                    defaultLocale: dev?.defaultLocale,
+                });
                 if (dev?.mode === 'production' &&
                     property.type === 'component' &&
                     property.key &&

package/lib/cjs/contexts/color.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMuiColorPalette = useMuiColorPalette;
+exports.useColorConvert = useColorConvert;
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("react");
+const style_1 = require("../utils/style");
+/**
+ * Hook 用于获取和操作 MUI 主题色
+ */
+function useMuiColorPalette() {
+    const theme = (0, styles_1.useTheme)();
+    // 创建 MUI 色板预设及映射关系
+    const muiPaletteColors = (0, react_1.useMemo)(() => {
+        const colors = [];
+        // 定义调色板配置
+        const paletteConfig = [
+            // 特殊颜色组
+            {
+                type: 'special',
+                keys: ['transparent'],
+                variants: null,
+                format: () => 'transparent',
+                accessor: () => ({ transparent: 'transparent' }),
+            },
+            // mapper all colors
+            ...['primary', 'secondary', 'error', 'warning', 'info', 'success'].map((key) => ({
+                type: key,
+                keys: [key],
+                variants: ['main', 'light', 'dark'],
+                format: (key, variant) => `${key}.${variant}`,
+                accessor: (key) => theme.palette[key],
+            })),
+            {
+                type: 'background',
+                keys: ['default', 'paper'],
+                variants: null,
+                format: (key) => `background.${key}`,
+                accessor: () => theme.palette.background,
+            },
+            {
+                type: 'text',
+                keys: ['primary', 'secondary', 'disabled'],
+                variants: null,
+                format: (key) => `text.${key}`,
+                accessor: () => theme.palette.text,
+            },
+            {
+                type: 'action',
+                keys: ['active', 'hover', 'selected', 'disabled', 'disabledBackground', 'focus'],
+                variants: null,
+                format: (key) => `action.${key}`,
+                accessor: () => theme.palette.action,
+            },
+            {
+                type: 'grey',
+                keys: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+                variants: null,
+                format: (key) => `grey.${key}`,
+                accessor: () => theme.palette.grey,
+            },
+        ];
+        // 统一处理各种调色板颜色
+        paletteConfig.forEach((config) => {
+            const { keys, variants, format, accessor } = config;
+            if (variants) {
+                // 处理带变体的调色板（如primary.main）
+                keys.forEach((key) => {
+                    variants.forEach((variant) => {
+                        try {
+                            const paletteObj = accessor(key);
+                            if (paletteObj && typeof paletteObj === 'object') {
+                                const colorValue = String(paletteObj[variant] || '');
+                                if (colorValue) {
+                                    colors.push({ colorKey: format(key, variant), colorValue, group: config.type });
+                                }
+                            }
+                        }
+                        catch (e) {
+                            // 忽略错误
+                        }
+                    });
+                });
+            }
+            else {
+                // 处理不带变体的调色板（如grey.500）
+                keys.forEach((key) => {
+                    try {
+                        const paletteObj = accessor();
+                        if (paletteObj && typeof paletteObj === 'object') {
+                            const colorValue = String(paletteObj[key] || '');
+                            if (colorValue) {
+                                colors.push({ colorKey: format(key), colorValue, group: config.type });
+                            }
+                        }
+                    }
+                    catch (e) {
+                        // 忽略错误
+                    }
+                });
+            }
+        });
+        return colors;
+    }, [theme]);
+    // 提取预设颜色数组 (仅颜色值)
+    const presetColors = (0, react_1.useMemo)(() => muiPaletteColors.map((color) => color.colorValue), [muiPaletteColors]);
+    // 根据颜色值获取 MUI 键名
+    const getMuiKeyByColor = (0, react_1.useCallback)((colorValue) => {
+        const found = muiPaletteColors.find((item) => item.colorValue === colorValue);
+        return found ? found.colorKey : null;
+    }, [muiPaletteColors]);
+    // 根据 MUI 键名获取颜色值
+    const getColorByMuiKey = (0, react_1.useCallback)((muiKey) => {
+        const found = muiPaletteColors.find((item) => item.colorKey === muiKey);
+        return found ? found.colorValue : null;
+    }, [muiPaletteColors]);
+    // 检查是否为有效的 MUI 颜色键
+    const isMuiColorKeyHook = (0, react_1.useCallback)((value) => {
+        return (0, style_1.isMuiColorKey)(value);
+    }, [style_1.isMuiColorKey]);
+    // 颜色分组逻辑
+    const groupedMuiColors = (0, react_1.useMemo)(() => {
+        const groups = {};
+        muiPaletteColors.forEach(({ colorKey, colorValue, group }) => {
+            if (group) {
+                if (!groups[group]) {
+                    groups[group] = [];
+                }
+                groups[group].push({ colorKey, colorValue });
+            }
+        });
+        return groups;
+    }, [muiPaletteColors]);
+    return {
+        muiPaletteColors,
+        groupedMuiColors,
+        presetColors,
+        getMuiKeyByColor,
+        getColorByMuiKey,
+        isMuiColorKey: isMuiColorKeyHook,
+        theme,
+    };
+}
+/**
+ * React Hook，用于实时转换颜色值（包括MUI主题色键）
+ */
+function useColorConvert() {
+    const muiPalette = useMuiColorPalette();
+    const { theme } = muiPalette;
+    return (0, react_1.useCallback)((color = '') => {
+        return (0, style_1.colorConvert)(color, theme);
+    }, [theme, style_1.colorConvert]);
+}