feat(new tool): MAC Address Converter

components.d.ts

@@ -91,7 +91,6 @@ declare module '@vue/runtime-core' {
     'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
-    IconMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
@@ -128,6 +127,7 @@ declare module '@vue/runtime-core' {
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
     LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressConverter: typeof import('./src/tools/mac-address-converter/mac-address-converter.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
@@ -171,8 +171,6 @@ declare module '@vue/runtime-core' {
     NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
-    NUpload: typeof import('naive-ui')['NUpload']
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['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 macAddressConverter } from './mac-address-converter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -143,7 +144,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      macAddressConverter,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',

src/tools/mac-address-converter/index.ts

@@ -0,0 +1,16 @@
+import { Devices } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Mac address converter',
+  path: '/mac-address-converter',
+  description: 'Change the format of a MAC address and chose between different formats',
+  keywords: [
+    'converter',
+    'mac',
+    'address',
+    'format',
+  ],
+  component: () => import('./mac-address-converter.vue'),
+  icon: Devices,
+});

src/tools/mac-address-converter/mac-address-converter.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import InputCopyable from '../../components/InputCopyable.vue';
+
+function convertMac(mac: string, group: number = 2, char: string = ':'): string {
+  mac = mac.replace(/[\W_]+/g, '');
+  return mac.match(new RegExp(`.{1,${group}}`, 'g'))!.join(char);
+}
+
+const input = ref('AA:BB:CC:DD:EE:FF');
+
+const formats = computed(() => [
+  {
+    label: 'Canonical IETF Format:',
+    value: convertMac(input.value.toLocaleLowerCase()),
+  },
+  {
+    label: 'Canonical Format:',
+    value: convertMac(input.value, 2, '.'),
+  },
+  {
+    label: 'Canonical IEEE Format:',
+    value: convertMac(input.value.toLocaleUpperCase(), 2, '-'),
+  },
+  {
+    label: 'Cisco:',
+    value: convertMac(input.value.toLocaleLowerCase(), 4, '.'),
+  },
+]);
+
+const inputLabelAlignmentConfig = {
+  labelPosition: 'left',
+  labelWidth: '120px',
+  labelAlign: 'right',
+};
+</script>
+
+<template>
+  <c-card>
+    <c-input-text
+      v-model:value="input"
+      label="MAC address:"
+      size="large"
+      placeholder="Type a MAC address"
+      clearable
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      mb-5
+    />
+
+    <div my-16px divider />
+
+    <InputCopyable
+      v-for="format in formats"
+      :key="format.label"
+      :value="format.value"
+      :label="format.label"
+      v-bind="inputLabelAlignmentConfig"
+      mb-1
+    />
+  </c-card>
+</template>