@masterkeymaterial/ui

Guia de instalacao para consumidores da biblioteca.

Instalacao

npm install @masterkeymaterial/ui

Pre-requisitos

Projeto consumidor com:

{
  "@angular/common": "^21.2.0",
  "@angular/core": "^21.2.0",
  "@angular/platform-browser": "^21.2.0"
}

Verificacao Rapida

Depois da instalacao:

npm ls @masterkeymaterial/ui

MkGrid (uso rapido)

O componente MkGrid ja esta disponivel na superficie publica da lib junto com os tipos de configuracao.

Exemplo minimo:

import { Component, computed, signal } from '@angular/core';
import { IGridConfig, IGridFilterType, MkGrid, ScreenMode } from '@masterkeymaterial/ui';

interface IPessoa {
  id: number;
  nome: string;
  email: string;
}

@Component({
  selector: 'app-grid-demo',
  standalone: true,
  imports: [MkGrid],
  template: `<lib-mk-grid [lista]="dados()" [config]="config()"></lib-mk-grid>`
})
export class GridDemoComponent {
  dados = signal<IPessoa[]>([
    { id: 1, nome: 'Ana', email: '[email protected]' },
    { id: 2, nome: 'Bruno', email: '[email protected]' },
  ]);

  itensPorPagina = signal(10);
  isSelected = signal(false);
  screen = computed(() => ScreenMode.Desktop);

  config = signal<IGridConfig<IPessoa>>({
    actionsTop: [],
    actionsTopConfig: {
      menuDisplay: 'Acoes',
      menuIcon: 'more_vert',
      showMenuIcon: true,
      width: '120px',
      widthMax: '120px',
      widthMin: '80px',
      aloneAlwaysOutside: false,
    },
    actionsLine: [],
    actionsLineConfig: {
      menuDisplay: 'Mais',
      menuIcon: 'more_vert',
      showMenuIcon: true,
      width: '120px',
      widthMax: '120px',
      widthMin: '80px',
      aloneAlwaysOutside: false,
      headerDisplayMore: 'Acoes',
    },
    InativeRule: () => false,
    colunas: [
      { prop: 'nome', titulo: 'Nome', sortable: true },
      { prop: 'email', titulo: 'E-mail', sortable: true },
    ],
    filterSearchIcon: 'search',
    filterBarStartCollapsed: false,
    screen: this.screen,
    itensPorPagina: this.itensPorPagina,
    nameEntity: 'Pessoa',
    paginations: [
      { k: 10, v: '10' },
      { k: 25, v: '25' },
    ],
    primarykey: 'id',
    showControlBar: true,
    showSearch: true,
    showFilterBar: true,
    showGridMenu: true,
    showInfoBar: true,
    showMenuIcon: true,
    showActionsLine: false,
    showActionsTop: false,
    showPagination: true,
    isSelected: this.isSelected,
    selectionMode: 'none',
    hasError: false,
    hasVerticalLine: true,
    hasSeletor: false,
    hasGrid: true,
    isLoaded: true,
  });
}

Guia completo de uso e customizacao:

• docs/08-mk-grid-guia-consumidor.md

Teste local do MkGrid

Para validar o consumo da lib em runtime dentro deste workspace:

npm run build:lib
npx ng serve mk-grid-demo

O app de teste esta em projects/mk-grid-demo e renderiza o MkGrid com dados mockados para validar comportamento de DI e interacoes basicas.

Licenca

MIT