feat(new tool): Currency Converter

Fix part of #571

components.d.ts

@@ -64,6 +64,7 @@ declare module '@vue/runtime-core' {
     'CTextCopyable.demo': typeof import('./src/ui/c-text-copyable/c-text-copyable.demo.vue')['default']
     CTooltip: typeof import('./src/ui/c-tooltip/c-tooltip.vue')['default']
     'CTooltip.demo': typeof import('./src/ui/c-tooltip/c-tooltip.demo.vue')['default']
+    CurrencyConverter: typeof import('./src/tools/currency-converter/currency-converter.vue')['default']
     DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
     'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
@@ -129,11 +130,12 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
@@ -142,9 +144,9 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NSwitch: typeof import('naive-ui')['NSwitch']
+    NP: typeof import('naive-ui')['NP']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     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']

package.json

@@ -55,6 +55,8 @@
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
+    "currency-codes-ts": "^3.0.0",
+    "currency-exchanger-js": "^1.0.4",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.6",
     "email-normalizer": "^1.0.0",

pnpm-lock.yaml

@@ -65,6 +65,12 @@ dependencies:
   crypto-js:
     specifier: ^4.1.1
     version: 4.1.1
+  currency-codes-ts:
+    specifier: ^3.0.0
+    version: 3.0.0
+  currency-exchanger-js:
+    specifier: ^1.0.4
+    version: 1.0.4
   date-fns:
     specifier: ^2.29.3
     version: 2.29.3
@@ -3360,7 +3366,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.11.1(vue@3.3.4)
+      '@vueuse/shared': 11.1.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,19 +3999,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.11.1(vue@3.3.4):
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.10(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+  /@vueuse/shared@11.1.0(vue@3.3.4):
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4638,6 +4644,14 @@ packages:
     resolution: {integrity: sha512-M1VdV3hpBAsd1Zzvqcvf63wgDpcwCuS4WiNEVFpJ0s33MGO2sVDTfswYq0EPypCmESrCzmgL8h68DTzJuSDbVA==}
     dev: false
 
+  /cross-fetch@3.1.8:
+    resolution: {integrity: sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==}
+    dependencies:
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -4721,6 +4735,21 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /currency-codes-ts@3.0.0:
+    resolution: {integrity: sha512-ZJeCpq5uY2t8dDl4xdF15shkp5o8jrHcD4lHftK/O8j8xTHlXg0E5YhpZbRJvnLRaKe+JQh1/q1AI9Wc2Dl3Nw==}
+    engines: {node: '>=14'}
+    dependencies:
+      lodash-es: 4.17.21
+    dev: false
+
+  /currency-exchanger-js@1.0.4:
+    resolution: {integrity: sha512-znd30Ueuf3IFTwNEuSy45uBEZZXJIUG9Z4Cpym5VxSxafx/CazPCRx5NMrqOFE2ZYPXezo7FfJLa8SuES3PnYw==}
+    dependencies:
+      cross-fetch: 3.1.8
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /dash-get@1.0.2:
     resolution: {integrity: sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==}
     dev: false
@@ -7071,6 +7100,18 @@ packages:
     resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
     dev: true
 
+  /node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-fetch@3.2.10:
     resolution: {integrity: sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -8485,6 +8526,10 @@ packages:
       url-parse: 1.5.10
     dev: true
 
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
     dependencies:
@@ -9292,6 +9337,10 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
   /webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: true
@@ -9332,6 +9381,13 @@ packages:
       webidl-conversions: 7.0.0
     dev: true
 
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
     dependencies:

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -16,6 +17,12 @@ const transformers = {
     fromQuery: (value: string) => value.toLowerCase() === 'true',
     toQuery: (value: boolean) => (value ? 'true' : 'false'),
   },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };
 
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}

src/tools/currency-converter/currency-converter.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { code, countries, country } from 'currency-codes-ts';
+import converter from 'currency-exchanger-js';
+import moneysData from './moneys.json';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const allCurrencies = Object.entries(moneysData).map(([k, v]) => ({ value: k, label: v || k }));
+const otherCurrencies = useQueryParamOrStorage<{ name: string }[]>({ name: 'to', storageName: 'currency-conv:others', defaultValue: [{ name: 'usd' }] });
+const currentCurrency = useQueryParamOrStorage<string>({ name: 'from', storageName: 'currency-conv:cur', defaultValue: 'eur' });
+const amount = ref(1);
+const currentDatetime = ref(Date.now());
+
+const convertedCurrencies = computedAsync<Record<string, number>>(async () => {
+  const currentCurrencyValue = currentCurrency.value;
+  const currentDatetimeValue = currentDatetime.value;
+  const amountValue = amount.value;
+  const otherCurrenciesValues = otherCurrencies.value;
+
+  let result = {};
+  for (const targetCurrency of otherCurrenciesValues) {
+    const value = await converter.convertOnDate(amountValue, currentCurrencyValue, targetCurrency.name, new Date(currentDatetimeValue));
+    result = { ...result, [targetCurrency.name]: value };
+  }
+  return result;
+});
+
+const countryToCurrenciesInput = ref('France');
+const allCountries = countries();
+const countryToCurrenciesOutput = computed(() => country(countryToCurrenciesInput.value));
+
+const currencyToCountriesInput = ref('eur');
+const currencyToCountriesOutput = computed(() => code(currencyToCountriesInput.value));
+</script>
+
+<template>
+  <div>
+    <c-card title="Currency Converter" mb-2>
+      <c-select
+        v-model:value="currentCurrency"
+        label="From"
+        label-position="left"
+        searchable
+        :options="allCurrencies"
+        mb-2
+      />
+      <n-form-item label="Amount:" label-placement="left" mb-2>
+        <n-input-number v-model:value="amount" :min="0" />
+      </n-form-item>
+
+      <n-form-item label="For Date:" label-placement="left" mb-2>
+        <n-date-picker
+          v-model:value="currentDatetime"
+          type="date"
+        />
+      </n-form-item>
+
+      <c-card title="Converted currencies">
+        <n-dynamic-input
+          v-model:value="otherCurrencies"
+          show-sort-button
+          :on-create="() => ({ name: 'eur' })"
+        >
+          <template #default="{ value }">
+            <div flex flex-wrap items-center gap-1>
+              <n-select
+                v-model:value="value.name"
+                filterable
+                placeholder="Please select a currency"
+                :options="allCurrencies"
+                w-full
+              />
+              <input-copyable readonly :value="convertedCurrencies ? convertedCurrencies[value.name] : 0" />
+            </div>
+          </template>
+        </n-dynamic-input>
+      </c-card>
+    </c-card>
+
+    <c-card title="Country to Currencies" mb-2>
+      <c-select
+        v-model:value="countryToCurrenciesInput"
+        label="Country"
+        label-position="left"
+        searchable
+        :options="allCountries"
+      />
+
+      <n-divider />
+
+      <ul>
+        <li v-for="(currency, ix) in countryToCurrenciesOutput" :key="ix">
+          {{ currency.currency }} [{{ currency.code }}/{{ currency.number }} - {{ currency.digits }}digits] (also in: {{ currency.countries?.join(', ') }})
+        </li>
+      </ul>
+    </c-card>
+
+    <c-card title="Currencies to Countries" mb-2>
+      <c-select
+        v-model:value="currencyToCountriesInput"
+        label="Currency"
+        label-position="left"
+        searchable
+        :options="allCurrencies"
+      />
+
+      <n-divider />
+
+      <n-p v-if="currencyToCountriesOutput">
+        {{ currencyToCountriesOutput.currency }} [{{ currencyToCountriesOutput.code }}/{{ currencyToCountriesOutput.number }} - {{ currencyToCountriesOutput.digits }}digits]
+      </n-p>
+
+      <ul v-if="currencyToCountriesOutput">
+        <li v-for="(countryName, ix) in currencyToCountriesOutput.countries" :key="ix">
+          {{ countryName }}
+        </li>
+      </ul>
+    </c-card>
+  </div>
+</template>

src/tools/currency-converter/currency-exchanger-js.d.ts

@@ -0,0 +1,4 @@
+declare module 'currency-exchanger-js'{
+    export function convertOnDate(value: number,fromCurrency: string,toCurrency: string,inputDate: Date): number;
+    export function convert(value: number,fromCurrency: string,toCurrency: string): number;
+}

src/tools/currency-converter/index.ts

@@ -0,0 +1,12 @@
+import { Currency } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Currency Converter',
+  path: '/currency-converter',
+  description: 'Convert currency values using ExchangeRate-API',
+  keywords: ['currency', 'converter'],
+  component: () => import('./currency-converter.vue'),
+  icon: Currency,
+  createdAt: new Date('2024-08-15'),
+});

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 currencyConverter } from './currency-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -112,6 +113,7 @@ export const toolsByCategory: ToolCategory[] = [
       tomlToYaml,
       xmlToJson,
       jsonToXml,
+      currencyConverter,
     ],
   },
   {