@mantine-vue/dates 3.2.0 → 3.3.0

package/esm/index.mjs

@@ -3288,7 +3288,14 @@ var DateInput_default = /* @__PURE__ */ 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: {},
@@ -3326,14 +3333,22 @@ var DateInput_default = /* @__PURE__ */ defineComponent({
 				emit("change", next);
 			}
 		});
-		const format = (next) => next ? dayjs(next).locale(props.locale || "en").format(props.valueFormat) : "";
+		const format = (next) => next ? typeof props.valueFormat === "function" ? props.valueFormat(toDateString(next)) : dayjs(next).locale(props.locale || "en").format(props.valueFormat) : "";
 		const inputValue = ref(format(value.value));
 		const opened = ref(false);
 		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 = dayjs(raw);
+				parsed = value.isValid() ? value.format(props.withTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD") : null;
+			} else {
+				const value = dayjs(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,
@@ -3606,15 +3621,23 @@ var SpinInput_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const inputRef = ref(null);
+		let emittedValue;
 		const [value, setValue] = useUncontrolled({
 			value: computed(() => props.modelValue),
 			defaultValue: props.defaultValue,
 			finalValue: null,
 			onChange: (next) => {
+				emittedValue = next;
 				emit("update:modelValue", next);
 				emit("change", next);
 			}
 		});
+		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;
@@ -3683,7 +3706,10 @@ var SpinInput_default = /* @__PURE__ */ defineComponent({
 			event.target.select();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("input", mergeProps(unref(attrs), {
+			return openBlock(), createElementBlock("input", mergeProps({
+				ref_key: "inputRef",
+				ref: inputRef
+			}, unref(attrs), {
 				type: "text",
 				role: "spinbutton",
 				"aria-valuemin": props.min,
@@ -4441,7 +4467,10 @@ var MiniCalendar_default = /* @__PURE__ */ defineComponent({
 		maxDate: {},
 		minDate: {},
 		numberOfDays: { default: 7 },
-		monthLabelFormat: { default: "MMM" },
+		monthLabelFormat: {
+			type: [String, Function],
+			default: "MMM"
+		},
 		getDayProps: {},
 		size: { default: "sm" },
 		previousControlProps: {},
@@ -4530,7 +4559,7 @@ var MiniCalendar_default = /* @__PURE__ */ defineComponent({
 							"data-selected": unref(value) && item.isSame(unref(value), "day") || void 0,
 							onClick: ($event) => select(item, $event)
 						}), {
-							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(Dates_module_default).miniCalendarDayMonth) }, toDisplayString(item.locale(props.locale || unref(context).locale).format(props.monthLabelFormat)), 3), createElementVNode("span", { class: normalizeClass(unref(Dates_module_default).miniCalendarDayNumber) }, toDisplayString(item.date()), 3)]),
+							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(Dates_module_default).miniCalendarDayMonth) }, toDisplayString(typeof props.monthLabelFormat === "function" ? props.monthLabelFormat(item.format("YYYY-MM-DD")) : item.locale(props.locale || unref(context).locale).format(props.monthLabelFormat)), 3), createElementVNode("span", { class: normalizeClass(unref(Dates_module_default).miniCalendarDayNumber) }, toDisplayString(item.date()), 3)]),
 							_: 2
 						}, 1040, [
 							"class",