@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.11

package/src/components/modal/modal.ts

@@ -1,159 +1,247 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-modal')
-export class StModal extends LitElement {
-  /**
-   * Controls whether the modal is open.
-   */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /**
-   * Title text displayed in the modal header.
-   */
-  @property({ type: String }) heading = '';
-
-  @query('dialog') private dialogEl!: HTMLDialogElement;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: contents;
-      }
-
-      dialog {
-        padding: 0;
-        border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-lg, 0.5rem);
-        background-color: var(--st-color-surface);
-        color: var(--st-color-text);
-        width: 100%;
-        max-width: 500px;
-        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-        font-family: var(--st-font-family, inherit);
-      }
-
-      dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(2px);
-      }
-
-      .modal-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-bottom: 1px solid var(--st-color-border);
-      }
-
-      .modal-title {
-        font-size: 1.125rem;
-        font-weight: 600;
-        margin: 0;
-      }
-
-      .close-btn {
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: var(--st-color-text-muted);
-        padding: 0.25rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--st-radius-sm);
-        transition: color 0.2s, background-color 0.2s;
-      }
-
-      .close-btn:hover {
-        color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
-      }
-
-      .modal-body {
-        padding: var(--st-spacing-lg);
-        font-size: var(--st-font-size-sm, 0.875rem);
-        line-height: 1.5;
-      }
-
-      .modal-footer {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: var(--st-spacing-sm);
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-top: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface-muted, #f8fafc);
-      }
-    `
-  ];
-
-  updated(changedProperties: PropertyValues) {
-    if (changedProperties.has('open')) {
-      if (this.dialogEl) {
-        if (this.open && !this.dialogEl.open) {
-          this.dialogEl.showModal();
-        } else if (!this.open && this.dialogEl.open) {
-          this.dialogEl.close();
-        }
-      }
-    }
-  }
-
-  private handleClose() {
-    this.open = false;
-    this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
-  }
-
-  private onDialogClose() {
-    if (this.open) {
-      this.open = false;
-      this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
-    }
-  }
-
-  private handleBackdropClick(e: MouseEvent) {
-    const rect = this.dialogEl.getBoundingClientRect();
-    if (
-      e.clientX < rect.left ||
-      e.clientX > rect.right ||
-      e.clientY < rect.top ||
-      e.clientY > rect.bottom
-    ) {
-      this.handleClose();
-    }
-  }
-
-  render() {
-    return html`
-      <dialog 
-        @cancel=${this.handleClose} 
-        @click=${this.handleBackdropClick} 
-        @close=${this.onDialogClose}
-      >
-        <div class="modal-header" @click=${(e: MouseEvent) => e.stopPropagation()}>
-          <slot name="header">
-            <h3 class="modal-title">${this.heading}</h3>
-          </slot>
-          <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
-        </div>
-        <div class="modal-body" @click=${(e: MouseEvent) => e.stopPropagation()}>
-          <slot></slot>
-        </div>
-        <div class="modal-footer" @click=${(e: MouseEvent) => e.stopPropagation()}>
-          <slot name="footer"></slot>
-        </div>
-      </dialog>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-modal': StModal;
-  }
+import { LitElement, html, css, PropertyValues, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-modal')
+export class StModal extends LitElement {
+  /**
+   * Controls whether the modal is open.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Title text displayed in the modal header.
+   */
+  @property({ type: String }) heading = '';
+
+  /**
+   * Size of the modal (sm, md, lg, xl, xxl).
+   */
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md';
+
+  /**
+   * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+   */
+  @property({ type: Boolean }) static = false;
+
+  @query('dialog') private dialogEl!: HTMLDialogElement;
+
+  private isClosing = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        padding: 0;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg, 0.5rem);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        
+        /* Responsive width calculation */
+        width: calc(100% - 2rem);
+        margin: auto;
+        
+        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        font-family: var(--st-font-family, inherit);
+      }
+
+      /* Sizes */
+      dialog.size-sm { max-width: 400px; }
+      dialog.size-md { max-width: 500px; }
+      dialog.size-lg { max-width: 800px; }
+      dialog.size-xl { max-width: 1024px; }
+      dialog.size-xxl { max-width: 1280px; }
+
+      dialog::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+      }
+
+      /* Animations */
+      @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes slide-up {
+        from { opacity: 0; transform: translateY(20px) scale(0.95); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes slide-down {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+      }
+
+      dialog[open] {
+        animation: slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog[open]::backdrop {
+        animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      
+      dialog.closing {
+        animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog.closing::backdrop {
+        animation: fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+
+      .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      .modal-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .close-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--st-color-text-muted);
+        padding: 0.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--st-radius-sm);
+        transition: color 0.2s, background-color 0.2s;
+      }
+
+      .close-btn:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface-muted, #f1f5f9);
+      }
+
+      .modal-body {
+        padding: var(--st-spacing-lg);
+        font-size: var(--st-font-size-sm, 0.875rem);
+        line-height: 1.5;
+      }
+
+      .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--st-spacing-sm);
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-top: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface-muted, #f8fafc);
+      }
+    `
+  ];
+
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.dialogEl.classList.remove('closing');
+        this.isClosing = false;
+        if (!this.dialogEl.open) {
+          this.dialogEl.showModal();
+        }
+      } else if (this.dialogEl.open && !this.isClosing) {
+        this.closeWithAnimation();
+      }
+    }
+  }
+
+  private closeWithAnimation() {
+    if (this.isClosing) return;
+    this.isClosing = true;
+    this.dialogEl.classList.add('closing');
+    
+    const onAnimationEnd = () => {
+      this.dialogEl.removeEventListener('animationend', onAnimationEnd);
+      this.dialogEl.classList.remove('closing');
+      this.isClosing = false;
+      if (!this.open) {
+        this.dialogEl.close();
+      }
+    };
+    
+    this.dialogEl.addEventListener('animationend', onAnimationEnd);
+  }
+
+  private handleClose() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+  }
+
+  private handleCancel(e: Event) {
+    e.preventDefault(); 
+    if (!this.static) {
+      this.handleClose();
+    }
+  }
+
+  private onDialogClose() {
+    if (this.open) {
+      this.open = false;
+      this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    }
+  }
+
+  private handleBackdropClick(e: MouseEvent) {
+    if (this.static) return;
+
+    const rect = this.dialogEl.getBoundingClientRect();
+    const clickedOutside = 
+      e.clientX < rect.left ||
+      e.clientX > rect.right ||
+      e.clientY < rect.top ||
+      e.clientY > rect.bottom;
+
+    if (clickedOutside) {
+      this.handleClose();
+    }
+  }
+
+  render() {
+    return html`
+      <dialog 
+        class="size-${this.size}"
+        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
+        @cancel=${this.handleCancel} 
+        @click=${this.handleBackdropClick} 
+        @close=${this.onDialogClose}
+      >
+        <div class="modal-header" @click=${(e: MouseEvent) => e.stopPropagation()}>
+          <slot name="header">
+            <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
+          </slot>
+          
+          ${!this.static ? html`
+            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          ` : nothing}
+        </div>
+        <div class="modal-body" @click=${(e: MouseEvent) => e.stopPropagation()}>
+          <slot></slot>
+        </div>
+        <div class="modal-footer" @click=${(e: MouseEvent) => e.stopPropagation()}>
+          <slot name="footer"></slot>
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-modal': StModal;
+  }
 }