@blocklet/pages-kit 0.4.98 → 0.4.100

package/lib/esm/types/index.js

@@ -3,3 +3,4 @@ export * from './core';
 export * from './state';
 export * from './preload';
 export * from './builtin';
+export * from './style';

package/lib/esm/types/style.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/utils/property.js

@@ -1,3 +1,4 @@
+import isNil from 'lodash/isNil';
 import * as yaml from 'yaml';
 export function componentUMDName({ componentId }) {
     return `PagesCustomComponent${componentId}`;
@@ -65,7 +66,42 @@ export function safeYamlParse(value) {
     }
     return yaml.parse(value);
 }
-export function parsePropertyValue(property, value, { locale, defaultLocale }) {
+export const isBrowserEnv = () => {
+    return typeof globalThis.window !== 'undefined' && typeof globalThis.document !== 'undefined';
+};
+let dynamicPropertyHandlers = null;
+let initDynamicPropertyHandlersPromise = null;
+// 根据前后端环境初始化动态的属性处理函数
+export const initDynamicParsePropertyValueHandlers = () => {
+    if (dynamicPropertyHandlers)
+        return Promise.resolve(dynamicPropertyHandlers);
+    if (!initDynamicPropertyHandlersPromise) {
+        initDynamicPropertyHandlersPromise = (async () => {
+            dynamicPropertyHandlers = {};
+            if (isBrowserEnv()) {
+                // colorConvert 需要前端环境才能处理，依赖 mui theme
+                const { colorConvert } = await import('./style');
+                dynamicPropertyHandlers.color = (value) => colorConvert(value);
+            }
+            return dynamicPropertyHandlers;
+        })();
+    }
+    return initDynamicPropertyHandlersPromise;
+};
+initDynamicParsePropertyValueHandlers();
+export 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 (!isNil(result)) {
+            return result;
+        }
+    }
     if (property.type === 'json') {
         if (!value)
             return undefined;

package/lib/esm/utils/style.js

@@ -0,0 +1,155 @@
+import { createTheme } from '@arcblock/ux/lib/Theme';
+import gradient from 'gradient-parser';
+import get from 'lodash/get';
+import tinycolor from 'tinycolor2';
+const GRADIENT_START = 0;
+const GRADIENT_END = 100;
+const baseTheme = createTheme({});
+const blockletTheme = 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,
+        },
+    },
+});
+export function getBlockletTheme() {
+    return blockletTheme;
+}
+export function isGradient(color) {
+    if (color?.trim()) {
+        try {
+            gradient.parse(color);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    return false;
+}
+export function isColorString(color) {
+    if (typeof color !== 'string') {
+        return false;
+    }
+    if (isGradient(color)) {
+        return true;
+    }
+    const currentColor = tinycolor(color);
+    if (currentColor.isValid()) {
+        return true;
+    }
+    return false;
+}
+/**
+ * 检查字符串是否为有效的MUI颜色键
+ */
+export 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格式
+ */
+export function getSafeGradient(color) {
+    try {
+        const colorAst = gradient.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 = tinycolor(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.stringify(safeAst);
+        return safeColor.replace(/NaN/g, '100');
+    }
+    catch (error) {
+        if (isColorString(color)) {
+            return `${color}`.replace(/NaN/g, '100');
+        }
+        return '';
+    }
+}
+/**
+ * 解析颜色字符串
+ */
+export function parseColor(color = '') {
+    if (isGradient(color)) {
+        return color;
+    }
+    if (isColorString(color)) {
+        const currentColor = tinycolor(color);
+        return currentColor.toRgbString();
+    }
+    return color;
+}
+/**
+ * 转换颜色
+ * @param color - 颜色字符串
+ * @param _theme - 主题对象，默认为全局主题
+ * @returns 转换后的颜色字符串
+ */
+export function colorConvert(color, _theme = blockletTheme) {
+    if (isMuiColorKey(color)) {
+        return get(_theme.palette, color);
+    }
+    // 处理渐变和普通颜色
+    if (isGradient(color)) {
+        return getSafeGradient(color);
+    }
+    if (isColorString(color)) {
+        return color;
+    }
+    return color || '';
+}

package/lib/types/contexts/color.d.ts

@@ -0,0 +1,25 @@
+interface ColorInfo {
+    colorKey: string;
+    colorValue: string;
+    group: string;
+}
+/**
+ * Hook 用于获取和操作 MUI 主题色
+ */
+export declare function useMuiColorPalette(): {
+    muiPaletteColors: ColorInfo[];
+    groupedMuiColors: Record<string, {
+        colorKey: string;
+        colorValue: string;
+    }[]>;
+    presetColors: string[];
+    getMuiKeyByColor: (colorValue: string) => string | null;
+    getColorByMuiKey: (muiKey: string) => string | null;
+    isMuiColorKey: (value: string) => boolean;
+    theme: import("@mui/material/styles").Theme;
+};
+/**
+ * React Hook，用于实时转换颜色值（包括MUI主题色键）
+ */
+export declare function useColorConvert(): (color?: string) => string;
+export {};