nuxt-users 1.11.0 → 1.13.0

package/CHANGELOG.md

@@ -1,6 +1,74 @@
 # Changelog
 
 
+## v1.13.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.12.0...v1.13.0)
+
+### 🚀 Enhancements
+
+- Enhances user management and login flow ([894563a](https://github.com/rrd108/nuxt-users/commit/894563a))
+- Implement new components ([87689c9](https://github.com/rrd108/nuxt-users/commit/87689c9))
+- Define allowed HTTP methods for api endpoints permissions ([7feca0a](https://github.com/rrd108/nuxt-users/commit/7feca0a))
+- New api endpoint for user edit own data is added ([3bd13f9](https://github.com/rrd108/nuxt-users/commit/3bd13f9))
+
+### 🩹 Fixes
+
+- Authorization middleware for API routes closes #76 ([#76](https://github.com/rrd108/nuxt-users/issues/76))
+- (temporary) strange test failing ([ff8c376](https://github.com/rrd108/nuxt-users/commit/ff8c376))
+
+### 💅 Refactors
+
+- Component names ([159f334](https://github.com/rrd108/nuxt-users/commit/159f334))
+- Css classes renamed, removed or added ([c5c3334](https://github.com/rrd108/nuxt-users/commit/c5c3334))
+- Remove unused css ([7abc8a5](https://github.com/rrd108/nuxt-users/commit/7abc8a5))
+
+### 🏡 Chore
+
+- **release:** V1.12.0 ([0727c0f](https://github.com/rrd108/nuxt-users/commit/0727c0f))
+
+### ✅ Tests
+
+- Fix ([cbf300c](https://github.com/rrd108/nuxt-users/commit/cbf300c))
+- Fix failing test ([3973eec](https://github.com/rrd108/nuxt-users/commit/3973eec))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
+## v1.12.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.11.0...v1.12.0)
+
+### 🚀 Enhancements
+
+- Enhances user management and login flow ([894563a](https://github.com/rrd108/nuxt-users/commit/894563a))
+- Implement new components ([87689c9](https://github.com/rrd108/nuxt-users/commit/87689c9))
+
+### 🩹 Fixes
+
+- Authorization middleware for API routes closes #76 ([#76](https://github.com/rrd108/nuxt-users/issues/76))
+- (temporary) strange test failing ([ff8c376](https://github.com/rrd108/nuxt-users/commit/ff8c376))
+
+### 💅 Refactors
+
+- Component names ([159f334](https://github.com/rrd108/nuxt-users/commit/159f334))
+- Css classes renamed, removed or added ([c5c3334](https://github.com/rrd108/nuxt-users/commit/c5c3334))
+- Remove unused css ([7abc8a5](https://github.com/rrd108/nuxt-users/commit/7abc8a5))
+
+### 🏡 Chore
+
+- Bump version number ([5045086](https://github.com/rrd108/nuxt-users/commit/5045086))
+
+### ✅ Tests
+
+- Fix ([cbf300c](https://github.com/rrd108/nuxt-users/commit/cbf300c))
+- Fix failing test ([3973eec](https://github.com/rrd108/nuxt-users/commit/3973eec))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
 ## v1.11.0
 
 [compare changes](https://github.com/rrd108/nuxt-users/compare/v1.9.0...v1.11.0)

package/README.md

@@ -4,68 +4,36 @@ A user authentication module for Nuxt 3 and Nuxt 4 with database support for SQL
 
 ## Features
 
-- 🔐 User authentication with bcrypt password hashing
-- 🗄️ Database support (SQLite, MySQL, PostgreSQL)
-- 🛠️ CLI commands for database management
-- 🔑 Password Reset Functionality
-- 📦 Zero-config setup with sensible defaults
-- 🔧 TypeScript support
-- 🚀 Nuxt 3 & 4 compatibility
-
-## Quick Start
-
-```bash
-# Install the module
-npm install nuxt-users
-
-# Add to your nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['nuxt-users'],
-  nuxtUsers: {
-    connector: {
-      name: 'sqlite',
-      options: {
-        path: './data/default.sqlite3'
-      }
-    }
-  }
-})
-
-# Run migrations
-npx nuxt-users migrate
-
-# Create your first user
-npx nuxt-users create-user user@example.com "John Doe" password123
-# Create an admin user
-npx nuxt-users create-user admin@example.com "Admin User" adminpass123 admin
-```
+- 🔐 **Authentication & Security**
+  - User registration, login, and logout
+  - Secure password hashing with bcrypt
+  - Password reset functionality
+  - Session management
+
+- 🗄️ **Database Support**
+  - SQLite, MySQL, and PostgreSQL
+  - Automatic migrations and schema management
+  - CLI tools for database operations
+
+- 🛡️ **Access Control**
+  - Role-Based Access Control (RBAC)
+  - Middleware for route protection
+  - Permission-based authorization
+
+- 🎨 **UI Components**
+  - Pre-built authentication forms
+  - User management interfaces
+  - Responsive and customizable components
+
+- ⚡ **Developer Experience**
+  - Zero-config setup with sensible defaults
+  - TypeScript support throughout
+  - Nuxt 3 & 4 compatibility
+  - Easy customization and extension
 
 ## Documentation
 
-📚 **Full documentation is available at: [docs/](/docs/)**
-
-- [Installation Guide](/docs/guide/installation)
-- [Configuration Options](/docs/guide/configuration)
-- [API Reference](/docs/api/)
-- [Component Documentation](/docs/components/)
-- [Database Schema](/docs/database/schema)
-- [Contributing Guidelines](/docs/contributing/)
-
-## Development
-
-```bash
-# Install dependencies
-yarn install
-
-# Start development server
-yarn dev
-
-# Run tests
-yarn test
-
-# Build documentation
-cd docs && yarn dev
-```
+📚 **Full documentation is available at: [https://nuxt-users.webmania.cc/](https://nuxt-users.webmania.cc/)**
 
 ## License
 

package/dist/cli.mjs

@@ -4,8 +4,7 @@ import { defaultOptions } from './module.mjs';
 import { loadNuxt } from '@nuxt/kit';
 import { defu } from 'defu';
 import { runMigrations, createUser as createUser$1, createUsersTable as createUsersTable$1, createPersonalAccessTokensTable as createPersonalAccessTokensTable$1, createPasswordResetTokensTable as createPasswordResetTokensTable$1, createMigrationsTable as createMigrationsTable$1 } from '../dist/runtime/server/utils/index.js';
-import { g as getPasswordValidationOptions, v as validatePassword } from './shared/nuxt-users.BnOQs2LI.mjs';
-import '../dist/runtime/server/utils/user.js';
+import { getPasswordValidationOptions, validatePassword } from './utils.mjs';
 
 const getOptionsFromEnv = () => {
   const connectorName = process.env.DB_CONNECTOR || "sqlite";
@@ -248,7 +247,7 @@ const main = defineCommand({
   meta: {
     name: "nuxt-users",
     description: "CLI for Nuxt Users Module - Manage users, migrations, and database operations",
-    version: "1.10.0"
+    version: "1.12.0"
   },
   subCommands: {
     migrate,

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.C7T1DKBV.mjs';
+import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.u7N4meyI.mjs';
 export * from '../dist/runtime/server/utils/index.js';
 
 declare const defaultOptions: ModuleOptions;

package/dist/module.d.ts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.C7T1DKBV.js';
+import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.u7N4meyI.js';
 export * from '../dist/runtime/server/utils/index.js';
 
 declare const defaultOptions: ModuleOptions;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-users",
   "configKey": "nuxtUsers",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -115,6 +115,11 @@ const module = defineNuxtModule({
       method: "get",
       handler: resolver.resolve("./runtime/server/api/nuxt-users/me.get")
     });
+    addServerHandler({
+      route: `${base}/me`,
+      method: "patch",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/me.patch")
+    });
     addServerHandler({
       route: `${base}/password`,
       method: "patch",
@@ -130,6 +135,11 @@ const module = defineNuxtModule({
       method: "post",
       handler: resolver.resolve("./runtime/server/api/nuxt-users/password/reset.post")
     });
+    addServerHandler({
+      route: `${base}`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/index.get")
+    });
     addServerHandler({
       route: `${base}`,
       method: "post",
@@ -180,23 +190,39 @@ const module = defineNuxtModule({
       nitroConfig.scanDirs.push(resolver.resolve("./runtime/server/tasks"));
     });
     addComponent({
-      name: "LoginForm",
-      filePath: resolver.resolve("./runtime/components/LoginForm.vue")
+      name: "NUsersLoginForm",
+      filePath: resolver.resolve("./runtime/components/NUsersLoginForm.vue")
+    });
+    addComponent({
+      name: "NUsersLogoutLink",
+      filePath: resolver.resolve("./runtime/components/NUsersLogoutLink.vue")
+    });
+    addComponent({
+      name: "NUsersProfileInfo",
+      filePath: resolver.resolve("./runtime/components/NUsersProfileInfo.vue")
+    });
+    addComponent({
+      name: "NUsersResetPasswordForm",
+      filePath: resolver.resolve("./runtime/components/NUsersResetPasswordForm.vue")
+    });
+    addComponent({
+      name: "NUsersPasswordStrengthIndicator",
+      filePath: resolver.resolve("./runtime/components/NUsersPasswordStrengthIndicator.vue")
     });
     addComponent({
-      name: "LogoutLink",
-      filePath: resolver.resolve("./runtime/components/LogoutLink.vue")
+      name: "NUsersList",
+      filePath: resolver.resolve("./runtime/components/NUsersList.vue")
     });
     addComponent({
-      name: "ProfileInfo",
-      filePath: resolver.resolve("./runtime/components/ProfileInfo.vue")
+      name: "NUsersUserCard",
+      filePath: resolver.resolve("./runtime/components/NUsersUserCard.vue")
     });
     addComponent({
-      name: "ResetPasswordForm",
-      filePath: resolver.resolve("./runtime/components/ResetPasswordForm.vue")
+      name: "NUsersUserForm",
+      filePath: resolver.resolve("./runtime/components/NUsersUserForm.vue")
     });
     nuxt.options.css = nuxt.options.css || [];
-    nuxt.options.css.push(resolver.resolve("./runtime/assets/colors.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/nuxt-users.css"));
   }
 });
 

package/dist/runtime/assets/nuxt-users.css

@@ -0,0 +1 @@
+:root{--color-primary:#3b82f6;--color-primary-dark:#2563eb;--color-primary-light:#60a5fa;--color-secondary:#059669;--color-secondary-dark:#047857;--color-secondary-light:#10b981;--color-white:#fff;--color-black:#000;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-success:#059669;--color-success-light:#f0fdf4;--color-success-border:#9ae6b4;--color-warning:#f59e0b;--color-warning-light:#fef3c7;--color-warning-text:#92400e;--color-error:#dc2626;--color-error-light:#fef2f2;--color-error-border:#fecaca;--color-error-alt:#db5050;--color-error-dark:#b91c1c;--color-border:#e5e7eb;--color-border-light:#d1d5db;--color-border-dark:#ccc;--color-bg-primary:#fff;--color-bg-secondary:#f9fafb;--color-bg-tertiary:#f3f4f6;--color-text-primary:#000;--color-text-secondary:#6b7280;--color-strength-weak:#dc3545;--color-strength-medium:#ffc107;--color-strength-strong:#28a745;--color-strength-unknown:#6c757d;--color-strength-bg:#e9ecef;--color-validation-passed:#28a745;--color-validation-failed:#dc3545;--color-validation-hint:#6c757d}@media (prefers-color-scheme:dark){.dark,:root{--color-primary:#60a5fa;--color-primary-dark:#3b82f6;--color-primary-light:#93c5fd;--color-secondary:#10b981;--color-secondary-dark:#059669;--color-secondary-light:#34d399;--color-white:#000;--color-black:#fff;--color-gray-50:#111827;--color-gray-100:#1f2937;--color-gray-200:#374151;--color-gray-300:#4b5563;--color-gray-400:#6b7280;--color-gray-500:#9ca3af;--color-gray-600:#d1d5db;--color-gray-700:#e5e7eb;--color-gray-800:#f3f4f6;--color-gray-900:#f9fafb;--color-success:#10b981;--color-success-light:#064e3b;--color-success-border:#065f46;--color-warning:#fbbf24;--color-warning-light:#451a03;--color-warning-text:#fef3c7;--color-error:#ef4444;--color-error-light:#450a0a;--color-error-border:#7f1d1d;--color-error-alt:#f87171;--color-error-dark:#dc2626;--color-border:#374151;--color-border-light:#4b5563;--color-border-dark:#6b7280;--color-bg-primary:#111827;--color-bg-secondary:#1f2937;--color-bg-tertiary:#374151;--color-text-primary:#fff;--color-text-secondary:#9ca3af;--color-strength-weak:#ef4444;--color-strength-medium:#fbbf24;--color-strength-strong:#22c55e;--color-strength-unknown:#9ca3af;--color-strength-bg:#374151;--color-validation-passed:#22c55e;--color-validation-failed:#ef4444;--color-validation-hint:#9ca3af}}.n-users-form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;width:100%}.n-users-form-group.n-users-form-group-narrow{width:90%}.n-users-form-group label,.n-users-form-label{color:var(--color-text-primary,#000);display:block;font-size:1rem;font-weight:500;margin-bottom:.5rem}.n-users-form-group input,.n-users-form-group select,.n-users-form-input{border:1px solid var(--color-border,#ccc);border-radius:.25rem;font-size:1rem;padding:.5rem;transition:border-color .2s,box-shadow .2s;width:100%}.n-users-form-group input:focus,.n-users-form-group select:focus,.n-users-form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 .1rem rgba(59,130,246,.1);outline:none}.n-users-form-group input:disabled,.n-users-form-input:disabled{background-color:var(--color-bg-secondary,#f9fafb);cursor:not-allowed}.n-users-form-group input.error,.n-users-form-input.error{border-color:var(--color-error,#dc3545)}.n-users-form-group input[type=email],.n-users-form-group input[type=password],.n-users-form-group input[type=text]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:.5em;box-sizing:border-box;color:var(--color-gray-700);font-size:.875rem;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}.n-users-form-group input[type=email]:focus,.n-users-form-group input[type=password]:focus,.n-users-form-group input[type=text]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.n-users-form-group input[type=checkbox]{margin:0;width:auto}.n-users-btn,.n-users-cancel-btn,.n-users-delete-btn,.n-users-edit-btn,.n-users-submit-btn{align-self:flex-start;border:none;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:1rem;font-weight:500;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s,transform .1s}.n-users-btn:hover,.n-users-edit-btn:hover,.n-users-submit-btn:hover{background-color:var(--color-primary-dark,#2563eb);transform:translateY(-1px)}.n-users-btn:disabled,.n-users-submit-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.n-users-btn-primary,.n-users-edit-btn,.n-users-submit-btn{background-color:var(--color-primary,#3b82f6);color:#fff}.n-users-btn-secondary,.n-users-cancel-btn{background-color:var(--color-gray-500,#6b7280);color:#fff}.n-users-cancel-btn:hover{background-color:var(--color-gray-600,#4b5563)}.n-users-delete-btn{background-color:var(--color-error,#ef4444);color:#fff}.n-users-delete-btn:hover{background-color:var(--color-error-alt,#dc2626)}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:.5em;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.n-users-error-message,.n-users-error-text{background-color:var(--color-error-light,#fef2f2);border:1px solid var(--color-error-border,#fecaca);border-radius:.5rem;color:var(--color-error,#dc3545);font-size:.875rem;margin-top:.5rem;padding:.75rem 1rem}.n-users-success-message{background-color:var(--color-success-light,#f0fff4);border:1px solid var(--color-success-border,#9ae6b4);border-radius:.5rem;color:var(--color-success,#10b981);font-size:.875rem;margin-top:.5rem;padding:.75rem 1rem}.n-users-grid{display:grid;gap:1rem}.n-users-grid-2{grid-template-columns:1fr 5fr}.n-users-grid-auto{grid-template-columns:repeat(auto-fill,minmax(12em,1fr))}.n-users-form-actions{align-items:center;display:flex;gap:1rem;margin-top:1.5rem}.n-users-loading-spinner{animation:n-users-spin 1s linear infinite;border:2px solid var(--color-white,#fff);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes n-users-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.n-users-card{background-color:var(--color-bg-primary,#fff);border:1px solid var(--color-border,#e5e7eb);border-radius:.5rem;padding:1rem}.n-users-section{margin:0 auto;max-width:42em;padding:1em}.n-users-section-header{border-bottom:.1em solid var(--color-border,#e5e7eb);margin-bottom:1rem;padding-bottom:.5rem}.n-users-form-help{color:var(--color-text-secondary,#6b7280);font-size:.75rem;margin-top:.25rem}.n-users-strength-bar{background-color:var(--color-strength-bg,#e9ecef);border-radius:2px;height:4px;margin-bottom:4px;overflow:hidden;width:100%}.n-users-strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.n-users-strength-text{font-size:.75rem;font-weight:500}.n-users-validation-container{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;margin-top:12px;padding:12px}.n-users-container-title{color:#495057;font-size:.875rem;font-weight:600;margin-bottom:8px}.n-users-list-unstyled{list-style:none;margin:0;padding-left:0}.n-users-list-item{align-items:center;display:flex;font-size:.875rem;margin-bottom:6px;transition:color .2s ease}.n-users-list-item:last-child{margin-bottom:0}.n-users-icon{font-weight:700;margin-right:8px;min-width:16px;text-align:center}.n-users-text{flex:1}.n-users-list ul{list-style:none}form{display:flex;flex-direction:column;gap:1.5rem}.n-users-login-section{background:linear-gradient(135deg,var(--color-bg-primary) 0,var(--color-bg-secondary) 100%);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);max-width:25rem}.n-users-login-header{margin-bottom:1em;text-align:center}.n-users-login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.n-users-login-subtitle{color:var(--color-gray-700);font-size:.875rem;line-height:1.5;margin:0}.n-users-remember-me{align-items:center;display:flex;gap:.5rem}.n-users-remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}.n-users-login-footer{margin-top:1em;text-align:center}.n-users-forgot-password{margin:0}.n-users-forgot-link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:.875rem;gap:.5rem;text-decoration:none;transition:color .2s ease-in-out}.n-users-forgot-link:hover:not(.loading){color:var(--color-primary-dark);text-decoration:underline}.n-users-forgot-link.loading{cursor:not-allowed;opacity:.6;pointer-events:none}.n-users-password-strength{margin-top:8px}.n-users-validation-rules{margin-top:12px}.n-users-rules-title{margin-bottom:8px}.n-users-rules-list{padding-left:0}.n-users-rule-item{margin-bottom:6px}.n-users-rule-item:last-child{margin-bottom:0}.n-users-rule-passed{color:var(--color-validation-passed,#28a745)}.n-users-rule-failed{color:var(--color-validation-failed,#dc3545)}.n-users-rule-icon{margin-right:8px}.n-users-rule-text{flex:1}.n-users-validation-errors{margin-top:8px}.n-users-error-text:last-child{margin-bottom:0}.n-users-password-hints{margin-top:8px}.n-users-hint-title{margin-bottom:8px}.n-users-hint-list{padding-left:16px}.n-users-hint-item{color:var(--color-validation-hint,#6c757d);margin-bottom:4px}.n-users-hint-item:last-child{margin-bottom:0}.n-users-logout-link{background:var(--color-error);border:2px solid transparent;border-color:var(--color-error-dark);border-radius:.5em;color:#fff;padding:.5em 1em;text-decoration:none}.n-users-logout-link:hover{border-color:var(--color-primary)}.n-users-user-card dd{margin:0}.n-users-user-card-actions{display:flex;gap:.5rem;margin-top:1rem}.n-users-user-form{margin:0 auto;max-width:500px}.n-users-form-group input.error{border-color:#dc3545}.n-users-profile-info{background-color:var(--color-bg-primary);border-top-left-radius:.5em;border-top-right-radius:.5em}.n-users-profile-details{font-size:1rem;list-style:none;margin:0;padding:0}.n-users-reset-password-container{background-color:var(--color-bg-primary);border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}@media (max-width:480px){.n-users-login-title{font-size:1.5rem}}

package/dist/runtime/components/NUsersList.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { defaultDisplayFields, defaultFieldLabels } from "../../types";
+defineProps({
+  displayFields: { type: Array, required: false, default: () => defaultDisplayFields },
+  fieldLabels: { type: Object, required: false, default: () => defaultFieldLabels }
+});
+defineEmits(["editClick", "delete"]);
+const { public: { nuxtUsers } } = useRuntimeConfig();
+const users = ref([]);
+const pagination = ref(null);
+const loading = ref(false);
+const error = ref(null);
+const fetchUsers = async (page = 1, limit = 100) => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await $fetch(`${nuxtUsers.apiBasePath}?page=${page}&limit=${limit}`);
+    users.value = response.users;
+    pagination.value = response.pagination;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : "Failed to fetch users";
+  } finally {
+    loading.value = false;
+  }
+};
+const refresh = () => {
+  fetchUsers();
+};
+defineExpose({
+  refresh
+});
+onMounted(() => {
+  fetchUsers();
+});
+</script>
+
+<template>
+  <div class="n-users-list">
+    <slot name="title">
+      <h2>
+        Users List
+      </h2>
+    </slot>
+
+    <slot
+      name="loading"
+      :loading="loading"
+    >
+      <div v-if="loading">
+        Loading users...
+      </div>
+    </slot>
+
+    <slot
+      name="error"
+      :error="error"
+    >
+      <div v-if="error">
+        Error: {{ error }}
+      </div>
+    </slot>
+
+    <slot name="noUsers">
+      <div v-if="users.length === 0">
+        No users found
+      </div>
+    </slot>
+
+    <div v-if="users.length">
+      <slot name="usersList">
+        <ul class="n-users-grid n-users-grid-auto">
+          <li
+            v-for="(user, index) in users"
+            :key="user.id"
+          >
+            <slot
+              name="user"
+              :user="user"
+              :index="index"
+            >
+              <NUsersUserCard
+                :user="user"
+                :index="index"
+                :display-fields="displayFields"
+                :field-labels="fieldLabels"
+                @edit-click="$emit('editClick', user)"
+                @delete="$emit('delete', user)"
+              />
+            </slot>
+          </li>
+        </ul>
+      </slot>
+
+      <slot
+        name="paginationInfo"
+        :pagination="pagination"
+      >
+        <div v-if="pagination && pagination.totalPages > 1">
+          <div>
+            <span>Page {{ pagination.page }} of {{ pagination.totalPages }}</span>
+            <span>Total: {{ pagination.total }} users</span>
+          </div>
+        </div>
+      </slot>
+
+      <slot
+        name="pagination"
+        :pagination="pagination"
+        :fetch-users="fetchUsers"
+        :loading="loading"
+      >
+        <div v-if="pagination && pagination.totalPages > 1">
+          <div>
+            <button
+              v-if="pagination.hasPrev"
+              :disabled="loading"
+              @click="fetchUsers(pagination.page - 1)"
+            >
+              Previous
+            </button>
+
+            <button
+              v-if="pagination.hasNext"
+              :disabled="loading"
+              @click="fetchUsers(pagination.page + 1)"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,74 @@
+import { type DisplayFieldsProps, type User } from '../../types.js';
+declare var __VLS_1: {}, __VLS_3: {
+    loading: boolean;
+}, __VLS_5: {
+    error: string | null;
+}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {
+    user: {
+        id: number;
+        email: string;
+        name: string;
+        password: string;
+        role: string;
+        created_at: string;
+        updated_at: string;
+        last_login_at?: string | undefined;
+    };
+    index: number;
+}, __VLS_22: {
+    pagination: {
+        page: number;
+        limit: number;
+        total: number;
+        totalPages: number;
+        hasNext: boolean;
+        hasPrev: boolean;
+    } | null;
+}, __VLS_24: {
+    pagination: {
+        page: number;
+        limit: number;
+        total: number;
+        totalPages: number;
+        hasNext: boolean;
+        hasPrev: boolean;
+    } | null;
+    fetchUsers: (page?: number, limit?: number) => Promise<void>;
+    loading: boolean;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    loading?: (props: typeof __VLS_3) => any;
+} & {
+    error?: (props: typeof __VLS_5) => any;
+} & {
+    noUsers?: (props: typeof __VLS_7) => any;
+} & {
+    usersList?: (props: typeof __VLS_9) => any;
+} & {
+    user?: (props: typeof __VLS_11) => any;
+} & {
+    paginationInfo?: (props: typeof __VLS_22) => any;
+} & {
+    pagination?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<DisplayFieldsProps, {
+    refresh: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (user: User) => void;
+    editClick: (user: User) => void;
+}, string, import("vue").PublicProps, Readonly<DisplayFieldsProps> & Readonly<{
+    onDelete?: ((user: User) => any) | undefined;
+    onEditClick?: ((user: User) => any) | undefined;
+}>, {
+    displayFields: string[];
+    fieldLabels: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LoginForm.vue → NUsersLoginForm.vue}

@@ -1,16 +1,17 @@
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { navigateTo } from "#app";
 import { useRuntimeConfig } from "#imports";
 const { public: { nuxtUsers } } = useRuntimeConfig();
 const { passwordValidation } = nuxtUsers;
-const apiBasePath = nuxtUsers?.apiBasePath;
 const props = defineProps({
-  apiEndpoint: { type: String, required: false, default: `${apiBasePath}/session` },
-  redirectTo: { type: String, required: false, default: "/" },
-  forgotPasswordEndpoint: { type: String, required: false, default: `${apiBasePath}/password/forgot` }
+  apiEndpoint: { type: String, required: false },
+  redirectTo: { type: String, required: false },
+  forgotPasswordEndpoint: { type: String, required: false }
 });
 const emit = defineEmits(["success", "error", "forgot-password-error", "submit", "forgot-password-success"]);
+const apiEndpoint = computed(() => props.apiEndpoint || `${nuxtUsers?.apiBasePath}/session`);
+const forgotPasswordEndpoint = computed(() => props.forgotPasswordEndpoint || `${nuxtUsers?.apiBasePath}/password/forgot`);
 const isLoading = ref(false);
 const isForgotPasswordLoading = ref(false);
 const error = ref("");
@@ -25,7 +26,7 @@ const handleSubmit = async () => {
   error.value = "";
   try {
     emit("submit", formData.value);
-    const response = await $fetch(props.apiEndpoint, {
+    const response = await $fetch(apiEndpoint.value, {
       method: "POST",
       body: {
         email: formData.value.email,
@@ -53,7 +54,7 @@ const handleForgotPassword = async () => {
   forgotPasswordMessage.value = "";
   error.value = "";
   try {
-    const response = await $fetch(props.forgotPasswordEndpoint, {
+    const response = await $fetch(forgotPasswordEndpoint.value, {
       method: "POST",
       body: {
         email: formData.value.email
@@ -72,15 +73,15 @@ const handleForgotPassword = async () => {
 </script>
 
 <template>
-  <section>
+  <section class="n-users-login-section n-users-section">
     <form @submit.prevent="handleSubmit">
       <!-- Header slot -->
       <slot name="header">
-        <div class="login-header">
-          <h2 class="login-title">
+        <div class="n-users-login-header">
+          <h2 class="n-users-login-title">
             Welcome Back
           </h2>
-          <p class="login-subtitle">
+          <p class="n-users-login-subtitle">
             Sign in to your account
           </p>
         </div>
@@ -88,7 +89,7 @@ const handleForgotPassword = async () => {
 
       <!-- Email field -->
       <slot name="email-field">
-        <div class="form-group">
+        <div class="n-users-form-group">
           <label for="email">Email</label>
           <input
             id="email"
@@ -103,7 +104,7 @@ const handleForgotPassword = async () => {
 
       <!-- Password field -->
       <slot name="password-field">
-        <div class="form-group">
+        <div class="n-users-form-group">
           <label for="password">Password</label>
           <input
             id="password"
@@ -119,7 +120,7 @@ const handleForgotPassword = async () => {
 
       <!-- Remember me slot -->
       <slot name="remember-me">
-        <div class="remember-me">
+        <div class="n-users-remember-me">
           <input
             id="rememberMe"
             v-model="formData.rememberMe"
@@ -138,7 +139,7 @@ const handleForgotPassword = async () => {
         >
           <span
             v-if="isLoading"
-            class="loading-spinner"
+            class="n-users-loading-spinner"
           />
           {{ isLoading ? "Signing in..." : "Sign In" }}
         </button>
@@ -146,17 +147,17 @@ const handleForgotPassword = async () => {
 
       <!-- Footer slot -->
       <slot name="footer">
-        <div class="login-footer">
-          <p class="forgot-password">
+        <div class="n-users-login-footer">
+          <p class="n-users-forgot-password">
             <a
               href="#"
-              class="forgot-link"
+              class="n-users-forgot-link"
               :class="{ loading: isForgotPasswordLoading }"
               @click.prevent="handleForgotPassword"
             >
               <span
                 v-if="isForgotPasswordLoading"
-                class="loading-spinner"
+                class="n-users-loading-spinner"
               />
               {{ isForgotPasswordLoading ? "Sending..." : "Forgot your password?" }}
             </a>
@@ -192,7 +193,3 @@ const handleForgotPassword = async () => {
     </form>
   </section>
 </template>
-
-<style scoped>
-section{background:linear-gradient(135deg,var(--color-bg-primary) 0,var(--color-bg-secondary) 100%);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin:0 auto;max-width:25rem;padding:1em}form{gap:1.5rem}.form-group,form{display:flex;flex-direction:column}label{display:block;font-weight:500;margin-bottom:.5em}input[type=email],input[type=password],label{color:var(--color-gray-700);font-size:.875rem}input[type=email],input[type=password]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:.5em;box-sizing:border-box;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}input[type=email]:focus,input[type=password]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.login-header{margin-bottom:1em;text-align:center}.login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.login-subtitle{color:var(--color-gray-500);font-size:.875rem;line-height:1.5;margin:0}.remember-me{align-items:center;display:flex;gap:.5rem}input[type=checkbox]{margin:0;width:auto}.remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:.5em;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--color-white);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{margin-top:1em;text-align:center}.forgot-password{margin:0}.forgot-link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:.875rem;gap:.5rem;text-decoration:none;transition:color .2s ease-in-out}.forgot-link:hover:not(.loading){color:var(--color-primary-dark);text-decoration:underline}.forgot-link.loading{cursor:not-allowed;opacity:.6;pointer-events:none}.error-message{background-color:var(--color-error-light);border:1px solid var(--color-error-border);border-radius:.5em;color:var(--color-error)}.error-message,.success-message{font-size:.875rem;margin-top:1em;padding:.75em 1em;text-align:center}.success-message{background-color:var(--color-success-light);border:1px solid var(--color-success-border);border-radius:.5em;color:var(--color-success)}@media (max-width:480px){.login-form-container{margin:1em;padding:1.5em}.login-title{font-size:1.5rem}}
-</style>