@resee-movies/nuxt-ux 0.14.0 → 0.15.0

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

@@ -1,14 +1,12 @@
-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 { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
 import { ref, toRef, toValue, watch } from "vue";
 export function useLoadImage(source, config = {}) {
-  const nuxtApp = useNuxtApp();
   const src = ref();
   const key = ref();
   const error = ref();
@@ -31,77 +29,51 @@ 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);
       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;
-          }
-        }
-        loading.value = true;
-        key.value = sourceUnwrapped;
-        config.onLoading?.(true);
-        config.onLoad?.(src.value);
-        return;
-      }
       if (toValue(config.deferLoad)) {
         return;
       }
-      let pendingSource;
-      let pendingLoader;
+      let targetSrc;
+      let tempSrc;
+      let promise;
       if (loadType === "tmdb") {
-        const result = getTmdbImageCache().getImage(sourceUnwrapped, imgWidth);
-        pendingSource = isString(result) ? void 0 : result.placeholderUrl;
-        pendingLoader = result;
+        targetSrc = getTmdbImageUrl(sourceUnwrapped, imgWidth);
+        const result = getTmdbImageCache().getImage(targetSrc);
+        if (isPromiseLike(result)) {
+          tempSrc = result.placeholderUrl;
+          promise = 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 })
-        );
+        targetSrc = getMediaAssetUrl(sourceUnwrapped, filename, { width, format: "webp", ...reseeConfig });
+        promise = loadImage(targetSrc);
       } else {
-        pendingLoader = loadImage(sourceUnwrapped);
+        targetSrc = sourceUnwrapped;
+        promise = loadImage(targetSrc);
       }
-      if (isString(pendingLoader)) {
-        src.value = pendingLoader;
-        key.value = sourceUnwrapped;
-        loading.value = false;
-        bgLoading.value = false;
-        error.value = void 0;
-        config.onLoading?.(false);
+      src.value = tempSrc ?? targetSrc;
+      key.value = tempSrc ?? sourceUnwrapped;
+      loading.value = !!promise && !tempSrc;
+      bgLoading.value = !!promise && !!tempSrc;
+      error.value = void 0;
+      if (!promise) {
         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(
+      config.onLoading?.();
+      promise.then(
         (loadedSrc) => {
           src.value = loadedSrc;
           key.value = sourceUnwrapped;
           loading.value = false;
           bgLoading.value = false;
           error.value = void 0;
-          config.onLoading?.(false);
           config.onLoad?.(src.value);
         },
         (e) => {
@@ -110,7 +82,6 @@ export function useLoadImage(source, config = {}) {
           loading.value = false;
           bgLoading.value = false;
           error.value = e;
-          config.onLoading?.(false);
           config.onError?.(e);
         }
       );

package/dist/runtime/composables/use-mutable-intersection-observer.d.ts

@@ -0,0 +1,44 @@
+import { type ConfigurableWindow, type MaybeComputedElementRef, type MaybeElement, type Pausable } from '@vueuse/core';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+/**
+ * @module
+ *
+ * This exists solely to support a dynamic `rootMargin` property. The capability will
+ * land natively in Vueuse soon, at which time this can be dropped.
+ */
+export interface UseMutableIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The Element or Document whose bounds are used as the bounding box
+     * when testing for intersection.
+     */
+    root?: MaybeComputedElementRef | Document;
+    /**
+     * A string which specifies a set of offsets to add to the root's
+     * bounding_box when calculating intersections.
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * Either a single number or an array of numbers between 0.0 and 1.
+     * @default 0
+     */
+    threshold?: number | number[];
+}
+export interface UseMutableIntersectionObserverReturn extends Pausable {
+    isSupported: ComputedRef<boolean>;
+    stop: () => void;
+}
+/**
+ * Detects that a target element's visibility.
+ *
+ * @see https://vueuse.org/useIntersectionObserver
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function useMutableIntersectionObserver(target: MaybeComputedElementRef | MaybeRefOrGetter<MaybeElement[]> | MaybeComputedElementRef[], callback: IntersectionObserverCallback, options?: UseMutableIntersectionObserverOptions): UseMutableIntersectionObserverReturn;

package/dist/runtime/composables/use-mutable-intersection-observer.js

@@ -0,0 +1,68 @@
+import {
+  defaultWindow,
+  noop,
+  notNullish,
+  toArray,
+  tryOnScopeDispose,
+  unrefElement,
+  useSupported
+} from "@vueuse/core";
+import { computed, shallowRef, toValue, watch } from "vue";
+export function useMutableIntersectionObserver(target, callback, options = {}) {
+  const {
+    root,
+    rootMargin,
+    threshold = 0,
+    window = defaultWindow,
+    immediate = true
+  } = options;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
+  const targets = computed(() => {
+    const _target = toValue(target);
+    return toArray(_target).map(unrefElement).filter(notNullish);
+  });
+  let cleanup = noop;
+  const isActive = shallowRef(immediate);
+  const stopWatch = isSupported.value ? watch(
+    () => [targets.value, unrefElement(root), toValue(rootMargin), isActive.value],
+    ([targets2, root2, rootMargin2]) => {
+      cleanup();
+      if (!isActive.value)
+        return;
+      if (!targets2.length)
+        return;
+      const observer = new IntersectionObserver(
+        callback,
+        {
+          root: unrefElement(root2),
+          rootMargin: rootMargin2,
+          threshold
+        }
+      );
+      targets2.forEach((el) => el && observer.observe(el));
+      cleanup = () => {
+        observer.disconnect();
+        cleanup = noop;
+      };
+    },
+    { immediate, flush: "post" }
+  ) : noop;
+  const stop = () => {
+    cleanup();
+    stopWatch();
+    isActive.value = false;
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
+    stop
+  };
+}

package/dist/runtime/composables/use-resee-ux.d.ts

@@ -1,3 +1,6 @@
+type AppPreferences = {
+    dismissNotification?: string;
+};
 /**
  * Provides the ability to manage runtime configuration of the ReSee UX
  * module.
@@ -22,4 +25,6 @@ export declare function useReseeUx(): {
             numOptionsSelected: string;
         };
     };
+    preferences: import("#app").CookieRef<AppPreferences>;
 };
+export {};

package/dist/runtime/composables/use-resee-ux.js

@@ -1,3 +1,4 @@
+import { useCookie } from "#imports";
 import { reactive } from "vue";
 const Localization = reactive({
   validation: {
@@ -18,6 +19,15 @@ const Localization = reactive({
     numOptionsSelected: "{count} Item(s) Selected"
   }
 });
+const msInYear = 31536e6;
 export function useReseeUx() {
-  return { locale: Localization };
+  const preferences = useCookie("resee-app-preferences", {
+    default: () => ({}),
+    secure: true,
+    httpOnly: false,
+    sameSite: "strict",
+    maxAge: msInYear / 1e3,
+    expires: new Date(Date.now() + msInYear)
+  });
+  return { locale: Localization, preferences };
 }

package/dist/runtime/composables/use-two-frame-ref-toggle.d.ts

@@ -0,0 +1,25 @@
+import { type Ref } from 'vue';
+/**
+ * Configuration for the {@link useTwoFrameRefToggle} composable.
+ *
+ * - `direction` (default: "one-way"): The order in which the refs will be updated,
+ *   depending on whether they are being toggled true or false.
+ *   - `"one-way"`: refA -> refB, always.
+ *   - `"reverse"`: refA -> refB, if true. refB -> refA, if false.
+ * - `defaultValue` (default: false): The initial value to set the refs as.
+ */
+type UseTwoFrameRefToggleOptions = {
+    direction?: 'one-way' | 'reverse';
+    defaultValue?: boolean;
+};
+/**
+ * Returns two boolean refs and an `update` method that accepts a boolean that the
+ * refs will be updated to. The setting of the ref values is staggered, with one
+ * happening one re-paint after the first.
+ *
+ * Why? This sort of one-two-step can be very useful in certain scenarios - like
+ * when CSS properties need to be applied in a specific order (e.x. initial state,
+ * and then some kind of transition).
+ */
+export declare function useTwoFrameRefToggle(options?: UseTwoFrameRefToggleOptions): [refA: Ref<boolean>, refB: Ref<boolean>, updateMethod: (value: boolean) => void];
+export {};

package/dist/runtime/composables/use-two-frame-ref-toggle.js

@@ -0,0 +1,24 @@
+import { ref } from "vue";
+export function useTwoFrameRefToggle(options) {
+  const refA = ref(options?.defaultValue ?? false);
+  const refB = ref(options?.defaultValue ?? false);
+  const update = (value) => {
+    if (refA.value === value) {
+      return;
+    }
+    const refOrder = !value && options?.direction === "reverse" ? [refB, refA] : [refA, refB];
+    refOrder[0].value = value;
+    let frameId;
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+      frameId = void 0;
+    }
+    frameId = requestAnimationFrame(() => {
+      frameId = requestAnimationFrame(() => {
+        refOrder[1].value = value;
+        frameId = void 0;
+      });
+    });
+  };
+  return [refA, refB, update];
+}

package/dist/runtime/utils/validation.d.ts

@@ -12,10 +12,10 @@ export type TextInputRequirements = {
     minLength?: string | number;
     maxLength?: string | number;
 };
-export declare function createTextValidator(requirements: TextInputRequirements): z.ZodMiniString<string> | z.ZodMiniUnion<readonly [z.ZodMiniNull, z.ZodMiniString<string>]>;
+export declare function createTextValidator(requirements: TextInputRequirements): z.ZodMiniString<string> | z.ZodMiniUnion<readonly [z.ZodMiniUndefined, z.ZodMiniNull, z.ZodMiniString<string>]>;
 export type ListInputRequirements = {
     required?: boolean;
     minRequired?: string | number;
     maxRequired?: string | number;
 };
-export declare function createListValidator(requirements: ListInputRequirements): z.ZodMiniArray<z.ZodMiniUnknown> | z.ZodMiniUnion<readonly [z.ZodMiniNull, z.ZodMiniArray<z.ZodMiniUnknown>]>;
+export declare function createListValidator(requirements: ListInputRequirements): z.ZodMiniArray<z.ZodMiniUnknown> | z.ZodMiniUnion<readonly [z.ZodMiniUndefined, z.ZodMiniNull, z.ZodMiniArray<z.ZodMiniUnknown>]>;

package/dist/runtime/utils/validation.js

@@ -34,7 +34,7 @@ export function createTextValidator(requirements) {
     }
   }
   const stringSchema = z.string(toValidationError(locale.validation.required)).check(z.trim(), ...checkFns);
-  return requirements.required ? stringSchema : z.union([z.null(), stringSchema]);
+  return requirements.required ? stringSchema : z.union([z.undefined(), z.null(), stringSchema]);
 }
 export function createListValidator(requirements) {
   const { locale } = useReseeUx();
@@ -52,5 +52,5 @@ export function createListValidator(requirements) {
     );
   }
   const arraySchema = z.array(z.unknown(), toValidationError(locale.validation.required)).check(...checkFns);
-  return requirements.required ? arraySchema : z.union([z.null(), arraySchema]);
+  return requirements.required ? arraySchema : z.union([z.undefined(), z.null(), arraySchema]);
 }

package/package.json

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