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

package/lib/components/transitions/dialog-transition.mjs

@@ -1,9 +1,10 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 // Utilities
 import { Transition } from 'vue';
-import { acceleratedEasing, animate, deceleratedEasing, genericComponent, nullifyTransforms, propsFactory, standardEasing } from "../../util/index.mjs"; // Types
+import { acceleratedEasing, animate, deceleratedEasing, genericComponent, nullifyTransforms, propsFactory, standardEasing } from "../../util/index.mjs";
+import { getTargetBox } from "../../util/box.mjs"; // Types
 export const makeVDialogTransitionProps = propsFactory({
-  target: Object
+  target: [Object, Array]
 }, 'v-dialog-transition');
 export const VDialogTransition = genericComponent()({
   name: 'VDialogTransition',
@@ -105,7 +106,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(' ');

package/lib/components/transitions/dialog-transition.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-transition.mjs","names":["Transition","acceleratedEasing","animate","deceleratedEasing","genericComponent","nullifyTransforms","propsFactory","standardEasing","makeVDialogTransitionProps","target","Object","VDialogTransition","name","props","setup","_ref","slots","functions","onBeforeEnter","el","style","pointerEvents","visibility","onEnter","done","Promise","resolve","requestAnimationFrame","x","y","sx","sy","speed","getDimensions","animation","transform","opacity","duration","easing","getChildren","forEach","offset","finished","then","onAfterEnter","removeProperty","onBeforeLeave","onLeave","onAfterLeave","_createVNode","_mergeProps","els","querySelector","children","targetBox","getBoundingClientRect","elBox","originX","originY","getComputedStyle","transformOrigin","split","map","v","parseFloat","anchorSide","anchorOffset","getPropertyValue","offsetX","left","width","offsetY","top","height","tsx","tsy","maxs","Math","max","asa","window","innerWidth","innerHeight","min"],"sources":["../../../src/components/transitions/dialog-transition.tsx"],"sourcesContent":["// Utilities\nimport { Transition } from 'vue'\nimport {\n  acceleratedEasing,\n  animate,\n  deceleratedEasing,\n  genericComponent,\n  nullifyTransforms,\n  propsFactory,\n  standardEasing,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVDialogTransitionProps = propsFactory({\n  target: Object as PropType<HTMLElement>,\n}, 'v-dialog-transition')\n\nexport const VDialogTransition = genericComponent()({\n  name: 'VDialogTransition',\n\n  props: makeVDialogTransitionProps(),\n\n  setup (props, { slots }) {\n    const functions = {\n      onBeforeEnter (el: Element) {\n        (el as HTMLElement).style.pointerEvents = 'none'\n        ;(el as HTMLElement).style.visibility = 'hidden'\n      },\n      async onEnter (el: Element, done: () => void) {\n        await new Promise(resolve => requestAnimationFrame(resolve))\n        await new Promise(resolve => requestAnimationFrame(resolve))\n        ;(el as HTMLElement).style.visibility = ''\n\n        const { x, y, sx, sy, speed } = getDimensions(props.target!, el as HTMLElement)\n\n        const animation = animate(el, [\n          { transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`, opacity: 0 },\n          {},\n        ], {\n          duration: 225 * speed,\n          easing: deceleratedEasing,\n        })\n        getChildren(el)?.forEach(el => {\n          animate(el, [\n            { opacity: 0 },\n            { opacity: 0, offset: 0.33 },\n            {},\n          ], {\n            duration: 225 * 2 * speed,\n            easing: standardEasing,\n          })\n        })\n        animation.finished.then(() => done())\n      },\n      onAfterEnter (el: Element) {\n        (el as HTMLElement).style.removeProperty('pointer-events')\n      },\n      onBeforeLeave (el: Element) {\n        (el as HTMLElement).style.pointerEvents = 'none'\n      },\n      async onLeave (el: Element, done: () => void) {\n        await new Promise(resolve => requestAnimationFrame(resolve))\n\n        const { x, y, sx, sy, speed } = getDimensions(props.target!, el as HTMLElement)\n\n        const animation = animate(el, [\n          {},\n          { transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`, opacity: 0 },\n        ], {\n          duration: 125 * speed,\n          easing: acceleratedEasing,\n        })\n        animation.finished.then(() => done())\n        getChildren(el)?.forEach(el => {\n          animate(el, [\n            {},\n            { opacity: 0, offset: 0.2 },\n            { opacity: 0 },\n          ], {\n            duration: 125 * 2 * speed,\n            easing: standardEasing,\n          })\n        })\n      },\n      onAfterLeave (el: Element) {\n        (el as HTMLElement).style.removeProperty('pointer-events')\n      },\n    }\n\n    return () => {\n      return props.target\n        ? (\n          <Transition\n            name=\"dialog-transition\"\n            { ...functions }\n            css={ false }\n            v-slots={ slots }\n          />\n        )\n        : <Transition name=\"dialog-transition\" v-slots={ slots } />\n    }\n  },\n})\n\n/** Animatable children (card, sheet, list) */\nfunction getChildren (el: Element) {\n  const els = el.querySelector(':scope > .v-card, :scope > .v-sheet, :scope > .v-list')?.children\n  return els && [...els]\n}\n\nfunction getDimensions (target: HTMLElement, el: HTMLElement) {\n  const targetBox = target.getBoundingClientRect()\n  const elBox = nullifyTransforms(el)\n  const [originX, originY] = getComputedStyle(el).transformOrigin.split(' ').map(v => parseFloat(v))\n\n  const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue('--v-overlay-anchor-origin').split(' ')\n\n  let offsetX = targetBox.left + targetBox.width / 2\n  if (anchorSide === 'left' || anchorOffset === 'left') {\n    offsetX -= targetBox.width / 2\n  } else if (anchorSide === 'right' || anchorOffset === 'right') {\n    offsetX += targetBox.width / 2\n  }\n\n  let offsetY = targetBox.top + targetBox.height / 2\n  if (anchorSide === 'top' || anchorOffset === 'top') {\n    offsetY -= targetBox.height / 2\n  } else if (anchorSide === 'bottom' || anchorOffset === 'bottom') {\n    offsetY += targetBox.height / 2\n  }\n\n  const tsx = targetBox.width / elBox.width\n  const tsy = targetBox.height / elBox.height\n  const maxs = Math.max(1, tsx, tsy)\n  const sx = tsx / maxs || 0\n  const sy = tsy / maxs || 0\n\n  // Animate elements larger than 12% of the screen area up to 1.5x slower\n  const asa = (elBox.width * elBox.height) / (window.innerWidth * window.innerHeight)\n  const speed = asa > 0.12\n    ? Math.min(1.5, (asa - 0.12) * 10 + 1)\n    : 1\n\n  return {\n    x: offsetX - (originX + elBox.left),\n    y: offsetY - (originY + elBox.top),\n    sx,\n    sy,\n    speed,\n  }\n}\n\nexport type VDialogTransition = InstanceType<typeof VDialogTransition>\n"],"mappings":"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"}
+{"version":3,"file":"dialog-transition.mjs","names":["Transition","acceleratedEasing","animate","deceleratedEasing","genericComponent","nullifyTransforms","propsFactory","standardEasing","getTargetBox","makeVDialogTransitionProps","target","Object","Array","VDialogTransition","name","props","setup","_ref","slots","functions","onBeforeEnter","el","style","pointerEvents","visibility","onEnter","done","Promise","resolve","requestAnimationFrame","x","y","sx","sy","speed","getDimensions","animation","transform","opacity","duration","easing","getChildren","forEach","offset","finished","then","onAfterEnter","removeProperty","onBeforeLeave","onLeave","onAfterLeave","_createVNode","_mergeProps","els","querySelector","children","targetBox","elBox","originX","originY","getComputedStyle","transformOrigin","split","map","v","parseFloat","anchorSide","anchorOffset","getPropertyValue","offsetX","left","width","offsetY","top","height","tsx","tsy","maxs","Math","max","asa","window","innerWidth","innerHeight","min"],"sources":["../../../src/components/transitions/dialog-transition.tsx"],"sourcesContent":["// Utilities\nimport { Transition } from 'vue'\nimport {\n  acceleratedEasing,\n  animate,\n  deceleratedEasing,\n  genericComponent,\n  nullifyTransforms,\n  propsFactory,\n  standardEasing,\n} from '@/util'\nimport { getTargetBox } from '@/util/box'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVDialogTransitionProps = propsFactory({\n  target: [Object, Array] as PropType<HTMLElement | [x: number, y: number]>,\n}, 'v-dialog-transition')\n\nexport const VDialogTransition = genericComponent()({\n  name: 'VDialogTransition',\n\n  props: makeVDialogTransitionProps(),\n\n  setup (props, { slots }) {\n    const functions = {\n      onBeforeEnter (el: Element) {\n        (el as HTMLElement).style.pointerEvents = 'none'\n        ;(el as HTMLElement).style.visibility = 'hidden'\n      },\n      async onEnter (el: Element, done: () => void) {\n        await new Promise(resolve => requestAnimationFrame(resolve))\n        await new Promise(resolve => requestAnimationFrame(resolve))\n        ;(el as HTMLElement).style.visibility = ''\n\n        const { x, y, sx, sy, speed } = getDimensions(props.target!, el as HTMLElement)\n\n        const animation = animate(el, [\n          { transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`, opacity: 0 },\n          {},\n        ], {\n          duration: 225 * speed,\n          easing: deceleratedEasing,\n        })\n        getChildren(el)?.forEach(el => {\n          animate(el, [\n            { opacity: 0 },\n            { opacity: 0, offset: 0.33 },\n            {},\n          ], {\n            duration: 225 * 2 * speed,\n            easing: standardEasing,\n          })\n        })\n        animation.finished.then(() => done())\n      },\n      onAfterEnter (el: Element) {\n        (el as HTMLElement).style.removeProperty('pointer-events')\n      },\n      onBeforeLeave (el: Element) {\n        (el as HTMLElement).style.pointerEvents = 'none'\n      },\n      async onLeave (el: Element, done: () => void) {\n        await new Promise(resolve => requestAnimationFrame(resolve))\n\n        const { x, y, sx, sy, speed } = getDimensions(props.target!, el as HTMLElement)\n\n        const animation = animate(el, [\n          {},\n          { transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`, opacity: 0 },\n        ], {\n          duration: 125 * speed,\n          easing: acceleratedEasing,\n        })\n        animation.finished.then(() => done())\n        getChildren(el)?.forEach(el => {\n          animate(el, [\n            {},\n            { opacity: 0, offset: 0.2 },\n            { opacity: 0 },\n          ], {\n            duration: 125 * 2 * speed,\n            easing: standardEasing,\n          })\n        })\n      },\n      onAfterLeave (el: Element) {\n        (el as HTMLElement).style.removeProperty('pointer-events')\n      },\n    }\n\n    return () => {\n      return props.target\n        ? (\n          <Transition\n            name=\"dialog-transition\"\n            { ...functions }\n            css={ false }\n            v-slots={ slots }\n          />\n        )\n        : <Transition name=\"dialog-transition\" v-slots={ slots } />\n    }\n  },\n})\n\n/** Animatable children (card, sheet, list) */\nfunction getChildren (el: Element) {\n  const els = el.querySelector(':scope > .v-card, :scope > .v-sheet, :scope > .v-list')?.children\n  return els && [...els]\n}\n\nfunction getDimensions (target: HTMLElement | [x: number, y: number], el: HTMLElement) {\n  const targetBox = getTargetBox(target)\n  const elBox = nullifyTransforms(el)\n  const [originX, originY] = getComputedStyle(el).transformOrigin.split(' ').map(v => parseFloat(v))\n\n  const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue('--v-overlay-anchor-origin').split(' ')\n\n  let offsetX = targetBox.left + targetBox.width / 2\n  if (anchorSide === 'left' || anchorOffset === 'left') {\n    offsetX -= targetBox.width / 2\n  } else if (anchorSide === 'right' || anchorOffset === 'right') {\n    offsetX += targetBox.width / 2\n  }\n\n  let offsetY = targetBox.top + targetBox.height / 2\n  if (anchorSide === 'top' || anchorOffset === 'top') {\n    offsetY -= targetBox.height / 2\n  } else if (anchorSide === 'bottom' || anchorOffset === 'bottom') {\n    offsetY += targetBox.height / 2\n  }\n\n  const tsx = targetBox.width / elBox.width\n  const tsy = targetBox.height / elBox.height\n  const maxs = Math.max(1, tsx, tsy)\n  const sx = tsx / maxs || 0\n  const sy = tsy / maxs || 0\n\n  // Animate elements larger than 12% of the screen area up to 1.5x slower\n  const asa = (elBox.width * elBox.height) / (window.innerWidth * window.innerHeight)\n  const speed = asa > 0.12\n    ? Math.min(1.5, (asa - 0.12) * 10 + 1)\n    : 1\n\n  return {\n    x: offsetX - (originX + elBox.left),\n    y: offsetY - (originY + elBox.top),\n    sx,\n    sy,\n    speed,\n  }\n}\n\nexport type VDialogTransition = InstanceType<typeof VDialogTransition>\n"],"mappings":"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"}

package/lib/components/transitions/index.d.mts

@@ -12,7 +12,7 @@ declare const VDialogTransition: {
         $props: {
             key?: string | number | symbol | undefined;
             style?: unknown;
-            target?: HTMLElement | undefined;
+            target?: HTMLElement | [x: number, y: number] | undefined;
             class?: unknown;
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
@@ -79,7 +79,7 @@ declare const VDialogTransition: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{} & {
-            target?: HTMLElement | undefined;
+            target?: HTMLElement | [x: number, y: number] | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
@@ -114,7 +114,7 @@ declare const VDialogTransition: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {} & {
-        target?: HTMLElement | undefined;
+        target?: HTMLElement | [x: number, y: number] | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -129,7 +129,7 @@ declare const VDialogTransition: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{} & {
-    target?: HTMLElement | undefined;
+    target?: HTMLElement | [x: number, y: number] | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
@@ -144,9 +144,9 @@ declare const VDialogTransition: {
         [key: string]: any;
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
-    target: PropType<HTMLElement>;
+    target: PropType<HTMLElement | [x: number, y: number]>;
 }, vue.ExtractPropTypes<{
-    target: PropType<HTMLElement>;
+    target: PropType<HTMLElement | [x: number, y: number]>;
 }>>;
 type VDialogTransition = InstanceType<typeof VDialogTransition>;
 

package/lib/entry-bundler.mjs

@@ -15,7 +15,7 @@ export const createVuetify = function () {
     ...options
   });
 };
-export const version = "3.3.12-dev.2023-08-15";
+export const version = "3.3.12-dev.2023-08-17";
 createVuetify.version = version;
 export { components, directives };
 export * from "./composables/index.mjs";

package/lib/framework.mjs

@@ -92,7 +92,7 @@ export function createVuetify() {
     date
   };
 }
-export const version = "3.3.12-dev.2023-08-15";
+export const version = "3.3.12-dev.2023-08-17";
 createVuetify.version = version;
 
 // Vue's inject() can only be used in setup

package/lib/index.d.mts

@@ -368,17 +368,17 @@ declare module '@vue/runtime-core' {
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
     VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
-    VAvatar: typeof import('vuetify/components')['VAvatar']
     VBadge: typeof import('vuetify/components')['VBadge']
+    VAvatar: typeof import('vuetify/components')['VAvatar']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
     VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
+    VBtn: typeof import('vuetify/components')['VBtn']
+    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
-    VBtn: typeof import('vuetify/components')['VBtn']
-    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
@@ -390,14 +390,14 @@ declare module '@vue/runtime-core' {
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
     VCheckbox: typeof import('vuetify/components')['VCheckbox']
     VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
-    VChip: typeof import('vuetify/components')['VChip']
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
+    VChip: typeof import('vuetify/components')['VChip']
     VCode: typeof import('vuetify/components')['VCode']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
     VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
-    VDialog: typeof import('vuetify/components')['VDialog']
     VDivider: typeof import('vuetify/components')['VDivider']
+    VDialog: typeof import('vuetify/components')['VDialog']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
@@ -411,8 +411,8 @@ declare module '@vue/runtime-core' {
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VImg: typeof import('vuetify/components')['VImg']
     VInput: typeof import('vuetify/components')['VInput']
+    VImg: typeof import('vuetify/components')['VImg']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
     VKbd: typeof import('vuetify/components')['VKbd']
@@ -426,8 +426,8 @@ declare module '@vue/runtime-core' {
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
     VListSubheader: typeof import('vuetify/components')['VListSubheader']
-    VMenu: typeof import('vuetify/components')['VMenu']
     VMain: typeof import('vuetify/components')['VMain']
+    VMenu: typeof import('vuetify/components')['VMenu']
     VMessages: typeof import('vuetify/components')['VMessages']
     VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VOverlay: typeof import('vuetify/components')['VOverlay']
@@ -436,21 +436,20 @@ declare module '@vue/runtime-core' {
     VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VRating: typeof import('vuetify/components')['VRating']
-    VSelect: typeof import('vuetify/components')['VSelect']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSheet: typeof import('vuetify/components')['VSheet']
-    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
-    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VSlider: typeof import('vuetify/components')['VSlider']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
+    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
+    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VSwitch: typeof import('vuetify/components')['VSwitch']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
+    VTable: typeof import('vuetify/components')['VTable']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTab: typeof import('vuetify/components')['VTab']
-    VTable: typeof import('vuetify/components')['VTable']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
+    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTimeline: typeof import('vuetify/components')['VTimeline']
     VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VToolbar: typeof import('vuetify/components')['VToolbar']
@@ -460,6 +459,7 @@ declare module '@vue/runtime-core' {
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
+    VSelect: typeof import('vuetify/components')['VSelect']
     VForm: typeof import('vuetify/components')['VForm']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']

package/lib/labs/VBottomSheet/index.d.mts

@@ -30,7 +30,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 
 interface LocationStrategyData {
     contentEl: Ref<HTMLElement | undefined>;
-    activatorEl: Ref<HTMLElement | undefined>;
+    target: Ref<HTMLElement | [x: number, y: number] | undefined>;
     isActive: Ref<boolean>;
     isRtl: Ref<boolean>;
 }
@@ -65,7 +65,7 @@ declare function connectedLocationStrategy(data: LocationStrategyData, props: St
 interface ScrollStrategyData {
     root: Ref<HTMLElement | undefined>;
     contentEl: Ref<HTMLElement | undefined>;
-    activatorEl: Ref<HTMLElement | undefined>;
+    targetEl: Ref<HTMLElement | undefined>;
     isActive: Ref<boolean>;
     updateLocation: Ref<((e: Event) => void) | undefined>;
 }
@@ -129,6 +129,7 @@ declare const VBottomSheet: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             $children?: vue.VNodeChild | {
                 default?: ((arg: {
@@ -196,7 +197,7 @@ declare const VBottomSheet: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
@@ -267,10 +268,11 @@ declare const VBottomSheet: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             theme?: string | undefined;
             contentClass?: any;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             closeDelay?: string | number | undefined;
             openDelay?: string | number | undefined;
             openOnClick?: boolean | undefined;
@@ -413,10 +415,11 @@ declare const VBottomSheet: {
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
         class?: any;
         theme?: string | undefined;
         contentClass?: any;
-        activator?: string | Element | vue.ComponentPublicInstance | undefined;
+        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
         closeDelay?: string | number | undefined;
         openDelay?: string | number | undefined;
         openOnClick?: boolean | undefined;
@@ -496,10 +499,11 @@ declare const VBottomSheet: {
     maxWidth?: string | number | undefined;
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
+    target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
     class?: any;
     theme?: string | undefined;
     contentClass?: any;
-    activator?: string | Element | vue.ComponentPublicInstance | undefined;
+    activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
     closeDelay?: string | number | undefined;
     openDelay?: string | number | undefined;
     openOnClick?: boolean | undefined;
@@ -656,7 +660,8 @@ declare const VBottomSheet: {
     };
     closeDelay: (StringConstructor | NumberConstructor)[];
     openDelay: (StringConstructor | NumberConstructor)[];
-    activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
+    target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
+    activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
     activatorProps: {
         type: vue.PropType<Record<string, any>>;
         default: () => {};
@@ -777,7 +782,8 @@ declare const VBottomSheet: {
     };
     closeDelay: (StringConstructor | NumberConstructor)[];
     openDelay: (StringConstructor | NumberConstructor)[];
-    activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
+    target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
+    activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
     activatorProps: {
         type: vue.PropType<Record<string, any>>;
         default: () => {};

package/lib/labs/components.d.mts

@@ -34,7 +34,7 @@ declare const EventProp: <T extends any[] = any[]>() => PropType<EventProp<T, (.
 
 interface LocationStrategyData {
     contentEl: Ref<HTMLElement | undefined>;
-    activatorEl: Ref<HTMLElement | undefined>;
+    target: Ref<HTMLElement | [x: number, y: number] | undefined>;
     isActive: Ref<boolean>;
     isRtl: Ref<boolean>;
 }
@@ -69,7 +69,7 @@ declare function connectedLocationStrategy(data: LocationStrategyData, props: St
 interface ScrollStrategyData {
     root: Ref<HTMLElement | undefined>;
     contentEl: Ref<HTMLElement | undefined>;
-    activatorEl: Ref<HTMLElement | undefined>;
+    targetEl: Ref<HTMLElement | undefined>;
     isActive: Ref<boolean>;
     updateLocation: Ref<((e: Event) => void) | undefined>;
 }
@@ -133,6 +133,7 @@ declare const VBottomSheet: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             $children?: vue.VNodeChild | {
                 default?: ((arg: {
@@ -200,7 +201,7 @@ declare const VBottomSheet: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
@@ -271,10 +272,11 @@ declare const VBottomSheet: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             theme?: string | undefined;
             contentClass?: any;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             closeDelay?: string | number | undefined;
             openDelay?: string | number | undefined;
             openOnClick?: boolean | undefined;
@@ -417,10 +419,11 @@ declare const VBottomSheet: {
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
         class?: any;
         theme?: string | undefined;
         contentClass?: any;
-        activator?: string | Element | vue.ComponentPublicInstance | undefined;
+        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
         closeDelay?: string | number | undefined;
         openDelay?: string | number | undefined;
         openOnClick?: boolean | undefined;
@@ -500,10 +503,11 @@ declare const VBottomSheet: {
     maxWidth?: string | number | undefined;
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
+    target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
     class?: any;
     theme?: string | undefined;
     contentClass?: any;
-    activator?: string | Element | vue.ComponentPublicInstance | undefined;
+    activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
     closeDelay?: string | number | undefined;
     openDelay?: string | number | undefined;
     openOnClick?: boolean | undefined;
@@ -660,7 +664,8 @@ declare const VBottomSheet: {
     };
     closeDelay: (StringConstructor | NumberConstructor)[];
     openDelay: (StringConstructor | NumberConstructor)[];
-    activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
+    target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
+    activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
     activatorProps: {
         type: vue.PropType<Record<string, any>>;
         default: () => {};
@@ -781,7 +786,8 @@ declare const VBottomSheet: {
     };
     closeDelay: (StringConstructor | NumberConstructor)[];
     openDelay: (StringConstructor | NumberConstructor)[];
-    activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
+    target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
+    activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
     activatorProps: {
         type: vue.PropType<Record<string, any>>;
         default: () => {};

package/lib/util/box.mjs

@@ -36,4 +36,16 @@ export function getOverflow(a, b) {
     }
   };
 }
+export function getTargetBox(target) {
+  if (Array.isArray(target)) {
+    return new Box({
+      x: target[0],
+      y: target[1],
+      width: 0,
+      height: 0
+    });
+  } else {
+    return target.getBoundingClientRect();
+  }
+}
 //# sourceMappingURL=box.mjs.map

package/lib/util/box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"box.mjs","names":["Box","constructor","_ref","x","y","width","height","top","bottom","left","right","getOverflow","a","b","before","Math","max","after"],"sources":["../../src/util/box.ts"],"sourcesContent":["export class Box {\n  x: number\n  y: number\n  width: number\n  height: number\n\n  constructor ({ x, y, width, height }: {\n    x: number\n    y: number\n    width: number\n    height: number\n  }) {\n    this.x = x\n    this.y = y\n    this.width = width\n    this.height = height\n  }\n\n  get top () { return this.y }\n  get bottom () { return this.y + this.height }\n  get left () { return this.x }\n  get right () { return this.x + this.width }\n}\n\nexport function getOverflow (a: Box, b: Box) {\n  return {\n    x: {\n      before: Math.max(0, b.left - a.left),\n      after: Math.max(0, a.right - b.right),\n    },\n    y: {\n      before: Math.max(0, b.top - a.top),\n      after: Math.max(0, a.bottom - b.bottom),\n    },\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,GAAG,CAAC;EAMfC,WAAWA,CAAAC,IAAA,EAKR;IAAA,IALU;MAAEC,CAAC;MAAEC,CAAC;MAAEC,KAAK;MAAEC;IAK5B,CAAC,GAAAJ,IAAA;IACC,IAAI,CAACC,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACC,MAAM,GAAGA,MAAM;EACtB;EAEA,IAAIC,GAAGA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACH,CAAC;EAAC;EAC3B,IAAII,MAAMA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACJ,CAAC,GAAG,IAAI,CAACE,MAAM;EAAC;EAC5C,IAAIG,IAAIA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACN,CAAC;EAAC;EAC5B,IAAIO,KAAKA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACP,CAAC,GAAG,IAAI,CAACE,KAAK;EAAC;AAC5C;AAEA,OAAO,SAASM,WAAWA,CAAEC,CAAM,EAAEC,CAAM,EAAE;EAC3C,OAAO;IACLV,CAAC,EAAE;MACDW,MAAM,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,CAAC,CAACJ,IAAI,GAAGG,CAAC,CAACH,IAAI,CAAC;MACpCQ,KAAK,EAAEF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,CAAC,CAACF,KAAK,GAAGG,CAAC,CAACH,KAAK;IACtC,CAAC;IACDN,CAAC,EAAE;MACDU,MAAM,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,CAAC,CAACN,GAAG,GAAGK,CAAC,CAACL,GAAG,CAAC;MAClCU,KAAK,EAAEF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,CAAC,CAACJ,MAAM,GAAGK,CAAC,CAACL,MAAM;IACxC;EACF,CAAC;AACH"}
+{"version":3,"file":"box.mjs","names":["Box","constructor","_ref","x","y","width","height","top","bottom","left","right","getOverflow","a","b","before","Math","max","after","getTargetBox","target","Array","isArray","getBoundingClientRect"],"sources":["../../src/util/box.ts"],"sourcesContent":["export class Box {\n  x: number\n  y: number\n  width: number\n  height: number\n\n  constructor ({ x, y, width, height }: {\n    x: number\n    y: number\n    width: number\n    height: number\n  }) {\n    this.x = x\n    this.y = y\n    this.width = width\n    this.height = height\n  }\n\n  get top () { return this.y }\n  get bottom () { return this.y + this.height }\n  get left () { return this.x }\n  get right () { return this.x + this.width }\n}\n\nexport function getOverflow (a: Box, b: Box) {\n  return {\n    x: {\n      before: Math.max(0, b.left - a.left),\n      after: Math.max(0, a.right - b.right),\n    },\n    y: {\n      before: Math.max(0, b.top - a.top),\n      after: Math.max(0, a.bottom - b.bottom),\n    },\n  }\n}\n\nexport function getTargetBox (target: HTMLElement | [x: number, y: number]) {\n  if (Array.isArray(target)) {\n    return new Box({\n      x: target[0],\n      y: target[1],\n      width: 0,\n      height: 0,\n    })\n  } else {\n    return target.getBoundingClientRect()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,GAAG,CAAC;EAMfC,WAAWA,CAAAC,IAAA,EAKR;IAAA,IALU;MAAEC,CAAC;MAAEC,CAAC;MAAEC,KAAK;MAAEC;IAK5B,CAAC,GAAAJ,IAAA;IACC,IAAI,CAACC,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,KAAK,GAAGA,KAAK;IAClB,IAAI,CAACC,MAAM,GAAGA,MAAM;EACtB;EAEA,IAAIC,GAAGA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACH,CAAC;EAAC;EAC3B,IAAII,MAAMA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACJ,CAAC,GAAG,IAAI,CAACE,MAAM;EAAC;EAC5C,IAAIG,IAAIA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACN,CAAC;EAAC;EAC5B,IAAIO,KAAKA,CAAA,EAAI;IAAE,OAAO,IAAI,CAACP,CAAC,GAAG,IAAI,CAACE,KAAK;EAAC;AAC5C;AAEA,OAAO,SAASM,WAAWA,CAAEC,CAAM,EAAEC,CAAM,EAAE;EAC3C,OAAO;IACLV,CAAC,EAAE;MACDW,MAAM,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,CAAC,CAACJ,IAAI,GAAGG,CAAC,CAACH,IAAI,CAAC;MACpCQ,KAAK,EAAEF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,CAAC,CAACF,KAAK,GAAGG,CAAC,CAACH,KAAK;IACtC,CAAC;IACDN,CAAC,EAAE;MACDU,MAAM,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,CAAC,CAACN,GAAG,GAAGK,CAAC,CAACL,GAAG,CAAC;MAClCU,KAAK,EAAEF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,CAAC,CAACJ,MAAM,GAAGK,CAAC,CAACL,MAAM;IACxC;EACF,CAAC;AACH;AAEA,OAAO,SAASU,YAAYA,CAAEC,MAA4C,EAAE;EAC1E,IAAIC,KAAK,CAACC,OAAO,CAACF,MAAM,CAAC,EAAE;IACzB,OAAO,IAAInB,GAAG,CAAC;MACbG,CAAC,EAAEgB,MAAM,CAAC,CAAC,CAAC;MACZf,CAAC,EAAEe,MAAM,CAAC,CAAC,CAAC;MACZd,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE;IACV,CAAC,CAAC;EACJ,CAAC,MAAM;IACL,OAAOa,MAAM,CAACG,qBAAqB,EAAE;EACvC;AACF"}

package/lib/util/helpers.mjs

@@ -86,7 +86,15 @@ export function isObject(obj) {
   return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 }
 export 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