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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +3 -2
  2. package/dist/json/attributes.json +31 -7
  3. package/dist/json/importMap.json +46 -46
  4. package/dist/json/tags.json +6 -0
  5. package/dist/json/web-types.json +62 -8
  6. package/dist/vuetify-labs.css +884 -884
  7. package/dist/vuetify-labs.d.ts +227 -110
  8. package/dist/vuetify-labs.esm.js +96 -42
  9. package/dist/vuetify-labs.esm.js.map +1 -1
  10. package/dist/vuetify-labs.js +96 -42
  11. package/dist/vuetify-labs.min.css +2 -2
  12. package/dist/vuetify.css +240 -240
  13. package/dist/vuetify.d.ts +227 -116
  14. package/dist/vuetify.esm.js +96 -42
  15. package/dist/vuetify.esm.js.map +1 -1
  16. package/dist/vuetify.js +96 -42
  17. package/dist/vuetify.js.map +1 -1
  18. package/dist/vuetify.min.css +2 -2
  19. package/dist/vuetify.min.js +740 -739
  20. package/dist/vuetify.min.js.map +1 -1
  21. package/lib/components/VAutocomplete/index.d.mts +14 -8
  22. package/lib/components/VCombobox/index.d.mts +14 -8
  23. package/lib/components/VDialog/index.d.mts +41 -20
  24. package/lib/components/VMenu/index.d.mts +41 -20
  25. package/lib/components/VOverlay/VOverlay.mjs +9 -4
  26. package/lib/components/VOverlay/VOverlay.mjs.map +1 -1
  27. package/lib/components/VOverlay/index.d.mts +17 -8
  28. package/lib/components/VOverlay/locationStrategies.mjs +9 -9
  29. package/lib/components/VOverlay/locationStrategies.mjs.map +1 -1
  30. package/lib/components/VOverlay/scrollStrategies.mjs +3 -3
  31. package/lib/components/VOverlay/scrollStrategies.mjs.map +1 -1
  32. package/lib/components/VOverlay/useActivator.mjs +50 -21
  33. package/lib/components/VOverlay/useActivator.mjs.map +1 -1
  34. package/lib/components/VSelect/index.d.mts +14 -8
  35. package/lib/components/VSnackbar/index.d.mts +41 -20
  36. package/lib/components/VTooltip/index.d.mts +41 -20
  37. package/lib/components/index.d.mts +215 -104
  38. package/lib/components/transitions/dialog-transition.mjs +4 -3
  39. package/lib/components/transitions/dialog-transition.mjs.map +1 -1
  40. package/lib/components/transitions/index.d.mts +6 -6
  41. package/lib/entry-bundler.mjs +1 -1
  42. package/lib/framework.mjs +1 -1
  43. package/lib/index.d.mts +12 -12
  44. package/lib/labs/VBottomSheet/index.d.mts +14 -8
  45. package/lib/labs/components.d.mts +14 -8
  46. package/lib/util/box.mjs +12 -0
  47. package/lib/util/box.mjs.map +1 -1
  48. package/lib/util/helpers.mjs +9 -1
  49. package/lib/util/helpers.mjs.map +1 -1
  50. package/package.json +1 -1
package/lib/components/VMenu/index.d.mts CHANGED
@@ -4,7 +4,7 @@ import { Ref, EffectScope, ComponentPropsOptions, ExtractPropTypes, Component, n
4
4
  interface ScrollStrategyData {
5
5
  root: Ref<HTMLElement | undefined>;
6
6
  contentEl: Ref<HTMLElement | undefined>;
7
- activatorEl: Ref<HTMLElement | undefined>;
7
+ targetEl: Ref<HTMLElement | undefined>;
8
8
  isActive: Ref<boolean>;
9
9
  updateLocation: Ref<((e: Event) => void) | undefined>;
10
10
  }
@@ -52,7 +52,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
52
52
 
53
53
  interface LocationStrategyData {
54
54
  contentEl: Ref<HTMLElement | undefined>;
55
- activatorEl: Ref<HTMLElement | undefined>;
55
+ target: Ref<HTMLElement | [x: number, y: number] | undefined>;
56
56
  isActive: Ref<boolean>;
57
57
  isRtl: Ref<boolean>;
58
58
  }
@@ -126,6 +126,7 @@ declare const VMenu: {
126
126
  maxWidth?: string | number | undefined;
127
127
  minHeight?: string | number | undefined;
128
128
  minWidth?: string | number | undefined;
129
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
129
130
  class?: any;
130
131
  $children?: vue.VNodeChild | {
131
132
  default?: ((arg: {
@@ -194,7 +195,7 @@ declare const VMenu: {
194
195
  [key: string]: any;
195
196
  }>) => void)[] | undefined;
196
197
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
197
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
198
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
198
199
  "v-slot:activator"?: false | ((arg: {
199
200
  isActive: boolean;
200
201
  props: Record<string, any>;
@@ -261,10 +262,11 @@ declare const VMenu: {
261
262
  maxWidth?: string | number | undefined;
262
263
  minHeight?: string | number | undefined;
263
264
  minWidth?: string | number | undefined;
265
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
264
266
  class?: any;
265
267
  theme?: string | undefined;
266
268
  contentClass?: any;
267
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
269
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
268
270
  openOnClick?: boolean | undefined;
269
271
  openOnFocus?: boolean | undefined;
270
272
  contentProps?: any;
@@ -341,6 +343,7 @@ declare const VMenu: {
341
343
  maxWidth?: string | number | undefined;
342
344
  minHeight?: string | number | undefined;
343
345
  minWidth?: string | number | undefined;
346
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
344
347
  class?: any;
345
348
  onAfterLeave?: (() => any) | undefined;
346
349
  $children?: vue.VNodeChild | {
@@ -410,7 +413,7 @@ declare const VMenu: {
410
413
  [key: string]: any;
411
414
  }>) => void)[] | undefined;
412
415
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
413
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
416
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
414
417
  "v-slot:activator"?: false | ((arg: {
415
418
  isActive: boolean;
416
419
  props: Record<string, any>;
@@ -477,10 +480,11 @@ declare const VMenu: {
477
480
  maxWidth?: string | number | undefined;
478
481
  minHeight?: string | number | undefined;
479
482
  minWidth?: string | number | undefined;
483
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
480
484
  class?: any;
481
485
  theme?: string | undefined;
482
486
  contentClass?: any;
483
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
487
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
484
488
  closeDelay?: string | number | undefined;
485
489
  openDelay?: string | number | undefined;
486
490
  openOnClick?: boolean | undefined;
@@ -522,6 +526,7 @@ declare const VMenu: {
522
526
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
523
527
  }, {
524
528
  activatorEl: vue.Ref<HTMLElement | undefined>;
529
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
525
530
  animateClick: () => void;
526
531
  contentEl: vue.Ref<HTMLElement | undefined>;
527
532
  globalTop: Readonly<vue.Ref<boolean>>;
@@ -623,10 +628,11 @@ declare const VMenu: {
623
628
  maxWidth?: string | number | undefined;
624
629
  minHeight?: string | number | undefined;
625
630
  minWidth?: string | number | undefined;
631
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
626
632
  class?: any;
627
633
  theme?: string | undefined;
628
634
  contentClass?: any;
629
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
635
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
630
636
  closeDelay?: string | number | undefined;
631
637
  openDelay?: string | number | undefined;
632
638
  openOnClick?: boolean | undefined;
@@ -668,12 +674,13 @@ declare const VMenu: {
668
674
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
669
675
  } & vue.ShallowUnwrapRef<{
670
676
  activatorEl: vue.Ref<HTMLElement | undefined>;
677
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
671
678
  animateClick: () => void;
672
679
  contentEl: vue.Ref<HTMLElement | undefined>;
673
680
  globalTop: Readonly<vue.Ref<boolean>>;
674
681
  localTop: vue.ComputedRef<boolean>;
675
682
  updateLocation: vue.Ref<((e: Event) => void) | undefined>;
676
- }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
683
+ }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "target" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
677
684
  'update:modelValue': (value: boolean) => boolean;
678
685
  }, string, {
679
686
  location: Anchor;
@@ -772,10 +779,11 @@ declare const VMenu: {
772
779
  maxWidth?: string | number | undefined;
773
780
  minHeight?: string | number | undefined;
774
781
  minWidth?: string | number | undefined;
782
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
775
783
  class?: any;
776
784
  theme?: string | undefined;
777
785
  contentClass?: any;
778
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
786
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
779
787
  openOnClick?: boolean | undefined;
780
788
  openOnFocus?: boolean | undefined;
781
789
  contentProps?: any;
@@ -852,6 +860,7 @@ declare const VMenu: {
852
860
  maxWidth?: string | number | undefined;
853
861
  minHeight?: string | number | undefined;
854
862
  minWidth?: string | number | undefined;
863
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
855
864
  class?: any;
856
865
  onAfterLeave?: (() => any) | undefined;
857
866
  $children?: vue.VNodeChild | {
@@ -921,7 +930,7 @@ declare const VMenu: {
921
930
  [key: string]: any;
922
931
  }>) => void)[] | undefined;
923
932
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
924
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
933
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
925
934
  "v-slot:activator"?: false | ((arg: {
926
935
  isActive: boolean;
927
936
  props: Record<string, any>;
@@ -988,10 +997,11 @@ declare const VMenu: {
988
997
  maxWidth?: string | number | undefined;
989
998
  minHeight?: string | number | undefined;
990
999
  minWidth?: string | number | undefined;
1000
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
991
1001
  class?: any;
992
1002
  theme?: string | undefined;
993
1003
  contentClass?: any;
994
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
1004
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
995
1005
  closeDelay?: string | number | undefined;
996
1006
  openDelay?: string | number | undefined;
997
1007
  openOnClick?: boolean | undefined;
@@ -1033,6 +1043,7 @@ declare const VMenu: {
1033
1043
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
1034
1044
  }, {
1035
1045
  activatorEl: vue.Ref<HTMLElement | undefined>;
1046
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
1036
1047
  animateClick: () => void;
1037
1048
  contentEl: vue.Ref<HTMLElement | undefined>;
1038
1049
  globalTop: Readonly<vue.Ref<boolean>>;
@@ -1134,10 +1145,11 @@ declare const VMenu: {
1134
1145
  maxWidth?: string | number | undefined;
1135
1146
  minHeight?: string | number | undefined;
1136
1147
  minWidth?: string | number | undefined;
1148
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
1137
1149
  class?: any;
1138
1150
  theme?: string | undefined;
1139
1151
  contentClass?: any;
1140
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
1152
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
1141
1153
  closeDelay?: string | number | undefined;
1142
1154
  openDelay?: string | number | undefined;
1143
1155
  openOnClick?: boolean | undefined;
@@ -1179,12 +1191,13 @@ declare const VMenu: {
1179
1191
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
1180
1192
  } & vue.ShallowUnwrapRef<{
1181
1193
  activatorEl: vue.Ref<HTMLElement | undefined>;
1194
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
1182
1195
  animateClick: () => void;
1183
1196
  contentEl: vue.Ref<HTMLElement | undefined>;
1184
1197
  globalTop: Readonly<vue.Ref<boolean>>;
1185
1198
  localTop: vue.ComputedRef<boolean>;
1186
1199
  updateLocation: vue.Ref<((e: Event) => void) | undefined>;
1187
- }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>> & {} & vue.ComponentCustomProperties & {};
1200
+ }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "target" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>> & {} & vue.ComponentCustomProperties & {};
1188
1201
  __isFragment?: undefined;
1189
1202
  __isTeleport?: undefined;
1190
1203
  __isSuspense?: undefined;
@@ -1224,10 +1237,11 @@ declare const VMenu: {
1224
1237
  maxWidth?: string | number | undefined;
1225
1238
  minHeight?: string | number | undefined;
1226
1239
  minWidth?: string | number | undefined;
1240
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
1227
1241
  class?: any;
1228
1242
  theme?: string | undefined;
1229
1243
  contentClass?: any;
1230
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
1244
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
1231
1245
  openOnClick?: boolean | undefined;
1232
1246
  openOnFocus?: boolean | undefined;
1233
1247
  contentProps?: any;
@@ -1304,6 +1318,7 @@ declare const VMenu: {
1304
1318
  maxWidth?: string | number | undefined;
1305
1319
  minHeight?: string | number | undefined;
1306
1320
  minWidth?: string | number | undefined;
1321
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
1307
1322
  class?: any;
1308
1323
  onAfterLeave?: (() => any) | undefined;
1309
1324
  $children?: vue.VNodeChild | {
@@ -1373,7 +1388,7 @@ declare const VMenu: {
1373
1388
  [key: string]: any;
1374
1389
  }>) => void)[] | undefined;
1375
1390
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
1376
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
1391
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
1377
1392
  "v-slot:activator"?: false | ((arg: {
1378
1393
  isActive: boolean;
1379
1394
  props: Record<string, any>;
@@ -1440,10 +1455,11 @@ declare const VMenu: {
1440
1455
  maxWidth?: string | number | undefined;
1441
1456
  minHeight?: string | number | undefined;
1442
1457
  minWidth?: string | number | undefined;
1458
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
1443
1459
  class?: any;
1444
1460
  theme?: string | undefined;
1445
1461
  contentClass?: any;
1446
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
1462
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
1447
1463
  closeDelay?: string | number | undefined;
1448
1464
  openDelay?: string | number | undefined;
1449
1465
  openOnClick?: boolean | undefined;
@@ -1485,6 +1501,7 @@ declare const VMenu: {
1485
1501
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
1486
1502
  }, {
1487
1503
  activatorEl: vue.Ref<HTMLElement | undefined>;
1504
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
1488
1505
  animateClick: () => void;
1489
1506
  contentEl: vue.Ref<HTMLElement | undefined>;
1490
1507
  globalTop: Readonly<vue.Ref<boolean>>;
@@ -1586,10 +1603,11 @@ declare const VMenu: {
1586
1603
  maxWidth?: string | number | undefined;
1587
1604
  minHeight?: string | number | undefined;
1588
1605
  minWidth?: string | number | undefined;
1606
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
1589
1607
  class?: any;
1590
1608
  theme?: string | undefined;
1591
1609
  contentClass?: any;
1592
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
1610
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
1593
1611
  closeDelay?: string | number | undefined;
1594
1612
  openDelay?: string | number | undefined;
1595
1613
  openOnClick?: boolean | undefined;
@@ -1631,12 +1649,13 @@ declare const VMenu: {
1631
1649
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
1632
1650
  } & vue.ShallowUnwrapRef<{
1633
1651
  activatorEl: vue.Ref<HTMLElement | undefined>;
1652
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
1634
1653
  animateClick: () => void;
1635
1654
  contentEl: vue.Ref<HTMLElement | undefined>;
1636
1655
  globalTop: Readonly<vue.Ref<boolean>>;
1637
1656
  localTop: vue.ComputedRef<boolean>;
1638
1657
  updateLocation: vue.Ref<((e: Event) => void) | undefined>;
1639
- }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
1658
+ }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "target" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
1640
1659
  'update:modelValue': (value: boolean) => boolean;
1641
1660
  }, string, {
1642
1661
  location: Anchor;
@@ -1721,13 +1740,14 @@ declare const VMenu: {
1721
1740
  type: vue.PropType<vue.StyleValue>;
1722
1741
  default: null;
1723
1742
  };
1743
+ target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
1724
1744
  eager: BooleanConstructor;
1725
1745
  disabled: BooleanConstructor;
1726
1746
  class: vue.PropType<any>;
1727
1747
  theme: StringConstructor;
1728
1748
  contentClass: null;
1729
1749
  modelValue: BooleanConstructor;
1730
- activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
1750
+ activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
1731
1751
  locationStrategy: Omit<{
1732
1752
  type: vue.PropType<"connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
1733
1753
  updateLocation: (e: Event) => void;
@@ -1834,13 +1854,14 @@ declare const VMenu: {
1834
1854
  type: vue.PropType<vue.StyleValue>;
1835
1855
  default: null;
1836
1856
  };
1857
+ target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
1837
1858
  eager: BooleanConstructor;
1838
1859
  disabled: BooleanConstructor;
1839
1860
  class: vue.PropType<any>;
1840
1861
  theme: StringConstructor;
1841
1862
  contentClass: null;
1842
1863
  modelValue: BooleanConstructor;
1843
- activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
1864
+ activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
1844
1865
  locationStrategy: Omit<{
1845
1866
  type: vue.PropType<"connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
1846
1867
  updateLocation: (e: Event) => void;
package/lib/components/VOverlay/VOverlay.mjs CHANGED
@@ -123,6 +123,9 @@ export const VOverlay = genericComponent()({
123
123
  const {
124
124
  activatorEl,
125
125
  activatorRef,
126
+ target,
127
+ targetEl,
128
+ targetRef,
126
129
  activatorEvents,
127
130
  contentEvents,
128
131
  scrimEvents
@@ -148,13 +151,13 @@ export const VOverlay = genericComponent()({
148
151
  } = useLocationStrategies(props, {
149
152
  isRtl,
150
153
  contentEl,
151
- activatorEl,
154
+ target,
152
155
  isActive
153
156
  });
154
157
  useScrollStrategies(props, {
155
158
  root,
156
159
  contentEl,
157
- activatorEl,
160
+ targetEl,
158
161
  isActive,
159
162
  updateLocation
160
163
  });
@@ -222,7 +225,8 @@ export const VOverlay = genericComponent()({
222
225
  useRender(() => _createVNode(_Fragment, null, [slots.activator?.({
223
226
  isActive: isActive.value,
224
227
  props: mergeProps({
225
- ref: activatorRef
228
+ ref: activatorRef,
229
+ targetRef
226
230
  }, activatorEvents.value, props.activatorProps)
227
231
  }), isMounted.value && hasContent.value && _createVNode(Teleport, {
228
232
  "disabled": !teleportTarget.value,
@@ -245,7 +249,7 @@ export const VOverlay = genericComponent()({
245
249
  "appear": true,
246
250
  "persisted": true,
247
251
  "transition": props.transition,
248
- "target": activatorEl.value,
252
+ "target": target.value,
249
253
  "onAfterLeave": () => {
250
254
  onAfterLeave();
251
255
  emit('afterLeave');
@@ -266,6 +270,7 @@ export const VOverlay = genericComponent()({
266
270
  })]));
267
271
  return {
268
272
  activatorEl,
273
+ target,
269
274
  animateClick,
270
275
  contentEl,
271
276
  globalTop,
package/lib/components/VOverlay/VOverlay.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VOverlay.mjs","names":["makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeActivatorProps","useActivator","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useHydration","makeLazyProps","useLazy","useRtl","useProxiedModel","useBackButton","useRouter","useScopeId","useStack","useTeleport","makeThemeProps","provideTheme","useToggleScope","makeTransitionProps","MaybeTransition","ClickOutside","computed","mergeProps","ref","Teleport","toRef","Transition","watch","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","propsFactory","standardEasing","useRender","Scrim","props","modelValue","color","rest","_createVNode","default","_mergeProps","backgroundColorClasses","value","backgroundColorStyles","makeVOverlayProps","absolute","Boolean","attach","String","Object","closeOnBack","type","contained","contentClass","contentProps","disabled","noClickAnimation","persistent","scrim","zIndex","Number","VOverlay","name","directives","inheritAttrs","_disableGlobalStack","emits","e","afterLeave","setup","_ref","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","isMounted","scopeId","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","contains","document","activeElement","focus","router","next","top","scrollParent","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","_Fragment","activator","activatorProps","class","style","transition","_withDirectives","_vShow","_resolveDirective","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useHydration } from '@/composables/hydration'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n computed,\n mergeProps,\n ref,\n Teleport,\n toRef,\n Transition,\n watch,\n} from 'vue'\nimport {\n animate,\n convertToUnit,\n genericComponent,\n getScrollParent,\n IN_BROWSER,\n propsFactory,\n standardEasing,\n useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n [key: string]: unknown\n modelValue: boolean\n color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n const { modelValue, color, ...rest } = props\n return (\n <Transition name=\"fade-transition\" appear>\n { props.modelValue && (\n <div\n class={[\n 'v-overlay__scrim',\n props.color.backgroundColorClasses.value,\n ]}\n style={ props.color.backgroundColorStyles.value }\n { ...rest }\n />\n )}\n </Transition>\n )\n}\n\nexport type OverlaySlots = {\n default: { isActive: Ref<boolean> }\n activator: { isActive: boolean, props: Record<string, any> }\n}\n\nexport const makeVOverlayProps = propsFactory({\n absolute: Boolean,\n attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n closeOnBack: {\n type: Boolean,\n default: true,\n },\n contained: Boolean,\n contentClass: null,\n contentProps: null,\n disabled: Boolean,\n noClickAnimation: Boolean,\n modelValue: Boolean,\n persistent: Boolean,\n scrim: {\n type: [Boolean, String],\n default: true,\n },\n zIndex: {\n type: [Number, String],\n default: 2000,\n },\n\n ...makeActivatorProps(),\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeLazyProps(),\n ...makeLocationStrategyProps(),\n ...makeScrollStrategyProps(),\n ...makeThemeProps(),\n ...makeTransitionProps(),\n}, 'VOverlay')\n\nexport const VOverlay = genericComponent<OverlaySlots>()({\n name: 'VOverlay',\n\n directives: { ClickOutside },\n\n inheritAttrs: false,\n\n props: {\n _disableGlobalStack: Boolean,\n\n ...makeVOverlayProps(),\n },\n\n emits: {\n 'click:outside': (e: MouseEvent) => true,\n 'update:modelValue': (value: boolean) => true,\n afterLeave: () => true,\n },\n\n setup (props, { slots, attrs, emit }) {\n const model = useProxiedModel(props, 'modelValue')\n const isActive = computed({\n get: () => model.value,\n set: v => {\n if (!(v && props.disabled)) model.value = v\n },\n })\n const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n const { themeClasses } = provideTheme(props)\n const { rtlClasses, isRtl } = useRtl()\n const { hasContent, onAfterLeave } = useLazy(props, isActive)\n const scrimColor = useBackgroundColor(computed(() => {\n return typeof props.scrim === 'string' ? props.scrim : null\n }))\n const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack)\n const { activatorEl, activatorRef, activatorEvents, contentEvents, scrimEvents } = useActivator(props, { isActive, isTop: localTop })\n const { dimensionStyles } = useDimension(props)\n const isMounted = useHydration()\n const { scopeId } = useScopeId()\n\n watch(() => props.disabled, v => {\n if (v) isActive.value = false\n })\n\n const root = ref<HTMLElement>()\n const contentEl = ref<HTMLElement>()\n const { contentStyles, updateLocation } = useLocationStrategies(props, {\n isRtl,\n contentEl,\n activatorEl,\n isActive,\n })\n useScrollStrategies(props, {\n root,\n contentEl,\n activatorEl,\n isActive,\n updateLocation,\n })\n\n function onClickOutside (e: MouseEvent) {\n emit('click:outside', e)\n\n if (!props.persistent) isActive.value = false\n else animateClick()\n }\n\n function closeConditional () {\n return isActive.value && globalTop.value\n }\n\n IN_BROWSER && watch(isActive, val => {\n if (val) {\n window.addEventListener('keydown', onKeydown)\n } else {\n window.removeEventListener('keydown', onKeydown)\n }\n }, { immediate: true })\n\n function onKeydown (e: KeyboardEvent) {\n if (e.key === 'Escape' && globalTop.value) {\n if (!props.persistent) {\n isActive.value = false\n if (contentEl.value?.contains(document.activeElement)) {\n activatorEl.value?.focus()\n }\n } else animateClick()\n }\n }\n\n const router = useRouter()\n useToggleScope(() => props.closeOnBack, () => {\n useBackButton(router, next => {\n if (globalTop.value && isActive.value) {\n next(false)\n if (!props.persistent) isActive.value = false\n else animateClick()\n } else {\n next()\n }\n })\n })\n\n const top = ref<number>()\n watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n if (val) {\n const scrollParent = getScrollParent(root.value)\n if (scrollParent && scrollParent !== document.scrollingElement) {\n top.value = scrollParent.scrollTop\n }\n }\n })\n\n // Add a quick \"bounce\" animation to the content\n function animateClick () {\n if (props.noClickAnimation) return\n\n contentEl.value && animate(contentEl.value, [\n { transformOrigin: 'center' },\n { transform: 'scale(1.03)' },\n { transformOrigin: 'center' },\n ], {\n duration: 150,\n easing: standardEasing,\n })\n }\n\n useRender(() => (\n <>\n { slots.activator?.({\n isActive: isActive.value,\n props: mergeProps({\n ref: activatorRef,\n }, activatorEvents.value, props.activatorProps),\n })}\n\n { isMounted.value && hasContent.value && (\n <Teleport\n disabled={ !teleportTarget.value }\n to={ teleportTarget.value }\n >\n <div\n class={[\n 'v-overlay',\n {\n 'v-overlay--absolute': props.absolute || props.contained,\n 'v-overlay--active': isActive.value,\n 'v-overlay--contained': props.contained,\n },\n themeClasses.value,\n rtlClasses.value,\n props.class,\n ]}\n style={[\n stackStyles.value,\n { top: convertToUnit(top.value) },\n props.style,\n ]}\n ref={ root }\n { ...scopeId }\n { ...attrs }\n >\n <Scrim\n color={ scrimColor }\n modelValue={ isActive.value && !!props.scrim }\n { ...scrimEvents.value }\n />\n <MaybeTransition\n appear\n persisted\n transition={ props.transition }\n target={ activatorEl.value }\n onAfterLeave={ () => { onAfterLeave(); emit('afterLeave') } }\n >\n <div\n ref={ contentEl }\n v-show={ isActive.value }\n v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n class={[\n 'v-overlay__content',\n props.contentClass,\n ]}\n style={[\n dimensionStyles.value,\n contentStyles.value,\n ]}\n { ...contentEvents.value }\n { ...props.contentProps }\n >\n { slots.default?.({ isActive }) }\n </div>\n </MaybeTransition>\n </div>\n </Teleport>\n )}\n </>\n ))\n\n return {\n activatorEl,\n animateClick,\n contentEl,\n globalTop,\n localTop,\n updateLocation,\n }\n },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":"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"}
1
+ {"version":3,"file":"VOverlay.mjs","names":["makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeActivatorProps","useActivator","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useHydration","makeLazyProps","useLazy","useRtl","useProxiedModel","useBackButton","useRouter","useScopeId","useStack","useTeleport","makeThemeProps","provideTheme","useToggleScope","makeTransitionProps","MaybeTransition","ClickOutside","computed","mergeProps","ref","Teleport","toRef","Transition","watch","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","propsFactory","standardEasing","useRender","Scrim","props","modelValue","color","rest","_createVNode","default","_mergeProps","backgroundColorClasses","value","backgroundColorStyles","makeVOverlayProps","absolute","Boolean","attach","String","Object","closeOnBack","type","contained","contentClass","contentProps","disabled","noClickAnimation","persistent","scrim","zIndex","Number","VOverlay","name","directives","inheritAttrs","_disableGlobalStack","emits","e","afterLeave","setup","_ref","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","target","targetEl","targetRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","isMounted","scopeId","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","contains","document","activeElement","focus","router","next","top","scrollParent","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","_Fragment","activator","activatorProps","class","style","transition","_withDirectives","_vShow","_resolveDirective","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useHydration } from '@/composables/hydration'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n computed,\n mergeProps,\n ref,\n Teleport,\n toRef,\n Transition,\n watch,\n} from 'vue'\nimport {\n animate,\n convertToUnit,\n genericComponent,\n getScrollParent,\n IN_BROWSER,\n propsFactory,\n standardEasing,\n useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n [key: string]: unknown\n modelValue: boolean\n color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n const { modelValue, color, ...rest } = props\n return (\n <Transition name=\"fade-transition\" appear>\n { props.modelValue && (\n <div\n class={[\n 'v-overlay__scrim',\n props.color.backgroundColorClasses.value,\n ]}\n style={ props.color.backgroundColorStyles.value }\n { ...rest }\n />\n )}\n </Transition>\n )\n}\n\nexport type OverlaySlots = {\n default: { isActive: Ref<boolean> }\n activator: { isActive: boolean, props: Record<string, any> }\n}\n\nexport const makeVOverlayProps = propsFactory({\n absolute: Boolean,\n attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n closeOnBack: {\n type: Boolean,\n default: true,\n },\n contained: Boolean,\n contentClass: null,\n contentProps: null,\n disabled: Boolean,\n noClickAnimation: Boolean,\n modelValue: Boolean,\n persistent: Boolean,\n scrim: {\n type: [Boolean, String],\n default: true,\n },\n zIndex: {\n type: [Number, String],\n default: 2000,\n },\n\n ...makeActivatorProps(),\n ...makeComponentProps(),\n ...makeDimensionProps(),\n ...makeLazyProps(),\n ...makeLocationStrategyProps(),\n ...makeScrollStrategyProps(),\n ...makeThemeProps(),\n ...makeTransitionProps(),\n}, 'VOverlay')\n\nexport const VOverlay = genericComponent<OverlaySlots>()({\n name: 'VOverlay',\n\n directives: { ClickOutside },\n\n inheritAttrs: false,\n\n props: {\n _disableGlobalStack: Boolean,\n\n ...makeVOverlayProps(),\n },\n\n emits: {\n 'click:outside': (e: MouseEvent) => true,\n 'update:modelValue': (value: boolean) => true,\n afterLeave: () => true,\n },\n\n setup (props, { slots, attrs, emit }) {\n const model = useProxiedModel(props, 'modelValue')\n const isActive = computed({\n get: () => model.value,\n set: v => {\n if (!(v && props.disabled)) model.value = v\n },\n })\n const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n const { themeClasses } = provideTheme(props)\n const { rtlClasses, isRtl } = useRtl()\n const { hasContent, onAfterLeave } = useLazy(props, isActive)\n const scrimColor = useBackgroundColor(computed(() => {\n return typeof props.scrim === 'string' ? props.scrim : null\n }))\n const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack)\n const {\n activatorEl, activatorRef,\n target, targetEl, targetRef,\n activatorEvents,\n contentEvents,\n scrimEvents,\n } = useActivator(props, { isActive, isTop: localTop })\n const { dimensionStyles } = useDimension(props)\n const isMounted = useHydration()\n const { scopeId } = useScopeId()\n\n watch(() => props.disabled, v => {\n if (v) isActive.value = false\n })\n\n const root = ref<HTMLElement>()\n const contentEl = ref<HTMLElement>()\n const { contentStyles, updateLocation } = useLocationStrategies(props, {\n isRtl,\n contentEl,\n target,\n isActive,\n })\n useScrollStrategies(props, {\n root,\n contentEl,\n targetEl,\n isActive,\n updateLocation,\n })\n\n function onClickOutside (e: MouseEvent) {\n emit('click:outside', e)\n\n if (!props.persistent) isActive.value = false\n else animateClick()\n }\n\n function closeConditional () {\n return isActive.value && globalTop.value\n }\n\n IN_BROWSER && watch(isActive, val => {\n if (val) {\n window.addEventListener('keydown', onKeydown)\n } else {\n window.removeEventListener('keydown', onKeydown)\n }\n }, { immediate: true })\n\n function onKeydown (e: KeyboardEvent) {\n if (e.key === 'Escape' && globalTop.value) {\n if (!props.persistent) {\n isActive.value = false\n if (contentEl.value?.contains(document.activeElement)) {\n activatorEl.value?.focus()\n }\n } else animateClick()\n }\n }\n\n const router = useRouter()\n useToggleScope(() => props.closeOnBack, () => {\n useBackButton(router, next => {\n if (globalTop.value && isActive.value) {\n next(false)\n if (!props.persistent) isActive.value = false\n else animateClick()\n } else {\n next()\n }\n })\n })\n\n const top = ref<number>()\n watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n if (val) {\n const scrollParent = getScrollParent(root.value)\n if (scrollParent && scrollParent !== document.scrollingElement) {\n top.value = scrollParent.scrollTop\n }\n }\n })\n\n // Add a quick \"bounce\" animation to the content\n function animateClick () {\n if (props.noClickAnimation) return\n\n contentEl.value && animate(contentEl.value, [\n { transformOrigin: 'center' },\n { transform: 'scale(1.03)' },\n { transformOrigin: 'center' },\n ], {\n duration: 150,\n easing: standardEasing,\n })\n }\n\n useRender(() => (\n <>\n { slots.activator?.({\n isActive: isActive.value,\n props: mergeProps({\n ref: activatorRef,\n targetRef,\n }, activatorEvents.value, props.activatorProps),\n })}\n\n { isMounted.value && hasContent.value && (\n <Teleport\n disabled={ !teleportTarget.value }\n to={ teleportTarget.value }\n >\n <div\n class={[\n 'v-overlay',\n {\n 'v-overlay--absolute': props.absolute || props.contained,\n 'v-overlay--active': isActive.value,\n 'v-overlay--contained': props.contained,\n },\n themeClasses.value,\n rtlClasses.value,\n props.class,\n ]}\n style={[\n stackStyles.value,\n { top: convertToUnit(top.value) },\n props.style,\n ]}\n ref={ root }\n { ...scopeId }\n { ...attrs }\n >\n <Scrim\n color={ scrimColor }\n modelValue={ isActive.value && !!props.scrim }\n { ...scrimEvents.value }\n />\n <MaybeTransition\n appear\n persisted\n transition={ props.transition }\n target={ target.value }\n onAfterLeave={ () => { onAfterLeave(); emit('afterLeave') } }\n >\n <div\n ref={ contentEl }\n v-show={ isActive.value }\n v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n class={[\n 'v-overlay__content',\n props.contentClass,\n ]}\n style={[\n dimensionStyles.value,\n contentStyles.value,\n ]}\n { ...contentEvents.value }\n { ...props.contentProps }\n >\n { slots.default?.({ isActive }) }\n </div>\n </MaybeTransition>\n </div>\n </Teleport>\n )}\n </>\n ))\n\n return {\n activatorEl,\n target,\n animateClick,\n contentEl,\n globalTop,\n localTop,\n updateLocation,\n }\n },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":"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"}
package/lib/components/VOverlay/index.d.mts CHANGED
@@ -30,7 +30,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
30
30
 
31
31
  interface LocationStrategyData {
32
32
  contentEl: Ref<HTMLElement | undefined>;
33
- activatorEl: Ref<HTMLElement | undefined>;
33
+ target: Ref<HTMLElement | [x: number, y: number] | undefined>;
34
34
  isActive: Ref<boolean>;
35
35
  isRtl: Ref<boolean>;
36
36
  }
@@ -65,7 +65,7 @@ declare function connectedLocationStrategy(data: LocationStrategyData, props: St
65
65
  interface ScrollStrategyData {
66
66
  root: Ref<HTMLElement | undefined>;
67
67
  contentEl: Ref<HTMLElement | undefined>;
68
- activatorEl: Ref<HTMLElement | undefined>;
68
+ targetEl: Ref<HTMLElement | undefined>;
69
69
  isActive: Ref<boolean>;
70
70
  updateLocation: Ref<((e: Event) => void) | undefined>;
71
71
  }
@@ -123,6 +123,7 @@ declare const VOverlay: {
123
123
  maxWidth?: string | number | undefined;
124
124
  minHeight?: string | number | undefined;
125
125
  minWidth?: string | number | undefined;
126
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
126
127
  class?: any;
127
128
  onAfterLeave?: (() => any) | undefined;
128
129
  $children?: vue.VNodeChild | {
@@ -192,7 +193,7 @@ declare const VOverlay: {
192
193
  [key: string]: any;
193
194
  }>) => void)[] | undefined;
194
195
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
195
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
196
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
196
197
  "v-slot:activator"?: false | ((arg: {
197
198
  isActive: boolean;
198
199
  props: Record<string, any>;
@@ -259,10 +260,11 @@ declare const VOverlay: {
259
260
  maxWidth?: string | number | undefined;
260
261
  minHeight?: string | number | undefined;
261
262
  minWidth?: string | number | undefined;
263
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
262
264
  class?: any;
263
265
  theme?: string | undefined;
264
266
  contentClass?: any;
265
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
267
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
266
268
  closeDelay?: string | number | undefined;
267
269
  openDelay?: string | number | undefined;
268
270
  openOnClick?: boolean | undefined;
@@ -304,6 +306,7 @@ declare const VOverlay: {
304
306
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
305
307
  }, {
306
308
  activatorEl: Ref<HTMLElement | undefined>;
309
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
307
310
  animateClick: () => void;
308
311
  contentEl: Ref<HTMLElement | undefined>;
309
312
  globalTop: Readonly<Ref<boolean>>;
@@ -405,10 +408,11 @@ declare const VOverlay: {
405
408
  maxWidth?: string | number | undefined;
406
409
  minHeight?: string | number | undefined;
407
410
  minWidth?: string | number | undefined;
411
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
408
412
  class?: any;
409
413
  theme?: string | undefined;
410
414
  contentClass?: any;
411
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
415
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
412
416
  closeDelay?: string | number | undefined;
413
417
  openDelay?: string | number | undefined;
414
418
  openOnClick?: boolean | undefined;
@@ -450,6 +454,7 @@ declare const VOverlay: {
450
454
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
451
455
  } & vue.ShallowUnwrapRef<{
452
456
  activatorEl: Ref<HTMLElement | undefined>;
457
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
453
458
  animateClick: () => void;
454
459
  contentEl: Ref<HTMLElement | undefined>;
455
460
  globalTop: Readonly<Ref<boolean>>;
@@ -492,10 +497,11 @@ declare const VOverlay: {
492
497
  maxWidth?: string | number | undefined;
493
498
  minHeight?: string | number | undefined;
494
499
  minWidth?: string | number | undefined;
500
+ target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
495
501
  class?: any;
496
502
  theme?: string | undefined;
497
503
  contentClass?: any;
498
- activator?: string | Element | vue.ComponentPublicInstance | undefined;
504
+ activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
499
505
  closeDelay?: string | number | undefined;
500
506
  openDelay?: string | number | undefined;
501
507
  openOnClick?: boolean | undefined;
@@ -537,6 +543,7 @@ declare const VOverlay: {
537
543
  "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
538
544
  }, {
539
545
  activatorEl: Ref<HTMLElement | undefined>;
546
+ target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
540
547
  animateClick: () => void;
541
548
  contentEl: Ref<HTMLElement | undefined>;
542
549
  globalTop: Readonly<Ref<boolean>>;
@@ -629,7 +636,8 @@ declare const VOverlay: {
629
636
  };
630
637
  closeDelay: (StringConstructor | NumberConstructor)[];
631
638
  openDelay: (StringConstructor | NumberConstructor)[];
632
- activator: PropType<string | Element | vue.ComponentPublicInstance | undefined>;
639
+ target: PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
640
+ activator: PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
633
641
  activatorProps: {
634
642
  type: PropType<Record<string, any>>;
635
643
  default: () => {};
@@ -710,7 +718,8 @@ declare const VOverlay: {
710
718
  };
711
719
  closeDelay: (StringConstructor | NumberConstructor)[];
712
720
  openDelay: (StringConstructor | NumberConstructor)[];
713
- activator: PropType<string | Element | vue.ComponentPublicInstance | undefined>;
721
+ target: PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
722
+ activator: PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
714
723
  activatorProps: {
715
724
  type: PropType<Record<string, any>>;
716
725
  default: () => {};
package/lib/components/VOverlay/locationStrategies.mjs CHANGED
@@ -3,7 +3,7 @@ import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
3
3
  import { computed, nextTick, onScopeDispose, ref, watch } from 'vue';
4
4
  import { anchorToPoint, getOffset } from "./util/point.mjs";
5
5
  import { clamp, consoleError, convertToUnit, destructComputed, flipAlign, flipCorner, flipSide, getAxis, getScrollParents, IN_BROWSER, isFixedPosition, nullifyTransforms, parseAnchor, propsFactory } from "../../util/index.mjs";
6
- import { Box, getOverflow } from "../../util/box.mjs"; // Types
6
+ import { Box, getOverflow, getTargetBox } from "../../util/box.mjs"; // Types
7
7
  const locationStrategies = {
8
8
  static: staticLocationStrategy,
9
9
  // specific viewport position, usually centered
@@ -101,7 +101,7 @@ function getIntrinsicSize(el, isRtl) {
101
101
  return contentBox;
102
102
  }
103
103
  function connectedLocationStrategy(data, props, contentStyles) {
104
- const activatorFixed = isFixedPosition(data.activatorEl.value);
104
+ const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);
105
105
  if (activatorFixed) {
106
106
  Object.assign(contentStyles.value, {
107
107
  position: 'fixed',
@@ -150,11 +150,11 @@ function connectedLocationStrategy(data, props, contentStyles) {
150
150
  const observer = new ResizeObserver(() => {
151
151
  if (observe) updateLocation();
152
152
  });
153
- watch([data.activatorEl, data.contentEl], (_ref, _ref2) => {
154
- let [newActivatorEl, newContentEl] = _ref;
155
- let [oldActivatorEl, oldContentEl] = _ref2;
156
- if (oldActivatorEl) observer.unobserve(oldActivatorEl);
157
- if (newActivatorEl) observer.observe(newActivatorEl);
153
+ watch([data.target, data.contentEl], (_ref, _ref2) => {
154
+ let [newTarget, newContentEl] = _ref;
155
+ let [oldTarget, oldContentEl] = _ref2;
156
+ if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);
157
+ if (newTarget && !Array.isArray(newTarget)) observer.observe(newTarget);
158
158
  if (oldContentEl) observer.unobserve(oldContentEl);
159
159
  if (newContentEl) observer.observe(newContentEl);
160
160
  }, {
@@ -170,8 +170,8 @@ function connectedLocationStrategy(data, props, contentStyles) {
170
170
  requestAnimationFrame(() => {
171
171
  requestAnimationFrame(() => observe = true);
172
172
  });
173
- if (!data.activatorEl.value || !data.contentEl.value) return;
174
- const targetBox = data.activatorEl.value.getBoundingClientRect();
173
+ if (!data.target.value || !data.contentEl.value) return;
174
+ const targetBox = getTargetBox(data.target.value);
175
175
  const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
176
176
  const scrollParents = getScrollParents(data.contentEl.value);
177
177
  const viewportMargin = 12;