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