v-calendar-3 1.0.1 → 1.1.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.0.1`
+Current version: `1.1.0`
 
 ## Features
 
@@ -112,7 +112,7 @@ const attributes = [
 <template>
   <Calendar :attributes="attributes" />
   <DatePicker v-model="selectedDate" />
-  <DatePicker v-model.range="range" />
+  <DatePicker v-model.range="range" :rows="2" />
 </template>
 ```
 
@@ -139,6 +139,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 +241,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

@@ -8007,6 +8007,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 +8142,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 +8162,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 +8225,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 +8334,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 +8379,9 @@ function createCalendar(props, { slots, emit }) {
 		dayCells,
 		count,
 		step,
+		isPeriodLayout,
+		layoutRows,
+		layoutColumns,
 		firstPage,
 		lastPage,
 		canMovePrev,
@@ -8377,6 +8401,10 @@ function createCalendar(props, { slots, emit }) {
 		moveBy,
 		movePrev,
 		moveNext,
+		canMovePeriodPrev,
+		canMovePeriodNext,
+		movePeriodPrev,
+		movePeriodNext,
 		onTransitionBeforeEnter,
 		onTransitionAfterEnter,
 		tryFocusDate,
@@ -8940,11 +8968,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 +9015,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 +9039,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 +9066,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 +9558,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 +9572,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 +9625,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 +9652,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 +9666,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,