v-calendar-3 1.0.1 → 1.1.1

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.0.1`
+Current version: `1.1.1`
 
 ## Features
 
@@ -17,6 +17,7 @@ Current version: `1.0.1`
 - 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, {
@@ -112,7 +117,7 @@ const attributes = [
 <template>
   <Calendar :attributes="attributes" />
   <DatePicker v-model="selectedDate" />
-  <DatePicker v-model.range="range" />
+  <DatePicker v-model.range="range" :rows="2" />
 </template>
 ```
 
@@ -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
@@ -139,6 +151,13 @@ ranges and the `mode` prop when time selection is required.
 <DatePicker v-model="time" mode="time" is24hr />
 ```
 
+`rows="2"` with the default `columns="1"` is the two-month period layout. It
+renders both months horizontally with a complete navigation header and a
+month/year picker on each pane. The displayed months remain consecutive, and
+each pane includes muted leading and trailing dates from adjacent months so its
+week rows are complete. With `trim-weeks`, both period panes are balanced to the
+larger visible week count.
+
 The `string` and `number` model modifiers are also supported. Numeric values use
 JavaScript timestamp milliseconds.
 
@@ -234,6 +253,7 @@ styles to internal selectors.
   --vc-day-min-height: 1.75rem;
   --vc-day-content-width: 1.75rem;
   --vc-day-content-height: 1.75rem;
+  --vc-day-content-outside-month-opacity: 0.6;
   --vc-highlight-width: 1.75rem;
   --vc-highlight-height: 1.75rem;
   --vc-header-margin-top: 0;

package/dist/cjs/index.css

@@ -163,6 +163,8 @@
 
 .vc-header {
   display: grid;
+  width: 100%;
+  min-width: 0;
   grid-gap: var(--vc-header-gap);
   align-items: center;
   height: var(--vc-header-height);
@@ -181,6 +183,8 @@
 .vc-header .vc-title-wrapper {
     grid-row: 1;
     grid-column: title;
+    min-width: 0;
+    justify-self: center;
 }
 .vc-header .vc-prev {
     grid-row: 1;
@@ -208,6 +212,9 @@
     font-weight: var(--vc-font-semibold);
     text-transform: var(--vc-header-title-text-transform);
     white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
     padding: var(--vc-header-title-padding);
     margin: 0;
     line-height: var(--vc-header-title-line-height);
@@ -303,15 +310,13 @@
   position: relative;
   min-height: var(--vc-day-min-height);
   z-index: 1;
-  /* &.is-not-in-month * {
-    opacity: 0;
-    pointer-events: none;
-  } */
 }
 .vc-monthly .is-not-in-month * {
-  opacity: 0;
   pointer-events: none;
 }
+.vc-monthly .is-not-in-month .vc-day-content {
+  opacity: var(--vc-day-content-outside-month-opacity);
+}
 .vc-day-layer {
   position: absolute;
   left: 0;
@@ -855,6 +860,7 @@
   --vc-day-content-width: 28px;
   --vc-day-content-height: 28px;
   --vc-day-content-line-height: 28px;
+  --vc-day-content-outside-month-opacity: 0.6;
   --vc-highlight-width: var(--vc-day-content-width);
   --vc-highlight-height: var(--vc-day-content-height);
 

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",
@@ -8007,6 +8010,9 @@ function createCalendar(props, { slots, emit }) {
 	provideSlots(slots);
 	const { theme, color, displayMode, locale, masks, minDate, maxDate, normalizedMinDate, normalizedMaxDate, disabledAttribute, disabledDates } = useOrCreateBase(props);
 	const count = (0, vue.computed)(() => props.rows * props.columns);
+	const isPeriodLayout = (0, vue.computed)(() => props.rows === 2 && props.columns === 1);
+	const layoutRows = (0, vue.computed)(() => isPeriodLayout.value ? 1 : props.rows);
+	const layoutColumns = (0, vue.computed)(() => isPeriodLayout.value ? 2 : props.columns);
 	const step = (0, vue.computed)(() => props.step || count.value);
 	const firstPage = (0, vue.computed)(() => (0, import_head.default)(_pages.value) ?? null);
 	const lastPage = (0, vue.computed)(() => (0, import_last.default)(_pages.value) ?? null);
@@ -8139,10 +8145,10 @@ function createCalendar(props, { slots, emit }) {
 			for (let i = 0; i < count.value; i++) {
 				const newPage = addPages$1(fromPage, i);
 				const position = i + 1;
-				const row = Math.ceil(position / props.columns);
-				const rowFromEnd = props.rows - row + 1;
-				const column = position % props.columns || props.columns;
-				const columnFromEnd = props.columns - column + 1;
+				const row = Math.ceil(position / layoutColumns.value);
+				const rowFromEnd = layoutRows.value - row + 1;
+				const column = position % layoutColumns.value || layoutColumns.value;
+				const columnFromEnd = layoutColumns.value - column + 1;
 				const weeknumberPosition = getWeeknumberPosition(column, columnFromEnd);
 				pages.push(locale.value.getPage({
 					...newPage,
@@ -8159,6 +8165,12 @@ function createCalendar(props, { slots, emit }) {
 					weeknumberPosition
 				}));
 			}
+			if (isPeriodLayout.value && isMonthly.value) {
+				const weekCount = Math.max(...pages.map((currentPage) => currentPage.viewWeeks.length));
+				pages.forEach((currentPage) => {
+					currentPage.viewWeeks = currentPage.weeks.slice(0, weekCount);
+				});
+			}
 			transitionName.value = getPageTransition(_pages.value[0], pages[0], transition);
 			_pages.value = pages;
 			if (transitionName.value && transitionName.value !== "none") transitionPromise = {
@@ -8216,6 +8228,14 @@ function createCalendar(props, { slots, emit }) {
 	const moveNext = () => {
 		return moveBy(step.value);
 	};
+	const canMovePeriodPrev = (0, vue.computed)(() => canMoveBy(-1));
+	const canMovePeriodNext = (0, vue.computed)(() => canMoveBy(1));
+	const movePeriodPrev = () => {
+		return moveBy(-1);
+	};
+	const movePeriodNext = () => {
+		return moveBy(1);
+	};
 	const tryFocusDate = (date) => {
 		const inMonth = isMonthly.value ? ".in-month" : "";
 		const daySelector = `.id-${locale.value.getDayId(date)}${inMonth}`;
@@ -8317,7 +8337,11 @@ function createCalendar(props, { slots, emit }) {
 	(0, vue.watch)(() => locale.value, () => {
 		refreshPages();
 	});
-	(0, vue.watch)(() => count.value, () => refreshPages());
+	(0, vue.watch)([
+		count,
+		layoutRows,
+		layoutColumns
+	], () => refreshPages());
 	(0, vue.watch)(() => props.view, () => _view.value = props.view);
 	(0, vue.watch)(() => _view.value, () => {
 		handleWatcher("view", () => {
@@ -8358,6 +8382,9 @@ function createCalendar(props, { slots, emit }) {
 		dayCells,
 		count,
 		step,
+		isPeriodLayout,
+		layoutRows,
+		layoutColumns,
 		firstPage,
 		lastPage,
 		canMovePrev,
@@ -8377,6 +8404,10 @@ function createCalendar(props, { slots, emit }) {
 		moveBy,
 		movePrev,
 		moveNext,
+		canMovePeriodPrev,
+		canMovePeriodNext,
+		movePeriodPrev,
+		movePeriodNext,
 		onTransitionBeforeEnter,
 		onTransitionAfterEnter,
 		tryFocusDate,
@@ -8940,11 +8971,16 @@ var CalendarHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		isXl: { type: Boolean },
 		is2xl: { type: Boolean },
 		hideTitle: { type: Boolean },
-		hideArrows: { type: Boolean }
+		hideArrows: { type: Boolean },
+		periodNavigation: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
-		const { navPopoverId, navVisibility, canMovePrev, movePrev, canMoveNext, moveNext } = useCalendar();
+		const { navPopoverId, navVisibility, canMovePrev, movePrev, canMoveNext, moveNext, canMovePeriodPrev, canMovePeriodNext, movePeriodPrev, movePeriodNext } = useCalendar();
+		const canMovePrev_ = (0, vue.computed)(() => props.periodNavigation ? canMovePeriodPrev.value : canMovePrev.value);
+		const canMoveNext_ = (0, vue.computed)(() => props.periodNavigation ? canMovePeriodNext.value : canMoveNext.value);
+		const movePrev_ = () => props.periodNavigation ? movePeriodPrev() : movePrev();
+		const moveNext_ = () => props.periodNavigation ? movePeriodNext() : moveNext();
 		const navPlacement = (0, vue.computed)(() => {
 			switch (props.page.titlePosition) {
 				case "left": return "bottom-start";
@@ -8982,6 +9018,7 @@ var CalendarHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			};
 		});
 		const gridStyle = (0, vue.computed)(() => {
+			if (props.periodNavigation && !props.layout) return { gridTemplateColumns: "[prev] auto [title] minmax(0, 1fr) [next] auto" };
 			return { gridTemplateColumns: layout_.value.split("").map((l) => {
 				switch (l) {
 					case "p": return "[prev] auto";
@@ -9005,12 +9042,12 @@ var CalendarHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					type: "button",
 					class: "vc-arrow vc-prev vc-focus",
-					disabled: !(0, vue.unref)(canMovePrev),
-					onClick: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(movePrev) && (0, vue.unref)(movePrev)(...args)),
-					onKeydown: _cache[1] || (_cache[1] = (0, vue.withKeys)((...args) => (0, vue.unref)(movePrev) && (0, vue.unref)(movePrev)(...args), ["space", "enter"]))
+					disabled: !canMovePrev_.value,
+					onClick: movePrev_,
+					onKeydown: (0, vue.withKeys)(movePrev_, ["space", "enter"])
 				}, [(0, vue.createVNode)(CalendarSlot_default, {
 					name: "header-prev-button",
-					disabled: !(0, vue.unref)(canMovePrev)
+					disabled: !canMovePrev_.value
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(BaseIcon_default, {
 						name: "ChevronLeft",
@@ -9032,12 +9069,12 @@ var CalendarHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 2,
 					type: "button",
 					class: "vc-arrow vc-next vc-focus",
-					disabled: !(0, vue.unref)(canMoveNext),
-					onClick: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(moveNext) && (0, vue.unref)(moveNext)(...args)),
-					onKeydown: _cache[3] || (_cache[3] = (0, vue.withKeys)((...args) => (0, vue.unref)(moveNext) && (0, vue.unref)(moveNext)(...args), ["space", "enter"]))
+					disabled: !canMoveNext_.value,
+					onClick: moveNext_,
+					onKeydown: (0, vue.withKeys)(moveNext_, ["space", "enter"])
 				}, [(0, vue.createVNode)(CalendarSlot_default, {
 					name: "header-next-button",
-					disabled: !(0, vue.unref)(canMoveNext)
+					disabled: !canMoveNext_.value
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(BaseIcon_default, {
 						name: "ChevronRight",
@@ -9524,7 +9561,7 @@ var CalendarPage_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CalendarPage",
 	setup(__props) {
 		const { page } = usePage();
-		const { onWeeknumberClick } = useCalendar();
+		const { isPeriodLayout, onWeeknumberClick } = useCalendar();
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				class: (0, vue.normalizeClass)([
@@ -9538,8 +9575,13 @@ var CalendarPage_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [(0, vue.createVNode)(CalendarHeader_default, {
 				page: (0, vue.unref)(page),
 				"is-lg": "",
-				"hide-arrows": ""
-			}, null, 8, ["page"]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["vc-weeks", { [`vc-show-weeknumbers-${(0, vue.unref)(page).weeknumberPosition}`]: (0, vue.unref)(page).weeknumberPosition }]) }, [(0, vue.createElementVNode)("div", _hoisted_1$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(page).weekdays, ({ weekday, label }, i) => {
+				"hide-arrows": !(0, vue.unref)(isPeriodLayout),
+				"period-navigation": (0, vue.unref)(isPeriodLayout)
+			}, null, 8, [
+				"page",
+				"hide-arrows",
+				"period-navigation"
+			]), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["vc-weeks", { [`vc-show-weeknumbers-${(0, vue.unref)(page).weeknumberPosition}`]: (0, vue.unref)(page).weeknumberPosition }]) }, [(0, vue.createElementVNode)("div", _hoisted_1$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(page).weekdays, ({ weekday, label }, i) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: i,
 					class: (0, vue.normalizeClass)(`vc-weekday vc-weekday-${weekday}`)
@@ -9586,7 +9628,10 @@ var Calendar_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/Calendar/Calendar.vue
-var _hoisted_1$2 = { class: "vc-pane-header-wrapper" };
+var _hoisted_1$2 = {
+	key: 0,
+	class: "vc-pane-header-wrapper"
+};
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_CalendarHeader = (0, vue.resolveComponent)("CalendarHeader");
 	const _component_CalendarPage = (0, vue.resolveComponent)("CalendarPage");
@@ -9610,12 +9655,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 			onMouseup: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
 			ref: "containerRef"
 		}), [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["vc-pane-container", { "in-transition": _ctx.inTransition }]) }, [
-			(0, vue.createElementVNode)("div", _hoisted_1$2, [_ctx.firstPage ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_CalendarHeader, {
+			!_ctx.isPeriodLayout ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$2, [_ctx.firstPage ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_CalendarHeader, {
 				key: 0,
 				page: _ctx.firstPage,
 				"is-lg": "",
 				"hide-title": ""
-			}, null, 8, ["page"])) : (0, vue.createCommentVNode)("", true)]),
+			}, null, 8, ["page"])) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true),
 			(0, vue.createVNode)(vue.Transition, {
 				name: `vc-${_ctx.transitionName}`,
 				onBeforeEnter: _ctx.onTransitionBeforeEnter,
@@ -9624,7 +9669,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: _ctx.pages[0].id,
 					class: "vc-pane-layout",
-					style: (0, vue.normalizeStyle)({ gridTemplateColumns: `repeat(${_ctx.columns}, 1fr)` })
+					style: (0, vue.normalizeStyle)({ gridTemplateColumns: `repeat(${_ctx.layoutColumns}, 1fr)` })
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.pages, (page) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_CalendarPageProvider, {
 						key: page.id,
@@ -9658,6 +9703,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"
@@ -10639,6 +10685,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,
@@ -10650,8 +10697,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
 		};
 	}
@@ -10661,7 +10710,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