@blocklet/pages-kit 0.4.99 → 0.4.101

package/lib/cjs/types/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./core"), exports);
 __exportStar(require("./state"), exports);
 __exportStar(require("./preload"), exports);
 __exportStar(require("./builtin"), exports);
+__exportStar(require("./style"), exports);

package/lib/cjs/types/style.js

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

package/lib/cjs/utils/common.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBrowserEnv = exports.COLOR_CONVERT_FUNCTION_NAME = void 0;
+exports.COLOR_CONVERT_FUNCTION_NAME = 'colorConvert';
+const isBrowserEnv = () => {
+    return typeof globalThis.window !== 'undefined' && typeof globalThis.document !== 'undefined';
+};
+exports.isBrowserEnv = isBrowserEnv;

package/lib/cjs/utils/property.js

@@ -22,8 +22,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderNestedComponent = void 0;
+exports.initDynamicParsePropertyValueHandlers = exports.RenderNestedComponent = void 0;
 exports.componentUMDName = componentUMDName;
 exports.mergeComponent = mergeComponent;
 exports.safeJSONParse = safeJSONParse;
@@ -31,7 +34,9 @@ exports.safeYamlParse = safeYamlParse;
 exports.parsePropertyValue = parsePropertyValue;
 exports.assignNullableFields = assignNullableFields;
 exports.getComponentDependencies = getComponentDependencies;
+const isNil_1 = __importDefault(require("lodash/isNil"));
 const yaml = __importStar(require("yaml"));
+const common_1 = require("./common");
 function componentUMDName({ componentId }) {
     return `PagesCustomComponent${componentId}`;
 }
@@ -98,7 +103,43 @@ function safeYamlParse(value) {
     }
     return yaml.parse(value);
 }
-function parsePropertyValue(property, value, { locale, defaultLocale }) {
+let dynamicPropertyHandlers = null;
+let initDynamicPropertyHandlersPromise = null;
+// 根据前后端环境初始化动态的属性处理函数
+const initDynamicParsePropertyValueHandlers = () => {
+    if (dynamicPropertyHandlers)
+        return Promise.resolve(dynamicPropertyHandlers);
+    if (!initDynamicPropertyHandlersPromise) {
+        initDynamicPropertyHandlersPromise = (async () => {
+            dynamicPropertyHandlers = {};
+            if ((0, common_1.isBrowserEnv)()) {
+                // colorConvert 需要前端环境才能处理，依赖 mui theme
+                // @ts-ignore
+                const colorConvertFn = globalThis[common_1.COLOR_CONVERT_FUNCTION_NAME];
+                if (typeof colorConvertFn === 'function') {
+                    dynamicPropertyHandlers.color = (value) => colorConvertFn(value);
+                }
+            }
+            return dynamicPropertyHandlers;
+        })();
+    }
+    return initDynamicPropertyHandlersPromise;
+};
+exports.initDynamicParsePropertyValueHandlers = initDynamicParsePropertyValueHandlers;
+(0, exports.initDynamicParsePropertyValueHandlers)();
+function parsePropertyValue(property, value, { locale, defaultLocale, propertyHandlers, }) {
+    // 混合动态和自定义的属性处理函数，这个需要放在最前面，因为有可能存在覆盖下面的处理
+    const mixedPropertyHandlers = {
+        ...(dynamicPropertyHandlers ?? {}),
+        ...(propertyHandlers ?? {}),
+    };
+    if (mixedPropertyHandlers && property.type && typeof mixedPropertyHandlers[property.type] === 'function') {
+        const handler = mixedPropertyHandlers[property.type];
+        const result = handler?.(value);
+        if (!(0, isNil_1.default)(result)) {
+            return result;
+        }
+    }
     if (property.type === 'json') {
         if (!value)
             return undefined;

package/lib/cjs/utils/style.js

@@ -0,0 +1,172 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBlockletTheme = getBlockletTheme;
+exports.isGradient = isGradient;
+exports.isColorString = isColorString;
+exports.isMuiColorKey = isMuiColorKey;
+exports.getSafeGradient = getSafeGradient;
+exports.parseColor = parseColor;
+exports.colorConvert = colorConvert;
+const Theme_1 = require("@arcblock/ux/lib/Theme");
+const gradient_parser_1 = __importDefault(require("gradient-parser"));
+const get_1 = __importDefault(require("lodash/get"));
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const common_1 = require("./common");
+const GRADIENT_START = 0;
+const GRADIENT_END = 100;
+const baseTheme = (0, Theme_1.createTheme)({});
+const blockletTheme = (0, Theme_1.createTheme)({
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: baseTheme?.breakpoints?.values?.sm ?? 600,
+            md: baseTheme?.breakpoints?.values?.md ?? 900,
+            lg: baseTheme?.breakpoints?.values?.lg ?? 1200,
+            xl: baseTheme?.breakpoints?.values?.xl ?? 1536,
+            // @ts-ignore
+            section: 1440,
+        },
+    },
+});
+function getBlockletTheme() {
+    return blockletTheme;
+}
+function isGradient(color) {
+    if (color?.trim()) {
+        try {
+            gradient_parser_1.default.parse(color);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    return false;
+}
+function isColorString(color) {
+    if (typeof color !== 'string') {
+        return false;
+    }
+    if (isGradient(color)) {
+        return true;
+    }
+    const currentColor = (0, tinycolor2_1.default)(color);
+    if (currentColor.isValid()) {
+        return true;
+    }
+    return false;
+}
+/**
+ * 检查字符串是否为有效的MUI颜色键
+ */
+function isMuiColorKey(value) {
+    // special case
+    if (value === 'transparent') {
+        return true;
+    }
+    return /^(primary|secondary|error|warning|info|success|grey|background|text|action)\.[a-z0-9]+$/.test(value);
+}
+/**
+ * 处理渐变的解析，并转换为rgba格式
+ */
+function getSafeGradient(color) {
+    try {
+        const colorAst = gradient_parser_1.default.parse(color);
+        const safeAst = colorAst.map((astItem) => {
+            const colorStops = astItem.colorStops.map((colorStop, index) => {
+                let { value } = colorStop;
+                if (typeof value !== 'string' && !Array.isArray(value)) {
+                    throw new Error('Invalid color stop value type');
+                }
+                let { type } = colorStop;
+                // 转换为 rgba 格式
+                if (type !== 'rgba') {
+                    const rgbaValue = (0, tinycolor2_1.default)(value).toRgb();
+                    value = [`${rgbaValue.r}`, `${rgbaValue.g}`, `${rgbaValue.b}`, `${rgbaValue.a}`];
+                    type = 'rgba';
+                }
+                // 如果已有进度，保持原样
+                if (colorStop.length) {
+                    return {
+                        ...colorStop,
+                        value,
+                        type,
+                    };
+                }
+                // 没有进度时，按 CSS 默认行为处理
+                const totalStops = astItem.colorStops.length;
+                let percentage;
+                if (index === 0) {
+                    percentage = GRADIENT_START;
+                }
+                else if (index === totalStops - 1) {
+                    percentage = GRADIENT_END;
+                }
+                else {
+                    // 中间的颜色均匀分布
+                    percentage = (index / (totalStops - 1)) * 100;
+                }
+                return {
+                    ...colorStop,
+                    value,
+                    type,
+                    length: {
+                        value: `${percentage}`,
+                        type: '%',
+                    },
+                };
+            });
+            return {
+                ...astItem,
+                colorStops,
+            };
+        });
+        const safeColor = gradient_parser_1.default.stringify(safeAst);
+        return safeColor.replace(/NaN/g, '100');
+    }
+    catch (error) {
+        if (isColorString(color)) {
+            return `${color}`.replace(/NaN/g, '100');
+        }
+        return '';
+    }
+}
+/**
+ * 解析颜色字符串
+ */
+function parseColor(color = '') {
+    if (isGradient(color)) {
+        return color;
+    }
+    if (isColorString(color)) {
+        const currentColor = (0, tinycolor2_1.default)(color);
+        return currentColor.toRgbString();
+    }
+    return color;
+}
+/**
+ * 转换颜色
+ * @param color - 颜色字符串
+ * @param _theme - 主题对象，默认为全局主题
+ * @returns 转换后的颜色字符串
+ */
+function colorConvert(color, _theme = blockletTheme) {
+    if (isMuiColorKey(color)) {
+        return (0, get_1.default)(_theme.palette, color);
+    }
+    // 处理渐变和普通颜色
+    if (isGradient(color)) {
+        return getSafeGradient(color);
+    }
+    if (isColorString(color)) {
+        return color;
+    }
+    return color || '';
+}
+if ((0, common_1.isBrowserEnv)()) {
+    // @ts-ignore inject colorConvert to globalThis
+    globalThis[common_1.COLOR_CONVERT_FUNCTION_NAME] = colorConvert;
+}

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

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

package/lib/esm/contexts/color.js

@@ -0,0 +1,149 @@
+import { useTheme } from '@mui/material/styles';
+import { useCallback, useMemo } from 'react';
+import { isMuiColorKey, colorConvert } from '../utils/style';
+/**
+ * Hook 用于获取和操作 MUI 主题色
+ */
+export function useMuiColorPalette() {
+    const theme = useTheme();
+    // 创建 MUI 色板预设及映射关系
+    const muiPaletteColors = 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 = useMemo(() => muiPaletteColors.map((color) => color.colorValue), [muiPaletteColors]);
+    // 根据颜色值获取 MUI 键名
+    const getMuiKeyByColor = useCallback((colorValue) => {
+        const found = muiPaletteColors.find((item) => item.colorValue === colorValue);
+        return found ? found.colorKey : null;
+    }, [muiPaletteColors]);
+    // 根据 MUI 键名获取颜色值
+    const getColorByMuiKey = useCallback((muiKey) => {
+        const found = muiPaletteColors.find((item) => item.colorKey === muiKey);
+        return found ? found.colorValue : null;
+    }, [muiPaletteColors]);
+    // 检查是否为有效的 MUI 颜色键
+    const isMuiColorKeyHook = useCallback((value) => {
+        return isMuiColorKey(value);
+    }, [isMuiColorKey]);
+    // 颜色分组逻辑
+    const groupedMuiColors = 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主题色键）
+ */
+export function useColorConvert() {
+    const muiPalette = useMuiColorPalette();
+    const { theme } = muiPalette;
+    return useCallback((color = '') => {
+        return colorConvert(color, theme);
+    }, [theme, colorConvert]);
+}