update

ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.demo.ts

@@ -0,0 +1,99 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      padding: 24px;
+      background: hsl(240 10% 4%);
+      min-height: 400px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .output-area {
+      background: hsl(240 5% 12%);
+      border-radius: 8px;
+      padding: 16px;
+      min-height: 100px;
+      color: hsl(0 0% 95%);
+      font-family: monospace;
+      font-size: 16px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .output-label {
+      color: hsl(0 0% 60%);
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    .keyboard-wrapper {
+      height: 260px;
+    }
+    .event-log {
+      background: hsl(240 5% 8%);
+      border-radius: 8px;
+      padding: 12px;
+      color: hsl(0 0% 70%);
+      font-family: monospace;
+      font-size: 12px;
+      max-height: 100px;
+      overflow-y: auto;
+    }
+  </style>
+  <div class="demo-container">
+    <div>
+      <div class="output-label">Typed text:</div>
+      <div class="output-area" id="typed-output">|</div>
+    </div>
+    <div>
+      <div class="output-label">Event log:</div>
+      <div class="event-log" id="event-log"></div>
+    </div>
+    <div class="keyboard-wrapper">
+      <eco-applauncher-keyboard
+        visible
+        @key-press=${(e: CustomEvent) => {
+          const output = document.getElementById('typed-output');
+          const log = document.getElementById('event-log');
+          if (output && log) {
+            const currentText = output.textContent?.replace('|', '') || '';
+            if (e.detail.type === 'special') {
+              if (e.detail.key === 'Backspace') {
+                output.textContent = currentText.slice(0, -1) + '|';
+              } else if (e.detail.key === 'Enter') {
+                output.textContent = currentText + '\n|';
+              }
+            } else {
+              output.textContent = currentText + e.detail.key + '|';
+            }
+            log.textContent = `key-press: ${JSON.stringify(e.detail)}\n` + log.textContent;
+          }
+        }}
+        @backspace=${() => {
+          const log = document.getElementById('event-log');
+          if (log) {
+            log.textContent = `backspace\n` + log.textContent;
+          }
+        }}
+        @enter=${() => {
+          const log = document.getElementById('event-log');
+          if (log) {
+            log.textContent = `enter\n` + log.textContent;
+          }
+        }}
+        @space=${() => {
+          const log = document.getElementById('event-log');
+          if (log) {
+            log.textContent = `space\n` + log.textContent;
+          }
+        }}
+        @arrow=${(e: CustomEvent) => {
+          const log = document.getElementById('event-log');
+          if (log) {
+            log.textContent = `arrow: ${e.detail.direction}\n` + log.textContent;
+          }
+        }}
+      ></eco-applauncher-keyboard>
+    </div>
+  </div>
+`;