<script setup lang="ts">
import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
import { ref } from 'vue';


const xml = ref('');
const query = ref('');

</script>

<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>    

        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
    </div>
</template>