Adam Bem
af140c30a4
Reviewed-on: #269 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
73 lines
2.5 KiB
Vue
73 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryComponent.vue';
|
|
import tooltipEntryComponent from '@components/xml/tooltips/TooltipEntryComponent.vue';
|
|
|
|
import xpath1 from '@/assets/tooltips/xpath/xpath1.json';
|
|
import xpath2 from '@/assets/tooltips/xpath/xpath2.json';
|
|
import xpath3 from '@/assets/tooltips/xpath/xpath3.json';
|
|
import xpath31 from '@/assets/tooltips/xpath/xpath31.json';
|
|
import xslt1 from '@/assets/tooltips/xslt/xslt1.json';
|
|
import xslt3 from '@/assets/tooltips/xslt/xslt3.json'
|
|
import TooltipDiffsComponent from './TooltipDiffsComponent.vue';
|
|
|
|
|
|
const props = defineProps({
|
|
version: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
toolType: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const areTooltipsHidden = ref(true)
|
|
|
|
function selectTooltip() {
|
|
if(props.toolType == "xpath"){
|
|
switch(props.version) {
|
|
case "1.0":
|
|
return xpath1;
|
|
case "2.0":
|
|
return xpath2;
|
|
case "3.0":
|
|
return xpath3;
|
|
case "3.1":
|
|
default:
|
|
return xpath31;
|
|
}
|
|
} else {
|
|
switch(props.version){
|
|
case "1.0":{
|
|
return xslt1;
|
|
}
|
|
case "3.0":{
|
|
return xslt3;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function toggleTooltips() {
|
|
areTooltipsHidden.value = !areTooltipsHidden.value;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
|
|
<button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
|
|
T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
|
|
</button>
|
|
<div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
|
|
<TooltipDiffsComponent :tool-name="toolType" :tool-version="props.version"></TooltipDiffsComponent>
|
|
<div class="w-full h-2"> </div>
|
|
<tooltipCategoryComponent v-for="category in selectTooltip()" :key="category.name" :name="category.name">
|
|
<tooltipEntryComponent :tool="toolType" v-for="entry in category.entries" :key="entry.name" :entry-data="entry"></tooltipEntryComponent>
|
|
</tooltipCategoryComponent>
|
|
</div>
|
|
</div>
|
|
</template> |