#215 Import app toaster

.storybook/preview.ts

@@ -5,6 +5,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { VlUiCore, VlUiUtil } from '@govflanders/vl-ui-design-system-vue3';
 import { setup } from '@storybook/vue3';
+import { createPinia } from 'pinia';
 import type { Preview } from '@storybook/vue3';
 
 library.add(fas);
@@ -14,6 +15,7 @@ library.add(fab);
 setup((app) => {
   app.use(VlUiCore);
   app.use(VlUiUtil);
+  app.use(createPinia());
 });
 
 const preview: Preview = {

src/components/dumb/OeToaster.vue

@@ -0,0 +1,36 @@
+<template>
+  <vl-toaster mod-top-right>
+    <vl-alert
+      v-for="toast in store.toasts"
+      :key="toast.id"
+      mod-small
+      :icon="toast.type === 'success' ? 'check' : 'warning'"
+      :mod-error="toast.type === 'error'"
+      :mod-success="toast.type === 'success'"
+      :mod-warning="toast.type === 'warning'"
+      mod-fade-out
+      closable
+      close-text="Toast sluiten"
+      :title="toast.title"
+      @close="store.removeToast(toast?.id as string)"
+    >
+      <template v-if="typeof toast.content === 'string'">
+        {{ toast.content }}
+      </template>
+      <template v-else>
+        <ul>
+          <li v-for="message in toast.content" :key="message">
+            {{ message }}
+          </li>
+        </ul>
+      </template>
+    </vl-alert>
+  </vl-toaster>
+</template>
+
+<script setup lang="ts">
+import { VlAlert, VlToaster } from '@govflanders/vl-ui-design-system-vue3';
+import { useUtilStore } from '@/composables';
+
+const store = useUtilStore();
+</script>

src/components/dumb/index.ts

@@ -14,6 +14,7 @@ import OeHeader from './OeHeader.vue';
 import OeLoader from './OeLoader.vue';
 import OeSelect from './OeSelect.vue';
 import OeTinyMce from './OeTinyMCE.vue';
+import OeToaster from './OeToaster.vue';
 import OeWizard from './OeWizard.vue';
 import SystemFields from './SystemFields.vue';
 
@@ -34,6 +35,7 @@ export {
   OeLoader,
   OeSelect,
   OeTinyMce,
+  OeToaster,
   OeWizard,
   SystemFields,
 };

src/stories/dumb-components/toaster.stories.ts

@@ -0,0 +1,68 @@
+import '@/scss/main.scss';
+import { useUtilStore } from '@/composables';
+import { OeButton } from '@components/dumb';
+import OeToaster from '@components/dumb/OeToaster.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import type { ToastType } from '@models/toast';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta: Meta<typeof OeToaster> = {
+  title: 'Dumb components/Toaster',
+  component: OeToaster,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        height: '250px',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OeToaster>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Tabs: Story = {
+  parameters: {
+    docs: {
+      story: {
+        height: '500px',
+      },
+      description: {
+        story: 'The component displays all toasts that are pushed to the `UtilStore` in the upper right corner.',
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      OeToaster,
+      OeButton,
+    },
+    setup: () => {
+      const utilStore = useUtilStore();
+      const showToast = (type: ToastType) => {
+        utilStore.addToast({
+          title: 'Title',
+          content: 'Content',
+          type,
+        });
+      };
+
+      return { showToast };
+    },
+    template: `
+    <oe-button class="vl-u-spacer-bottom" @click="showToast('error')">Push error toast to util store</oe-button><br/>
+    <oe-button class="vl-u-spacer-bottom" @click="showToast('success')">Push success toast to util store</oe-button><br/>
+    <oe-button class="vl-u-spacer-bottom" @click="showToast('warning')">Push warning toast to util store</oe-button><br/>
+    <oe-button class="vl-u-spacer-bottom" @click="showToast">Push default toast to util store</oe-button><br/>
+    <oe-toaster />
+    `,
+  }),
+};