Pleta Dashboard

Independent @pleta/dashboard library. Depends on @pleta/ui and @pleta/icons. Workspace scripts build icons → ui → dashboard. No drag-and-drop dependency, network requests or storage are added.

import { signal } from '@angular/core';
import { PleDashboardGrid, PleDashboardItem, PleDashboardLayoutItem } from '@pleta/dashboard';

readonly layout = signal<readonly PleDashboardLayoutItem[]>([
  { id: 'sales', label: 'Sales', x: 0, y: 0, width: 3, height: 3,
    minWidth: 2, minHeight: 2, maxWidth: 4, maxHeight: 5 },
  { id: 'notes', label: 'Notes', x: 3, y: 0, width: 3, height: 3 },
]);

Add PleDashboardGrid and PleDashboardItem to component imports:

<ple-dashboard-grid
  [(layout)]="layout"
  [columns]="6"
  [rowHeight]="80"
  (layoutChangeEnd)="save($event.layout)"
>
  <ng-template pleDashboardItem="sales" let-item let-index="index">
    <p>{{ item.label }}: {{ item.width }} × {{ item.height }}</p>
  </ng-template>
  <ng-template pleDashboardItem="notes"
    ><label>Note <input /></label
  ></ng-template>
</ple-dashboard-grid>

PleDashboardItem is a template directive keyed by layout ID, not a DOM wrapper. Missing templates fall back to label/id. Optional itemTemplate applies to all cells and takes precedence over projection. Both receive PleDashboardItemContext ($implicit: item, index). Use one projected template per item ID.

Public API

PleDashboardLayoutItem has a unique nonempty string id, optional label, integer x/y (zero-based), positive integer width/height in grid units. Optional minWidth/maxWidth/minHeight/maxHeight constrain resizing. Minimum defaults to 1, maximum to columns/maxRows. Optional movable/resizable default to true; false disables the action and corresponding numeric editor fields.

| Binding | Default / purpose | | --------------- | ------------------------------------------------------------ | | [(layout)] | Empty array; immutable controlled layout | | columns | 12; fixed positive column count | | rowHeight | 80px, minimum 44px | | gap | 12px; finite nonnegative gap | | minColumnWidth | 64px, minimum 44px; horizontal scrolling on narrow screens | | maxRows | 100; positive maximum row count | | readonly | false; hides editing controls | | label | Дашборд; accessible name of scroll region | | itemTemplate | Optional common TemplateRef | | layoutChangeEnd | { layout, previousLayout, itemId, action }; move/resize/edit |

Interaction

Move handle and lower-right resize handle use Pointer Events/capture for mouse, touch and pen. Preview is local: layoutChange and layoutChangeEnd emit once on completion, only when geometry actually changed. Application code owns persistence.

Keyboard on a handle: arrows preview one-unit steps; Enter/Space confirms (or starts a transaction); Escape cancels. Tab/blur cancels keyboard previews. Pointer cancel/lost capture cancels dragging. External layout, geometry or readonly changes cancel pending interactions instead of overwriting newer state.

Configure opens numeric X/Y/width/height fields: a pointer-only alternative to dragging, also accessible by keyboard. Apply commits; Cancel/Escape discard edits. Focus returns to the Configure button.

Items snap to cells, cannot overlap or leave bounds. Blocked preview shows the original position; dropping it cancels. Invalid incoming layouts show an error rather than silently rearranging data. Keep IDs stable to preserve embedded form and component state. Changing the template itself can recreate its view.

Fixed columns with horizontal scrolling; no responsive auto-reflow, packing, collision pushing, arbitrary-edge resizing, cross-grid transfer, virtualization, automatic scrolling during dragging, undo history or saved-layout service yet.

Storybook /dashboard: both template APIs, readonly mode, fixed widgets, preview/commit and content-state preservation.

Theme documentation

Storybook /theme has an @pleta/dashboard tab with the grid's color tokens, defaults and a scoped CSS example. Dashboard inherits the shared UI palette: --ple-surface, --ple-surface-subtle, --ple-text, --ple-text-muted, --ple-border, --ple-border-subtle, --ple-focus and --ple-error. There are no separate --ple-dashboard-* tokens. Buttons and editor fields use UI tokens; application-owned widget content uses the consumer's styles.

Optionally import @pleta/ui/theme.css in global CSS. Override the shared palette on html[data-theme='dark'] (and set color-scheme: dark) to apply your own dark theme. UIKit supplies light defaults and does not switch themes. Grid geometry is configured through component inputs, not color tokens.

License

Pleta uses the proprietary Pleta Free Application Use License. Personal and commercial application use is free, including paid products, client projects, and SaaS. Application builds and distribution with bundled Pleta code are permitted. Modifying or forking the library itself, extracting its implementation, and republishing it as a standalone package or reusable library are not permitted except as stated in the license. Include the license in your application's legal notices. Third-party materials retain their own licenses. See the LICENSE file shipped with each package for the full terms.