nuxt-users 1.26.0 → 1.28.0

package/CHANGELOG.md

@@ -1,6 +1,43 @@
 # Changelog
 
 
+## v1.28.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.27.0...v1.28.0)
+
+### 🚀 Enhancements
+
+- Expose useUsers composable ([485d81c](https://github.com/rrd108/nuxt-users/commit/485d81c))
+
+### 🩹 Fixes
+
+- Composables are initialized on mount ([b25eb95](https://github.com/rrd108/nuxt-users/commit/b25eb95))
+
+### 🏡 Chore
+
+- **release:** V1.27.0 ([195a5b7](https://github.com/rrd108/nuxt-users/commit/195a5b7))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
+## v1.27.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.26.0...v1.27.0)
+
+### 🚀 Enhancements
+
+- Emit error ([0818b80](https://github.com/rrd108/nuxt-users/commit/0818b80))
+- Expose useUsers composable ([485d81c](https://github.com/rrd108/nuxt-users/commit/485d81c))
+
+### 🏡 Chore
+
+- **release:** V1.26.0 ([3f90a9c](https://github.com/rrd108/nuxt-users/commit/3f90a9c))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
 ## v1.26.0
 
 [compare changes](https://github.com/rrd108/nuxt-users/compare/v1.25.0...v1.26.0)

package/dist/module.json

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

package/dist/runtime/components/NUsersList.vue

@@ -1,43 +1,34 @@
 <script setup>
-import { ref, onMounted } from "vue";
-import { useRuntimeConfig } from "#imports";
+import { onMounted, computed } from "vue";
+import { useUsers } from "../composables/useUsers";
 import { defaultDisplayFields, defaultFieldLabels } from "nuxt-users/utils";
 defineProps({
   displayFields: { type: Array, required: false, default: () => defaultDisplayFields },
   fieldLabels: { type: Object, required: false, default: () => defaultFieldLabels }
 });
 const emit = 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
-});
+let usersComposable = null;
+const users = computed(() => usersComposable?.users.value ?? []);
+const pagination = computed(() => usersComposable?.pagination.value ?? null);
+const loading = computed(() => usersComposable?.loading.value ?? false);
+const error = computed(() => usersComposable?.error.value ?? null);
 onMounted(() => {
-  fetchUsers();
+  usersComposable = useUsers();
+  if (users.value.length === 0) {
+    usersComposable.fetchUsers();
+  }
 });
 const handleDelete = (user) => {
-  users.value = users.value.filter((u) => u.id !== user.id);
+  if (usersComposable) {
+    usersComposable.removeUser(user.id);
+  }
   emit("delete", user);
 };
+const handleFetchUsers = (page, limit) => {
+  if (usersComposable) {
+    usersComposable.fetchUsers(page, limit);
+  }
+};
 </script>
 
 <template>
@@ -116,7 +107,7 @@ const handleDelete = (user) => {
       <slot
         name="pagination"
         :pagination="pagination"
-        :fetch-users="fetchUsers"
+        :fetch-users="handleFetchUsers"
         :loading="loading"
       >
         <div v-if="pagination && pagination.totalPages > 1">
@@ -124,7 +115,7 @@ const handleDelete = (user) => {
             <button
               v-if="pagination.hasPrev"
               :disabled="loading"
-              @click="fetchUsers(pagination.page - 1)"
+              @click="handleFetchUsers(pagination.page - 1)"
             >
               Previous
             </button>
@@ -132,7 +123,7 @@ const handleDelete = (user) => {
             <button
               v-if="pagination.hasNext"
               :disabled="loading"
-              @click="fetchUsers(pagination.page + 1)"
+              @click="handleFetchUsers(pagination.page + 1)"
             >
               Next
             </button>

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

@@ -1,68 +0,0 @@
-interface Props {
-    displayFields?: string[];
-    fieldLabels?: Record<string, string>;
-}
-declare var __VLS_1: {}, __VLS_3: {
-    loading: boolean;
-}, __VLS_5: {
-    error: string | null;
-}, __VLS_7: {}, __VLS_9: {}, __VLS_16: {
-    user: any;
-    index: number;
-}, __VLS_27: {
-    pagination: {
-        page: number;
-        limit: number;
-        total: number;
-        totalPages: number;
-        hasNext: boolean;
-        hasPrev: boolean;
-    } | null;
-}, __VLS_29: {
-    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_16) => any;
-} & {
-    paginationInfo?: (props: typeof __VLS_27) => any;
-} & {
-    pagination?: (props: typeof __VLS_29) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<Props, {
-    refresh: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    delete: (user: User) => void;
-    editClick: (user: User) => void;
-}, string, import("vue").PublicProps, Readonly<Props> & 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/NUsersLogoutLink.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { navigateTo } from "#app";
 import { useAuthentication } from "../composables/useAuthentication";
 const props = defineProps({
@@ -16,19 +16,26 @@ const props = defineProps({
   containerStyle: { type: [String, Object], required: false }
 });
 const emit = defineEmits(["success", "click", "error"]);
-const { logout } = useAuthentication();
+let authComposable = null;
 const isLoading = ref(false);
 const error = ref("");
+onMounted(() => {
+  authComposable = useAuthentication();
+});
 const handleLogout = async (event) => {
   event.preventDefault();
   if (!confirm(props.confirmMessage)) {
     return;
   }
+  if (!authComposable) {
+    error.value = "Authentication not initialized";
+    return;
+  }
   isLoading.value = true;
   error.value = "";
   try {
     emit("click");
-    await logout();
+    await authComposable.logout();
     emit("success");
     if (props.redirectTo) {
       await navigateTo(props.redirectTo);

package/dist/runtime/components/NUsersProfileInfo.vue

@@ -1,6 +1,11 @@
 <script setup>
+import { computed, onMounted } from "vue";
 import { useAuthentication } from "../composables/useAuthentication";
-const { user } = useAuthentication();
+let authComposable = null;
+const user = computed(() => authComposable?.user.value ?? null);
+onMounted(() => {
+  authComposable = useAuthentication();
+});
 </script>
 
 <template>

package/dist/runtime/components/NUsersUserCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import { useAuthentication } from "../composables/useAuthentication";
 import { useRuntimeConfig } from "#imports";
 import { defaultDisplayFields, defaultFieldLabels } from "nuxt-users/utils";
@@ -10,8 +10,12 @@ const props = defineProps({
   fieldLabels: { type: Object, required: false, default: () => defaultFieldLabels }
 });
 const emit = defineEmits(["delete", "editClick"]);
-const { user: currentUser } = useAuthentication();
 const { public: { nuxtUsers } } = useRuntimeConfig();
+let authComposable = null;
+const currentUser = computed(() => authComposable?.user.value ?? null);
+onMounted(() => {
+  authComposable = useAuthentication();
+});
 const canEdit = computed(() => {
   if (!currentUser.value) return false;
   if (nuxtUsers.auth?.permissions) {
@@ -35,6 +39,7 @@ const canDelete = computed(() => {
   return false;
 });
 const editUser = async (user) => {
+  console.info("The edit event is emitted. Nuxt-users does not automatically calls the API to update the user, you should do it at the upper component.");
   emit("editClick", user);
 };
 const deleteUser = async (user) => {

package/dist/runtime/composables/useUsers.d.ts

@@ -0,0 +1,20 @@
+import type { User } from '../../types.js';
+interface Pagination {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+}
+export declare const useUsers: () => {
+    users: import("vue").Ref<User[], User[]>;
+    pagination: import("vue").Ref<Pagination | null, Pagination | null>;
+    loading: import("vue").Ref<boolean, boolean>;
+    error: import("vue").Ref<string | null, string | null>;
+    fetchUsers: (page?: number, limit?: number) => Promise<void>;
+    updateUser: (updatedUser: User) => void;
+    addUser: (newUser: User) => void;
+    removeUser: (userId: number) => Promise<void>;
+};
+export {};

package/dist/runtime/composables/useUsers.js

@@ -0,0 +1,55 @@
+import { useState, useRuntimeConfig } from "#imports";
+const usersState = useState("users", () => []);
+const paginationState = useState("users-pagination", () => null);
+export const useUsers = () => {
+  const { public: { nuxtUsers } } = useRuntimeConfig();
+  const loading = useState("users-loading", () => false);
+  const error = useState("users-error", () => null);
+  const fetchUsers = async (page = 1, limit = 100) => {
+    if (loading.value) return;
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await $fetch(`${nuxtUsers.apiBasePath}?page=${page}&limit=${limit}`);
+      usersState.value = response.users;
+      paginationState.value = response.pagination;
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : "Failed to fetch users";
+      usersState.value = [];
+      paginationState.value = null;
+    } finally {
+      loading.value = false;
+    }
+  };
+  const updateUser = (updatedUser) => {
+    const index = usersState.value.findIndex((u) => u.id === updatedUser.id);
+    if (index !== -1) {
+      usersState.value[index] = updatedUser;
+    }
+  };
+  const addUser = (newUser) => {
+    usersState.value.unshift(newUser);
+  };
+  const removeUser = async (userId) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      await $fetch(`${nuxtUsers.apiBasePath}/${userId}`, { method: "DELETE" });
+      usersState.value = usersState.value.filter((u) => u.id !== userId);
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : "Failed to delete user";
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    users: usersState,
+    pagination: paginationState,
+    loading,
+    error,
+    fetchUsers,
+    updateUser,
+    addUser,
+    removeUser
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-users",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "A comprehensive user management module for Nuxt 3 and Nuxt 4 applications with authentication, authorization, database support, and CLI tools",
   "keywords": [
     "nuxt",