vueless 0.0.84 → 0.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -1,4 +1,4 @@
-import { readonly, ref, inject, onMounted, onBeforeUnmount } from "vue";
+import { readonly, ref, inject } from "vue";
 
 export const LoaderRenderingSymbol = Symbol.for("vueless:loader-rendering");
 
@@ -23,15 +23,5 @@ 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;
 }

package/ui.loader-rendering/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, onUnmounted } from "vue";
 
 import { useAttrs } from "./composables/attrs.composable";
 import { useLoaderRendering } from "./composables/useLoaderRendering";
@@ -26,7 +26,17 @@ const props = defineProps({
 });
 
 const { wrapperAttrs, loaderAttrs, rippleAttrs, rippleElementAttrs, config } = useAttrs(props);
-const { isRenderingPage } = useLoaderRendering();
+const { isRenderingPage, setRenderingStarted, setRenderingFinished } = useLoaderRendering();
+
+onMounted(() => {
+  window.addEventListener("setRenderingStarted", setRenderingStarted);
+  window.addEventListener("setRenderingFinished", setRenderingFinished);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("setRenderingStarted", setRenderingStarted);
+  window.removeEventListener("setRenderingFinished", setRenderingFinished);
+});
 
 const showLoader = computed(() => {
   return props.loading || isRenderingPage.value;

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

@@ -1,4 +1,4 @@
-import { ref, readonly, inject, onMounted, onBeforeUnmount } from "vue";
+import { ref, readonly, inject } from "vue";
 
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
@@ -42,14 +42,6 @@ function removeComponentRequestQueue() {
   componentLoaderRequestQueue.value = [];
 }
 
-function setLoaderOnHandler(event) {
-  setLoaderOn(event.detail.resource);
-}
-
-function setLoaderOffHandler(event) {
-  setLoaderOff(event.detail.resource);
-}
-
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
@@ -69,15 +61,5 @@ export function createLoaderTop() {
 export function useLoaderTop() {
   const loaderTopState = inject(LoaderTopSymbol);
 
-  onMounted(() => {
-    window.addEventListener("setLoaderOn", setLoaderOnHandler);
-    window.addEventListener("setLoaderOff", setLoaderOffHandler);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("setLoaderOn", setLoaderOnHandler);
-    window.removeEventListener("setLoaderOff", setLoaderOffHandler);
-  });
-
   return loaderTopState;
 }

package/ui.loader-top/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, watch, ref } from "vue";
+import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
 import UIService, { isMobileApp } from "../service.ui";
 import { clamp, queue } from "./services/loaderTop.service";
@@ -49,6 +49,8 @@ const {
   componentLoaderRequestQueue,
   setComponentRequestQueue,
   removeComponentRequestQueue,
+  setLoaderOff,
+  setLoaderOn,
 } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
@@ -74,12 +76,30 @@ if (props.resourceNames) {
   setComponentRequestQueue(resourceNamesArray.value);
 }
 
+onMounted(() => {
+  window.addEventListener("setLoaderOn", setLoaderOnHandler);
+  window.addEventListener("setLoaderOff", setLoaderOffHandler);
+});
+
 onBeforeUnmount(() => {
   if (props.resourceNames) {
     removeComponentRequestQueue();
   }
 });
 
+onUnmounted(() => {
+  window.removeEventListener("setLoaderOn", setLoaderOnHandler);
+  window.removeEventListener("setLoaderOff", setLoaderOffHandler);
+});
+
+function setLoaderOnHandler(event) {
+  setLoaderOn(event.detail.resource);
+}
+
+function setLoaderOffHandler(event) {
+  setLoaderOff(event.detail.resource);
+}
+
 function requestWithoutQuery(request) {
   const [requestWithoutQuery] = request.split("?");
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "contributions": {
     "html": {
       "description-markup": "markdown",