@xihan-ui/web-components 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/define.js

@@ -1,11 +1,12 @@
-import { a as containsPart, i as PART_ATTR, o as discoverParts, r as createSpreader, s as wcNormalize, t as MachineController } from "./machine-controller-Cq9t_cfJ.js";
+import { a as containsPart, i as PART_ATTR, o as discoverParts, r as createSpreader, s as wcNormalize, t as MachineController } from "./machine-controller-B1dE9_NF.js";
 import { t as defineElement } from "./registry-DR6I2_zF.js";
-import { n as version, t as XhReactiveElement } from "./element-BxtVEMuI.js";
+import { n as version, t as XhReactiveElement } from "./element-BHyfNDKE.js";
 import { DIAGNOSTIC_CODES, createCounterIdGenerator, createRuntimeConfig, createScope, getDiagnostics, reportDiagnostic } from "@xihan-ui/kernel";
 import { ITEM_VALUE_ATTR, declaredItemDisabled, isItemDisabled } from "@xihan-ui/behavior";
 import { accordionAnatomy, accordionMachine, accordionMeta, affixAnatomy, affixMachine, affixMeta, alertAnatomy, alertMachine, alertMeta, anchorAnatomy, anchorMachine, anchorMeta, autoSizeTextarea, avatarAnatomy, avatarGroupAnatomy, avatarGroupMeta, avatarMachine, avatarMeta, backTopAnatomy, backTopMachine, backTopMeta, badgeAnatomy, badgeMeta, breadcrumbAnatomy, breadcrumbMeta, buttonAnatomy, buttonGroupAnatomy, buttonGroupMeta, buttonMeta, calendarAnatomy, calendarMachine, calendarMeta, cardAnatomy, cardMeta, carouselAnatomy, carouselMachine, carouselMeta, cascaderAnatomy, cascaderMachine, cascaderMeta, checkboxAnatomy, checkboxGroupAnatomy, checkboxGroupMachine, checkboxGroupMeta, checkboxMachine, checkboxMeta, clipboardAnatomy, clipboardMachine, clipboardMeta, codeBlockAnatomy, codeBlockMeta, collapsibleAnatomy, collapsibleMachine, collapsibleMeta, colorPickerAnatomy, colorPickerMachine, colorPickerMeta, colorPickerToChannel, colorPickerToInputChannel, comboboxAnatomy, comboboxMachine, comboboxMeta, composerAnatomy, composerMachine, composerMeta, connectAccordion, connectAffix, connectAlert, connectAnchor, connectAvatar, connectAvatarGroup, connectBackTop, connectBadge, connectBreadcrumb, connectButton, connectButtonGroup, connectCalendar, connectCard, connectCarousel, connectCascader, connectCheckbox, connectCheckboxGroup, connectClipboard, connectCodeBlock, connectCollapsible, connectColorPicker, connectCombobox, connectComposer, connectContextMenu, connectCountdown, connectDateField, connectDatePicker, connectDescriptions, connectDialog, connectDrawer, connectDynamicInput, connectEditable, connectEllipsis, connectEmptyState, connectField, connectFileUpload, connectFlex, connectFloatButton, connectForm, connectGradientText, connectGrid, connectHighlight, connectHoverCard, connectIcon, connectIconWrapper, connectImage, connectImageViewer, connectInfiniteScroll, connectLayout, connectList, connectListbox, connectLoadingBar, connectLog, connectMarquee, connectMention, connectMenu, connectMenubar, connectNavigationMenu, connectNumberAnimation, connectNumberField, connectPageHeader, connectPagination, connectPinInput, connectPopconfirm, connectPopover, connectPopselect, connectProgress, connectQrCode, connectRadioGroup, connectRating, connectResult, connectScrollArea, connectSelect, connectSeparator, connectSideNav, connectSkeleton, connectSlider, connectSpinner, connectSplitter, connectStatistic, connectSteps, connectSwitch, connectTable, connectTabs, connectTagsInput, connectTextField, connectThread, connectTime, connectTimeField, connectTimePicker, connectTimeline, connectToast, connectToaster, connectToggle, connectToggleGroup, connectToolbar, connectTooltip, connectTour, connectTransfer, connectTree, connectTreeSelect, connectTypography, connectVirtualizer, connectWatermark, contextMenuAnatomy, contextMenuMachine, contextMenuMeta, countdownAnatomy, countdownMachine, countdownMeta, dateFieldAnatomy, dateFieldMachine, dateFieldMeta, datePickerAnatomy, datePickerCalendarProps, datePickerFieldEndProps, datePickerFieldProps, datePickerMachine, datePickerMeta, descriptionsAnatomy, descriptionsMeta, dialogAnatomy, dialogMachine, dialogMeta, drawerAnatomy, drawerMachine, drawerMeta, dynamicInputAnatomy, dynamicInputMachine, dynamicInputMeta, editableAnatomy, editableMachine, editableMeta, ellipsisAnatomy, ellipsisMachine, ellipsisMeta, emptyStateAnatomy, emptyStateMeta, fieldAnatomy, fieldMeta, fileUploadAnatomy, fileUploadMachine, fileUploadMeta, flexAnatomy, flexMeta, floatButtonAnatomy, floatButtonMeta, formAnatomy, formMachine, formMeta, gradientTextAnatomy, gradientTextMeta, gridAnatomy, gridMeta, highlightAnatomy, highlightMeta, hoverCardAnatomy, hoverCardMachine, hoverCardMeta, iconAnatomy, iconMeta, iconWrapperAnatomy, iconWrapperMeta, imageAnatomy, imageMachine, imageMeta, imageViewerAnatomy, imageViewerCounterText, imageViewerMachine, imageViewerMeta, infiniteScrollAnatomy, infiniteScrollMachine, infiniteScrollMeta, layoutAnatomy, layoutMachine, layoutMeta, listAnatomy, listMeta, listboxAnatomy, listboxMachine, listboxMeta, loadingBarAnatomy, loadingBarMachine, loadingBarMeta, logAnatomy, logMeta, marqueeAnatomy, marqueeMeta, mentionAnatomy, mentionMachine, mentionMeta, menuAnatomy, menuMachine, menuMeta, menubarAnatomy, menubarMachine, menubarMeta, navigationMenuAnatomy, navigationMenuMachine, navigationMenuMeta, numberAnimationAnatomy, numberAnimationMachine, numberAnimationMeta, numberFieldAnatomy, numberFieldMachine, numberFieldMeta, pageHeaderAnatomy, pageHeaderMeta, paginationAnatomy, paginationMachine, paginationMeta, pinInputAnatomy, pinInputMachine, pinInputMeta, popconfirmAnatomy, popconfirmMeta, popoverAnatomy, popoverMachine, popoverMeta, popselectAnatomy, popselectInitialFocus, popselectMeta, progressAnatomy, progressMeta, qrCodeAnatomy, qrCodeMeta, radioGroupAnatomy, radioGroupMachine, radioGroupMeta, ratingAnatomy, ratingMachine, ratingMeta, resultAnatomy, resultMeta, scrollAreaAnatomy, scrollAreaMachine, scrollAreaMeta, selectAnatomy, selectMachine, selectMeta, separatorAnatomy, separatorMeta, sideNavAnatomy, sideNavMachine, sideNavMeta, skeletonAnatomy, skeletonMeta, sliderAnatomy, sliderMachine, sliderMeta, spinnerAnatomy, spinnerMeta, splitterAnatomy, splitterMachine, splitterMeta, statisticAnatomy, statisticMeta, stepsAnatomy, stepsMachine, stepsMeta, switchAnatomy, switchMachine, switchMeta, tableAnatomy, tableMachine, tableMeta, tabsAnatomy, tabsMachine, tabsMeta, tagsInputAnatomy, tagsInputMachine, tagsInputMeta, textFieldAnatomy, textFieldMachine, textFieldMeta, threadAnatomy, threadMachine, threadMeta, timeAnatomy, timeFieldAnatomy, timeFieldMachine, timeFieldMeta, timeMeta, timePickerAnatomy, timePickerMachine, timePickerMeta, timelineAnatomy, timelineMeta, toastAnatomy, toastMachine, toastMeta, toasterAnatomy, toasterMachine, toasterMeta, toggleAnatomy, toggleGroupAnatomy, toggleGroupMachine, toggleGroupMeta, toggleMachine, toggleMeta, toolbarAnatomy, toolbarMachine, toolbarMeta, tooltipAnatomy, tooltipMachine, tooltipMeta, tourAnatomy, tourMachine, tourMeta, transferAnatomy, transferFocusKey, transferMachine, transferMeta, treeAnatomy, treeMachine, treeMeta, treeSelectAnatomy, treeSelectMachine, treeSelectMeta, typographyAnatomy, typographyMeta, virtualizerAnatomy, virtualizerMachine, virtualizerMeta, watermarkAnatomy, watermarkMeta } from "@xihan-ui/headless";
 import { createPositionEngine } from "@xihan-ui/position";
 import { createHighlighter } from "@xihan-ui/code-highlight";
+import { attachCssExit, createPresence } from "@xihan-ui/behavior/presence";
 //#region src/dom/part-contract.ts
 /**
 * 比对已发现的角色节点与契约：缺必需 part 报 error，出现解剖外的 part 名报 warn。
@@ -3306,6 +3307,42 @@ var XhDescriptionsElement = class extends XhElement {
 	}
 };
 //#endregion
+//#region src/overlay-exit.ts
+function createOverlayExit(options) {
+	let disposed = false;
+	let node = null;
+	let detach;
+	const presence = createPresence({
+		config: options.config,
+		open: options.open,
+		onRenderedChange: (rendered) => {
+			if (!rendered && !disposed) options.onExitComplete();
+		}
+	});
+	return {
+		get visible() {
+			return !disposed && presence.rendered;
+		},
+		track(next) {
+			if (disposed || next === node) return;
+			node = next;
+			detach?.();
+			detach = next ? attachCssExit(next, presence) : void 0;
+		},
+		update(open) {
+			if (!disposed) presence.update(open);
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			detach?.();
+			detach = void 0;
+			node = null;
+			presence.dispose();
+		}
+	};
+}
+//#endregion
 //#region src/elements/dialog.ts
 const BOOLEAN_CONVERTER$40 = { fromAttribute: (v) => v === null ? void 0 : v !== "false" };
 const STRING_CONVERTER$62 = { fromAttribute: (v) => v ?? void 0 };
@@ -3356,6 +3393,7 @@ var XhDialogElement = class extends XhElement {
 	dialogScope = createScope(null, this.idGen);
 	config = null;
 	contentNode = null;
+	exit = null;
 	backdropNode = null;
 	notify = (details) => {
 		this.dispatchEvent(new CustomEvent("open-change", {
@@ -3387,6 +3425,16 @@ var XhDialogElement = class extends XhElement {
 			idGenerator: this.idGen
 		});
 	}
+	/** 退场闸门建一次；presence 不是响应式 cell，退场结束要显式排一次更新才轮得到收起。 */
+	ensureExit() {
+		this.ensureConfig();
+		this.exit ??= createOverlayExit({
+			config: this.config,
+			open: this.ctrl.service.state.get() === "open",
+			onExitComplete: () => this.requestUpdate()
+		});
+		return this.exit;
+	}
 	registerLayer = () => {
 		this.ensureConfig();
 		return this.config.layerRegistry.register({
@@ -3424,13 +3472,20 @@ var XhDialogElement = class extends XhElement {
 		put("title", api.getTitleProps());
 		put("description", api.getDescriptionProps());
 		put("close-trigger", api.getCloseTriggerProps());
+		const exit = this.ensureExit();
+		exit.track(this.contentNode);
+		exit.update(open);
+		const visible = exit.visible;
 		const positioner = this.getPart("positioner");
-		if (positioner) this.setPartHidden(positioner, !open);
-		if (this.backdropNode) this.setPartHidden(this.backdropNode, !open);
-		this.setPartHidden(this.contentNode, !open);
+		if (positioner) this.setPartHidden(positioner, !visible);
+		if (this.backdropNode) this.setPartHidden(this.backdropNode, !visible);
+		this.setPartHidden(this.contentNode, !visible);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.exit?.dispose();
+		this.exit = null;
+		if (this.ctrl.service.state.get() !== "open") this.setPartHidden(this.contentNode, true);
 		this.config = null;
 	}
 };
@@ -3496,6 +3551,7 @@ var XhDrawerElement = class extends XhElement {
 	drawerScope = createScope(null, this.idGen);
 	config = null;
 	contentNode = null;
+	exit = null;
 	backdropNode = null;
 	notify = (details) => {
 		this.dispatchEvent(new CustomEvent("open-change", {
@@ -3530,6 +3586,16 @@ var XhDrawerElement = class extends XhElement {
 			idGenerator: this.idGen
 		});
 	}
+	/** 退场闸门建一次；presence 不是响应式 cell，退场结束要显式排一次更新才轮得到收起。 */
+	ensureExit() {
+		this.ensureConfig();
+		this.exit ??= createOverlayExit({
+			config: this.config,
+			open: this.ctrl.service.state.get() === "open",
+			onExitComplete: () => this.requestUpdate()
+		});
+		return this.exit;
+	}
 	registerLayer = () => {
 		this.ensureConfig();
 		return this.config.layerRegistry.register({
@@ -3568,13 +3634,20 @@ var XhDrawerElement = class extends XhElement {
 		put("title", api.getTitleProps());
 		put("description", api.getDescriptionProps());
 		put("close-trigger", api.getCloseTriggerProps());
+		const exit = this.ensureExit();
+		exit.track(this.contentNode);
+		exit.update(open);
+		const visible = exit.visible;
 		const positioner = this.getPart("positioner");
-		if (positioner) this.setPartHidden(positioner, !open);
-		if (this.backdropNode) this.setPartHidden(this.backdropNode, !open);
-		this.setPartHidden(this.contentNode, !open);
+		if (positioner) this.setPartHidden(positioner, !visible);
+		if (this.backdropNode) this.setPartHidden(this.backdropNode, !visible);
+		this.setPartHidden(this.contentNode, !visible);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.exit?.dispose();
+		this.exit = null;
+		if (this.ctrl.service.state.get() !== "open") this.setPartHidden(this.contentNode, true);
 		this.config = null;
 	}
 };
@@ -5325,6 +5398,7 @@ var XhImageViewerElement = class extends XhElement {
 	viewerScope = createScope(null, this.idGen);
 	config = null;
 	contentNode = null;
+	exit = null;
 	backdropNode = null;
 	/** counter 的文本归属：首帧为空才代填，作者写过内容就不碰。 */
 	counterOwned = null;
@@ -5372,6 +5446,16 @@ var XhImageViewerElement = class extends XhElement {
 			idGenerator: this.idGen
 		});
 	}
+	/** 退场闸门建一次；presence 不是响应式 cell，退场结束要显式排一次更新才轮得到收起。 */
+	ensureExit() {
+		this.ensureConfig();
+		this.exit ??= createOverlayExit({
+			config: this.config,
+			open: this.ctrl.service.state.get() === "open",
+			onExitComplete: () => this.requestUpdate()
+		});
+		return this.exit;
+	}
 	registerLayer = () => {
 		this.ensureConfig();
 		return this.config.layerRegistry.register({
@@ -5425,13 +5509,20 @@ var XhImageViewerElement = class extends XhElement {
 				if (counter.textContent !== text) counter.textContent = text;
 			}
 		}
+		const exit = this.ensureExit();
+		exit.track(this.contentNode);
+		exit.update(open);
+		const visible = exit.visible;
 		const positioner = this.getPart("positioner");
-		if (positioner) this.setPartHidden(positioner, !open);
-		if (this.backdropNode) this.setPartHidden(this.backdropNode, !open);
-		this.setPartHidden(this.contentNode, !open);
+		if (positioner) this.setPartHidden(positioner, !visible);
+		if (this.backdropNode) this.setPartHidden(this.backdropNode, !visible);
+		this.setPartHidden(this.contentNode, !visible);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.exit?.dispose();
+		this.exit = null;
+		if (this.ctrl.service.state.get() !== "open") this.setPartHidden(this.contentNode, true);
 		this.config = null;
 	}
 };