diff options
Diffstat (limited to 'src/tools/roman-numeral-converter/roman-numeral-converter.vue')
| -rw-r--r-- | src/tools/roman-numeral-converter/roman-numeral-converter.vue | 69 |
1 files changed, 47 insertions, 22 deletions
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue index 4b7a1a2..7f47e09 100644 --- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue +++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue @@ -1,26 +1,51 @@ <template> - <div> - <n-card title="Arabic to roman"> - <n-space align="center" justify="space-between"> - <n-input-number - v-model:value="inputNumeral" - :min="1" - style="width: 200px;" - :show-button="false" - /> - <div class="result">{{ outputRoman }}</div> - <n-button @click="copyRoman" secondary autofocus>Copy</n-button> - </n-space> - </n-card> - <br /> - <n-card title="Roman to arabic"> - <n-space align="center" justify="space-between"> - <n-input v-model:value="inputRoman" style="width: 200px;" /> - <div class="result">{{ outputNumeral }}</div> - <n-button @click="copyArabic" secondary autofocus>Copy</n-button> - </n-space> - </n-card> - </div> + <div> + <n-card title="Arabic to roman"> + <n-space + align="center" + justify="space-between" + > + <n-input-number + v-model:value="inputNumeral" + :min="1" + style="width: 200px;" + :show-button="false" + /> + <div class="result"> + {{ outputRoman }} + </div> + <n-button + secondary + autofocus + @click="copyRoman" + > + Copy + </n-button> + </n-space> + </n-card> + <br> + <n-card title="Roman to arabic"> + <n-space + align="center" + justify="space-between" + > + <n-input + v-model:value="inputRoman" + style="width: 200px;" + /> + <div class="result"> + {{ outputNumeral }} + </div> + <n-button + secondary + autofocus + @click="copyArabic" + > + Copy + </n-button> + </n-space> + </n-card> + </div> </template> <script setup lang="ts"> |