x-print-designer 0.4.8 → 0.4.13

package/dist/web-component.d.ts

@@ -1,170 +1,247 @@
-import type {
-  DesignerExportRequest,
-  DesignerPrintRequest,
-  DesignerPrintDefaults,
-  DesignerListContextMenuConfig,
-  DesignerListContextMenuItem,
-  DesignerTemplateTagResolver
-} from './web-component';
-import type {
-  LocalPrinterInfo,
-  RemotePrinterInfo,
-  LocalPrinterCaps,
-  RemoteClientInfo
-} from './composables/usePrintSettings';
-import type { Page } from './types';
-import type { LoopExpandContext } from './utils/loopExpand';
-import type { DefineComponent } from 'vue';
-
-export type EndpointConfig = string | {
-  url: string;
-  method?: string;
-  data?: Record<string, any>;
-};
-
-export type CrudEndpoints = {
-  baseUrl?: string;
-  templates?: {
-    list?: EndpointConfig;
-    get?: EndpointConfig;
-    upsert?: EndpointConfig;
-    delete?: EndpointConfig;
-  };
-  customElements?: {
-    list?: EndpointConfig;
-    get?: EndpointConfig;
-    upsert?: EndpointConfig;
-    delete?: EndpointConfig;
-  };
-};
-export type DesignerFieldDictionaryItem = {
-  fieldKey?: string;
-  key?: string;
-  fieldType?: string;
-  label?: string;
-  labelCn?: string;
-  labelEn?: string;
-  moduleKey?: string;
-  moduleName?: string;
-  primaryKey?: boolean;
-};
-
-export type DesignerFieldDictionary = Record<string, DesignerFieldDictionaryItem | string | null | undefined>;
-
-export interface PrintDesignerElement extends HTMLElement {
-  print(request?: DesignerPrintRequest): Promise<void>;
-  export(request: DesignerExportRequest): Promise<void | Blob>;
-  setPrintDefaults(payload?: DesignerPrintDefaults): void;
-  fetchLocalPrinters(): Promise<LocalPrinterInfo[]>;
-  fetchLocalPrinterCaps(printer: string): Promise<LocalPrinterCaps | undefined>;
-  fetchRemotePrinters(clientId?: string): Promise<RemotePrinterInfo[]>;
-  fetchRemoteClients(): Promise<RemoteClientInfo[]>;
-
-  setBranding(payload?: { title?: string; logoUrl?: string; showTitle?: boolean; showLogo?: boolean }): void;
-  setBrandVars(vars: Record<string, string>, options?: { persist?: boolean }): void;
-  setTheme(theme: string): void;
-  setDesignerFont(fontFamily: string, options?: { persist?: boolean }): void;
-  setLanguage(lang: 'zh' | 'en'): void;
-  getPrintQuality(): 'fast' | 'normal' | 'high' | 'ultra';
-  setDataLoading(isLoading: boolean): void;
-
-  // Save callback
-  setOnSave(handler: ((payload: { id: string | null; name: string; data: Record<string, any>; isNew: boolean }) => void | Promise<void>) | null): void;
-  setAutoSave(enabled: boolean, intervalMs?: number): void;
-  setPrintQuality(quality: 'fast' | 'normal' | 'high' | 'ultra'): void;
-
-  getTestData(): Record<string, any>;
-  setTestData(data: Record<string, any>, options?: { merge?: boolean }): Promise<void>;
-  setSampleData(data: Record<string, any>): void;
-
-  getVariables(): Record<string, any>;
-  setVariables(data: Record<string, any>, options?: { merge?: boolean }): Promise<void>;
-  setTemplateVariables(data: Record<string, any>, options?: { merge?: boolean }): Promise<void>;
-  setFieldDictionary(dictionary?: DesignerFieldDictionary | null): void;
-
-  getTemplateVariables(): Record<string, any>;
-
-  getTemplateData(): any;
-  loadTemplateData(data: any): boolean;
-
-  getTemplates(options?: { includeData?: boolean }): Array<{ id: string; name: string; updatedAt: number } | any>;
-  refreshTemplates(options?: { includeData?: boolean }): Promise<Array<{ id: string; name: string; updatedAt: number } | any>>;
-  getTemplate(id: string): any | null;
-  upsertTemplate(template: { id?: string; name: string; data?: any; updatedAt?: number; [key: string]: any }, options?: { setCurrent?: boolean }): Promise<string | null>;
-  /**
-   * 写入模板列表并加载 currentTemplateId 对应模板。
-   * 返回的 Promise 在 pages 填充完成后 resolve，调用方可据此消除时序竞态。
-   */
-  setTemplates(templates: Array<{ id: string; name: string; data?: any; updatedAt?: number; [key: string]: any }>, options?: { currentTemplateId?: string }): Promise<void>;
-  deleteTemplate(id: string, options?: { confirm?: boolean }): Promise<void>;
-  /**
-   * 加载指定模板并填充画布。
-   * @returns Promise<boolean>，resolve 时 pages 已填充；false 表示因前置条件未触发。
-   */
-  loadTemplate(id: string): Promise<boolean>;
-
-  getCustomElements(options?: { includeElement?: boolean }): Array<{ id: string; name: string } | any>;
-  refreshCustomElements(options?: { includeElement?: boolean }): Promise<Array<{ id: string; name: string } | any>>;
-  upsertCustomElement(customElement: { id?: string; name: string; element: any; [key: string]: any }): Promise<string | null>;
-  setCustomElements(customElements: Array<{ id: string; name: string; element: any; [key: string]: any }>): void;
-  deleteCustomElement(id: string, options?: { confirm?: boolean }): Promise<void>;
-  setTemplateContextMenu(config: DesignerListContextMenuConfig | DesignerListContextMenuItem[]): void;
-  clearTemplateContextMenu(): void;
-  setCustomElementContextMenu(config: DesignerListContextMenuConfig | DesignerListContextMenuItem[]): void;
-  clearCustomElementContextMenu(): void;
-  setTemplateTagResolver(resolver: DesignerTemplateTagResolver): void;
-  clearTemplateTagResolver(): void;
-
-  setCrudMode(mode: 'local' | 'remote', options?: { skipAutoLoad?: boolean }): void;
-  setCrudEndpoints(endpoints: CrudEndpoints, options?: { baseUrl?: string; headers?: Record<string, string>; fetcher?: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response> }): void;
-
-  /**
-   * 循环页展开：按 page.loopDataVariable + ctx 数组数据，把 1 个模板页展开成 N 个渲染页。
-   * 不传 ctx 时默认使用当前 store 的 testData/variables（按导出语义解析）。
-   */
-  expandLoopPages(pages: Page[], ctx?: LoopExpandContext): Page[];
-  /** 判断页面数组中是否含循环页（任一 page 带 loopDataVariable） */
-  hasLoopPage(pages: Page[] | undefined | null): boolean;
-  /**
-   * 折叠已展开的循环页，还原为带 loopDataVariable 的单个模板页。
-   * 适用于报告模式保存前还原模板结构。
-   */
-  collapseLoopPages(currentPages: Page[], originalTemplatePages: Page[]): Page[];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'print-designer': PrintDesignerElement;
-  }
-}
-
-// ============================================================
-// 独立命名导出（src/index.ts）
-// 允许宿主 `import { PreviewPage, expandLoopPages, ... } from 'x-print-designer'`
-// 作为普通 Vue 组件 / 纯函数使用，无需挂载完整 Web Component。
-// ============================================================
-
-/** 轻量预览组件：接收 pages + testData + variables，渲染只读预览（含循环页展开 + report 表格分页） */
-export const PreviewPage: DefineComponent<{
-  autoRender?: boolean;
-  pages?: any[];
-  canvasSize?: { width: number; height: number };
-  canvasBackground?: string;
-  testData?: Record<string, any>;
-  variables?: Record<string, any>;
-  watermark?: any;
-  autoRenderTrigger?: number;
-  mode?: 'template' | 'report';
-  headerHeight?: number;
-  footerHeight?: number;
-  showHeaderLine?: boolean;
-  showFooterLine?: boolean;
-  pageSpacingY?: number;
-}>;
-
-// 循环页展开 / 折叠纯函数
-export function expandLoopPages(pages: Page[], ctx: LoopExpandContext): Page[];
-export function collapseLoopPages(currentPages: Page[], originalTemplatePages: Page[]): Page[];
-export function hasLoopPage(pages: Page[] | undefined | null): boolean;
-
-export {};
+export type DesignerMode = 'template' | 'report';
+export type DesignerViewMode = 'edit' | 'preview';
+export type DesignerPage = Record<string, any>;
+export type PrintMode = 'browser' | 'local' | 'remote';
+
+export interface PrintOptions {
+  printer: string;
+  jobName: string;
+  copies: number;
+  intervalMs: number;
+  timeout?: number;
+  pageRange: string;
+  pageSet: '' | 'odd' | 'even';
+  scale: '' | 'noscale' | 'shrink' | 'fit';
+  orientation: '' | 'portrait' | 'landscape';
+  colorMode: '' | 'color' | 'monochrome';
+  sidesMode: '' | 'simplex' | 'duplex' | 'duplexshort' | 'duplexlong';
+  paperSize: string;
+  trayBin: string;
+}
+
+export interface LocalConnectionSettings {
+  wsAddress: string;
+  secretKey: string;
+}
+
+export interface RemoteConnectionSettings {
+  wsAddress: string;
+  apiBaseUrl: string;
+  username: string;
+  password: string;
+}
+
+export interface LocalPrinterInfo {
+  name: string;
+  isDefault?: boolean;
+}
+
+export interface RemotePrinterInfo {
+  printer_name: string;
+  printer_type?: string;
+  paper_spec?: string;
+  is_ready?: boolean;
+  supported_format?: string;
+  capabilities?: Record<string, any>;
+}
+
+export interface RemoteClientInfo {
+  client_id: string;
+  client_name?: string;
+  online?: boolean;
+  last_heartbeat?: string;
+}
+
+export interface LocalPrinterCaps {
+  paperSizes?: string[];
+  printerPaperNames?: string[];
+  duplexSupported?: boolean;
+  colorSupported?: boolean;
+}
+
+export type DesignerExportRequest = {
+  type: 'pdf' | 'html' | 'images' | 'pdfBlob' | 'imageBlob';
+  filename?: string;
+  filenamePrefix?: string;
+  merged?: boolean;
+};
+
+export type DesignerPrintRequest = {
+  mode?: PrintMode;
+  options?: PrintOptions;
+};
+
+export type DesignerPrintDefaults = {
+  printMode?: PrintMode;
+  silentPrint?: boolean;
+  exportImageMerged?: boolean;
+  localSettings?: Partial<LocalConnectionSettings>;
+  remoteSettings?: Partial<RemoteConnectionSettings>;
+  localPrintOptions?: Partial<PrintOptions>;
+  remotePrintOptions?: Partial<PrintOptions>;
+};
+
+export type EndpointConfig = string | {
+  url: string;
+  method?: string;
+  data?: Record<string, any>;
+};
+
+export type CrudEndpoints = {
+  baseUrl?: string;
+  templates?: {
+    list?: EndpointConfig;
+    get?: EndpointConfig;
+    upsert?: EndpointConfig;
+    delete?: EndpointConfig;
+  };
+  customElements?: {
+    list?: EndpointConfig;
+    get?: EndpointConfig;
+    upsert?: EndpointConfig;
+    delete?: EndpointConfig;
+  };
+};
+
+export type DesignerFieldDictionaryItem = {
+  fieldKey?: string;
+  key?: string;
+  fieldType?: string;
+  label?: string;
+  labelCn?: string;
+  labelEn?: string;
+  moduleKey?: string;
+  moduleName?: string;
+  primaryKey?: boolean;
+};
+
+export type DesignerFieldDictionary = Record<string, DesignerFieldDictionaryItem | string | null | undefined>;
+
+export interface DesignerListContextMenuItem {
+  key: string;
+  label: string;
+  [key: string]: any;
+}
+
+export interface DesignerListContextMenuConfig {
+  mode?: 'replace' | 'append';
+  items: DesignerListContextMenuItem[];
+}
+
+export type DesignerTemplateModalFormConfig = Record<string, any>;
+
+export interface LoopExpandContext {
+  testData?: Record<string, any>;
+  variables?: Record<string, any>;
+  mode?: DesignerMode;
+  isExporting?: boolean;
+  showVariableNames?: boolean;
+}
+
+export interface DesignerPreviewModeOptions {
+  pages: DesignerPage[];
+  canvasSize: { width: number; height: number };
+  canvasBackground?: string;
+  testData?: Record<string, any>;
+  variables?: Record<string, any>;
+  watermark?: any;
+  mode?: DesignerMode;
+  headerHeight?: number;
+  footerHeight?: number;
+  showHeaderLine?: boolean;
+  showFooterLine?: boolean;
+  pageSpacingY?: number;
+}
+
+export interface PrintDesignerElement extends HTMLElement {
+  isReady: boolean;
+
+  setClientLink(url: string): void;
+  setCloudLink(url: string): void;
+  hideLinks(hide: boolean): void;
+  hideClientLink(hide: boolean): void;
+  hideCloudLink(hide: boolean): void;
+  setMode(mode: DesignerMode): void;
+  setViewMode(viewMode: DesignerViewMode): void;
+
+  print(request?: DesignerPrintRequest): Promise<void>;
+  getPreviewHtml(): Promise<string>;
+  export(request: DesignerExportRequest): Promise<void | Blob>;
+  setPrintDefaults(payload?: DesignerPrintDefaults): void;
+  fetchLocalPrinters(): Promise<LocalPrinterInfo[]>;
+  fetchLocalPrinterCaps(printer: string): Promise<LocalPrinterCaps | undefined>;
+  fetchRemotePrinters(clientId?: string): Promise<RemotePrinterInfo[]>;
+  fetchRemoteClients(): Promise<RemoteClientInfo[]>;
+
+  setBranding(payload?: { title?: string; logoUrl?: string; showTitle?: boolean; showLogo?: boolean }): void;
+  setBrandVars(vars: Record<string, string>, options?: { persist?: boolean }): void;
+  setTheme(theme: string): void;
+  setDesignerFont(fontFamily: string, options?: { persist?: boolean }): void;
+  setLanguage(lang: 'zh' | 'en'): void;
+  getPrintQuality(): 'fast' | 'normal' | 'high' | 'ultra';
+  setDataLoading(isLoading: boolean): void;
+
+  setOnSave(handler: ((payload: { id: string | null; name: string; data: Record<string, any>; isNew: boolean }) => void | Promise<void>) | null): void;
+  setAutoSave(enabled: boolean, intervalMs?: number): void;
+  setPrintQuality(quality: 'fast' | 'normal' | 'high' | 'ultra'): void;
+
+  setPreviewMode(options: DesignerPreviewModeOptions): void;
+  exitPreviewMode(): void;
+
+  getTestData(): Record<string, any>;
+  setTestData(data: Record<string, any>, options?: { merge?: boolean }): Promise<void>;
+  setSampleData(data: Record<string, any>): void;
+
+  getVariables(): Record<string, any>;
+  setVariables(data: Record<string, any>, options?: { merge?: boolean }): Promise<void>;
+  setTemplateVariables(data: Record<string, any>, options?: { merge?: boolean }): Promise<void>;
+  setFieldDictionary(dictionary?: DesignerFieldDictionary | null): void;
+  setAvailableVariables(variables: any[]): void;
+
+  getTemplateVariables(): Record<string, any>;
+
+  getTemplateData(): any;
+  loadTemplateData(data: any): boolean;
+
+  getTemplates(options?: { includeData?: boolean }): Array<{ id: string; name: string; updatedAt: number } | any>;
+  refreshTemplates(options?: { includeData?: boolean }): Promise<Array<{ id: string; name: string; updatedAt: number } | any>>;
+  getTemplate(id: string): any | null;
+  upsertTemplate(template: { id?: string; name: string; data?: any; updatedAt?: number; [key: string]: any }, options?: { setCurrent?: boolean }): Promise<string | null>;
+  setTemplates(templates: Array<{ id: string; name: string; data?: any; updatedAt?: number; [key: string]: any }>, options?: { currentTemplateId?: string }): Promise<void>;
+  deleteTemplate(id: string, options?: { confirm?: boolean }): Promise<void>;
+  loadTemplate(id: string): Promise<boolean>;
+
+  getCustomElements(options?: { includeElement?: boolean }): Array<{ id: string; name: string } | any>;
+  refreshCustomElements(options?: { includeElement?: boolean }): Promise<Array<{ id: string; name: string } | any>>;
+  getCustomElement(id: string): any | null;
+  upsertCustomElement(customElement: { id?: string; name: string; element: any; [key: string]: any }): Promise<string | null>;
+  setCustomElements(customElements: Array<{ id: string; name: string; element: any; [key: string]: any }>): void;
+  deleteCustomElement(id: string, options?: { confirm?: boolean }): Promise<void>;
+
+  setTemplateContextMenu(config: DesignerListContextMenuConfig | DesignerListContextMenuItem[]): void;
+  clearTemplateContextMenu(): void;
+  setCustomElementContextMenu(config: DesignerListContextMenuConfig | DesignerListContextMenuItem[]): void;
+  clearCustomElementContextMenu(): void;
+  setTemplateModalForm(config: DesignerTemplateModalFormConfig): void;
+  clearTemplateModalForm(): void;
+  setCustomElementModalForm(config: DesignerTemplateModalFormConfig): void;
+  clearCustomElementModalForm(): void;
+
+  setCrudMode(mode: 'local' | 'remote', options?: { skipAutoLoad?: boolean }): void;
+  setCrudEndpoints(endpoints: CrudEndpoints, options?: { baseUrl?: string; headers?: Record<string, string>; fetcher?: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response> }): void;
+
+  expandLoopPages(pages: DesignerPage[], ctx?: LoopExpandContext): DesignerPage[];
+  hasLoopPage(pages: DesignerPage[] | undefined | null): boolean;
+  collapseLoopPages(currentPages: DesignerPage[], originalTemplatePages: DesignerPage[]): DesignerPage[];
+}
+
+export const PrintDesignerElement: {
+  prototype: PrintDesignerElement;
+  new (): PrintDesignerElement;
+};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'print-designer': PrintDesignerElement;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "x-print-designer",
   "private": false,
-  "version": "0.4.8",
+  "version": "0.4.13",
   "license": "AGPL-3.0-only",
   "type": "module",
   "main": "dist/print-designer.umd.js",
@@ -14,6 +14,11 @@
       "import": "./dist/print-designer.es.js",
       "require": "./dist/print-designer.umd.js"
     },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.es.js"
+    },
+    "./vue.css": "./dist/vue.css",
     "./style.css": "./dist/print-designer.css"
   },
   "files": [
@@ -29,7 +34,7 @@
     "dev": "vite",
     "dev:lib": "node ./scripts/generate-tailwind-css.mjs && vite build --config vite.config.wc.dev.ts --watch",
     "build": "node ./scripts/bump-version.mjs && node ./scripts/typecheck.mjs && vite build",
-    "build:wc": "node ./scripts/bump-version.mjs && node ./scripts/typecheck.mjs && node ./scripts/generate-tailwind-css.mjs && vite build --config vite.config.wc.ts && node ./scripts/copy-wc-types.mjs",
+    "build:wc": "node ./scripts/bump-version.mjs && node ./scripts/typecheck.mjs && node ./scripts/generate-tailwind-css.mjs && vite build --config vite.config.wc.ts && vite build --config vite.config.vue.ts && node ./scripts/copy-wc-types.mjs",
     "link": "npm link",
     "build:watch": "vite build --watch",
     "unlink": "npm unlink -g",
@@ -44,11 +49,13 @@
     "jspdf": "4.2",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "pinia": "^2.3.0",
     "qrcode": "^1.5.4",
-    "uuid": "^11.0.3",
-    "vue": "^3.5.13",
-    "vue-i18n": "^11.2.8"
+    "uuid": "^11.0.3"
+  },
+  "peerDependencies": {
+    "pinia": ">=2.3.0",
+    "vue": ">=3.5.0",
+    "vue-i18n": ">=11.2.0"
   },
   "devDependencies": {
     "@iconify-json/material-symbols": "^1.2.53",
@@ -61,6 +68,7 @@
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
+    "pinia": "2.3.0",
     "rollup-plugin-visualizer": "^7.0.1",
     "sharp": "^0.34.5",
     "tailwindcss": "^3.4.17",
@@ -68,6 +76,8 @@
     "typescript": "~5.6.2",
     "unplugin-icons": "^23.0.1",
     "vite": "^6.0.1",
+    "vue": "3.5.13",
+    "vue-i18n": "11.2.8",
     "vue-tsc": "^2.1.10"
   }
 }