@blocklet/pages-kit 0.4.108 → 0.4.110

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

@@ -0,0 +1,224 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigColorDialog = void 0;
+exports.ColorItem = ColorItem;
+exports.ColorPicker = ColorPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
+const context_1 = require("@arcblock/ux/lib/Locale/context");
+const material_1 = require("@mui/material");
+const ahooks_1 = require("ahooks");
+const react_1 = require("react");
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const color_1 = require("../contexts/color");
+const style_1 = require("../utils/style");
+const ColorPickerLib = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-best-gradient-color-picker'))));
+const HEIGHT = 400;
+const WIDTH = 270;
+function ColorItem({ color, sx = {}, ...props }) {
+    (0, style_1.isColorString)(color);
+    const styleMap = {};
+    if ((0, style_1.isGradient)(color)) {
+        styleMap.backgroundImage = color;
+    }
+    else {
+        styleMap.backgroundColor = color;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            ...sx,
+            width: '100%',
+            paddingBottom: '100%',
+            cursor: 'pointer',
+            transition: 'opacity 0.2s',
+            border: '1px solid #ccc',
+            borderRadius: 0.5,
+            '&:hover': {
+                opacity: 0.75,
+            },
+            ...styleMap,
+        }, ...props }));
+}
+function ColorPicker({ value, onChange, style = {}, sx = {} }) {
+    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) => {
+                    onChange(value);
+                    close();
+                } })] }));
+}
+exports.default = ColorPicker;
+exports.ConfigColorDialog = (0, react_1.forwardRef)(function ConfigColorDialog({ onSave, enableMuiPalette = true }, ref) {
+    const state = (0, ahooks_1.useReactive)({
+        value: '',
+        originalMuiKey: null,
+    });
+    const { t } = (0, context_1.useLocaleContext)();
+    const [activeTab, setActiveTab] = (0, ahooks_1.useLocalStorageState)('pages-kit:color-picker-active-tab', {
+        defaultValue: 0,
+    });
+    const muiPalette = (0, color_1.useMuiColorPalette)();
+    const previewStyle = {};
+    if (state.value) {
+        if ((0, style_1.isGradient)(state.value)) {
+            previewStyle.backgroundImage = state.value;
+        }
+        else {
+            previewStyle.backgroundColor = state.value;
+        }
+    }
+    else {
+        previewStyle.border = '1px solid #ccc';
+    }
+    const [open, { setFalse, setTrue }] = (0, ahooks_1.useBoolean)(false);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setFalse();
+    }, [setFalse]);
+    const isActiveMuiTab = enableMuiPalette && activeTab === 0;
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            open({ value } = { value: '' }) {
+                // 处理 MUI 色板键
+                if (enableMuiPalette && muiPalette.isMuiColorKey(value)) {
+                    state.originalMuiKey = value;
+                    const colorValue = muiPalette.getColorByMuiKey(value);
+                    state.value = (0, style_1.getSafeGradient)(colorValue || value);
+                    // 如果是 MUI 颜色键，再切换到 MUI Theme 标签
+                    setActiveTab(0);
+                }
+                else {
+                    state.originalMuiKey = null;
+                    state.value = (0, style_1.getSafeGradient)(value);
+                    // 不自动切换标签，尊重用户上一次的选择
+                    // 只有在 MUI 不可用时才强制切换到自定义
+                    if (!enableMuiPalette) {
+                        setActiveTab(1);
+                    }
+                }
+                setTrue();
+            },
+            close() {
+                handleClose();
+            },
+        };
+    });
+    const handleSave = () => {
+        // 启用 MUI 预设时，检查是否为 MUI 颜色
+        if (enableMuiPalette && muiPalette) {
+            // 只有当前在 MUI Theme 标签页时才尝试自动转换为 MUI 色键
+            if (isActiveMuiTab) {
+                const muiKey = muiPalette.getMuiKeyByColor(state.value);
+                onSave({ value: muiKey || state.value }, handleClose);
+            }
+            else {
+                // 在自定义色彩标签页时，保持原始值
+                onSave({ value: state.value }, handleClose);
+            }
+        }
+        else {
+            onSave({ value: state.value }, handleClose);
+        }
+    };
+    // 直接从 hook 获取分组
+    const { groupedMuiColors } = muiPalette;
+    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", component: "div", children: t('maker.configColor') }), enableMuiPalette && ((0, jsx_runtime_1.jsxs)(material_1.ButtonGroup, { size: "small", "aria-label": "color mode selector", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: isActiveMuiTab ? 'contained' : 'outlined', onClick: () => setActiveTab(0), sx: {
+                                    fontWeight: 500,
+                                    textTransform: 'none',
+                                    minWidth: 'unset',
+                                }, children: t('maker.configColorMuiTheme') || 'Theme Color' }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: activeTab === 1 ? 'contained' : 'outlined', onClick: () => setActiveTab(1), sx: {
+                                    fontWeight: 500,
+                                    textTransform: 'none',
+                                    minWidth: 'unset',
+                                }, children: t('maker.configColorCustomColor') || 'Custom Color' })] }))] }), (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: {
+                            ...previewStyle,
+                            flex: '0 0 270px',
+                            borderRadius: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            position: 'sticky',
+                            top: 0,
+                        }, children: [!state.value && (0, jsx_runtime_1.jsx)(Empty_1.default, { children: t('error.notConfig') }), state.originalMuiKey && isActiveMuiTab && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
+                                    bgcolor: 'rgba(255,255,255,0.7)',
+                                    px: 2,
+                                    py: 1,
+                                    borderRadius: 1,
+                                    color: '#000',
+                                    maxWidth: '90%',
+                                    textAlign: 'center',
+                                }, children: state.originalMuiKey }))] }, "color-preview"), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 }, children: isActiveMuiTab ? (
+                        // MUI 主题色面板
+                        (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { height: HEIGHT }, children: 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)';
+                                                }
+                                            }
+                                            return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: item.colorKey, children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: () => {
+                                                        state.value = item.colorValue;
+                                                        state.originalMuiKey = item.colorKey;
+                                                    }, sx: {
+                                                        width: 28,
+                                                        height: 28,
+                                                        bgcolor: item.colorValue,
+                                                        border: state.originalMuiKey === item.colorKey
+                                                            ? `2px solid ${selectedColor}`
+                                                            : '1px solid #ccc',
+                                                        borderRadius: 0.5,
+                                                        cursor: 'pointer',
+                                                        '&:hover': { opacity: 0.8 },
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        // 透明色时显示棋盘背景
+                                                        ...(item.colorValue === 'transparent'
+                                                            ? {
+                                                                background: 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px',
+                                                            }
+                                                            : {}),
+                                                    }, children: state.originalMuiKey === item.colorKey && ((0, jsx_runtime_1.jsx)("i", { className: "i-mdi:check", style: {
+                                                            color: selectedColor,
+                                                            fontSize: '1.2rem',
+                                                        } })) }) }, 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: true, 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') })] })] }));
+});

package/lib/cjs/builtin/uploader.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploader = void 0;
+exports.UploaderButton = UploaderButton;
+exports.UploaderProvider = UploaderProvider;
+exports.getVideoSize = getVideoSize;
+exports.getImageSize = getImageSize;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@blocklet/uploader/react");
+const Upload_1 = __importDefault(require("@mui/icons-material/Upload"));
+const material_1 = require("@mui/material");
+exports.useUploader = react_1.useUploaderContext;
+function UploaderButton({ onChange }) {
+    const uploaderRef = (0, exports.useUploader)();
+    const handleOpen = () => {
+        // @ts-ignore
+        const uploader = uploaderRef?.current?.getUploader();
+        uploader?.open();
+        if (onChange) {
+            // rewrite default emitter
+            uploader.onceUploadSuccess((...args) => {
+                onChange(...args);
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(Upload_1.default, {}) }, "uploader-trigger"));
+}
+function UploaderProvider({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.UploaderProvider, { popup: true, 
+        // @ts-ignore
+        coreProps: {
+            restrictions: {
+                allowedFileTypes: [
+                    'image/png',
+                    'image/jpeg',
+                    'image/gif',
+                    'image/webp',
+                    'image/svg+xml',
+                    'video/mp4',
+                    'video/webm',
+                    'audio/mpeg',
+                ],
+                maxNumberOfFiles: 1,
+            },
+        }, children: children }, "uploader"
+    // @ts-ignore
+    ));
+}
+exports.default = UploaderProvider;
+function getVideoSize(url) {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video');
+        video.src = url;
+        video.onloadedmetadata = () => {
+            const { videoWidth: naturalWidth, videoHeight: naturalHeight } = video;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        video.onerror = (e) => reject(e);
+    });
+}
+function getImageSize(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+        img.onload = () => {
+            const { naturalWidth, naturalHeight } = img;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        img.onerror = (e) => reject(e);
+    });
+}