BulmaToast component

ui/package.json

@@ -27,9 +27,11 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",
     "@vueuse/core": "^10.5.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.5.0",
     "bulma": "^0.9.4",
     "bulma-prefers-dark": "^0.1.0-beta.1",
+    "bulma-toast": "^2.4.3",
     "chai": "^4.2.0",
     "core-js": "^3.32.2",
     "eslint": "^8.49.0",

ui/src/components/bulma/Toast.vue

@@ -0,0 +1,43 @@
+<template>
+  <div style="display: none">
+    <div v-bind="$attrs" ref="message">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import * as bulmaToast from "bulma-toast";
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  emits: ["handle"],
+})
+export default class extends Vue {
+  public created(): void {
+    this.$emit("handle", this);
+  }
+
+  public show(options: bulmaToast.Options = {}) {
+    if (!(this.$refs.message instanceof HTMLElement)) return;
+
+    bulmaToast.toast({
+      ...options,
+      single: true,
+      message: this.$refs.message,
+    });
+  }
+
+  public hide() {
+    if (!(this.$refs.message instanceof HTMLElement)) return;
+
+    const toast_div = this.$refs.message.parentElement;
+    if (!(toast_div instanceof HTMLDivElement)) return;
+
+    const dbutton = toast_div.querySelector("button.delete");
+    if (!(dbutton instanceof HTMLButtonElement)) return;
+
+    dbutton.click();
+  }
+}
+</script>

ui/src/main.scss

@@ -26,6 +26,7 @@ $card-background-color-dark: $background-dark;
 // main imports
 //==============
 
+@import "~animate.css/animate";
 @import "~bulma/bulma";
 @import "~bulma-prefers-dark/bulma-prefers-dark";
 

ui/src/main.ts

@@ -1,6 +1,7 @@
 import { Advent22Plugin } from "@/plugins/advent22";
 import { FontAwesomePlugin } from "@/plugins/fontawesome";
 import { advent22Store } from "@/plugins/store";
+import * as bulmaToast from "bulma-toast";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import App from "./App.vue";
@@ -16,3 +17,13 @@ app.use(createPinia());
 advent22Store().init();
 
 app.mount("#app");
+
+bulmaToast.setDefaults({
+  duration: 10000,
+  pauseOnHover: true,
+  dismissible: true,
+  closeOnClick: false,
+  type: "is-white",
+  position: "top-center",
+  animate: { in: "backInDown", out: "backOutUp" },
+});

ui/yarn.lock

@@ -2205,6 +2205,11 @@ ajv@^8.0.0, ajv@^8.9.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-colors@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -2503,6 +2508,11 @@ bulma-prefers-dark@^0.1.0-beta.1:
   resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
   integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
 
+bulma-toast@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/bulma-toast/-/bulma-toast-2.4.3.tgz#cd302ad5ed625f47d7426b48b741250950e1cbf9"
+  integrity sha512-OpNn3MUD27ne8RkQns3yS7HaltU5/s67ivbdxAb/gXjxmfZhIdoeUFPYkopEXwCpzc+VasYy1OAglGIFvjEvUQ==
+
 bulma@^0.9.4:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"