diff options
author | 2023-05-28 23:13:24 +0200 | |
---|---|---|
committer | 2023-05-28 23:29:14 +0200 | |
commit | 33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch) | |
tree | f313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/json-viewer/json-viewer.vue | |
parent | 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff) | |
download | it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.gz it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.zst it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.zip |
chore(lint): switched to a better lint config
Diffstat (limited to '')
-rw-r--r-- | src/tools/json-viewer/json-viewer.vue | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue index 7e95db1..5fa3d36 100644 --- a/src/tools/json-viewer/json-viewer.vue +++ b/src/tools/json-viewer/json-viewer.vue @@ -1,3 +1,30 @@ +<script setup lang="ts"> +import { computed, ref } from 'vue'; +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 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: 'Provided JSON is not valid.', + }, + ], +}); +</script> + <template> <div style="flex: 0 0 100%"> <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3> @@ -28,37 +55,10 @@ /> </n-form-item> <n-form-item label="Prettify version of your json"> - <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" /> + <TextareaCopyable :value="cleanJson" language="json" :follow-height-of="inputElement" /> </n-form-item> </template> -<script setup lang="ts"> -import TextareaCopyable from '@/components/TextareaCopyable.vue'; -import { useValidation } from '@/composable/validation'; -import { withDefaultOnError } from '@/utils/defaults'; -import { computed, ref } from 'vue'; -import JSON5 from 'json5'; -import { useStorage } from '@vueuse/core'; -import { formatJson } from './json.models'; - -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: 'Provided JSON is not valid.', - }, - ], -}); -</script> - <style lang="less" scoped> .result-card { position: relative; |