63 lines
2.9 KiB
JavaScript
63 lines
2.9 KiB
JavaScript
|
/*
|
||
|
|
* This file houses any common utils that will be used by Vue.
|
||
|
|
* Similar to Global.js but class based, and Vue specific.
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
import { createApp } from 'vue';
|
||
|
|
import main_ui_router from '@/components/main_ui_router';
|
||
|
|
import PrimeVue from 'primevue/config';
|
||
|
|
|
||
|
|
class TTVueUtils {
|
||
|
|
constructor() {
|
||
|
|
this._dynamic_vue_components = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
mountComponent( mount_id, mount_component, root_props ) {
|
||
|
|
if( mount_id === undefined ) {
|
||
|
|
Debug.Error( 'Error: Invalid parameters passed to function.', 'TTVueUtils.js', 'TTVueUtils', 'mountComponent', 1 );
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if( document.getElementById( mount_id ) === null ) {
|
||
|
|
Debug.Error( 'Error: mount_id "'+ mount_id + '" does not exist in the DOM.', 'TTVueUtils.js', 'TTVueUtils', 'mountComponent', 1 );
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if( this._dynamic_vue_components[ mount_id ] !== undefined ) {
|
||
|
|
Debug.Error( 'Error: component ('+ mount_id +') already exists and mounted.', 'TTVueUtils.js', 'TTVueUtils', 'mountComponent', 1 );
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
root_props = root_props || {};
|
||
|
|
root_props.component_id = root_props.component_id || mount_id;
|
||
|
|
let mount_reference = '#' + mount_id;
|
||
|
|
let vue_app_instance = createApp( mount_component, root_props ); // rootProps is useful to pass in data without the need for EventBus.
|
||
|
|
|
||
|
|
vue_app_instance.use( PrimeVue, { ripple: true, inputStyle: 'filled' }); // From: AppConfig.vue this.$primevue.config.inputStyle value is filled/outlined as we dont use AppConfig in TT.
|
||
|
|
vue_app_instance.use( main_ui_router ); // #VueContextMenu# FIXES: Failed to resolve component: router-link when TTOverlayMenuButton is opened. Because each component is a separate Vue instance, and they did not globally 'use' the Router, only in main ui.
|
||
|
|
let vue_component_instance = vue_app_instance.mount( mount_reference ); // e.g. '#tt-edit-view-test'
|
||
|
|
|
||
|
|
this._dynamic_vue_components[ mount_id ] = {
|
||
|
|
mount_id: mount_id,
|
||
|
|
_vue_app_instance: vue_app_instance, // Be very careful using these from outside Vue. Could make for messy code!
|
||
|
|
_vue_component_instance: vue_component_instance // Be very careful using these from outside Vue. Could make for messy code!
|
||
|
|
};
|
||
|
|
|
||
|
|
return this._dynamic_vue_components[ mount_id ];
|
||
|
|
}
|
||
|
|
unmountComponent ( mount_id ) {
|
||
|
|
if( this._dynamic_vue_components[ mount_id ] && this._dynamic_vue_components[ mount_id ]._vue_component_instance ) {
|
||
|
|
this._dynamic_vue_components[ mount_id ]._vue_app_instance.unmount();
|
||
|
|
delete this._dynamic_vue_components[ mount_id ];
|
||
|
|
Debug.Text( 'Component successfully unmounted ('+ mount_id +').', 'TTVueUtils.js', 'TTVueUtils', 'unmountComponent', 2 );
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
Debug.Text( 'Unable to unmount component. Component not found ('+ mount_id +'). Maybe already removed?', 'TTVueUtils.js', 'TTVueUtils', 'unmountComponent', 2 );
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default new TTVueUtils() // Export this way to share one instance of the class across the app.
|