mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 15:15:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(roman-numeral-converter): optimize logic for copy button

Browse source
This commit is contained in:
Carsten Götzinger 2023-04-07 18:14:35 +02:00
parent 3fe9dc4c0c
commit 8529acbdc5
1 changed files with 10 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,27 +2,25 @@
<div> <div>
<n-card title="Arabic to roman"> <n-card title="Arabic to roman">
<n-space align="center" justify="space-between"> <n-space align="center" justify="space-between">
<n-form-item :feedback="validationNumeral.message" :validation-status="validationNumeral.status"> <n-form-item v-bind="validationNumeral">
<n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" /> <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
</n-form-item> </n-form-item>
<div class="result"> <div class="result">
<span v-html="outputRoman"></span> <span v-html="outputRoman"></span>
</div> </div>
<n-button secondary autofocus :disabled="validationNumeral.status === 'error'" @click="copyRoman"> <n-button secondary autofocus :disabled="isCopyRomanDisabled()" @click="copyRoman"> Copy </n-button>
Copy
</n-button>
</n-space> </n-space>
</n-card> </n-card>
<br /> <br />
<n-card title="Roman to arabic"> <n-card title="Roman to arabic">
<n-space align="center" justify="space-between"> <n-space align="center" justify="space-between">
<n-form-item :feedback="validationRoman.message" :validation-status="validationRoman.status"> <n-form-item v-bind="validationRoman">
<n-input v-model:value="inputRoman" style="width: 200px" /> <n-input v-model:value="inputRoman" style="width: 200px" />
</n-form-item> </n-form-item>
<div class="result"> <div class="result">
{{ outputNumeral }} {{ outputNumeral }}
</div> </div>
<n-button secondary autofocus :disabled="validationRoman.status === 'error'" @click="copyArabic"> <n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
Copy Copy
</n-button> </n-button>
</n-space> </n-space>
@ -45,7 +43,7 @@ import {
const inputNumeral = ref(42); const inputNumeral = ref(42);
const outputRoman = computed(() => arabicToRoman(inputNumeral.value)); const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
const validationNumeral = useValidation({ const { attrs: validationNumeral } = useValidation({
source: inputNumeral, source: inputNumeral,
rules: [ rules: [
{ {
@ -58,7 +56,7 @@ const validationNumeral = useValidation({
const inputRoman = ref('XLII'); const inputRoman = ref('XLII');
const outputNumeral = computed(() => romanToArabic(inputRoman.value)); const outputNumeral = computed(() => romanToArabic(inputRoman.value));
const validationRoman = useValidation({ const { attrs: validationRoman } = useValidation({
source: inputRoman, source: inputRoman,
rules: [ rules: [
{ {
@ -70,6 +68,10 @@ const validationRoman = useValidation({
const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' }); 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' }); const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' });
function isCopyRomanDisabled() {
return validationNumeral.validationStatus === 'error' || inputNumeral.value > 3999;
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>