@moni-labs/moni-ui 0.4.7 → 0.4.8

package/src/components/moni-morph-modal.test.ts

@@ -117,6 +117,32 @@ describe('moni-morph-modal', () => {
 		expect(el.hasAttribute('open')).toBe(true);
 	});
 
+	it('ocupa todo el viewport cuando fullscreen está activo', async () => {
+		el.fullscreen = true;
+		await el.updateComplete;
+		const rect = (el as unknown as { _computeFinalRect: (target: DOMRect) => DOMRect })
+			._computeFinalRect(new DOMRect(24, 700, 56, 56));
+
+		expect(el.hasAttribute('fullscreen')).toBe(true);
+		expect(rect.x).toBe(0);
+		expect(rect.y).toBe(0);
+		expect(rect.width).toBe(window.innerWidth);
+		expect(rect.height).toBe(window.innerHeight);
+		expect(el.shadowRoot?.querySelector('.panel')?.classList.contains('fullscreen')).toBe(true);
+	});
+
+	it('aplica fullscreen responsive sólo bajo el breakpoint', () => {
+		el.responsiveFullscreen = true;
+		el.fullscreenBreakpoint = 600;
+		const usesFullscreen = () => (el as unknown as { _usesFullscreen: () => boolean })._usesFullscreen();
+
+		vi.stubGlobal('innerWidth', 480);
+		expect(usesFullscreen()).toBe(true);
+		vi.stubGlobal('innerWidth', 900);
+		expect(usesFullscreen()).toBe(false);
+		vi.unstubAllGlobals();
+	});
+
 	it('proyecta el contenido del slot por defecto', async () => {
 		const content = document.createElement('p');
 		content.textContent = 'Hello';

package/src/components/moni-morph-modal.ts

@@ -229,6 +229,18 @@ export class MoniMorphModal extends MoniElement {
 	@property({ type: Boolean, reflect: true, attribute: 'auto-size', converter: litBool })
 	autoSize = false;
 
+	/** Fuerza al modal expandido a ocupar todo el viewport. */
+	@property({ type: Boolean, reflect: true, converter: litBool })
+	fullscreen = false;
+
+	/** Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. */
+	@property({ type: Boolean, reflect: true, attribute: 'responsive-fullscreen', converter: litBool })
+	responsiveFullscreen = false;
+
+	/** Ancho máximo del viewport, en píxeles, para aplicar responsive-fullscreen. */
+	@property({ type: Number, reflect: true, attribute: 'fullscreen-breakpoint' })
+	fullscreenBreakpoint = 600;
+
 	/**
 	 * Si es true, aplica un efecto de desenfoque (blur) al contenido durante la animación de entrada y salida.
 	 * @type {boolean}
@@ -1896,9 +1908,15 @@ export class MoniMorphModal extends MoniElement {
 		el.style.height = `${rect.height}px`;
 	}
 
+	private _usesFullscreen(): boolean {
+		if (this.fullscreen) return true;
+		return this.responsiveFullscreen && typeof window !== 'undefined' && window.innerWidth <= this.fullscreenBreakpoint;
+	}
+
 	private _computeFinalRect(targetRect: DOMRect, naturalSize?: { width: number; height: number }): DOMRect {
 		const vw = window.innerWidth;
 		const vh = window.innerHeight;
+		if (this._usesFullscreen()) return new DOMRect(0, 0, vw, vh);
 		const padding = 16;
 
 		let width = this.autoSize && naturalSize ? naturalSize.width : this._parseSize(this.expandedWidth, vw);
@@ -2082,6 +2100,19 @@ export class MoniMorphModal extends MoniElement {
 				z-index: var(--_z-index, 100);
 			}
 
+			.panel.fullscreen {
+				border-radius: 0;
+				box-shadow: none;
+			}
+
+			.panel.fullscreen header {
+				padding-block-start: max(1.25rem, env(safe-area-inset-top));
+			}
+
+			.panel.fullscreen footer {
+				padding-block-end: max(1.5rem, env(safe-area-inset-bottom));
+			}
+
 			.panel-inner {
 				display: flex;
 				flex-direction: column;
@@ -2191,6 +2222,7 @@ export class MoniMorphModal extends MoniElement {
 	override render() {
 		const visible = this._visible || this.open;
 		const headerEmpty = !this._hasHeader && !this.showCloseButton;
+		const fullscreen = this._usesFullscreen();
 		return html`
 			${this.hasBackdrop ? html`
 				<div
@@ -2199,7 +2231,7 @@ export class MoniMorphModal extends MoniElement {
 					style="${!this.modal ? 'background-color: transparent;' : ''}"
 				></div>
 			` : ''}
-			<div class="panel" part="panel">
+			<div class="panel ${fullscreen ? 'fullscreen' : ''}" part="panel">
 				<div class="panel-inner" part="panel-inner">
 					<header
 						class="${headerEmpty ? 'is-empty' : ''}"