@mantine-vue/dates 2.3.1 → 3.0.0

package/esm/index.mjs

@@ -4,44 +4,45 @@ import { computed, defineComponent, h, inject, provide, ref, watch } from "vue";
 import { useUncontrolled } from "@mantine-vue/hooks";
 import { AccordionChevron, ActionIcon, Box, Button, CheckIcon, CloseButton, Group, InputBase, Modal, Popover, ScrollArea, SimpleGrid, Text, UnstyledButton } from "@mantine-vue/core";
 var Dates_module_default = {
-	calendar: "_calendar_5kwje_1",
-	calendarLevel: "_calendarLevel_5kwje_15",
-	calendarHeader: "_calendarHeader_5kwje_19",
-	calendarHeaderLevel: "_calendarHeaderLevel_5kwje_32",
-	calendarHeaderControl: "_calendarHeaderControl_5kwje_33",
-	calendarHeaderControlIcon: "_calendarHeaderControlIcon_5kwje_74",
-	month: "_month_5kwje_87",
-	monthRow: "_monthRow_5kwje_97",
-	monthCell: "_monthCell_5kwje_101",
-	weekday: "_weekday_5kwje_110",
-	weekNumber: "_weekNumber_5kwje_122",
-	day: "_day_5kwje_128",
-	pickerControl: "_pickerControl_5kwje_189",
-	controlsGrid: "_controlsGrid_5kwje_195",
-	timePicker: "_timePicker_5kwje_255",
-	dateTimePicker: "_dateTimePicker_5kwje_256",
-	datePickerRoot: "_datePickerRoot_5kwje_260",
-	timeWrapper: "_timeWrapper_5kwje_270",
-	timeInput: "_timeInput_5kwje_276",
-	presetsList: "_presetsList_5kwje_281",
-	presetButton: "_presetButton_5kwje_289",
-	timePickerPresetsGroup: "_timePickerPresetsGroup_5kwje_300",
-	dropdown: "_dropdown_5kwje_304",
-	placeholder: "_placeholder_5kwje_308",
-	timeGridControl: "_timeGridControl_5kwje_312",
-	timePickerFieldsRoot: "_timePickerFieldsRoot_5kwje_343",
-	timePickerFieldsGroup: "_timePickerFieldsGroup_5kwje_350",
-	timePickerField: "_timePickerField_5kwje_343",
-	timePickerDropdown: "_timePickerDropdown_5kwje_400",
-	timePickerControlsListGroup: "_timePickerControlsListGroup_5kwje_404",
-	timePickerControlsList: "_timePickerControlsList_5kwje_404",
-	timePickerControl: "_timePickerControl_5kwje_404",
-	miniCalendarRoot: "_miniCalendarRoot_5kwje_433",
-	miniCalendarDays: "_miniCalendarDays_5kwje_440",
-	miniCalendarDay: "_miniCalendarDay_5kwje_440",
-	miniCalendarDayMonth: "_miniCalendarDayMonth_5kwje_475",
-	miniCalendarDayNumber: "_miniCalendarDayNumber_5kwje_481",
-	miniCalendarControl: "_miniCalendarControl_5kwje_486"
+	calendar: "_calendar_zystn_1",
+	calendarLevel: "_calendarLevel_zystn_15",
+	calendarHeader: "_calendarHeader_zystn_19",
+	calendarHeaderLevel: "_calendarHeaderLevel_zystn_32",
+	calendarHeaderControl: "_calendarHeaderControl_zystn_33",
+	calendarHeaderSelect: "_calendarHeaderSelect_zystn_79",
+	calendarHeaderControlIcon: "_calendarHeaderControlIcon_zystn_109",
+	month: "_month_zystn_122",
+	monthRow: "_monthRow_zystn_132",
+	monthCell: "_monthCell_zystn_136",
+	weekday: "_weekday_zystn_145",
+	weekNumber: "_weekNumber_zystn_157",
+	day: "_day_zystn_163",
+	pickerControl: "_pickerControl_zystn_224",
+	controlsGrid: "_controlsGrid_zystn_230",
+	timePicker: "_timePicker_zystn_290",
+	dateTimePicker: "_dateTimePicker_zystn_291",
+	datePickerRoot: "_datePickerRoot_zystn_295",
+	timeWrapper: "_timeWrapper_zystn_305",
+	timeInput: "_timeInput_zystn_311",
+	presetsList: "_presetsList_zystn_316",
+	presetButton: "_presetButton_zystn_324",
+	timePickerPresetsGroup: "_timePickerPresetsGroup_zystn_335",
+	dropdown: "_dropdown_zystn_339",
+	placeholder: "_placeholder_zystn_343",
+	timeGridControl: "_timeGridControl_zystn_347",
+	timePickerFieldsRoot: "_timePickerFieldsRoot_zystn_378",
+	timePickerFieldsGroup: "_timePickerFieldsGroup_zystn_385",
+	timePickerField: "_timePickerField_zystn_378",
+	timePickerDropdown: "_timePickerDropdown_zystn_435",
+	timePickerControlsListGroup: "_timePickerControlsListGroup_zystn_439",
+	timePickerControlsList: "_timePickerControlsList_zystn_439",
+	timePickerControl: "_timePickerControl_zystn_439",
+	miniCalendarRoot: "_miniCalendarRoot_zystn_468",
+	miniCalendarDays: "_miniCalendarDays_zystn_475",
+	miniCalendarDay: "_miniCalendarDay_zystn_475",
+	miniCalendarDayMonth: "_miniCalendarDayMonth_zystn_510",
+	miniCalendarDayNumber: "_miniCalendarDayNumber_zystn_516",
+	miniCalendarControl: "_miniCalendarControl_zystn_521"
 };
 //#endregion
 //#region src/index.ts
@@ -242,6 +243,7 @@ function getDecadeLabel(date) {
 var Day = defineComponent({
 	name: "Day",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		date: {
 			type: String,
@@ -276,7 +278,7 @@ var Day = defineComponent({
 		},
 		unstyled: Boolean
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => h(UnstyledButton, {
 			...attrs,
 			component: props.static ? "div" : "button",
@@ -295,7 +297,7 @@ var Day = defineComponent({
 			"data-last-in-range": props.lastInRange && !props.disabled || void 0,
 			"data-static": props.static || void 0,
 			"data-full-width": props.fullWidth || void 0
-		}, () => props.renderDay?.(props.date) || dayjs(props.date).date());
+		}, () => (props.renderDay ? props.renderDay(props.date) : (slots.renderDay ?? slots.day)?.({ date: props.date })) || dayjs(props.date).date());
 	}
 });
 var PickerControl = defineComponent({
@@ -359,6 +361,15 @@ var CalendarHeader = defineComponent({
 		},
 		levelControlAriaLabel: String,
 		fullWidth: Boolean,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array,
+		calendarLevel: String,
+		date: [String, Date],
+		locale: String,
+		onDateChange: Function,
+		minDate: [String, Date],
+		maxDate: [String, Date],
+		disableNativeLevelSelect: Boolean,
 		onNext: Function,
 		onPrevious: Function,
 		onLevelClick: Function
@@ -377,7 +388,40 @@ var CalendarHeader = defineComponent({
 				"data-direction": "previous",
 				size: "45%"
 			})) : null;
-			const levelControl = h(UnstyledButton, {
+			const displayed = props.date ? dayjs(props.date) : dayjs();
+			const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+			const rawMinYear = props.yearsSelectRange?.[0] ?? (props.minDate ? dayjs(props.minDate).year() : currentYear - 100);
+			const rawMaxYear = props.yearsSelectRange?.[1] ?? (props.maxDate ? dayjs(props.maxDate).year() : currentYear + 50);
+			const minYear = Math.min(rawMinYear, rawMaxYear, displayed.year());
+			const maxYear = Math.max(rawMinYear, rawMaxYear, displayed.year());
+			const updateNativeDate = (next) => {
+				let result = next;
+				if (props.minDate && result.isBefore(dayjs(props.minDate), "day")) result = dayjs(props.minDate);
+				if (props.maxDate && result.isAfter(dayjs(props.maxDate), "day")) result = dayjs(props.maxDate);
+				props.onDateChange?.(result.format("YYYY-MM-DD"));
+			};
+			const levelControl = (props.withNativeLevelSelect && props.date && props.onDateChange && props.calendarLevel !== "decade" ? h("div", {
+				class: Dates_module_default.calendarHeaderLevel,
+				"data-static": true,
+				"data-native-level-select": true
+			}, [props.calendarLevel === "month" ? h("select", {
+				class: Dates_module_default.calendarHeaderSelect,
+				"data-select": "month",
+				disabled: props.disableNativeLevelSelect,
+				value: displayed.month(),
+				"aria-label": props.levelControlAriaLabel,
+				onChange: (event) => updateNativeDate(displayed.month(Number(event.target.value)))
+			}, Array.from({ length: 12 }, (_, month) => h("option", { value: month }, dayjs().locale(props.locale || "en").month(month).format("MMMM")))) : null, h("select", {
+				class: Dates_module_default.calendarHeaderSelect,
+				"data-select": "year",
+				disabled: props.disableNativeLevelSelect,
+				value: displayed.year(),
+				"aria-label": props.levelControlAriaLabel,
+				onChange: (event) => updateNativeDate(displayed.year(Number(event.target.value)))
+			}, Array.from({ length: maxYear - minYear + 1 }, (_, index) => {
+				const year = minYear + index;
+				return h("option", { value: year }, year);
+			}))]) : null) ?? h(UnstyledButton, {
 				component: props.hasNextLevel ? "button" : "div",
 				class: Dates_module_default.calendarHeaderLevel,
 				onClick: props.hasNextLevel ? props.onLevelClick : void 0,
@@ -434,6 +478,7 @@ var WeekdaysRow = defineComponent({
 });
 var Month = defineComponent({
 	name: "Month",
+	slots: Object,
 	props: {
 		month: {
 			type: String,
@@ -472,7 +517,7 @@ var Month = defineComponent({
 		static: Boolean,
 		fullWidth: Boolean
 	},
-	setup(props) {
+	setup(props, { slots }) {
 		const ctx = useDatesContext();
 		const hovered = ref(null);
 		const dayRefs = [];
@@ -531,7 +576,7 @@ var Month = defineComponent({
 					lastInRange: isSameDate(date, end),
 					highlightToday: props.highlightToday,
 					fullWidth: props.fullWidth,
-					renderDay: props.renderDay,
+					renderDay: props.renderDay ?? (slots.renderDay ?? slots.day ? (date) => (slots.renderDay ?? slots.day)?.({ date }) : void 0),
 					"aria-label": props.getDayAriaLabel?.(date),
 					tabindex: props.static ? void 0 : date === dateInTabOrder ? 0 : -1,
 					"data-autofocus": selected || void 0,
@@ -718,6 +763,7 @@ function clampLevel(level, minLevel, maxLevel) {
 }
 var Calendar = defineComponent({
 	name: "Calendar",
+	slots: Object,
 	props: {
 		defaultLevel: String,
 		level: String,
@@ -789,9 +835,11 @@ var Calendar = defineComponent({
 		highlightToday: Boolean,
 		withWeekNumbers: Boolean,
 		static: Boolean,
-		fullWidth: Boolean
+		fullWidth: Boolean,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const [_level, setLevel] = useUncontrolled({
 			value: computed(() => props.level === void 0 ? void 0 : clampLevel(props.level, props.minLevel, props.maxLevel)),
 			defaultValue: props.defaultLevel === void 0 ? void 0 : clampLevel(props.defaultLevel, props.minLevel, props.maxLevel),
@@ -824,6 +872,15 @@ var Calendar = defineComponent({
 				withPrevious: column === 0,
 				withNext: column === (props.numberOfColumns || 1) - 1,
 				fullWidth: props.fullWidth,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
+				calendarLevel: "month",
+				date: currentDate,
+				locale: props.locale,
+				onDateChange: setDate,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				disableNativeLevelSelect: props.date !== void 0 && !props.onDateChange,
 				onPrevious: () => updateDate(-scroll, "month"),
 				onNext: () => updateDate(scroll, "month"),
 				onLevelClick: () => setLevel(getNextLevel(_level.value, "up"))
@@ -835,7 +892,7 @@ var Calendar = defineComponent({
 				maxDate: props.maxDate,
 				firstDayOfWeek: props.firstDayOfWeek,
 				weekendDays: props.weekendDays,
-				renderDay: props.renderDay,
+				renderDay: props.renderDay ?? (slots.renderDay ?? slots.day ? (date) => (slots.renderDay ?? slots.day)?.({ date }) : void 0),
 				getDayProps: props.getDayProps,
 				getDayAriaLabel: props.getDayAriaLabel,
 				excludeDate: props.excludeDate,
@@ -854,6 +911,15 @@ var Calendar = defineComponent({
 				withPrevious: column === 0,
 				withNext: column === (props.numberOfColumns || 1) - 1,
 				fullWidth: props.fullWidth,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
+				calendarLevel: "year",
+				date: currentDate,
+				locale: props.locale,
+				onDateChange: setDate,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				disableNativeLevelSelect: props.date !== void 0 && !props.onDateChange,
 				onPrevious: () => updateDate(-scroll, "year"),
 				onNext: () => updateDate(scroll, "year"),
 				onLevelClick: () => setLevel(getNextLevel(_level.value, "up"))
@@ -927,11 +993,17 @@ function getNextPickerValue(value, date, type, sortDates = true) {
 }
 var DatePicker = defineComponent({
 	name: "DatePicker",
+	slots: Object,
 	props: {
 		type: {
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -951,15 +1023,21 @@ var DatePicker = defineComponent({
 			type: Boolean,
 			default: true
 		},
-		presets: Array
+		presets: Array,
+		withNativeLevelSelect: Boolean,
+		yearsSelectRange: Array
 	},
-	setup(props, { attrs }) {
+	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);
@@ -984,7 +1062,12 @@ var DatePicker = defineComponent({
 				onDateChange: (date) => calendarDate.value = date,
 				level: calendarLevel.value,
 				onLevelChange: (level) => calendarLevel.value = level,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onDayClick: selectDate
+			}, {
+				renderDay: slots.renderDay,
+				day: slots.day
 			});
 			if (!props.presets?.length) return calendar;
 			return h("div", { class: Dates_module_default.datePickerRoot }, [h("div", { class: Dates_module_default.presetsList }, props.presets.map((preset, index) => h(UnstyledButton, {
@@ -1003,6 +1086,11 @@ var YearPicker = defineComponent({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1023,15 +1111,21 @@ var YearPicker = defineComponent({
 			default: true
 		},
 		presets: Array,
-		onYearSelect: Function
+		onYearSelect: Function,
+		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) => {
@@ -1067,6 +1161,8 @@ var YearPicker = defineComponent({
 				onDateChange: (date) => calendarDate.value = date,
 				defaultLevel: "decade",
 				minLevel: "decade",
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onYearSelect: selectYear,
 				getYearControlProps: yearControlProps,
 				onYearMouseEnter: (date) => {
@@ -1094,6 +1190,11 @@ var MonthPicker = defineComponent({
 			type: String,
 			default: "default"
 		},
+		modelValue: [
+			String,
+			Array,
+			null
+		],
 		value: [
 			String,
 			Array,
@@ -1114,15 +1215,21 @@ var MonthPicker = defineComponent({
 			default: true
 		},
 		presets: Array,
-		onMonthSelect: Function
+		onMonthSelect: Function,
+		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) => {
@@ -1158,6 +1265,8 @@ var MonthPicker = defineComponent({
 				onDateChange: (date) => calendarDate.value = date,
 				defaultLevel: "year",
 				minLevel: "year",
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onMonthSelect: selectMonth,
 				getMonthControlProps: monthControlProps,
 				onMonthMouseEnter: (date) => {
@@ -1275,6 +1384,11 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: String,
 				default: "default"
 			},
+			modelValue: [
+				String,
+				Array,
+				null
+			],
 			value: [
 				String,
 				Array,
@@ -1311,15 +1425,21 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				type: Boolean,
 				default: true
 			},
-			valueFormatter: Function
+			valueFormatter: Function,
+			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));
@@ -1340,6 +1460,8 @@ function createPickerInput(name, Picker, defaultLevel, defaultValueFormat = "MMM
 				sortDates: props.sortDates,
 				defaultLevel,
 				locale: props.locale,
+				withNativeLevelSelect: props.withNativeLevelSelect,
+				yearsSelectRange: props.yearsSelectRange,
 				onChange: (value) => {
 					setValue(value);
 					if (props.closeOnChange && props.type === "default") close();
@@ -1383,6 +1505,11 @@ var DateInput = defineComponent({
 	name: "DateInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -1405,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));
@@ -1582,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)
 		});
 	}
 });
@@ -1604,6 +1742,7 @@ var TimeGrid = defineComponent({
 			type: Array,
 			default: () => []
 		},
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		minTime: String,
@@ -1613,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,
@@ -1651,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,
@@ -1679,8 +1830,19 @@ var SpinInput = defineComponent({
 		disabled: Boolean,
 		readOnly: Boolean
 	},
-	setup(props, { attrs }) {
-		const maxDigit = () => Number(props.max.toFixed(0)[0]);
+	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;
 		const handleChange = (raw) => {
 			if (props.readOnly) return;
@@ -1690,10 +1852,10 @@ var SpinInput = defineComponent({
 			for (let i = 0; i < clearValue.length; i += 1) {
 				const digit = clearValue.charCodeAt(i) - 48;
 				const next = parsedValue * 10 + digit;
-				parsedValue = next > props.max ? digit : next;
+				parsedValue = finiteMax() && next > props.max ? digit : next;
 			}
-			const clampedValue = props.allowTemporaryZero && parsedValue === 0 && props.min > 0 ? 0 : Math.min(Math.max(parsedValue, props.min), props.max);
-			props.onChange?.(clampedValue);
+			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);
+			setValue(clampedValue);
 			if (!props.disableAutoAdvance && (clampedValue > maxDigit() || raw.startsWith("00"))) props.onNextInput?.();
 		};
 		const handleKeydown = (event) => {
@@ -1701,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();
-				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") {
@@ -1729,13 +1891,11 @@ var SpinInput = defineComponent({
 			}
 			if (event.key === "ArrowUp") {
 				event.preventDefault();
-				const newValue = props.value === null ? props.min : Math.min(Math.max(props.value + props.step, props.min), arrowsMax());
-				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 ? arrowsMax() : 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", {
@@ -1743,14 +1903,14 @@ var SpinInput = defineComponent({
 			type: "text",
 			role: "spinbutton",
 			"aria-valuemin": props.min,
-			"aria-valuemax": props.max,
-			"aria-valuenow": props.value === null ? 0 : props.value,
-			"data-empty": props.value === null || void 0,
+			"aria-valuemax": finiteMax() ? props.max : 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(),
@@ -1765,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,
@@ -1777,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)]);
 	}
 });
@@ -1822,9 +2000,14 @@ var TimeControlsList = defineComponent({
 var TimePicker = defineComponent({
 	name: "TimePicker",
 	props: {
+		modelValue: String,
 		value: String,
 		defaultValue: String,
 		onChange: Function,
+		type: {
+			type: String,
+			default: "time"
+		},
 		withSeconds: Boolean,
 		min: String,
 		max: String,
@@ -1860,16 +2043,21 @@ 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,
-			format: props.format,
+			format: effectiveFormat.value,
 			amPmLabels: props.amPmLabels
 		}));
 		const hours = ref(parsed.value.hours);
@@ -1879,7 +2067,7 @@ var TimePicker = defineComponent({
 		watch(_value, (value) => {
 			const next = getParsedTime({
 				time: value,
-				format: props.format,
+				format: effectiveFormat.value,
 				amPmLabels: props.amPmLabels
 			});
 			hours.value = next.hours;
@@ -1905,7 +2093,7 @@ var TimePicker = defineComponent({
 				hours: hours.value,
 				minutes: minutes.value,
 				seconds: seconds.value,
-				format: props.format,
+				format: effectiveFormat.value,
 				withSeconds: props.withSeconds,
 				amPm: amPm.value,
 				amPmLabels: props.amPmLabels
@@ -1914,7 +2102,7 @@ var TimePicker = defineComponent({
 		};
 		const setHours = (value) => {
 			let adjusted = value;
-			if (props.format === "12h" && typeof value === "number" && value > 12) adjusted = (value - 1) % 12 + 1;
+			if (effectiveFormat.value === "12h" && typeof value === "number" && value > 12) adjusted = (value - 1) % 12 + 1;
 			hours.value = adjusted;
 			commit();
 			focus("hours");
@@ -1948,8 +2136,32 @@ var TimePicker = defineComponent({
 			setValue(timeString);
 			if (props.closeDropdownOnPresetSelect) opened.value = false;
 		};
+		const handlePaste = (event) => {
+			if (props.readOnly || props.disabled) return;
+			const value = event.clipboardData?.getData("text").trim();
+			if (!value || !/^\d+:\d{2}(?::\d{2})?(?:\s+[aApP][mM])?$/.test(value)) return;
+			const next = getParsedTime({
+				time: value,
+				format: effectiveFormat.value,
+				amPmLabels: props.amPmLabels
+			});
+			if (next.hours === null || next.minutes === null || next.minutes > 59 || props.withSeconds && (next.seconds === null || next.seconds > 59) || props.type === "time" && effectiveFormat.value === "24h" && next.hours > 23) return;
+			event.preventDefault();
+			hours.value = next.hours;
+			minutes.value = next.minutes;
+			seconds.value = props.withSeconds ? next.seconds : null;
+			amPm.value = next.amPm;
+			const result = getTimeString({
+				...next,
+				seconds: props.withSeconds ? next.seconds : null,
+				format: effectiveFormat.value,
+				withSeconds: props.withSeconds,
+				amPmLabels: props.amPmLabels
+			});
+			if (result.valid) setValue(clampTime(result.value, props.min, props.max));
+		};
 		return () => h(Popover, {
-			opened: props.withDropdown && opened.value,
+			opened: props.type !== "duration" && props.withDropdown && opened.value,
 			position: "bottom-start",
 			transitionProps: { duration: 0 }
 		}, () => [h(Popover.Target, null, () => h(InputBase, {
@@ -1959,11 +2171,11 @@ var TimePicker = defineComponent({
 			disabled: props.disabled,
 			onClick: () => {
 				focus("hours");
-				if (props.withDropdown) opened.value = true;
+				if (props.type !== "duration" && props.withDropdown) opened.value = true;
 			},
 			onMousedown: (event) => event.preventDefault(),
 			onFocusin: () => {
-				if (props.withDropdown) opened.value = true;
+				if (props.type !== "duration" && props.withDropdown) opened.value = true;
 			},
 			onFocusout: () => {
 				if (props.withDropdown) opened.value = false;
@@ -1982,12 +2194,14 @@ var TimePicker = defineComponent({
 				ref: hoursRef,
 				class: Dates_module_default.timePickerField,
 				value: hours.value,
-				min: props.format === "12h" ? 1 : 0,
-				max: props.format === "12h" ? 12 : 23,
+				min: effectiveFormat.value === "12h" ? 1 : 0,
+				max: props.type === "duration" ? Infinity : effectiveFormat.value === "12h" ? 12 : 23,
 				step: props.hoursStep,
 				onChange: setHours,
 				onNextInput: () => focus("minutes"),
-				allowTemporaryZero: props.format === "12h",
+				allowTemporaryZero: effectiveFormat.value === "12h",
+				disableAutoAdvance: props.type === "duration",
+				onPaste: handlePaste,
 				readOnly: props.readOnly,
 				disabled: props.disabled,
 				placeholder: "--"
@@ -2022,7 +2236,7 @@ var TimePicker = defineComponent({
 				disabled: props.disabled,
 				placeholder: "--"
 			}) : null,
-			props.format === "12h" ? h(AmPmInput, {
+			effectiveFormat.value === "12h" ? h(AmPmInput, {
 				ref: amPmRef,
 				value: amPm.value,
 				labels: props.amPmLabels,
@@ -2042,8 +2256,8 @@ var TimePicker = defineComponent({
 			onClick: () => handlePresetSelect(preset.value)
 		}, () => preset.label))) : h("div", { class: Dates_module_default.timePickerControlsListGroup }, [
 			h(TimeControlsList, {
-				min: props.format === "12h" ? 1 : 0,
-				max: props.format === "12h" ? 12 : 23,
+				min: effectiveFormat.value === "12h" ? 1 : 0,
+				max: effectiveFormat.value === "12h" ? 12 : 23,
 				step: props.hoursStep,
 				value: hours.value,
 				onSelect: setHours
@@ -2085,6 +2299,11 @@ var TimeValue = defineComponent({
 var DateTimePicker = defineComponent({
 	name: "DateTimePicker",
 	props: {
+		modelValue: [
+			String,
+			Date,
+			null
+		],
 		value: [
 			String,
 			Date,
@@ -2108,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") : "");
@@ -2160,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],
@@ -2187,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 = () => {
@@ -2214,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()))]);
 			});