@vincent99/vlib 0.1.0

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@vincent99/vlib",
+  "version": "0.1.0",
+  "description": "Shared library and scaffold generator for Vue 3 + SQLite webapps",
+  "homepage": "https://github.com/vincent99/vlib#readme",
+  "bugs": {
+    "url": "https://github.com/vincent99/vlib/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vincent99/vlib.git"
+  },
+  "license": "Apache-2.0",
+  "author": "Vincent Fiduccia",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server/index.js",
+      "types": "./dist/server/index.d.ts"
+    },
+    "./router": {
+      "import": "./dist/router/index.js",
+      "types": "./dist/router/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "vlib": "bin/vlib.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "src/components"
+  ],
+  "scripts": {
+    "build": "yarn build:server && yarn build:client",
+    "build:server": "tsc -p tsconfig.server.json --outDir dist",
+    "build:client": "vite build --config vite.lib.config.ts",
+    "dev": "tsc -p tsconfig.server.json --watch",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "better-sqlite3": "^9.6.0",
+    "commander": "^12.1.0",
+    "cookie-parser": "^1.4.7",
+    "ejs": "^3.1.10",
+    "express": "^4.21.2",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/cookie-parser": "^1.4.8",
+    "@types/ejs": "^3.1.5",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.0",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.2",
+    "sass": "^1.83.4",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0",
+    "vue-router": "^4.3.0"
+  }
+}

package/src/components/AdminForm.vue

@@ -0,0 +1,491 @@
+<template>
+  <div class="vl-admin-form">
+    <div class="vl-admin-form__header">
+      <RouterLink :to="`/admin/tables/${tableName}`" class="vl-back-link"
+        >← Back to {{ tableName }}</RouterLink
+      >
+      <h1 class="vl-admin-form__title">
+        {{
+          isMultiEdit
+            ? `Edit ${rowIds.length} rows`
+            : isNew
+              ? `New ${tableName} row`
+              : `Edit row`
+        }}
+      </h1>
+    </div>
+
+    <div v-if="loadError" class="vl-alert vl-alert--error">{{ loadError }}</div>
+    <div v-if="saveError" class="vl-alert vl-alert--error">{{ saveError }}</div>
+    <div v-if="saveSuccess" class="vl-alert vl-alert--success">
+      Saved successfully.
+    </div>
+
+    <div v-if="loading" class="vl-admin-form__loading">Loading…</div>
+
+    <form v-else class="vl-form" @submit.prevent="save">
+      <div
+        v-for="col in editableColumns"
+        :key="col.name"
+        class="vl-form__field"
+      >
+        <div class="vl-form__field-header">
+          <!-- Multi-edit: checkbox to enable field -->
+          <input
+            v-if="isMultiEdit"
+            :id="`enable-${col.name}`"
+            v-model="enabledFields[col.name]"
+            type="checkbox"
+            class="vl-form__field-enable"
+          />
+          <label :for="`field-${col.name}`" class="vl-form__label">
+            {{ col.name }}
+            <span class="vl-form__type">{{ col.type }}</span>
+            <span
+              v-if="col.notnull && !col.dflt_value"
+              class="vl-form__required"
+              >*</span
+            >
+          </label>
+        </div>
+
+        <div class="vl-form__input-wrap">
+          <template v-if="isMultiEdit && !enabledFields[col.name]">
+            <input
+              type="text"
+              :value="getMultiValue(col.name)"
+              disabled
+              class="vl-form__input vl-form__input--disabled"
+            />
+          </template>
+          <template v-else>
+            <!-- Boolean -->
+            <input
+              v-if="isBoolType(col)"
+              :id="`field-${col.name}`"
+              v-model="formData[col.name] as boolean"
+              type="checkbox"
+              class="vl-form__checkbox"
+            />
+            <!-- Password -->
+            <input
+              v-else-if="col.name.toLowerCase().includes('password')"
+              :id="`field-${col.name}`"
+              v-model="formData[col.name] as string"
+              type="password"
+              class="vl-form__input"
+              :placeholder="isNew ? '' : '(leave blank to keep unchanged)'"
+            />
+            <!-- JSON / large text -->
+            <textarea
+              v-else-if="isJsonType(col) || isTextType(col)"
+              :id="`field-${col.name}`"
+              v-model="formData[col.name] as string"
+              class="vl-form__input vl-form__input--textarea"
+              rows="4"
+            />
+            <!-- Number -->
+            <input
+              v-else-if="isNumericType(col)"
+              :id="`field-${col.name}`"
+              v-model="formData[col.name] as number"
+              type="number"
+              class="vl-form__input"
+            />
+            <!-- Date -->
+            <input
+              v-else-if="isDateType(col)"
+              :id="`field-${col.name}`"
+              v-model="formData[col.name] as string"
+              type="datetime-local"
+              class="vl-form__input"
+            />
+            <!-- Default: text -->
+            <input
+              v-else
+              :id="`field-${col.name}`"
+              v-model="formData[col.name] as string"
+              type="text"
+              class="vl-form__input"
+            />
+          </template>
+          <!-- Multi-edit "Multiple" warning -->
+          <span
+            v-if="
+              isMultiEdit &&
+              enabledFields[col.name] &&
+              formData[col.name] === MULTIPLE_SENTINEL
+            "
+            class="vl-form__multi-warn"
+            >Cannot save "— Multiple —". Please enter a new value.</span
+          >
+        </div>
+      </div>
+
+      <div class="vl-form__actions">
+        <RouterLink :to="`/admin/tables/${tableName}`" class="vl-btn"
+          >Cancel</RouterLink
+        >
+        <button
+          type="submit"
+          class="vl-btn vl-btn--primary"
+          :disabled="saving || hasMultipleError"
+        >
+          {{ saving ? 'Saving…' : 'Save' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+interface ColInfo {
+  name: string;
+  type: string;
+  notnull: number;
+  dflt_value: string | null;
+  pk: number;
+}
+
+const props = defineProps<{
+  tableName: string;
+  /** Single row ID for edit, undefined for new, or array for multi-edit */
+  rowIds?: (string | number)[];
+}>();
+
+const MULTIPLE_SENTINEL = '— Multiple —';
+
+const router = useRouter();
+const columns = ref<ColInfo[]>([]);
+const formData = ref<Record<string, unknown>>({});
+const originalData = ref<Record<string, Record<string, unknown>>>({}); // rowId -> original values
+const enabledFields = ref<Record<string, boolean>>({});
+const loading = ref(true);
+const saving = ref(false);
+const loadError = ref<string | null>(null);
+const saveError = ref<string | null>(null);
+const saveSuccess = ref(false);
+
+const isNew = computed(() => !props.rowIds || props.rowIds.length === 0);
+const isMultiEdit = computed(() => (props.rowIds?.length ?? 0) > 1);
+const rowIds = computed(() => props.rowIds ?? []);
+
+const editableColumns = computed(() =>
+  columns.value.filter((c) => {
+    if (isNew.value) {
+      return c.pk === 0 || c.dflt_value === null;
+    }
+    return c.pk === 0;
+  })
+);
+
+const hasMultipleError = computed(
+  () =>
+    isMultiEdit.value &&
+    editableColumns.value.some(
+      (c) =>
+        enabledFields.value[c.name] &&
+        formData.value[c.name] === MULTIPLE_SENTINEL
+    )
+);
+
+function isBoolType(col: ColInfo): boolean {
+  return /bool/i.test(col.type);
+}
+
+function isJsonType(col: ColInfo): boolean {
+  return /json/i.test(col.type) || col.name.toLowerCase() === 'preferences';
+}
+
+function isTextType(col: ColInfo): boolean {
+  return /text|varchar|nvarchar|clob/i.test(col.type) && col.name.length > 40;
+}
+
+function isNumericType(col: ColInfo): boolean {
+  return /int|real|float|double|numeric|decimal/i.test(col.type);
+}
+
+function isDateType(col: ColInfo): boolean {
+  return /date|time/i.test(col.type);
+}
+
+function getMultiValue(colName: string): string {
+  const values = new Set(
+    Object.values(originalData.value).map((r) => r[colName])
+  );
+  if (values.size > 1) {
+    return MULTIPLE_SENTINEL;
+  }
+  return String([...values][0] ?? '');
+}
+
+async function loadColumns() {
+  const res = await fetch('/api/admin/tables');
+  if (!res.ok) {
+    throw new Error('Failed to load table info');
+  }
+  const tables: Array<{ name: string; columns: ColInfo[] }> = await res.json();
+  const tableInfo = tables.find((t) => t.name === props.tableName);
+  if (!tableInfo) {
+    throw new Error(`Table "${props.tableName}" not found`);
+  }
+  columns.value = tableInfo.columns;
+}
+
+async function loadRows() {
+  if (isNew.value) {
+    return;
+  }
+  for (const id of rowIds.value) {
+    const res = await fetch(`/api/admin/tables/${props.tableName}/${id}`);
+    if (!res.ok) {
+      throw new Error(`Row ${id} not found`);
+    }
+    originalData.value[String(id)] = await res.json();
+  }
+}
+
+function initForm() {
+  if (isNew.value) {
+    for (const col of editableColumns.value) {
+      formData.value[col.name] = col.dflt_value ?? null;
+    }
+    return;
+  }
+
+  for (const col of editableColumns.value) {
+    if (isMultiEdit.value) {
+      const multiVal = getMultiValue(col.name);
+      formData.value[col.name] = multiVal;
+      enabledFields.value[col.name] = false;
+    } else {
+      const id = String(rowIds.value[0]);
+      formData.value[col.name] = originalData.value[id]?.[col.name] ?? null;
+    }
+  }
+}
+
+async function save() {
+  saving.value = false;
+  saveError.value = null;
+  saveSuccess.value = false;
+  saving.value = true;
+
+  try {
+    if (isNew.value) {
+      const res = await fetch(`/api/admin/tables/${props.tableName}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData.value),
+      });
+      if (!res.ok) {
+        throw new Error((await res.json()).error);
+      }
+      router.push(`/admin/tables/${props.tableName}`);
+    } else if (isMultiEdit.value) {
+      const payload: Record<string, unknown> = {};
+      for (const col of editableColumns.value) {
+        if (
+          enabledFields.value[col.name] &&
+          formData.value[col.name] !== MULTIPLE_SENTINEL
+        ) {
+          // Skip blank password fields
+          if (
+            col.name.toLowerCase().includes('password') &&
+            !formData.value[col.name]
+          ) {
+            continue;
+          }
+          payload[col.name] = formData.value[col.name];
+        }
+      }
+      for (const id of rowIds.value) {
+        const res = await fetch(`/api/admin/tables/${props.tableName}/${id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        if (!res.ok) {
+          throw new Error((await res.json()).error);
+        }
+      }
+      router.push(`/admin/tables/${props.tableName}`);
+    } else {
+      const payload = { ...formData.value };
+      // Remove blank password fields (keep existing)
+      for (const col of editableColumns.value) {
+        if (col.name.toLowerCase().includes('password') && !payload[col.name]) {
+          delete payload[col.name];
+        }
+      }
+      const res = await fetch(
+        `/api/admin/tables/${props.tableName}/${rowIds.value[0]}`,
+        {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        }
+      );
+      if (!res.ok) {
+        throw new Error((await res.json()).error);
+      }
+      saveSuccess.value = true;
+    }
+  } catch (e) {
+    saveError.value = String(e);
+  } finally {
+    saving.value = false;
+  }
+}
+
+onMounted(async () => {
+  try {
+    await loadColumns();
+    await loadRows();
+    initForm();
+  } catch (e) {
+    loadError.value = String(e);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style lang="scss">
+.vl-admin-form {
+  max-width: 720px;
+
+  &__header {
+    margin-bottom: var(--space-5);
+  }
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text);
+    margin-top: var(--space-2);
+  }
+
+  &__loading {
+    color: var(--color-text-secondary);
+    padding: var(--space-6);
+    text-align: center;
+  }
+}
+
+.vl-back-link {
+  font-size: 0.875rem;
+  color: var(--color-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.vl-form {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  padding: var(--space-6);
+
+  &__field {
+    margin-bottom: var(--space-4);
+  }
+
+  &__field-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-1);
+  }
+
+  &__field-enable {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  &__type {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--color-text-secondary);
+    font-family: monospace;
+  }
+
+  &__required {
+    color: var(--color-danger);
+  }
+
+  &__input {
+    display: block;
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    color: var(--color-text);
+    background: white;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+    box-sizing: border-box;
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-primary-light);
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--color-primary) 20%, transparent);
+    }
+
+    &--disabled {
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      cursor: not-allowed;
+    }
+
+    &--textarea {
+      resize: vertical;
+      font-family: monospace;
+    }
+  }
+
+  &__checkbox {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+  }
+
+  &__input-wrap {
+    position: relative;
+  }
+
+  &__multi-warn {
+    font-size: 0.75rem;
+    color: var(--color-danger);
+    margin-top: var(--space-1);
+    display: block;
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--space-3);
+    justify-content: flex-end;
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
+    margin-top: var(--space-5);
+  }
+}
+</style>