Docker/it-tools
Docker/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-07-24 15:49:37 +02:00
Code Issues Releases Activity

chore(lint): switched to a better lint config

Browse source
This commit is contained in:
Corentin Thomasset 2023-05-28 23:13:24 +02:00 • committed by Corentin THOMASSET
parent 4d2b037dbe
commit 33c9b6643f
178 changed files with 4105 additions and 3371 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/tools/roman-numeral-converter/roman-numeral-converter.vue
View file

@ -1,3 +1,45 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import {
MAX_ARABIC_TO_ROMAN,
MIN_ARABIC_TO_ROMAN,
arabicToRoman,
isValidRomanNumber,
romanToArabic,
} from './roman-numeral-converter.service';
import { useCopy } from '@/composable/copy';
import { useValidation } from '@/composable/validation';
const inputNumeral = ref(42);
const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
const { attrs: validationNumeral } = useValidation({
source: inputNumeral,
rules: [
{
validator: value => value >= MIN_ARABIC_TO_ROMAN && value <= MAX_ARABIC_TO_ROMAN,
message: `We can only convert numbers between ${MIN_ARABIC_TO_ROMAN.toLocaleString()} and ${MAX_ARABIC_TO_ROMAN.toLocaleString()}`,
},
],
});
const inputRoman = ref('XLII');
const outputNumeral = computed(() => romanToArabic(inputRoman.value));
const validationRoman = useValidation({
source: inputRoman,
rules: [
{
validator: value => isValidRomanNumber(value),
message: 'The input you entered is not a valid roman number',
},
],
});
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>
<template>
<div>
<c-card title="Arabic to roman">
@ -20,54 +62,14 @@
<div class="result">
{{ outputNumeral }}
</div>
<c-button :disabled="!validationRoman.isValid" @click="copyArabic"> Copy </c-button>
<c-button :disabled="!validationRoman.isValid" @click="copyArabic">
Copy
</c-button>
</div>
</c-card>
</div>
</template>
<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { ref, computed } from 'vue';
import { useValidation } from '@/composable/validation';
import {
arabicToRoman,
romanToArabic,
MAX_ARABIC_TO_ROMAN,
MIN_ARABIC_TO_ROMAN,
isValidRomanNumber,
} from './roman-numeral-converter.service';
const inputNumeral = ref(42);
const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
const { attrs: validationNumeral } = useValidation({
source: inputNumeral,
rules: [
{
validator: (value) => value >= MIN_ARABIC_TO_ROMAN && value <= MAX_ARABIC_TO_ROMAN,
message: `We can only convert numbers between ${MIN_ARABIC_TO_ROMAN.toLocaleString()} and ${MAX_ARABIC_TO_ROMAN.toLocaleString()}`,
},
],
});
const inputRoman = ref('XLII');
const outputNumeral = computed(() => romanToArabic(inputRoman.value));
const validationRoman = useValidation({
source: inputRoman,
rules: [
{
validator: (value) => isValidRomanNumber(value),
message: `The input you entered is not a valid roman number`,
},
],
});
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;