@mantine-vue/dates 3.1.0 → 3.3.0

package/cjs/index.cjs

@@ -3313,7 +3313,14 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		modelValue: {},
 		defaultValue: {},
-		valueFormat: { default: "MMMM D, YYYY" },
+		valueFormat: {
+			type: [String, Function],
+			default: "MMMM D, YYYY"
+		},
+		withTime: {
+			type: Boolean,
+			default: false
+		},
 		dateParser: {},
 		locale: {},
 		minDate: {},
@@ -3351,14 +3358,22 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				emit("change", next);
 			}
 		});
-		const format = (next) => next ? (0, dayjs.default)(next).locale(props.locale || "en").format(props.valueFormat) : "";
+		const format = (next) => next ? typeof props.valueFormat === "function" ? props.valueFormat(toDateString(next)) : (0, dayjs.default)(next).locale(props.locale || "en").format(props.valueFormat) : "";
 		const inputValue = (0, vue.ref)(format(value.value));
 		const opened = (0, vue.ref)(false);
 		(0, vue.watch)(value, (next) => {
 			if (!opened.value) inputValue.value = format(next);
 		});
 		function parse(raw) {
-			const parsed = props.dateParser ? props.dateParser(raw) : dateStringParser(raw, props.valueFormat, props.locale);
+			let parsed;
+			if (props.dateParser) parsed = props.dateParser(raw);
+			else if (typeof props.valueFormat === "function") {
+				const value = (0, dayjs.default)(raw);
+				parsed = value.isValid() ? value.format(props.withTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD") : null;
+			} else {
+				const value = (0, dayjs.default)(raw, props.valueFormat, props.locale || "en", true);
+				parsed = value.isValid() ? value.format(props.withTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD") : dateStringParser(raw, props.valueFormat, props.locale);
+			}
 			return parsed && isDateValid({
 				date: parsed,
 				minDate: props.minDate,
@@ -3631,15 +3646,23 @@ var SpinInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const props = __props;
 		const emit = __emit;
 		const attrs = (0, vue.useAttrs)();
+		const inputRef = (0, vue.ref)(null);
+		let emittedValue;
 		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: (0, vue.computed)(() => props.modelValue),
 			defaultValue: props.defaultValue,
 			finalValue: null,
 			onChange: (next) => {
+				emittedValue = next;
 				emit("update:modelValue", next);
 				emit("change", next);
 			}
 		});
+		(0, vue.watch)(() => props.modelValue, (next) => {
+			const externalChange = next !== emittedValue;
+			emittedValue = void 0;
+			if (externalChange && document.activeElement === inputRef.value) inputRef.value?.select();
+		}, { flush: "post" });
 		const finiteMax = () => Number.isFinite(props.max);
 		const maxDigit = () => finiteMax() ? Number(props.max.toFixed(0)[0]) : Infinity;
 		const arrowsMax = () => props.max + 1 - props.step;
@@ -3708,7 +3731,10 @@ var SpinInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			event.target.select();
 		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("input", (0, vue.mergeProps)((0, vue.unref)(attrs), {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("input", (0, vue.mergeProps)({
+				ref_key: "inputRef",
+				ref: inputRef
+			}, (0, vue.unref)(attrs), {
 				type: "text",
 				role: "spinbutton",
 				"aria-valuemin": props.min,
@@ -4466,7 +4492,10 @@ var MiniCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		maxDate: {},
 		minDate: {},
 		numberOfDays: { default: 7 },
-		monthLabelFormat: { default: "MMM" },
+		monthLabelFormat: {
+			type: [String, Function],
+			default: "MMM"
+		},
 		getDayProps: {},
 		size: { default: "sm" },
 		previousControlProps: {},
@@ -4555,7 +4584,7 @@ var MiniCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"data-selected": (0, vue.unref)(value) && item.isSame((0, vue.unref)(value), "day") || void 0,
 							onClick: ($event) => select(item, $event)
 						}), {
-							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(Dates_module_default).miniCalendarDayMonth) }, (0, vue.toDisplayString)(item.locale(props.locale || (0, vue.unref)(context).locale).format(props.monthLabelFormat)), 3), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(Dates_module_default).miniCalendarDayNumber) }, (0, vue.toDisplayString)(item.date()), 3)]),
+							default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(Dates_module_default).miniCalendarDayMonth) }, (0, vue.toDisplayString)(typeof props.monthLabelFormat === "function" ? props.monthLabelFormat(item.format("YYYY-MM-DD")) : item.locale(props.locale || (0, vue.unref)(context).locale).format(props.monthLabelFormat)), 3), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(Dates_module_default).miniCalendarDayNumber) }, (0, vue.toDisplayString)(item.date()), 3)]),
 							_: 2
 						}, 1040, [
 							"class",