initial

ts_web/elements/00group-ui/dees-mobile-toast/dees-mobile-toast.demo.ts

@@ -0,0 +1,103 @@
+import { html } from '@design.estate/dees-element';
+import { injectCssVariables } from '../../00variables.js';
+
+export const demoFunc = () => {
+  injectCssVariables();
+  return html`
+  <style>
+    .demo-section {
+      margin-bottom: 2rem;
+    }
+    .demo-section h3 {
+      margin: 0 0 1rem 0;
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .demo-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+  </style>
+
+  <div class="demo-section">
+    <h3>Toast Types</h3>
+    <div class="demo-row">
+      <dees-mobile-button
+        variant="outline"
+        @click=${() => {
+          const toast = document.createElement('dees-mobile-toast');
+          (toast as any).type = 'success';
+          (toast as any).message = 'Item saved successfully!';
+          toast.addEventListener('close', () => toast.remove());
+          document.body.appendChild(toast);
+        }}
+      >Success Toast</dees-mobile-button>
+
+      <dees-mobile-button
+        variant="outline"
+        @click=${() => {
+          const toast = document.createElement('dees-mobile-toast');
+          (toast as any).type = 'error';
+          (toast as any).message = 'Failed to save item. Please try again.';
+          toast.addEventListener('close', () => toast.remove());
+          document.body.appendChild(toast);
+        }}
+      >Error Toast</dees-mobile-button>
+
+      <dees-mobile-button
+        variant="outline"
+        @click=${() => {
+          const toast = document.createElement('dees-mobile-toast');
+          (toast as any).type = 'warning';
+          (toast as any).message = 'Your session will expire in 5 minutes.';
+          toast.addEventListener('close', () => toast.remove());
+          document.body.appendChild(toast);
+        }}
+      >Warning Toast</dees-mobile-button>
+
+      <dees-mobile-button
+        variant="outline"
+        @click=${() => {
+          const toast = document.createElement('dees-mobile-toast');
+          (toast as any).type = 'info';
+          (toast as any).message = 'New updates are available.';
+          toast.addEventListener('close', () => toast.remove());
+          document.body.appendChild(toast);
+        }}
+      >Info Toast</dees-mobile-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Custom Duration</h3>
+    <div class="demo-row">
+      <dees-mobile-button
+        variant="secondary"
+        @click=${() => {
+          const toast = document.createElement('dees-mobile-toast');
+          (toast as any).type = 'info';
+          (toast as any).message = 'This toast stays for 10 seconds.';
+          (toast as any).duration = 10000;
+          toast.addEventListener('close', () => toast.remove());
+          document.body.appendChild(toast);
+        }}
+      >Long Duration (10s)</dees-mobile-button>
+
+      <dees-mobile-button
+        variant="secondary"
+        @click=${() => {
+          const toast = document.createElement('dees-mobile-toast');
+          (toast as any).type = 'success';
+          (toast as any).message = 'Quick notification!';
+          (toast as any).duration = 1500;
+          toast.addEventListener('close', () => toast.remove());
+          document.body.appendChild(toast);
+        }}
+      >Short Duration (1.5s)</dees-mobile-button>
+    </div>
+  </div>
+`;
+};