vueless 0.0.530 → 0.0.532

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.530",
+  "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.button/storybook/stories.ts

@@ -170,11 +170,11 @@ export const IconProps: StoryFn<UButtonArgs> = (args) => ({
   template: `
     <URow no-mobile>
       <UButton
-        leftIcon="download"
+        left-icon="download"
         label="Download"
       />
       <UButton
-        rightIcon="menu"
+        right-icon="menu"
         label="Menu"
       />
     </URow>

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"));
 }