aboutsummaryrefslogtreecommitdiff
path: root/src/tools/integer-base-converter/integer-base-converter.vue
diff options
context:
space:
mode:
authorGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-06-25 15:00:50 +0200
committerGravatar GitHub <noreply@github.com> 2023-06-25 13:00:50 +0000
commit05ea54547515f7fb1eed5f31ccbde10e36041fb1 (patch)
tree535e78ce534818e9a66ff3a2335499a53db1fe4c /src/tools/integer-base-converter/integer-base-converter.vue
parent5c3bebfe62ab2942f6378356fbb6be40e389c70e (diff)
downloadit-tools-05ea54547515f7fb1eed5f31ccbde10e36041fb1.tar.gz
it-tools-05ea54547515f7fb1eed5f31ccbde10e36041fb1.tar.zst
it-tools-05ea54547515f7fb1eed5f31ccbde10e36041fb1.zip
refactor(ui): replaced some n-input to c-input (#505)
Diffstat (limited to 'src/tools/integer-base-converter/integer-base-converter.vue')
-rw-r--r--src/tools/integer-base-converter/integer-base-converter.vue31
1 files changed, 4 insertions, 27 deletions
diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue
index a4ff3fd..2445baa 100644
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -1,11 +1,8 @@
<script setup lang="ts">
import InputCopyable from '../../components/InputCopyable.vue';
import { convertBase } from './integer-base-converter.model';
-import { useStyleStore } from '@/stores/style.store';
import { getErrorMessageIfThrows } from '@/utils/error';
-const styleStore = useStyleStore();
-
const inputProps = {
'labelPosition': 'left',
'labelWidth': '170px',
@@ -37,31 +34,11 @@ const error = computed(() =>
<template>
<div>
<c-card>
- <div v-if="styleStore.isSmallScreen">
- <n-input-group>
- <n-input-group-label style="flex: 0 0 120px">
- Input number:
- </n-input-group-label>
- <n-input v-model:value="input" w-full :status="error ? 'error' : undefined" />
- </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" w-full />
- </n-input-group>
- </div>
+ <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-input-group v-else>
- <n-input-group-label style="flex: 0 0 120px">
- Input number:
- </n-input-group-label>
- <n-input v-model:value="input" :status="error ? 'error' : undefined" />
- <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-form-item 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 }}