@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/table/table.types.ts

@@ -0,0 +1,91 @@
+/**
+ * Column filter types
+ */
+export const enum FilterType {
+  Text = 'text',
+  Select = 'select',
+  Number = 'number',
+  Date = 'date',
+}
+
+/**
+ * Column filter configuration
+ */
+export interface ColumnFilter {
+  type: FilterType;
+  placeholder?: string;
+  options?: Array<{ label: string; value: string | number }>;
+}
+
+/**
+ * Active filter state for a column
+ */
+export interface ActiveColumnFilter {
+  columnKey: string;
+  value: string | number | null;
+}
+
+/**
+ * Table header configuration
+ */
+export interface IHeader {
+  name: string;
+  key: string;
+  filterable?: boolean;
+  filterConfig?: ColumnFilter;
+  fixed?: 'left' | 'right';
+  width?: number | string;
+}
+
+/**
+ * Selection mode for table rows
+ */
+export const enum SelectionMode {
+  Single = 'single',
+  Multiple = 'multiple',
+}
+
+/**
+ * Table size variants
+ */
+export const enum Sizes {
+  Small = 'small',
+  Normal = 'normal',
+  Large = 'large',
+}
+
+/**
+ * Sort order states
+ */
+export const enum SortOrder {
+  Default = 'default',
+  Ascending = 'ascending',
+  Descending = 'descending',
+}
+
+/**
+ * Sort direction values
+ */
+export const enum SortValue {
+  Default = 0,
+  Ascending = 1,
+  Descending = -1,
+}
+
+/**
+ * Sort attribute configuration
+ */
+export interface SortAttribute {
+  index: number;
+  order: SortOrder;
+}
+
+/**
+ * Expansion content render function
+ * @param row - The row data
+ * @param index - The row index
+ * @returns Template result for the expanded content
+ */
+export type ExpansionContentRenderer = (row: any, index: number) => any;
+
+export const EMPTY_STRING = '';

package/components/ui/nuraly-ui/src/components/table/templates/actions.template.ts

@@ -0,0 +1,22 @@
+import { html, TemplateResult } from 'lit';
+import { Sizes } from '../table.types.js';
+
+export interface ActionsTemplateData {
+  selectedItems: number;
+  size: Sizes;
+  onCancelSelection: () => void;
+}
+
+/**
+ * Renders the actions bar template for selected items
+ * @param data - Actions data and event handlers
+ * @returns Template for actions bar
+ */
+export function renderActionsTemplate(data: ActionsTemplateData): TemplateResult {
+  return html`
+    <div class="actions-container" data-size="${data.size}">
+      <span>${data.selectedItems} selected</span>
+      <button @click=${data.onCancelSelection}>Cancel</button>
+    </div>
+  `;
+}

package/components/ui/nuraly-ui/src/components/table/templates/column-filter.template.ts

@@ -0,0 +1,88 @@
+import { html, nothing, TemplateResult } from 'lit';
+import { FilterType, ColumnFilter } from '../table.types.js';
+
+export interface ColumnFilterTemplateData {
+  columnKey: string;
+  filterConfig: ColumnFilter;
+  currentValue: string | number | undefined;
+  isActive: boolean;
+  onFilterChange: (value: string | number) => void;
+  onClearFilter: () => void;
+}
+
+/**
+ * Renders the column filter dropdown template
+ * @param data - Column filter data and event handlers
+ * @returns Template for column filter dropdown
+ */
+export function renderColumnFilterTemplate(data: ColumnFilterTemplateData): TemplateResult {
+  const { filterConfig, currentValue, onFilterChange, onClearFilter } = data;
+
+  return html`
+    <div class="column-filter-dropdown">
+      <div class="column-filter-content">
+        ${filterConfig.type === FilterType.Select
+          ? html`
+              <nr-select
+                .options=${filterConfig.options || []}
+                .value=${currentValue || ''}
+                placeholder=${filterConfig.placeholder || 'Filter...'}
+                @nr-change=${(e: CustomEvent) => onFilterChange(e.detail.value)}
+              ></nr-select>
+            `
+          : filterConfig.type === FilterType.Number
+          ? html`
+              <input
+                type="number"
+                class="column-filter-input"
+                placeholder=${filterConfig.placeholder || 'Filter by number...'}
+                .value=${currentValue || ''}
+                @input=${(e: Event) => onFilterChange((e.target as HTMLInputElement).value)}
+              />
+            `
+          : filterConfig.type === FilterType.Date
+          ? html`
+              <input
+                type="date"
+                class="column-filter-input"
+                placeholder=${filterConfig.placeholder || 'Filter by date...'}
+                .value=${currentValue || ''}
+                @input=${(e: Event) => onFilterChange((e.target as HTMLInputElement).value)}
+              />
+            `
+          : html`
+              <input
+                type="text"
+                class="column-filter-input"
+                placeholder=${filterConfig.placeholder || 'Filter...'}
+                .value=${currentValue || ''}
+                @input=${(e: Event) => onFilterChange((e.target as HTMLInputElement).value)}
+              />
+            `}
+        
+        ${currentValue
+          ? html`
+              <button class="column-filter-clear" @click=${onClearFilter}>
+                <nr-icon name="times"></nr-icon>
+              </button>
+            `
+          : nothing}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Renders filter icon with active indicator
+ * @param isActive - Whether the filter is active
+ * @param hasFilter - Whether a filter value is set
+ * @returns Template for filter icon
+ */
+export function renderFilterIcon(_isActive: boolean, hasFilter: boolean): TemplateResult {
+  return html`
+    <span class="filter-icon ${hasFilter ? 'has-filter' : ''}">
+      <nr-icon name="filter"></nr-icon>
+      ${hasFilter ? html`<span class="filter-indicator"></span>` : nothing}
+    </span>
+  `;
+}

package/components/ui/nuraly-ui/src/components/table/templates/content.template.ts

@@ -0,0 +1,257 @@
+import { html, nothing, TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { choose } from 'lit/directives/choose.js';
+import { IHeader, SelectionMode, SortAttribute, SortOrder } from '../table.types.js';
+import { renderColumnFilterTemplate, renderFilterIcon } from './column-filter.template.js';
+import { renderLoadingTemplate } from './loading.template.js';
+import { renderEmptyTemplate } from './empty.template.js';
+import { TableHost } from '../interfaces/index.js';
+
+/**
+ * Calculate cumulative left position for fixed columns
+ */
+function calculateFixedColumnLeft(headers: IHeader[], currentIndex: number, hasSelection: boolean): number {
+  let left = 0;
+  
+  // Add selection column width if present
+  if (hasSelection) {
+    left += 50; // Default selection column width
+  }
+  
+  // Sum up widths of all previous fixed left columns
+  for (let i = 0; i < currentIndex; i++) {
+    if (headers[i].fixed === 'left') {
+      const width = headers[i].width;
+      left += typeof width === 'number' ? width : parseInt(String(width)) || 150;
+    }
+  }
+  
+  return left;
+}
+
+/**
+ * Get CSS classes for fixed columns
+ */
+function getFixedColumnClasses(header: IHeader): string {
+  const classes: string[] = [];
+  
+  if (header.fixed) {
+    classes.push('fixed-column');
+    classes.push(`fixed-column-${header.fixed}`);
+  }
+  
+  return classes.join(' ');
+}
+
+export interface ContentTemplateData {
+  headers: IHeader[];
+  rows: any[];
+  expandable: string | undefined;
+  expansionRenderer: ((row: any, index: number) => any) | undefined;
+  selectionMode: SelectionMode | undefined;
+  selectedItems: boolean[];
+  currentPage: number;
+  itemPerPage: number;
+  sortAttribute: SortAttribute;
+  expand: boolean[];
+  columnFilters: Map<string, string | number>;
+  activeFilterColumn: string | null;
+  loading: boolean;
+  host: TableHost;
+  globalCheckRef?: (el: HTMLInputElement | null) => void;
+  onCheckAll: () => void;
+  onCheckOne: (event: Event, index: number) => void;
+  onSelectOne: (index: number) => void;
+  onUpdateSort: (index: number) => void;
+  onShowExpandedContent: (index: number) => void;
+  onToggleColumnFilter: (columnKey: string) => void;
+  onApplyColumnFilter: (columnKey: string, value: string | number) => void;
+  onClearColumnFilter: (columnKey: string) => void;
+}
+
+/**
+ * Renders the table content template
+ * @param data - Table content data and event handlers
+ * @returns Template for table content
+ */
+export function renderContentTemplate(data: ContentTemplateData): TemplateResult {
+  // Check if any columns are fixed left
+  const hasFixedLeftColumns = data.headers.some(h => h.fixed === 'left');
+  const selectionColumnClass = hasFixedLeftColumns ? 'fixed-column fixed-column-left' : '';
+  
+  return html`
+    <table>
+      <thead>
+        <tr>
+          ${(data.expandable || data.expansionRenderer) || data.selectionMode
+            ? html`<th class="${selectionColumnClass}" style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                ${data.selectionMode === SelectionMode.Multiple
+                  ? html`<nr-checkbox 
+                      id="global-check"
+                      @nr-change=${data.onCheckAll}
+                    ></nr-checkbox>`
+                  : nothing}
+              </th>`
+            : nothing}
+          ${repeat(
+            data.headers,
+            (header: IHeader, index) => {
+              const fixedClasses = getFixedColumnClasses(header);
+              const hasSelection = (data.expandable || data.expansionRenderer) || data.selectionMode;
+              const leftPosition = header.fixed === 'left' 
+                ? calculateFixedColumnLeft(data.headers, index, !!hasSelection) 
+                : undefined;
+              const width = header.width 
+                ? typeof header.width === 'number' ? `${header.width}px` : header.width 
+                : undefined;
+              
+              return html`
+                ${data.expandable !== header.key
+                  ? html`<th 
+                      class="${[header.filterable ? 'filterable' : '', fixedClasses].filter(Boolean).join(' ')}"
+                      style="${leftPosition !== undefined ? `left: ${leftPosition}px;` : ''} ${width ? `width: ${width}; min-width: ${width};` : ''}">
+                      <div class="th-content">
+                        <span class="th-text" @click=${() => data.onUpdateSort(index)}>
+                          ${header.name}
+                          ${index === data.sortAttribute.index
+                            ? choose(data.sortAttribute.order, [
+                                [SortOrder.Default, () => html`<nr-icon name="arrows-v"></nr-icon>`],
+                                [SortOrder.Ascending, () => html`<nr-icon name="long-arrow-up"></nr-icon>`],
+                                [SortOrder.Descending, () => html`<nr-icon name="long-arrow-down"></nr-icon>`],
+                              ])
+                            : html`<nr-icon name="arrows-v"></nr-icon>`}
+                        </span>
+                        ${header.filterable && header.filterConfig
+                          ? html`
+                              <div class="filter-wrapper">
+                                <button 
+                                  class="filter-trigger"
+                                  @click=${(e: Event) => {
+                                    e.stopPropagation();
+                                    data.onToggleColumnFilter(header.key);
+                                  }}
+                                >
+                                  ${renderFilterIcon(
+                                    data.activeFilterColumn === header.key,
+                                    data.columnFilters.has(header.key)
+                                  )}
+                                </button>
+                                ${data.activeFilterColumn === header.key
+                                  ? renderColumnFilterTemplate({
+                                      columnKey: header.key,
+                                      filterConfig: header.filterConfig,
+                                      currentValue: data.columnFilters.get(header.key),
+                                      isActive: true,
+                                      onFilterChange: (value) => data.onApplyColumnFilter(header.key, value),
+                                      onClearFilter: () => data.onClearColumnFilter(header.key),
+                                    })
+                                  : nothing}
+                              </div>
+                            `
+                          : nothing}
+                      </div>
+                    </th>`
+                  : nothing}
+              `;
+            }
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        ${data.loading 
+          ? renderLoadingTemplate(data.host, 5)
+          : data.rows.length === 0
+          ? renderEmptyTemplate(data.host)
+          : repeat(
+              data.rows,
+              (row, index) => html`
+            <tr>
+              ${(data.expandable || data.expansionRenderer) && !data.selectionMode
+              ? html`
+                  <td 
+                    @click=${() => data.onShowExpandedContent(index)} 
+                    @keydown=${(e: KeyboardEvent) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        data.onShowExpandedContent(index);
+                      }
+                    }}
+                    tabindex="0"
+                    role="button"
+                    aria-expanded="${data.expand[index]}"
+                    aria-label="${data.expand[index] ? 'Collapse row' : 'Expand row'}"
+                    class="expand-icon ${data.expand[index] ? 'expanded' : ''} ${selectionColumnClass}" 
+                    style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                    <nr-icon name="angle-down"></nr-icon>
+                  </td>
+                `
+              : data.selectionMode
+              ? choose(data.selectionMode, [
+                  [
+                    SelectionMode.Multiple,
+                    () =>
+                      html`<td class="${selectionColumnClass}" style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                        <nr-checkbox
+                          @nr-change=${(checkOneEvent: Event) => data.onCheckOne(checkOneEvent, index)}
+                          .checked=${data.selectedItems[index + (data.currentPage - 1) * data.itemPerPage]}
+                        ></nr-checkbox>
+                      </td>`,
+                  ],
+                  [
+                    SelectionMode.Single,
+                    () => html`<td class="${selectionColumnClass}" style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                      <nr-radio
+                        name="table-row-selection"
+                        value="${index}"
+                        @nr-change=${() => data.onSelectOne(index)}
+                        .checked=${data.selectedItems[index + (data.currentPage - 1) * data.itemPerPage]}
+                      ></nr-radio>
+                    </td>`,
+                  ],
+                ])
+              : nothing}
+            ${repeat(
+              data.headers,
+              (header: IHeader, headerIndex) => {
+                const fixedClasses = getFixedColumnClasses(header);
+                const hasSelection = (data.expandable || data.expansionRenderer) || data.selectionMode;
+                const leftPosition = header.fixed === 'left' 
+                  ? calculateFixedColumnLeft(data.headers, headerIndex, !!hasSelection) 
+                  : undefined;
+                const width = header.width 
+                  ? typeof header.width === 'number' ? `${header.width}px` : header.width 
+                  : undefined;
+                
+                return html`${data.expandable !== header.key 
+                  ? html`<td 
+                      class="${fixedClasses}"
+                      style="${leftPosition !== undefined ? `left: ${leftPosition}px;` : ''} ${width ? `width: ${width}; min-width: ${width};` : ''}">
+                      ${row[header.key]}
+                    </td>` 
+                  : nothing}`;
+              }
+            )}
+            </tr>
+            ${data.expand[index] 
+              ? html`
+                <tr class="expansion-row expanded">
+                  <td colspan=${data.headers.length + ((data.expandable || data.expansionRenderer) || data.selectionMode ? 1 : 0)}>
+                    <div class="expansion-content">
+                      ${data.expansionRenderer 
+                        ? data.expansionRenderer(row, index)
+                        : data.expandable 
+                        ? row[data.expandable]
+                        : nothing
+                      }
+                    </div>
+                  </td>
+                </tr>
+              `
+              : nothing
+            }
+          `
+        )}
+      </tbody>
+    </table>
+  `;
+}

package/components/ui/nuraly-ui/src/components/table/templates/empty.template.ts

@@ -0,0 +1,49 @@
+import { html } from 'lit';
+import type { TableHost } from '../interfaces/table-host.interface';
+
+/**
+ * Renders the empty state template for the table when there is no data
+ * @param host - The table host component
+ * @returns Empty state template
+ */
+export function renderEmptyTemplate(host: TableHost) {
+  // Calculate colspan: headers + selection column (if present)
+  const colspan = host.headers.length + (host.selectionMode ? 1 : 0);
+
+  return html`
+    <tr class="empty-row">
+      <td colspan="${colspan}" class="empty-cell">
+        <div class="empty-state">
+          ${host.emptyIcon
+            ? html`
+                <div class="empty-icon">
+                  <nr-icon name="${host.emptyIcon}"></nr-icon>
+                </div>
+              `
+            : html`
+                <div class="empty-icon">
+                  <svg
+                    width="64"
+                    height="64"
+                    viewBox="0 0 64 64"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z"
+                      fill="currentColor"
+                      opacity="0.3"
+                    />
+                    <path
+                      d="M32 20c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V22c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              `}
+          <div class="empty-text">${host.emptyText}</div>
+        </div>
+      </td>
+    </tr>
+  `;
+}

package/components/ui/nuraly-ui/src/components/table/templates/filter.template.ts

@@ -0,0 +1,35 @@
+import { html, nothing, TemplateResult } from 'lit';
+
+export interface FilterTemplateData {
+  showInput: boolean;
+  value: string;
+  onToggleInput: () => void;
+  onChange: (event: Event) => void;
+}
+
+/**
+ * Renders the filter/search template for the table
+ * @param data - Filter data and event handlers
+ * @returns Template for search filter
+ */
+export function renderFilterTemplate(data: FilterTemplateData): TemplateResult {
+  return html`
+    <div class="filter-container">
+      ${data.showInput
+        ? html`
+            <nr-icon name="search" class="search-icon"></nr-icon>
+            <input
+              type="text"
+              placeholder="search"
+              @blur=${!data.value.trim() ? data.onToggleInput : nothing}
+              @input=${data.onChange}
+            />
+          `
+        : html`
+            <div class="icon-container" @click=${data.onToggleInput}>
+              <nr-icon name="search"></nr-icon>
+            </div>
+          `}
+    </div>
+  `;
+}

package/components/ui/nuraly-ui/src/components/table/templates/index.ts

@@ -0,0 +1,7 @@
+export { renderPaginationTemplate, type PaginationTemplateData } from './pagination.template.js';
+export { renderContentTemplate, type ContentTemplateData } from './content.template.js';
+export { renderActionsTemplate, type ActionsTemplateData } from './actions.template.js';
+export { renderFilterTemplate, type FilterTemplateData } from './filter.template.js';
+export { renderColumnFilterTemplate, renderFilterIcon, type ColumnFilterTemplateData } from './column-filter.template.js';
+export { renderLoadingTemplate, renderSpinnerLoadingTemplate } from './loading.template.js';
+export { renderEmptyTemplate } from './empty.template.js';

package/components/ui/nuraly-ui/src/components/table/templates/loading.template.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html, TemplateResult } from 'lit';
+import { TableHost } from '../interfaces/index.js';
+
+/**
+ * Renders skeleton loading rows for the table
+ * @param host - The table host component
+ * @param rowCount - Number of skeleton rows to show (default: 5)
+ * @returns Template with skeleton rows
+ */
+export function renderLoadingTemplate(host: TableHost, rowCount = 5): TemplateResult {
+  const hasSelection = !!host.selectionMode;
+
+  return html`
+    ${Array.from({ length: rowCount }, () => html`
+      <tr class="skeleton-row">
+        ${hasSelection ? html`
+          <td class="skeleton-cell selection-skeleton">
+            <div class="skeleton-checkbox"></div>
+          </td>
+        ` : ''}
+        ${host.headers.map(() => html`
+          <td class="skeleton-cell">
+            <div class="skeleton-content"></div>
+          </td>
+        `)}
+      </tr>
+    `)}
+  `;
+}
+
+/**
+ * Renders a centered spinner loading indicator
+ * @param host - The table host component
+ * @returns Template with centered spinner
+ */
+export function renderSpinnerLoadingTemplate(host: TableHost): TemplateResult {
+  const hasSelection = !!host.selectionMode;
+  const columnCount = host.headers.length + (hasSelection ? 1 : 0);
+
+  return html`
+    <tr class="loading-row">
+      <td colspan="${columnCount}" class="loading-cell">
+        <div class="loading-spinner-container">
+          <div class="loading-spinner"></div>
+          <p class="loading-text">Loading data...</p>
+        </div>
+      </td>
+    </tr>
+  `;
+}

package/components/ui/nuraly-ui/src/components/table/templates/pagination.template.ts

@@ -0,0 +1,70 @@
+import { html, nothing, TemplateResult } from 'lit';
+import { Sizes } from '../table.types.js';
+
+export interface PaginationTemplateData {
+  numberOfItems: number;
+  itemPerPage: number[];
+  selectedItemPerPage: number;
+  currentPage: number;
+  size: Sizes;
+  numberOfPages: number;
+  fromItem: number;
+  toItem: number;
+  enableNext: boolean;
+  enablePrevious: boolean;
+  onItemPerPageChange: (event: CustomEvent) => void;
+  onNextPage: () => void;
+  onPreviousPage: () => void;
+}
+
+/**
+ * Renders the pagination template for the table
+ * @param data - Pagination data and event handlers
+ * @returns Template for pagination UI
+ */
+export function renderPaginationTemplate(data: PaginationTemplateData): TemplateResult {
+  const selectOptions = data.itemPerPage.map(item => ({
+    label: String(item),
+    value: String(item)
+  }));
+
+  return html`
+    <div class="pagination-container" data-size="${data.size}">
+      <div class="left-content">
+        <span class="select-details">
+          <label>Items per page:</label>
+          <nr-select
+            .options=${selectOptions}
+            .value=${String(data.selectedItemPerPage)}
+            size="small"
+            @nr-change=${data.onItemPerPageChange}
+          ></nr-select>
+        </span>
+        <span class="items-details">
+          ${data.fromItem} - ${data.toItem} of ${data.numberOfItems} items
+        </span>
+      </div>
+
+      <div class="right-content">
+        <span class="page-details">
+          ${data.currentPage} of ${data.numberOfPages} pages
+        </span>
+        <span class="icon-container">
+          <nr-icon
+            class="left-arrow"
+            data-enabled=${data.enablePrevious}
+            name="caret-left"
+            @click=${data.enablePrevious ? data.onPreviousPage : nothing}
+          ></nr-icon>
+
+          <nr-icon
+            class="right-arrow"
+            data-enabled=${data.enableNext}
+            name="caret-right"
+            @click=${data.enableNext ? data.onNextPage : nothing}
+          ></nr-icon>
+        </span>
+      </div>
+    </div>
+  `;
+}