@vimersvn/ui-angular

Angular standalone components for Vimers apps.

Install

pnpm add @vimersvn/ui-angular @vimersvn/design-tokens

Usage

import { Component } from '@angular/core';
import { VmButtonComponent, VmCardComponent } from '@vimersvn/ui-angular';

@Component({
  standalone: true,
  imports: [VmButtonComponent, VmCardComponent],
  template: `
    <vm-card title="Shipment" subtitle="Active">
      <vm-button variant="primary">Track</vm-button>
    </vm-card>
  `
})
export class MyPageComponent {}

Host Styles (Required)

@vimersvn/ui-angular da dong goi san utility CSS cho tat ca component. Host app chi can import stylesheet, khong can tu setup Tailwind utility pipeline.

Import mot lan trong global styles (vi du src/styles.scss):

@import '@vimersvn/ui-angular/dist/styles.css';
@import '@vimersvn/design-tokens/themes.css';

Theme Runtime

Import DS theme variables once:

@import '@vimersvn/design-tokens/themes.css';

Apply/switch theme at runtime:

import { Component, inject } from '@angular/core';
import { VmThemeService } from '@vimersvn/ui-angular';

@Component({ standalone: true, template: '' })
export class ThemeBootstrapComponent {
  private readonly vmTheme = inject(VmThemeService);

  ngOnInit(): void {
    this.vmTheme.hydrateTheme('vimers-ocean-light');
    // this.vmTheme.applyTheme('vimers-signal-dark');
  }
}

Components

| Component | Status | |---|---| | VmIconComponent | Preview | | VmIconRegistry / provideVmIcons | Preview | | vmHeading / vmText | Preview | | VmDividerComponent | Preview | | VmSpaceComponent | Preview | | VmTagComponent | Preview | | VmAvatarComponent | Preview | | VmAvatarGroupComponent | Preview | | VmAlertComponent | Preview | | VmEmptyComponent | Preview | | VmSpinComponent | Preview | | VmSkeletonComponent | Preview | | VmProgressComponent | Preview | | VmMenuComponent | Preview | | VmSidebarComponent | Preview | | VmTabsComponent | Preview | | VmStepsComponent | Preview | | VmBreadcrumbComponent | Preview | | VmPaginationComponent | Preview | | VmDropdownComponent | Preview | | VmDrawerComponent | Preview | | VmPageHeaderComponent | Preview | | VmFormFieldComponent | Preview | | VmButtonComponent | Stable | | VmInputComponent | Stable | | VmAutoCompleteComponent | Preview | | VmInputNumberComponent | Preview | | VmTextareaComponent | Preview | | VmDatepickerComponent | Preview | | VmTimepickerComponent | Preview | | VmDateRangePickerComponent | Preview | | VmUploadComponent | Preview | | VmSelectComponent | Preview | | VmTreeComponent | Preview | | VmTreeSelectComponent | Preview | | VmTransferComponent | Preview | | VmCascaderComponent | Preview | | VmCalendarComponent | Preview | | VmCheckboxComponent | Preview | | VmRadioComponent | Preview | | VmRadioGroupComponent | Preview | | VmSwitchComponent | Preview | | VmModalComponent | Preview | | VmTooltipComponent | Preview | | VmPopoverComponent | Preview | | VmPopconfirmComponent | Preview | | VmResultComponent | Preview | | VmMessageOutletComponent | Preview | | VmNotificationOutletComponent | Preview | | VmMessageService | Preview | | VmToastOutletComponent | Preview | | VmToastService | Preview | | VmCardComponent | Stable | | VmBadgeComponent | Stable | | VmTableComponent | Stable | | VmStatComponent | Stable |

Validation Helpers

| Helper | Status | |---|---| | vmResolveValidationError | Preview | | VM_DEFAULT_VALIDATION_ERROR_MAP | Preview | | VmControlErrorDirective | Preview |

Add components only when there is real demand from at least two products.

Accessibility & Keyboard Docs

• VmMenuComponent: docs/a11y-keyboard/menu.md
• VmSidebarComponent: docs/a11y-keyboard/sidebar.md
• VmTabsComponent: docs/a11y-keyboard/tabs.md
• VmDropdownComponent: docs/a11y-keyboard/dropdown.md
• VmPaginationComponent: docs/a11y-keyboard/pagination.md
• VmDrawerComponent: docs/a11y-keyboard/drawer.md
• VmModalComponent: docs/a11y-keyboard/modal.md