29 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			29 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<script setup lang="ts">
 | 
						|
import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
 | 
						|
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
 | 
						|
import tooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
 | 
						|
import { ref } from 'vue';
 | 
						|
 | 
						|
 | 
						|
const xml = ref('');
 | 
						|
const query = ref('');
 | 
						|
const version = ref('');
 | 
						|
 | 
						|
function updateVersion(newVersion: string) {
 | 
						|
    version.value = newVersion;
 | 
						|
}
 | 
						|
 | 
						|
</script>
 | 
						|
 | 
						|
<template>
 | 
						|
    <div id="layout" class="flex flex-row w-full h-full">
 | 
						|
        <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide xl:pr-2">
 | 
						|
            <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
 | 
						|
                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
 | 
						|
                <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
 | 
						|
            </div>
 | 
						|
            <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
 | 
						|
        </div>
 | 
						|
        <tooltipComponent tool-type="xpath" :version="version"></tooltipComponent>
 | 
						|
    </div>
 | 
						|
</template> |