@sfxcode/nuxt-ui-mongocamp 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sfxcode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,308 @@
+# nuxt-ui-mongocamp
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+[![Docs][docs-src]][docs-href]
+
+A Nuxt module that wraps [`@sfxcode/nuxt-mongocamp-server`](https://www.npmjs.com/package/@sfxcode/nuxt-mongocamp-server) with ready-made UI components, composables, and a runtime plugin. Add the module to your Nuxt app and get MongoCamp authentication, user/role management, and collection access out of the box — built on [Nuxt UI](https://ui.nuxt.com) and [FormKit](https://formkit.com).
+
+- [✨ Release Notes](/CHANGELOG.md)
+
+## Features
+
+- **Auth middleware** — global route guard that protects `/secured/**` (login required) and `/admin/**` (admin role required)
+- **Ready-made components** — login form, user/role management tables, collection browser with stats and paginated data table, server version badge
+- **FormKit-powered forms** — schema-driven forms via `@sfxcode/nuxt-ui-formkit` with `nuxtUIInput`, `nuxtUISwitch`, `nuxtUIListbox`, and `nuxtUISelectMenu` inputs
+- **Composables** — `useMongocampAdmin`, `useMongocampCollection`, `useMongocampDocument`, `useMongocampSchema` auto-imported into your app
+- **Zero extra config** — peer modules (`@nuxt/ui`, `@formkit/nuxt`, `unocss-nuxt-ui`) are declared as `moduleDependencies` and configured automatically
+
+## Module Dependencies
+
+These modules are declared as `moduleDependencies` and are automatically set up — you do not need to add them manually to your `nuxt.config.ts`:
+
+| Module | Purpose |
+|---|---|
+| [`@nuxt/ui`](https://ui.nuxt.com) | Component library (UTable, UModal, UBadge, UPageCard, …) |
+| [`unocss-nuxt-ui`](https://www.npmjs.com/package/unocss-nuxt-ui) | UnoCSS preset that matches Nuxt UI's design tokens |
+| [`@formkit/nuxt`](https://formkit.com/getting-started/installation#with-nuxt) | FormKit core integration for Nuxt |
+| [`@sfxcode/nuxt-ui-formkit`](https://www.npmjs.com/package/@sfxcode/nuxt-ui-formkit) | Nuxt UI input types for FormKit (`nuxtUIInput`, `nuxtUISwitch`, `nuxtUIListbox`, `nuxtUISelectMenu`) |
+| [`@sfxcode/nuxt-mongocamp-server`](https://www.npmjs.com/package/@sfxcode/nuxt-mongocamp-server) | MongoCamp REST API client, auth state, and `useMongocampApi()` / `useMongocampAuth()` composables |
+
+## Quick Setup
+
+```bash
+npm install nuxt-ui-mongocamp
+```
+
+Add the module to `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-ui-mongocamp'],
+
+  mongocamp: {
+    url: process.env.MONGOCAMP_URL,
+  },
+})
+```
+
+The `mongocamp` key is forwarded to `@sfxcode/nuxt-mongocamp-server`. Set `MONGOCAMP_URL` (and optionally `MONGOCAMP_ADMIN_USER` / `MONGOCAMP_ADMIN_PASSWORD`) in your `.env` file.
+
+## Components
+
+All components are auto-imported.
+
+### `<MongocampLogin />`
+
+FormKit schema-driven login form. Persists the last user ID in a cookie (`mongocamp_login`) and redirects to `/secured` on success.
+
+```vue
+<template>
+  <MongocampLogin />
+</template>
+```
+
+### `<MongocampUsers />`
+
+Full CRUD table for managing users — create, edit (roles via transfer listbox, password change), and delete, all via modal dialogs. Includes a server-side debounced search input and sortable column headers.
+
+```vue
+<template>
+  <MongocampUsers />
+</template>
+```
+
+### `<MongocampRoles />`
+
+Full CRUD table for managing roles — create, edit (admin flag, collection grants), and delete. Includes a server-side debounced search input and sortable column headers.
+
+```vue
+<template>
+  <MongocampRoles />
+</template>
+```
+
+### `<MongocampRoleGrants />`
+
+Per-role collection grant management — lists grants for a named role, with add/edit/delete. Filters the collection picker to exclude already-granted collections.
+
+```vue
+<template>
+  <MongocampRoleGrants role-name="myRole" />
+</template>
+```
+
+### `<MongocampCollections />`
+
+Table of all collections with document count, storage size, and index count. Each row links to the collection info and data pages. Includes a client-side filter input and sortable column headers.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `infoPath` | `string` | `/secured/admin/collections` | Base path for the info page link |
+| `dataPath` | `string` | `/secured/admin/collections` | Base path for the data page link (`<dataPath>/<name>/data`) |
+
+```vue
+<template>
+  <MongocampCollections />
+</template>
+```
+
+### `<MongocampCollectionInfos />`
+
+Stat-card grid for a single collection — document count, data size, storage size, avg doc size, index count, total index size, and a per-index size table.
+
+```vue
+<template>
+  <MongocampCollectionInfos collection-name="myCollection" />
+</template>
+```
+
+### `<MongocampCollectionData />`
+
+Schema-driven paginated data table for a collection.
+
+- **Columns** derived from the collection's JSON schema; falls back to first-row key derivation when no schema properties exist. Column order: `_id` first, `metaData` last, all others sorted A–Z.
+- **Sorting** — clickable column headers trigger server-side sort via the MongoCamp API (`field` / `-field`).
+- **Filtering** — debounced search input sends a Lucene query (`col1: *term* OR col2: *term*`) across all string-typed columns to the API; disabled until the schema is loaded.
+- **Cell rendering**:
+  - `date-time` columns and MongoDB `$date` extended JSON → locale-formatted date string
+  - MongoDB `$oid` → monospaced ID string
+  - `metaData` objects (with `created`/`updated` fields) → structured `created / updated / by` rows
+  - All other objects and arrays → icon button (`{}` / list); click opens a modal with pretty-printed JSON in a `<pre>` tag
+- Includes a reload button and paginated footer.
+
+```vue
+<template>
+  <MongocampCollectionData collection-name="myCollection" />
+</template>
+```
+
+### `<MongocampVersion />`
+
+Displays the connected MongoCamp server name and version as a `UBadge`. Shows a neutral "unavailable" badge when the server cannot be reached.
+
+```vue
+<template>
+  <MongocampVersion />
+</template>
+```
+
+## Composables
+
+All composables are auto-imported.
+
+### `useMongocampAdmin()`
+
+Wraps the `adminApi` and `collectionApi` for user and role management.
+
+```ts
+const {
+  listUsers,          // (filter?: string) => Promise<UserProfile[]>
+  addUser,            // (userId, password, apiKey?, roles?) => Promise<UserProfile>
+  deleteUser,         // (userId) => Promise<void>
+  updateUserRoles,    // (userId, roles) => Promise<UserProfile>
+  updateUserPassword, // (userId, password) => Promise<void>
+  listRoles,          // (filter?: string) => Promise<Role[]>
+  addRole,            // (name, isAdmin?, collectionGrants?) => Promise<Role>
+  updateRole,         // (roleName, isAdmin, collectionGrants?) => Promise<Role>
+  deleteRole,         // (roleName) => Promise<void>
+  listCollections,    // () => Promise<string[]>
+} = useMongocampAdmin()
+```
+
+### `useMongocampCollection()`
+
+Reactive state for paginated collection queries.
+
+```ts
+const {
+  filter,     // Ref<string | undefined>       — MongoDB filter expression
+  sort,       // Ref<string[] | undefined>      — sort fields
+  projection, // Ref<string[] | undefined>      — field projection
+  pagination, // Ref<{ pageIndex: number, pageSize: number }>
+  total,      // Ref<number>                    — total document count
+} = useMongocampCollection()
+```
+
+### `useMongocampDocument()`
+
+Helpers for document-level operations.
+
+```ts
+const {
+  ensureMetaData,   // <T>(data: T) => T  — stamps createdBy/updatedBy/timestamps from logged-in user
+  updateFromPartial, // <T>(obj: T, updates: Partial<T>) => T
+} = useMongocampDocument()
+```
+
+### `useMongocampSchema()`
+
+Converts a `JsonSchemaDefinition` to typed table column definitions. Used internally by `MongocampCollectionData`.
+
+```ts
+const { schemaToColumnDefinition } = useMongocampSchema()
+
+// schemaToColumnDefinition(definition, fields) => ColumnDefinition[]
+// ColumnDefinition: { columnName, columnKey, columnType }
+// columnType: 'string' | 'number' | 'date-time'
+```
+
+Fields are sorted with `_id` first, `metaData` last, and all other fields alphabetically.
+
+## Route Protection
+
+The module registers a global route middleware at startup:
+
+| Path pattern | Requirement |
+|---|---|
+| `/secured/**` | User must be logged in; redirects to `/` otherwise |
+| `/admin/**` or `/secured/admin/**` | User must be logged in **and** have the admin role; redirects to `/secured` otherwise |
+| `/logout` | Calls `logout()` and redirects to `/` |
+
+## Runtime Plugin
+
+The plugin provides `$mongocampVersion` (a `Ref` to the server's version info) via `useNuxtApp()`:
+
+```ts
+const { $mongocampVersion } = useNuxtApp()
+// $mongocampVersion.value?.name
+// $mongocampVersion.value?.version
+```
+
+## Configuration
+
+The module's own config key is `nuxtUiMongocamp` (currently no options). The MongoCamp server is configured under the `mongocamp` key (provided by `@sfxcode/nuxt-mongocamp-server`):
+
+```ts
+mongocamp: {
+  url: 'https://your-mongocamp-server',
+  paginationSize: 500,   // default: 500
+  refreshToken: true,    // default: true
+  tokenRefreshIntervall: 5000, // ms, default: 5000
+}
+```
+
+## Contribution
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build stubs + prepare the playground (run once after clone)
+pnpm run dev:prepare
+
+# Start playground dev server
+pnpm run dev
+
+# Lint
+pnpm run lint
+
+# Run tests (Vitest + @nuxt/test-utils e2e)
+pnpm run test
+pnpm run test:watch
+
+# Type-check
+pnpm run test:types
+
+# Build for publishing
+pnpm run prepack
+```
+
+The playground reads `playground/.env` for `MONGOCAMP_URL`, `MONGOCAMP_ADMIN_USER`, and `MONGOCAMP_ADMIN_PASSWORD`.
+
+## Documentation
+
+Full documentation (guides, components, composables) lives in `docs/` and is built with [VitePress](https://vitepress.dev):
+
+```bash
+# Start the docs dev server
+pnpm run docs:dev
+
+# Build the static site
+pnpm run docs:build
+
+# Preview the built site
+pnpm run docs:preview
+```
+
+## License
+
+[MIT](./LICENSE)
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-ui-mongocamp/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/nuxt-ui-mongocamp
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-ui-mongocamp.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/nuxt-ui-mongocamp
+
+[license-src]: https://img.shields.io/npm/l/nuxt-ui-mongocamp.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nuxt-ui-mongocamp
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com
+
+[docs-src]: https://img.shields.io/badge/docs-vitepress-020420.svg?style=flat&colorA=020420&colorB=00DC82
+[docs-href]: https://sfxcode.github.io/nuxt-ui-mongocamp/

package/dist/module.d.mts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-ui-mongocamp",
+  "configKey": "nuxtUiMongocamp",
+  "compatibility": {
+    "nuxt": ">=3.16.0"
+  },
+  "version": "1.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,35 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-ui-mongocamp",
+    configKey: "nuxtUiMongocamp",
+    compatibility: {
+      nuxt: ">=3.16.0"
+    }
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  moduleDependencies: {
+    "@nuxt/ui": {},
+    "unocss-nuxt-ui": {},
+    "@formkit/nuxt": {},
+    "@sfxcode/nuxt-ui-formkit": {},
+    "@sfxcode/nuxt-mongocamp-server": {
+      defaults: {
+        paginationSize: 500,
+        refreshToken: true,
+        tokenRefreshIntervall: 5e3
+      }
+    }
+  },
+  setup(_options, _nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = resolve("./runtime");
+    addPlugin(resolve(runtimeDir, "plugin"));
+    addComponentsDir({ path: resolve(runtimeDir, "components") });
+    addImportsDir(resolve(runtimeDir, "composables"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/MongocampAccount.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampAccount.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { reactive, ref, resolveComponent } from "vue";
+import { useMongocampAccount, useToast } from "#imports";
+const { fetchProfile, changePassword, regenerateApiKey } = useMongocampAccount();
+const toast = useToast();
+const UBadge = resolveComponent("UBadge");
+const profile = ref(null);
+const loading = ref(false);
+async function loadProfile() {
+  loading.value = true;
+  try {
+    profile.value = await fetchProfile();
+  } finally {
+    loading.value = false;
+  }
+}
+const passwordData = ref({ password: "" });
+const passwordSchema = reactive([
+  {
+    $formkit: "nuxtUIInput",
+    name: "password",
+    label: "New Password",
+    inputType: "password",
+    validation: "required|length:3"
+  }
+]);
+async function handleChangePassword() {
+  const success = await changePassword(passwordData.value.password);
+  if (success) {
+    passwordData.value = { password: "" };
+  }
+}
+const isRegenerateModalOpen = ref(false);
+const newApiKey = ref(null);
+function openRegenerateModal() {
+  isRegenerateModalOpen.value = true;
+}
+function closeRegenerateModal() {
+  isRegenerateModalOpen.value = false;
+}
+async function handleRegenerateApiKey() {
+  newApiKey.value = await regenerateApiKey();
+  isRegenerateModalOpen.value = false;
+}
+async function copyApiKey() {
+  if (!newApiKey.value) return;
+  await navigator.clipboard.writeText(newApiKey.value);
+  toast.add({ title: "Copied to clipboard", description: "API key copied.", color: "success" });
+}
+function dismissApiKey() {
+  newApiKey.value = null;
+}
+loadProfile();
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <USkeleton
+      v-if="loading"
+      class="h-32 w-full"
+    />
+
+    <UCard v-else-if="profile">
+      <template #header>
+        <span class="font-semibold">Account</span>
+      </template>
+      <div class="flex flex-col gap-3">
+        <div>
+          <div class="text-sm text-gray-500 dark:text-gray-400">
+            User
+          </div>
+          <div class="text-lg font-medium">
+            {{ profile.user }}
+          </div>
+        </div>
+        <div>
+          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">
+            Role
+          </div>
+          <UBadge
+            :label="profile.isAdmin ? 'Admin' : 'Standard'"
+            :color="profile.isAdmin ? 'error' : 'neutral'"
+            variant="subtle"
+          />
+        </div>
+        <div>
+          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">
+            Roles
+          </div>
+          <div
+            v-if="profile.roles?.length"
+            class="flex flex-wrap gap-1"
+          >
+            <UBadge
+              v-for="role in profile.roles"
+              :key="role"
+              :label="role"
+              color="primary"
+              variant="subtle"
+            />
+          </div>
+          <span
+            v-else
+            class="text-dimmed"
+          >—</span>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <span class="font-semibold">Change Password</span>
+      </template>
+      <FUDataEdit
+        :data="passwordData"
+        :schema="passwordSchema"
+        submit-label="Change Password"
+        submit-icon="i-lucide-save"
+        @data-saved="handleChangePassword"
+      />
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <span class="font-semibold">API Key</span>
+      </template>
+      <div
+        v-if="newApiKey"
+        class="flex flex-col gap-2"
+      >
+        <p class="text-sm text-warning-500">
+          This key is shown only once. Copy it now — it cannot be retrieved again.
+        </p>
+        <div class="flex items-center gap-2">
+          <UInput
+            :model-value="newApiKey"
+            readonly
+            class="flex-1 font-mono text-xs"
+          />
+          <UButton
+            icon="i-lucide-copy"
+            label="Copy"
+            color="neutral"
+            variant="subtle"
+            @click="copyApiKey"
+          />
+        </div>
+        <UButton
+          label="Dismiss"
+          color="neutral"
+          variant="ghost"
+          class="self-start"
+          @click="dismissApiKey"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-between gap-4"
+      >
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          Regenerating your API key immediately invalidates the current one.
+        </p>
+        <UButton
+          label="Regenerate API Key"
+          color="error"
+          variant="subtle"
+          icon="i-lucide-key-round"
+          @click="openRegenerateModal"
+        />
+      </div>
+    </UCard>
+
+    <UModal
+      v-model:open="isRegenerateModalOpen"
+      title="Regenerate API Key"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <p>Are you sure you want to regenerate your API key? Your current key will stop working immediately.</p>
+      </template>
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="closeRegenerateModal"
+        />
+        <UButton
+          label="Regenerate"
+          color="error"
+          icon="i-lucide-key-round"
+          @click="handleRegenerateApiKey"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/MongocampAccount.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampCollectionData.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    collectionName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;