ReviewOS
Reload

also looking at this

stacks/ts-qr-codes

chore(deps): update dependency react to 19.2.7

#2137
Closed chris wants to merge buddy-bot/update-major-update-react into main
222 files +16350 -1825

Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.

docs/.vitepress/components.d.tsmodified+2-1
@@ -7,11 +7,12 @@ export {}
77/* prettier-ignore */
88declare module 'vue' {
99 export interface GlobalComponents {
10 BarcodeDemo: typeof import('./theme/components/BarcodeDemo.vue')['default']
1011 Home: typeof import('./theme/components/Home.vue')['default']
1112 HomeContributors: typeof import('./theme/components/HomeContributors.vue')['default']
1213 HomeSponsors: typeof import('./theme/components/HomeSponsors.vue')['default']
1314 HomeTeam: typeof import('./theme/components/HomeTeam.vue')['default']
14 QRDemo: typeof import('./theme/components/QRDemo.vue')['default']
15 QRCodeDemo: typeof import('./theme/components/QRCodeDemo.vue')['default']
1516 TeamMember: typeof import('./theme/components/TeamMember.vue')['default']
1617 }
1718}
docs/.vitepress/theme/components/BarcodeDemo.vueadded+359-0
@@ -0,0 +1,359 @@
1<script setup lang="ts">
2import { barcode } from '@stacksjs/qrx'
3import { nextTick, onMounted, ref, watch } from 'vue'
4
5const error = ref('')
6const text = ref('123456789')
7const format = ref('CODE128')
8const width = ref(2)
9const height = ref(100)
10const displayValue = ref(true)
11const fontOptions = ref('')
12const font = ref('monospace')
13const textAlign = ref('center')
14const textPosition = ref('bottom')
15const textMargin = ref(2)
16const fontSize = ref(20)
17const background = ref('#ffffff')
18const lineColor = ref('#ffffff')
19const margin = ref(10)
20
21const barcodeContainer = ref<HTMLElement | null>(null)
22
23const formats = [
24 'CODE128',
25 'EAN13',
26 'EAN8',
27 'EAN5',
28 'EAN2',
29 'UPC',
30 'CODE39',
31 'ITF14',
32 'MSI',
33 'MSI10',
34 'MSI11',
35 'MSI1010',
36 'MSI1110',
37 'pharmacode',
38 'codabar',
39]
40
41function updateBarcode() {
42 if (!barcodeContainer.value)
43 return
44
45 error.value = ''
46
47 try {
48 // Create SVG element inside container
49 const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
50 barcodeContainer.value.innerHTML = ''
51 barcodeContainer.value.appendChild(svgElement)
52
53 // Create new barcode
54 barcode(svgElement, text.value, {
55 format: format.value,
56 width: Number(width.value),
57 height: Number(height.value),
58 displayValue: displayValue.value,
59 fontOptions: fontOptions.value,
60 font: font.value,
61 textAlign: textAlign.value,
62 textPosition: textPosition.value,
63 textMargin: Number(textMargin.value),
64 fontSize: Number(fontSize.value),
65 background,
66 lineColor: lineColor.value,
67 margin: Number(margin.value),
68 elementTag: 'svg',
69 valid: (valid: boolean) => {
70 if (!valid)
71 error.value = 'Invalid barcode input for the selected format'
72 },
73 })
74 }
75 catch (err: any) {
76 error.value = err.message || 'Error rendering barcode'
77 console.error('Error rendering barcode:', err)
78 }
79}
80
81onMounted(() => {
82 // Wait for next tick to ensure DOM is ready
83 nextTick(() => {
84 updateBarcode()
85 })
86})
87
88watch([
89 text,
90 format,
91 width,
92 height,
93 displayValue,
94 fontOptions,
95 font,
96 textAlign,
97 textPosition,
98 textMargin,
99 fontSize,
100 background,
101 lineColor,
102 margin,
103], () => {
104 updateBarcode()
105})
106</script>
107
108<template>
109 <div class="barcode-demo">
110 <div class="controls">
111 <div class="control-grid">
112 <!-- Text Input -->
113 <div class="input-group full-width">
114 <label for="barcode-text">Text to encode:</label>
115 <input
116 id="barcode-text"
117 v-model="text"
118 type="text"
119 placeholder="Enter text to encode"
120 >
121 </div>
122
123 <!-- Format Selection -->
124 <div class="input-group">
125 <label for="format">Format:</label>
126 <select
127 id="format"
128 v-model="format"
129 >
130 <option
131 v-for="fmt in formats"
132 :key="fmt"
133 :value="fmt"
134 >
135 {{ fmt }}
136 </option>
137 </select>
138 </div>
139
140 <!-- Display Value Toggle -->
141 <div class="input-group checkbox-group">
142 <label>
143 <input
144 v-model="displayValue"
145 type="checkbox"
146 >
147 Display Value
148 </label>
149 </div>
150
151 <!-- Width Input -->
152 <div class="input-group">
153 <label for="width">Width:</label>
154 <input
155 id="width"
156 v-model="width"
157 type="number"
158 min="1"
159 >
160 </div>
161
162 <!-- Height Input -->
163 <div class="input-group">
164 <label for="height">Height:</label>
165 <input
166 id="height"
167 v-model="height"
168 type="number"
169 min="1"
170 >
171 </div>
172
173 <!-- Text Position -->
174 <div class="input-group">
175 <label for="text-position">Text Position:</label>
176 <select
177 id="text-position"
178 v-model="textPosition"
179 >
180 <option value="bottom">
181 Bottom
182 </option>
183 <option value="top">
184 Top
185 </option>
186 </select>
187 </div>
188
189 <!-- Text Alignment -->
190 <div class="input-group">
191 <label for="text-align">Text Alignment:</label>
192 <select
193 id="text-align"
194 v-model="textAlign"
195 >
196 <option value="center">
197 Center
198 </option>
199 <option value="left">
200 Left
201 </option>
202 <option value="right">
203 Right
204 </option>
205 </select>
206 </div>
207
208 <!-- Font Size -->
209 <div class="input-group">
210 <label for="font-size">Font Size:</label>
211 <input
212 id="font-size"
213 v-model="fontSize"
214 type="number"
215 min="1"
216 >
217 </div>
218
219 <!-- Margin -->
220 <div class="input-group">
221 <label for="margin">Margin:</label>
222 <input
223 id="margin"
224 v-model="margin"
225 type="number"
226 min="0"
227 >
228 </div>
229
230 <!-- Line Color -->
231 <div class="input-group">
232 <label for="line-color">Line Color:</label>
233 <input
234 id="line-color"
235 v-model="lineColor"
236 type="color"
237 >
238 </div>
239
240 <!-- Background Color -->
241 <div class="input-group">
242 <label for="background">Background:</label>
243 <input
244 id="background"
245 v-model="background"
246 type="color"
247 >
248 </div>
249 </div>
250 </div>
251
252 <div class="barcode-section">
253 <div
254 v-if="error"
255 class="error-message"
256 >
257 {{ error }}
258 </div>
259
260 <div
261 ref="barcodeContainer"
262 class="barcode-container"
263 />
264 </div>
265 </div>
266</template>
267
268<style scoped>
269.barcode-demo {
270 padding: 20px;
271 max-width: 600px;
272 margin: 0 auto;
273}
274
275.controls {
276 margin-bottom: 20px;
277}
278
279.control-grid {
280 display: grid;
281 grid-template-columns: repeat(2, 1fr);
282 gap: 15px;
283}
284
285.input-group {
286 margin-bottom: 0;
287}
288
289.input-group.full-width {
290 grid-column: span 2;
291}
292
293.input-group label {
294 display: block;
295 margin-bottom: 5px;
296 font-weight: 500;
297}
298
299.input-group.checkbox-group {
300 display: flex;
301 align-items: center;
302 padding-top: 24px;
303}
304
305.input-group.checkbox-group label {
306 margin-bottom: 0;
307 display: flex;
308 align-items: center;
309 cursor: pointer;
310}
311
312input[type="text"],
313input[type="number"],
314select {
315 width: 100%;
316 padding: 8px;
317 border: 1px solid #ddd;
318 border-radius: 4px;
319 background-color: white;
320}
321
322input[type="color"] {
323 width: 100%;
324 padding: 2px;
325 border: 1px solid #ddd;
326 border-radius: 4px;
327 height: 40px;
328 background-color: white;
329 cursor: pointer;
330}
331
332input[type="checkbox"] {
333 margin-right: 8px;
334 cursor: pointer;
335}
336
337.barcode-section {
338 position: relative;
339}
340
341.error-message {
342 color: #dc2626;
343 margin-bottom: 15px;
344 padding: 8px;
345 border: 1px solid #dc2626;
346 border-radius: 4px;
347 background-color: #fef2f2;
348}
349
350.barcode-container {
351 display: flex;
352 justify-content: center;
353 align-items: center;
354 min-height: 256px;
355 padding: 20px;
356 border: 1px solid #ddd;
357 border-radius: 4px;
358}
359</style>
docs/.vitepress/theme/components/QRDemo.vue docs/.vitepress/theme/components/QRCodeDemo.vuerenamed+0-1
@@ -1,7 +1,6 @@
11<script setup>
22import { QRCode, QRErrorCorrectLevel } from '@stacksjs/qrx'
33import { onMounted, ref, watch } from 'vue'
4// import { QRCode, QRCodeCorrectLevel } from './qrcode'
54
65const text = ref('Hello World!')
76const errorLevel = ref(QRErrorCorrectLevel.H)
docs/demo.mdmodified+4-2
@@ -4,8 +4,10 @@ This is a demo page for the QR Code and Barcode components.
44
55## QR Code
66
7<QRDemo />
7<QRCodeDemo />
8
9___
810
911## Barcode
1012
11wip
13<BarcodeDemo />
packages/qrx/src/bar/utils/getRenderProperties.tsmodified+0-4
@@ -1,7 +1,3 @@
1/* global HTMLImageElement */
2/* global HTMLCanvasElement */
3/* global SVGElement */
4
51import { InvalidElementException } from '../exceptions/exceptions'
62import renderers from '../renderers/index'
73import getOptionsFromElement from './getOptionsFromElement'