fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes. - lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode. - lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
@@ -0,0 +1,94 @@
+import { html, css, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { RxDatabase, RxDocument } from "rxdb";
+import { actionButton } from "../components/app-bar";
+import { appDialog } from "../components/app-dialog";
+import { appScaffold } from "../components/app-scaffold";
+import { formBuilder, input, inputValue } from "../components/form-builder";
+import { listViewBuilder } from "../components/list-view";
+import { dbProvider, queryBuilder, Schema } from "../services/database";
+import { Todo } from "../services/todos";
+
+@customElement("todo-view")
+export class TodoView extends LitElement {
+  static styles = css``;
+  @state() showNew = false;
+
+  render() {
+    return dbProvider((db) => {
+      db.todos.$.subscribe(() => {
+        this.requestUpdate();
+      });
+      return appScaffold({
+        title: "TODOS",
+        root: this.shadowRoot!,
+        actions: [
+          actionButton("delete", async () => {
+            await db.todos.remove();
+            this.requestUpdate();
+          }),
+          actionButton("add", async () => {
+            this.showNew = !this.showNew;
+          }),
+        ],
+        body: () => {
+          return html`
+            ${queryBuilder<Todo>(db.todos.find(), (res) => {
+              if (Array.isArray(res)) {
+                return listViewBuilder(res, (item) => {
+                  return this.buildItem(db, item);
+                });
+              }
+              return this.buildItem(db, res);
+            })}
+            ${appDialog({
+              title: "New Todo",
+              open: this.showNew,
+              dismiss: () => {
+                if (this.showNew) this.showNew = false;
+              },
+              content: () => {
+                return html`
+                  ${formBuilder(
+                    html` ${input("title", "Title", { required: true })} `,
+                    async (form) => {
+                      await db.todos.insert({
+                        id: `${Date.now()}`,
+                        title: inputValue(form, "title"),
+                      });
+                      this.showNew = false;
+                    }
+                  )}
+                `;
+              },
+            })}
+          `;
+        },
+      });
+    });
+  }
+
+  buildItem(db: RxDatabase<Schema>, item: RxDocument<Todo>) {
+    return html` <div>
+      <input
+        .value=${item.title}
+        @change=${async (e: any) => {
+          const value = e.target.value;
+          await db.todos.upsert({
+            ...item.toJSON(),
+            title: value,
+          });
+          this.requestUpdate();
+        }}
+      />
+      <button
+        @click=${async () => {
+          await item.remove();
+          this.requestUpdate();
+        }}
+      >
+        Delete
+      </button>
+    </div>`;
+  }
+}