diff options
Diffstat (limited to 'front-end/src/bootstrap/index.ts')
-rw-r--r-- | front-end/src/bootstrap/index.ts | 71 |
1 files changed, 22 insertions, 49 deletions
diff --git a/front-end/src/bootstrap/index.ts b/front-end/src/bootstrap/index.ts index ead41e1..343def6 100644 --- a/front-end/src/bootstrap/index.ts +++ b/front-end/src/bootstrap/index.ts @@ -1,47 +1,25 @@ import App from '../App.vue' import Notifications, { notify } from '@kyvg/vue3-notification' import { configureNotifier } from '@vnuge/vnlib.browser' -import { createApp as vueCreateApp, ref } from "vue"; +import { CreateAppFunction, createApp as vueCreateApp } from "vue"; import { useDark } from "@vueuse/core"; +import { createPinia, type Pinia } from "pinia"; //Font awesome support import { Library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faBars, faLightbulb, faTimes } from '@fortawesome/free-solid-svg-icons' - -//Required global state elements for app components -export const headerRoutes = ref<string[]>([]); -export const authRoutes = ref<string[]>([]); -export const siteTitle = ref<string>(""); -export const showCookieWarning = ref<boolean>(false); - - export interface AppConfig { /** - * Routes to be displayed in the header when the user is not logged in - */ - headerRoutes: string[]; - - /** - * Routes to be displayed in the header when the user is logged in - */ - authRoutes: string[]; - - /** - * The title of the site, used in the title bar - */ - siteTitle: string; - - /** * Enables dark mode support */ - useDarkMode: boolean; + useDarkMode?: boolean; /** * The element to mount the app to */ - mountElement: string; + mountElement: string | Element; /** * library instance for adding required icons @@ -49,16 +27,19 @@ export interface AppConfig { faLibrary: Library; /** - * If true, the cookie warning will not be displayed + * Called when the app is created for you to add custom elements + * and configure the app + * @param app The app instance + * @param store The pinia store instance */ - hideCookieWarning?: boolean; + onCreate(app: any, piniaStore: Pinia): void; /** - * Called when the app is created for you to add custom elements - * and configure the app + * Allows the user to override the createApp function * @param app The app instance + * @returns The app instance */ - onCreate: (app: any) => void; + createApp?: CreateAppFunction<Element> } /** @@ -66,13 +47,12 @@ export interface AppConfig { * @param config The configuration for the app * @returns The app instance */ -export const createVnApp = (config: AppConfig, createApp?: (app: any) => any) => { - headerRoutes.value = config.headerRoutes; - authRoutes.value = config.authRoutes; - siteTitle.value = config.siteTitle; +export const createVnApp = (config: AppConfig) => { + + const store = createPinia(); //Allow the user to override the createApp function - createApp = createApp || vueCreateApp; + config.createApp ??= vueCreateApp; //Enable dark mode support if (config.useDarkMode) { @@ -83,25 +63,18 @@ export const createVnApp = (config: AppConfig, createApp?: (app: any) => any) => }); } - if (!config.hideCookieWarning) { - //Configure the cookie warning to be displayed cookies are not enabled - showCookieWarning.value = navigator?.cookieEnabled === false; - } - //Add required icons to library config.faLibrary.add(faBars, faLightbulb, faTimes); //create the vue app - const app = createApp(App) - - //Add the library to the app - app.component('fa-icon', FontAwesomeIcon) - - //Add the notification and router to the app - app.use(Notifications); + const app = config.createApp(App) + + app.use(Notifications) //Add the notification component to the app + .use(store) //Add pinia to the app + .component('fa-icon', FontAwesomeIcon) //Add the font awesome icon component to the app //Call the onCreate callback - config.onCreate(app); + config.onCreate(app, store); //Mount the app app.mount(config.mountElement); |