@libs-ui/components-tabs 0.2.355-8 → 0.2.356-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +164 -2
  2. package/package.json +10 -10
package/README.md CHANGED
@@ -1,3 +1,165 @@
1
- # tabs
1
+ # @libs-ui/components-tabs
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Library Angular Component hiển thị Tabs, hỗ trợ Signals, Drag & Drop, Responsive "More" Menu và nhiều modes hiển thị.
4
+
5
+ ## Giới thiệu
6
+
7
+ `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.
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Angular Signals**: Full support cho reactive updates.
12
+ - ✅ **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').
13
+ - ✅ **Drag & Drop**: Hỗ trợ kéo thả để thay đổi vị trí tab.
14
+ - ✅ **Multiple Modes**: 'left', 'center', 'space-between', 'center-has-line'.
15
+ - ✅ **Rich Content**: Hỗ trợ Icon, Badge/Count, Close button trên từng tab.
16
+ - ✅ **OnPush Change Detection**: Tối ưu hiệu năng.
17
+
18
+ ## Khi nào sử dụng
19
+
20
+ - Khi cần phân chia nội dung thành các modules hoặc views khác nhau.
21
+ - Khi cần hiển thị danh sách các mục có thể đóng mở (như trình duyệt web).
22
+ - Khi không gian ngang bị giới hạn (sử dụng tính năng "More" menu tự động).
23
+ - Khi cần chức năng kéo thả sắp xếp tabs.
24
+
25
+ ## Cài đặt
26
+
27
+ ```bash
28
+ # npm
29
+ npm install @libs-ui/components-tabs
30
+
31
+ # yarn
32
+ yarn add @libs-ui/components-tabs
33
+ ```
34
+
35
+ ## Import
36
+
37
+ ```typescript
38
+ import { LibsUiComponentsTabsComponent } from '@libs-ui/components-tabs';
39
+
40
+ @Component({
41
+ standalone: true,
42
+ imports: [LibsUiComponentsTabsComponent],
43
+ // ...
44
+ })
45
+ export class YourComponent {}
46
+ ```
47
+
48
+ ## Ví dụ
49
+
50
+ ### Basic
51
+
52
+ ```html
53
+ <libs_ui-components-tabs
54
+ [tabs]="tabsConfig"
55
+ [(keySelected)]="selectedKey" />
56
+ ```
57
+
58
+ ```typescript
59
+ // Trong component class
60
+ import { signal, WritableSignal } from '@angular/core';
61
+ import { ITabs, ITabsItem } from '@libs-ui/components-tabs';
62
+
63
+ // 1. Tạo các items dưới dạng signal
64
+ const item1 = signal<ITabsItem>({ key: 'tab1', label: 'Tab 1' });
65
+ const item2 = signal<ITabsItem>({ key: 'tab2', label: 'Tab 2' });
66
+
67
+ // 2. Tạo config tabs
68
+ protected tabsConfig: ITabs = {
69
+ items: signal<Array<WritableSignal<ITabsItem>>>([item1, item2])
70
+ };
71
+
72
+ protected selectedKey = signal<string>('tab1');
73
+ ```
74
+
75
+ ## API
76
+
77
+ ### libs_ui-components-tabs
78
+
79
+ #### Inputs
80
+
81
+ | Property | Type | Default | Description |
82
+ | ----------------------------- | ------------------------------------------------------------ | ------------ | ------------------------------------------------------- |
83
+ | `[tabs]` | `ITabs` | **Required** | Cấu hình chính cho tabs, chứa danh sách items (Signal). |
84
+ | `[(keySelected)]` | `string` (Model) | **Required** | Key của tab đang được chọn (Two-way binding). |
85
+ | `[mode]` | `'left' \| 'center' \| 'space-between' \| 'center-has-line'` | `'left'` | Chế độ hiển thị của tabs. |
86
+ | `[fieldKey]` | `string` | `'key'` | Tên trường dùng làm key định danh trong item object. |
87
+ | `[fieldLabel]` | `string` | `'label'` | Tên trường hiển thị label trong item object. |
88
+ | `[disable]` | `boolean` | `false` | Vô hiệu hóa toàn bộ tabs. |
89
+ | `[heightTabItem]` | `number` | `40` | Chiều cao của tab bar (px). |
90
+ | `[allowDragDropPosition]` | `boolean` | `false` | Cho phép kéo thả vị trí các tab. |
91
+ | `[size]` | `'langer' \| 'medium'` | `'medium'` | Kích thước tab. |
92
+ | `[disableLabel]` | `boolean` | `false` | Vô hiệu hóa label. |
93
+ | `[ignoreCalculatorTab]` | `boolean` | `false` | Bỏ qua việc tính toán hiển thị responsive (menu More). |
94
+ | `[zIndex]` | `number` | `undefined` | Z-index cho component. |
95
+ | `[configCss]` | `ITabCssConfig` (Model) | `undefined` | Cấu hình CSS tùy chỉnh cho các mode. |
96
+ | `[popoverShowMoreTabItem]` | `IPopover` | `undefined` | Cấu hình popover cho menu "Xem thêm". |
97
+ | `[checkCanChangeTabSelected]` | `() => boolean \| Promise<boolean>` | `undefined` | Callback kiểm tra trước khi chuyển tab. |
98
+
99
+ #### Outputs
100
+
101
+ | Property | Type | Description |
102
+ | ----------------------- | --------------------------- | ---------------------------------------------------- |
103
+ | `(outKeySelected)` | `string` | Emit key của tab vừa được chọn. |
104
+ | `(outDragTabChange)` | `void` | Emit sau khi người dùng kéo thả thay đổi vị trí tab. |
105
+ | `(outDisplayMoreItem)` | `boolean` | Emit khi trạng thái hiển thị menu "More" thay đổi. |
106
+ | `(outFunctionsControl)` | `ITabsFunctionControlEvent` | Emit các hàm điều khiển tabs từ bên ngoài. |
107
+ | `(outAction)` | `ITabsItemEvent` | Emit các action khác (ví dụ: click nút close). |
108
+
109
+ ## Types & Interfaces
110
+
111
+ ```typescript
112
+ export interface ITabs {
113
+ items: WritableSignal<Array<WritableSignal<ITabsItem>>>;
114
+ hasImage?: boolean;
115
+ hasCount?: boolean;
116
+ allowRemove?: boolean;
117
+ hasStep?: boolean;
118
+ // ... configuration options
119
+ }
120
+
121
+ export interface ITabsItem {
122
+ key?: string;
123
+ label?: string;
124
+ iconLeft?: string;
125
+ count?: number;
126
+ disable?: boolean;
127
+ // ... item properties
128
+ }
129
+ ```
130
+
131
+ ## Styling
132
+
133
+ ### CSS Classes
134
+
135
+ | Class | Description |
136
+ | --------------------- | ------------------------------------ |
137
+ | `.libs-ui-tab` | Container chính của tabs component. |
138
+ | `.libs-ui-tab-header` | Header chứa danh sách các tab items. |
139
+
140
+ ## Công nghệ
141
+
142
+ | Technology | Version | Purpose |
143
+ | --------------- | ------- | ---------------- |
144
+ | Angular | 18+ | Framework |
145
+ | Angular Signals | - | State management |
146
+ | TailwindCSS | 3.x | Styling |
147
+ | OnPush | - | Change Detection |
148
+
149
+ ## Demo
150
+
151
+ ```bash
152
+ npx nx serve core-ui
153
+ ```
154
+
155
+ Truy cập: `http://localhost:4500/tabs`
156
+
157
+ ## Unit Tests
158
+
159
+ ```bash
160
+ npx nx test components-tabs
161
+ ```
162
+
163
+ ## License
164
+
165
+ MIT
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@libs-ui/components-tabs",
3
- "version": "0.2.355-8",
3
+ "version": "0.2.356-0",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-badge": "0.2.355-8",
7
- "@libs-ui/components-buttons-button": "0.2.355-8",
8
- "@libs-ui/components-list": "0.2.355-8",
9
- "@libs-ui/components-popover": "0.2.355-8",
6
+ "@libs-ui/components-badge": "0.2.356-0",
7
+ "@libs-ui/components-buttons-button": "0.2.356-0",
8
+ "@libs-ui/components-list": "0.2.356-0",
9
+ "@libs-ui/components-popover": "0.2.356-0",
10
10
  "rxjs": "~7.8.0",
11
- "@libs-ui/interfaces-types": "0.2.355-8",
12
- "@libs-ui/utils": "0.2.355-8",
11
+ "@libs-ui/interfaces-types": "0.2.356-0",
12
+ "@libs-ui/utils": "0.2.356-0",
13
13
  "@ngx-translate/core": "^15.0.0",
14
- "@libs-ui/pipes-call-function-in-template": "0.2.355-8",
15
- "@libs-ui/components-drag-drop": "0.2.355-8",
16
- "@libs-ui/services-http-request": "0.2.355-8"
14
+ "@libs-ui/pipes-call-function-in-template": "0.2.356-0",
15
+ "@libs-ui/components-drag-drop": "0.2.356-0",
16
+ "@libs-ui/services-http-request": "0.2.356-0"
17
17
  },
18
18
  "sideEffects": false,
19
19
  "module": "fesm2022/libs-ui-components-tabs.mjs",