@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

package/lib/components/VOverlay/locationStrategies.mjs

@@ -0,0 +1,206 @@
+// Utilities
+import { computed, effectScope, nextTick, onScopeDispose, ref, watch, watchEffect } from 'vue';
+import { convertToUnit, getScrollParent, IN_BROWSER, isFixedPosition, nullifyTransforms, oppositeAnchor, parseAnchor, physicalAnchor, propsFactory } from "../../util/index.mjs";
+import { Box } from "../../util/box.mjs";
+import { anchorToPoint, getOffset } from "./util/point.mjs"; // Types
+
+const locationStrategies = {
+  static: staticLocationStrategy,
+  // specific viewport position, usually centered
+  connected: connectedLocationStrategy // connected to a certain element
+
+};
+export 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]
+});
+export function useLocationStrategies(props, data) {
+  const contentStyles = ref({});
+  const updateLocation = ref();
+  let scope;
+  watchEffect(async () => {
+    var _scope;
+
+    (_scope = scope) == null ? void 0 : _scope.stop();
+    updateLocation.value = undefined;
+    if (!(IN_BROWSER && data.isActive.value && props.locationStrategy)) return;
+    scope = effectScope();
+    await nextTick();
+    scope.run(() => {
+      if (typeof props.locationStrategy === 'function') {
+        var _props$locationStrate;
+
+        updateLocation.value = (_props$locationStrate = props.locationStrategy(data, props, contentStyles)) == null ? void 0 : _props$locationStrate.updateLocation;
+      } else {
+        var _locationStrategies$p;
+
+        updateLocation.value = (_locationStrategies$p = locationStrategies[props.locationStrategy](data, props, contentStyles)) == null ? void 0 : _locationStrategies$p.updateLocation;
+      }
+    });
+  });
+  IN_BROWSER && window.addEventListener('resize', onResize, {
+    passive: true
+  });
+  onScopeDispose(() => {
+    var _scope2;
+
+    IN_BROWSER && window.removeEventListener('resize', onResize);
+    updateLocation.value = undefined;
+    (_scope2 = scope) == null ? void 0 : _scope2.stop();
+  });
+
+  function onResize(e) {
+    var _updateLocation$value;
+
+    (_updateLocation$value = updateLocation.value) == null ? void 0 : _updateLocation$value.call(updateLocation, e);
+  }
+
+  return {
+    contentStyles,
+    updateLocation
+  };
+}
+
+function staticLocationStrategy() {// TODO
+}
+
+function connectedLocationStrategy(data, props, contentStyles) {
+  const activatorFixed = isFixedPosition(data.activatorEl.value);
+
+  if (activatorFixed) {
+    Object.assign(contentStyles.value, {
+      position: 'fixed'
+    });
+  }
+
+  const preferredAnchor = computed(() => parseAnchor(props.location));
+  const preferredOrigin = computed(() => props.origin === 'overlap' ? preferredAnchor.value : props.origin === 'auto' ? oppositeAnchor(preferredAnchor.value) : parseAnchor(props.origin));
+  const doesOverlap = computed(() => {
+    return preferredAnchor.value.side === preferredOrigin.value.side;
+  });
+  const configuredMaxHeight = computed(() => {
+    const val = parseFloat(props.maxHeight);
+    return isNaN(val) ? Infinity : val;
+  });
+  const configuredMinWidth = computed(() => {
+    const val = parseFloat(props.minWidth);
+    return isNaN(val) ? Infinity : val;
+  });
+  let observe = false;
+
+  if (IN_BROWSER) {
+    const observer = new ResizeObserver(() => {
+      if (observe) updateLocation();
+    });
+    observer.observe(data.activatorEl.value);
+    observer.observe(data.contentEl.value);
+    onScopeDispose(() => {
+      observer.disconnect();
+    });
+  } // eslint-disable-next-line max-statements
+
+
+  function updateLocation() {
+    var _props$maxWidth;
+
+    observe = false;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => observe = true);
+    });
+    const targetBox = data.activatorEl.value.getBoundingClientRect(); // TODO: offset shouldn't affect width
+
+    if (props.offset) {
+      targetBox.x -= +props.offset;
+      targetBox.y -= +props.offset;
+      targetBox.width += +props.offset * 2;
+      targetBox.height += +props.offset * 2;
+    }
+
+    const scrollParent = getScrollParent(data.contentEl.value);
+    const viewportWidth = scrollParent.clientWidth;
+    const viewportHeight = Math.min(scrollParent.clientHeight, window.innerHeight);
+    let contentBox;
+    {
+      const scrollables = new Map();
+      data.contentEl.value.querySelectorAll('*').forEach(el => {
+        const x = el.scrollLeft;
+        const y = el.scrollTop;
+
+        if (x || y) {
+          scrollables.set(el, [x, y]);
+        }
+      });
+      const initialMaxWidth = data.contentEl.value.style.maxWidth;
+      const initialMaxHeight = data.contentEl.value.style.maxHeight;
+      data.contentEl.value.style.removeProperty('max-width');
+      data.contentEl.value.style.removeProperty('max-height');
+      contentBox = nullifyTransforms(data.contentEl.value);
+      contentBox.x -= parseFloat(data.contentEl.value.style.left) || 0;
+      contentBox.y -= parseFloat(data.contentEl.value.style.top) || 0;
+      data.contentEl.value.style.maxWidth = initialMaxWidth;
+      data.contentEl.value.style.maxHeight = initialMaxHeight;
+      scrollables.forEach((position, el) => {
+        el.scrollTo(...position);
+      });
+    }
+    const contentHeight = Math.min(configuredMaxHeight.value, contentBox.height); // Regard undefined maxWidth as maximally occupying whole remaining space by default
+
+    const maxFreeSpaceWidth = props.maxWidth === undefined ? Number.MAX_VALUE : parseInt((_props$maxWidth = props.maxWidth) != null ? _props$maxWidth : 0, 10);
+    const viewportMargin = 12;
+    const freeSpace = {
+      top: targetBox.top - viewportMargin,
+      bottom: viewportHeight - targetBox.bottom - viewportMargin,
+      left: Math.min(targetBox.left - viewportMargin, maxFreeSpaceWidth),
+      right: Math.min(viewportWidth - targetBox.right - viewportMargin, maxFreeSpaceWidth)
+    };
+    const fitsY = preferredAnchor.value.side === 'bottom' && contentHeight <= freeSpace.bottom || preferredAnchor.value.side === 'top' && contentHeight <= freeSpace.top;
+    const anchor = fitsY ? preferredAnchor.value : preferredAnchor.value.side === 'bottom' && freeSpace.top > freeSpace.bottom || preferredAnchor.value.side === 'top' && freeSpace.bottom > freeSpace.top ? oppositeAnchor(preferredAnchor.value) : preferredAnchor.value;
+    const origin = fitsY ? preferredOrigin.value : oppositeAnchor(anchor);
+    const canFill = doesOverlap.value || ['center', 'top', 'bottom'].includes(anchor.side);
+    const maxWidth = canFill ? Math.min(viewportWidth, Math.max(targetBox.width, viewportWidth - viewportMargin * 2)) : anchor.side === 'end' ? freeSpace.right : anchor.side === 'start' ? freeSpace.left : null;
+    const minWidth = Math.min(configuredMinWidth.value, maxWidth, targetBox.width);
+    const maxHeight = fitsY ? configuredMaxHeight.value : Math.min(configuredMaxHeight.value, Math.floor(anchor.side === 'top' ? freeSpace.top : freeSpace.bottom));
+    const targetPoint = anchorToPoint(anchor, targetBox);
+    const contentPoint = anchorToPoint(origin, new Box({ ...contentBox,
+      height: Math.min(contentHeight, maxHeight)
+    }));
+    const {
+      x,
+      y
+    } = getOffset(targetPoint, contentPoint);
+    Object.assign(contentStyles.value, {
+      '--v-overlay-anchor-origin': physicalAnchor(anchor, data.activatorEl.value),
+      top: convertToUnit(Math.round(y)),
+      left: convertToUnit(Math.round(x)),
+      // TODO: right for origin="end", rtl
+      transformOrigin: physicalAnchor(origin, data.activatorEl.value),
+      minWidth: convertToUnit(minWidth),
+      maxWidth: convertToUnit(maxWidth),
+      maxHeight: convertToUnit(maxHeight)
+    });
+  }
+
+  watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset], () => updateLocation(), {
+    immediate: !activatorFixed
+  });
+  if (activatorFixed) nextTick(() => updateLocation());
+  requestAnimationFrame(() => {
+    if (contentStyles.value.maxHeight) updateLocation();
+  });
+  return {
+    updateLocation
+  };
+}
+//# sourceMappingURL=locationStrategies.mjs.map

package/lib/components/VOverlay/locationStrategies.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"locationStrategies.mjs","names":["computed","effectScope","nextTick","onScopeDispose","ref","watch","watchEffect","convertToUnit","getScrollParent","IN_BROWSER","isFixedPosition","nullifyTransforms","oppositeAnchor","parseAnchor","physicalAnchor","propsFactory","Box","anchorToPoint","getOffset","locationStrategies","static","staticLocationStrategy","connected","connectedLocationStrategy","makeLocationStrategyProps","locationStrategy","type","String","Function","default","validator","val","location","origin","offset","Number","useLocationStrategies","props","data","contentStyles","updateLocation","scope","stop","value","undefined","isActive","run","window","addEventListener","onResize","passive","removeEventListener","e","activatorFixed","activatorEl","Object","assign","position","preferredAnchor","preferredOrigin","doesOverlap","side","configuredMaxHeight","parseFloat","maxHeight","isNaN","Infinity","configuredMinWidth","minWidth","observe","observer","ResizeObserver","contentEl","disconnect","requestAnimationFrame","targetBox","getBoundingClientRect","x","y","width","height","scrollParent","viewportWidth","clientWidth","viewportHeight","Math","min","clientHeight","innerHeight","contentBox","scrollables","Map","querySelectorAll","forEach","el","scrollLeft","scrollTop","set","initialMaxWidth","style","maxWidth","initialMaxHeight","removeProperty","left","top","scrollTo","contentHeight","maxFreeSpaceWidth","MAX_VALUE","parseInt","viewportMargin","freeSpace","bottom","right","fitsY","anchor","canFill","includes","max","floor","targetPoint","contentPoint","round","transformOrigin","immediate"],"sources":["../../../src/components/VOverlay/locationStrategies.ts"],"sourcesContent":["// Utilities\nimport { computed, effectScope, nextTick, onScopeDispose, ref, watch, watchEffect } from 'vue'\nimport {\n  convertToUnit,\n  getScrollParent,\n  IN_BROWSER,\n  isFixedPosition,\n  nullifyTransforms,\n  oppositeAnchor,\n  parseAnchor,\n  physicalAnchor,\n  propsFactory,\n} from '@/util'\nimport { Box } from '@/util/box'\nimport { anchorToPoint, getOffset } from './util/point'\n\n// Types\nimport type { EffectScope, PropType, Ref } from 'vue'\nimport type { Anchor } from '@/util'\n\nexport interface LocationStrategyData {\n  contentEl: Ref<HTMLElement | undefined>\n  activatorEl: Ref<HTMLElement | undefined>\n  isActive: Ref<boolean>\n}\n\nconst locationStrategies = {\n  static: staticLocationStrategy, // specific viewport position, usually centered\n  connected: connectedLocationStrategy, // connected to a certain element\n}\n\nexport interface StrategyProps {\n  locationStrategy: keyof typeof locationStrategies | (\n    (\n      data: LocationStrategyData,\n      props: StrategyProps,\n      contentStyles: Ref<Record<string, string>>\n    ) => undefined | { updateLocation: (e: Event) => void }\n  )\n  location: Anchor\n  origin: Anchor | 'auto' | 'overlap'\n  offset?: number | string\n  maxHeight?: number | string\n  maxWidth?: number | string\n  minHeight?: number | string\n  minWidth?: number | string\n}\n\nexport const makeLocationStrategyProps = propsFactory({\n  locationStrategy: {\n    type: [String, Function] as PropType<StrategyProps['locationStrategy']>,\n    default: 'static',\n    validator: (val: any) => typeof val === 'function' || val in locationStrategies,\n  },\n  location: {\n    type: String as PropType<StrategyProps['location']>,\n    default: 'bottom',\n  },\n  origin: {\n    type: String as PropType<StrategyProps['origin']>,\n    default: 'auto',\n  },\n  offset: [Number, String],\n})\n\nexport function useLocationStrategies (\n  props: StrategyProps,\n  data: LocationStrategyData\n) {\n  const contentStyles = ref({})\n  const updateLocation = ref<(e: Event) => void>()\n\n  let scope: EffectScope | undefined\n  watchEffect(async () => {\n    scope?.stop()\n    updateLocation.value = undefined\n\n    if (!(IN_BROWSER && data.isActive.value && props.locationStrategy)) return\n\n    scope = effectScope()\n    await nextTick()\n    scope.run(() => {\n      if (typeof props.locationStrategy === 'function') {\n        updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation\n      } else {\n        updateLocation.value = locationStrategies[props.locationStrategy](data, props, contentStyles)?.updateLocation\n      }\n    })\n  })\n\n  IN_BROWSER && window.addEventListener('resize', onResize, { passive: true })\n\n  onScopeDispose(() => {\n    IN_BROWSER && window.removeEventListener('resize', onResize)\n    updateLocation.value = undefined\n    scope?.stop()\n  })\n\n  function onResize (e: Event) {\n    updateLocation.value?.(e)\n  }\n\n  return {\n    contentStyles,\n    updateLocation,\n  }\n}\n\nfunction staticLocationStrategy () {\n  // TODO\n}\n\nfunction connectedLocationStrategy (data: LocationStrategyData, props: StrategyProps, contentStyles: Ref<Record<string, string>>) {\n  const activatorFixed = isFixedPosition(data.activatorEl.value)\n  if (activatorFixed) {\n    Object.assign(contentStyles.value, {\n      position: 'fixed',\n    })\n  }\n\n  const preferredAnchor = computed(() => parseAnchor(props.location))\n  const preferredOrigin = computed(() =>\n    props.origin === 'overlap' ? preferredAnchor.value\n    : props.origin === 'auto' ? oppositeAnchor(preferredAnchor.value)\n    : parseAnchor(props.origin)\n  )\n  const doesOverlap = computed(() => {\n    return preferredAnchor.value.side === preferredOrigin.value.side\n  })\n\n  const configuredMaxHeight = computed(() => {\n    const val = parseFloat(props.maxHeight!)\n    return isNaN(val) ? Infinity : val\n  })\n\n  const configuredMinWidth = computed(() => {\n    const val = parseFloat(props.minWidth!)\n    return isNaN(val) ? Infinity : val\n  })\n\n  let observe = false\n  if (IN_BROWSER) {\n    const observer = new ResizeObserver(() => {\n      if (observe) updateLocation()\n    })\n    observer.observe(data.activatorEl.value!)\n    observer.observe(data.contentEl.value!)\n\n    onScopeDispose(() => {\n      observer.disconnect()\n    })\n  }\n\n  // eslint-disable-next-line max-statements\n  function updateLocation () {\n    observe = false\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => observe = true)\n    })\n\n    const targetBox = data.activatorEl.value!.getBoundingClientRect()\n    // TODO: offset shouldn't affect width\n    if (props.offset) {\n      targetBox.x -= +props.offset\n      targetBox.y -= +props.offset\n      targetBox.width += +props.offset * 2\n      targetBox.height += +props.offset * 2\n    }\n\n    const scrollParent = getScrollParent(data.contentEl.value)\n    const viewportWidth = scrollParent.clientWidth\n    const viewportHeight = Math.min(scrollParent.clientHeight, window.innerHeight)\n\n    let contentBox\n    {\n      const scrollables = new Map<Element, [number, number]>()\n      data.contentEl.value!.querySelectorAll('*').forEach(el => {\n        const x = el.scrollLeft\n        const y = el.scrollTop\n        if (x || y) {\n          scrollables.set(el, [x, y])\n        }\n      })\n\n      const initialMaxWidth = data.contentEl.value!.style.maxWidth\n      const initialMaxHeight = data.contentEl.value!.style.maxHeight\n      data.contentEl.value!.style.removeProperty('max-width')\n      data.contentEl.value!.style.removeProperty('max-height')\n\n      contentBox = nullifyTransforms(data.contentEl.value!)\n      contentBox.x -= parseFloat(data.contentEl.value!.style.left) || 0\n      contentBox.y -= parseFloat(data.contentEl.value!.style.top) || 0\n\n      data.contentEl.value!.style.maxWidth = initialMaxWidth\n      data.contentEl.value!.style.maxHeight = initialMaxHeight\n      scrollables.forEach((position, el) => {\n        el.scrollTo(...position)\n      })\n    }\n\n    const contentHeight = Math.min(configuredMaxHeight.value, contentBox.height)\n\n    // Regard undefined maxWidth as maximally occupying whole remaining space by default\n    const maxFreeSpaceWidth = props.maxWidth === undefined ? Number.MAX_VALUE : parseInt(props.maxWidth ?? 0, 10)\n\n    const viewportMargin = 12\n    const freeSpace = {\n      top: targetBox.top - viewportMargin,\n      bottom: viewportHeight - targetBox.bottom - viewportMargin,\n      left: Math.min(targetBox.left - viewportMargin, maxFreeSpaceWidth),\n      right: Math.min(viewportWidth - targetBox.right - viewportMargin, maxFreeSpaceWidth),\n    }\n\n    const fitsY = (preferredAnchor.value.side === 'bottom' && contentHeight <= freeSpace.bottom) ||\n      (preferredAnchor.value.side === 'top' && contentHeight <= freeSpace.top)\n\n    const anchor = fitsY ? preferredAnchor.value\n      : (preferredAnchor.value.side === 'bottom' && freeSpace.top > freeSpace.bottom) ||\n      (preferredAnchor.value.side === 'top' && freeSpace.bottom > freeSpace.top) ? oppositeAnchor(preferredAnchor.value)\n      : preferredAnchor.value\n    const origin = fitsY ? preferredOrigin.value : oppositeAnchor(anchor)\n\n    const canFill = doesOverlap.value || ['center', 'top', 'bottom'].includes(anchor.side)\n\n    const maxWidth = canFill ? Math.min(viewportWidth, Math.max(targetBox.width, viewportWidth - viewportMargin * 2))\n      : anchor.side === 'end' ? freeSpace.right\n      : anchor.side === 'start' ? freeSpace.left\n      : null\n    const minWidth = Math.min(configuredMinWidth.value, maxWidth!, targetBox.width)\n    const maxHeight = fitsY ? configuredMaxHeight.value : Math.min(\n      configuredMaxHeight.value,\n      Math.floor(anchor.side === 'top' ? freeSpace.top : freeSpace.bottom)\n    )\n\n    const targetPoint = anchorToPoint(anchor, targetBox)\n    const contentPoint = anchorToPoint(origin, new Box({\n      ...contentBox,\n      height: Math.min(contentHeight, maxHeight),\n    }))\n\n    const { x, y } = getOffset(targetPoint, contentPoint)\n\n    Object.assign(contentStyles.value, {\n      '--v-overlay-anchor-origin': physicalAnchor(anchor, data.activatorEl.value!),\n      top: convertToUnit(Math.round(y)),\n      left: convertToUnit(Math.round(x)), // TODO: right for origin=\"end\", rtl\n      transformOrigin: physicalAnchor(origin, data.activatorEl.value!),\n      minWidth: convertToUnit(minWidth),\n      maxWidth: convertToUnit(maxWidth),\n      maxHeight: convertToUnit(maxHeight),\n    })\n  }\n\n  watch(\n    () => [preferredAnchor.value, preferredOrigin.value, props.offset],\n    () => updateLocation(),\n    { immediate: !activatorFixed }\n  )\n\n  if (activatorFixed) nextTick(() => updateLocation())\n  requestAnimationFrame(() => {\n    if (contentStyles.value.maxHeight) updateLocation()\n  })\n\n  return { updateLocation }\n}\n"],"mappings":"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"}

package/lib/components/VOverlay/requestNewFrame.mjs

@@ -0,0 +1,28 @@
+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
+ */
+
+export 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;
+  });
+}
+//# sourceMappingURL=requestNewFrame.mjs.map

package/lib/components/VOverlay/requestNewFrame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"requestNewFrame.mjs","names":["clean","frames","requestNewFrame","cb","length","push","run","raf","cancelAnimationFrame","requestAnimationFrame","frame","shift"],"sources":["../../../src/components/VOverlay/requestNewFrame.ts"],"sourcesContent":["let clean = true\nconst frames = [] as any[]\n\n/**\n * Schedule a task to run in an animation frame on its own\n * This is useful for heavy tasks that may cause jank if all ran together\n */\nexport function requestNewFrame (cb: () => void) {\n  if (!clean || frames.length) {\n    frames.push(cb)\n    run()\n  } else {\n    clean = false\n    cb()\n    run()\n  }\n}\n\nlet raf = -1\nfunction run () {\n  cancelAnimationFrame(raf)\n  raf = requestAnimationFrame(() => {\n    const frame = frames.shift()\n    if (frame) frame()\n\n    if (frames.length) run()\n    else clean = true\n  })\n}\n"],"mappings":"AAAA,IAAIA,KAAK,GAAG,IAAZ;AACA,MAAMC,MAAM,GAAG,EAAf;AAEA;AACA;AACA;AACA;;AACA,OAAO,SAASC,eAAT,CAA0BC,EAA1B,EAA0C;EAC/C,IAAI,CAACH,KAAD,IAAUC,MAAM,CAACG,MAArB,EAA6B;IAC3BH,MAAM,CAACI,IAAP,CAAYF,EAAZ;IACAG,GAAG;EACJ,CAHD,MAGO;IACLN,KAAK,GAAG,KAAR;IACAG,EAAE;IACFG,GAAG;EACJ;AACF;AAED,IAAIC,GAAG,GAAG,CAAC,CAAX;;AACA,SAASD,GAAT,GAAgB;EACdE,oBAAoB,CAACD,GAAD,CAApB;EACAA,GAAG,GAAGE,qBAAqB,CAAC,MAAM;IAChC,MAAMC,KAAK,GAAGT,MAAM,CAACU,KAAP,EAAd;IACA,IAAID,KAAJ,EAAWA,KAAK;IAEhB,IAAIT,MAAM,CAACG,MAAX,EAAmBE,GAAG,GAAtB,KACKN,KAAK,GAAG,IAAR;EACN,CAN0B,CAA3B;AAOD"}

package/lib/components/VOverlay/scrollStrategies.mjs

@@ -0,0 +1,137 @@
+// Utilities
+import { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from "../../util/index.mjs";
+import { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';
+import { requestNewFrame } from "./requestNewFrame.mjs"; // Types
+
+const scrollStrategies = {
+  none: null,
+  close: closeScrollStrategy,
+  block: blockScrollStrategy,
+  reposition: repositionScrollStrategy
+};
+export const makeScrollStrategyProps = propsFactory({
+  scrollStrategy: {
+    type: [String, Function],
+    default: 'block',
+    validator: val => typeof val === 'function' || val in scrollStrategies
+  }
+});
+export function useScrollStrategies(props, data) {
+  if (!IN_BROWSER) return;
+  let scope;
+  watchEffect(async () => {
+    var _scope;
+
+    (_scope = scope) == null ? void 0 : _scope.stop();
+    if (!(data.isActive.value && props.scrollStrategy)) return;
+    scope = effectScope();
+    await nextTick();
+    scope.run(() => {
+      if (typeof props.scrollStrategy === 'function') {
+        props.scrollStrategy(data);
+      } else {
+        var _scrollStrategies$pro;
+
+        (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data);
+      }
+    });
+  });
+}
+
+function closeScrollStrategy(data) {
+  var _data$activatorEl$val;
+
+  function onScroll(e) {
+    data.isActive.value = false;
+  }
+
+  bindScroll((_data$activatorEl$val = data.activatorEl.value) != null ? _data$activatorEl$val : data.contentEl.value, onScroll);
+}
+
+function blockScrollStrategy(data) {
+  var _data$root$value;
+
+  const scrollElements = [...new Set([...getScrollParents(data.activatorEl.value), ...getScrollParents(data.contentEl.value)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
+
+  const scrollableParent = (el => hasScrollbar(el) && el)(((_data$root$value = data.root.value) == null ? void 0 : _data$root$value.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));
+    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'));
+      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;
+    });
+
+    if (scrollableParent) {
+      data.root.value.classList.remove('v-overlay--scroll-blocked');
+    }
+  });
+}
+
+function repositionScrollStrategy(data) {
+  var _data$activatorEl$val2;
+
+  let slow = false;
+  let raf = -1;
+
+  function update(e) {
+    requestNewFrame(() => {
+      var _data$updateLocation$, _data$updateLocation;
+
+      const start = performance.now();
+      (_data$updateLocation$ = (_data$updateLocation = data.updateLocation).value) == null ? void 0 : _data$updateLocation$.call(_data$updateLocation, e);
+      const time = performance.now() - start;
+      slow = time / (1000 / 60) > 2;
+    });
+  }
+
+  bindScroll((_data$activatorEl$val2 = data.activatorEl.value) != null ? _data$activatorEl$val2 : 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);
+    }
+  });
+}
+/** @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);
+    });
+  });
+}
+//# sourceMappingURL=scrollStrategies.mjs.map

package/lib/components/VOverlay/scrollStrategies.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollStrategies.mjs","names":["convertToUnit","getScrollParents","hasScrollbar","IN_BROWSER","propsFactory","effectScope","nextTick","onScopeDispose","watchEffect","requestNewFrame","scrollStrategies","none","close","closeScrollStrategy","block","blockScrollStrategy","reposition","repositionScrollStrategy","makeScrollStrategyProps","scrollStrategy","type","String","Function","default","validator","val","useScrollStrategies","props","data","scope","stop","isActive","value","run","onScroll","e","bindScroll","activatorEl","contentEl","scrollElements","Set","filter","el","classList","contains","scrollbarWidth","window","innerWidth","document","documentElement","offsetWidth","scrollableParent","root","offsetParent","add","forEach","i","style","setProperty","scrollLeft","scrollTop","x","parseFloat","getPropertyValue","y","removeProperty","remove","slow","raf","update","start","performance","now","updateLocation","time","cancelAnimationFrame","requestAnimationFrame","addEventListener","passive","removeEventListener"],"sources":["../../../src/components/VOverlay/scrollStrategies.ts"],"sourcesContent":["// Utilities\nimport { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from '@/util'\nimport { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue'\nimport { requestNewFrame } from './requestNewFrame'\n\n// Types\nimport type { EffectScope, PropType, Ref } from 'vue'\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>\n  contentEl: Ref<HTMLElement | undefined>\n  activatorEl: Ref<HTMLElement | undefined>\n  isActive: Ref<boolean>\n  updateLocation: Ref<((e: Event) => void) | undefined>\n}\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy,\n}\n\ninterface StrategyProps {\n  scrollStrategy: keyof typeof scrollStrategies | ((data: ScrollStrategyData) => void)\n}\n\nexport const makeScrollStrategyProps = propsFactory({\n  scrollStrategy: {\n    type: [String, Function] as PropType<StrategyProps['scrollStrategy']>,\n    default: 'block',\n    validator: (val: any) => typeof val === 'function' || val in scrollStrategies,\n  },\n})\n\nexport function useScrollStrategies (\n  props: StrategyProps,\n  data: ScrollStrategyData\n) {\n  if (!IN_BROWSER) return\n\n  let scope: EffectScope | undefined\n  watchEffect(async () => {\n    scope?.stop()\n\n    if (!(data.isActive.value && props.scrollStrategy)) return\n\n    scope = effectScope()\n    await nextTick()\n    scope.run(() => {\n      if (typeof props.scrollStrategy === 'function') {\n        props.scrollStrategy(data)\n      } else {\n        scrollStrategies[props.scrollStrategy]?.(data)\n      }\n    })\n  })\n}\n\nfunction closeScrollStrategy (data: ScrollStrategyData) {\n  function onScroll (e: Event) {\n    data.isActive.value = false\n  }\n\n  bindScroll(data.activatorEl.value ?? data.contentEl.value, onScroll)\n}\n\nfunction blockScrollStrategy (data: ScrollStrategyData) {\n  const scrollElements = [...new Set([\n    ...getScrollParents(data.activatorEl.value),\n    ...getScrollParents(data.contentEl.value),\n  ])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'))\n  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth\n\n  const scrollableParent = (el => hasScrollbar(el) && el)(data.root.value?.offsetParent || document.documentElement)\n  if (scrollableParent) {\n    data.root.value!.classList.add('v-overlay--scroll-blocked')\n  }\n\n  scrollElements.forEach((el, i) => {\n    el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft))\n    el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop))\n    el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))\n    el.classList.add('v-overlay-scroll-blocked')\n  })\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el, i) => {\n      const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'))\n      const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'))\n\n      el.style.removeProperty('--v-body-scroll-x')\n      el.style.removeProperty('--v-body-scroll-y')\n      el.style.removeProperty('--v-scrollbar-offset')\n      el.classList.remove('v-overlay-scroll-blocked')\n\n      el.scrollLeft = -x\n      el.scrollTop = -y\n    })\n    if (scrollableParent) {\n      data.root.value!.classList.remove('v-overlay--scroll-blocked')\n    }\n  })\n}\n\nfunction repositionScrollStrategy (data: ScrollStrategyData) {\n  let slow = false\n  let raf = -1\n\n  function update (e: Event) {\n    requestNewFrame(() => {\n      const start = performance.now()\n      data.updateLocation.value?.(e)\n      const time = performance.now() - start\n      slow = time / (1000 / 60) > 2\n    })\n  }\n\n  bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {\n    if (slow) {\n      // If the position calculation is slow,\n      // defer updates until scrolling is finished.\n      // Browsers usually fire one scroll event per frame so\n      // we just wait until we've got two frames without an event\n      cancelAnimationFrame(raf)\n      raf = requestAnimationFrame(() => {\n        raf = requestAnimationFrame(() => {\n          update(e)\n        })\n      })\n    } else {\n      update(e)\n    }\n  })\n}\n\n/** @private */\nfunction bindScroll (el: HTMLElement | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)]\n  scrollElements.forEach(el => {\n    el.addEventListener('scroll', onScroll, { passive: true })\n  })\n\n  onScopeDispose(() => {\n    scrollElements.forEach(el => {\n      el.removeEventListener('scroll', onScroll)\n    })\n  })\n}\n"],"mappings":"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"}