niuma-ui 2.0.3 → 2.0.4

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

@@ -1,74 +1,85 @@
 import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
-import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "../../_shared/src/reka.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 { EMPTY_DATE_RANGE, compareDates, extractTimeFromDateTime, formatDateDisplay, formatDateParts, formatDateRangeLabel, formatDateTimeDisplay, formatDateTimeParts, formatDateTimeRangeLabel, formatTimestampValue, fromInternalPickerValue, getNextMonth, getNowDateTime, getTodayDate, isDateRangeEmpty, isDateRangeOrdered, isDateWithinBounds, isTimestampRange, normalizeShortcutValue, parseDateTimeValue, parseDateValue, parseTimestampValue, toInternalPickerValue, toRangeEndpointString } from "./date-picker-utils.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 { formatTimeParts } from "../../time-picker/src/time-picker-utils.js";
+import { containOverlayWheel, formatTimeParts, isTimeColumnScrollTarget } from "../../time-picker/src/time-picker-utils.js";
 import RsTimePicker_default from "../../time-picker/src/RsTimePicker.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useAttrs, useId, useModel, watch, withCtx } from "vue";
+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 = {
+var _hoisted_1 = ["for"];
+var _hoisted_2 = {
 	key: 0,
-	class: "rs-field__label"
-};
-var _hoisted_2 = ["for"];
-var _hoisted_3 = {
-	key: 2,
 	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 = {
-	key: 0,
-	class: "rs-date-picker__panel"
-};
-var _hoisted_7 = {
+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_8 = { class: "rs-date-picker__range-pane" };
-var _hoisted_9 = { class: "rs-date-picker__pane-title" };
-var _hoisted_10 = {
+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_11 = { class: "rs-date-picker__time-label" };
-var _hoisted_12 = { class: "rs-date-picker__range-pane" };
-var _hoisted_13 = { class: "rs-date-picker__pane-title" };
-var _hoisted_14 = {
+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_15 = { class: "rs-date-picker__time-label" };
-var _hoisted_16 = {
+var _hoisted_16 = { class: "rs-date-picker__time-label" };
+var _hoisted_17 = {
 	key: 0,
 	class: "rs-date-picker__time-row"
 };
-var _hoisted_17 = { class: "rs-date-picker__time-label" };
-var _hoisted_18 = { class: "rs-date-picker__footer" };
-var _hoisted_19 = { class: "rs-date-picker__footer-start" };
-var _hoisted_20 = {
+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_21 = ["disabled", "onClick"];
-var _hoisted_22 = { class: "rs-date-picker__actions" };
-var _hoisted_23 = ["disabled"];
-var _hoisted_24 = {
+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_25 = {
+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({
@@ -96,15 +107,30 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		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": {},
@@ -114,21 +140,32 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		"openModifiers": {}
 	}),
-	emits: ["update:modelValue", "update:open"],
-	setup(__props, { expose: __expose }) {
+	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 fieldId = useId();
+		const emit = __emit;
+		const fallbackId = useId();
+		const panelId = useId();
 		const attrs = useAttrs();
-		const { t } = useRsI18n();
+		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, {
@@ -137,14 +174,27 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		}));
 		const autoMessage = ref("");
 		const isInvalid = computed(() => Boolean(props.invalid || boundToItem.value && formItem?.invalid.value || !boundToItem.value && autoMessage.value));
-		const triggerId = computed(() => props.id || fieldId);
+		const triggerId = computed(() => props.id || fallbackId);
 		const visibleMessage = computed(() => boundToItem.value || props.showValidateMessage === false ? "" : autoMessage.value);
-		const viewYear = ref(getTodayDate().year);
-		const viewMonth = ref(getTodayDate().month);
-		const startViewYear = ref(getTodayDate().year);
-		const startViewMonth = ref(getTodayDate().month);
-		const endViewYear = ref(getTodayDate().year);
-		const endViewMonth = ref(getTodayDate().month);
+		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);
@@ -203,20 +253,37 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			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 formatted = props.withTime ? formatDateTimeRangeLabel(rangeModel.value, t("datePicker.separator")) : formatDateRangeLabel(rangeModel.value, t("datePicker.separator"));
-				if (formatted) return formatted;
+				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 props.withTime ? formatDateTimeDisplay(singleModel.value) : formatDateDisplay(singleModel.value);
+			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);
@@ -334,6 +401,9 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			}
 			syncSingleDraft();
 		}
+		function emitChange() {
+			emit("change", model.value);
+		}
 		function confirmSingleSelection() {
 			if (!draftDate.value) return;
 			if (props.withTime) {
@@ -341,6 +411,7 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				if (!combined) return;
 				singleModel.value = combined;
 				open.value = false;
+				emitChange();
 				return;
 			}
 			if (!isDateWithinBounds(draftDate.value.year, draftDate.value.month, draftDate.value.day, {
@@ -349,6 +420,7 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			})) return;
 			singleModel.value = formatDateParts(draftDate.value);
 			open.value = false;
+			emitChange();
 		}
 		function confirmRangeSelection() {
 			if (!draftStart.value || !draftEnd.value) return;
@@ -365,6 +437,7 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					end
 				};
 				open.value = false;
+				emitChange();
 				return;
 			}
 			const start = formatDateParts(draftStart.value);
@@ -385,6 +458,7 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				end
 			};
 			open.value = false;
+			emitChange();
 		}
 		function confirmSelection() {
 			if (props.range) {
@@ -394,7 +468,7 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			confirmSingleSelection();
 		}
 		function applyShortcut(shortcut) {
-			if (props.disabled) return;
+			if (!canInteract.value) return;
 			const normalized = normalizeShortcutValue(shortcut.value(), { withTime: props.withTime });
 			if (!normalized) return;
 			if (props.range) {
@@ -406,11 +480,13 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				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) {
@@ -425,6 +501,8 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				if (props.withTime) draftTime.value = currentTimeValue();
 			}
 			open.value = false;
+			emit("clear");
+			emitChange();
 		}
 		function selectToday() {
 			const today = getTodayDate();
@@ -499,6 +577,121 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			}
 			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 });
@@ -533,185 +726,254 @@ var RsDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		__expose({
 			setValue: setFieldValue,
 			clearValidation,
-			validate: runValidate
+			setError: (message) => {
+				autoMessage.value = message;
+			},
+			validate: runValidate,
+			focus,
+			blur
 		});
 		watch(open, (isOpen) => {
-			if (isOpen) syncDraftFromModel();
-			if (!isOpen && props.name) runValidate("change");
+			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", { class: normalizeClass(["rs-field", `rs-field--label-${__props.labelPosition}`]) }, [
-				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1, [__props.labelPosition === "left" ? (openBlock(), createElementBlock("label", {
+			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,
-					for: unref(fieldId)
-				}, toDisplayString(__props.label), 9, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.label), 1)], 64)), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(["rs-date-picker", `rs-date-picker--${unref(resolvedSize)}`]) }, [createVNode(unref(PopoverRoot), {
-					open: open.value,
-					"onUpdate:open": _cache[9] || (_cache[9] = ($event) => open.value = $event)
-				}, {
-					default: withCtx(() => [createVNode(unref(PopoverTrigger), mergeProps(unref(attrs), {
-						id: triggerId.value,
+					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__trigger", {
-							"rs-date-picker__trigger--placeholder": isEmpty.value,
-							"rs-date-picker__trigger--invalid": isInvalid.value
-						}],
-						disabled: __props.disabled,
-						"aria-invalid": isInvalid.value || void 0
-					}), {
-						default: withCtx(() => [createElementVNode("span", _hoisted_4, [createVNode(RsIcon_default, {
-							name: triggerIcon.value,
-							size: triggerIconSize.value,
-							class: "rs-date-picker__icon"
-						}, 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"
-						}, null, 8, ["size"])]),
-						_: 1
-					}, 16, [
-						"id",
-						"class",
-						"disabled",
-						"aria-invalid"
-					]), createVNode(unref(PopoverPortal), null, {
-						default: withCtx(() => [createVNode(unref(PopoverContent), {
-							class: normalizeClass(["rs-date-picker__content", { "rs-date-picker__content--range": __props.range }]),
-							"side-offset": 6,
-							align: "start"
-						}, {
-							default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", _hoisted_6, [__props.range ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("section", _hoisted_8, [
-								createElementVNode("span", _hoisted_9, toDisplayString(__props.withTime ? unref(t)("dateTimePicker.rangeStart") : unref(t)("datePicker.rangeStart")), 1),
-								createVNode(RsCalendarGrid_default, {
-									"view-year": startViewYear.value,
-									"onUpdate:viewYear": _cache[0] || (_cache[0] = ($event) => startViewYear.value = $event),
-									"view-month": startViewMonth.value,
-									"onUpdate:viewMonth": _cache[1] || (_cache[1] = ($event) => startViewMonth.value = $event),
-									selected: draftStart.value,
-									"range-start": draftStart.value,
-									"range-end": draftEnd.value,
-									"min-date": __props.minDate,
-									"max-date": startMaxDate.value,
-									onSelect: handleStartSelect
-								}, null, 8, [
-									"view-year",
-									"view-month",
-									"selected",
-									"range-start",
-									"range-end",
-									"min-date",
-									"max-date"
-								]),
-								__props.withTime ? (openBlock(), createElementBlock("div", _hoisted_10, [createElementVNode("span", _hoisted_11, toDisplayString(unref(t)("dateTimePicker.time")), 1), createVNode(RsTimePicker_default, {
-									modelValue: draftStartTime.value,
-									"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => draftStartTime.value = $event),
-									class: "rs-date-picker__time-picker",
-									embedded: "",
-									size: unref(resolvedSize),
-									"with-seconds": resolvedWithSeconds.value,
-									disabled: !draftStart.value || __props.disabled
-								}, null, 8, [
-									"modelValue",
-									"size",
-									"with-seconds",
-									"disabled"
-								])])) : createCommentVNode("", true)
-							]), createElementVNode("section", _hoisted_12, [
-								createElementVNode("span", _hoisted_13, toDisplayString(__props.withTime ? unref(t)("dateTimePicker.rangeEnd") : unref(t)("datePicker.rangeEnd")), 1),
-								createVNode(RsCalendarGrid_default, {
-									"view-year": endViewYear.value,
-									"onUpdate:viewYear": _cache[3] || (_cache[3] = ($event) => endViewYear.value = $event),
-									"view-month": endViewMonth.value,
-									"onUpdate:viewMonth": _cache[4] || (_cache[4] = ($event) => endViewMonth.value = $event),
-									selected: draftEnd.value,
-									"range-start": draftStart.value,
-									"range-end": draftEnd.value,
-									"min-date": endMinDate.value,
-									"max-date": __props.maxDate,
-									onSelect: handleEndSelect
-								}, null, 8, [
-									"view-year",
-									"view-month",
-									"selected",
-									"range-start",
-									"range-end",
-									"min-date",
-									"max-date"
-								]),
-								__props.withTime ? (openBlock(), createElementBlock("div", _hoisted_14, [createElementVNode("span", _hoisted_15, toDisplayString(unref(t)("dateTimePicker.time")), 1), createVNode(RsTimePicker_default, {
-									modelValue: draftEndTime.value,
-									"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => draftEndTime.value = $event),
-									class: "rs-date-picker__time-picker",
-									embedded: "",
-									size: unref(resolvedSize),
-									"with-seconds": resolvedWithSeconds.value,
-									disabled: !draftEnd.value || __props.disabled
-								}, null, 8, [
-									"modelValue",
-									"size",
-									"with-seconds",
-									"disabled"
-								])])) : createCommentVNode("", true)
-							])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(RsCalendarGrid_default, {
-								"view-year": viewYear.value,
-								"onUpdate:viewYear": _cache[6] || (_cache[6] = ($event) => viewYear.value = $event),
-								"view-month": viewMonth.value,
-								"onUpdate:viewMonth": _cache[7] || (_cache[7] = ($event) => viewMonth.value = $event),
-								selected: draftDate.value,
-								"min-date": __props.minDate,
-								"max-date": __props.maxDate,
-								onSelect: handleDateSelect
-							}, null, 8, [
-								"view-year",
-								"view-month",
-								"selected",
-								"min-date",
-								"max-date"
-							]), __props.withTime ? (openBlock(), createElementBlock("div", _hoisted_16, [createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("dateTimePicker.time")), 1), createVNode(RsTimePicker_default, {
-								modelValue: draftTime.value,
-								"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => draftTime.value = $event),
-								class: "rs-date-picker__time-picker",
-								embedded: "",
-								size: unref(resolvedSize),
-								"with-seconds": resolvedWithSeconds.value,
-								disabled: !draftDate.value || __props.disabled
-							}, null, 8, [
-								"modelValue",
-								"size",
-								"with-seconds",
-								"disabled"
-							])])) : createCommentVNode("", true)], 64)), createElementVNode("footer", _hoisted_18, [createElementVNode("div", _hoisted_19, [__props.shortcuts?.length ? (openBlock(), createElementBlock("div", _hoisted_20, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.shortcuts, (item) => {
-								return openBlock(), createElementBlock("button", {
-									key: item.label,
-									type: "button",
-									class: "rs-date-picker__shortcut",
-									disabled: __props.disabled,
-									onClick: ($event) => applyShortcut(item)
-								}, toDisplayString(item.label), 9, _hoisted_21);
-							}), 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_22, [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_23)])])])) : createCommentVNode("", true)]),
-							_: 1
-						}, 8, ["class"])]),
-						_: 1
-					})]),
-					_: 1
-				}, 8, ["open"])], 2),
-				visibleMessage.value ? (openBlock(), createElementBlock("p", _hoisted_24, toDisplayString(visibleMessage.value), 1)) : createCommentVNode("", true),
-				__props.hint ? (openBlock(), createElementBlock("span", _hoisted_25, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
-			], 2);
+						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);
 		};
 	}
 });