feat: Enhance demo components with improved layout, styling, and functionality for login and dashboard views

ts_web/elements/dees-simple-appdash.demo.ts

@@ -1,21 +1,184 @@
-import { html } from '@design.estate/dees-element';
+import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
 import type { IView } from './dees-simple-appdash.js';
+import './dees-form.js';
+import './dees-input-text.js';
+import './dees-input-checkbox.js';
+import './dees-form-submit.js';
+
+// Create demo view components
+@customElement('demo-view-dashboard')
+class DemoViewDashboard extends DeesElement {
+  static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 40px;
+      }
+      h1 {
+        margin: 0 0 20px 0;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+      }
+      .stat-card {
+        background: ${cssManager.bdTheme('#fff', '#111')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-radius: 8px;
+        padding: 20px;
+        text-align: center;
+      }
+      .stat-value {
+        font-size: 32px;
+        font-weight: bold;
+        color: ${cssManager.bdTheme('#26a69a', '#26a69a')};
+      }
+      .stat-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin-top: 8px;
+      }
+    `
+  ];
+  
+  render() {
+    return html`
+      <h1>Dashboard</h1>
+      <p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value">1,234</div>
+          <div class="stat-label">Active Users</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">56.7k</div>
+          <div class="stat-label">Page Views</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">89%</div>
+          <div class="stat-label">Uptime</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">3.2s</div>
+          <div class="stat-label">Avg Response</div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+@customElement('demo-view-analytics')
+class DemoViewAnalytics extends DeesElement {
+  static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 40px;
+      }
+      h1 {
+        margin: 0 0 20px 0;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+    `
+  ];
+  
+  render() {
+    return html`
+      <h1>Analytics</h1>
+      <p>This is the analytics view. You can add charts and metrics here.</p>
+    `;
+  }
+}
+
+@customElement('demo-view-settings')
+class DemoViewSettings extends DeesElement {
+  static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 40px;
+      }
+      h1 {
+        margin: 0 0 20px 0;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+      .settings-section {
+        margin-top: 30px;
+      }
+      .settings-section h2 {
+        font-size: 18px;
+        margin: 0 0 15px 0;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+    `
+  ];
+  
+  render() {
+    return html`
+      <h1>Settings</h1>
+      <p>Configure your application settings below:</p>
+      
+      <div class="settings-section">
+        <h2>General Settings</h2>
+        <dees-form>
+          <dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
+          <dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
+          <dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
+          <dees-form-submit>Save Settings</dees-form-submit>
+        </dees-form>
+      </div>
+    `;
+  }
+}
 
 export const demoFunc = () => html`
-  <dees-simple-appdash
-    .viewTabs=${[
-      {
-        name: 'View 1',
-        element: null,
-      },
-      {
-        name: 'View 2',
-        element: null,
-      },
-      {
-        name: 'View 3',
-        element: null,
-      }
-    ] as IView[]}
-  >Hello there</dees-simple-appdash>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    .demo-container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+  <div class="demo-container">
+    <dees-simple-appdash
+      name="My Application"
+      terminalSetupCommand="echo 'Welcome to the terminal!'"
+      .viewTabs=${[
+        {
+          name: 'Dashboard',
+          iconName: 'home',
+          element: DemoViewDashboard,
+        },
+        {
+          name: 'Analytics',
+          iconName: 'lineChart',
+          element: DemoViewAnalytics,
+        },
+        {
+          name: 'Settings',
+          iconName: 'settings',
+          element: DemoViewSettings,
+        }
+      ] as IView[]}
+      @logout=${() => {
+        console.log('Logout event triggered');
+        alert('Logout clicked!');
+      }}
+      @view-select=${(e: CustomEvent) => {
+        console.log('View selected:', e.detail.view.name);
+      }}
+    ></dees-simple-appdash>
+  </div>
 `;