@vincent99/vlib 0.1.0

package/templates/src/App.vue

@@ -0,0 +1,8 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+// App.vue — top-level router outlet.
+// Layout is handled by _layout.vue route wrappers.
+</script>

package/templates/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import './styles/main.scss';
+
+createApp(App).use(router).mount('#app');

package/templates/src/router.ts

@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { buildRoutes, createAuthGuard } from '@vincent99/vlib/router';
+import { useAuthStore } from './stores/auth';
+
+// Glob-import all route components
+const pages = import.meta.glob('./routes/**/*.vue');
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: buildRoutes(pages, {
+    publicPaths: ['/login'],
+  }),
+  scrollBehavior(_to, _from, savedPosition) {
+    return savedPosition ?? { top: 0 };
+  },
+});
+
+// Auth navigation guard
+router.beforeEach(
+  createAuthGuard(() => {
+    const auth = useAuthStore();
+    return auth.isAuthenticated;
+  })
+);
+
+export default router;

package/templates/src/routes/_layout.vue

@@ -0,0 +1,58 @@
+<template>
+  <AppLayout
+    :app-name="appName"
+    :user="auth.user.value"
+    :nav-items="navItems"
+    @logout="auth.logout()"
+  >
+    <RouterView />
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { AppLayout } from '@vincent99/vlib/components';
+import type { NavItem } from '@vincent99/vlib/components';
+import { useAuthStore } from '../stores/auth';
+
+const appName = import.meta.env.VITE_APP_NAME || 'My App';
+const auth = useAuthStore();
+
+// Admin nav items loaded from the API at runtime
+const adminTables = computed<NavItem[]>(() =>
+  tables.value.map((t) => ({
+    label: t.name,
+    to: `/admin/tables/${t.name}`,
+  }))
+);
+
+const navItems = computed<NavItem[]>(() => [
+  { label: 'Home', to: '/', icon: '🏠' },
+  {
+    label: 'Admin',
+    icon: '⚙️',
+    defaultOpen: true,
+    children: [
+      { label: 'Dashboard', to: '/admin', icon: '📊' },
+      ...adminTables.value,
+    ],
+  },
+]);
+
+import { ref } from 'vue';
+const tables = ref<{ name: string }[]>([]);
+
+onMounted(async () => {
+  await auth.init();
+  try {
+    const res = await fetch('/api/admin/tables');
+    if (res.ok) {
+      const data: Array<{ name: string; isJoinTable: boolean }> =
+        await res.json();
+      tables.value = data.filter((t) => !t.isJoinTable);
+    }
+  } catch {
+    /* ignore */
+  }
+});
+</script>

package/templates/src/routes/admin/_layout.vue

@@ -0,0 +1,8 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+// Admin section layout — nested inside root _layout.vue.
+// Currently a passthrough; add admin-specific UI (breadcrumbs, etc.) here as needed.
+</script>

package/templates/src/routes/admin/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="vl-page">
+    <h1 class="vl-page__title">Admin</h1>
+    <p class="vl-page__subtitle">Database tables</p>
+
+    <div v-if="loading" class="vl-admin-home__loading">Loading tables…</div>
+
+    <div v-else class="vl-admin-home__grid">
+      <RouterLink
+        v-for="table in tables"
+        :key="table.name"
+        :to="`/admin/tables/${table.name}`"
+        class="vl-admin-home__card"
+      >
+        <span class="vl-admin-home__card-name">{{ table.name }}</span>
+        <span class="vl-admin-home__card-arrow">→</span>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface TableInfo {
+  name: string;
+  isJoinTable: boolean;
+}
+
+const tables = ref<TableInfo[]>([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const res = await fetch('/api/admin/tables');
+    if (res.ok) {
+      const data: TableInfo[] = await res.json();
+      tables.value = data.filter((t) => !t.isJoinTable);
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style lang="scss">
+.vl-admin-home {
+  &__loading {
+    color: var(--color-text-secondary);
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--space-3);
+    margin-top: var(--space-4);
+  }
+
+  &__card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4);
+    background: white;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    text-decoration: none;
+    color: var(--color-text);
+    font-weight: 500;
+    box-shadow: var(--shadow);
+    transition: all 0.15s;
+
+    &:hover {
+      border-color: var(--color-primary-light);
+      box-shadow: var(--shadow-lg);
+      transform: translateY(-1px);
+    }
+
+    &-name {
+      text-transform: capitalize;
+    }
+
+    &-arrow {
+      color: var(--color-primary);
+    }
+  }
+}
+</style>

package/templates/src/routes/admin/tables/[table]/[id].vue

@@ -0,0 +1,20 @@
+<template>
+  <AdminForm :table-name="route.params.table as string" :row-ids="rowIds" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { AdminForm } from '@vincent99/vlib/components';
+
+const route = useRoute();
+
+// Support comma-separated IDs for multi-edit: /admin/tables/users/1,2,3
+const rowIds = computed(() => {
+  const id = route.params.id as string;
+  return id.split(',').map((s) => {
+    const n = parseInt(s, 10);
+    return isNaN(n) ? s : n;
+  });
+});
+</script>

package/templates/src/routes/admin/tables/[table]/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <AdminTable :table-name="route.params.table as string" />
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { AdminTable } from '@vincent99/vlib/components';
+
+const route = useRoute();
+</script>

package/templates/src/routes/admin/tables/[table]/new.vue

@@ -0,0 +1,10 @@
+<template>
+  <AdminForm :table-name="route.params.table as string" />
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { AdminForm } from '@vincent99/vlib/components';
+
+const route = useRoute();
+</script>

package/templates/src/routes/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="vl-page">
+    <h1 class="vl-page__title">Welcome</h1>
+    <p class="vl-page__subtitle">
+      You are logged in as
+      <strong>{{
+        auth.user.value?.displayName || auth.user.value?.username
+      }}</strong
+      >.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '../stores/auth';
+
+const auth = useAuthStore();
+</script>
+
+<style lang="scss">
+.vl-page {
+  &__title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--color-text);
+    margin-bottom: var(--space-2);
+  }
+
+  &__subtitle {
+    color: var(--color-text-secondary);
+    font-size: 1rem;
+  }
+}
+</style>

package/templates/src/routes/login.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="vl-login-page">
+    <div class="vl-login-card">
+      <div class="vl-login-card__logo">
+        <span class="vl-login-card__app-name">{{ appName }}</span>
+      </div>
+      <h1 class="vl-login-card__title">Sign in</h1>
+
+      <div v-if="error" class="vl-alert vl-alert--error">{{ error }}</div>
+
+      <form class="vl-login-form" @submit.prevent="handleLogin">
+        <div class="vl-form__field">
+          <label for="username" class="vl-form__label">Username</label>
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            class="vl-form__input"
+            autocomplete="username"
+            required
+            :disabled="loading"
+          />
+        </div>
+
+        <div class="vl-form__field">
+          <label for="password" class="vl-form__label">Password</label>
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            class="vl-form__input"
+            autocomplete="current-password"
+            required
+            :disabled="loading"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="vl-btn vl-btn--primary vl-login-form__submit"
+          :disabled="loading"
+        >
+          {{ loading ? 'Signing in…' : 'Sign in' }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '../stores/auth';
+
+const appName = import.meta.env.VITE_APP_NAME || 'My App';
+const router = useRouter();
+const auth = useAuthStore();
+
+const username = ref('');
+const password = ref('');
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+async function handleLogin() {
+  loading.value = true;
+  error.value = null;
+  const err = await auth.login(username.value, password.value);
+  if (err) {
+    error.value = err;
+    loading.value = false;
+  } else {
+    router.push('/');
+  }
+}
+</script>
+
+<style lang="scss">
+.vl-login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-background);
+  padding: var(--space-4);
+}
+
+.vl-login-card {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-8);
+  width: 100%;
+  max-width: 400px;
+
+  &__logo {
+    text-align: center;
+    margin-bottom: var(--space-4);
+  }
+
+  &__app-name {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--color-primary);
+    letter-spacing: -0.02em;
+  }
+
+  &__title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--color-text);
+    text-align: center;
+    margin-bottom: var(--space-6);
+  }
+}
+
+.vl-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+
+  &__submit {
+    width: 100%;
+    justify-content: center;
+    padding: var(--space-3);
+    font-size: 1rem;
+  }
+}
+</style>

package/templates/src/stores/auth.ts

@@ -0,0 +1,58 @@
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+interface User {
+  id: number;
+  username: string;
+  displayName: string | null;
+}
+
+// Simple reactive auth store (no Pinia required)
+const user = ref<User | null>(null);
+const initialized = ref(false);
+
+export function useAuthStore() {
+  const router = useRouter();
+
+  const isAuthenticated = computed(() => user.value !== null);
+
+  async function init() {
+    if (initialized.value) return;
+    try {
+      const res = await fetch('/api/auth/me');
+      if (res.ok) {
+        const data = await res.json();
+        user.value = data.user;
+      }
+    } catch {
+      /* not authenticated */
+    }
+    initialized.value = true;
+  }
+
+  async function login(
+    username: string,
+    password: string
+  ): Promise<string | null> {
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    });
+    if (!res.ok) {
+      const data = await res.json();
+      return data.error || 'Login failed';
+    }
+    const data = await res.json();
+    user.value = data.user;
+    return null;
+  }
+
+  async function logout() {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    user.value = null;
+    router.push('/login');
+  }
+
+  return { user, isAuthenticated, initialized, init, login, logout };
+}

package/templates/src/styles/main.scss

@@ -0,0 +1,98 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// ── CSS Custom Properties (design tokens) ────────────────────────────────────
+:root {
+  // Colors — blues
+  --color-primary: #1e40af; // Blue 800
+  --color-primary-light: #3b82f6; // Blue 500
+  --color-primary-dark: #1e3a5f; // Deep navy
+  --color-accent: #60a5fa; // Blue 400
+
+  // Surface colors
+  --color-background: #f0f4f8;
+  --color-surface: #ffffff;
+  --color-sidebar: #1e3a5f;
+  --color-header: #1e40af;
+
+  // Text
+  --color-text: #1e293b; // Slate 800
+  --color-text-secondary: #64748b; // Slate 500
+  --color-border: #e2e8f0; // Slate 200
+
+  // Status
+  --color-danger: #ef4444;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+
+  // Layout
+  --header-height: 60px;
+  --sidebar-width: 240px;
+
+  // Spacing scale (multiples of 4px)
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  // Border radius
+  --radius: 6px;
+  --radius-lg: 10px;
+
+  // Shadows
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+// ── Base reset / global styles ────────────────────────────────────────────────
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    sans-serif;
+  color: var(--color-text);
+  background: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--color-primary);
+}
+
+// ── Responsive helpers ────────────────────────────────────────────────────────
+// Small: ≤ 767px  (portrait phone)
+// Medium: 768–1023px (tablet)
+// Large: ≥ 1024px (desktop)

package/templates/src/styles/variables.scss

@@ -0,0 +1,7 @@
+// Design tokens — imported into every component via vite.config.ts preprocessorOptions
+
+// ── Breakpoints ───────────────────────────────────────────────────────────────
+// Used as Sass variables in media queries (CSS custom props can't be in @media)
+$bp-small: 390px; // Small: portrait phone (≤ 767px)
+$bp-medium: 768px; // Medium: tablet (768px – 1023px)
+$bp-large: 1024px; // Large: desktop (≥ 1024px)

package/templates/tailwind.config.js.ejs

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/@vincent99/vlib/src/components/**/*.vue',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50:  '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a5f',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/templates/tsconfig.json.ejs

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": ["node_modules", "dist", "server", "scripts"]
+}

package/templates/tsconfig.server.json.ejs

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": ".",
+    "declaration": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "include": ["server/**/*.ts", "scripts/**/*.ts"],
+  "exclude": ["node_modules", "dist", "src"]
+}

package/templates/vite.config.ts.ejs

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // Inject breakpoint variables into every SCSS file.
+        // Uses loadPaths so the Sass compiler can resolve the module.
+        loadPaths: [resolve(__dirname, 'src/styles')],
+        additionalData: `@use "variables" as *;`,
+      },
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist/public',
+    emptyOutDir: true,
+  },
+})