feat(new tool): Countries/ISO 3166 Searcher

components.d.ts

@@ -107,6 +107,7 @@ declare module '@vue/runtime-core' {
     Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
     Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
     Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    Iso3166Searcher: typeof import('./src/tools/iso-3166-searcher/iso-3166-searcher.vue')['default']
     JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
     JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
     JsonToCsv: typeof import('./src/tools/json-to-csv/json-to-csv.vue')['default']
@@ -129,6 +130,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']
+    NA: typeof import('naive-ui')['NA']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']

package.json

@@ -54,6 +54,7 @@
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
+    "countries-db": "^1.2.0",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
@@ -68,6 +69,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "iso-639-1": "^3.1.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",

src/tools/index.ts

@@ -12,6 +12,7 @@ import { tool as jsonToXml } from './json-to-xml';
 import { tool as regexTester } from './regex-tester';
 import { tool as regexMemo } from './regex-memo';
 import { tool as markdownToHtml } from './markdown-to-html';
+import { tool as iso3166Searcher } from './iso-3166-searcher';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -184,6 +185,7 @@ export const toolsByCategory: ToolCategory[] = [
       textDiff,
       numeronymGenerator,
       asciiTextDrawer,
+      iso3166Searcher,
     ],
   },
   {

src/tools/iso-3166-searcher/countries-db.d.ts

@@ -0,0 +1,35 @@
+declare module 'countries-db'{
+    export interface CountryInfo {
+        id: string
+        name: string
+        officialName: string
+        emoji: string
+        emojiUnicode: string
+        iso2: string
+        iso3: string
+        isoNumeric: string
+        geonameId: number
+        continentId: string
+        population: number
+        elevation: number
+        areaSqKm: number
+        coordinates: {
+          latitude: number
+          longitude: number
+        },
+        timezones: Array<string>
+        domain: string
+        currencyCode: string
+        currencyName: string
+        postalCodeFormat: string
+        postalCodeRegex: string
+        phoneCode: string
+        neighborCountryIds: Array<string>
+        languages: Array<string>
+        locales: Array<string>
+    }
+
+    export function getAllCountries(): {[id:string]: CountryInfo};
+    export function getCountry(id: string, property: string): string | Array<string> | number;
+    export function getCountry(id: string): CountryInfo;
+}

src/tools/iso-3166-searcher/index.ts

@@ -0,0 +1,12 @@
+import { Flag } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ISO 3166 Country Codes Searcher',
+  path: '/iso-3166-searcher',
+  description: 'Allow searching for Country Code (ISO 3166) and info',
+  keywords: ['iso', 'iso2', 'iso3', 'phone', 'currency', 'timezones', 'domain', 'lang', 'iso3166', 'country', 'ccltd', 'searcher'],
+  component: () => import('./iso-3166-searcher.vue'),
+  icon: Flag,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/iso-3166-searcher/iso-3166-searcher.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import CountriesDB from 'countries-db';
+import ISO6391 from 'iso-639-1';
+import { useFuzzySearch } from '@/composable/fuzzySearch';
+import useDebouncedRef from '@/composable/debouncedref';
+
+const searchQuery = useDebouncedRef('', 500);
+const countriesSearchData = Object.entries(CountriesDB.getAllCountries()).map(([_, info]) => {
+  return {
+    iso2: info.iso2,
+    iso3: info.iso3,
+    domain: info.domain,
+    name: `${info.name} ${info.officialName}`,
+    info,
+  };
+});
+const { searchResult } = useFuzzySearch({
+  search: searchQuery,
+  data: countriesSearchData,
+  options: {
+    keys: ['name', { name: 'iso3', weight: 3 }, { name: 'iso2', weight: 2 }, 'domain'],
+    threshold: 0.3,
+    isCaseSensitive: false,
+    useExtendedSearch: true,
+  },
+});
+
+function langToName(code: string) {
+  const name = ISO6391.getName(code);
+  if (!name) {
+    return code;
+  }
+  return `${code} (${name})`;
+}
+</script>
+
+<template>
+  <div mx-auto max-w-2400px important:flex-1>
+    <div flex items-center gap-3>
+      <c-input-text
+        v-model:value="searchQuery"
+        placeholder="Search Countries by name, iso2, iso3..."
+        mx-auto max-w-600px
+      >
+        <template #prefix>
+          <icon-mdi-search mr-6px color-black op-70 dark:color-white />
+        </template>
+      </c-input-text>
+    </div>
+
+    <div v-if="searchQuery.trim().length > 0">
+      <div
+        v-if="searchResult.length === 0"
+        mt-4
+        text-20px
+        font-bold
+      >
+        No results
+      </div>
+
+      <div v-else>
+        <div mt-4 text-20px font-bold>
+          Search result
+        </div>
+
+        <n-table>
+          <thead>
+            <th>Iso2/Iso3</th>
+            <th>Name and Info</th>
+          </thead>
+          <tbody>
+            <tr v-for="(result, ix) in searchResult" :key="ix">
+              <td style="vertical-align: top">
+                <input-copyable :value="result.iso2" />
+                <input-copyable :value="result.iso3" />
+              </td>
+              <td>
+                <input-copyable label-width="150px" label="Name" label-position="left" :value="result.name" mb-1 />
+                <input-copyable label-width="150px" label="Official Name" label-position="left" :value="result.info.officialName" mb-1 />
+                <input-copyable label-width="150px" label="Domain" label-position="left" :value="result.info.domain" mb-1 />
+                <input-copyable label-width="150px" label="Emoji" label-position="left" :value="`${result.info.emoji} (${result.info.emojiUnicode})`" mb-1 />
+                <input-copyable label-width="150px" label="ISO Num" label-position="left" :value="result.info.isoNumeric" mb-1 />
+                <input-copyable label-width="150px" label="Continent" label-position="left" :value="result.info.continentId" mb-1 />
+                <input-copyable label-width="150px" label="Elevation (m)" label-position="left" :value="result.info.elevation" mb-1 />
+                <input-copyable label-width="150px" label="Population" label-position="left" :value="result.info.population" mb-1 />
+                <input-copyable label-width="150px" label="Area (km²)" label-position="left" :value="result.info.areaSqKm" mb-1 />
+                <input-copyable label-width="150px" label="Timezones" label-position="left" :value="result.info.timezones.join('\n')" mb-1 />
+                <input-copyable label-width="150px" label="Currency" label-position="left" :value="`${result.info.currencyCode} / ${result.info.currencyName}`" mb-1 />
+                <input-copyable label-width="150px" label="Postal Code" label-position="left" :value="`${result.info.postalCodeFormat} / ${result.info.postalCodeRegex}`" mb-1 />
+                <input-copyable label-width="150px" label="Phone Code" label-position="left" :value="result.info.phoneCode" mb-1 />
+                <input-copyable label-width="150px" label="Neighbor Countries" label-position="left" :value="result.info.neighborCountryIds.map(id => CountriesDB.getCountry(id, 'name')?.toString() || id).join(', ')" mb-1 />
+                <input-copyable label-width="150px" label="Languages" label-position="left" :value="result.info.languages.map(langToName).join(', ')" mb-1 />
+                <input-copyable label-width="150px" label="Locales" label-position="left" :value="result.info.locales.map(langToName).join(', ')" mb-1 />
+                <!-- //NOSONAR --><n-a :href="`https://www.openstreetmap.org/#map=5/${result.info.coordinates.latitude}/${result.info.coordinates.longitude}`" target="_blank">
+                  &gt; See on OpenStreetMap
+                </n-a>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </div>
+    </div>
+  </div>
+</template>