@libs-ui/components-tabs 0.2.355-13 → 0.2.355-15

package/README.md

@@ -1,3 +1,158 @@
-# tabs
+# @libs-ui/components-tabs
 
-This library was generated with [Nx](https://nx.dev).
+> Library Angular Component hiển thị Tabs, hỗ trợ Signals, Drag & Drop, Responsive "More" Menu và nhiều modes hiển thị.
+
+## Giới thiệu
+
+`LibsUiComponentsTabsComponent` là một standalone Angular component để hiển thị danh sách các tabs. Nó được thiết kế để làm việc với Angular Signals, hỗ trợ nested reactivity cho từng tab item. Component này tự động xử lý responsive bằng cách nhóm các tabs không vừa vào menu "More", hỗ trợ kéo thả để sắp xếp, và cung cấp nhiều chế độ hiển thị khác nhau.
+
+### Tính năng
+
+- ✅ **Angular Signals**: Full support cho reactive updates.
+- ✅ **Responsive "More" Menu**: Tự động tính toán và gom gọn các tabs không hiển thị hết (Mode 'left').
+- ✅ **Drag & Drop**: Hỗ trợ kéo thả để thay đổi vị trí tab.
+- ✅ **Multiple Modes**: 'left', 'center', 'space-between', 'center-has-line'.
+- ✅ **Rich Content**: Hỗ trợ Icon, Badge/Count, Close button trên từng tab.
+- ✅ **OnPush Change Detection**: Tối ưu hiệu năng.
+
+## Khi nào sử dụng
+
+- Khi cần phân chia nội dung thành các modules hoặc views khác nhau.
+- Khi cần hiển thị danh sách các mục có thể đóng mở (như trình duyệt web).
+- Khi không gian ngang bị giới hạn (sử dụng tính năng "More" menu tự động).
+- Khi cần chức năng kéo thả sắp xếp tabs.
+
+## Cài đặt
+
+```bash
+# npm
+npm install @libs-ui/components-tabs
+
+# yarn
+yarn add @libs-ui/components-tabs
+```
+
+## Import
+
+```typescript
+import { LibsUiComponentsTabsComponent } from '@libs-ui/components-tabs';
+
+@Component({
+  standalone: true,
+  imports: [LibsUiComponentsTabsComponent],
+  // ...
+})
+export class YourComponent {}
+```
+
+## Ví dụ
+
+### Basic
+
+```html
+<libs_ui-components-tabs
+  [tabs]="tabsConfig"
+  [(keySelected)]="selectedKey" />
+```
+
+```typescript
+// Trong component class
+import { signal, WritableSignal } from '@angular/core';
+import { ITabs, ITabsItem } from '@libs-ui/components-tabs';
+
+// 1. Tạo các items dưới dạng signal
+const item1 = signal<ITabsItem>({ key: 'tab1', label: 'Tab 1' });
+const item2 = signal<ITabsItem>({ key: 'tab2', label: 'Tab 2' });
+
+// 2. Tạo config tabs
+protected tabsConfig: ITabs = {
+  items: signal<Array<WritableSignal<ITabsItem>>>([item1, item2])
+};
+
+protected selectedKey = signal<string>('tab1');
+```
+
+## API
+
+### libs_ui-components-tabs
+
+#### Inputs
+
+| Property                      | Type                                                         | Default      | Description                                             |
+| ----------------------------- | ------------------------------------------------------------ | ------------ | ------------------------------------------------------- |
+| `[tabs]`                      | `ITabs`                                                      | **Required** | Cấu hình chính cho tabs, chứa danh sách items (Signal). |
+| `[(keySelected)]`             | `string` (Model)                                             | **Required** | Key của tab đang được chọn (Two-way binding).           |
+| `[mode]`                      | `'left' \| 'center' \| 'space-between' \| 'center-has-line'` | `'left'`     | Chế độ hiển thị của tabs.                               |
+| `[fieldKey]`                  | `string`                                                     | `'key'`      | Tên trường dùng làm key định danh trong item object.    |
+| `[fieldLabel]`                | `string`                                                     | `'label'`    | Tên trường hiển thị label trong item object.            |
+| `[disable]`                   | `boolean`                                                    | `false`      | Vô hiệu hóa toàn bộ tabs.                               |
+| `[heightTabItem]`             | `number`                                                     | `40`         | Chiều cao của tab bar (px).                             |
+| `[allowDragDropPosition]`     | `boolean`                                                    | `false`      | Cho phép kéo thả vị trí các tab.                        |
+| `[size]`                      | `'langer' \| 'medium'`                                       | `'medium'`   | Kích thước tab.                                         |
+| `[checkCanChangeTabSelected]` | `() => boolean \| Promise<boolean>`                          | `undefined`  | Callback kiểm tra trước khi chuyển tab.                 |
+
+#### Outputs
+
+| Property             | Type             | Description                                          |
+| -------------------- | ---------------- | ---------------------------------------------------- |
+| `(outKeySelected)`   | `string`         | Emit key của tab vừa được chọn.                      |
+| `(outDragTabChange)` | `void`           | Emit sau khi người dùng kéo thả thay đổi vị trí tab. |
+| `(outAction)`        | `ITabsItemEvent` | Emit các action khác (ví dụ: click nút close).       |
+
+## Types & Interfaces
+
+```typescript
+export interface ITabs {
+  items: WritableSignal<Array<WritableSignal<ITabsItem>>>;
+  hasImage?: boolean;
+  hasCount?: boolean;
+  allowRemove?: boolean;
+  hasStep?: boolean;
+  // ... configuration options
+}
+
+export interface ITabsItem {
+  key?: string;
+  label?: string;
+  iconLeft?: string;
+  count?: number;
+  disable?: boolean;
+  // ... item properties
+}
+```
+
+## Styling
+
+### CSS Classes
+
+| Class                 | Description                          |
+| --------------------- | ------------------------------------ |
+| `.libs-ui-tab`        | Container chính của tabs component.  |
+| `.libs-ui-tab-header` | Header chứa danh sách các tab items. |
+
+## Công nghệ
+
+| Technology      | Version | Purpose          |
+| --------------- | ------- | ---------------- |
+| Angular         | 18+     | Framework        |
+| Angular Signals | -       | State management |
+| TailwindCSS     | 3.x     | Styling          |
+| OnPush          | -       | Change Detection |
+
+## Demo
+
+```bash
+npx nx serve core-ui
+```
+
+Truy cập: `http://localhost:4500/tabs`
+
+## Unit Tests
+
+```bash
+npx nx test components-tabs
+```
+
+## License
+
+MIT

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@libs-ui/components-tabs",
-  "version": "0.2.355-13",
+  "version": "0.2.355-15",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-badge": "0.2.355-13",
-    "@libs-ui/components-buttons-button": "0.2.355-13",
-    "@libs-ui/components-list": "0.2.355-13",
-    "@libs-ui/components-popover": "0.2.355-13",
+    "@libs-ui/components-badge": "0.2.355-15",
+    "@libs-ui/components-buttons-button": "0.2.355-15",
+    "@libs-ui/components-list": "0.2.355-15",
+    "@libs-ui/components-popover": "0.2.355-15",
     "rxjs": "~7.8.0",
-    "@libs-ui/interfaces-types": "0.2.355-13",
-    "@libs-ui/utils": "0.2.355-13",
+    "@libs-ui/interfaces-types": "0.2.355-15",
+    "@libs-ui/utils": "0.2.355-15",
     "@ngx-translate/core": "^15.0.0",
-    "@libs-ui/pipes-call-function-in-template": "0.2.355-13",
-    "@libs-ui/components-drag-drop": "0.2.355-13",
-    "@libs-ui/services-http-request": "0.2.355-13"
+    "@libs-ui/pipes-call-function-in-template": "0.2.355-15",
+    "@libs-ui/components-drag-drop": "0.2.355-15",
+    "@libs-ui/services-http-request": "0.2.355-15"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-tabs.mjs",