Mikolaj Widla
dcf3d3c43c
Co-authored-by: widlam <mikolaj.widla@gmail.com> Reviewed-on: #236 Reviewed-by: Adam Bem <bema@noreply.example.com> Co-authored-by: Mikolaj Widla <widlam@noreply.example.com> Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>
57 lines
1.9 KiB
Vue
57 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
|
|
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
|
|
import { ref } from 'vue';
|
|
import CodeEditor from '../CodeEditorComponent.vue';
|
|
|
|
const data = ref('')
|
|
|
|
const props = defineProps(
|
|
{
|
|
stylizedName: {type: String, required: true},
|
|
data: {type: String},
|
|
}
|
|
)
|
|
const emit = defineEmits(['update'])
|
|
|
|
function sendValue() {
|
|
console.log("input works")
|
|
emit('update', data.value)
|
|
}
|
|
|
|
function sendNewValue(newValue : string) {
|
|
data.value = newValue
|
|
emit('update', data.value)
|
|
}
|
|
|
|
function updateData(newData: string) {
|
|
data.value = newData;
|
|
sendValue();
|
|
}
|
|
|
|
function clear() {
|
|
updateData('');
|
|
}
|
|
|
|
function canBeFormatted() {
|
|
return props.stylizedName.toLowerCase() == 'xml' ||
|
|
props.stylizedName.toLowerCase() == 'xsd' ||
|
|
props.stylizedName.toLowerCase() == 'xslt';
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col w-full h-1/2">
|
|
<div class="flex place-content-between w-full pr-2 items-center m-2">
|
|
<span class="dark:text-white">{{ stylizedName }}</span>
|
|
<div class="flex space-x-2">
|
|
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
|
|
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
|
|
<button class="tool-button" @click="clear">Clear</button>
|
|
</div>
|
|
</div>
|
|
<!-- <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea> -->
|
|
<CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
|
|
</div>
|
|
</template> |