107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { type ConverterId, SKIP_PRINTABLE_ASCII_RE, converters } from './text-to-unicode.service';
|
|
import { useCopy } from '@/composable/copy';
|
|
|
|
const converterId = ref<ConverterId>('fullUnicode');
|
|
const skipAscii = ref(true);
|
|
|
|
const inputText = ref('');
|
|
const unicodeFromText = computed(() =>
|
|
inputText.value.trim() === ''
|
|
? ''
|
|
: converters[converterId.value].escape(inputText.value, skipAscii.value ? SKIP_PRINTABLE_ASCII_RE : undefined),
|
|
);
|
|
const { copy: copyUnicode } = useCopy({ source: unicodeFromText });
|
|
|
|
const inputUnicode = ref('');
|
|
const textFromUnicode = computed(() =>
|
|
inputUnicode.value.trim() === '' ? '' : converters[converterId.value].unescape(inputUnicode.value),
|
|
);
|
|
const { copy: copyText } = useCopy({ source: textFromUnicode });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="outer" flex flex-col gap-6>
|
|
<div class="controls">
|
|
<c-select
|
|
v-model:value="converterId"
|
|
searchable
|
|
label="Conversion type:"
|
|
:options="Object.entries(converters).map(([key, val]) => ({ label: val.name, value: key }))"
|
|
/>
|
|
</div>
|
|
<c-card class="card" title="Text to Unicode">
|
|
<c-input-text
|
|
v-model:value="inputText"
|
|
multiline
|
|
placeholder="e.g. 'Hello Avengers'"
|
|
label="Enter text to convert to Unicode"
|
|
autosize
|
|
autofocus
|
|
raw-text
|
|
test-id="text-to-unicode-input"
|
|
/>
|
|
<c-input-text
|
|
v-model:value="unicodeFromText"
|
|
label="Unicode from your text"
|
|
multiline
|
|
raw-text
|
|
readonly
|
|
mt-2
|
|
placeholder="The unicode representation of your text will be here"
|
|
test-id="text-to-unicode-output"
|
|
/>
|
|
<div mt-2 flex justify-start>
|
|
<n-form-item label="Skip ASCII?" :show-feedback="false" label-placement="left">
|
|
<n-switch v-model:value="skipAscii" />
|
|
</n-form-item>
|
|
</div>
|
|
<div mt-2 flex justify-center>
|
|
<c-button :disabled="!unicodeFromText" @click="copyUnicode()"> Copy unicode to clipboard </c-button>
|
|
</div>
|
|
</c-card>
|
|
<c-card class="card" title="Unicode to Text">
|
|
<c-input-text
|
|
v-model:value="inputUnicode"
|
|
multiline
|
|
placeholder="Input Unicode"
|
|
label="Enter unicode to convert to text"
|
|
autosize
|
|
raw-text
|
|
test-id="unicode-to-text-input"
|
|
/>
|
|
<c-input-text
|
|
v-model:value="textFromUnicode"
|
|
label="Text from your Unicode"
|
|
multiline
|
|
raw-text
|
|
readonly
|
|
mt-2
|
|
placeholder="The text representation of your unicode will be here"
|
|
test-id="unicode-to-text-output"
|
|
/>
|
|
<div mt-2 flex justify-center>
|
|
<c-button :disabled="!textFromUnicode" @click="copyText()"> Copy text to clipboard </c-button>
|
|
</div>
|
|
</c-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.outer {
|
|
flex: 0 1 1200px;
|
|
margin-inline: 50px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.controls {
|
|
flex: 0 1 100%;
|
|
}
|
|
|
|
.card {
|
|
flex: 1 0 max(40%, 500px);
|
|
}
|
|
</style>
|