aboutsummaryrefslogtreecommitdiff
path: root/src/components/FormatTransformer.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/FormatTransformer.vue')
-rw-r--r--src/components/FormatTransformer.vue41
1 files changed, 20 insertions, 21 deletions
diff --git a/src/components/FormatTransformer.vue b/src/components/FormatTransformer.vue
index d187632..5b187b2 100644
--- a/src/components/FormatTransformer.vue
+++ b/src/components/FormatTransformer.vue
@@ -1,26 +1,27 @@
<template>
- <n-form-item :label="inputLabel" v-bind="validationAttrs as any">
- <n-input
- ref="inputElement"
- v-model:value="input"
- :placeholder="inputPlaceholder"
- type="textarea"
- rows="20"
- autocomplete="off"
- autocorrect="off"
- autocapitalize="off"
- spellcheck="false"
- :input-props="{ 'data-test-id': 'input' } as any"
- />
- </n-form-item>
- <n-form-item :label="outputLabel">
- <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement" />
- </n-form-item>
+ <c-input-text
+ ref="inputElement"
+ v-model:value="input"
+ :placeholder="inputPlaceholder"
+ :label="inputLabel"
+ multiline
+ autosize
+ rows="20"
+ raw-text
+ test-id="input"
+ :validation-rules="inputValidationRules"
+ />
+
+ <div>
+ <div mb-5px>{{ outputLabel }}</div>
+ <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement?.inputWrapperRef" />
+ </div>
</template>
<script setup lang="ts">
-import { useValidation, type UseValidationRule } from '@/composable/validation';
+import type { UseValidationRule } from '@/composable/validation';
import _ from 'lodash';
+import CInputText from '@/ui/c-input-text/c-input-text.vue';
const props = withDefaults(
defineProps<{
@@ -46,12 +47,10 @@ const props = withDefaults(
const { transformer, inputValidationRules, inputLabel, outputLabel, outputLanguage, inputPlaceholder, inputDefault } =
toRefs(props);
-const inputElement = ref();
+const inputElement = ref<typeof CInputText>();
const input = ref(inputDefault.value);
const output = computed(() => transformer.value(input.value));
-
-const { attrs: validationAttrs } = useValidation({ source: input, rules: inputValidationRules.value });
</script>
<style scoped></style>