feat: use new model inputs and outputs

tutkli · Apr 1, 2024 · 8ce68e1 · 8ce68e1
1 parent fece2ab
commit 8ce68e1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 54 deletions.
diff --git a/apps/docs/src/app/app.component.ts b/apps/docs/src/app/app.component.ts
@@ -36,15 +36,9 @@ import { UsageComponent } from './components/usage.component';
         <docs-installation />
         <docs-usage />
         <docs-types />
-        <docs-position
-          [position]="position()"
-          (positionChange)="position.set($event)" />
-        <docs-expand [expand]="expand()" (expandChange)="expand.set($event)" />
-        <docs-other
-          [richColors]="richColors()"
-          (richColorsChange)="richColors.set($event)"
-          [closeButton]="closeButton()"
-          (closeButtonChange)="closeButton.set($event)" />
+        <docs-position [(position)]="position" />
+        <docs-expand [(expand)]="expand" />
+        <docs-other [(richColors)]="richColors" [(closeButton)]="closeButton" />
       </div>
     </main>
     <docs-footer />

diff --git a/apps/docs/src/app/components/expand.component.ts b/apps/docs/src/app/components/expand.component.ts
@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
@@ -41,8 +39,7 @@ import { CodeBlockComponent } from './code-block.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpandComponent {
-  expand = input.required<boolean>();
-  @Output() expandChange = new EventEmitter<boolean>();
+  expand = model.required<boolean>();
 
   expandSnippet = computed(
     () => `<ngx-sonner-toaster [expand]="${this.expand()}" />`
@@ -52,13 +49,13 @@ export class ExpandComponent {
     toast('Event has been created', {
       description: 'Monday, January 3rd at 6:00pm',
     });
-    this.expandChange.emit(true);
+    this.expand.set(true);
   }
 
   collapseToasts() {
     toast('Event has been created', {
       description: 'Monday, January 3rd at 6:00pm',
     });
-    this.expandChange.emit(false);
+    this.expand.set(false);
   }
 }
diff --git a/apps/docs/src/app/components/other.component.ts b/apps/docs/src/app/components/other.component.ts
@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
   signal,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
@@ -39,43 +37,40 @@ import { TestComponent } from './test.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OtherComponent {
-  closeButton = input.required<boolean>();
-  @Output() closeButtonChange = new EventEmitter<boolean>();
-
-  richColors = input.required<boolean>();
-  @Output() richColorsChange = new EventEmitter<boolean>();
+  closeButton = model.required<boolean>();
+  richColors = model.required<boolean>();
 
   allTypes = [
     {
       name: 'Rich Colors Success',
       snippet: "toast.success('Event has been created')",
       action: () => {
         toast.success('Event has been created');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Error',
       snippet: "toast.error('Event has not been created')",
       action: () => {
         toast.error('Event has not been created');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Info',
       snippet: "toast.info('Info')",
       action: () => {
         toast.info('Be at the area 10 minutes before the event time');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Warning',
       snippet: "toast.warning('Warning')",
       action: () => {
         toast.warning('Event start time cannot be earlier than 8am');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
@@ -87,7 +82,7 @@ export class OtherComponent {
         toast('Event has been created', {
           description: 'Monday, January 3rd at 6:00pm',
         });
-        this.closeButtonChange.emit(!this.closeButton());
+        this.closeButton.set(!this.closeButton());
       },
     },
     {

diff --git a/apps/docs/src/app/components/position.component.ts b/apps/docs/src/app/components/position.component.ts
@@ -2,13 +2,22 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
 
+const positions = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+] as const;
+
+type Position = (typeof positions)[number];
+
 @Component({
   selector: 'docs-position',
   standalone: true,
@@ -33,36 +42,26 @@ import { CodeBlockComponent } from './code-block.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PositionComponent {
-  positions = [
-    'top-left',
-    'top-center',
-    'top-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right',
-  ] as const;
-
-  position = input.required<(typeof this.positions)[number]>();
+  protected positions = positions;
 
-  @Output() positionChange = new EventEmitter<
-    (typeof this.positions)[number]
-  >();
+  position = model.required<Position>();
 
   positionSnippet = computed(
     () => `<ngx-sonner-toaster position="${this.position()}" />`
   );
 
-  showToast(position: (typeof this.positions)[number]) {
+  showToast(position: Position) {
     const toastsAmount = document.querySelectorAll(
       '[data-sonner-toast]'
     ).length;
-    this.positionChange.emit(position);
 
     // No need to show a toast when there is already one
-    if (toastsAmount > 0 && position !== this.position()) return;
+    if (toastsAmount === 0 || position === this.position()) {
+      toast('Event has been created', {
+        description: 'Monday, January 3rd at 6:00pm',
+      });
+    }
 
-    toast('Event has been created', {
-      description: 'Monday, January 3rd at 6:00pm',
-    });
+    this.position.set(position);
   }
 }
diff --git a/apps/docs/src/app/components/test.component.ts b/apps/docs/src/app/components/test.component.ts
@@ -1,9 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   input,
-  Output,
+  output,
 } from '@angular/core';
 
 @Component({
@@ -75,5 +74,5 @@ import {
 })
 export class TestComponent {
   eventName = input.required<string>();
-  @Output() closeToast = new EventEmitter<void>();
+  closeToast = output<void>();
 }