@reliability-design/web 1.0.3 → 1.1.1

package/dist/components/rel-pagination/rel-pagination.ts

@@ -0,0 +1,381 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+type DensityType = "comfortable" | "compact";
+type VariantType = "default" | "icons";
+type PageItem = { type: "page"; value: number } | { type: "ellipsis" } | { type: "prev" } | { type: "next" };
+
+@customElement("rel-pagination")
+export class RelPagination extends LitElement {
+  @property({ type: Number }) page?: number;
+  @property({ type: Number }) defaultPage = 1;
+  @property({ type: Number }) totalPages = 0;
+  @property({ type: Number }) siblingCount = 1;
+  @property({ type: Number }) boundaryCount = 1;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) density: DensityType = "comfortable";
+  @property({ type: String }) variant: VariantType = "default";
+  @property({ type: String }) hrefTemplate = "";
+  @property({ type: String }) ariaLabel = "Pagination";
+
+  @state() private currentPage = 1;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    nav.compact {
+      gap: var(--rel-spacing-space-3xs);
+    }
+
+    button,
+    a {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 40px;
+      height: 40px;
+      padding: 0 var(--rel-spacing-space-sm);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      background: var(--rel-colors-white);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      text-decoration: none;
+      outline: none;
+      user-select: none;
+    }
+
+    nav.compact button,
+    nav.compact a {
+      min-width: 32px;
+      height: 32px;
+      padding: 0 var(--rel-spacing-space-xs);
+      font-size: var(--rel-fontSizes-xs);
+    }
+
+    button:hover:not(:disabled),
+    a:hover:not([aria-disabled="true"]) {
+      background: var(--rel-surface-secondary, #fafafa);
+      border-color: var(--rel-colors-gray-primary, #333);
+    }
+
+    button:focus-visible,
+    a:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    button:disabled,
+    a[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    button[aria-current="page"],
+    a[aria-current="page"] {
+      background: var(--rel-color-bg-selected);
+      color: var(--rel-color-text-primary);
+      border-color: var(--rel-colors-gray-heading);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    button[aria-current="page"]:hover,
+    a[aria-current="page"]:hover {
+      background: var(--rel-colors-gray-primary);
+      border-color: var(--rel-colors-gray-primary);
+    }
+
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 40px;
+      height: 40px;
+      color: var(--rel-colors-gray-placeholder);
+      font-size: var(--rel-fontSizes-sm);
+      user-select: none;
+    }
+
+    nav.compact .ellipsis {
+      min-width: 32px;
+      height: 32px;
+      font-size: var(--rel-fontSizes-xs);
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+    }
+
+    nav.compact .icon {
+      width: 14px;
+      height: 14px;
+    }
+
+    :host([disabled]) nav {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.currentPage = this.page ?? this.defaultPage;
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    // Handle controlled mode: sync currentPage with page prop
+    if (changedProperties.has("page") && this.page !== undefined) {
+      this.currentPage = this.page;
+    }
+  }
+
+  private get activePage(): number {
+    return this.page ?? this.currentPage;
+  }
+
+  private generatePageItems(): PageItem[] {
+    const items: PageItem[] = [];
+    const current = this.activePage;
+    const total = this.totalPages;
+    const sibling = this.siblingCount;
+    const boundary = this.boundaryCount;
+
+    items.push({ type: "prev" });
+
+    // Calculate page ranges
+    const leftBoundary = Array.from({ length: Math.min(boundary, total) }, (_, i) => i + 1);
+    const rightBoundary = Array.from(
+      { length: Math.min(boundary, total) },
+      (_, i) => total - boundary + i + 1
+    ).filter((p) => p > 0);
+
+    const leftSiblings = Array.from(
+      { length: sibling },
+      (_, i) => current - sibling + i
+    ).filter((p) => p > boundary && p < current);
+
+    const rightSiblings = Array.from(
+      { length: sibling },
+      (_, i) => current + i + 1
+    ).filter((p) => p > current && p <= total - boundary);
+
+    // Combine all visible pages
+    const visiblePages = new Set([
+      ...leftBoundary,
+      ...leftSiblings,
+      current,
+      ...rightSiblings,
+      ...rightBoundary,
+    ]);
+
+    const sortedPages = Array.from(visiblePages).sort((a, b) => a - b);
+
+    // Build items with ellipsis
+    sortedPages.forEach((page, index) => {
+      if (index > 0) {
+        const prevPage = sortedPages[index - 1];
+        if (page - prevPage > 1) {
+          items.push({ type: "ellipsis" });
+        }
+      }
+      items.push({ type: "page", value: page });
+    });
+
+    items.push({ type: "next" });
+
+    return items;
+  }
+
+  private handlePageChange(newPage: number) {
+    if (this.disabled || newPage < 1 || newPage > this.totalPages || newPage === this.activePage) {
+      return;
+    }
+
+    // If uncontrolled, update internal state
+    if (this.page === undefined) {
+      this.currentPage = newPage;
+    }
+
+    // Always emit event
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: { page: newPage },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private getHref(page: number): string {
+    if (!this.hrefTemplate) return "#";
+    return this.hrefTemplate.replace(/\{page\}/, String(page));
+  }
+
+  private handleKeyDown(event: KeyboardEvent, callback: () => void) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      callback();
+    }
+  }
+
+  private renderPrevIcon() {
+    return html`
+      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
+    `;
+  }
+
+  private renderNextIcon() {
+    return html`
+      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    `;
+  }
+
+  private renderItem(item: PageItem) {
+    const current = this.activePage;
+    const useLinks = !!this.hrefTemplate;
+
+    if (item.type === "ellipsis") {
+      return html`<span class="ellipsis">…</span>`;
+    }
+
+    if (item.type === "prev") {
+      const disabled = current === 1 || this.disabled;
+      const targetPage = current - 1;
+
+      if (useLinks) {
+        const href = disabled ? "#" : this.getHref(targetPage);
+        return html`
+          <a
+            href="${href}"
+            aria-label="Go to previous page"
+            aria-disabled="${disabled}"
+            @click="${(e: Event) => {
+              if (disabled) {
+                e.preventDefault();
+                return;
+              }
+              e.preventDefault();
+              this.handlePageChange(targetPage);
+            }}"
+          >
+            ${this.variant === "icons" ? this.renderPrevIcon() : "Previous"}
+          </a>
+        `;
+      }
+
+      return html`
+        <button
+          type="button"
+          aria-label="Go to previous page"
+          ?disabled="${disabled}"
+          @click="${() => this.handlePageChange(targetPage)}"
+        >
+          ${this.variant === "icons" ? this.renderPrevIcon() : "Previous"}
+        </button>
+      `;
+    }
+
+    if (item.type === "next") {
+      const disabled = current === this.totalPages || this.disabled;
+      const targetPage = current + 1;
+
+      if (useLinks) {
+        const href = disabled ? "#" : this.getHref(targetPage);
+        return html`
+          <a
+            href="${href}"
+            aria-label="Go to next page"
+            aria-disabled="${disabled}"
+            @click="${(e: Event) => {
+              if (disabled) {
+                e.preventDefault();
+                return;
+              }
+              e.preventDefault();
+              this.handlePageChange(targetPage);
+            }}"
+          >
+            ${this.variant === "icons" ? this.renderNextIcon() : "Next"}
+          </a>
+        `;
+      }
+
+      return html`
+        <button
+          type="button"
+          aria-label="Go to next page"
+          ?disabled="${disabled}"
+          @click="${() => this.handlePageChange(targetPage)}"
+        >
+          ${this.variant === "icons" ? this.renderNextIcon() : "Next"}
+        </button>
+      `;
+    }
+
+    // Page item
+    const pageNum = item.value;
+    const isCurrent = pageNum === current;
+
+    if (useLinks) {
+      const href = this.getHref(pageNum);
+      return html`
+        <a
+          href="${href}"
+          aria-label="Go to page ${pageNum}"
+          aria-current="${isCurrent ? "page" : "false"}"
+          @click="${(e: Event) => {
+            e.preventDefault();
+            this.handlePageChange(pageNum);
+          }}"
+        >
+          ${pageNum}
+        </a>
+      `;
+    }
+
+    return html`
+      <button
+        type="button"
+        aria-label="Go to page ${pageNum}"
+        aria-current="${isCurrent ? "page" : "false"}"
+        @click="${() => this.handlePageChange(pageNum)}"
+      >
+        ${pageNum}
+      </button>
+    `;
+  }
+
+  render() {
+    const items = this.generatePageItems();
+
+    return html`
+      <nav
+        class="${this.density === "compact" ? "compact" : ""}"
+        aria-label="${this.ariaLabel}"
+        role="navigation"
+      >
+        ${items.map((item) => this.renderItem(item))}
+      </nav>
+    `;
+  }
+}