niuma-ui 2.0.4 → 2.1.0

package/dist/components/dialog/src/RsConfirmDialog.impl.js

@@ -1,19 +1,33 @@
-import { AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle } from "../../_shared/src/reka.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsButton_default from "../../button/src/RsButton.js";
-import { isRsDialogWidthPreset, resolveDialogOverlayStyle, resolveRsDialogCssWidth, runRsConfirmBeforeClose } from "./dialog-utils.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useModel, withCtx } from "vue";
+import { acquireDialogScrollLock, claimDialogInert, dialogLayerTick, dialogTargetOwnsTab, isRsDialogWidthPreset, isTopDialogLayer, listDialogTabbables, pushDialogLayer, releaseDialogInert, removeDialogLayer, resolveDialogOverlayStyle, resolveDialogTabTarget, resolveRsDialogCssWidth, runRsConfirmBeforeClose } from "./dialog-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, watch, withCtx } from "vue";
 //#region src/components/dialog/src/RsConfirmDialog.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-confirm-dialog__main" };
-var _hoisted_2 = {
+var _hoisted_1 = [
+	"data-rs-theme",
+	"dir",
+	"lang"
+];
+var _hoisted_2 = [
+	"id",
+	"aria-labelledby",
+	"aria-label",
+	"aria-describedby"
+];
+var _hoisted_3 = { class: "rs-confirm-dialog__main" };
+var _hoisted_4 = ["id"];
+var _hoisted_5 = {
 	key: 0,
 	class: "rs-confirm-dialog__subtitle"
 };
-var _hoisted_3 = {
+var _hoisted_6 = ["id"];
+var _hoisted_7 = ["id"];
+var _hoisted_8 = ["id"];
+var _hoisted_9 = {
 	key: 4,
 	class: "rs-confirm-dialog__extra"
 };
-var _hoisted_4 = { class: "rs-confirm-dialog__footer" };
+var _hoisted_10 = { class: "rs-confirm-dialog__footer" };
 var RsConfirmDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RsConfirmDialog",
 	props: /*@__PURE__*/ mergeModels({
@@ -45,7 +59,18 @@ var RsConfirmDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		},
 		overlayOpacity: {},
 		overlayBlur: {},
-		teleportTo: { type: [String, Boolean] }
+		teleportTo: { type: [String, Boolean] },
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		lockScroll: {
+			type: Boolean,
+			default: true
+		},
+		zIndex: {},
+		ariaLabel: {},
+		id: {}
 	}, {
 		"open": {
 			type: Boolean,
@@ -59,147 +84,352 @@ var RsConfirmDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
+		const uid = useId();
+		const layerId = uid;
+		const anchorRef = ref(null);
+		const shellRef = ref(null);
+		const contentRef = ref(null);
+		const panelTheme = ref();
+		const panelDir = ref();
+		const panelLang = ref();
+		const domId = computed(() => props.id?.trim() || `rs-confirm-${uid}`);
+		const titleDomId = computed(() => `${domId.value}-title`);
+		const descriptionDomId = computed(() => `${domId.value}-description`);
+		let disposed = false;
+		let closing = false;
+		let closeGeneration = 0;
+		/** requestClose 已决定原因。null 表示父级把 open 设成 false。 */
+		let closeFromInside = null;
+		let keyBound = false;
+		let releaseScroll = null;
+		let returnTo = null;
+		let inertGeneration = 0;
 		const contentClass = computed(() => {
 			if (props.width && isRsDialogWidthPreset(props.width)) return `rs-confirm-dialog__content--${props.width}`;
 		});
-		const overlayStyle = computed(() => resolveDialogOverlayStyle({
-			overlayOpacity: props.overlayOpacity,
-			overlayBlur: props.overlayBlur
-		}));
+		function zIndexStyle(offset) {
+			if (props.zIndex == null || !Number.isFinite(props.zIndex)) return void 0;
+			return { zIndex: String(Math.round(props.zIndex) + offset) };
+		}
+		const overlayStyle = computed(() => {
+			const visual = props.showOverlay ? resolveDialogOverlayStyle({
+				overlayOpacity: props.overlayOpacity,
+				overlayBlur: props.overlayBlur
+			}) : void 0;
+			const z = zIndexStyle(0);
+			if (!visual) return z;
+			if (!z) return visual;
+			return {
+				...visual,
+				...z
+			};
+		});
 		const contentStyle = computed(() => {
-			if (props.width == null || isRsDialogWidthPreset(props.width)) return void 0;
-			const css = resolveRsDialogCssWidth(props.width);
-			if (!css) return void 0;
-			return { maxWidth: css };
+			const style = {};
+			if (props.width != null && !isRsDialogWidthPreset(props.width)) {
+				const css = resolveRsDialogCssWidth(props.width);
+				if (css) style.maxWidth = css;
+			}
+			const z = zIndexStyle(1);
+			if (z) Object.assign(style, z);
+			return Object.keys(style).length ? style : void 0;
 		});
 		const descriptionText = computed(() => {
 			if (props.description != null && props.description !== "") return props.description;
 		});
 		const showDefaultDescription = computed(() => descriptionText.value == null && !props.subtitle);
-		let closing = false;
-		let pendingCloseReason = "programmatic";
+		const hasDescribedBy = computed(() => descriptionText.value != null || Boolean(props.subtitle) || showDefaultDescription.value);
+		const labelledBy = computed(() => props.ariaLabel?.trim() ? void 0 : titleDomId.value);
+		const accessibleName = computed(() => props.ariaLabel?.trim() || void 0);
+		const teleportDisabled = computed(() => props.teleportTo === false);
+		const teleportTarget = computed(() => {
+			const target = props.teleportTo;
+			if (target === false || target == null) return "body";
+			return target;
+		});
+		function syncChrome() {
+			const el = anchorRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				panelDir.value = void 0;
+				panelLang.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			const directed = el.closest("[dir]");
+			const langed = el.closest("[lang]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+			const dir = directed?.getAttribute("dir");
+			panelDir.value = dir === "ltr" || dir === "rtl" ? dir : void 0;
+			panelLang.value = langed?.getAttribute("lang") || void 0;
+		}
+		function syncScrollLock() {
+			const should = open.value && props.lockScroll;
+			if (should && !releaseScroll) {
+				releaseScroll = acquireDialogScrollLock();
+				return;
+			}
+			if (!should && releaseScroll) {
+				releaseScroll();
+				releaseScroll = null;
+			}
+		}
+		async function syncInert() {
+			const generation = ++inertGeneration;
+			await nextTick();
+			if (disposed || generation !== inertGeneration) return;
+			if (!(open.value && isTopDialogLayer(layerId)) || !shellRef.value) {
+				releaseDialogInert(layerId);
+				return;
+			}
+			claimDialogInert(layerId, shellRef.value);
+		}
+		function bindKey() {
+			if (keyBound || typeof document === "undefined") return;
+			document.addEventListener("keydown", onDocumentKeydown, true);
+			keyBound = true;
+		}
+		function unbindKey() {
+			if (!keyBound || typeof document === "undefined") return;
+			document.removeEventListener("keydown", onDocumentKeydown, true);
+			keyBound = false;
+		}
+		function rememberTrigger() {
+			if (typeof document === "undefined") return;
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && active !== document.body && active !== document.documentElement) {
+				returnTo = active;
+				return;
+			}
+			returnTo = null;
+		}
+		function restoreTrigger() {
+			const el = returnTo;
+			returnTo = null;
+			if (!el?.isConnected) return;
+			if (contentRef.value?.contains(el)) return;
+			el.focus();
+		}
+		function focusDialog(force) {
+			const root = contentRef.value;
+			if (!root || disposed) return;
+			const active = document.activeElement;
+			if (!force && active instanceof HTMLElement && root.contains(active) && active !== root) return;
+			const preferred = root.querySelector("[autofocus]");
+			if (preferred && !preferred.hasAttribute("disabled")) {
+				preferred.focus();
+				return;
+			}
+			const first = listDialogTabbables(root)[0];
+			if (first) {
+				first.focus();
+				return;
+			}
+			root.focus();
+		}
+		function queueFocus() {
+			nextTick(() => {
+				if (!open.value || disposed) return;
+				focusDialog(false);
+			});
+		}
+		function focus() {
+			focusDialog(true);
+		}
 		async function requestClose(reason) {
-			if (!open.value || closing) return false;
+			if (disposed || !open.value || closing) return false;
+			const generation = ++closeGeneration;
 			closing = true;
 			try {
-				if (!await runRsConfirmBeforeClose(props.beforeClose, reason)) return false;
+				if (!await runRsConfirmBeforeClose(props.beforeClose, reason) || disposed || generation !== closeGeneration || !open.value) return false;
+				closeFromInside = reason;
 				open.value = false;
 				return true;
+			} catch {
+				return false;
 			} finally {
-				closing = false;
+				if (generation === closeGeneration) closing = false;
 			}
 		}
+		function onDocumentKeydown(event) {
+			if (!open.value || !isTopDialogLayer(layerId)) return;
+			if (event.key === "Escape") {
+				if (event.isComposing) return;
+				if (!props.closeOnEsc || props.confirmLoading) {
+					event.preventDefault();
+					return;
+				}
+				event.preventDefault();
+				requestClose("escape");
+				return;
+			}
+			if (event.key !== "Tab" || dialogTargetOwnsTab(event.target)) return;
+			const root = contentRef.value;
+			if (!root) return;
+			const target = resolveDialogTabTarget(root, document.activeElement, event.shiftKey);
+			if (target === "stay") return;
+			event.preventDefault();
+			target.focus();
+		}
 		async function onConfirmClick() {
 			emit("confirm");
 			if (props.autoCloseOnConfirm !== false) await requestClose("confirm");
 		}
-		async function onCancelClick() {
-			if (await requestClose("cancel")) emit("cancel");
+		function finishClose(wasOpen) {
+			removeDialogLayer(layerId);
+			unbindKey();
+			syncScrollLock();
+			inertGeneration += 1;
+			releaseDialogInert(layerId);
+			if (!wasOpen) return;
+			const reason = closeFromInside;
+			closeFromInside = null;
+			restoreTrigger();
+			if (reason !== "confirm") emit("cancel");
 		}
-		function onEscapeKeyDown(event) {
-			if (props.confirmLoading) {
-				event.preventDefault();
-				return;
+		async function vetoParentClose() {
+			const generation = ++closeGeneration;
+			closing = true;
+			try {
+				const allowed = await runRsConfirmBeforeClose(props.beforeClose, "programmatic");
+				if (disposed || generation !== closeGeneration) return;
+				if (!allowed) {
+					open.value = true;
+					return;
+				}
+				closeFromInside = "programmatic";
+				finishClose(true);
+			} catch {
+				if (!disposed && generation === closeGeneration) open.value = true;
+			} finally {
+				if (generation === closeGeneration) closing = false;
 			}
-			pendingCloseReason = "escape";
 		}
-		async function onUpdateOpen(next) {
-			if (next) {
-				open.value = true;
-				return;
-			}
-			if (closing) {
-				open.value = false;
+		async function onCancelClick() {
+			await requestClose("cancel");
+		}
+		watch(open, (isOpen, wasOpen) => {
+			if (isOpen) {
+				if (wasOpen !== true) {
+					rememberTrigger();
+					syncChrome();
+					pushDialogLayer(layerId);
+					queueFocus();
+				}
+				bindKey();
+				syncScrollLock();
+				syncInert();
 				return;
 			}
-			const reason = pendingCloseReason;
-			pendingCloseReason = "programmatic";
-			if (!await runRsConfirmBeforeClose(props.beforeClose, reason)) {
-				open.value = true;
+			if (wasOpen === true && closeFromInside == null) {
+				vetoParentClose();
 				return;
 			}
-			open.value = false;
-			if (reason === "escape" || reason === "programmatic") emit("cancel");
-		}
-		__expose({ 
-		/** 请求关闭（走 beforeClose） */
-close: (reason = "programmatic") => requestClose(reason) });
+			finishClose(wasOpen === true);
+		}, { immediate: true });
+		watch(() => [props.lockScroll, dialogLayerTick.value], () => {
+			if (!open.value || disposed) return;
+			syncScrollLock();
+			syncInert();
+		});
+		onBeforeUnmount(() => {
+			disposed = true;
+			inertGeneration += 1;
+			closeGeneration += 1;
+			removeDialogLayer(layerId);
+			unbindKey();
+			releaseScroll?.();
+			releaseScroll = null;
+			releaseDialogInert(layerId);
+		});
+		__expose({
+			close: (reason = "programmatic") => requestClose(reason),
+			focus
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(AlertDialogRoot), {
-				open: open.value,
-				"onUpdate:open": onUpdateOpen
-			}, {
-				default: withCtx(() => [createVNode(unref(AlertDialogPortal), {
-					disabled: __props.teleportTo === false,
-					to: __props.teleportTo === false ? void 0 : __props.teleportTo
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				ref_key: "anchorRef",
+				ref: anchorRef,
+				hidden: "",
+				class: "rs-confirm-dialog__anchor",
+				"aria-hidden": "true"
+			}, null, 512), (openBlock(), createBlock(Teleport, {
+				defer: "",
+				to: teleportTarget.value,
+				disabled: teleportDisabled.value
+			}, [open.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "shellRef",
+				ref: shellRef,
+				class: "rs-confirm-dialog",
+				"data-rs-theme": panelTheme.value,
+				dir: panelDir.value,
+				lang: panelLang.value
+			}, [createElementVNode("div", {
+				class: normalizeClass(["rs-confirm-dialog__backdrop", { "rs-confirm-dialog__overlay": __props.showOverlay }]),
+				style: normalizeStyle(overlayStyle.value),
+				"aria-hidden": "true"
+			}, null, 6), createElementVNode("dialog", {
+				id: domId.value,
+				ref_key: "contentRef",
+				ref: contentRef,
+				open: "",
+				class: normalizeClass(["rs-confirm-dialog__content", contentClass.value]),
+				style: normalizeStyle(contentStyle.value),
+				role: "alertdialog",
+				"aria-modal": "true",
+				"aria-labelledby": labelledBy.value,
+				"aria-label": accessibleName.value,
+				"aria-describedby": hasDescribedBy.value ? descriptionDomId.value : void 0,
+				tabindex: "-1"
+			}, [createElementVNode("div", {
+				class: normalizeClass(["rs-confirm-dialog__icon", `rs-confirm-dialog__icon--${__props.tone}`]),
+				"aria-hidden": "true"
+			}, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
+				key: 0,
+				class: "rs-confirm-dialog__icon-glyph"
+			})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode("!")], 64))], true)], 2), createElementVNode("div", _hoisted_3, [
+				createElementVNode("h2", {
+					id: titleDomId.value,
+					class: "rs-confirm-dialog__title"
+				}, toDisplayString(__props.title ?? unref(t)("confirm.title")), 9, _hoisted_4),
+				__props.subtitle && descriptionText.value != null ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
+				descriptionText.value != null ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: descriptionDomId.value,
+					class: "rs-confirm-dialog__description"
+				}, toDisplayString(descriptionText.value), 9, _hoisted_6)) : __props.subtitle ? (openBlock(), createElementBlock("p", {
+					key: 2,
+					id: descriptionDomId.value,
+					class: "rs-confirm-dialog__subtitle"
+				}, toDisplayString(__props.subtitle), 9, _hoisted_7)) : showDefaultDescription.value ? (openBlock(), createElementBlock("p", {
+					key: 3,
+					id: descriptionDomId.value,
+					class: "rs-confirm-dialog__description"
+				}, toDisplayString(unref(t)("confirm.description")), 9, _hoisted_8)) : createCommentVNode("", true),
+				_ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "extra", {}, void 0, true)])) : createCommentVNode("", true),
+				createElementVNode("footer", _hoisted_10, [__props.showCancel ? (openBlock(), createBlock(RsButton_default, {
+					key: 0,
+					variant: "default",
+					disabled: __props.confirmLoading,
+					onClick: onCancelClick
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.cancelText ?? unref(t)("common.cancel")), 1)]),
+					_: 1
+				}, 8, ["disabled"])) : createCommentVNode("", true), createVNode(RsButton_default, {
+					variant: __props.confirmVariant,
+					loading: __props.confirmLoading,
+					disabled: __props.confirmLoading,
+					onClick: onConfirmClick
 				}, {
-					default: withCtx(() => [__props.showOverlay ? (openBlock(), createBlock(unref(AlertDialogOverlay), {
-						key: 0,
-						class: "rs-confirm-dialog__overlay",
-						style: normalizeStyle(overlayStyle.value)
-					}, null, 8, ["style"])) : createCommentVNode("", true), createVNode(unref(AlertDialogContent), {
-						class: normalizeClass(["rs-confirm-dialog__content", contentClass.value]),
-						style: normalizeStyle(contentStyle.value),
-						"disable-outside-pointer-events": true,
-						onEscapeKeyDown
-					}, {
-						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["rs-confirm-dialog__icon", `rs-confirm-dialog__icon--${__props.tone}`]) }, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
-							key: 0,
-							class: "rs-confirm-dialog__icon-glyph"
-						})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode("!")], 64))])], 2), createElementVNode("div", _hoisted_1, [
-							createVNode(unref(AlertDialogTitle), { class: "rs-confirm-dialog__title" }, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.title ?? unref(t)("confirm.title")), 1)]),
-								_: 1
-							}),
-							__props.subtitle && descriptionText.value != null ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true),
-							descriptionText.value != null ? (openBlock(), createBlock(unref(AlertDialogDescription), {
-								key: 1,
-								class: "rs-confirm-dialog__description"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(descriptionText.value), 1)]),
-								_: 1
-							})) : __props.subtitle ? (openBlock(), createBlock(unref(AlertDialogDescription), {
-								key: 2,
-								class: "rs-confirm-dialog__subtitle"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.subtitle), 1)]),
-								_: 1
-							})) : showDefaultDescription.value ? (openBlock(), createBlock(unref(AlertDialogDescription), {
-								key: 3,
-								class: "rs-confirm-dialog__description"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("confirm.description")), 1)]),
-								_: 1
-							})) : createCommentVNode("", true),
-							_ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "extra")])) : createCommentVNode("", true),
-							createElementVNode("footer", _hoisted_4, [__props.showCancel ? (openBlock(), createBlock(RsButton_default, {
-								key: 0,
-								variant: "default",
-								disabled: __props.confirmLoading,
-								onClick: onCancelClick
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.cancelText ?? unref(t)("common.cancel")), 1)]),
-								_: 1
-							}, 8, ["disabled"])) : createCommentVNode("", true), createVNode(RsButton_default, {
-								variant: __props.confirmVariant,
-								loading: __props.confirmLoading,
-								disabled: __props.confirmLoading,
-								onClick: onConfirmClick
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText ?? unref(t)("common.confirm")), 1)]),
-								_: 1
-							}, 8, [
-								"variant",
-								"loading",
-								"disabled"
-							])])
-						])]),
-						_: 3
-					}, 8, ["class", "style"])]),
-					_: 3
-				}, 8, ["disabled", "to"])]),
-				_: 3
-			}, 8, ["open"]);
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText ?? unref(t)("common.confirm")), 1)]),
+					_: 1
+				}, 8, [
+					"variant",
+					"loading",
+					"disabled"
+				])])
+			])], 14, _hoisted_2)], 8, _hoisted_1)) : createCommentVNode("", true)], 8, ["to", "disabled"]))], 64);
 		};
 	}
 });

package/dist/components/dialog/src/RsConfirmDialog.js

@@ -1,7 +1,8 @@
 import './RsConfirmDialog.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsConfirmDialog_vue_vue_type_script_setup_true_lang_default from "./RsConfirmDialog.impl.js";
 
 //#region src/components/dialog/src/RsConfirmDialog.vue
-var RsConfirmDialog_default = RsConfirmDialog_vue_vue_type_script_setup_true_lang_default;
+var RsConfirmDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsConfirmDialog_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2c82ddba"]]);
 //#endregion
 export { RsConfirmDialog_default as default };