Framework snippets for Toast static functions

capitec · Jul 3, 2023 · 51b30e9 · 51b30e9
1 parent 04c2c68
commit 51b30e9
Showing 1 changed file with 118 additions and 0 deletions.
diff --git a/src/toast/Toast.stories.ts b/src/toast/Toast.stories.ts
@@ -105,6 +105,42 @@ document.querySelector('omni-button').addEventListener('click', () => {
 });`
             }
         },
+        {
+            framework: 'Vue',
+            sourceParts: {
+                htmlFragment: raw`<omni-button label="Show Toast" @click="showToast"></omni-button>`,
+                jsFragment: `import { Toast } from '@capitec/omni-components/toast';
+
+window.vueData = {
+    showToast: () => {
+        Toast.show({
+            type: 'success',
+            header: 'Success!',
+            detail: 'It was successful.',
+            closeable: true,
+            duration: 3000
+        });
+    }
+};`
+            }
+        },
+        {
+            framework: 'Lit',
+            sourceParts: {
+                htmlFragment: raw`<omni-button label="Show Toast" @click="\${showToast}"></omni-button>`,
+                jsFragment: `import { Toast } from '@capitec/omni-components/toast';
+
+const showToast = () => {
+    Toast.show({
+        type: 'success',
+        header: 'Success!',
+        detail: 'It was successful.',
+        closeable: true,
+        duration: 3000
+    });
+}`
+            }
+        },
         {
             framework: 'React',
             load: (args) => `import { OmniButton } from "@capitec/omni-components-react/button";
@@ -175,6 +211,50 @@ document.querySelector('omni-button').addEventListener('click', () => {
 });`
             }
         },
+        {
+            framework: 'Vue',
+            sourceParts: {
+                htmlFragment: raw`<omni-button label="Show Toast" @click="showToast"></omni-button>`,
+                jsFragment: `import { Toast } from '@capitec/omni-components/toast';
+
+Toast.configure({
+    position: 'top'
+});
+
+window.vueData = {
+    showToast: () => {
+        Toast.show({
+            type: 'success',
+            header: 'Success!',
+            detail: 'It was successful.',
+            closeable: true,
+            duration: 3000
+        });
+    }
+};`
+            }
+        },
+        {
+            framework: 'Lit',
+            sourceParts: {
+                htmlFragment: raw`<omni-button label="Show Toast" @click="\${showToast}"></omni-button>`,
+                jsFragment: `import { Toast } from '@capitec/omni-components/toast';
+
+Toast.configure({
+    position: 'top'
+});
+
+const showToast = () => {
+    Toast.show({
+        type: 'success',
+        header: 'Success!',
+        detail: 'It was successful.',
+        closeable: true,
+        duration: 3000
+    });
+}`
+            }
+        },
         {
             framework: 'React',
             load: (args) => `import { OmniButton } from "@capitec/omni-components-react/button";
@@ -247,6 +327,44 @@ document.querySelector('omni-button').addEventListener('click', () => {
 });`
             }
         },
+        {
+            framework: 'Vue',
+            sourceParts: {
+                htmlFragment: raw`<omni-button label="Show Toast" @click="showToast"></omni-button>`,
+                jsFragment: `import { Toast } from '@capitec/omni-components/toast';
+
+window.vueData = {
+    showToast: () => {
+        Toast.show({
+            stack: true,
+            type: 'success',
+            header: 'Success!',
+            detail: 'It was successful.',
+            closeable: true,
+            duration: 3000
+        });
+    }
+};`
+            }
+        },
+        {
+            framework: 'Lit',
+            sourceParts: {
+                htmlFragment: raw`<omni-button label="Show Toast" @click="\${showToast}"></omni-button>`,
+                jsFragment: `import { Toast } from '@capitec/omni-components/toast';
+
+const showToast = () => {
+    Toast.show({
+        stack: true,
+        type: 'success',
+        header: 'Success!',
+        detail: 'It was successful.',
+        closeable: true,
+        duration: 3000
+    });
+}`
+            }
+        },
         {
             framework: 'React',
             load: (args) => `import { OmniButton } from "@capitec/omni-components-react/button";