finished UI for adding parameters

This commit is contained in:
2025-01-09 13:33:04 +01:00
parent 38b3942bde
commit 0d469db020
2 changed files with 13 additions and 17 deletions

View File

@@ -1,8 +1,8 @@
<script lang="ts">
<script setup lang="ts">
import {defineComponent, ref} from 'vue'
const selected = ref('A')
const options = ref([
let options = ref([
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
@@ -10,7 +10,7 @@ const options = ref([
</script>
<template>
<select v-model="selected" class="rounded-3xl w-1/3 px-3">
<select v-model="selected" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-2/3" >
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
@@ -18,13 +18,13 @@ const options = ref([
<input
id="textInput1"
class="text-input px-2 py-1 border rounded-3xl w-1/3"
class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
type="text"
placeholder="Name"
/>
<input
id="textInput2"
class="text-input px-2 py-1 border rounded-3xl w-1/3"
class="text-input px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600 w-1/3"
type="text"
placeholder="Value"
/>

View File

@@ -3,10 +3,8 @@ import InsertTemplateComponent from '@components/common/InsertTemplateComponent.
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import CodeEditor from '@/components/common/CodeEditorComponent.vue'
import XsltParamComponent from '@/components/XsltParamComponent.vue'
import Vuetify from 'vuetify';
import {ref} from 'vue'
import TabComponent from "@components/xml/TabComponent.vue";
const props = defineProps(
{
@@ -66,28 +64,26 @@ function readFile(file: any) {
<div class="flex justify-between mb-2"></div>
<div class="flex place-content-between w-full items-center">
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
<div class="flex items-stretch w-64">
<input id="fileLoader" ref="inputFile" class="file-selector" type="file"
accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile"/>
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile"/>
</div>
<div class="flex space-x-2 pb-2 overflow-x-auto">
<InsertTemplateComponent :stylized-name="props.stylizedName"
@update:default-data="updateData"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data"
@update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
<button class="tool-button" @click="clear">Clear</button>
</div>
</div>
<div class="flex place-content-between w-full items-center">
<div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
<XsltParamComponent :stylizedName="stylizedName" />
<XsltParamComponent :stylizedName="stylizedName"/>
</div>
</div>
<CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
:config="{disabled:false, language:stylizedName}"></CodeEditor>
<CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
</div>
</template>