@getlupa/client 1.10.2 → 1.11.0

package/dist/lupaSearch.umd.js

@@ -106,6 +106,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     const n = parseFloat(val);
     return isNaN(n) ? val : n;
   };
+  const toNumber = (val) => {
+    const n = isString(val) ? Number(val) : NaN;
+    return isNaN(n) ? val : n;
+  };
   let _globalThis;
   const getGlobalThis = () => {
     return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
@@ -2004,6 +2008,319 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
     }
   }
+  function useTransitionState() {
+    const state = {
+      isMounted: false,
+      isLeaving: false,
+      isUnmounting: false,
+      leavingVNodes: /* @__PURE__ */ new Map()
+    };
+    onMounted(() => {
+      state.isMounted = true;
+    });
+    onBeforeUnmount(() => {
+      state.isUnmounting = true;
+    });
+    return state;
+  }
+  const TransitionHookValidator = [Function, Array];
+  const BaseTransitionPropsValidators = {
+    mode: String,
+    appear: Boolean,
+    persisted: Boolean,
+    // enter
+    onBeforeEnter: TransitionHookValidator,
+    onEnter: TransitionHookValidator,
+    onAfterEnter: TransitionHookValidator,
+    onEnterCancelled: TransitionHookValidator,
+    // leave
+    onBeforeLeave: TransitionHookValidator,
+    onLeave: TransitionHookValidator,
+    onAfterLeave: TransitionHookValidator,
+    onLeaveCancelled: TransitionHookValidator,
+    // appear
+    onBeforeAppear: TransitionHookValidator,
+    onAppear: TransitionHookValidator,
+    onAfterAppear: TransitionHookValidator,
+    onAppearCancelled: TransitionHookValidator
+  };
+  const BaseTransitionImpl = {
+    name: `BaseTransition`,
+    props: BaseTransitionPropsValidators,
+    setup(props, { slots }) {
+      const instance = getCurrentInstance();
+      const state = useTransitionState();
+      let prevTransitionKey;
+      return () => {
+        const children = slots.default && getTransitionRawChildren(slots.default(), true);
+        if (!children || !children.length) {
+          return;
+        }
+        let child = children[0];
+        if (children.length > 1) {
+          for (const c2 of children) {
+            if (c2.type !== Comment) {
+              child = c2;
+              break;
+            }
+          }
+        }
+        const rawProps = toRaw(props);
+        const { mode } = rawProps;
+        if (state.isLeaving) {
+          return emptyPlaceholder(child);
+        }
+        const innerChild = getKeepAliveChild(child);
+        if (!innerChild) {
+          return emptyPlaceholder(child);
+        }
+        const enterHooks = resolveTransitionHooks(
+          innerChild,
+          rawProps,
+          state,
+          instance
+        );
+        setTransitionHooks(innerChild, enterHooks);
+        const oldChild = instance.subTree;
+        const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
+        let transitionKeyChanged = false;
+        const { getTransitionKey } = innerChild.type;
+        if (getTransitionKey) {
+          const key = getTransitionKey();
+          if (prevTransitionKey === void 0) {
+            prevTransitionKey = key;
+          } else if (key !== prevTransitionKey) {
+            prevTransitionKey = key;
+            transitionKeyChanged = true;
+          }
+        }
+        if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
+          const leavingHooks = resolveTransitionHooks(
+            oldInnerChild,
+            rawProps,
+            state,
+            instance
+          );
+          setTransitionHooks(oldInnerChild, leavingHooks);
+          if (mode === "out-in") {
+            state.isLeaving = true;
+            leavingHooks.afterLeave = () => {
+              state.isLeaving = false;
+              if (instance.update.active !== false) {
+                instance.update();
+              }
+            };
+            return emptyPlaceholder(child);
+          } else if (mode === "in-out" && innerChild.type !== Comment) {
+            leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
+              const leavingVNodesCache = getLeavingNodesForType(
+                state,
+                oldInnerChild
+              );
+              leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
+              el._leaveCb = () => {
+                earlyRemove();
+                el._leaveCb = void 0;
+                delete enterHooks.delayedLeave;
+              };
+              enterHooks.delayedLeave = delayedLeave;
+            };
+          }
+        }
+        return child;
+      };
+    }
+  };
+  const BaseTransition = BaseTransitionImpl;
+  function getLeavingNodesForType(state, vnode) {
+    const { leavingVNodes } = state;
+    let leavingVNodesCache = leavingVNodes.get(vnode.type);
+    if (!leavingVNodesCache) {
+      leavingVNodesCache = /* @__PURE__ */ Object.create(null);
+      leavingVNodes.set(vnode.type, leavingVNodesCache);
+    }
+    return leavingVNodesCache;
+  }
+  function resolveTransitionHooks(vnode, props, state, instance) {
+    const {
+      appear,
+      mode,
+      persisted = false,
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onEnterCancelled,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave,
+      onLeaveCancelled,
+      onBeforeAppear,
+      onAppear,
+      onAfterAppear,
+      onAppearCancelled
+    } = props;
+    const key = String(vnode.key);
+    const leavingVNodesCache = getLeavingNodesForType(state, vnode);
+    const callHook2 = (hook, args) => {
+      hook && callWithAsyncErrorHandling(
+        hook,
+        instance,
+        9,
+        args
+      );
+    };
+    const callAsyncHook = (hook, args) => {
+      const done = args[1];
+      callHook2(hook, args);
+      if (isArray(hook)) {
+        if (hook.every((hook2) => hook2.length <= 1))
+          done();
+      } else if (hook.length <= 1) {
+        done();
+      }
+    };
+    const hooks = {
+      mode,
+      persisted,
+      beforeEnter(el) {
+        let hook = onBeforeEnter;
+        if (!state.isMounted) {
+          if (appear) {
+            hook = onBeforeAppear || onBeforeEnter;
+          } else {
+            return;
+          }
+        }
+        if (el._leaveCb) {
+          el._leaveCb(
+            true
+            /* cancelled */
+          );
+        }
+        const leavingVNode = leavingVNodesCache[key];
+        if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) {
+          leavingVNode.el._leaveCb();
+        }
+        callHook2(hook, [el]);
+      },
+      enter(el) {
+        let hook = onEnter;
+        let afterHook = onAfterEnter;
+        let cancelHook = onEnterCancelled;
+        if (!state.isMounted) {
+          if (appear) {
+            hook = onAppear || onEnter;
+            afterHook = onAfterAppear || onAfterEnter;
+            cancelHook = onAppearCancelled || onEnterCancelled;
+          } else {
+            return;
+          }
+        }
+        let called = false;
+        const done = el._enterCb = (cancelled) => {
+          if (called)
+            return;
+          called = true;
+          if (cancelled) {
+            callHook2(cancelHook, [el]);
+          } else {
+            callHook2(afterHook, [el]);
+          }
+          if (hooks.delayedLeave) {
+            hooks.delayedLeave();
+          }
+          el._enterCb = void 0;
+        };
+        if (hook) {
+          callAsyncHook(hook, [el, done]);
+        } else {
+          done();
+        }
+      },
+      leave(el, remove2) {
+        const key2 = String(vnode.key);
+        if (el._enterCb) {
+          el._enterCb(
+            true
+            /* cancelled */
+          );
+        }
+        if (state.isUnmounting) {
+          return remove2();
+        }
+        callHook2(onBeforeLeave, [el]);
+        let called = false;
+        const done = el._leaveCb = (cancelled) => {
+          if (called)
+            return;
+          called = true;
+          remove2();
+          if (cancelled) {
+            callHook2(onLeaveCancelled, [el]);
+          } else {
+            callHook2(onAfterLeave, [el]);
+          }
+          el._leaveCb = void 0;
+          if (leavingVNodesCache[key2] === vnode) {
+            delete leavingVNodesCache[key2];
+          }
+        };
+        leavingVNodesCache[key2] = vnode;
+        if (onLeave) {
+          callAsyncHook(onLeave, [el, done]);
+        } else {
+          done();
+        }
+      },
+      clone(vnode2) {
+        return resolveTransitionHooks(vnode2, props, state, instance);
+      }
+    };
+    return hooks;
+  }
+  function emptyPlaceholder(vnode) {
+    if (isKeepAlive(vnode)) {
+      vnode = cloneVNode(vnode);
+      vnode.children = null;
+      return vnode;
+    }
+  }
+  function getKeepAliveChild(vnode) {
+    return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;
+  }
+  function setTransitionHooks(vnode, hooks) {
+    if (vnode.shapeFlag & 6 && vnode.component) {
+      setTransitionHooks(vnode.component.subTree, hooks);
+    } else if (vnode.shapeFlag & 128) {
+      vnode.ssContent.transition = hooks.clone(vnode.ssContent);
+      vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);
+    } else {
+      vnode.transition = hooks;
+    }
+  }
+  function getTransitionRawChildren(children, keepComment = false, parentKey) {
+    let ret = [];
+    let keyedFragmentCount = 0;
+    for (let i = 0; i < children.length; i++) {
+      let child = children[i];
+      const key = parentKey == null ? child.key : String(parentKey) + String(child.key != null ? child.key : i);
+      if (child.type === Fragment) {
+        if (child.patchFlag & 128)
+          keyedFragmentCount++;
+        ret = ret.concat(
+          getTransitionRawChildren(child.children, keepComment, key)
+        );
+      } else if (keepComment || child.type !== Comment) {
+        ret.push(key != null ? cloneVNode(child, { key }) : child);
+      }
+    }
+    if (keyedFragmentCount > 1) {
+      for (let i = 0; i < ret.length; i++) {
+        ret[i].patchFlag = -2;
+      }
+    }
+    return ret;
+  }
   function defineComponent(options, extraOptions) {
     return isFunction(options) ? (
       // #8326: extend call and options.name access are considered side-effects
@@ -2375,7 +2692,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     const ctx = instance.ctx;
     shouldCacheAccess = false;
     if (options.beforeCreate) {
-      callHook(options.beforeCreate, instance, "bc");
+      callHook$1(options.beforeCreate, instance, "bc");
     }
     const {
       // state
@@ -2462,7 +2779,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       });
     }
     if (created) {
-      callHook(created, instance, "c");
+      callHook$1(created, instance, "c");
     }
     function registerLifecycleHook(register, hook) {
       if (isArray(hook)) {
@@ -2540,7 +2857,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
     }
   }
-  function callHook(hook, instance, type) {
+  function callHook$1(hook, instance, type) {
     callWithAsyncErrorHandling(
       isArray(hook) ? hook.map((h2) => h2.bind(instance.proxy)) : hook.bind(instance.proxy),
       instance,
@@ -5042,6 +5359,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     return instance;
   }
   let currentInstance = null;
+  const getCurrentInstance = () => currentInstance || currentRenderingInstance;
   let internalSetCurrentInstance;
   let globalCurrentInstanceSetters;
   let settersKey = "__VUE_INSTANCE_SETTERS__";
@@ -5572,6 +5890,268 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     return key in el;
   }
+  const TRANSITION = "transition";
+  const ANIMATION = "animation";
+  const Transition = (props, { slots }) => h$1(BaseTransition, resolveTransitionProps(props), slots);
+  Transition.displayName = "Transition";
+  const DOMTransitionPropsValidators = {
+    name: String,
+    type: String,
+    css: {
+      type: Boolean,
+      default: true
+    },
+    duration: [String, Number, Object],
+    enterFromClass: String,
+    enterActiveClass: String,
+    enterToClass: String,
+    appearFromClass: String,
+    appearActiveClass: String,
+    appearToClass: String,
+    leaveFromClass: String,
+    leaveActiveClass: String,
+    leaveToClass: String
+  };
+  Transition.props = /* @__PURE__ */ extend(
+    {},
+    BaseTransitionPropsValidators,
+    DOMTransitionPropsValidators
+  );
+  const callHook = (hook, args = []) => {
+    if (isArray(hook)) {
+      hook.forEach((h2) => h2(...args));
+    } else if (hook) {
+      hook(...args);
+    }
+  };
+  const hasExplicitCallback = (hook) => {
+    return hook ? isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false;
+  };
+  function resolveTransitionProps(rawProps) {
+    const baseProps = {};
+    for (const key in rawProps) {
+      if (!(key in DOMTransitionPropsValidators)) {
+        baseProps[key] = rawProps[key];
+      }
+    }
+    if (rawProps.css === false) {
+      return baseProps;
+    }
+    const {
+      name = "v",
+      type,
+      duration,
+      enterFromClass = `${name}-enter-from`,
+      enterActiveClass = `${name}-enter-active`,
+      enterToClass = `${name}-enter-to`,
+      appearFromClass = enterFromClass,
+      appearActiveClass = enterActiveClass,
+      appearToClass = enterToClass,
+      leaveFromClass = `${name}-leave-from`,
+      leaveActiveClass = `${name}-leave-active`,
+      leaveToClass = `${name}-leave-to`
+    } = rawProps;
+    const durations = normalizeDuration(duration);
+    const enterDuration = durations && durations[0];
+    const leaveDuration = durations && durations[1];
+    const {
+      onBeforeEnter,
+      onEnter,
+      onEnterCancelled,
+      onLeave,
+      onLeaveCancelled,
+      onBeforeAppear = onBeforeEnter,
+      onAppear = onEnter,
+      onAppearCancelled = onEnterCancelled
+    } = baseProps;
+    const finishEnter = (el, isAppear, done) => {
+      removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
+      removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
+      done && done();
+    };
+    const finishLeave = (el, done) => {
+      el._isLeaving = false;
+      removeTransitionClass(el, leaveFromClass);
+      removeTransitionClass(el, leaveToClass);
+      removeTransitionClass(el, leaveActiveClass);
+      done && done();
+    };
+    const makeEnterHook = (isAppear) => {
+      return (el, done) => {
+        const hook = isAppear ? onAppear : onEnter;
+        const resolve2 = () => finishEnter(el, isAppear, done);
+        callHook(hook, [el, resolve2]);
+        nextFrame(() => {
+          removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
+          addTransitionClass(el, isAppear ? appearToClass : enterToClass);
+          if (!hasExplicitCallback(hook)) {
+            whenTransitionEnds(el, type, enterDuration, resolve2);
+          }
+        });
+      };
+    };
+    return extend(baseProps, {
+      onBeforeEnter(el) {
+        callHook(onBeforeEnter, [el]);
+        addTransitionClass(el, enterFromClass);
+        addTransitionClass(el, enterActiveClass);
+      },
+      onBeforeAppear(el) {
+        callHook(onBeforeAppear, [el]);
+        addTransitionClass(el, appearFromClass);
+        addTransitionClass(el, appearActiveClass);
+      },
+      onEnter: makeEnterHook(false),
+      onAppear: makeEnterHook(true),
+      onLeave(el, done) {
+        el._isLeaving = true;
+        const resolve2 = () => finishLeave(el, done);
+        addTransitionClass(el, leaveFromClass);
+        forceReflow();
+        addTransitionClass(el, leaveActiveClass);
+        nextFrame(() => {
+          if (!el._isLeaving) {
+            return;
+          }
+          removeTransitionClass(el, leaveFromClass);
+          addTransitionClass(el, leaveToClass);
+          if (!hasExplicitCallback(onLeave)) {
+            whenTransitionEnds(el, type, leaveDuration, resolve2);
+          }
+        });
+        callHook(onLeave, [el, resolve2]);
+      },
+      onEnterCancelled(el) {
+        finishEnter(el, false);
+        callHook(onEnterCancelled, [el]);
+      },
+      onAppearCancelled(el) {
+        finishEnter(el, true);
+        callHook(onAppearCancelled, [el]);
+      },
+      onLeaveCancelled(el) {
+        finishLeave(el);
+        callHook(onLeaveCancelled, [el]);
+      }
+    });
+  }
+  function normalizeDuration(duration) {
+    if (duration == null) {
+      return null;
+    } else if (isObject(duration)) {
+      return [NumberOf(duration.enter), NumberOf(duration.leave)];
+    } else {
+      const n = NumberOf(duration);
+      return [n, n];
+    }
+  }
+  function NumberOf(val) {
+    const res = toNumber(val);
+    return res;
+  }
+  function addTransitionClass(el, cls) {
+    cls.split(/\s+/).forEach((c2) => c2 && el.classList.add(c2));
+    (el._vtc || (el._vtc = /* @__PURE__ */ new Set())).add(cls);
+  }
+  function removeTransitionClass(el, cls) {
+    cls.split(/\s+/).forEach((c2) => c2 && el.classList.remove(c2));
+    const { _vtc } = el;
+    if (_vtc) {
+      _vtc.delete(cls);
+      if (!_vtc.size) {
+        el._vtc = void 0;
+      }
+    }
+  }
+  function nextFrame(cb) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(cb);
+    });
+  }
+  let endId = 0;
+  function whenTransitionEnds(el, expectedType, explicitTimeout, resolve2) {
+    const id = el._endId = ++endId;
+    const resolveIfNotStale = () => {
+      if (id === el._endId) {
+        resolve2();
+      }
+    };
+    if (explicitTimeout) {
+      return setTimeout(resolveIfNotStale, explicitTimeout);
+    }
+    const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
+    if (!type) {
+      return resolve2();
+    }
+    const endEvent = type + "end";
+    let ended = 0;
+    const end = () => {
+      el.removeEventListener(endEvent, onEnd);
+      resolveIfNotStale();
+    };
+    const onEnd = (e) => {
+      if (e.target === el && ++ended >= propCount) {
+        end();
+      }
+    };
+    setTimeout(() => {
+      if (ended < propCount) {
+        end();
+      }
+    }, timeout + 1);
+    el.addEventListener(endEvent, onEnd);
+  }
+  function getTransitionInfo(el, expectedType) {
+    const styles = window.getComputedStyle(el);
+    const getStyleProperties = (key) => (styles[key] || "").split(", ");
+    const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
+    const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
+    const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
+    const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
+    const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
+    const animationTimeout = getTimeout(animationDelays, animationDurations);
+    let type = null;
+    let timeout = 0;
+    let propCount = 0;
+    if (expectedType === TRANSITION) {
+      if (transitionTimeout > 0) {
+        type = TRANSITION;
+        timeout = transitionTimeout;
+        propCount = transitionDurations.length;
+      }
+    } else if (expectedType === ANIMATION) {
+      if (animationTimeout > 0) {
+        type = ANIMATION;
+        timeout = animationTimeout;
+        propCount = animationDurations.length;
+      }
+    } else {
+      timeout = Math.max(transitionTimeout, animationTimeout);
+      type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
+      propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
+    }
+    const hasTransform = type === TRANSITION && /\b(transform|all)(,|$)/.test(
+      getStyleProperties(`${TRANSITION}Property`).toString()
+    );
+    return {
+      type,
+      timeout,
+      propCount,
+      hasTransform
+    };
+  }
+  function getTimeout(delays, durations) {
+    while (delays.length < durations.length) {
+      delays = delays.concat(delays);
+    }
+    return Math.max(...durations.map((d2, i) => toMs(d2) + toMs(delays[i])));
+  }
+  function toMs(s) {
+    return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
+  }
+  function forceReflow() {
+    return document.body.offsetHeight;
+  }
   const getModelAssigner = (vnode) => {
     const fn = vnode.props["onUpdate:modelValue"] || false;
     return isArray(fn) ? (value) => invokeArrayFns(fn, value) : fn;
@@ -8426,6 +9006,21 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     return (_c = (_b = (_a = parts == null ? void 0 : parts.map((part) => part.replace(/(^\/+|\/+$)/g, ""))) == null ? void 0 : _a.filter((part) => part !== "")) == null ? void 0 : _b.join("/")) != null ? _c : "";
   };
+  const checkHasFullImageUrl = (imageUrl) => typeof imageUrl === "string" && (imageUrl.indexOf("http://") === 0 || imageUrl.indexOf("https://") === 0);
+  const computeImageUrl = (imageUrl, rootImageUrl) => {
+    const mainUrl = Array.isArray(imageUrl) ? imageUrl[0] : imageUrl;
+    if (checkHasFullImageUrl(mainUrl)) {
+      return mainUrl;
+    }
+    return rootImageUrl ? joinUrlParts(rootImageUrl, mainUrl) : `/${mainUrl}`;
+  };
+  const replaceImageWithPlaceholder = (e, placeholder) => {
+    var _a;
+    const targetImage = e == null ? void 0 : e.target;
+    if (targetImage && !((_a = targetImage == null ? void 0 : targetImage.src) == null ? void 0 : _a.includes(placeholder))) {
+      targetImage.src = placeholder;
+    }
+  };
   const _hoisted_1$17 = ["src"];
   const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     __name: "ProductImage",
@@ -8437,33 +9032,73 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     setup(__props) {
       const props = __props;
+      const isHover = ref(false);
+      const hoverImageIndex = ref(0);
+      const hoverInterval = ref(0);
       const rootImageUrl = computed(() => props.options.baseUrl);
       const image = computed(() => props.item[props.options.key]);
       const hasFullImageUrl = computed(() => {
-        const imageUrl2 = image.value;
-        return typeof imageUrl2 === "string" && (imageUrl2.indexOf("http://") === 0 || imageUrl2.indexOf("https://") === 0);
+        return checkHasFullImageUrl(image.value);
       });
       const imageUrl = computed(() => {
-        const imageUrl2 = image.value;
-        if (hasFullImageUrl.value) {
-          return imageUrl2;
-        }
-        return rootImageUrl.value ? joinUrlParts(rootImageUrl.value, imageUrl2) : `/${imageUrl2}`;
+        return computeImageUrl(image.value, rootImageUrl.value);
       });
       const hasImage = computed(() => Boolean(hasFullImageUrl.value || image.value));
       const placeholder = computed(() => props.options.placeholder);
-      const finalUrl = computed(() => {
+      const finalMainImageUrl = computed(() => {
         if (props.options.customUrl) {
           return props.options.customUrl(props.item);
         }
         return hasImage.value ? imageUrl.value : placeholder.value;
       });
-      const replaceWithPlaceholder = (e) => {
+      const hoverImages = computed(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+        if ((_a = props.options.hoverImages) == null ? void 0 : _a.key) {
+          return (_g = (_f = (_e = props.item[(_b = props.options.hoverImages) == null ? void 0 : _b.key]) == null ? void 0 : _e.slice(0, (_d = (_c = props.options.hoverImages) == null ? void 0 : _c.maxImages) != null ? _d : 5)) == null ? void 0 : _f.map((i) => computeImageUrl(i, rootImageUrl.value))) != null ? _g : [];
+        }
+        if (props.options.hoverImages) {
+          return (_l = (_k = (_h = props.options.hoverImages) == null ? void 0 : _h.display(props.item)) == null ? void 0 : _k.slice(0, (_j = (_i = props.options.hoverImages) == null ? void 0 : _i.maxImages) != null ? _j : 5)) != null ? _l : [];
+        }
+        return [];
+      });
+      const hasHoverImages = computed(() => {
         var _a;
-        const targetImage = e == null ? void 0 : e.target;
-        if (targetImage && !((_a = targetImage == null ? void 0 : targetImage.src) == null ? void 0 : _a.includes(placeholder.value))) {
-          targetImage.src = placeholder.value;
+        return Boolean((_a = hoverImages.value) == null ? void 0 : _a.length);
+      });
+      const replaceWithPlaceholder = (e) => {
+        replaceImageWithPlaceholder(e, placeholder.value);
+      };
+      const setNextHoverImage = () => {
+        hoverImageIndex.value = (hoverImageIndex.value + 1) % hoverImages.value.length;
+      };
+      const currentHoverImage = computed(() => {
+        return hoverImages.value[hoverImageIndex.value];
+      });
+      const finalUrl = computed(() => {
+        return isHover.value ? currentHoverImage.value : finalMainImageUrl.value;
+      });
+      const handleMouseEnter = () => {
+        var _a, _b;
+        if (!hasHoverImages.value) {
+          return;
+        }
+        isHover.value = true;
+        hoverImageIndex.value = 0;
+        if (hoverInterval.value) {
+          return;
+        }
+        hoverInterval.value = setInterval(
+          setNextHoverImage,
+          (_b = (_a = props.options.hoverImages) == null ? void 0 : _a.cycleInterval) != null ? _b : 2e3
+        );
+      };
+      const handleMouseLeave = () => {
+        if (!hasHoverImages.value) {
+          return;
         }
+        isHover.value = false;
+        clearInterval(hoverInterval.value);
+        hoverInterval.value = 0;
       };
       const imageAlt = computed(() => {
         const alt = props.options.alt;
@@ -8472,16 +9107,44 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
         return "";
       });
+      const preloadImages = (images) => {
+        images.forEach((src) => {
+          const img = new Image();
+          img.src = src;
+        });
+      };
+      onMounted(() => {
+        if (hasHoverImages.value) {
+          preloadImages(hoverImages.value);
+        }
+      });
+      watch(hoverImages, (newImages) => {
+        if (newImages.length) {
+          preloadImages(newImages);
+        }
+      });
+      onBeforeUnmount(() => {
+        clearInterval(hoverInterval.value);
+      });
       return (_ctx, _cache) => {
-        var _a, _b;
         return openBlock(), createElementBlock("div", {
-          class: normalizeClass((_a = _ctx.wrapperClass) != null ? _a : "")
+          class: normalizeClass({ [_ctx.wrapperClass]: Boolean(_ctx.wrapperClass), "lupa-images-hover": isHover.value }),
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave
         }, [
-          createBaseVNode("img", mergeProps({
-            class: (_b = _ctx.imageClass) != null ? _b : "",
-            src: finalUrl.value
-          }, { alt: imageAlt.value ? imageAlt.value : void 0 }, { onError: replaceWithPlaceholder }), null, 16, _hoisted_1$17)
-        ], 2);
+          createVNode(Transition, { name: "lupa-fade" }, {
+            default: withCtx(() => [
+              (openBlock(), createElementBlock("img", mergeProps({
+                class: ["lupa-images-hover-image", { [_ctx.imageClass]: true, "lupa-images-hover-image": isHover.value }],
+                src: finalUrl.value
+              }, { alt: imageAlt.value ? imageAlt.value : void 0 }, {
+                onError: replaceWithPlaceholder,
+                key: finalUrl.value
+              }), null, 16, _hoisted_1$17))
+            ]),
+            _: 1
+          })
+        ], 34);
       };
     }
   });
@@ -9199,6 +9862,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     setup(__props) {
       const props = __props;
+      const dynamicDataStore = useDynamicDataStore();
+      const { dynamicDataIdMap } = storeToRefs(dynamicDataStore);
       const positionValue = computed(() => {
         var _a;
         return (_a = props.position) != null ? _a : "card";
@@ -9206,6 +9871,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const anchorPosition = computed(() => {
         return props.options.anchor;
       });
+      const enhancedProduct = computed(() => {
+        var _a, _b, _c, _d;
+        if (!((_a = props.options.product) == null ? void 0 : _a.id)) {
+          return props.options.product;
+        }
+        const enhancementData = (_d = (_c = dynamicDataIdMap.value) == null ? void 0 : _c[(_b = props.options.product) == null ? void 0 : _b.id]) != null ? _d : {};
+        return __spreadValues2(__spreadValues2({}, props.options.product), enhancementData);
+      });
       const badges = computed(() => {
         if (!props.options.elements) {
           return [];
@@ -9216,8 +9889,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }).map((x) => {
           var _a;
           return __spreadProps2(__spreadValues2({}, x), {
-            value: ((_a = props.options.product) == null ? void 0 : _a[x.key]) || "badge",
-            product: props.options.product
+            value: ((_a = enhancedProduct.value) == null ? void 0 : _a[x.key]) || "badge",
+            product: enhancedProduct.value
           });
         });
       });
@@ -17304,8 +17977,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         function createRelationalOperation(operator) {
           return function(value, other) {
             if (!(typeof value == "string" && typeof other == "string")) {
-              value = toNumber(value);
-              other = toNumber(other);
+              value = toNumber2(value);
+              other = toNumber2(other);
             }
             return operator(value, other);
           };
@@ -17339,7 +18012,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         function createRound(methodName) {
           var func = Math2[methodName];
           return function(number, precision) {
-            number = toNumber(number);
+            number = toNumber2(number);
             precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
             if (precision && nativeIsFinite(number)) {
               var pair = (toString(number) + "e").split("e"), value = func(pair[0] + "e" + (+pair[1] + precision));
@@ -18697,11 +19370,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
-          wait = toNumber(wait) || 0;
+          wait = toNumber2(wait) || 0;
           if (isObject2(options)) {
             leading = !!options.leading;
             maxing = "maxWait" in options;
-            maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+            maxWait = maxing ? nativeMax(toNumber2(options.maxWait) || 0, wait) : maxWait;
             trailing = "trailing" in options ? !!options.trailing : trailing;
           }
           function invokeFunc(time) {
@@ -18777,7 +19450,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           return baseDelay(func, 1, args);
         });
         var delay = baseRest(function(func, wait, args) {
-          return baseDelay(func, toNumber(wait) || 0, args);
+          return baseDelay(func, toNumber2(wait) || 0, args);
         });
         function flip(func) {
           return createWrap(func, WRAP_FLIP_FLAG);
@@ -19074,7 +19747,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           if (!value) {
             return value === 0 ? value : 0;
           }
-          value = toNumber(value);
+          value = toNumber2(value);
           if (value === INFINITY || value === -INFINITY) {
             var sign = value < 0 ? -1 : 1;
             return sign * MAX_INTEGER;
@@ -19088,7 +19761,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         function toLength(value) {
           return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;
         }
-        function toNumber(value) {
+        function toNumber2(value) {
           if (typeof value == "number") {
             return value;
           }
@@ -19351,14 +20024,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             lower = undefined$1;
           }
           if (upper !== undefined$1) {
-            upper = toNumber(upper);
+            upper = toNumber2(upper);
             upper = upper === upper ? upper : 0;
           }
           if (lower !== undefined$1) {
-            lower = toNumber(lower);
+            lower = toNumber2(lower);
             lower = lower === lower ? lower : 0;
           }
-          return baseClamp(toNumber(number), lower, upper);
+          return baseClamp(toNumber2(number), lower, upper);
         }
         function inRange(number, start, end) {
           start = toFinite(start);
@@ -19368,7 +20041,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           } else {
             end = toFinite(end);
           }
-          number = toNumber(number);
+          number = toNumber2(number);
           return baseInRange(number, start, end);
         }
         function random(lower, upper, floating) {
@@ -20154,7 +20827,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         lodash2.toInteger = toInteger;
         lodash2.toLength = toLength;
         lodash2.toLower = toLower;
-        lodash2.toNumber = toNumber;
+        lodash2.toNumber = toNumber2;
         lodash2.toSafeInteger = toSafeInteger;
         lodash2.toString = toString;
         lodash2.toUpper = toUpper;
@@ -24300,8 +24973,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         function createRelationalOperation(operator) {
           return function(value, other) {
             if (!(typeof value == "string" && typeof other == "string")) {
-              value = toNumber(value);
-              other = toNumber(other);
+              value = toNumber2(value);
+              other = toNumber2(other);
             }
             return operator(value, other);
           };
@@ -24335,7 +25008,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         function createRound(methodName) {
           var func = Math2[methodName];
           return function(number, precision) {
-            number = toNumber(number);
+            number = toNumber2(number);
             precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
             if (precision && nativeIsFinite(number)) {
               var pair = (toString(number) + "e").split("e"), value = func(pair[0] + "e" + (+pair[1] + precision));
@@ -25693,11 +26366,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
-          wait = toNumber(wait) || 0;
+          wait = toNumber2(wait) || 0;
           if (isObject2(options)) {
             leading = !!options.leading;
             maxing = "maxWait" in options;
-            maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+            maxWait = maxing ? nativeMax(toNumber2(options.maxWait) || 0, wait) : maxWait;
             trailing = "trailing" in options ? !!options.trailing : trailing;
           }
           function invokeFunc(time) {
@@ -25773,7 +26446,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           return baseDelay(func, 1, args);
         });
         var delay = baseRest(function(func, wait, args) {
-          return baseDelay(func, toNumber(wait) || 0, args);
+          return baseDelay(func, toNumber2(wait) || 0, args);
         });
         function flip(func) {
           return createWrap(func, WRAP_FLIP_FLAG);
@@ -26070,7 +26743,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           if (!value) {
             return value === 0 ? value : 0;
           }
-          value = toNumber(value);
+          value = toNumber2(value);
           if (value === INFINITY || value === -INFINITY) {
             var sign = value < 0 ? -1 : 1;
             return sign * MAX_INTEGER;
@@ -26084,7 +26757,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         function toLength(value) {
           return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;
         }
-        function toNumber(value) {
+        function toNumber2(value) {
           if (typeof value == "number") {
             return value;
           }
@@ -26347,14 +27020,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             lower = undefined$1;
           }
           if (upper !== undefined$1) {
-            upper = toNumber(upper);
+            upper = toNumber2(upper);
             upper = upper === upper ? upper : 0;
           }
           if (lower !== undefined$1) {
-            lower = toNumber(lower);
+            lower = toNumber2(lower);
             lower = lower === lower ? lower : 0;
           }
-          return baseClamp(toNumber(number), lower, upper);
+          return baseClamp(toNumber2(number), lower, upper);
         }
         function inRange(number, start, end) {
           start = toFinite(start);
@@ -26364,7 +27037,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           } else {
             end = toFinite(end);
           }
-          number = toNumber(number);
+          number = toNumber2(number);
           return baseInRange(number, start, end);
         }
         function random(lower, upper, floating) {
@@ -27150,7 +27823,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         lodash2.toInteger = toInteger;
         lodash2.toLength = toLength;
         lodash2.toLower = toLower;
-        lodash2.toNumber = toNumber;
+        lodash2.toNumber = toNumber2;
         lodash2.toSafeInteger = toSafeInteger;
         lodash2.toString = toString;
         lodash2.toUpper = toUpper;