Users Component

Improve the following documentation for Users component in Vvveb CMS

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

Component Properties

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

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

These properties repeat for each user returned by the component.

HTML Example

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

	<div data-v-user>

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

			<div class="avatar">
				<img data-v-user-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-user-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-user-username>username</span></div>

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

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

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

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

		</div>

	</div>

</div>

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