@blocklet/pages-kit 0.6.18 → 0.6.19

package/lib/cjs/builtin/color-picker.js

@@ -153,7 +153,82 @@ function ColorItem({ color, sx = {}, ...props }) {
             ...styleMap,
         }, ...props }));
 }
-const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPalette = true, }) {
+// MUI Theme Tab Component
+const MuiThemeTab = ({ value, onChange, }) => {
+    const { t } = (0, context_1.useLocaleContext)();
+    const muiPalette = (0, color_1.useMuiColorPalette)();
+    const mode = muiPalette?.theme?.palette?.mode;
+    const isDark = mode === 'dark';
+    const { groupedMuiColors } = muiPalette;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { height: HEIGHT }, children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 1.5, mr: -1.5, py: 0, px: 1.5 }, children: t('maker.configColorMuiThemeInfo') }), Object.entries(groupedMuiColors).map(([palette, paletteColors]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { pb: 1.5 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, sx: { textTransform: 'capitalize', mb: 0.5, lineHeight: 1 }, children: palette }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: paletteColors.map((item) => {
+                            let selectedColor = '';
+                            if (value?.originalMuiKey === item.colorKey) {
+                                if (item.colorValue === 'transparent') {
+                                    selectedColor = 'rgba(0,0,0,0.7)';
+                                }
+                                else if ((0, tinycolor2_1.default)(item.colorValue).isDark()) {
+                                    selectedColor = 'rgba(255,255,255,0.8)';
+                                }
+                                else {
+                                    selectedColor = 'rgba(0,0,0,0.7)';
+                                }
+                            }
+                            // 是否有另一种模式的颜色值
+                            const hasAlternateColor = !!item.alternateColorValue;
+                            return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `${item.colorKey}${hasAlternateColor ? t('maker.configColorMuiThemeWithAlternateColor') : ''}`, sx: {
+                                    zIndex: 99999,
+                                }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => {
+                                        onChange({
+                                            value: item.colorValue,
+                                            originalMuiKey: item.colorKey,
+                                        });
+                                    }, sx: {
+                                        width: 32,
+                                        height: 32,
+                                        border: value?.originalMuiKey === item.colorKey
+                                            ? `2px solid ${isDark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.7)'}`
+                                            : '1px solid #ccc',
+                                        borderRadius: 0.5,
+                                        cursor: 'pointer',
+                                        '&:hover': { opacity: 0.8 },
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        position: 'relative',
+                                        overflow: 'hidden',
+                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                                position: 'absolute',
+                                                top: 0,
+                                                right: 0,
+                                                bottom: 0,
+                                                left: 0,
+                                                ...(item.colorValue === 'transparent'
+                                                    ? { background: (0, style_1.getTransparentBackground)() }
+                                                    : { backgroundColor: item.colorValue }),
+                                            } }), hasAlternateColor && (0, jsx_runtime_1.jsx)(AlternateColorIndicator, { value: item.alternateColorValue }), value?.originalMuiKey === item.colorKey && ((0, jsx_runtime_1.jsx)("i", { className: "i-mdi:check", style: {
+                                                color: selectedColor,
+                                                fontSize: '1.2rem',
+                                                position: 'relative',
+                                                zIndex: 2,
+                                            } }))] }) }, item.colorKey));
+                        }) })] }, palette)))] }));
+};
+// Custom Color Tab Component
+const CustomColorTab = ({ value, onChange, }) => {
+    const muiPalette = (0, color_1.useMuiColorPalette)();
+    const mode = muiPalette?.theme?.palette?.mode;
+    const isDark = mode === 'dark';
+    const colorValue = value?.value && typeof value.value === 'string' ? value.value : '';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { overflowY: 'auto', overflowX: 'hidden' }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: WIDTH, height: HEIGHT }), children: (0, jsx_runtime_1.jsx)(ColorPickerLib, { disableDarkMode: !isDark, disableLightMode: isDark, width: WIDTH, 
+                // menu color picker height
+                height: WIDTH, value: colorValue, onChange: (colorValue) => {
+                    onChange({
+                        value: colorValue,
+                        originalMuiKey: null,
+                    });
+                }, hidePresets: true, hideAdvancedSliders: true, hideColorGuide: true, hideInputType: true }) }) }));
+};
+const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPalette = true, renderTabs, }) {
     const state = (0, ahooks_1.useReactive)({
         value: '',
         originalMuiKey: null,
@@ -165,6 +240,35 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
     const muiPalette = (0, color_1.useMuiColorPalette)();
     const mode = muiPalette?.theme?.palette?.mode;
     const isDark = mode === 'dark';
+    // Create default tabs
+    const defaultTabs = enableMuiPalette
+        ? [
+            {
+                key: 'mui-theme',
+                label: t('maker.configColorMuiTheme') || 'Theme Color',
+                component: MuiThemeTab,
+                showPreview: true,
+            },
+            {
+                key: 'custom-color',
+                label: t('maker.configColorCustomColor') || 'Custom Color',
+                component: CustomColorTab,
+                showPreview: true,
+            },
+        ]
+        : [
+            {
+                key: 'custom-color',
+                label: t('maker.configColorCustomColor') || 'Custom Color',
+                component: CustomColorTab,
+                showPreview: true,
+            },
+        ];
+    // Use renderTabs function or fallback to default tabs
+    const allTabs = renderTabs ? renderTabs(defaultTabs) : defaultTabs;
+    // Get current active tab
+    const currentTab = allTabs[activeTab] || allTabs[0];
+    const CurrentTabComponent = currentTab?.component;
     const previewStyle = {};
     if (state.value) {
         if ((0, style_1.isGradient)(state.value)) {
@@ -181,7 +285,7 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
     const handleClose = (0, react_1.useCallback)(() => {
         setFalse();
     }, [setFalse]);
-    const isActiveMuiTab = enableMuiPalette && activeTab === 0;
+    const isActiveMuiTab = currentTab?.key === 'mui-theme';
     (0, react_1.useImperativeHandle)(ref, () => {
         return {
             open({ value } = { value: '' }) {
@@ -190,16 +294,24 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
                     state.originalMuiKey = value;
                     const colorValue = muiPalette.getColorByMuiKey(value);
                     state.value = (0, style_1.getSafeGradient)(colorValue || value);
-                    // 如果是 MUI 颜色键，再切换到 MUI Theme 标签
-                    setActiveTab(0);
+                    // 如果是 MUI 颜色键，切换到 MUI Theme 标签
+                    const muiTabIndex = allTabs.findIndex((tab) => tab.key === 'mui-theme');
+                    if (muiTabIndex !== -1) {
+                        setActiveTab(muiTabIndex);
+                    }
+                }
+                else if (typeof value === 'object' && value !== null && 'value' in value) {
+                    const outerData = value;
+                    state.value = outerData.value;
+                    state.originalMuiKey = null;
                 }
                 else {
                     state.originalMuiKey = null;
                     state.value = (0, style_1.getSafeGradient)(value);
                     // 不自动切换标签，尊重用户上一次的选择
-                    // 只有在 MUI 不可用时才强制切换到自定义
+                    // 只有在 MUI 不可用时才强制切换到第一个
                     if (!enableMuiPalette) {
-                        setActiveTab(1);
+                        setActiveTab(0);
                     }
                 }
                 setTrue();
@@ -216,33 +328,17 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
             if (isActiveMuiTab) {
                 const muiKey = muiPalette.getMuiKeyByColor(state.value);
                 onSave({ value: muiKey || state.value }, handleClose);
-            }
-            else {
-                // 在自定义色彩标签页时，保持原始值
-                onSave({ value: state.value }, handleClose);
+                return;
             }
         }
-        else {
-            onSave({ value: state.value }, handleClose);
-        }
+        onSave({ value: state.value }, handleClose);
     };
-    // 直接从 hook 获取分组
-    const { groupedMuiColors } = muiPalette;
     const rectWrapperBorder = `2px solid ${muiPalette?.theme?.palette?.divider}`;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { disableEnforceFocus: true, open: open, onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "inherit", children: t('maker.configColor') }), enableMuiPalette && ((0, jsx_runtime_1.jsx)(material_1.ButtonGroup, { size: "small", "aria-label": "color mode selector", children: [
-                            {
-                                label: t('maker.configColorMuiTheme') || 'Theme Color',
-                                value: 0,
-                            },
-                            {
-                                label: t('maker.configColorCustomColor') || 'Custom Color',
-                                value: 1,
-                            },
-                        ].map((item) => ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: activeTab === item.value ? 'contained' : 'outlined', onClick: () => setActiveTab(item.value), sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { disableEnforceFocus: true, open: open, onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "inherit", children: t('maker.configColor') }), allTabs.length > 1 && ((0, jsx_runtime_1.jsx)(material_1.ButtonGroup, { size: "small", "aria-label": "color mode selector", children: allTabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: activeTab === index ? 'contained' : 'outlined', onClick: () => setActiveTab(index), sx: {
                                 fontWeight: 500,
                                 textTransform: 'none',
                                 minWidth: 'unset',
-                            }, children: item.label }))) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { sx: { width: 600, display: 'flex', flexDirection: 'row', gap: 2, overflowX: 'hidden' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            }, children: tab.label }, tab.key))) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { sx: { width: 600, display: 'flex', flexDirection: 'row', gap: 2, overflowX: 'hidden' }, children: [currentTab?.showPreview && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             ...previewStyle,
                             flex: '0 0 270px',
                             borderRadius: 1,
@@ -275,72 +371,24 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
                                                     } }), (0, jsx_runtime_1.jsx)(ThemeModeLabel, { mode: !isDark ? 'dark' : 'light', position: "bottom-right" })] }));
                                     }
                                     return null;
-                                })() }))] }, "color-preview"), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 }, children: isActiveMuiTab ? (
-                        // MUI 主题色面板
-                        (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { height: HEIGHT }, children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 1.5, mr: -1.5, py: 0, px: 1.5 }, children: t('maker.configColorMuiThemeInfo') }), Object.entries(groupedMuiColors).map(([palette, paletteColors]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { pb: 1.5 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, sx: { textTransform: 'capitalize', mb: 0.5, lineHeight: 1 }, children: palette }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: paletteColors.map((item) => {
-                                                let selectedColor = '';
-                                                if (state.originalMuiKey === item.colorKey) {
-                                                    if (item.colorValue === 'transparent') {
-                                                        selectedColor = 'rgba(0,0,0,0.7)';
-                                                    }
-                                                    else if ((0, tinycolor2_1.default)(item.colorValue).isDark()) {
-                                                        selectedColor = 'rgba(255,255,255,0.8)';
-                                                    }
-                                                    else {
-                                                        selectedColor = 'rgba(0,0,0,0.7)';
-                                                    }
-                                                }
-                                                // 是否有另一种模式的颜色值
-                                                const hasAlternateColor = !!item.alternateColorValue;
-                                                return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `${item.colorKey}${hasAlternateColor ? t('maker.configColorMuiThemeWithAlternateColor') : ''}`, sx: {
-                                                        zIndex: 99999,
-                                                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => {
-                                                            state.value = item.colorValue;
-                                                            state.originalMuiKey = item.colorKey;
-                                                        }, sx: {
-                                                            width: 32,
-                                                            height: 32,
-                                                            border: state.originalMuiKey === item.colorKey
-                                                                ? `2px solid ${isDark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.7)'}`
-                                                                : '1px solid #ccc',
-                                                            borderRadius: 0.5,
-                                                            cursor: 'pointer',
-                                                            '&:hover': { opacity: 0.8 },
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            justifyContent: 'center',
-                                                            position: 'relative',
-                                                            overflow: 'hidden',
-                                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                                                    position: 'absolute',
-                                                                    top: 0,
-                                                                    right: 0,
-                                                                    bottom: 0,
-                                                                    left: 0,
-                                                                    ...(item.colorValue === 'transparent'
-                                                                        ? { background: (0, style_1.getTransparentBackground)() }
-                                                                        : { backgroundColor: item.colorValue }),
-                                                                } }), hasAlternateColor && (0, jsx_runtime_1.jsx)(AlternateColorIndicator, { value: item.alternateColorValue }), state.originalMuiKey === item.colorKey && ((0, jsx_runtime_1.jsx)("i", { className: "i-mdi:check", style: {
-                                                                    color: selectedColor,
-                                                                    fontSize: '1.2rem',
-                                                                    position: 'relative',
-                                                                    zIndex: 2,
-                                                                } }))] }) }, item.colorKey));
-                                            }) })] }, palette)))] })) : (
-                        // 自定义颜色选择器
-                        (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { overflowY: 'auto', overflowX: 'hidden' }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: WIDTH, height: HEIGHT }), children: (0, jsx_runtime_1.jsx)(ColorPickerLib, { disableDarkMode: !isDark, disableLightMode: isDark, width: WIDTH, 
-                                    // menu color picker height
-                                    height: WIDTH, value: state.value, onChange: (value) => {
-                                        state.value = value;
-                                        state.originalMuiKey = null;
-                                    }, 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') })] })] }));
+                                })() }))] }, "color-preview")), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 }, children: CurrentTabComponent && ((0, jsx_runtime_1.jsx)(CurrentTabComponent, { value: state, onChange: (value) => {
+                                if (value && typeof value === 'object' && 'value' in value) {
+                                    state.value = value.value;
+                                    state.originalMuiKey = value.originalMuiKey || null;
+                                }
+                                else {
+                                    // Handle simple string values for backward compatibility
+                                    state.value = value || '';
+                                    state.originalMuiKey = null;
+                                }
+                            } })) })] }), (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') })] })] }));
 };
 exports.ConfigColorDialog = ConfigColorDialog;
-function ColorPicker({ value, onChange, style = {}, sx = {} }) {
+function ColorPicker({ value, onChange, style = {}, sx = {}, renderTabs }) {
     const refDialog = (0, react_1.useRef)(null);
     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: () => {
                     refDialog.current?.open({ value });
-                } }), (0, jsx_runtime_1.jsx)(exports.ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
+                } }), (0, jsx_runtime_1.jsx)(exports.ConfigColorDialog, { ref: refDialog, renderTabs: renderTabs, onSave: ({ value }, close) => {
                     onChange(value);
                     close();
                 } })] }));

package/lib/cjs/builtin/zod.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.z = exports.uploadSchema = exports.pagesKitRegistry = void 0;
+const z4 = __importStar(require("zod/v4"));
+// Re-export all zod/v4 types for compatibility
+__exportStar(require("zod/v4"), exports);
+exports.pagesKitRegistry = z4.registry();
+// Define upload schema with metadata
+exports.uploadSchema = z4
+    .object({
+    url: z4.string().nullable(),
+    mediaKitUrl: z4.string().nullable(),
+    width: z4.number().nullable(),
+    height: z4.number().nullable(),
+})
+    .register(exports.pagesKitRegistry, {
+    id: 'pages_kit_upload',
+    type: 'upload',
+    locales: {
+        en: {
+            name: 'Media Upload',
+            description: 'Media upload component with URL, media kit URL and dimensions',
+            defaultValue: {
+                url: 'https://example.com/image.jpg',
+                mediaKitUrl: 'https://mediakit.example.com/image.jpg',
+                width: 1920,
+                height: 1080,
+            },
+        },
+        zh: {
+            name: '媒体上传',
+            description: '支持URL、媒体工具包URL和尺寸的媒体上传组件',
+            defaultValue: {
+                url: 'https://example.com/image.jpg',
+                mediaKitUrl: 'https://mediakit.example.com/image.jpg',
+                width: 1920,
+                height: 1080,
+            },
+        },
+    },
+    examples: [
+        {
+            url: 'https://example.com/image.jpg',
+            mediaKitUrl: 'https://mediakit.example.com/image.jpg',
+            width: 1920,
+            height: 1080,
+        },
+    ],
+});
+// Create factory functions for custom types
+const upload = () => exports.uploadSchema;
+// Export enhanced zod with custom types
+exports.z = {
+    ...z4,
+    upload, // Factory function, consistent with z.string(), z.object()
+};
+exports.default = exports.z;