feat(new tool): VAT Number Validator

components.d.ts

@@ -129,6 +129,7 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
@@ -185,6 +186,7 @@ declare module '@vue/runtime-core' {
     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
     UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
     UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    VatValidator: typeof import('./src/tools/vat-validator/vat-validator.vue')['default']
     WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
     XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
     XmlToJson: typeof import('./src/tools/xml-to-json/xml-to-json.vue')['default']

package.json

@@ -70,6 +70,7 @@
     "ibantools": "^4.3.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
+    "jsvat-next": "^3.0.4",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",

pnpm-lock.yaml

@@ -107,6 +107,9 @@ dependencies:
   json5:
     specifier: ^2.2.3
     version: 2.2.3
+  jsvat-next:
+    specifier: ^3.0.4
+    version: 3.0.4
   jwt-decode:
     specifier: ^3.1.2
     version: 3.1.2
@@ -3395,7 +3398,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 11.0.3(vue@3.3.4)
+      '@vueuse/shared': 11.1.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4037,8 +4040,8 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@11.0.3(vue@3.3.4):
-    resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
+  /@vueuse/shared@11.1.0(vue@3.3.4):
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
     dependencies:
       vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
@@ -6669,6 +6672,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /jsvat-next@3.0.4:
+    resolution: {integrity: sha512-Q9wV2xfBG8yaD4WkskQMLKWXy9vbU5GUABp9tIPldjp7eyLCGK4BLyIYxUP+lXr1E6pIbI0HlSBocF5YSqZduw==}
+    dev: false
+
   /jwt-decode@3.1.2:
     resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
     dev: false

src/tools/index.ts

@@ -2,6 +2,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 emailNormalizer } from './email-normalizer';
+import { tool as vatValidator } from './vat-validator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -188,7 +189,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      vatValidator,
+    ],
   },
 ];
 

src/tools/vat-validator/index.ts

@@ -0,0 +1,12 @@
+import { ReceiptTax } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'VAT Numbers Validator',
+  path: '/vat-validator',
+  description: 'Validate VAT Numbers',
+  keywords: ['vat', 'validator'],
+  component: () => import('./vat-validator.vue'),
+  icon: ReceiptTax,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/vat-validator/vat-validator.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { checkVAT, countries } from 'jsvat-next';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawVATNumber = ref('BE0411905847');
+const vatInfos = computed<{ isValid: boolean; infos: CKeyValueListItems }>(() => {
+  const vat = checkVAT(rawVATNumber.value, countries);
+  if (vat == null) {
+    return { isValid: false, infos: [] };
+  }
+  return {
+    isValid: vat.isValid,
+    infos: [
+      {
+        label: 'Is VAT Number valid ?',
+        value: vat.isValid,
+      },
+      {
+        label: 'Is VAT Number valid format ?',
+        value: vat.isValidFormat,
+      },
+      {
+        label: 'Cleaned VAT Number',
+        value: vat.value,
+      },
+      {
+        label: 'Country (name)',
+        value: vat.country?.name || 'Unknown',
+      },
+      {
+        label: 'Country (ISO2)',
+        value: vat.country?.isoCode?.short || 'unk',
+      },
+      {
+        label: 'Country (ISO3)',
+        value: vat.country?.isoCode?.long || 'unk',
+      },
+      {
+        label: 'Country (ISO Num)',
+        value: vat.country?.isoCode?.numeric || 0,
+      },
+    ],
+  };
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawVATNumber" placeholder="Enter a VAT number to check for validity..." test-id="vat-input" mb-2 />
+    <n-alert v-if="!vatInfos.isValid" type="error" mb-2>
+      Invalid VAT Number.
+    </n-alert>
+
+    <c-card v-if="vatInfos.infos.length > 0" title="VAT Number Infos">
+      <c-key-value-list :items="vatInfos.infos" data-test-id="vat-info" />
+    </c-card>
+  </div>
+</template>