@plusui/library 0.1.15 → 0.1.17

package/cdn/components/modal/modal.js

@@ -1,43 +1,67 @@
 import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
 import { x } from '../../lit-element-ByzbtpGk.js';
 import { r } from '../../state-D1d5Sfj8.js';
+import { e } from '../../query-CHb9Ft_d.js';
+import { o } from '../../style-map-DC_vNus2.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
 import { modalStyle } from './modal.style.js';
 import Tailwind from '../base/tailwind-base.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../directive-DZCF8pFJ.js';
 import '../../index-B9iart53.js';
-import '../../global-GTfSG3gU.js';
+import '../../global-m-W73pez.js';
 
 /**
  * @tag plus-modal
- * @summary Modal dialog component that appears on top of the page content.
+ * @summary Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
  *
+ * @slot - Main content area (same as body slot)
  * @slot header - The header content of the modal
- * @slot body - The main content of the modal
+ * @slot body - The main content of the modal (alternative to default slot)
  * @slot footer - The footer content of the modal
  * @slot close - Custom close button (defaults to an X icon)
  *
- * @csspart container - The main container element
- * @csspart overlay - The overlay element
- * @csspart modal - The modal element
- * @csspart header - The header element
- * @csspart body - The body element
- * @csspart footer - The footer element
+ * @csspart dialog - The native dialog element
+ * @csspart container - The container wrapper for centering and scrolling
+ * @csspart modal - The main modal box
+ * @csspart header - The header section
+ * @csspart header-content - The content wrapper inside header
+ * @csspart body - The main content area
+ * @csspart footer - The footer section
  * @csspart close-button - The close button element
  *
+ * @event plus-modal-open - Emitted after the modal has opened
+ * @event plus-modal-close - Emitted after the modal has closed
+ * @event plus-modal-before-open - Emitted before the modal opens (cancelable)
+ * @event plus-modal-before-close - Emitted before the modal closes (cancelable)
+ *
  * @example
  * ```html
- * <plus-modal>
+ * <!-- Basic usage -->
+ * <plus-modal is-open>
  *   <div slot="header">Modal Title</div>
  *   <div slot="body">Modal Content</div>
  *   <div slot="footer">
- *     <button>Save</button>
+ *     <button data-dismiss>Close</button>
  *   </div>
  * </plus-modal>
+ *
+ * <!-- Full screen modal -->
+ * <plus-modal full-screen>
+ *   <div slot="header">Full Screen</div>
+ *   <p>Content here</p>
+ * </plus-modal>
+ *
+ * <!-- Static backdrop (shake on outside click) -->
+ * <plus-modal backdrop="static">
+ *   <div slot="header">Can't Close Outside</div>
+ *   <p>Must use close button</p>
+ * </plus-modal>
  * ```
  */
 class PlusModal extends Tailwind {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The size of the modal
          * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
@@ -45,6 +69,13 @@ class PlusModal extends Tailwind {
          * @attr size
          */
         this.size = 'md';
+        /**
+         * The placement of the modal on the screen
+         * @type {'center' | 'top'}
+         * @default 'center'
+         * @attr placement
+         */
+        this.placement = 'center';
         /**
          * Whether the modal is open
          * @type {boolean}
@@ -59,6 +90,23 @@ class PlusModal extends Tailwind {
          * @attr full-width
          */
         this.fullWidth = false;
+        /**
+         * Makes the modal take the full screen (100vw x 100vh, no border radius)
+         * @type {boolean}
+         * @default false
+         * @attr full-screen
+         */
+        this.fullScreen = false;
+        /**
+         * Controls backdrop behavior
+         * - true: Shows backdrop, modal can be closed by clicking outside
+         * - false: No backdrop
+         * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+         * @type {boolean | 'static'}
+         * @default true
+         * @attr backdrop
+         */
+        this.backdrop = true;
         /**
          * Whether the modal should close when clicking the backdrop
          * @type {boolean}
@@ -73,6 +121,20 @@ class PlusModal extends Tailwind {
          * @attr close-on-esc
          */
         this.closeOnEsc = true;
+        /**
+         * Hides the header section completely
+         * @type {boolean}
+         * @default false
+         * @attr no-header
+         */
+        this.noHeader = false;
+        /**
+         * Hides the footer section completely
+         * @type {boolean}
+         * @default false
+         * @attr no-footer
+         */
+        this.noFooter = false;
         /**
          * The duration of the animation in milliseconds
          * @type {number}
@@ -81,118 +143,286 @@ class PlusModal extends Tailwind {
          */
         this.animationDuration = 300;
         this.isAnimating = false;
-        this.keydownHandler = this.handleKeydown.bind(this);
+        this.shake = false;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('plus-modal-before-show', this.handleBeforeShow);
-        this.addEventListener('plus-modal-before-hide', this.handleBeforeHide);
+        this.addEventListener('plus-modal-before-open', this.handleBeforeOpen);
+        this.addEventListener('plus-modal-before-close', this.handleBeforeClose);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-modal-before-open', this.handleBeforeOpen);
+        this.removeEventListener('plus-modal-before-close', this.handleBeforeClose);
+        if (this.dialogRef && this.isOpen) {
+            this.dialogRef.close();
+        }
+    }
+    firstUpdated() {
+        if (this.isOpen && this.dialogRef) {
+            this.dialogRef.showModal();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('isOpen')) {
+            if (this.isOpen) {
+                this.handleOpenChange();
+            }
+            else {
+                this.handleCloseChange();
+            }
+        }
     }
     /**
-     * Hides the modal with animation
-     * @returns {void}
+     * Shows the modal with animation
+     * @returns {Promise<void>}
      */
-    hide() {
-        if (this.isAnimating)
+    async show() {
+        if (this.isAnimating || this.isOpen)
             return;
-        this.emit('plus-modal-before-hide');
+        this.isOpen = true;
     }
-    handleBeforeHide() {
-        this.isAnimating = true;
+    /**
+     * Hides the modal with animation
+     * @returns {Promise<void>}
+     */
+    async hide() {
+        if (this.isAnimating || !this.isOpen)
+            return;
         this.isOpen = false;
-        setTimeout(() => {
-            this.isAnimating = false;
-            this.emit('plus-modal-hide');
-        }, this.animationDuration);
     }
     /**
-     * Shows the modal with animation
-     * @returns {void}
+     * Toggles the modal open/closed state
+     * @returns {Promise<void>}
      */
-    show() {
-        if (this.isAnimating)
+    async toggle() {
+        if (this.isOpen) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    async handleOpenChange() {
+        this.isAnimating = true;
+        const event = this.emit('plus-modal-before-open', { cancelable: true });
+        if (event.defaultPrevented) {
+            this.isOpen = false;
+            this.isAnimating = false;
             return;
-        this.emit('plus-modal-before-show');
+        }
+        if (this.dialogRef) {
+            this.dialogRef.showModal();
+            // Small delay for animation
+            await new Promise(resolve => setTimeout(resolve, 50));
+            this.isAnimating = false;
+            this.emit('plus-modal-open');
+        }
     }
-    handleBeforeShow() {
+    async handleCloseChange() {
         this.isAnimating = true;
-        this.isOpen = true;
-        setTimeout(() => {
+        const event = this.emit('plus-modal-before-close', { cancelable: true });
+        if (event.defaultPrevented) {
+            this.isOpen = true;
             this.isAnimating = false;
-            this.emit('plus-modal-show');
-        }, this.animationDuration);
-        if (this.closeOnEsc) {
-            document.addEventListener('keydown', this.keydownHandler);
+            return;
         }
+        // Wait for animation before closing
+        await new Promise(resolve => setTimeout(resolve, this.animationDuration));
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+        this.isAnimating = false;
+        this.emit('plus-modal-close');
     }
-    // override firstUpdated() {
-    //   this.modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;
-    // }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('plus-modal-before-show', this.handleBeforeShow);
-        this.removeEventListener('plus-modal-before-hide', this.handleBeforeHide);
-        document.removeEventListener('keydown', this.keydownHandler);
+    handleBeforeOpen() {
+        // Hook for internal use if needed
+    }
+    handleBeforeClose() {
+        // Hook for internal use if needed
+    }
+    handleBackdropClick(e) {
+        const target = e.target;
+        // Check if click is on the container (backdrop area), not on modal content
+        if (target.getAttribute('part') === 'container') {
+            if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+            else if (this.closeOnBackdrop) {
+                this.hide();
+            }
+        }
+    }
+    handleDialogCancel(e) {
+        e.preventDefault();
+        if (this.closeOnEsc) {
+            if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+            else {
+                this.hide();
+            }
+        }
+        else if (this.backdrop === 'static') {
+            this.shakeModal();
+        }
     }
     handleKeydown(e) {
-        if (e.key === 'Escape' && this.closeOnEsc && this.isOpen) {
-            this.hide();
+        if (e.key === 'Escape' && this.isOpen) {
+            // Only handle ESC if this is the topmost modal
+            const openModals = Array.from(document.querySelectorAll('plus-modal[is-open]'));
+            const topModal = openModals[openModals.length - 1];
+            if (topModal !== this) {
+                return;
+            }
+            e.preventDefault();
+            if (this.closeOnEsc) {
+                if (this.backdrop === 'static') {
+                    this.shakeModal();
+                }
+                else {
+                    this.hide();
+                }
+            }
+            else if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
         }
     }
-    handleBackdropClick(e) {
-        // Check if the click was on the backdrop (overlay) and not on the modal content
-        if (e.target === e.currentTarget && this.closeOnBackdrop) {
+    handleClick(e) {
+        // Use composedPath to work with shadow DOM and slots
+        const path = e.composedPath();
+        const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));
+        const closeModalElement = path.find(el => el.hasAttribute?.('data-close-modal'));
+        if (dismissElement) {
+            // Stop propagation only when dismissing the modal
+            e.stopPropagation();
+            e.preventDefault();
             this.hide();
         }
+        else if (closeModalElement) {
+            const modalId = closeModalElement.getAttribute('data-close-modal');
+            // If modalId matches this modal's id, close it
+            if (!modalId || modalId === this.id) {
+                // Stop propagation only when closing the modal
+                e.stopPropagation();
+                e.preventDefault();
+                this.hide();
+            }
+        }
+        // Don't stop propagation for normal clicks - let them bubble to child elements
+    }
+    shakeModal() {
+        this.shake = true;
+        setTimeout(() => {
+            this.shake = false;
+        }, this.animationDuration);
+    }
+    getModalStyle() {
+        if (this.fullScreen) {
+            return {
+                width: '100vw',
+                height: '100vh',
+                maxWidth: 'none',
+                maxHeight: 'none',
+            };
+        }
+        if (this.fullWidth) {
+            return {
+                width: '100%',
+                maxWidth: '100%',
+            };
+        }
+        const widths = {
+            sm: '400px',
+            md: '600px',
+            lg: '800px',
+            xl: '1024px',
+            '2xl': '1200px',
+            full: '100%',
+        };
+        return {
+            width: widths[this.size],
+            maxWidth: this.fullScreen ? 'none' : '90vw',
+            maxHeight: this.fullScreen ? 'none' : '90vh',
+        };
     }
     render() {
-        const { size, isOpen, fullWidth } = this;
-        const { base, modalClass, modalOverlay, modalContainer, modalHeader, modalBody, modalFooter, modalCloseButtonClass, } = modalStyle({ size, isOpen, fullWidth });
+        const { dialog, container, modal, header, headerContent, body, footer, closeButton, } = modalStyle({
+            open: this.isOpen,
+            placement: this.placement,
+            size: this.size,
+            fullScreen: this.fullScreen,
+            shake: this.shake,
+            noHeader: this.noHeader,
+            noFooter: this.noFooter,
+            fullWidth: this.fullWidth,
+        });
         return x `
-      <div
-        class=${base()}
-        part="container"
-        role="dialog"
+      <dialog
+        part="dialog"
+        class=${dialog()}
+        @click=${this.handleBackdropClick}
+        @cancel=${this.handleDialogCancel}
+        @keydown=${this.handleKeydown}
         aria-modal="true"
-        aria-hidden=${!isOpen}
-        aria-label="Modal"
       >
         <div
-          class=${modalOverlay()}
-          part="overlay"
-          @click=${this.handleBackdropClick}
-        ></div>
-        <div class=${modalClass()} part="modal">
-          <div class=${modalContainer()}>
-            <div class=${modalHeader()} part="header">
-              <slot name="header"></slot>
-              <slot name="close">
-                <button
-                  class=${modalCloseButtonClass()}
-                  part="close-button"
-                  aria-label="Close modal"
-                  @click=${() => this.hide()}
-                >
-                  <plus-icon icon-name="xmark"></plus-icon>
-                </button>
-              </slot>
-            </div>
-            <div class=${modalBody()} part="body">
+          part="container"
+          class=${container()}
+        >
+          <div
+            part="modal"
+            class=${modal()}
+            style=${o(this.getModalStyle())}
+            role="document"
+            @click=${this.handleClick}
+          >
+            ${!this.noHeader ? x `
+              <div part="header" class=${header()}>
+                <div part="header-content" class=${headerContent()}>
+                  <slot name="header"></slot>
+                </div>
+                <slot name="close">
+                  <button
+                    part="close-button"
+                    class=${closeButton()}
+                    @click=${() => this.hide()}
+                    aria-label="Close modal"
+                    type="button"
+                  >
+                    <plus-icon icon-name="xmark"></plus-icon>
+                  </button>
+                </slot>
+              </div>
+            ` : ''}
+
+            <div part="body" class=${body()}>
               <slot name="body"></slot>
               <slot></slot>
             </div>
-            <div class=${modalFooter()} part="footer">
-              <slot name="footer"></slot>
-            </div>
+
+            ${!this.noFooter ? x `
+              <div part="footer" class=${footer()}>
+                <slot name="footer"></slot>
+              </div>
+            ` : ''}
           </div>
         </div>
-      </div>
+      </dialog>
     `;
     }
 }
+__decorate([
+    e('dialog')
+], PlusModal.prototype, "dialogRef", void 0);
 __decorate([
     n({ type: String, reflect: true })
 ], PlusModal.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusModal.prototype, "placement", void 0);
 __decorate([
     n({
         type: Boolean,
@@ -209,6 +439,17 @@ __decorate([
         converter: booleanConverter,
     })
 ], PlusModal.prototype, "fullWidth", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        attribute: 'full-screen',
+        converter: booleanConverter,
+    })
+], PlusModal.prototype, "fullScreen", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusModal.prototype, "backdrop", void 0);
 __decorate([
     n({
         type: Boolean,
@@ -225,11 +466,30 @@ __decorate([
         attribute: 'close-on-esc',
     })
 ], PlusModal.prototype, "closeOnEsc", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-header',
+        converter: booleanConverter,
+    })
+], PlusModal.prototype, "noHeader", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-footer',
+        converter: booleanConverter,
+    })
+], PlusModal.prototype, "noFooter", void 0);
 __decorate([
     n({ type: Number, reflect: true, attribute: 'animation-duration' })
 ], PlusModal.prototype, "animationDuration", void 0);
 __decorate([
     r()
 ], PlusModal.prototype, "isAnimating", void 0);
+__decorate([
+    r()
+], PlusModal.prototype, "shake", void 0);
 
 export { PlusModal, PlusModal as default };