Merge branch 'feat/units-converters' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -111,6 +111,7 @@
     "composerize": "^1.6.12",
     "countries-and-timezones": "^3.7.2",
     "countries-and-timezones": "^3.6.0",
+    "convert": "^5.4.1",
     "country-code-lookup": "^0.1.0",
     "crc": "^4.3.2",
     "cron-validator": "^1.3.1",

pnpm-lock.yaml

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import _ from 'lodash';
+import convert, { type Unit } from 'convert';
+
+const props = withDefaults(defineProps<{
+  supportedUnits: { [key: string]: string }
+  defaultUnit: string
+  labelWidth?: string
+  unitMinWidth?: string
+}>(), {
+  labelWidth: '150px',
+  unitMinWidth: '50px',
+});
+const { supportedUnits, defaultUnit, labelWidth, unitMinWidth } = toRefs(props);
+const units = reactive<
+  Record<
+    string,
+    { title: string; unit: string; ref: number }
+  >
+      >(Object.entries(supportedUnits.value).map(([key, label]) => ({
+        title: label,
+        unit: key,
+        ref: 1,
+      })).reduce((prev, current) => ({
+        ...prev,
+        [current.unit]: current,
+      }), {}));
+
+function update(key: string) {
+  if (!units[key]) {
+    return;
+  }
+  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(defaultUnit.value);
+</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="{ minWidth: unitMinWidth }">
+        {{ unit }}
+      </n-input-group-label>
+    </n-input-group>
+  </div>
+</template>

src/components/UnitsConverter.vue

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

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

@@ -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/angle-converter/index.ts

@@ -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 default-unit="m²" :supported-units="supportedUnits" label-width="150px" />
+</template>

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

@@ -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/area-converter/index.ts

@@ -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 default-unit="J" :supported-units="supportedUnits" label-width="150px" />
+</template>

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

@@ -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/energy-converter/index.ts

@@ -0,0 +1,38 @@
+<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',
+  'Mp': 'megapond',
+  'tf': 'tonne-force',
+  'metric tf': 'metric ton-force',
+  'megagram-force': 'megagram-force',
+};
+</script>
+
+<template>
+  <UnitsConverter default-unit="N" :supported-units="supportedUnits" label-width="150px" />
+</template>