@indexeddb-orm/idb-orm 0.0.1

package/angular-demo-app/src/app/components/live-query-demo.component.ts

@@ -0,0 +1,307 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component, Input,
+} from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { PostEntity } from 'src/entities/post.entity';
+
+import { ProfileEntity } from '../../entities/profile.entity';
+import { UserEntity } from '../../entities/user.entity';
+
+@Component({
+  selector: 'app-live-query-demo',
+  standalone: true,
+  imports: [CommonModule, MatCardModule, MatIconModule],
+  template: `
+    <div class="live-query-paper">
+      <div class="demo-grid">
+        <div class="demo-section">
+          <div class="section-paper">
+            <h3 class="section-title">
+              <mat-icon color="primary" class="section-icon">bar_chart</mat-icon>
+              Statistics (number | undefined)
+            </h3>
+            <div class="stats-content">
+              <p>
+              <strong>
+              Total users:</strong> {{ userStats.totalUsers ?? 'Loading...' }}</p>
+              <p>
+              <strong>
+              Adult users:</strong> {{ userStats.adultUsers ?? 'Loading...' }}</p>
+              <p>
+              <strong>First user:</strong> {{ userStats.firstUser ?? 'None' }}</p>
+              <p>
+              <strong>
+              All users (live):</strong> {{ allUsers?.length ?? 'Loading...' }}</p>
+              <p><strong>Posts:</strong> {{ allPosts?.length ?? 'Loading...' }}</p>
+              <p>
+              <strong>
+              Profiles:</strong> {{ allProfiles?.length ?? 'Loading...' }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <div class="section-paper">
+            <h3 class="section-title">
+              <mat-icon color="primary" class="section-icon">people</mat-icon>
+              Users with profiles (UserEntity with profile)
+            </h3>
+            <div
+            class="users-content"
+            *ngIf="usersWithProfiles && usersWithProfiles.length > 0"
+            >
+              <div *ngFor="let user of usersWithProfiles" class="user-card">
+                <div class="user-name">{{ user.name }}</div>
+                <div class="user-email">{{ user.email }}</div>
+                <div
+                class="user-profile"
+                *ngIf="user.profile">{{ user.profile.bio }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <div class="section-paper">
+            <h3 class="section-title">
+              <mat-icon color="primary" class="section-icon">person</mat-icon>
+              All users (live)
+            </h3>
+            <div class="users-content" *ngIf="allUsers && allUsers.length > 0">
+              <div *ngFor="let user of allUsers" class="user-simple">
+                <strong>{{ user.name }}</strong> — {{ user.email }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="posts-section" *ngIf="allPosts && allPosts.length > 0">
+        <h3 class="posts-title">
+          <mat-icon class="section-icon">article</mat-icon>
+          Posts (PostEntity[])
+        </h3>
+        <div class="posts-content">
+          <div *ngFor="let post of allPosts" class="post-item">
+            <div class="post-title">{{ post.title }}</div>
+            <div class="post-meta">
+              <mat-icon
+               *ngIf="post.published"
+               color="success" class="post-icon">check_circle
+               </mat-icon>
+              <mat-icon *ngIf="!post.published" class="post-icon">article</mat-icon>
+              <mat-icon color="error" class="post-icon">favorite</mat-icon>
+              {{ post.likes }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="typing-test-section">
+        <div class="typing-test-content">
+          <p><strong>
+          Typing test:
+          </strong> All variables are fully typed with TypeScript!</p>
+          <p><strong>
+          Reactivity:
+          </strong> Data updates automatically when you add/remove records!</p>
+          <p><strong>
+          Compatibility:
+          </strong> Your library works perfectly with useLiveQuery!</p>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .live-query-paper {
+      padding: 24px;
+      margin: 24px 0;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 4px;
+      background-color: #fff;
+    }
+
+    .demo-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      align-items: stretch;
+    }
+
+    @media (min-width: 960px) {
+      .demo-grid {
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: 1fr;
+      }
+    }
+
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .section-paper {
+      padding: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 4px;
+      background-color: #fff;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 1.1rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .section-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .stats-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .stats-content p {
+      margin: 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .users-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .user-card {
+      padding: 12px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 4px;
+      background-color: #fff;
+    }
+
+    .user-name {
+      font-weight: 600;
+      font-size: 0.875rem;
+      margin-bottom: 4px;
+    }
+
+    .user-email {
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+      margin-bottom: 4px;
+    }
+
+    .user-profile {
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    .user-simple {
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .posts-section {
+      margin-top: 24px;
+    }
+
+    .posts-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 16px 0;
+      font-size: 1.1rem;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .posts-content {
+      padding: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 4px;
+      background-color: #fff;
+      max-height: 180px;
+      overflow-y: auto;
+    }
+
+    .post-item {
+      padding-bottom: 8px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .post-item:last-child {
+      border-bottom: none;
+    }
+
+    .post-title {
+      font-weight: 600;
+      font-size: 0.875rem;
+      margin-bottom: 4px;
+    }
+
+    .post-meta {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    .post-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .typing-test-section {
+      margin-top: 16px;
+    }
+
+    .typing-test-content {
+      padding: 16px;
+      background-color: #e8f5e8;
+      border-radius: 4px;
+    }
+
+    .typing-test-content p {
+      margin: 0 0 8px 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .typing-test-content p:last-child {
+      margin-bottom: 0;
+    }
+  `],
+})
+export class LiveQueryDemoComponent {
+  @Input() usersWithProfiles: (UserEntity & { profile?: ProfileEntity })[] = [];
+  @Input() allUsers: UserEntity[] = [];
+  @Input() allPosts: PostEntity[] = [];
+  @Input() allProfiles: ProfileEntity[] = [];
+  @Input() userStats: {
+    totalUsers: number;
+    adultUsers: number;
+    firstUser: string;
+  } = { totalUsers: 0, adultUsers: 0, firstUser: '' };
+}

package/angular-demo-app/src/app/components/main-info.component.ts

@@ -0,0 +1,148 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-main-info',
+  standalone: true,
+  imports: [MatCardModule, MatButtonModule, MatIconModule],
+  template: `
+    <div class="overview-paper">
+      <div class="paper-header">
+        <h2 class="paper-title">
+          <mat-icon color="primary">autorenew</mat-icon>
+          Dexie ORM for IndexedDB — Overview
+        </h2>
+        <p class="paper-subtitle">
+          TypeScript ORM
+          built on the latest Dexie 4 with first-class type safety
+          and Zod runtime validation.
+        </p>
+      </div>
+
+      <div class="features-grid">
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">code</mat-icon>
+          <span><strong>Entity config</strong> via defineEntity()</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">storage</mat-icon>
+          <span><strong>Automatic schema</strong> with PK, indexes, unique</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">people</mat-icon>
+          <span><strong>Relations</strong> with helpers</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">science</mat-icon>
+          <span><strong>Zod validation</strong> at runtime</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">assessment</mat-icon>
+          <span><strong>Aggregations</strong> (count, avg, sum)</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">bar_chart</mat-icon>
+          <span><strong>Live queries</strong> with useLiveQuery()</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">code</mat-icon>
+          <span><strong>TypeScript</strong> full type safety</span>
+        </div>
+        <div class="feature-item">
+          <mat-icon color="primary" class="feature-icon">cloud_sync</mat-icon>
+          <span><strong>Cloud sync</strong> with Dexie Cloud</span>
+        </div>
+      </div>
+
+      <div class="documentation-section">
+        <button mat-stroked-button
+                (click)="openDocumentation()"
+                class="doc-button">
+          <mat-icon>open_in_new</mat-icon>
+          View full documentation
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .overview-paper {
+      padding: 16px;
+      margin-bottom: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 4px;
+      background-color: #fff;
+    }
+
+    .paper-header {
+      margin-bottom: 16px;
+    }
+
+    .paper-title {
+      font-size: 1.25rem;
+      font-weight: 500;
+      margin: 0 0 8px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .paper-subtitle {
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.6);
+      margin: 0 0 16px 0;
+      line-height: 1.5;
+    }
+
+    .features-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+
+    @media (max-width: 600px) {
+      .features-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .feature-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .feature-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+
+    .documentation-section {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .doc-button {
+      text-transform: none !important;
+      font-size: 0.875rem;
+      padding: 8px 16px;
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      background-color: transparent;
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    .doc-button:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  `],
+})
+export class MainInfoComponent {
+  openDocumentation(): void {
+    window.open('https://github.com/radommaciej/indexed-db-orm/blob/main/README.md', '_blank');
+  }
+}