@vincent99/vlib 0.1.0

package/src/components/AdminTable.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="vl-admin-table">
+    <div class="vl-admin-table__header">
+      <h1 class="vl-admin-table__title">{{ tableName }}</h1>
+      <RouterLink
+        :to="`/admin/tables/${tableName}/new`"
+        class="vl-btn vl-btn--primary"
+      >
+        + Add Row
+      </RouterLink>
+    </div>
+
+    <div v-if="error" class="vl-alert vl-alert--error">{{ error }}</div>
+
+    <TableView
+      :rows="rows"
+      :headers="tableHeaders"
+      :total="total"
+      :page="page"
+      :page-size="pageSize"
+      :actions="bulkActions"
+      @update:page="loadPage"
+      @action="handleBulkAction"
+      @sort="handleSort"
+    >
+      <template #row-actions="{ row, id }">
+        <RouterLink
+          :to="`/admin/tables/${tableName}/${id}`"
+          class="vl-btn vl-btn--sm"
+          >Edit</RouterLink
+        >
+        <button
+          class="vl-btn vl-btn--sm vl-btn--danger"
+          @click="confirmDelete([id])"
+        >
+          Del
+        </button>
+      </template>
+    </TableView>
+
+    <!-- Delete confirmation dialog -->
+    <div
+      v-if="deleteTarget"
+      class="vl-modal-overlay"
+      @click.self="deleteTarget = null"
+    >
+      <div class="vl-modal">
+        <h3 class="vl-modal__title">Confirm Delete</h3>
+        <p>
+          Delete {{ deleteTarget.length }} row{{
+            deleteTarget.length !== 1 ? 's' : ''
+          }}?<br />This cannot be undone.
+        </p>
+        <div class="vl-modal__actions">
+          <button class="vl-btn" @click="deleteTarget = null">Cancel</button>
+          <button class="vl-btn vl-btn--danger" @click="executeDelete">
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import TableView from './TableView.vue';
+import type { TableHeader } from './types.js';
+
+const props = defineProps<{ tableName: string }>();
+
+const rows = ref<Record<string, unknown>[]>([]);
+const columns = ref<Array<{ name: string; type: string }>>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(50);
+const sortKey = ref<string | undefined>(undefined);
+const sortDir = ref<'asc' | 'desc'>('asc');
+const error = ref<string | null>(null);
+const deleteTarget = ref<(string | number)[] | null>(null);
+
+const tableHeaders = computed<TableHeader[]>(() =>
+  columns.value.map((c) => ({ key: c.name, label: c.name, sortable: true }))
+);
+
+const bulkActions = [
+  { key: 'delete', label: 'Delete Selected', variant: 'danger' as const },
+];
+
+async function loadPage(p: number) {
+  page.value = p;
+  await fetchRows();
+}
+
+async function fetchRows() {
+  error.value = null;
+  try {
+    const params = new URLSearchParams({
+      page: String(page.value),
+      pageSize: String(pageSize.value),
+      ...(sortKey.value ? { orderBy: sortKey.value, dir: sortDir.value } : {}),
+    });
+    const res = await fetch(`/api/admin/tables/${props.tableName}?${params}`);
+    if (!res.ok) {
+      throw new Error((await res.json()).error);
+    }
+    const data = await res.json();
+    rows.value = data.rows;
+    total.value = data.total;
+
+    // Infer columns from first row if not loaded
+    if (columns.value.length === 0 && data.rows.length > 0) {
+      columns.value = Object.keys(data.rows[0]).map((k) => ({
+        name: k,
+        type: 'TEXT',
+      }));
+    }
+  } catch (e) {
+    error.value = String(e);
+  }
+}
+
+async function fetchColumns() {
+  try {
+    const res = await fetch('/api/admin/tables');
+    if (!res.ok) {
+      return;
+    }
+    const tables: Array<{
+      name: string;
+      columns: Array<{ name: string; type: string }>;
+    }> = await res.json();
+    const tableInfo = tables.find((t) => t.name === props.tableName);
+    if (tableInfo) {
+      columns.value = tableInfo.columns;
+    }
+  } catch {
+    /* ignore */
+  }
+}
+
+function handleSort(key: string, dir: 'asc' | 'desc') {
+  sortKey.value = key;
+  sortDir.value = dir;
+  page.value = 1;
+  fetchRows();
+}
+
+function handleBulkAction(key: string, ids: (string | number)[]) {
+  if (key === 'delete') {
+    confirmDelete(ids);
+  }
+}
+
+function confirmDelete(ids: (string | number)[]) {
+  deleteTarget.value = ids;
+}
+
+async function executeDelete() {
+  if (!deleteTarget.value) {
+    return;
+  }
+  const ids = deleteTarget.value;
+  deleteTarget.value = null;
+  try {
+    const res = await fetch(`/api/admin/tables/${props.tableName}`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ids }),
+    });
+    if (!res.ok) {
+      throw new Error((await res.json()).error);
+    }
+    await fetchRows();
+  } catch (e) {
+    error.value = String(e);
+  }
+}
+
+watch(
+  () => props.tableName,
+  () => {
+    page.value = 1;
+    columns.value = [];
+    fetchColumns();
+    fetchRows();
+  }
+);
+
+onMounted(() => {
+  fetchColumns();
+  fetchRows();
+});
+</script>
+
+<style lang="scss">
+.vl-admin-table {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-4);
+  }
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text);
+    text-transform: capitalize;
+  }
+}
+
+.vl-alert {
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius);
+  margin-bottom: var(--space-4);
+  font-size: 0.875rem;
+
+  &--error {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #dc2626;
+  }
+
+  &--success {
+    background: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    color: #16a34a;
+  }
+}
+
+.vl-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 300;
+}
+
+.vl-modal {
+  background: white;
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  min-width: 320px;
+  max-width: 480px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+
+  &__title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: var(--space-3);
+    color: var(--color-text);
+  }
+
+  p {
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-5);
+    line-height: 1.5;
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/components/AppLayout.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="vl-app">
+    <!-- Header -->
+    <header class="vl-header">
+      <div class="vl-header__left">
+        <!-- Hamburger (small screens only) -->
+        <button
+          class="vl-hamburger"
+          aria-label="Toggle navigation"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <span class="vl-hamburger__bar" />
+          <span class="vl-hamburger__bar" />
+          <span class="vl-hamburger__bar" />
+        </button>
+        <slot name="logo">
+          <span class="vl-header__title">{{ appName }}</span>
+        </slot>
+      </div>
+      <div class="vl-header__right">
+        <!-- User menu -->
+        <div v-if="user" ref="userMenuRef" class="vl-user-menu">
+          <button
+            class="vl-user-menu__btn"
+            @click="userMenuOpen = !userMenuOpen"
+          >
+            <span class="vl-user-menu__name">{{
+              user.displayName || user.username
+            }}</span>
+            <span class="vl-user-menu__caret">▾</span>
+          </button>
+          <div v-if="userMenuOpen" class="vl-user-menu__dropdown">
+            <button class="vl-user-menu__item" @click="logout">Logout</button>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Body -->
+    <div class="vl-body">
+      <!-- Overlay for mobile sidebar -->
+      <div
+        v-if="sidebarOpen"
+        class="vl-sidebar-overlay"
+        @click="sidebarOpen = false"
+      />
+
+      <!-- Sidebar -->
+      <nav :class="['vl-sidebar', { 'vl-sidebar--open': sidebarOpen }]">
+        <slot name="sidebar">
+          <NavSidebar :items="navItems" @navigate="sidebarOpen = false" />
+        </slot>
+      </nav>
+
+      <!-- Main content -->
+      <main class="vl-main">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import NavSidebar from './NavSidebar.vue';
+import type { AppLayoutProps, NavItem } from './types.js';
+
+export type { AppLayoutProps, NavItem };
+
+const props = withDefaults(defineProps<AppLayoutProps>(), {
+  appName: 'App',
+  user: null,
+  navItems: () => [],
+});
+
+const emit = defineEmits<{
+  logout: [];
+}>();
+
+const router = useRouter();
+const sidebarOpen = ref(false);
+const userMenuOpen = ref(false);
+const userMenuRef = ref<HTMLElement | null>(null);
+
+function logout() {
+  userMenuOpen.value = false;
+  emit('logout');
+}
+
+function handleClickOutside(e: MouseEvent) {
+  if (userMenuRef.value && !userMenuRef.value.contains(e.target as Node)) {
+    userMenuOpen.value = false;
+  }
+}
+
+// Close sidebar on route change
+router.afterEach(() => {
+  sidebarOpen.value = false;
+});
+
+onMounted(() => document.addEventListener('click', handleClickOutside));
+onUnmounted(() => document.removeEventListener('click', handleClickOutside));
+</script>
+
+<style lang="scss">
+.vl-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.vl-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--header-height);
+  padding: 0 var(--space-4);
+  background: var(--color-header);
+  color: white;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  &__title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+}
+
+.vl-hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-1);
+
+  &__bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: white;
+    border-radius: 2px;
+    transition: all 0.2s;
+  }
+
+  @media (max-width: 767px) {
+    display: flex;
+  }
+}
+
+.vl-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.vl-sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 49;
+
+  @media (max-width: 767px) {
+    display: block;
+  }
+}
+
+.vl-sidebar {
+  width: var(--sidebar-width);
+  background: var(--color-sidebar);
+  color: white;
+  overflow-y: auto;
+  flex-shrink: 0;
+  transition: transform 0.25s ease;
+
+  @media (max-width: 767px) {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    bottom: 0;
+    z-index: 50;
+    transform: translateX(-100%);
+
+    &--open {
+      transform: translateX(0);
+    }
+  }
+}
+
+.vl-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-6);
+  background: var(--color-background);
+
+  @media (max-width: 767px) {
+    padding: var(--space-4);
+  }
+}
+
+// User menu
+.vl-user-menu {
+  position: relative;
+
+  &__btn {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: background 0.15s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  &__name {
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    background: white;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    min-width: 160px;
+    overflow: hidden;
+    z-index: 200;
+  }
+
+  &__item {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: var(--space-2) var(--space-4);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text);
+    font-size: 0.875rem;
+    transition: background 0.15s;
+
+    &:hover {
+      background: var(--color-background);
+    }
+  }
+}
+</style>

package/src/components/NavSidebar.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="vl-nav">
+    <template v-for="item in items" :key="item.label">
+      <!-- Group -->
+      <div v-if="item.children" class="vl-nav__group">
+        <button class="vl-nav__group-header" @click="toggleGroup(item.label)">
+          <span v-if="item.icon" class="vl-nav__group-icon">{{
+            item.icon
+          }}</span>
+          <span class="vl-nav__group-label">{{ item.label }}</span>
+          <span
+            class="vl-nav__group-caret"
+            :class="{ 'vl-nav__group-caret--open': isOpen(item.label) }"
+            >▸</span
+          >
+        </button>
+        <div v-show="isOpen(item.label)" class="vl-nav__group-children">
+          <RouterLink
+            v-for="child in item.children"
+            :key="child.to"
+            :to="child.to"
+            class="vl-nav__link vl-nav__link--child"
+            active-class="vl-nav__link--active"
+            exact-active-class="vl-nav__link--exact-active"
+            @click="$emit('navigate')"
+          >
+            <span v-if="child.icon" class="vl-nav__link-icon">{{
+              child.icon
+            }}</span>
+            {{ child.label }}
+          </RouterLink>
+        </div>
+      </div>
+
+      <!-- Plain link -->
+      <RouterLink
+        v-else
+        :to="item.to!"
+        class="vl-nav__link"
+        active-class="vl-nav__link--active"
+        exact-active-class="vl-nav__link--exact-active"
+        @click="$emit('navigate')"
+      >
+        <span v-if="item.icon" class="vl-nav__link-icon">{{ item.icon }}</span>
+        {{ item.label }}
+      </RouterLink>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { NavItem } from './types.js';
+
+export type { NavItem };
+
+const props = defineProps<{ items: NavItem[] }>();
+defineEmits<{ navigate: [] }>();
+
+const openGroups = ref<Set<string>>(
+  new Set(
+    props.items
+      .filter((i) => i.children && i.defaultOpen !== false)
+      .map((i) => i.label)
+  )
+);
+
+function isOpen(label: string) {
+  return openGroups.value.has(label);
+}
+
+function toggleGroup(label: string) {
+  if (openGroups.value.has(label)) {
+    openGroups.value.delete(label);
+  } else {
+    openGroups.value.add(label);
+  }
+}
+</script>
+
+<style lang="scss">
+.vl-nav {
+  padding: var(--space-3) 0;
+}
+
+.vl-nav__link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  color: rgba(255, 255, 255, 0.85);
+  text-decoration: none;
+  font-size: 0.9rem;
+  border-left: 3px solid transparent;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+  }
+
+  &--active {
+    background: rgba(255, 255, 255, 0.12);
+    color: white;
+  }
+
+  &--exact-active {
+    border-left-color: var(--color-accent);
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    font-weight: 500;
+  }
+
+  &--child {
+    padding-left: var(--space-8);
+    font-size: 0.85rem;
+  }
+
+  &-icon {
+    font-size: 1rem;
+    width: 1.2em;
+    text-align: center;
+  }
+}
+
+.vl-nav__group {
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-2) var(--space-4);
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    text-align: left;
+    transition: color 0.15s;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+
+  &-label {
+    flex: 1;
+  }
+
+  &-caret {
+    font-size: 0.75rem;
+    transition: transform 0.2s;
+    display: inline-block;
+
+    &--open {
+      transform: rotate(90deg);
+    }
+  }
+
+  &-icon {
+    font-size: 1rem;
+    width: 1.2em;
+    text-align: center;
+  }
+
+  &-children {
+    // children are the RouterLinks inside
+  }
+}
+</style>