vueless 0.0.531 → 0.0.532

package/package.json

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

package/types.ts

@@ -32,6 +32,9 @@ import UModalConfig from "./ui.container-modal/config.ts";
 import UModalConfirmConfig from "./ui.container-modal-confirm/config.ts";
 import UPageConfig from "./ui.container-page/config.ts";
 import URowConfig from "./ui.container-row/config.ts";
+import ULoaderConfig from "./ui.loader/config.ts";
+import ULoaderOverlayConfig from "./ui.loader-overlay/config.ts";
+import ULoaderProgressConfig from "./ui.loader-progress/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -175,6 +178,9 @@ export interface Components {
   UModalConfirm?: Partial<typeof UModalConfirmConfig>;
   UPage?: Partial<typeof UPageConfig>;
   URow?: Partial<typeof URowConfig>;
+  ULoader?: Partial<typeof ULoaderConfig>;
+  ULoaderOverlay?: Partial<typeof ULoaderOverlayConfig>;
+  ULoaderProgress?: Partial<typeof ULoaderProgressConfig>;
 }
 
 export interface Directives {

package/ui.container-group/types.ts

@@ -10,7 +10,6 @@ export interface UGroupProps {
 
   /**
    * The distance between nested elements.
-   * @values none, xs, sm, md, lg, xl
    */
   gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 

package/ui.loader/ULoader.vue

@@ -1,54 +1,34 @@
-<template>
-  <Transition v-bind="config.transition">
-    <div v-if="loading" v-bind="loaderAttrs">
-      <!-- @slot Use it to add something instead of the default loader. -->
-      <slot>
-        <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
-      </slot>
-    </div>
-  </Transition>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { getDefault } from "../utils/ui.ts";
 
-import { ULoader, ELLIPSES_AMOUNT } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { ULoader, ELLIPSES_AMOUNT } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { ULoaderProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = defineProps({
-  /**
-   * Loader state (shown / hidden).
-   */
-  loading: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULoader).loading,
-  },
-
-  /**
-   * Loader color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, ULoader).color,
-  },
-
-  /**
-   * Loader size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, ULoader).size,
-  },
+const props = withDefaults(defineProps<ULoaderProps>(), {
+  loading: getDefault<ULoaderProps>(defaultConfig, ULoader).loading,
+  color: getDefault<ULoaderProps>(defaultConfig, ULoader).color,
+  size: getDefault<ULoaderProps>(defaultConfig, ULoader).size,
 });
 
 const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
 </script>
 
+<template>
+  <Transition v-bind="config?.transition">
+    <div v-if="loading" v-bind="loaderAttrs">
+      <!-- @slot Use it to add something instead of the default loader. -->
+      <slot>
+        <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+      </slot>
+    </div>
+  </Transition>
+</template>
+
 <style scoped lang="postcss">
 .vueless-loader-ellipse:nth-child(1) {
   animation: ellipse-1 0.6s infinite;

package/ui.loader/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } 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/storybook/{stories.js → stories.ts}

@@ -5,6 +5,14 @@ import URow from "../../ui.container-row/URow.vue";
 import UButton from "../../ui.button/UButton.vue";
 import { ref } from "vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { ULoaderProps } from "../types.ts";
+
+interface ULoaderArgs extends ULoaderProps {
+  slotTemplate?: string;
+  enum: "size" | "color";
+}
+
 /**
  * The `ULoader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader)
  */
@@ -18,9 +26,9 @@ export default {
   argTypes: {
     ...getArgTypes(ULoader.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs) => ({
   components: { ULoader },
   setup() {
     const slots = getSlotNames(ULoader.__name);
@@ -29,17 +37,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <ULoader v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </ULoader>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs, { argTypes }) => ({
   components: { ULoader, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -54,7 +62,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const LoadingTemplate = (args) => ({
+const LoadingTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs) => ({
   components: { ULoader, UButton, URow },
   setup() {
     function toggleLoader() {
@@ -66,7 +74,7 @@ const LoadingTemplate = (args) => ({
     return { args, isLoading, toggleLoader };
   },
   template: `
-    <URow>
+    <URow align="center">
       <ULoader v-bind="args" :loading="isLoading" />
       <UButton @click="toggleLoader" size="sm">ToggleLoader</UButton>
     </URow>

package/ui.loader/types.ts

@@ -0,0 +1,47 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface ULoaderProps {
+  /**
+   * Loader state (shown / hidden).
+   */
+  loading?: boolean;
+
+  /**
+   * Loader color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "black"
+    | "white";
+
+  /**
+   * Loader size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+}

package/ui.loader/{useAttrs.js → useAttrs.ts}

@@ -1,10 +1,13 @@
 import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(
+import type { UseAttrs } from "../types.ts";
+import type { ULoaderProps, Config } from "./types.ts";
+
+export default function useAttrs(props: ULoaderProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(
     defaultConfig,
     () => props.config,
     "loader",

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -1,15 +1,4 @@
-<template>
-  <Transition v-bind="config.transition">
-    <div v-if="showLoader" v-bind="overlayAttrs">
-      <!-- @slot Use it to add something instead of the default loader. -->
-      <slot>
-        <ULoader :loading="showLoader" size="lg" :color="loaderColor" v-bind="nestedLoaderAttrs" />
-      </slot>
-    </div>
-  </Transition>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
@@ -17,34 +6,22 @@ import { useDarkMode } from "../composables/useDarkMode.ts";
 
 import ULoader from "../ui.loader/ULoader.vue";
 
-import { ULoaderOverlay } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { useLoaderOverlay } from "./useLoaderOverlay.js";
+import { ULoaderOverlay } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { useLoaderOverlay } from "./useLoaderOverlay.ts";
 
-defineOptions({ inheritAttrs: false });
+import type { ULoaderOverlayProps } from "./types.ts";
 
-const props = defineProps({
-  /**
-   * Loader state (shown / hidden).
-   */
-  loading: {
-    type: Boolean,
-    default: getDefault(defaultConfig, ULoaderOverlay).loading,
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Loader color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
-   */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, ULoaderOverlay).color,
-  },
+const props = withDefaults(defineProps<ULoaderOverlayProps>(), {
+  loading: getDefault<ULoaderOverlayProps>(defaultConfig, ULoaderOverlay).loading,
+  color: getDefault<ULoaderOverlayProps>(defaultConfig, ULoaderOverlay).color,
 });
 
 const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
-const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();
+const { loaderOverlayOn, loaderOverlayOff, isLoading } = useLoaderOverlay();
 const { isDarkMode } = useDarkMode();
 
 const loaderColor = computed(() => {
@@ -65,6 +42,17 @@ onUnmounted(() => {
 });
 
 const showLoader = computed(() => {
-  return props.loading === undefined ? isLoading.value : props.loading;
+  return props.loading === undefined ? (isLoading.value ?? false) : props.loading;
 });
 </script>
+
+<template>
+  <Transition v-bind="config?.transition">
+    <div v-if="showLoader" v-bind="overlayAttrs">
+      <!-- @slot Use it to add something instead of the default loader. -->
+      <slot>
+        <ULoader :loading="showLoader" size="lg" :color="loaderColor" v-bind="nestedLoaderAttrs" />
+      </slot>
+    </div>
+  </Transition>
+</template>

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

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } 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-overlay/storybook/{stories.js → stories.ts}

@@ -4,7 +4,14 @@ import ULoaderOverlay from "../ULoaderOverlay.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
-import { useLoaderOverlay } from "../useLoaderOverlay.js";
+import { useLoaderOverlay } from "../useLoaderOverlay.ts";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { ULoaderOverlayProps } from "../types.ts";
+
+interface ULoaderOverlayArgs extends ULoaderOverlayProps {
+  slotTemplate?: string;
+}
 
 /**
  * The `ULoaderOverlay` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-overlay)
@@ -23,9 +30,9 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<ULoaderOverlayArgs> = (args: ULoaderOverlayArgs) => ({
   components: { ULoaderOverlay },
   setup() {
     const slots = getSlotNames(ULoaderOverlay.__name);
@@ -34,18 +41,26 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <ULoaderOverlay v-bind="args" class="w-full h-full">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </ULoaderOverlay>
   `,
 });
 
-const LoadingTemplate = (args) => ({
+const LoadingTemplate: StoryFn<ULoaderOverlayArgs> = (args: ULoaderOverlayArgs) => ({
   components: { ULoaderOverlay, UButton, UCol },
   setup() {
-    const { loaderOverlayOn, loaderOverlayOff, isLoading } = useLoaderOverlay();
+    const loaderOverlay = useLoaderOverlay();
+
+    const loaderOverlayOn = loaderOverlay?.loaderOverlayOn || (() => {});
+    const loaderOverlayOff = loaderOverlay?.loaderOverlayOff || (() => {});
+    const isLoading = loaderOverlay?.isLoading || { value: false };
 
     function toggleLoading() {
-      isLoading.value ? loaderOverlayOff() : loaderOverlayOn();
+      if (isLoading.value) {
+        loaderOverlayOff();
+      } else {
+        loaderOverlayOn();
+      }
     }
 
     return { args, loaderOverlayOn, loaderOverlayOff, isLoading, toggleLoading };

package/ui.loader-overlay/types.ts

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

package/ui.loader-overlay/{useAttrs.js → useAttrs.ts}

@@ -2,8 +2,11 @@ import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(
+import type { UseAttrs } from "../types.ts";
+import type { ULoaderOverlayProps, Config } from "./types.ts";
+
+export default function useAttrs(props: ULoaderOverlayProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(
     defaultConfig,
     () => props.config,
     "overlay",

package/ui.loader-overlay/useLoaderOverlay.ts

@@ -0,0 +1,42 @@
+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;
+}
+
+const isLoading = ref(true);
+
+function loaderOverlayOn(): void {
+  isLoading.value = true;
+}
+
+function loaderOverlayOff(): void {
+  isLoading.value = false;
+}
+
+export function createLoaderOverlay(): LoaderOverlay {
+  return {
+    isLoading: readonly(isLoading),
+    loaderOverlayOn,
+    loaderOverlayOff,
+  };
+}
+
+export function useLoaderOverlay(): LoaderOverlay {
+  const loaderOverlay = inject(LoaderOverlaySymbol);
+
+  if (!loaderOverlay) {
+    throw new Error(
+      "LoaderOverlay not provided. Ensure you are using `provide` with `LoaderOverlaySymbol`.",
+    );
+  }
+
+  return loaderOverlay;
+}

package/ui.loader-overlay/{utilLoaderOverlay.js → utilLoaderOverlay.ts}

@@ -1,7 +1,7 @@
-export function loaderOverlayOn() {
+export function loaderOverlayOn(): void {
   window.dispatchEvent(new Event("loaderOverlayOn"));
 }
 
-export function loaderOverlayOff() {
+export function loaderOverlayOff(): void {
   window.dispatchEvent(new Event("loaderOverlayOff"));
 }

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;
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.531",
+  "version": "0.0.532",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7433,6 +7433,7 @@
           "attributes": [
             {
               "name": "loading",
+              "required": false,
               "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
@@ -7442,6 +7443,7 @@
             },
             {
               "name": "color",
+              "required": false,
               "description": "Loader color.",
               "enum": [
                 "brand",
@@ -7469,12 +7471,13 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "brand"
             },
             {
               "name": "size",
+              "required": false,
               "description": "Loader size.",
               "enum": [
                 "sm",
@@ -7483,9 +7486,21 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "md"
+            },
+            {
+              "name": "config",
+              "required": false,
+              "description": "Component config object.",
+              "enum": [
+                "TSTypeQuery"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "Partial"
+              }
             }
           ],
           "slots": [
@@ -7505,6 +7520,7 @@
           "attributes": [
             {
               "name": "loading",
+              "required": false,
               "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
@@ -7513,6 +7529,7 @@
             },
             {
               "name": "color",
+              "required": false,
               "description": "Loader color.",
               "enum": [
                 "brand",
@@ -7540,9 +7557,21 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "brand"
+            },
+            {
+              "name": "config",
+              "required": false,
+              "description": "Component config object.",
+              "enum": [
+                "TSTypeQuery"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "Partial"
+              }
             }
           ],
           "slots": [
@@ -7562,6 +7591,7 @@
           "attributes": [
             {
               "name": "color",
+              "required": false,
               "description": "Loader stripe color.",
               "enum": [
                 "brand",
@@ -7588,27 +7618,44 @@
               ],
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "brand"
             },
             {
               "name": "resources",
+              "required": false,
               "description": "API resource names (endpoint URIs).",
+              "enum": [
+                "string",
+                "Array"
+              ],
               "value": {
                 "kind": "expression",
-                "type": "string|array"
-              },
-              "default": "\"\""
+                "type": "union"
+              }
             },
             {
               "name": "loading",
+              "required": false,
               "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "config",
+              "required": false,
+              "description": "Component config object.",
+              "enum": [
+                "TSTypeQuery"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "Partial"
+              }
             }
           ],
           "source": {

package/ui.loader-overlay/useLoaderOverlay.js

@@ -1,25 +0,0 @@
-import { inject, readonly, ref } from "vue";
-
-export const LoaderOverlaySymbol = Symbol.for("vueless:loader-overlay");
-
-const isLoading = ref(true);
-
-function loaderOverlayOn() {
-  isLoading.value = true;
-}
-
-function loaderOverlayOff() {
-  isLoading.value = false;
-}
-
-export function createLoaderOverlay() {
-  return {
-    isLoading: readonly(isLoading),
-    loaderOverlayOn,
-    loaderOverlayOff,
-  };
-}
-
-export function useLoaderOverlay() {
-  return inject(LoaderOverlaySymbol);
-}

package/ui.loader-progress/useAttrs.js

@@ -1,15 +0,0 @@
-import useUI from "../composables/useUI.ts";
-
-import defaultConfig from "./config.js";
-
-export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
-}

package/ui.loader-progress/useLoaderProgress.js

@@ -1,65 +0,0 @@
-import { inject, readonly, ref } from "vue";
-
-import { getRequestWithoutQuery } from "./utilLoaderProgress.js";
-import { INFINITY_LOADING } from "./constants.js";
-
-export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
-
-const isLoading = ref(false);
-const requestQueue = ref([]);
-const requestTimeout = ref(0);
-
-function loaderProgressOn(url) {
-  addRequestUrl(url);
-
-  isLoading.value = true;
-
-  clearTimeout(requestTimeout.value);
-}
-
-function loaderProgressOff(url) {
-  removeRequestUrl(url);
-
-  requestTimeout.value = setTimeout(() => {
-    if (!requestQueue.value.length) {
-      isLoading.value = false;
-    }
-  }, 50);
-}
-
-function addRequestUrl(url) {
-  if (Array.isArray(url)) {
-    requestQueue.value.push(...url.map(getRequestWithoutQuery));
-
-    return;
-  }
-
-  requestQueue.value.push(getRequestWithoutQuery(url));
-}
-
-function removeRequestUrl(url) {
-  if (Array.isArray(url)) {
-    url.map(getRequestWithoutQuery).forEach(removeRequestUrl);
-
-    return;
-  }
-
-  requestQueue.value = requestQueue.value.filter(
-    (item) => item !== getRequestWithoutQuery(url) && item !== INFINITY_LOADING,
-  );
-}
-
-export function createLoaderProgress() {
-  return {
-    isLoading: isLoading,
-    requestQueue: readonly(requestQueue),
-    loaderProgressOn,
-    loaderProgressOff,
-    addRequestUrl,
-    removeRequestUrl,
-  };
-}
-
-export function useLoaderProgress() {
-  return inject(LoaderProgressSymbol);
-}

package/ui.loader-progress/utilLoaderProgress.js

@@ -1,49 +0,0 @@
-export function clamp(n, min, max) {
-  if (n < min) {
-    return min;
-  }
-
-  if (n > max) {
-    return max;
-  }
-
-  return n;
-}
-
-export const queue = (() => {
-  let pending = [];
-
-  function next() {
-    let fn = pending.shift();
-
-    if (fn) {
-      fn(next);
-    }
-  }
-
-  return (fn) => {
-    pending.push(fn);
-
-    if (pending.length === 1) {
-      next();
-    }
-  };
-})();
-
-export function loaderProgressOn(resource) {
-  const loaderProgressOnEvent = new CustomEvent("loaderProgressOn", { detail: { resource } });
-
-  window.dispatchEvent(loaderProgressOnEvent);
-}
-
-export function loaderProgressOff(resource) {
-  const loaderProgressOfEvent = new CustomEvent("loaderProgressOff", { detail: { resource } });
-
-  window.dispatchEvent(loaderProgressOfEvent);
-}
-
-export function getRequestWithoutQuery(request) {
-  const [requestWithoutQuery] = String(request).split("?");
-
-  return requestWithoutQuery;
-}