@cavulsqa/create 2.9.3 → 2.10.0

package/templates/m3e-app/src/main.ts

@@ -0,0 +1,41 @@
+import Framework7 from "framework7/lite";
+import Tabs from "framework7/components/tabs";
+import Framework7Vue from "framework7-vue";
+
+import "@fontsource-variable/google-sans-flex/rond.css";
+import "./assets/css/app.css";
+import "./assets/css/m3e.css";
+
+import App from "./App.vue";
+import { i18n } from "./plugins/i18n.plugin";
+import { m3e } from "./plugins/m3e.plugin";
+import { renderBootstrapError } from "./plugins/bootstrapError";
+import { seedPlugin } from "./plugins/seed.plugin";
+import { sqlitePlugin } from "./plugins/sqlite.plugin";
+import { startTheme } from "./shared/composables/theme/useThemeSettings";
+
+Framework7.use([Tabs]);
+Framework7.use(Framework7Vue);
+
+/**
+ * The theme starts first, so even the bootstrap error screen is drawn in the user's colours and
+ * mode. The database opens before mount so the first screen never renders against a missing
+ * schema; if it fails, `renderBootstrapError` takes the screen instead of leaving an empty `#app`.
+ */
+async function bootstrap(): Promise<void> {
+  startTheme();
+  try {
+    await sqlitePlugin();
+    await seedPlugin();
+  } catch (error) {
+    renderBootstrapError(error);
+    return;
+  }
+
+  const app = createApp(App);
+  app.use(i18n);
+  app.use(m3e);
+  app.mount("#app");
+}
+
+void bootstrap();

package/templates/m3e-app/src/modules/demo/components/DemoBenchmark.vue

@@ -0,0 +1,119 @@
+<template>
+  <section class="mx-4 flex flex-col gap-4 rounded-lg bg-surface-container-low p-4">
+    <header class="flex flex-col gap-1">
+      <h3 class="type-title-medium-emphasized m-0">{{ t("bench.title") }}</h3>
+      <p class="type-body-small m-0 text-on-surface-variant">{{ t("bench.intro") }}</p>
+    </header>
+
+    <div class="flex flex-wrap gap-2">
+      <M3Chip :label="engineName">
+        <template #icon><i-ms-database-outline-rounded /></template>
+      </M3Chip>
+      <M3Chip v-if="baseline" :label="t('bench.against', { engine: baseline.engine })" />
+      <M3Chip :label="t('bench.pragmas', { profile })" />
+    </div>
+
+    <M3Button :disabled="running" size="m" @click="run">
+      <template #icon><i-ms-speed-rounded /></template>
+      {{ running ? t("bench.running") : t("bench.run") }}
+    </M3Button>
+
+    <div v-if="running" class="flex flex-col gap-2">
+      <M3LinearProgress :label="t('bench.running')" />
+      <span v-if="progress" class="type-body-small text-on-surface-variant">{{ progress }}</span>
+    </div>
+
+    <p
+      v-if="failure"
+      class="type-body-medium m-0 rounded-md bg-error-container p-3 text-on-error-container"
+      role="alert"
+    >
+      {{ failure }}
+    </p>
+
+    <div v-if="result" class="grid grid-cols-3 gap-0.5 overflow-hidden rounded-md text-center">
+      <div class="flex flex-col gap-1 bg-surface-container p-3">
+        <span class="type-label-medium text-on-surface-variant">{{ t("bench.cases") }}</span>
+        <span class="type-title-medium tabular-nums">{{ result.cases.length }}</span>
+      </div>
+      <div class="flex flex-col gap-1 bg-surface-container p-3">
+        <span class="type-label-medium text-on-surface-variant">{{ t("bench.rows") }}</span>
+        <span class="type-title-medium tabular-nums">{{ result.rowsSeeded }}</span>
+      </div>
+      <div class="flex flex-col gap-1 bg-surface-container p-3">
+        <span class="type-label-medium text-on-surface-variant">{{ t("bench.wall") }}</span>
+        <span class="type-title-medium tabular-nums">{{ Math.round(result.totalMs) }} ms</span>
+      </div>
+    </div>
+  </section>
+
+  <template v-for="group in groups" :key="group">
+    <template v-if="byGroup(group).length">
+      <SectionHeader :title="t(`bench.group.${group}`)" />
+      <M3List variant="segmented" inset>
+        <M3ListItem
+          v-for="entry in byGroup(group)"
+          :key="entry.name"
+          :headline="entry.name"
+          :supporting="`${entry.current.operations} ops · p50 ${entry.current.medianMs} ms · ${t('bench.worst')} ${entry.current.worstMs} ms`"
+          :trailing-text="`${entry.current.msPerOperation} ms`"
+          :overline="entry.speedup ? speedupText(entry.speedup) : entry.note"
+        >
+          <template v-if="entry.speedup" #leading>
+            <M3Shape
+              :shape="entry.speedup >= 1 ? 'sunny' : 'square'"
+              class="size-8"
+              :class="verdictClass(entry.speedup)"
+            />
+          </template>
+        </M3ListItem>
+      </M3List>
+    </template>
+  </template>
+
+  <div v-if="result" class="flex gap-2 px-4 pt-4">
+    <M3Button variant="outlined" class="flex-1" @click="copy">{{ t("bench.copy") }}</M3Button>
+    <M3Button variant="text" class="flex-1 text-error" @click="clear">{{
+      t("bench.clear")
+    }}</M3Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pragmaProfile } from "@/app/pragmas.config";
+import { useBenchmark, type CaseComparison } from "@/modules/demo/composables/useBenchmark";
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+const { engineName, running, progress, failure, result, baseline, comparison, run, clear, asJson } =
+  useBenchmark();
+
+const profile = pragmaProfile;
+const groups = ["read", "join", "write", "transaction", "schema", "concurrency", "sync"] as const;
+
+function byGroup(group: CaseComparison["group"]): CaseComparison[] {
+  return comparison.value.filter((entry) => entry.group === group);
+}
+
+/** Both directions read plainly; "0.4x faster" would not. */
+function speedupText(speedup: number): string {
+  return speedup >= 1
+    ? t("bench.faster", { times: speedup.toFixed(2) })
+    : t("bench.slower", { times: (1 / speedup).toFixed(2) });
+}
+
+function verdictClass(speedup: number): string {
+  if (speedup >= 1.2) return "bg-success-container";
+  if (speedup <= 0.83) return "bg-error-container";
+  return "bg-surface-container-highest";
+}
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(asJson());
+    void snackbar.show(t("bench.copied"));
+  } catch {
+    void snackbar.show({ message: t("bench.copyFailed"), duration: "long" });
+  }
+}
+</script>

package/templates/m3e-app/src/modules/demo/components/DemoBusLog.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="mx-4 flex flex-col gap-3 rounded-lg bg-surface-container-low p-4">
+    <header class="flex flex-col gap-0.5">
+      <h3 class="type-title-medium-emphasized m-0">{{ t("demo.bus") }}</h3>
+      <p class="type-body-small m-0 text-on-surface-variant">{{ t("demo.busHint") }}</p>
+    </header>
+    <TransitionGroup
+      v-if="entries.length"
+      tag="ul"
+      name="bus"
+      class="m-0 flex list-none flex-col gap-0.5 p-0"
+    >
+      <li
+        v-for="entry in entries"
+        :key="entry.id"
+        class="flex items-center justify-between rounded-xs bg-surface-container px-3 py-2 first:rounded-t-md last:rounded-b-md"
+      >
+        <span class="type-label-large"
+          >{{ entry.table }}<span class="text-on-surface-variant">.{{ entry.type }}</span></span
+        >
+        <span class="type-label-small tabular-nums text-on-surface-variant">{{
+          formatTime(entry.at)
+        }}</span>
+      </li>
+    </TransitionGroup>
+    <p v-else class="type-body-medium m-0 text-on-surface-variant">{{ t("demo.busEmpty") }}</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { BusEntry } from "@/modules/demo/composables/useReactiveDemo";
+
+defineProps<{ entries: BusEntry[] }>();
+const { t } = useI18n();
+
+function formatTime(at: number): string {
+  return new Date(at).toLocaleTimeString(undefined, { hour12: false });
+}
+</script>
+
+<style scoped>
+.bus-enter-active {
+  transition:
+    transform var(--md-sys-motion-spring-fast-spatial-duration)
+      var(--md-sys-motion-spring-fast-spatial),
+    opacity var(--md-sys-motion-spring-fast-effects-duration)
+      var(--md-sys-motion-spring-fast-effects);
+}
+
+.bus-enter-from {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.98);
+}
+
+.bus-move {
+  transition: transform var(--md-sys-motion-spring-default-spatial-duration)
+    var(--md-sys-motion-spring-default-spatial);
+}
+
+.bus-leave-active {
+  display: none;
+}
+</style>

package/templates/m3e-app/src/modules/demo/components/DemoCreateOrderSheet.vue

@@ -0,0 +1,203 @@
+<template>
+  <M3BottomSheet v-model:open="open" :title="t('demo.newOrder')" @opened="focusReference">
+    <div class="flex flex-col gap-2 px-4">
+      <M3TextField
+        ref="referenceField"
+        v-model="reference"
+        :label="t('demo.reference')"
+        autocomplete="off"
+      />
+      <M3List variant="segmented">
+        <M3ListItem
+          clickable
+          :overline="t('demo.customer')"
+          :headline="customerLabel"
+          @click="chooseCustomer"
+        >
+          <template #leading><i-ms-person-outline-rounded /></template>
+          <template #trailing><i-ms-chevron-right-rounded class="rtl:-scale-x-100" /></template>
+        </M3ListItem>
+      </M3List>
+    </div>
+
+    <SectionHeader :title="t('demo.products')" />
+    <M3List variant="segmented" inset :label="t('demo.products')">
+      <M3ListItem
+        v-for="product in products"
+        :key="product.id"
+        :headline="product.name"
+        :supporting="formatMoney(product.price_cents)"
+        :selected="quantityOf(product.id) > 0"
+      >
+        <template #action>
+          <div class="flex items-center gap-1">
+            <M3IconButton
+              :label="t('demo.less', { product: product.name })"
+              variant="tonal"
+              size="xs"
+              :disabled="quantityOf(product.id) === 0"
+              @click="step(product.id, -1)"
+            >
+              <i-ms-remove-rounded />
+            </M3IconButton>
+            <span
+              class="type-title-small-emphasized w-7 text-center tabular-nums"
+              aria-live="polite"
+            >
+              {{ quantityOf(product.id) }}
+            </span>
+            <M3IconButton
+              :label="t('demo.more', { product: product.name })"
+              variant="tonal"
+              size="xs"
+              @click="step(product.id, 1)"
+            >
+              <i-ms-add-rounded />
+            </M3IconButton>
+          </div>
+        </template>
+      </M3ListItem>
+    </M3List>
+
+    <template #footer>
+      <div class="flex items-center gap-4">
+        <div class="flex flex-1 flex-col">
+          <span class="type-label-medium text-on-surface-variant">{{ t("demo.total") }}</span>
+          <span class="type-title-large-emphasized tabular-nums">{{
+            formatMoney(totalCents)
+          }}</span>
+        </div>
+        <M3Button size="m" :disabled="!canSave || saving" @click="save">{{
+          t("demo.save")
+        }}</M3Button>
+      </div>
+    </template>
+  </M3BottomSheet>
+</template>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
+import {
+  listCustomers,
+  listProducts,
+  nextOrderReference,
+  type DraftLine,
+  type ProductRow,
+} from "@/domains/sales/sales.repository";
+import { formatMoney } from "@/modules/demo/composables/useOrderStatus";
+import { getDatabase } from "@/shared/database/database";
+
+/**
+ * The new-order form in a bottom sheet. Saving is handed in as an async prop rather than emitted, so
+ * the sheet stays open and says so when the write fails instead of closing on a lost order.
+ */
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps<{
+  save: (draft: { customerId: number; reference: string; lines: DraftLine[] }) => Promise<void>;
+}>();
+const { t } = useI18n();
+const actionSheet = useActionSheet();
+const snackbar = useSnackbar();
+
+const customers = ref<Array<{ id: number; name: string; city: string }>>([]);
+const products = ref<ProductRow[]>([]);
+const quantities = ref<Record<number, number>>({});
+const reference = ref("");
+const customerId = ref(0);
+const saving = ref(false);
+const referenceField = useTemplateRef<ComponentPublicInstance>("referenceField");
+
+const customerLabel = computed(() => {
+  const customer = customers.value.find((entry) => entry.id === customerId.value);
+  return customer ? `${customer.name} — ${customer.city}` : t("demo.chooseCustomer");
+});
+
+/** Loaded each time the sheet opens rather than on mount, so the reference follows the latest order. */
+async function load() {
+  try {
+    const db = getDatabase().db;
+    const [loadedCustomers, loadedProducts, nextReference] = await Promise.all([
+      listCustomers(db),
+      listProducts(db),
+      nextOrderReference(db),
+    ]);
+    customers.value = loadedCustomers;
+    products.value = loadedProducts;
+    reference.value = nextReference;
+    customerId.value = loadedCustomers[0]?.id ?? 0;
+    quantities.value = {};
+  } catch (error) {
+    console.error("[demo] could not load the order form", error);
+    void snackbar.show({ message: t("demo.loadFailed"), duration: "long" });
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) void load();
+});
+
+function focusReference() {
+  (referenceField.value?.$el as HTMLElement | undefined)
+    ?.querySelector("input")
+    ?.focus({ preventScroll: true });
+}
+
+const quantityOf = (productId: number) => quantities.value[productId] ?? 0;
+
+function step(productId: number, delta: number) {
+  const next = Math.min(99, Math.max(0, quantityOf(productId) + delta));
+  quantities.value = { ...quantities.value, [productId]: next };
+}
+
+async function chooseCustomer() {
+  const choice = await actionSheet.open({
+    title: t("demo.customer"),
+    groups: [
+      {
+        items: customers.value.map((customer) => ({
+          id: String(customer.id),
+          label: customer.name,
+          supporting: customer.city,
+          selected: customer.id === customerId.value,
+        })),
+      },
+    ],
+  });
+  if (choice) customerId.value = Number(choice);
+}
+
+const lines = computed(() =>
+  products.value
+    .filter((product) => quantityOf(product.id) > 0)
+    .map((product) => ({
+      productId: product.id,
+      quantity: quantityOf(product.id),
+      unitPriceCents: product.price_cents,
+    })),
+);
+
+const totalCents = computed(() =>
+  lines.value.reduce((sum, line) => sum + line.quantity * line.unitPriceCents, 0),
+);
+const canSave = computed(
+  () => customerId.value > 0 && lines.value.length > 0 && reference.value.trim() !== "",
+);
+
+async function save() {
+  if (!canSave.value || saving.value) return;
+  saving.value = true;
+  try {
+    await props.save({
+      customerId: customerId.value,
+      reference: reference.value.trim(),
+      lines: lines.value,
+    });
+    open.value = false;
+  } catch (error) {
+    console.error("[demo] saving the order failed", error);
+    void snackbar.show({ message: t("demo.saveFailed"), duration: "long" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/templates/m3e-app/src/modules/demo/components/DemoMetricsSheet.vue

@@ -0,0 +1,75 @@
+<template>
+  <M3BottomSheet v-model:open="open" :title="t('metrics.title')">
+    <div class="grid grid-cols-2 gap-2 px-4">
+      <div
+        v-for="tile in tiles"
+        :key="tile.labelKey"
+        class="flex flex-col gap-1 rounded-lg bg-surface-container p-4"
+      >
+        <span class="type-label-medium text-on-surface-variant">{{ t(tile.labelKey) }}</span>
+        <span class="type-title-large-emphasized tabular-nums">{{ tile.value }}</span>
+      </div>
+    </div>
+
+    <SectionHeader :title="t('metrics.refetchesTitle')" />
+    <M3List v-if="refetches.length" variant="segmented" inset>
+      <M3ListItem
+        v-for="[table, count] in refetches"
+        :key="table"
+        :headline="table"
+        :trailing-text="String(count)"
+      >
+        <template #leading><i-ms-sync-rounded /></template>
+      </M3ListItem>
+    </M3List>
+    <p v-else class="type-body-medium m-0 px-6 text-on-surface-variant">
+      {{ t("metrics.noRefetches") }}
+    </p>
+
+    <SectionHeader :title="t('metrics.slowest')" />
+    <M3List v-if="slowestQueries.length" variant="segmented" inset>
+      <M3ListItem
+        v-for="entry in slowestQueries"
+        :key="entry.key"
+        :headline="`${entry.avgTime.toFixed(1)} ms`"
+        :supporting="entry.key"
+        :trailing-text="t('metrics.calls', { count: entry.count }, entry.count)"
+        multiline
+      >
+        <template #leading><i-ms-speed-rounded /></template>
+      </M3ListItem>
+    </M3List>
+    <p v-else class="type-body-medium m-0 px-6 text-on-surface-variant">
+      {{ t("metrics.noQueries") }}
+    </p>
+
+    <template #footer>
+      <M3Button variant="outlined" class="w-full" @click="reset">{{ t("metrics.reset") }}</M3Button>
+    </template>
+  </M3BottomSheet>
+</template>
+
+<script setup lang="ts">
+import { useQueryMetrics } from "@/shared/database/queries";
+
+/** The query metrics, in a sheet over whichever screen asked - the numbers belong to no one page. */
+const open = defineModel<boolean>("open", { default: false });
+const { t } = useI18n();
+const {
+  totalQueries,
+  avgQueryTime,
+  cacheHitRate,
+  activeListeners,
+  refetchesByTable,
+  slowestQueries,
+  reset,
+} = useQueryMetrics();
+
+const refetches = computed(() => Object.entries(refetchesByTable.value));
+const tiles = computed(() => [
+  { labelKey: "metrics.totalQueries", value: String(totalQueries.value) },
+  { labelKey: "metrics.avgQueryTime", value: `${avgQueryTime.value.toFixed(1)} ms` },
+  { labelKey: "metrics.cacheHitRate", value: `${cacheHitRate.value.toFixed(0)} %` },
+  { labelKey: "metrics.activeListeners", value: String(activeListeners.value) },
+]);
+</script>

package/templates/m3e-app/src/modules/demo/components/DemoOrderList.vue

@@ -0,0 +1,75 @@
+<template>
+  <M3List variant="segmented" inset :label="t('demo.orders')">
+    <M3ListItem
+      v-for="order in orders"
+      :key="order.id"
+      v-model:swiped="swiped[order.id]"
+      clickable
+      swipe-full="end"
+      :headline="order.reference"
+      :supporting="`${order.customerName} · ${t('demo.lines', { count: order.lines }, order.lines)}`"
+      @click="emit('open', order, $event)"
+    >
+      <template #leading>
+        <M3Shape
+          :shape="statusLook(order.status).shape"
+          class="size-10"
+          :class="statusLook(order.status).classes"
+        >
+          <component :is="statusLook(order.status).icon" class="size-5" />
+        </M3Shape>
+      </template>
+      <template #trailing>
+        <span class="type-title-small-emphasized tabular-nums text-on-surface">{{
+          formatMoney(order.totalCents)
+        }}</span>
+      </template>
+      <template #swipe-end>
+        <M3SwipeAction
+          v-if="nextStep(order)"
+          tone="primary"
+          :label="nextStep(order) === 'confirm' ? t('demo.confirm') : t('demo.deliver')"
+          @click="emit('advance', order)"
+        >
+          <i-ms-local-shipping-outline-rounded v-if="nextStep(order) === 'confirm'" />
+          <i-ms-verified-outline-rounded v-else />
+        </M3SwipeAction>
+        <M3SwipeAction tone="error" :label="t('demo.delete')" @click="emit('delete', order)">
+          <i-ms-delete-outline-rounded />
+        </M3SwipeAction>
+      </template>
+      <template #action>
+        <M3IconButton
+          :label="t('demo.actionsFor', { reference: order.reference })"
+          size="s"
+          @click="emit('more', order)"
+        >
+          <i-ms-more-vert-rounded />
+        </M3IconButton>
+      </template>
+    </M3ListItem>
+  </M3List>
+</template>
+
+<script setup lang="ts">
+import type { OrderRow } from "@/domains/sales/sales.repository";
+import { formatMoney, statusLook } from "@/modules/demo/composables/useOrderStatus";
+
+/**
+ * Tapping a row opens the order. Swiping it toward the start reveals its next step and Delete - a
+ * long swipe deletes - and the trailing button offers the same actions in a sheet, for anyone who
+ * never discovers the gesture.
+ */
+defineProps<{ orders: OrderRow[] }>();
+const emit = defineEmits<{
+  open: [order: OrderRow, event: MouseEvent];
+  more: [order: OrderRow];
+  advance: [order: OrderRow];
+  delete: [order: OrderRow];
+}>();
+const { t } = useI18n();
+const swiped = reactive<Record<number, "start" | "end" | null>>({});
+
+const nextStep = (order: OrderRow) =>
+  order.status === "draft" ? "confirm" : order.status === "confirmed" ? "deliver" : null;
+</script>

package/templates/m3e-app/src/modules/demo/components/DemoPipelineBenchmark.vue

@@ -0,0 +1,65 @@
+<template>
+  <section class="mx-4 flex flex-col gap-4 rounded-lg bg-surface-container-low p-4">
+    <header class="flex flex-col gap-1">
+      <h3 class="type-title-medium-emphasized m-0">{{ t("demo.pipelining") }}</h3>
+      <p class="type-body-small m-0 text-on-surface-variant">
+        {{
+          isNative
+            ? t("demo.pipeliningNative", { count: readsPerRun })
+            : t("demo.pipeliningWeb", { count: readsPerRun })
+        }}
+      </p>
+    </header>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <M3Chip :label="engineName">
+        <template #icon><i-ms-database-outline-rounded /></template>
+      </M3Chip>
+      <span class="type-body-small text-on-surface-variant">{{ t("demo.engineSwitch") }}</span>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <M3Button :disabled="measuring" @click="emit('measure')">
+        <template #icon><i-ms-speed-rounded /></template>
+        {{ measuring ? t("demo.measuring") : t("demo.measure") }}
+      </M3Button>
+      <M3LoadingIndicator v-if="measuring" :size="40" :label="t('demo.measuring')" />
+    </div>
+
+    <template v-if="result">
+      <div class="grid grid-cols-3 gap-0.5 overflow-hidden rounded-md text-center">
+        <div class="flex flex-col gap-1 bg-surface-container p-3">
+          <span class="type-label-medium text-on-surface-variant">{{ t("demo.parallel") }}</span>
+          <span class="type-title-medium tabular-nums">{{ result.parallelMs }} ms</span>
+        </div>
+        <div class="flex flex-col gap-1 bg-surface-container p-3">
+          <span class="type-label-medium text-on-surface-variant">{{ t("demo.sequential") }}</span>
+          <span class="type-title-medium tabular-nums">{{ result.sequentialMs }} ms</span>
+        </div>
+        <div class="flex flex-col gap-1 bg-primary-container p-3 text-on-primary-container">
+          <span class="type-label-medium">{{ t("demo.ratio") }}</span>
+          <span class="type-title-medium-emphasized tabular-nums">{{ result.ratio }}&times;</span>
+        </div>
+      </div>
+      <p class="type-body-small m-0 text-on-surface-variant">
+        {{ t("demo.measuredOn", { engine: result.engine }) }} ·
+        {{ isNative ? t("demo.ratioNative") : t("demo.ratioWeb", { platform }) }}
+      </p>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { PipelineResult } from "@/modules/demo/composables/useReactiveDemo";
+
+defineProps<{
+  result: PipelineResult | null;
+  measuring: boolean;
+  readsPerRun: number;
+  isNative: boolean;
+  platform: string;
+  engineName: string;
+}>();
+const emit = defineEmits<{ measure: [] }>();
+const { t } = useI18n();
+</script>