vueless 0.0.725 → 0.0.726

package/package.json

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

package/ui.loader-progress/ULoaderProgress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
+import { computed, watch, ref } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -7,7 +7,7 @@ import { getDefaults } from "../utils/ui.ts";
 import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.ts";
 import { useLoaderProgress } from "./useLoaderProgress.ts";
 
-import { COMPONENT_NAME, MAXIMUM, SPEED, INFINITY_LOADING } from "./constants.ts";
+import { COMPONENT_NAME, MAXIMUM, SPEED } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
 import type { Props, Config } from "./types.ts";
@@ -25,16 +25,9 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref<number | null>(null);
 
-const {
-  requestQueue,
-  removeRequestUrl,
-  isLoading,
-  loaderProgressOff,
-  loaderProgressOn,
-  addRequestUrl,
-} = useLoaderProgress();
+const { requestQueue } = useLoaderProgress();
 
-const isStarted = computed(() => {
+const isLoading = computed(() => {
   return typeof status.value === "number";
 });
 
@@ -45,68 +38,37 @@ const barStyle = computed(() => {
   };
 });
 
-const resourceNamesArray = computed(() => {
-  return Array.isArray(props.resources)
-    ? props.resources.map(getRequestWithoutQuery)
-    : [getRequestWithoutQuery(props.resources)];
-});
-
-const isPropsLoading = computed(
-  () => requestQueue.value.includes(INFINITY_LOADING) && props.loading,
-);
-
-watch(() => requestQueue.value.length, onChangeRequestsQueue);
-
-onMounted(() => {
-  window.addEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
-  window.addEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
-
-  if (props.resources) {
-    onChangeRequestsQueue();
+const resourceSubscriptions = computed(() => {
+  if (Array.isArray(props.resources)) {
+    return props.resources.map(getRequestWithoutQuery);
   }
-});
 
-onBeforeUnmount(() => {
-  removeRequestUrl(resourceNamesArray.value);
+  return [getRequestWithoutQuery(props.resources)];
 });
 
-onUnmounted(() => {
-  window.removeEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
-  window.removeEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
+const isActiveRequests = computed(() => {
+  const isAnyRequestActive = props.resources === "any" && requestQueue.value.length;
+  const isSubscribedRequestsActive = resourceSubscriptions.value.some((resource) =>
+    requestQueue.value.includes(resource),
+  );
+
+  return isAnyRequestActive || isSubscribedRequestsActive;
 });
 
+watch(() => requestQueue, onChangeRequestsQueue, { immediate: true, deep: true });
+
 watch(
   () => props.loading,
-  () => {
-    if (props.loading) {
-      addRequestUrl(INFINITY_LOADING);
-      isLoading.value = true;
-    } else {
-      removeRequestUrl(INFINITY_LOADING);
-    }
-  },
-  { immediate: true },
+  () => (props.loading ? start() : stop()),
 );
 
-function setLoaderOnHandler(event: CustomEvent<{ resource: string }>) {
-  loaderProgressOn(event.detail.resource);
-}
-
-function setLoaderOffHandler(event: CustomEvent<{ resource: string }>) {
-  loaderProgressOff(event.detail.resource);
-}
-
 function onChangeRequestsQueue() {
-  const isActiveRequests =
-    isPropsLoading.value ||
-    resourceNamesArray.value.some((resource: string) => {
-      return requestQueue.value.includes(resource);
-    });
+  if (props.loading !== undefined) return;
 
-  if (isActiveRequests && !isStarted.value && isLoading.value) {
+  if (isActiveRequests.value && !isLoading.value) {
     start();
-  } else if (!isActiveRequests && isStarted.value && show.value) {
-    done();
+  } else if (!isActiveRequests.value && isLoading.value && show.value) {
+    stop();
   }
 }
 
@@ -125,8 +87,9 @@ function afterEnter() {
 }
 
 function work() {
+  // TODO: Use requestAnimationFrame for animations instead of setTimeout for better performance and smoothness.
   setTimeout(() => {
-    if (!isStarted.value) {
+    if (!isLoading.value) {
       return;
     }
 
@@ -152,7 +115,7 @@ function start() {
 function set(amount: number) {
   let currentProgress;
 
-  if (isStarted.value) {
+  if (isLoading.value) {
     currentProgress = amount < progress.value ? clamp(amount, 0, 100) : clamp(amount, 0.8, 100);
   } else {
     currentProgress = 0;
@@ -200,10 +163,30 @@ function increase(amount?: number) {
   set(clamp(currentProgress + (amount || 0), 0, MAXIMUM));
 }
 
-function done() {
+function stop() {
   set(100);
 }
 
+defineExpose({
+  /**
+   * Start loading animation.
+   * @property {Function}
+   */
+  start,
+
+  /**
+   * Stop loading animation.
+   * @property {Function}
+   */
+  stop,
+
+  /**
+   * Loading state.
+   * @property {Boolean}
+   */
+  isLoading,
+});
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.

package/ui.loader-progress/config.ts

@@ -20,6 +20,6 @@ export default /*tw*/ {
   defaults: {
     color: "brand",
     size: "md",
-    loading: false,
+    loading: undefined,
   },
 };

package/ui.loader-progress/constants.ts

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

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

@@ -21,33 +21,21 @@ The loader uses queue of resources and will be shown until at least one item is
 import { useLoaderProgress } from "vueless";
 
 const {
-  isLoading,
   loaderProgressOn,
   loaderProgressOff,
   requestQueue,
-  addRequestUrl
-  removeRequestUrl
 } = useLoaderProgress();
 
-// get loader state
-console.log(isLoading.value);
-
 // show loader (add resource into queue)
 loaderProgressOn("/transactions");
+loaderProgressOff(["/transactions", "/products"]);
 
 // hide loader (remove resource from queue)
 loaderProgressOff("/transactions");
+loaderProgressOff(["/transactions", "/products"]);
 
-// get current resource array
+// get current global resource queue
 console.log(requestQueue.value);
-
-// add resource into loader queue
-addRequestUrl("/transactions");
-addRequestUrl(["/transactions", "/products"]);
-
-// remove resource from loader queue
-removeRequestUrl("/transactions");
-removeRequestUrl(["/transactions", "/products"]);
 `} language="jsx" dark />
 
 ## Using loader outside Vue components

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

@@ -97,7 +97,7 @@ const EnumVariantTemplate: StoryFn<ULoaderProgressArgs> = (
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { loading: false };
+Default.args = {};
 
 export const Color = EnumVariantTemplate.bind({});
 Color.args = { enum: "color" };

package/ui.loader-progress/types.ts

@@ -33,7 +33,7 @@ export interface Props {
   /**
    * API resource names (endpoint URIs).
    */
-  resources?: string | string[];
+  resources?: string | string[] | "any" | ["any"];
 
   /**
    * Progress size.

package/ui.loader-progress/useLoaderProgress.ts

@@ -1,4 +1,4 @@
-import { inject, readonly, ref } from "vue";
+import { inject, onBeforeUnmount, readonly, ref } from "vue";
 
 import type { Ref } from "vue";
 
@@ -7,38 +7,14 @@ import { getRequestWithoutQuery } from "./utilLoaderProgress.ts";
 export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
 
 type LoaderProgress = {
-  isLoading: Ref<boolean>;
   requestQueue: Readonly<Ref<readonly string[]>>;
   loaderProgressOn: (url: string | string[]) => void;
   loaderProgressOff: (url: string | string[]) => void;
-  addRequestUrl: (url: string | string[]) => void;
-  removeRequestUrl: (url: string | string[]) => void;
 };
 
-const isLoading = ref(false);
 const requestQueue = ref<string[]>([]);
-const requestTimeout = ref<number | undefined>(undefined);
 
 function loaderProgressOn(url: string | string[]): void {
-  addRequestUrl(url);
-  isLoading.value = true;
-
-  if (requestTimeout.value !== undefined) {
-    clearTimeout(requestTimeout.value);
-  }
-}
-
-function loaderProgressOff(url: string | string[]): void {
-  removeRequestUrl(url);
-
-  requestTimeout.value = window.setTimeout(() => {
-    if (!requestQueue.value.length) {
-      isLoading.value = false;
-    }
-  }, 50);
-}
-
-function addRequestUrl(url: string | string[]): void {
   if (Array.isArray(url)) {
     requestQueue.value.push(...url.map(getRequestWithoutQuery));
   } else {
@@ -46,28 +22,41 @@ function addRequestUrl(url: string | string[]): void {
   }
 }
 
-function removeRequestUrl(url: string | string[]): void {
+function loaderProgressOff(url: string | string[]): void {
   if (Array.isArray(url)) {
-    url.map(getRequestWithoutQuery).forEach(removeRequestUrl);
+    url.map(getRequestWithoutQuery).forEach(loaderProgressOff);
   } else {
     requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
   }
 }
 
+function setLoaderOnHandler(event: CustomEvent<{ resource: string }>) {
+  loaderProgressOn(event.detail.resource);
+}
+
+function setLoaderOffHandler(event: CustomEvent<{ resource: string }>) {
+  loaderProgressOff(event.detail.resource);
+}
+
 export function createLoaderProgress(): LoaderProgress {
   return {
-    isLoading,
     requestQueue: readonly(requestQueue),
     loaderProgressOn,
     loaderProgressOff,
-    addRequestUrl,
-    removeRequestUrl,
   };
 }
 
 export function useLoaderProgress(): LoaderProgress {
   const loaderProgress = inject<LoaderProgress>(LoaderProgressSymbol);
 
+  window.addEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
+  window.addEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
+    window.removeEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
+  });
+
   if (!loaderProgress) {
     throw new Error(
       "LoaderProgress not provided. Ensure you are using `provide` with `LoaderProgressSymbol`.",