@simplysm/solid 13.0.39 → 13.0.41
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/README.md +28 -7
- package/dist/components/feedback/print/PrintContext.d.ts +12 -0
- package/dist/components/feedback/print/PrintContext.d.ts.map +1 -0
- package/dist/components/feedback/print/PrintContext.js +12 -0
- package/dist/components/feedback/print/PrintContext.js.map +6 -0
- package/dist/components/feedback/print/PrintProvider.d.ts +12 -0
- package/dist/components/feedback/print/PrintProvider.d.ts.map +1 -0
- package/dist/components/feedback/print/PrintProvider.js +249 -0
- package/dist/components/feedback/print/PrintProvider.js.map +6 -0
- package/dist/components/form-control/Button.js +5 -1
- package/dist/components/form-control/Button.js.map +1 -1
- package/dist/hooks/usePrint.d.ts +2 -10
- package/dist/hooks/usePrint.d.ts.map +1 -1
- package/dist/hooks/usePrint.js +1 -206
- package/dist/hooks/usePrint.js.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/providers/SystemProvider.d.ts +8 -0
- package/dist/providers/SystemProvider.d.ts.map +1 -0
- package/dist/providers/{InitializeProvider.js → SystemProvider.js} +4 -9
- package/dist/providers/SystemProvider.js.map +6 -0
- package/docs/disclosure.md +1 -1
- package/docs/feedback.md +10 -1
- package/docs/hooks.md +1 -1
- package/docs/providers.md +78 -9
- package/package.json +3 -3
- package/src/components/feedback/print/PrintContext.ts +20 -0
- package/src/components/feedback/print/PrintProvider.tsx +280 -0
- package/src/components/form-control/Button.tsx +1 -1
- package/src/hooks/usePrint.ts +2 -282
- package/src/index.ts +5 -3
- package/src/providers/{InitializeProvider.tsx → SystemProvider.tsx} +2 -30
- package/tailwind.config.ts +2 -3
- package/dist/providers/InitializeProvider.d.ts +0 -33
- package/dist/providers/InitializeProvider.d.ts.map +0 -1
- package/dist/providers/InitializeProvider.js.map +0 -6
package/README.md
CHANGED
|
@@ -37,19 +37,38 @@ export default {
|
|
|
37
37
|
|
|
38
38
|
### Provider Setup
|
|
39
39
|
|
|
40
|
-
Use `
|
|
40
|
+
Use `SystemProvider` to wrap your app. It provides all infrastructure providers (config, theme, logger, notification, service client, etc.).
|
|
41
|
+
|
|
42
|
+
For programmatic dialogs and printing, add `DialogProvider` and/or `PrintProvider` separately. Place them **below your own Providers** if your dialog/print content needs access to them.
|
|
41
43
|
|
|
42
44
|
```tsx
|
|
43
|
-
import {
|
|
44
|
-
import { onMount } from "solid-js";
|
|
45
|
+
import { SystemProvider, DialogProvider, PrintProvider } from "@simplysm/solid";
|
|
45
46
|
|
|
46
47
|
function App() {
|
|
47
48
|
return (
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
<SystemProvider clientName="my-app">
|
|
50
|
+
{/* Your Providers can go here */}
|
|
51
|
+
<DialogProvider>
|
|
52
|
+
<PrintProvider>
|
|
53
|
+
<AppRoot />
|
|
54
|
+
</PrintProvider>
|
|
55
|
+
</DialogProvider>
|
|
56
|
+
</SystemProvider>
|
|
51
57
|
);
|
|
52
58
|
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
> **Why separate?** `DialogProvider` and `PrintProvider` render user-provided components (via `dialog.show(factory)` / `print.toPrinter(factory)`). By placing them below your Providers, the factory content can access your contexts (e.g., auth, data stores). `SystemProvider` provides infrastructure that doesn't render user components.
|
|
62
|
+
|
|
63
|
+
| Provider | Required | Must be inside | Description |
|
|
64
|
+
|----------|----------|----------------|-------------|
|
|
65
|
+
| `SystemProvider` | Yes | (root) | Infrastructure: config, theme, logger, notification, busy, service client, shared data |
|
|
66
|
+
| `DialogProvider` | If using `useDialog()` | `SystemProvider` | Programmatic dialog management |
|
|
67
|
+
| `PrintProvider` | If using `usePrint()` | `SystemProvider` | Printing and PDF generation |
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { SystemProvider, DialogProvider, PrintProvider, useServiceClient, useSyncStorage, useLogger, useSharedData } from "@simplysm/solid";
|
|
71
|
+
import { onMount } from "solid-js";
|
|
53
72
|
|
|
54
73
|
function AppRoot() {
|
|
55
74
|
const serviceClient = useServiceClient();
|
|
@@ -180,7 +199,9 @@ import "@simplysm/solid/tailwind.css";
|
|
|
180
199
|
|
|
181
200
|
## Providers
|
|
182
201
|
|
|
183
|
-
- [`
|
|
202
|
+
- [`SystemProvider`](docs/providers.md#systemprovider) - Infrastructure provider (config, theme, logger, notification, busy, service client, shared data)
|
|
203
|
+
- [`DialogProvider`](docs/providers.md#dialogprovider) - Programmatic dialog provider (`useDialog`)
|
|
204
|
+
- [`PrintProvider`](docs/providers.md#printprovider) - Printing and PDF generation provider (`usePrint`)
|
|
184
205
|
|
|
185
206
|
## Styling
|
|
186
207
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { JSX } from "solid-js";
|
|
2
|
+
export interface PrintOptions {
|
|
3
|
+
size?: string;
|
|
4
|
+
margin?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface PrintContextValue {
|
|
7
|
+
toPrinter: (factory: () => JSX.Element, options?: PrintOptions) => Promise<void>;
|
|
8
|
+
toPdf: (factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>;
|
|
9
|
+
}
|
|
10
|
+
export declare const PrintContext: import("solid-js").Context<PrintContextValue | undefined>;
|
|
11
|
+
export declare function usePrint(): PrintContextValue;
|
|
12
|
+
//# sourceMappingURL=PrintContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrintContext.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\feedback\\print\\PrintContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjF,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;CACpF;AAED,eAAO,MAAM,YAAY,2DAAqC,CAAC;AAE/D,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createContext, useContext } from "solid-js";
|
|
2
|
+
const PrintContext = createContext();
|
|
3
|
+
function usePrint() {
|
|
4
|
+
const ctx = useContext(PrintContext);
|
|
5
|
+
if (!ctx) throw new Error("usePrint must be used inside <PrintProvider>");
|
|
6
|
+
return ctx;
|
|
7
|
+
}
|
|
8
|
+
export {
|
|
9
|
+
PrintContext,
|
|
10
|
+
usePrint
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=PrintContext.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/feedback/print/PrintContext.ts"],
|
|
4
|
+
"mappings": "AAAA,SAAS,eAAe,kBAAkB;AAanC,MAAM,eAAe,cAAiC;AAEtD,SAAS,WAA8B;AAC5C,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,8CAA8C;AACxE,SAAO;AACT;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ParentComponent } from "solid-js";
|
|
2
|
+
/**
|
|
3
|
+
* Print Provider
|
|
4
|
+
*
|
|
5
|
+
* @remarks
|
|
6
|
+
* - Factory content is rendered within the Provider's own reactive tree,
|
|
7
|
+
* so it can access all contexts above PrintProvider
|
|
8
|
+
* - Uses Portal + hidden div for off-screen rendering
|
|
9
|
+
* - BusyProvider must be an ancestor (useBusy dependency)
|
|
10
|
+
*/
|
|
11
|
+
export declare const PrintProvider: ParentComponent;
|
|
12
|
+
//# sourceMappingURL=PrintProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrintProvider.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\feedback\\print\\PrintProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAgC,MAAM,UAAU,CAAC;AAwE9E;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,eAsM3B,CAAC"}
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import { template as _$template } from "solid-js/web";
|
|
2
|
+
import { insert as _$insert } from "solid-js/web";
|
|
3
|
+
import { use as _$use } from "solid-js/web";
|
|
4
|
+
import { createComponent as _$createComponent } from "solid-js/web";
|
|
5
|
+
import { memo as _$memo } from "solid-js/web";
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ _$template(`<div style=position:fixed;left:-9999px;top:0>`);
|
|
7
|
+
import { createSignal, Show } from "solid-js";
|
|
8
|
+
import { Portal } from "solid-js/web";
|
|
9
|
+
import { jsPDF } from "jspdf";
|
|
10
|
+
import * as htmlToImage from "html-to-image";
|
|
11
|
+
import { useBusy } from "../busy/BusyContext.js";
|
|
12
|
+
import { PrintContext } from "./PrintContext.js";
|
|
13
|
+
import { PrintInstanceContext } from "./PrintInstanceContext.js";
|
|
14
|
+
const PAPER_SIZES = {
|
|
15
|
+
a3: [841.89, 1190.55],
|
|
16
|
+
a4: [595.28, 841.89],
|
|
17
|
+
a5: [419.53, 595.28],
|
|
18
|
+
letter: [612, 792],
|
|
19
|
+
legal: [612, 1008]
|
|
20
|
+
};
|
|
21
|
+
function parseDimension(dim) {
|
|
22
|
+
const num = parseFloat(dim);
|
|
23
|
+
if (dim.endsWith("mm")) return num * 2.83465;
|
|
24
|
+
if (dim.endsWith("cm")) return num * 28.3465;
|
|
25
|
+
if (dim.endsWith("in")) return num * 72;
|
|
26
|
+
return num;
|
|
27
|
+
}
|
|
28
|
+
function parseSize(size) {
|
|
29
|
+
const s = (size ?? "A4").toLowerCase().trim();
|
|
30
|
+
const landscape = s.includes("landscape");
|
|
31
|
+
const cleanSize = s.replace(/\s*(landscape|portrait)\s*/g, "").trim();
|
|
32
|
+
const paperSize = PAPER_SIZES[cleanSize];
|
|
33
|
+
if (paperSize) {
|
|
34
|
+
const [w, h] = paperSize;
|
|
35
|
+
if (landscape) return {
|
|
36
|
+
width: h,
|
|
37
|
+
height: w,
|
|
38
|
+
orientation: "l"
|
|
39
|
+
};
|
|
40
|
+
return {
|
|
41
|
+
width: w,
|
|
42
|
+
height: h,
|
|
43
|
+
orientation: "p"
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
const parts = cleanSize.split(/\s+/);
|
|
47
|
+
if (parts.length === 2) {
|
|
48
|
+
const w = parseDimension(parts[0]);
|
|
49
|
+
const h = parseDimension(parts[1]);
|
|
50
|
+
return {
|
|
51
|
+
width: w,
|
|
52
|
+
height: h,
|
|
53
|
+
orientation: w > h ? "l" : "p"
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
width: 595.28,
|
|
58
|
+
height: 841.89,
|
|
59
|
+
orientation: "p"
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
function waitForImages(container) {
|
|
63
|
+
const imgs = Array.from(container.querySelectorAll("img"));
|
|
64
|
+
return Promise.all(imgs.map((img) => img.complete ? Promise.resolve() : new Promise((resolve) => {
|
|
65
|
+
img.addEventListener("load", () => resolve(), {
|
|
66
|
+
once: true
|
|
67
|
+
});
|
|
68
|
+
img.addEventListener("error", () => resolve(), {
|
|
69
|
+
once: true
|
|
70
|
+
});
|
|
71
|
+
}))).then(() => void 0);
|
|
72
|
+
}
|
|
73
|
+
const PrintProvider = (props) => {
|
|
74
|
+
const busy = useBusy();
|
|
75
|
+
const [currentJob, setCurrentJob] = createSignal(null);
|
|
76
|
+
function renderAndWait(factory) {
|
|
77
|
+
return new Promise((resolve) => {
|
|
78
|
+
let resolveReady;
|
|
79
|
+
const state = {
|
|
80
|
+
readyCalled: false
|
|
81
|
+
};
|
|
82
|
+
const readyPromise = new Promise((readyResolve) => {
|
|
83
|
+
resolveReady = readyResolve;
|
|
84
|
+
});
|
|
85
|
+
const instance = {
|
|
86
|
+
ready: () => {
|
|
87
|
+
state.readyCalled = true;
|
|
88
|
+
resolveReady == null ? void 0 : resolveReady();
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
const onRendered = (container) => {
|
|
92
|
+
const finalize = async () => {
|
|
93
|
+
await Promise.resolve();
|
|
94
|
+
if (!state.readyCalled) {
|
|
95
|
+
await new Promise((rAFResolve) => {
|
|
96
|
+
requestAnimationFrame(() => rAFResolve());
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
if (state.readyCalled) {
|
|
100
|
+
await readyPromise;
|
|
101
|
+
}
|
|
102
|
+
await waitForImages(container);
|
|
103
|
+
resolve(container);
|
|
104
|
+
};
|
|
105
|
+
void finalize();
|
|
106
|
+
};
|
|
107
|
+
setCurrentJob({
|
|
108
|
+
factory,
|
|
109
|
+
instance,
|
|
110
|
+
onRendered
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
const toPrinter = async (factory, options) => {
|
|
115
|
+
busy.show();
|
|
116
|
+
let styleEl;
|
|
117
|
+
try {
|
|
118
|
+
const container = await renderAndWait(factory);
|
|
119
|
+
container.style.position = "static";
|
|
120
|
+
container.style.left = "auto";
|
|
121
|
+
container.classList.add("_sd-print-target");
|
|
122
|
+
styleEl = document.createElement("style");
|
|
123
|
+
styleEl.textContent = `
|
|
124
|
+
@page {
|
|
125
|
+
size: ${(options == null ? void 0 : options.size) ?? "A4"};
|
|
126
|
+
margin: ${(options == null ? void 0 : options.margin) ?? "0"};
|
|
127
|
+
}
|
|
128
|
+
body > ._sd-print-target { display: none; }
|
|
129
|
+
@media print {
|
|
130
|
+
html, body { -webkit-print-color-adjust: exact; background: white; }
|
|
131
|
+
body > * { display: none !important; }
|
|
132
|
+
body > ._sd-print-target { display: block !important; }
|
|
133
|
+
}
|
|
134
|
+
`;
|
|
135
|
+
document.head.appendChild(styleEl);
|
|
136
|
+
await new Promise((resolve) => {
|
|
137
|
+
requestAnimationFrame(() => {
|
|
138
|
+
window.print();
|
|
139
|
+
resolve();
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
} finally {
|
|
143
|
+
styleEl == null ? void 0 : styleEl.remove();
|
|
144
|
+
setCurrentJob(null);
|
|
145
|
+
busy.hide();
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
const toPdf = async (factory, options) => {
|
|
149
|
+
busy.show();
|
|
150
|
+
try {
|
|
151
|
+
const container = await renderAndWait(factory);
|
|
152
|
+
const {
|
|
153
|
+
width: pageWidth,
|
|
154
|
+
height: pageHeight,
|
|
155
|
+
orientation
|
|
156
|
+
} = parseSize(options == null ? void 0 : options.size);
|
|
157
|
+
const doc = new jsPDF(orientation, "pt", [pageWidth, pageHeight]);
|
|
158
|
+
doc.deletePage(1);
|
|
159
|
+
const pages = Array.from(container.querySelectorAll("[data-print-page]"));
|
|
160
|
+
if (pages.length > 0) {
|
|
161
|
+
for (const pageEl of pages) {
|
|
162
|
+
pageEl.style.width = pageWidth + "pt";
|
|
163
|
+
const canvas = await htmlToImage.toCanvas(pageEl, {
|
|
164
|
+
backgroundColor: "white",
|
|
165
|
+
pixelRatio: 4
|
|
166
|
+
});
|
|
167
|
+
const imgWidth = pageWidth;
|
|
168
|
+
const imgHeight = canvas.height * (pageWidth / canvas.width);
|
|
169
|
+
doc.addPage([pageWidth, pageHeight], orientation);
|
|
170
|
+
doc.addImage({
|
|
171
|
+
imageData: canvas,
|
|
172
|
+
x: 0,
|
|
173
|
+
y: 0,
|
|
174
|
+
width: imgWidth,
|
|
175
|
+
height: imgHeight
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
} else {
|
|
179
|
+
const target = container.firstElementChild ?? container;
|
|
180
|
+
target.style.width = pageWidth + "pt";
|
|
181
|
+
const canvas = await htmlToImage.toCanvas(target, {
|
|
182
|
+
backgroundColor: "white",
|
|
183
|
+
pixelRatio: 4
|
|
184
|
+
});
|
|
185
|
+
const scaleFactor = pageWidth / canvas.width;
|
|
186
|
+
const pageHeightPx = pageHeight / scaleFactor;
|
|
187
|
+
const totalPages = Math.ceil(canvas.height / pageHeightPx);
|
|
188
|
+
for (let i = 0; i < totalPages; i++) {
|
|
189
|
+
const sliceCanvas = document.createElement("canvas");
|
|
190
|
+
sliceCanvas.width = canvas.width;
|
|
191
|
+
sliceCanvas.height = Math.min(pageHeightPx, canvas.height - i * pageHeightPx);
|
|
192
|
+
const ctx = sliceCanvas.getContext("2d");
|
|
193
|
+
ctx.drawImage(canvas, 0, i * pageHeightPx, canvas.width, sliceCanvas.height, 0, 0, canvas.width, sliceCanvas.height);
|
|
194
|
+
const imgHeight = sliceCanvas.height * scaleFactor;
|
|
195
|
+
doc.addPage([pageWidth, pageHeight], orientation);
|
|
196
|
+
doc.addImage({
|
|
197
|
+
imageData: sliceCanvas,
|
|
198
|
+
x: 0,
|
|
199
|
+
y: 0,
|
|
200
|
+
width: pageWidth,
|
|
201
|
+
height: imgHeight
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
const arrayBuffer = doc.output("arraybuffer");
|
|
206
|
+
return new Uint8Array(arrayBuffer);
|
|
207
|
+
} finally {
|
|
208
|
+
setCurrentJob(null);
|
|
209
|
+
busy.hide();
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
const contextValue = {
|
|
213
|
+
toPrinter,
|
|
214
|
+
toPdf
|
|
215
|
+
};
|
|
216
|
+
return _$createComponent(PrintContext.Provider, {
|
|
217
|
+
value: contextValue,
|
|
218
|
+
get children() {
|
|
219
|
+
return [_$memo(() => props.children), _$createComponent(Portal, {
|
|
220
|
+
get children() {
|
|
221
|
+
return _$createComponent(Show, {
|
|
222
|
+
get when() {
|
|
223
|
+
return currentJob();
|
|
224
|
+
},
|
|
225
|
+
children: (job) => (() => {
|
|
226
|
+
var _el$ = _tmpl$();
|
|
227
|
+
_$use((el) => {
|
|
228
|
+
job().onRendered(el);
|
|
229
|
+
}, _el$);
|
|
230
|
+
_$insert(_el$, _$createComponent(PrintInstanceContext.Provider, {
|
|
231
|
+
get value() {
|
|
232
|
+
return job().instance;
|
|
233
|
+
},
|
|
234
|
+
get children() {
|
|
235
|
+
return job().factory();
|
|
236
|
+
}
|
|
237
|
+
}));
|
|
238
|
+
return _el$;
|
|
239
|
+
})()
|
|
240
|
+
});
|
|
241
|
+
}
|
|
242
|
+
})];
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
};
|
|
246
|
+
export {
|
|
247
|
+
PrintProvider
|
|
248
|
+
};
|
|
249
|
+
//# sourceMappingURL=PrintProvider.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/feedback/print/PrintProvider.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["createSignal", "Show", "Portal", "jsPDF", "htmlToImage", "useBusy", "PrintContext", "PrintInstanceContext", "PAPER_SIZES", "a3", "a4", "a5", "letter", "legal", "parseDimension", "dim", "num", "parseFloat", "endsWith", "parseSize", "size", "s", "toLowerCase", "trim", "landscape", "includes", "cleanSize", "replace", "paperSize", "w", "h", "width", "height", "orientation", "parts", "split", "length", "waitForImages", "container", "imgs", "Array", "from", "querySelectorAll", "Promise", "all", "map", "img", "complete", "resolve", "addEventListener", "once", "then", "undefined", "PrintProvider", "props", "busy", "currentJob", "setCurrentJob", "renderAndWait", "factory", "resolveReady", "state", "readyCalled", "readyPromise", "readyResolve", "instance", "ready", "onRendered", "finalize", "rAFResolve", "requestAnimationFrame", "toPrinter", "options", "show", "styleEl", "style", "position", "left", "classList", "add", "document", "createElement", "textContent", "margin", "head", "appendChild", "window", "print", "remove", "hide", "toPdf", "pageWidth", "pageHeight", "doc", "deletePage", "pages", "pageEl", "canvas", "toCanvas", "backgroundColor", "pixelRatio", "imgWidth", "imgHeight", "addPage", "addImage", "imageData", "x", "y", "target", "firstElementChild", "scaleFactor", "pageHeightPx", "totalPages", "Math", "ceil", "i", "sliceCanvas", "min", "ctx", "getContext", "drawImage", "arrayBuffer", "output", "Uint8Array", "contextValue", "_$createComponent", "Provider", "value", "children", "_$memo", "when", "job", "_el$", "_tmpl$", "_$use", "el", "_$insert"]
|
|
6
|
+
}
|
|
@@ -13,7 +13,11 @@ import { themeTokens, disabledOpacity } from "../../styles/tokens.styles.js";
|
|
|
13
13
|
void ripple;
|
|
14
14
|
const baseClass = clsx("inline-flex items-center", "px-2 py-1", "font-bold", "justify-center", "text-center", "cursor-pointer", "transition", "rounded", "focus:outline-none", "focus-visible:ring-2", "border border-transparent", "min-w-8");
|
|
15
15
|
const themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, {
|
|
16
|
-
solid: clsx(
|
|
16
|
+
solid: clsx(
|
|
17
|
+
t.solid,
|
|
18
|
+
t.solidHover
|
|
19
|
+
/*, "shadow-md hover:shadow-lg"*/
|
|
20
|
+
),
|
|
17
21
|
outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
|
|
18
22
|
ghost: clsx("bg-transparent", t.hoverBg, t.text)
|
|
19
23
|
}]));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/form-control/Button.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;AAAA,SAAyCA,kBAAkB;AAC3D,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,cAAc;AACvB,SACEC,aAGAC,uBACK;AAGP,KAAKF;AAML,MAAMG,YAAYL,KAChB,4BACA,aACA,aACA,kBACA,eACA,kBACA,cACA,WACA,sBACA,wBACA,6BACA,SACF;AAEA,MAAMM,eAAeC,OAAOC,YAC1BD,OAAOE,QAAQN,WAAW,EAAEO,IAAI,CAAC,CAACC,OAAOC,CAAC,MAAM,CAC9CD,OACA;EACEE,OAAOb,
|
|
4
|
+
"mappings": ";;;;;;;AAAA,SAAyCA,kBAAkB;AAC3D,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,cAAc;AACvB,SACEC,aAGAC,uBACK;AAGP,KAAKF;AAML,MAAMG,YAAYL,KAChB,4BACA,aACA,aACA,kBACA,eACA,kBACA,cACA,WACA,sBACA,wBACA,6BACA,SACF;AAEA,MAAMM,eAAeC,OAAOC,YAC1BD,OAAOE,QAAQN,WAAW,EAAEO,IAAI,CAAC,CAACC,OAAOC,CAAC,MAAM,CAC9CD,OACA;EACEE,OAAOb;IAAKY,EAAEC;IAAOD,EAAEE;;EAA4C;EACnEC,SAASf,KAAK,kBAAkBY,EAAEI,SAASJ,EAAEK,MAAML,EAAEM,MAAM;EAC3DC,OAAOnB,KAAK,kBAAkBY,EAAEI,SAASJ,EAAEK,IAAI;AACjD,CAAC,CACF,CACH;AAEA,MAAMG,cAA0C;EAC9CC,IAAIrB,KAAK,mBAAmB;EAC5BsB,IAAItB,KAAK,qBAAqB;EAC9BuB,IAAIvB,KAAK,4BAA4B;AACvC;AASO,MAAMwB,SAAwCC,WAAU;AAC7D,QAAM,CAACC,OAAOC,IAAI,IAAI5B,WAAW0B,OAAO,CACtC,YACA,SACA,QACA,SACA,WACA,QACA,SACA,UAAU,CACX;AAED,QAAMG,eAAeA,MAAM;AACzB,UAAMjB,QAAQe,MAAMf,SAAS;AAC7B,UAAMkB,UAAUH,MAAMG,WAAW;AAEjC,WAAO5B,QACLI,WACAC,aAAaK,KAAK,EAAEkB,OAAO,GAC3BH,MAAMI,QAAQV,YAAYM,MAAMI,IAAI,GACpCJ,MAAMK,SAAS,4BACfL,MAAMM,YAAY5B,iBAClBsB,MAAMO,KACR;EACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAAC,UAIQlC,QAAMgC,MAAA,MAAE,CAACR,MAAMM,QAAQ;AAAAK,aAAAH,MAAAI,aAFvBX,MAAI;MAAA,eAAA;MAAA,IAGRY,OAAI;AAAA,eAAEb,MAAMa,QAAQ;MAAQ;MAAA,KAAA,OAAA,IAAA;AAAA,eACrBX,aAAa;MAAC;MAAA,IACrBI,WAAQ;AAAA,eAAEN,MAAMM;MAAQ;IAAA,CAAA,GAAA,OAAA,IAAA;AAAAQ,aAAAN,MAAA,MAEvBR,MAAMe,QAAQ;AAAA,WAAAP;EAAA,GAAA;AAGrB;",
|
|
5
5
|
"names": ["splitProps", "clsx", "twMerge", "ripple", "themeTokens", "disabledOpacity", "baseClass", "themeClasses", "Object", "fromEntries", "entries", "map", "theme", "t", "solid", "solidHover", "outline", "hoverBg", "text", "border", "ghost", "sizeClasses", "sm", "lg", "xl", "Button", "props", "local", "rest", "getClassName", "variant", "size", "inset", "disabled", "class", "_el$", "_tmpl$", "_$use", "_$spread", "_$mergeProps", "type", "_$insert", "children"]
|
|
6
6
|
}
|
package/dist/hooks/usePrint.d.ts
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
size?: string;
|
|
4
|
-
margin?: string;
|
|
5
|
-
}
|
|
6
|
-
export interface UsePrintReturn {
|
|
7
|
-
toPrinter: (factory: () => JSX.Element, options?: PrintOptions) => Promise<void>;
|
|
8
|
-
toPdf: (factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>;
|
|
9
|
-
}
|
|
10
|
-
export declare function usePrint(): UsePrintReturn;
|
|
1
|
+
export { usePrint } from "../components/feedback/print/PrintContext";
|
|
2
|
+
export type { PrintOptions, PrintContextValue } from "../components/feedback/print/PrintContext";
|
|
11
3
|
//# sourceMappingURL=usePrint.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePrint.d.ts","sourceRoot":"","sources":["..\\..\\src\\hooks\\usePrint.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"usePrint.d.ts","sourceRoot":"","sources":["..\\..\\src\\hooks\\usePrint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AACrE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC"}
|
package/dist/hooks/usePrint.js
CHANGED
|
@@ -1,209 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsPDF } from "jspdf";
|
|
3
|
-
import * as htmlToImage from "html-to-image";
|
|
4
|
-
import { useBusy } from "../components/feedback/busy/BusyContext.js";
|
|
5
|
-
import {
|
|
6
|
-
PrintInstanceContext
|
|
7
|
-
} from "../components/feedback/print/PrintInstanceContext.js";
|
|
8
|
-
const PAPER_SIZES = {
|
|
9
|
-
a3: [841.89, 1190.55],
|
|
10
|
-
a4: [595.28, 841.89],
|
|
11
|
-
a5: [419.53, 595.28],
|
|
12
|
-
letter: [612, 792],
|
|
13
|
-
legal: [612, 1008]
|
|
14
|
-
};
|
|
15
|
-
function parseDimension(dim) {
|
|
16
|
-
const num = parseFloat(dim);
|
|
17
|
-
if (dim.endsWith("mm")) return num * 2.83465;
|
|
18
|
-
if (dim.endsWith("cm")) return num * 28.3465;
|
|
19
|
-
if (dim.endsWith("in")) return num * 72;
|
|
20
|
-
return num;
|
|
21
|
-
}
|
|
22
|
-
function parseSize(size) {
|
|
23
|
-
const s = (size ?? "A4").toLowerCase().trim();
|
|
24
|
-
const landscape = s.includes("landscape");
|
|
25
|
-
const cleanSize = s.replace(/\s*(landscape|portrait)\s*/g, "").trim();
|
|
26
|
-
const paperSize = PAPER_SIZES[cleanSize];
|
|
27
|
-
if (paperSize) {
|
|
28
|
-
const [w, h] = paperSize;
|
|
29
|
-
if (landscape) return { width: h, height: w, orientation: "l" };
|
|
30
|
-
return { width: w, height: h, orientation: "p" };
|
|
31
|
-
}
|
|
32
|
-
const parts = cleanSize.split(/\s+/);
|
|
33
|
-
if (parts.length === 2) {
|
|
34
|
-
const w = parseDimension(parts[0]);
|
|
35
|
-
const h = parseDimension(parts[1]);
|
|
36
|
-
return { width: w, height: h, orientation: w > h ? "l" : "p" };
|
|
37
|
-
}
|
|
38
|
-
return { width: 595.28, height: 841.89, orientation: "p" };
|
|
39
|
-
}
|
|
40
|
-
function waitForImages(container) {
|
|
41
|
-
const imgs = Array.from(container.querySelectorAll("img"));
|
|
42
|
-
return Promise.all(
|
|
43
|
-
imgs.map(
|
|
44
|
-
(img) => img.complete ? Promise.resolve() : new Promise((resolve) => {
|
|
45
|
-
img.addEventListener("load", () => resolve(), { once: true });
|
|
46
|
-
img.addEventListener("error", () => resolve(), { once: true });
|
|
47
|
-
})
|
|
48
|
-
)
|
|
49
|
-
).then(() => void 0);
|
|
50
|
-
}
|
|
51
|
-
async function renderAndWait(factory) {
|
|
52
|
-
const container = document.createElement("div");
|
|
53
|
-
container.style.position = "fixed";
|
|
54
|
-
container.style.left = "-9999px";
|
|
55
|
-
container.style.top = "0";
|
|
56
|
-
document.body.appendChild(container);
|
|
57
|
-
let resolveReady;
|
|
58
|
-
const state = { readyCalled: false };
|
|
59
|
-
const readyPromise = new Promise((resolve) => {
|
|
60
|
-
resolveReady = resolve;
|
|
61
|
-
});
|
|
62
|
-
const instance = {
|
|
63
|
-
ready: () => {
|
|
64
|
-
state.readyCalled = true;
|
|
65
|
-
resolveReady == null ? void 0 : resolveReady();
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
const dispose = render(
|
|
69
|
-
() => PrintInstanceContext.Provider({
|
|
70
|
-
value: instance,
|
|
71
|
-
get children() {
|
|
72
|
-
return factory();
|
|
73
|
-
}
|
|
74
|
-
}),
|
|
75
|
-
container
|
|
76
|
-
);
|
|
77
|
-
await Promise.resolve();
|
|
78
|
-
if (!state.readyCalled) {
|
|
79
|
-
await new Promise((resolve) => {
|
|
80
|
-
requestAnimationFrame(() => resolve());
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
if (state.readyCalled) {
|
|
84
|
-
await readyPromise;
|
|
85
|
-
}
|
|
86
|
-
await waitForImages(container);
|
|
87
|
-
return { container, dispose };
|
|
88
|
-
}
|
|
89
|
-
function usePrint() {
|
|
90
|
-
const busy = useBusy();
|
|
91
|
-
const toPrinter = async (factory, options) => {
|
|
92
|
-
busy.show();
|
|
93
|
-
let container;
|
|
94
|
-
let dispose;
|
|
95
|
-
let styleEl;
|
|
96
|
-
try {
|
|
97
|
-
const result = await renderAndWait(factory);
|
|
98
|
-
container = result.container;
|
|
99
|
-
dispose = result.dispose;
|
|
100
|
-
container.style.position = "static";
|
|
101
|
-
container.style.left = "auto";
|
|
102
|
-
container.classList.add("_sd-print-target");
|
|
103
|
-
styleEl = document.createElement("style");
|
|
104
|
-
styleEl.textContent = `
|
|
105
|
-
@page {
|
|
106
|
-
size: ${(options == null ? void 0 : options.size) ?? "A4"};
|
|
107
|
-
margin: ${(options == null ? void 0 : options.margin) ?? "0"};
|
|
108
|
-
}
|
|
109
|
-
body > ._sd-print-target { display: none; }
|
|
110
|
-
@media print {
|
|
111
|
-
html, body { -webkit-print-color-adjust: exact; background: white; }
|
|
112
|
-
body > * { display: none !important; }
|
|
113
|
-
body > ._sd-print-target { display: block !important; }
|
|
114
|
-
}
|
|
115
|
-
`;
|
|
116
|
-
document.head.appendChild(styleEl);
|
|
117
|
-
await new Promise((resolve) => {
|
|
118
|
-
requestAnimationFrame(() => {
|
|
119
|
-
window.print();
|
|
120
|
-
resolve();
|
|
121
|
-
});
|
|
122
|
-
});
|
|
123
|
-
} finally {
|
|
124
|
-
styleEl == null ? void 0 : styleEl.remove();
|
|
125
|
-
dispose == null ? void 0 : dispose();
|
|
126
|
-
container == null ? void 0 : container.remove();
|
|
127
|
-
busy.hide();
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
const toPdf = async (factory, options) => {
|
|
131
|
-
busy.show();
|
|
132
|
-
let container;
|
|
133
|
-
let dispose;
|
|
134
|
-
try {
|
|
135
|
-
const result = await renderAndWait(factory);
|
|
136
|
-
container = result.container;
|
|
137
|
-
dispose = result.dispose;
|
|
138
|
-
const { width: pageWidth, height: pageHeight, orientation } = parseSize(options == null ? void 0 : options.size);
|
|
139
|
-
const doc = new jsPDF(orientation, "pt", [pageWidth, pageHeight]);
|
|
140
|
-
doc.deletePage(1);
|
|
141
|
-
const pages = Array.from(container.querySelectorAll("[data-print-page]"));
|
|
142
|
-
if (pages.length > 0) {
|
|
143
|
-
for (const pageEl of pages) {
|
|
144
|
-
pageEl.style.width = pageWidth + "pt";
|
|
145
|
-
const canvas = await htmlToImage.toCanvas(pageEl, {
|
|
146
|
-
backgroundColor: "white",
|
|
147
|
-
pixelRatio: 4
|
|
148
|
-
});
|
|
149
|
-
const imgWidth = pageWidth;
|
|
150
|
-
const imgHeight = canvas.height * (pageWidth / canvas.width);
|
|
151
|
-
doc.addPage([pageWidth, pageHeight], orientation);
|
|
152
|
-
doc.addImage({
|
|
153
|
-
imageData: canvas,
|
|
154
|
-
x: 0,
|
|
155
|
-
y: 0,
|
|
156
|
-
width: imgWidth,
|
|
157
|
-
height: imgHeight
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
} else {
|
|
161
|
-
const target = container.firstElementChild ?? container;
|
|
162
|
-
target.style.width = pageWidth + "pt";
|
|
163
|
-
const canvas = await htmlToImage.toCanvas(target, {
|
|
164
|
-
backgroundColor: "white",
|
|
165
|
-
pixelRatio: 4
|
|
166
|
-
});
|
|
167
|
-
const scaleFactor = pageWidth / canvas.width;
|
|
168
|
-
const pageHeightPx = pageHeight / scaleFactor;
|
|
169
|
-
const totalPages = Math.ceil(canvas.height / pageHeightPx);
|
|
170
|
-
for (let i = 0; i < totalPages; i++) {
|
|
171
|
-
const sliceCanvas = document.createElement("canvas");
|
|
172
|
-
sliceCanvas.width = canvas.width;
|
|
173
|
-
sliceCanvas.height = Math.min(pageHeightPx, canvas.height - i * pageHeightPx);
|
|
174
|
-
const ctx = sliceCanvas.getContext("2d");
|
|
175
|
-
ctx.drawImage(
|
|
176
|
-
canvas,
|
|
177
|
-
0,
|
|
178
|
-
i * pageHeightPx,
|
|
179
|
-
canvas.width,
|
|
180
|
-
sliceCanvas.height,
|
|
181
|
-
0,
|
|
182
|
-
0,
|
|
183
|
-
canvas.width,
|
|
184
|
-
sliceCanvas.height
|
|
185
|
-
);
|
|
186
|
-
const imgHeight = sliceCanvas.height * scaleFactor;
|
|
187
|
-
doc.addPage([pageWidth, pageHeight], orientation);
|
|
188
|
-
doc.addImage({
|
|
189
|
-
imageData: sliceCanvas,
|
|
190
|
-
x: 0,
|
|
191
|
-
y: 0,
|
|
192
|
-
width: pageWidth,
|
|
193
|
-
height: imgHeight
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
const arrayBuffer = doc.output("arraybuffer");
|
|
198
|
-
return new Uint8Array(arrayBuffer);
|
|
199
|
-
} finally {
|
|
200
|
-
dispose == null ? void 0 : dispose();
|
|
201
|
-
container == null ? void 0 : container.remove();
|
|
202
|
-
busy.hide();
|
|
203
|
-
}
|
|
204
|
-
};
|
|
205
|
-
return { toPrinter, toPdf };
|
|
206
|
-
}
|
|
1
|
+
import { usePrint } from "../components/feedback/print/PrintContext.js";
|
|
207
2
|
export {
|
|
208
3
|
usePrint
|
|
209
4
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/usePrint.ts"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "AAAA,SAAS,gBAAgB;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|