qrlayout-ui 1.0.6 → 1.0.8

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 +11 -13
  2. package/package.json +18 -21
package/README.md CHANGED
@@ -2,15 +2,13 @@
2
2
 
3
3
  A framework-agnostic, embeddable UI for designing sticker layouts with QR codes. Part of the [QR Layout Tool](https://github.com/shashi089/qr-code-layout-generate-tool).
4
4
 
5
- - **[ React Live Demo](https://qr-layout-designer.netlify.app/)**
6
- - **[ Svelte Live Demo](https://qr-layout-designer-svelte.netlify.app/)**
7
- - **[ Vue Live Demo](https://qr-layout-designer-vue.netlify.app/)**
5
+ ## 🚀 Live Demos & Examples
8
6
 
9
- - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/react-demo)**: Reference implementation for monorepo usage.
10
-
11
- - **[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.
12
-
13
- - **[Vue Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/vue-demo)**: Reference implementation for Vue + Tailwind CSS.
7
+ | Framework | Live Demo | Source Code |
8
+ | :--- | :--- | :--- |
9
+ | **React** | [Live Demo](https://qr-layout-designer.netlify.app/) | [Source](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/react-demo) |
10
+ | **Svelte 5** | [Live Demo](https://qr-layout-designer-svelte.netlify.app/) | [Source](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/svelte-demo) |
11
+ | **Vue 3** | [Live Demo](https://qr-layout-designer-vue.netlify.app/) | [Source](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/vue-demo) |
14
12
 
15
13
  ![QR Layout Designer Screenshot](https://github.com/shashi089/qr-code-layout-generate-tool/raw/main/assets/layout_designer.png)
16
14
 
@@ -102,9 +100,9 @@ const designer = new QRLayoutDesigner({
102
100
  });
103
101
  ```
104
102
 
105
- ### 3. Cleanup
103
+ ### 4. Cleanup
106
104
 
107
- When unmounting your component (e.g., in React's `useEffect` return or Vue's `onUnmounted`):
105
+ Destroy the instance when the component unmounts to prevent memory leaks:
108
106
 
109
107
  ```javascript
110
108
  designer.destroy();
@@ -115,9 +113,9 @@ designer.destroy();
115
113
  | Option | Type | Description |
116
114
  |---|---|---|
117
115
  | `element` | `HTMLElement` | **Required**. The DOM element to mount the designer into. |
118
- | `entitySchemas` | `Record<string, Schema>` | Definitions for data entities. Allows users to pick fields (like `{{name}}`) to bind to text/QR elements. |
119
- | `initialLayout` | `StickerLayout` | The initial layout state to load. |
120
- | `onSave` | `(layout) => void` | Callback triggered when the "Save Layout" button is clicked. |
116
+ | `entitySchemas` | `Record<string, Schema>` | Data entity definitions for `{{field}}` placeholder binding. |
117
+ | `initialLayout` | `StickerLayout` | The initial layout state to load on mount. |
118
+ | `onSave` | `(layout: StickerLayout) => void` | Callback triggered when the "Save Layout" button is clicked. |
121
119
 
122
120
  ## Integration Examples
123
121
 
package/package.json CHANGED
@@ -1,30 +1,25 @@
1
1
  {
2
2
  "name": "qrlayout-ui",
3
- "version": "1.0.6",
4
- "description": "Visual designer and UI components for QR layout generation",
3
+ "version": "1.0.8",
4
+ "description": "A framework-agnostic visual designer UI for QR code and label layouts.",
5
5
  "keywords": [
6
- "qr",
7
- "qrcode",
8
6
  "qr-code",
9
7
  "qr-layout",
10
- "qr-layout",
11
8
  "qr-layout-designer",
12
- "layout",
13
- "qr-sticker",
14
- "qr-label",
15
- "react-qr",
16
- "vue-qr",
17
- "angular-qr",
18
- "svelte-qr",
19
- "embeddable-designer",
20
- "label-editor",
21
- "layout",
22
- "qr-sticker",
23
- "qr-label",
24
- "generator",
25
- "visual-editor",
9
+ "react-qrcode",
10
+ "vue-qrcode",
11
+ "svelte-qrcode",
12
+ "angular-qrcode",
26
13
  "drag-drop",
27
- "label-printer"
14
+ "drag-and-drop",
15
+ "ui-component",
16
+ "low-code",
17
+ "visual-editor",
18
+ "label-designer",
19
+ "label-printing",
20
+ "sticker-designer",
21
+ "typescript",
22
+ "framework-agnostic"
28
23
  ],
29
24
  "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
30
25
  "license": "MIT",
@@ -36,7 +31,9 @@
36
31
  "private": false,
37
32
  "type": "module",
38
33
  "files": [
39
- "dist"
34
+ "dist",
35
+ "README.md",
36
+ "LICENSE"
40
37
  ],
41
38
  "main": "./dist/qrlayout-ui.umd.js",
42
39
  "module": "./dist/qrlayout-ui.js",