Fixed issue with router not being available to core UI components.

sharedo-tech · Oct 5, 2023 · 20ddccc · 20ddccc
1 parent 08771f3
commit 20ddccc
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 20 deletions.
diff --git a/src/framework/actionSheet/index.js b/src/framework/actionSheet/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import ActionSheet from './ActionSheet.vue'
 import Vuetify from 'vuetify/lib'
+import { Router } from "../../plugins/router.js"
 
 /* Usage:
  * actionSheet({
@@ -20,7 +21,10 @@ import Vuetify from 'vuetify/lib'
 const ActionSheetConstructor = Vue.extend(ActionSheet)
 
 function createCmp(options) {
-    const cmp = new ActionSheetConstructor()
+    const cmp = new ActionSheetConstructor({
+        router: Router.instance
+    });
+
     const vuetifyObj = new Vuetify()
     cmp.$vuetify = vuetifyObj.framework
 

diff --git a/src/framework/banner/index.js b/src/framework/banner/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Banner from './Banner.vue'
 import Vuetify from 'vuetify/lib'
+import { Router } from "../../plugins/router.js"
 
 /* Usage:
  * banner({
@@ -14,7 +15,10 @@ import Vuetify from 'vuetify/lib'
 const BannerConstructor = Vue.extend(Banner)
 
 function createCmp(options) {
-    const cmp = new BannerConstructor()
+    const cmp = new BannerConstructor({
+        router: Router.instance
+    });
+
     const vuetifyObj = new Vuetify()
     cmp.$vuetify = vuetifyObj.framework
 
@@ -38,14 +42,14 @@ function show(options) {
             cmp.$nextTick(() => {
 
                 // Allow fade out animation
-                setTimeout(function() {
+                setTimeout(function () {
                     cmp.$destroy()
                     cmp.$el.parentNode.removeChild(cmp.$el)
                 }, 400)
             })
         }
     })
-    
+
     cmp.$on('buttonClicked', (btn) => {
         if (typeof btn.handler === "function") {
             if (btn.handler() !== false) {

diff --git a/src/framework/dialog/index.js b/src/framework/dialog/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Dialog from './Dialog.vue'
 import Vuetify from 'vuetify/lib'
+import { Router } from "../../plugins/router.js"
 
 /* Usage:
  * dialog(MyComponent, options)
@@ -11,14 +12,17 @@ const DialogConstructor = Vue.extend(Dialog)
 function createCmp(childComponent, options) {
 
     // Instantiate dialog
-    const cmp = new DialogConstructor()
+    const cmp = new DialogConstructor({
+        router: Router.instance
+    });
+
     const vuetifyObj = new Vuetify()
     cmp.$vuetify = vuetifyObj.framework
 
     // Mount dialog and add to DOM
     Object.assign(cmp, { childComponent: childComponent, childProps: options })
     document.body.appendChild(cmp.$mount().$el)
-    
+
     return cmp
 }
 
@@ -29,7 +33,7 @@ function show(component, options, evts) {
 
     // We can't trust mounted as it fires to early - use event
     cmp.$emit('shown')
-    
+
     cmp.$on('close', (result) => {
         cmp.active = false;
 
@@ -38,7 +42,7 @@ function show(component, options, evts) {
         }
 
         // Allow fade out animation
-        setTimeout(function() {
+        setTimeout(function () {
             cmp.$destroy()
             cmp.$el.parentNode.removeChild(cmp.$el)
         }, 400)

diff --git a/src/framework/loading/index.js b/src/framework/loading/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Loading from './Loading.vue'
 import Vuetify from 'vuetify/lib'
+import { Router } from "../../plugins/router.js"
 
 /* Usage:
  * var l = loading()
@@ -14,7 +15,10 @@ var cmp = null;
 var depth = 0;
 
 function createCmp(options) {
-    const cmp = new LoadingConstructor()
+    const cmp = new LoadingConstructor({
+        router: Router.instance
+    });
+
     const vuetifyObj = new Vuetify()
     cmp.$vuetify = vuetifyObj.framework
 
@@ -40,7 +44,7 @@ function show(options) {
             cmp.$nextTick(() => {
 
                 // Allow fade out animation
-                setTimeout(function() {
+                setTimeout(function () {
 
                     // Has loading() been called in meantime?
                     if (depth > 0 || !cmp) return;
@@ -50,7 +54,7 @@ function show(options) {
                     cmp = null;
                 }, 400)
             })
-            
+
         }
     })
 

diff --git a/src/framework/messageBox/index.js b/src/framework/messageBox/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import MessageBox from './MessageBox.vue'
 import Vuetify from 'vuetify/lib'
+import { Router } from "../../plugins/router.js"
 
 /* Usage:
  * messageBox({
@@ -16,7 +17,10 @@ import Vuetify from 'vuetify/lib'
 const MessageBoxConstructor = Vue.extend(MessageBox)
 
 function createCmp(options) {
-    const cmp = new MessageBoxConstructor()
+    const cmp = new MessageBoxConstructor({
+        router: Router.instance
+    });
+
     const vuetifyObj = new Vuetify()
     cmp.$vuetify = vuetifyObj.framework
 
@@ -31,15 +35,15 @@ function show(options) {
 
     cmp.$on('statusChange', (isActive, wasActive) => {
         if (wasActive && !isActive) {
-            
+
             // Allow fade out animation
-            setTimeout(function() {
+            setTimeout(function () {
                 cmp.$destroy()
                 cmp.$el.parentNode.removeChild(cmp.$el)
             }, 400)
         }
     })
-    
+
     cmp.$on('buttonClicked', (btn) => {
         if (typeof btn.handler === "function") {
             btn.handler()

diff --git a/src/framework/toast/index.js b/src/framework/toast/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Toast from './Toast.vue'
 import Vuetify from 'vuetify/lib'
+import { Router } from "../../plugins/router.js"
 
 /* Usage:
  * toast({
@@ -19,7 +20,10 @@ const ToastConstructor = Vue.extend(Toast)
 const toasts = []
 
 function createCmp(options) {
-    const cmp = new ToastConstructor()
+    const cmp = new ToastConstructor({
+        router: Router.instance
+    });
+
     const vuetifyObj = new Vuetify()
     cmp.$vuetify = vuetifyObj.framework
 
@@ -55,19 +59,19 @@ function show(options) {
                 var h = cmp.$el.childNodes[0].offsetHeight;
 
                 // Remove from toasts array
-                for(var i = toasts.length - 1; i >= 0; i--) {
-                    
+                for (var i = toasts.length - 1; i >= 0; i--) {
+
                     // Move toast above us down
                     toasts[i].bottom -= (h + PADDING);
 
-                    if(toasts[i] === cmp) {
+                    if (toasts[i] === cmp) {
                         toasts.splice(i, 1);
                         break;
                     }
                 }
 
                 // Allow fade out animation
-                setTimeout(function() {
+                setTimeout(function () {
                     cmp.$destroy()
                     cmp.$el.parentNode.removeChild(cmp.$el)
                 }, 400)

diff --git a/src/plugin.js b/src/plugin.js
@@ -1,6 +1,7 @@
 import { override } from "./app/settings.js";
 import { useVuetify } from "./plugins/vuetify.js";
 import { useTipTapVuetify } from "./plugins/tiptap-vuetify.js";
+import { useRouter } from "./plugins/router.js";
 
 import SharedoAuth from "./infra/authcode.js";
 import SharedoFetch from "./infra/fetchWrapper.js";
@@ -51,6 +52,7 @@ export default {
 export {
     useVuetify,
     useTipTapVuetify,
+    useRouter,
 
     // Services
     SharedoAuth,

diff --git a/src/plugins/router.js b/src/plugins/router.js
@@ -0,0 +1,21 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+class Router { }
+
+const useRouter = (routes, mode = "history", base = process.env.BASE_URL) => {
+  Router.instance = new VueRouter({
+    mode,
+    base,
+    routes
+  });
+
+  return Router.instance;
+}
+
+export {
+  Router,
+  useRouter
+}