vueless 0.0.531 → 0.0.533

package/ui.loader-progress/ULoaderProgress.vue

@@ -1,55 +1,29 @@
-<template>
-  <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
-    <div v-if="show" v-bind="stripeAttrs" :style="barStyle" />
-  </Transition>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
 import { isMobileApp } from "../utils/platform.ts";
-import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.js";
-import { useLoaderProgress } from "./useLoaderProgress.js";
-import useAttrs from "./useAttrs.js";
+import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress.ts";
+import { useLoaderProgress } from "./useLoaderProgress.ts";
+import useAttrs from "./useAttrs.ts";
 
-import { ULoaderProgress, MAXIMUM, SPEED, INFINITY_LOADING } from "./constants.js";
-import defaultConfig from "./config.js";
+import { ULoaderProgress, MAXIMUM, SPEED, INFINITY_LOADING } from "./constants.ts";
+import defaultConfig from "./config.ts";
 
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Loader stripe color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, ULoaderProgress).color,
-  },
+import type { ULoaderProgressProps } from "./types.ts";
 
-  /**
-   * API resource names (endpoint URIs).
-   */
-  resources: {
-    type: [String, Array],
-    default: "",
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Loader state (shown / hidden).
-   */
-  loading: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULoaderProgress).loading,
-  },
+const props = withDefaults(defineProps<ULoaderProgressProps>(), {
+  color: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).color,
+  loading: getDefault<ULoaderProgressProps>(defaultConfig, ULoaderProgress).loading,
 });
 
 const error = ref(false);
 const show = ref(false);
 const progress = ref(0);
 const opacity = ref(1);
-const status = ref(null);
+const status = ref<number | null>(null);
 
 const {
   requestQueue,
@@ -59,7 +33,8 @@ const {
   loaderProgressOn,
   addRequestUrl,
 } = useLoaderProgress();
-const { stripeAttrs } = useAttrs(props, { error, isMobileApp });
+
+const { stripeAttrs } = useAttrs(props, { isMobileApp });
 
 const isStarted = computed(() => {
   return typeof status.value === "number";
@@ -73,6 +48,10 @@ const barStyle = computed(() => {
 });
 
 const resourceNamesArray = computed(() => {
+  if (!props.resources) {
+    return [];
+  }
+
   return Array.isArray(props.resources)
     ? props.resources.map(getRequestWithoutQuery)
     : [getRequestWithoutQuery(props.resources)];
@@ -81,8 +60,8 @@ const resourceNamesArray = computed(() => {
 watch(() => requestQueue.value.length, onChangeRequestsQueue);
 
 onMounted(() => {
-  window.addEventListener("loaderProgressOn", setLoaderOnHandler);
-  window.addEventListener("loaderProgressOff", setLoaderOffHandler);
+  window.addEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
+  window.addEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
 
   if (props.resources) {
     onChangeRequestsQueue();
@@ -94,8 +73,8 @@ onBeforeUnmount(() => {
 });
 
 onUnmounted(() => {
-  window.removeEventListener("loaderProgressOn", setLoaderOnHandler);
-  window.removeEventListener("loaderProgressOff", setLoaderOffHandler);
+  window.removeEventListener("loaderProgressOn", setLoaderOnHandler as EventListener);
+  window.removeEventListener("loaderProgressOff", setLoaderOffHandler as EventListener);
 });
 
 watch(
@@ -111,11 +90,11 @@ watch(
   { immediate: true },
 );
 
-function setLoaderOnHandler(event) {
+function setLoaderOnHandler(event: CustomEvent<{ resource: string }>) {
   loaderProgressOn(event.detail.resource);
 }
 
-function setLoaderOffHandler(event) {
+function setLoaderOffHandler(event: CustomEvent<{ resource: string }>) {
   loaderProgressOff(event.detail.resource);
 }
 
@@ -138,7 +117,7 @@ function beforeEnter() {
   progress.value = 0;
 }
 
-function enter(el, done) {
+function enter(el: Element, done: () => void) {
   opacity.value = 1;
   done();
 }
@@ -172,7 +151,7 @@ function start() {
   }
 }
 
-function set(amount) {
+function set(amount: number) {
   let currentProgress;
 
   if (isStarted.value) {
@@ -201,7 +180,7 @@ function set(amount) {
   });
 }
 
-function increase(amount) {
+function increase(amount?: number) {
   const currentProgress = progress.value;
 
   if (currentProgress < 100 && typeof amount !== "number") {
@@ -220,10 +199,16 @@ function increase(amount) {
     }
   }
 
-  set(clamp(currentProgress + amount, 0, MAXIMUM));
+  set(clamp(currentProgress + (amount || 0), 0, MAXIMUM));
 }
 
 function done() {
   set(100);
 }
 </script>
+
+<template>
+  <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
+    <div v-if="show" v-bind="stripeAttrs" :style="barStyle" />
+  </Transition>
+</template>

package/ui.loader-progress/{config.js → config.ts}

@@ -11,6 +11,7 @@ export default /*tw*/ {
       },
     },
   },
+  stripeMobile: "",
   defaults: {
     color: "brand",
     loading: false,

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

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.loader-progress/storybook/{stories.js → stories.ts}

@@ -6,8 +6,16 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
-import { useLoaderProgress } from "../useLoaderProgress.js";
-import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress.js";
+import { useLoaderProgress } from "../useLoaderProgress.ts";
+import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress.ts";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { ULoaderProgressProps } from "../types.ts";
+
+interface ULoaderProgressArgs extends ULoaderProgressProps {
+  slotTemplate?: string;
+  enum: "color";
+}
 
 /**
  * The `ULoaderProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-progress)
@@ -19,12 +27,18 @@ export default {
   argTypes: {
     ...getArgTypes(ULoaderProgress.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<ULoaderProgressArgs> = (args: ULoaderProgressArgs) => ({
   components: { ULoaderProgress, UButton, URow },
   setup() {
-    const { loaderProgressOn, loaderProgressOff } = useLoaderProgress();
+    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 };
@@ -39,14 +53,17 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<ULoaderProgressArgs> = (
+  args: ULoaderProgressArgs,
+  { argTypes },
+) => ({
   components: { ULoaderProgress, UButton, UCol, URow, UBadge },
   setup() {
     return {
       args,
       loaderProgressOff,
       loaderProgressOn,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.loader-progress/types.ts

@@ -0,0 +1,46 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface ULoaderProgressProps {
+  /**
+   * Loader stripe color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * API resource names (endpoint URIs).
+   */
+  resources?: string | string[];
+
+  /**
+   * Loader state (shown / hidden).
+   */
+  loading?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+}

package/ui.loader-progress/useAttrs.ts

@@ -0,0 +1,36 @@
+import { computed } from "vue";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { ULoaderProgressProps, Config } from "./types.ts";
+
+type ComponentState = {
+  isMobileApp: boolean;
+};
+
+export default function useAttrs(
+  props: ULoaderProgressProps,
+  { isMobileApp }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, getExtendingKeysClasses, hasSlotContent } = useUI<Config>(
+    defaultConfig,
+    () => props.config,
+  );
+
+  const extendingKeys = ["stripeMobile"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    stripe: {
+      extend: computed(() => [isMobileApp && extendingKeysClasses.linkWithChild.value]),
+    },
+  });
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.loader-progress/useLoaderProgress.ts

@@ -0,0 +1,81 @@
+import { inject, readonly, ref } from "vue";
+
+import type { Ref } from "vue";
+
+import { getRequestWithoutQuery } from "./utilLoaderProgress.ts";
+import { INFINITY_LOADING } from "./constants.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 {
+    requestQueue.value.push(getRequestWithoutQuery(url));
+  }
+}
+
+function removeRequestUrl(url: string | string[]): void {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeRequestUrl);
+  } else {
+    requestQueue.value = requestQueue.value.filter(
+      (item) => item !== getRequestWithoutQuery(url) && item !== INFINITY_LOADING,
+    );
+  }
+}
+
+export function createLoaderProgress(): LoaderProgress {
+  return {
+    isLoading,
+    requestQueue: readonly(requestQueue),
+    loaderProgressOn,
+    loaderProgressOff,
+    addRequestUrl,
+    removeRequestUrl,
+  };
+}
+
+export function useLoaderProgress(): LoaderProgress {
+  const loaderProgress = inject<LoaderProgress>(LoaderProgressSymbol);
+
+  if (!loaderProgress) {
+    throw new Error(
+      "LoaderProgress not provided. Ensure you are using `provide` with `LoaderProgressSymbol`.",
+    );
+  }
+
+  return loaderProgress;
+}

package/ui.loader-progress/utilLoaderProgress.ts

@@ -0,0 +1,49 @@
+export function clamp(n: number, min: number, max: number): number {
+  if (n < min) {
+    return min;
+  }
+
+  if (n > max) {
+    return max;
+  }
+
+  return n;
+}
+
+export const queue = (() => {
+  const pending: ((next: () => void) => void)[] = [];
+
+  function next(): void {
+    const fn = pending.shift();
+
+    if (fn) {
+      fn(next);
+    }
+  }
+
+  return (fn: (next: () => void) => void): void => {
+    pending.push(fn);
+
+    if (pending.length === 1) {
+      next();
+    }
+  };
+})();
+
+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;
+}