@vuetify/nightly 3.3.12-dev.2023-08-15 → 3.3.12-dev.2023-08-17

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.12-dev.2023-08-15
+* Vuetify v3.3.12-dev.2023-08-17
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -158,7 +158,15 @@ function isObject(obj) {
   return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 }
 function refElement(obj) {
-  return obj && '$el' in obj ? obj.$el : obj;
+  if (obj && '$el' in obj) {
+    const el = obj.$el;
+    if (el?.nodeType === Node.TEXT_NODE) {
+      // Multi-root component, use the first element
+      return el.nextElementSibling;
+    }
+    return el;
+  }
+  return obj;
 }
 
 // KeyboardEvent.keyCode aliases
@@ -551,6 +559,18 @@ function getOverflow(a, b) {
     }
   };
 }
+function getTargetBox(target) {
+  if (Array.isArray(target)) {
+    return new Box({
+      x: target[0],
+      y: target[1],
+      width: 0,
+      height: 0
+    });
+  } else {
+    return target.getBoundingClientRect();
+  }
+}
 
 // Utilities
 
@@ -2628,7 +2648,7 @@ function ExpandTransitionGenerator () {
 // Types
 
 const makeVDialogTransitionProps = propsFactory({
-  target: Object
+  target: [Object, Array]
 }, 'v-dialog-transition');
 const VDialogTransition = genericComponent()({
   name: 'VDialogTransition',
@@ -2730,7 +2750,7 @@ function getChildren(el) {
   return els && [...els];
 }
 function getDimensions(target, el) {
-  const targetBox = target.getBoundingClientRect();
+  const targetBox = getTargetBox(target);
   const elBox = nullifyTransforms(el);
   const [originX, originY] = getComputedStyle(el).transformOrigin.split(' ').map(v => parseFloat(v));
   const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue('--v-overlay-anchor-origin').split(' ');
@@ -8416,7 +8436,7 @@ function getIntrinsicSize(el, isRtl) {
   return contentBox;
 }
 function connectedLocationStrategy(data, props, contentStyles) {
-  const activatorFixed = isFixedPosition(data.activatorEl.value);
+  const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);
   if (activatorFixed) {
     Object.assign(contentStyles.value, {
       position: 'fixed',
@@ -8465,11 +8485,11 @@ function connectedLocationStrategy(data, props, contentStyles) {
   const observer = new ResizeObserver(() => {
     if (observe) updateLocation();
   });
-  watch([data.activatorEl, data.contentEl], (_ref, _ref2) => {
-    let [newActivatorEl, newContentEl] = _ref;
-    let [oldActivatorEl, oldContentEl] = _ref2;
-    if (oldActivatorEl) observer.unobserve(oldActivatorEl);
-    if (newActivatorEl) observer.observe(newActivatorEl);
+  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);
   }, {
@@ -8485,8 +8505,8 @@ function connectedLocationStrategy(data, props, contentStyles) {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => observe = true);
     });
-    if (!data.activatorEl.value || !data.contentEl.value) return;
-    const targetBox = data.activatorEl.value.getBoundingClientRect();
+    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;
@@ -8773,11 +8793,11 @@ function closeScrollStrategy(data) {
   function onScroll(e) {
     data.isActive.value = false;
   }
-  bindScroll(data.activatorEl.value ?? data.contentEl.value, onScroll);
+  bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll);
 }
 function blockScrollStrategy(data, props) {
   const offsetParent = data.root.value?.offsetParent;
-  const scrollElements = [...new Set([...getScrollParents(data.activatorEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+  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) {
@@ -8821,7 +8841,7 @@ function repositionScrollStrategy(data, props, scope) {
   }
   ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
     scope.run(() => {
-      bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
+      bindScroll(data.targetEl.value ?? data.contentEl.value, e => {
         if (slow) {
           // If the position calculation is slow,
           // defer updates until scrolling is finished.
@@ -8902,6 +8922,7 @@ function useDelay(props, cb) {
 // Types
 
 const makeActivatorProps = propsFactory({
+  target: [String, Object],
   activator: [String, Object],
   activatorProps: {
     type: Object,
@@ -8924,6 +8945,7 @@ function useActivator(props, _ref) {
     isActive,
     isTop
   } = _ref;
+  const vm = getCurrentInstance('useActivator');
   const activatorEl = ref();
   let isHovered = false;
   let isFocused = false;
@@ -8941,10 +8963,14 @@ function useActivator(props, _ref) {
       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 => {
@@ -9038,6 +9064,15 @@ function useActivator(props, _ref) {
       isActive.value = false;
     }
   });
+  watch(isActive, val => {
+    if (!val) {
+      setTimeout(() => {
+        cursorTarget.value = undefined;
+      });
+    }
+  }, {
+    flush: 'post'
+  });
   const activatorRef = ref();
   watchEffect(() => {
     if (!activatorRef.value) return;
@@ -9045,7 +9080,15 @@ function useActivator(props, _ref) {
       activatorEl.value = refElement(activatorRef.value);
     });
   });
-  const vm = getCurrentInstance('useActivator');
+  const targetRef = ref();
+  const target = computed(() => {
+    if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
+    if (targetRef.value) return refElement(targetRef.value);
+    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) {
@@ -9069,6 +9112,9 @@ function useActivator(props, _ref) {
   return {
     activatorEl,
     activatorRef,
+    target,
+    targetEl,
+    targetRef,
     activatorEvents,
     contentEvents,
     scrimEvents
@@ -9110,31 +9156,34 @@ function _useActivator(props, vm, _ref2) {
   }
   function getActivator() {
     let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
-    let activator;
-    if (selector) {
-      if (selector === 'parent') {
-        let el = vm?.proxy?.$el?.parentNode;
-        while (el.hasAttribute('data-no-activator')) {
-          el = el.parentNode;
-        }
-        activator = el;
-      } else if (typeof selector === 'string') {
-        // Selector
-        activator = document.querySelector(selector);
-      } else if ('$el' in selector) {
-        // Component (ref)
-        activator = selector.$el;
-      } else {
-        // HTMLElement | Element
-        activator = selector;
-      }
-    }
+    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 : null;
+    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;
+}
 
 // Utilities
 
@@ -9578,6 +9627,9 @@ const VOverlay = genericComponent()({
     const {
       activatorEl,
       activatorRef,
+      target,
+      targetEl,
+      targetRef,
       activatorEvents,
       contentEvents,
       scrimEvents
@@ -9603,13 +9655,13 @@ const VOverlay = genericComponent()({
     } = useLocationStrategies(props, {
       isRtl,
       contentEl,
-      activatorEl,
+      target,
       isActive
     });
     useScrollStrategies(props, {
       root,
       contentEl,
-      activatorEl,
+      targetEl,
       isActive,
       updateLocation
     });
@@ -9677,7 +9729,8 @@ const VOverlay = genericComponent()({
     useRender(() => createVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
       props: mergeProps({
-        ref: activatorRef
+        ref: activatorRef,
+        targetRef
       }, activatorEvents.value, props.activatorProps)
     }), isMounted.value && hasContent.value && createVNode(Teleport, {
       "disabled": !teleportTarget.value,
@@ -9700,7 +9753,7 @@ const VOverlay = genericComponent()({
         "appear": true,
         "persisted": true,
         "transition": props.transition,
-        "target": activatorEl.value,
+        "target": target.value,
         "onAfterLeave": () => {
           onAfterLeave();
           emit('afterLeave');
@@ -9721,6 +9774,7 @@ const VOverlay = genericComponent()({
     })]));
     return {
       activatorEl,
+      target,
       animateClick,
       contentEl,
       globalTop,
@@ -24482,7 +24536,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.12-dev.2023-08-15";
+const version$1 = "3.3.12-dev.2023-08-17";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -24496,7 +24550,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.12-dev.2023-08-15";
+const version = "3.3.12-dev.2023-08-17";
 
 /* eslint-disable local-rules/sort-imports */