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

refactor(json-prettify): improved layout for the json prettifier

Browse source
This commit is contained in:
Corentin Thomasset 2022-07-24 15:10:38 +02:00
parent ba87097e3d
commit 328fda65b3
No known key found for this signature in database
GPG key ID: DBD997E935996158
2 changed files with 44 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/tools/json-viewer/index.ts
View file

@ -2,10 +2,11 @@ import { Braces } from '@vicons/tabler';
import { defineTool } from '../tool'; import { defineTool } from '../tool';
export const tool = defineTool({ export const tool = defineTool({
name: 'JSON viewer', name: 'JSON prettify and format',
path: '/json-viewer', path: '/json-prettify',
description: 'Prettify JSON string to a human friendly readable format.', description: 'Prettify your JSON string to a human friendly readable format.',
keywords: ['json', 'viewer', 'prettify', 'format'], keywords: ['json', 'viewer', 'prettify', 'format'],
component: () => import('./json-viewer.vue'), component: () => import('./json-viewer.vue'),
icon: Braces, icon: Braces,
redirectFrom: ['/json-viewer'],
}); });

46
src/tools/json-viewer/json-viewer.vue
View file

@ -1,45 +1,44 @@
<template> <template>
<n-card>
<n-form-item <n-form-item
label="Your raw json:" label="Your raw json"
:feedback="rawJsonValidation.message" :feedback="rawJsonValidation.message"
:validation-status="rawJsonValidation.status" :validation-status="rawJsonValidation.status"
> >
<n-input <n-input
ref="inputElement"
v-model:value="rawJson" v-model:value="rawJson"
class="json-input"
type="textarea"
placeholder="Paste your raw json here..." placeholder="Paste your raw json here..."
type="textarea"
rows="20"
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
autocapitalize="off" autocapitalize="off"
spellcheck="false" spellcheck="false"
/> />
</n-form-item> </n-form-item>
<n-form-item label="Prettify version of your json">
<n-space justify="center"> <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
<n-button secondary @click="rawJson = ''">Clear</n-button>
</n-space>
</n-card>
<n-card v-if="cleanJson.length > 0">
<n-scrollbar :x-scrollable="true">
<n-config-provider :hljs="hljs"> <n-config-provider :hljs="hljs">
<n-code :code="cleanJson" language="json" /> <n-code :code="cleanJson" language="json" :trim="false" />
</n-config-provider> </n-config-provider>
</n-scrollbar> <n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
</n-card> </n-card>
</n-form-item>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue'; import { useCopy } from '@/composable/copy';
import { useValidation } from '@/composable/validation';
import { useElementSize } from '@vueuse/core';
import hljs from 'highlight.js/lib/core'; import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json'; import json from 'highlight.js/lib/languages/json';
import { useValidation } from '@/composable/validation'; import { computed, ref } from 'vue';
hljs.registerLanguage('json', json); hljs.registerLanguage('json', json);
const inputElement = ref<HTMLElement>();
const { height: inputElementHeight } = useElementSize(inputElement);
const rawJson = ref(''); const rawJson = ref('{"hello": "world"}');
const cleanJson = computed(() => { const cleanJson = computed(() => {
try { try {
return JSON.stringify(JSON.parse(rawJson.value), null, 3); return JSON.stringify(JSON.parse(rawJson.value), null, 3);
@ -48,19 +47,26 @@ const cleanJson = computed(() => {
} }
}); });
const { copy } = useCopy({ source: cleanJson });
const rawJsonValidation = useValidation({ const rawJsonValidation = useValidation({
source: rawJson, source: rawJson,
rules: [ rules: [
{ {
validator: (v) => v === '' || JSON.parse(v), validator: (v) => v === '' || JSON.parse(v),
message: 'Invalid json string', message: 'Invalid json',
}, },
], ],
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.json-input ::v-deep(.n-input-wrapper) { .result-card {
resize: both !important; position: relative;
.copy-button {
position: absolute;
top: 10px;
right: 10px;
}
} }
</style> </style>