@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/data-table/README.md

@@ -1,330 +0,0 @@
-# Data Table
-
-Advanced table component with sorting, filtering, column visibility, row selection, and pagination.
-
-## Usage
-
-```html
-<div sc-data-table [data]="data" [columns]="columns">
-  <input sc-data-table-filter placeholder="Search..." />
-  <div sc-data-table-column-toggle></div>
-
-  <table>
-    <thead sc-data-table-header>
-      <tr>
-        <th sc-data-table-head columnId="name" [sortable]="true">Name</th>
-        <th sc-data-table-head columnId="email" [sortable]="true">Email</th>
-      </tr>
-    </thead>
-    <tbody sc-data-table-body>
-      @for (row of data; track row.id) {
-      <tr sc-data-table-row>
-        <td sc-data-table-cell>{{ row.name }}</td>
-        <td sc-data-table-cell>{{ row.email }}</td>
-      </tr>
-      }
-    </tbody>
-  </table>
-
-  <div sc-data-table-pagination></div>
-</div>
-```
-
-## Components
-
-### ScDataTable
-
-Root container that manages table state and provides context.
-
-**Selector:** `[sc-data-table]`
-
-**Inputs:**
-
-| Input     | Type             | Default | Description        |
-| --------- | ---------------- | ------- | ------------------ |
-| `data`    | `T[]`            | `[]`    | Data array         |
-| `columns` | `ColumnDef<T>[]` | `[]`    | Column definitions |
-| `class`   | `string`         | `''`    | Additional CSS     |
-
-**Two-way Bindings:**
-
-| Binding            | Type                    | Default     | Description           |
-| ------------------ | ----------------------- | ----------- | --------------------- |
-| `sorting`          | `SortingState \| null`  | `null`      | Current sort state    |
-| `columnVisibility` | `ColumnVisibilityState` | `{}`        | Column visibility map |
-| `globalFilter`     | `string`                | `''`        | Global filter value   |
-| `rowSelection`     | `Set<number>`           | `new Set()` | Selected row indices  |
-
-**Outputs:**
-
-| Output         | Type                   | Description            |
-| -------------- | ---------------------- | ---------------------- |
-| `sortChange`   | `SortingState \| null` | Emits on sort change   |
-| `filterChange` | `string`               | Emits on filter change |
-
-**Computed Properties:**
-
-- `visibleColumns` - Columns filtered by visibility
-- `filteredData` - Data filtered by global filter
-- `sortedData` - Data sorted by current sort state
-
-### ScDataTableHeader
-
-Table header container.
-
-**Selector:** `[sc-data-table-header]`
-
-### ScDataTableBody
-
-Table body container.
-
-**Selector:** `[sc-data-table-body]`
-
-### ScDataTableRow
-
-Table row with selection state.
-
-**Selector:** `[sc-data-table-row]`
-
-**Inputs:**
-
-| Input      | Type      | Default | Description     |
-| ---------- | --------- | ------- | --------------- |
-| `selected` | `boolean` | `false` | Selection state |
-| `class`    | `string`  | `''`    | Additional CSS  |
-
-### ScDataTableHead
-
-Table header cell with optional sorting.
-
-**Selector:** `[sc-data-table-head]`
-
-**Inputs:**
-
-| Input      | Type      | Default | Description           |
-| ---------- | --------- | ------- | --------------------- |
-| `columnId` | `string`  | `''`    | Column ID for sorting |
-| `sortable` | `boolean` | `false` | Enable sorting        |
-| `class`    | `string`  | `''`    | Additional CSS        |
-
-### ScDataTableCell
-
-Table data cell.
-
-**Selector:** `[sc-data-table-cell]`
-
-### ScDataTableFilter
-
-Global filter input.
-
-**Selector:** `input[sc-data-table-filter]`
-
-**Inputs:**
-
-| Input         | Type     | Default       | Description       |
-| ------------- | -------- | ------------- | ----------------- |
-| `placeholder` | `string` | `'Filter...'` | Input placeholder |
-| `class`       | `string` | `''`          | Additional CSS    |
-
-### ScDataTableColumnToggle
-
-Dropdown to toggle column visibility.
-
-**Selector:** `[sc-data-table-column-toggle]`
-
-### ScDataTablePagination
-
-Pagination controls with page size selector.
-
-**Selector:** `[sc-data-table-pagination]`
-
-**Inputs:**
-
-| Input           | Type       | Default                | Description          |
-| --------------- | ---------- | ---------------------- | -------------------- |
-| `pageSizes`     | `number[]` | `[10, 20, 30, 40, 50]` | Page size options    |
-| `showSelection` | `boolean`  | `true`                 | Show selection count |
-| `class`         | `string`   | `''`                   | Additional CSS       |
-
-**Two-way Bindings:**
-
-| Binding       | Type     | Default | Description    |
-| ------------- | -------- | ------- | -------------- |
-| `pageSize`    | `number` | `10`    | Items per page |
-| `currentPage` | `number` | `1`     | Current page   |
-
-## Types
-
-### ColumnDef<T>
-
-```typescript
-interface ColumnDef<T> {
-  id: string;
-  header: string;
-  accessorKey?: keyof T;
-  accessorFn?: (row: T) => unknown;
-  cell?: (row: T) => string;
-  enableSorting?: boolean;
-  enableHiding?: boolean;
-  sortingFn?: (a: T, b: T, direction: SortDirection) => number;
-}
-```
-
-### SortingState
-
-```typescript
-interface SortingState {
-  id: string;
-  desc: boolean;
-}
-```
-
-### ColumnVisibilityState
-
-```typescript
-interface ColumnVisibilityState {
-  [columnId: string]: boolean;
-}
-```
-
-## Examples
-
-### Basic Table
-
-```html
-<div sc-data-table [data]="users" [columns]="columns">
-  <table>
-    <thead sc-data-table-header>
-      <tr>
-        <th sc-data-table-head>Name</th>
-        <th sc-data-table-head>Email</th>
-      </tr>
-    </thead>
-    <tbody sc-data-table-body>
-      @for (user of users; track user.id) {
-      <tr sc-data-table-row>
-        <td sc-data-table-cell>{{ user.name }}</td>
-        <td sc-data-table-cell>{{ user.email }}</td>
-      </tr>
-      }
-    </tbody>
-  </table>
-</div>
-```
-
-### With Sorting
-
-```html
-<div #table sc-data-table [data]="users" [columns]="columns">
-  <table>
-    <thead sc-data-table-header>
-      <tr>
-        <th sc-data-table-head columnId="name" [sortable]="true">Name</th>
-        <th sc-data-table-head columnId="email" [sortable]="true">Email</th>
-      </tr>
-    </thead>
-    <tbody sc-data-table-body>
-      @for (user of table.sortedData(); track user.id) {
-      <tr sc-data-table-row>
-        <td sc-data-table-cell>{{ user.name }}</td>
-        <td sc-data-table-cell>{{ user.email }}</td>
-      </tr>
-      }
-    </tbody>
-  </table>
-</div>
-```
-
-### With Filtering
-
-```html
-<div #table sc-data-table [data]="users" [columns]="columns">
-  <input sc-data-table-filter placeholder="Search users..." />
-
-  <table>
-    <thead sc-data-table-header>
-      <tr>
-        <th sc-data-table-head>Name</th>
-        <th sc-data-table-head>Email</th>
-      </tr>
-    </thead>
-    <tbody sc-data-table-body>
-      @for (user of table.filteredData(); track user.id) {
-      <tr sc-data-table-row>
-        <td sc-data-table-cell>{{ user.name }}</td>
-        <td sc-data-table-cell>{{ user.email }}</td>
-      </tr>
-      } @empty {
-      <tr>
-        <td colspan="2" class="text-center">No results found.</td>
-      </tr>
-      }
-    </tbody>
-  </table>
-</div>
-```
-
-### With Row Selection
-
-```html
-<div #table sc-data-table [data]="users" [columns]="columns">
-  <table>
-    <thead sc-data-table-header>
-      <tr>
-        <th sc-data-table-head>
-          <input type="checkbox" [checked]="table.isAllRowsSelected()" [indeterminate]="table.isSomeRowsSelected()" (change)="table.toggleAllRowSelection()" />
-        </th>
-        <th sc-data-table-head>Name</th>
-      </tr>
-    </thead>
-    <tbody sc-data-table-body>
-      @for (user of table.sortedData(); track user.id; let i = $index) {
-      <tr sc-data-table-row [selected]="table.isRowSelected(i)">
-        <td sc-data-table-cell>
-          <input type="checkbox" [checked]="table.isRowSelected(i)" (change)="table.toggleRowSelection(i)" />
-        </td>
-        <td sc-data-table-cell>{{ user.name }}</td>
-      </tr>
-      }
-    </tbody>
-  </table>
-</div>
-```
-
-### With Column Visibility
-
-```html
-<div sc-data-table [data]="users" [columns]="columns">
-  <div sc-data-table-column-toggle></div>
-  <!-- ... -->
-</div>
-```
-
-### With Pagination
-
-```html
-<div sc-data-table [data]="users" [columns]="columns">
-  <!-- ... table ... -->
-
-  <div sc-data-table-pagination [(pageSize)]="pageSize" [(currentPage)]="currentPage" [pageSizes]="[5, 10, 25, 50]"></div>
-</div>
-```
-
-## Features
-
-- **Sorting**: Click column headers to sort ascending/descending
-- **Filtering**: Global text search across all columns
-- **Column Visibility**: Show/hide columns dynamically
-- **Row Selection**: Single and bulk selection with indeterminate state
-- **Pagination**: Configurable page sizes with navigation controls
-- **Custom Rendering**: Use accessorFn for computed values, cell for custom display
-- **Custom Sorting**: Provide sortingFn for custom sort logic
-- **Generic Types**: Full TypeScript support with generic data types
-
-## Accessibility
-
-- Proper table semantics with `<table>`, `<thead>`, `<tbody>`
-- Sortable columns indicate direction with icons
-- Checkboxes have proper focus states
-- Keyboard navigation supported for interactive elements
-- Selected rows indicated with `data-selected` attribute

package/src/lib/components/data-table/data-table-body.ts

@@ -1,28 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: '[sc-data-table-body]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'data-table-body',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDataTableBody {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('[&_tr:last-child]:border-0', this.classInput()),
-  );
-}

package/src/lib/components/data-table/data-table-cell.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-data-table-cell]',
-  host: {
-    'data-slot': 'data-table-cell',
-    '[class]': 'class()',
-  },
-})
-export class ScDataTableCell {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/data-table/data-table-column-toggle.ts

@@ -1,96 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_DATA_TABLE } from './data-table';
-
-@Component({
-  selector: '[sc-data-table-column-toggle]',
-  template: `
-    <button
-      type="button"
-      class="inline-flex items-center justify-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
-      (click)="toggleOpen()"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        class="size-4"
-      >
-        <path d="M12 3v18" />
-        <rect width="8" height="4" x="8" y="8" rx="1" />
-        <path d="M2 8h2" />
-        <path d="M2 12h2" />
-        <path d="M20 8h2" />
-        <path d="M20 12h2" />
-      </svg>
-      Columns
-    </button>
-
-    @if (isOpen()) {
-      <div
-        class="absolute right-0 top-full z-50 mt-2 min-w-[150px] rounded-md border bg-popover p-2 shadow-md"
-      >
-        @for (column of table.columns(); track column.id) {
-          @if (column.enableHiding !== false) {
-            <label
-              class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent cursor-pointer"
-            >
-              <input
-                type="checkbox"
-                class="size-4 rounded border-primary"
-                [checked]="isColumnVisible(column.id)"
-                (change)="toggleColumn(column.id)"
-              />
-              {{ column.header }}
-            </label>
-          }
-        }
-      </div>
-    }
-  `,
-  host: {
-    'data-slot': 'data-table-column-toggle',
-    '[class]': 'class()',
-    '(document:click)': 'onDocumentClick($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDataTableColumnToggle {
-  readonly table = inject(SC_DATA_TABLE);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly isOpen = signal(false);
-
-  protected readonly class = computed(() => cn('relative', this.classInput()));
-
-  toggleOpen(): void {
-    this.isOpen.update((v) => !v);
-  }
-
-  isColumnVisible(columnId: string): boolean {
-    return this.table.columnVisibility()[columnId] !== false;
-  }
-
-  toggleColumn(columnId: string): void {
-    this.table.toggleColumnVisibility(columnId);
-  }
-
-  onDocumentClick(event: MouseEvent): void {
-    const target = event.target as HTMLElement;
-    if (!target.closest('[sc-data-table-column-toggle]')) {
-      this.isOpen.set(false);
-    }
-  }
-}

package/src/lib/components/data-table/data-table-filter.ts

@@ -1,45 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_DATA_TABLE } from './data-table';
-
-@Component({
-  selector: 'input[sc-data-table-filter]',
-  template: ``,
-  host: {
-    'data-slot': 'data-table-filter',
-    type: 'text',
-    '[class]': 'class()',
-    '[value]': 'table.globalFilter()',
-    '(input)': 'onInput($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDataTableFilter {
-  readonly table = inject(SC_DATA_TABLE);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly placeholder = input<string>('Filter...');
-
-  protected readonly class = computed(() =>
-    cn(
-      'flex h-9 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm',
-      'placeholder:text-muted-foreground',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      this.classInput(),
-    ),
-  );
-
-  onInput(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.table.globalFilter.set(value);
-  }
-}

package/src/lib/components/data-table/data-table-head.ts

@@ -1,96 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_DATA_TABLE, SortDirection } from './data-table';
-
-@Component({
-  selector: '[sc-data-table-head]',
-  template: `
-    @if (sortable()) {
-      <button
-        type="button"
-        class="flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 rounded-md hover:bg-accent"
-        (click)="onSort()"
-      >
-        <ng-content />
-        @if (sortDirection() === 'asc') {
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="size-4"
-          >
-            <path d="m5 15 7-7 7 7" />
-          </svg>
-        } @else if (sortDirection() === 'desc') {
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="size-4"
-          >
-            <path d="m19 9-7 7-7-7" />
-          </svg>
-        } @else {
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            class="size-4 opacity-0 group-hover:opacity-50"
-          >
-            <path d="m7 15 5 5 5-5" />
-            <path d="m7 9 5-5 5 5" />
-          </svg>
-        }
-      </button>
-    } @else {
-      <ng-content />
-    }
-  `,
-  host: {
-    'data-slot': 'data-table-head',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDataTableHead {
-  private readonly table = inject(SC_DATA_TABLE);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly columnId = input<string>('');
-  readonly sortable = input<boolean>(false);
-
-  protected readonly class = computed(() =>
-    cn(
-      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      'group',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly sortDirection = computed((): SortDirection => {
-    const sorting = this.table.sorting();
-    if (!sorting || sorting.id !== this.columnId()) return null;
-    return sorting.desc ? 'desc' : 'asc';
-  });
-
-  onSort(): void {
-    const id = this.columnId();
-    if (id) {
-      this.table.toggleSort(id);
-    }
-  }
-}

package/src/lib/components/data-table/data-table-header.ts

@@ -1,28 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: '[sc-data-table-header]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'data-table-header',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDataTableHeader {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('[&_tr]:border-b', this.classInput()),
-  );
-}