Add notification component

dev/serve.vue

@@ -18,6 +18,11 @@ export default defineComponent({
     return {
       text: "",
       results: [],
+      error: {
+        text: "mehr text",
+        variant: "danger",
+        dismissible: true,
+      },
     };
   },
   methods: {
@@ -33,6 +38,7 @@ export default defineComponent({
           );
         });
     },
+
     doSomething: function(evt) {
       console.log(evt);
     },
@@ -59,7 +65,13 @@ export default defineComponent({
         <panel-with-sidebox sideboxWidth="200px">
           <template v-slot:default>
             <h1>Component examples</h1>
+
             <row-entry label="Something">Test</row-entry>
+            <notification modelValue="text" />
+            <notification
+              :modelValue="{ text: 'mehr text', variant: 'danger' }"
+            />
+            <notification v-model="error" />
             <form-group-text-box
               v-model="text"
               label="Input data"

src/lib-components/Notification.vue

+<template>
+  <div :class="classes" role="alert" ref="alert">
+    {{ text }}
+    <button
+      v-if="dismissible"
+      type="button"
+      class="btn-close"
+      data-bs-dismiss="alert"
+      aria-label="Close"
+    ></button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { modelValue: { type: Object, default: () => {} } },
+  mounted: function() {
+    if (this.$refs.alert) {
+      this.$refs.alert.addEventListener("closed.bs.alert", this.disable);
+    }
+  },
+  methods: {
+    disable: function() {
+      this.$emit("update:modelValue", null);
+      console.log("click");
+    },
+  },
+  computed: {
+    classes: function() {
+      let classes = "alert alert-" + this.variant + " fade show";
+      if (this.dismissible) {
+        classes += " alert-dismissible";
+      }
+      return classes;
+    },
+    text: function() {
+      if (this.modelValue && typeof this.modelValue === "string") {
+        return this.modelValue;
+      } else {
+        if (this.modelValue && "text" in this.modelValue) {
+          return this.modelValue.text;
+        } else {
+          return "Illegal notification message structure";
+        }
+      }
+    },
+    variant: function() {
+      if (
+        this.modelValue &&
+        typeof this.modelValue === "object" &&
+        "variant" in this.modelValue
+      ) {
+        return this.modelValue.variant;
+      } else {
+        return "info";
+      }
+    },
+    dismissible: function() {
+      if (
+        this.modelValue &&
+        typeof this.modelValue === "object" &&
+        "dismissible" in this.modelValue
+      ) {
+        return this.modelValue.dismissible;
+      } else {
+        return false;
+      }
+    },
+  },
+};
+</script>
+
+<style></style>

src/lib-components/index.js

@@ -16,3 +16,4 @@ export { default as SidebarButton } from "./SidebarButton.vue";
 export { default as SidebarEntry } from "./SidebarEntry.vue";
 export { default as SidebarHeading } from "./SidebarHeading.vue";
 export { default as SidebarList } from "./SidebarList.vue";
+export { default as Notification } from "./Notification.vue";