@libs-ui/components-component-outlet 0.2.357-7 → 0.2.357-9

package/README.md

@@ -131,6 +131,33 @@ configTemplateText: signal({
 
 ## Ví dụ sử dụng
 
+### Ví dụ 0 — Base component (Deprecated, chỉ tham khảo)
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
+import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
+
+// KHÔNG sử dụng trực tiếp — base component có template rỗng, không render gì
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsComponentOutletComponent],
+  template: `
+    <!-- Base component không render UI -->
+    <libs_ui-components-component_outlet
+      [item]="sampleData()"
+    />
+  `,
+})
+export class ExampleComponent {
+  readonly sampleData = signal<TYPE_OBJECT>({
+    id: 1,
+    name: 'Sample Item',
+  });
+}
+```
+
 ### Ví dụ 1 — Custom status component trong List (Cách mới)
 
 ```typescript
@@ -269,6 +296,132 @@ listConfig = signal({
 });
 ```
 
+### Ví dụ 4 — Real-World: List Component với custom cell extend base (Legacy)
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
+import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
+import { of } from 'rxjs';
+
+// 1. Tạo Custom Cell Component extend base
+@Component({
+  selector: 'app-custom-list-item',
+  standalone: true,
+  template: `
+    <div class="flex items-center gap-2">
+      <span class="font-bold">{{ item().name }}</span>
+      <span class="text-xs text-gray-500">ID: {{ item().id }}</span>
+      @if (item().status === 'active') {
+        <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">
+          Active
+        </span>
+      }
+    </div>
+  `,
+})
+export class CustomListItemComponent extends LibsUiComponentsComponentOutletComponent {
+  // Inherit input 'item' từ base component
+}
+
+// 2. Sử dụng trong List Config
+@Component({
+  selector: 'app-list-example',
+  standalone: true,
+  imports: [LibsUiComponentsListComponent],
+  template: `
+    <libs_ui-components-list
+      [config]="listConfig()"
+      (outSelectedKey)="onItemSelected($event)"
+    />
+  `,
+})
+export class ListExampleComponent {
+  readonly listConfig = signal({
+    type: 'text',
+    configTemplateText: signal({
+      fieldKey: 'id',
+      // Trả về custom component class
+      getComponentOutlet: () => of(CustomListItemComponent),
+      // Trả về data cho component
+      getDataComponentOutlet: (item: any) => item,
+    }),
+  });
+
+  onItemSelected(event: any) {
+    console.log('Selected:', event);
+  }
+}
+```
+
+### Ví dụ 5 — Nhiều custom components trong List rows config (Legacy)
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
+import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
+import { of } from 'rxjs';
+
+// Status Cell Component
+@Component({
+  selector: 'app-status-cell',
+  standalone: true,
+  template: `
+    <span [class]="getStatusClass()">
+      {{ item().status }}
+    </span>
+  `,
+})
+export class StatusCellComponent extends LibsUiComponentsComponentOutletComponent {
+  getStatusClass(): string {
+    return this.item().status === 'active' ? 'text-green-600' : 'text-gray-400';
+  }
+}
+
+// Action Cell Component
+@Component({
+  selector: 'app-action-cell',
+  standalone: true,
+  template: `
+    <button (click)="handleAction()">
+      Action for {{ item().name }}
+    </button>
+  `,
+})
+export class ActionCellComponent extends LibsUiComponentsComponentOutletComponent {
+  handleAction(): void {
+    console.log('Action for:', this.item());
+  }
+}
+
+// Sử dụng trong List với rows config
+@Component({
+  standalone: true,
+  imports: [LibsUiComponentsListComponent],
+  template: `<libs_ui-components-list [config]="listConfig()" />`,
+})
+export class ListWithMultipleComponentsExample {
+  readonly listConfig = signal({
+    type: 'text',
+    configTemplateText: signal({
+      fieldKey: 'id',
+      rows: signal([
+        // Row 1: Status component
+        signal({
+          getComponentOutlet: () => of(StatusCellComponent),
+          getDataComponentOutlet: (item: any) => item,
+        }),
+        // Row 2: Action component
+        signal({
+          getComponentOutlet: () => of(ActionCellComponent),
+          getDataComponentOutlet: (item: any) => item,
+        }),
+      ]),
+    }),
+  });
+}
+```
+
 ---
 
 ## @Input()
@@ -313,11 +466,3 @@ const data: TYPE_COMPONENT_OUTLET_DATA = signal({ id: 1, name: 'Item A' });
 ⚠️ **Chỉ extend, không dùng trực tiếp**: Nếu render `<libs_ui-components-component_outlet [item]="data()">` trực tiếp, component sẽ không hiển thị gì cả do template rỗng.
 
 ---
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: [http://localhost:4500/components/component-outlet](http://localhost:4500/components/component-outlet)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-component-outlet",
-  "version": "0.2.357-7",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/interfaces-types": "0.2.357-7"
+    "@libs-ui/interfaces-types": "0.2.357-9"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-component-outlet.mjs",