mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 08:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(lint): linter auto fix

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-22 23:31:40 +02:00
parent 8e29a97404
commit 086d31eab5
No known key found for this signature in database
GPG key ID: DBD997E935996158
54 changed files with 1122 additions and 1503 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/tools/qr-code-generator/index.ts
View file

@ -4,7 +4,8 @@ import type { ITool } from './../Tool';
export const tool: ITool = {
name: 'QR Code generator',
path: '/qrcode-generator',
description: 'Generate and download QR-code for an url or just a text and customize the background and foreground colors.',
description:
'Generate and download QR-code for an url or just a text and customize the background and foreground colors.',
keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
component: () => import('./qr-code-generator.vue'),
icon: Qrcode,

70
src/tools/qr-code-generator/qr-code-generator.vue
View file

@ -1,32 +1,16 @@
<template>
<n-card>
<n-grid
x-gap="12"
y-gap="12"
cols="1 600:3"
>
<n-grid x-gap="12" y-gap="12" cols="1 600:3">
<n-gi span="2">
<n-form
label-width="130"
label-placement="left"
>
<n-form label-width="130" label-placement="left">
<n-form-item label="Text:">
<n-input
v-model:value="text"
placeholder="Your link or text..."
/>
<n-input v-model:value="text" placeholder="Your link or text..." />
</n-form-item>
<n-form-item label="Foreground color:">
<n-color-picker
v-model:value="foreground"
:modes="['hex']"
/>
<n-color-picker v-model:value="foreground" :modes="['hex']" />
</n-form-item>
<n-form-item label="Background color:">
<n-color-picker
v-model:value="background"
:modes="['hex']"
/>
<n-color-picker v-model:value="background" :modes="['hex']" />
</n-form-item>
<n-form-item label="Error resistance:">
<n-select
@ -34,24 +18,12 @@
:options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
/>
</n-form-item>
</n-form>
</n-gi>
</n-form>
</n-gi>
<n-gi>
<n-space
justify="center"
align="center"
vertical
>
<n-image
:src="qrcode"
width="200"
/>
<n-button
secondary
@click="download"
>
Download qr-code
</n-button>
<n-space justify="center" align="center" vertical>
<n-image :src="qrcode" width="200" />
<n-button secondary @click="download"> Download qr-code </n-button>
</n-space>
</n-gi>
</n-grid>
@ -60,28 +32,26 @@
<script setup lang="ts">
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
import { useQRCode } from './useQRCode'
import { useQRCode } from './useQRCode';
import { ref } from 'vue';
import type { QRCodeErrorCorrectionLevel } from 'qrcode';
const foreground = ref('#000000ff');
const background = ref('#ffffffff');
const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium');
const foreground = ref('#000000ff')
const background = ref('#ffffffff')
const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium')
const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high'];
const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high']
const text = ref('https://it-tools.tech')
const text = ref('https://it-tools.tech');
const { qrcode } = useQRCode({
text,
color: {
background,
foreground
foreground,
},
errorCorrectionLevel,
options: { width: 1024 }
})
const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' })
options: { width: 1024 },
});
const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
</script>

2
src/tools/qr-code-generator/useQRCode.ts
View file

@ -28,7 +28,7 @@ export function useQRCode({
...options,
});
},
{ immediate: true }
{ immediate: true },
);
return { qrcode };