nuxt-x-app-admin
Users Directory
Searchable, filterable, paginated user directory with grid/list view toggle and selection support.
Users Directory
Searchable, filterable, paginated user directory with grid/list view toggle and selection support.
Components
<XAdminUsersDirectory />
Props, events, and behaviour reflect the actual <script setup> of XAdmin/Users/Directory.vue in @xenterprises/nuxt-x-app-admin.
<XAdminUsersDirectory />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
users | Array | REQUIRED | Array of user objects to render. |
loading | Boolean | false | External loading flag (skeleton state). |
searchable | Boolean | true | Show search input. |
searchPlaceholder | String | 'Search users...' | Search input placeholder text. |
roles | Array | [] | Available role values for the role filter dropdown. |
roleFilter | Boolean | false | Show role filter dropdown. |
statusFilter | Boolean | false | Show status filter dropdown (online / offline / away / busy). |
view | String | 'list' | Initial view mode; validated to 'grid' or 'list'. |
viewToggle | Boolean | false | Allow user to toggle between grid and list. |
selectable | Boolean | false | Render checkboxes for row selection. |
modelValue | Array | [] | v-model array of selected user keys. |
userKey | String | 'id' | Property on the user object used as selection key. |
emptyTitle | String | 'No users found' | Title text for the empty state. |
emptyDescription | String | '' | Description text for the empty state. |
emptyIcon | String | 'i-lucide-users' | Iconify icon name for the empty state. |
columns | Number | 3 | Grid columns when in grid view (1-6). |
paginated | Boolean | false | Enable client-side pagination. |
pageSize | Number | 20 | Items per page when paginated. |
total | Number | 0 | Total count for server-side pagination. |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | varies | Standard v-model update for modelValue. |
search | varies | Search query changed (Directory). |
filter | varies | Filter selection changed (Directory). |
user-click | varies | User row clicked (Directory). |
page | varies | Pagination page changed (Directory). |
update:view | varies | v-model:view update for view-mode toggle (Directory). |
AI Context
component: XAdminUsersDirectory
package: "@xenterprises/nuxt-x-app-admin"
category: Users
source: app/components/XAdmin/Users/Directory.vue
use-when: Searchable, filterable, paginated user directory with grid/list view toggle and selection support.