@kubex/zinc 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/data-table/data-table.component.ts

@@ -4,10 +4,11 @@ import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, state} from 'lit/decorators.js';
 import {ref} from "lit/directives/ref.js";
-import {styleMap} from "lit/directives/style-map.js";
 import {renderSortIcon, sortKeyHandler} from "../../internal/table-sort";
 import {ReorderController} from "../../internal/reorder";
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {slideTabIndicator, squishTabIndicator} from "../../internal/tab-indicator";
+import {styleMap} from "lit/directives/style-map.js";
 import {type TableTab, TabRowController} from "../../internal/table-tabs";
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
@@ -24,18 +25,18 @@ import ZnDataTableSearch from "../data-table-search";
 import ZnDropdown from "../dropdown";
 import ZnEmptyState from "../empty-state";
 import ZnHoverContainer from "../hover-container";
+import ZnIcon from "../icon";
+import ZnInput from "../input";
 import ZnMenu from "../menu";
 import ZnMenuItem from "../menu-item";
+import ZnOptGroup from "../opt-group";
+import ZnOption from "../option";
 import ZnPanel from "../panel";
+import ZnSelect from "../select";
 import ZnSkeleton from "../skeleton";
 import ZnStyle from "../style";
 import type ZnDataSelect from "../data-select";
-import ZnIcon from "../icon";
-import ZnInput from "../input";
-import ZnOptGroup from "../opt-group";
-import ZnOption from "../option";
 import type ZnQueryBuilder from "../query-builder";
-import ZnSelect from "../select";
 
 // Tables load in such a way that the global sheet has to be re-applied inside the shadow root.
 import bootStyles from '../../../scss/boot.scss';
@@ -920,6 +921,34 @@ export default class ZnDataTable extends ZincElement {
   protected updated(changed: PropertyValues) {
     super.updated(changed);
     this.publishFilterSuggestions();
+    void this.syncPageIndicator();
+  }
+
+  // Slides the shared active-page pill to the current page the way navbar pill tabs do
+  private async syncPageIndicator() {
+    const indicator = this.shadowRoot?.querySelector<HTMLElement>('.table__footer__indicator');
+    const active = indicator?.parentElement?.querySelector<ZnButton>('.table__footer__page--active');
+    if (!indicator || !active) return;
+
+    // The button has no size until it has rendered
+    await active.updateComplete;
+    if (!active.isConnected || !active.classList.contains('table__footer__page--active')) return;
+
+    const origin = indicator.parentElement!.getBoundingClientRect().left;
+    const tab = active.getBoundingClientRect();
+    const target = {left: tab.left - origin, right: tab.right - origin};
+    const left = `${target.left}px`; const width = `${target.right - target.left}px`;
+    if (indicator.style.left === left && indicator.style.width === width) return;
+
+    // A freshly rendered indicator has no width yet and jumps straight into place
+    const placed = indicator.style.width !== '';
+    const drawn = indicator.getBoundingClientRect();
+    indicator.style.left = left;
+    indicator.style.width = width;
+    if (placed) {
+      squishTabIndicator(indicator);
+      slideTabIndicator(indicator, {left: drawn.left - origin, right: drawn.right - origin}, target);
+    }
   }
 
   // The filter bar can't see the data, so hand it the values already on screen to type against
@@ -1459,28 +1488,26 @@ export default class ZnDataTable extends ZincElement {
       </div>`;
   }
 
-  // A window of PAGE_WINDOW pages around the current one, plus the first and last pages;
-  // null marks a gap, except a gap of one page, which shows that page instead
+  // A window of PAGE_WINDOW pages around the current one, plus the first and last pages; null marks a gap.
+  // Always PAGE_WINDOW + 4 slots once there are that many pages, so the prev/next buttons never move.
   private getPageRange(): (number | null)[] {
-    const size = Math.min(PAGE_WINDOW, this.totalPages);
-    const start = Math.min(
-      Math.max(1, this.page - Math.floor(size / 2)),
-      this.totalPages - size + 1
-    );
-    const pages = [...new Set([1, ...Array.from({length: size}, (_, i) => start + i), this.totalPages])];
-
-    return pages.flatMap((p, i) => {
-      const gap = i > 0 ? p - pages[i - 1] : 1;
-      if (gap === 2) return [p - 1, p];
-      return gap > 2 ? [null, p] : [p];
-    });
+    const n = this.totalPages;
+    const slots = PAGE_WINDOW + 4;
+    const range = (from: number, count: number) => Array.from({length: count}, (_, i) => from + i);
+    if (n <= slots) return range(1, n);
+
+    const half = Math.floor(PAGE_WINDOW / 2);
+    if (this.page - half <= 3) return [...range(1, slots - 2), null, n];
+    if (this.page + half >= n - 2) return [1, null, ...range(n - slots + 3, slots - 2)];
+    return [1, null, ...range(this.page - half, PAGE_WINDOW), null, n];
   }
 
   getPagination() {
     if (this.hidePagination || this.totalPages <= 1) return null;
 
     return html`
-      <div class="table__footer__pages">
+      <div class="table__footer__pages" style="--page-digits: ${String(this.totalPages).length}">
+        <span class="table__footer__indicator"></span>
         <zn-button class="table__footer__page"
                    color="transparent"
                    size="small"

package/src/components/data-table/data-table.scss

@@ -311,7 +311,9 @@ table {
       padding: 0;
     }
 
+    // Equal shares either side keep the page buttons centred however wide the range label gets
     &__left, &__rows-per-page {
+      flex: 1 1 0;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -320,14 +322,33 @@ table {
     }
 
     &__pages {
+      // Every slot sized for the widest page number, so buttons don't resize as the window slides
+      --page-slot: max(var(--zn-button-height-small, 28px), calc(var(--page-digits, 1) * 1ch + 12px));
+
+      position: relative;
+      isolation: isolate;
       display: flex;
       align-items: center;
       gap: 2px;
       margin-inline: auto;
     }
 
+    // Placed by left and width, slid with transform only
+    &__indicator {
+      @include wc.pill-tab-indicator-motion;
+
+      position: absolute;
+      inset-block: 0;
+      left: 0;
+      z-index: -1;
+      transform-origin: left center;
+      border-radius: var(--zn-border-radius);
+      background-color: var(--zn-table-page-active-background, var(--zn-color-neutral-300));
+      pointer-events: none;
+    }
+
     &__rows-per-page {
-      margin-inline-start: auto;
+      justify-content: flex-end;
 
       zn-select[name="rowPerPage"] {
         --zn-input-background-color: rgb(var(--zn-panel));
@@ -346,13 +367,10 @@ table {
       }
     }
 
-    &__pages + &__rows-per-page {
-      margin-inline-start: 0;
-    }
-
     &__page::part(base) {
-      min-width: var(--zn-button-height-small, 28px);
+      min-width: var(--page-slot);
       padding: 0 5px;
+      font-variant-numeric: tabular-nums;
       justify-content: center;
       color: rgb(var(--zn-color-muted-text, var(--zn-text)));
       font-size: 12px;
@@ -360,14 +378,14 @@ table {
     }
 
     &__page--active::part(base) {
-      background-color: var(--zn-table-page-active-background, var(--zn-color-neutral-300));
+      background-color: transparent;
       color: var(--zn-table-page-active-color, rgb(var(--zn-text)));
     }
 
     &__gap {
       display: inline-flex;
       justify-content: center;
-      min-width: var(--zn-button-height-small, 28px);
+      min-width: var(--page-slot);
       font-weight: var(--zn-font-weight-semibold, 600);
     }
   }
@@ -529,6 +547,9 @@ zn-style.zn-muted {
 
 .table tr .table__head--reorderable {
   cursor: grab;
+  // A press here is a drag; starting a text selection would sweep it across the table
+  user-select: none;
+  -webkit-user-select: none;
 
   &:active {
     cursor: grabbing;

package/src/components/data-table/data-table.test.ts

@@ -1,9 +1,17 @@
 import '../../../dist/zn.min.js';
+import { centre, dragTo, drop, startDrag } from '../../internal/test-drag';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { centre, drop, dragTo, startDrag } from '../../internal/test-drag';
 import { render } from 'lit';
 import type ZnDataTable from './data-table.component';
 
+// WebKit reports a benign "ResizeObserver loop" error when paging re-lays out the footer's zn-select
+window.addEventListener('error', (e: ErrorEvent) => {
+  if (typeof e.message === 'string' && e.message.includes('ResizeObserver loop')) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true);
+
 describe('<zn-data-table>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-data-table></zn-data-table> `);
@@ -67,6 +75,51 @@ describe('<zn-data-table>', () => {
     }
   });
 
+  it('renders the same number of page slots on every page', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = (_url, init) => {
+      const {page} = JSON.parse(String(init!.body)) as {page: number};
+      return Promise.resolve(new Response(JSON.stringify({
+        rows: [{id: '1', cells: [{text: 'Row', column: 'name'}]}],
+        page,
+        perPage: 10,
+        total: 1234,
+      }), {status: 200, headers: {'Content-Type': 'application/json'}}));
+    };
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" method="POST" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      const slots = () => [...el.shadowRoot!.querySelectorAll('.table__footer__page, .table__footer__gap')]
+        .slice(1, -1).map(s => s.textContent!.trim()).join(',');
+
+      const seen: Record<number, string> = {};
+      for (const page of [1, 4, 5, 60, 120, 121, 124]) {
+        (el as unknown as {goToPage: (p: number) => void}).goToPage(page);
+        await waitUntil(() => el.shadowRoot!.querySelector('[aria-current="page"]')?.textContent?.trim() === String(page));
+        seen[page] = slots();
+      }
+
+      expect(seen).to.deep.equal({
+        1: '1,2,3,4,5,…,124',
+        4: '1,2,3,4,5,…,124',
+        5: '1,…,4,5,6,…,124',
+        60: '1,…,59,60,61,…,124',
+        120: '1,…,119,120,121,…,124',
+        121: '1,…,120,121,122,123,124',
+        124: '1,…,120,121,122,123,124',
+      });
+
+      const indicator = el.shadowRoot!.querySelector<HTMLElement>('.table__footer__indicator')!;
+      const active = el.shadowRoot!.querySelector<HTMLElement>('.table__footer__page--active')!;
+      await waitUntil(() => indicator.getAnimations().length === 0);
+      expect(Math.round(indicator.getBoundingClientRect().left)).to.equal(Math.round(active.getBoundingClientRect().left));
+      expect(Math.round(indicator.getBoundingClientRect().width)).to.equal(Math.round(active.getBoundingClientRect().width));
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
   it('hides the rows-per-page selector when the dataset fits the smallest page size', async () => {
     const originalFetch = window.fetch;
     window.fetch = () => Promise.resolve(new Response(JSON.stringify({

package/src/internal/reorder.ts

@@ -99,6 +99,7 @@ export class ReorderController implements ReactiveController {
   private shield: HTMLElement | null = null;
   private scroller: Element | null = null;
   private scrollFrame = 0;
+  private pressRoot: Node | null = null;
 
   constructor(host: ReorderHost, options: ReorderOptions = {}) {
     this.host = host;
@@ -204,7 +205,11 @@ export class ReorderController implements ReactiveController {
     window.addEventListener('pointercancel', this.onPointerCancel, true);
     window.addEventListener('touchmove', this.onTouchMove, {capture: true, passive: false});
     // A link or image in the row would otherwise start a native drag and take the pointer
-    window.addEventListener('dragstart', this.onNativeDragStart, true);
+    window.addEventListener('dragstart', this.cancel, true);
+    // The press would otherwise also start a text selection that sweeps the page as it drags; selectstart isn't
+    // composed, so it's caught in the row's own tree
+    this.pressRoot = this.host.reorderRow(key)!.getRootNode();
+    this.pressRoot.addEventListener('selectstart', this.cancel, true);
   }
 
   private onPointerMove = (event: PointerEvent) => {
@@ -246,7 +251,7 @@ export class ReorderController implements ReactiveController {
     if (this.isDragging) event.preventDefault();
   };
 
-  private onNativeDragStart = (event: DragEvent) => {
+  private cancel = (event: Event) => {
     event.preventDefault();
   };
 
@@ -463,7 +468,9 @@ export class ReorderController implements ReactiveController {
     window.removeEventListener('pointerup', this.onPointerUp, true);
     window.removeEventListener('pointercancel', this.onPointerCancel, true);
     window.removeEventListener('touchmove', this.onTouchMove, true);
-    window.removeEventListener('dragstart', this.onNativeDragStart, true);
+    window.removeEventListener('dragstart', this.cancel, true);
+    this.pressRoot?.removeEventListener('selectstart', this.cancel, true);
+    this.pressRoot = null;
   }
 
   /** Shows the new order, sliding each row from its old position. */