loon-bulma-react 2026.0.67 → 2026.0.68

package/dist/components/Calendar/Mini/MiniView.d.ts

@@ -1,9 +1,13 @@
 import { JSDateTime } from './../../../utils/JSDateTime.class';
 import { Locale } from 'date-fns';
 import React from 'react';
+import { CalendarType } from '../Props';
 type MiniViewProps = {
     /** de viewDate waarop de mini-view start (optioneel, default = vandaag) */
     viewDate?: JSDateTime | Date;
+    /** de geselecteerde datum (optioneel, default = undefined) */
+    selectedDate?: JSDateTime | Date | undefined;
+    selectedViewType?: CalendarType | undefined;
     /** opties voor de weergave van de view */
     options?: MiniViewOptions;
     /** callback voor een geselecteerde datum (JS Date) */
@@ -21,5 +25,5 @@ type MiniViewOptions = {
     dateFormat?: string;
     locale?: Locale;
 };
-export declare function MiniView({ viewDate: vd, options: opts, onDateSelected, onJSDateTimeSelected }: MiniViewProps): React.JSX.Element;
+export declare function MiniView({ viewDate: vd, selectedDate, selectedViewType, options: opts, onDateSelected, onJSDateTimeSelected }: MiniViewProps): React.JSX.Element;
 export {};

package/dist/index.js

@@ -13158,17 +13158,18 @@ var Qg = {
 	isAfter(e, t = !1) {
 		return t ? this._date.valueOf() >= e.valueOf() : this._date.valueOf() > e.valueOf();
 	}
-	hasSame(e, t = "millisecond") {
-		let n = new Date(e.valueOf());
-		switch (t) {
-			case "year": return this.yr === n.getFullYear();
-			case "month": return this.yr === n.getFullYear() && this.m === n.getMonth() + 1;
-			case "day": return this.yr === n.getFullYear() && this.m === n.getMonth() + 1 && this.d === n.getDate();
-			case "hour": return this.yr === n.getFullYear() && this.m === n.getMonth() + 1 && this.d === n.getDate() && this.hr === n.getHours();
-			case "minute": return this.yr === n.getFullYear() && this.m === n.getMonth() + 1 && this.d === n.getDate() && this.hr === n.getHours() && this.min === n.getMinutes();
-			case "second": return this.yr === n.getFullYear() && this.m === n.getMonth() + 1 && this.d === n.getDate() && this.hr === n.getHours() && this.min === n.getMinutes() && this.sec === n.getSeconds();
-			case "millisecond": return this.valueOf() === n.valueOf();
-			default: throw Error(`invalid period '${t}' for hasSame()`);
+	hasSame(t, n = "millisecond") {
+		let r = new Date(t.valueOf());
+		switch (n) {
+			case "year": return this.yr === r.getFullYear();
+			case "month": return this.yr === r.getFullYear() && this.m === r.getMonth() + 1;
+			case "week": return this.yr === r.getFullYear() && this.weekNr === e.fromDate(r).weekNr;
+			case "day": return this.yr === r.getFullYear() && this.m === r.getMonth() + 1 && this.d === r.getDate();
+			case "hour": return this.yr === r.getFullYear() && this.m === r.getMonth() + 1 && this.d === r.getDate() && this.hr === r.getHours();
+			case "minute": return this.yr === r.getFullYear() && this.m === r.getMonth() + 1 && this.d === r.getDate() && this.hr === r.getHours() && this.min === r.getMinutes();
+			case "second": return this.yr === r.getFullYear() && this.m === r.getMonth() + 1 && this.d === r.getDate() && this.hr === r.getHours() && this.min === r.getMinutes() && this.sec === r.getSeconds();
+			case "millisecond": return this.valueOf() === r.valueOf();
+			default: throw Error(`invalid period '${n}' for hasSame()`);
 		}
 	}
 	equals(t) {
@@ -16754,12 +16755,12 @@ var Qy = {
 	dateFormat: "EEEE dd MMMM yyyy",
 	locale: n_
 };
-function $y({ viewDate: e = r_.now(), options: n, onDateSelected: r, onJSDateTimeSelected: i }) {
-	let a = t.useMemo(() => r_.now(), []), [o, s] = t.useState(e instanceof Date ? r_.fromDate(e) : e);
+function $y({ viewDate: e = r_.now(), selectedDate: n = void 0, selectedViewType: r = void 0, options: i, onDateSelected: a, onJSDateTimeSelected: o }) {
+	let s = t.useMemo(() => r_.now(), []), [c, l] = t.useState(e instanceof Date ? r_.fromDate(e) : e);
 	t.useEffect(() => {
-		s(e instanceof Date ? r_.fromDate(e) : e);
+		l(e instanceof Date ? r_.fromDate(e) : e);
 	}, [e]);
-	function c(e) {
+	function u(e) {
 		return [
 			e.weekNr.toString(),
 			e,
@@ -16771,21 +16772,33 @@ function $y({ viewDate: e = r_.now(), options: n, onDateSelected: r, onJSDateTim
 			e.plus({ days: 6 })
 		];
 	}
-	function l(e) {
-		typeof e != "string" && (r && r(e.JSDate), i && i(e));
+	function d(e) {
+		typeof e != "string" && (a && a(e.JSDate), o && o(e));
 	}
-	let u = t.useMemo(() => ({
+	let f = t.useMemo(() => ({
 		...Qy,
-		...n
-	}), [n]), d = t.useMemo(() => {
+		...i
+	}), [i]), p = t.useMemo(() => {
 		let e = [""], t = r_.now().startOf("week");
-		for (let n = 0; n < 7; n++) e.push(t.toFormat(u.weekDayFormat)), t = t.plus({ days: 1 });
+		for (let n = 0; n < 7; n++) e.push(t.toFormat(f.weekDayFormat)), t = t.plus({ days: 1 });
 		return e;
-	}, [u.weekDayFormat]), f = t.useMemo(() => {
-		let e = o.startOf("month").startOf("week"), t = o.endOf("month").endOf("week"), n = [];
-		for (; e <= t;) n = [...n, ...c(e)], e = e.plus({ weeks: 1 });
-		return n.length < 42 && (n = [...n, ...c(e)]), n;
-	}, [o]);
+	}, [f.weekDayFormat]), m = t.useMemo(() => {
+		let e = c.startOf("month").startOf("week"), t = c.endOf("month").endOf("week"), n = [];
+		for (; e <= t;) n = [...n, ...u(e)], e = e.plus({ weeks: 1 });
+		return n.length < 42 && (n = [...n, ...u(e)]), n;
+	}, [c]);
+	console.log(n, r);
+	function h(e) {
+		if (!n || !r) return !1;
+		let t = n instanceof Date ? r_.fromDate(n) : n;
+		switch (r) {
+			case "w":
+			case "l": return e.hasSame(n, "week");
+			case "m": return e.hasSame(n, "month");
+			case "v": return Math.ceil(e.weekNr / 52 * 13) === Math.ceil(t.weekNr / 52 * 13);
+			default: return e.hasSame(t, "day");
+		}
+	}
 	return /* @__PURE__ */ x("div", {
 		className: "mini-calendar",
 		children: [/* @__PURE__ */ x("div", {
@@ -16793,31 +16806,31 @@ function $y({ viewDate: e = r_.now(), options: n, onDateSelected: r, onJSDateTim
 			children: [
 				/* @__PURE__ */ b("button", {
 					className: "mini-calendar-button is-left",
-					onClick: () => s(o.plus({ months: -1 })),
+					onClick: () => l(c.plus({ months: -1 })),
 					children: /* @__PURE__ */ b(Fo, { icon: ws })
 				}),
 				/* @__PURE__ */ b("div", {
 					className: "is-flex-grow-1 is-flex-shrink-1",
-					children: o.toFormat(u.monthFormat)
+					children: c.toFormat(f.monthFormat)
 				}),
 				/* @__PURE__ */ b("button", {
 					className: "mini-calendar-button is-right",
-					onClick: () => s(o.plus({ months: 1 })),
+					onClick: () => l(c.plus({ months: 1 })),
 					children: /* @__PURE__ */ b(Fo, { icon: $o })
 				})
 			]
 		}), /* @__PURE__ */ x("div", {
 			className: "mini-calendar-grid",
-			children: [d.map((e) => /* @__PURE__ */ b("div", {
+			children: [p.map((e) => /* @__PURE__ */ b("div", {
 				className: "mini-calendar-col",
 				children: e
-			}, e)), f.map((e) => {
+			}, e)), m.map((e) => {
 				let t = typeof e == "string" ? "mini-calendar-row" : "mini-calendar-slot";
-				typeof e != "string" && e.hasSame(a, "day") && (t += " is-today"), typeof e != "string" && !e.hasSame(o, "month") && (t += " is-other-month");
-				let n = typeof e == "string" ? e : e.toFormat(u.dayFormat), r = typeof e == "string" ? "" : e.toFormat(u.dateFormat);
+				typeof e != "string" && h(e) && (t += " is-view-period"), typeof e != "string" && e.hasSame(s, "day") ? t += " is-today" : typeof e != "string" && !e.hasSame(c, "month") && (t += " is-other-month");
+				let n = typeof e == "string" ? e : e.toFormat(f.dayFormat), r = typeof e == "string" ? "" : e.toFormat(f.dateFormat);
 				return /* @__PURE__ */ b("div", {
 					className: t,
-					onClick: () => l(e),
+					onClick: () => d(e),
 					children: /* @__PURE__ */ b(tf, {
 						content: r,
 						delay: [1, .2],

package/dist/styles/mini-calendar.scss

@@ -51,37 +51,59 @@ $mini-cal-border-radius: 0.75rem;
   .mini-calendar-row {
     color: dv.$info;
     font-size: x-small;
-    margin-top: auto;
-    margin-bottom: auto;
+    // margin-top: auto;
+    // margin-bottom: auto;
     text-align: center;
     padding: 0.25em;
+    padding-top: 0.75em;
+    text-align: center;
+    vertical-align: middle;
   }
+
+  // .mini-calendar-row {
+  //   // Week-number cell can react when the first day in that row is in the selected period.
+  //   &:has(+ .mini-calendar-slot.is-view-period) {
+  //     font-weight: 700;
+  //     background-color: #337eff22;
+  //   }
+  // }
+
   .mini-calendar-slot {
     vertical-align: middle;
     text-align: center;
-    border-radius: $mini-cal-border-radius;
-    transition: background-color 0.1s ease-in-out;
+    // border-radius: $mini-cal-border-radius;
+    transition: color 0.1s ease-in-out;
     padding: 0.25em;
 
-    &.is-today {
-      color: dv.$success;
-      font-weight: bold;
+    &.is-other-month {
+      color: dv.$text-weak;
+      font-weight: 200;
+    }
+
+    &.is-view-period {
+      background-color: #337eff22;
+
+      // color: dv.$info;
       &:hover {
         cursor: pointer;
-        background-color: dv.$success;
-        color: fn.bulmaFindColorInvert(dv.$success);
+        color: dv.$info;
+        font-weight: 700;
       }
     }
 
-    &.is-other-month {
-      color: dv.$text-weak;
-      font-weight: 200;
+    &.is-today {
+      color: dv.$success;
+      font-weight: 700;
+      &:hover {
+        cursor: pointer;
+        color: default;
+      }
     }
 
     &:hover {
       cursor: pointer;
-      background-color: dv.$primary;
-      color: fn.bulmaFindColorInvert(dv.$primary);
+      color: dv.$info;
+      font-weight: 700;
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loon-bulma-react",
   "private": false,
-  "version": "2026.0.67",
+  "version": "2026.0.68",
   "description": "Bulma & React componenten voor Loon Salarissoftware",
   "type": "module",
   "license": "MIT",