feat(demo): snack-bar

Author: MM25Zamanian

demo/snack-bar/scripts.ts

@@ -1,60 +1,60 @@
 import {SnackBarManager, gecutButton} from '@gecut/components';
+import {numberUtils} from '@gecut/utilities/data-types/number.js';
 import {render, html} from 'lit/html.js';
 
-const sbm = new SnackBarManager({
-  position: {
-    bottom: '0px',
-    left: '0px',
-    right: '0px',
+const manager = new SnackBarManager({
+  style: {
+    position: 'fixed',
+    right: 0,
+    left: 0,
+    maxWidth: '640px',
+    margin: '0 auto',
+    bottom: '5rem',
   },
 });
 
-const id1 = 'id1';
-const id2 = 'id2';
-
-sbm.connect(id1, {
-  message: 'Hello ' + id1,
-  close: true,
+manager.connect('hello', {
+  message: 'Hello',
 });
 
-sbm.connect(id2, {
-  message:
-    // eslint-disable-next-line max-len
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ' +
-    id2,
-  action: {
-    label: 'Longer Action',
-  },
-});
+for (let index = 0; index < 3; index++) {
+  manager.notify({
+    message: 'Fuck you ' + index,
+    close: numberUtils.random.number(1, 0) > 0,
+  });
+  manager.notify({
+    message:
+      // eslint-disable-next-line max-len
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam maecenas ultricies mi eget mauris pharetra et.',
+
+    action: {
+      label: 'Save',
+    },
+  });
+}
 
 render(
   html`
     <div class="mx-auto max-w-sm flex flex-col gap-4 relative h-full w-full">
-      ${sbm.html}
-      ${gecutButton({
-        type: 'filled',
-        label: 'Push 1',
-        events: {
-          click: () => {
-            sbm.open(id1);
-          },
-        },
-      })}
+      ${manager.html}
       ${gecutButton({
         type: 'filled',
-        label: 'Push 2',
+        label: 'Open',
         events: {
           click: () => {
-            sbm.open(id2);
+            manager.open('hello');
           },
         },
       })}
       ${gecutButton({
         type: 'filled',
-        label: 'Remove 1',
+        label: 'Notify',
         events: {
           click: () => {
-            sbm.disconnect(id1);
+            manager.notify({
+              message: 'Fuck you',
+              close: true,
+            });
           },
         },
       })}