Changed prretyName props to stylizedName and some other to more descriptive

This commit is contained in:
2023-06-21 13:18:04 +02:00
parent cac46c39f3
commit 5bd88577d7
9 changed files with 23 additions and 23 deletions

View File

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

View File

@@ -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;
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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