vueless 1.2.10-beta.3 → 1.2.10-beta.5

package/composables/useRequestQueue.ts

@@ -0,0 +1,47 @@
+import { readonly, ref } from "vue";
+
+import type { Ref } from "vue";
+
+import { getRequestWithoutQuery } from "../utils/requestQueue";
+
+const requestQueue = ref<string[]>([]);
+
+function addToRequestQueue(url: string | string[]): void {
+  Array.isArray(url)
+    ? requestQueue.value.push(...url.map(getRequestWithoutQuery))
+    : requestQueue.value.push(getRequestWithoutQuery(url));
+}
+
+function removeFromRequestQueue(url: string | string[]): void {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeFromRequestQueue);
+  } else {
+    requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
+  }
+}
+
+function isLoading(request: string | string[]): boolean {
+  return Array.isArray(request)
+    ? request.some((url) => requestQueue.value.some((item: string) => item === url))
+    : requestQueue.value.some((item: string) => item === request);
+}
+
+function onAddToRequestQueue(event: CustomEvent<{ request: string }>) {
+  addToRequestQueue(event.detail.request);
+}
+
+function onRemoveFromRequestQueue(event: CustomEvent<{ request: string }>) {
+  removeFromRequestQueue(event.detail.request);
+}
+
+window.addEventListener("addToRequestQueue", onAddToRequestQueue as EventListener);
+window.addEventListener("removeFromRequestQueue", onRemoveFromRequestQueue as EventListener);
+
+export function useRequestQueue() {
+  return {
+    isLoading,
+    addToRequestQueue,
+    removeFromRequestQueue,
+    requestQueue: readonly(requestQueue) as Readonly<Ref<readonly string[]>>,
+  };
+}

package/index.d.ts

@@ -27,13 +27,13 @@ export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 export { useLocale } from "./composables/useLocale";
 export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
-export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
+export { useRequestQueue } from "./composables/useRequestQueue";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useMutationObserver } from "./composables/useMutationObserver";
 export { Direction, useAutoPosition } from "./composables/useAutoPosition";
 export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";
 /* loaders */
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay";
 /* notifications */
 export {

package/index.ts

@@ -33,13 +33,14 @@ export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 export { useLocale } from "./composables/useLocale";
 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";
 /* loaders */
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay";
 /* notifications */
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10-beta.3",
+  "version": "1.2.10-beta.5",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.button/UButton.vue

@@ -62,6 +62,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
+  icon: Boolean(props.icon) || hasSlotContent(slots["default"]),
   leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
   rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   label: Boolean(props.label),
@@ -129,11 +130,6 @@ const {
     </template>
 
     <!-- This is needed to prevent changing button height -->
-    <div
-      v-if="(!label && !hasSlotContent(slots['default']) && !icon) || loading"
-      tabindex="-1"
-      v-bind="invisibleAttrs"
-      v-text="'invisible'"
-    />
+    <div v-if="icon || loading" tabindex="-1" v-bind="invisibleAttrs" v-text="'invisible'" />
   </component>
 </template>

package/ui.button/config.ts

@@ -54,6 +54,9 @@ export default /*tw*/ {
       loading: {
         true: "gap-0 pointer-events-none",
       },
+      icon: {
+        true: "gap-0",
+      },
       label: {
         false: "gap-0",
       },
@@ -62,6 +65,8 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { label: false, leftIcon: true, class: "gap-0" },
+      { label: false, rightIcon: true, class: "gap-0" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2" },

package/ui.button/tests/UButton.test.ts

@@ -115,7 +115,7 @@ describe("UButton.vue", () => {
 
       const nestedUIconComponents = component.findAllComponents(UIcon);
 
-      expect(component.text()).toBe("");
+      expect(component.text()).not.toBe(label);
       expect(nestedUIconComponents.length).toBe(1);
       expect(nestedUIconComponents[0].props("name")).toBe(icon);
     });

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -375,7 +375,7 @@ describe("UCalendar.vue", () => {
         },
       });
 
-      const nextPrevButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const nextPrevButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
       expect(nextPrevButtons.length).toBe(4);
     });
@@ -391,7 +391,7 @@ describe("UCalendar.vue", () => {
           },
         });
 
-        const nextPrevButtons = component.findAll('[vl-key="nextPrevButton"]');
+        const nextPrevButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
         expect(nextPrevButtons.length).toBe(2);
       });
@@ -422,7 +422,7 @@ describe("UCalendar.vue", () => {
 
       const dayView = component.findComponent(DayView);
       const initialDays = dayView.findAll('[vl-key="day"]').map((day) => day.text());
-      const navButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const navButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
       expect(navButtons.length).toBe(4);
 
@@ -446,7 +446,7 @@ describe("UCalendar.vue", () => {
 
       const dayView = component.findComponent(DayView);
       const initialDays = dayView.findAll('[vl-key="day"]').map((day) => day.text());
-      const navButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const navButtons = component.findAll('button[vl-key="nextPrevButton"]');
       const nextButton = navButtons[2];
 
       await nextButton.trigger("click");

package/ui.form-calendar/utilCalendar.ts

@@ -86,7 +86,7 @@ export function parseDate<TLocale extends DateLocale>(
   }
 
   if (!(parsedDate instanceof Date && !isNaN(parsedDate.getTime()))) {
-    throw new Error(`Invalid date provided: ${originalDate}`);
+    throw new Error(`[vueless] Invalid date provided: ${originalDate}`);
   }
 
   if (timeless === true) {
@@ -158,7 +158,7 @@ export function dateIsOutOfRange<TLocale extends DateLocale>(
   dateFormat: string | null = null,
 ) {
   if ((!dateFormat && typeof min === "string") || (!dateFormat && typeof max === "string")) {
-    throw new Error("strings needs a date format");
+    throw new Error("[vueless] strings needs a date format.");
   }
 
   const minDate =

package/ui.loader-overlay/useLoaderOverlay.ts

@@ -2,15 +2,15 @@ import { inject, readonly, ref } from "vue";
 
 import type { Ref, InjectionKey } from "vue";
 
-export const LoaderOverlaySymbol: InjectionKey<LoaderOverlay> =
-  Symbol.for("vueless:loader-overlay");
-
 interface LoaderOverlay {
   isLoading: Readonly<Ref<boolean, boolean>>;
   loaderOverlayOn: () => void;
   loaderOverlayOff: () => void;
 }
 
+export const LoaderOverlaySymbol: InjectionKey<LoaderOverlay> =
+  Symbol.for("vueless:loader-overlay");
+
 const isLoading = ref(true);
 
 function loaderOverlayOn(): void {
@@ -34,7 +34,7 @@ export function useLoaderOverlay(): LoaderOverlay {
 
   if (!loaderOverlay) {
     throw new Error(
-      "LoaderOverlay not provided. Ensure you are using `provide` with `LoaderOverlaySymbol`.",
+      "[vueless] LoaderOverlay not provided. Ensure you are using `provide` with `LoaderOverlaySymbol`.",
     );
   }
 

package/ui.loader-progress/ULoaderProgress.vue

@@ -3,9 +3,11 @@ 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 { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress";
 import { useLoaderProgress } from "./useLoaderProgress";
+import { clamp, queue } from "./utilLoaderProgress";
 
 import { COMPONENT_NAME, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./config";
@@ -25,46 +27,10 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref<number | null>(null);
 
+const { requestQueue } = useRequestQueue();
+const { loaderProgressOff, loaderProgressOn } = useLoaderProgress();
 const progressRef = useTemplateRef<HTMLDivElement>("progress-bar");
 
-const { requestQueue, loaderProgressOff, loaderProgressOn } = useLoaderProgress();
-
-onBeforeMount(() => {
-  if (window.__VuelessProgressLoaderInstance === undefined) {
-    window.__VuelessProgressLoaderInstance = 0;
-  }
-
-  if (!window.__VuelessProgressLoaderInstance) {
-    window.addEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
-    window.addEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
-  }
-
-  window.__VuelessProgressLoaderInstance += 1;
-});
-
-onBeforeUnmount(() => {
-  if (window.__VuelessProgressLoaderInstance === undefined) {
-    return;
-  }
-
-  window.__VuelessProgressLoaderInstance -= 1;
-
-  if (!window.__VuelessProgressLoaderInstance) {
-    delete window.__VuelessProgressLoaderInstance;
-
-    window.removeEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
-    window.removeEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
-  }
-});
-
-function onLoaderProgressOn(event: CustomEvent<{ resource: string }>) {
-  loaderProgressOn(event.detail.resource);
-}
-
-function onLoaderProgressOff(event: CustomEvent<{ resource: string }>) {
-  loaderProgressOff(event.detail.resource);
-}
-
 const isLoading = computed(() => {
   return typeof status.value === "number";
 });
@@ -151,12 +117,10 @@ function start() {
 }
 
 function set(amount: number) {
-  let currentProgress;
+  let currentProgress = 0;
 
   if (isLoading.value) {
     currentProgress = amount < progress.value ? clamp(amount, 0, 100) : clamp(amount, 0.8, 100);
-  } else {
-    currentProgress = 0;
   }
 
   status.value = currentProgress === 100 ? null : currentProgress;
@@ -205,6 +169,39 @@ function stop() {
   set(100);
 }
 
+function onLoaderProgressOn(event: CustomEvent<{ request: string }>) {
+  loaderProgressOn(event.detail.request);
+}
+
+function onLoaderProgressOff(event: CustomEvent<{ request: string }>) {
+  loaderProgressOff(event.detail.request);
+}
+
+onBeforeMount(() => {
+  if (!window.__VuelessLoaderProgressInstanceCount) {
+    window.addEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
+    window.addEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
+  }
+
+  window.__VuelessLoaderProgressInstanceCount = window.__VuelessLoaderProgressInstanceCount ?? 0;
+  window.__VuelessLoaderProgressInstanceCount += 1;
+});
+
+onBeforeUnmount(() => {
+  if (window.__VuelessLoaderProgressInstanceCount === undefined) {
+    return;
+  }
+
+  window.__VuelessLoaderProgressInstanceCount -= 1;
+
+  if (!window.__VuelessLoaderProgressInstanceCount) {
+    delete window.__VuelessLoaderProgressInstanceCount;
+
+    window.removeEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
+    window.removeEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
+  }
+});
+
 defineExpose({
   /**
    * Start loading animation.

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

@@ -6,7 +6,6 @@ import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
-import { useLoaderProgress } from "../useLoaderProgress";
 import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
@@ -34,13 +33,6 @@ export default {
 const DefaultTemplate: StoryFn<ULoaderProgressArgs> = (args: ULoaderProgressArgs) => ({
   components: { ULoaderProgress, UButton, URow },
   setup() {
-    const loaderProgress = useLoaderProgress();
-
-    if (!loaderProgress) {
-      throw new Error("LoaderProgress is not provided. Ensure it is properly injected.");
-    }
-
-    const { loaderProgressOn, loaderProgressOff } = loaderProgress;
     const slots = getSlotNames(ULoaderProgress.__name);
 
     return { args, slots, loaderProgressOn, loaderProgressOff };

package/ui.loader-progress/types.ts

@@ -3,7 +3,7 @@ import type { ComponentConfig } from "../types";
 
 declare global {
   interface Window {
-    __VuelessProgressLoaderInstance?: number;
+    __VuelessLoaderProgressInstanceCount?: number;
   }
 }
 
@@ -27,7 +27,7 @@ export interface Props {
   /**
    * API resource names (endpoint URIs).
    */
-  resources?: string | string[] | "any" | ["any"];
+  resources?: string | string[] | "any";
 
   /**
    * Loader progress size.

package/ui.loader-progress/useLoaderProgress.ts

@@ -2,39 +2,31 @@ import { inject, readonly, ref } from "vue";
 
 import type { Ref } from "vue";
 
-import { getRequestWithoutQuery } from "./utilLoaderProgress";
-
-export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
+import { useRequestQueue } from "../composables/useRequestQueue";
 
 type LoaderProgress = {
-  requestQueue: Readonly<Ref<readonly string[]>>;
-  loaderProgressOn: (url: string | string[]) => void;
-  loaderProgressOff: (url: string | string[]) => void;
+  isLoading: Readonly<Ref<boolean, boolean>>;
+  loaderProgressOn: (request: string | string[]) => void;
+  loaderProgressOff: (request: string | string[]) => void;
 };
 
-export function createLoaderProgress(): LoaderProgress {
-  const requestQueue = ref<string[]>([]);
-
-  function loaderProgressOn(url: string | string[]): void {
-    if (Array.isArray(url)) {
-      requestQueue.value.push(...url.map(getRequestWithoutQuery));
-    } else {
-      requestQueue.value.push(getRequestWithoutQuery(url));
-    }
-  }
+export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
 
-  function loaderProgressOff(url: string | string[]): void {
-    if (Array.isArray(url)) {
-      url.map(getRequestWithoutQuery).forEach(loaderProgressOff);
-    } else {
-      requestQueue.value = requestQueue.value.filter(
-        (item) => item !== getRequestWithoutQuery(url),
-      );
-    }
-  }
+const { addToRequestQueue, removeFromRequestQueue } = useRequestQueue();
 
+const isLoading = ref(true);
+
+function loaderProgressOn(request?: string | string[]): void {
+  request ? addToRequestQueue(request) : (isLoading.value = true);
+}
+
+function loaderProgressOff(request?: string | string[]): void {
+  request ? removeFromRequestQueue(request) : (isLoading.value = false);
+}
+
+export function createLoaderProgress(): LoaderProgress {
   return {
-    requestQueue: readonly(requestQueue),
+    isLoading: readonly(isLoading),
     loaderProgressOn,
     loaderProgressOff,
   };
@@ -45,7 +37,7 @@ export function useLoaderProgress(): LoaderProgress {
 
   if (!loaderProgress) {
     throw new Error(
-      "LoaderProgress not provided. Ensure you are using `provide` with `LoaderProgressSymbol`.",
+      "[vueless] LoaderProgress not provided. Ensure you are using `provide` with `LoaderProgressSymbol`.",
     );
   }
 

package/ui.loader-progress/utilLoaderProgress.ts

@@ -1,3 +1,15 @@
+export function loaderProgressOn(request: string | string[]): void {
+  const loaderProgressOnEvent = new CustomEvent("loaderProgressOn", { detail: { request } });
+
+  window.dispatchEvent(loaderProgressOnEvent);
+}
+
+export function loaderProgressOff(request: string | string[]): void {
+  const loaderProgressOffEvent = new CustomEvent("loaderProgressOff", { detail: { request } });
+
+  window.dispatchEvent(loaderProgressOffEvent);
+}
+
 export function clamp(n: number, min: number, max: number): number {
   if (n < min) {
     return min;
@@ -29,21 +41,3 @@ export const queue = (() => {
     }
   };
 })();
-
-export function loaderProgressOn(resource: string): void {
-  const loaderProgressOnEvent = new CustomEvent("loaderProgressOn", { detail: { resource } });
-
-  window.dispatchEvent(loaderProgressOnEvent);
-}
-
-export function loaderProgressOff(resource: string): void {
-  const loaderProgressOffEvent = new CustomEvent("loaderProgressOff", { detail: { resource } });
-
-  window.dispatchEvent(loaderProgressOffEvent);
-}
-
-export function getRequestWithoutQuery(request: string | URL): string {
-  const [requestWithoutQuery] = String(request).split("?");
-
-  return requestWithoutQuery;
-}

package/utils/requestQueue.ts

@@ -0,0 +1,21 @@
+export function getRequestWithoutQuery(request: string | URL): string {
+  const [requestWithoutQuery] = String(request).split("?");
+
+  return requestWithoutQuery;
+}
+
+export function addToRequestQueue(request: string | string[]): void {
+  const addToRequestQueueEvent = new CustomEvent("addToRequestQueue", {
+    detail: { request },
+  });
+
+  window.dispatchEvent(addToRequestQueueEvent);
+}
+
+export function removeFromRequestQueue(request: string | string[]): void {
+  const removeFromRequestQueueEvent = new CustomEvent("removeFromRequestQueue", {
+    detail: { request },
+  });
+
+  window.dispatchEvent(removeFromRequestQueueEvent);
+}