@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/dist/client/VOverlay-D89omJis.js

@@ -0,0 +1,1453 @@
+import { ref, watch, onScopeDispose, computed, nextTick, watchEffect, effectScope, inject, mergeProps, shallowRef, onMounted, reactive, provide, readonly, toRaw, warn, toRef, onBeforeUnmount, createVNode, Fragment, Teleport, withDirectives, vShow, resolveDirective, Transition } from 'vue';
+import { aJ as isOn, aK as eventName, p as propsFactory, x as IN_BROWSER, U as useToggleScope, aL as destructComputed, aM as parseAnchor, aN as flipSide, aO as flipAlign, aP as flipCorner, Y as consoleError, aQ as getAxis, q as convertToUnit, R as clamp, aR as defer, aH as getCurrentInstance, aS as templateRef, aT as matchesSelector, t as useDisplay, b as makeComponentProps, H as makeDimensionProps, d as makeThemeProps, g as genericComponent, j as useProxiedModel, e as provideTheme, f as useRtl, C as useBackgroundColor, J as useDimension, aU as useRouter, a as useRender, aV as useBackButton } from './asWebComponent-BRGyP_j5.js';
+import { g as getTargetBox, B as Box, e as getOverflow, n as nullifyTransforms, m as makeLazyProps, u as useLazy, b as useScopeId, a as animate, s as standardEasing } from './forwardRefs-CYrR6bMw.js';
+import { m as makeTransitionProps, M as MaybeTransition } from './transition-DG9nRSW4.js';
+
+// Utilities
+const handlers = new WeakMap();
+function bindProps(el, props) {
+  Object.keys(props).forEach(k => {
+    if (isOn(k)) {
+      const name = eventName(k);
+      const handler = handlers.get(el);
+      if (props[k] == null) {
+        handler?.forEach(v => {
+          const [n, fn] = v;
+          if (n === name) {
+            el.removeEventListener(name, fn);
+            handler.delete(v);
+          }
+        });
+      } else if (!handler || ![...handler]?.some(v => v[0] === name && v[1] === props[k])) {
+        el.addEventListener(name, props[k]);
+        const _handler = handler || new Set();
+        _handler.add([name, props[k]]);
+        if (!handlers.has(el)) handlers.set(el, _handler);
+      }
+    } else {
+      if (props[k] == null) {
+        el.removeAttribute(k);
+      } else {
+        el.setAttribute(k, props[k]);
+      }
+    }
+  });
+}
+function unbindProps(el, props) {
+  Object.keys(props).forEach(k => {
+    if (isOn(k)) {
+      const name = eventName(k);
+      const handler = handlers.get(el);
+      handler?.forEach(v => {
+        const [n, fn] = v;
+        if (n === name) {
+          el.removeEventListener(name, fn);
+          handler.delete(v);
+        }
+      });
+    } else {
+      el.removeAttribute(k);
+    }
+  });
+}
+
+/**
+ * Returns:
+ *  - 'null' if the node is not attached to the DOM
+ *  - the root node (HTMLDocument | ShadowRoot) otherwise
+ */
+function attachedRoot(node) {
+  /* istanbul ignore next */
+  if (typeof node.getRootNode !== 'function') {
+    // Shadow DOM not supported (IE11), lets find the root of this node
+    while (node.parentNode) node = node.parentNode;
+
+    // The root parent is the document if the node is attached to the DOM
+    if (node !== document) return null;
+    return document;
+  }
+  const root = node.getRootNode();
+
+  // The composed root node is the document if the node is attached to the DOM
+  if (root !== document && root.getRootNode({
+    composed: true
+  }) !== document) return null;
+  return root;
+}
+
+function getScrollParent(el) {
+  let includeHidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  while (el) {
+    if (includeHidden ? isPotentiallyScrollable(el) : hasScrollbar(el)) return el;
+    el = el.parentElement;
+  }
+  return document.scrollingElement;
+}
+function getScrollParents(el, stopAt) {
+  const elements = [];
+  if (stopAt && el && !stopAt.contains(el)) return elements;
+  while (el) {
+    if (hasScrollbar(el)) elements.push(el);
+    if (el === stopAt) break;
+    el = el.parentElement;
+  }
+  return elements;
+}
+function hasScrollbar(el) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
+  const style = window.getComputedStyle(el);
+  return style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
+}
+function isPotentiallyScrollable(el) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
+  const style = window.getComputedStyle(el);
+  return ['scroll', 'auto'].includes(style.overflowY);
+}
+
+function isFixedPosition(el) {
+  while (el) {
+    if (window.getComputedStyle(el).position === 'fixed') {
+      return true;
+    }
+    el = el.offsetParent;
+  }
+  return false;
+}
+
+// Utilities
+function defaultConditional() {
+  return true;
+}
+function checkEvent(e, el, binding) {
+  // The include element callbacks below can be expensive
+  // so we should avoid calling them when we're not active.
+  // Explicitly check for false to allow fallback compatibility
+  // with non-toggleable components
+  if (!e || checkIsActive(e, binding) === false) return false;
+
+  // If we're clicking inside the shadowroot, then the app root doesn't get the same
+  // level of introspection as to _what_ we're clicking. We want to check to see if
+  // our target is the shadowroot parent container, and if it is, ignore.
+  const root = attachedRoot(el);
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot && root.host === e.target) return false;
+
+  // Check if additional elements were passed to be included in check
+  // (click must be outside all included elements, if any)
+  const elements = (typeof binding.value === 'object' && binding.value.include || (() => []))();
+  // Add the root element for the component this directive was defined on
+  elements.push(el);
+
+  // Check if it's a click outside our elements, and then if our callback returns true.
+  // Non-toggleable components should take action in their callback and return falsy.
+  // Toggleable can return true if it wants to deactivate.
+  // Note that, because we're in the capture phase, this callback will occur before
+  // the bubbling click event on any outside elements.
+  return !elements.some(el => el?.contains(e.target));
+}
+function checkIsActive(e, binding) {
+  const isActive = typeof binding.value === 'object' && binding.value.closeConditional || defaultConditional;
+  return isActive(e);
+}
+function directive(e, el, binding) {
+  const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
+
+  // Clicks in the Shadow DOM change their target while using setTimeout, so the original target is saved here
+  e.shadowTarget = e.target;
+  el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
+    checkIsActive(e, binding) && handler && handler(e);
+  }, 0);
+}
+function handleShadow(el, callback) {
+  const root = attachedRoot(el);
+  callback(document);
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+    callback(root);
+  }
+}
+const ClickOutside = {
+  // [data-app] may not be found
+  // if using bind, inserted makes
+  // sure that the root element is
+  // available, iOS does not support
+  // clicks on body
+  mounted(el, binding) {
+    const onClick = e => directive(e, el, binding);
+    const onMousedown = e => {
+      el._clickOutside.lastMousedownWasOutside = checkEvent(e, el, binding);
+    };
+    handleShadow(el, app => {
+      app.addEventListener('click', onClick, true);
+      app.addEventListener('mousedown', onMousedown, true);
+    });
+    if (!el._clickOutside) {
+      el._clickOutside = {
+        lastMousedownWasOutside: false
+      };
+    }
+    el._clickOutside[binding.instance.$.uid] = {
+      onClick,
+      onMousedown
+    };
+  },
+  beforeUnmount(el, binding) {
+    if (!el._clickOutside) return;
+    handleShadow(el, app => {
+      if (!app || !el._clickOutside?.[binding.instance.$.uid]) return;
+      const {
+        onClick,
+        onMousedown
+      } = el._clickOutside[binding.instance.$.uid];
+      app.removeEventListener('click', onClick, true);
+      app.removeEventListener('mousedown', onMousedown, true);
+    });
+    delete el._clickOutside[binding.instance.$.uid];
+  }
+};
+
+// Types
+
+/** Convert a point in local space to viewport space */
+function elementToViewport(point, offset) {
+  return {
+    x: point.x + offset.x,
+    y: point.y + offset.y
+  };
+}
+
+/** Get the difference between two points */
+function getOffset(a, b) {
+  return {
+    x: a.x - b.x,
+    y: a.y - b.y
+  };
+}
+
+/** Convert an anchor object to a point in local space */
+function anchorToPoint(anchor, box) {
+  if (anchor.side === 'top' || anchor.side === 'bottom') {
+    const {
+      side,
+      align
+    } = anchor;
+    const x = align === 'left' ? 0 : align === 'center' ? box.width / 2 : align === 'right' ? box.width : align;
+    const y = side === 'top' ? 0 : side === 'bottom' ? box.height : side;
+    return elementToViewport({
+      x,
+      y
+    }, box);
+  } else if (anchor.side === 'left' || anchor.side === 'right') {
+    const {
+      side,
+      align
+    } = anchor;
+    const x = side === 'left' ? 0 : side === 'right' ? box.width : side;
+    const y = align === 'top' ? 0 : align === 'center' ? box.height / 2 : align === 'bottom' ? box.height : align;
+    return elementToViewport({
+      x,
+      y
+    }, box);
+  }
+  return elementToViewport({
+    x: box.width / 2,
+    y: box.height / 2
+  }, box);
+}
+
+// Composables
+const locationStrategies = {
+  static: staticLocationStrategy,
+  // specific viewport position, usually centered
+  connected: connectedLocationStrategy // connected to a certain element
+};
+const makeLocationStrategyProps = propsFactory({
+  locationStrategy: {
+    type: [String, Function],
+    default: 'static',
+    validator: val => typeof val === 'function' || val in locationStrategies
+  },
+  location: {
+    type: String,
+    default: 'bottom'
+  },
+  origin: {
+    type: String,
+    default: 'auto'
+  },
+  offset: [Number, String, Array]
+}, 'VOverlay-location-strategies');
+function useLocationStrategies(props, data) {
+  const contentStyles = ref({});
+  const updateLocation = ref();
+  if (IN_BROWSER) {
+    useToggleScope(() => !!(data.isActive.value && props.locationStrategy), reset => {
+      watch(() => props.locationStrategy, reset);
+      onScopeDispose(() => {
+        window.removeEventListener('resize', onResize);
+        updateLocation.value = undefined;
+      });
+      window.addEventListener('resize', onResize, {
+        passive: true
+      });
+      if (typeof props.locationStrategy === 'function') {
+        updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation;
+      } else {
+        updateLocation.value = locationStrategies[props.locationStrategy](data, props, contentStyles)?.updateLocation;
+      }
+    });
+  }
+  function onResize(e) {
+    updateLocation.value?.(e);
+  }
+  return {
+    contentStyles,
+    updateLocation
+  };
+}
+function staticLocationStrategy() {
+  // TODO
+}
+
+/** Get size of element ignoring max-width/max-height */
+function getIntrinsicSize(el, isRtl) {
+  // const scrollables = new Map<Element, [number, number]>()
+  // el.querySelectorAll('*').forEach(el => {
+  //   const x = el.scrollLeft
+  //   const y = el.scrollTop
+  //   if (x || y) {
+  //     scrollables.set(el, [x, y])
+  //   }
+  // })
+
+  // const initialMaxWidth = el.style.maxWidth
+  // const initialMaxHeight = el.style.maxHeight
+  // el.style.removeProperty('max-width')
+  // el.style.removeProperty('max-height')
+
+  /* eslint-disable-next-line sonarjs/prefer-immediate-return */
+  const contentBox = nullifyTransforms(el);
+  if (isRtl) {
+    contentBox.x += parseFloat(el.style.right || 0);
+  } else {
+    contentBox.x -= parseFloat(el.style.left || 0);
+  }
+  contentBox.y -= parseFloat(el.style.top || 0);
+
+  // el.style.maxWidth = initialMaxWidth
+  // el.style.maxHeight = initialMaxHeight
+  // scrollables.forEach((position, el) => {
+  //   el.scrollTo(...position)
+  // })
+
+  return contentBox;
+}
+function connectedLocationStrategy(data, props, contentStyles) {
+  const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);
+  if (activatorFixed) {
+    Object.assign(contentStyles.value, {
+      position: 'fixed',
+      top: 0,
+      [data.isRtl.value ? 'right' : 'left']: 0
+    });
+  }
+  const {
+    preferredAnchor,
+    preferredOrigin
+  } = destructComputed(() => {
+    const parsedAnchor = parseAnchor(props.location, data.isRtl.value);
+    const parsedOrigin = props.origin === 'overlap' ? parsedAnchor : props.origin === 'auto' ? flipSide(parsedAnchor) : parseAnchor(props.origin, data.isRtl.value);
+
+    // Some combinations of props may produce an invalid origin
+    if (parsedAnchor.side === parsedOrigin.side && parsedAnchor.align === flipAlign(parsedOrigin).align) {
+      return {
+        preferredAnchor: flipCorner(parsedAnchor),
+        preferredOrigin: flipCorner(parsedOrigin)
+      };
+    } else {
+      return {
+        preferredAnchor: parsedAnchor,
+        preferredOrigin: parsedOrigin
+      };
+    }
+  });
+  const [minWidth, minHeight, maxWidth, maxHeight] = ['minWidth', 'minHeight', 'maxWidth', 'maxHeight'].map(key => {
+    return computed(() => {
+      const val = parseFloat(props[key]);
+      return isNaN(val) ? Infinity : val;
+    });
+  });
+  const offset = computed(() => {
+    if (Array.isArray(props.offset)) {
+      return props.offset;
+    }
+    if (typeof props.offset === 'string') {
+      const offset = props.offset.split(' ').map(parseFloat);
+      if (offset.length < 2) offset.push(0);
+      return offset;
+    }
+    return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0];
+  });
+  let observe = false;
+  const observer = new ResizeObserver(() => {
+    if (observe) updateLocation();
+  });
+  watch([data.target, data.contentEl], (_ref, _ref2) => {
+    let [newTarget, newContentEl] = _ref;
+    let [oldTarget, oldContentEl] = _ref2;
+    if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);
+    if (newTarget && !Array.isArray(newTarget)) observer.observe(newTarget);
+    if (oldContentEl) observer.unobserve(oldContentEl);
+    if (newContentEl) observer.observe(newContentEl);
+  }, {
+    immediate: true
+  });
+  onScopeDispose(() => {
+    observer.disconnect();
+  });
+
+  // eslint-disable-next-line max-statements
+  function updateLocation() {
+    observe = false;
+    requestAnimationFrame(() => observe = true);
+    if (!data.target.value || !data.contentEl.value) return;
+    const targetBox = getTargetBox(data.target.value);
+    const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
+    const scrollParents = getScrollParents(data.contentEl.value);
+    const viewportMargin = 12;
+    if (!scrollParents.length) {
+      scrollParents.push(document.documentElement);
+      if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {
+        contentBox.x -= parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-x') || 0);
+        contentBox.y -= parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-y') || 0);
+      }
+    }
+    const viewport = scrollParents.reduce((box, el) => {
+      const rect = el.getBoundingClientRect();
+      const scrollBox = new Box({
+        x: el === document.documentElement ? 0 : rect.x,
+        y: el === document.documentElement ? 0 : rect.y,
+        width: el.clientWidth,
+        height: el.clientHeight
+      });
+      if (box) {
+        return new Box({
+          x: Math.max(box.left, scrollBox.left),
+          y: Math.max(box.top, scrollBox.top),
+          width: Math.min(box.right, scrollBox.right) - Math.max(box.left, scrollBox.left),
+          height: Math.min(box.bottom, scrollBox.bottom) - Math.max(box.top, scrollBox.top)
+        });
+      }
+      return scrollBox;
+    }, undefined);
+    viewport.x += viewportMargin;
+    viewport.y += viewportMargin;
+    viewport.width -= viewportMargin * 2;
+    viewport.height -= viewportMargin * 2;
+    let placement = {
+      anchor: preferredAnchor.value,
+      origin: preferredOrigin.value
+    };
+    function checkOverflow(_placement) {
+      const box = new Box(contentBox);
+      const targetPoint = anchorToPoint(_placement.anchor, targetBox);
+      const contentPoint = anchorToPoint(_placement.origin, box);
+      let {
+        x,
+        y
+      } = getOffset(targetPoint, contentPoint);
+      switch (_placement.anchor.side) {
+        case 'top':
+          y -= offset.value[0];
+          break;
+        case 'bottom':
+          y += offset.value[0];
+          break;
+        case 'left':
+          x -= offset.value[0];
+          break;
+        case 'right':
+          x += offset.value[0];
+          break;
+      }
+      switch (_placement.anchor.align) {
+        case 'top':
+          y -= offset.value[1];
+          break;
+        case 'bottom':
+          y += offset.value[1];
+          break;
+        case 'left':
+          x -= offset.value[1];
+          break;
+        case 'right':
+          x += offset.value[1];
+          break;
+      }
+      box.x += x;
+      box.y += y;
+      box.width = Math.min(box.width, maxWidth.value);
+      box.height = Math.min(box.height, maxHeight.value);
+      const overflows = getOverflow(box, viewport);
+      return {
+        overflows,
+        x,
+        y
+      };
+    }
+    let x = 0;
+    let y = 0;
+    const available = {
+      x: 0,
+      y: 0
+    };
+    const flipped = {
+      x: false,
+      y: false
+    };
+    let resets = -1;
+    while (true) {
+      if (resets++ > 10) {
+        consoleError('Infinite loop detected in connectedLocationStrategy');
+        break;
+      }
+      const {
+        x: _x,
+        y: _y,
+        overflows
+      } = checkOverflow(placement);
+      x += _x;
+      y += _y;
+      contentBox.x += _x;
+      contentBox.y += _y;
+
+      // flip
+      {
+        const axis = getAxis(placement.anchor);
+        const hasOverflowX = overflows.x.before || overflows.x.after;
+        const hasOverflowY = overflows.y.before || overflows.y.after;
+        let reset = false;
+        ['x', 'y'].forEach(key => {
+          if (key === 'x' && hasOverflowX && !flipped.x || key === 'y' && hasOverflowY && !flipped.y) {
+            const newPlacement = {
+              anchor: {
+                ...placement.anchor
+              },
+              origin: {
+                ...placement.origin
+              }
+            };
+            const flip = key === 'x' ? axis === 'y' ? flipAlign : flipSide : axis === 'y' ? flipSide : flipAlign;
+            newPlacement.anchor = flip(newPlacement.anchor);
+            newPlacement.origin = flip(newPlacement.origin);
+            const {
+              overflows: newOverflows
+            } = checkOverflow(newPlacement);
+            if (newOverflows[key].before <= overflows[key].before && newOverflows[key].after <= overflows[key].after || newOverflows[key].before + newOverflows[key].after < (overflows[key].before + overflows[key].after) / 2) {
+              placement = newPlacement;
+              reset = flipped[key] = true;
+            }
+          }
+        });
+        if (reset) continue;
+      }
+
+      // shift
+      if (overflows.x.before) {
+        x += overflows.x.before;
+        contentBox.x += overflows.x.before;
+      }
+      if (overflows.x.after) {
+        x -= overflows.x.after;
+        contentBox.x -= overflows.x.after;
+      }
+      if (overflows.y.before) {
+        y += overflows.y.before;
+        contentBox.y += overflows.y.before;
+      }
+      if (overflows.y.after) {
+        y -= overflows.y.after;
+        contentBox.y -= overflows.y.after;
+      }
+
+      // size
+      {
+        const overflows = getOverflow(contentBox, viewport);
+        available.x = viewport.width - overflows.x.before - overflows.x.after;
+        available.y = viewport.height - overflows.y.before - overflows.y.after;
+        x += overflows.x.before;
+        contentBox.x += overflows.x.before;
+        y += overflows.y.before;
+        contentBox.y += overflows.y.before;
+      }
+      break;
+    }
+    const axis = getAxis(placement.anchor);
+    Object.assign(contentStyles.value, {
+      '--v-overlay-anchor-origin': `${placement.anchor.side} ${placement.anchor.align}`,
+      transformOrigin: `${placement.origin.side} ${placement.origin.align}`,
+      // transform: `translate(${pixelRound(x)}px, ${pixelRound(y)}px)`,
+      top: convertToUnit(pixelRound(y)),
+      left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)),
+      right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined,
+      minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value),
+      maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
+      maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
+    });
+    return {
+      available,
+      contentBox
+    };
+  }
+  watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation());
+  nextTick(() => {
+    const result = updateLocation();
+
+    // TODO: overflowing content should only require a single updateLocation call
+    // Icky hack to make sure the content is positioned consistently
+    if (!result) return;
+    const {
+      available,
+      contentBox
+    } = result;
+    if (contentBox.height > available.y) {
+      requestAnimationFrame(() => {
+        updateLocation();
+        requestAnimationFrame(() => {
+          updateLocation();
+        });
+      });
+    }
+  });
+  return {
+    updateLocation
+  };
+}
+function pixelRound(val) {
+  return Math.round(val * devicePixelRatio) / devicePixelRatio;
+}
+function pixelCeil(val) {
+  return Math.ceil(val * devicePixelRatio) / devicePixelRatio;
+}
+
+let clean = true;
+const frames = [];
+
+/**
+ * Schedule a task to run in an animation frame on its own
+ * This is useful for heavy tasks that may cause jank if all ran together
+ */
+function requestNewFrame(cb) {
+  if (!clean || frames.length) {
+    frames.push(cb);
+    run();
+  } else {
+    clean = false;
+    cb();
+    run();
+  }
+}
+let raf = -1;
+function run() {
+  cancelAnimationFrame(raf);
+  raf = requestAnimationFrame(() => {
+    const frame = frames.shift();
+    if (frame) frame();
+    if (frames.length) run();else clean = true;
+  });
+}
+
+// Utilities
+const scrollStrategies = {
+  none: null,
+  close: closeScrollStrategy,
+  block: blockScrollStrategy,
+  reposition: repositionScrollStrategy
+};
+const makeScrollStrategyProps = propsFactory({
+  scrollStrategy: {
+    type: [String, Function],
+    default: 'block',
+    validator: val => typeof val === 'function' || val in scrollStrategies
+  }
+}, 'VOverlay-scroll-strategies');
+function useScrollStrategies(props, data) {
+  if (!IN_BROWSER) return;
+  let scope;
+  watchEffect(async () => {
+    scope?.stop();
+    if (!(data.isActive.value && props.scrollStrategy)) return;
+    scope = effectScope();
+    await new Promise(resolve => setTimeout(resolve));
+    scope.active && scope.run(() => {
+      if (typeof props.scrollStrategy === 'function') {
+        props.scrollStrategy(data, props, scope);
+      } else {
+        scrollStrategies[props.scrollStrategy]?.(data, props, scope);
+      }
+    });
+  });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+}
+function closeScrollStrategy(data) {
+  function onScroll(e) {
+    data.isActive.value = false;
+  }
+  bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll);
+}
+function blockScrollStrategy(data, props) {
+  const offsetParent = data.root.value?.offsetParent;
+  const scrollElements = [...new Set([...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
+  const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
+  if (scrollableParent) {
+    data.root.value.classList.add('v-overlay--scroll-blocked');
+  }
+  scrollElements.forEach((el, i) => {
+    el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft));
+    el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop));
+    if (el !== document.documentElement) {
+      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
+    }
+    el.classList.add('v-overlay-scroll-blocked');
+  });
+  onScopeDispose(() => {
+    scrollElements.forEach((el, i) => {
+      const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'));
+      const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'));
+      const scrollBehavior = el.style.scrollBehavior;
+      el.style.scrollBehavior = 'auto';
+      el.style.removeProperty('--v-body-scroll-x');
+      el.style.removeProperty('--v-body-scroll-y');
+      el.style.removeProperty('--v-scrollbar-offset');
+      el.classList.remove('v-overlay-scroll-blocked');
+      el.scrollLeft = -x;
+      el.scrollTop = -y;
+      el.style.scrollBehavior = scrollBehavior;
+    });
+    if (scrollableParent) {
+      data.root.value.classList.remove('v-overlay--scroll-blocked');
+    }
+  });
+}
+function repositionScrollStrategy(data, props, scope) {
+  let slow = false;
+  let raf = -1;
+  let ric = -1;
+  function update(e) {
+    requestNewFrame(() => {
+      const start = performance.now();
+      data.updateLocation.value?.(e);
+      const time = performance.now() - start;
+      slow = time / (1000 / 60) > 2;
+    });
+  }
+  ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
+    scope.run(() => {
+      bindScroll(data.targetEl.value ?? data.contentEl.value, e => {
+        if (slow) {
+          // If the position calculation is slow,
+          // defer updates until scrolling is finished.
+          // Browsers usually fire one scroll event per frame so
+          // we just wait until we've got two frames without an event
+          cancelAnimationFrame(raf);
+          raf = requestAnimationFrame(() => {
+            raf = requestAnimationFrame(() => {
+              update(e);
+            });
+          });
+        } else {
+          update(e);
+        }
+      });
+    });
+  });
+  onScopeDispose(() => {
+    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
+    cancelAnimationFrame(raf);
+  });
+}
+
+/** @private */
+function bindScroll(el, onScroll) {
+  const scrollElements = [document, ...getScrollParents(el)];
+  scrollElements.forEach(el => {
+    el.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+  });
+  onScopeDispose(() => {
+    scrollElements.forEach(el => {
+      el.removeEventListener('scroll', onScroll);
+    });
+  });
+}
+
+// Types
+
+const VMenuSymbol = Symbol.for('vuetify:v-menu');
+
+// Utilities
+// Composables
+const makeDelayProps = propsFactory({
+  closeDelay: [Number, String],
+  openDelay: [Number, String]
+}, 'delay');
+function useDelay(props, cb) {
+  let clearDelay = () => {};
+  function runDelay(isOpening) {
+    clearDelay?.();
+    const delay = Number(isOpening ? props.openDelay : props.closeDelay);
+    return new Promise(resolve => {
+      clearDelay = defer(delay, () => {
+        cb?.(isOpening);
+        resolve(isOpening);
+      });
+    });
+  }
+  function runOpenDelay() {
+    return runDelay(true);
+  }
+  function runCloseDelay() {
+    return runDelay(false);
+  }
+  return {
+    clearDelay,
+    runOpenDelay,
+    runCloseDelay
+  };
+}
+
+// Components
+const makeActivatorProps = propsFactory({
+  target: [String, Object],
+  activator: [String, Object],
+  activatorProps: {
+    type: Object,
+    default: () => ({})
+  },
+  openOnClick: {
+    type: Boolean,
+    default: undefined
+  },
+  openOnHover: Boolean,
+  openOnFocus: {
+    type: Boolean,
+    default: undefined
+  },
+  closeOnContentClick: Boolean,
+  ...makeDelayProps()
+}, 'VOverlay-activator');
+function useActivator(props, _ref) {
+  let {
+    isActive,
+    isTop,
+    contentEl
+  } = _ref;
+  const vm = getCurrentInstance('useActivator');
+  const activatorEl = ref();
+  let isHovered = false;
+  let isFocused = false;
+  let firstEnter = true;
+  const openOnFocus = computed(() => props.openOnFocus || props.openOnFocus == null && props.openOnHover);
+  const openOnClick = computed(() => props.openOnClick || props.openOnClick == null && !props.openOnHover && !openOnFocus.value);
+  const {
+    runOpenDelay,
+    runCloseDelay
+  } = useDelay(props, value => {
+    if (value === (props.openOnHover && isHovered || openOnFocus.value && isFocused) && !(props.openOnHover && isActive.value && !isTop.value)) {
+      if (isActive.value !== value) {
+        firstEnter = true;
+      }
+      isActive.value = value;
+    }
+  });
+  const cursorTarget = ref();
+  const availableEvents = {
+    onClick: e => {
+      e.stopPropagation();
+      activatorEl.value = e.currentTarget || e.target;
+      if (!isActive.value) {
+        cursorTarget.value = [e.clientX, e.clientY];
+      }
+      isActive.value = !isActive.value;
+    },
+    onMouseenter: e => {
+      if (e.sourceCapabilities?.firesTouchEvents) return;
+      isHovered = true;
+      activatorEl.value = e.currentTarget || e.target;
+      runOpenDelay();
+    },
+    onMouseleave: e => {
+      isHovered = false;
+      runCloseDelay();
+    },
+    onFocus: e => {
+      if (matchesSelector(e.target, ':focus-visible') === false) return;
+      isFocused = true;
+      e.stopPropagation();
+      activatorEl.value = e.currentTarget || e.target;
+      runOpenDelay();
+    },
+    onBlur: e => {
+      isFocused = false;
+      e.stopPropagation();
+      runCloseDelay();
+    }
+  };
+  const activatorEvents = computed(() => {
+    const events = {};
+    if (openOnClick.value) {
+      events.onClick = availableEvents.onClick;
+    }
+    if (props.openOnHover) {
+      events.onMouseenter = availableEvents.onMouseenter;
+      events.onMouseleave = availableEvents.onMouseleave;
+    }
+    if (openOnFocus.value) {
+      events.onFocus = availableEvents.onFocus;
+      events.onBlur = availableEvents.onBlur;
+    }
+    return events;
+  });
+  const contentEvents = computed(() => {
+    const events = {};
+    if (props.openOnHover) {
+      events.onMouseenter = () => {
+        isHovered = true;
+        runOpenDelay();
+      };
+      events.onMouseleave = () => {
+        isHovered = false;
+        runCloseDelay();
+      };
+    }
+    if (openOnFocus.value) {
+      events.onFocusin = () => {
+        isFocused = true;
+        runOpenDelay();
+      };
+      events.onFocusout = () => {
+        isFocused = false;
+        runCloseDelay();
+      };
+    }
+    if (props.closeOnContentClick) {
+      const menu = inject(VMenuSymbol, null);
+      events.onClick = () => {
+        isActive.value = false;
+        menu?.closeParents();
+      };
+    }
+    return events;
+  });
+  const scrimEvents = computed(() => {
+    const events = {};
+    if (props.openOnHover) {
+      events.onMouseenter = () => {
+        if (firstEnter) {
+          isHovered = true;
+          firstEnter = false;
+          runOpenDelay();
+        }
+      };
+      events.onMouseleave = () => {
+        isHovered = false;
+        runCloseDelay();
+      };
+    }
+    return events;
+  });
+  watch(isTop, val => {
+    if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered)) && !contentEl.value?.contains(document.activeElement)) {
+      isActive.value = false;
+    }
+  });
+  watch(isActive, val => {
+    if (!val) {
+      setTimeout(() => {
+        cursorTarget.value = undefined;
+      });
+    }
+  }, {
+    flush: 'post'
+  });
+  const activatorRef = templateRef();
+  watchEffect(() => {
+    if (!activatorRef.value) return;
+    nextTick(() => {
+      activatorEl.value = activatorRef.el;
+    });
+  });
+  const targetRef = templateRef();
+  const target = computed(() => {
+    if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
+    if (targetRef.value) return targetRef.el;
+    return getTarget(props.target, vm) || activatorEl.value;
+  });
+  const targetEl = computed(() => {
+    return Array.isArray(target.value) ? undefined : target.value;
+  });
+  let scope;
+  watch(() => !!props.activator, val => {
+    if (val && IN_BROWSER) {
+      scope = effectScope();
+      scope.run(() => {
+        _useActivator(props, vm, {
+          activatorEl,
+          activatorEvents
+        });
+      });
+    } else if (scope) {
+      scope.stop();
+    }
+  }, {
+    flush: 'post',
+    immediate: true
+  });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+  return {
+    activatorEl,
+    activatorRef,
+    target,
+    targetEl,
+    targetRef,
+    activatorEvents,
+    contentEvents,
+    scrimEvents
+  };
+}
+function _useActivator(props, vm, _ref2) {
+  let {
+    activatorEl,
+    activatorEvents
+  } = _ref2;
+  watch(() => props.activator, (val, oldVal) => {
+    if (oldVal && val !== oldVal) {
+      const activator = getActivator(oldVal);
+      activator && unbindActivatorProps(activator);
+    }
+    if (val) {
+      nextTick(() => bindActivatorProps());
+    }
+  }, {
+    immediate: true
+  });
+  watch(() => props.activatorProps, () => {
+    bindActivatorProps();
+  });
+  onScopeDispose(() => {
+    unbindActivatorProps();
+  });
+  function bindActivatorProps() {
+    let el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getActivator();
+    let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
+    if (!el) return;
+    bindProps(el, mergeProps(activatorEvents.value, _props));
+  }
+  function unbindActivatorProps() {
+    let el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getActivator();
+    let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
+    if (!el) return;
+    unbindProps(el, mergeProps(activatorEvents.value, _props));
+  }
+  function getActivator() {
+    let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
+    const activator = getTarget(selector, vm);
+
+    // The activator should only be a valid element (Ignore comments and text nodes)
+    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;
+    return activatorEl.value;
+  }
+}
+function getTarget(selector, vm) {
+  if (!selector) return;
+  let target;
+  if (selector === 'parent') {
+    let el = vm?.proxy?.$el?.parentNode;
+    while (el?.hasAttribute('data-no-activator')) {
+      el = el.parentNode;
+    }
+    target = el;
+  } else if (typeof selector === 'string') {
+    // Selector
+    target = document.querySelector(selector);
+  } else if ('$el' in selector) {
+    // Component (ref)
+    target = selector.$el;
+  } else {
+    // HTMLElement | Element | [x, y]
+    target = selector;
+  }
+  return target;
+}
+
+// Composables
+function useHydration() {
+  if (!IN_BROWSER) return shallowRef(false);
+  const {
+    ssr
+  } = useDisplay();
+  if (ssr) {
+    const isMounted = shallowRef(false);
+    onMounted(() => {
+      isMounted.value = true;
+    });
+    return isMounted;
+  } else {
+    return shallowRef(true);
+  }
+}
+
+// Composables
+const StackSymbol = Symbol.for('vuetify:stack');
+const globalStack = reactive([]);
+function useStack(isActive, zIndex, disableGlobalStack) {
+  const vm = getCurrentInstance('useStack');
+  const createStackEntry = !disableGlobalStack;
+  const parent = inject(StackSymbol, undefined);
+  const stack = reactive({
+    activeChildren: new Set()
+  });
+  provide(StackSymbol, stack);
+  const _zIndex = shallowRef(+zIndex.value);
+  useToggleScope(isActive, () => {
+    const lastZIndex = globalStack.at(-1)?.[1];
+    _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
+    if (createStackEntry) {
+      globalStack.push([vm.uid, _zIndex.value]);
+    }
+    parent?.activeChildren.add(vm.uid);
+    onScopeDispose(() => {
+      if (createStackEntry) {
+        const idx = toRaw(globalStack).findIndex(v => v[0] === vm.uid);
+        globalStack.splice(idx, 1);
+      }
+      parent?.activeChildren.delete(vm.uid);
+    });
+  });
+  const globalTop = shallowRef(true);
+  if (createStackEntry) {
+    watchEffect(() => {
+      const _isTop = globalStack.at(-1)?.[0] === vm.uid;
+      setTimeout(() => globalTop.value = _isTop);
+    });
+  }
+  const localTop = computed(() => !stack.activeChildren.size);
+  return {
+    globalTop: readonly(globalTop),
+    localTop,
+    stackStyles: computed(() => ({
+      zIndex: _zIndex.value
+    }))
+  };
+}
+
+// Utilities
+function useTeleport(target) {
+  const teleportTarget = computed(() => {
+    const _target = target();
+    if (_target === true || !IN_BROWSER) return undefined;
+    const targetElement = _target === false ? document.body : typeof _target === 'string' ? document.querySelector(_target) : _target;
+    if (targetElement == null) {
+      warn(`Unable to locate target ${_target}`);
+      return undefined;
+    }
+    let container = [...targetElement.children].find(el => el.matches('.v-overlay-container'));
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'v-overlay-container';
+      targetElement.appendChild(container);
+    }
+    return container;
+  });
+  return {
+    teleportTarget
+  };
+}
+
+function Scrim(props) {
+  const {
+    modelValue,
+    color,
+    ...rest
+  } = props;
+  return createVNode(Transition, {
+    "name": "fade-transition",
+    "appear": true
+  }, {
+    default: () => [props.modelValue && createVNode("div", mergeProps({
+      "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
+      "style": props.color.backgroundColorStyles.value
+    }, rest), null)]
+  });
+}
+const makeVOverlayProps = propsFactory({
+  absolute: Boolean,
+  attach: [Boolean, String, Object],
+  closeOnBack: {
+    type: Boolean,
+    default: true
+  },
+  contained: Boolean,
+  contentClass: null,
+  contentProps: null,
+  disabled: Boolean,
+  opacity: [Number, String],
+  noClickAnimation: Boolean,
+  modelValue: Boolean,
+  persistent: Boolean,
+  scrim: {
+    type: [Boolean, String],
+    default: true
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 2000
+  },
+  ...makeActivatorProps(),
+  ...makeComponentProps(),
+  ...makeDimensionProps(),
+  ...makeLazyProps(),
+  ...makeLocationStrategyProps(),
+  ...makeScrollStrategyProps(),
+  ...makeThemeProps(),
+  ...makeTransitionProps()
+}, 'VOverlay');
+const VOverlay = genericComponent()({
+  name: 'VOverlay',
+  directives: {
+    ClickOutside
+  },
+  inheritAttrs: false,
+  props: {
+    _disableGlobalStack: Boolean,
+    ...makeVOverlayProps()
+  },
+  emits: {
+    'click:outside': e => true,
+    'update:modelValue': value => true,
+    afterEnter: () => true,
+    afterLeave: () => true
+  },
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      emit
+    } = _ref;
+    const vm = getCurrentInstance('VOverlay');
+    const root = ref();
+    const scrimEl = ref();
+    const contentEl = ref();
+    const model = useProxiedModel(props, 'modelValue');
+    const isActive = computed({
+      get: () => model.value,
+      set: v => {
+        if (!(v && props.disabled)) model.value = v;
+      }
+    });
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      rtlClasses,
+      isRtl
+    } = useRtl();
+    const {
+      hasContent,
+      onAfterLeave: _onAfterLeave
+    } = useLazy(props, isActive);
+    const scrimColor = useBackgroundColor(computed(() => {
+      return typeof props.scrim === 'string' ? props.scrim : null;
+    }));
+    const {
+      globalTop,
+      localTop,
+      stackStyles
+    } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack);
+    const {
+      activatorEl,
+      activatorRef,
+      target,
+      targetEl,
+      targetRef,
+      activatorEvents,
+      contentEvents,
+      scrimEvents
+    } = useActivator(props, {
+      isActive,
+      isTop: localTop,
+      contentEl
+    });
+    const {
+      teleportTarget
+    } = useTeleport(() => {
+      const target = props.attach || props.contained;
+      if (target) return target;
+      const rootNode = activatorEl?.value?.getRootNode() || vm.proxy?.$el?.getRootNode();
+      if (rootNode instanceof ShadowRoot) return rootNode;
+      return false;
+    });
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const isMounted = useHydration();
+    const {
+      scopeId
+    } = useScopeId();
+    watch(() => props.disabled, v => {
+      if (v) isActive.value = false;
+    });
+    const {
+      contentStyles,
+      updateLocation
+    } = useLocationStrategies(props, {
+      isRtl,
+      contentEl,
+      target,
+      isActive
+    });
+    useScrollStrategies(props, {
+      root,
+      contentEl,
+      targetEl,
+      isActive,
+      updateLocation
+    });
+    function onClickOutside(e) {
+      emit('click:outside', e);
+      if (!props.persistent) isActive.value = false;else animateClick();
+    }
+    function closeConditional(e) {
+      return isActive.value && globalTop.value && (
+      // If using scrim, only close if clicking on it rather than anything opened on top
+      !props.scrim || e.target === scrimEl.value || e instanceof MouseEvent && e.shadowTarget === scrimEl.value);
+    }
+    IN_BROWSER && watch(isActive, val => {
+      if (val) {
+        window.addEventListener('keydown', onKeydown);
+      } else {
+        window.removeEventListener('keydown', onKeydown);
+      }
+    }, {
+      immediate: true
+    });
+    onBeforeUnmount(() => {
+      if (!IN_BROWSER) return;
+      window.removeEventListener('keydown', onKeydown);
+    });
+    function onKeydown(e) {
+      if (e.key === 'Escape' && globalTop.value) {
+        if (!props.persistent) {
+          isActive.value = false;
+          if (contentEl.value?.contains(document.activeElement)) {
+            activatorEl.value?.focus();
+          }
+        } else animateClick();
+      }
+    }
+    const router = useRouter();
+    useToggleScope(() => props.closeOnBack, () => {
+      useBackButton(router, next => {
+        if (globalTop.value && isActive.value) {
+          next(false);
+          if (!props.persistent) isActive.value = false;else animateClick();
+        } else {
+          next();
+        }
+      });
+    });
+    const top = ref();
+    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {
+      if (val) {
+        const scrollParent = getScrollParent(root.value);
+        if (scrollParent && scrollParent !== document.scrollingElement) {
+          top.value = scrollParent.scrollTop;
+        }
+      }
+    });
+
+    // Add a quick "bounce" animation to the content
+    function animateClick() {
+      if (props.noClickAnimation) return;
+      contentEl.value && animate(contentEl.value, [{
+        transformOrigin: 'center'
+      }, {
+        transform: 'scale(1.03)'
+      }, {
+        transformOrigin: 'center'
+      }], {
+        duration: 150,
+        easing: standardEasing
+      });
+    }
+    function onAfterEnter() {
+      emit('afterEnter');
+    }
+    function onAfterLeave() {
+      _onAfterLeave();
+      emit('afterLeave');
+    }
+    useRender(() => createVNode(Fragment, null, [slots.activator?.({
+      isActive: isActive.value,
+      targetRef,
+      props: mergeProps({
+        ref: activatorRef
+      }, activatorEvents.value, props.activatorProps)
+    }), isMounted.value && hasContent.value && createVNode(Teleport, {
+      "disabled": !teleportTarget.value,
+      "to": teleportTarget.value
+    }, {
+      default: () => [createVNode("div", mergeProps({
+        "class": ['v-overlay', {
+          'v-overlay--absolute': props.absolute || props.contained,
+          'v-overlay--active': isActive.value,
+          'v-overlay--contained': props.contained
+        }, themeClasses.value, rtlClasses.value, props.class],
+        "style": [stackStyles.value, {
+          '--v-overlay-opacity': props.opacity,
+          top: convertToUnit(top.value)
+        }, props.style],
+        "ref": root
+      }, scopeId, attrs), [createVNode(Scrim, mergeProps({
+        "color": scrimColor,
+        "modelValue": isActive.value && !!props.scrim,
+        "ref": scrimEl
+      }, scrimEvents.value), null), createVNode(MaybeTransition, {
+        "appear": true,
+        "persisted": true,
+        "transition": props.transition,
+        "target": target.value,
+        "onAfterEnter": onAfterEnter,
+        "onAfterLeave": onAfterLeave
+      }, {
+        default: () => [withDirectives(createVNode("div", mergeProps({
+          "ref": contentEl,
+          "class": ['v-overlay__content', props.contentClass],
+          "style": [dimensionStyles.value, contentStyles.value]
+        }, contentEvents.value, props.contentProps), [slots.default?.({
+          isActive
+        })]), [[vShow, isActive.value], [resolveDirective("click-outside"), {
+          handler: onClickOutside,
+          closeConditional,
+          include: () => [activatorEl.value]
+        }]])]
+      })])]
+    })]));
+    return {
+      activatorEl,
+      scrimEl,
+      target,
+      animateClick,
+      contentEl,
+      globalTop,
+      localTop,
+      updateLocation
+    };
+  }
+});
+
+export { VOverlay as V, makeVOverlayProps as m };