Implemented v-model in XML tools

This commit is contained in:
2023-11-30 08:40:24 +01:00
parent a6fa615bc4
commit 5ac6fb65fb
6 changed files with 12 additions and 12 deletions

View File

@@ -10,13 +10,13 @@ const props = defineProps(
data: {type: String},
}
)
const emit = defineEmits(['update'])
const emit = defineEmits(['update:modelValue'])
const data = ref('')
const inputFile = ref()
function sendValue() {
emit('update', data.value)
emit('update:modelValue', data.value)
}
function updateData(newData: string, clearFileSelector: boolean = true) {

View File

@@ -13,7 +13,7 @@ const props = defineProps(
tabCountLimit: {type: Number, required: false}
}
)
const emit = defineEmits(['update'])
const emit = defineEmits(['update:modelValue'])
const newTabId = ref(0);
const activeTabId = ref(0);
@@ -30,7 +30,7 @@ const inputFile = ref()
function sendValue() {
emit('update', tabs.value);
emit('update:modelValue', tabs.value);
}
function updateData(newData: string) {

View File

@@ -19,8 +19,8 @@ function updateVersion(newVersion: string) {
<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>
<xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XPath" v-model="query"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
</div>

View File

@@ -12,8 +12,8 @@ const query = ref('');
<template>
<div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
<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" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XQuery" v-model="query"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>

View File

@@ -12,8 +12,8 @@ const query = ref('');
<template>
<div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
<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" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSD" v-model="query"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>

View File

@@ -22,8 +22,8 @@ function updateVersion(newVersion: string) {
<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 pr-2">
<div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
<xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
<xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
<xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
<xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
</div>