added Contact QR Code Generator

components.d.ts

@@ -151,6 +151,7 @@ declare module '@vue/runtime-core' {
     PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']
     PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
     QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
+    ContactQRCodeGenerator: typeof import('./src/tools/qr-contact-info-generator/qr-contact-info-generator.vue')['default']
     RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
     RegexMemo: typeof import('./src/tools/regex-memo/regex-memo.vue')['default']
     'RegexMemo.content': typeof import('./src/tools/regex-memo/regex-memo.content.md')['default']

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as qrContactInfoGenerator } from './qr-contact-info-generator';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';

src/tools/qr-contact-info-generator/contact-info-qr-code-generator.ts

@@ -1,49 +0,0 @@
-import QRCode from 'qrcode';
-
-interface ContactInfo {
-  firstName: string;
-  lastName: string;
-  role: string;
-  phoneNumber: string;
-  email: string;
-  companyName: string;
-  companyWebsite: string;
-  companyAddress: string;
-}
-
-const generateContactInfoQRCode = (contactInfo: ContactInfo): void => {
-  const vCard = `
-BEGIN:VCARD
-VERSION:3.0
-N:${contactInfo.lastName};${contactInfo.firstName}
-FN:${contactInfo.firstName} ${contactInfo.lastName}
-ORG:${contactInfo.companyName}
-TITLE:${contactInfo.role}
-TEL;TYPE=WORK,VOICE:${contactInfo.phoneNumber}
-EMAIL;TYPE=PREF,INTERNET:${contactInfo.email}
-URL:${contactInfo.companyWebsite}
-ADR;TYPE=WORK,PREF:;;${contactInfo.companyAddress}
-END:VCARD
-  `;
-
-  QRCode.toDataURL(vCard, { errorCorrectionLevel: 'H' }, (err: Error | null, url: string) => {
-    if (err) {
-      console.error(err);
-      return;
-    }
-    console.log(url);
-  });
-};
-
-const contactInfo: ContactInfo = {
-  firstName: 'John',
-  lastName: 'Doe',
-  role: 'Software Engineer',
-  phoneNumber: '+1234567890',
-  email: 'john.doe@example.com',
-  companyName: 'Example Inc.',
-  companyWebsite: 'https://www.example.com',
-  companyAddress: '123 Example Street, City, Country'
-};
-
-generateContactInfoQRCode(contactInfo);

src/tools/qr-contact-info-generator/contact-info-qr-code-generator.vue

@@ -1,160 +0,0 @@
-<template>
-    <div class="qr-code-generator">
-      <h1>Contact Info QR Code Generator</h1>
-      <form @submit.prevent="generateQRCode">
-        <div>
-          <label for="firstName">First Name:</label>
-          <input type="text" v-model="contactInfo.firstName" required />
-        </div>
-        <div>
-          <label for="lastName">Last Name:</label>
-          <input type="text" v-model="contactInfo.lastName" required />
-        </div>
-        <div>
-          <label for="role">Role:</label>
-          <input type="text" v-model="contactInfo.role" required />
-        </div>
-        <div>
-          <label for="phoneNumber">Phone Number:</label>
-          <input type="tel" v-model="contactInfo.phoneNumber" required />
-        </div>
-        <div>
-          <label for="email">Email:</label>
-          <input type="email" v-model="contactInfo.email" required />
-        </div>
-        <div>
-          <label for="companyName">Company Name:</label>
-          <input type="text" v-model="contactInfo.companyName" required />
-        </div>
-        <div>
-          <label for="companyWebsite">Company Website:</label>
-          <input type="url" v-model="contactInfo.companyWebsite" required />
-        </div>
-        <div>
-          <label for="companyAddress">Company Address:</label>
-          <input type="text" v-model="contactInfo.companyAddress" required />
-        </div>
-        <button type="submit">Generate QR Code</button>
-      </form>
-      <div v-if="qrCodeUrl">
-        <h2>QR Code:</h2>
-        <img :src="qrCodeUrl" alt="Contact Info QR Code" />
-      </div>
-    </div>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import QRCode from 'qrcode';
-  
-  interface ContactInfo {
-    firstName: string;
-    lastName: string;
-    role: string;
-    phoneNumber: string;
-    email: string;
-    companyName: string;
-    companyWebsite: string;
-    companyAddress: string;
-  }
-  
-  export default defineComponent({
-    name: 'ContactInfoQRCodeGenerator',
-    setup() {
-      const contactInfo = ref<ContactInfo>({
-        firstName: '',
-        lastName: '',
-        role: '',
-        phoneNumber: '',
-        email: '',
-        companyName: '',
-        companyWebsite: '',
-        companyAddress: ''
-      });
-  
-      const qrCodeUrl = ref<string | null>(null);
-  
-      const generateQRCode = () => {
-        const vCard = `
-  BEGIN:VCARD
-  VERSION:3.0
-  N:${contactInfo.value.lastName};${contactInfo.value.firstName}
-  FN:${contactInfo.value.firstName} ${contactInfo.value.lastName}
-  ORG:${contactInfo.value.companyName}
-  TITLE:${contactInfo.value.role}
-  TEL;TYPE=WORK,VOICE:${contactInfo.value.phoneNumber}
-  EMAIL;TYPE=PREF,INTERNET:${contactInfo.value.email}
-  URL:${contactInfo.value.companyWebsite}
-  ADR;TYPE=WORK,PREF:;;${contactInfo.value.companyAddress}
-  END:VCARD
-        `;
-  
-        QRCode.toDataURL(vCard, { errorCorrectionLevel: 'H' }, (err: Error | null, url: string) => {
-          if (err) {
-            console.error(err);
-            return;
-          }
-          qrCodeUrl.value = url;
-        });
-      };
-  
-      return {
-        contactInfo,
-        qrCodeUrl,
-        generateQRCode
-      };
-    }
-  });
-  </script>
-  
-  <style scoped>
-  .qr-code-generator {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 20px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    background-color: #f9f9f9;
-  }
-  
-  .qr-code-generator h1 {
-    text-align: center;
-  }
-  
-  .qr-code-generator form {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .qr-code-generator form div {
-    margin-bottom: 10px;
-  }
-  
-  .qr-code-generator form label {
-    margin-bottom: 5px;
-  }
-  
-  .qr-code-generator form input {
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
-  .qr-code-generator button {
-    padding: 10px;
-    border: none;
-    border-radius: 4px;
-    background-color: #007bff;
-    color: white;
-    cursor: pointer;
-  }
-  
-  .qr-code-generator button:hover {
-    background-color: #0056b3;
-  }
-  
-  .qr-code-generator img {
-    display: block;
-    margin: 20px auto;
-  }
-  </style>

src/tools/qr-contact-info-generator/index.ts

@@ -1,5 +1,13 @@
-import ContactInfoQRCodeGenerator from './contact-info-qr-code-generator.vue';
+import { Qrcode } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
-export {
+export const tool = defineTool({
-  ContactInfoQRCodeGenerator,
+  name: translate('tools.qr-contact-info-generator.title'),
-};
+  path: '/qr-contact-info-generator',
+  description: translate('tools.qr-contact-info-generator.description'),
+  keywords: ['qr', 'contact', 'info', 'generator'],
+  component: () => import('./qr-contact-info-generator.vue'),
+  icon: Qrcode,
+  createdAt: new Date('2025-02-17'),
+});

src/tools/qr-contact-info-generator/qr-contact-info-generator.ts

@@ -0,0 +1,56 @@
+import { type MaybeRef, get } from '@vueuse/core';
+import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode';
+import { isRef, ref, watch } from 'vue';
+
+interface ContactInfo {
+  firstName: string;
+  lastName: string;
+  jobRole: string;
+  phoneNumber: string;
+  emailAddress: string;
+  companyName: string;
+  companyWebsite: string;
+  companyAddress: string;
+}
+
+interface QRCodeOptions {
+  foregroundColor?: string;
+  backgroundColor?: string;
+}
+
+export function generateContactQRCode(contact: MaybeRef<ContactInfo>, options: MaybeRef<QRCodeOptions> = {}): Promise<string> {
+  const vCard = ref(`
+BEGIN:VCARD
+VERSION:3.0
+FN:${get(contact).firstName} ${get(contact).lastName}
+ORG:${get(contact).companyName}
+TITLE:${get(contact).jobRole}
+TEL:${get(contact).phoneNumber}
+EMAIL:${get(contact).emailAddress}
+URL:${get(contact).companyWebsite}
+ADR:${get(contact).companyAddress}
+END:VCARD
+  `);
+
+  const qrOptions: QRCodeToDataURLOptions = {
+    errorCorrectionLevel: 'H' as QRCodeErrorCorrectionLevel,
+    type: 'image/png',
+    margin: 1,
+    color: {
+      dark: get(options).foregroundColor || '#000000ff',
+      light: get(options).backgroundColor || '#ffffffff',
+    },
+  };
+
+  const qrCodeDataUrl = ref('');
+
+  watch(
+    [vCard, options].filter(isRef),
+    async () => {
+      qrCodeDataUrl.value = await QRCode.toDataURL(get(vCard), qrOptions);
+    },
+    { immediate: true },
+  );
+
+  return qrCodeDataUrl.value;
+}

src/tools/qr-contact-info-generator/qr-contact-info-generator.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <h1>Contact QR Code Generator</h1>
+    <form @submit.prevent="generateQRCode">
+      <input v-model="contact.firstName" placeholder="First Name" required />
+      <input v-model="contact.lastName" placeholder="Last Name" required />
+      <input v-model="contact.jobRole" placeholder="Job Role" required />
+      <input v-model="contact.phoneNumber" placeholder="Phone Number" required />
+      <input v-model="contact.emailAddress" placeholder="Email Address" required />
+      <input v-model="contact.companyName" placeholder="Company Name" required />
+      <input v-model="contact.companyWebsite" placeholder="Company Website" required />
+      <input v-model="contact.companyAddress" placeholder="Company Address" required />
+      <input v-model="foregroundColor" placeholder="Foreground Color" />
+      <input v-model="backgroundColor" placeholder="Background Color" />
+      <button type="submit">Generate QR Code</button>
+    </form>
+    <div v-if="qrCodeDataUrl">
+      <img :src="qrCodeDataUrl" alt="Contact QR Code" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { generateContactQRCode } from './qr-contact-info-generator';
+
+export default defineComponent({
+  name: 'ContactQRCodeGenerator',
+  setup() {
+    const contact = ref({
+      firstName: '',
+      lastName: '',
+      jobRole: '',
+      phoneNumber: '',
+      emailAddress: '',
+      companyName: '',
+      companyWebsite: '',
+      companyAddress: ''
+    });
+    const foregroundColor = ref('#000000ff');
+    const backgroundColor = ref('#ffffffff');
+    const qrCodeDataUrl = ref<string | null>(null);
+
+    const generateQRCode = async () => {
+      qrCodeDataUrl.value = await generateContactQRCode(contact.value, {
+        foregroundColor: foregroundColor.value,
+        backgroundColor: backgroundColor.value
+      });
+    };
+
+    return {
+      contact,
+      foregroundColor,
+      backgroundColor,
+      qrCodeDataUrl,
+      generateQRCode
+    };
+  }
+});
+</script>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+button {
+  margin-top: 10px;
+}
+
+img {
+  margin-top: 20px;
+  max-width: 100%;
+}
+</style>