vueless 0.0.725 → 0.0.727

package/package.json

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

package/ui.button-toggle/UToggle.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import ULabel from "../ui.form-label/ULabel.vue";
 import UButton from "../ui.button/UButton.vue";
 
 import useUI from "../composables/useUI.ts";
@@ -65,78 +64,61 @@ const mutatedProps = computed(() => ({
   selected: isSelected,
 }));
 
-const { toggleLabelAttrs, optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const { optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
-  <ULabel
-    :label="label"
-    :description="description"
-    :align="labelAlign"
-    :disabled="disabled"
-    :error="error"
-    centred
-    v-bind="toggleLabelAttrs"
-    :data-test="dataTest"
-  >
-    <template #label>
-      <!--
-        @slot Use this to add custom content instead of the entire Toggle label.
-        @binding {string} label
-      -->
-      <slot name="label" :label="label" />
-    </template>
-
-    <div v-bind="optionsAttrs">
-      <UButton
-        v-for="(option, index) in options"
-        :key="option.value"
-        :label="option.label"
-        tabindex="0"
-        color="gray"
-        :size="size"
-        :round="round"
-        :block="block"
-        :square="square"
-        :disabled="disabled"
-        v-bind="isSelected(option) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
-        :data-test="`${dataTest}-option-${index}`"
-        @click="onClickOption(option)"
-      >
-        <template #left="{ iconName }">
-          <!--
+  <div v-bind="optionsAttrs">
+    <UButton
+      v-for="(option, index) in options"
+      :key="option.value"
+      :label="option.label"
+      tabindex="0"
+      color="gray"
+      :size="size"
+      :round="round"
+      :block="block"
+      :square="square"
+      :disabled="disabled"
+      v-bind="isSelected(option) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
+      :data-test="`${dataTest}-option-${index}`"
+      @click="onClickOption(option)"
+    >
+      <template #left="{ iconName }">
+        <!--
             @slot Use it to add something before the label.
             @binding {object} option
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="left" :option="option" :icon-name="iconName" :index="index" />
-        </template>
+        <slot name="left" :option="option" :icon-name="iconName" :index="index" />
+      </template>
 
-        <template #default="{ label, iconName }">
-          <!--
+      <template #default="{ label, iconName }">
+        <!--
             @slot Use it to add something instead of the toggle option label.
             @binding {object} option
             @binding {string} label
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="option" :option="option" :label="label" :icon-name="iconName" :index="index">
-            {{ option.label }}
-          </slot>
-        </template>
+        <slot name="option" :option="option" :label="label" :icon-name="iconName" :index="index">
+          {{ option.label }}
+        </slot>
+      </template>
 
-        <template #right="{ iconName }">
-          <!--
+      <template #right="{ iconName }">
+        <!--
             @slot Use it to add something after the label.
             @binding {object} option
             @binding {string} icon-name
             @binding {number} index
           -->
-          <slot name="right" :option="option" :icon-name="iconName" :index="index" />
-        </template>
-      </UButton>
-    </div>
-  </ULabel>
+        <slot name="right" :option="option" :icon-name="iconName" :index="index" />
+      </template>
+    </UButton>
+  </div>
 </template>

package/ui.button-toggle/config.ts

@@ -1,22 +1,4 @@
 export default /*tw*/ {
-  toggleLabel: {
-    base: "{ULabel} flex-wrap",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-    defaults: {
-      size: {
-        "2xs": "sm",
-        xs: "sm",
-        sm: "md",
-        md: "md",
-        lg: "lg",
-        xl: "lg",
-      },
-    },
-  },
   options: {
     base: "flex",
     variants: {
@@ -33,7 +15,7 @@ export default /*tw*/ {
         false: "flex-nowrap gap-1 p-1 w-fit border rounded-dynamic border-gray-300",
       },
       disabled: {
-        true: "pointer-events-none",
+        true: "pointer-events-none bg-gray-100",
       },
       block: {
         true: "w-full flex-nowrap",
@@ -78,7 +60,6 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    labelAlign: "top",
     size: "md",
     split: false,
     block: false,

package/ui.button-toggle/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -24,7 +24,6 @@ export default {
   title: "Buttons & Links / Toggle",
   component: UToggle,
   args: {
-    label: "Please choose a role",
     modelValue: "11",
     options: [
       { value: "11", label: "Admin" },
@@ -47,22 +46,11 @@ const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
   components: { UToggle, UIcon, UBadge },
   setup() {
     const slots = getSlotNames(UToggle.__name);
-    const errorMessage = computed(() => {
-      if (args.name === "error" && Array.isArray(args.modelValue)) {
-        return args.modelValue.length === 0 ? "Please select at least one option" : "";
-      }
 
-      return "";
-    });
-
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
-    <UToggle
-      v-bind="args"
-      v-model="args.modelValue"
-      :error="errorMessage"
-    >
+    <UToggle v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
     </UToggle>
   `,
@@ -87,7 +75,6 @@ const EnumVariantTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes
         v-bind="args"
         v-model="values[option]"
         :[args.enum]="option"
-        :label="option"
         :options="[
           { value: option + 1, label: option },
           { value: option + 2, label: option },
@@ -106,7 +93,6 @@ Default.args = {
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = {
   name: "Disabled",
-  label: "You can disable the whole toggle or specific items",
   options: [
     { value: "11", label: "Admin" },
     { value: "12", label: "Editor", disabled: true },
@@ -115,9 +101,6 @@ Disabled.args = {
   ],
 };
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { name: "Description", description: "You can also add description" };
-
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { name: "sizeTemplate", enum: "size" };
 
@@ -126,15 +109,6 @@ Multiple.args = {
   name: "multiple",
   multiple: true,
   modelValue: [],
-  label: "You can choose more than one option",
-};
-
-export const Error = DefaultTemplate.bind({});
-Error.args = {
-  name: "error",
-  multiple: true,
-  modelValue: [],
-  label: "If no option is selected, error message is displayed",
 };
 
 export const Block = DefaultTemplate.bind({});
@@ -150,7 +124,6 @@ export const Square = DefaultTemplate.bind({});
 Square.args = {
   name: "square",
   square: true,
-  label: "Square prop is useful when icons are present",
   options: [
     { value: "11", label: "star" },
     { value: "12", label: "add" },
@@ -166,7 +139,6 @@ Square.args = {
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   name: "defaultSlot",
-  label: "Please select an operation to proceed",
   options: [
     { value: "1", label: "Download", rightIcon: "download", color: "green" },
     { value: "2", label: "Edit", rightIcon: "edit_note", color: "orange" },
@@ -195,13 +167,13 @@ export const Slots: StoryFn<UToggleArgs> = (args) => ({
     <URow no-mobile>
       <UToggle v-bind="args" v-model="leftModel" name="leftSlot">
         <template #left="{ index }">
-          <UIcon v-if="index === 0" name="settings" />
+          <UIcon size="sm" color="inherit" v-if="index === 0" name="settings" />
         </template>
       </UToggle>
 
       <UToggle v-bind="args" v-model="rightModel" name="rightSlot">
         <template #right="{ index }">
-          <UIcon v-if="index === 2" name="person" />
+          <UIcon size="sm" color="inherit" v-if="index === 2" name="person" />
         </template>
       </UToggle>
     </URow>

package/ui.button-toggle/types.ts

@@ -30,26 +30,6 @@ export interface Props {
    */
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
-  /**
-   * Error message.
-   */
-  error?: string;
-
-  /**
-   * Label placement.
-   */
-  labelAlign?: "top" | "topWithDesc" | "left" | "right";
-
-  /**
-   * Toggle label.
-   */
-  label?: string;
-
-  /**
-   * Toggle description.
-   */
-  description?: string;
-
   /**
    * Toggle name.
    */

package/ui.dropdown-badge/config.ts

@@ -22,8 +22,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-5 mb-5",
-        bottom: "top-3 mt-5",
+        top: "bottom-5 mb-3",
+        bottom: "top-5 mt-3",
       },
       xPosition: {
         left: "left-0",

package/ui.dropdown-button/config.ts

@@ -25,8 +25,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-full mb-1",
-        bottom: "top-full mt-1",
+        top: "bottom-full mb-1.5",
+        bottom: "top-full mt-1.5",
       },
       xPosition: {
         left: "left-0",

package/ui.dropdown-link/config.ts

@@ -34,8 +34,8 @@ export default /*tw*/ {
     base: "{UDropdownList} w-fit",
     variants: {
       yPosition: {
-        top: "bottom-3 mb-3",
-        bottom: "top-3 mt-3",
+        top: "bottom-3 mb-2.5",
+        bottom: "top-3 mt-2.5",
       },
       xPosition: {
         left: "left-0",

package/ui.form-calendar/config.ts

@@ -14,12 +14,12 @@ export default /*tw*/ {
       },
     },
   },
-  dateInRange: "bg-brand/5 !text-brand-900 hover:bg-brand/15 rounded-none",
+  dateInRange: "bg-brand-600/10 !text-brand-900 hover:bg-brand/15 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
   lastDateInRange: "rounded-l-none",
   anotherMonthDate: "text-gray-400",
-  activeDate: "bg-brand-100",
+  activeDate: "bg-brand-600/10",
   selectedDate: "",
   currentDate: "border-2 border-brand-600",
   day: "{UButton} size-9 w-full",

package/ui.form-input/config.ts

@@ -29,8 +29,8 @@ export default /*tw*/ {
   rightIcon: "{UIcon} {>inputIcon}",
   passwordIcon: "{UIcon} {>inputIcon}",
   passwordIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2.5 gap-1 rounded-inherit rounded-l-none",
-  leftSlot: "pl-3 flex items-center",
-  rightSlot: "pr-3 flex items-center",
+  leftSlot: "pl-2.5 flex items-center",
+  rightSlot: "pr-2.5 flex items-center",
   input: {
     base: `
       block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent

package/ui.form-input-file/config.ts

@@ -25,7 +25,7 @@ export default /*tw*/ {
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   content: {
-    base: "p-3 gap-3 flex justify-between items-start relative w-full rounded-dynamic bg-brand-50",
+    base: "p-3 gap-3 flex justify-between items-start relative w-full rounded-dynamic bg-brand-600/5",
     variants: {
       multiple: {
         false: "items-center",

package/ui.form-input-rating/UInputRating.vue

@@ -6,7 +6,6 @@ import { hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
-import ULabel from "../ui.form-label/ULabel.vue";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
@@ -60,65 +59,46 @@ function onMouseHover(overStar: number | null = null) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+const { config, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
   useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <ULabel
-    :label="label"
-    :error="error"
-    :size="size"
-    :align="labelAlign"
-    :description="description"
-    :disabled="disabled"
-    v-bind="inputLabelAttrs"
-    :data-test="dataTest"
-  >
-    <template #label>
+  <div v-bind="containerAttrs">
+    <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
       <!--
-        @slot Use this to add custom content instead of the label.
-        @binding {string} label
-      -->
-      <slot name="label" :label="label" />
-    </template>
-
-    <div v-bind="containerAttrs">
-      <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
-        <!--
           @slot Use it to customise counter.
           @binding {number} counter
           @binding {number} total
         -->
-        <slot name="counter" :counter="counterValue" :total="total">
-          {{ counterValue }}
-        </slot>
-      </div>
-
-      <div v-bind="starsAttrs">
-        <UIcon
-          v-for="star in stars"
-          :key="star"
-          internal
-          :color="error ? 'red' : 'brand'"
-          :interactive="selectable"
-          :name="starIcon(star)"
-          v-bind="starAttrs"
-          :data-test="`${dataTest}-rating-star-${star}`"
-          @click="onClickStar(star)"
-          @mouseleave="onMouseHover()"
-          @mouseover="onMouseHover(star)"
-        />
-      </div>
-
-      <div v-if="total || hasSlotContent($slots['total'])" v-bind="totalAttrs">
-        <!--
+      <slot name="counter" :counter="counterValue" :total="total">
+        {{ counterValue }}
+      </slot>
+    </div>
+
+    <div v-bind="starsAttrs">
+      <UIcon
+        v-for="star in stars"
+        :key="star"
+        internal
+        :color="error ? 'red' : 'brand'"
+        :interactive="selectable"
+        :name="starIcon(star)"
+        v-bind="starAttrs"
+        :data-test="`${dataTest}-rating-star-${star}`"
+        @click="onClickStar(star)"
+        @mouseleave="onMouseHover()"
+        @mouseover="onMouseHover(star)"
+      />
+    </div>
+
+    <div v-if="total || hasSlotContent($slots['total'])" v-bind="totalAttrs">
+      <!--
           @slot Use it to customise total.
           @binding {number} counter
           @binding {number} total
         -->
-        <slot name="total" :counter="counter" :total="total">({{ total }})</slot>
-      </div>
+      <slot name="total" :counter="counter" :total="total">({{ total }})</slot>
     </div>
-  </ULabel>
+  </div>
 </template>

package/ui.form-input-rating/config.ts

@@ -1,5 +1,4 @@
 export default /*tw*/ {
-  inputLabel: "{ULabel}",
   container: {
     base: "flex items-center text-gray-500 !leading-none",
     variants: {
@@ -45,7 +44,6 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    labelAlign: "top",
     size: "md",
     stars: 5,
     counter: false,

package/ui.form-input-rating/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -15,7 +14,7 @@ import type { Props } from "../types.ts";
 
 interface UInputRatingArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "labelAlign";
+  enum: "size";
 }
 
 export default {
@@ -40,16 +39,11 @@ const DefaultTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs) => (
   components: { UInputRating, UBadge },
   setup() {
     const slots = getSlotNames(UInputRating.__name);
-    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
-    <UInputRating
-      v-bind="args"
-      v-model="args.modelValue"
-      :error="errorMessage"
-    >
+    <UInputRating v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputRating>
   `,
@@ -81,25 +75,12 @@ const EnumVariantTemplate: StoryFn<UInputRatingArgs> = (args: UInputRatingArgs,
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "Your review helps us improve our services." };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = {
-  selectable: true,
-  modelValue: 0,
-  error: "Please select a rating before submitting your review.",
-};
-
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const LabelPlacement = EnumVariantTemplate.bind({});
-LabelPlacement.args = { enum: "labelAlign" };
-
 export const StarAmount = DefaultTemplate.bind({});
 StarAmount.args = { stars: 7 };
 StarAmount.parameters = {

package/ui.form-input-rating/types.ts

@@ -5,21 +5,11 @@ import type { ComponentConfig } from "../types.ts";
 export type Config = typeof defaultConfig;
 
 export interface Props {
-  /**
-   * Rating label.
-   */
-  label?: string;
-
   /**
    * Rating value.
    */
   modelValue: number;
 
-  /**
-   * Rating description.
-   */
-  description?: string;
-
   /**
    * Rating number of stars.
    */
@@ -30,16 +20,6 @@ export interface Props {
    */
   size?: "sm" | "md" | "lg";
 
-  /**
-   * Rating label placement.
-   */
-  labelAlign?: "top" | "topWithDesc" | "left" | "right";
-
-  /**
-   * Rating error message.
-   */
-  error?: string;
-
   /**
    * Disable the input.
    */

package/ui.form-select/config.ts

@@ -81,10 +81,10 @@ export default /*tw*/ {
   },
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
-  leftSlot: "{>toggle} pl-3",
-  rightSlot: "{>toggle} pr-3",
+  leftSlot: "{>toggle} pl-2.5",
+  rightSlot: "{>toggle} pr-2.5",
   beforeToggle: "{>toggle} cursor-auto",
-  afterToggle: "{>toggle} mr-3 items-start pt-3 cursor-auto",
+  afterToggle: "{>toggle} mr-2.5 items-start pt-3 cursor-auto",
   toggle: {
     base: "flex items-center",
     compoundVariants: [

package/ui.form-textarea/config.ts

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   textareaLabel: "{ULabel}",
   slot: "flex items-center justify-center whitespace-nowrap gap-1 rounded-dynamic",
-  leftSlot: "{>slot} pl-3 rounded-r-none",
-  rightSlot: "{>slot} pr-3 rounded-l-none",
+  leftSlot: "{>slot} pl-2.5 rounded-r-none",
+  rightSlot: "{>slot} pr-2.5 rounded-l-none",
   wrapper: {
     base: `
       flex bg-white transition w-full

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`.",