@libs-ui/components-scroll-measure-items-direction-horizontal 0.2.355-9 → 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 (4) hide show
  1. package/README.md +115 -2
  2. package/esm2022/index.mjs +2 -1
  3. package/index.d.ts +1 -0
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,3 +1,116 @@
1
- # scroll-measure-items-direction-horizontal
1
+ # @libs-ui/components-scroll-measure-items-direction-horizontal
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ > Directive hỗ trợ ảo hóa danh sách (virtual scrolling) theo chiều ngang với kích thước item động (dynamic width).
4
+
5
+ ## Giới thiệu
6
+
7
+ `LibsUiScrollMeasureItemDirectionHorizontalDirective` là một directive giúp tối ưu hóa hiệu năng khi render danh sách lớn các item theo chiều ngang. Nó chỉ render các item đang nằm trong vùng nhìn thấy (viewport) và sử dụng các element ảo để duy trì kích thước scroll, đồng thời hỗ trợ các hàm điều khiển scroll mạnh mẽ.
8
+
9
+ ### Tính năng
10
+
11
+ - ✅ **Virtual Scrolling**: Chỉ render các item trong viewport, giúp giảm số lượng DOM node.
12
+ - ✅ **Dynamic Width**: Hỗ trợ item có kích thước thay đổi (không cố định) thông qua hàm đo kích thước bất đồng bộ.
13
+ - ✅ **Scroll Control API**: Cung cấp các phương thức `scrollToIndex`, `scrollToPosition`, `scrollInto` item cụ thể.
14
+ - ✅ **Performance**: Tối ưu hóa cho danh sách lớn (hàng nghìn item).
15
+
16
+ ## Khi nào sử dụng
17
+
18
+ - Hiển thị danh sách ảnh, thẻ, hoặc item theo chiều ngang với số lượng lớn.
19
+ - Kích thước các item không đều nhau (ví dụ: text dài ngắn khác nhau).
20
+ - Cần tính năng scroll đến item cụ thể hoặc index cụ thể.
21
+
22
+ ## Cài đặt
23
+
24
+ ```bash
25
+ # npm
26
+ npm install @libs-ui/components-scroll-measure-items-direction-horizontal
27
+
28
+ # yarn
29
+ yarn add @libs-ui/components-scroll-measure-items-direction-horizontal
30
+ ```
31
+
32
+ ## Import
33
+
34
+ ```typescript
35
+ import { LibsUiScrollMeasureItemDirectionHorizontalDirective } from '@libs-ui/components-scroll-measure-items-direction-horizontal';
36
+
37
+ @Component({
38
+ standalone: true,
39
+ imports: [LibsUiScrollMeasureItemDirectionHorizontalDirective],
40
+ // ...
41
+ })
42
+ export class YourComponent {}
43
+ ```
44
+
45
+ ## Ví dụ
46
+
47
+ ### Basic Usage
48
+
49
+ ```html
50
+ <div
51
+ #scrollContainer
52
+ class="scroll-container flex overflow-x-auto"
53
+ LibsUiScrollMeasureItemDirectionHorizontalDirective
54
+ [elementScroll]="scrollContainer"
55
+ [items]="items"
56
+ [functionGetWidthItem]="measureWidth"
57
+ (outViewPortItem)="viewPortItems = $event">
58
+ @for (item of viewPortItems; track item.id) {
59
+ <div
60
+ class="item"
61
+ [style.width.px]="item.width">
62
+ {{ item.text }}
63
+ </div>
64
+ }
65
+ </div>
66
+ ```
67
+
68
+ ```typescript
69
+ items = [...]; // Data source
70
+ viewPortItems = []; // Items processed for display
71
+
72
+ // Function to measure item width (async)
73
+ measureWidth = async (item: any): Promise<number> => {
74
+ // Logic to calculate width, e.g., based on content length or fixed rules
75
+ return item.text.length * 10 + 20;
76
+ };
77
+ ```
78
+
79
+ ## API
80
+
81
+ ### LibsUiScrollMeasureItemDirectionHorizontalDirective
82
+
83
+ #### Inputs
84
+
85
+ | Property | Type | Default | Description |
86
+ | ------------------------ | -------------------------------- | ---------- | ----------------------------------------------- |
87
+ | `[items]` | `Array<any>` | `required` | Danh sách dữ liệu gốc cần hiển thị. |
88
+ | `[elementScroll]` | `HTMLElement` | `required` | Element chứa thanh cuộn (container chính). |
89
+ | `[functionGetWidthItem]` | `(item: any) => Promise<number>` | `required` | Hàm async trả về chiều rộng (px) của từng item. |
90
+
91
+ #### Outputs
92
+
93
+ | Property | Type | Description |
94
+ | ---------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------- |
95
+ | `(outViewPortItem)` | `Array<Record<string, any>>` | Emit danh sách item cần render trong viewport. Item gốc nằm trong property `ref`. |
96
+ | `(outFunctionControl)` | `IScrollMeasureItemDirectionHorizontalFunctionsControl` | Emit controller chứa các hàm điều khiển scroll. |
97
+ | `(outDivVirtual)` | `HTMLDivElement` | Emit element ảo được tạo ra để giữ chiều rộng scroll của container. |
98
+
99
+ #### Interfaces
100
+
101
+ **IScrollMeasureItemDirectionHorizontalFunctionsControl**
102
+
103
+ | Method | Description |
104
+ | --------------------------------------------------- | -------------------------------------------------------------------------- |
105
+ | `scrollInto(item: any): Promise<void>` | Scroll đến item cụ thể. |
106
+ | `scrollToPosition(position: number): Promise<void>` | Scroll đến vị trí pixel cụ thể. |
107
+ | `scrollToIndex(index: number): Promise<void>` | Scroll đến item tại index cụ thể. |
108
+ | `reCalculatorViewPort(): Promise<void>` | Tính toán lại viewport (dùng khi kích thước container hoặc item thay đổi). |
109
+
110
+ ## Demo
111
+
112
+ ```bash
113
+ npx nx serve core-ui
114
+ ```
115
+
116
+ Truy cập path: `/components/scroll-measure-items/direction-horizontal`
package/esm2022/index.mjs CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './direction-horizontal.directive';
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc2Nyb2xsLW1lYXN1cmUtaXRlbXMvZGlyZWN0aW9uLWhvcml6b250YWwvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0NBQWtDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2RpcmVjdGlvbi1ob3Jpem9udGFsLmRpcmVjdGl2ZSc7XG4iXX0=
2
+ export * from './interfaces/direction-horizontal.interface';
3
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvc2Nyb2xsLW1lYXN1cmUtaXRlbXMvZGlyZWN0aW9uLWhvcml6b250YWwvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyw2Q0FBNkMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vZGlyZWN0aW9uLWhvcml6b250YWwuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9kaXJlY3Rpb24taG9yaXpvbnRhbC5pbnRlcmZhY2UnO1xuIl19
package/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './direction-horizontal.directive';
2
+ export * from './interfaces/direction-horizontal.interface';
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@libs-ui/components-scroll-measure-items-direction-horizontal",
3
- "version": "0.2.355-9",
3
+ "version": "0.2.356-0",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/utils": "0.2.355-9",
6
+ "@libs-ui/utils": "0.2.356-0",
7
7
  "rxjs": "~7.8.0"
8
8
  },
9
9
  "sideEffects": false,