it-tools/src/tools/roman-numeral-converter/roman-numeral-converter.vue

<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>
</template>

<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { ref, computed } from 'vue'
import { arabicToRoman, romanToArabic } from './roman-numeral-converter.service'

const inputNumeral = ref(42)
const outputRoman = computed(() => arabicToRoman(inputNumeral.value))

const inputRoman = ref('IVX')
const outputNumeral = computed(() => romanToArabic(inputRoman.value))

const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' })
const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' })

</script>

<style lang="less" scoped>
.result {
    font-size: 22px;
}
</style>