@resee-movies/nuxt-ux 0.13.1 → 0.14.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/components/Card.vue

@@ -1,6 +1,18 @@
 <template>
-  <Component :is="props.is" :class="['card', props.interactive ? 'interactive' : void 0]">
-    <slot>
+  <Component
+    :is    = "props.is"
+    :class = "[
+  'card',
+  {
+    interactive: props.interactive,
+    colorful: props.colorful,
+    bordered: props.bordered,
+    beveled: props.beveled,
+    raised: props.raised
+  }
+]"
+  >
+    <slot name="default">
       <div v-if="slots.image" class="image">
         <slot name="image" />
       </div>
@@ -19,12 +31,16 @@
 <script setup>
 import { useSlots } from "#imports";
 const props = defineProps({
-  is: { type: String, required: false, default: "div" },
-  interactive: { type: Boolean, required: false, default: false }
+  is: { type: null, required: false, default: "div" },
+  interactive: { type: Boolean, required: false, default: false },
+  colorful: { type: Boolean, required: false, default: false },
+  bordered: { type: Boolean, required: false, default: false },
+  beveled: { type: Boolean, required: false, default: false },
+  raised: { type: Boolean, required: false, default: false }
 });
 const slots = useSlots();
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{.card{border:2px solid var(--color-background-scale-c);border-bottom-left-radius:--spacing(2);border-top-right-radius:--spacing(2);overflow:clip}.card .content{padding:--spacing(1.5)}.card.interactive{transition-duration:.5s;transition-property:border-color,border-radius,box-shadow;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:focus-within,.card.interactive:hover{border-color:var(--color-background-scale-f);border-radius:0;box-shadow:var(--shadow-heavy)}}
+@reference "tailwindcss";@layer components{@property --resee-card-border-coverage{syntax:"<percentage>";inherits:false;initial-value:0%}.card .content{padding:--spacing(1.5)}.card.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);overflow:clip}.card.raised{box-shadow:var(--shadow-heavy)}.card{--resee-card-bg-color:var(--color-global-background);--resee-card-border-color:var(--color-global-background-accent);--resee-card-border-highlight:var(--color-global-foreground-accent) 0% 100%;--resee-card-border-angle:225deg;--resee-card-border-coverage:100%}.card.bordered:not(.interactive){border:2px solid var(--resee-card-border-color)}.card.bordered.interactive{--resee-card-bg-gradient:linear-gradient(var(--resee-card-bg-color),var(--resee-card-bg-color));--resee-card-border-gradient:linear-gradient(225deg,var(--resee-card-border-color) 0 var(--resee-card-border-coverage),var(--resee-card-border-highlight))}.card.bordered.interactive.colorful{--resee-card-border-highlight:var(--colorscale-resee-linear);@variant dark{--resee-card-border-highlight:var(--colorscale-resee-lite-linear)}}.card.bordered.interactive{background-clip:padding-box,border-box;background-image:var(--resee-card-bg-gradient),var(--resee-card-border-gradient);background-origin:border-box;border:2px solid transparent}.card.interactive{transition-duration:.5s;transition-property:border-radius,box-shadow,--resee-card-border-coverage;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:focus-within.bordered,.card.interactive:hover.bordered{--resee-card-border-coverage:0%}.card.interactive:focus-within.beveled,.card.interactive:hover.beveled{border-radius:0}.card.interactive:focus-within,.card.interactive:hover{box-shadow:var(--shadow-heavy)}}
 </style>

package/dist/runtime/components/Card.vue.d.ts

@@ -1,6 +1,12 @@
+import type { Component } from 'vue';
+import type { HintedString } from '../types/index.js';
 export interface CardProps {
-    is?: string;
+    is?: HintedString<'div'> | Component;
     interactive?: boolean;
+    colorful?: boolean;
+    bordered?: boolean;
+    beveled?: boolean;
+    raised?: boolean;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;

package/dist/runtime/components/Image.vue

@@ -1,149 +1,79 @@
 <template>
-  <div
-    ref    = "container"
-    :class = "['image', {
-  loading: imgLoading || imgBgLoading || props.showLoading,
-  glass: props.glassy,
-  bordered: props.bordered,
-  beveled: props.beveled,
-  raised: props.raised
-}]"
+  <Card
+    :is          = "props.is"
+    :interactive = "props.interactive"
+    :colorful    = "props.colorful"
+    :beveled     = "props.beveled"
+    :raised      = "props.raised"
+    :bordered    = "props.bordered"
+    :class       = "[
+  'image',
+  {
+    loading: isImgLoading || props.showLoading,
+    glass: props.glassy && !(imgHasError || isImgLoading || props.showLoading)
+  }
+]"
   >
     <Icon
-      v-if         = "props.defaultIcon && (!imgSrc || imgError || imgLoading || props.showLoading)"
-      :name        = "props.defaultIcon"
-      :size        = "props.iconSize"
-      :color-cycle = "imgLoading || props.showLoading"
+      v-if     = "props.defaultIcon && imgHasError"
+      :name    = "props.defaultIcon"
+      :size    = "props.iconSize"
+      class    = "transition-opacity duration-300"
+      :class   = "{
+  'opacity-0': isImgLoading || props.showLoading
+}"
     />
 
-    <img
-      :src     = "imgSrc"
-      :alt     = "altText"
-      :width   = "dimensions.width"
-      :height  = "dimensions.height"
-      :loading = "props.loading"
-      class    = "transition-opacity duration-300"
-      :class   = "[aspectRatioClass, objectFitClass, {
-  'opacity-0': !imgSrc || imgLoading
-}]"
-    >
-  </div>
+    <ImageBase
+      :src          = "props.src"
+      :type         = "props.type"
+      :alt          = "props.alt"
+      :width        = "props.width"
+      :height       = "props.height"
+      :aspect       = "props.aspect"
+      :fit          = "props.fit"
+      :loading      = "props.loading"
+      :show-loading = "props.showLoading"
+      @loading      = "(state) => isImgLoading = state"
+      @load         = "() => imgHasError = null"
+      @error        = "(err) => imgHasError = err"
+    />
+  </Card>
 </template>
 
 <script>
-export const AspectRatioClassNames = {
-  "1/1": "aspect-square",
-  "square": "aspect-square",
-  "2/3": "aspect-poster",
-  "poster": "aspect-poster",
-  "4/5": "aspect-tall",
-  "16/9": "aspect-video",
-  "video": "aspect-video"
-};
-export const ObjectFitClassNames = {
-  cover: "object-cover",
-  outside: "object-cover",
-  contain: "object-contain",
-  inside: "object-contain"
-};
+
 </script>
 
 <script setup>
-import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
-import { getAspectRatio } from "@resee-movies/utilities/numbers/get-aspect-ratio";
-import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
-import { computed, ref } from "vue";
-import { useLoadImage } from "../composables/use-load-image";
-import { useSharedIntersectionObserver } from "../composables/use-shared-intersection-observer";
+import { ref } from "vue";
+import Card from "./Card.vue";
 import Icon from "./Icon.vue";
+import ImageBase from "./ImageBase.vue";
 const props = defineProps({
-  src: { type: null, required: true },
-  alt: { type: [String, null, Function], required: false, default: "" },
-  type: { type: String, required: false, default: void 0 },
-  width: { type: null, required: false, default: "w185" },
-  height: { type: [String, Number], required: false, default: void 0 },
-  aspect: { type: String, required: false, default: void 0 },
-  fit: { type: String, required: false, default: "cover" },
-  showLoading: { type: Boolean, required: false, default: false },
   defaultIcon: { type: String, required: false, default: "i-ph-image-thin" },
   iconSize: { type: String, required: false, default: "xl" },
-  loading: { type: String, required: false, default: "lazy" },
   glassy: { type: Boolean, required: false, default: false },
-  bordered: { type: Boolean, required: false, default: false },
-  beveled: { type: Boolean, required: false, default: false },
-  raised: { type: Boolean, required: false, default: false },
-  overlayClasses: { type: null, required: false, default: void 0 }
-});
-const deferLoad = ref(props.loading === "lazy");
-const container = ref();
-const normalizedSource = computed(() => {
-  const result = normalizeImageFileDescriptor(props.src);
-  if (props.type) {
-    result.sourceType = props.type;
-  }
-  return result;
-});
-const dimensions = computed(() => {
-  let intWidth = normalizedSource.value.width;
-  let intHeight = normalizedSource.value.height;
-  if (props.width || props.height) {
-    intWidth = fromTmdbImageSize(props.width);
-    intHeight = fromTmdbImageSize(props.height);
-  }
-  if (!props.aspect || props.aspect === "auto" || intWidth && intHeight) {
-    return { width: intWidth, height: intHeight };
-  }
-  if (intHeight) {
-    const aspect = getAspectRatio(intHeight, "y", props.aspect);
-    return { width: aspect.x, height: aspect.y };
-  }
-  if (intWidth) {
-    const aspect = getAspectRatio(intWidth, "x", props.aspect);
-    return { width: aspect.x, height: aspect.y };
-  }
-  return { width: void 0, height: void 0 };
-});
-const imgLoadInfo = useLoadImage(
-  () => normalizedSource.value.identifier,
-  {
-    deferLoad,
-    type: () => normalizedSource.value.sourceType,
-    width: () => props.width,
-    friendlyName: () => normalizedSource.value.friendlyName,
-    reseeConfig: () => ({
-      width: dimensions.value.width,
-      height: dimensions.value.height,
-      fit: props.fit
-    })
-  }
-);
-const {
-  src: imgSrc,
-  loading: imgLoading,
-  bgLoading: imgBgLoading,
-  error: imgError
-} = imgLoadInfo;
-if (deferLoad.value) {
-  useSharedIntersectionObserver(container, {
-    once: true,
-    onChange(isIntersecting) {
-      if (isIntersecting) {
-        deferLoad.value = false;
-      }
-    }
-  });
-}
-const aspectRatioClass = computed(() => {
-  return !props.aspect || props.aspect === "auto" ? void 0 : AspectRatioClassNames[props.aspect];
-});
-const objectFitClass = computed(() => {
-  return !props.fit ? void 0 : ObjectFitClassNames[props.fit];
-});
-const altText = computed(() => {
-  return typeof props.alt === "function" ? props.alt(imgError.value) : props.alt ?? normalizedSource.value.description ?? "";
+  src: { type: null, required: true },
+  alt: { type: [String, null, Function], required: false },
+  type: { type: String, required: false },
+  width: { type: null, required: false },
+  height: { type: [String, Number], required: false },
+  aspect: { type: String, required: false },
+  fit: { type: String, required: false },
+  showLoading: { type: Boolean, required: false },
+  loading: { type: String, required: false },
+  is: { type: null, required: false },
+  interactive: { type: Boolean, required: false },
+  colorful: { type: Boolean, required: false },
+  bordered: { type: Boolean, required: false },
+  beveled: { type: Boolean, required: false },
+  raised: { type: Boolean, required: false }
 });
+const isImgLoading = ref(true);
+const imgHasError = ref(null);
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{.image{background-color:#fff;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}}
+@reference "tailwindcss";@layer components{@keyframes color-pulse{0%{background-color:var(--bg-color-1)}50%{background-color:var(--bg-color-2)}to{background-color:var(--bg-color-1)}}.image{--bg-color-1:#fff;--bg-color-2:#f0f0f0;background-color:var(--bg-color-1);max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{--bg-color-1:#000;--bg-color-2:#0f0f0f}}.image.loading{animation-duration:2.5s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:color-pulse;animation-timing-function:ease-out}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}}
 </style>

package/dist/runtime/components/Image.vue.d.ts

@@ -1,43 +1,11 @@
-import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
-import type { AspectRatio } from '@resee-movies/utilities/numbers/get-aspect-ratio';
-import type { MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
-import type { TmdbImageSize } from '@resee-movies/utilities/tmdb/get-tmdb-image-url';
-import type { LoadImageType } from '../composables/use-load-image.js';
-import type { HTMLElementClassNames } from '../types/index.js';
+import type { CardProps } from './Card.vue.js';
 import type { IconProps } from './Icon.vue.js';
-export interface ImageProps {
-    src: ImageFileDescriptor | null | undefined;
-    alt?: string | null | ((error: unknown) => string);
-    type?: LoadImageType;
-    width?: TmdbImageSize | string | number;
-    height?: string | number;
-    aspect?: AspectRatio | 'auto';
-    fit?: MediaAssetTransformConfig['fit'];
-    showLoading?: boolean;
+import type { ImageBaseProps } from './ImageBase.vue.js';
+export interface ImageProps extends ImageBaseProps, CardProps {
     defaultIcon?: string;
     iconSize?: IconProps['size'];
-    loading?: 'lazy' | 'eager';
     glassy?: boolean;
-    bordered?: boolean;
-    beveled?: boolean;
-    raised?: boolean;
-    overlayClasses?: HTMLElementClassNames;
 }
-export declare const AspectRatioClassNames: {
-    readonly '1/1': "aspect-square";
-    readonly square: "aspect-square";
-    readonly '2/3': "aspect-poster";
-    readonly poster: "aspect-poster";
-    readonly '4/5': "aspect-tall";
-    readonly '16/9': "aspect-video";
-    readonly video: "aspect-video";
-};
-export declare const ObjectFitClassNames: {
-    readonly cover: "object-cover";
-    readonly outside: "object-cover";
-    readonly contain: "object-contain";
-    readonly inside: "object-contain";
-};
 declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ImageBase.vue

@@ -0,0 +1,121 @@
+<template>
+  <img
+    ref      = "container"
+    :src     = "imgSrc"
+    :alt     = "altText"
+    :width   = "dimensions.width"
+    :height  = "dimensions.height"
+    :loading = "props.loading"
+    class    = "transition-opacity duration-300"
+    :class   = "[aspectRatioClass, objectFitClass, { 'opacity-0': !imgSrc || imgLoading || props.showLoading }]"
+  >
+</template>
+
+<script>
+export const AspectRatioClassNames = {
+  "1/1": "aspect-square",
+  "square": "aspect-square",
+  "2/3": "aspect-poster",
+  "poster": "aspect-poster",
+  "4/5": "aspect-tall",
+  "16/9": "aspect-video",
+  "video": "aspect-video"
+};
+export const ObjectFitClassNames = {
+  cover: "object-cover",
+  outside: "object-cover",
+  contain: "object-contain",
+  inside: "object-contain"
+};
+</script>
+
+<script setup>
+import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
+import { getAspectRatio } from "@resee-movies/utilities/numbers/get-aspect-ratio";
+import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
+import { computed, ref } from "vue";
+import { useLoadImage } from "../composables/use-load-image";
+import { useSharedIntersectionObserver } from "../composables/use-shared-intersection-observer";
+const props = defineProps({
+  src: { type: null, required: true },
+  alt: { type: [String, null, Function], required: false, default: "" },
+  type: { type: String, required: false, default: void 0 },
+  width: { type: null, required: false, default: "w185" },
+  height: { type: [String, Number], required: false, default: void 0 },
+  aspect: { type: String, required: false, default: void 0 },
+  fit: { type: String, required: false, default: "cover" },
+  showLoading: { type: Boolean, required: false, default: false },
+  loading: { type: String, required: false, default: "lazy" }
+});
+const emits = defineEmits(["loading", "load", "error"]);
+const deferLoad = ref(props.loading === "lazy");
+const container = ref();
+const normalizedSource = computed(() => {
+  const result = normalizeImageFileDescriptor(props.src);
+  if (props.type) {
+    result.sourceType = props.type;
+  }
+  return result;
+});
+const dimensions = computed(() => {
+  let intWidth = normalizedSource.value.width;
+  let intHeight = normalizedSource.value.height;
+  if (props.width || props.height) {
+    intWidth = fromTmdbImageSize(props.width);
+    intHeight = fromTmdbImageSize(props.height);
+  }
+  if (!props.aspect || props.aspect === "auto" || intWidth && intHeight) {
+    return { width: intWidth, height: intHeight };
+  }
+  if (intHeight) {
+    const aspect = getAspectRatio(intHeight, "y", props.aspect);
+    return { width: aspect.x, height: aspect.y };
+  }
+  if (intWidth) {
+    const aspect = getAspectRatio(intWidth, "x", props.aspect);
+    return { width: aspect.x, height: aspect.y };
+  }
+  return { width: void 0, height: void 0 };
+});
+const imgLoadInfo = useLoadImage(
+  () => normalizedSource.value.identifier,
+  {
+    deferLoad,
+    type: () => normalizedSource.value.sourceType,
+    width: () => props.width,
+    friendlyName: () => normalizedSource.value.friendlyName,
+    onLoading: (isLoading) => emits("loading", isLoading),
+    onLoad: (src) => emits("load", src),
+    onError: (err) => emits("error", err),
+    reseeConfig: () => ({
+      width: dimensions.value.width,
+      height: dimensions.value.height,
+      fit: props.fit
+    })
+  }
+);
+const {
+  src: imgSrc,
+  loading: imgLoading,
+  error: imgError
+} = imgLoadInfo;
+if (deferLoad.value) {
+  useSharedIntersectionObserver(container, {
+    once: true,
+    onChange(isIntersecting) {
+      if (isIntersecting) {
+        deferLoad.value = false;
+      }
+    }
+  });
+}
+const aspectRatioClass = computed(() => {
+  return !props.aspect || props.aspect === "auto" ? void 0 : AspectRatioClassNames[props.aspect];
+});
+const objectFitClass = computed(() => {
+  return !props.fit ? void 0 : ObjectFitClassNames[props.fit];
+});
+const altText = computed(() => {
+  return typeof props.alt === "function" ? props.alt(imgError.value) : props.alt ?? normalizedSource.value.description ?? "";
+});
+</script>

package/dist/runtime/components/ImageBase.vue.d.ts

@@ -0,0 +1,42 @@
+import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
+import type { AspectRatio } from '@resee-movies/utilities/numbers/get-aspect-ratio';
+import type { MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
+import type { TmdbImageSize } from '@resee-movies/utilities/tmdb/get-tmdb-image-url';
+import type { LoadImageType } from '../composables/use-load-image.js';
+export interface ImageBaseProps {
+    src: ImageFileDescriptor | null | undefined;
+    alt?: string | null | ((error: unknown) => string);
+    type?: LoadImageType;
+    width?: TmdbImageSize | string | number;
+    height?: string | number;
+    aspect?: AspectRatio | 'auto';
+    fit?: MediaAssetTransformConfig['fit'];
+    showLoading?: boolean;
+    loading?: 'lazy' | 'eager';
+}
+export declare const AspectRatioClassNames: {
+    readonly '1/1': "aspect-square";
+    readonly square: "aspect-square";
+    readonly '2/3': "aspect-poster";
+    readonly poster: "aspect-poster";
+    readonly '4/5': "aspect-tall";
+    readonly '16/9': "aspect-video";
+    readonly video: "aspect-video";
+};
+export declare const ObjectFitClassNames: {
+    readonly cover: "object-cover";
+    readonly outside: "object-cover";
+    readonly contain: "object-contain";
+    readonly inside: "object-contain";
+};
+declare const __VLS_export: import("vue").DefineComponent<ImageBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (err: unknown) => any;
+    load: (src: string | undefined) => any;
+    loading: (isLoading: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ImageBaseProps> & Readonly<{
+    onError?: ((err: unknown) => any) | undefined;
+    onLoad?: ((src: string | undefined) => any) | undefined;
+    onLoading?: ((isLoading: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/use-load-image.d.ts

@@ -10,6 +10,9 @@ export type LoadImageOptions = {
     type?: MaybeRefOrGetter<LoadImageType>;
     reseeConfig?: MaybeRefOrGetter<MediaAssetTransformConfig | undefined>;
     deferLoad?: Ref<boolean>;
+    onLoading?: (isLoading: boolean) => void;
+    onLoad?: (src: string | undefined) => void;
+    onError?: (err: unknown) => void;
 };
 /**
  * Exposes the {@link loadImage} utility as a set of reactive properties.

package/dist/runtime/composables/use-load-image.js

@@ -31,6 +31,8 @@ export function useLoadImage(source, config = {}) {
         src.value = toValue(config.errorSrc);
         key.value = src.value;
         error.value = new Error('"src" is not defined');
+        config.onLoading?.(false);
+        config.onError?.(error.value);
         return;
       }
       const loadType = toValue(config.type);
@@ -54,6 +56,8 @@ export function useLoadImage(source, config = {}) {
         }
         loading.value = true;
         key.value = sourceUnwrapped;
+        config.onLoading?.(true);
+        config.onLoad?.(src.value);
         return;
       }
       if (toValue(config.deferLoad)) {
@@ -81,12 +85,15 @@ export function useLoadImage(source, config = {}) {
         loading.value = false;
         bgLoading.value = false;
         error.value = void 0;
+        config.onLoading?.(false);
+        config.onLoad?.(src.value);
         return;
       }
       src.value = pendingSource ?? toValue(config.placeholderSrc) ?? src.value;
       key.value = pendingSource ? sourceUnwrapped : void 0;
       loading.value = !pendingSource;
       bgLoading.value = !!pendingSource;
+      config.onLoading?.(true);
       pendingLoader.then(
         (loadedSrc) => {
           src.value = loadedSrc;
@@ -94,6 +101,8 @@ export function useLoadImage(source, config = {}) {
           loading.value = false;
           bgLoading.value = false;
           error.value = void 0;
+          config.onLoading?.(false);
+          config.onLoad?.(src.value);
         },
         (e) => {
           src.value = toValue(config.errorSrc) ?? toValue(config.placeholderSrc);
@@ -101,6 +110,8 @@ export function useLoadImage(source, config = {}) {
           loading.value = false;
           bgLoading.value = false;
           error.value = e;
+          config.onLoading?.(false);
+          config.onError?.(e);
         }
       );
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"