@indexeddb-orm/idb-orm 0.0.1

package/vue-demo-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "indexeddb-orm-vue-demo-app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@mdi/font": "^7.4.47",
+    "idb-orm": "^0.0.1",
+    "vue": "^3.4.0",
+    "vuetify": "^3.5.0",
+    "zod": "^4.1.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "~5.8.3",
+    "vite": "^5.4.0",
+    "vite-plugin-vuetify": "^2.0.0",
+    "vue-tsc": "^2.0.0"
+  }
+}

package/vue-demo-app/src/App.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-app>
+    <v-app-bar color="primary" dark>
+      <v-app-bar-nav-icon
+        v-if="!display.mdAndUp.value"
+        @click="handleDrawerToggle"
+      />
+      <v-toolbar-title>Dexie ORM Demo</v-toolbar-title>
+    </v-app-bar>
+
+    <v-navigation-drawer
+      v-model="drawerOpen"
+      :permanent="display.mdAndUp.value"
+      :temporary="!display.mdAndUp.value"
+      width="240"
+    >
+      <v-list>
+        <v-list-item
+          v-for="(tab, index) in tabs"
+          :key="tab.key"
+          :active="tabIndex === index"
+          @click="setTabIndex(index); if (!display.mdAndUp.value) handleDrawerToggle()"
+        >
+          <v-list-item-title>{{ tab.label }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-main>
+      <v-container fluid class="pa-3">
+        <div v-if="tabIndex === 0">
+          <MainInfo />
+          <Actions
+            :users="users"
+            :add-user="addUser"
+            :test-zod-validation="testZodValidation"
+            :test-schema-migration="testSchemaMigration"
+            :toggle-auto-reset="toggleAutoReset"
+            :test-relations="testRelations"
+            :test-transactions="testTransactions"
+            :test-compound-indexes="testCompoundIndexes"
+            :test-aggregations="testAggregations"
+            :clear-all="clearAll"
+          />
+          <v-spacer class="mt-3" />
+          <LiveQueryDemo />
+          <v-spacer class="mt-3" />
+          <TypeScriptDemo />
+          <v-spacer class="mt-3" />
+          <PostsLiveQueryDemo />
+        </div>
+        <div v-if="tabIndex === 1">
+          <CloudSyncDemo />
+        </div>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDisplay } from 'vuetify';
+import { useAppLogic } from './services/useAppLogic';
+import MainInfo from './components/MainInfo.vue';
+import Actions from './components/Actions.vue';
+import LiveQueryDemo from './components/LiveQueryDemo.vue';
+import TypeScriptDemo from './components/TypeScriptDemo.vue';
+import PostsLiveQueryDemo from './components/PostsLiveQueryDemo.vue';
+import CloudSyncDemo from './components/CloudSyncDemo.vue';
+
+const display = useDisplay();
+
+const {
+  users,
+  tabIndex,
+  setTabIndex,
+  mobileOpen,
+  tabs,
+  addUser,
+  testZodValidation,
+  testSchemaMigration,
+  toggleAutoReset,
+  testRelations,
+  testTransactions,
+  testCompoundIndexes,
+  testAggregations,
+  clearAll,
+  handleDrawerToggle,
+} = useAppLogic();
+
+// Computed property for drawer state
+const drawerOpen = computed({
+  get: () => display.mdAndUp.value ? true : mobileOpen.value,
+  set: (value: boolean) => {
+    if (!display.mdAndUp.value) {
+      mobileOpen.value = value;
+    }
+  }
+});
+</script>

package/vue-demo-app/src/components/Actions.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <h2 class="text-h5 mb-4">Admin Actions</h2>
+    <v-row class="mb-4">
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-account"
+          @click="addUser"
+        >
+          Add User
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-flask"
+          @click="testZodValidation"
+        >
+          Test Zod
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-database"
+          @click="testSchemaMigration"
+        >
+          Schema
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-cog"
+          @click="toggleAutoReset"
+        >
+          Auto-Reset
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-link"
+          @click="testRelations"
+        >
+          Relations
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-speedometer"
+          @click="testTransactions"
+        >
+          Transactions
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-magnify"
+          @click="testCompoundIndexes"
+        >
+          Indexes
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-chart-line"
+          @click="testAggregations"
+        >
+          Aggregations
+        </v-btn>
+      </v-col>
+      <v-col cols="6" sm="4" md="3" lg="2">
+        <v-btn
+          variant="outlined"
+          block
+          prepend-icon="mdi-delete-sweep"
+          @click="clearAll"
+        >
+          Clear All
+        </v-btn>
+      </v-col>
+    </v-row>
+    
+    <h3 class="text-h6 mb-2">Users ({{ users.length }})</h3>
+    <v-row>
+      <v-col
+        v-for="(user, index) in users"
+        :key="index"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+      >
+        <v-card variant="outlined">
+          <v-card-text>
+            <strong>{{ user.name }}</strong> ({{ user.email }})<br />
+            Age: {{ user.age }}, Tags: {{ user.tags?.join(', ') || 'none' }}
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UserEntity } from '../entities/User';
+
+interface Props {
+  users: UserEntity[];
+  addUser: () => void;
+  testZodValidation: () => void;
+  testSchemaMigration: () => void;
+  toggleAutoReset: () => void;
+  testRelations: () => void;
+  testTransactions: () => void;
+  testCompoundIndexes: () => void;
+  testAggregations: () => void;
+  clearAll: () => void;
+}
+
+defineProps<Props>();
+</script>

package/vue-demo-app/src/components/CloudSyncDemo.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-card
+    variant="outlined"
+    class="my-4"
+    style="border: 2px solid #2196f3; background-color: #e3f2fd;"
+  >
+    <v-card-title>Cloud Sync Demo</v-card-title>
+    <v-card-text>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        <strong>Dexie Cloud Addon Integration:</strong> Cloud synchronization demo
+      </p>
+
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-card variant="outlined">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-cloud-sync</v-icon>
+              Sync status
+            </v-card-title>
+            <v-card-text>
+              <p><strong>Enabled:</strong> {{ syncStatus.enabled ? 'Yes' : 'No' }}</p>
+              <p>
+                <strong>Online:</strong>
+                {{ syncStatus.isOnline !== undefined
+                  ? syncStatus.isOnline ? 'Yes' : 'No'
+                  : 'Unknown' }}
+              </p>
+              <p>
+                <strong>Last sync:</strong>
+                {{ syncStatus.lastSync ? syncStatus.lastSync.toLocaleString() : 'Never' }}
+              </p>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-card variant="outlined">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-cog</v-icon>
+              Sync controls
+            </v-card-title>
+            <v-card-text>
+              <v-btn
+                :disabled="!syncStatus.enabled || isLoading"
+                :color="syncStatus.enabled ? 'success' : 'grey'"
+                @click="handleManualSync"
+                class="mb-2"
+                block
+              >
+                {{ isLoading ? 'Syncing...' : 'Sync manually' }}
+              </v-btn>
+
+              <v-btn
+                :disabled="!syncStatus.enabled || isLoading"
+                :color="syncStatus.enabled ? 'warning' : 'grey'"
+                @click="handleSyncTables"
+                class="mb-2"
+                block
+              >
+                Sync tables (users, posts)
+              </v-btn>
+
+              <v-btn
+                v-if="!syncStatus.enabled"
+                color="primary"
+                :disabled="isLoading"
+                @click="handleEnableCloudSync"
+                block
+              >
+                Enable cloud sync
+              </v-btn>
+
+              <v-btn
+                v-else
+                color="error"
+                :disabled="isLoading"
+                @click="handleDisableCloudSync"
+                block
+              >
+                Disable cloud sync
+              </v-btn>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-card variant="outlined" class="mt-4" color="warning">
+        <v-card-title class="d-flex align-center">
+          <v-icon class="mr-2" color="primary">mdi-information</v-icon>
+          Instructions:
+        </v-card-title>
+        <v-card-text>
+          <ol class="ml-4">
+            <li>
+              <strong>Install dexie-cloud-addon:</strong> <code>npm install dexie-cloud-addon</code>
+            </li>
+            <li>
+              <strong>Configure database URL</strong> in <code>demo-app/src/database/Database.ts</code>
+            </li>
+            <li>
+              <strong>Enable cloud sync</strong> using the button above
+            </li>
+            <li>
+              <strong>Test sync</strong> – add data and verify it synchronizes
+            </li>
+          </ol>
+        </v-card-text>
+      </v-card>
+
+      <v-card variant="outlined" class="mt-4" color="success">
+        <v-card-text>
+          <div class="text-caption text-medium-emphasis">
+            <div class="font-weight-bold">Configuration:</div>
+            Cloud sync is configured in Database.ts with automatic sync every 30 seconds.
+            <br />
+            <div class="font-weight-bold">Offline Support:</div>
+            The app works offline and syncs when connection is restored.
+            <br />
+            <div class="font-weight-bold">Reactivity:</div>
+            All changes are automatically synchronized with the cloud!
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { useCloudSyncDemo } from '../services/useCloudSyncDemo';
+
+const {
+  syncStatus,
+  isLoading,
+  handleManualSync,
+  handleEnableCloudSync,
+  handleDisableCloudSync,
+  handleSyncTables,
+} = useCloudSyncDemo();
+</script>

package/vue-demo-app/src/components/LiveQueryDemo.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-card variant="outlined" class="my-4">
+    <v-card-text>
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-chart-bar</v-icon>
+              Statistics (number | undefined)
+            </v-card-title>
+            <v-card-text>
+              <div class="mb-2">
+                <strong>Total users:</strong> {{ userCount ?? 'Loading...' }}
+              </div>
+              <div class="mb-2">
+                <strong>Adult users:</strong> {{ adultUsers?.length ?? 'Loading...' }}
+              </div>
+              <div class="mb-2">
+                <strong>First user:</strong> {{ firstUser?.name ?? 'None' }}
+              </div>
+              <div class="mb-2">
+                <strong>All users (live):</strong> {{ allUsers?.length ?? 'Loading...' }}
+              </div>
+              <div class="mb-2">
+                <strong>Posts:</strong> {{ allPosts?.length ?? 'Loading...' }}
+              </div>
+              <div class="mb-2">
+                <strong>Profiles:</strong> {{ allProfiles?.length ?? 'Loading...' }}
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-account-group</v-icon>
+              Users with profiles (UserEntity with profile)
+            </v-card-title>
+            <v-card-text>
+              <div v-if="usersWithProfiles && usersWithProfiles.length > 0" class="overflow-y-auto" style="max-height: 200px;">
+                <v-card
+                  v-for="user in usersWithProfiles"
+                  :key="user.id"
+                  variant="outlined"
+                  class="mb-2 pa-2"
+                >
+                  <div class="font-weight-bold">{{ user.name }}</div>
+                  <div class="text-caption text-medium-emphasis">{{ user.email }}</div>
+                  <div v-if="user.profile" class="text-caption text-medium-emphasis">
+                    {{ user.profile.bio }}
+                  </div>
+                </v-card>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card variant="outlined" class="h-100">
+            <v-card-title class="d-flex align-center">
+              <v-icon class="mr-2" color="primary">mdi-account</v-icon>
+              All users (live)
+            </v-card-title>
+            <v-card-text>
+              <div v-if="allUsers && allUsers.length > 0" class="overflow-y-auto" style="max-height: 200px;">
+                <div v-for="user in allUsers" :key="user.id" class="mb-1">
+                  <strong>{{ user.name }}</strong> — {{ user.email }}
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <div class="mt-4">
+        <h3 class="d-flex align-center mb-2">
+          <v-icon class="mr-2">mdi-file-document</v-icon>
+          Posts (PostEntity[])
+        </h3>
+        <v-card v-if="allPosts && allPosts.length > 0" variant="outlined" class="overflow-y-auto" style="max-height: 180px;">
+          <v-card-text>
+            <div v-for="post in allPosts" :key="post.id" class="pb-2 border-b">
+              <div class="font-weight-bold">{{ post.title }}</div>
+              <div class="d-flex align-center text-caption text-medium-emphasis">
+                <v-icon v-if="post.published" color="success" size="small" class="mr-1">mdi-check-circle</v-icon>
+                <v-icon v-else size="small" class="mr-1">mdi-file-document</v-icon>
+                <v-icon color="error" size="small" class="mr-1">mdi-heart</v-icon>
+                {{ post.likes }}
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </div>
+
+      <v-card variant="outlined" class="mt-4" color="success">
+        <v-card-text>
+          <div class="font-weight-bold">Typing test:</div>
+          <div>All variables are fully typed with TypeScript!</div>
+          <div class="font-weight-bold">Reactivity:</div>
+          <div>Data updates automatically when you add/remove records!</div>
+          <div class="font-weight-bold">Compatibility:</div>
+          <div>Your library works perfectly with Vue's reactivity system!</div>
+        </v-card-text>
+      </v-card>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { useLiveQueryDemo } from '../services/useLiveQueryDemo';
+
+const {
+  allUsers,
+  adultUsers,
+  userCount,
+  firstUser,
+  usersWithProfiles,
+  allPosts,
+  allProfiles,
+} = useLiveQueryDemo();
+</script>

package/vue-demo-app/src/components/MainInfo.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-card variant="outlined" class="mb-4">
+    <v-card-title class="d-flex align-center">
+      <v-icon class="mr-2" color="primary">mdi-autorenew</v-icon>
+      Dexie ORM for IndexedDB — Overview
+    </v-card-title>
+    <v-card-text>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        TypeScript ORM built on the latest Dexie 4 with first-class type safety and Zod runtime validation.
+      </p>
+      <v-row>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-code-tags</v-icon>
+            <span class="text-body-2"><strong>Entity config</strong> via defineEntity()</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-database</v-icon>
+            <span class="text-body-2"><strong>Automatic schema</strong> with PK, indexes, unique</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-account-group</v-icon>
+            <span class="text-body-2"><strong>Relations</strong> with helpers</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-flask</v-icon>
+            <span class="text-body-2"><strong>Zod validation</strong> at runtime</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-chart-line</v-icon>
+            <span class="text-body-2"><strong>Aggregations</strong> (count, avg, sum)</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-chart-bar</v-icon>
+            <span class="text-body-2"><strong>Live queries</strong> with useLiveQuery()</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-language-typescript</v-icon>
+            <span class="text-body-2"><strong>TypeScript</strong> full type safety</span>
+          </div>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <div class="d-flex align-center">
+            <v-icon class="mr-2" color="primary" size="small">mdi-cloud-sync</v-icon>
+            <span class="text-body-2"><strong>Cloud sync</strong> with Dexie Cloud</span>
+          </div>
+        </v-col>
+      </v-row>
+      
+      <v-divider class="my-4" />
+      
+      <v-btn
+        variant="outlined"
+        size="small"
+        prepend-icon="mdi-open-in-new"
+        href="https://github.com/radommaciej/indexed-db-orm/blob/main/README.md"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        View full documentation
+      </v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this component
+</script>