Implemented XML Formatter and simplified structure of XML tools #229
@@ -8,7 +8,7 @@ import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
|
||||
|
||||
const props = defineProps(
|
||||
{
|
||||
prettyName: {type: String, required: true}
|
||||
stylizedName: {type: String, required: true}
|
||||
|
|
||||
}
|
||||
)
|
||||
|
||||
@@ -16,7 +16,7 @@ const emit = defineEmits(['update:defaultData'])
|
||||
|
||||
function setDefault() {
|
||||
const emitName = "update:defaultData";
|
||||
switch (props.prettyName.toLowerCase()) {
|
||||
switch (props.stylizedName.toLowerCase()) {
|
||||
case "json":
|
||||
emit(emitName, "{'message': 'Here we have to add some proper message', 'answer': 'Ya, definitely'}")
|
||||
break;
|
||||
@@ -43,5 +43,5 @@ function setDefault() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="tool-button" @click="setDefault()">Default {{ prettyName }}</button>
|
||||
<button class="tool-button" @click="setDefault()">Default {{ stylizedName }}</button>
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps({
|
||||
xml: {type: String, required: true},
|
||||
json: {type: String, required: true},
|
||||
isMinimizer: {type: Boolean}
|
||||
})
|
||||
|
||||
@@ -30,7 +30,7 @@ function prepareURL(): string {
|
||||
}
|
||||
|
||||
function prepareRequestBody():string {
|
||||
var requestBody = props.xml;
|
||||
var requestBody = props.json;
|
||||
return requestBody;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ const data = ref('')
|
||||
|
||||
const props = defineProps(
|
||||
{
|
||||
prettyName: {type: String, required: true},
|
||||
stylizedName: {type: String, required: true},
|
||||
data: {type: String},
|
||||
}
|
||||
)
|
||||
@@ -27,9 +27,9 @@ function clear() {
|
||||
}
|
||||
|
||||
function canBeFormatted() {
|
||||
return props.prettyName.toLowerCase() == 'xml' ||
|
||||
props.prettyName.toLowerCase() == 'xsd' ||
|
||||
props.prettyName.toLowerCase() == 'xslt';
|
||||
return props.stylizedName.toLowerCase() == 'xml' ||
|
||||
props.stylizedName.toLowerCase() == 'xsd' ||
|
||||
props.stylizedName.toLowerCase() == 'xslt';
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -37,9 +37,9 @@ function canBeFormatted() {
|
||||
<template>
|
||||
<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>
|
||||
<span class="dark:text-white">{{ stylizedName }}</span>
|
||||
<div class="flex space-x-2">
|
||||
<InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
|
||||
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
|
||||
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
|
||||
<button class="tool-button" @click="clear">Clear</button>
|
||||
</div>
|
||||
|
||||
@@ -25,10 +25,10 @@ function clear() {
|
||||
<div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
|
||||
<span class="dark:text-slate-100">JSON Formatter</span>
|
||||
<div class="flex flex-wrap gap-2 justify-center">
|
||||
<InsertTemplateComponent pretty-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
|
||||
<InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
|
||||
<button class="tool-button" @click="clear()">Clear</button>
|
||||
<JsonButtonFormatterComponent isMinimizer :xml="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
|
||||
<JsonButtonFormatterComponent :xml="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
|
||||
<JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
|
||||
<JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
|
||||
</div>
|
||||
</div>
|
||||
<textarea name="data" id="data" :value="json" class="text-field"></textarea>
|
||||
|
||||
@@ -12,8 +12,8 @@ const query = ref('');
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||
<div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
|
||||
<xmlInputFieldComponent prettyName="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||
<xmlInputFieldComponent prettyName="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
<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"></xmlOutputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -12,8 +12,8 @@ const query = ref('');
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||
<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>
|
||||
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||
<xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
<xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -12,8 +12,8 @@ const query = ref('');
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||
<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>
|
||||
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||
<xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
<xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -12,8 +12,8 @@ const query = ref('');
|
||||
<template>
|
||||
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
|
||||
<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>
|
||||
<xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
|
||||
<xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
|
||||
</div>
|
||||
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ function clear() {
|
||||
<div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
|
||||
<span class="dark:text-slate-100">XML Formatter</span>
|
||||
<div class="flex flex-wrap gap-2 justify-center">
|
||||
<InsertTemplateComponent pretty-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
|
||||
<InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
|
||||
<button class="tool-button" @click="clear()">Clear</button>
|
||||
<XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
|
||||
<XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
|
||||
|
||||
Reference in New Issue
Block a user
prettifiedName, or something else.
Name imo should be more descriptive.