2023-09-09 09:54:44 +12:00
|
|
|
<template>
|
|
|
|
<q-page class="row items-center justify-evenly">
|
2023-09-11 01:49:33 +12:00
|
|
|
<component
|
|
|
|
:is="currentComponent"
|
|
|
|
v-bind="propList"
|
|
|
|
/>
|
2023-09-09 09:54:44 +12:00
|
|
|
</q-page>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2023-10-15 03:41:36 +13:00
|
|
|
import type { Component } from 'vue'
|
2023-09-09 09:54:44 +12:00
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
2023-09-11 01:49:33 +12:00
|
|
|
/**
|
|
|
|
* Passed prop list from the test through Electron backend. If somehow nothing get passed (somehow), set to a blank object just to be on the safe side.
|
|
|
|
*/
|
|
|
|
const propList = (window.extraEnvVariables.COMPONENT_PROPS) ? window.extraEnvVariables.COMPONENT_PROPS : {}
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
|
|
|
* Current route
|
|
|
|
*/
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Currently tested component's name based on the last part of the route
|
|
|
|
*/
|
|
|
|
const componentName = route.params.componentName
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Auto-import all components from the automatic matching via the route path
|
|
|
|
*/
|
|
|
|
const componentList = import.meta.globEager('components/**/*.vue')
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Placeholder variable for the matched component
|
|
|
|
*/
|
2023-10-15 03:41:36 +13:00
|
|
|
let currentComponent: Component
|
2023-09-09 09:54:44 +12:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Loops through the component list
|
|
|
|
*/
|
|
|
|
for (const loopPath in componentList) {
|
|
|
|
/**
|
|
|
|
* Current component from the loop
|
|
|
|
*/
|
|
|
|
const loopComponent = componentList[loopPath].default
|
|
|
|
|
|
|
|
/**
|
|
|
|
* If the route-component-name matches the name of component in the loop, load it as the curently displayed one
|
|
|
|
*/
|
|
|
|
if (loopComponent.__name === componentName) {
|
|
|
|
currentComponent = loopComponent
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|