@libs-ui/components-click-outside 0.2.357-7 → 0.2.357-9

package/README.md

@@ -51,28 +51,26 @@ import { Component } from '@angular/core';
 import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';
 
 @Component({
-  selector: 'app-basic-example',
+  selector: 'app-example',
   standalone: true,
   imports: [LibsUiComponentsClickOutsideDirective],
   template: `
     <div
       LibsUiComponentsClickOutsideDirective
-      (outOutside)="handlerClickOutside($event)"
-      (outInSide)="handlerClickInside($event)"
-      class="p-6 border-2 border-blue-500 rounded-lg">
-      <p>Click vào trong hoặc ngoài vùng này để thử</p>
+      (outOutside)="onClickOutside($event)"
+      (outInSide)="onClickInside($event)"
+      class="p-4 border-2 border-blue-500 rounded-lg">
+      <p>Click inside or outside this box</p>
     </div>
   `,
 })
-export class BasicExampleComponent {
-  handlerClickOutside(event: Event): void {
-    event.stopPropagation();
-    console.log('Đã click bên ngoài');
+export class ExampleComponent {
+  onClickOutside(event: Event): void {
+    console.log('Clicked outside!', event);
   }
 
-  handlerClickInside(event: Event): void {
-    event.stopPropagation();
-    console.log('Đã click bên trong');
+  onClickInside(event: Event): void {
+    console.log('Clicked inside!', event);
   }
 }
 ```
@@ -84,7 +82,6 @@ import { Component, signal } from '@angular/core';
 import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';
 
 @Component({
-  selector: 'app-dropdown-example',
   standalone: true,
   imports: [LibsUiComponentsClickOutsideDirective],
   template: `
@@ -98,7 +95,7 @@ import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click
       @if (isOpen()) {
         <div
           LibsUiComponentsClickOutsideDirective
-          (outOutside)="handlerClose($event)"
+          (outOutside)="isOpen.set(false)"
           class="absolute mt-2 w-48 bg-white border rounded-lg shadow-lg">
           <ul class="py-2">
             <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 1</li>
@@ -110,13 +107,8 @@ import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click
     </div>
   `,
 })
-export class DropdownExampleComponent {
+export class DropdownExample {
   readonly isOpen = signal<boolean>(false);
-
-  handlerClose(event: Event): void {
-    event.stopPropagation();
-    this.isOpen.set(false);
-  }
 }
 ```
 
@@ -127,41 +119,29 @@ import { Component, signal } from '@angular/core';
 import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';
 
 @Component({
-  selector: 'app-modal-example',
   standalone: true,
   imports: [LibsUiComponentsClickOutsideDirective],
   template: `
-    <button
-      (click)="showModal.set(true)"
-      class="px-4 py-2 bg-blue-500 text-white rounded">
-      Mở Modal
-    </button>
-
     @if (showModal()) {
       <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
         <div
           LibsUiComponentsClickOutsideDirective
-          (outOutside)="handlerCloseModal($event)"
-          class="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
-          <h3 class="text-lg font-semibold mb-4">Tiêu đề modal</h3>
-          <p class="text-gray-600 mb-4">Click ra ngoài vùng trắng này để đóng modal.</p>
+          (outOutside)="showModal.set(false)"
+          class="bg-white p-6 rounded-lg shadow-xl max-w-md">
+          <h3 class="text-lg font-semibold mb-4">Modal Title</h3>
+          <p class="text-gray-600 mb-4">Click outside to close this modal</p>
           <button
             (click)="showModal.set(false)"
-            class="px-4 py-2 bg-gray-200 rounded">
-            Đóng
+            class="px-4 py-2 bg-blue-500 text-white rounded">
+            Close
           </button>
         </div>
       </div>
     }
   `,
 })
-export class ModalExampleComponent {
+export class ModalExample {
   readonly showModal = signal<boolean>(false);
-
-  handlerCloseModal(event: Event): void {
-    event.stopPropagation();
-    this.showModal.set(false);
-  }
 }
 ```
 
@@ -172,31 +152,29 @@ import { Component, signal } from '@angular/core';
 import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';
 
 @Component({
-  selector: 'app-counter-example',
   standalone: true,
   imports: [LibsUiComponentsClickOutsideDirective],
   template: `
     <div
       LibsUiComponentsClickOutsideDirective
-      (outOutside)="handlerOutside($event)"
-      (outInSide)="handlerInside($event)"
-      class="p-6 border-2 border-purple-500 rounded-lg">
-      <p>Click bên trong: {{ insideCount() }}</p>
-      <p>Click bên ngoài: {{ outsideCount() }}</p>
+      (outOutside)="onClickOutside()"
+      (outInSide)="onClickInside()"
+      class="p-6 border-2 border-purple-500 rounded-lg bg-purple-50">
+      <h4 class="font-semibold mb-2">Click Counter</h4>
+      <p>Inside clicks: {{ insideCount() }}</p>
+      <p>Outside clicks: {{ outsideCount() }}</p>
     </div>
   `,
 })
-export class CounterExampleComponent {
+export class CounterExample {
   readonly insideCount = signal<number>(0);
   readonly outsideCount = signal<number>(0);
 
-  handlerInside(event: Event): void {
-    event.stopPropagation();
+  onClickInside(): void {
     this.insideCount.update((count) => count + 1);
   }
 
-  handlerOutside(event: Event): void {
-    event.stopPropagation();
+  onClickOutside(): void {
     this.outsideCount.update((count) => count + 1);
   }
 }
@@ -230,11 +208,3 @@ Directive được gắn vào element bằng **attribute selector**:
 ⚠️ **Không có @Input()**: Directive này không nhận bất kỳ input nào — chỉ cần gắn vào element và lắng nghe output.
 
 ⚠️ **Cleanup tự động**: Subscription được dọn dẹp qua `takeUntilDestroyed(destroyRef)` — không cần tự unsubscribe hay implement `ngOnDestroy`.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/directives/click-outside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libs-ui/components-click-outside",
-  "version": "0.2.357-7",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
     "rxjs": "~7.8.0"