58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const input = ref('{"name":"Gemini","type":"AI"}')
|
|
const output = ref('')
|
|
const error = ref('')
|
|
|
|
const format = () => {
|
|
try {
|
|
const parsed = JSON.parse(input.value)
|
|
output.value = JSON.stringify(parsed, null, 2)
|
|
error.value = ''
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
}
|
|
}
|
|
|
|
const minify = () => {
|
|
try {
|
|
const parsed = JSON.parse(input.value)
|
|
output.value = JSON.stringify(parsed)
|
|
error.value = ''
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-[calc(100vh-200px)] flex flex-col">
|
|
<div class="flex space-x-2 mb-4">
|
|
<button @click="format" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Prettify</button>
|
|
<button @click="minify" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Minify</button>
|
|
</div>
|
|
|
|
<div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 min-h-0">
|
|
<div class="flex flex-col">
|
|
<label class="mb-2 text-sm font-bold text-gray-500">Input JSON</label>
|
|
<textarea
|
|
v-model="input"
|
|
class="flex-1 w-full p-4 font-mono text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 resize-none"
|
|
:class="{'border-red-500': error}"
|
|
></textarea>
|
|
<p v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<label class="mb-2 text-sm font-bold text-gray-500">Output</label>
|
|
<textarea
|
|
readonly
|
|
:value="output"
|
|
class="flex-1 w-full p-4 font-mono text-sm bg-gray-50 border rounded-lg resize-none text-gray-800"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|