@mantine-vue/dates 2.4.0 → 3.0.0

package/esm/index.mjs

@@ -999,6 +999,11 @@ var DatePicker = defineComponent({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1022,13 +1027,17 @@ var DatePicker = defineComponent({
 		withNativeLevelSelect: Boolean,
 		yearsSelectRange: Array
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value),
+			value: 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);
@@ -1077,6 +1086,11 @@ var YearPicker = defineComponent({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1101,13 +1115,17 @@ var YearPicker = defineComponent({
 		withNativeLevelSelect: Boolean,
 		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value),
+			value: 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 = ref(null);
 		const selectYear = (date) => {
@@ -1172,6 +1190,11 @@ var MonthPicker = defineComponent({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1196,13 +1219,17 @@ var MonthPicker = defineComponent({
 		withNativeLevelSelect: Boolean,
 		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const finalValue = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value),
+			value: 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 = ref(null);
 		const selectMonth = (date) => {
@@ -1357,6 +1384,11 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: String,
 				default: "default"
 			},
+			modelValue: [
+				String,
+				Array,
+				null
+			],
 			value: [
 				String,
 				Array,
@@ -1397,13 +1429,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 = computed(() => props.type === "multiple" ? [] : props.type === "range" ? [null, null] : null);
 			const [_value, setValue] = useUncontrolled({
-				value: computed(() => props.value),
+				value: 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 = ref(false);
 			const formattedValue = computed(() => formatValue(_value.value, props.type, props.valueFormat, props.locale, props.labelSeparator, props.valueFormatter));
@@ -1469,6 +1505,11 @@ var DateInput = defineComponent({
 	name: "DateInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -1491,12 +1532,19 @@ var DateInput = defineComponent({
 		maxDate: [String, Date],
 		presets: Array
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value === void 0 ? void 0 : normalizeDate(props.value)),
+			value: 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 ? dayjs(value).locale(props.locale || "en").format(props.valueFormat) : "";
 		const inputValue = ref(formatValue(_value.value));
@@ -1668,18 +1716,22 @@ var TimeInput = 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 () => h(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)
 		});
 	}
 });
@@ -1690,6 +1742,7 @@ var TimeGrid = defineComponent({
 			type: Array,
 			default: () => []
 		},
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		minTime: String,
@@ -1699,12 +1752,16 @@ var TimeGrid = defineComponent({
 		onChange: Function,
 		getControlProps: Function
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value),
+			value: 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 () => h(Box, {
 			...attrs,
@@ -1737,9 +1794,17 @@ var SpinInput = 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,
@@ -1765,7 +1830,17 @@ var SpinInput = defineComponent({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const [value, setValue] = useUncontrolled({
+			value: 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;
@@ -1780,7 +1855,7 @@ var SpinInput = 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) => {
@@ -1788,22 +1863,22 @@ var SpinInput = 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") {
@@ -1816,13 +1891,11 @@ var SpinInput = 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 () => h("input", {
@@ -1831,13 +1904,13 @@ var SpinInput = 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(),
@@ -1852,9 +1925,17 @@ var SpinInput = defineComponent({
 var AmPmInput = 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,
@@ -1864,14 +1945,24 @@ var AmPmInput = defineComponent({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
+		const [value, setValue] = useUncontrolled({
+			value: computed(() => props.modelValue !== void 0 ? props.modelValue : props.value),
+			defaultValue: props.defaultValue,
+			finalValue: null,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		return () => 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)
 		}, [h("option", { value: props.labels.am }, props.labels.am), h("option", { value: props.labels.pm }, props.labels.pm)]);
 	}
 });
@@ -1909,6 +2000,7 @@ var TimeControlsList = defineComponent({
 var TimePicker = defineComponent({
 	name: "TimePicker",
 	props: {
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		onChange: Function,
@@ -1951,13 +2043,17 @@ var TimePicker = defineComponent({
 		closeDropdownOnPresetSelect: Boolean,
 		hoursRef: Object
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const effectiveFormat = computed(() => props.type === "duration" ? "24h" : props.format);
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value),
+			value: 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 = computed(() => getParsedTime({
 			time: _value.value,
@@ -2203,6 +2299,11 @@ var TimeValue = defineComponent({
 var DateTimePicker = defineComponent({
 	name: "DateTimePicker",
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -2226,13 +2327,20 @@ var DateTimePicker = defineComponent({
 		},
 		submitButtonProps: Object
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const hoursRef = ref();
 		const [_value, setValue] = useUncontrolled({
-			value: computed(() => props.value === void 0 ? void 0 : props.value === null ? null : new Date(props.value)),
+			value: 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 = computed(() => _value.value ? dayjs(_value.value).format("YYYY-MM-DD") : null);
 		const time = computed(() => _value.value ? dayjs(_value.value).format(props.withSeconds ? "HH:mm:ss" : "HH:mm") : "");
@@ -2278,11 +2386,21 @@ var MiniCalendar = 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],
@@ -2305,12 +2423,25 @@ var MiniCalendar = defineComponent({
 		nextControlProps: Object,
 		locale: String
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useDatesContext();
+		const [value, setValue] = useUncontrolled({
+			value: 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] = useUncontrolled({
 			value: computed(() => toDateString(props.date ?? null) ?? void 0),
 			defaultValue: toDateString(props.defaultDate ?? null) ?? void 0,
-			finalValue: toDateString(props.value ?? null) || dayjs().format("YYYY-MM-DD"),
+			finalValue: value.value || dayjs().format("YYYY-MM-DD"),
 			onChange: (value) => props.onDateChange?.(value)
 		});
 		const handleNext = () => {
@@ -2332,12 +2463,12 @@ var MiniCalendar = defineComponent({
 					disabled,
 					"aria-label": date.format("YYYY-MM-DD"),
 					"data-disabled": disabled || void 0,
-					"data-selected": props.value && dayjs(date).isSame(props.value, "day") || void 0,
+					"data-selected": value.value && dayjs(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")));
 					}
 				}, () => [h("span", { class: Dates_module_default.miniCalendarDayMonth }, date.locale(props.locale || ctx.locale).format(props.monthLabelFormat)), h("span", { class: Dates_module_default.miniCalendarDayNumber }, String(date.date()))]);
 			});