1 files changed, 46 insertions, 40 deletions
diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
index 1f31085..647c319 100644
--- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
+++ b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
@@ -1,44 +1,14 @@
-<template>
-  <div>
-    <n-form-item label="Default country code:">
-      <n-select v-model:value="defaultCountryCode" :options="countriesOptions" />
-    </n-form-item>
-
-    <c-input-text
-      v-model:value="rawPhone"
-      placeholder="Enter a phone number"
-      label="Phone number:"
-      :validation="validation"
-      mb-5
-    />
-
-    <n-table v-if="parsedDetails">
-      <tbody>
-        <tr v-for="{ label, value } in parsedDetails" :key="label">
-          <td>
-            <n-text strong>{{ label }}</n-text>
-          </td>
-          <td>
-            <span-copyable v-if="value" :value="value"></span-copyable>
-            <n-text v-else depth="3" italic>Unknown</n-text>
-          </td>
-        </tr>
-      </tbody>
-    </n-table>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { withDefaultOnError } from '@/utils/defaults';
-import { parsePhoneNumber, getCountries, getCountryCallingCode } from 'libphonenumber-js/max';
-import { booleanToHumanReadable } from '@/utils/boolean';
-import { useValidation } from '@/composable/validation';
+import { getCountries, getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js/max';
 import lookup from 'country-code-lookup';
 import {
   formatTypeToHumanReadable,
-  getFullCountryName,
   getDefaultCountryCode,
+  getFullCountryName,
 } from './phone-parser-and-formatter.models';
+import { withDefaultOnError } from '@/utils/defaults';
+import { booleanToHumanReadable } from '@/utils/boolean';
+import { useValidation } from '@/composable/validation';
 
 const rawPhone = ref('');
 const defaultCountryCode = ref(getDefaultCountryCode());
@@ -46,18 +16,22 @@ const validation = useValidation({
   source: rawPhone,
   rules: [
     {
-      validator: (value) => value === '' || /^[0-9 +\-()]+$/.test(value),
+      validator: value => value === '' || /^[0-9 +\-()]+$/.test(value),
       message: 'Invalid phone number',
     },
   ],
 });
 
 const parsedDetails = computed(() => {
-  if (!validation.isValid) return undefined;
+  if (!validation.isValid) {
+    return undefined;
+  }
 
   const parsed = withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined);
 
-  if (!parsed) return undefined;
+  if (!parsed) {
+    return undefined;
+  }
 
   return [
     {
@@ -103,10 +77,42 @@ const parsedDetails = computed(() => {
   ];
 });
 
-const countriesOptions = getCountries().map((code) => ({
+const countriesOptions = getCountries().map(code => ({
   label: `${lookup.byIso(code)?.country || code} (+${getCountryCallingCode(code)})`,
   value: code,
 }));
 </script>
 
-<style lang="less" scoped></style>
+<template>
+  <div>
+    <n-form-item label="Default country code:">
+      <n-select v-model:value="defaultCountryCode" :options="countriesOptions" />
+    </n-form-item>
+
+    <c-input-text
+      v-model:value="rawPhone"
+      placeholder="Enter a phone number"
+      label="Phone number:"
+      :validation="validation"
+      mb-5
+    />
+
+    <n-table v-if="parsedDetails">
+      <tbody>
+        <tr v-for="{ label, value } in parsedDetails" :key="label">
+          <td>
+            <n-text strong>
+              {{ label }}
+            </n-text>
+          </td>
+          <td>
+            <span-copyable v-if="value" :value="value" />
+            <n-text v-else depth="3" italic>
+              Unknown
+            </n-text>
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
+</template>