feat(new tools): Units Converter

All units, pressure, power, angle, area, energy, force, length, mass, volume units converter

Fix CorentinTh#571

src/components/UnitsConverter.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import _ from 'lodash';
+import convert, { type Unit } from 'convert';
+
+const props = defineProps<{
+  supportedUnits: { [key: string]: string }
+  labelWidth?: string
+  unitWidth?: string
+}>();
+const { supportedUnits, labelWidth = '150px', unitWidth = '50px' } = toRefs(props);
+const units = reactive<
+  Record<
+    string,
+    { title: string; unit: string; ref: number }
+  >
+      >(Object.entries(supportedUnits).map(([key, label]) => ({
+        title: label,
+        unit: key,
+        ref: 1,
+      })).reduce((prev, current) => ({
+        ...prev,
+        [current.unit]: current,
+      }), {}));
+
+function update(key: string) {
+  const { ref: value } = units[key];
+
+  const converter = convert(value, key as Unit);
+
+  _.chain(units)
+    .omit(key)
+    .forEach(({ unit }) => {
+      try {
+        units[unit].ref = converter.to(unit as Unit);
+      }
+      catch (e: any) {
+        units[unit].ref = 0;
+      }
+    })
+    .value();
+}
+
+update('m');
+</script>
+
+<template>
+  <div>
+    <n-input-group v-for="[key, { title, unit }] in Object.entries(units)" :key="key" mb-3 w-full>
+      <n-input-group-label :style="{ width: labelWidth }">
+        {{ title }}
+      </n-input-group-label>
+
+      <n-input-number
+        v-model:value="units[key].ref"
+        style="flex: 1"
+        @update:value="() => update(key)"
+      />
+
+      <n-input-group-label :style="{ width: unitWidth }">
+        {{ unit }}
+      </n-input-group-label>
+    </n-input-group>
+  </div>
+</template>

src/tools/angle-converter/angle-converter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  rad: 'radian',
+  turn: 'turn',
+  deg: 'degree (°)',
+  gradian: 'gradian',
+  gon: 'gon',
+  grad: 'grad',
+};
+</script>
+
+<template>
+  <UnitsConverter :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/angle-converter/index.ts

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

src/tools/area-converter/area-converter.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  'm²': 'square meter',
+  'Pm²': 'square petameter',
+  'Tm²': 'square terameter',
+  'Gm²': 'square gigameter',
+  'Mm²': 'square megameter',
+  'km²': 'square kilometer',
+  'hm²': 'square hectometer',
+  'dam²': 'square decameter',
+  'dm²': 'square decimeter',
+  'cm²': 'square centimeter',
+  'mm²': 'square millimeter',
+  'μm²': 'square micrometer',
+  'nm²': 'square nanometer',
+  'pm²': 'square picometer',
+  'fm²': 'square femtometer',
+  'ac': 'acre',
+  'ca': 'centiare',
+  'da': 'deciare',
+  'are': 'are',
+  'daa': 'decare',
+  'ha': 'hectare',
+  'ft²': 'square foot (/ft2/sq ft)',
+  'in²': 'square inch (/in2/sq in)',
+  'yd²': 'square yard (yd2/sq yd)',
+  'mi²': 'square mile (mi2/sq mi)',
+};
+</script>
+
+<template>
+  <UnitsConverter :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/area-converter/index.ts

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

src/tools/energy-converter/energy-converter.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  J: 'joule',
+  PJ: 'petajoule',
+  TJ: 'terajoule',
+  GJ: 'gigajoule',
+  MJ: 'megajoule',
+  kJ: 'kilojoule',
+  hJ: 'hectojoule',
+  daJ: 'decajoule',
+  dJ: 'decijoule',
+  cJ: 'centijoule',
+  mJ: 'millijoule',
+  µJ: 'microjoule',
+  nJ: 'nanojoule',
+  pJ: 'picojoule',
+  fJ: 'femtojoule',
+  Wh: 'watt-hour',
+  PWh: 'petawatt-hour',
+  TWh: 'terawatt-hour',
+  GWh: 'gigawatt-hour',
+  MWh: 'megawatt-hour',
+  kWh: 'kilowatt-hour',
+  hWh: 'hectowatt-hour',
+  daWh: 'decawatt-hour',
+  dWh: 'deciwatt-hour',
+  cWh: 'centiwatt-hour',
+  mWh: 'milliwatt-hour',
+  µWh: 'microwatt-hour',
+  nWh: 'nanowatt-hour',
+  pWh: 'picowatt-hour',
+  fWh: 'femtowatt-hour',
+};
+</script>
+
+<template>
+  <UnitsConverter :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/energy-converter/index.ts

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

src/tools/force-converter/force-converter.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  'N': 'newton',
+  'PN': 'petanewton',
+  'TN': 'teranewton',
+  'GN': 'giganewton',
+  'MN': 'meganewton',
+  'kN': 'kilonewton',
+  'hN': 'hectonewton',
+  'daN': 'decanewton',
+  'dN': 'decinewton',
+  'cN': 'centinewton',
+  'mN': 'millinewton',
+  'µN': 'micronewton',
+  'nN': 'nanonewton',
+  'pN': 'piconewton',
+  'fN': 'femtonewton',
+  'dyn': 'dyne',
+  'lbf': 'pound of force',
+  'kip': 'kip',
+  'klb': 'klb',
+  'kipf': 'kipf',
+  'klbf': 'klbf',
+  'pdl': 'poundal',
+  'kgf': 'kilogram-force',
+  'kp': 'kilopond',
+  'tonne-force': 'tonne-force',
+  'metric ton-force': 'metric ton-force',
+  'megagram-force': 'megagram-force',
+  'megapond': 'megapond',
+  'tf': 'tf',
+  'Mp': 'Mp',
+};
+</script>
+
+<template>
+  <UnitsConverter :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/force-converter/index.ts

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

src/tools/index.ts

@@ -1,6 +1,16 @@
 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 manyUnitsConverter } from './many-units-converter';
+import { tool as powerConverter } from './power-converter';
+import { tool as volumeConverter } from './volume-converter';
+import { tool as pressureConverter } from './pressure-converter';
+import { tool as massConverter } from './mass-converter';
+import { tool as lengthConverter } from './length-converter';
+import { tool as forceConverter } from './force-converter';
+import { tool as energyConverter } from './energy-converter';
+import { tool as areaConverter } from './area-converter';
+import { tool as angleConverter } from './angle-converter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -147,11 +157,27 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator,
+      angleConverter,
+    ],
   },
   {
     name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
+    components: [
+      chronometer,
+      temperatureConverter,
+      benchmarkBuilder,
+      pressureConverter,
+      massConverter,
+      lengthConverter,
+      areaConverter,
+      volumeConverter,
+      forceConverter,
+      energyConverter,
+    ],
   },
   {
     name: 'Text',

src/tools/length-converter/index.ts

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

src/tools/length-converter/length-converter.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  m: 'meter',
+  Pm: 'petameter',
+  Tm: 'terameter',
+  Gm: 'gigameter',
+  Mm: 'megameter',
+  km: 'kilometer',
+  hm: 'hectometer',
+  dam: 'decameter',
+  dm: 'decimeter',
+  cm: 'centimeter',
+  mm: 'millimeter',
+  µm: 'micrometer',
+  nm: 'nanometer',
+  pm: 'picometer',
+  fm: 'femtometer',
+  ft: 'foot (ft/\')',
+  in: 'inch (")',
+  yd: 'yard',
+  mi: 'mile',
+  nmi: 'nautical mile (M/NM)',
+  ly: 'light-year',
+  pc: 'pica',
+};
+</script>
+
+<template>
+  <UnitsConverter :supported-units="supportedUnits" label-width="150px" />
+</template>