aboutsummaryrefslogtreecommitdiff
path: root/src/tools/json-viewer/json-viewer.vue
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-05-28 23:13:24 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-05-28 23:29:14 +0200
commit33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch)
treef313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/json-viewer/json-viewer.vue
parent4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff)
downloadit-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.vue56
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;