@mantine-vue/dates 2.4.0 → 3.0.0

package/cjs/index.cjs

@@ -1024,6 +1024,11 @@ var DatePicker = (0, vue.defineComponent)({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1047,13 +1052,17 @@ var DatePicker = (0, vue.defineComponent)({
 		withNativeLevelSelect: Boolean,
 		yearsSelectRange: Array
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: finalValue.value,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const selectDate = (date) => {
 			if (props.type === "default" && props.allowDeselect && isSameDate(_value.value, date)) setValue(null);
@@ -1102,6 +1111,11 @@ var YearPicker = (0, vue.defineComponent)({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1126,13 +1140,17 @@ var YearPicker = (0, vue.defineComponent)({
 		withNativeLevelSelect: Boolean,
 		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: finalValue.value,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const hoveredDate = (0, vue.ref)(null);
 		const selectYear = (date) => {
@@ -1197,6 +1215,11 @@ var MonthPicker = (0, vue.defineComponent)({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1221,13 +1244,17 @@ var MonthPicker = (0, vue.defineComponent)({
 		withNativeLevelSelect: Boolean,
 		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: finalValue.value,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const hoveredDate = (0, vue.ref)(null);
 		const selectMonth = (date) => {
@@ -1382,6 +1409,11 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: String,
 				default: "default"
 			},
+			modelValue: [
+				String,
+				Array,
+				null
+			],
 			value: [
 				String,
 				Array,
@@ -1422,13 +1454,17 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 			withNativeLevelSelect: Boolean,
 			yearsSelectRange: Array
 		},
-		setup(props, { attrs }) {
+		emits: ["update:modelValue", "change"],
+		setup(props, { attrs, emit }) {
 			const finalValue = (0, vue.computed)(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 			const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-				value: (0, vue.computed)(() => props.value),
+				value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 				defaultValue: props.defaultValue,
 				finalValue: finalValue.value,
-				onChange: (value) => props.onChange?.(value)
+				onChange: (value) => {
+					emit("update:modelValue", value);
+					emit("change", value);
+				}
 			});
 			const opened = (0, vue.ref)(false);
 			const formattedValue = (0, vue.computed)(() => formatValue(_value.value, props.type, props.valueFormat, props.locale, props.labelSeparator, props.valueFormatter));
@@ -1494,6 +1530,11 @@ var DateInput = (0, vue.defineComponent)({
 	name: "DateInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -1516,12 +1557,19 @@ var DateInput = (0, vue.defineComponent)({
 		maxDate: [String, Date],
 		presets: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value === void 0 ? void 0 : normalizeDate(props.value)),
+			value: (0, vue.computed)(() => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : normalizeDate(controlledValue);
+			}),
 			defaultValue: normalizeDate(props.defaultValue),
 			finalValue: null,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const formatValue = (value) => value ? (0, dayjs.default)(value).locale(props.locale || "en").format(props.valueFormat) : "";
 		const inputValue = (0, vue.ref)(formatValue(_value.value));
@@ -1693,18 +1741,22 @@ var TimeInput = (0, vue.defineComponent)({
 	name: "TimeInput",
 	props: {
 		withSeconds: Boolean,
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		onChange: Function
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		return () => (0, vue.h)(_mantine_vue_core.InputBase, {
 			...attrs,
 			type: "time",
 			step: props.withSeconds ? 1 : 60,
+			modelValue: props.modelValue,
 			value: props.value,
 			defaultValue: props.defaultValue,
-			onChange: props.onChange
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value)
 		});
 	}
 });
@@ -1715,6 +1767,7 @@ var TimeGrid = (0, vue.defineComponent)({
 			type: Array,
 			default: () => []
 		},
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		minTime: String,
@@ -1724,12 +1777,16 @@ var TimeGrid = (0, vue.defineComponent)({
 		onChange: Function,
 		getControlProps: Function
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: null,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		return () => (0, vue.h)(_mantine_vue_core.Box, {
 			...attrs,
@@ -1762,9 +1819,17 @@ var SpinInput = (0, vue.defineComponent)({
 	name: "SpinInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			default: null
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		min: {
 			type: Number,
@@ -1790,7 +1855,17 @@ var SpinInput = (0, vue.defineComponent)({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
+			defaultValue: props.defaultValue,
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const finiteMax = () => Number.isFinite(props.max);
 		const maxDigit = () => finiteMax() ? Number(props.max.toFixed(0)[0]) : Infinity;
 		const arrowsMax = () => props.max + 1 - props.step;
@@ -1805,7 +1880,7 @@ var SpinInput = (0, vue.defineComponent)({
 				parsedValue = finiteMax() && next > props.max ? digit : next;
 			}
 			const clampedValue = props.allowTemporaryZero && parsedValue === 0 && props.min > 0 ? 0 : finiteMax() ? Math.min(Math.max(parsedValue, props.min), props.max) : Math.max(parsedValue, props.min);
-			props.onChange?.(clampedValue);
+			setValue(clampedValue);
 			if (!props.disableAutoAdvance && (clampedValue > maxDigit() || raw.startsWith("00"))) props.onNextInput?.();
 		};
 		const handleKeydown = (event) => {
@@ -1813,22 +1888,22 @@ var SpinInput = (0, vue.defineComponent)({
 			if (event.key === "0" || event.key === "Num0") {
 				const { selectionStart, selectionEnd, value: inputValue } = event.currentTarget;
 				const isEntireValueSelected = inputValue.length > 0 && selectionStart === 0 && selectionEnd === inputValue.length;
-				if (props.value === 0 && !isEntireValueSelected) {
+				if (value.value === 0 && !isEntireValueSelected) {
 					event.preventDefault();
 					props.onNextInput?.();
 				}
 			}
 			if (event.key === "Home") {
 				event.preventDefault();
-				props.onChange?.(props.min);
+				setValue(props.min);
 			}
 			if (event.key === "End") {
 				event.preventDefault();
-				if (finiteMax()) props.onChange?.(props.max);
+				if (finiteMax()) setValue(props.max);
 			}
 			if (event.key === "Backspace" || event.key === "Delete") {
 				event.preventDefault();
-				if (props.value !== null) props.onChange?.(null);
+				if (value.value !== null) setValue(null);
 				else props.onPreviousInput?.();
 			}
 			if (event.key === "ArrowRight") {
@@ -1841,13 +1916,11 @@ var SpinInput = (0, vue.defineComponent)({
 			}
 			if (event.key === "ArrowUp") {
 				event.preventDefault();
-				const newValue = props.value === null ? props.min : finiteMax() ? Math.min(Math.max(props.value + props.step, props.min), arrowsMax()) : Math.max(props.value + props.step, props.min);
-				props.onChange?.(newValue);
+				setValue(value.value === null ? props.min : finiteMax() ? Math.min(Math.max(value.value + props.step, props.min), arrowsMax()) : Math.max(value.value + props.step, props.min));
 			}
 			if (event.key === "ArrowDown") {
 				event.preventDefault();
-				const newValue = props.value === null ? finiteMax() ? arrowsMax() : props.min : Math.min(Math.max(props.value - props.step, props.min), arrowsMax());
-				props.onChange?.(newValue);
+				setValue(value.value === null ? finiteMax() ? arrowsMax() : props.min : Math.min(Math.max(value.value - props.step, props.min), arrowsMax()));
 			}
 		};
 		return () => (0, vue.h)("input", {
@@ -1856,13 +1929,13 @@ var SpinInput = (0, vue.defineComponent)({
 			role: "spinbutton",
 			"aria-valuemin": props.min,
 			"aria-valuemax": finiteMax() ? props.max : void 0,
-			"aria-valuenow": props.value === null ? 0 : props.value,
-			"data-empty": props.value === null || void 0,
+			"aria-valuenow": value.value === null ? 0 : value.value,
+			"data-empty": value.value === null || void 0,
 			inputmode: "numeric",
 			placeholder: props.placeholder,
 			disabled: props.disabled,
 			readonly: props.readOnly,
-			value: props.value === null ? "" : padTime(props.value),
+			value: value.value === null ? "" : padTime(value.value),
 			onInput: (event) => handleChange(event.target.value),
 			onKeydown: handleKeydown,
 			onFocus: (event) => event.target.select(),
@@ -1877,9 +1950,17 @@ var SpinInput = (0, vue.defineComponent)({
 var AmPmInput = (0, vue.defineComponent)({
 	name: "AmPmInput",
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
-			default: null
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
 		},
 		labels: {
 			type: Object,
@@ -1889,14 +1970,24 @@ var AmPmInput = (0, vue.defineComponent)({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
+			defaultValue: props.defaultValue,
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		return () => (0, vue.h)("select", {
 			...attrs,
 			class: Dates_module_default.timePickerField,
 			"data-am-pm": true,
 			disabled: props.disabled,
-			value: props.value ?? props.labels.am,
-			onChange: (event) => props.onChange?.(event.target.value)
+			value: value.value ?? props.labels.am,
+			onChange: (event) => setValue(event.target.value)
 		}, [(0, vue.h)("option", { value: props.labels.am }, props.labels.am), (0, vue.h)("option", { value: props.labels.pm }, props.labels.pm)]);
 	}
 });
@@ -1934,6 +2025,7 @@ var TimeControlsList = (0, vue.defineComponent)({
 var TimePicker = (0, vue.defineComponent)({
 	name: "TimePicker",
 	props: {
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		onChange: Function,
@@ -1976,13 +2068,17 @@ var TimePicker = (0, vue.defineComponent)({
 		closeDropdownOnPresetSelect: Boolean,
 		hoursRef: Object
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const effectiveFormat = (0, vue.computed)(() => props.type === "duration" ? "24h" : props.format);
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value),
+			value: (0, vue.computed)(() => props.modelValue !== void 0 ? props.modelValue : props.value),
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const parsed = (0, vue.computed)(() => getParsedTime({
 			time: _value.value,
@@ -2228,6 +2324,11 @@ var TimeValue = (0, vue.defineComponent)({
 var DateTimePicker = (0, vue.defineComponent)({
 	name: "DateTimePicker",
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -2251,13 +2352,20 @@ var DateTimePicker = (0, vue.defineComponent)({
 		},
 		submitButtonProps: Object
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const hoursRef = (0, vue.ref)();
 		const [_value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
-			value: (0, vue.computed)(() => props.value === void 0 ? void 0 : props.value === null ? null : new Date(props.value)),
+			value: (0, vue.computed)(() => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : controlledValue === null ? null : new Date(controlledValue);
+			}),
 			defaultValue: props.defaultValue ? new Date(props.defaultValue) : null,
 			finalValue: null,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const date = (0, vue.computed)(() => _value.value ? (0, dayjs.default)(_value.value).format("YYYY-MM-DD") : null);
 		const time = (0, vue.computed)(() => _value.value ? (0, dayjs.default)(_value.value).format(props.withSeconds ? "HH:mm:ss" : "HH:mm") : "");
@@ -2303,11 +2411,21 @@ var MiniCalendar = (0, vue.defineComponent)({
 		date: [String, Date],
 		defaultDate: [String, Date],
 		onDateChange: Function,
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
 			null
 		],
+		defaultValue: [
+			String,
+			Date,
+			null
+		],
 		onChange: Function,
 		maxDate: [String, Date],
 		minDate: [String, Date],
@@ -2330,12 +2448,25 @@ var MiniCalendar = (0, vue.defineComponent)({
 		nextControlProps: Object,
 		locale: String
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useDatesContext();
+		const [value, setValue] = (0, _mantine_vue_hooks.useUncontrolled)({
+			value: (0, vue.computed)(() => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : toDateString(controlledValue);
+			}),
+			defaultValue: toDateString(props.defaultValue ?? null),
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const [_date, setDate] = (0, _mantine_vue_hooks.useUncontrolled)({
 			value: (0, vue.computed)(() => toDateString(props.date ?? null) ?? void 0),
 			defaultValue: toDateString(props.defaultDate ?? null) ?? void 0,
-			finalValue: toDateString(props.value ?? null) || (0, dayjs.default)().format("YYYY-MM-DD"),
+			finalValue: value.value || (0, dayjs.default)().format("YYYY-MM-DD"),
 			onChange: (value) => props.onDateChange?.(value)
 		});
 		const handleNext = () => {
@@ -2357,12 +2488,12 @@ var MiniCalendar = (0, vue.defineComponent)({
 					disabled,
 					"aria-label": date.format("YYYY-MM-DD"),
 					"data-disabled": disabled || void 0,
-					"data-selected": props.value && (0, dayjs.default)(date).isSame(props.value, "day") || void 0,
+					"data-selected": value.value && (0, dayjs.default)(date).isSame(value.value, "day") || void 0,
 					...dayProps,
 					class: [Dates_module_default.miniCalendarDay, dayProps.class],
 					onClick: (event) => {
 						dayProps.onClick?.(event);
-						props.onChange?.(toDateString(date.format("YYYY-MM-DD")));
+						setValue(toDateString(date.format("YYYY-MM-DD")));
 					}
 				}, () => [(0, vue.h)("span", { class: Dates_module_default.miniCalendarDayMonth }, date.locale(props.locale || ctx.locale).format(props.monthLabelFormat)), (0, vue.h)("span", { class: Dates_module_default.miniCalendarDayNumber }, String(date.date()))]);
 			});