remove element when dismissed

Author: thedumbtechguy

app/assets/plutonium.js

@@ -20,7 +20,6 @@
 %>
 
 <div data-controller="resource-dismiss"
-    data-resource-dismiss-target="target"
     data-resource-dismiss-after-value="6000"
     class="flex items-center p-4 mb-4 text-<%= color %>-800 rounded-lg bg-<%= color %>-50 dark:bg-stone-300 dark:text-<%= color %>-400"
     role="alert">
@@ -45,7 +44,7 @@
   <div class="ms-3 text-sm font-normal"><%= msg %></div>
   <button type="button"
     class="ms-auto -mx-1.5 -my-1.5 bg-<%= color %>-50 text-<%= color %>-500 rounded-lg focus:ring-2 focus:ring-<%= color %>-400 p-1.5 hover:bg-<%= color %>-200 inline-flex items-center justify-center h-8 w-8 dark:bg-stone-300 dark:text-<%= color %>-400 dark:hover:bg-gray-700"
-    data-resource-dismiss-target="trigger"
+    data-action="click->resource-dismiss#dismiss"
     aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">

app/assets/plutonium.js.map

@@ -19,7 +19,6 @@
 %>
 
 <div data-controller="resource-dismiss"
-    data-resource-dismiss-target="target"
     data-resource-dismiss-after-value="6000"
     class="fixed z-50 top-16 inset-x-0 mx-auto flex items-center w-full max-w-md p-4 text-gray-500 bg-<%= color %>-50 rounded-lg shadow dark:text-<%= color %>-400 dark:bg-gray-800 dark:border dark:border-gray-700 dark:shadow-none"
     role="alert">
@@ -47,7 +46,7 @@
   <div class="ms-3 text-sm font-normal"><%= msg %></div>
   <button type="button"
     class="ms-auto -mx-1.5 -my-1.5 bg-<%= color %>-50 text-<%= color %>-400 rounded-lg focus:ring-2 focus:ring-<%= color %>-400 p-1.5 hover:bg-<%= color %>-200 inline-flex items-center justify-center h-8 w-8 dark:text-<%= color %>-400 dark:bg-gray-800 dark:hover:bg-gray-700"
-    data-resource-dismiss-target="trigger"
+    data-action="click->resource-dismiss#dismiss"
     aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">

app/assets/plutonium.min.js

@@ -1,26 +1,17 @@
 import { Controller } from "@hotwired/stimulus"
-import { Dismiss } from 'flowbite';
-
 
 // Connects to data-controller="resource-dismiss"
 export default class extends Controller {
-  static targets = ["trigger", "target"]
-
   static values = {
     after: Number,
   }
 
   connect() {
     console.log(`resource-dismiss connected: ${this.element}`)
 
-    // https://flowbite.com/docs/components/alerts/#javascript-behaviour
-    this.dismiss = new Dismiss(this.targetTarget, this.triggerTarget);
-
-    console.log(this.hasAfterValue)
-    console.log(this.afterValue)
     if (this.hasAfterValue && this.afterValue > 0) {
       this.autoDismissTimeout = setTimeout(() => {
-        this.hide()
+        this.dismiss()
         this.autoDismissTimeout = null
       }, this.afterValue);
     }
@@ -29,11 +20,10 @@ export default class extends Controller {
   disconnect() {
     if (this.autoDismissTimeout) clearTimeout(this.autoDismissTimeout)
 
-    this.dismiss = null
     this.autoDismissTimeout = null
   }
 
-  hide() {
-    this.dismiss.hide()
+  dismiss() {
+    this.element.remove()
   }
 }