dasar-ui 1.1.0 → 1.3.0

package/projects/dasar-ui/src/lib/components/dasar-table/dasar-table.scss

@@ -1,283 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-table {
-  display: block;
-  width: 100%;
-}
-
-.dasar-table-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-radius: var(--table-radius, var(--radius-md));
-  overflow: hidden;
-  background-color: var(--table-background, var(--theme-bg-surface-color));
-
-  &.fluid {
-    width: 100%;
-  }
-
-  &.appearance-outline {
-    border: 1px solid var(--table-outline-border, var(--theme-border-strong-color));
-  }
-
-  &.appearance-filled {
-    background-color: var(--table-filled-background, var(--theme-bg-default-color));
-    border: 1px solid var(--table-filled-border, transparent);
-
-    .dasar-table-native tbody tr.dasar-table-row {
-      border-bottom: 1px solid var(--table-filled-row-border, var(--theme-bg-default-color));
-      background-color: var(--table-filled-row-background, var(--theme-bg-surface-color));
-    }
-  }
-
-  &.appearance-elevated {
-    border: var(--table-elevated-border, none);
-    box-shadow: var(
-      --table-elevated-shadow,
-      0 10px 25px -5px rgba(0, 0, 0, 0.1),
-      0 8px 10px -6px rgba(0, 0, 0, 0.1)
-    );
-  }
-
-  &.appearance-borderless {
-    border: none;
-    border-radius: var(--table-radius-none, var(--radius-none));
-    background-color: var(--table-borderless-background, transparent);
-  }
-
-  &.size-xs {
-    font-size: var(--table-font-size-sm, var(--font-size-xs));
-  }
-
-  &.size-sm {
-    font-size: var(--table-font-size-sm, var(--font-size-sm));
-  }
-
-  &.size-md {
-    font-size: var(--table-font-size-md, var(--font-size-base));
-  }
-
-  &.size-lg {
-    font-size: var(--table-font-size-lg, var(--font-size-lg));
-  }
-
-  &.size-xl {
-    font-size: var(--table-font-size-lg, var(--font-size-xl));
-  }
-
-  &.spacing-compact .dasar-table-native {
-    th,
-    td {
-      padding: var(--table-compact-padding-vertical, var(--space-base))
-        var(--table-compact-padding-horizontal, var(--space-3));
-    }
-  }
-
-  &.spacing-normal .dasar-table-native {
-    th,
-    td {
-      padding: var(--table-normal-padding-vertical, var(--space-4))
-        var(--table-normal-padding-horizontal, var(--space-5));
-    }
-  }
-
-  &.spacing-relaxed .dasar-table-native {
-    th,
-    td {
-      padding: var(--table-relaxed-padding-vertical, var(--space-6))
-        var(--table-relaxed-padding-horizontal, var(--space-8));
-    }
-  }
-}
-
-.dasar-table-wrapper {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.dasar-table-native {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  text-align: left;
-  font-size: inherit;
-  color: var(--table-color, var(--theme-text-primary-color));
-
-  thead {
-    background-color: var(--table-header-background, var(--theme-primary-color));
-
-    th {
-      font-weight: var(--table-header-font-weight, var(--font-weight-semibold));
-      color: var(--table-header-color, var(--theme-text-inverse-color));
-      white-space: nowrap;
-
-      &.sortable {
-        cursor: pointer;
-        user-select: none;
-
-        &:hover {
-          background-color: var(--table-header-hover-background, var(--theme-primary-hover-color));
-        }
-      }
-
-      .th-content {
-        display: flex;
-        align-items: center;
-        gap: var(--table-header-content-gap, var(--space-base));
-
-        .sort-indicator {
-          font-size: var(--table-sort-indicator-size, var(--font-size-sm));
-          opacity: 0.5;
-          transition: opacity 0.2s;
-
-          &.active {
-            opacity: 1;
-            color: var(--table-sort-active-color, var(--theme-text-inverse-color));
-          }
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr.dasar-table-row {
-      border-bottom: 1px solid var(--table-row-border, var(--theme-border-subtle-color));
-      transition:
-        background-color 0.2s ease,
-        box-shadow 0.2s ease;
-
-      &:last-child:not(.expanded) {
-        border-bottom: none;
-      }
-
-      td {
-        vertical-align: middle;
-      }
-    }
-
-    tr.dasar-table-expanded-row {
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.hoverable tbody tr.dasar-table-row:not(.state-row):hover {
-    background-color: var(--table-row-hover-background, var(--theme-primary-surface-color));
-    cursor: pointer;
-
-    td:first-child {
-      box-shadow: inset var(--table-row-hover-indicator-width, var(--space-0-5)) 0 0 0
-        var(--table-row-hover-indicator-color, var(--theme-primary-color));
-    }
-  }
-
-  &.striped tbody tr.dasar-table-row:nth-child(odd) {
-    background-color: transparent;
-  }
-
-  &.striped tbody tr.dasar-table-row:nth-child(even) {
-    background-color: var(--table-stripe-background, var(--theme-bg-hover-color));
-  }
-
-  &.striped.hoverable tbody tr.dasar-table-row:not(.state-row):hover {
-    background-color: var(--table-row-hover-background, var(--theme-primary-surface-color));
-  }
-}
-
-.expand-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--table-expand-btn-color, var(--theme-text-secondary-color));
-  border-radius: var(--table-expand-btn-radius, var(--radius-sm));
-  transition: all 0.2s;
-
-  &:hover {
-    background-color: var(--table-expand-btn-hover-background, var(--theme-border-strong-color));
-    color: var(--table-expand-btn-hover-color, var(--theme-text-primary-color));
-  }
-
-  svg {
-    transition: transform 0.2s ease;
-  }
-
-  &.is-expanded svg {
-    transform: rotate(90deg);
-  }
-}
-
-.state-row {
-  background-color: transparent !important;
-
-  &:hover {
-    background-color: transparent !important;
-    cursor: default !important;
-  }
-}
-
-.state-cell {
-  text-align: center;
-  padding: var(--table-state-cell-padding, var(--space-8)) !important;
-}
-
-.state-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--table-state-content-gap, var(--space-3));
-  color: var(--table-state-content-color, var(--theme-text-secondary-color));
-}
-
-.dasar-spinner {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--table-spinner-track, var(--theme-border-subtle-color));
-  border-top-color: var(--table-spinner-color, var(--theme-primary-color));
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--table-empty-content-gap, var(--space-1));
-
-  h5 {
-    margin: 0;
-    font-weight: var(--table-empty-title-font-weight, var(--font-weight-semibold));
-    color: var(--table-empty-title-color, var(--theme-text-primary-color));
-    font-size: var(--table-empty-title-font-size, var(--font-size-base));
-  }
-
-  p {
-    margin: 0;
-    color: var(--table-empty-desc-color, var(--theme-text-secondary-color));
-    font-size: var(--table-empty-desc-font-size, var(--font-size-base));
-  }
-}
-
-.dasar-table-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: var(--table-pagination-padding-vertical, var(--space-3))
-    var(--table-pagination-padding-horizontal, var(--space-4));
-  border-top: 1px solid var(--table-pagination-border, var(--theme-border-subtle-color));
-  background-color: var(--table-pagination-background, var(--theme-bg-surface-color));
-}

package/projects/dasar-ui/src/lib/components/dasar-table/dasar-table.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DasarTable } from './dasar-table';
-
-describe('DasarTable', () => {
-  let component: DasarTable;
-  let fixture: ComponentFixture<DasarTable>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DasarTable],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DasarTable);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/dasar-ui/src/lib/components/dasar-table/dasar-table.ts

@@ -1,380 +0,0 @@
-import {
-  Component,
-  Directive,
-  Input,
-  Output,
-  EventEmitter,
-  ContentChild,
-  ContentChildren,
-  QueryList,
-  TemplateRef,
-  ViewEncapsulation,
-  booleanAttribute,
-  HostBinding,
-  inject,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { DASAR_THEME_PROVIDER } from '../dasar-theme-provider/dasar-theme-provider';
-import { DasarChipComponent, DasarChipVariantType } from '../dasar-chip/dasar-chip';
-import { ClassType, StyleType, ScaleAttributeType } from '../../models/type.model';
-import { DasarButtonComponent } from '../dasar-button/dasar-button';
-import { DasarThemeService } from '../../services/theme.service';
-import { DasarIconComponent } from '../dasar-icon/dasar-icon';
-import { resolveThemeDefault } from '../../utils/common';
-
-export type DasarTableAppearance = 'outline' | 'filled' | 'elevated' | 'borderless';
-export type DasarTableSize = Extract<ScaleAttributeType, 'sm' | 'md' | 'lg'>;
-export type DasarTableSpacing = 'compact' | 'normal' | 'relaxed';
-export type DasarTableSortDirection = 'asc' | 'desc' | null;
-export interface DasarTableColumn {
-  cellClass?: ClassType | ((row: any, index: number) => ClassType);
-  cellStyle?: StyleType | ((row: any, index: number) => StyleType);
-  align?: 'left' | 'center' | 'right';
-  headerClass?: ClassType;
-  headerStyle?: StyleType;
-  sortable?: boolean;
-  width?: string;
-  label?: string;
-  key: string;
-}
-export interface DasarTableSortEvent {
-  column: string;
-  direction: DasarTableSortDirection;
-}
-export interface DasarTableConfig {
-  data?: any[];
-  columns?: DasarTableColumn[];
-  fluid?: boolean;
-  striped?: boolean;
-  hoverable?: boolean;
-  loading?: boolean;
-  expandable?: boolean;
-  appearance?: DasarTableAppearance;
-  spacing?: DasarTableSpacing;
-  size?: DasarTableSize;
-  sortKey?: string | null;
-  sortDirection?: DasarTableSortDirection;
-  emptyTitle?: string;
-  emptyDescription?: string;
-  loadingText?: string;
-  containerClass?: ClassType;
-  containerStyle?: StyleType;
-  wrapperClass?: ClassType;
-  wrapperStyle?: StyleType;
-  tableClass?: ClassType;
-  tableStyle?: StyleType;
-  headerClass?: ClassType;
-  headerStyle?: StyleType;
-  bodyClass?: ClassType;
-  bodyStyle?: StyleType;
-  paginationClass?: ClassType;
-  paginationStyle?: StyleType;
-}
-
-@Directive({ selector: '[header-slot]', standalone: true })
-export class DasarTableHeaderSlot {}
-@Directive({ selector: '[body-slot]', standalone: true })
-export class DasarTableBodySlot {}
-@Directive({ selector: '[empty-slot]', standalone: true })
-export class DasarTableEmptySlot {}
-@Directive({ selector: '[pagination-slot]', standalone: true })
-export class DasarTablePaginationSlot {}
-@Directive({ selector: '[expanded-slot]', standalone: true })
-export class DasarTableExpandedSlot {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[cell-slot]', standalone: true })
-export class DasarTableCellDirective {
-  @Input('cell-slot') columnName!: string;
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-
-@Component({
-  imports: [CommonModule, DasarButtonComponent, DasarIconComponent],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './dasar-table.html',
-  styleUrls: ['./dasar-table.scss'],
-  selector: 'dasar-table',
-  standalone: true,
-})
-export class DasarTable {
-  @ContentChildren(DasarTableCellDirective) cellTemplates!: QueryList<DasarTableCellDirective>;
-  @ContentChild(DasarTablePaginationSlot) providedPagination?: DasarTablePaginationSlot;
-  @ContentChild(DasarTableExpandedSlot) providedExpanded?: DasarTableExpandedSlot;
-  @ContentChild(DasarTableHeaderSlot) providedHeader?: DasarTableHeaderSlot;
-  @ContentChild(DasarTableEmptySlot) providedEmpty?: DasarTableEmptySlot;
-  @ContentChild(DasarTableBodySlot) providedBody?: DasarTableBodySlot;
-
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-
-  @Input() data = resolveThemeDefault('table', 'data', [], this.themeProvider, this.themeService);
-  @Input() columns = resolveThemeDefault(
-    'table',
-    'columns',
-    [],
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) fluid = resolveThemeDefault(
-    'table',
-    'fluid',
-    true,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) striped = resolveThemeDefault(
-    'table',
-    'striped',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) hoverable = resolveThemeDefault(
-    'table',
-    'hoverable',
-    true,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) loading = resolveThemeDefault(
-    'table',
-    'loading',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) expandable = resolveThemeDefault(
-    'table',
-    'expandable',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() appearance = resolveThemeDefault(
-    'table',
-    'appearance',
-    'outline',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() spacing = resolveThemeDefault(
-    'table',
-    'spacing',
-    'normal',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault('table', 'size', 'md', this.themeProvider, this.themeService);
-  @Input() sortKey = resolveThemeDefault(
-    'table',
-    'sortKey',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() sortDirection: DasarTableSortDirection = resolveThemeDefault(
-    'table',
-    'sortDirection',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-
-  @Input() emptyTitle = resolveThemeDefault(
-    'table',
-    'emptyTitle',
-    'Data empty',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() emptyDescription = resolveThemeDefault(
-    'table',
-    'emptyDescription',
-    'No records found',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() loadingText = resolveThemeDefault(
-    'table',
-    'loadingText',
-    'loading...',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() containerClass = resolveThemeDefault(
-    'table',
-    'containerClass',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() wrapperClass = resolveThemeDefault(
-    'table',
-    'wrapperClass',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() tableClass = resolveThemeDefault(
-    'table',
-    'tableClass',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() headerClass = resolveThemeDefault(
-    'table',
-    'headerClass',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() bodyClass = resolveThemeDefault(
-    'table',
-    'bodyClass',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() paginationClass = resolveThemeDefault(
-    'table',
-    'paginationClass',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() containerStyle = resolveThemeDefault(
-    'table',
-    'containerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() wrapperStyle = resolveThemeDefault(
-    'table',
-    'wrapperStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() tableStyle = resolveThemeDefault(
-    'table',
-    'tableStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() headerStyle = resolveThemeDefault(
-    'table',
-    'headerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() bodyStyle = resolveThemeDefault(
-    'table',
-    'bodyStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() paginationStyle = resolveThemeDefault(
-    'table',
-    'paginationStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-
-  @Output() onRowClick = new EventEmitter<{ row: any; index: number; event: MouseEvent }>();
-  @Output() onRowDblClick = new EventEmitter<{ row: any; index: number; event: MouseEvent }>();
-  @Output() onRowContextMenu = new EventEmitter<{ row: any; index: number; event: MouseEvent }>();
-  @Output() onSortChange = new EventEmitter<DasarTableSortEvent>();
-  @Output() onRowExpandChange = new EventEmitter<{ row: any; index: number; expanded: boolean }>();
-
-  @HostBinding('class.dasar-table') readonly baseClass = true;
-  expandedRows = new Set<number>();
-
-  get hasHeader(): boolean {
-    return !!this.providedHeader;
-  }
-  get hasBody(): boolean {
-    return !!this.providedBody;
-  }
-  get hasEmpty(): boolean {
-    return !!this.providedEmpty;
-  }
-  get hasPagination(): boolean {
-    return !!this.providedPagination;
-  }
-  get hasExpanded(): boolean {
-    return !!this.providedExpanded;
-  }
-
-  getColHeaderClass(col: DasarTableColumn): ClassType {
-    return col.headerClass || '';
-  }
-  getColHeaderStyle(col: DasarTableColumn): StyleType {
-    return { ...(col.headerStyle as object) };
-  }
-  getColCellClass(col: DasarTableColumn, row: any, index: number): ClassType {
-    const dynamicClass =
-      typeof col.cellClass === 'function' ? col.cellClass(row, index) : col.cellClass;
-    return dynamicClass || '';
-  }
-  getColCellStyle(col: DasarTableColumn, row: any, index: number): StyleType {
-    const dynamicStyle =
-      typeof col.cellStyle === 'function' ? col.cellStyle(row, index) : col.cellStyle;
-    return { ...(dynamicStyle as object) };
-  }
-  getCellTemplate(columnName: string): TemplateRef<any> | null {
-    const directive = this.cellTemplates?.find((t) => t.columnName === columnName);
-    return directive ? directive.templateRef : null;
-  }
-  onSort(columnKey: string): void {
-    if (this.sortKey === columnKey) {
-      this.sortDirection =
-        this.sortDirection === 'asc' ? 'desc' : this.sortDirection === 'desc' ? null : 'asc';
-      if (this.sortDirection === null) this.sortKey = null;
-    } else {
-      this.sortKey = columnKey;
-      this.sortDirection = 'asc';
-    }
-    this.onSortChange.emit({ column: columnKey, direction: this.sortDirection });
-  }
-  toggleExpand(row: any, index: number, event: MouseEvent): void {
-    event.stopPropagation();
-    const isExpanded = this.expandedRows.has(index);
-    if (isExpanded) {
-      this.expandedRows.delete(index);
-    } else {
-      this.expandedRows.add(index);
-    }
-    this.expandedRows = new Set(this.expandedRows);
-    this.onRowExpandChange.emit({ row, index, expanded: !isExpanded });
-  }
-  isExpanded(index: number): boolean {
-    return this.expandedRows.has(index);
-  }
-  rowClick(row: any, index: number, event: MouseEvent): void {
-    this.onRowClick.emit({ row, index, event });
-  }
-  rowDblClick(row: any, index: number, event: MouseEvent): void {
-    this.onRowDblClick.emit({ row, index, event });
-  }
-  rowContextMenu(row: any, index: number, event: MouseEvent): void {
-    this.onRowContextMenu.emit({ row, index, event });
-  }
-}
-
-export const DasarTableComponent = [
-  DasarTablePaginationSlot,
-  DasarTableCellDirective,
-  DasarTableExpandedSlot,
-  DasarTableHeaderSlot,
-  DasarTableEmptySlot,
-  DasarTableBodySlot,
-  DasarTable,
-] as const;