<template>
|
<div class="h-full flex flex-col">
|
<div class="grid grid-cols-2 gap-2 h-2/3 flex-0">
|
<div class="h-full overflow-auto">
|
<!-- <codemirror
|
v-model="dockCode"
|
:style="{ height: '100%' }"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="dockEditorExtensions"
|
@change="log('change', $event)"
|
@focus="log('focus', $event)"
|
@blur="log('blur', $event)"
|
/> -->
|
|
</div>
|
<div class="h-full overflow-auto">
|
<codemirror
|
class="h-full overflow-auto"
|
v-model="sqlCode"
|
:style="{ height: '100%' }"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="sqlEditorExtensions"
|
@change="log('change', $event)"
|
@focus="log('focus', $event)"
|
@blur="log('blur', $event)"
|
/>
|
</div>
|
</div>
|
<div class="flex-auto overflow-auto mt-3">
|
<codemirror
|
disabled
|
class="h-full overflow-auto"
|
v-model="jsonCode"
|
:style="{ height: '100%' }"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="jsonEditorExtensions"
|
@change="log('change', $event)"
|
@focus="log('focus', $event)"
|
@blur="log('blur', $event)"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineComponent, ref, shallowRef } from 'vue';
|
import { Codemirror } from 'vue-codemirror';
|
import { json } from '@codemirror/lang-json';
|
import { vscodeDark, vscodeLight, vscodeLightInit } from '@uiw/codemirror-theme-vscode';
|
import * as codeExample from './testData';
|
import { sql } from '@codemirror/lang-sql';
|
import { xml } from '@codemirror/lang-xml';
|
const log = console.log;
|
const jsonCode = ref(codeExample.jsonCode);
|
const dockCode = ref(codeExample.dockCode);
|
const sqlCode = ref(codeExample.sqlCode);
|
|
const jsonEditorExtensions = [json(), vscodeDark];
|
const sqlEditorExtensions = [sql(), vscodeDark];
|
const dockEditorExtensions = [xml(), vscodeDark];
|
</script>
|
