qrlayout-ui 1.0.0 → 1.0.1
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 +80 -4
- package/package.json +11 -1
package/README.md
CHANGED
|
@@ -4,6 +4,9 @@ A framework-agnostic, embeddable UI for designing sticker layouts with QR codes.
|
|
|
4
4
|
|
|
5
5
|
[**🚀 Live Demo**](https://qr-layout-designer.netlify.app/)
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
7
10
|
## Features
|
|
8
11
|
|
|
9
12
|
- **Framework Independent**: Built with vanilla TypeScript, works with React, Vue, Angular, Svelte, or plain HTML/JS.
|
|
@@ -33,7 +36,24 @@ Make sure to import the CSS file in your project entry point:
|
|
|
33
36
|
import "qrlayout-ui/style.css";
|
|
34
37
|
```
|
|
35
38
|
|
|
36
|
-
### 2.
|
|
39
|
+
### 2. Styling the Container
|
|
40
|
+
|
|
41
|
+
The designer expects its parent container to have a defined width and height. If the container has zero height, the designer will not be visible.
|
|
42
|
+
|
|
43
|
+
For a **full-screen experience**, you can use the following CSS:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
.designer-container {
|
|
47
|
+
width: 100vw;
|
|
48
|
+
height: 100vh;
|
|
49
|
+
position: fixed;
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
z-index: 10;
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 3. Basic Setup
|
|
37
57
|
|
|
38
58
|
```typescript
|
|
39
59
|
import { QRLayoutDesigner } from "qrlayout-ui";
|
|
@@ -91,7 +111,11 @@ designer.destroy();
|
|
|
91
111
|
| `initialLayout` | `StickerLayout` | The initial layout state to load. |
|
|
92
112
|
| `onSave` | `(layout) => void` | Callback triggered when the "Save Layout" button is clicked. |
|
|
93
113
|
|
|
94
|
-
##
|
|
114
|
+
## Integration Examples
|
|
115
|
+
|
|
116
|
+
Since `qrlayout-ui` is framework-agnostic, it can be easily integrated into any setup.
|
|
117
|
+
|
|
118
|
+
### 1. React (TypeScript)
|
|
95
119
|
|
|
96
120
|
```tsx
|
|
97
121
|
import { useEffect, useRef } from 'react';
|
|
@@ -99,14 +123,14 @@ import { QRLayoutDesigner } from 'qrlayout-ui';
|
|
|
99
123
|
import 'qrlayout-ui/style.css';
|
|
100
124
|
|
|
101
125
|
const MyDesigner = () => {
|
|
102
|
-
const containerRef = useRef(null);
|
|
126
|
+
const containerRef = useRef<HTMLDivElement>(null);
|
|
103
127
|
|
|
104
128
|
useEffect(() => {
|
|
105
129
|
if (!containerRef.current) return;
|
|
106
130
|
|
|
107
131
|
const designer = new QRLayoutDesigner({
|
|
108
132
|
element: containerRef.current,
|
|
109
|
-
onSave: (data) => console.log(data)
|
|
133
|
+
onSave: (data) => console.log('Saved Layout:', data)
|
|
110
134
|
});
|
|
111
135
|
|
|
112
136
|
return () => designer.destroy();
|
|
@@ -114,5 +138,57 @@ const MyDesigner = () => {
|
|
|
114
138
|
|
|
115
139
|
return <div ref={containerRef} style={{ width: '100%', height: '800px' }} />;
|
|
116
140
|
};
|
|
141
|
+
|
|
117
142
|
export default MyDesigner;
|
|
118
143
|
```
|
|
144
|
+
|
|
145
|
+
### 2. Vue 3 (Composition API)
|
|
146
|
+
|
|
147
|
+
```vue
|
|
148
|
+
<script setup>
|
|
149
|
+
import { onMounted, onUnmounted, ref } from 'vue';
|
|
150
|
+
import { QRLayoutDesigner } from 'qrlayout-ui';
|
|
151
|
+
import 'qrlayout-ui/style.css';
|
|
152
|
+
|
|
153
|
+
const container = ref(null);
|
|
154
|
+
let designer = null;
|
|
155
|
+
|
|
156
|
+
onMounted(() => {
|
|
157
|
+
designer = new QRLayoutDesigner({
|
|
158
|
+
element: container.value,
|
|
159
|
+
onSave: (data) => console.log('Saved:', data)
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
onUnmounted(() => {
|
|
164
|
+
if (designer) designer.destroy();
|
|
165
|
+
});
|
|
166
|
+
</script>
|
|
167
|
+
|
|
168
|
+
<template>
|
|
169
|
+
<div ref="container" style="width: 100%; height: 800px;"></div>
|
|
170
|
+
</template>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### 3. Vanilla JavaScript / HTML
|
|
174
|
+
|
|
175
|
+
```html
|
|
176
|
+
<!DOCTYPE html>
|
|
177
|
+
<html>
|
|
178
|
+
<head>
|
|
179
|
+
<link rel="stylesheet" href="node_modules/qrlayout-ui/dist/style.css">
|
|
180
|
+
</head>
|
|
181
|
+
<body>
|
|
182
|
+
<div id="designer" style="width: 100%; height: 800px;"></div>
|
|
183
|
+
|
|
184
|
+
<script type="module">
|
|
185
|
+
import { QRLayoutDesigner } from 'qrlayout-ui';
|
|
186
|
+
|
|
187
|
+
const designer = new QRLayoutDesigner({
|
|
188
|
+
element: document.getElementById('designer'),
|
|
189
|
+
onSave: (data) => console.log('Saved:', data)
|
|
190
|
+
});
|
|
191
|
+
</script>
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|
|
194
|
+
```
|
package/package.json
CHANGED
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "qrlayout-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Visual designer and UI components for QR layout generation",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"qr",
|
|
7
7
|
"qrcode",
|
|
8
8
|
"qr-code",
|
|
9
9
|
"qr-layout",
|
|
10
|
+
"qr-layout",
|
|
10
11
|
"qr-layout-designer",
|
|
11
12
|
"layout",
|
|
12
13
|
"qr-sticker",
|
|
13
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",
|
|
14
24
|
"generator",
|
|
15
25
|
"visual-editor",
|
|
16
26
|
"drag-drop",
|