@cavulsqa/create 0.1.0

package/templates/f7-app/src/locales/fr.json

@@ -0,0 +1,179 @@
+{
+  "tabs": {
+    "home": "Aperçu",
+    "demo": "Réactif",
+    "settings": "Réglages"
+  },
+  "home": {
+    "title": "Aperçu",
+    "intro": "est un modèle pour applications mobiles hors-ligne : Vue 3, Framework7 et Capacitor sur une base SQLite locale lue de façon réactive.",
+    "included": "Fonctionnalités",
+    "next": "Voir le fonctionnement",
+    "welcome": "Bienvenue",
+    "tapAny": "Touchez une fonctionnalité — chacune s'ouvre dans cet onglet avec sa transition et son style de navbar."
+  },
+  "demo": {
+    "title": "Réactif",
+    "intro": "Un petit schéma relationnel — clients, produits, commandes, lignes et étiquettes — lu par jointures et agrégats. Rien sur cet écran ne demande de rafraîchir.",
+    "clear": "Réinitialiser les données",
+    "refetching": "rechargement…",
+    "empty": "Aucune commande. Utilisez le bouton en bas à droite.",
+    "pipelining": "Lectures en parallèle",
+    "measure": "Mesurer",
+    "measuring": "Mesure…",
+    "parallel": "Ensemble",
+    "sequential": "Une par une",
+    "ratio": "Plus rapide de",
+    "pipeliningNative": "{count} lectures lancées ensemble, puis les mêmes {count} une par une. Les lectures restent hors du verrou d'écriture et le pont natif les parallélise : « ensemble » devrait gagner largement.",
+    "pipeliningWeb": "{count} lectures lancées ensemble, puis les mêmes {count} une par une. Dans un navigateur, cette mesure n'a pas de sens — voir la note sous le résultat.",
+    "ratioNative": "Au-dessus de 1x, les lectures se chevauchent réellement sur le pont natif. Proche de 1x signifierait que quelque chose les sérialise.",
+    "ratioWeb": "Attendu sur {platform} : le chemin web est sql.js en mémoire, sans pont à paralléliser — les lancer ensemble n'apporte rien. Le gain se mesure sur un appareil.",
+    "data": "Données",
+    "diagnostics": "Diagnostics",
+    "searchPlaceholder": "Chercher une commande ou un client",
+    "orders": "Commandes",
+    "lines": "{count} lignes",
+    "seed": "Générer des données",
+    "tiles": {
+      "draft": "Brouillon",
+      "confirmed": "Confirmées",
+      "delivered": "Livrées",
+      "committed": "Engagé",
+      "ofOrders": "sur {count} commandes",
+      "ofTotal": "sur {total} au total"
+    },
+    "bus": "Bus de changements",
+    "busHint": "Chaque événement publié par une écriture. Les requêtes écoutent le même flux.",
+    "busEmpty": "Aucun événement.",
+    "swipeHint": "Glissez une ligne pour l'action rapide, touchez-la pour toutes.",
+    "newOrder": "Nouvelle commande",
+    "reference": "Référence",
+    "customer": "Client",
+    "products": "Produits",
+    "total": "Total",
+    "save": "Enregistrer",
+    "cancel": "Annuler",
+    "confirm": "Confirmer",
+    "deliver": "Marquer livrée",
+    "backToDraft": "Remettre en brouillon",
+    "delete": "Supprimer",
+    "searchHint": "Tapez pour chercher par référence ou client.",
+    "noMatches": "Aucun résultat.",
+    "order": "Commande",
+    "orderGone": "Cette commande n'existe plus.",
+    "lineItems": "Lignes",
+    "searchTitle": "Rechercher",
+    "statusDraft": "Brouillon",
+    "statusConfirmed": "Confirmée",
+    "statusDelivered": "Livrée",
+    "deleteConfirm": "Supprimer cette commande et ses lignes ?",
+    "tapHint": "Touchez une commande pour l'ouvrir.",
+    "allOrders": "Commandes récentes",
+    "matches": "{count} résultats"
+  },
+  "metrics": {
+    "totalQueries": "Requêtes exécutées",
+    "avgQueryTime": "Durée moyenne",
+    "cacheHitRate": "Taux de cache",
+    "activeListeners": "Écouteurs actifs",
+    "refetches": "Rechargements : {table}",
+    "title": "Métriques",
+    "summary": "Résumé",
+    "refetchesTitle": "Rechargements par table",
+    "noRefetches": "Aucun rechargement.",
+    "slowest": "Requêtes les plus lentes",
+    "noQueries": "Aucune requête enregistrée.",
+    "calls": "{count} appels",
+    "reset": "Réinitialiser"
+  },
+  "settings": {
+    "title": "Réglages",
+    "locale": "Langue",
+    "queryMetrics": "Métriques de requêtes",
+    "slowest": "Requêtes les plus lentes",
+    "noQueries": "Aucune requête enregistrée.",
+    "resetMetrics": "Réinitialiser",
+    "appearance": "Apparence",
+    "theme": "Thème",
+    "themeAuto": "Auto (appareil)",
+    "darkMode": "Mode sombre",
+    "language": "Langue",
+    "tryIt": "À essayer",
+    "testToast": "Afficher un toast",
+    "testDialog": "Afficher un dialogue",
+    "testSheet": "Ouvrir une feuille",
+    "about": "À propos",
+    "appName": "Nom",
+    "version": "Version",
+    "platform": "Plateforme",
+    "aboutUs": "Qui sommes-nous",
+    "toastText": "Ceci est un toast Framework7.",
+    "dialogTitle": "Dialogue",
+    "dialogText": "Dialogues, feuilles et toasts viennent de Framework7 - sans dépendance supplémentaire.",
+    "sheetText": "Une feuille modale. Le bouton retour Android la ferme avant de naviguer.",
+    "aboutText": "Construit sur {'@'}cavulsqa/mobile-db, reactive-db et reactive-vue. Remplacez ce texte par le vôtre.",
+    "footer": "Modifiez ces écrans dans src/modules/settings/."
+  },
+  "errors": {
+    "notFoundTitle": "Introuvable",
+    "notFound": "Cet écran n'existe pas."
+  },
+  "features": {
+    "tabs": {
+      "title": "Shell à onglets",
+      "subtitle": "Onglets déclarés en données",
+      "text": "Chaque onglet a sa propre vue et son historique, chargé à la demande."
+    },
+    "f7": {
+      "title": "Framework7",
+      "subtitle": "iOS et Material natifs",
+      "text": "Les deux thèmes sont fournis ; les réglages en fixent un ou suivent l'appareil."
+    },
+    "sqlite": {
+      "title": "SQLite",
+      "subtitle": "Kysely, hors-ligne d'abord",
+      "text": "Les écritures se relaient sur la connexion native, les lectures restent parallèles."
+    },
+    "reactive": {
+      "title": "Requêtes réactives",
+      "subtitle": "Sans invalidation manuelle",
+      "text": "Une écriture annonce ses tables et chaque requête concernée se relance."
+    },
+    "back": {
+      "title": "Bouton retour Android",
+      "subtitle": "Ferme la couche du dessus",
+      "text": "Actions, dialogue, feuille, popover, popup, panneau - puis l'historique."
+    },
+    "keyboard": {
+      "title": "Gestion du clavier",
+      "subtitle": "Le champ reste visible",
+      "text": "Défilement à chaque phase de la transition, barre d'onglets escamotée."
+    },
+    "metrics": {
+      "title": "Métriques",
+      "subtitle": "Intégrées",
+      "text": "Durées, cache et rechargements par table, dans le panneau de droite."
+    },
+    "dx": {
+      "title": "Zéro boilerplate",
+      "subtitle": "Auto-imports et resolvers",
+      "text": "API de composition, i18n, composants et icônes sans ligne d'import."
+    }
+  },
+  "detail": {
+    "what": "Quoi",
+    "how": "Comment",
+    "howText": "Cette page est une route enfant de la vue de l'onglet Accueil. La barre d'onglets ne bouge pas, le retour ne déroule que cet onglet, et les autres gardent leur écran.",
+    "thisScreen": "Ce que cet écran démontre",
+    "transition": "Transition",
+    "transitionNote": "Passée à chaque navigation : deux lignes peuvent ouvrir la même route différemment.",
+    "navbar": "Navbar",
+    "navbarNote": "large se replie au défilement, transparent apparaît sur le contenu, hide-on-scroll s'escamote, subnavbar reste en place.",
+    "nesting": "Vue imbriquée",
+    "nestingAfter": "Onglet Accueil",
+    "nestingNote": "Empilée dans l'historique de cet onglet, pas celui de l'application.",
+    "scrollMe": "Défilez pour voir la navbar réagir",
+    "row": "Ligne",
+    "next": "Ouvrir la suivante"
+  }
+}

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

@@ -0,0 +1,50 @@
+import Framework7 from "framework7/lite-bundle";
+import Framework7Vue from "framework7-vue";
+
+import "framework7/css/bundle";
+import "framework7-icons";
+import "./assets/css/icons.css";
+import "./assets/css/app.css";
+
+import App from "./App.vue";
+import { i18n } from "./plugins/i18n.plugin";
+import { seedPlugin } from "./plugins/seed.plugin";
+import { sqlitePlugin } from "./plugins/sqlite.plugin";
+
+Framework7.use(Framework7Vue);
+
+function reportFatal(error: unknown): void {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error("[bootstrap] the app could not start:", error);
+
+  const root = document.getElementById("app");
+  if (!root) return;
+  const box = document.createElement("div");
+  box.setAttribute("style", "font:14px/1.5 system-ui;padding:24px;color:#b00020");
+  box.textContent = `The app could not start: ${message}`;
+  root.replaceChildren(box);
+}
+
+/**
+ * The database opens before mount so the first screen never renders against a missing schema.
+ *
+ * If it fails, the failure is shown. Awaiting this at the top level of the module and letting it
+ * reject renders an empty `#app` with an unhandled rejection nobody reads - which is exactly what
+ * this template did the first time it was opened in a browser.
+ */
+async function bootstrap(): Promise<void> {
+  try {
+    await sqlitePlugin();
+    await seedPlugin();
+  } catch (error) {
+    reportFatal(error);
+    return;
+  }
+
+  // Components arrive through Framework7VueResolver, so nothing is registered by hand.
+  const app = createApp(App);
+  app.use(i18n);
+  app.mount("#app");
+}
+
+void bootstrap();

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

@@ -0,0 +1,26 @@
+<template>
+  <F7BlockTitle>{{ t("demo.bus") }}</F7BlockTitle>
+  <F7Block strong inset class="rounded-2xl!">
+    <p class="mt-0 text-sm opacity-70">{{ t("demo.busHint") }}</p>
+
+    <ul v-if="entries.length" class="m-0 list-none p-0 font-mono text-xs">
+      <li v-for="entry in entries" :key="entry.id" class="flex justify-between py-0.5">
+        <span>{{ entry.table }}.{{ entry.type }}</span>
+        <span class="opacity-60">{{ formatTime(entry.at) }}</span>
+      </li>
+    </ul>
+    <p v-else class="text-sm opacity-60">{{ t("demo.busEmpty") }}</p>
+  </F7Block>
+</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>

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

@@ -0,0 +1,160 @@
+<template>
+  <F7Sheet
+    class="demo-create-sheet"
+    :opened="opened"
+    swipe-to-close
+    backdrop
+    @sheet:closed="$emit('close')"
+    @sheet:open="load"
+  >
+    <F7Toolbar>
+      <div class="left px-3 font-medium">{{ t("demo.newOrder") }}</div>
+      <div class="right">
+        <F7Link sheet-close>{{ t("demo.cancel") }}</F7Link>
+      </div>
+    </F7Toolbar>
+
+    <F7PageContent class="pb-6!">
+      <F7List strong inset dividers class="rounded-2xl! mt-3!">
+        <F7ListInput
+          :label="t('demo.reference')"
+          type="text"
+          :value="reference"
+          @input="reference = ($event.target as HTMLInputElement).value"
+        />
+        <F7ListItem
+          :title="t('demo.customer')"
+          smart-select
+          :smart-select-params="{ openIn: 'sheet', closeOnSelect: true }"
+        >
+          <select :value="String(customerId)" @change="onCustomer">
+            <option v-for="customer in customers" :key="customer.id" :value="String(customer.id)">
+              {{ customer.name }} — {{ customer.city }}
+            </option>
+          </select>
+        </F7ListItem>
+      </F7List>
+
+      <F7BlockTitle>{{ t("demo.products") }}</F7BlockTitle>
+      <F7List strong inset dividers class="rounded-2xl!">
+        <F7ListItem v-for="product in products" :key="product.id" :title="product.name">
+          <template #footer>{{ money(product.price_cents) }}</template>
+          <template #after>
+            <F7Stepper
+              small
+              raised
+              :value="quantityOf(product.id)"
+              :min="0"
+              :max="99"
+              @stepper:change="(value: number) => setQuantity(product.id, value)"
+            />
+          </template>
+        </F7ListItem>
+      </F7List>
+
+      <F7Block class="flex items-center justify-between">
+        <span class="text-sm opacity-60">{{ t("demo.total") }}</span>
+        <span class="text-lg font-semibold tabular-nums">{{ money(totalCents) }}</span>
+      </F7Block>
+
+      <F7Block>
+        <F7Button large fill :disabled="!canSave" @click="save">{{ t("demo.save") }}</F7Button>
+      </F7Block>
+    </F7PageContent>
+  </F7Sheet>
+</template>
+
+<script setup lang="ts">
+import {
+  listCustomers,
+  listProducts,
+  nextOrderReference,
+  type ProductRow,
+} from "@/domains/sales/sales.repository";
+import { getDatabase } from "@/shared/database/database";
+
+const props = defineProps<{ opened: boolean }>();
+const emit = defineEmits<{
+  close: [];
+  save: [
+    payload: {
+      customerId: number;
+      reference: string;
+      lines: Array<{ productId: number; quantity: number; unitPriceCents: number }>;
+    },
+  ];
+}>();
+
+const { t } = useI18n();
+
+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 formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+const money = (cents: number) => formatter.format(cents / 100);
+
+/** Loaded when the sheet opens rather than on mount, so the reference reflects the latest order. */
+async function load() {
+  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 = {};
+}
+
+watch(
+  () => props.opened,
+  (isOpen) => {
+    if (isOpen) void load();
+  },
+);
+
+const quantityOf = (productId: number) => quantities.value[productId] ?? 0;
+
+function setQuantity(productId: number, value: number) {
+  quantities.value = { ...quantities.value, [productId]: value };
+}
+
+function onCustomer(event: Event) {
+  customerId.value = Number((event.target as HTMLSelectElement).value);
+}
+
+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);
+
+function save() {
+  if (!canSave.value) return;
+  emit("save", { customerId: customerId.value, reference: reference.value, lines: lines.value });
+}
+</script>
+
+<style scoped>
+.demo-create-sheet {
+  height: auto;
+  max-height: 85vh;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <!--
+    `swiper-no-swiping` keeps the swipeable tabs out of this list: without it a horizontal drag
+    revealed the swipeout actions and moved the tab pane at the same time.
+  -->
+  <F7List strong inset dividers class="rounded-2xl! swiper-no-swiping">
+    <!--
+      Swipe is the fast path and the tap opens the full action sheet, so a status change costs one
+      gesture instead of a trip through a menu.
+    -->
+    <F7ListItem
+      v-for="order in orders"
+      :key="order.id"
+      swipeout
+      link="#"
+      @click="$emit('open', order)"
+    >
+      <template #media>
+        <F7Icon :f7="statusIcon(order.status)" :color="statusColor(order.status)" size="22" />
+      </template>
+
+      <template #title>
+        <span class="font-medium">{{ order.reference }}</span>
+      </template>
+
+      <template #after>
+        <span class="text-[15px] font-semibold tabular-nums">{{ money(order.totalCents) }}</span>
+      </template>
+
+      <template #subtitle>
+        <span class="text-[13px] opacity-60">
+          {{ order.customerName }} · {{ t("demo.lines", { count: order.lines }) }}
+        </span>
+      </template>
+
+      <F7SwipeoutActions right>
+        <F7SwipeoutButton
+          v-if="order.status !== 'delivered'"
+          color="orange"
+          close
+          @click="$emit('advance', order.id)"
+        >
+          {{ order.status === "draft" ? t("demo.confirm") : t("demo.deliver") }}
+        </F7SwipeoutButton>
+        <F7SwipeoutButton color="red" close @click="$emit('remove', order.id)">
+          {{ t("demo.delete") }}
+        </F7SwipeoutButton>
+      </F7SwipeoutActions>
+    </F7ListItem>
+  </F7List>
+</template>
+
+<script setup lang="ts">
+import type { OrderRow } from "@/domains/sales/sales.repository";
+
+defineProps<{ orders: OrderRow[] }>();
+defineEmits<{ open: [order: OrderRow]; advance: [orderId: number]; remove: [orderId: number] }>();
+
+const { t } = useI18n();
+
+const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+const money = (cents: number) => formatter.format(cents / 100);
+
+const statusColor = (status: string) =>
+  status === "delivered" ? "green" : status === "confirmed" ? "orange" : "gray";
+
+const statusIcon = (status: string) =>
+  status === "delivered"
+    ? "checkmark_seal_fill"
+    : status === "confirmed"
+      ? "shippingbox_fill"
+      : "doc_plaintext";
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <F7BlockTitle>{{ t("demo.pipelining") }}</F7BlockTitle>
+  <F7Block strong inset class="rounded-2xl!">
+    <p class="mt-0 text-sm opacity-70">
+      {{
+        isNative
+          ? t("demo.pipeliningNative", { count: readsPerRun })
+          : t("demo.pipeliningWeb", { count: readsPerRun })
+      }}
+    </p>
+
+    <F7Button fill :disabled="measuring" @click="$emit('measure')">
+      {{ measuring ? t("demo.measuring") : t("demo.measure") }}
+    </F7Button>
+
+    <div v-if="result" class="mt-3">
+      <div class="grid grid-cols-3 gap-2 text-center">
+        <div>
+          <div class="text-xs opacity-60">{{ t("demo.parallel") }}</div>
+          <div class="font-mono text-base">{{ result.parallelMs }} ms</div>
+        </div>
+        <div>
+          <div class="text-xs opacity-60">{{ t("demo.sequential") }}</div>
+          <div class="font-mono text-base">{{ result.sequentialMs }} ms</div>
+        </div>
+        <div>
+          <div class="text-xs opacity-60">{{ t("demo.ratio") }}</div>
+          <div class="font-mono text-base font-bold">{{ result.ratio }}&times;</div>
+        </div>
+      </div>
+
+      <p class="mb-0 mt-3 text-xs opacity-70">
+        {{ isNative ? t("demo.ratioNative") : t("demo.ratioWeb", { platform }) }}
+      </p>
+    </div>
+  </F7Block>
+</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;
+}>();
+defineEmits<{ measure: [] }>();
+
+const { t } = useI18n();
+</script>

package/templates/f7-app/src/modules/demo/components/DemoStatCards.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="grid grid-cols-2 gap-2 px-3">
+    <div
+      v-for="tile in tiles"
+      :key="tile.labelKey"
+      class="rounded-2xl px-3 py-2.5"
+      :style="{ background: 'var(--f7-list-bg-color, rgb(128 128 128 / 10%))' }"
+    >
+      <div class="flex items-center gap-1.5">
+        <F7Icon :f7="tile.icon" :color="tile.color" size="16" />
+        <span class="text-[11px] uppercase tracking-wide opacity-55">{{ t(tile.labelKey) }}</span>
+      </div>
+      <div class="mt-0.5 text-xl font-semibold tabular-nums leading-tight">{{ tile.value }}</div>
+      <div v-if="tile.hint" class="text-[11px] opacity-45">{{ tile.hint }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DashboardStats } from "@/domains/sales/sales.repository";
+
+const props = defineProps<{ stats: DashboardStats }>();
+const { t } = useI18n();
+
+const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+const money = (cents: number) => formatter.format(cents / 100);
+
+/**
+ * Status counts rather than plain totals, because they are what actually moves when you use the
+ * screen: confirm one order and three of these four change at once, without anything telling them
+ * to. That is the whole point being demonstrated.
+ */
+const tiles = computed(() => [
+  {
+    labelKey: "demo.tiles.draft",
+    icon: "doc_plaintext",
+    color: "gray",
+    value: String(props.stats.draft),
+    hint: t("demo.tiles.ofOrders", { count: props.stats.orders }),
+  },
+  {
+    labelKey: "demo.tiles.confirmed",
+    icon: "shippingbox_fill",
+    color: "orange",
+    value: String(props.stats.confirmed),
+    hint: "",
+  },
+  {
+    labelKey: "demo.tiles.delivered",
+    icon: "checkmark_seal_fill",
+    color: "green",
+    value: String(props.stats.delivered),
+    hint: "",
+  },
+  {
+    labelKey: "demo.tiles.committed",
+    icon: "money_dollar_circle_fill",
+    color: "teal",
+    value: money(props.stats.committedCents),
+    hint: t("demo.tiles.ofTotal", { total: money(props.stats.revenueCents) }),
+  },
+]);
+</script>