vueless 0.0.531 → 0.0.533

package/ui.image-icon/types.ts

@@ -0,0 +1,83 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UIconProps {
+  /**
+   * Icon name.
+   */
+  name?: string;
+
+  /**
+   * Icon source (svg as a vue component).
+   */
+  src?: object;
+
+  /**
+   * Icon color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "black"
+    | "white";
+
+  /**
+   * Icon size.
+   */
+  size?: "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+
+  /**
+   * Icon variant.
+   */
+  variant?: "light" | "default" | "dark";
+
+  /**
+   * Make the icon interactive (cursor pointer, etc.).
+   */
+  interactive?: boolean;
+
+  /**
+   * Add tooltip text on hover.
+   */
+  tooltip?: string;
+
+  /**
+   * Tooltip settings.
+   * [See all settings here](https://kabbouchi.github.io/vue-tippy/4.0/features/placement.html).
+   */
+  tooltipSettings?: object;
+
+  /**
+   * Mark that Icon used inside Vueless components (used to get icons from vueless library).
+   */
+  internal?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.image-icon/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UIconProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UIconProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

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