diff --git a/src/components/tools/QrCode.vue b/src/components/tools/QrCode.vue index 9385d19..32d3381 100644 --- a/src/components/tools/QrCode.vue +++ b/src/components/tools/QrCode.vue @@ -3,11 +3,12 @@ import { ref, watch, onMounted } from 'vue' import { Download } from 'lucide-vue-next' import QRCode from 'qrcode' import { useFillHeight } from '../../composables/useFillHeight' +import { useLocalStorage } from '../../composables/useLocalStorage' -const text = ref('') -const ecc = ref('M') -const size = ref(300) -const format = ref('png') +const text = useLocalStorage('text', '', 'qr-code') +const ecc = useLocalStorage('ecc', 'M', 'qr-code') +const size = useLocalStorage('size', 300, 'qr-code') +const format = useLocalStorage('format', 'png', 'qr-code') const svgContent = ref('') const previewRef = ref(null) @@ -250,12 +251,12 @@ const triggerDownload = (blob, filename) => { padding: 1rem; overflow: hidden; /* Prevent overflow if QR is too big */ min-height: 0; + container-type: size; } .qr-frame { - flex: 1; - width: 100%; - max-height: 100%; + width: calc(100cqmin - 4rem); + height: calc(100cqmin - 4rem); background: white; padding: 1rem; border-radius: 8px; @@ -268,10 +269,8 @@ const triggerDownload = (blob, filename) => { .qr-frame :deep(svg) { display: block; - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; + width: 100%; + height: 100%; } .actions { diff --git a/src/composables/useLocalStorage.js b/src/composables/useLocalStorage.js index 2e448a1..fa3f423 100644 --- a/src/composables/useLocalStorage.js +++ b/src/composables/useLocalStorage.js @@ -1,16 +1,20 @@ import { ref, watch } from 'vue' -export function useLocalStorage(key, defaultValue) { +export function useLocalStorage(key, defaultValue, toolPrefix = '') { + // Construct prefixed key: [toolPrefix-]key + const prefixPart = toolPrefix ? `${toolPrefix}-` : '' + const prefixedKey = `${prefixPart}${key}` + // Initialize state from local storage or default value - const storedValue = localStorage.getItem(key) + const storedValue = localStorage.getItem(prefixedKey) const data = ref(storedValue ? JSON.parse(storedValue) : defaultValue) // Watch for changes and update local storage watch(data, (newValue) => { if (newValue === null || newValue === undefined) { - localStorage.removeItem(key) + localStorage.removeItem(prefixedKey) } else { - localStorage.setItem(key, JSON.stringify(newValue)) + localStorage.setItem(prefixedKey, JSON.stringify(newValue)) } }, { deep: true })