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

refactor(display): mutualized code display

Browse source
This commit is contained in:
Corentin Thomasset 2022-08-03 12:47:00 +02:00 • committed by Corentin THOMASSET
parent 422b6eb05a
commit 0be33fb337
3 changed files with 102 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,26 +17,16 @@
/>
</n-form-item>
<n-form-item label="Prettify version of your json">
<n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
<n-config-provider :hljs="hljs">
<n-code :code="cleanJson" language="json" :trim="false" />
</n-config-provider>
<n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
</n-card>
<textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
</n-form-item>
</template>
<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import TextareaCopyable from '@/components/TextareaCopyable.vue';
import { useValidation } from '@/composable/validation';
import { useElementSize } from '@vueuse/core';
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import { computed, ref } from 'vue';
hljs.registerLanguage('json', json);
const inputElement = ref<HTMLElement>();
const { height: inputElementHeight } = useElementSize(inputElement);
const rawJson = ref('{"hello": "world"}');
const cleanJson = computed(() => {
@ -47,8 +37,6 @@ const cleanJson = computed(() => {
}
});
const { copy } = useCopy({ source: cleanJson });
const rawJsonValidation = useValidation({
source: rawJson,
rules: [