73 lines
2.4 KiB
Vue
73 lines
2.4 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 '@/components/common/CodeEditorComponent.vue'
|
|
|
|
const data = ref('')
|
|
const inputFile = ref()
|
|
|
|
const props = defineProps(
|
|
{
|
|
stylizedName: {type: String, required: true},
|
|
data: {type: String},
|
|
}
|
|
)
|
|
const emit = defineEmits(['update'])
|
|
|
|
function sendValue() {
|
|
emit('update', data.value)
|
|
}
|
|
|
|
function sendNewValue(newValue : string) {
|
|
data.value = newValue
|
|
emit('update', data.value)
|
|
}
|
|
|
|
function updateData(newData: string) {
|
|
data.value = newData
|
|
inputFile.value.value = ''
|
|
sendValue()
|
|
}
|
|
|
|
function clear() {
|
|
updateData('')
|
|
}
|
|
|
|
function canBeFormatted() {
|
|
return props.stylizedName.toLowerCase() == 'xml' ||
|
|
props.stylizedName.toLowerCase() == 'xsd' ||
|
|
props.stylizedName.toLowerCase() == 'xslt'
|
|
}
|
|
|
|
function readFile(file : any) {
|
|
|
|
const reader = new FileReader()
|
|
reader.onloadend = () => {
|
|
var result = reader.result?.toString()
|
|
if (typeof result == "string")
|
|
sendNewValue(result)
|
|
|
|
}
|
|
reader.readAsText(file.target.files[0])
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
|
|
<div class="flex place-content-between w-full items-center">
|
|
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
|
|
<div class="flex space-x-2 pb-2 overflow-x-auto">
|
|
<div class="flex items-stretch w-64">
|
|
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
|
|
</div>
|
|
|
|
<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>
|
|
<CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
|
|
</div>
|
|
</template> |