vueless 0.0.478-beta.13 → 0.0.478-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.13",
+  "version": "0.0.478-beta.14",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.loader-progress/ULoaderProgress.vue

@@ -5,16 +5,16 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted, watchEffect } from "vue";
+import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
 import { getDefault } from "../utils/utilUI.ts";
 import { isMobileApp } from "../utils/utilPlatform.ts";
 import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.js";
 import { useLoaderProgress } from "./useLoaderProgress.js";
+import useAttrs from "./useAttrs.js";
 
-import { ULoaderProgress, MAXIMUM, SPEED } from "./constants.js";
+import { ULoaderProgress, MAXIMUM, SPEED, INFINITY_LOADING } from "./constants.js";
 import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
 
 defineOptions({ inheritAttrs: false });
 
@@ -51,8 +51,14 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
-const { requestQueue, removeRequestUrl, isLoading, loaderProgressOff, loaderProgressOn } =
-  useLoaderProgress();
+const {
+  requestQueue,
+  removeRequestUrl,
+  isLoading,
+  loaderProgressOff,
+  loaderProgressOn,
+  addRequestUrl,
+} = useLoaderProgress();
 const { stripeAttrs } = useAttrs(props, { error, isMobileApp });
 
 const isStarted = computed(() => {
@@ -73,7 +79,6 @@ const resourceNamesArray = computed(() => {
 });
 
 watch(() => requestQueue.value.length, onChangeRequestsQueue);
-watch(isLoading, onChangeLoadingState);
 
 onMounted(() => {
   window.addEventListener("loaderProgressOn", setLoaderOnHandler);
@@ -93,16 +98,18 @@ onUnmounted(() => {
   window.removeEventListener("loaderProgressOff", setLoaderOffHandler);
 });
 
-watchEffect(() => {
-  if (props.loading) {
-    show.value = true;
-    start();
-
-    return;
-  }
-
-  done();
-});
+watch(
+  () => props.loading,
+  () => {
+    if (props.loading) {
+      addRequestUrl(INFINITY_LOADING);
+      isLoading.value = true;
+    } else {
+      removeRequestUrl(INFINITY_LOADING);
+    }
+  },
+  { immediate: true },
+);
 
 function setLoaderOnHandler(event) {
   loaderProgressOn(event.detail.resource);
@@ -112,39 +119,17 @@ function setLoaderOffHandler(event) {
   loaderProgressOff(event.detail.resource);
 }
 
-function onChangeLoadingState() {
-  if (!props.resources && isStarted.value && show.value && !isLoading.value) {
-    done();
-  }
-}
-
 function onChangeRequestsQueue() {
-  let isActiveRequests = false;
-
-  if (props.resources) {
-    resourceNamesArray.value.forEach((resource) => {
-      if (!isActiveRequests) {
-        const activeRequest = requestQueue.value.find((request) => request === resource);
-
-        isActiveRequests = Boolean(activeRequest);
-      }
+  const isActiveRequests =
+    requestQueue.value.includes(INFINITY_LOADING) ||
+    resourceNamesArray.value.some((resource) => {
+      return requestQueue.value.includes(resource);
     });
 
-    if (isActiveRequests && !isStarted.value) {
-      start();
-    } else if (!isActiveRequests && isStarted.value && show.value && !props.loading) {
-      done();
-    }
-  } else {
-    resourceNamesArray.value.forEach((resource) => {
-      const activeRequest = requestQueue.value.find((request) => request === resource);
-
-      isActiveRequests = !activeRequest;
-    });
-
-    if (isLoading.value && isActiveRequests && !isStarted.value) {
-      start();
-    }
+  if (isActiveRequests && !isStarted.value && isLoading.value) {
+    start();
+  } else if (!isActiveRequests && isStarted.value && show.value) {
+    done();
   }
 }
 

package/ui.loader-progress/constants.js

@@ -6,3 +6,4 @@ export const ULoaderProgress = "ULoaderProgress";
 
 export const MAXIMUM = 99;
 export const SPEED = 150;
+export const INFINITY_LOADING = "Infinity";

package/ui.loader-progress/storybook/stories.js

@@ -25,7 +25,6 @@ const DefaultTemplate = (args) => ({
   components: { ULoaderProgress, UButton, URow },
   setup() {
     const { loaderProgressOn, loaderProgressOff } = useLoaderProgress();
-
     const slots = getSlotNames(ULoaderProgress.__name);
 
     return { args, slots, loaderProgressOn, loaderProgressOff };
@@ -79,7 +78,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { loading: false };
 
 export const Color = EnumVariantTemplate.bind({});
 Color.args = { enum: "color" };

package/ui.loader-progress/useLoaderProgress.js

@@ -1,6 +1,7 @@
 import { inject, readonly, ref } from "vue";
 
 import { getRequestWithoutQuery } from "./utilLoaderProgress.js";
+import { INFINITY_LOADING } from "./constants.js";
 
 export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
 
@@ -17,9 +18,7 @@ function loaderProgressOn(url) {
 }
 
 function loaderProgressOff(url) {
-  requestQueue.value = url
-    ? requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url))
-    : [];
+  removeRequestUrl(url);
 
   requestTimeout.value = setTimeout(() => {
     if (!requestQueue.value.length) {
@@ -29,9 +28,13 @@ function loaderProgressOff(url) {
 }
 
 function addRequestUrl(url) {
-  Array.isArray(url)
-    ? requestQueue.value.push(...url.map(getRequestWithoutQuery))
-    : requestQueue.value.push(getRequestWithoutQuery(url));
+  if (Array.isArray(url)) {
+    requestQueue.value.push(...url.map(getRequestWithoutQuery));
+
+    return;
+  }
+
+  requestQueue.value.push(getRequestWithoutQuery(url));
 }
 
 function removeRequestUrl(url) {
@@ -41,12 +44,14 @@ function removeRequestUrl(url) {
     return;
   }
 
-  requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
+  requestQueue.value = requestQueue.value.filter(
+    (item) => item !== getRequestWithoutQuery(url) && item !== INFINITY_LOADING,
+  );
 }
 
 export function createLoaderProgress() {
   return {
-    isLoading: readonly(isLoading),
+    isLoading: isLoading,
     requestQueue: readonly(requestQueue),
     loaderProgressOn,
     loaderProgressOff,

package/ui.loader-progress/utilLoaderProgress.js

@@ -43,7 +43,7 @@ export function loaderProgressOff(resource) {
 }
 
 export function getRequestWithoutQuery(request) {
-  const [requestWithoutQuery] = request.split("?");
+  const [requestWithoutQuery] = String(request).split("?");
 
   return requestWithoutQuery;
 }