@libs-ui/components-process-bar-standard 0.2.357-8 → 0.2.357-9

package/README.md

@@ -45,152 +45,109 @@ export class MyComponent {}
 
 ## Ví dụ sử dụng
 
-### Ví dụ 1 — Stack cơ bản (3 bước)
+### 1. Basic Stack
+
+Chế độ Stack cơ bản với nhiều bước.
+
+```html
+<libs_ui-components-process_bar-standard [config]="configBasic()" />
+```
 
 ```typescript
 import { signal } from '@angular/core';
-import {
-  LibsUiComponentsProcessBarStandardComponent,
-  IProcessBarStandardInterface,
-  IProcessBarStandardStepInterface,
-} from '@libs-ui/components-process-bar-standard';
+import { IProcessBarStandardInterface, IProcessBarStandardStepInterface } from '@libs-ui/components-process-bar-standard';
+
+// Define Steps as Signals
+const step1 = signal<IProcessBarStandardStepInterface>({ value: 30, color: '#EF4444', label: 'Processing' });
+const step2 = signal<IProcessBarStandardStepInterface>({ value: 50, color: '#3B82F6', label: 'Done' });
+
+// Config with nested signals
+readonly configBasic = signal<IProcessBarStandardInterface>({
+  width: '100%',
+  height: '24px',
+  radius: 12,
+  totalValue: 100,
+  mode: 'stack',
+  steps: signal([step1, step2])
+});
+```
 
-@Component({
-  standalone: true,
-  imports: [LibsUiComponentsProcessBarStandardComponent],
-  template: `
-    <libs_ui-components-process_bar-standard [config]="configStack()" />
-  `,
-})
-export class MyComponent {
-  private readonly stepProcessing = signal<IProcessBarStandardStepInterface>({
-    value: 30,
-    color: '#EF4444',
-    label: 'Processing',
-  });
-  private readonly stepDone = signal<IProcessBarStandardStepInterface>({
-    value: 50,
-    color: '#3B82F6',
-    label: 'Done',
-  });
-  private readonly stepPending = signal<IProcessBarStandardStepInterface>({
-    value: 20,
-    color: '#10B981',
-  });
+---
 
-  readonly configStack = signal<IProcessBarStandardInterface>({
-    width: '100%',
-    height: '24px',
-    radius: 12,
-    totalValue: 100,
-    mode: 'stack',
-    steps: signal([this.stepProcessing, this.stepDone, this.stepPending]),
-  });
-}
-```
+### 2. Separate Mode
+
+Chế độ Separate với các thanh riêng biệt.
 
 ```html
-<libs_ui-components-process_bar-standard [config]="configStack()" />
+<libs_ui-components-process_bar-standard [config]="configSeparate()" />
 ```
 
-### Ví dụ 2 — Separate mode với hiển thị phần trăm
-
 ```typescript
 import { signal } from '@angular/core';
-import {
-  LibsUiComponentsProcessBarStandardComponent,
-  IProcessBarStandardInterface,
-  IProcessBarStandardStepInterface,
-} from '@libs-ui/components-process-bar-standard';
+import { IProcessBarStandardInterface } from '@libs-ui/components-process-bar-standard';
+
+readonly configSeparate = signal<IProcessBarStandardInterface>({
+  width: '100%',
+  height: '16px',
+  backgroundColor: 'transparent',
+  radius: 8,
+  totalValue: 100,
+  mode: 'separate',
+  steps: signal([
+    signal({ value: 75, color: '#8B5CF6', label: 'Progress', showPercent: true }),
+    signal({ value: 45, color: '#F59E0B', label: 'Pending', showPercent: true }),
+  ])
+});
+```
 
-@Component({
-  standalone: true,
-  imports: [LibsUiComponentsProcessBarStandardComponent],
-  template: `
-    <libs_ui-components-process_bar-standard [config]="configSeparate()" />
-  `,
-})
-export class MyComponent {
-  private readonly stepProgress = signal<IProcessBarStandardStepInterface>({
-    value: 75,
-    color: '#8B5CF6',
-    label: 'Tiến độ',
-    showPercent: true,
-  });
-  private readonly stepPending = signal<IProcessBarStandardStepInterface>({
-    value: 45,
-    color: '#F59E0B',
-    label: 'Đang chờ',
-    showPercent: true,
-  });
+---
 
-  readonly configSeparate = signal<IProcessBarStandardInterface>({
-    width: '100%',
-    height: '16px',
-    backgroundColor: 'transparent',
-    radius: 8,
-    totalValue: 100,
-    mode: 'separate',
-    steps: signal([this.stepProgress, this.stepPending]),
-  });
-}
-```
+### 3. Interactive
+
+Thay đổi giá trị động realtime.
 
 ```html
-<libs_ui-components-process_bar-standard [config]="configSeparate()" />
+<div class="mb-4">
+  <input type="range" [(ngModel)]="interactiveValue" min="0" max="100">
+</div>
+<libs_ui-components-process_bar-standard [config]="configInteractive()" />
 ```
 
-### Ví dụ 3 — Cập nhật realtime bằng Nested Signals
-
 ```typescript
-import { signal, computed } from '@angular/core';
-import {
-  LibsUiComponentsProcessBarStandardComponent,
-  IProcessBarStandardInterface,
-  IProcessBarStandardStepInterface,
-} from '@libs-ui/components-process-bar-standard';
+import { signal, computed, effect, untracked } from '@angular/core';
+import { IProcessBarStandardInterface, IProcessBarStandardStepInterface } from '@libs-ui/components-process-bar-standard';
 
-@Component({
-  standalone: true,
-  imports: [LibsUiComponentsProcessBarStandardComponent],
-  template: `
-    <button (click)="handlerIncrement($event)">Tăng tiến độ</button>
-    <libs_ui-components-process_bar-standard [config]="configRealtime()" />
-  `,
-})
-export class MyComponent {
-  private readonly currentValue = signal(40);
+// [(ngModel)]="interactiveValue" — giá trị điều khiển bằng thanh trượt
+readonly interactiveValue = signal(40);
+readonly interactiveHeight = signal('20px');
+readonly interactiveRadius = signal(10);
 
-  private readonly stepMain = signal<IProcessBarStandardStepInterface>({
-    value: 40,
-    color: '#EC4899',
-    label: 'Đang xử lý',
-  });
+// Step cơ sở — value được đồng bộ tự động từ interactiveValue qua effect()
+readonly interactiveStep = signal<IProcessBarStandardStepInterface>({ value: 40, color: '#EC4899', label: 'Dynamic Base' });
 
-  readonly configRealtime = computed<IProcessBarStandardInterface>(() => ({
-    width: '100%',
-    height: '20px',
-    radius: 10,
-    totalValue: 100,
-    mode: 'stack',
-    steps: signal([this.stepMain]),
-  }));
-
-  protected handlerIncrement(event: Event): void {
-    event.stopPropagation();
-    const next = Math.min(this.currentValue() + 10, 100);
-    this.currentValue.set(next);
-    this.stepMain.update((step) => ({ ...step, value: next }));
-  }
+constructor() {
+  effect(() => {
+    const value = this.interactiveValue();
+    untracked(() => this.interactiveStep.update((s) => ({ ...s, value })));
+  });
 }
-```
 
-```html
-<button (click)="handlerIncrement($event)">Tăng tiến độ</button>
-<libs_ui-components-process_bar-standard [config]="configRealtime()" />
+// [config]="configInteractive()" — computed config dựa trên các signal tương tác
+readonly configInteractive = computed<IProcessBarStandardInterface>(() => ({
+  width: '100%',
+  height: this.interactiveHeight(),
+  radius: this.interactiveRadius(),
+  totalValue: 100,
+  mode: 'stack',
+  steps: signal([this.interactiveStep])
+}));
 ```
 
-### Ví dụ 4 — Global default config qua Injection Token
+> ⚠️ **FormsModule bắt buộc**: Ví dụ Interactive dùng `[(ngModel)]`, cần import `FormsModule` vào `imports[]` của component sử dụng.
+
+---
+
+### 4. Global default config qua Injection Token
 
 ```typescript
 import { ApplicationConfig } from '@angular/core';
@@ -318,11 +275,3 @@ export interface IProcessBarStandardStepInterface {
 ⚠️ **`showPercent` chỉ hoạt động ở chế độ `separate`**: Trong chế độ `stack`, thuộc tính `showPercent` (cả ở config lẫn từng step) không có hiệu lực vì cấu trúc layout không hỗ trợ.
 
 ⚠️ **Global default token**: Nếu inject `PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT`, các giá trị trong token sẽ là fallback khi thuộc tính tương ứng trong `[config]` không được truyền. Thứ tự ưu tiên: `config.xxx` > `tokenDefault.xxx` > hardcoded default.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/components/process-bar/standard

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-process-bar-standard",
-  "version": "0.2.357-8",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/utils": "0.2.357-8"
+    "@libs-ui/utils": "0.2.357-9"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-process-bar-standard.mjs",