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

refactor(dx): generic data transformer

Browse source
This commit is contained in:
Corentin Thomasset 2023-04-10 16:34:10 +02:00 • committed by Corentin THOMASSET
parent 9fa4c26929
commit 05f06f6a07
5 changed files with 78 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/tools/json-minify/json-minify.vue
View file

@ -1,57 +1,27 @@
<template>
<n-form-item
label="Your raw json"
:feedback="rawJsonValidation.message"
:validation-status="rawJsonValidation.status"
>
<n-input
ref="inputElement"
v-model:value="rawJson"
placeholder="Paste your raw json here..."
type="textarea"
rows="20"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/>
</n-form-item>
<n-form-item label="Minify version of your JSON">
<textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
</n-form-item>
<format-transformer
input-label="Your raw json"
:input-default="defaultValue"
input-placeholder="Paste your raw json here..."
output-label="Minify version of your JSON"
output-language="json"
:input-validation-rules="rules"
:transformer="transformer"
/>
</template>
<script setup lang="ts">
import TextareaCopyable from '@/components/TextareaCopyable.vue';
import { useValidation } from '@/composable/validation';
import type { UseValidationRule } from '@/composable/validation';
import { withDefaultOnError } from '@/utils/defaults';
import JSON5 from 'json5';
import { computed, ref } from 'vue';
const inputElement = ref<HTMLElement>();
const defaultValue = '{\n\t"hello": [\n\t\t"world"\n\t]\n}';
const transformer = (value: string) => withDefaultOnError(() => JSON.stringify(JSON5.parse(value), null, 0), '');
const rawJson = ref('{\n\t"hello": [\n\t\t"world"\n\t]\n}');
const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 0), ''));
const rawJsonValidation = useValidation({
source: rawJson,
rules: [
{
validator: (v) => v === '' || JSON5.parse(v),
message: 'Provided JSON is not valid.',
},
],
});
const rules: UseValidationRule<string>[] = [
{
validator: (v: string) => v === '' || JSON5.parse(v),
message: 'Provided JSON is not valid.',
},
];
</script>
<style lang="less" scoped>
.result-card {
position: relative;
.copy-button {
position: absolute;
top: 10px;
right: 10px;
}
}
</style>