Added custom events for loaders

src/index.js

@@ -7,9 +7,21 @@ import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/us
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
+export { useLocale } from "./composable.locale";
 export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
 export { useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
-export { useLocale } from "./composable.locale";
+export {
+  loaderRenderingOn,
+  loaderRenderingOff,
+} from "./ui.loader-rendering/services/loaderRedering.service";
+export {
+  loaderTopOn,
+  loaderTopOff,
+  addLoadingTopRequestUrl,
+  removeLoadingTopRequestUrl,
+  setLoadingTopComponentRequestQueue,
+  removeLoadingTopComponentRequestQueue,
+} from "./ui.loader-top/services/loaderTop.service";
 export {
   notify,
   notifySuccess,
@@ -22,13 +34,13 @@ export {
 
 export function createVueless(options = {}) {
   const i18n = createLocale(options.i18n);
-  const loaderRenderingState = createLoaderRendering();
-  const loaderTopState = createLoaderTop();
+  const loaderRendering = createLoaderRendering();
+  const loaderTop = createLoaderTop();
 
   const install = (app) => {
     app.provide(LocaleSymbol, i18n);
-    app.provide(LoaderRenderingSymbol, loaderRenderingState);
-    app.provide(LoaderTopSymbol, loaderTopState);
+    app.provide(LoaderRenderingSymbol, loaderRendering);
+    app.provide(LoaderTopSymbol, loaderTop);
   };
 
   return {

src/ui.loader-rendering/Docs.mdx

@@ -19,3 +19,10 @@ import { useLoaderRendering } from "vueless";
 
 const { setRenderingFinished, isRenderingPage, setRenderingStarted } = useLoaderRendering();
 `} language="jsx" dark />
+
+## Control outside of component
+You can control loader state outside of vue components using following methods.
+
+<Source code={`
+import { loaderRenderingOn, loaderRenderingOff } from "vueless";
+`} language="jsx" dark />

src/ui.loader-rendering/composables/useLoaderRendering.js

@@ -1,4 +1,4 @@
-import { readonly, ref, inject } from "vue";
+import { readonly, ref, inject, onMounted, onBeforeUnmount } from "vue";
 
 export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
 
@@ -23,5 +23,15 @@ export function createLoaderRendering() {
 export function useLoaderRendering() {
   const loaderRenderingState = inject(LoaderRenderingSymbol);
 
+  onMounted(() => {
+    window.addEventListener("setRenderingStarted", setRenderingStarted);
+    window.addEventListener("setRenderingFinished", setRenderingFinished);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("setRenderingStarted", setRenderingStarted);
+    window.removeEventListener("setRenderingFinished", setRenderingFinished);
+  });
+
   return loaderRenderingState;
 }

src/ui.loader-rendering/services/loaderRedering.service.js

@@ -0,0 +1,7 @@
+export function loaderRenderingOn() {
+  window.dispatchEvent(new Event("setRenderingStarted"));
+}
+
+export function loaderRenderingOff() {
+  window.dispatchEvent(new Event("setRenderingFinished"));
+}

src/ui.loader-top/Docs.mdx

@@ -30,3 +30,17 @@ const {
     removeComponentRequestQueue,
 } = useLoaderTop();
 `} language="jsx" dark />
+
+## Control outside of component
+You can control loader state outside of vue components using following methods.
+
+<Source code={`
+import {
+  loaderTopOn,
+  loaderTopOff,
+  addLoadingTopRequestUrl,
+  removeLoadingTopRequestUrl,
+  setLoadingTopComponentRequestQueue,
+  removeLoadingTopComponentRequestQueue,
+} from "vueless";
+`} language="jsx" dark />

src/ui.loader-top/composables/useLoaderTop.js

@@ -1,4 +1,4 @@
-import { ref, readonly, inject } from "vue";
+import { ref, readonly, inject, onMounted, onBeforeUnmount } from "vue";
 
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
@@ -42,6 +42,18 @@ function removeComponentRequestQueue() {
   componentLoaderRequestQueue.value = [];
 }
 
+function addRequestUrlHandler(event) {
+  addRequestUrl(event.detail.url);
+}
+
+function removeRequestUrlHandler(event) {
+  removeRequestUrl(event.detail.url);
+}
+
+function setComponentRequestQueueHandler(event) {
+  setComponentRequestQueue(event.detail.requests);
+}
+
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
@@ -61,5 +73,23 @@ export function createLoaderTop() {
 export function useLoaderTop() {
   const loaderTopState = inject(LoaderTopSymbol);
 
+  onMounted(() => {
+    window.addEventListener("setLoadingOn", setLoadingOn);
+    window.addEventListener("setLoadingOff", setLoadingOff);
+    window.addEventListener("addRequestUrl", addRequestUrlHandler);
+    window.addEventListener("removeRequestUrl", removeRequestUrlHandler);
+    window.addEventListener("setComponentRequestQueue", setComponentRequestQueueHandler);
+    window.addEventListener("removeComponentRequestQueue", removeComponentRequestQueue);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("setLoadingOn", setLoadingOn);
+    window.removeEventListener("setLoadingOff", setLoadingOff);
+    window.removeEventListener("addRequestUrl", addRequestUrlHandler);
+    window.removeEventListener("removeRequestUrl", removeRequestUrlHandler);
+    window.removeEventListener("setComponentRequestQueue", setComponentRequestQueueHandler);
+    window.removeEventListener("removeComponentRequestQueue", removeComponentRequestQueue);
+  });
+
   return loaderTopState;
 }

src/ui.loader-top/services/loaderTop.service.js

@@ -29,3 +29,35 @@ export const queue = (() => {
     }
   };
 })();
+
+export function loaderTopOn() {
+  window.dispatchEvent(new Event("setLoadingOn"));
+}
+
+export function loaderTopOff() {
+  window.dispatchEvent(new Event("setLoadingOff"));
+}
+
+export function addLoadingTopRequestUrl(url) {
+  const addRequestUrlEvent = new CustomEvent("setLoadingOff", { detail: { url } });
+
+  window.dispatchEvent(addRequestUrlEvent);
+}
+
+export function removeLoadingTopRequestUrl(url) {
+  const removeRequestUrlEvent = new CustomEvent("removeRequestUrl", { detail: { url } });
+
+  window.dispatchEvent(removeRequestUrlEvent);
+}
+
+export function setLoadingTopComponentRequestQueue(requests) {
+  const setComponentRequestQueueEvent = new CustomEvent("setComponentRequestQueue", {
+    detail: { requests },
+  });
+
+  window.dispatchEvent(setComponentRequestQueueEvent);
+}
+
+export function removeLoadingTopComponentRequestQueue() {
+  window.dispatchEvent("removeComponentRequestQueue");
+}