v-calendar-3 1.1.1 → 1.2.0

package/README.md

@@ -4,7 +4,7 @@ A maintained Vue 3 calendar and date picker with TypeScript declarations,
 timezone support, keyboard navigation, touch interaction, and responsive theme
 handling.
 
-Current version: `1.1.1`
+Current version: `1.2.0`
 
 ## Features
 
@@ -187,6 +187,19 @@ visibility.
 For a range picker, `inputValue` and `inputEvents` contain separate `start` and
 `end` properties.
 
+If an ancestor clips overflow, teleport the popover to the trigger's document
+body. This also works when the date picker is mounted inside an iframe.
+
+```vue
+<VDatePicker
+  v-model="date"
+  :popover="{
+    visibility: 'hover-focus',
+    teleport: true,
+  }"
+/>
+```
+
 ## Bounds and disabled dates
 
 `min-date`, `max-date`, `disabled-dates`, and attribute dates accept native

package/dist/cjs/index.js

@@ -8480,7 +8480,12 @@ var Popover_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 			isHovered: false,
 			isFocused: false,
 			autoHide: false,
-			force: false
+			force: false,
+			teleport: false
+		});
+		const teleportTarget = (0, vue.computed)(() => {
+			if (!state.teleport) return null;
+			return resolveEl(state.target)?.ownerDocument?.body ?? null;
 		});
 		function updateDirection(placement) {
 			if (placement) state.direction = placement.split("-")[0];
@@ -8700,6 +8705,7 @@ var Popover_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 		return {
 			...(0, vue.toRefs)(state),
 			popoverRef,
+			teleportTarget,
 			alignment,
 			hide,
 			setupPopper,
@@ -8725,7 +8731,10 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#endregion
 //#region src/components/Popover/Popover.vue
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+	return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+		to: _ctx.teleportTarget,
+		disabled: _ctx.teleportTarget == null
+	}, [(0, vue.createElementVNode)("div", {
 		class: (0, vue.normalizeClass)(["vc-popover-content-wrapper", { "is-interactive": _ctx.isInteractive }]),
 		ref: "popoverRef",
 		onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
@@ -8762,7 +8771,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
 		"onAfterEnter",
 		"onBeforeLeave",
 		"onAfterLeave"
-	])], 34);
+	])], 34)], 8, ["to", "disabled"]);
 }
 var Popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Popover_vue_vue_type_script_lang_default, [["render", _sfc_render$7]]);
 //#endregion