snice 2.1.4 → 2.2.0

package/components/login/snice-login.ts

@@ -1,326 +0,0 @@
-import { element, property, query, queryAll, on, dispatch, request } from 'snice';
-import css from './snice-login.css?inline';
-import type { LoginVariant, LoginSize, LoginCredentials, LoginResult, SniceLoginElement } from './snice-login.types';
-import '../alert/snice-alert';
-import '../button/snice-button';
-
-@element('snice-login')
-export class SniceLogin extends HTMLElement implements SniceLoginElement {
-  @property({ reflect: true })
-  variant: LoginVariant = 'default';
-
-  @property({ reflect: true })
-  size: LoginSize = 'medium';
-
-  @property({ reflect: true })
-  title = 'Sign In';
-
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  @property({ type: Boolean, reflect: true })
-  loading = false;
-
-  @property({ type: Boolean, reflect: true, attribute: 'show-remember-me' })
-  showRememberMe = true;
-
-  @property({ type: Boolean, reflect: true, attribute: 'show-forgot-password' })
-  showForgotPassword = true;
-
-  @property({ reflect: true, attribute: 'action-text' })
-  actionText = 'Sign In';
-
-  @query('.login__form')
-  form!: HTMLFormElement;
-
-  @query('input[name="username"]')
-  usernameInput!: HTMLInputElement;
-
-  @query('input[name="password"]')
-  passwordInput!: HTMLInputElement;
-
-  @query('input[name="remember"]')
-  rememberInput?: HTMLInputElement;
-
-  @query('snice-alert')
-  alertElement!: HTMLElement;
-
-  @query('snice-button')
-  buttonElement!: HTMLElement;
-
-  @queryAll('input')
-  inputElements!: NodeListOf<HTMLInputElement>;
-
-  private alertMessage = '';
-  private alertVariant: 'error' | 'success' | '' = '';
-
-  html() {
-    return /*html*/`
-      <div class="login login--${this.variant} login--${this.size}">
-        <slot name="before-header"></slot>
-        
-        <div class="login__header">
-          <h1 class="login__title">${this.title}</h1>
-          <slot name="subtitle">
-            <p class="login__subtitle">Enter your credentials to continue</p>
-          </slot>
-        </div>
-        
-        <slot name="after-header"></slot>
-        <slot name="before-form"></slot>
-        
-        <form class="login__form">
-          <slot name="form-top"></slot>
-          
-          <div class="login__field">
-            <label class="login__label" for="username">Username</label>
-            <input 
-              class="login__input"
-              type="text" 
-              name="username" 
-              id="username"
-              required
-              autocomplete="username"
-              placeholder="Enter your username"
-              ${this.disabled || this.loading ? 'disabled' : ''}
-            />
-          </div>
-          
-          <slot name="between-fields"></slot>
-          
-          <div class="login__field">
-            <label class="login__label" for="password">Password</label>
-            <input 
-              class="login__input"
-              type="password" 
-              name="password" 
-              id="password"
-              required
-              autocomplete="current-password"
-              placeholder="Enter your password"
-              ${this.disabled || this.loading ? 'disabled' : ''}
-            />
-          </div>
-          
-          <div class="login__options" ${!this.showRememberMe && !this.showForgotPassword ? 'hidden' : ''}>
-            <label class="login__remember" ${!this.showRememberMe ? 'hidden' : ''}>
-              <input class="login__checkbox" type="checkbox" name="remember" ${this.disabled || this.loading ? 'disabled' : ''} />
-              Remember me
-            </label>
-            
-            <a href="#" class="login__forgot" ${!this.showForgotPassword ? 'hidden' : ''}>Forgot password?</a>
-          </div>
-          
-          <slot name="before-submit"></slot>
-          
-          <snice-button type="submit" variant="primary" ${this.disabled ? 'disabled' : ''} ${this.loading ? 'loading' : ''}>
-            ${this.actionText}
-          </snice-button>
-          
-          <slot name="after-submit"></slot>
-        </form>
-        
-        <slot name="after-form"></slot>
-        
-        <snice-alert variant="${this.alertVariant}" ${!this.alertMessage ? 'hidden' : ''}>${this.alertMessage}</snice-alert>
-        
-        <div class="login__footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    `;
-  }
-
-
-  css() {
-    return css;
-  }
-
-  @request('login-user')
-  async *login(credentials?: LoginCredentials): any {
-    if (!credentials) {
-      credentials = this.getFormData();
-    }
-    
-    if (!credentials.username || !credentials.password) {
-      return {
-        success: false,
-        error: 'Username and password are required'
-      };
-    }
-
-    try {
-      const result = await (yield credentials);
-      return result;
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Login failed'
-      };
-    }
-  }
-
-  @on('click', 'snice-button')
-  async handleButtonClick(event: Event) {
-    event.preventDefault();
-    // Trigger form submit
-    if (this.form) {
-      this.form.requestSubmit();
-    }
-  }
-
-  @on('submit', '.login__form')
-  @dispatch('@snice/login-attempt', { bubbles: true, composed: true })
-  async handleSubmit(event: Event) {
-    event.preventDefault();
-    
-    if (this.loading || this.disabled) {
-      return;
-    }
-
-    this.clearAlert();
-    this.loading = true;
-    this.updateLoadingState();
-    
-    // Wait a tick to ensure the form is properly rendered
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
-    try {
-      const credentials = this.getFormData();
-      
-      if (!credentials.username || !credentials.password) {
-        this.showAlert('Username and password are required', 'error');
-        return;
-      }
-      
-      const result = await this.login(credentials);
-      
-      if (result.success) {
-        this.showAlert('Login successful!', 'success');
-        this.dispatchLoginSuccess(result);
-      } else {
-        this.showAlert(result.error || 'Login failed', 'error');
-        this.dispatchLoginError(result.error || 'Login failed');
-      }
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Login failed';
-      this.showAlert(errorMessage, 'error');
-      this.dispatchLoginError(errorMessage);
-    } finally {
-      this.loading = false;
-      this.updateLoadingState();
-    }
-
-    const credentials = this.getFormData();
-    return {
-      username: credentials.username,
-      timestamp: new Date().toISOString()
-    };
-  }
-
-  @on('keydown:Enter', '.login__input')
-  handleEnterKey() {
-    if (!this.loading && !this.disabled && this.form) {
-      this.form.requestSubmit();
-    }
-  }
-
-  @on('click', '.login__forgot')
-  @dispatch('@snice/login-forgot-password', { bubbles: true, composed: true })
-  handleForgotPassword(event: Event) {
-    event.preventDefault();
-    return {
-      timestamp: new Date().toISOString()
-    };
-  }
-
-  @dispatch('@snice/login-success', { bubbles: true, composed: true })
-  private dispatchLoginSuccess(result: LoginResult) {
-    return { timestamp: new Date().toISOString() };
-  }
-
-  @dispatch('@snice/login-error', { bubbles: true, composed: true })
-  private dispatchLoginError(error: string) {
-    return {
-      error,
-      timestamp: new Date().toISOString()
-    };
-  }
-
-
-  private getFormData(): LoginCredentials {
-    const usernameInput = this.shadowRoot?.querySelector('#username') as HTMLInputElement;
-    const passwordInput = this.shadowRoot?.querySelector('#password') as HTMLInputElement;
-    const rememberInput = this.shadowRoot?.querySelector('input[name="remember"]') as HTMLInputElement;
-    
-    return {
-      username: usernameInput?.value || '',
-      password: passwordInput?.value || '',
-      remember: rememberInput?.checked || false
-    };
-  }
-
-  showAlert(message: string, variant: 'error' | 'success') {
-    this.alertMessage = message;
-    this.alertVariant = variant;
-    this.updateAlert();
-  }
-
-  clearAlert() {
-    this.alertMessage = '';
-    this.alertVariant = '';
-    this.updateAlert();
-  }
-
-  private updateAlert() {
-    if (this.alertElement) {
-      this.alertElement.setAttribute('variant', this.alertVariant);
-      this.alertElement.textContent = this.alertMessage;
-      if (this.alertMessage) {
-        this.alertElement.removeAttribute('hidden');
-      } else {
-        this.alertElement.setAttribute('hidden', '');
-      }
-    }
-  }
-
-  private updateLoadingState() {
-    if (this.buttonElement) {
-      if (this.loading) {
-        this.buttonElement.setAttribute('loading', '');
-      } else {
-        this.buttonElement.removeAttribute('loading');
-      }
-      
-      if (this.disabled) {
-        this.buttonElement.setAttribute('disabled', '');
-      } else {
-        this.buttonElement.removeAttribute('disabled');
-      }
-    }
-    
-    this.inputElements?.forEach(input => {
-      if (this.disabled || this.loading) {
-        input.setAttribute('disabled', '');
-      } else {
-        input.removeAttribute('disabled');
-      }
-    });
-  }
-
-  setError(message: string) {
-    this.showAlert(message, 'error');
-  }
-
-  clearError() {
-    this.clearAlert();
-  }
-
-  reset() {
-    if (this.form) {
-      this.form.reset();
-    }
-    this.clearAlert();
-    this.loading = false;
-  }
-}

package/components/login/snice-login.types.ts

@@ -1,29 +0,0 @@
-export type LoginVariant = 'default' | 'card' | 'minimal';
-export type LoginSize = 'small' | 'medium' | 'large';
-
-export interface LoginCredentials {
-  username: string;
-  password: string;
-  remember?: boolean;
-}
-
-export interface LoginResult {
-  success: boolean;
-  error?: string;
-  data?: any;
-}
-
-export interface SniceLoginElement extends HTMLElement {
-  variant: LoginVariant;
-  size: LoginSize;
-  title: string;
-  disabled: boolean;
-  loading: boolean;
-  showRememberMe: boolean;
-  showForgotPassword: boolean;
-  actionText: string;
-  login(credentials: LoginCredentials): Promise<LoginResult>;
-  reset(): void;
-  setError(message: string): void;
-  clearError(): void;
-}

package/components/modal/demo.html

@@ -1,291 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Modal Demo</title>
-  <link rel="stylesheet" href="../theme/theme.css">
-  <style>
-    body {
-      padding: 40px;
-      font-family: var(--snice-font-family);
-      background: var(--snice-color-background);
-      color: var(--snice-color-text);
-      min-height: 200vh; /* To test scroll locking */
-    }
-    
-    .section {
-      margin-bottom: 40px;
-    }
-    
-    h2 {
-      color: var(--snice-color-text);
-      margin-bottom: 20px;
-      font-size: var(--snice-font-size-2xl);
-    }
-    
-    h3 {
-      color: var(--snice-color-text-secondary);
-      margin-bottom: 16px;
-      font-size: var(--snice-font-size-lg);
-    }
-    
-    .button-group {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
-    }
-    
-    button {
-      padding: 8px 16px;
-      background: var(--snice-color-primary);
-      color: var(--snice-color-text-inverse);
-      border: none;
-      border-radius: var(--snice-border-radius-md);
-      font-family: var(--snice-font-family);
-      font-size: var(--snice-font-size-md);
-      cursor: pointer;
-      transition: background-color var(--snice-transition-fast) ease;
-    }
-    
-    button:hover {
-      background: var(--snice-color-primary-hover);
-    }
-    
-    button.secondary {
-      background: var(--snice-color-secondary);
-      color: var(--snice-color-text);
-    }
-    
-    button.secondary:hover {
-      background: var(--snice-color-secondary-hover);
-    }
-    
-    .long-content {
-      height: 1000px;
-      background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
-      padding: 20px;
-      margin-top: 20px;
-      border-radius: var(--snice-border-radius-lg);
-    }
-    
-    input, textarea {
-      width: 100%;
-      padding: 8px;
-      margin: 8px 0;
-      border: 1px solid var(--snice-color-border);
-      border-radius: var(--snice-border-radius-md);
-      font-family: var(--snice-font-family);
-    }
-    
-    label {
-      display: block;
-      margin-top: 12px;
-      font-weight: 500;
-    }
-  </style>
-</head>
-<body>
-  <h2>Modal Component Demo</h2>
-  
-  <div class="section">
-    <h3>Basic Modal</h3>
-    <div class="button-group">
-      <button onclick="document.getElementById('basic-modal').show()">Open Basic Modal</button>
-    </div>
-    
-    <snice-modal id="basic-modal" label="Basic Modal">
-      <h2 slot="header">Welcome!</h2>
-      <p>This is a basic modal with header, body, and footer slots.</p>
-      <p>Click the backdrop or press Escape to close.</p>
-      <div slot="footer">
-        <button class="secondary" onclick="document.getElementById('basic-modal').close()">Cancel</button>
-        <button onclick="document.getElementById('basic-modal').close()">Confirm</button>
-      </div>
-    </snice-modal>
-  </div>
-
-  <div class="section">
-    <h3>Different Sizes</h3>
-    <div class="button-group">
-      <button onclick="document.getElementById('small-modal').show()">Small Modal</button>
-      <button onclick="document.getElementById('medium-modal').show()">Medium Modal</button>
-      <button onclick="document.getElementById('large-modal').show()">Large Modal</button>
-      <button onclick="document.getElementById('fullscreen-modal').show()">Fullscreen Modal</button>
-    </div>
-    
-    <snice-modal id="small-modal" size="small" label="Small Modal">
-      <h2 slot="header">Small Modal</h2>
-      <p>This is a small modal, perfect for confirmations.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('small-modal').close()">Got it</button>
-      </div>
-    </snice-modal>
-    
-    <snice-modal id="medium-modal" size="medium" label="Medium Modal">
-      <h2 slot="header">Medium Modal</h2>
-      <p>This is the default medium size modal.</p>
-      <p>It works well for most content.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('medium-modal').close()">Close</button>
-      </div>
-    </snice-modal>
-    
-    <snice-modal id="large-modal" size="large" label="Large Modal">
-      <h2 slot="header">Large Modal</h2>
-      <p>This is a large modal for more complex content.</p>
-      <p>It provides more space for forms, tables, or detailed information.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('large-modal').close()">Close</button>
-      </div>
-    </snice-modal>
-    
-    <snice-modal id="fullscreen-modal" size="fullscreen" label="Fullscreen Modal">
-      <h2 slot="header">Fullscreen Modal</h2>
-      <p>This modal takes up the entire viewport (with padding).</p>
-      <p>Great for complex workflows or full-screen experiences.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('fullscreen-modal').close()">Exit Fullscreen</button>
-      </div>
-    </snice-modal>
-  </div>
-
-  <div class="section">
-    <h3>No Dismiss Options</h3>
-    <div class="button-group">
-      <button onclick="document.getElementById('no-backdrop-modal').show()">No Backdrop Dismiss</button>
-      <button onclick="document.getElementById('no-escape-modal').show()">No Escape Dismiss</button>
-      <button onclick="document.getElementById('no-dismiss-modal').show()">Force Action</button>
-    </div>
-    
-    <snice-modal id="no-backdrop-modal" no-backdrop-dismiss label="No Backdrop Dismiss">
-      <h2 slot="header">No Backdrop Dismiss</h2>
-      <p>Clicking the backdrop won't close this modal.</p>
-      <p>You can still press Escape or click the X button.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('no-backdrop-modal').close()">Close</button>
-      </div>
-    </snice-modal>
-    
-    <snice-modal id="no-escape-modal" no-escape-dismiss label="No Escape Dismiss">
-      <h2 slot="header">No Escape Dismiss</h2>
-      <p>Pressing Escape won't close this modal.</p>
-      <p>You can still click the backdrop or the X button.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('no-escape-modal').close()">Close</button>
-      </div>
-    </snice-modal>
-    
-    <snice-modal id="no-dismiss-modal" no-backdrop-dismiss no-escape-dismiss no-close-button label="Force Action">
-      <h2 slot="header">Important Action Required</h2>
-      <p>This modal can't be dismissed by clicking outside, pressing Escape, or using the X button.</p>
-      <p>The user must make a choice using the action buttons.</p>
-      <div slot="footer">
-        <button class="secondary" onclick="document.getElementById('no-dismiss-modal').close()">Cancel</button>
-        <button onclick="document.getElementById('no-dismiss-modal').close()">Confirm</button>
-      </div>
-    </snice-modal>
-  </div>
-
-  <div class="section">
-    <h3>Form Modal with Focus Trap</h3>
-    <div class="button-group">
-      <button onclick="document.getElementById('form-modal').show()">Open Form</button>
-    </div>
-    
-    <snice-modal id="form-modal" label="User Form">
-      <h2 slot="header">User Information</h2>
-      <form onsubmit="event.preventDefault(); alert('Form submitted!'); document.getElementById('form-modal').close();">
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="name" required>
-        
-        <label for="email">Email:</label>
-        <input type="email" id="email" name="email" required>
-        
-        <label for="message">Message:</label>
-        <textarea id="message" name="message" rows="4"></textarea>
-        
-        <div slot="footer">
-          <button type="button" class="secondary" onclick="document.getElementById('form-modal').close()">Cancel</button>
-          <button type="submit">Submit</button>
-        </div>
-      </form>
-    </snice-modal>
-  </div>
-
-  <div class="section">
-    <h3>Scrollable Content</h3>
-    <div class="button-group">
-      <button onclick="document.getElementById('scroll-modal').show()">Open Scrollable Modal</button>
-    </div>
-    
-    <snice-modal id="scroll-modal" label="Terms and Conditions">
-      <h2 slot="header">Terms and Conditions</h2>
-      <h3>1. Introduction</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      
-      <h3>2. Terms of Use</h3>
-      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      
-      <h3>3. Privacy Policy</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      
-      <h3>4. Disclaimers</h3>
-      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      
-      <h3>5. Contact Information</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-      
-      <div slot="footer">
-        <button class="secondary" onclick="document.getElementById('scroll-modal').close()">Decline</button>
-        <button onclick="document.getElementById('scroll-modal').close()">Accept</button>
-      </div>
-    </snice-modal>
-  </div>
-
-  <div class="section">
-    <h3>Nested Modals</h3>
-    <div class="button-group">
-      <button onclick="document.getElementById('parent-modal').show()">Open Parent Modal</button>
-    </div>
-    
-    <snice-modal id="parent-modal" label="Parent Modal">
-      <h2 slot="header">Parent Modal</h2>
-      <p>This modal can open another modal.</p>
-      <button onclick="document.getElementById('child-modal').show()">Open Child Modal</button>
-      <div slot="footer">
-        <button onclick="document.getElementById('parent-modal').close()">Close</button>
-      </div>
-    </snice-modal>
-    
-    <snice-modal id="child-modal" label="Child Modal">
-      <h2 slot="header">Child Modal</h2>
-      <p>This is a nested modal on top of the parent.</p>
-      <div slot="footer">
-        <button onclick="document.getElementById('child-modal').close()">Close Child</button>
-      </div>
-    </snice-modal>
-  </div>
-
-  <div class="long-content">
-    <h3>Scroll Test Area</h3>
-    <p>This area is here to test that body scroll is locked when a modal is open.</p>
-    <p>Try opening a modal and then attempting to scroll the page.</p>
-  </div>
-
-  <script type="module">
-    import './snice-modal.ts';
-    
-    // Listen for modal events
-    document.addEventListener('@snice/modal-open', (e) => {
-      console.log('Modal opened:', e.detail.modal);
-    });
-    
-    document.addEventListener('@snice/modal-close', (e) => {
-      console.log('Modal closed:', e.detail.modal);
-    });
-  </script>
-</body>
-</html>