feat(new tools): Units Converter

All units, pressure, power, angle, area, energy, force, length, mass, volume units converter
Many Units Converter: convert any unit string (ie 1d 3m) into best unit and selected target unit

Fix #571

components.d.ts

@@ -11,7 +11,9 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     '404.page': typeof import('./src/pages/404.page.vue')['default']
     About: typeof import('./src/pages/About.vue')['default']
+    AngleConverter: typeof import('./src/tools/angle-converter/angle-converter.vue')['default']
     App: typeof import('./src/App.vue')['default']
+    AreaConverter: typeof import('./src/tools/area-converter/area-converter.vue')['default']
     'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
     Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
     Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
@@ -75,8 +77,10 @@ declare module '@vue/runtime-core' {
     EmojiGrid: typeof import('./src/tools/emoji-picker/emoji-grid.vue')['default']
     EmojiPicker: typeof import('./src/tools/emoji-picker/emoji-picker.vue')['default']
     Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
+    EnergyConverter: typeof import('./src/tools/energy-converter/energy-converter.vue')['default']
     EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
     FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
+    ForceConverter: typeof import('./src/tools/force-converter/force-converter.vue')['default']
     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
     GitMemo: typeof import('./src/tools/git-memo/git-memo.vue')['default']
     'GitMemo.content': typeof import('./src/tools/git-memo/git-memo.content.md')['default']
@@ -125,11 +129,14 @@ declare module '@vue/runtime-core' {
     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
+    LengthConverter: typeof import('./src/tools/length-converter/length-converter.vue')['default']
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
     LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    ManyUnitsConverter: typeof import('./src/tools/many-units-converter/many-units-converter.vue')['default']
+    MassConverter: typeof import('./src/tools/mass-converter/mass-converter.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
     MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
@@ -179,6 +186,8 @@ declare module '@vue/runtime-core' {
     PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']
     PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']
     PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
+    PowerConverter: typeof import('./src/tools/power-converter/power-converter.vue')['default']
+    PressureConverter: typeof import('./src/tools/pressure-converter/pressure-converter.vue')['default']
     QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
     RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
     ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
@@ -204,11 +213,13 @@ declare module '@vue/runtime-core' {
     'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
     ToolCard: typeof import('./src/components/ToolCard.vue')['default']
     UlidGenerator: typeof import('./src/tools/ulid-generator/ulid-generator.vue')['default']
+    UnitsConverter: typeof import('./src/components/UnitsConverter.vue')['default']
     UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
     UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
     UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
     UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    VolumeConverter: typeof import('./src/tools/volume-converter/volume-converter.vue')['default']
     WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
     XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
     YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']

package.json

@@ -50,6 +50,7 @@
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
+    "convert": "^5.4.1",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",

pnpm-lock.yaml

@@ -50,6 +50,9 @@ dependencies:
   composerize-ts:
     specifier: ^0.6.2
     version: 0.6.2
+  convert:
+    specifier: ^5.4.1
+    version: 5.4.1
   country-code-lookup:
     specifier: ^0.1.0
     version: 0.1.0
@@ -3374,7 +3377,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.6.1(vue@3.3.4)
+      '@vueuse/shared': 11.1.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4016,10 +4019,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.6.1(vue@3.3.4):
-    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+  /@vueuse/shared@11.1.0(vue@3.3.4):
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4624,6 +4627,10 @@ packages:
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  /convert@5.4.1:
+    resolution: {integrity: sha512-n5Ob2tBccxPeSd0nIRjKqvzoXw8rk4fDRf3HIJlG9A2M4kTDdu3y+D1y5YrEIksbDLNEjxTyMhdXRA2ttSVPyw==}
+    dev: false
+
   /copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
     dependencies:
@@ -9185,8 +9192,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.5(vue@3.3.4):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+  /vue-demi@0.14.10(vue@3.3.4):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9200,8 +9207,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.5(vue@3.3.4):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9497,6 +9504,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

src/components/UnitsConverter.vue

@@ -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/tools/angle-converter/angle-converter.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/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 default-unit="m²" :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 default-unit="J" :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,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>

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,14 @@
 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 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';
@@ -75,6 +83,8 @@ import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
+import { tool as manyUnitsConverter } from './many-units-converter';
+import { tool as powerConverter } from './power-converter';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -147,11 +157,29 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator,
+      angleConverter,
+    ],
   },
   {
     name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
+    components: [
+      chronometer,
+      manyUnitsConverter,
+      temperatureConverter,
+      pressureConverter,
+      massConverter,
+      lengthConverter,
+      areaConverter,
+      volumeConverter,
+      forceConverter,
+      energyConverter,
+      powerConverter,
+      benchmarkBuilder,
+    ],
   },
   {
     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 default-unit="m" :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/many-units-converter/allunits.json

@@ -0,0 +1,14 @@
+[
+  "radian", "radians", "rad", "rads", "r", "turn", "turns", "degree", "degrees", "deg", "degs", "°", "gradian", "gradians", "gon", "gons", "grad", "grads", "grade", "grades",
+  "square meter", "square meters", "square metre", "square metres", "m²", "m2", "square petameter", "square petametre", "square petameters", "square petametres", "Pm²", "Pm2", "square terameter", "square terametre", "square terameters", "square terametres", "Tm²", "Tm2", "square gigameter", "square gigametre", "square gigameters", "square gigametres", "Gm²", "Gm2", "square megameter", "square megametre", "square megameters", "square megametres", "Mm²", "Mm2", "square kilometer", "square kilometre", "square kilometers", "square kilometres", "km²", "km2", "square hectometer", "square hectometre", "square hectometers", "square hectometres", "hm²", "hm2", "square decameter", "square decametre", "square decameters", "square decametres", "dam²", "dam2", "square decimeter", "square decimetre", "square decimeters", "square decimetres", "dm²", "dm2", "square centimeter", "square centimetre", "square centimeters", "square centimetres", "cm²", "cm2", "square millimeter", "square millimetre", "square millimeters", "square millimetres", "mm²", "mm2", "square micrometer", "square micrometre", "square micrometers", "square micrometres", "μm²", "µm²", "μm2", "µm2", "square nanometer", "square nanometre", "square nanometers", "square nanometres", "nm²", "nm2", "square picometer", "square picometre", "square picometers", "square picometres", "pm²", "pm2", "square femtometer", "square femtometre", "square femtometers", "square femtometres", "fm²", "fm2", "acre", "acres", "ac", "centiare", "centiares", "ca", "deciare", "deciares", "da", "are", "ares", "decare", "decares", "daa", "hectare", "hectares", "ha", "square foot", "square feet", "sq ft", "ft²", "ft2", "square inch", "square inches", "sq in", "in²", "in2", "square yard", "square yards", "sq yd", "yd²", "yd2", "square mile", "square miles", "sq mi", "mi²", "mi2",
+  "bit", "bits", "b", "pebibit", "pebibits", "Pib", "tebibit", "tebibits", "Tib", "gibibit", "gibibits", "Gib", "mebibit", "mebibits", "Mib", "kibibit", "kibibits", "Kib", "Kb", "KB", "petabit", "petabits", "Pb", "terabit", "terabits", "Tb", "gigabit", "gigabits", "Gb", "megabit", "megabits", "Mb", "kilobit", "kilobits", "kb", "hectobit", "hectobits", "hb", "decabit", "decabits", "dab", "decibit", "decibits", "db", "centibit", "centibits", "cb", "millibit", "millibits", "mb", "microbit", "microbits", "μb", "µb", "nanobit", "nanobits", "nb", "picobit", "picobits", "pb", "femtobit", "femtobits", "fb", "nibble", "nibbles", "semioctet", "semioctets", "halfbyte", "halfbytes", "byte", "bytes", "octect", "octects", "B", "pebibyte", "pebibytes", "PiB", "tebibyte", "tebibytes", "TiB", "gibibyte", "gibibytes", "GiB", "mebibyte", "mebibytes", "MiB", "kibibyte", "kibibytes", "KiB", "petabyte", "petabytes", "PB", "terabyte", "terabytes", "TB", "gigabyte", "gigabytes", "GB", "megabyte", "megabytes", "MB", "kilobyte", "kilobytes", "kB", "hectobyte", "hectobytes", "hB", "decabyte", "decabytes", "daB", "decibyte", "decibytes", "dB", "centibyte", "centibytes", "cB", "millibyte", "millibytes", "mB", "microbyte", "microbytes", "μB", "µB", "nanobyte", "nanobytes", "nB", "picobyte", "picobytes", "pB", "femtobyte", "femtobytes", "fB", "hextet", "hextets",
+  "joule", "joules", "J", "petajoule", "petajoules", "PJ", "terajoule", "terajoules", "TJ", "gigajoule", "gigajoules", "GJ", "megajoule", "megajoules", "MJ", "kilojoule", "kilojoules", "kJ", "hectojoule", "hectojoules", "hJ", "decajoule", "decajoules", "daJ", "decijoule", "decijoules", "dJ", "centijoule", "centijoules", "cJ", "millijoule", "millijoules", "mJ", "microjoule", "microjoules", "μJ", "µJ", "nanojoule", "nanojoules", "nJ", "picojoule", "picojoules", "pJ", "femtojoule", "femtojoules", "fJ", "watt-hour", "W⋅h", "W h", "Wh", "petawatt-hour", "petawatt-hours", "PW⋅h", "PW h", "PWh", "terawatt-hour", "terawatt-hours", "TW⋅h", "TW h", "TWh", "gigawatt-hour", "gigawatt-hours", "GW⋅h", "GW h", "GWh", "megawatt-hour", "megawatt-hours", "MW⋅h", "MW h", "MWh", "kilowatt-hour", "kilowatt-hours", "kW⋅h", "kW h", "kWh", "hectowatt-hour", "hectowatt-hours", "hW⋅h", "hW h", "hWh", "decawatt-hour", "decawatt-hours", "daW⋅h", "daW h", "daWh", "deciwatt-hour", "deciwatt-hours", "dW⋅h", "dW h", "dWh", "centiwatt-hour", "centiwatt-hours", "cW⋅h", "cW h", "cWh", "milliwatt-hour", "milliwatt-hours", "mW⋅h", "mW h", "mWh", "microwatt-hour", "microwatt-hours", "μW⋅h", "µW⋅h", "μW h", "µW h", "μWh", "µWh", "nanowatt-hour", "nanowatt-hours", "nW⋅h", "nW h", "nWh", "picowatt-hour", "picowatt-hours", "pW⋅h", "pW h", "pWh", "femtowatt-hour", "femtowatt-hours", "fW⋅h", "fW h", "fWh",
+  "newton", "newtons", "N", "petanewton", "petanewtons", "PN", "teranewton", "teranewtons", "TN", "giganewton", "giganewtons", "GN", "meganewton", "meganewtons", "MN", "kilonewton", "kilonewtons", "kN", "hectonewton", "hectonewtons", "hN", "decanewton", "decanewtons", "daN", "decinewton", "decinewtons", "dN", "centinewton", "centinewtons", "cN", "millinewton", "millinewtons", "mN", "micronewton", "micronewtons", "μN", "µN", "nanonewton", "nanonewtons", "nN", "piconewton", "piconewtons", "pN", "femtonewton", "femtonewtons", "fN", "dyne", "dynes", "dyn", "pound of force", "pound-force", "lbf", "kip", "klb", "kipf", "klbf", "poundal", "poundals", "pdl", "kilogram-force", "kilopond", "kiloponds", "kgf", "kp", "tonne-force", "metric ton-force", "megagram-force", "megapond", "tf", "Mp",
+  "meter", "meters", "metre", "metres", "m", "petameter", "petametre", "petameters", "petametres", "Pm", "terameter", "terametre", "terameters", "terametres", "Tm", "gigameter", "gigametre", "gigameters", "gigametres", "Gm", "megameter", "megametre", "megameters", "megametres", "Mm", "kilometer", "kilometre", "kilometers", "kilometres", "km", "hectometer", "hectometre", "hectometers", "hectometres", "hm", "decameter", "decametre", "decameters", "decametres", "dam", "decimeter", "decimetre", "decimeters", "decimetres", "dm", "centimeter", "centimetre", "centimeters", "centimetres", "cm", "millimeter", "millimetre", "millimeters", "millimetres", "mm", "micrometer", "micrometre", "micrometers", "micrometres", "μm", "µm", "nanometer", "nanometre", "nanometers", "nanometres", "nm", "picometer", "picometre", "picometers", "picometres", "pm", "femtometer", "femtometre", "femtometers", "femtometres", "fm", "foot", "feet", "ft", "\"", "US survey foot", "US survey feet", "U.S. survey foot", "U.S. survey feet", "inch", "inches", "in", "\"", "yard", "yards", "yd", "mile", "miles", "mi", "nautical mile", "nautical miles", "M", "NM", "nmi", "light-year", "light-years", "ly", "pica", "picas", "pc", "point", "points",
+  "gram", "grams", "g", "petagram", "petagrams", "Pg", "teragram", "teragrams", "Tg", "gigagram", "gigagrams", "Gg", "megagram", "megagrams", "Mg", "kilogram", "kilograms", "kg", "hectogram", "hectograms", "hg", "decagram", "decagrams", "dag", "decigram", "decigrams", "dg", "centigram", "centigrams", "cg", "milligram", "milligrams", "mg", "microgram", "micrograms", "μg", "µg", "nanogram", "nanograms", "ng", "picogram", "picograms", "pg", "femtogram", "femtograms", "fg", "tonne", "tonnes", "metric ton", "metric tons", "t", "kilotonne", "kilotonnes", "kt", "megatonne", "megatonnes", "Mt", "gigatonne", "gigatonnes", "Gt", "pound", "pounds", "lb", "stone", "stones", "st", "ounce", "ounces", "oz", "short ton", "short tons", "US ton", "US tons", "long ton", "long tons", "imperial ton", "imperial tons", "displacement ton", "displacement tons",
+  "watt", "watts", "W", "petawatt", "petawatts", "PW", "terawatt", "terawatts", "TW", "gigawatt", "gigawatts", "GW", "megawatt", "megawatts", "MW", "kilowatt", "kilowatts", "kW", "hectowatt", "hectowatts", "hW", "decawatt", "decawatts", "daW", "deciwatt", "deciwatts", "dW", "centiwatt", "centiwatts", "cW", "milliwatt", "milliwatts", "mW", "microwatt", "microwatts", "μW", "µW", "nanowatt", "nanowatts", "nW", "picowatt", "picowatts", "pW", "femtowatt", "femtowatts", "fW", "horsepower", "mechanical horsepower", "hp",
+  "pascal", "pascals", "Pa", "petapascal", "petapascals", "PPa", "terapascal", "terapascals", "TPa", "gigapascal", "gigapascals", "GPa", "megapascal", "megapascals", "MPa", "kilopascal", "kilopascals", "kPa", "hectopascal", "hectopascals", "hPa", "decapascal", "decapascals", "daPa", "decipascal", "decipascals", "dPa", "centipascal", "centipascals", "cPa", "millipascal", "millipascals", "mPa", "micropascal", "micropascals", "μPa", "µPa", "nanopascal", "nanopascals", "nPa", "picopascal", "picopascals", "pPa", "femtopascal", "femtopascals", "fPa", "bar", "bars", "petabar", "petabars", "Pbar", "terabar", "terabars", "Tbar", "gigabar", "gigabars", "Gbar", "megabar", "megabars", "Mbar", "kilobar", "kilobars", "kbar", "hectobar", "hectobars", "hbar", "decabar", "decabars", "dabar", "decibar", "decibars", "dbar", "centibar", "centibars", "cbar", "millibar", "millibars", "mbar", "microbar", "microbars", "μbar", "µbar", "nanobar", "nanobars", "nbar", "picobar", "picobars", "pbar", "femtobar", "femtobars", "fbar", "torr", "torrs", "Torr", "millitorr", "mTorr", "atmosphere", "atmospheres", "atm", "pound per square inch", "pounds per square inch", "psi", "lbf/in2", "lbf/in²",
+  "kelvin", "kelvins", "K", "petakelvin", "petakelvins", "PK", "terakelvin", "terakelvins", "TK", "gigakelvin", "gigakelvins", "GK", "megakelvin", "megakelvins", "MK", "kilokelvin", "kilokelvins", "kK", "hectokelvin", "hectokelvins", "hK", "decakelvin", "decakelvins", "daK", "decikelvin", "decikelvins", "dK", "centikelvin", "centikelvins", "cK", "millikelvin", "millikelvins", "mK", "microkelvin", "microkelvins", "μK", "µK", "nanokelvin", "nanokelvins", "nK", "picokelvin", "picokelvins", "pK", "femtokelvin", "femtokelvins", "fK", "fahrenheit", "F", "celsius", "C", "rankine", "R",
+  "second", "seconds", "s", "petasecond", "petaseconds", "Ps", "terasecond", "teraseconds", "Ts", "gigasecond", "gigaseconds", "Gs", "megasecond", "megaseconds", "Ms", "kilosecond", "kiloseconds", "ks", "hectosecond", "hectoseconds", "hs", "decasecond", "decaseconds", "das", "decisecond", "deciseconds", "ds", "centisecond", "centiseconds", "cs", "millisecond", "milliseconds", "ms", "microsecond", "microseconds", "μs", "µs", "nanosecond", "nanoseconds", "ns", "picosecond", "picoseconds", "ps", "femtosecond", "femtoseconds", "fs", "minute", "minutes", "min", "hour", "hours", "h", "milliday", "millidays", "md", "day", "days", "d", "week", "weeks", "wk", "fortnight", "fortnights", "fn", "month", "months", "mo", "year", "years", "a", "y", "yr", "decade", "decades", "dec", "century", "centuries", "millennium", "millennia", "moment", "moments", "shake", "shakes", "time unit", "TU", "svedberg", "svedbergs", "S",
+  "cubic meter", "cubic meters", "cubic metre", "cubic metres", "stere", "steres", "m³", "m3", "cubic petameter", "cubic petameters", "Pm3", "Pm³", "cubic terameter", "cubic terameters", "Tm3", "Tm³", "cubic gigameter", "cubic gigameters", "Gm3", "Gm³", "cubic megameter", "cubic megameters", "Mm3", "Mm³", "cubic kilometer", "cubic kilometers", "km3", "km³", "cubic hectometer", "cubic hectometers", "hm3", "hm³", "cubic decameter", "cubic decameters", "dam3", "dam³", "cubic decimeter", "cubic decimeters", "dm3", "dm³", "cubic centimeter", "cubic centimeters", "cm3", "cm³", "cubic millimeter", "cubic millimeters", "mm3", "mm³", "cubic micrometer", "cubic micrometers", "μm3", "µm3", "μm³", "µm³", "cubic nanometer", "cubic nanometers", "nm3", "nm³", "cubic picometer", "cubic picometers", "pm3", "pm³", "cubic femtometer", "cubic femtometers", "fm3", "fm³", "liter", "liters", "litre", "litres", "l", "L", "petaliter", "petaliters", "petalitre", "petalitres", "Pl", "PL", "teraliter", "teraliters", "teralitre", "teralitres", "Tl", "TL", "gigaliter", "gigaliters", "gigalitre", "gigalitres", "Gl", "GL", "megaliter", "megaliters", "megalitre", "megalitres", "Ml", "ML", "kiloliter", "kiloliters", "kilolitre", "kilolitres", "kl", "kL", "hectoliter", "hectoliters", "hectolitre", "hectolitres", "hl", "hL", "decaliter", "decaliters", "decalitre", "decalitres", "dal", "daL", "deciliter", "deciliters", "decilitre", "decilitres", "dl", "dL", "centiliter", "centiliters", "centilitre", "centilitres", "cl", "cL", "milliliter", "milliliters", "millilitre", "millilitres", "ml", "mL", "microliter", "microliters", "microlitre", "microlitres", "μl", "µl", "μL", "µL", "nanoliter", "nanoliters", "nanolitre", "nanolitres", "nl", "nL", "picoliter", "picoliters", "picolitre", "picolitres", "pl", "pL", "femtoliter", "femtoliters", "femtolitre", "femtolitres", "fl", "fL", "cubic mile", "cubic miles", "cu mi", "mi3", "mi³", "acre-foot", "acre-feet", "ac⋅ft", "ac ft", "cubic yard", "cubic yards", "cu yd", "yd3", "yd³", "cubic foot", "cubic feet", "cu ft", "ft3", "ft³", "board foot", "board feet", "cubic inch", "cubic inches", "cu in", "in3", "in³", "measurement ton", "measurement tons", "MTON", "imperial barrel", "imperial barrels", "imp bbl", "imperial bushel", "imperial bushels", "imp bsh", "imp bu", "imperial peck", "imperial pecks", "pk", "imp pk", "imperial gallon", "imperial gallons", "imp gal", "imperial quart", "imperial quarts", "imp qt", "imperial pint", "imperial pints", "imp pt", "imperial fluid ounce", "imperial fluid ounces", "imp fl oz", "teaspoon", "teaspoons", "US teaspoon", "US teaspoons", "tsp", "tablespoon", "tablespoons", "US tablespoon", "US tablespoons", "tbsp", "US fluid ounce", "US fluid ounces", "fl oz", "fl. oz.", "oz. fl.", "cup", "cups", "c", "US legal cup", "US legal cups", "US lc", "pint", "pints", "US liquid pint", "US liquid pints", "pt", "p", "quart", "quarts", "US liquid quart", "US liquid quarts", "qt", "gallon", "gallons", "US liquid gallon", "US liquid gallons", "gal", "US bushel", "US bushels", "US bsh", "US bu", "US peck", "US pk", "US dry gallon", "US dry gal", "US dry barrel", "US dry barrels", "US dry bbl", "US dry quart", "US dry qt", "US dry pint", "US dry pt"
+]

src/tools/many-units-converter/index.ts

@@ -0,0 +1,32 @@
+import { Calculator } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Many Units Converter',
+  path: '/many-units-converter',
+  description: 'Convert all kind of units',
+  keywords: [
+    'units',
+    'uom',
+    'metric',
+    'imperial',
+    'measurement',
+    'mass',
+    'weight',
+    'angle',
+    'area',
+    'data',
+    'energy',
+    'force',
+    'length',
+    'mass',
+    'power',
+    'pressure',
+    'temperature',
+    'time',
+    'volume',
+    'converter'],
+  component: () => import('./many-units-converter.vue'),
+  icon: Calculator,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/many-units-converter/many-units-converter.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import _ from 'lodash';
+import { type Unit, convertMany } from 'convert';
+import allUnits from './allunits.json';
+
+const allUnitsSorted = _.uniq(allUnits).sort();
+
+const inputExpression = ref('');
+const outputUnit = ref('');
+const result = computed(() => {
+  try {
+    const best = convertMany(inputExpression.value).to('best');
+    try {
+      return {
+        best,
+        selected: outputUnit.value
+          ? convertMany(inputExpression.value).to(outputUnit.value as Unit)
+          : '',
+      };
+    }
+    catch (e: any) {
+      return {
+        best,
+        error: e.toString(),
+      };
+    }
+  }
+  catch (e: any) {
+    return {
+      error: e.toString(),
+    };
+  }
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputExpression"
+      label="Units expression"
+      placeholder="Please enter an unit expression, ie '1d 2m'"
+      mb-2
+    />
+    <c-select
+      v-model:value="outputUnit"
+      label-position="left"
+      label-width="100px"
+      label="Target Unit:"
+      :options="allUnitsSorted"
+      placeholder="Select the target unit"
+      searchable
+    />
+
+    <n-divider />
+
+    <c-card v-if="result.best" title="Result" mb-2>
+      <input-copyable label="Best Target Unit" :value="result.best" mb-1 />
+      <input-copyable v-if="result.selected" :label="`Selected Target Unit (${outputUnit})`" :value="result.selected" />
+    </c-card>
+    <c-alert v-if="result.error && inputExpression">
+      {{ result.error }}
+    </c-alert>
+  </div>
+</template>

src/tools/mass-converter/index.ts

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

src/tools/mass-converter/mass-converter.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  'g': 'gram',
+  'Pg': 'petagram',
+  'Tg': 'teragram',
+  'Gg': 'gigagram',
+  'Mg': 'megagram',
+  'kg': 'kilogram',
+  'hg': 'hectogram',
+  'dag': 'decagram',
+  'dg': 'decigram',
+  'cg': 'centigram',
+  'mg': 'milligram',
+  'μg': 'microgram',
+  'ng': 'nanogram',
+  'pg': 'picogram',
+  'fg': 'femtogram',
+  'tonne': 'tonne',
+  't': 'metric ton',
+  'kt': 'kilotonne',
+  'Mt': 'megatonne',
+  'Gt': 'gigatonne',
+  'lb': 'pound',
+  'st': 'stone',
+  'oz': 'ounce',
+  'short ton': 'short ton',
+  'US ton': 'US ton',
+  'long ton': 'long ton',
+  'imperial ton': 'imperial ton',
+  'displacement ton': 'displacement ton',
+};
+</script>
+
+<template>
+  <UnitsConverter default-unit="g" :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/power-converter/index.ts

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

src/tools/power-converter/power-converter.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  W: 'watt',
+  PW: 'petawatt',
+  TW: 'terawatt',
+  GW: 'gigawatt',
+  MW: 'megawatt',
+  kW: 'kilowatt',
+  hW: 'hectowatt',
+  daW: 'decawatt',
+  dW: 'deciwatt',
+  cW: 'centiwatt',
+  mW: 'milliwatt',
+  μW: 'microwatt',
+  nW: 'nanowatt',
+  pW: 'picowatt',
+  fW: 'femtowatt',
+  horsepower: 'horsepower',
+  hp: 'mechanical horsepower',
+}; ;
+</script>
+
+<template>
+  <UnitsConverter default-unit="W" :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/pressure-converter/index.ts

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

src/tools/pressure-converter/pressure-converter.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  'Pa': 'pascal',
+  'PPa': 'pettapascal',
+  'TPa': 'terapascal',
+  'GPa': 'gigapascal',
+  'MPa': 'megapascal',
+  'kPa': 'kilopascal',
+  'hPa': 'hectopascal',
+  'daPa': 'decapascal',
+  'dPa': 'decipascal',
+  'cPa': 'centipascal',
+  'mPa': 'millipascal',
+  'μPa': 'micropascal',
+  'nPa': 'nanopascal',
+  'pPa': 'picopascal',
+  'fPa': 'femtopascal',
+  'bar': 'bar',
+  'Pbar': 'petabar',
+  'Tbar': 'terabar',
+  'Gbar': 'gigabar',
+  'Mbar': 'megabar',
+  'kbar': 'kilobar',
+  'hbar': 'hectobar',
+  'dabar': 'decabar',
+  'dbar': 'decibar',
+  'cbar': 'centibar',
+  'mbar': 'millibar',
+  'μbar': 'microbar',
+  'nbar': 'nanobar',
+  'pbar': 'picobar',
+  'fbar': 'femtobar',
+  'Torr': 'torr',
+  'mTorr': 'millitorr',
+  'atm': 'atmosphere',
+  'psi': 'pound per square inch',
+  'lbf/in2': 'lbf/in2',
+};
+</script>
+
+<template>
+  <UnitsConverter default-unit="Pa" :supported-units="supportedUnits" label-width="150px" />
+</template>

src/tools/volume-converter/index.ts

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

src/tools/volume-converter/volume-converter.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import UnitsConverter from '@/components/UnitsConverter.vue';
+
+const supportedUnits = {
+  'm³': 'cubic meter/stere',
+  'Pm³': 'cubic petameter',
+  'Tm³': 'cubic terameter',
+  'Gm³': 'cubic gigameter',
+  'Mm³': 'cubic megameter',
+  'km³': 'cubic kilometer',
+  'hm³': 'cubic hectometer',
+  'dam³': 'cubic decameter',
+  'dm³': 'cubic decimeter',
+  'cm³': 'cubic centimeter',
+  'mm³': 'cubic millimeter',
+  'µm³': 'cubic micrometer',
+  'nm³': 'cubic nanometer',
+  'pm³': 'cubic picometer',
+  'fm³': 'cubic femtometer',
+  'L': 'liter',
+  'Pl': 'petaliter',
+  'Tl': 'teraliter',
+  'Gl': 'gigaliter',
+  'Ml': 'megaliter',
+  'kL': 'kiloliter',
+  'hL': 'hectoliter',
+  'daL': 'decaliter',
+  'dL': 'deciliter',
+  'cL': 'centiliter',
+  'mL': 'milliliter',
+  'µL': 'microliter',
+  'nL': 'nanoliter',
+  'pL': 'picoliter',
+  'fL': 'femtoliter',
+  'mi³': 'cubic mile',
+  'ac ft': 'acre-foot',
+  'yd³': 'cubic yard',
+  'ft³': 'cubic foot',
+  'board feet': 'board feet',
+  'in³': 'cubic inch',
+  'MTON': 'measurement ton',
+  'imp bbl': 'imperial barrel',
+  'imp bsh': 'imperial bushel',
+  'pk': 'imperial peck',
+  'imp gal': 'imperial gallon',
+  'imp qt': 'imperial quart',
+  'imp pt': 'imperial pint',
+  'imp fl oz': 'imperial fluid ounce',
+  'tsp': 'teaspoon',
+  'tbsp': 'tablespoon',
+  'fl oz': 'US fluid ounce',
+  'c': 'cup',
+  'US lc': 'US legal cup',
+  'pt': 'US liquid pint',
+  'qt': 'US liquid quart',
+  'gal': 'US liquid gallon',
+  'US bsh': 'US bushel',
+  'US pk': 'US peck',
+  'US dry gal': 'US dry gallon',
+  'US dry bbl': 'US dry barrel',
+  'US dry qt': 'US dry quart',
+  'US dry pt': 'US dry pint',
+};
+</script>
+
+<template>
+  <UnitsConverter default-unit="m³" :supported-units="supportedUnits" label-width="150px" />
+</template>