gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refine input states, add tokenized params & ripple effects

Browse Source 
- Refactored Url Cleaner Exception 'Keep params' into a tokenized input array (pills/badges)
- Standardized UI contrast: ensured proper label highlighting in light/dark themes
- Expanded v-ripple interaction effect to buttons across all remaining tools, header, and modals
- Moved base .detail-tag styles into global CSS variables
- Web worker generation for QR codes (WIP)
This commit is contained in:
Grzegorz Kucmierz
2026-03-04 02:41:58 +00:00
parent b51bc61cf3
commit 18912368a4
13 changed files with 1029 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/InstallPrompt.vue
View File

@@ -3,8 +3,8 @@
<div class="prompt-content">
<span class="prompt-text">Install app for faster access</span>
<div class="prompt-actions">
<button @click="installPWA" class="install-btn">Install</button>
<button @click="dismissPrompt" class="dismiss-btn">✕</button>
<button @click="installPWA" class="install-btn" v-ripple>Install</button>
<button @click="dismissPrompt" class="dismiss-btn" v-ripple>✕</button>
</div>
</div>
</div>

2
src/components/ReloadPrompt.vue
View File

@@ -50,7 +50,7 @@ onMounted(() => {
<div class="message">
New content available, click on reload button to update.
</div>
<button @click="updateServiceWorker()">
<button @click="updateServiceWorker()" class="btn-neon" v-ripple>
Reload
</button>
</div>

2
src/components/Sidebar.vue
View File

@@ -27,7 +27,7 @@ defineProps({
left: 0;
bottom: 0;
width: 250px;
background-color: var(--panel-bg);
background-color: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow-x: hidden;

14
src/components/tools/Passwords.vue
View File

@@ -115,17 +115,17 @@ const generatePasswords = () => {
<div class="input-wrapper">
<label>Length</label>
<div class="number-control">
<button class="control-btn" @click="length > 4 ? length-- : null">-</button>
<button class="control-btn" @click="length > 4 ? length-- : null" v-ripple>-</button>
<input type="number" v-model="length" min="4" max="128" class="number-input">
<button class="control-btn" @click="length < 128 ? length++ : null">+</button>
<button class="control-btn" @click="length < 128 ? length++ : null" v-ripple>+</button>
</div>
</div>
<div class="input-wrapper">
<label>Count</label>
<div class="number-control">
<button class="control-btn" @click="count > 1 ? count-- : null">-</button>
<button class="control-btn" @click="count > 1 ? count-- : null" v-ripple>-</button>
<input type="number" v-model="count" min="1" max="1000" class="number-input">
<button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
<button class="control-btn" @click="count < 1000 ? count++ : null" v-ripple>+</button>
</div>
</div>
</div>
@@ -149,12 +149,6 @@ const generatePasswords = () => {
</template>
<style scoped>
.tool-container {
height: 100%;
display: flex;
flex-direction: column;
}
.options-grid {
display: flex;
flex-wrap: wrap;

103
src/components/tools/QrCode.vue
View File

@@ -14,36 +14,59 @@ const previewRef = ref(null)
const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px extra margin
const generateQR = async () => {
let worker = null
let latestJobId = 0
const generateQR = () => {
if (!text.value) {
svgContent.value = ''
return
}
try {
// Generate SVG for preview (always sharp)
svgContent.value = await QRCode.toString(text.value, {
type: 'svg',
errorCorrectionLevel: ecc.value,
margin: 1,
// No fixed width, allow scaling via CSS
})
} catch (err) {
console.error('QR Generation failed', err)
svgContent.value = ''
// Create worker if not exists
if (!worker) {
worker = new Worker(new URL('../../workers/qrcode.worker.js', import.meta.url), { type: 'module' })
worker.onmessage = (e) => {
const { id, svgContent: newSvg, error } = e.data
// Only process the result of the most recently requested job
// to avoid race conditions overriding newer results with older ones
if (id !== latestJobId) return
if (error) {
console.error('QR Generation worker failed', error)
svgContent.value = ''
} else {
svgContent.value = newSvg
}
}
}
// Increment ID for each new Generation request
latestJobId++
worker.postMessage({
id: latestJobId,
text: text.value,
ecc: ecc.value
})
}
// Debounce generation slightly to avoid lag on typing
let timeout
watch([text, ecc], () => { // size is not relevant for preview
clearTimeout(timeout)
timeout = setTimeout(generateQR, 300)
watch([text, ecc], () => {
generateQR()
})
onMounted(() => {
if (text.value) generateQR()
})
import { onUnmounted } from 'vue'
onUnmounted(() => {
if (worker) {
worker.terminate()
}
})
const downloadFile = async () => {
if (!text.value) return
@@ -131,11 +154,11 @@ const triggerDownload = (blob, filename) => {
<div class="control-group">
<label>Size (px)</label>
<div class="number-control size-control">
<button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100">-100</button>
<button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10">-10</button>
<button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100" v-ripple>-100</button>
<button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10" v-ripple>-10</button>
<input type="number" v-model.number="size" class="number-input" />
<button class="control-btn" @click="size += 10" title="+10">+10</button>
<button class="control-btn" @click="size += 100" title="+100">+100</button>
<button class="control-btn" @click="size += 10" title="+10" v-ripple>+10</button>
<button class="control-btn" @click="size += 100" title="+100" v-ripple>+100</button>
</div>
</div>
@@ -149,7 +172,7 @@ const triggerDownload = (blob, filename) => {
</select>
</div>
<button class="action-btn download-btn" @click="downloadFile">
<button class="btn-neon primary" @click="downloadFile" v-ripple>
<Download size="18" />
Download
</button>
@@ -160,12 +183,6 @@ const triggerDownload = (blob, filename) => {
</template>
<style scoped>
.tool-container.full-width {
height: 100%;
display: flex;
flex-direction: column;
}
.tool-panel {
padding: 1rem;
display: flex;
@@ -261,31 +278,21 @@ const triggerDownload = (blob, filename) => {
}
.size-control {
min-width: 280px;
width: 100%;
}
@media (max-width: 480px) {
.size-control {
border-radius: 8px;
}
.size-control .control-btn {
flex: 1;
}
}
.format-select {
min-width: 100px !important;
}
.download-btn {
height: 40px;
padding: 0 1.5rem;
background: var(--primary-accent);
color: #000;
border: none;
border-radius: 8px;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
.download-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
</style>

19
src/components/tools/QrScanner.vue
View File

@@ -307,7 +307,7 @@ const isUrl = (string) => {
<div v-if="error" class="error-overlay">
<p>{{ error }}</p>
<button @click="startScan" class="retry-btn">Retry</button>
<button @click="startScan" class="retry-btn" v-ripple>Retry</button>
</div>
<button
@@ -315,6 +315,7 @@ const isUrl = (string) => {
class="switch-camera-btn"
@click.stop="switchCamera"
title="Switch Camera"
v-ripple
>
<SwitchCamera size="24" />
</button>
@@ -324,13 +325,13 @@ const isUrl = (string) => {
<div class="results-header">
<h3>Scanned Codes ({{ scannedCodes.length }})</h3>
<div v-if="scannedCodes.length > 0" class="header-actions">
<button class="icon-btn" @click="copyAll" title="Copy All">
<button class="icon-btn" @click="copyAll" title="Copy All" v-ripple>
<Copy size="18" />
</button>
<button class="icon-btn" @click="downloadJson" title="Download JSON">
<button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
<Download size="18" />
</button>
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear All">
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear All" v-ripple>
<Trash2 size="18" />
</button>
</div>
@@ -349,10 +350,10 @@ const isUrl = (string) => {
</div>
</div>
<div class="item-actions">
<button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy">
<button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
<Copy size="18" />
</button>
<button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove">
<button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
<Trash2 size="18" />
</button>
</div>
@@ -369,12 +370,6 @@ const isUrl = (string) => {
</template>
<style scoped>
.tool-container.full-width {
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.scanner-content {
display: flex;

22
src/components/tools/UrlCleaner.vue
View File

@@ -110,7 +110,7 @@ onUnmounted(() => {
<div class="panel-header">
<h2 class="tool-title">URL Cleaner</h2>
<div class="header-actions">
<button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions">
<button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions" v-ripple>
<Settings size="20" />
</button>
<ExtensionStatus :isReady="isExtensionReady" />
@@ -129,7 +129,7 @@ onUnmounted(() => {
</div>
<div class="watch-toggle">
<button class="btn-neon" @click="handleClean">
<button class="btn-neon" @click="handleClean" v-ripple>
Clean
</button>
<button
@@ -138,6 +138,7 @@ onUnmounted(() => {
@click="toggleWatch"
:disabled="!isExtensionReady"
:title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
v-ripple
>
<Power size="18" />
<span>Watch Clipboard</span>
@@ -150,13 +151,13 @@ onUnmounted(() => {
<div class="history-header">
<h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
<div class="history-actions">
<button class="icon-btn" @click="copyAllUrls" title="Copy all URLs">
<button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" v-ripple>
<Copy size="18" />
</button>
<button class="icon-btn" @click="downloadJson" title="Download JSON">
<button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
<Download size="18" />
</button>
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear History">
<button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
<Trash2 size="18" />
</button>
</div>
@@ -175,13 +176,13 @@ onUnmounted(() => {
</div>
</div>
<div class="item-actions">
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy">
<button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
<Copy size="18" />
</button>
<a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
<ExternalLink size="18" />
</a>
<button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove">
<button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
<X size="18" />
</button>
</div>
@@ -205,13 +206,6 @@ onUnmounted(() => {
</template>
<style scoped>
.tool-container.full-width {
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.input-section {
display: flex;
flex-direction: column;

175
src/components/tools/UrlCleanerExceptionsModal.vue
View File

@@ -30,7 +30,7 @@ onUnmounted(() => {
const newRule = ref({
domainPattern: '',
keepParams: '',
keepParams: [],
keepHash: false,
keepAllParams: false
})
@@ -43,10 +43,12 @@ const localExceptions = computed({
const addRule = () => {
if (!newRule.value.domainPattern) return
const params = newRule.value.keepParams
.split(',')
.map(p => p.trim())
.filter(p => p)
// Flush any pending text in the param input before adding rule
if (pendingParamInput.value.trim()) {
addPendingParam(pendingParamInput.value)
}
const params = [...newRule.value.keepParams]
const existingRuleIndex = localExceptions.value.findIndex(
r => r.domainPattern === newRule.value.domainPattern
@@ -92,19 +94,48 @@ const addRule = () => {
// Reset form
newRule.value = {
domainPattern: '',
keepParams: '',
keepParams: [],
keepHash: false,
keepAllParams: false
}
pendingParamInput.value = ''
}
const pendingParamInput = ref('')
const handleParamInputKeydown = (e) => {
if (e.key === 'Enter' || e.key === ',' || e.key === ' ') {
e.preventDefault()
addPendingParam(pendingParamInput.value)
} else if (e.key === 'Backspace' && pendingParamInput.value === '') {
// Remove last param if backspace is pressed on empty input
if (newRule.value.keepParams.length > 0) {
newRule.value.keepParams.pop()
}
}
}
const addPendingParam = (val) => {
const cleanVals = val.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
if (cleanVals.length > 0) {
const updatedParams = [...new Set([...newRule.value.keepParams, ...cleanVals])]
newRule.value.keepParams = updatedParams
}
pendingParamInput.value = ''
}
const removeNewRuleParam = (paramToRemove) => {
newRule.value.keepParams = newRule.value.keepParams.filter(p => p !== paramToRemove)
}
const editRule = (rule) => {
newRule.value = {
domainPattern: rule.domainPattern,
keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
keepParams: Array.isArray(rule.keepParams) ? [...rule.keepParams] : [],
keepHash: !!rule.keepHash,
keepAllParams: !!rule.keepAllParams
}
pendingParamInput.value = ''
}
const removeRule = (id) => {
@@ -172,7 +203,7 @@ const resetToDefault = (ruleId) => {
<template>
<Teleport to="body">
<div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
<div class="modal-content">
<div class="modal-content glass-panel">
<div class="modal-header">
<h3>URL Cleaning Exceptions</h3>
<button class="close-btn" @click="$emit('close')">
@@ -195,25 +226,35 @@ const resetToDefault = (ruleId) => {
class="input-field"
@keyup.enter="addRule"
>
<input
v-model="newRule.keepParams"
placeholder="Keep params (comma separated, e.g. v, id)"
class="input-field"
@keyup.enter="addRule"
>
<div class="token-input-field input-field" @click="$refs.paramInput?.focus()">
<span v-for="param in newRule.keepParams" :key="param" class="token-badge">
{{ param }}
<button class="remove-token-btn" @click.stop="removeNewRuleParam(param)">
<X size="12" />
</button>
</span>
<input
ref="paramInput"
v-model="pendingParamInput"
placeholder="Params (Space, Comma or Enter to add)"
class="token-raw-input"
@keydown="handleParamInputKeydown"
@blur="addPendingParam(pendingParamInput)"
>
</div>
</div>
<div class="form-row checkbox-row">
<div class="checkbox-group">
<label class="checkbox-label">
<label class="checkbox-label" v-ripple>
<input type="checkbox" v-model="newRule.keepHash">
Keep Anchor (#)
</label>
<label class="checkbox-label">
<label class="checkbox-label" v-ripple>
<input type="checkbox" v-model="newRule.keepAllParams">
Keep all params
</label>
</div>
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern">
<button class="btn-neon small" @click="addRule" :disabled="!newRule.domainPattern" v-ripple>
<Plus size="16" /> Add Rule
</button>
</div>
@@ -262,6 +303,7 @@ const resetToDefault = (ruleId) => {
class="icon-btn"
@click="toggleRule(rule.id)"
:title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
v-ripple
>
<div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
</button>
@@ -271,10 +313,11 @@ const resetToDefault = (ruleId) => {
class="icon-btn delete-btn"
@click="removeRule(rule.id)"
title="Remove rule"
v-ripple
>
<Trash2 size="18" />
</button>
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule">
<button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule" v-ripple>
<RotateCcw size="16" /> Default
</button>
</div>
@@ -303,10 +346,6 @@ const resetToDefault = (ruleId) => {
}
.modal-content {
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 0;
max-width: 800px;
@@ -314,7 +353,6 @@ const resetToDefault = (ruleId) => {
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: var(--glass-shadow);
color: var(--text-color);
}
@@ -439,10 +477,63 @@ const resetToDefault = (ruleId) => {
outline: none;
}
.input-field:focus {
.input-field:focus, .token-input-field:focus-within {
border-color: var(--primary-accent);
}
.token-input-field {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
padding: 0.4rem 0.6rem;
cursor: text;
}
.token-raw-input {
flex: 1;
min-width: 150px;
background: none;
border: none;
color: var(--text-color);
outline: none;
font-size: 0.95rem;
padding: 0.2rem 0;
}
.token-raw-input:focus {
border: none !important;
box-shadow: none !important;
}
.token-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: rgba(var(--primary-accent-rgb), 0.15);
border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
color: var(--primary-accent);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.85rem;
}
.remove-token-btn {
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
color: inherit;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.remove-token-btn:hover {
opacity: 1;
}
.checkbox-label {
display: flex;
align-items: center;
@@ -450,6 +541,31 @@ const resetToDefault = (ruleId) => {
color: var(--text-secondary);
font-size: 0.9rem;
cursor: pointer;
padding: 0.4rem 0.8rem;
background: var(--toggle-bg);
border: 1px solid var(--toggle-border);
border-radius: 6px;
transition: all 0.2s ease;
user-select: none;
}
.checkbox-label:hover {
border-color: var(--toggle-hover-border);
color: var(--text-color);
}
.checkbox-label:has(input:checked) {
background: rgba(var(--primary-accent-rgb), 0.2);
border-color: var(--primary-accent);
color: var(--primary-accent);
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.btn-neon.small {
@@ -505,16 +621,7 @@ const resetToDefault = (ruleId) => {
flex-wrap: wrap;
}
.detail-tag {
font-size: 0.8rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.2rem 0.5rem;
border-radius: 4px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.4rem;
}
.remove-param-btn {
background: none;

7
src/components/tools/common/ExtensionStatus.vue
View File

@@ -76,7 +76,7 @@ onUnmounted(() => {
The extension is active and ready to process your clipboard in the background.
</p>
<div class="modal-actions">
<button class="btn-neon" @click="showModal = false">Got it!</button>
<button class="btn-neon" @click="showModal = false" v-ripple>Got it!</button>
</div>
</div>
</div>
@@ -132,16 +132,11 @@ onUnmounted(() => {
}
.modal-content {
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 2.5rem;
max-width: 500px;
width: 90%;
position: relative;
box-shadow: var(--glass-shadow);
text-align: center;
color: var(--text-color);
}

69
src/style.css
View File

@@ -47,12 +47,6 @@
--list-border: rgba(255, 255, 255, 0.12);
--header-bg: rgba(0, 0, 0, 0.6);
color: var(--text-color);
background-color: #242424;
/* Fallback */
background: var(--bg-gradient);
background-attachment: fixed;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -60,9 +54,9 @@
}
:root[data-theme="light"] {
--bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%);
--glass-bg: rgba(255, 255, 255, 0.85);
--glass-border: rgba(15, 23, 42, 0.12);
--bg-gradient: radial-gradient(circle at center, #ffffff 0%, #ddd 100%);
--glass-bg: rgba(255, 255, 255, 0.45);
--glass-border: rgba(15, 23, 42, 0.2);
--glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
--text-color: #0f172a;
--text-strong: #020617;
@@ -102,6 +96,12 @@ body {
overflow-x: hidden;
user-select: none;
-webkit-user-select: none;
color: var(--text-color);
background-color: var(--bg-gradient);
/* fallback but works if variable contains simple color */
background: var(--bg-gradient);
background-attachment: fixed;
}
.selectable {
@@ -143,6 +143,10 @@ body {
padding: 0.5rem;
}
.tool-container.full-width {
flex-direction: column;
}
.tool-panel {
width: 100%;
padding: 1rem;
@@ -302,6 +306,24 @@ button:focus {
border-color: var(--accent-cyan);
}
.btn-neon.primary {
background: var(--primary-accent);
color: #000;
border-color: var(--primary-accent);
font-weight: 600;
}
.btn-neon.primary:hover {
background: var(--primary-accent);
opacity: 0.9;
box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
}
:root[data-theme="light"] .btn-neon.primary:hover {
box-shadow: 0 0 18px rgba(14, 165, 233, 0.4);
}
.btn-neon:active {
transform: translateY(1px);
box-shadow: var(--button-active-shadow);
@@ -360,12 +382,20 @@ button:focus {
outline: none;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--primary-accent);
outline-offset: 2px;
border-radius: 4px;
}
input:focus,
select:focus,
textarea:focus,
.number-control:focus-within {
border-color: var(--primary-accent) !important;
box-shadow: 0 0 0 1px var(--primary-accent) !important;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* --- Global Checkbox Styles --- */
@@ -505,6 +535,19 @@ textarea:focus,
border: 1px solid rgba(0, 0, 0, 0.06);
}
.detail-tag {
font-size: 0.8rem;
background: var(--list-hover-bg);
border: 1px solid var(--list-border);
padding: 0.2rem 0.5rem;
border-radius: 4px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s ease;
}
/* --- Global Number Control Styles --- */
.number-control {
display: flex;
@@ -513,7 +556,10 @@ textarea:focus,
border: 1px solid var(--toggle-border);
border-radius: 8px;
overflow: hidden;
height: 40px;
height: auto;
min-height: 40px;
flex-wrap: wrap;
/* allow wrapping on very small screens */
}
.control-btn {
@@ -541,11 +587,12 @@ textarea:focus,
border: none;
color: var(--text-color);
flex: 1;
min-width: 60px;
min-width: 40px;
text-align: center;
font-size: 1rem;
font-weight: 400;
appearance: textfield;
padding: 0.2rem;
}
.number-input::-webkit-outer-spin-button,

22
src/workers/qrcode.worker.js Normal file
View File

@@ -0,0 +1,22 @@
import QRCode from 'qrcode'
self.onmessage = async (e) => {
const { id, text, ecc } = e.data
if (!text) {
self.postMessage({ id, svgContent: '' })
return
}
try {
const svgContent = await QRCode.toString(text, {
type: 'svg',
errorCorrectionLevel: ecc,
margin: 1,
})
self.postMessage({ id, svgContent })
} catch (err) {
self.postMessage({ id, error: err.message })
}
}