Reorganized components by purpose
This commit is contained in:
		@@ -1,9 +1,8 @@
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
 | 
			
		||||
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 | 
			
		||||
import { ref } from 'vue';
 | 
			
		||||
 | 
			
		||||
const xml = ref('')
 | 
			
		||||
const query = ref('')
 | 
			
		||||
const value = ref('')
 | 
			
		||||
 | 
			
		||||
const props = defineProps(
 | 
			
		||||
    {
 | 
			
		||||
@@ -11,37 +10,27 @@ const props = defineProps(
 | 
			
		||||
        xmlData: {type: String},
 | 
			
		||||
    }
 | 
			
		||||
)
 | 
			
		||||
const emit = defineEmits(['update:xml', 'update:transform'])
 | 
			
		||||
const emit = defineEmits(['update'])
 | 
			
		||||
 | 
			
		||||
function sendXml() {
 | 
			
		||||
    emit('update:xml', xml.value)
 | 
			
		||||
function sendValue() {
 | 
			
		||||
    emit('update', value.value)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function sendTransform() {
 | 
			
		||||
    emit('update:transform', query.value)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function setToDefaultXML(data: string) {
 | 
			
		||||
    xml.value = data;
 | 
			
		||||
    sendXml();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function setToDefaultQuery(data: string) {
 | 
			
		||||
    query.value = data;
 | 
			
		||||
    sendTransform();
 | 
			
		||||
function setToDefaultValue(data: string) {
 | 
			
		||||
    value.value = data;
 | 
			
		||||
    sendValue();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
 | 
			
		||||
        <div class="flex flex-col w-full h-1/2">
 | 
			
		||||
            <xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
 | 
			
		||||
            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="text-field"></textarea>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="flex flex-col w-full h-1/2">
 | 
			
		||||
            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
 | 
			
		||||
            <textarea id="transformField" v-model="query" @input="sendTransform()" class="text-field"></textarea>
 | 
			
		||||
    <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">{{ prettyName }}</span>
 | 
			
		||||
            <div class="flex space-x-2">
 | 
			
		||||
                <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setToDefaultValue(data)"></InsertTemplateComponent>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <textarea id="xmlField" v-model="value" @input="sendValue()" class="text-field"></textarea>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -18,11 +18,5 @@ function setDefault(data: string) {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="flex place-content-between w-full pr-2 items-center m-2">
 | 
			
		||||
        <span class="dark:text-white">{{ prettyName }}</span>
 | 
			
		||||
        <div class="flex space-x-2">
 | 
			
		||||
            <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setDefault(data)"></InsertTemplateComponent>
 | 
			
		||||
        </div>
 | 
			
		||||
        
 | 
			
		||||
    </div>
 | 
			
		||||
    
 | 
			
		||||
</template>
 | 
			
		||||
@@ -11,8 +11,10 @@ const query = ref('');
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
 | 
			
		||||
        <xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 | 
			
		||||
 | 
			
		||||
        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XPath" @update="(data) => {query = data}"></xmlInputFieldComponent>
 | 
			
		||||
        </div>
 | 
			
		||||
        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -11,8 +11,10 @@ const query = ref('');
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
 | 
			
		||||
        <xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 | 
			
		||||
 | 
			
		||||
        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
 | 
			
		||||
        </div>
 | 
			
		||||
        <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -11,8 +11,10 @@ const query = ref('');
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
 | 
			
		||||
        <xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 | 
			
		||||
 | 
			
		||||
        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
 | 
			
		||||
        </div>
 | 
			
		||||
        <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -11,8 +11,10 @@ const query = ref('');
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
 | 
			
		||||
        <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 | 
			
		||||
 | 
			
		||||
        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
 | 
			
		||||
            <xmlInputFieldComponent prettyName="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
 | 
			
		||||
        </div>
 | 
			
		||||
        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
		Reference in New Issue
	
	Block a user