aboutsummaryrefslogtreecommitdiff
path: root/src/tools/temperature-converter/temperature-converter.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools/temperature-converter/temperature-converter.vue')
-rw-r--r--src/tools/temperature-converter/temperature-converter.vue156
1 files changed, 77 insertions, 79 deletions
diff --git a/src/tools/temperature-converter/temperature-converter.vue b/src/tools/temperature-converter/temperature-converter.vue
index 2c33627..c563246 100644
--- a/src/tools/temperature-converter/temperature-converter.vue
+++ b/src/tools/temperature-converter/temperature-converter.vue
@@ -1,23 +1,3 @@
-<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: 100px">
- {{ title }}
- </n-input-group-label>
-
- <n-input-number
- v-model:value="units[key].ref"
- style="flex: 1"
- @update:value="() => update(key as TemperatureScale)"
- />
-
- <n-input-group-label style="width: 50px">
- {{ unit }}
- </n-input-group-label>
- </n-input-group>
- </div>
-</template>
-
<script setup lang="ts">
import _ from 'lodash';
import { reactive } from 'vue';
@@ -45,64 +25,64 @@ const units = reactive<
string | TemperatureScale,
{ title: string; unit: string; ref: number; toKelvin: (v: number) => number; fromKelvin: (v: number) => number }
>
->({
- kelvin: {
- title: 'Kelvin',
- unit: 'K',
- ref: 0,
- toKelvin: _.identity,
- fromKelvin: _.identity,
- },
- celsius: {
- title: 'Celsius',
- unit: '°C',
- ref: 0,
- toKelvin: convertCelsiusToKelvin,
- fromKelvin: convertKelvinToCelsius,
- },
- fahrenheit: {
- title: 'Fahrenheit',
- unit: '°F',
- ref: 0,
- toKelvin: convertFahrenheitToKelvin,
- fromKelvin: convertKelvinToFahrenheit,
- },
- rankine: {
- title: 'Rankine',
- unit: '°R',
- ref: 0,
- toKelvin: convertRankineToKelvin,
- fromKelvin: convertKelvinToRankine,
- },
- delisle: {
- title: 'Delisle',
- unit: '°De',
- ref: 0,
- toKelvin: convertDelisleToKelvin,
- fromKelvin: convertKelvinToDelisle,
- },
- newton: {
- title: 'Newton',
- unit: '°N',
- ref: 0,
- toKelvin: convertNewtonToKelvin,
- fromKelvin: convertKelvinToNewton,
- },
- reaumur: {
- title: 'Réaumur',
- unit: '°Ré',
- ref: 0,
- toKelvin: convertReaumurToKelvin,
- fromKelvin: convertKelvinToReaumur,
- },
- romer: {
- title: 'Rømer',
- unit: '°Rø',
- ref: 0,
- toKelvin: convertRomerToKelvin,
- fromKelvin: convertKelvinToRomer,
- },
-});
+ >({
+ kelvin: {
+ title: 'Kelvin',
+ unit: 'K',
+ ref: 0,
+ toKelvin: _.identity,
+ fromKelvin: _.identity,
+ },
+ celsius: {
+ title: 'Celsius',
+ unit: '°C',
+ ref: 0,
+ toKelvin: convertCelsiusToKelvin,
+ fromKelvin: convertKelvinToCelsius,
+ },
+ fahrenheit: {
+ title: 'Fahrenheit',
+ unit: '°F',
+ ref: 0,
+ toKelvin: convertFahrenheitToKelvin,
+ fromKelvin: convertKelvinToFahrenheit,
+ },
+ rankine: {
+ title: 'Rankine',
+ unit: '°R',
+ ref: 0,
+ toKelvin: convertRankineToKelvin,
+ fromKelvin: convertKelvinToRankine,
+ },
+ delisle: {
+ title: 'Delisle',
+ unit: '°De',
+ ref: 0,
+ toKelvin: convertDelisleToKelvin,
+ fromKelvin: convertKelvinToDelisle,
+ },
+ newton: {
+ title: 'Newton',
+ unit: '°N',
+ ref: 0,
+ toKelvin: convertNewtonToKelvin,
+ fromKelvin: convertKelvinToNewton,
+ },
+ reaumur: {
+ title: 'Réaumur',
+ unit: '°Ré',
+ ref: 0,
+ toKelvin: convertReaumurToKelvin,
+ fromKelvin: convertKelvinToReaumur,
+ },
+ romer: {
+ title: 'Rømer',
+ unit: '°Rø',
+ ref: 0,
+ toKelvin: convertRomerToKelvin,
+ fromKelvin: convertKelvinToRomer,
+ },
+ });
function update(key: TemperatureScale) {
const { ref: value, toKelvin } = units[key];
@@ -120,4 +100,22 @@ function update(key: TemperatureScale) {
update('kelvin');
</script>
-<style lang="less" scoped></style>
+<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: 100px">
+ {{ title }}
+ </n-input-group-label>
+
+ <n-input-number
+ v-model:value="units[key].ref"
+ style="flex: 1"
+ @update:value="() => update(key as TemperatureScale)"
+ />
+
+ <n-input-group-label style="width: 50px">
+ {{ unit }}
+ </n-input-group-label>
+ </n-input-group>
+ </div>
+</template>