feat: enhance QR generator with responsive layout, custom focus styles, and download options
This commit is contained in:
300
src/components/tools/QrCode.vue
Normal file
300
src/components/tools/QrCode.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { Download } from 'lucide-vue-next'
|
||||
import QRCode from 'qrcode'
|
||||
import { useFillHeight } from '../../composables/useFillHeight'
|
||||
|
||||
const text = ref('')
|
||||
const ecc = ref('M')
|
||||
const size = ref(300)
|
||||
const format = ref('png')
|
||||
const svgContent = ref('')
|
||||
const previewRef = ref(null)
|
||||
|
||||
const { height: previewHeight } = useFillHeight(previewRef, 40) // 40px margin bottom
|
||||
|
||||
const generateQR = async () => {
|
||||
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 = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (text.value) generateQR()
|
||||
})
|
||||
|
||||
const downloadFile = async () => {
|
||||
if (!text.value) return
|
||||
|
||||
const filename = `qr-code-${Date.now()}.${format.value}`
|
||||
|
||||
if (format.value === 'svg') {
|
||||
// For SVG download, we might want to inject the size if user specifically requested it,
|
||||
// but usually raw SVG is better.
|
||||
// If we want to support the "Size" dropdown for SVG download, we can regenerate with specific width.
|
||||
const svgWithSize = await QRCode.toString(text.value, {
|
||||
type: 'svg',
|
||||
errorCorrectionLevel: ecc.value,
|
||||
margin: 1,
|
||||
width: size.value
|
||||
})
|
||||
const blob = new Blob([svgWithSize], { type: 'image/svg+xml' })
|
||||
triggerDownload(blob, filename)
|
||||
} else {
|
||||
// For raster formats, render to canvas first
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
await QRCode.toCanvas(canvas, text.value, {
|
||||
errorCorrectionLevel: ecc.value,
|
||||
margin: 1,
|
||||
width: size.value
|
||||
})
|
||||
|
||||
const mime = `image/${format.value}`
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) triggerDownload(blob, filename)
|
||||
}, mime)
|
||||
} catch (err) {
|
||||
console.error('Download failed', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const triggerDownload = (blob, filename) => {
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = filename
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tool-container full-width">
|
||||
<div class="tool-panel">
|
||||
<div class="panel-header">
|
||||
<h2 class="tool-title">QR Generator</h2>
|
||||
</div>
|
||||
|
||||
<div class="input-section">
|
||||
<textarea
|
||||
v-model="text"
|
||||
class="tool-textarea"
|
||||
placeholder="Enter text to generate QR code..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="controls-section">
|
||||
<div class="control-group">
|
||||
<label>Error Correction</label>
|
||||
<select v-model="ecc" class="select-input">
|
||||
<option value="L">Low (7%)</option>
|
||||
<option value="M">Medium (15%)</option>
|
||||
<option value="Q">Quartile (25%)</option>
|
||||
<option value="H">High (30%)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Size (px)</label>
|
||||
<select v-model="size" class="select-input">
|
||||
<option :value="150">150x150</option>
|
||||
<option :value="300">300x300</option>
|
||||
<option :value="500">500x500</option>
|
||||
<option :value="1000">1000x1000</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Format</label>
|
||||
<select v-model="format" class="select-input">
|
||||
<option value="png">PNG</option>
|
||||
<option value="jpeg">JPG</option>
|
||||
<option value="webp">WebP</option>
|
||||
<option value="svg">SVG</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
|
||||
<div class="qr-frame" v-html="svgContent"></div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="action-btn" @click="downloadFile">
|
||||
<Download size="18" />
|
||||
Download {{ format.toUpperCase() }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tool-container.full-width {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Prevent scrolling, force fit */
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.input-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-color);
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.tool-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-accent);
|
||||
box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.1);
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.select-input {
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-color);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
overflow: hidden; /* Prevent overflow if QR is too big */
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.qr-frame {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-frame :deep(svg) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 6px;
|
||||
background: var(--primary-accent);
|
||||
color: #000;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user