Core - Add zIndex to GlobalLoaderOptions, add onBeforeUnmount, cleanup some stuff, refactor related tests

Author: smastrom

packages/vue-global-loader/components/GlobalLoaderImpl.vue

@@ -1,5 +1,13 @@
 <script>
-import { defineComponent, ref, computed, reactive, nextTick, useCssModule } from 'vue'
+import {
+   defineComponent,
+   ref,
+   computed,
+   reactive,
+   nextTick,
+   useCssModule,
+   onBeforeUnmount,
+} from 'vue'
 import { useGlobalLoader } from '../dist'
 
 export default defineComponent({
@@ -28,6 +36,7 @@ export default defineComponent({
          '--v-gl-bg-opacity': options.backgroundOpacity,
          '--v-gl-bg-blur': options.backgroundBlur + 'px',
          '--v-gl-t-dur': options.transitionDuration + 'ms',
+         '--v-gl-z': options.zIndex,
       }))
 
       /** @type {import('vue').ComputedRef<import('vue').TransitionProps>} */
@@ -109,10 +118,7 @@ export default defineComponent({
          })
       }
 
-      function onCancel() {
-         console.log('onEnterCancelled')
-         onAfterLeave()
-      }
+      onBeforeUnmount(onAfterLeave)
 
       return {
          transitionStyles,
@@ -122,7 +128,6 @@ export default defineComponent({
          style,
          onEnter,
          onAfterLeave,
-         onCancel,
       }
    },
 })
@@ -135,8 +140,8 @@ export default defineComponent({
          v-bind="transitionStyles"
          @enter="onEnter"
          @afterLeave="onAfterLeave"
-         @enterCancelled="onCancel"
-         @leaveCancelled="onCancel"
+         @enterCancelled="onAfterLeave"
+         @leaveCancelled="onAfterLeave"
       >
          <div
             v-bind="$props.__attrs"
@@ -163,7 +168,7 @@ export default defineComponent({
    position: fixed;
    height: 100vh;
    height: 100svh;
-   z-index: 2147483647;
+   z-index: var(--v-gl-z);
    display: flex;
    justify-content: center;
    align-items: center;

packages/vue-global-loader/core/constants.ts

@@ -7,4 +7,5 @@ export const DEFAULT_OPTIONS: GlobalLoaderOptions = {
    backgroundColor: '#fff',
    backgroundOpacity: 1,
    backgroundBlur: 0,
+   zIndex: 2147483647,
 }

packages/vue-global-loader/core/types.ts

@@ -8,6 +8,7 @@ export interface GlobalLoaderOptions {
    backgroundColor: string
    backgroundOpacity: number
    backgroundBlur: number
+   zIndex: number
 }
 
 export interface GlobalLoaderCSSVars extends CSSProperties {
@@ -16,6 +17,7 @@ export interface GlobalLoaderCSSVars extends CSSProperties {
    '--v-gl-bg-opacity': number
    '--v-gl-bg-blur': string
    '--v-gl-t-dur': string
+   '--v-gl-z': number
 }
 
 export type { GlobalLoaderStore }

packages/vue-global-loader/nuxt/module.mjs

@@ -31,8 +31,7 @@ const module = defineNuxtModule({
    
                   export default defineNuxtPlugin(({ vueApp }) => {
                      const options = useRuntimeConfig().public?.globalLoader || {}
-                     console.log(options) // TODO: Remove
-
+                     
                      vueApp.use(globalLoader, options)
                   })           
                   `

tests/config.cy.tsx

@@ -1,27 +1,27 @@
 import { defineComponent as c, onMounted } from 'vue'
-import { useGlobalLoader, DEFAULT_OPTIONS as DEF } from 'vue-global-loader'
-
-import App from '@/App.vue'
+import {
+   GlobalLoader,
+   CircleSpinner,
+   useGlobalLoader,
+   DEFAULT_OPTIONS as DEF,
+} from 'vue-global-loader'
 
 describe('Config', () => {
-   const Home = c({
+   const app = c({
       setup() {
          const { displayLoader } = useGlobalLoader()
          onMounted(displayLoader)
 
-         return null
+         return () => (
+            <GlobalLoader data-cy-loader>
+               <CircleSpinner />
+            </GlobalLoader>
+         )
       },
    })
 
-   const routes = [
-      {
-         path: '/',
-         component: Home,
-      },
-   ]
-
    it('Default config is injected', () => {
-      cy.mountApp(App, {}, routes)
+      cy.mountApp(app)
          .getRoot()
          .checkCssVars(DEF)
 
@@ -37,9 +37,10 @@ describe('Config', () => {
          foregroundColor: 'blue',
          transitionDuration: 1000,
          screenReaderMessage: 'Custom message',
+         zIndex: 1000,
       }
 
-      cy.mountApp(App, customConf, routes)
+      cy.mountApp(app, customConf)
          .getRoot()
          .checkCssVars(customConf)
 
@@ -54,7 +55,7 @@ describe('Config', () => {
          backgroundBlur: 10,
       } as const
 
-      cy.mountApp(App, customConf2, routes)
+      cy.mountApp(app, customConf2)
          .getRoot()
          .checkCssVars({ ...DEF, ...customConf2 })