snice 2.1.5 → 2.2.1

package/components/pagination/snice-pagination.ts

@@ -1,333 +0,0 @@
-import { element, property, on, dispatch, watch, ready } from 'snice';
-
-@element('snice-pagination')
-export class SnicePagination extends HTMLElement {
-  @property({ type: Number, reflect: true })
-  current = 1;
-  
-  @property({ type: Number, reflect: true }) 
-  total = 1;
-  
-  @property({ type: Number, reflect: true })
-  siblings = 1;
-  
-  @property({ type: Boolean, reflect: true })
-  showFirst = true;
-  
-  @property({ type: Boolean, reflect: true })
-  showLast = true;
-  
-  @property({ type: Boolean, reflect: true })
-  showPrev = true;
-  
-  @property({ type: Boolean, reflect: true })
-  showNext = true;
-  
-  @property({ reflect: true })
-  size: 'small' | 'medium' | 'large' = 'medium';
-  
-  @property({ reflect: true })
-  variant: 'default' | 'rounded' | 'text' = 'default';
-
-  html() {
-    const pages = this.getPageNumbers();
-    
-    return /*html*/`
-      <nav class="pagination" aria-label="Pagination">
-        ${this.showFirst ? /*html*/`
-          <button 
-            class="pagination-button pagination-first" 
-            ${this.current === 1 ? 'disabled' : ''}
-            aria-label="First page">
-            <svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M11 12L7 8L11 4M5 4V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            </svg>
-          </button>
-        ` : ''}
-        
-        ${this.showPrev ? /*html*/`
-          <button 
-            class="pagination-button pagination-prev" 
-            ${this.current === 1 ? 'disabled' : ''}
-            aria-label="Previous page">
-            <svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            </svg>
-          </button>
-        ` : ''}
-        
-        <div class="pagination-pages">
-          ${pages.map(page => 
-            page === '...' 
-              ? /*html*/`<span class="pagination-ellipsis">...</span>`
-              : /*html*/`
-                  <button 
-                    class="pagination-button pagination-page ${page === this.current ? 'active' : ''}"
-                    data-page="${page}"
-                    aria-label="Page ${page}"
-                    ${page === this.current ? 'aria-current="page"' : ''}>
-                    ${page}
-                  </button>
-                `
-          ).join('')}
-        </div>
-        
-        ${this.showNext ? /*html*/`
-          <button 
-            class="pagination-button pagination-next" 
-            ${this.current === this.total ? 'disabled' : ''}
-            aria-label="Next page">
-            <svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            </svg>
-          </button>
-        ` : ''}
-        
-        ${this.showLast ? /*html*/`
-          <button 
-            class="pagination-button pagination-last" 
-            ${this.current === this.total ? 'disabled' : ''}
-            aria-label="Last page">
-            <svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M5 12L9 8L5 4M11 4V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            </svg>
-          </button>
-        ` : ''}
-      </nav>
-    `;
-  }
-
-  css() {
-    return /*css*/`
-      :host {
-        display: inline-block;
-        --pagination-gap: 4px;
-        --pagination-button-size: 32px;
-        --pagination-button-padding: 8px;
-        --pagination-font-size: 14px;
-        --pagination-border-radius: 4px;
-      }
-      
-      :host([size="small"]) {
-        --pagination-button-size: 28px;
-        --pagination-button-padding: 6px;
-        --pagination-font-size: 12px;
-      }
-      
-      :host([size="large"]) {
-        --pagination-button-size: 40px;
-        --pagination-button-padding: 10px;
-        --pagination-font-size: 16px;
-      }
-      
-      :host([variant="rounded"]) {
-        --pagination-border-radius: 50%;
-      }
-      
-      .pagination {
-        display: flex;
-        align-items: center;
-        gap: var(--pagination-gap);
-      }
-      
-      .pagination-pages {
-        display: flex;
-        align-items: center;
-        gap: var(--pagination-gap);
-      }
-      
-      .pagination-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: var(--pagination-button-size);
-        height: var(--pagination-button-size);
-        padding: 0 var(--pagination-button-padding);
-        background: white;
-        border: 1px solid #e5e7eb;
-        border-radius: var(--pagination-border-radius);
-        color: #374151;
-        font-size: var(--pagination-font-size);
-        cursor: pointer;
-        transition: all 0.2s;
-        font-family: inherit;
-      }
-      
-      :host([variant="text"]) .pagination-button {
-        background: transparent;
-        border: none;
-      }
-      
-      .pagination-button:hover:not(:disabled) {
-        background: #f3f4f6;
-        border-color: #d1d5db;
-      }
-      
-      :host([variant="text"]) .pagination-button:hover:not(:disabled) {
-        background: #f3f4f6;
-      }
-      
-      .pagination-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      
-      .pagination-button.active {
-        background: #3b82f6;
-        border-color: #3b82f6;
-        color: white;
-      }
-      
-      .pagination-button.active:hover {
-        background: #2563eb;
-        border-color: #2563eb;
-      }
-      
-      .pagination-ellipsis {
-        padding: 0 8px;
-        color: #6b7280;
-        font-size: var(--pagination-font-size);
-      }
-      
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    `;
-  }
-  
-  private getPageNumbers(): (number | string)[] {
-    const pages: (number | string)[] = [];
-    const totalNumbers = this.siblings * 2 + 3;
-    const totalBlocks = totalNumbers + 2;
-    
-    if (this.total <= totalBlocks) {
-      // Show all pages
-      for (let i = 1; i <= this.total; i++) {
-        pages.push(i);
-      }
-    } else {
-      const startPage = Math.max(2, this.current - this.siblings);
-      const endPage = Math.min(this.total - 1, this.current + this.siblings);
-      
-      // Always show first page
-      pages.push(1);
-      
-      // Add ellipsis if needed
-      if (startPage > 2) {
-        pages.push('...');
-      }
-      
-      // Add middle pages
-      for (let i = startPage; i <= endPage; i++) {
-        pages.push(i);
-      }
-      
-      // Add ellipsis if needed
-      if (endPage < this.total - 1) {
-        pages.push('...');
-      }
-      
-      // Always show last page
-      pages.push(this.total);
-    }
-    
-    return pages;
-  }
-  
-  @on('click', '.pagination-first')
-  handleFirst() {
-    if (this.current !== 1) {
-      this.changePage(1);
-    }
-  }
-  
-  @on('click', '.pagination-prev')
-  handlePrev() {
-    if (this.current > 1) {
-      this.changePage(this.current - 1);
-    }
-  }
-  
-  @on('click', '.pagination-next')
-  handleNext() {
-    if (this.current < this.total) {
-      this.changePage(this.current + 1);
-    }
-  }
-  
-  @on('click', '.pagination-last')
-  handleLast() {
-    if (this.current !== this.total) {
-      this.changePage(this.total);
-    }
-  }
-  
-  @on('click', '.pagination-page')
-  handlePageClick(event: Event) {
-    const target = event.target as HTMLElement;
-    const button = target.closest('.pagination-page') as HTMLButtonElement;
-    if (button) {
-      const pageAttr = button.getAttribute('data-page');
-      if (pageAttr) {
-        const page = parseInt(pageAttr);
-        if (page !== this.current) {
-          this.changePage(page);
-        }
-      }
-    }
-  }
-  
-  @dispatch('@snice/pagination-change', { bubbles: true, composed: true })
-  private changePage(page: number) {
-    const oldPage = this.current;
-    this.current = page;
-    // Force a re-render by updating the shadow DOM
-    this.updateView();
-    return { 
-      page: this.current, 
-      previousPage: oldPage
-    };
-  }
-  
-  private updateView() {
-    // Update the shadow DOM with new HTML
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = `
-        <style>${this.css()}</style>
-        ${this.html()}
-      `;
-    }
-  }
-  
-  // Public API
-  goToPage(page: number) {
-    if (page >= 1 && page <= this.total && page !== this.current) {
-      this.changePage(page);
-    }
-  }
-  
-  nextPage() {
-    if (this.current < this.total) {
-      this.changePage(this.current + 1);
-    }
-  }
-  
-  previousPage() {
-    if (this.current > 1) {
-      this.changePage(this.current - 1);
-    }
-  }
-  
-  firstPage() {
-    if (this.current !== 1) {
-      this.changePage(1);
-    }
-  }
-  
-  lastPage() {
-    if (this.current !== this.total) {
-      this.changePage(this.total);
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-export type PaginationSize = 'small' | 'medium' | 'large';
-export type PaginationVariant = 'default' | 'rounded' | 'text';
-
-export interface SnicePaginationElement extends HTMLElement {
-  current: number;
-  total: number;
-  siblings: number;
-  showFirst: boolean;
-  showLast: boolean;
-  showPrev: boolean;
-  showNext: boolean;
-  size: PaginationSize;
-  variant: PaginationVariant;
-  
-  // Methods
-  goToPage(page: number): void;
-  nextPage(): void;
-  previousPage(): void;
-  firstPage(): void;
-  lastPage(): void;
-}