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