Skip to content

Commit 3562aa5

Browse files
committed
chore: wip
1 parent 877a7d2 commit 3562aa5

17 files changed

Lines changed: 171 additions & 19 deletions

File tree

bun.lockb

32 Bytes
Binary file not shown.

docs/.vitepress/components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ declare module 'vue' {
1111
HomeContributors: typeof import('./theme/components/HomeContributors.vue')['default']
1212
HomeSponsors: typeof import('./theme/components/HomeSponsors.vue')['default']
1313
HomeTeam: typeof import('./theme/components/HomeTeam.vue')['default']
14+
QRDemo: typeof import('./theme/components/QRDemo.vue')['default']
1415
TeamMember: typeof import('./theme/components/TeamMember.vue')['default']
1516
}
1617
}
Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<script setup>
2+
import { QRCode, QRCodeCorrectLevel } from '@stacksjs/qrx'
3+
import { onMounted, ref, watch } from 'vue'
4+
// import { QRCode, QRCodeCorrectLevel } from './qrcode'
5+
6+
const text = ref('Hello VitePress!')
7+
const errorLevel = ref('2') // H level by default
8+
const useSVG = ref(true)
9+
const qrContainer = ref(null)
10+
let qrCode = null
11+
12+
function updateQRCode() {
13+
if (!qrContainer.value)
14+
return
15+
16+
if (qrCode) {
17+
qrCode.clear()
18+
}
19+
20+
qrCode = new QRCode(qrContainer.value, {
21+
text: text.value,
22+
width: 256,
23+
height: 256,
24+
colorDark: '#000000',
25+
colorLight: '#ffffff',
26+
correctLevel: Number.parseInt(errorLevel.value),
27+
useSVG: useSVG.value,
28+
})
29+
}
30+
31+
onMounted(() => {
32+
updateQRCode()
33+
})
34+
35+
watch([text, errorLevel, useSVG], () => {
36+
updateQRCode()
37+
})
38+
</script>
39+
40+
<template>
41+
<div class="qr-demo">
42+
<div class="controls">
43+
<div class="input-group">
44+
<label for="qr-text">Text to encode:</label>
45+
<input
46+
id="qr-text"
47+
v-model="text"
48+
type="text"
49+
placeholder="Enter text to encode"
50+
>
51+
</div>
52+
53+
<div class="input-group">
54+
<label for="error-level">Error Correction:</label>
55+
<select id="error-level" v-model="errorLevel">
56+
<option value="1">
57+
Level L (7%)
58+
</option>
59+
<option value="0">
60+
Level M (15%)
61+
</option>
62+
<option value="3">
63+
Level Q (25%)
64+
</option>
65+
<option value="2">
66+
Level H (30%)
67+
</option>
68+
</select>
69+
</div>
70+
71+
<div class="input-group">
72+
<label>
73+
<input v-model="useSVG" type="checkbox">
74+
Use SVG Renderer
75+
</label>
76+
</div>
77+
</div>
78+
79+
<div ref="qrContainer" class="qr-container" />
80+
</div>
81+
</template>
82+
83+
<style scoped>
84+
.qr-demo {
85+
padding: 20px;
86+
max-width: 600px;
87+
margin: 0 auto;
88+
}
89+
90+
.controls {
91+
margin-bottom: 20px;
92+
}
93+
94+
.input-group {
95+
margin-bottom: 15px;
96+
}
97+
98+
.input-group label {
99+
display: block;
100+
margin-bottom: 5px;
101+
font-weight: 500;
102+
}
103+
104+
input[type="text"] {
105+
width: 100%;
106+
padding: 8px;
107+
border: 1px solid #ddd;
108+
border-radius: 4px;
109+
}
110+
111+
select {
112+
padding: 8px;
113+
border: 1px solid #ddd;
114+
border-radius: 4px;
115+
background-color: white;
116+
}
117+
118+
.qr-container {
119+
display: flex;
120+
justify-content: center;
121+
align-items: center;
122+
min-height: 256px;
123+
padding: 20px;
124+
border: 1px solid #ddd;
125+
border-radius: 4px;
126+
}
127+
</style>

docs/api/barcode/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
# All Options
2+
13
::: info
24
Thank you to all `JsBarcode` contributors for their work. And, in particular, many thanks to [lindell](https://lindell.me/) for the groundwork!
35
:::
46

5-
# All Options
6-
77
| Option | Default value | Type |
88
|--------|---------------|------|
99
| [`format`](https://ts-quick-reaction.netlify.app/barcode/options#format) | `"auto" (CODE128)` | `String` |

docs/demo.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Demo
22

3-
wip
3+
<QRDemo />

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"@iconify-json/carbon": "^1.2.5",
4949
"@shikijs/vitepress-twoslash": "^1.24.4",
5050
"@stacksjs/eslint-config": "^3.12.0-beta.4",
51+
"@stacksjs/qrx": "workspace:*",
5152
"@types/bun": "^1.1.14",
5253
"@vite-pwa/vitepress": "^0.5.3",
5354
"bumpp": "^9.9.2",

packages/qrx/build.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { dts } from 'bun-plugin-dtsx'
22

3-
await Bun.build({
4-
entrypoints: ['src/index.ts'],
3+
const resp = await Bun.build({
4+
target: 'browser',
5+
entrypoints: ['./src/index.ts'],
56
outdir: './dist',
67
plugins: [dts()],
78
})
9+
10+
console.log(resp)

packages/qrx/src/barcode/drivers/EAN_UPC/EAN.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Barcode from '../barcode'
22
import { MIDDLE_BIN, SIDE_BIN } from './constants'
3-
import encode from './encoder'
3+
import { encode } from './encoder'
44

55
// Base class for EAN8 & EAN13
66
export class EAN extends Barcode {

packages/qrx/src/barcode/drivers/EAN_UPC/EAN5.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
import Barcode from '../barcode'
55
import { EAN5_STRUCTURE } from './constants'
6-
import encode from './encoder'
6+
import { encode } from './encoder'
77

8-
function checksum(data) {
8+
function checksum(data: string) {
99
const result = data
1010
.split('')
1111
.map(n => +n)
@@ -18,15 +18,15 @@ function checksum(data) {
1818
}
1919

2020
class EAN5 extends Barcode {
21-
constructor(data, options) {
21+
constructor(data: string, options: any) {
2222
super(data, options)
2323
}
2424

25-
valid() {
25+
valid(): boolean {
2626
return this.data.search(/^\d{5}$/) !== -1
2727
}
2828

29-
encode() {
29+
encode(): any {
3030
const structure = EAN5_STRUCTURE[checksum(this.data)]
3131
return {
3232
data: `1011${encode(this.data, structure, '01')}`,

packages/qrx/src/barcode/drivers/EAN_UPC/encoder.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BINARIES } from './constants'
44
export function encode(data: string, structure: number[], separator?: string): string {
55
let encoded = data
66
.split('')
7-
.map((val, idx) => BINARIES[structure[idx]])
7+
.map((val, idx) => BINARIES[structure[idx] as number] || '') // Ensure valid access
88
.map((val, idx) => val ? val[data[idx]] : '')
99

1010
if (separator) {

0 commit comments

Comments
 (0)