finished UI for adding parameters
This commit is contained in:
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user