qrlayout-ui 1.0.3 → 1.0.5

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 +34 -3
  2. package/package.json +64 -64
package/README.md CHANGED
@@ -2,10 +2,15 @@
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
- [**🚀 Live Demo**](https://qr-layout-designer.netlify.app/)
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/)**
6
8
 
7
- - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/ui-react)**: Reference implementation for monorepo usage.
9
+ - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/react-demo)**: Reference implementation for monorepo usage.
8
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.
9
14
 
10
15
  ![QR Layout Designer Screenshot](https://github.com/shashi089/qr-code-layout-generate-tool/raw/main/assets/layout_designer.png)
11
16
 
@@ -173,7 +178,33 @@ onUnmounted(() => {
173
178
  </template>
174
179
  ```
175
180
 
176
- ### 3. Vanilla JavaScript / HTML
181
+ ### 3. Svelte 5 (Runes)
182
+
183
+ ```svelte
184
+ <script lang="ts">
185
+ import { onMount } from 'svelte';
186
+ import { QRLayoutDesigner } from 'qrlayout-ui';
187
+ import 'qrlayout-ui/style.css';
188
+
189
+ let container = $state<HTMLDivElement | null>(null);
190
+ let designer: QRLayoutDesigner | null = null;
191
+
192
+ onMount(() => {
193
+ if (!container) return;
194
+
195
+ designer = new QRLayoutDesigner({
196
+ element: container,
197
+ onSave: (data) => console.log('Saved Layout:', data)
198
+ });
199
+
200
+ return () => designer?.destroy();
201
+ });
202
+ </script>
203
+
204
+ <div bind:this={container} style="width: 100%; height: 800px;"></div>
205
+ ```
206
+
207
+ ### 4. Vanilla JavaScript / HTML
177
208
 
178
209
  ```html
179
210
  <!DOCTYPE html>
package/package.json CHANGED
@@ -1,65 +1,65 @@
1
- {
2
- "name": "qrlayout-ui",
3
- "version": "1.0.3",
4
- "description": "Visual designer and UI components for QR layout generation",
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
- "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",
26
- "drag-drop",
27
- "label-printer"
28
- ],
29
- "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
30
- "license": "MIT",
31
- "repository": {
32
- "type": "git",
33
- "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
34
- "directory": "packages/ui"
35
- },
36
- "private": false,
37
- "type": "module",
38
- "files": [
39
- "dist"
40
- ],
41
- "main": "./dist/qrlayout-ui.umd.js",
42
- "module": "./dist/qrlayout-ui.js",
43
- "types": "./dist/index.d.ts",
44
- "exports": {
45
- ".": {
46
- "types": "./dist/index.d.ts",
47
- "import": "./dist/qrlayout-ui.js",
48
- "require": "./dist/qrlayout-ui.umd.js"
49
- },
50
- "./style.css": "./dist/qrlayout-ui.css"
51
- },
52
- "scripts": {
53
- "dev": "vite",
54
- "build": "vite build",
55
- "preview": "vite preview"
56
- },
57
- "dependencies": {
58
- "qrlayout-core": "^1.0.7"
59
- },
60
- "devDependencies": {
61
- "typescript": "^5.3.3",
62
- "vite": "^7.2.7",
63
- "vite-plugin-dts": "^4.5.4"
64
- }
1
+ {
2
+ "name": "qrlayout-ui",
3
+ "version": "1.0.5",
4
+ "description": "Visual designer and UI components for QR layout generation",
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
+ "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",
26
+ "drag-drop",
27
+ "label-printer"
28
+ ],
29
+ "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
30
+ "license": "MIT",
31
+ "repository": {
32
+ "type": "git",
33
+ "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
34
+ "directory": "packages/ui"
35
+ },
36
+ "private": false,
37
+ "type": "module",
38
+ "files": [
39
+ "dist"
40
+ ],
41
+ "main": "./dist/qrlayout-ui.umd.js",
42
+ "module": "./dist/qrlayout-ui.js",
43
+ "types": "./dist/index.d.ts",
44
+ "exports": {
45
+ ".": {
46
+ "types": "./dist/index.d.ts",
47
+ "import": "./dist/qrlayout-ui.js",
48
+ "require": "./dist/qrlayout-ui.umd.js"
49
+ },
50
+ "./style.css": "./dist/qrlayout-ui.css"
51
+ },
52
+ "scripts": {
53
+ "dev": "vite",
54
+ "build": "vite build",
55
+ "preview": "vite preview"
56
+ },
57
+ "dependencies": {
58
+ "qrlayout-core": "^1.1.1"
59
+ },
60
+ "devDependencies": {
61
+ "typescript": "^5.3.3",
62
+ "vite": "^7.2.7",
63
+ "vite-plugin-dts": "^4.5.4"
64
+ }
65
65
  }