mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-05 13:57:10 -04:00
e336ebe6bb
Handle common languages prefix : 0x, 0o, 0b (C/C#), &H, &O, &B (vb.net) Handle common languages suffix : I (vb.net), U/L (C/C# unsigned and long), n (js bigint) Handle case insensitive for base < 36 (ie, hexa) ( 36 = décimal + lower letters) Fix #694
106 lines
3.2 KiB
Vue
106 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import InputCopyable from '../../components/InputCopyable.vue';
|
|
import { convertBase, hasNumberPrefix } from './integer-base-converter.model';
|
|
import { getErrorMessageIfThrows } from '@/utils/error';
|
|
|
|
const inputProps = {
|
|
'labelPosition': 'left',
|
|
'labelWidth': '170px',
|
|
'labelAlign': 'right',
|
|
'readonly': true,
|
|
'mb-2': '',
|
|
} as const;
|
|
|
|
const input = ref('42');
|
|
const inputBase = ref(10);
|
|
const outputBase = ref(42);
|
|
|
|
const hasInputNumberPrefix = computed(() => hasNumberPrefix(input.value));
|
|
|
|
function errorlessConvert(...args: Parameters<typeof convertBase>) {
|
|
try {
|
|
return convertBase(...args);
|
|
}
|
|
catch (err) {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
const error = computed(() =>
|
|
getErrorMessageIfThrows(() =>
|
|
convertBase({ value: input.value, fromBase: inputBase.value, toBase: outputBase.value }),
|
|
),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<c-card>
|
|
<c-input-text v-model:value="input" label="Input number" placeholder="Put your number here (ex: 42)" label-position="left" label-width="110px" mb-2 label-align="right" />
|
|
|
|
<n-form-item v-if="!hasInputNumberPrefix" label="Input base" label-placement="left" label-width="110" :show-feedback="false">
|
|
<n-input-number v-model:value="inputBase" max="64" min="2" placeholder="Put your input base here (ex: 10)" w-full />
|
|
</n-form-item>
|
|
|
|
<n-alert v-if="error" style="margin-top: 25px" type="error">
|
|
{{ error }}
|
|
</n-alert>
|
|
<n-divider />
|
|
|
|
<InputCopyable
|
|
label="Binary (2)"
|
|
v-bind="inputProps"
|
|
:value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
|
|
placeholder="Binary version will be here..."
|
|
/>
|
|
|
|
<InputCopyable
|
|
label="Octal (8)"
|
|
v-bind="inputProps"
|
|
:value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
|
|
placeholder="Octal version will be here..."
|
|
/>
|
|
|
|
<InputCopyable
|
|
label="Decimal (10)"
|
|
v-bind="inputProps"
|
|
:value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
|
|
placeholder="Decimal version will be here..."
|
|
/>
|
|
|
|
<InputCopyable
|
|
label="Hexadecimal (16)"
|
|
v-bind="inputProps"
|
|
:value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
|
|
placeholder="Hexadecimal version will be here..."
|
|
/>
|
|
|
|
<InputCopyable
|
|
label="Base64 (64)"
|
|
v-bind="inputProps"
|
|
:value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
|
|
placeholder="Base64 version will be here..."
|
|
/>
|
|
|
|
<div flex items-baseline>
|
|
<n-input-group style="width: 160px; margin-right: 10px">
|
|
<n-input-group-label> Custom: </n-input-group-label>
|
|
<n-input-number v-model:value="outputBase" max="64" min="2" />
|
|
</n-input-group>
|
|
|
|
<InputCopyable
|
|
flex-1
|
|
v-bind="inputProps"
|
|
:value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })"
|
|
:placeholder="`Base ${outputBase} will be here...`"
|
|
/>
|
|
</div>
|
|
</c-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.n-input-group:not(:first-child) {
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|