operp-print-designer 1.1.5 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/PrintDesigner/index.d.ts +9 -0
- package/dist/components/PrintDesigner/useResolvedTheme.d.ts +9 -0
- package/dist/index.d.ts +1 -0
- package/dist/operp-print-designer.css +1 -1
- package/dist/operp-print-designer.es.js +974 -923
- package/dist/operp-print-designer.umd.js +15 -15
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PrintDesignerDataSource, TemplateData } from '../../types';
|
|
3
3
|
import { type LocaleOption } from '../../i18n';
|
|
4
|
+
import { type PrintDesignerTheme } from './useResolvedTheme';
|
|
4
5
|
export interface PrintDesignerProps {
|
|
5
6
|
/** 是否为预览模式（只读） */
|
|
6
7
|
isPreview?: boolean;
|
|
@@ -18,6 +19,14 @@ export interface PrintDesignerProps {
|
|
|
18
19
|
* - `'auto'`：自动跟随宿主应用（宿主 i18next 实例 → `<html lang>` → `navigator.language`）
|
|
19
20
|
* @default 'zh-CN'
|
|
20
21
|
*/
|
|
22
|
+
/**
|
|
23
|
+
* 界面主题。
|
|
24
|
+
* - `'light'` / `'dark'`：固定深浅模式；
|
|
25
|
+
* - `'auto'`：自动跟随宿主应用的暗色状态（宿主 `<html data-erp-dark>` 标记 → 系统 prefers-color-scheme），
|
|
26
|
+
* 宿主切换主题时实时同步；此时宿主零改动即可跟随。
|
|
27
|
+
* @default 'auto'
|
|
28
|
+
*/
|
|
29
|
+
theme?: PrintDesignerTheme;
|
|
21
30
|
locale?: LocaleOption | (string & {});
|
|
22
31
|
}
|
|
23
32
|
/**
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type PrintDesignerTheme = 'light' | 'dark' | 'auto';
|
|
2
|
+
/**
|
|
3
|
+
* 把 theme 属性解析成最终是否为暗色。
|
|
4
|
+
*
|
|
5
|
+
* - 'light' / 'dark'：固定值；
|
|
6
|
+
* - 'auto'（默认）：优先跟随宿主的 data-erp-dark 标记（MutationObserver 实时响应切换），
|
|
7
|
+
* 宿主未标记时退回系统 prefers-color-scheme。
|
|
8
|
+
*/
|
|
9
|
+
export declare function useResolvedDarkMode(theme: PrintDesignerTheme): boolean;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import PrintDesigner from './components/PrintDesigner';
|
|
|
2
2
|
export default PrintDesigner;
|
|
3
3
|
export { PrintDesigner };
|
|
4
4
|
export type { PrintDesignerProps } from './components/PrintDesigner';
|
|
5
|
+
export type { PrintDesignerTheme } from './components/PrintDesigner/useResolvedTheme';
|
|
5
6
|
export type { CanvasComponent, CanvasComponentType, PageSettings, GridSettings, TemplateData, DataSource, DataSourceType, PrintDesignerDataSource, TableColumnConfig, DataBinding, DataBindingConfig, } from './types';
|
|
6
7
|
export { getRenderValue, getObjectFromDataSource, getArrayFromDataSource, formatRenderValue, safeParseJSON, getValueByPath, } from './utils/dataHelper';
|
|
7
8
|
export { useDesignerStore } from './store';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{flex:1;overflow:hidden}.app-left-panel{height:100%;display:flex;flex-direction:column;background
|
|
1
|
+
*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pd-theme-root{--pd-chrome-bg: #ffffff;--pd-chrome-border: #e8e8e8;--pd-canvas-bg: #e8e8e8;--pd-item-bg: #fafafa;--pd-item-border: #d9d9d9;--pd-item-hover-bg: #e6f4ff;--pd-item-hover-border: #1677ff;--pd-muted-text: #999999;--pd-binding-bg: #f0f5ff;--pd-binding-border: #adc6ff}.pd-theme-root[data-pd-dark=true]{--pd-chrome-bg: #141414;--pd-chrome-border: #303030;--pd-canvas-bg: #1f1f1f;--pd-item-bg: #1d1d1d;--pd-item-border: #424242;--pd-item-hover-bg: rgba(22, 119, 255, .25);--pd-item-hover-border: #1677ff;--pd-muted-text: #8c8c8c;--pd-binding-bg: rgba(22, 119, 255, .16);--pd-binding-border: rgba(22, 119, 255, .45)}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{flex:1;overflow:hidden}.app-left-panel{height:100%;display:flex;flex-direction:column;background:var(--pd-chrome-bg, #fff);overflow:hidden}.app-left-top{flex-shrink:0}.app-left-bottom{flex:1;overflow:auto}.app-right-panel{height:100%;display:flex;flex-direction:column;background:var(--pd-chrome-bg, #fff);overflow:auto}.canvas-grid{background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px}.react-grid-item.react-grid-placeholder{background:#1677ff!important;opacity:.15!important;border-radius:4px}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
|