@libs-ui/components-process-bar-standard 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.
- package/README.md +129 -2
- package/esm2022/index.mjs +2 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,130 @@
|
|
|
1
|
-
# process-bar-standard
|
|
1
|
+
# @libs-ui/components-process-bar-standard
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component hiển thị tiến trình dạng thanh (stack hoặc separate) với hỗ trợ Steps linh hoạt.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsProcessBarStandardComponent` là một standalone Angular component được thiết kế để hiển thị các thanh tiến trình (progress bar). Component hỗ trợ 2 chế độ chính: **Stack** (các bước nối liền nhau) và **Separate** (các bước tách rời). Đặc biệt component tích hợp sâu với **Angular Signals** để tối ưu hóa hiệu năng render.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ 2 Chế độ hiển thị: Stack & Separate
|
|
12
|
+
- ✅ Hỗ trợ Nested Signals cho các bước (Steps)
|
|
13
|
+
- ✅ Auto Calculate Percentage
|
|
14
|
+
- ✅ Custom Label & Styling cho từng bước
|
|
15
|
+
- ✅ OnPush Change Detection
|
|
16
|
+
- ✅ Standalone Component
|
|
17
|
+
- ✅ Angular Signals Native
|
|
18
|
+
|
|
19
|
+
## Khi nào sử dụng
|
|
20
|
+
|
|
21
|
+
- Hiển thị tiến trình download/upload.
|
|
22
|
+
- Hiển thị trạng thái của quy trình đa bước (Stack).
|
|
23
|
+
- Hiển thị so sánh các chỉ số (Separate).
|
|
24
|
+
- Hiển thị dashboard widget với dữ liệu realtime.
|
|
25
|
+
|
|
26
|
+
## Cài đặt
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
# npm
|
|
30
|
+
npm install @libs-ui/components-process-bar-standard
|
|
31
|
+
|
|
32
|
+
# yarn
|
|
33
|
+
yarn add @libs-ui/components-process-bar-standard
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Import
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { LibsUiComponentsProcessBarStandardComponent } from '@libs-ui/components-process-bar-standard';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
standalone: true,
|
|
43
|
+
imports: [LibsUiComponentsProcessBarStandardComponent],
|
|
44
|
+
// ...
|
|
45
|
+
})
|
|
46
|
+
export class YourComponent {}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Ví dụ
|
|
50
|
+
|
|
51
|
+
### Basic Stack
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<libs_ui-components-process_bar-standard [config]="config" />
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
// Define Steps
|
|
59
|
+
const step1 = signal<IProcessBarStandardStepInterface>({ value: 30, color: '#EF4444' });
|
|
60
|
+
const step2 = signal<IProcessBarStandardStepInterface>({ value: 50, color: '#3B82F6' });
|
|
61
|
+
|
|
62
|
+
// Config
|
|
63
|
+
readonly config = signal<IProcessBarStandardInterface>({
|
|
64
|
+
width: '100%',
|
|
65
|
+
totalValue: 100,
|
|
66
|
+
mode: 'stack',
|
|
67
|
+
steps: signal([step1, step2])
|
|
68
|
+
});
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## API
|
|
72
|
+
|
|
73
|
+
### libs_ui-components-process_bar-standard
|
|
74
|
+
|
|
75
|
+
#### Inputs
|
|
76
|
+
|
|
77
|
+
| Property | Type | Default | Description |
|
|
78
|
+
| ---------- | ------------------------------------------- | ---------- | ------------------------------------------- |
|
|
79
|
+
| `[config]` | `InputSignal<IProcessBarStandardInterface>` | `Required` | Object configuration chứa toàn bộ settings. |
|
|
80
|
+
|
|
81
|
+
#### IProcessBarStandardInterface
|
|
82
|
+
|
|
83
|
+
| Property | Type | Description |
|
|
84
|
+
| ----------------- | ---------------------------------------- | ------------------------------------------------ |
|
|
85
|
+
| `width` | `string` | Chiều rộng component (vd: '100%'). |
|
|
86
|
+
| `height` | `string` | Chiều cao component. |
|
|
87
|
+
| `backgroundColor` | `string` | Màu nền của container (unused in separate mode). |
|
|
88
|
+
| `radius` | `number` | Độ bo góc (px). |
|
|
89
|
+
| `totalValue` | `number` | Giá trị tổng để tính phần trăm. |
|
|
90
|
+
| `mode` | `'stack' \| 'separate'` | Chế độ hiển thị. |
|
|
91
|
+
| `steps` | `WritableSignal<WritableSignal<Step>[]>` | Array các steps (Signals). |
|
|
92
|
+
| `classInclude` | `string` | Custom class cho container. |
|
|
93
|
+
| `showPercent` | `boolean` | Hiển thị phần trăm (Separate mode). |
|
|
94
|
+
|
|
95
|
+
#### IProcessBarStandardStepInterface
|
|
96
|
+
|
|
97
|
+
| Property | Type | Description |
|
|
98
|
+
| -------------- | --------- | ----------------------------------------- |
|
|
99
|
+
| `value` | `number` | Giá trị của bước. |
|
|
100
|
+
| `color` | `string` | Màu sắc của bước. |
|
|
101
|
+
| `label` | `string` | Label hiển thị. |
|
|
102
|
+
| `classInclude` | `string` | Custom class cho step bar. |
|
|
103
|
+
| `classLabel` | `string` | Custom class cho label. |
|
|
104
|
+
| `showPercent` | `boolean` | Override hiển thị phần trăm cho step này. |
|
|
105
|
+
|
|
106
|
+
## Types & Interfaces
|
|
107
|
+
|
|
108
|
+
```typescript
|
|
109
|
+
import { IProcessBarStandardInterface, IProcessBarStandardStepInterface } from '@libs-ui/components-process-bar-standard';
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Styling
|
|
113
|
+
|
|
114
|
+
Component sử dụng inline styles cho các thuộc tính dynamic (width, height, color) và TailwindCSS cho layout cơ bản.
|
|
115
|
+
|
|
116
|
+
## Công nghệ
|
|
117
|
+
|
|
118
|
+
| Technology | Version | Purpose |
|
|
119
|
+
| --------------- | ------- | ---------------- |
|
|
120
|
+
| Angular | 18+ | Framework |
|
|
121
|
+
| Angular Signals | - | State management |
|
|
122
|
+
| OnPush | - | Change Detection |
|
|
123
|
+
|
|
124
|
+
## Demo
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
npx nx serve core-ui
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Truy cập path: `/components/process-bar/standard` (tùy thuộc vào config routing của bạn).
|
package/esm2022/index.mjs
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export * from './process-bar-standard.component';
|
|
2
|
-
|
|
2
|
+
export * from './process-bar-standard.interface';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RhbmRhcmQvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxrQ0FBa0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vcHJvY2Vzcy1iYXItc3RhbmRhcmQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vcHJvY2Vzcy1iYXItc3RhbmRhcmQuaW50ZXJmYWNlJztcbiJdfQ==
|
package/index.d.ts
CHANGED