@cavulsqa/create 0.1.0

package/templates/f7-app/capacitor.config.ts

@@ -0,0 +1,14 @@
+import type { CapacitorConfig } from "@capacitor/cli";
+
+const config: CapacitorConfig = {
+  appId: "com.example.app",
+  appName: "App",
+  webDir: "dist",
+  plugins: {
+    SplashScreen: { launchAutoHide: false },
+    Keyboard: { resizeOnFullScreen: true },
+    CapacitorSQLite: { androidIsEncryption: false },
+  },
+};
+
+export default config;

package/templates/f7-app/components.d.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    404: typeof import('./src/shared/components/error/404.vue')['default']
+    DemoBusLog: typeof import('./src/modules/demo/components/DemoBusLog.vue')['default']
+    DemoCreateOrderSheet: typeof import('./src/modules/demo/components/DemoCreateOrderSheet.vue')['default']
+    DemoOrderList: typeof import('./src/modules/demo/components/DemoOrderList.vue')['default']
+    DemoPipelineBenchmark: typeof import('./src/modules/demo/components/DemoPipelineBenchmark.vue')['default']
+    DemoStatCards: typeof import('./src/modules/demo/components/DemoStatCards.vue')['default']
+    DemoView: typeof import('./src/modules/demo/views/DemoView.vue')['default']
+    F7App: typeof import('framework7-vue')['f7App']
+    F7Block: typeof import('framework7-vue')['f7Block']
+    F7BlockTitle: typeof import('framework7-vue')['f7BlockTitle']
+    F7Button: typeof import('framework7-vue')['f7Button']
+    F7Chip: typeof import('framework7-vue')['f7Chip']
+    F7Fab: typeof import('framework7-vue')['f7Fab']
+    F7FabButton: typeof import('framework7-vue')['f7FabButton']
+    F7FabButtons: typeof import('framework7-vue')['f7FabButtons']
+    F7Icon: typeof import('framework7-vue')['f7Icon']
+    F7Link: typeof import('framework7-vue')['f7Link']
+    F7List: typeof import('framework7-vue')['f7List']
+    F7ListInput: typeof import('framework7-vue')['f7ListInput']
+    F7ListItem: typeof import('framework7-vue')['f7ListItem']
+    F7Navbar: typeof import('framework7-vue')['f7Navbar']
+    F7NavRight: typeof import('framework7-vue')['f7NavRight']
+    F7Page: typeof import('framework7-vue')['f7Page']
+    F7PageContent: typeof import('framework7-vue')['f7PageContent']
+    F7Panel: typeof import('framework7-vue')['f7Panel']
+    F7Searchbar: typeof import('framework7-vue')['f7Searchbar']
+    F7Segmented: typeof import('framework7-vue')['f7Segmented']
+    F7Sheet: typeof import('framework7-vue')['f7Sheet']
+    F7Stepper: typeof import('framework7-vue')['f7Stepper']
+    F7Subnavbar: typeof import('framework7-vue')['f7Subnavbar']
+    F7SwipeoutActions: typeof import('framework7-vue')['f7SwipeoutActions']
+    F7SwipeoutButton: typeof import('framework7-vue')['f7SwipeoutButton']
+    F7Tab: typeof import('framework7-vue')['f7Tab']
+    F7Tabs: typeof import('framework7-vue')['f7Tabs']
+    F7Toggle: typeof import('framework7-vue')['f7Toggle']
+    F7Toolbar: typeof import('framework7-vue')['f7Toolbar']
+    F7View: typeof import('framework7-vue')['f7View']
+    F7Views: typeof import('framework7-vue')['f7Views']
+    FeatureDetailView: typeof import('./src/modules/home/views/FeatureDetailView.vue')['default']
+    HomeView: typeof import('./src/modules/home/views/HomeView.vue')['default']
+    MetricsPanel: typeof import('./src/shared/components/metrics/MetricsPanel.vue')['default']
+    OrderDetailView: typeof import('./src/modules/demo/views/OrderDetailView.vue')['default']
+    OrderSearchView: typeof import('./src/modules/demo/views/OrderSearchView.vue')['default']
+    SettingsView: typeof import('./src/modules/settings/views/SettingsView.vue')['default']
+  }
+}

package/templates/f7-app/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover"
+    />
+    <title>App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/f7-app/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@cavulsqa/template-f7-app",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Vue 3 + Framework7 + Capacitor + SQLite starter: tabbed shell, domains/modules/shared layout, native keyboard and back-button handling.",
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vue-tsc --noEmit && vp build",
+    "type-check": "vue-tsc --noEmit",
+    "test": "vp test",
+    "check": "vp check"
+  },
+  "dependencies": {
+    "@capacitor-community/sqlite": "^7.0.2",
+    "@capacitor/android": "^8.5.0",
+    "@capacitor/app": "^8.0.0",
+    "@capacitor/core": "^8.0.0",
+    "@capacitor/keyboard": "^8.0.0",
+    "@capacitor/preferences": "^8.0.0",
+    "@capacitor/splash-screen": "^8.0.0",
+    "@capacitor/status-bar": "^8.0.0",
+    "@cavulsqa/mobile-db": "^0.3.0",
+    "@cavulsqa/reactive-db": "^0.2.0",
+    "@cavulsqa/reactive-vue": "^0.2.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@vueuse/core": "^14.4.0",
+    "framework7": "^9.0.2",
+    "framework7-icons": "^5.0.5",
+    "framework7-vue": "^8.3.4",
+    "kysely": "^0.29.5",
+    "sql.js": "1.13.0",
+    "tailwindcss": "^4.3.3",
+    "vue": "^3.5.0",
+    "vue-i18n": "^11.2.2"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "^8.0.0",
+    "@intlify/unplugin-vue-i18n": "^11.2.5",
+    "@types/node": "^24",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "sql.js": "1.13.0",
+    "typescript": "^5.9.3",
+    "unplugin-auto-import": "^21.1.0",
+    "unplugin-icons": "^23.0.1",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plus": "0.3.0",
+    "vue-tsc": "^3.2.4"
+  }
+}

package/templates/f7-app/src/App.vue

@@ -0,0 +1,72 @@
+<template>
+  <F7App v-bind="parameters">
+    <!-- Right panel: the query metrics, reachable from anywhere instead of owning a screen. -->
+    <F7Panel right cover>
+      <F7View>
+        <MetricsPanel />
+      </F7View>
+    </F7Panel>
+
+    <F7Views tabs class="safe-areas">
+      <F7Toolbar tabbar icons bottom :class="{ 'tabbar-hidden': !isVisible }">
+        <!--
+          `toolbar-pane` is a Framework7 9 class that framework7-vue 8 does not wrap as a
+          component, so it is written as a plain div. The CSS is what produces the floating pane.
+        -->
+        <div class="toolbar-pane">
+          <F7Link
+            v-for="(tab, index) in tabs"
+            :key="tab.id"
+            :tab-link="`#view-${tab.id}`"
+            :tab-link-active="index === 0"
+            :icon-ios="`f7:${tab.iconIos}`"
+            :icon-md="`material:${tab.iconMd}`"
+            :text="t(tab.labelKey)"
+          />
+        </div>
+      </F7Toolbar>
+
+      <F7View
+        v-for="(tab, index) in tabs"
+        :id="`view-${tab.id}`"
+        :key="tab.id"
+        :main="index === 0"
+        :tab="true"
+        :tab-active="index === 0"
+        :url="`/${tab.id}/`"
+      />
+    </F7Views>
+  </F7App>
+</template>
+
+<script setup lang="ts">
+import { tabs } from "@/app/tabs";
+import { initCapacitor } from "@/plugins/capacitor";
+import { hideSplashScreen } from "@/plugins/capacitor/useSplashScreen";
+import { framework7Parameters } from "@/plugins/framework7.plugin";
+import { useAppThemeProvider } from "@/shared/composables/theme/useAppTheme";
+import MetricsPanel from "@/shared/components/metrics/MetricsPanel.vue";
+
+const { t } = useI18n();
+const { isVisible } = useTabbarVisibility();
+
+// Provided here so any screen can read or change it through useAppTheme().
+const appTheme = useAppThemeProvider();
+const parameters = framework7Parameters(appTheme.value.theme, appTheme.value.darkMode === "dark");
+
+onMounted(() => {
+  // The native handlers need the Framework7 instance, which exists only once the shell is mounted.
+  f7ready(async (instance) => {
+    await initCapacitor(instance);
+    hideSplashScreen();
+  });
+});
+</script>
+
+<style>
+/* The tab bar gets out of the way while the keyboard is open; see useKeyboard. */
+.tabbar-hidden {
+  transform: translateY(100%);
+  transition: transform 200ms ease;
+}
+</style>

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

@@ -0,0 +1,25 @@
+export interface TabDefinition {
+  /** Also the tab's DOM id and the first segment of its route. */
+  id: string;
+  /** i18n key, resolved in the shell so the label follows the active locale. */
+  labelKey: string;
+  /** Framework7 icon name, used when the iOS theme is active. */
+  iconIos: string;
+  /** Material icon name, used when the Material theme is active. */
+  iconMd: string;
+}
+
+/**
+ * The tab bar is data: add an entry, add a route file in the matching module, and the shell, the bar
+ * and the navigation all follow. Each tab is a Framework7 view with its own history, so switching
+ * away and back returns to the same screen.
+ *
+ * Icons are given per theme rather than once. Framework7 picks `icon-ios` or `icon-md` from the
+ * active theme, which is what makes the bar look native on both platforms instead of iOS glyphs on
+ * Android.
+ */
+export const tabs: TabDefinition[] = [
+  { id: "home", labelKey: "tabs.home", iconIos: "house_fill", iconMd: "home" },
+  { id: "demo", labelKey: "tabs.demo", iconIos: "bolt_fill", iconMd: "bolt" },
+  { id: "settings", labelKey: "tabs.settings", iconIos: "gear_alt_fill", iconMd: "settings" },
+];

package/templates/f7-app/src/assets/css/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/f7-app/src/assets/css/icons.css

@@ -0,0 +1,50 @@
+/**
+ * Framework7 renders `icon-md="material:home"` as the ligature text "home" unless a Material Icons
+ * font with `liga` enabled is present. The npm `framework7-icons` package only ships the iOS glyphs,
+ * so the Material font is bundled here rather than pulled from a CDN - an offline-first app should
+ * not lose its icons with the network.
+ */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src:
+    local("Material Icons"),
+    url(../fonts/material-icons-round.woff2) format("woff2");
+}
+
+@font-face {
+  font-family: "Material Icons Outlined";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(../fonts/material-icons-outlined.woff2) format("woff2");
+}
+
+.material-icons,
+.material-icons-outlined {
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  /* Without this the icon name renders as text instead of a glyph. */
+  font-feature-settings: "liga";
+}
+
+.material-icons {
+  font-family: "Material Icons";
+}
+
+.material-icons-outlined {
+  font-family: "Material Icons Outlined";
+}