diff options
Diffstat (limited to 'src/tools/temperature-converter/temperature-converter.vue')
-rw-r--r-- | src/tools/temperature-converter/temperature-converter.vue | 156 |
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> |