@resee-movies/nuxt-ux 0.0.4 → 0.2.0

package/dist/runtime/components/Image.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    ref    = "container"
+    :class = "['image', {
+  loading: imgLoading || imgBgLoading || props.showLoading,
+  glass: props.glassy,
+  bordered: props.bordered,
+  beveled: props.beveled,
+  raised: props.raised
+}]"
+  >
+    <Icon
+      v-if         = "props.defaultIcon && (!imgSrc || imgError || imgLoading || props.showLoading)"
+      :name        = "props.defaultIcon"
+      :size        = "props.iconSize"
+      :color-cycle = "imgLoading || 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>
+</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 Icon from "./Icon.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 ?? "";
+});
+</script>
+
+<style scoped>
+@reference "tailwindcss";.image{background-color:#fff;overflow:clip;position:relative;width:-moz-max-content;width:max-content;@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 .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

@@ -0,0 +1,59 @@
+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 { 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;
+    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<{}>, {
+    type: LoadImageType;
+    loading: "lazy" | "eager";
+    iconSize: "sm" | "md" | "lg" | "xl";
+    bordered: boolean;
+    showLoading: boolean;
+    fit: "cover" | "contain" | "inside" | "outside";
+    width: TmdbImageSize | string | number;
+    height: string | number;
+    alt: string | null | ((error: unknown) => string);
+    aspect: AspectRatio | "auto";
+    defaultIcon: string;
+    glassy: boolean;
+    beveled: boolean;
+    raised: boolean;
+    overlayClasses: string | HTMLElementClassNames[] | Record<string, boolean> | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{UiLayoutPageColumn.vue → LayoutPageColumn.vue}

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-
+;
 </script>
 
 <script setup>

package/dist/runtime/components/{UiLayoutPageColumn.vue.d.ts → LayoutPageColumn.vue.d.ts}

@@ -1,8 +1,8 @@
-export type UiLayoutPageColumn = {
+export interface LayoutPageColumn {
     is?: string;
     layout?: 'main' | 'vista';
-};
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiLayoutPageColumn, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiLayoutPageColumn> & Readonly<{}>, {
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageColumn, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageColumn> & Readonly<{}>, {
     layout: "main" | "vista";
     is: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/components/{UiLayoutPageContainer.vue.d.ts → LayoutPageContainer.vue.d.ts}

@@ -1,10 +1,10 @@
 import type { HintedString } from '../types/index.js';
-export type UiLayoutPageContainerProps = {
+export interface LayoutPageContainerProps {
     is?: HintedString<'div' | 'main' | 'section' | 'article' | 'nav'>;
     glassEffect?: boolean;
     accentColor?: string;
-};
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiLayoutPageContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiLayoutPageContainerProps> & Readonly<{}>, {
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageContainerProps> & Readonly<{}>, {
     is: HintedString<"div" | "main" | "section" | "article" | "nav">;
     glassEffect: boolean;
     accentColor: string;

package/dist/runtime/components/{UiLink.vue → Link.vue}

@@ -1,5 +1,5 @@
 <template>
-  <UiButton
+  <Button
     :is      = "LinkComponent"
     :to      = "props.to"
     :variant = "props.variant"
@@ -8,15 +8,17 @@
     :spacing = "props.spacing"
   >
     <slot />
-  </UiButton>
+  </Button>
 </template>
 
 <script>
-import { useNuxtUxConfig } from "../composables/use-nuxt-ux-config";
+
 </script>
 
 <script setup>
-const LinkComponent = useNuxtUxConfig().getConfig("UiLinkBaseComponent");
+import { getReseeUxConstant } from "../config";
+import Button from "./Button.vue";
+const LinkComponent = getReseeUxConstant("UiLinkBaseComponent");
 const props = defineProps({
   to: { type: null, required: true },
   external: { type: Boolean, required: false, default: false },

package/dist/runtime/components/{UiLink.vue.d.ts → Link.vue.d.ts}

@@ -1,17 +1,17 @@
 import type { RouteLocationRaw } from 'vue-router';
-import type { UiButtonProps } from './UiButton.vue.js';
-export type UiLinkProps = {
+import type { ButtonProps } from './Button.vue.js';
+export interface LinkProps extends /* @vue-ignore */ Omit<ButtonProps, 'bordered' | 'variant' | 'spacing'> {
     to: RouteLocationRaw;
     external?: boolean;
     target?: '_blank' | '_parent' | '_self' | '_top';
     underline?: boolean;
-    variant?: UiButtonProps['variant'];
-    spacing?: UiButtonProps['spacing'];
-} & /* @vue-ignore */ Omit<UiButtonProps, 'bordered' | 'variant' | 'spacing'>;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiLinkProps> & Readonly<{}>, {
+    variant?: ButtonProps['variant'];
+    spacing?: ButtonProps['spacing'];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     target: "_blank" | "_parent" | "_self" | "_top";
     spacing: "wide" | "normal";
-    variant: "a" | "btn";
+    variant: "btn" | "a";
     external: boolean;
     underline: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/runtime/components/{UiLoadingIndicator.vue → LoadingIndicator.vue}

@@ -2,6 +2,10 @@
   <PrimeProgressSpinner :class="['indicator', props.size]" />
 </template>
 
+<script>
+
+</script>
+
 <script setup>
 import { ProgressSpinner as PrimeProgressSpinner } from "primevue";
 const props = defineProps({

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

@@ -0,0 +1,9 @@
+import type { IconProps } from './Icon.vue.js';
+export interface LoadingIndicatorProps {
+    size?: IconProps['size'];
+}
+declare const __VLS_export: import("vue").DefineComponent<LoadingIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingIndicatorProps> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{UiLorem.vue → Lorem.vue}

@@ -10,6 +10,10 @@
   </template>
 </template>
 
+<script>
+
+</script>
+
 <script setup>
 import { useId, useState } from "#imports";
 import { computed } from "vue";

package/dist/runtime/components/{UiLorem.vue.d.ts → Lorem.vue.d.ts}

@@ -1,4 +1,4 @@
-type __VLS_Props = {
+export interface LoremProps {
     type?: 'words' | 'sentences' | 'paragraphs';
     min?: string | number;
     max?: string | number;
@@ -8,8 +8,8 @@ type __VLS_Props = {
     maxSentenceCount?: string | number;
     minWordCount?: string | number;
     maxWordCount?: string | number;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}
+declare const __VLS_export: import("vue").DefineComponent<LoremProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoremProps> & Readonly<{}>, {
     type: "words" | "sentences" | "paragraphs";
     min: string | number;
     max: string | number;

package/dist/runtime/components/{UiMessage.vue → Message.vue}

@@ -11,6 +11,7 @@ import { computed } from "vue";
 </script>
 
 <script setup>
+import PrimeMessage from "primevue/message";
 const props = defineProps({
   severity: { type: String, required: false },
   text: { type: String, required: false },
@@ -34,7 +35,7 @@ const passthroughProps = computed(() => {
       class: "close"
     },
     transition: {
-      name: "slide-y",
+      name: "grow-y",
       appear: false
     }
   };

package/dist/runtime/components/{UiMessage.vue.d.ts → Message.vue.d.ts}

@@ -1,12 +1,12 @@
 import type { StatusLevel } from '../types/index.js';
-export type UiMessageProps = {
+export interface MessageProps {
     severity?: StatusLevel;
     text?: string;
     class?: string;
     style?: string;
     accented?: boolean;
-};
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UiMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiMessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/{UiNotificationContainer.vue → NotificationContainer.vue}

@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import PrimeToast, {} from "primevue/toast";
 import { StatusLevelIcons } from "../constants";
 const passthroughProps = {
   message: ({ props }) => ({

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{UiProgressBar.vue → ProgressBar.vue}

@@ -8,8 +8,13 @@
   />
 </template>
 
+<script>
+
+</script>
+
 <script setup>
 import { computed } from "vue";
+import PrimeProgressBar from "primevue/progressbar";
 const props = defineProps({
   value: { type: null, required: false, default: void 0 },
   showValue: { type: Boolean, required: false, default: false },

package/dist/runtime/components/{UiProgressBar.vue.d.ts → ProgressBar.vue.d.ts}

@@ -1,9 +1,9 @@
-type __VLS_Props = {
+export interface ProgressBarProps {
     value?: number | undefined;
     showValue?: boolean;
     indeterminate?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}
+declare const __VLS_export: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {
     value: number;
     showValue: boolean;
     indeterminate: boolean;

package/dist/runtime/components/{UiTag.vue → Tag.vue}

@@ -7,13 +7,20 @@
   props.size,
   props.tooltip ? 'has-tooltip' : void 0
 ]"
-    v-primetooltip.top="{ value: props.tooltip, showDelay: 500 }"
+    v-prime-tooltip.top="{ value: props.tooltip, showDelay: 500 }"
   >
-    <UiIconTextPair :icon="props.icon" :text="props.text" />
+    <IconTextPair :icon="props.icon" :text="props.text" />
   </PrimeTag>
 </template>
 
+<script>
+
+</script>
+
 <script setup>
+import PrimeTag from "primevue/tag";
+import vPrimeTooltip from "primevue/tooltip";
+import IconTextPair from "./IconTextPair.vue";
 const props = defineProps({
   text: { type: String, required: false, default: void 0 },
   icon: { type: String, required: false, default: void 0 },

package/dist/runtime/components/{UiTag.vue.d.ts → Tag.vue.d.ts}

@@ -1,12 +1,12 @@
 import type { StatusLevel } from '../types/index.js';
-type __VLS_Props = {
+export interface TagProps {
     text?: string;
     icon?: string;
     severity?: StatusLevel;
     size?: 'sm' | 'md' | 'lg';
     tooltip?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     size: "sm" | "md" | "lg";
     icon: string;
     text: string;

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

@@ -0,0 +1,23 @@
+import type { NormalizedFileDescriptorSource } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
+import { type MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export type LoadImageType = NormalizedFileDescriptorSource;
+export type LoadImageOptions = {
+    friendlyName?: MaybeRefOrGetter<string | undefined>;
+    placeholderSrc?: MaybeRefOrGetter<string>;
+    errorSrc?: MaybeRefOrGetter<string>;
+    width?: MaybeRefOrGetter<string | number>;
+    type?: MaybeRefOrGetter<LoadImageType>;
+    reseeConfig?: MaybeRefOrGetter<MediaAssetTransformConfig | undefined>;
+    deferLoad?: Ref<boolean>;
+};
+/**
+ * Exposes the {@link loadImage} utility as a set of reactive properties.
+ */
+export declare function useLoadImage(source: MaybeRefOrGetter<string | null | undefined>, config?: LoadImageOptions): {
+    src: Ref<string | undefined, string | undefined>;
+    key: Ref<string | undefined, string | undefined>;
+    error: Ref<unknown, unknown>;
+    loading: Ref<boolean, boolean>;
+    bgLoading: Ref<boolean, boolean>;
+};

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

@@ -0,0 +1,109 @@
+import { useNuxtApp } from "#imports";
+import { loadImage } from "@resee-movies/utilities/dom/load-image";
+import { getMediaAssetUrl } from "@resee-movies/utilities/resee/get-media-asset-url";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
+import { getTmdbImageCache } from "@resee-movies/utilities/tmdb/get-tmdb-image-cache";
+import { getTmdbImageUrl } from "@resee-movies/utilities/tmdb/get-tmdb-image-url";
+import { toTmdbImageSize } from "@resee-movies/utilities/tmdb/to-tmdb-image-size";
+import { ref, toRef, toValue, watch } from "vue";
+export function useLoadImage(source, config = {}) {
+  const nuxtApp = useNuxtApp();
+  const src = ref();
+  const key = ref();
+  const error = ref();
+  const loading = ref(false);
+  const bgLoading = ref(false);
+  watch(
+    [
+      toRef(source),
+      toRef(config.friendlyName),
+      toRef(config.placeholderSrc),
+      toRef(config.errorSrc),
+      toRef(config.width),
+      toRef(config.reseeConfig),
+      toRef(config.type),
+      toRef(config.deferLoad)
+    ],
+    () => {
+      const sourceUnwrapped = toValue(source);
+      if (!isString(sourceUnwrapped) || sourceUnwrapped.trim() === "") {
+        src.value = toValue(config.errorSrc);
+        key.value = src.value;
+        error.value = new Error('"src" is not defined');
+        return;
+      }
+      const loadType = toValue(config.type);
+      const imgWidth = toValue(config.width);
+      if (import.meta.server || nuxtApp.isHydrating) {
+        switch (loadType) {
+          case "tmdb": {
+            src.value = getTmdbImageUrl(sourceUnwrapped, imgWidth ? toTmdbImageSize(imgWidth) : void 0);
+            break;
+          }
+          case "resee": {
+            const filename = toValue(config.friendlyName);
+            const reseeConfig = toValue(config.reseeConfig);
+            const width = fromTmdbImageSize(imgWidth, { originalIsUndefined: true });
+            src.value = getMediaAssetUrl(sourceUnwrapped, filename, { width, format: "webp", ...reseeConfig });
+            break;
+          }
+          default: {
+            src.value = sourceUnwrapped;
+          }
+        }
+        key.value = sourceUnwrapped;
+        return;
+      }
+      if (toValue(config.deferLoad)) {
+        return;
+      }
+      let pendingSource;
+      let pendingLoader;
+      if (loadType === "tmdb") {
+        const result = getTmdbImageCache().getImage(sourceUnwrapped, imgWidth);
+        pendingSource = isString(result) ? void 0 : result.placeholderUrl;
+        pendingLoader = result;
+      } else if (loadType === "resee") {
+        const filename = toValue(config.friendlyName);
+        const reseeConfig = toValue(config.reseeConfig);
+        const width = fromTmdbImageSize(imgWidth, { originalIsUndefined: true });
+        pendingLoader = loadImage(
+          getMediaAssetUrl(sourceUnwrapped, filename, { width, format: "webp", ...reseeConfig })
+        );
+      } else {
+        pendingLoader = loadImage(sourceUnwrapped);
+      }
+      if (isString(pendingLoader)) {
+        src.value = pendingLoader;
+        key.value = sourceUnwrapped;
+        loading.value = false;
+        bgLoading.value = false;
+        error.value = void 0;
+        return;
+      }
+      src.value = pendingSource ?? toValue(config.placeholderSrc) ?? src.value;
+      key.value = pendingSource ? sourceUnwrapped : void 0;
+      loading.value = !pendingSource;
+      bgLoading.value = !!pendingSource;
+      pendingLoader.then(
+        (loadedSrc) => {
+          src.value = loadedSrc;
+          key.value = sourceUnwrapped;
+          loading.value = false;
+          bgLoading.value = false;
+          error.value = void 0;
+        },
+        (e) => {
+          src.value = toValue(config.errorSrc) ?? toValue(config.placeholderSrc);
+          key.value = src.value;
+          loading.value = false;
+          bgLoading.value = false;
+          error.value = e;
+        }
+      );
+    },
+    { immediate: true }
+  );
+  return { src, key, error, loading, bgLoading };
+}

package/dist/runtime/config.d.ts

@@ -0,0 +1,18 @@
+import { type Component } from 'vue';
+/**
+ * Runtime constants can be set once and then used throughout this package.
+ */
+export type ReseeUxRuntimeConstants = {
+    UiLinkBaseComponent: Component;
+};
+export type ConstantsKey = keyof ReseeUxRuntimeConstants;
+export type ConstantsValue<K extends ConstantsKey> = ReseeUxRuntimeConstants[K];
+/**
+ * Set one or more ReSee UX package global constants.
+ */
+export declare function setReseeUxConstant(values: Partial<ReseeUxRuntimeConstants>): void;
+export declare function setReseeUxConstant<K extends ConstantsKey>(key: K, value: ConstantsValue<K>): void;
+/**
+ * Retrieve a ReSee UX package global constant.
+ */
+export declare function getReseeUxConstant<K extends ConstantsKey>(key: K): ConstantsValue<K>;

package/dist/runtime/config.js

@@ -0,0 +1,15 @@
+import { NuxtLink } from "#components";
+import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
+const RuntimeConstants = {
+  UiLinkBaseComponent: NuxtLink
+};
+export function setReseeUxConstant(keyOrObject, valueOrUndef) {
+  if (isObjectLike(keyOrObject)) {
+    Object.assign(RuntimeConstants, keyOrObject);
+  } else if (valueOrUndef) {
+    RuntimeConstants[keyOrObject] = valueOrUndef;
+  }
+}
+export function getReseeUxConstant(key) {
+  return RuntimeConstants[key];
+}