qrlayout-core 1.1.0 → 1.1.2

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.
Files changed (2) hide show
  1. package/README.md +167 -161
  2. package/package.json +68 -68
package/README.md CHANGED
@@ -1,161 +1,167 @@
1
- # qrlayout-core
2
-
3
- A powerful, framework-agnostic QR code layout engine for designing and printing QR code stickers and labels. Create pixel-perfect layouts with text and QR codes, and export them to **PNG**, **PDF**, or **ZPL** (Zebra Programming Language).
4
-
5
- > [!NOTE]
6
- > This package is the core rendering engine. For a visual drag-and-drop designer, check out **[qrlayout-ui](../ui/README.md)**.
7
- > It is a **Framework-Agnostic** embeddable UI component that works with **React, Vue, Angular, Svelte, and Vanilla JS**.
8
- >
9
- > Visit our **[Live Demo](https://qr-layout-designer.netlify.app/)** to see it in action.
10
-
11
-
12
- ## Features
13
-
14
- - **Precise Layouts**: Define stickers in `mm`, `cm`, `in`, or `px`.
15
- - **Multiple Formats**: Export to Canvas (preview), PNG/JPEG (image), PDF (print), or ZPL (industrial thermal printers).
16
- - **Dynamic Content**: Use variable placeholders (e.g., `{{name}}`, `{{visitorId}}`) to batch generate unique stickers.
17
- - **Lightweight**: Minimal dependencies. PDF export is optional to keep bundle size small.
18
-
19
- ## Keywords
20
-
21
- QR code, qrcode, qr-code, layout, sticker, label, generator, renderer, PDF, ZPL, barcode, thermal printer.
22
-
23
- ## Live Demo & Examples
24
-
25
- - **[Interactive Demo](https://qr-layout-designer.netlify.app/)**: A full-featured designer built with `qrlayout-core` and `qrlayout-ui`.
26
- - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/ui-react)**: Reference implementation for monorepo usage.
27
-
28
- ## Installation
29
-
30
- ```bash
31
- npm install qrlayout-core
32
- ```
33
-
34
- ## Quick Start
35
-
36
- ### 1. Define a Layout
37
-
38
- A layout is a JSON object describing the sticker dimensions and elements.
39
-
40
- ```ts
41
- import { type StickerLayout } from "qrlayout-core";
42
-
43
- const myLayout: StickerLayout = {
44
- id: "badge-layout",
45
- name: "Conference Badge",
46
- width: 100, // 100mm width
47
- height: 60, // 60mm height
48
- unit: "mm",
49
- elements: [
50
- {
51
- id: "title",
52
- type: "text",
53
- x: 0, y: 5, w: 100, h: 10,
54
- content: "VISITOR PASS",
55
- style: { fontSize: 14, fontWeight: "bold", textAlign: "center" }
56
- },
57
- {
58
- id: "name",
59
- type: "text",
60
- x: 5, y: 25, w: 60, h: 10,
61
- content: "{{name}}", // Placeholder
62
- style: { fontSize: 12 }
63
- },
64
- {
65
- id: "qr-code",
66
- type: "qr",
67
- x: 70, y: 20, w: 25, h: 25,
68
- content: "{{visitorId}}" // Placeholder
69
- }
70
- ]
71
- };
72
- ```
73
-
74
- ### 2. Render or Export
75
-
76
- Pass data to the `StickerPrinter` to generate outputs.
77
-
78
- ```ts
79
- import { StickerPrinter } from "qrlayout-core";
80
-
81
- // Data to fill placeholders
82
- const data = {
83
- name: "Priyanka Verma",
84
- visitorId: "https://example.com/visitors/priyanka"
85
- };
86
-
87
- const printer = new StickerPrinter();
88
-
89
- // --- Option A: Render to HTML Canvas (Browser) ---
90
- const canvas = document.querySelector("#preview") as HTMLCanvasElement;
91
- await printer.renderToCanvas(myLayout, data, canvas);
92
-
93
- // --- Option B: Get an Image URL (PNG) ---
94
- const imageUrl = await printer.renderToDataURL(myLayout, data, { format: "png", dpi: 300 });
95
- console.log(imageUrl); // "data:image/png;base64,..."
96
-
97
- // --- Option C: Generate ZPL for Thermal Printers ---
98
- const zplCommands = printer.exportToZPL(myLayout, [data]);
99
- console.log(zplCommands[0]); // "^XA^FO..."
100
-
101
- ```
102
-
103
- ## PDF Export (Optional)
104
-
105
- To enable PDF export, you must install `jspdf`. This is an optional peer dependency to prevent bloating the core library for users who don't need PDF support.
106
-
107
- ### 1. Install jspdf
108
-
109
- ```bash
110
- npm install jspdf
111
- ```
112
-
113
- ### 2. Use the PDF Module
114
-
115
- ```ts
116
- import { exportToPDF } from "qrlayout-core/pdf";
117
-
118
- // Generate a PDF with multiple stickers (e.g., standard A4 sheet logic can be handled by caller,
119
- // this function currently outputs one page per sticker or as configured).
120
- const pdfDoc = await exportToPDF(myLayout, [data, data2, data3]);
121
-
122
- // Save the PDF
123
- pdfDoc.save("badges.pdf");
124
- ```
125
-
126
- ## API Reference
127
-
128
- ### `StickerLayout` Interface
129
-
130
- | Property | Type | Description |
131
- |----------|------|-------------|
132
- | `id` | `string` | Unique identifier for the layout. |
133
- | `name` | `string` | Human-readable name of the layout. |
134
- | `width` | `number` | Width of the sticker. |
135
- | `height` | `number` | Height of the sticker. |
136
- | `unit` | `"mm" \| "cm" \| "in" \| "px"` | Unit of measurement. |
137
- | `elements` | `StickerElement[]` | List of items on the sticker. |
138
- | `backgroundColor` | `string` | (Optional) Background color hex. |
139
- | `backgroundImage` | `string` | (Optional) Background image URL. |
140
-
141
- ### `StickerElement` Interface
142
-
143
- | Property | Type | Description |
144
- |----------|------|-------------|
145
- | `id` | `string` | Unique identifier for the element. |
146
- | `type` | `"text" \| "qr"` | Type of element. |
147
- | `x`, `y` | `number` | Position from top-left. |
148
- | `w`, `h` | `number` | Width and height. |
149
- | `content` | `string` | Text, URL, source. Supports `{{key}}` syntax. |
150
- | `qrSeparator` | `string` | (Optional) Separator used to join consecutive `{{variables}}` (e.g., `|`, `,`). |
151
- | `style.fontFamily` | `string` | Font family (e.g., 'sans-serif', 'Inter'). |
152
- | `style.fontSize` | `number` | Font size (px). |
153
- | `style.fontWeight` | `string \| number` | Font weight (e.g., 'bold', 700). |
154
- | `style.textAlign` | `"left" \| "center" \| "right"` | Horizontal alignment. |
155
- | `style.verticalAlign` | `"top" \| "middle" \| "bottom"` | Vertical alignment. |
156
- | `style.color` | `string` | Text color hex code. |
157
- | `style.backgroundColor` | `string` | Background color for the element. |
158
-
159
- ## License
160
-
161
- MIT
1
+ # qrlayout-core
2
+
3
+ A powerful, framework-agnostic QR code layout engine for designing and printing QR code stickers and labels. Create pixel-perfect layouts with text and QR codes, and export them to **PNG**, **PDF**, or **ZPL** (Zebra Programming Language).
4
+
5
+ > [!NOTE]
6
+ > This package is the core rendering engine. For a visual drag-and-drop designer, check out **[qrlayout-ui](../ui/README.md)**.
7
+ > It is a **Framework-Agnostic** embeddable UI component that works with **React, Vue, Angular, Svelte, and Vanilla JS**.
8
+ >
9
+ - **[ React Live Demo](https://qr-layout-designer.netlify.app/)**
10
+ - **[ Svelte Live Demo](https://qr-layout-designer-svelte.netlify.app/)**
11
+ - **[ Vue Live Demo](https://qr-layout-designer-vue.netlify.app/)**
12
+
13
+
14
+ ## Features
15
+
16
+ - **Precise Layouts**: Define stickers in `mm`, `cm`, `in`, or `px`.
17
+ - **Multiple Formats**: Export to Canvas (preview), PNG/JPEG (image), PDF (print), or ZPL (industrial thermal printers).
18
+ - **Dynamic Content**: Use variable placeholders (e.g., `{{name}}`, `{{visitorId}}`) to batch generate unique stickers.
19
+ - **Lightweight**: Minimal dependencies. PDF export is optional to keep bundle size small.
20
+
21
+ ## Keywords
22
+
23
+ QR code, qrcode, qr-code, layout, sticker, label, generator, renderer, PDF, ZPL, barcode, thermal printer.
24
+
25
+ ## Live Demo & Examples
26
+
27
+ - **[Interactive Demo](https://qr-layout-designer.netlify.app/)**: A full-featured designer built with `qrlayout-core` and `qrlayout-ui`.
28
+ - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/react-demo)**: Reference implementation for monorepo usage.
29
+
30
+ - **[Svelte Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/svelte-demo)**: Reference implementation for Svelte 5 + Tailwind CSS.
31
+
32
+ - **[Vue Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/vue-demo)**: Reference implementation for Vue + Tailwind CSS.
33
+
34
+ ## Installation
35
+
36
+ ```bash
37
+ npm install qrlayout-core
38
+ ```
39
+
40
+ ## Quick Start
41
+
42
+ ### 1. Define a Layout
43
+
44
+ A layout is a JSON object describing the sticker dimensions and elements.
45
+
46
+ ```ts
47
+ import { type StickerLayout } from "qrlayout-core";
48
+
49
+ const myLayout: StickerLayout = {
50
+ id: "badge-layout",
51
+ name: "Conference Badge",
52
+ width: 100, // 100mm width
53
+ height: 60, // 60mm height
54
+ unit: "mm",
55
+ elements: [
56
+ {
57
+ id: "title",
58
+ type: "text",
59
+ x: 0, y: 5, w: 100, h: 10,
60
+ content: "VISITOR PASS",
61
+ style: { fontSize: 14, fontWeight: "bold", textAlign: "center" }
62
+ },
63
+ {
64
+ id: "name",
65
+ type: "text",
66
+ x: 5, y: 25, w: 60, h: 10,
67
+ content: "{{name}}", // Placeholder
68
+ style: { fontSize: 12 }
69
+ },
70
+ {
71
+ id: "qr-code",
72
+ type: "qr",
73
+ x: 70, y: 20, w: 25, h: 25,
74
+ content: "{{visitorId}}" // Placeholder
75
+ }
76
+ ]
77
+ };
78
+ ```
79
+
80
+ ### 2. Render or Export
81
+
82
+ Pass data to the `StickerPrinter` to generate outputs.
83
+
84
+ ```ts
85
+ import { StickerPrinter } from "qrlayout-core";
86
+
87
+ // Data to fill placeholders
88
+ const data = {
89
+ name: "Priyanka Verma",
90
+ visitorId: "https://example.com/visitors/priyanka"
91
+ };
92
+
93
+ const printer = new StickerPrinter();
94
+
95
+ // --- Option A: Render to HTML Canvas (Browser) ---
96
+ const canvas = document.querySelector("#preview") as HTMLCanvasElement;
97
+ await printer.renderToCanvas(myLayout, data, canvas);
98
+
99
+ // --- Option B: Get an Image URL (PNG) ---
100
+ const imageUrl = await printer.renderToDataURL(myLayout, data, { format: "png", dpi: 300 });
101
+ console.log(imageUrl); // "data:image/png;base64,..."
102
+
103
+ // --- Option C: Generate ZPL for Thermal Printers ---
104
+ const zplCommands = printer.exportToZPL(myLayout, [data]);
105
+ console.log(zplCommands[0]); // "^XA^FO..."
106
+
107
+ ```
108
+
109
+ ## PDF Export (Optional)
110
+
111
+ To enable PDF export, you must install `jspdf`. This is an optional peer dependency to prevent bloating the core library for users who don't need PDF support.
112
+
113
+ ### 1. Install jspdf
114
+
115
+ ```bash
116
+ npm install jspdf
117
+ ```
118
+
119
+ ### 2. Use the PDF Module
120
+
121
+ ```ts
122
+ import { exportToPDF } from "qrlayout-core/pdf";
123
+
124
+ // Generate a PDF with multiple stickers (e.g., standard A4 sheet logic can be handled by caller,
125
+ // this function currently outputs one page per sticker or as configured).
126
+ const pdfDoc = await exportToPDF(myLayout, [data, data2, data3]);
127
+
128
+ // Save the PDF
129
+ pdfDoc.save("badges.pdf");
130
+ ```
131
+
132
+ ## API Reference
133
+
134
+ ### `StickerLayout` Interface
135
+
136
+ | Property | Type | Description |
137
+ |----------|------|-------------|
138
+ | `id` | `string` | Unique identifier for the layout. |
139
+ | `name` | `string` | Human-readable name of the layout. |
140
+ | `width` | `number` | Width of the sticker. |
141
+ | `height` | `number` | Height of the sticker. |
142
+ | `unit` | `"mm" \| "cm" \| "in" \| "px"` | Unit of measurement. |
143
+ | `elements` | `StickerElement[]` | List of items on the sticker. |
144
+ | `backgroundColor` | `string` | (Optional) Background color hex. |
145
+ | `backgroundImage` | `string` | (Optional) Background image URL. |
146
+
147
+ ### `StickerElement` Interface
148
+
149
+ | Property | Type | Description |
150
+ |----------|------|-------------|
151
+ | `id` | `string` | Unique identifier for the element. |
152
+ | `type` | `"text" \| "qr"` | Type of element. |
153
+ | `x`, `y` | `number` | Position from top-left. |
154
+ | `w`, `h` | `number` | Width and height. |
155
+ | `content` | `string` | Text, URL, source. Supports `{{key}}` syntax. |
156
+ | `qrSeparator` | `string` | (Optional) Separator used to join consecutive `{{variables}}` (e.g., `|`, `,`). |
157
+ | `style.fontFamily` | `string` | Font family (e.g., 'sans-serif', 'Inter'). |
158
+ | `style.fontSize` | `number` | Font size (px). |
159
+ | `style.fontWeight` | `string \| number` | Font weight (e.g., 'bold', 700). |
160
+ | `style.textAlign` | `"left" \| "center" \| "right"` | Horizontal alignment. |
161
+ | `style.verticalAlign` | `"top" \| "middle" \| "bottom"` | Vertical alignment. |
162
+ | `style.color` | `string` | Text color hex code. |
163
+ | `style.backgroundColor` | `string` | Background color for the element. |
164
+
165
+ ## License
166
+
167
+ MIT
package/package.json CHANGED
@@ -1,69 +1,69 @@
1
- {
2
- "name": "qrlayout-core",
3
- "version": "1.1.0",
4
- "description": "QR code layout builder, renderer, and exporter for stickers, labels, and PDFs",
5
- "keywords": [
6
- "qr",
7
- "qrcode",
8
- "qr-code",
9
- "qr-layout",
10
- "qr-layout",
11
- "qr-layout-designer",
12
- "layout",
13
- "qr-sticker",
14
- "qr-label",
15
- "zpl-generator",
16
- "pdf-generation",
17
- "label-printing",
18
- "layout",
19
- "qr-sticker",
20
- "qr-label",
21
- "generator",
22
- "renderer",
23
- "zpl",
24
- "thermal-printer"
25
- ],
26
- "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
27
- "license": "MIT",
28
- "repository": {
29
- "type": "git",
30
- "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
31
- "directory": "packages/core"
32
- },
33
- "type": "module",
34
- "main": "dist/index.js",
35
- "module": "dist/index.js",
36
- "types": "dist/index.d.ts",
37
- "exports": {
38
- ".": {
39
- "types": "./dist/index.d.ts",
40
- "import": "./dist/index.js"
41
- },
42
- "./pdf": {
43
- "types": "./dist/pdf.d.ts",
44
- "import": "./dist/pdf.js"
45
- }
46
- },
47
- "files": [
48
- "dist",
49
- "README.md",
50
- "LICENSE"
51
- ],
52
- "publishConfig": {
53
- "access": "public"
54
- },
55
- "scripts": {
56
- "build": "tsc -p tsconfig.build.json"
57
- },
58
- "sideEffects": false,
59
- "dependencies": {
60
- "qrcode": "^1.5.4"
61
- },
62
- "optionalDependencies": {
63
- "jspdf": "^3.0.4"
64
- },
65
- "devDependencies": {
66
- "@types/qrcode": "^1.5.6",
67
- "typescript": "^5.3.3"
68
- }
1
+ {
2
+ "name": "qrlayout-core",
3
+ "version": "1.1.2",
4
+ "description": "QR code layout builder, renderer, and exporter for stickers, labels, and PDFs",
5
+ "keywords": [
6
+ "qr",
7
+ "qrcode",
8
+ "qr-code",
9
+ "qr-layout",
10
+ "qr-layout",
11
+ "qr-layout-designer",
12
+ "layout",
13
+ "qr-sticker",
14
+ "qr-label",
15
+ "zpl-generator",
16
+ "pdf-generation",
17
+ "label-printing",
18
+ "layout",
19
+ "qr-sticker",
20
+ "qr-label",
21
+ "generator",
22
+ "renderer",
23
+ "zpl",
24
+ "thermal-printer"
25
+ ],
26
+ "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
27
+ "license": "MIT",
28
+ "repository": {
29
+ "type": "git",
30
+ "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
31
+ "directory": "packages/core"
32
+ },
33
+ "type": "module",
34
+ "main": "dist/index.js",
35
+ "module": "dist/index.js",
36
+ "types": "dist/index.d.ts",
37
+ "exports": {
38
+ ".": {
39
+ "types": "./dist/index.d.ts",
40
+ "import": "./dist/index.js"
41
+ },
42
+ "./pdf": {
43
+ "types": "./dist/pdf.d.ts",
44
+ "import": "./dist/pdf.js"
45
+ }
46
+ },
47
+ "files": [
48
+ "dist",
49
+ "README.md",
50
+ "LICENSE"
51
+ ],
52
+ "publishConfig": {
53
+ "access": "public"
54
+ },
55
+ "scripts": {
56
+ "build": "tsc -p tsconfig.build.json"
57
+ },
58
+ "sideEffects": false,
59
+ "dependencies": {
60
+ "qrcode": "^1.5.4"
61
+ },
62
+ "optionalDependencies": {
63
+ "jspdf": "^3.0.4"
64
+ },
65
+ "devDependencies": {
66
+ "@types/qrcode": "^1.5.6",
67
+ "typescript": "^5.3.3"
68
+ }
69
69
  }