public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(base-converter): responsive input

Browse Source
This commit is contained in:
Corentin Thomasset 2022-04-24 23:22:52 +02:00
parent e21230bbd9
commit 0b0cbd55c3
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/tools/integer-base-converter/integer-base-converter.vue
View File

@ -1,27 +1,37 @@
<template> <template>
<div> <div>
<n-card> <n-card>
<div v-if="styleStore.isSmallScreen">
<n-input-group> <n-input-group>
<n-input-group-label style="width: 200px"> Input number: </n-input-group-label> <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
<n-input-number v-model:value="inputNumber" min="0" /> <n-input-number v-model:value="inputNumber" min="0" style="width: 100%" />
</n-input-group>
<n-input-group>
<n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
<n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100%" />
</n-input-group>
</div>
<n-input-group-label style="width: 200px"> Input base: </n-input-group-label> <n-input-group v-else>
<n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px" /> <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
<n-input-number v-model:value="inputNumber" min="0" />
<n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
<n-input-number v-model:value="inputBase" max="64" min="2" />
</n-input-group> </n-input-group>
<n-divider /> <n-divider />
<n-input-group> <n-input-group>
<n-input-group-label style="width: 200px"> Binary (2): </n-input-group-label> <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
<input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })" readonly /> <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })" readonly />
</n-input-group> </n-input-group>
<n-input-group> <n-input-group>
<n-input-group-label style="width: 200px"> Octale (8): </n-input-group-label> <n-input-group-label style="flex: 0 0 170px"> Octale (8): </n-input-group-label>
<input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })" readonly /> <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })" readonly />
</n-input-group> </n-input-group>
<n-input-group> <n-input-group>
<n-input-group-label style="width: 200px"> Decimal (10): </n-input-group-label> <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
<input-copyable <input-copyable
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })" :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
readonly readonly
@ -29,7 +39,7 @@
</n-input-group> </n-input-group>
<n-input-group> <n-input-group>
<n-input-group-label style="width: 200px"> Hexadecimal (16): </n-input-group-label> <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
<input-copyable <input-copyable
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })" :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
readonly readonly
@ -37,15 +47,15 @@
</n-input-group> </n-input-group>
<n-input-group> <n-input-group>
<n-input-group-label style="width: 200px"> Base64 (64): </n-input-group-label> <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
<input-copyable <input-copyable
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })" :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
readonly readonly
/> />
</n-input-group> </n-input-group>
<n-input-group> <n-input-group>
<n-input-group-label style="width: 90px"> Custom: </n-input-group-label> <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
<n-input-number v-model:value="outputBase" style="width: 110px" max="64" min="2" /> <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
<input-copyable <input-copyable
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })" :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
readonly readonly
@ -59,6 +69,9 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { convertBase } from './integer-base-converter.model'; import { convertBase } from './integer-base-converter.model';
import InputCopyable from '../../components/InputCopyable.vue'; import InputCopyable from '../../components/InputCopyable.vue';
import { useStyleStore } from '@/stores/style.store';
const styleStore = useStyleStore();
const inputNumber = ref(42); const inputNumber = ref(42);
const inputBase = ref(10); const inputBase = ref(10);