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

package/dist/vuetify-labs.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.
 */
@@ -162,7 +162,15 @@
     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
@@ -555,6 +563,18 @@
       }
     };
   }
+  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
 
@@ -2632,7 +2652,7 @@
   // Types
 
   const makeVDialogTransitionProps = propsFactory({
-    target: Object
+    target: [Object, Array]
   }, 'v-dialog-transition');
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
@@ -2734,7 +2754,7 @@
     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(' ');
@@ -8420,7 +8440,7 @@
     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',
@@ -8469,11 +8489,11 @@
     const observer = new ResizeObserver(() => {
       if (observe) updateLocation();
     });
-    vue.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);
+    vue.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);
     }, {
@@ -8489,8 +8509,8 @@
       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;
@@ -8777,11 +8797,11 @@
     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) {
@@ -8825,7 +8845,7 @@
     }
     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.
@@ -8906,6 +8926,7 @@
   // Types
 
   const makeActivatorProps = propsFactory({
+    target: [String, Object],
     activator: [String, Object],
     activatorProps: {
       type: Object,
@@ -8928,6 +8949,7 @@
       isActive,
       isTop
     } = _ref;
+    const vm = getCurrentInstance('useActivator');
     const activatorEl = vue.ref();
     let isHovered = false;
     let isFocused = false;
@@ -8945,10 +8967,14 @@
         isActive.value = value;
       }
     });
+    const cursorTarget = vue.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 => {
@@ -9042,6 +9068,15 @@
         isActive.value = false;
       }
     });
+    vue.watch(isActive, val => {
+      if (!val) {
+        setTimeout(() => {
+          cursorTarget.value = undefined;
+        });
+      }
+    }, {
+      flush: 'post'
+    });
     const activatorRef = vue.ref();
     vue.watchEffect(() => {
       if (!activatorRef.value) return;
@@ -9049,7 +9084,15 @@
         activatorEl.value = refElement(activatorRef.value);
       });
     });
-    const vm = getCurrentInstance('useActivator');
+    const targetRef = vue.ref();
+    const target = vue.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 = vue.computed(() => {
+      return Array.isArray(target.value) ? undefined : target.value;
+    });
     let scope;
     vue.watch(() => !!props.activator, val => {
       if (val && IN_BROWSER) {
@@ -9073,6 +9116,9 @@
     return {
       activatorEl,
       activatorRef,
+      target,
+      targetEl,
+      targetRef,
       activatorEvents,
       contentEvents,
       scrimEvents
@@ -9114,31 +9160,34 @@
     }
     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
 
@@ -9582,6 +9631,9 @@
       const {
         activatorEl,
         activatorRef,
+        target,
+        targetEl,
+        targetRef,
         activatorEvents,
         contentEvents,
         scrimEvents
@@ -9607,13 +9659,13 @@
       } = useLocationStrategies(props, {
         isRtl,
         contentEl,
-        activatorEl,
+        target,
         isActive
       });
       useScrollStrategies(props, {
         root,
         contentEl,
-        activatorEl,
+        targetEl,
         isActive,
         updateLocation
       });
@@ -9681,7 +9733,8 @@
       useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         props: vue.mergeProps({
-          ref: activatorRef
+          ref: activatorRef,
+          targetRef
         }, activatorEvents.value, props.activatorProps)
       }), isMounted.value && hasContent.value && vue.createVNode(vue.Teleport, {
         "disabled": !teleportTarget.value,
@@ -9704,7 +9757,7 @@
           "appear": true,
           "persisted": true,
           "transition": props.transition,
-          "target": activatorEl.value,
+          "target": target.value,
           "onAfterLeave": () => {
             onAfterLeave();
             emit('afterLeave');
@@ -9725,6 +9778,7 @@
       })]));
       return {
         activatorEl,
+        target,
         animateClick,
         contentEl,
         globalTop,
@@ -24486,7 +24540,7 @@
       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
@@ -24500,7 +24554,7 @@
 
   /* 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 */