advent22/ui/src/components/bulma/Toast.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="display: none">
    <div v-bind="$attrs" ref="message">
      <slot name="default" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Options as ToastOptions, toast } from "bulma-toast";
import { onMounted, useTemplateRef } from "vue";

export type HBulmaToast = {
  show(options: ToastOptions): void;
  hide(): void;
};

const emit = defineEmits<{
  (event: "handle", handle: HBulmaToast): void;
}>();

const message = useTemplateRef("message");

onMounted(() =>
  emit("handle", {
    show(options: ToastOptions = {}) {
      if (!(message.value instanceof HTMLElement)) return;

      toast({
        ...options,
        single: true,
        message: message.value,
      });
    },
    hide() {
      if (message.value === null) return;

      const toast_div = message.value.parentElement;
      if (toast_div === null) return;

      const dbutton = toast_div.querySelector("button.delete");
      if (!(dbutton instanceof HTMLButtonElement)) return;

      dbutton.click();
    },
  }),
);
</script>