@vincent99/vlib 0.1.0

package/src/components/TableView.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="vl-table-view">
+    <!-- Toolbar -->
+    <div class="vl-table-view__toolbar">
+      <div class="vl-table-view__toolbar-left">
+        <slot name="toolbar-left">
+          <span v-if="selectedIds.size > 0" class="vl-table-view__selected-count">
+            {{ selectedIds.size }} selected
+          </span>
+        </slot>
+      </div>
+      <div class="vl-table-view__toolbar-right">
+        <!-- Bulk actions -->
+        <template v-if="selectedIds.size > 0 && actions.length > 0">
+          <button
+            v-for="action in actions"
+            :key="action.key"
+            class="vl-btn"
+            :class="[`vl-btn--${action.variant || 'default'}`]"
+            @click="handleAction(action)"
+          >
+            {{ action.label }}
+          </button>
+        </template>
+        <slot name="toolbar-right" />
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="vl-table-view__scroll">
+      <table class="vl-table">
+        <thead>
+          <tr>
+            <!-- Select-all checkbox -->
+            <th class="vl-table__th vl-table__th--check">
+              <input
+                type="checkbox"
+                :checked="allSelected"
+                :indeterminate="someSelected && !allSelected"
+                aria-label="Select all"
+                @change="toggleAll"
+              />
+            </th>
+            <th
+              v-for="col in headers"
+              :key="col.key"
+              class="vl-table__th"
+              :class="{ 'vl-table__th--sortable': col.sortable !== false }"
+              @click="col.sortable !== false && toggleSort(col.key)"
+            >
+              {{ col.label }}
+              <span v-if="sortKey === col.key" class="vl-table__sort-icon">
+                {{ sortDir === 'asc' ? '↑' : '↓' }}
+              </span>
+            </th>
+            <th v-if="$slots['row-actions']" class="vl-table__th vl-table__th--actions">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="row in rows"
+            :key="getRowId(row)"
+            class="vl-table__tr"
+            :class="{ 'vl-table__tr--selected': selectedIds.has(getRowId(row)) }"
+          >
+            <td class="vl-table__td vl-table__td--check">
+              <input
+                type="checkbox"
+                :checked="selectedIds.has(getRowId(row))"
+                :aria-label="`Select row ${getRowId(row)}`"
+                @change="toggleRow(getRowId(row))"
+              />
+            </td>
+            <td
+              v-for="col in headers"
+              :key="col.key"
+              class="vl-table__td"
+            >
+              <slot :name="`cell-${col.key}`" :row="row" :value="(row as Record<string, unknown>)[col.key]">
+                {{ formatCell((row as Record<string, unknown>)[col.key]) }}
+              </slot>
+            </td>
+            <td v-if="$slots['row-actions']" class="vl-table__td vl-table__td--actions">
+              <slot :id="getRowId(row)" name="row-actions" :row="row" />
+            </td>
+          </tr>
+          <tr v-if="rows.length === 0">
+            <td :colspan="headers.length + 2" class="vl-table__empty">
+              No rows found.
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="total > pageSize" class="vl-table-view__pagination">
+      <button
+        class="vl-btn vl-btn--sm"
+        :disabled="page <= 1"
+        @click="$emit('update:page', page - 1)"
+      >← Prev</button>
+      <span class="vl-table-view__pagination-info">
+        Page {{ page }} of {{ totalPages }} &nbsp;({{ total }} total)
+      </span>
+      <button
+        class="vl-btn vl-btn--sm"
+        :disabled="page >= totalPages"
+        @click="$emit('update:page', page + 1)"
+      >Next →</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { TableHeader, TableAction } from './types.js'
+
+export type { TableHeader, TableAction }
+
+const props = withDefaults(
+  defineProps<{
+    rows: Record<string, unknown>[]
+    headers: TableHeader[]
+    idKey?: string
+    total?: number
+    page?: number
+    pageSize?: number
+    actions?: TableAction[]
+  }>(),
+  {
+    idKey: 'id',
+    total: 0,
+    page: 1,
+    pageSize: 50,
+    actions: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'update:page': [page: number]
+  'action': [key: string, ids: (string | number)[]]
+  'sort': [key: string, dir: 'asc' | 'desc']
+}>()
+
+const selectedIds = ref(new Set<string | number>())
+const sortKey = ref<string | null>(null)
+const sortDir = ref<'asc' | 'desc'>('asc')
+
+const totalPages = computed(() => Math.ceil((props.total || props.rows.length) / props.pageSize))
+
+const allSelected = computed(
+  () => props.rows.length > 0 && props.rows.every((r) => selectedIds.value.has(getRowId(r)))
+)
+const someSelected = computed(() => props.rows.some((r) => selectedIds.value.has(getRowId(r))))
+
+function getRowId(row: Record<string, unknown>): string | number {
+  return row[props.idKey] as string | number
+}
+
+function toggleAll() {
+  if (allSelected.value) {
+    props.rows.forEach((r) => selectedIds.value.delete(getRowId(r)))
+  } else {
+    props.rows.forEach((r) => selectedIds.value.add(getRowId(r)))
+  }
+}
+
+function toggleRow(id: string | number) {
+  if (selectedIds.value.has(id)) {selectedIds.value.delete(id)}
+  else {selectedIds.value.add(id)}
+}
+
+function handleAction(action: TableAction) {
+  emit('action', action.key, Array.from(selectedIds.value))
+  selectedIds.value.clear()
+}
+
+function toggleSort(key: string) {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortDir.value = 'asc'
+  }
+  emit('sort', sortKey.value!, sortDir.value)
+}
+
+function formatCell(value: unknown): string {
+  if (value === null || value === undefined) {return ''}
+  if (typeof value === 'object') {return JSON.stringify(value)}
+  const str = String(value)
+  return str.length > 120 ? str.slice(0, 120) + '…' : str
+}
+
+// Expose selected IDs for parent use
+defineExpose({ selectedIds })
+</script>
+
+<style lang="scss">
+.vl-table-view {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border);
+    gap: var(--space-3);
+    flex-wrap: wrap;
+
+    &-left,
+    &-right {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+    }
+  }
+
+  &__selected-count {
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    font-weight: 500;
+  }
+
+  &__scroll {
+    overflow-x: auto;
+  }
+
+  &__pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    justify-content: center;
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--color-border);
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+  }
+}
+
+.vl-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+
+  &__th {
+    padding: var(--space-2) var(--space-3);
+    text-align: left;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    border-bottom: 2px solid var(--color-border);
+    white-space: nowrap;
+    background: var(--color-background);
+
+    &--check,
+    &--actions {
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    &--sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  &__td {
+    padding: var(--space-2) var(--space-3);
+    border-bottom: 1px solid var(--color-border);
+    color: var(--color-text);
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--check,
+    &--actions {
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    &--actions {
+      display: flex;
+      gap: var(--space-1);
+    }
+  }
+
+  &__tr {
+    transition: background 0.1s;
+
+    &:hover {
+      background: var(--color-background);
+    }
+
+    &--selected {
+      background: color-mix(in srgb, var(--color-primary) 8%, white);
+
+      &:hover {
+        background: color-mix(in srgb, var(--color-primary) 12%, white);
+      }
+    }
+  }
+
+  &__sort-icon {
+    margin-left: var(--space-1);
+    color: var(--color-primary);
+  }
+
+  &__empty {
+    padding: var(--space-8) var(--space-4);
+    text-align: center;
+    color: var(--color-text-secondary);
+    font-style: italic;
+  }
+}
+
+// Button styles (shared)
+.vl-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: white;
+  color: var(--color-text);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background: var(--color-background);
+    border-color: var(--color-primary-light);
+    color: var(--color-primary);
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &--primary {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+
+    &:hover:not(:disabled) {
+      background: var(--color-primary-dark);
+      border-color: var(--color-primary-dark);
+      color: white;
+    }
+  }
+
+  &--danger {
+    color: var(--color-danger);
+    border-color: var(--color-danger);
+
+    &:hover:not(:disabled) {
+      background: var(--color-danger);
+      color: white;
+    }
+  }
+
+  &--sm {
+    padding: var(--space-1) var(--space-2);
+    font-size: 0.8rem;
+  }
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export { default as AppLayout } from './AppLayout.vue';
+export { default as NavSidebar } from './NavSidebar.vue';
+export { default as TableView } from './TableView.vue';
+export { default as AdminTable } from './AdminTable.vue';
+export { default as AdminForm } from './AdminForm.vue';
+
+// Type exports from companion .ts (importable without Vue processing)
+export type {
+  AppLayoutProps,
+  NavItem,
+  TableHeader,
+  TableAction,
+} from './types.js';

package/src/components/types.ts

@@ -0,0 +1,28 @@
+// Component prop interfaces — defined here so they can be imported from both
+// Vue files and TypeScript-only contexts.
+
+export interface AppLayoutProps {
+  appName?: string;
+  user?: { username: string; displayName?: string | null } | null;
+  navItems?: NavItem[];
+}
+
+export interface NavItem {
+  label: string;
+  to?: string;
+  icon?: string;
+  children?: NavItem[];
+  defaultOpen?: boolean;
+}
+
+export interface TableHeader {
+  key: string;
+  label: string;
+  sortable?: boolean;
+}
+
+export interface TableAction {
+  key: string;
+  label: string;
+  variant?: 'default' | 'danger' | 'primary';
+}

package/templates/.env.example

@@ -0,0 +1,4 @@
+NODE_ENV=development
+PORT=3001
+DB_PATH=./data/app.db
+SESSION_SECRET=change-me-in-production

package/templates/.prettierignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+*.db

package/templates/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package/templates/Dockerfile.ejs

@@ -0,0 +1,31 @@
+# ── Build stage ──────────────────────────────────────────────
+FROM node:22-alpine AS builder
+WORKDIR /app
+
+# Install dependencies
+COPY package.json yarn.lock* .yarnrc.yml* ./
+RUN yarn install --frozen-lockfile
+
+# Copy source and build
+COPY . .
+RUN yarn build
+
+# ── Production stage ──────────────────────────────────────────
+FROM node:22-alpine AS production
+WORKDIR /app
+ENV NODE_ENV=production
+
+# Only install production deps
+COPY package.json yarn.lock* .yarnrc.yml* ./
+RUN yarn install --frozen-lockfile --production
+
+# Copy compiled server and built frontend
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/schemas ./schemas
+
+# Data directory for SQLite
+VOLUME ["/data"]
+
+EXPOSE 3000
+
+CMD ["sh", "-c", "node dist/scripts/migrate.js && node dist/server/index.js"]

package/templates/docker-compose.prod.yml.ejs

@@ -0,0 +1,22 @@
+name: <%= name.toLowerCase().replace(/\s+/g, '-') %>-prod
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./data:/data
+    environment:
+      - NODE_ENV=production
+      - DB_PATH=/data/app.db
+      - PORT=3000
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3000/api/auth/me"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s

package/templates/docker-compose.yml.ejs

@@ -0,0 +1,22 @@
+name: <%= name.toLowerCase().replace(/\s+/g, '-') %>
+
+services:
+  app:
+    image: node:22-alpine
+    working_dir: /app
+    volumes:
+      - .:/app
+      - app_node_modules:/app/node_modules
+      - ./data:/data
+    ports:
+      - "5173:5173"
+      - "3001:3001"
+    environment:
+      - NODE_ENV=development
+      - DB_PATH=/data/app.db
+      - PORT=3001
+    command: sh -c "yarn install && yarn migrate && yarn dev"
+    restart: unless-stopped
+
+volumes:
+  app_node_modules:

package/templates/eslint.config.mjs

@@ -0,0 +1,42 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import { defineConfig } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+import pluginVue from 'eslint-plugin-vue';
+import vueTs from '@vue/eslint-config-typescript';
+
+export default defineConfig(
+  { ignores: ['dist/', 'node_modules/'] },
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  pluginVue.configs['flat/recommended'],
+  vueTs(),
+  {
+    rules: {
+      curly: ['error', 'all'],
+      'vue/multi-word-component-names': 'off',
+      'vue/valid-template-root': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      // Defer HTML formatting to prettier
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/multiline-html-element-content-newline': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/html-indent': 'off',
+      'vue/html-closing-bracket-newline': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  }
+);

package/templates/index.html.ejs

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= name %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/package.json.ejs

@@ -0,0 +1,44 @@
+{
+  "name": "<%= name.toLowerCase().replace(/\s+/g, '-') %>",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently -n vite,server -c cyan,green \"vite\" \"tsx watch server/index.ts\"",
+    "dev:vite": "vite",
+    "dev:server": "tsx watch server/index.ts",
+    "build": "vue-tsc && vite build && tsc -p tsconfig.server.json",
+    "start": "node dist/server/index.js",
+    "migrate": "tsx scripts/migrate.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "docker:dev": "docker compose up",
+    "docker:prod": "docker compose -f docker-compose.prod.yml up --build"
+  },
+  "dependencies": {
+    "@vincent99/vlib": "^0.1.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@types/node": "^22.10.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "sass": "^1.83.4",
+    "tailwindcss": "^3.4.17",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/templates/postcss.config.js.ejs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/schemas/001-initial.sql

@@ -0,0 +1,35 @@
+-- Schema version 1: initial tables
+-- Applied by the migration runner. DO NOT edit this file after first application.
+-- To make changes, create 002-<description>.sql
+
+-- Key-value settings store
+CREATE TABLE IF NOT EXISTS settings (
+  key   TEXT PRIMARY KEY NOT NULL,
+  value TEXT NOT NULL DEFAULT 'null'  -- stored as JSON
+);
+
+-- schema_version is managed by the migration runner; initialize at 0 here,
+-- the runner will update it to 1 after this file is applied.
+INSERT OR IGNORE INTO settings (key, value) VALUES ('schema_version', '0');
+
+-- Users
+CREATE TABLE IF NOT EXISTS users (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+  username    TEXT    UNIQUE NOT NULL,
+  password    TEXT    NOT NULL,                   -- pbkdf2:<iters>:<salt>:<hash>
+  displayName TEXT,
+  preferences TEXT    NOT NULL DEFAULT '{}'       -- JSON object
+);
+
+-- Sessions
+CREATE TABLE IF NOT EXISTS sessions (
+  id        TEXT    PRIMARY KEY NOT NULL,         -- UUID v4
+  userId    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  created   TEXT    NOT NULL,                     -- ISO-8601
+  expires   TEXT    NOT NULL,                     -- ISO-8601
+  userAgent TEXT    NOT NULL DEFAULT '',
+  ip        TEXT    NOT NULL DEFAULT ''
+);
+
+CREATE INDEX IF NOT EXISTS idx_sessions_userId  ON sessions(userId);
+CREATE INDEX IF NOT EXISTS idx_sessions_expires ON sessions(expires);

package/templates/scripts/migrate.ts

@@ -0,0 +1,13 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { runMigrations } from '@vincent99/vlib/server';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const dbPath = process.env.DB_PATH ?? path.resolve(__dirname, '../data/app.db');
+const schemasDir = path.resolve(__dirname, '../schemas');
+
+runMigrations(dbPath, schemasDir).catch((err) => {
+  console.error('Migration failed:', err);
+  process.exit(1);
+});

package/templates/server/index.ts

@@ -0,0 +1,13 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { startServer } from '@vincent99/vlib/server';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const isProd = process.env.NODE_ENV === 'production';
+
+startServer({
+  dbPath: process.env.DB_PATH ?? path.resolve(__dirname, '../data/app.db'),
+  schemasDir: path.resolve(__dirname, '../schemas'),
+  staticDir: isProd ? path.resolve(__dirname, '../dist/public') : undefined,
+  port: process.env.PORT ? parseInt(process.env.PORT, 10) : undefined,
+});