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

refactor(ui): replaced some n-input with c-input-text

Browse source
This commit is contained in:
Corentin Thomasset 2023-05-15 00:41:45 +02:00 • committed by Corentin THOMASSET
parent b3b6b7c46b
commit f7fc779e63
10 changed files with 189 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/tools/json-diff/json-diff.vue
View file

@ -1,30 +1,25 @@
<template>
<n-form-item label="Your first json" v-bind="leftJsonValidation.attrs as any">
<n-input
v-model:value="rawLeftJson"
placeholder="Paste your first json here..."
type="textarea"
rows="20"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
:input-props="{ 'data-test-id': 'leftJson' } as any"
/>
</n-form-item>
<n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs as any">
<n-input
v-model:value="rawRightJson"
placeholder="Paste your json to compare here..."
type="textarea"
rows="20"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
:input-props="{ 'data-test-id': 'rightJson' } as any"
/>
</n-form-item>
<c-input-text
v-model:value="rawLeftJson"
:validation-rules="jsonValidationRules"
label="Your first json"
placeholder="Paste your first json here..."
rows="20"
multiline
test-id="leftJson"
raw-text
/>
<c-input-text
v-model:value="rawRightJson"
:validation-rules="jsonValidationRules"
label="Your json to compare"
placeholder="Paste your json to compare here..."
rows="20"
multiline
test-id="rightJson"
raw-text
/>
<DiffsViewer :left-json="leftJson" :right-json="rightJson" />
</template>
@ -33,7 +28,6 @@
import JSON5 from 'json5';
import { withDefaultOnError } from '@/utils/defaults';
import { useValidation } from '@/composable/validation';
import { isNotThrowing } from '@/utils/boolean';
import DiffsViewer from './diff-viewer/diff-viewer.vue';
@ -43,17 +37,10 @@ const rawRightJson = ref('');
const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
const createJsonValidation = (json: Ref) =>
useValidation({
source: json,
rules: [
{
validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
message: 'Invalid JSON',
},
],
});
const leftJsonValidation = createJsonValidation(rawLeftJson);
const rightJsonValidation = createJsonValidation(rawRightJson);
const jsonValidationRules = [
{
validator: (value: string) => value === '' || isNotThrowing(() => JSON5.parse(value)),
message: 'Invalid JSON format',
},
];
</script>