initial

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

@@ -0,0 +1,98 @@
+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-note {
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      margin-top: 0.5rem;
+    }
+  </style>
+
+  <div class="demo-section">
+    <h3>Action Sheet</h3>
+    <dees-mobile-button
+      @click=${(e: Event) => {
+        const container = (e.target as HTMLElement).parentElement;
+        const existing = container?.querySelector('dees-mobile-actionsheet');
+        if (existing) existing.remove();
+
+        const sheet = document.createElement('dees-mobile-actionsheet');
+        (sheet as any).title = 'Add Photo';
+        (sheet as any).options = [
+          {
+            id: 'camera',
+            icon: 'camera',
+            iconColor: 'var(--dees-primary)',
+            iconBackground: 'rgba(59, 130, 246, 0.1)',
+            title: 'Take Photo',
+            subtitle: 'Use camera to capture a new photo'
+          },
+          {
+            id: 'gallery',
+            icon: 'image',
+            iconColor: '#16a34a',
+            iconBackground: '#dcfce7',
+            title: 'Choose from Gallery',
+            subtitle: 'Select an existing photo'
+          }
+        ];
+        sheet.addEventListener('close', () => sheet.remove());
+        sheet.addEventListener('select', (ev: any) => {
+          console.log('Selected:', ev.detail);
+          sheet.remove();
+        });
+        document.body.appendChild(sheet);
+      }}
+    >Show Photo Options</dees-mobile-button>
+    <p class="demo-note">Opens an iOS-style action sheet from the bottom of the screen.</p>
+  </div>
+
+  <div class="demo-section">
+    <h3>Share Options</h3>
+    <dees-mobile-button
+      variant="outline"
+      @click=${(e: Event) => {
+        const sheet = document.createElement('dees-mobile-actionsheet');
+        (sheet as any).title = 'Share';
+        (sheet as any).options = [
+          {
+            id: 'copy',
+            icon: 'copy',
+            title: 'Copy Link'
+          },
+          {
+            id: 'email',
+            icon: 'mail',
+            title: 'Send via Email'
+          },
+          {
+            id: 'message',
+            icon: 'message-circle',
+            title: 'Send Message'
+          }
+        ];
+        sheet.addEventListener('close', () => sheet.remove());
+        sheet.addEventListener('select', (ev: any) => {
+          console.log('Share via:', ev.detail);
+          sheet.remove();
+        });
+        document.body.appendChild(sheet);
+      }}
+    >Share Options</dees-mobile-button>
+  </div>
+`;
+};