vueless 1.2.10-beta.6 → 1.2.10-beta.8

package/index.d.ts

@@ -30,6 +30,7 @@ export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
 export { Direction, useAutoPosition } from "./composables/useAutoPosition";
 export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10-beta.6",
+  "version": "1.2.10-beta.8",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -66,7 +66,7 @@
     "prettier": "^3.6.2",
     "release-it": "^19.0.4",
     "typescript": "^5.8.3",
-    "vite": "^7.1.5",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",

package/ui.loader-progress/ULoaderProgress.vue

@@ -3,7 +3,6 @@ import { computed, watch, ref, useTemplateRef, onBeforeMount, onBeforeUnmount }
 
 import useUI from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
-import { useRequestQueue } from "../composables/useRequestQueue";
 import { getRequestWithoutQuery } from "../utils/requestQueue";
 
 import { useLoaderProgress } from "./useLoaderProgress";
@@ -18,7 +17,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  resources: () => "",
+  resources: "any",
 });
 
 const error = ref(false);
@@ -27,8 +26,7 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref<number | null>(null);
 
-const { requestQueue } = useRequestQueue();
-const { loaderProgressOff, loaderProgressOn } = useLoaderProgress();
+const { progressRequestQueue, loaderProgressOff, loaderProgressOn } = useLoaderProgress();
 const progressRef = useTemplateRef<HTMLDivElement>("progress-bar");
 
 const isLoading = computed(() => {
@@ -51,15 +49,15 @@ const resourceSubscriptions = computed(() => {
 });
 
 const isActiveRequests = computed(() => {
-  const isAnyRequestActive = props.resources === "any" && requestQueue.value.length;
+  const isAnyRequestActive = props.resources === "any" && progressRequestQueue.value.length;
   const isSubscribedRequestsActive = resourceSubscriptions.value.some((resource) =>
-    requestQueue.value.includes(resource),
+    progressRequestQueue.value.includes(resource),
   );
 
   return isAnyRequestActive || isSubscribedRequestsActive;
 });
 
-watch(() => requestQueue, onChangeRequestsQueue, { immediate: true, deep: true });
+watch(() => progressRequestQueue, onChangeRequestsQueue, { immediate: true, deep: true });
 
 watch(
   () => props.loading,

package/ui.loader-progress/storybook/docs.mdx

@@ -16,26 +16,33 @@ import defaultConfig from "../config?raw"
 To control the loader state in Vue components use `useLoaderProgress` composable.
 
 The loader uses queue of resources and will be shown until at least one item is present in a queue.
+The queue approach is useful if you want to implement global loading handling (for example in axios interceptors)
 
 <Source code={`
 import { useLoaderProgress } from "vueless";
 
 const {
+  isLoading,
   loaderProgressOn,
   loaderProgressOff,
-  requestQueue,
+  progressRequestQueue,
 } = useLoaderProgress();
 
-// show loader (add resource into queue)
-loaderProgressOn("/transactions");
-loaderProgressOff(["/transactions", "/products"]);
+/* get loader state */
+console.log(isLoading.value);
 
-// hide loader (remove resource from queue)
-loaderProgressOff("/transactions");
-loaderProgressOff(["/transactions", "/products"]);
+/* show loader */
+loaderProgressOn(); // simple
+loaderProgressOn("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
 
-// get current global resource queue
-console.log(requestQueue.value);
+/* hide loader */
+loaderProgressOff(); // simple
+loaderProgressOff("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
+
+/* access loader progress resource queue */
+console.log(progressRequestQueue.value);
 `} language="jsx" dark />
 
 ## Using loader outside Vue components
@@ -44,11 +51,15 @@ To control the loader state outside Vue components, use the following methods.
 <Source code={`
 import { loaderProgressOn, loaderProgressOff } from "vueless";
 
-// show loader
-loaderProgressOn("/transactions");
+/* show loader */
+loaderProgressOn(); // simple
+loaderProgressOn("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
 
-// hide loader
-loaderProgressOff("/transactions");
+/* hide loader */
+loaderProgressOff(); // simple
+loaderProgressOff("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
 `} language="jsx" dark />
 
 ## Default config

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

@@ -69,7 +69,6 @@ const EnumTemplate: StoryFn<ULoaderProgressArgs> = (args: ULoaderProgressArgs, {
         v-for="option in argTypes?.[args.enum]?.options"
         :key="option"
         v-bind="getArgs(args, option)"
-        :resources="args.resources"
         class="static"
       />
     </UCol>

package/ui.loader-progress/useLoaderProgress.ts

@@ -2,33 +2,51 @@ import { inject, readonly, ref } from "vue";
 
 import type { Ref } from "vue";
 
-import { useRequestQueue } from "../composables/useRequestQueue";
+import { getRequestWithoutQuery } from "../utils/requestQueue";
 
 type LoaderProgress = {
   isLoading: Readonly<Ref<boolean, boolean>>;
   loaderProgressOn: (request: string | string[]) => void;
   loaderProgressOff: (request: string | string[]) => void;
+  progressRequestQueue: Readonly<Ref<readonly string[]>>;
 };
 
 export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
 
-const { addToRequestQueue, removeFromRequestQueue } = useRequestQueue();
+const progressRequestQueue = ref<string[]>([]);
+
+function addToProgressRequestQueue(url: string | string[]): void {
+  Array.isArray(url)
+    ? progressRequestQueue.value.push(...url.map(getRequestWithoutQuery))
+    : progressRequestQueue.value.push(getRequestWithoutQuery(url));
+}
+
+function removeFromProgressRequestQueue(url: string | string[]): void {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeFromProgressRequestQueue);
+  } else {
+    progressRequestQueue.value = progressRequestQueue.value.filter(
+      (item) => item !== getRequestWithoutQuery(url),
+    );
+  }
+}
 
 const isLoading = ref(true);
 
 function loaderProgressOn(request?: string | string[]): void {
-  request ? addToRequestQueue(request) : (isLoading.value = true);
+  request ? addToProgressRequestQueue(request) : (isLoading.value = true);
 }
 
 function loaderProgressOff(request?: string | string[]): void {
-  request ? removeFromRequestQueue(request) : (isLoading.value = false);
+  request ? removeFromProgressRequestQueue(request) : (isLoading.value = false);
 }
 
 export function createLoaderProgress(): LoaderProgress {
   return {
-    isLoading: readonly(isLoading),
     loaderProgressOn,
     loaderProgressOff,
+    isLoading: readonly(isLoading),
+    progressRequestQueue: readonly(progressRequestQueue) as Readonly<Ref<readonly string[]>>,
   };
 }