@cavulsqa/create 0.1.0

package/templates/f7-app/src/modules/home/router/routes/home.routes.ts

@@ -0,0 +1,29 @@
+import type { Router } from "framework7/types";
+
+/**
+ * The detail route is a child of the tab's own view, which is what keeps the tab bar in place and
+ * the back gesture scoped to this tab's history.
+ */
+const homeRoutes: Router.RouteParameters[] = [
+  {
+    name: "home",
+    path: "/home/",
+    // `async` is Framework7's route hook, not an async function - resolve from the promise.
+    async({ resolve }) {
+      void import("@/modules/home/views/HomeView.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+  {
+    name: "home-feature",
+    path: "/home/feature/:id/",
+    async({ resolve }) {
+      void import("@/modules/home/views/FeatureDetailView.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+];
+
+export default homeRoutes;

package/templates/f7-app/src/modules/home/views/FeatureDetailView.vue

@@ -0,0 +1,108 @@
+<template>
+  <F7Page v-if="feature">
+    <F7Navbar
+      :title="t(feature.titleKey)"
+      :subtitle="t(feature.subtitleKey)"
+      :large="feature.navbar.large"
+      :transparent="feature.navbar.transparent"
+      :hide-on-scroll="feature.navbar.hideOnScroll"
+      back-link
+    >
+      <F7Subnavbar v-if="feature.navbar.subnavbar">
+        <F7Segmented strong>
+          <F7Button :active="pane === 'what'" @click="pane = 'what'">
+            {{ t("detail.what") }}
+          </F7Button>
+          <F7Button :active="pane === 'how'" @click="pane = 'how'">
+            {{ t("detail.how") }}
+          </F7Button>
+        </F7Segmented>
+      </F7Subnavbar>
+    </F7Navbar>
+
+    <F7Block strong inset class="rounded-2xl!">
+      <div class="flex items-start gap-3">
+        <F7Icon :f7="feature.icon" :color="feature.color" size="28" />
+        <p class="m-0">{{ pane === "what" ? t(feature.textKey) : t("detail.howText") }}</p>
+      </div>
+    </F7Block>
+
+    <F7BlockTitle>{{ t("detail.thisScreen") }}</F7BlockTitle>
+    <!--
+      media-list, not a plain list: `item-footer` is sized for a few words and long text in it
+      overlaps the title, while a long `after` value squeezes the same text into a one-word column.
+      Here the value is the subtitle and the explanation is the text, so neither competes for width.
+    -->
+    <F7List media-list strong inset dividers class="rounded-2xl!">
+      <F7ListItem :title="t('detail.transition')" :subtitle="feature.transition">
+        <template #media><F7Icon f7="arrow_right_circle_fill" color="blue" /></template>
+        <template #text>{{ t("detail.transitionNote") }}</template>
+      </F7ListItem>
+      <F7ListItem :title="t('detail.navbar')" :subtitle="navbarSummary">
+        <template #media><F7Icon f7="rectangle_3_offgrid_fill" color="purple" /></template>
+        <template #text>{{ t("detail.navbarNote") }}</template>
+      </F7ListItem>
+      <F7ListItem :title="t('detail.nesting')" :subtitle="t('detail.nestingAfter')">
+        <template #media><F7Icon f7="square_stack_3d_down_right_fill" color="green" /></template>
+        <template #text>{{ t("detail.nestingNote") }}</template>
+      </F7ListItem>
+    </F7List>
+
+    <!-- Enough content that hide-on-scroll and the collapsing large title have something to do. -->
+    <F7BlockTitle>{{ t("detail.scrollMe") }}</F7BlockTitle>
+    <F7List strong inset dividers class="rounded-2xl!">
+      <F7ListItem
+        v-for="line in 12"
+        :key="line"
+        :title="`${t('detail.row')} ${String(line)}`"
+        :after="String(line)"
+      />
+    </F7List>
+
+    <F7Block>
+      <F7Button large fill @click="openNext">{{ t("detail.next") }}</F7Button>
+    </F7Block>
+  </F7Page>
+
+  <F7Page v-else>
+    <F7Navbar :title="t('errors.notFoundTitle')" back-link />
+    <F7Block strong inset class="rounded-2xl!">
+      <p class="m-0">{{ t("errors.notFound") }}</p>
+    </F7Block>
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+import { useHiddenTabbar } from "@/shared/composables/useTabbarVisibility";
+import type { Router } from "framework7/types";
+import { features, findFeature } from "@/modules/home/composables/useHomeFeatures";
+
+const { t } = useI18n();
+
+// A pushed page owns the whole screen; the tab bar belongs to the tab roots.
+useHiddenTabbar();
+
+// Framework7 passes the route and this view's router to a route component as props.
+const props = defineProps<{ f7route: Router.Route; f7router: Router.Router }>();
+
+const feature = computed(() => findFeature(String(props.f7route.params.id ?? "")));
+const pane = ref<"what" | "how">("what");
+
+const navbarSummary = computed(() => {
+  if (!feature.value) return "";
+  const parts: string[] = [];
+  if (feature.value.navbar.large) parts.push("large");
+  if (feature.value.navbar.transparent) parts.push("transparent");
+  if (feature.value.navbar.hideOnScroll) parts.push("hide-on-scroll");
+  if (feature.value.navbar.subnavbar) parts.push("subnavbar");
+  return parts.length ? parts.join(" + ") : "plain";
+});
+
+/** Pushes the next feature onto this tab's own history, so the stack grows inside the tab. */
+function openNext() {
+  const index = features.findIndex((entry) => entry.id === feature.value?.id);
+  const next = features[(index + 1) % features.length];
+  if (!next) return;
+  props.f7router.navigate(`/home/feature/${next.id}/`, { transition: next.transition });
+}
+</script>

package/templates/f7-app/src/modules/home/views/HomeView.vue

@@ -0,0 +1,53 @@
+<template>
+  <F7Page>
+    <F7Navbar :title="t('home.title')" large transparent :sliding="true" />
+
+    <F7BlockTitle>{{ t("home.welcome") }}</F7BlockTitle>
+    <F7Block strong inset class="rounded-2xl!">
+      <p class="m-0">
+        <strong>{{ appName }}</strong> {{ t("home.intro") }}
+      </p>
+    </F7Block>
+
+    <F7BlockTitle>{{ t("home.included") }}</F7BlockTitle>
+    <F7List media-list strong inset dividers class="rounded-2xl!">
+      <F7ListItem
+        v-for="feature in features"
+        :key="feature.id"
+        :title="t(feature.titleKey)"
+        :subtitle="t(feature.subtitleKey)"
+        :after="feature.transition.replace('f7-', '')"
+        link="#"
+        @click="openFeature(feature)"
+      >
+        <template #media>
+          <F7Icon :f7="feature.icon" :color="feature.color" />
+        </template>
+        <template #text>{{ t(feature.textKey) }}</template>
+      </F7ListItem>
+    </F7List>
+
+    <F7Block class="text-center">
+      <p class="m-0 text-sm opacity-50">{{ t("home.tapAny") }}</p>
+    </F7Block>
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import { features, type HomeFeature } from "@/modules/home/composables/useHomeFeatures";
+
+const { t } = useI18n();
+const appName = __APP_NAME__;
+
+// This view's own router, so the push stays inside the Home tab.
+const props = defineProps<{ f7router: Router.Router }>();
+
+/**
+ * Navigating programmatically rather than through a `link` href, because each row carries its own
+ * transition. `f7router` is this view's router, so the push stays inside the Home tab.
+ */
+function openFeature(feature: HomeFeature) {
+  props.f7router.navigate(`/home/feature/${feature.id}/`, { transition: feature.transition });
+}
+</script>

package/templates/f7-app/src/modules/settings/router/routes/settings.routes.ts

@@ -0,0 +1,16 @@
+import type { Router } from "framework7/types";
+
+const settingsRoutes: Router.RouteParameters[] = [
+  {
+    name: "settings",
+    path: "/settings/",
+    // `async` is Framework7's route hook, not an async function - resolve from the promise.
+    async({ resolve }) {
+      void import("@/modules/settings/views/SettingsView.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+];
+
+export default settingsRoutes;

package/templates/f7-app/src/modules/settings/views/SettingsView.vue

@@ -0,0 +1,126 @@
+<template>
+  <F7Page>
+    <F7Navbar :title="t('settings.title')" large transparent :sliding="true" />
+
+    <F7BlockTitle>{{ t("settings.appearance") }}</F7BlockTitle>
+    <F7List strong inset dividers class="rounded-2xl!">
+      <F7ListItem
+        :title="t('settings.theme')"
+        smart-select
+        :smart-select-params="{ openIn: 'sheet', closeOnSelect: true }"
+      >
+        <template #media><F7Icon f7="paintbrush_fill" color="pink" /></template>
+        <select :value="appTheme.theme" @change="onThemeChange">
+          <option value="auto">{{ t("settings.themeAuto") }}</option>
+          <option value="ios">iOS</option>
+          <option value="md">Material</option>
+        </select>
+      </F7ListItem>
+
+      <F7ListItem :title="t('settings.darkMode')">
+        <template #media><F7Icon f7="moon_fill" color="deeppurple" /></template>
+        <template #after>
+          <F7Toggle :checked="appTheme.darkMode === 'dark'" @change="onDarkModeChange" />
+        </template>
+      </F7ListItem>
+
+      <F7ListItem
+        :title="t('settings.language')"
+        smart-select
+        :smart-select-params="{ openIn: 'popover', closeOnSelect: true }"
+      >
+        <template #media><F7Icon f7="globe" color="blue" /></template>
+        <select :value="locale" @change="onLocaleChange">
+          <option v-for="option in availableLocales" :key="option" :value="option">
+            {{ option.toUpperCase() }}
+          </option>
+        </select>
+      </F7ListItem>
+    </F7List>
+
+    <F7BlockTitle>{{ t("settings.tryIt") }}</F7BlockTitle>
+    <F7List strong inset dividers class="rounded-2xl!">
+      <F7ListItem :title="t('settings.testToast')" link="#" @click="testToast">
+        <template #media><F7Icon f7="bell_fill" color="orange" /></template>
+      </F7ListItem>
+      <F7ListItem :title="t('settings.testDialog')" link="#" @click="testDialog">
+        <template #media><F7Icon f7="exclamationmark_bubble_fill" color="red" /></template>
+      </F7ListItem>
+      <F7ListItem :title="t('settings.testSheet')" link="#" @click="testSheet">
+        <template #media><F7Icon f7="rectangle_stack_fill" color="teal" /></template>
+      </F7ListItem>
+    </F7List>
+
+    <F7BlockTitle>{{ t("settings.about") }}</F7BlockTitle>
+    <F7List strong inset dividers class="rounded-2xl!">
+      <F7ListItem :title="t('settings.appName')" :after="appName">
+        <template #media><F7Icon f7="app_badge_fill" color="green" /></template>
+      </F7ListItem>
+      <F7ListItem :title="t('settings.version')" :after="appVersion">
+        <template #media><F7Icon f7="number" color="gray" /></template>
+      </F7ListItem>
+      <F7ListItem :title="t('settings.platform')" :after="platform">
+        <template #media><F7Icon f7="device_phone_portrait" color="purple" /></template>
+      </F7ListItem>
+      <F7ListItem :title="t('settings.aboutUs')" link="#" @click="showAbout">
+        <template #media><F7Icon f7="info_circle_fill" color="blue" /></template>
+      </F7ListItem>
+    </F7List>
+
+    <F7Block class="text-center">
+      <p class="m-0 text-sm opacity-50">{{ t("settings.footer") }}</p>
+    </F7Block>
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+import { Capacitor } from "@capacitor/core";
+import { useAppTheme, type AppMode, type AppTheme } from "@/shared/composables/theme/useAppTheme";
+
+const { t, locale, availableLocales } = useI18n();
+const theme = useAppTheme();
+const appTheme = computed(() => theme.value);
+
+const appName = __APP_NAME__;
+const appVersion = __APP_VERSION__;
+const platform = Capacitor.getPlatform();
+
+function onThemeChange(event: Event) {
+  appTheme.value.setTheme((event.target as HTMLSelectElement).value as AppTheme);
+}
+
+function onDarkModeChange(event: Event) {
+  const mode: AppMode = (event.target as HTMLInputElement).checked ? "dark" : "light";
+  void appTheme.value.setDarkMode(mode);
+}
+
+function onLocaleChange(event: Event) {
+  locale.value = (event.target as HTMLSelectElement).value;
+}
+
+function testToast() {
+  f7.toast.create({ text: t("settings.toastText"), position: "center", closeTimeout: 1800 }).open();
+}
+
+function testDialog() {
+  f7.dialog.confirm(t("settings.dialogText"), t("settings.dialogTitle"));
+}
+
+function testSheet() {
+  f7.sheet
+    .create({
+      content: `
+        <div class="sheet-modal">
+          <div class="sheet-modal-inner">
+            <div class="block"><p>${t("settings.sheetText")}</p></div>
+          </div>
+        </div>`,
+      backdrop: true,
+    })
+    .open();
+}
+
+function showAbout() {
+  f7.dialog.alert(t("settings.aboutText"), t("settings.aboutUs"));
+}
+</script>

package/templates/f7-app/src/plugins/capacitor/index.ts

@@ -0,0 +1,14 @@
+import type Framework7 from "framework7";
+import { useAndroidBackButton } from "./useAndroidBackButton";
+import { useKeyboard } from "./useKeyboard";
+import { useStatusBar } from "./useStatusBar";
+
+/**
+ * Native wiring that needs the Framework7 instance, so it runs once the shell exists rather than at
+ * module load. Every handler no-ops off-device, which is what keeps `vp dev` in a browser working.
+ */
+export async function initCapacitor(f7: Framework7): Promise<void> {
+  await useAndroidBackButton(f7);
+  useKeyboard(f7);
+  await useStatusBar();
+}

package/templates/f7-app/src/plugins/capacitor/useAndroidBackButton.ts

@@ -0,0 +1,68 @@
+import { App } from "@capacitor/app";
+import { Capacitor } from "@capacitor/core";
+import type Framework7 from "framework7";
+
+/**
+ * Android's back button must close whatever is on top before it navigates, and the order matters:
+ * an actions sheet sitting over a popup has to close first, or back dismisses the popup underneath
+ * and leaves the sheet orphaned.
+ *
+ * A popup that hosts its own view is a special case - back should walk that view's history first
+ * and only close the popup once there is nothing left to go back to. Mark a popup
+ * `custom-popup-close` when it owns its dismissal (an unsaved-changes prompt, say) and this leaves
+ * it alone.
+ */
+export async function useAndroidBackButton(f7: Framework7): Promise<void> {
+  if (!Capacitor.isNativePlatform()) return;
+
+  const $ = f7.$;
+
+  await App.addListener("backButton", () => {
+    if ($(".actions-modal.modal-in").length) {
+      f7.actions.close(".actions-modal.modal-in");
+      return;
+    }
+    if ($(".dialog.modal-in").length) {
+      f7.dialog.close(".dialog.modal-in");
+      return;
+    }
+    if ($(".sheet-modal.modal-in").length) {
+      f7.sheet.close(".sheet-modal.modal-in");
+      return;
+    }
+    if ($(".popover.modal-in").length) {
+      f7.popover.close(".popover.modal-in");
+      return;
+    }
+    if ($(".popup.modal-in").length) {
+      if ($(".popup.modal-in>.view").length) {
+        const popupView = f7.views.get(".popup.modal-in>.view");
+        if (popupView?.router && popupView.router.history.length > 1) {
+          popupView.router.back();
+          return;
+        }
+      }
+      if ($(".popup.custom-popup-close").length) return;
+      f7.popup.close(".popup.modal-in");
+      return;
+    }
+    if ($(".login-screen.modal-in").length) {
+      f7.loginScreen.close(".login-screen.modal-in");
+      return;
+    }
+    if ($(".panel.panel-in").length) {
+      f7.panel.close(".panel.panel-in");
+      return;
+    }
+
+    const view = f7.views.current;
+    if (view?.router && view.router.history.length > 1) {
+      view.router.back();
+      return;
+    }
+
+    // Nothing left to dismiss or unwind: let the app go to the background rather than exit, so
+    // returning to it restores the same screen.
+    void App.minimizeApp();
+  });
+}

package/templates/f7-app/src/plugins/capacitor/useKeyboard.ts

@@ -0,0 +1,61 @@
+import { Capacitor } from "@capacitor/core";
+import { Keyboard, KeyboardResize } from "@capacitor/keyboard";
+import type Framework7 from "framework7";
+import { useTabbarVisibility } from "@/shared/composables/useTabbarVisibility";
+
+/**
+ * Two problems the platform will not solve for you.
+ *
+ * The focused input scrolls out of view as the keyboard animates in, so it is scrolled back on
+ * every phase of the transition rather than once: the layout is still settling when
+ * `keyboardWillShow` fires, and only `keyboardDidShow` sees the final height.
+ *
+ * The tab bar sits above the keyboard and steals a row of screen from the field being typed into,
+ * so it hides while the keyboard is open. That state is shared, not local, because the bar is
+ * rendered by the shell and the input is somewhere deep in a page.
+ */
+export function useKeyboard(f7: Framework7): void {
+  if (!Capacitor.isNativePlatform()) return;
+
+  const $ = f7.$;
+  const { setKeyboardOpen } = useTabbarVisibility();
+
+  if (Capacitor.getPlatform() === "ios") {
+    void Keyboard.setResizeMode({ mode: KeyboardResize.Native });
+    void Keyboard.setScroll({ isDisabled: true });
+  }
+
+  const scrollFocusedIntoView = () => {
+    if (document.activeElement) {
+      f7.input.scrollIntoView(document.activeElement as HTMLElement, 0, true, true);
+    }
+  };
+
+  void Keyboard.addListener("keyboardWillShow", () => {
+    setKeyboardOpen(true);
+    scrollFocusedIntoView();
+  });
+
+  void Keyboard.addListener("keyboardDidShow", scrollFocusedIntoView);
+  void Keyboard.addListener("keyboardWillHide", scrollFocusedIntoView);
+
+  void Keyboard.addListener("keyboardDidHide", () => {
+    setKeyboardOpen(false);
+
+    // A message bar keeps its accessory row; restoring it here would push the composer up.
+    if (document.activeElement && $(document.activeElement).parents(".messagebar").length) return;
+
+    if (Capacitor.getPlatform() === "ios") {
+      void Keyboard.setAccessoryBarVisible({ isVisible: true });
+    }
+  });
+
+  // Tapping outside an input should dismiss the keyboard. Without this it stays up until the field
+  // is blurred by something else, covering half the screen.
+  $(document).on("touchstart", (event: Event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target) return;
+    if ($(target).closest("input, textarea, [contenteditable], .messagebar").length) return;
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+  });
+}

package/templates/f7-app/src/plugins/capacitor/useSplashScreen.ts

@@ -0,0 +1,11 @@
+import { Capacitor } from "@capacitor/core";
+import { SplashScreen } from "@capacitor/splash-screen";
+
+/**
+ * `launchAutoHide` is off in `capacitor.config.ts`, so the splash stays up until this is called.
+ * Hiding it on a frame boundary avoids a flash of an unpainted shell between the two.
+ */
+export function hideSplashScreen(): void {
+  if (!Capacitor.isNativePlatform()) return;
+  requestAnimationFrame(() => void SplashScreen.hide());
+}

package/templates/f7-app/src/plugins/capacitor/useStatusBar.ts

@@ -0,0 +1,15 @@
+import { Capacitor } from "@capacitor/core";
+import { Style, StatusBar } from "@capacitor/status-bar";
+
+/**
+ * The bar is transparent and overlays the web view, so the page owns the space behind it - see the
+ * safe-area padding in `assets/css/app.css`. Style follows the theme, because a dark bar over a
+ * dark header renders invisible text.
+ */
+export async function useStatusBar(): Promise<void> {
+  if (!Capacitor.isNativePlatform()) return;
+
+  await StatusBar.setOverlaysWebView({ overlay: true });
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  await StatusBar.setStyle({ style: prefersDark ? Style.Dark : Style.Light });
+}

package/templates/f7-app/src/plugins/framework7.plugin.ts

@@ -0,0 +1,41 @@
+import { Capacitor } from "@capacitor/core";
+import type { Framework7Parameters } from "framework7/types";
+import routes from "@/router";
+import type { AppTheme } from "@/shared/composables/theme/useAppTheme";
+
+export function framework7Parameters(theme: AppTheme, darkMode: boolean): Framework7Parameters {
+  return {
+    name: "App",
+    // "auto" lets Framework7 pick iOS or Material from the device; Settings can pin either.
+    theme,
+    darkMode,
+    routes,
+
+    // Long-press is a real gesture on touch; without preventClicks it also fires a tap.
+    touch: {
+      tapHold: true,
+      tapHoldDelay: 500,
+      tapHoldPreventClicks: true,
+    },
+
+    input: { scrollIntoViewOnFocus: true },
+
+    // The bar is drawn by the OS and overlaid; see useStatusBar.
+    statusbar: { enabled: Capacitor.isNativePlatform() },
+
+    view: {
+      animate: true,
+      // Each tab view keeps its own history, so switching back returns to the same screen.
+      browserHistory: false,
+    },
+
+    panel: { swipe: true },
+
+    /**
+     * Framework7 derives the whole theme palette from this - tints, shades, ripples and the dark
+     * variants - so it is set here rather than by overriding `--f7-theme-color` in CSS, which would
+     * change the accent but leave everything derived from it still blue.
+     */
+    colors: { primary: "#c96442" },
+  };
+}

package/templates/f7-app/src/plugins/i18n.plugin.ts

@@ -0,0 +1,10 @@
+import { createI18n } from "vue-i18n";
+import en from "@/locales/en.json";
+import fr from "@/locales/fr.json";
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: navigator.language.split("-")[0] ?? "en",
+  fallbackLocale: "en",
+  messages: { en, fr },
+});

package/templates/f7-app/src/plugins/seed.plugin.ts

@@ -0,0 +1,17 @@
+import { ensureReferenceData } from "@/domains/sales/sales.repository";
+import { rdb } from "@/shared/database";
+
+/**
+ * Reference data the app cannot work without: the product catalogue, the tags, a few customers.
+ *
+ * A template has to be usable the moment it opens. Without this, the first thing a new install asks
+ * you to do is press "seed sample data" before the New order sheet has anything to pick from - the
+ * schema is there and every screen is empty, which reads as broken rather than as new.
+ *
+ * `ensureReferenceData` is idempotent, so this runs on every start and does nothing after the first.
+ * Replace it with your own once the app has real data to load; delete it if data arrives from a
+ * server. Demo orders stay behind the button - those are a demo, this is a working state.
+ */
+export async function seedPlugin(): Promise<void> {
+  await ensureReferenceData(rdb);
+}

package/templates/f7-app/src/plugins/sqlite.plugin.ts

@@ -0,0 +1,21 @@
+import { openDatabase } from "@/shared/database";
+
+const OPEN_TIMEOUT_MS = 10_000;
+
+/**
+ * Opening the database is the one thing that must succeed before the first screen renders, and the
+ * one thing that used to fail silently: awaited at the top level of `main.ts`, a rejection left an
+ * empty `#app` and nothing in the console. The timeout turns a hang into a message.
+ */
+export async function sqlitePlugin(): Promise<void> {
+  await Promise.race([
+    openDatabase(),
+    new Promise<never>((_, reject) => {
+      setTimeout(
+        () =>
+          reject(new Error(`opening the database did not finish in ${String(OPEN_TIMEOUT_MS)}ms`)),
+        OPEN_TIMEOUT_MS,
+      );
+    }),
+  ]);
+}

package/templates/f7-app/src/router/global/global.routes.ts

@@ -0,0 +1,16 @@
+import type { Router } from "framework7/types";
+
+const globalRoutes: Router.RouteParameters[] = [
+  {
+    name: "not-found",
+    path: "(.*)",
+    // `async` is Framework7's route hook, not an async function - resolve from the promise.
+    async({ resolve }) {
+      void import("@/shared/components/error/404.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+];
+
+export default globalRoutes;

package/templates/f7-app/src/router/index.ts

@@ -0,0 +1,18 @@
+import type { Router } from "framework7/types";
+import homeRoutes from "@/modules/home/router/routes/home.routes";
+import demoRoutes from "@/modules/demo/router/routes/demo.routes";
+import settingsRoutes from "@/modules/settings/router/routes/settings.routes";
+import globalRoutes from "./global/global.routes";
+
+/**
+ * Each module owns its routes; this only orders them. The catch-all is last because Framework7
+ * takes the first match.
+ */
+const routes: Router.RouteParameters[] = [
+  ...homeRoutes,
+  ...demoRoutes,
+  ...settingsRoutes,
+  ...globalRoutes,
+];
+
+export default routes;

package/templates/f7-app/src/shared/components/error/404.vue

@@ -0,0 +1,12 @@
+<template>
+  <F7Page>
+    <F7Navbar :title="t('errors.notFoundTitle')" />
+    <F7Block strong class="text-center">
+      <p class="m-0">{{ t("errors.notFound") }}</p>
+    </F7Block>
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n();
+</script>