yielding notification HTML

addon/components/flash-notification.hbs

@@ -3,38 +3,8 @@
   class="flash"
   popover="manual"
   {{on "toggle" this.onToggle}}
-  {{toggle-popover}}
+  {{show-popover duration=this.notifications.duration}}
   ...attributes
 >
-  <div class="p-4">
-    <div class="flex items-start">
-      <div class="flash-content">
-        <div class="flex pl-2">
-          <div class="flash-type">
-            {{#if @notification.isSuccess}}
-              <Icons::FasCircleCheck class="w-6 h-6 fill-white text-white" />
-            {{/if}}
-            {{#if @notification.isError}}
-              <Icons::FarCircleXmark class="w-6 h-6 fill-white text-white" />
-            {{/if}}
-            {{#if @notification.isWarning}}
-              <Icons::FasCircleExclamation class="w-6 h-6 fill-white text-white" />
-            {{/if}}
-            {{#if @notification.isInfo}}
-              <Icons::FasCircleInfo class="w-6 h-6 fill-white text-white" />
-            {{/if}}
-          </div>
-          <p class="text-base p-2">
-            {{@notification.message}}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="absolute top-2 right-2 flex-shrink-0 flex">
-    <button type="button" name="close" class="flash-close">
-      <span class="sr-only">Close</span>
-      <Icons::FasTimes class="h-5 w-5" />
-    </button>
-  </div>
+  {{yield @notification}}
 </div>

addon/components/flash-notification.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
 const closedState = 'closed';
 
@@ -8,6 +9,8 @@ const listenerOptions = {
 };
 
 export default class FlashNotificationComponent extends Component {
+  @service notifications;
+
   onToggle = (event) => {
     if (event.newState === closedState) {
       event.target.addEventListener(
@@ -22,7 +25,7 @@ export default class FlashNotificationComponent extends Component {
   };
 
   removeNotification = () => {
-    this.args.onClose(this.args.notification);
+    this.notifications.remove(this.args.notification);
   };
 
   close = (event) => {

addon/components/flash-notifications.hbs

@@ -1,11 +1,5 @@
 <div class="flash-list" aria-live="assertive" ...attributes>
   <div class="w-full flex flex-col items-start justify-start">
-    {{#each this.notifications.queue as |notification|}}
-      <FlashNotification
-        class={{notification.type}}
-        @notification={{notification}}
-        @onClose={{this.removeNotification}}
-      />
-    {{/each}}
+    {{yield this.notifications}}
   </div>
 </div>

addon/components/flash-notifications.js

@@ -3,8 +3,4 @@ import { inject as service } from '@ember/service';
 
 export default class NotificationsComponent extends Component {
   @service notifications;
-
-  removeNotification = (notification) => {
-    this.notifications.remove(notification);
-  };
 }

package.json

@@ -5,9 +5,15 @@
   "keywords": [
     "ember-addon"
   ],
-  "repository": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexeipanov/ember-essential-notifications.git"
+  },
   "license": "MIT",
-  "author": "",
+  "author": {
+    "name": "Alexei Panov",
+    "email": "a8panov@gmail.com"
+  },
   "directories": {
     "doc": "doc",
     "test": "tests"
@@ -69,6 +75,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-qunit": "^8.0.1",
     "loader.js": "^4.7.0",
+    "postcss-import": "^16.1.0",
     "prettier": "^3.2.4",
     "qunit": "^2.20.0",
     "qunit-dom": "^2.0.0",

tests/dummy/app/modifiers/toggle-popover.js → tests/dummy/app/modifiers/show-popover.js

@@ -1,32 +1,34 @@
 import Modifier from 'ember-modifier';
 import { cancel, later } from '@ember/runloop';
-import { inject as service } from '@ember/service';
 import { registerDestructor } from '@ember/destroyable';
 
 const cleanup = function (instance) {
   cancel(instance.closeTask);
 };
 
 export default class ShowPopover extends Modifier {
-  @service notifications;
-
   constructor() {
     super(...arguments);
     registerDestructor(this, cleanup);
   }
 
-  modify(element) {
+  // eslint-disable-next-line no-empty-pattern
+  modify(element, [], { duration = 0 }) {
     element.showPopover();
-    this.closeTask = this.autoClose(element);
+    this.closeTask = this.autoClose(element, duration);
   }
 
-  autoClose(element) {
+  autoClose(element, duration) {
     return later(
       this,
       function () {
+        if (!duration) {
+          return;
+        }
+
         element.hidePopover();
       },
-      this.notifications.duration,
+      duration,
     );
   }
 }

tests/dummy/app/templates/application.hbs

@@ -1,5 +1,48 @@
 {{page-title "Ember-essential-notifications"}}
-<FlashNotifications />
+
+<FlashNotifications as |notifications|>
+  {{#each notifications.queue as |notification|}}
+    <FlashNotification
+      class={{notification.type}}
+      @notification={{notification}}
+      @onClose={{this.removeNotification}}
+      as |notification|
+    >
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="flash-content">
+            <div class="flex pl-2">
+              <div class="flash-type">
+                {{#if notification.isSuccess}}
+                  <Icons::FasCircleCheck class="w-6 h-6 fill-white text-white" />
+                {{/if}}
+                {{#if notification.isError}}
+                  <Icons::FarCircleXmark class="w-6 h-6 fill-white text-white" />
+                {{/if}}
+                {{#if notification.isWarning}}
+                  <Icons::FasCircleExclamation class="w-6 h-6 fill-white text-white" />
+                {{/if}}
+                {{#if notification.isInfo}}
+                  <Icons::FasCircleInfo class="w-6 h-6 fill-white text-white" />
+                {{/if}}
+              </div>
+              <p class="text-base p-2">
+                {{notification.message}}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="absolute top-2 right-2 flex-shrink-0 flex">
+        <button type="button" name="close" class="flash-close">
+          <span class="sr-only">Close</span>
+          <Icons::FasTimes class="h-5 w-5" />
+        </button>
+      </div>
+    </FlashNotification>
+  {{/each}}
+</FlashNotifications>
+
 <div class="h-screen py-6 flex justify-center bg-slate-50 bg-gradient-to-br from-slate-50 to-sky-100 border">
   <main class="max-w-screen-xl h-full w-full bg-white border-sky-100">
     <div class="p-4">