vk-library

Reusable Angular 21+ standalone components, all configurable via JSON config objects:

• <vk-alert> — Bootstrap alerts with auto-dismiss, icons, custom styles
• <vk-data-table> — Paginated table with sortable columns, filters, row/cell CSS, and action buttons with icons
• <vk-loading> — Loading spinner/dots/bar/ring with optional full-screen overlay

Requires Bootstrap 5 CSS and Font Awesome loaded in your project.

Installation

npm install vk-library @fortawesome/fontawesome-free

Add Bootstrap 5 and Font Awesome to your angular.json or import in styles.scss:

@import "bootstrap/dist/css/bootstrap.min.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";

vk-alert

Config: VkAlertConfig

| Property | Type | Default | Description | |---|---|---|---| | type | 'success'\|'danger'\|'warning'\|'info'\|... | — | Bootstrap alert variant | | message | string | — | Message body (HTML supported) | | title | string | — | Optional bold title | | dismissible | boolean | false | Show × close button | | autoDismiss | number | 0 | Auto-close after N ms | | icon | string | — | Font Awesome icon class, e.g. 'fa-solid fa-circle-check' | | cssClass | string | — | Extra CSS classes | | style | object | — | Inline styles |

Usage

import { VkAlertComponent, VkAlertConfig } from 'vk-library';

@Component({
  imports: [VkAlertComponent],
  template: `<vk-alert [config]="alert" (dismissed)="onDismiss()" />`
})
export class MyComponent {
  alert: VkAlertConfig = {
    type: 'success',
    title: '¡Guardado!',
    message: 'Los datos se guardaron correctamente.',
    dismissible: true,
    autoDismiss: 4000,
    icon: 'fa-solid fa-circle-check',
  };
}

vk-data-table

Config: VkTableConfig

| Property | Type | Description | |---|---|---| | columns | VkTableColumn[] | Column definitions | | actions | VkTableAction[] | Action buttons per row | | filters | VkTableFilter[] | Filter inputs above the table | | pageSizeOptions | number[] | Default: [5, 10, 25, 50] | | defaultPageSize | number | Default: 10 | | showIndex | boolean | Show row number column | | tableCss | string | Extra classes for <table> | | tableStyle | object | Inline styles for <table> | | rowCss | (row) => string | Dynamic CSS class per row | | rowStyle | (row) => object | Dynamic inline style per row | | defaultSortField | string | Initial sort field | | defaultSortDir | 'asc'\|'desc' | Initial sort direction |

VkTableColumn

| Property | Type | Description | |---|---|---| | field | string | Data key | | header | string | Column header | | sortable | boolean | Enable sorting | | headerCss | string | CSS class for <th> | | cellCss | string | CSS class for <td> | | cellStyle | object | Inline style for <td> | | formatter | (val, row) => string | Value formatter | | html | boolean | Render value as HTML |

VkTableAction

| Property | Type | Description | |---|---|---| | id | string | Action identifier emitted on click | | label | string | Tooltip text | | icon | string | Font Awesome icon class | | btnClass | string | Bootstrap button class (default: btn-outline-secondary) | | style | object | Inline styles | | hidden | (row) => boolean | Hide action for a row | | disabled | (row) => boolean | Disable action for a row |

VkTableFilter

| Property | Type | Description | |---|---|---| | field | string | Field to filter | | placeholder | string | Input placeholder | | type | 'text'\|'select'\|'date' | Filter input type | | options | {label, value}[] | Options for select type |

Usage

import { VkDataTableComponent, VkTableConfig } from 'vk-library';

@Component({
  imports: [VkDataTableComponent],
  template: `
    <vk-data-table
      [config]="tableConfig"
      [data]="rows"
      (actionClick)="onAction($event)"
    />
  `
})
export class MyComponent {
  rows = [
    { id: 1, name: 'Ana', role: 'Admin', active: true },
    { id: 2, name: 'Luis', role: 'User', active: false },
  ];

  tableConfig: VkTableConfig = {
    showIndex: true,
    defaultPageSize: 10,
    defaultSortField: 'name',
    tableCss: 'table-striped table-hover table-bordered',
    columns: [
      { field: 'id', header: 'ID', sortable: true, headerCss: 'text-center', cellCss: 'text-center' },
      { field: 'name', header: 'Nombre', sortable: true },
      { field: 'role', header: 'Rol', cellStyle: { fontWeight: 'bold' } },
      {
        field: 'active', header: 'Estado', html: true,
        formatter: (val) => val
          ? '<span class="badge bg-success">Activo</span>'
          : '<span class="badge bg-danger">Inactivo</span>',
      },
    ],
    actions: [
      { id: 'edit',   label: 'Editar',   icon: 'fa-solid fa-pen',    btnClass: 'btn-outline-primary' },
      { id: 'delete', label: 'Eliminar', icon: 'fa-solid fa-trash', btnClass: 'btn-outline-danger',
        disabled: (row) => !row.active },
    ],
    filters: [
      { field: 'name', placeholder: 'Buscar nombre...' },
      { field: 'role', type: 'select', placeholder: 'Todos los roles',
        options: [{ label: 'Admin', value: 'Admin' }, { label: 'User', value: 'User' }] },
    ],
    rowCss: (row) => row.active ? '' : 'table-secondary',
  };

  onAction({ actionId, row }: { actionId: string; row: any }) {
    if (actionId === 'edit')   console.log('Editar', row);
    if (actionId === 'delete') console.log('Eliminar', row);
  }
}

vk-loading

Config: VkLoadingConfig

| Property | Type | Default | Description | |---|---|---|---| | type | 'spinner'\|'dots'\|'bar'\|'ring' | 'spinner' | Loader style | | size | 'sm'\|'md'\|'lg'\|'xl' | 'md' | Spinner size | | colorClass | string | 'text-primary' | Bootstrap color class | | color | string | — | Custom CSS color (overrides colorClass) | | overlay | boolean | false | Full-screen overlay | | message | string | — | Text below spinner | | cssClass | string | — | Extra CSS classes | | style | object | — | Inline styles |

Usage

import { VkLoadingComponent, VkLoadingConfig } from 'vk-library';

@Component({
  imports: [VkLoadingComponent],
  template: `<vk-loading [config]="loadingConfig" [visible]="isLoading" />`
})
export class MyComponent {
  isLoading = true;

  loadingConfig: VkLoadingConfig = {
    type: 'spinner',
    size: 'lg',
    colorClass: 'text-primary',
    overlay: true,
    message: 'Cargando datos...',
  };
}

License

MIT