Admins Component

Improve the following documentation for Admins component in Vvveb CMS

The admins component displays a list of administrator users. It supports pagination, filtering, and searching, making it useful for author listings, team pages, or admin management sections within a theme.

Component Properties

Each admin user is wrapped in an element marked with data-v-admin.
Inside each element, the following properties are available:

• first_name — data-v-admin-first_name — Admin’s first name.
• last_name — data-v-admin-last_name — Admin’s last name.
• avatar_url — data-v-admin-avatar_url — Profile avatar image URL.
• cover_url — data-v-admin-cover_url — Cover or background image URL.
• url — data-v-admin-url — Public profile page URL.
• username — data-v-admin-username — Username used for login.
• display_name — data-v-admin-display_name — Public display name.
• website — data-v-admin-website — Personal or professional website.
• email — data-v-admin-email — Internal email for login and notifications.
• public_email — data-v-admin-public_email — Publicly visible email address.
• bio — data-v-admin-bio — Short biography or description.
• created_at — data-v-admin-created_at — Account creation timestamp.
• updated_at — data-v-admin-updated_at — Last update timestamp.
• role_id — data-v-admin-role_id — Role ID assigned to the admin.
• role — data-v-admin-role — Role name (e.g., Administrator, Editor).
• last_ip — data-v-admin-last_ip — Last login IP address.
• phone_number — data-v-admin-phone_number — Public phone number (if provided).

These properties repeat for each admin returned by the component.

HTML Example

<div data-v-component-admins data-v-limit="4">

	<div data-v-admin>

		<div class="profile-header">
			<div class="cover">
				<img src="" data-v-admin-cover_url>
			</div>

			<div class="avatar">
				<img data-v-admin-avatar_url class="rounded-circle avatar" alt="Profile Picture">
			</div>
		</div>

		<div class="px-3 m-3 me-5 d-flex justify-content-between">
			<div>
				<h1 class="h3 m-0" data-v-admin-display_name>User</h1>
			</div>

			<div class="social-links d-inline-block">
				<!-- Optional social links -->
			</div>
		</div>

		<div class="px-3 m-3 me-5 d-flex">

			<div>
				<div class="text-muted">@<span data-v-admin-username>username</span></div>

				<div>
					<a class="d-block" data-v-admin-website href="#">
						<span data-v-admin-website>example.com</span>
					</a>

					<a class="d-block text-body small" href="#">
						<span data-v-admin-public_email>admin@vvveb.com</span>
					</a>

					<a class="d-block text-body small" href="#">
						<span data-v-admin-phone_number>123456</span>
					</a>
				</div>
			</div>

			<div class="ms-5">
				<div data-v-admin-bio>My bio</div>
			</div>

		</div>

	</div>

</div>

This example displays a list of up to four admin users, each rendered using the available admin properties.