mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-05 13:57:10 -04:00
72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import JSON5 from 'json5';
|
|
import { useStorage } from '@vueuse/core';
|
|
import { formatJson } from './json.models';
|
|
import { withDefaultOnError } from '@/utils/defaults';
|
|
import { useValidation } from '@/composable/validation';
|
|
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
|
|
|
const { t } = useI18n();
|
|
const inputElement = ref<HTMLElement>();
|
|
|
|
const rawJson = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
|
|
const indentSize = useStorage('json-prettify:indent-size', 3);
|
|
const sortKeys = useStorage('json-prettify:sort-keys', true);
|
|
const cleanJson = computed(() => withDefaultOnError(() => formatJson({ rawJson, indentSize, sortKeys }), ''));
|
|
|
|
const rawJsonValidation = useValidation({
|
|
source: rawJson,
|
|
rules: [
|
|
{
|
|
validator: v => v === '' || JSON5.parse(v),
|
|
message: t('tools.json-prettify.invalidMessage'),
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div style="flex: 0 0 100%">
|
|
<div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
|
|
<n-form-item :label="t('tools.json-prettify.sortKeys')" label-placement="left" label-width="100">
|
|
<n-switch v-model:value="sortKeys" />
|
|
</n-form-item>
|
|
<n-form-item :label="t('tools.json-prettify.indentSize')" label-placement="left" label-width="100" :show-feedback="false">
|
|
<n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
|
|
</n-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<n-form-item
|
|
:label="t('tools.json-prettify.rawJSONLabel')"
|
|
:feedback="rawJsonValidation.message"
|
|
:validation-status="rawJsonValidation.status"
|
|
>
|
|
<c-input-text
|
|
ref="inputElement"
|
|
v-model:value="rawJson"
|
|
:placeholder="t('tools.json-prettify.rawJSONPlaceholder')"
|
|
rows="20"
|
|
multiline
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
monospace
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item :label="t('tools.json-prettify.prettifyJSON')">
|
|
<TextareaCopyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
|
|
</n-form-item>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.result-card {
|
|
position: relative;
|
|
.copy-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
</style>
|