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,13 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("unknown-route")
+export class UnknownRoute extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html` <main>
+      <header>404</header>
+    </main>`;
+  }
+}
@@ -0,0 +1,13 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("custom-route")
+export class CustomRoute extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html` <main>
+      <header>Custom</header>
+    </main>`;
+  }
+}
@@ -0,0 +1,35 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import '../components/menu-button.js';
+
+@customElement("dashboard-module")
+export class DashboardModule extends LitElement {
+  static styles = css`
+    header {
+      height: 40px;
+      background-color: orange;
+      color: white;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-left: 10px;
+      padding-right: 10px;
+      justify-content: space-between;
+    }
+  `;
+
+  render() {
+    return html`<main>
+      <header>
+        <menu-button></menu-button>
+        <span class="title">Dashboard</span>
+        <nav>
+          <a href="#/dashboard/overview">Overview</a>
+          <a href="#/dashboard/account/">Account</a>
+        </nav>
+      </header>
+      <section><slot></slot></section>
+    </main> `;
+  }
+}
@@ -0,0 +1,11 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("account-module")
+export class AccountModule extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html`<section><slot></slot></section>`;
+  }
+}
@@ -0,0 +1,33 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export async function loader(
+  route: string,
+  args: { [key: string]: any }
+): Promise<AccountData> {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  const id = args["id"]!;
+  return {
+    id,
+    route,
+    name: "Name: " + id,
+  };
+}
+
+@customElement("account-details")
+export class AccountDetails extends LitElement {
+  static styles = css``;
+
+  @property({ type: String }) id = "";
+  @property({ type: Object }) data!: AccountData;
+
+  render() {
+    return html`<section>${this.data.name}</section>`;
+  }
+}
+
+interface AccountData {
+  id: string;
+  route: string;
+  name: string;
+}
@@ -0,0 +1,22 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("account-info")
+export class AccountInfo extends LitElement {
+  static styles = css`
+    article {
+      padding: 16px;
+    }
+  `;
+
+  render() {
+    return html`<article>
+      <h3>Account Info</h3>
+      <ul>
+        <li><a href="#/dashboard/account/1">User 1</a></li>
+        <li><a href="#/dashboard/account/2">User 2</a></li>
+        <li><a href="#/dashboard/account/3">User 3</a></li>
+      </ul>
+    </article>`;
+  }
+}
@@ -0,0 +1,11 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("dashboard-default")
+export class DashboardDefault extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html`<section>Default Dashboard</section>`;
+  }
+}
@@ -0,0 +1,11 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("overview-module")
+export class OverviewModule extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html`<section>Overview</section>`;
+  }
+}
@@ -0,0 +1,24 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("app-module")
+export class AppModule extends LitElement {
+  static styles = css`
+    header {
+      height: 40px;
+      background-color: navy;
+      color: white;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-left: 10px;
+    }
+  `;
+
+  render() {
+    return html` <main>
+      <header>App Base</header>
+      <slot></slot>
+    </main>`;
+  }
+}
@@ -0,0 +1,36 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("root-module")
+export class RootModule extends LitElement {
+  static styles = css`
+    main {
+      display: flex;
+      flex-direction: row;
+      height: 100vh;
+      width: 100%;
+    }
+    aside {
+      display: flex;
+      flex-direction: column;
+      background-color: whitesmoke;
+      padding: 8px;
+    }
+    section {
+      flex: 1;
+    }
+  `;
+
+  render() {
+    return html`
+      <main>
+        <aside>
+          <a href="#/">Home</a>
+          <a href="#/dashboard">Dashboard</a>
+          <a href="#/settings">Settings</a>
+        </aside>
+        <section><slot></slot></section>
+      </main>
+    `;
+  }
+}
@@ -0,0 +1,31 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import "../components/menu-button.js";
+
+@customElement("settings-module")
+export class SettingsModule extends LitElement {
+  static styles = css`
+    header {
+      height: 40px;
+      background-color: black;
+      color: white;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-left: 10px;
+      justify-content: space-between;
+    }
+  `;
+
+  render() {
+    return html` <main>
+      <header>
+        <menu-button></menu-button>
+        <span class="title">Settings</span>
+        <div></div>
+      </header>
+      <slot></slot>
+    </main>`;
+  }
+}
@@ -0,0 +1,11 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("admin-settings")
+export class AdminSettings extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html`Admin Settings`;
+  }
+}
@@ -0,0 +1,11 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("settings-default")
+export class SettingsDefault extends LitElement {
+  static styles = css``;
+
+  render() {
+    return html`<section>Default Settings</section>`;
+  }
+}