@libs-ui/components-buttons-tab 0.2.355-14 → 0.2.355-15

package/README.md

@@ -0,0 +1,189 @@
+# Buttons Tab Component
+
+> Version: `0.2.355-14`
+>
+> Component tab dạng button, hỗ trợ nhiều màu, badge count và tuỳ biến màu riêng với type `other`.
+
+## Giới thiệu
+
+`LibsUiComponentsButtonsTabComponent` là standalone Angular component dùng để hiển thị danh sách tab theo dạng button. Component hỗ trợ hiển thị badge count cho từng tab và cho phép disable toàn bộ hoặc disable từng tab.
+
+## Tính năng
+
+- ✅ Hiển thị tab theo danh sách `items`
+- ✅ Hỗ trợ nhiều màu tab theo `type`
+- ✅ Hỗ trợ badge count (`count`, `modeCount`, `maxCount`)
+- ✅ Two-way binding key đang chọn qua `[(keySelected)]`
+- ✅ Disable toàn bộ hoặc disable từng tab item
+- ✅ Tuỳ biến màu với `otherConfig` khi `type = 'other'`
+- ✅ OnPush Change Detection
+- ✅ Angular Signals
+
+## Cài đặt
+
+```bash
+npm install @libs-ui/components-buttons-tab
+```
+
+## Import
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig, TYPE_BUTTON_TAB } from '@libs-ui/components-buttons-tab';
+
+@Component({
+  standalone: true,
+  imports: [LibsUiComponentsButtonsTabComponent],
+  template: '',
+})
+export class ExampleComponent {}
+```
+
+## Cách sử dụng
+
+### 1. Ví dụ inline template
+
+```html
+<libs_ui-components-buttons-tab
+  [items]="items"
+  [(keySelected)]="selectedKey"
+  (outKeySelected)="onKeySelected($event)"
+/>
+```
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsButtonsTabComponent, IButtonTab } from '@libs-ui/components-buttons-tab';
+
+@Component({
+  standalone: true,
+  imports: [LibsUiComponentsButtonsTabComponent],
+  template: `
+    <libs_ui-components-buttons-tab
+      [items]="items"
+      [(keySelected)]="selectedKey()"
+      (outKeySelected)="onKeySelected($event)"
+    />
+  `,
+})
+export class InlineExampleComponent {
+  readonly selectedKey = signal<string>('overview');
+
+  readonly items: IButtonTab[] = [
+    { key: 'overview', label: 'Overview', type: 'blue' },
+    { key: 'details', label: 'Details', type: 'green' },
+    { key: 'settings', label: 'Settings', type: 'orange' },
+  ];
+
+  onKeySelected(key: string): void {
+    this.selectedKey.set(key);
+  }
+}
+```
+
+### 2. Ví dụ với file HTML riêng
+
+`example.component.html`
+
+```html
+<libs_ui-components-buttons-tab
+  [items]="items"
+  [otherConfig]="otherConfig"
+  [(keySelected)]="selectedKey"
+/>
+```
+
+`example.component.ts`
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';
+
+@Component({
+  standalone: true,
+  imports: [LibsUiComponentsButtonsTabComponent],
+  templateUrl: './example.component.html',
+})
+export class HtmlFileExampleComponent {
+  readonly selectedKey = signal<string>('custom-1');
+
+  readonly otherConfig: IOtherConfig = {
+    color: '#0ea5e9',
+    background: '#e0f2fe',
+    background_badge: '#bae6fd',
+  };
+
+  readonly items: IButtonTab[] = [
+    { key: 'custom-1', label: 'Custom 1', type: 'other' },
+    { key: 'custom-2', label: 'Custom 2', type: 'other', count: 7, modeCount: 'x+' },
+  ];
+}
+```
+
+## Công nghệ
+
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| Angular | 18+ | Framework |
+| Angular Signals | - | State management |
+| TailwindCSS | 3.x | Styling (demo) |
+| OnPush | - | Change Detection |
+
+## API
+
+### libs_ui-components-buttons-tab
+
+#### Inputs
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `[disable]` | `boolean` | `false` | Disable toàn bộ tab |
+| `[items]` | `Array<IButtonTab>` | `required` | Danh sách tab cần hiển thị |
+| `[otherConfig]` | `IOtherConfig \| undefined` | `undefined` | Cấu hình màu cho type = other |
+| `[(keySelected)]` | `string` | `''` | Key tab đang được chọn (two-way binding) |
+
+#### Outputs
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `(outKeySelected)` | `EventEmitter<string>` | Emit key mỗi khi người dùng chọn tab |
+
+## Types & Interfaces
+
+```typescript
+export interface IButtonTab {
+  key: string;
+  label: string;
+  type: TYPE_BUTTON_TAB;
+  count?: number;
+  modeCount?: TYPE_BADGE_MODE;
+  maxCount?: number;
+  class?: string;
+  classLabel?: string;
+  disable?: boolean;
+  data?: any;
+}
+
+export interface IOtherConfig {
+  color: string;
+  background?: string;
+  background_badge?: string;
+}
+
+export type TYPE_BUTTON_TAB = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other' | string;
+```
+
+### Mô tả Types
+
+- **IButtonTab**: Cấu hình cho từng tab item, có thể kèm badge count và tuỳ chỉnh class/disable.
+- **IOtherConfig**: Cấu hình màu tuỳ biến cho type `other`.
+- **TYPE_BUTTON_TAB**: Danh sách type màu hỗ trợ (có thể mở rộng bằng string).
+
+## Demo
+
+```bash
+npx nx serve core-ui
+```
+
+Truy cập: `http://localhost:4500/buttons/tab`
+

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@libs-ui/components-buttons-tab",
-  "version": "0.2.355-14",
+  "version": "0.2.355-15",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-badge": "0.2.355-14",
-    "@libs-ui/components-popover": "0.2.355-14",
-    "@libs-ui/utils": "0.2.355-14",
+    "@libs-ui/components-badge": "0.2.355-15",
+    "@libs-ui/components-popover": "0.2.355-15",
+    "@libs-ui/utils": "0.2.355-15",
     "@ngx-translate/core": "^15.0.0"
   },
   "sideEffects": false,