ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/date-picker/src/RsDatePicker.impl.js

@@ -0,0 +1,981 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { buildLocalInputRules, runFormFieldRules } from "../../form/src/form-rules.js";
+import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import RsButton_default from "../../button/src/RsButton.js";
+import { placeAnchoredPopup } from "../../_shared/src/overlay-utils.js";
+import { EMPTY_DATE_RANGE, compareDates, extractTimeFromDateTime, formatDateParts, formatDateTimeParts, formatPickerDisplay, formatTimestampValue, fromInternalPickerValue, getNextMonth, getNowDateTime, getTodayDate, isDateRangeEmpty, isDateRangeOrdered, isDateWithinBounds, isTimestampRange, normalizeShortcutValue, parseDateTimeValue, parseDateValue, parseTimestampValue, resolveDatePickerPortalTarget, resolveWeekStartsOn, toInternalPickerValue, toRangeEndpointString } from "./date-picker-utils.js";
+import RsCalendarGrid_default from "../../calendar-grid/src/RsCalendarGrid.js";
+import { containOverlayWheel, formatTimeParts, isTimeColumnScrollTarget } from "../../time-picker/src/time-picker-utils.js";
+import RsTimePicker_default from "../../time-picker/src/RsTimePicker.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withModifiers } from "vue";
+//#region src/components/date-picker/src/RsDatePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = [
+	"id",
+	"disabled",
+	"aria-invalid",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-readonly"
+];
+var _hoisted_4 = { class: "rs-date-picker__leading" };
+var _hoisted_5 = { class: "rs-date-picker__value" };
+var _hoisted_6 = [
+	"id",
+	"data-placement",
+	"data-rs-theme",
+	"aria-label"
+];
+var _hoisted_7 = { class: "rs-date-picker__panel" };
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-date-picker__range-grid"
+};
+var _hoisted_9 = { class: "rs-date-picker__range-pane" };
+var _hoisted_10 = { class: "rs-date-picker__pane-title" };
+var _hoisted_11 = {
+	key: 0,
+	class: "rs-date-picker__time-row"
+};
+var _hoisted_12 = { class: "rs-date-picker__time-label" };
+var _hoisted_13 = { class: "rs-date-picker__range-pane" };
+var _hoisted_14 = { class: "rs-date-picker__pane-title" };
+var _hoisted_15 = {
+	key: 0,
+	class: "rs-date-picker__time-row"
+};
+var _hoisted_16 = { class: "rs-date-picker__time-label" };
+var _hoisted_17 = {
+	key: 0,
+	class: "rs-date-picker__time-row"
+};
+var _hoisted_18 = { class: "rs-date-picker__time-label" };
+var _hoisted_19 = { class: "rs-date-picker__footer" };
+var _hoisted_20 = { class: "rs-date-picker__footer-start" };
+var _hoisted_21 = {
+	key: 0,
+	class: "rs-date-picker__shortcuts"
+};
+var _hoisted_22 = ["disabled", "onClick"];
+var _hoisted_23 = { class: "rs-date-picker__actions" };
+var _hoisted_24 = ["disabled"];
+var _hoisted_25 = {
+	key: 1,
+	class: "rs-date-picker-field__error",
+	role: "alert"
+};
+var _hoisted_26 = {
+	key: 2,
+	class: "rs-field__hint"
+};
+var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDatePicker",
+	inheritAttrs: false,
+	__name: "RsDatePicker",
+	props: /*@__PURE__*/ mergeModels({
+		name: {},
+		label: {},
+		hint: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		range: {
+			type: Boolean,
+			default: false
+		},
+		minDate: {},
+		maxDate: {},
+		withTime: {
+			type: Boolean,
+			default: false
+		},
+		withSeconds: { type: Boolean },
+		valueFormat: { default: "string" },
+		format: {},
+		labelPosition: { default: "top" },
+		shortcuts: {},
+		size: {},
+		radius: {},
+		id: {},
+		invalid: { type: Boolean },
+		showValidateMessage: {
+			type: Boolean,
+			default: true
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		weekStartsOn: {},
+		disabledDates: { default: () => [] },
+		disabledDate: {},
+		getPopupContainer: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"change",
+		"openChange",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue", "update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		function isRangeModel(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value) && ("start" in value || "end" in value);
+		}
+		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const props = __props;
+		const emit = __emit;
+		const fallbackId = useId();
+		const panelId = useId();
+		const attrs = useAttrs();
+		const { t, locale } = useRsI18n();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
+		const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const clearIconSize = computed(() => Math.max(12, triggerIconSize.value - 2));
+		/** withTime 默认带秒；显式 withSeconds 优先（勿与 prop 同名，避免模板取到未传 prop） */
+		const resolvedWithSeconds = computed(() => props.withSeconds !== void 0 ? props.withSeconds : props.withTime);
+		const resolvedWeekStartsOn = computed(() => resolveWeekStartsOn(locale.value, props.weekStartsOn));
+		const formContext = useRsFormContext();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
+			id: props.id,
+			name: props.name
+		}));
+		const autoMessage = ref("");
+		const isInvalid = computed(() => Boolean(props.invalid || boundToItem.value && formItem?.invalid.value || !boundToItem.value && autoMessage.value));
+		const triggerId = computed(() => props.id || fallbackId);
+		const visibleMessage = computed(() => boundToItem.value || props.showValidateMessage === false ? "" : autoMessage.value);
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const canInteract = computed(() => !resolvedDisabled.value && !props.readonly);
+		const rootRef = useTemplateRef("rootRef");
+		const triggerRef = useTemplateRef("triggerRef");
+		const contentRef = useTemplateRef("contentRef");
+		const panelTheme = ref();
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "bottom"
+		});
+		const todaySeed = getTodayDate();
+		const viewYear = ref(todaySeed.year);
+		const viewMonth = ref(todaySeed.month);
+		const startViewYear = ref(todaySeed.year);
+		const startViewMonth = ref(todaySeed.month);
+		const endViewYear = ref(todaySeed.year);
+		const endViewMonth = ref(todaySeed.month);
+		const draftDate = ref(null);
+		const draftStart = ref(null);
+		const draftEnd = ref(null);
+		const draftTime = ref("");
+		const draftStartTime = ref("");
+		const draftEndTime = ref("");
+		const convertOptions = computed(() => ({
+			valueFormat: props.valueFormat ?? "string",
+			withTime: props.withTime
+		}));
+		const useTimestamp = computed(() => props.valueFormat === "timestamp");
+		const rangeModel = computed({
+			get() {
+				if (!props.range) return { ...EMPTY_DATE_RANGE };
+				const value = model.value;
+				const opts = convertOptions.value;
+				if (isTimestampRange(value)) return {
+					start: formatTimestampValue(value[0], opts.withTime),
+					end: formatTimestampValue(value[1], opts.withTime)
+				};
+				if (!isRangeModel(value)) return { ...EMPTY_DATE_RANGE };
+				return {
+					start: toInternalPickerValue(value.start, opts) || void 0,
+					end: toInternalPickerValue(value.end, opts) || void 0
+				};
+			},
+			set(value) {
+				const opts = convertOptions.value;
+				if (useTimestamp.value) {
+					const start = parseTimestampValue(value.start);
+					const end = parseTimestampValue(value.end);
+					model.value = start != null && end != null ? [start, end] : null;
+					return;
+				}
+				model.value = {
+					start: toRangeEndpointString(fromInternalPickerValue(value.start || "", opts)),
+					end: toRangeEndpointString(fromInternalPickerValue(value.end || "", opts))
+				};
+			}
+		});
+		const singleModel = computed({
+			get() {
+				if (props.range) return "";
+				return toInternalPickerValue(model.value, convertOptions.value);
+			},
+			set(value) {
+				model.value = fromInternalPickerValue(value, convertOptions.value);
+			}
+		});
+		const startMaxDate = computed(() => {
+			if (!draftEnd.value) return props.maxDate;
+			return formatDateParts(draftEnd.value);
+		});
+		const endMinDate = computed(() => {
+			if (!draftStart.value) return props.minDate;
+			return formatDateParts(draftStart.value);
+		});
+		const isEmpty = computed(() => props.range ? isDateRangeEmpty(rangeModel.value) : !singleModel.value);
+		const displayOptions = computed(() => ({
+			format: props.format,
+			withTime: props.withTime
+		}));
+		const displayValue = computed(() => {
+			if (props.range) {
+				const start = formatPickerDisplay(rangeModel.value.start, displayOptions.value);
+				const end = formatPickerDisplay(rangeModel.value.end, displayOptions.value);
+				if (start || end) {
+					const separator = t("datePicker.separator");
+					if (start && end) return `${start}${separator}${end}`;
+					return start || end;
+				}
+				if (props.placeholder) return props.placeholder;
+				return props.withTime ? t("dateTimePicker.rangePlaceholder") : t("datePicker.rangePlaceholder");
+			}
+			if (!singleModel.value) return props.placeholder ?? (props.withTime ? t("dateTimePicker.placeholder") : t("datePicker.placeholder"));
+			return formatPickerDisplay(singleModel.value, displayOptions.value);
+		});
+		const triggerIcon = computed(() => {
+			if (props.range || props.withTime) return "calendar-clock";
+			return "calendar-days";
+		});
+		const showClear = computed(() => props.clearable && !isEmpty.value && canInteract.value);
+		const portalTarget = computed(() => resolveDatePickerPortalTarget(props.getPopupContainer, triggerRef.value));
+		const panelStyle = computed(() => ({
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`,
+			"--rs-date-picker-radius": rsRadiusCss(resolvedRadius.value)
+		}));
+		const rootStyle = computed(() => ({ "--rs-date-picker-radius": rsRadiusCss(resolvedRadius.value) }));
+		function currentTimeValue() {
+			const now = getNowDateTime();
+			return formatTimeParts(now.hour, now.minute, resolvedWithSeconds.value ? now.second : void 0);
+		}
+		function resetRangeTimeDrafts() {
+			const time = currentTimeValue();
+			draftStartTime.value = time;
+			draftEndTime.value = time;
+		}
+		function combineDraftDateTime(date, time) {
+			return formatDateTimeParts(date, time, resolvedWithSeconds.value);
+		}
+		function setEndViewFromStart(start) {
+			const next = getNextMonth(start.year, start.month);
+			endViewYear.value = next.year;
+			endViewMonth.value = next.month;
+		}
+		function syncSingleDraft() {
+			if (props.withTime) {
+				const parsed = parseDateTimeValue(singleModel.value);
+				if (parsed) {
+					draftDate.value = {
+						year: parsed.year,
+						month: parsed.month,
+						day: parsed.day
+					};
+					draftTime.value = extractTimeFromDateTime(singleModel.value, resolvedWithSeconds.value);
+					viewYear.value = parsed.year;
+					viewMonth.value = parsed.month;
+					return;
+				}
+				const today = getTodayDate();
+				draftDate.value = null;
+				draftTime.value = currentTimeValue();
+				viewYear.value = today.year;
+				viewMonth.value = today.month;
+				return;
+			}
+			const parsed = parseDateValue(singleModel.value);
+			if (parsed) {
+				draftDate.value = parsed;
+				viewYear.value = parsed.year;
+				viewMonth.value = parsed.month;
+				return;
+			}
+			const today = getTodayDate();
+			draftDate.value = null;
+			viewYear.value = today.year;
+			viewMonth.value = today.month;
+		}
+		function syncRangeDraft() {
+			const today = getTodayDate();
+			const value = rangeModel.value;
+			if (props.withTime) {
+				const start = parseDateTimeValue(value.start);
+				const end = parseDateTimeValue(value.end);
+				draftStart.value = start ? {
+					year: start.year,
+					month: start.month,
+					day: start.day
+				} : null;
+				draftEnd.value = end ? {
+					year: end.year,
+					month: end.month,
+					day: end.day
+				} : null;
+				if (start) {
+					draftStartTime.value = extractTimeFromDateTime(value.start, resolvedWithSeconds.value);
+					startViewYear.value = start.year;
+					startViewMonth.value = start.month;
+				} else {
+					resetRangeTimeDrafts();
+					startViewYear.value = today.year;
+					startViewMonth.value = today.month;
+				}
+				if (end) {
+					draftEndTime.value = extractTimeFromDateTime(value.end, resolvedWithSeconds.value);
+					endViewYear.value = end.year;
+					endViewMonth.value = end.month;
+				} else if (start) {
+					draftEndTime.value = draftStartTime.value;
+					setEndViewFromStart(start);
+				} else {
+					const next = getNextMonth(today.year, today.month);
+					endViewYear.value = next.year;
+					endViewMonth.value = next.month;
+				}
+				return;
+			}
+			const start = parseDateValue(value.start);
+			const end = parseDateValue(value.end);
+			draftStart.value = start;
+			draftEnd.value = end;
+			if (start) {
+				startViewYear.value = start.year;
+				startViewMonth.value = start.month;
+			} else {
+				startViewYear.value = today.year;
+				startViewMonth.value = today.month;
+			}
+			if (end) {
+				endViewYear.value = end.year;
+				endViewMonth.value = end.month;
+			} else if (start) setEndViewFromStart(start);
+			else {
+				const next = getNextMonth(today.year, today.month);
+				endViewYear.value = next.year;
+				endViewMonth.value = next.month;
+			}
+		}
+		function syncDraftFromModel() {
+			if (props.range) {
+				syncRangeDraft();
+				return;
+			}
+			syncSingleDraft();
+		}
+		function emitChange() {
+			emit("change", model.value);
+		}
+		function confirmSingleSelection() {
+			if (!draftDate.value) return;
+			if (props.withTime) {
+				const combined = combineDraftDateTime(draftDate.value, draftTime.value);
+				if (!combined) return;
+				singleModel.value = combined;
+				open.value = false;
+				emitChange();
+				return;
+			}
+			if (!isDateWithinBounds(draftDate.value.year, draftDate.value.month, draftDate.value.day, {
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			})) return;
+			singleModel.value = formatDateParts(draftDate.value);
+			open.value = false;
+			emitChange();
+		}
+		function confirmRangeSelection() {
+			if (!draftStart.value || !draftEnd.value) return;
+			if (props.withTime) {
+				const start = combineDraftDateTime(draftStart.value, draftStartTime.value);
+				const end = combineDraftDateTime(draftEnd.value, draftEndTime.value);
+				if (!start || !end) return;
+				if (!isDateRangeOrdered({
+					start,
+					end
+				})) return;
+				rangeModel.value = {
+					start,
+					end
+				};
+				open.value = false;
+				emitChange();
+				return;
+			}
+			const start = formatDateParts(draftStart.value);
+			const end = formatDateParts(draftEnd.value);
+			if (!isDateRangeOrdered({
+				start,
+				end
+			})) return;
+			if (!isDateWithinBounds(draftStart.value.year, draftStart.value.month, draftStart.value.day, {
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			}) || !isDateWithinBounds(draftEnd.value.year, draftEnd.value.month, draftEnd.value.day, {
+				minDate: props.minDate,
+				maxDate: props.maxDate
+			})) return;
+			rangeModel.value = {
+				start,
+				end
+			};
+			open.value = false;
+			emitChange();
+		}
+		function confirmSelection() {
+			if (props.range) {
+				confirmRangeSelection();
+				return;
+			}
+			confirmSingleSelection();
+		}
+		function applyShortcut(shortcut) {
+			if (!canInteract.value) return;
+			const normalized = normalizeShortcutValue(shortcut.value(), { withTime: props.withTime });
+			if (!normalized) return;
+			if (props.range) {
+				const rangeValue = typeof normalized === "string" ? {
+					start: normalized,
+					end: normalized
+				} : normalized;
+				if (!rangeValue.start || !rangeValue.end) return;
+				if (!isDateRangeOrdered(rangeValue)) return;
+				rangeModel.value = rangeValue;
+				open.value = false;
+				emitChange();
+				return;
+			}
+			if (typeof normalized !== "string") return;
+			singleModel.value = normalized;
+			open.value = false;
+			emitChange();
+		}
+		function clearSelection() {
+			if (props.range) {
+				if (useTimestamp.value) model.value = null;
+				else rangeModel.value = { ...EMPTY_DATE_RANGE };
+				draftStart.value = null;
+				draftEnd.value = null;
+				if (props.withTime) resetRangeTimeDrafts();
+			} else {
+				singleModel.value = "";
+				draftDate.value = null;
+				if (props.withTime) draftTime.value = currentTimeValue();
+			}
+			open.value = false;
+			emit("clear");
+			emitChange();
+		}
+		function selectToday() {
+			const today = getTodayDate();
+			const now = getNowDateTime();
+			if (props.range) {
+				draftStart.value = today;
+				draftEnd.value = today;
+				startViewYear.value = today.year;
+				startViewMonth.value = today.month;
+				endViewYear.value = today.year;
+				endViewMonth.value = today.month;
+				if (props.withTime) {
+					const time = formatTimeParts(now.hour, now.minute, resolvedWithSeconds.value ? now.second : void 0);
+					draftStartTime.value = time;
+					draftEndTime.value = time;
+				}
+				confirmRangeSelection();
+				return;
+			}
+			draftDate.value = today;
+			viewYear.value = today.year;
+			viewMonth.value = today.month;
+			if (props.withTime) draftTime.value = formatTimeParts(now.hour, now.minute, resolvedWithSeconds.value ? now.second : void 0);
+			confirmSingleSelection();
+		}
+		function handleDateSelect(date) {
+			draftDate.value = date;
+			viewYear.value = date.year;
+			viewMonth.value = date.month;
+		}
+		function handleStartSelect(date) {
+			if (!isDateWithinBounds(date.year, date.month, date.day, {
+				minDate: props.minDate,
+				maxDate: startMaxDate.value
+			})) return;
+			draftStart.value = date;
+			startViewYear.value = date.year;
+			startViewMonth.value = date.month;
+			if (draftEnd.value && compareDates(date, draftEnd.value) > 0) {
+				draftEnd.value = null;
+				setEndViewFromStart(date);
+			}
+		}
+		function handleEndSelect(date) {
+			if (!isDateWithinBounds(date.year, date.month, date.day, {
+				minDate: endMinDate.value,
+				maxDate: props.maxDate
+			})) return;
+			if (draftStart.value && compareDates(date, draftStart.value) < 0) return;
+			draftEnd.value = date;
+			endViewYear.value = date.year;
+			endViewMonth.value = date.month;
+		}
+		function clearValidation() {
+			autoMessage.value = "";
+		}
+		function setFieldValue(value) {
+			if (props.range) {
+				if (isRangeModel(value)) {
+					model.value = value;
+					return;
+				}
+				if (Array.isArray(value) && value.length >= 2) {
+					model.value = {
+						start: String(value[0] ?? ""),
+						end: String(value[1] ?? "")
+					};
+					return;
+				}
+				model.value = { ...EMPTY_DATE_RANGE };
+				return;
+			}
+			model.value = value == null ? "" : value;
+		}
+		function focus() {
+			triggerRef.value?.focus();
+		}
+		function blur() {
+			triggerRef.value?.blur();
+		}
+		function toggleOpen() {
+			if (!canInteract.value) return;
+			open.value = !open.value;
+		}
+		function onTriggerKeydown(event) {
+			if (!canInteract.value || event.isComposing) return;
+			if (event.key === "Escape" && open.value) {
+				event.preventDefault();
+				open.value = false;
+				return;
+			}
+			if (open.value) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				open.value = true;
+			}
+		}
+		function syncPanelTheme() {
+			const el = triggerRef.value ?? rootRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const content = contentRef.value;
+			if (!trigger || !open.value || typeof window === "undefined") return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = content?.getBoundingClientRect();
+			const prefWidth = props.range ? Math.max(anchor.width, measured?.width || Math.min(672, window.innerWidth - 32)) : Math.max(anchor.width, measured?.width || Math.min(320, window.innerWidth - 32));
+			popup.value = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height: measured?.height || 320
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, 6);
+		}
+		let frame = 0;
+		let overlayBound = false;
+		let openWatchReady = false;
+		let panelResize;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (rootRef.value?.contains(target)) return;
+			if (contentRef.value?.contains(target)) return;
+			if (target instanceof Element) {
+				if (target.closest(".rs-time-picker__content")) return;
+			}
+			open.value = false;
+		}
+		function onWindowChange(event) {
+			if (!open.value) return;
+			if (event?.type === "scroll" && isTimeColumnScrollTarget(event.target)) return;
+			requestPlace();
+		}
+		function attachPanelObserver() {
+			if (typeof ResizeObserver === "undefined") return;
+			panelResize?.disconnect();
+			if (!contentRef.value) return;
+			panelResize = new ResizeObserver(() => requestPlace());
+			panelResize.observe(contentRef.value);
+		}
+		function attachPanelWheel() {
+			contentRef.value?.addEventListener("wheel", containOverlayWheel, { passive: false });
+		}
+		function detachPanelWheel() {
+			contentRef.value?.removeEventListener("wheel", containOverlayWheel);
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			if (typeof document !== "undefined") document.addEventListener("pointerdown", onDocPointerDown);
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			detachPanelWheel();
+			panelResize?.disconnect();
+			panelResize = void 0;
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		async function runValidate(trigger = "submit") {
+			const formRules = formContext?.getFieldRules(props.name) ?? [];
+			const localRules = buildLocalInputRules({ required: props.required });
+			const rules = [...formRules, ...localRules];
+			if (!rules.length) {
+				autoMessage.value = "";
+				return {
+					valid: true,
+					name: props.name
+				};
+			}
+			const result = await runFormFieldRules(model.value, rules, { trigger });
+			autoMessage.value = result.message ?? "";
+			return {
+				valid: result.valid,
+				message: result.message,
+				name: props.name
+			};
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue: setFieldValue,
+			validate: (trigger) => runValidate(trigger ?? "submit"),
+			clearValidation,
+			setError: (message) => {
+				autoMessage.value = message;
+			}
+		}));
+		__expose({
+			setValue: setFieldValue,
+			clearValidation,
+			setError: (message) => {
+				autoMessage.value = message;
+			},
+			validate: runValidate,
+			focus,
+			blur
+		});
+		watch(open, (isOpen) => {
+			const skipEvent = !openWatchReady;
+			openWatchReady = true;
+			if (typeof document === "undefined" || typeof window === "undefined") return;
+			if (isOpen) {
+				if (!canInteract.value) {
+					open.value = false;
+					return;
+				}
+				syncDraftFromModel();
+				syncPanelTheme();
+				attachOverlay();
+				nextTick(() => {
+					requestPlace();
+					attachPanelObserver();
+					attachPanelWheel();
+				});
+				if (!skipEvent) emit("openChange", true);
+				return;
+			}
+			detachOverlay();
+			if (!skipEvent) {
+				emit("openChange", false);
+				if (props.name) runValidate("change");
+			}
+		}, { immediate: true });
+		watch(resolvedDisabled, (disabled) => {
+			if (disabled && open.value) open.value = false;
+		});
+		onBeforeUnmount(detachOverlay);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-field", [`rs-field--label-${__props.labelPosition}`, { "rs-date-picker-wrap--clearable": showClear.value }]]),
+				style: normalizeStyle(rootStyle.value)
+			}, [
+				__props.label ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					class: "rs-field__label",
+					for: triggerId.value
+				}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", _hoisted_2, "*")) : createCommentVNode("", true)], 8, _hoisted_1)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(["rs-date-picker", `rs-date-picker--${unref(resolvedSize)}`]) }, [createElementVNode("button", mergeProps(unref(attrs), {
+					id: triggerId.value,
+					ref_key: "triggerRef",
+					ref: triggerRef,
+					type: "button",
+					class: ["rs-date-picker__trigger", {
+						"rs-date-picker__trigger--placeholder": isEmpty.value,
+						"rs-date-picker__trigger--invalid": isInvalid.value
+					}],
+					disabled: resolvedDisabled.value,
+					"aria-invalid": isInvalid.value || void 0,
+					"aria-label": __props.ariaLabel,
+					"aria-haspopup": "dialog",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(panelId) : void 0,
+					"aria-readonly": __props.readonly || void 0,
+					onClick: toggleOpen,
+					onKeydown: onTriggerKeydown,
+					onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus")),
+					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur"))
+				}), [createElementVNode("span", _hoisted_4, [createVNode(RsIcon_default, {
+					name: triggerIcon.value,
+					size: triggerIconSize.value,
+					class: "rs-date-picker__icon",
+					"aria-hidden": "true"
+				}, null, 8, ["name", "size"]), createElementVNode("span", _hoisted_5, toDisplayString(displayValue.value), 1)]), createVNode(RsIcon_default, {
+					name: "chevron-down",
+					size: triggerIconSize.value,
+					class: "rs-date-picker__chevron",
+					"aria-hidden": "true"
+				}, null, 8, ["size"])], 16, _hoisted_3), showClear.value ? (openBlock(), createBlock(RsButton_default, {
+					key: 0,
+					class: "rs-date-picker__clear",
+					variant: "text",
+					bordered: false,
+					size: "ssm",
+					radius: "full",
+					icon: "x",
+					"icon-size": clearIconSize.value,
+					"icon-only": "",
+					"aria-label": __props.withTime ? unref(t)("dateTimePicker.clear") : unref(t)("datePicker.clear"),
+					onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+					onClick: withModifiers(clearSelection, ["stop"])
+				}, null, 8, ["icon-size", "aria-label"])) : createCommentVNode("", true)], 2),
+				(openBlock(), createBlock(Teleport, { to: portalTarget.value }, [open.value && canInteract.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(panelId),
+					ref_key: "contentRef",
+					ref: contentRef,
+					class: normalizeClass(["rs-date-picker__content", { "rs-date-picker__content--range": __props.range }]),
+					"data-placement": popup.value.placement,
+					"data-rs-theme": panelTheme.value,
+					style: normalizeStyle(panelStyle.value),
+					role: "dialog",
+					"aria-label": __props.label || __props.ariaLabel || (__props.withTime ? unref(t)("dateTimePicker.placeholder") : unref(t)("datePicker.placeholder"))
+				}, [createElementVNode("div", _hoisted_7, [__props.range ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("section", _hoisted_9, [
+					createElementVNode("span", _hoisted_10, toDisplayString(__props.withTime ? unref(t)("dateTimePicker.rangeStart") : unref(t)("datePicker.rangeStart")), 1),
+					createVNode(RsCalendarGrid_default, {
+						"view-year": startViewYear.value,
+						"onUpdate:viewYear": _cache[3] || (_cache[3] = ($event) => startViewYear.value = $event),
+						"view-month": startViewMonth.value,
+						"onUpdate:viewMonth": _cache[4] || (_cache[4] = ($event) => startViewMonth.value = $event),
+						selected: draftStart.value,
+						"range-start": draftStart.value,
+						"range-end": draftEnd.value,
+						"min-date": __props.minDate,
+						"max-date": startMaxDate.value,
+						"disabled-dates": __props.disabledDates,
+						"disabled-date": __props.disabledDate,
+						"week-starts-on": resolvedWeekStartsOn.value,
+						onSelect: handleStartSelect
+					}, null, 8, [
+						"view-year",
+						"view-month",
+						"selected",
+						"range-start",
+						"range-end",
+						"min-date",
+						"max-date",
+						"disabled-dates",
+						"disabled-date",
+						"week-starts-on"
+					]),
+					__props.withTime ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("dateTimePicker.time")), 1), createVNode(RsTimePicker_default, {
+						modelValue: draftStartTime.value,
+						"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => draftStartTime.value = $event),
+						class: "rs-date-picker__time-picker",
+						embedded: "",
+						size: unref(resolvedSize),
+						"with-seconds": resolvedWithSeconds.value,
+						disabled: !draftStart.value || resolvedDisabled.value
+					}, null, 8, [
+						"modelValue",
+						"size",
+						"with-seconds",
+						"disabled"
+					])])) : createCommentVNode("", true)
+				]), createElementVNode("section", _hoisted_13, [
+					createElementVNode("span", _hoisted_14, toDisplayString(__props.withTime ? unref(t)("dateTimePicker.rangeEnd") : unref(t)("datePicker.rangeEnd")), 1),
+					createVNode(RsCalendarGrid_default, {
+						"view-year": endViewYear.value,
+						"onUpdate:viewYear": _cache[6] || (_cache[6] = ($event) => endViewYear.value = $event),
+						"view-month": endViewMonth.value,
+						"onUpdate:viewMonth": _cache[7] || (_cache[7] = ($event) => endViewMonth.value = $event),
+						selected: draftEnd.value,
+						"range-start": draftStart.value,
+						"range-end": draftEnd.value,
+						"min-date": endMinDate.value,
+						"max-date": __props.maxDate,
+						"disabled-dates": __props.disabledDates,
+						"disabled-date": __props.disabledDate,
+						"week-starts-on": resolvedWeekStartsOn.value,
+						onSelect: handleEndSelect
+					}, null, 8, [
+						"view-year",
+						"view-month",
+						"selected",
+						"range-start",
+						"range-end",
+						"min-date",
+						"max-date",
+						"disabled-dates",
+						"disabled-date",
+						"week-starts-on"
+					]),
+					__props.withTime ? (openBlock(), createElementBlock("div", _hoisted_15, [createElementVNode("span", _hoisted_16, toDisplayString(unref(t)("dateTimePicker.time")), 1), createVNode(RsTimePicker_default, {
+						modelValue: draftEndTime.value,
+						"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => draftEndTime.value = $event),
+						class: "rs-date-picker__time-picker",
+						embedded: "",
+						size: unref(resolvedSize),
+						"with-seconds": resolvedWithSeconds.value,
+						disabled: !draftEnd.value || resolvedDisabled.value
+					}, null, 8, [
+						"modelValue",
+						"size",
+						"with-seconds",
+						"disabled"
+					])])) : createCommentVNode("", true)
+				])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(RsCalendarGrid_default, {
+					"view-year": viewYear.value,
+					"onUpdate:viewYear": _cache[9] || (_cache[9] = ($event) => viewYear.value = $event),
+					"view-month": viewMonth.value,
+					"onUpdate:viewMonth": _cache[10] || (_cache[10] = ($event) => viewMonth.value = $event),
+					selected: draftDate.value,
+					"min-date": __props.minDate,
+					"max-date": __props.maxDate,
+					"disabled-dates": __props.disabledDates,
+					"disabled-date": __props.disabledDate,
+					"week-starts-on": resolvedWeekStartsOn.value,
+					onSelect: handleDateSelect
+				}, null, 8, [
+					"view-year",
+					"view-month",
+					"selected",
+					"min-date",
+					"max-date",
+					"disabled-dates",
+					"disabled-date",
+					"week-starts-on"
+				]), __props.withTime ? (openBlock(), createElementBlock("div", _hoisted_17, [createElementVNode("span", _hoisted_18, toDisplayString(unref(t)("dateTimePicker.time")), 1), createVNode(RsTimePicker_default, {
+					modelValue: draftTime.value,
+					"onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => draftTime.value = $event),
+					class: "rs-date-picker__time-picker",
+					embedded: "",
+					size: unref(resolvedSize),
+					"with-seconds": resolvedWithSeconds.value,
+					disabled: !draftDate.value || resolvedDisabled.value
+				}, null, 8, [
+					"modelValue",
+					"size",
+					"with-seconds",
+					"disabled"
+				])])) : createCommentVNode("", true)], 64)), createElementVNode("footer", _hoisted_19, [createElementVNode("div", _hoisted_20, [__props.shortcuts?.length ? (openBlock(), createElementBlock("div", _hoisted_21, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.shortcuts, (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: `${item.label}-${index}`,
+						type: "button",
+						class: "rs-date-picker__shortcut",
+						disabled: resolvedDisabled.value,
+						onClick: ($event) => applyShortcut(item)
+					}, toDisplayString(item.label), 9, _hoisted_22);
+				}), 128))])) : (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: "rs-date-picker__link",
+					onClick: selectToday
+				}, toDisplayString(__props.range ? __props.withTime ? unref(t)("dateTimePicker.now") : unref(t)("datePicker.rangeToday") : __props.withTime ? unref(t)("dateTimePicker.now") : unref(t)("datePicker.today")), 1))]), createElementVNode("div", _hoisted_23, [createElementVNode("button", {
+					type: "button",
+					class: "rs-date-picker__ghost",
+					onClick: clearSelection
+				}, toDisplayString(__props.withTime ? unref(t)("dateTimePicker.clear") : unref(t)("datePicker.clear")), 1), createElementVNode("button", {
+					type: "button",
+					class: "rs-date-picker__confirm",
+					disabled: __props.range ? !draftStart.value || !draftEnd.value : !draftDate.value || __props.withTime && !draftTime.value,
+					onClick: confirmSelection
+				}, toDisplayString(unref(t)("datePicker.confirm")), 9, _hoisted_24)])])])], 14, _hoisted_6)) : createCommentVNode("", true)], 8, ["to"])),
+				visibleMessage.value ? (openBlock(), createElementBlock("p", _hoisted_25, toDisplayString(visibleMessage.value), 1)) : createCommentVNode("", true),
+				__props.hint ? (openBlock(), createElementBlock("span", _hoisted_26, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 6);
+		};
+	}
+});
+//#endregion
+export { RsDatePicker_vue_vue_type_script_setup_true_lang_default as default };