Add progress-bar

app/components/progress-bar.hbs

@@ -1,3 +1,9 @@
-<div class="w-full">
-  <div class="bg-base-5 h-1.5"></div>
+<div
+  {{animate
+    (hash width=(array '100%' '0%'))
+    (hash duration=@duration fill='forwards')
+    onFinish=@onFinish
+  }}
+>
+  <div class='bg-base-5 h-1.5' ...attributes></div>
 </div>

app/components/task-toast.hbs

@@ -1,4 +1,4 @@
-<Toast>
+<Toast @autoClose={{this.autoClose}} @onClose={{@onClose}} @closeIndicatorClass={{this.bg}} as |toast|>
   <div class='flex items-center'>
     {{#if this.icon}}
       <div
@@ -30,7 +30,7 @@
       class='ml-auto self-start'
       {{! data-dismiss-target='#toast-default' }}
       aria-label='Close'
-      {{on 'click' @onClose}}
+      {{on 'click' toast.triggerOnClose}}
     >
       <Icons::Close />
     </button>

app/components/task-toast.js

@@ -9,6 +9,7 @@ export default class TaskToastComponent extends Component {
   @service meilisearch;
 
   @tracked task;
+  @tracked autoClose;
 
   constructor(owner, args) {
     super(owner, args);
@@ -31,16 +32,41 @@ export default class TaskToastComponent extends Component {
     }
   }
 
+  get status() {
+    if (this.isEnqueued) {
+      return 'info';
+    } else if (this.isFailed) {
+      return 'danger';
+    } else if (this.isSucceeded) {
+      return 'success';
+    } else {
+      return null;
+    }
+  }
+
   get color() {
-    switch (this.taskStatus) {
-      case 'enqueued':
-        return 'text-info';
-      case 'succeeded':
-        return 'text-success';
-      case 'failed':
-        return 'text-danger';
-      default:
-        return null;
+    // Current classes need for taiwind builder
+    if (this.isEnqueued) {
+      return 'text-info';
+    } else if (this.isFailed) {
+      return 'text-danger';
+    } else if (this.isSucceeded) {
+      return 'text-success';
+    } else {
+      return null;
+    }
+  }
+
+  get bg() {
+    // Current classes need for taiwind builder
+    if (this.isEnqueued) {
+      return 'bg-info';
+    } else if (this.isFailed) {
+      return 'bg-danger';
+    } else if (this.isSucceeded) {
+      return 'bg-success';
+    } else {
+      return null;
     }
   }
 
@@ -75,6 +101,7 @@ export default class TaskToastComponent extends Component {
 
       if (this.isSucceeded) {
         this.clearInterval();
+        this.autoClose = true;
       }
     });
   }

app/components/toast.hbs

@@ -9,8 +9,12 @@
     <div class='p-4'>
       {{yield (hash triggerOnClose=this.triggerOnClose)}}
     </div>
-    {{!-- {{#if this.autoCloseDuration}} --}}
-    <ProgressBar @value={{this.autoCloseDuration}} />
-    {{!-- {{/if}} --}}
+    {{#if @autoClose}}
+      <ProgressBar
+        @duration={{this.autoCloseDuration}}
+        @onFinish={{this.triggerOnClose}}
+        class={{@closeIndicatorClass}}
+      />
+    {{/if}}
   </div>
 {{/in-element}}

app/components/toast.js

@@ -13,10 +13,6 @@ export default class ToastComponent extends Component {
   @tracked width;
   @tracked height;
 
-  get autoCloseValue() {
-    return this.args?.autoCloseDuration ?? 3000;
-  }
-
   get autoCloseDuration() {
     return this.args?.autoCloseDuration ?? 3000;
   }

app/modifiers/animate.js

@@ -0,0 +1,15 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(
+  (element, [keyframes, timing], { onFinish, onCancel }) => {
+    const animation = element.animate(keyframes, timing);
+
+    animation.finished
+      .then(() => onFinish?.())
+      .catch((error) => onCancel?.(error));
+
+    return () => {
+      animation.cancel();
+    };
+  }
+);

package.json

@@ -71,6 +71,7 @@
     "ember-headlessui": "^0.13.0",
     "ember-load-initializers": "^2.1.2",
     "ember-mdi": "2.0.0-beta.1",
+    "ember-modifier": "4.0.0-beta.1",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
     "ember-resources": "^4.7.1",