v-calendar-3 1.1.0 → 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.0`
+Current version: `1.2.0`
 
 ## Features
 
@@ -17,6 +17,7 @@ Current version: `1.1.0`
 - Keyboard navigation, Escape handling, Pointer Events, and touch support
 - SSR-safe browser access and iframe-aware theme/popover handling
 - ESM, Node ESM, CommonJS, IIFE, CSS, and TypeScript declaration builds
+- Vue component metadata for PhpStorm and other JetBrains IDEs
 
 ## Requirements
 
@@ -75,6 +76,10 @@ const selectedDate = ref<Date | null>(new Date());
 ```
 
 The component prefix defaults to `V` and can be changed during plugin setup.
+The package publishes global component types for the default `VCalendar`,
+`VDatePicker`, `VPopover`, and `VPopoverRow` names. Custom prefixes are runtime
+configuration and must be declared in the consuming application's
+`GlobalComponents` interface if template autocomplete is required.
 
 ```ts
 app.use(VCalendar, {
@@ -127,6 +132,13 @@ app.use(setupCalendar, {
 });
 ```
 
+The package ships both Vue TypeScript declarations and JetBrains Web Types.
+PhpStorm can therefore complete component props and navigate from imported
+`Calendar` and `DatePicker` tags to their declarations without application-side
+shims. After changing between local `file:` package versions, let the package
+manager refresh the link and ask PhpStorm to reload the project indexes if it
+still shows cached generic Vue metadata.
+
 ## Date picker modes
 
 The default model is a JavaScript `Date`. Use the `range` modifier for date
@@ -175,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

@@ -7929,8 +7929,7 @@ function useSlot(slotKey) {
 }
 //#endregion
 //#region src/use/calendar.ts
-var propsDef$1 = {
-	...propsDef$2,
+var calendarPropsDef = {
 	view: {
 		type: String,
 		default: "monthly",
@@ -7976,6 +7975,10 @@ var propsDef$1 = {
 	trimWeeks: Boolean,
 	disablePageSwipe: Boolean
 };
+var propsDef$1 = {
+	...propsDef$2,
+	...calendarPropsDef
+};
 var emitsDef = [
 	"dayclick",
 	"daymouseenter",
@@ -8477,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];
@@ -8697,6 +8705,7 @@ var Popover_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 		return {
 			...(0, vue.toRefs)(state),
 			popoverRef,
+			teleportTarget,
 			alignment,
 			hide,
 			setupPopper,
@@ -8722,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)),
@@ -8759,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
@@ -9700,6 +9712,7 @@ var Calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Calendar_
 var contextKey = Symbol("__vc_date_picker_context__");
 var propsDef = {
 	...propsDef$2,
+	...calendarPropsDef,
 	mode: {
 		type: String,
 		default: "date"
@@ -10681,6 +10694,7 @@ var DatePickerPopover_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/DatePicker/DatePicker.vue?vue&type=script&lang.ts
+var forwardedCalendarPropNames = Object.keys(calendarPropsDef).filter((name) => name !== "attributes");
 var DatePicker_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 	inheritAttrs: false,
 	emits,
@@ -10692,8 +10706,10 @@ var DatePicker_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 	setup(props, ctx) {
 		const datePicker = createDatePicker(props, ctx);
 		const slotCtx = (0, vue.reactive)(omit(datePicker, "calendarRef", "popoverRef"));
+		const forwardedCalendarProps = (0, vue.computed)(() => Object.fromEntries(forwardedCalendarPropNames.map((name) => [name, props[name]])));
 		return {
 			...datePicker,
+			forwardedCalendarProps,
 			slotCtx
 		};
 	}
@@ -10703,7 +10719,13 @@ var DatePicker_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_DatePickerPopover = (0, vue.resolveComponent)("DatePickerPopover");
 	const _component_DatePickerBase = (0, vue.resolveComponent)("DatePickerBase");
-	return _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(_ctx.slotCtx))), (0, vue.createVNode)(_component_DatePickerPopover, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(_ctx.$attrs)), null, 16)], 64)) : ((0, vue.openBlock)(), (0, vue.createBlock)(_component_DatePickerBase, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, _ctx.$attrs)), null, 16));
+	return _ctx.$slots.default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(_ctx.slotCtx))), (0, vue.createVNode)(_component_DatePickerPopover, (0, vue.normalizeProps)((0, vue.guardReactiveProps)({
+		..._ctx.forwardedCalendarProps,
+		..._ctx.$attrs
+	})), null, 16)], 64)) : ((0, vue.openBlock)(), (0, vue.createBlock)(_component_DatePickerBase, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, {
+		..._ctx.forwardedCalendarProps,
+		..._ctx.$attrs
+	})), null, 16));
 }
 var DatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(DatePicker_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion