pages._explore-components-structural-page.title

pages._explore.sections.basic-usage.title

Basic Page

Welcome

This is a basic page with a title and content.The Page component provides a consistent layout structure.

Content Section

You can add multiple sections to organize your content.

html

<Page title="Basic Page">
    <PageSection title="Welcome">
        <Text text="This is a basic page with a title and content." />
        <Text text="The Page component provides a consistent layout structure." />
    </PageSection>
    
    <PageSection title="Content Section">
        <Text text="You can add multiple sections to organize your content." />
    </PageSection>
</Page>

typescript

<script setup lang="ts">

</script>

pages._explore.sections.complex-usage.title

Dashboard Overview

Key Metrics

Total Users1,234+12% from last month

Revenue$12,345+8% from last month

Active Sessions89Live now

Recent Activity

User	Action	Time
John Doe	Logged in	2 minutes ago
Jane Smith	Updated profile	5 minutes ago
Bob Johnson	Created document	12 minutes ago

User Management

Manage user accounts and permissions

Active Users

Users who have logged in within the last 30 days.

Show active users only

Admin Users

Users with administrative privileges.

Show admins only

html

<Page 
    title="Dashboard Overview"
    :header="true"
    :breadcrumbs="true"
>
    <template #actions>
        <div class="flex gap-2">
            <BaseButton 
                text="Refresh" 
                :color="BaseButtonColors.SURFACE_RAISED"
                icon="solar:refresh-bold"
                @triggered="fnRefreshData"
            />
            <BaseButton 
                text="Export" 
                :color="BaseButtonColors.PRIMARY"
                icon="solar:download-bold"
                @triggered="fnExportData"
            />
        </div>
    </template>

    <!-- Statistics Section -->
    <PageSection title="Key Metrics">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="p-6 bg-blue-50 rounded-lg">
                <Text 
                    text="Total Users" 
                    :weight="TextWeights.BOLD" 
                    :color="TextColors.PRIMARY" 
                    class="mb-2" 
                />
                <Text 
                    text="1,234" 
                    :size="TextSizes.XL" 
                    :weight="TextWeights.BOLD" 
                />
                <Text 
                    text="+12% from last month" 
                    :size="TextSizes.SM" 
                    :color="TextColors.SUCCESS" 
                />
            </div>
            <div class="p-6 bg-green-50 rounded-lg">
                <Text 
                    text="Revenue" 
                    :weight="TextWeights.BOLD" 
                    :color="TextColors.SUCCESS" 
                    class="mb-2" 
                />
                <Text 
                    text="$12,345" 
                    :size="TextSizes.XL" 
                    :weight="TextWeights.BOLD" 
                />
                <Text 
                    text="+8% from last month" 
                    :size="TextSizes.SM" 
                    :color="TextColors.SUCCESS" 
                />
            </div>
            <div class="p-6 bg-orange-50 rounded-lg">
                <Text 
                    text="Active Sessions" 
                    :weight="TextWeights.BOLD" 
                    :color="TextColors.WARNING" 
                    class="mb-2" 
                />
                <Text 
                    text="89" 
                    :size="TextSizes.XL" 
                    :weight="TextWeights.BOLD" 
                />
                <Text 
                    text="Live now" 
                    :size="TextSizes.SM" 
                    :color="TextColors.MUTED" 
                />
            </div>
        </div>
    </PageSection>

    <!-- Recent Activity -->
    <PageSection title="Recent Activity">
        <Table 
            :data="recentActivity" 
            :columns="activityColumns"
        />
    </PageSection>

    <!-- User Management -->
    <PageSection title="User Management">
        <div class="space-y-4">
            <div class="flex items-center justify-between">
                <Text 
                    text="Manage user accounts and permissions" 
                    :color="TextColors.MUTED" 
                />
                <BaseButton 
                    text="Add User" 
                    :color="BaseButtonColors.PRIMARY"
                    icon="solar:user-plus-bold"
                    @triggered="stAddUserModalOpen = true"
                />
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="p-4 border rounded">
                    <div class="flex items-center gap-3 mb-3">
                        <Icon 
                            name="solar:users-group-two-rounded-bold" 
                            :color="IconColors.PRIMARY" 
                        />
                        <Text 
                            text="Active Users" 
                            :weight="TextWeights.MEDIUM" 
                        />
                    </div>
                    <Text text="Users who have logged in within the last 30 days." />
                    <div class="flex items-center gap-4 mt-3">
                        <Toggle v-model="showActiveOnly" />
                        <Text text="Show active users only" />
                    </div>
                </div>
                <div class="p-4 border rounded">
                    <div class="flex items-center gap-3 mb-3">
                        <Icon 
                            name="solar:shield-user-bold" 
                            :color="IconColors.SUCCESS" 
                        />
                        <Text 
                            text="Admin Users" 
                            :weight="TextWeights.MEDIUM" 
                        />
                    </div>
                    <Text text="Users with administrative privileges." />
                    <div class="flex items-center gap-4 mt-3">
                        <Toggle v-model="showAdminsOnly" />
                        <Text text="Show admins only" />
                    </div>
                </div>
            </div>
        </div>
    </PageSection>

    <!-- Add User Modal -->
    <Modal 
        v-if="stAddUserModalOpen" 
        item-key="add-user-modal"
        content-size-classes="w-full max-w-md"
    >
        <div class="p-6">
            <Text 
                text="Add New User" 
                :size="TextSizes.LG" 
                :weight="TextWeights.BOLD" 
                class="mb-6" 
            />
            <div class="space-y-4">
                <Input 
                    v-model="newUser.name" 
                    label="Name" 
                    placeholder="Enter user name" 
                />
                <Input 
                    v-model="newUser.email" 
                    label="Email" 
                    placeholder="Enter email address" 
                    type="email" 
                />
                <div class="space-y-2">
                    <Text text="Role:" :weight="TextWeights.MEDIUM" />
                    <div class="space-y-2">
                        <div class="flex items-center gap-4">
                            <input 
                                id="role-user" 
                                v-model="newUser.role" 
                                type="radio" 
                                value="user" 
                            />
                            <label for="role-user">User</label>
                        </div>
                        <div class="flex items-center gap-4">
                            <input 
                                id="role-admin" 
                                v-model="newUser.role" 
                                type="radio" 
                                value="admin" 
                            />
                            <label for="role-admin">Admin</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex gap-2 justify-end mt-6">
                <BaseButton 
                    text="Cancel" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="stAddUserModalOpen = false"
                />
                <BaseButton 
                    text="Add User" 
                    :color="BaseButtonColors.SUCCESS"
                    @triggered="fnAddUser"
                />
            </div>
        </div>
    </Modal>
</Page>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { IconColors } from '#core-types/components/media/icon'
import { TextWeights, TextColors, TextSizes } from '#core-types/components/presentational/text'

const stAddUserModalOpen = ref(false)
const showActiveOnly = ref(false)
const showAdminsOnly = ref(false)

const newUser = ref({
    name: '',
    email: '',
    role: 'user'
})

const recentActivity = ref([
    { user: 'John Doe', action: 'Logged in', timestamp: '2 minutes ago' },
    { user: 'Jane Smith', action: 'Updated profile', timestamp: '5 minutes ago' },
    { user: 'Bob Johnson', action: 'Created document', timestamp: '12 minutes ago' }
])

const activityColumns = ref([
    { key: 'user', label: 'User' },
    { key: 'action', label: 'Action' },
    { key: 'timestamp', label: 'Time' }
])

const fnRefreshData = () => {
    // Handle refresh logic
    console.log('Refreshing data...')
}

const fnExportData = () => {
    // Handle export logic
    console.log('Exporting data...')
}

const fnAddUser = () => {
    // Handle add user logic
    console.log('Adding user:', newUser.value)
    stAddUserModalOpen.value = false
    newUser.value = { name: '', email: '', role: 'user' }
}
</script>

pages._explore.sections.props.title

Prop	Default	Type
header	true	boolean
title	undefined	string
breadcrumbs	true	boolean
gridSections	undefined	PageContentGridSections

pages._explore.sections.types.title

Name	Type	Options
PageProps	interface	Main props interface for Page component
PageContentGridSections	interface	Grid section configuration for page layout

pages._explore.sections.slots.title

Slot	Type
default	Main page content
actions	Page header action buttons