@blocklet/editor 2.2.17 → 2.2.18

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.d.ts

@@ -1,3 +1,4 @@
+import 'split-pane-react/esm/themes/default.css';
 import { type Properties } from './utils';
 type PagesKitComponentProps = {
     id: string;

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -1,31 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, useMediaQuery, Typography, Skeleton, Divider, } from '@mui/material';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography, Skeleton, styled, } from '@mui/material';
+import isEmpty from 'lodash/isEmpty';
+import { useLocalStorageState } from 'ahooks';
 import { useEffect, useMemo, useState, lazy, Suspense } from 'react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import SplitPane, { Pane } from 'split-pane-react';
+import 'split-pane-react/esm/themes/default.css';
 import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
 // @ts-ignore
 import { translations } from '@blocklet/pages-kit-runtime/locales';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 import mapValues from 'lodash/mapValues';
 import { isBlockletRunning } from '../utils';
-import { mode, 
-// isValidPropertyType,
-getLocalizedValue, } from './utils';
-// @FIXME: 需要移除这些无用的代码，现在使用 Pages Kit 提供的 ParametersConfig 组件
-// import { PropertyField } from './PropertyField';
+import { mode, getLocalizedValue } from './utils';
 import { useContentLocale } from '../ContentLocale';
 const ParametersConfigLazy = lazy(() => import('@blocklet/pages-kit-runtime/components').then((mod) => ({
     // @ts-ignore
     default: mod.ParametersConfig,
 })));
+const supportedLocales = window.blocklet?.languages?.map(({ code }) => code) || ['en', 'zh'];
+const referLocaleKey = '$referLocale$';
+/**
+ * 获取真实使用的语言代码
+ * 数据流: locale → 检查引用 → 返回实际语言
+ *
+ * 如果当前语言引用了其他语言(通过$referLocale$标记)，则返回被引用的语言
+ * 否则返回当前语言自身
+ *
+ * 这样组件显示和数据编辑时，可以智能查找到实际存储内容的语言
+ */
+const getRealLocale = (pendingProperties, locale) => {
+    const result = pendingProperties?.[locale]?.[referLocaleKey] ?? locale;
+    return result;
+};
 export function PagesKitComponentRenderer({ id, name, properties, onPropertiesChange }) {
+    const [splitSizes, setSplitSizes] = useLocalStorageState('PagesKitComponentRendererDialogSplitSizes', {
+        defaultValue: ['auto', 300],
+    });
     const locale = useContentLocale();
     const [editor] = useLexicalComposerContext();
     const isEditable = editor.isEditable();
     const [loading, setLoading] = useState(true);
     const [open, setOpen] = useState(false);
-    const upMd = useMediaQuery((theme) => theme.breakpoints.up('md'));
     const [pendingProperties, setPendingProperties] = useState(properties || {});
     const handleClick = () => {
         setOpen(true);
@@ -42,6 +59,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
     useEffect(() => {
         const load = async () => {
             const state = customComponentStates().getState();
+            const realLocale = getRealLocale(pendingProperties, locale);
             await state.loadComponents({
                 mode,
                 locale,
@@ -54,7 +72,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
                         useCache: true,
                         // @ts-ignore
                         cacheDuration: 3600 * 2,
-                        properties: Object.entries(pendingProperties?.[locale] || {}).reduce((props, [key, value]) => {
+                        properties: Object.entries(pendingProperties?.[realLocale] || {}).reduce((props, [key, value]) => {
                             props[key] = { value };
                             if (typeof value === 'object') {
                                 props[key].value = JSON.stringify(value);
@@ -69,7 +87,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
         if (isBlockletRunning('pages-kit')) {
             load();
         }
-    }, [id, name, pendingProperties]);
+    }, [id, name, pendingProperties, locale]);
     const componentStates = customComponentStates().getState()?.state?.components;
     // 组装所有组件数据，使其能被 ParametersConfig 组件使用，不能去掉，否则无法渲染 EditorComponent
     const allComponents = useMemo(() => {
@@ -80,46 +98,97 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
         }));
     }, [componentStates]);
     const component = useMemo(() => allComponents?.[id]?.data, [allComponents, id]);
-    const mergedPropertiesValues = useMemo(() => Object.fromEntries(Object.values(component?.properties ?? {}).map(({ data }) => {
-        return [
-            data.id,
-            {
-                value: pendingProperties?.[locale]?.[data.id] ??
-                    getLocalizedValue({ key: 'defaultValue', locale, data: data.locales }),
-            },
-        ];
-    })), [component, locale, pendingProperties]);
+    const mergedPropertiesValues = useMemo(() => {
+        const realLocale = getRealLocale(pendingProperties, locale);
+        return Object.fromEntries(Object.values(component?.properties ?? {}).map(({ data }) => {
+            return [
+                data.id,
+                {
+                    value: pendingProperties?.[realLocale]?.[data.id] ??
+                        getLocalizedValue({ key: 'defaultValue', locale: realLocale, data: data.locales }),
+                },
+            ];
+        }));
+    }, [component, locale, pendingProperties]);
     const componentRenderer = useMemo(() => (_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode }, properties: mergedPropertiesValues })), [instanceId, id, locale, mergedPropertiesValues, mode, component]);
     if (loading || !component) {
         return null;
     }
-    return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [componentRenderer, isEditable && !!Object.keys(component?.properties ?? {}).length && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsxs(Dialog, { disableEnforceFocus: true, fullWidth: true, maxWidth: "lg", open: open, onClose: (event, reason) => {
+    return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [componentRenderer, isEditable && !!Object.keys(component?.properties ?? {}).length && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -30, zIndex: 1200 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), open && (_jsxs(Dialog, { disableEnforceFocus: true, fullWidth: true, maxWidth: "lg", open: true, onClose: (event, reason) => {
                             const shouldClose = !['backdropClick', 'escapeKeyDown'].includes(reason);
                             if (shouldClose) {
                                 handleCancel();
                             }
-                        }, disableEscapeKeyDown: true, disableScrollLock: false, children: [_jsx(DialogTitle, { children: _jsxs(Typography, { variant: "h6", children: [name, " "] }) }), _jsx(DialogContent, { sx: {
-                                    zIndex: 1000,
+                        }, disableEscapeKeyDown: true, disableScrollLock: false, sx: {
+                            '&:has(.full-screen-container)': {
+                                zIndex: '1200 !important',
+                            },
+                        }, children: [_jsx(DialogTitle, { children: _jsxs(Typography, { variant: "h6", children: [name, " "] }) }), _jsx(DialogContent, { id: "parameters-config-dialog", sx: {
+                                    zIndex: 1200,
                                     overflow: 'hidden',
                                     pr: 0,
                                     position: 'relative',
                                     '& [aria-label*="getMediaKitAbsoluteUrl"]': {
                                         display: 'none',
                                     },
-                                }, children: _jsxs(Box, { sx: { display: 'flex', height: '65vh' }, children: [_jsx(Box, { sx: { flex: 1, pr: 1, mr: 1, overflow: 'auto' }, children: componentRenderer }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(Box, { sx: { width: 400, ml: 2, pr: 2, pb: 2, overflow: 'auto', overflowX: 'hidden' }, children: _jsx(LocaleProvider, { translations: translations, fallbackLocale: "en", children: _jsx(Suspense, { fallback: _jsx(Skeleton, { variant: "rectangular", height: "100%" }), children: _jsx(ParametersConfigLazy
-                                                    // @ts-ignore
-                                                    , { 
+                                    height: '65vh',
+                                    '.full-screen-container': {
+                                        zIndex: '1300 !important',
+                                    },
+                                }, children: _jsxs(StyledSplitPane, { split: "vertical", sizes: splitSizes, onChange: setSplitSizes, sashRender: SashRender, children: [_jsx(Pane, { minSize: 200, children: _jsx(Box, { sx: { flex: 1, mr: 1, overflow: 'auto', height: '100%' }, children: componentRenderer }) }), _jsx(Pane, { minSize: 200, maxSize: "70%", style: {
+                                                overflow: 'auto',
+                                            }, children: _jsx(Box, { sx: {
+                                                    ml: 2,
+                                                    pr: 2,
+                                                    pb: 2,
+                                                }, children: _jsx(LocaleProvider, { translations: translations, fallbackLocale: "en", children: _jsx(Suspense, { fallback: _jsx(Skeleton, { variant: "rectangular", height: "65vh" }), children: _jsx(ParametersConfigLazy
                                                         // @ts-ignore
-                                                        config: component, allComponents: allComponents, defaultLocale: "en", locale: locale, propertiesValue: mergedPropertiesValues, onChange: ({ id: propertyId, value }) => {
-                                                            setPendingProperties((prevProperties) => {
-                                                                if (!locale || !propertyId || !value?.value)
-                                                                    return prevProperties;
-                                                                return {
-                                                                    ...prevProperties,
-                                                                    [locale]: { ...(prevProperties[locale] || {}), [propertyId]: value?.value },
-                                                                };
-                                                            });
-                                                        } }) }) }) })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] })] }))] }));
+                                                        , { 
+                                                            // @ts-ignore
+                                                            config: component, allComponents: allComponents, defaultLocale: "en", locale: locale, propertiesValue: mergedPropertiesValues, 
+                                                            /**
+                                                             * 组件属性变更处理
+                                                             * 数据流: 输入变更 → 解析引用 → 复制/更新内容 → 设置其他语言引用
+                                                             *
+                                                             * 1. 检查当前语言是否引用其他语言，若是则复制所有内容并移除引用标记
+                                                             * 2. 更新当前语言的属性值
+                                                             * 3. 对空语言或有引用标记的语言，自动添加引用到当前语言
+                                                             *
+                                                             * 这确保了语言切换时数据不会丢失，且多语言共享未翻译的内容
+                                                             */
+                                                            onChange: ({ id: propertyId, value }) => {
+                                                                setPendingProperties((prevProperties) => {
+                                                                    if (!locale || !propertyId || !value?.value)
+                                                                        return prevProperties;
+                                                                    // 创建新的属性对象
+                                                                    const updatedProperties = { ...prevProperties };
+                                                                    const realLocale = getRealLocale(updatedProperties, locale);
+                                                                    // 如果触发更新当前值，且存在引用，则将引用对象应用到自己身上
+                                                                    if (realLocale !== locale) {
+                                                                        // 将引用对象应用到自己身上
+                                                                        updatedProperties[locale] = {
+                                                                            ...(updatedProperties[realLocale] || {}),
+                                                                        };
+                                                                        // 以防万一再尝试删除一次引用
+                                                                        delete updatedProperties[locale][referLocaleKey];
+                                                                    }
+                                                                    // 更新当前语言的值
+                                                                    updatedProperties[locale] = {
+                                                                        ...(updatedProperties[locale] || {}),
+                                                                        [propertyId]: value?.value,
+                                                                    };
+                                                                    // 为其他所有支持的语言，如果为空，那么添加引用
+                                                                    supportedLocales.forEach((otherLocale) => {
+                                                                        if (otherLocale !== locale && isEmpty(updatedProperties[otherLocale])) {
+                                                                            // 如果其他语言不存在任何属性，则添加引用
+                                                                            updatedProperties[otherLocale] = {
+                                                                                [referLocaleKey]: locale,
+                                                                            };
+                                                                        }
+                                                                    });
+                                                                    return updatedProperties;
+                                                                });
+                                                            } }) }) }) }) })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] }))] }))] }));
 }
 function hashCode(str) {
     let hash = 0;
@@ -130,3 +199,40 @@ function hashCode(str) {
     }
     return Math.abs(hash).toString(36); // 转换为 36 进制，使 id 更短
 }
+const StyledSplitPane = styled(SplitPane) `
+  .react-split__sash {
+    z-index: 1000; // resolve the bug of uploader zIndex
+  }
+`;
+function SashRender() {
+    return _jsx(DragHandle, {});
+}
+const DragHandle = styled('div') `
+  position: relative;
+  height: 100%;
+  width: 5px;
+  background-color: #f0f0f0;
+  cursor: col-resize;
+  transition: background-color 0.1s ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 20px;
+    background-color: #e3e3e3;
+    border-radius: 2px;
+    transition: background-color 0.1s ease;
+  }
+
+  &:hover {
+    background-color: #e3e3e3;
+
+    &::after {
+      background-color: #808080;
+    }
+  }
+`;

package/lib/ext/PagesKitComponent/utils.d.ts

@@ -1,25 +1,11 @@
 export declare const mode: string;
-export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url", "yaml", "color"];
-export type PropertyType = (typeof propertyTypes)[number];
 export type Properties = {
     [locale: string]: {
         [key: string]: any;
     };
 };
-export declare const isValidPropertyType: (type: string | null | undefined) => boolean;
-type Locales = {
-    [locale: string]: {
-        name?: string;
-        defaultValue?: any;
-    };
-};
 export declare const getLocalizedValue: ({ key, locale, data }: {
     key: string;
     locale: string;
     data?: Properties | undefined;
 }) => any;
-export declare const getPropertyLabel: ({ locale, locales }: {
-    locale: string;
-    locales?: Locales | undefined;
-}) => string;
-export {};

package/lib/ext/PagesKitComponent/utils.js

@@ -1,16 +1,9 @@
 export const mode = process.env.NODE_ENV === 'development' ? 'draft' : 'production';
-export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url', 'yaml', 'color'];
-export const isValidPropertyType = (type) => {
-    return !type || propertyTypes.includes(type);
-};
 // 依次尝试取值
 // - `data[locale][key]`
 // - `data.en[key]`
 // - 遍历所有 locale 取第一个有值的 `data[locale][key]`
 export const getLocalizedValue = ({ key, locale, data }) => {
     data = data || {};
-    return data[locale]?.[key] || data.en?.[key] || Object.values(data).find((x) => x?.[key])?.[key] || '';
-};
-export const getPropertyLabel = ({ locale, locales }) => {
-    return getLocalizedValue({ key: 'name', locale, data: locales });
+    return data[locale]?.[key] ?? data.en?.[key] ?? Object.values(data).find((x) => x?.[key])?.[key] ?? '';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -24,11 +24,11 @@
     ]
   },
   "dependencies": {
-    "@blocklet/code-editor": "^0.4.254",
+    "@blocklet/code-editor": "^0.4.255",
     "@blocklet/embed": "^0.2.3",
     "@blocklet/js-sdk": "^1.16.41",
-    "@blocklet/pages-kit": "^0.4.97",
-    "@blocklet/pages-kit-runtime": "^0.4.97",
+    "@blocklet/pages-kit": "^0.4.102",
+    "@blocklet/pages-kit-runtime": "^0.4.104",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -67,7 +67,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.2.17"
+    "@blocklet/pdf": "^2.2.18"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/lib/ext/PagesKitComponent/PropertyField.d.ts

@@ -1,13 +0,0 @@
-import { type PropertyType } from './utils';
-interface PropertyFieldProps {
-    type?: PropertyType;
-    multiline?: boolean;
-    label: string;
-    value: any;
-    onChange: (value: any) => void;
-}
-export declare function UploaderButton({ onChange }: {
-    onChange?: Function;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function PropertyField({ type, multiline, label, value, onChange, ...rest }: PropertyFieldProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/ext/PagesKitComponent/PropertyField.js

@@ -1,154 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControlLabel, FormLabel, IconButton, InputAdornment, Stack, Switch, TextField } from '@mui/material';
-import UploadIcon from '@mui/icons-material/Upload';
-import { useRef } from 'react';
-import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
-import ColorPicker from '../../main/ui/ColorPicker';
-const CodeEditor = lazy(() => import('@blocklet/code-editor').then((module) => ({
-    default: module.CodeEditor,
-})));
-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);
-    });
-}
-export function UploaderButton({ onChange }) {
-    const handleOpen = () => {
-        // @ts-ignore
-        const uploader = uploaderRef?.current?.getUploader();
-        uploader?.open();
-        if (onChange) {
-            // rewrite default emitter
-            uploader.onceUploadSuccess((...args) => {
-                onChange(...args);
-            });
-        }
-    };
-    return (_jsx(IconButton, { size: "small", onClick: handleOpen, children: _jsx(UploadIcon, {}) }, "uploader-trigger"));
-}
-export function PropertyField({ type, multiline, label, value, onChange, ...rest }) {
-    const codeEditorUploadCallback = useRef(null);
-    const handleOpen = () => {
-        // @ts-ignore
-        const uploader = uploaderRef?.current?.getUploader();
-        uploader?.open();
-        if (codeEditorUploadCallback.current) {
-            // rewrite default emitter
-            uploader.onceUploadSuccess(({ response }) => {
-                let fileName = response?.data?.filename || '';
-                if (fileName) {
-                    fileName = `mediakit://${fileName}`;
-                }
-                codeEditorUploadCallback.current?.(fileName);
-            });
-        }
-    };
-    const handleChange = (v) => {
-        if (type === 'json') {
-            try {
-                onChange?.(JSON.parse(v));
-            }
-            catch (e) {
-                console.error(e);
-                onChange?.(v);
-            }
-        }
-        else {
-            onChange?.(v);
-        }
-    };
-    if (type === 'boolean') {
-        return (_jsx(FormControlLabel, { sx: { display: 'inline-flex', m: 0 }, label: label, labelPlacement: "start", control: _jsx(Switch, { checked: value === true, onChange: (_, checked) => handleChange(checked) }) }));
-    }
-    if (type === 'number') {
-        return (_jsx(TextField, { type: "number", size: "small", sx: { width: 1 }, label: label, value: value, onChange: (e) => handleChange(e.target.value), ...rest }));
-    }
-    if (type === 'url') {
-        return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value.url, onChange: (e) => handleChange(e.target.value), InputProps: {
-                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(UploaderButton, { onChange: async ({ response }) => {
-                            const url = response?.data?.url || response?.data?.fileUrl;
-                            let size;
-                            if (url) {
-                                size = await getImageSize(url)
-                                    .catch(() => getVideoSize(url))
-                                    .catch(() => undefined);
-                            }
-                            handleChange({ url, width: size?.naturalWidth, height: size?.naturalHeight });
-                        } }) })),
-            }, ...rest }));
-    }
-    if (type === 'color') {
-        return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => handleChange(e.target.value), InputProps: {
-                endAdornment: (_jsx(InputAdornment, { position: "end", sx: {
-                        '.popup-item-color': {
-                            width: 24,
-                            height: 24,
-                            borderRadius: '4px',
-                            cursor: 'pointer',
-                            backgroundColor: value || '#fff',
-                            border: '1px solid rgba(0, 0, 0, 0.23)',
-                            '&:hover': {
-                                opacity: 0.8,
-                            },
-                        },
-                    }, children: _jsx(ColorPicker, { color: value, onChange: handleChange, buttonClassName: "popup-item spaced popup-item-color" }) })),
-            }, ...rest }));
-    }
-    if (type === 'yaml' || type === 'json') {
-        let newValue = value;
-        if (type === 'json' && typeof value !== 'string') {
-            newValue = JSON.stringify(value, null, 2);
-        }
-        return (_jsxs(Stack, { sx: {
-                width: '100%',
-                position: 'relative',
-                pt: 1,
-                pb: '6px',
-                px: '1px',
-                minHeight: 50,
-                '.monaco-editor,.overflow-guard': { borderRadius: 1 },
-            }, children: [_jsx(FormLabel, { sx: {
-                        position: 'absolute',
-                        left: 0,
-                        top: 0,
-                        transform: 'translate(0px, -7px) scale(0.75)',
-                    }, children: label }), _jsx(CodeEditor, { keyId: label, locale: "en", language: type === 'yaml' ? 'yaml' : 'json', value: newValue, onChange: (v) => {
-                        return handleChange(v);
-                    }, typeScriptNoValidation: false, onUpload: (callback) => {
-                        codeEditorUploadCallback.current = callback;
-                        handleOpen();
-                    } }), _jsx(Box, { component: "fieldset", sx: {
-                        pointerEvents: 'none',
-                        position: 'absolute',
-                        left: 0,
-                        top: -5,
-                        width: '100%',
-                        height: '100%',
-                        border: 1,
-                        borderColor: 'rgba(0, 0, 0, 0.23)',
-                        borderRadius: 1,
-                        px: 1,
-                        py: 0,
-                        zIndex: 1,
-                        m: 0,
-                    } })] }));
-    }
-    return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => handleChange(e.target.value), multiline: true, rows: 5, ...rest }));
-}