diff options
Diffstat (limited to 'src/tools/integer-base-converter/integer-base-converter.vue')
| -rw-r--r-- | src/tools/integer-base-converter/integer-base-converter.vue | 93 |
1 files changed, 48 insertions, 45 deletions
diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue index c480f4a..058d831 100644 --- a/src/tools/integer-base-converter/integer-base-converter.vue +++ b/src/tools/integer-base-converter/integer-base-converter.vue @@ -22,59 +22,54 @@ <n-alert v-if="error" style="margin-top: 25px" type="error">{{ error }}</n-alert> <n-divider /> - <n-input-group> - <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label> - <input-copyable - :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })" - readonly - placeholder="Binary version will be here..." - /> - </n-input-group> + <input-copyable + label="Binary (2)" + v-bind="inputProps" + :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })" + placeholder="Binary version will be here..." + /> - <n-input-group> - <n-input-group-label style="flex: 0 0 170px"> Octal (8): </n-input-group-label> - <input-copyable - :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })" - readonly - placeholder="Octal version will be here..." - /> - </n-input-group> + <input-copyable + label="Octal (8)" + v-bind="inputProps" + :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })" + placeholder="Octal version will be here..." + /> - <n-input-group> - <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label> - <input-copyable - :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })" - readonly - placeholder="Decimal version will be here..." - /> - </n-input-group> + <input-copyable + label="Decimal (10)" + v-bind="inputProps" + :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })" + placeholder="Decimal version will be here..." + /> - <n-input-group> - <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label> - <input-copyable - :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })" - readonly - placeholder="Decimal version will be here..." - /> - </n-input-group> + <input-copyable + label="Hexadecimal (16)" + v-bind="inputProps" + :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })" + placeholder="Hexadecimal version will be here..." + /> + + <input-copyable + 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> - <n-input-group> - <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label> - <input-copyable - :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })" - readonly - placeholder="Base64 version will be here..." - /> - </n-input-group> - <n-input-group> - <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label> - <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" /> <input-copyable + flex-1 + v-bind="inputProps" :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })" - readonly :placeholder="`Base ${outputBase} will be here...`" /> - </n-input-group> + </div> </c-card> </div> </template> @@ -88,6 +83,14 @@ import InputCopyable from '../../components/InputCopyable.vue'; const styleStore = useStyleStore(); +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); |