primevue-mirror/pages/landing/ComponentSection.vue

<template>
    <section class="landing-components py-8">
        <div class="section-header">Components</div>
        <p class="section-detail"><span class="font-bold text-900">Over 90</span> Vue UI Components with top-notch quality to help you implement all your UI requirements in style.</p>
        <div class="components-main relative">
            <div class="components-main-container flex flex-column xl:flex-row mt-7 gap-5 justify-content-center mx-auto w-full xl:w-auto px-5 lg:px-8">
                <div class="flex flex-column md:flex-row gap-5 w-full xl:w-auto">
                    <div class="flex flex-column w-full gap-5 xl:mt-8 z-1 lg:w-28rem md:w-30rem">
                        <div class="box p-4">
                            <span class="text-secondary font-medium block mb-3">Balance</span>
                            <div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
                                <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
                                <InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
                            </div>
                            <span class="text-secondary font-medium block mt-5 mb-3">Category</span>
                            <div class="flex justify-content-between flex-wrap gap-3">
                                <div class="flex align-items-center">
                                    <RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
                                    <label for="category1" class="ml-2 font-medium">Clothing</label>
                                </div>
                                <div class="flex align-items-center">
                                    <RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
                                    <label for="category2" class="ml-2 font-medium">Fitness</label>
                                </div>
                                <div class="flex align-items-center">
                                    <RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
                                    <label for="category3" class="ml-2 font-medium">Electronics</label>
                                </div>
                            </div>
                        </div>
                        <div class="box p-4">
                            <Chart type="line" :data="chartData" :options="chartOptions" />
                        </div>
                        <div class="box p-4">
                            <TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
                        </div>
                        <div class="box p-4">
                            <ul class="list-none p-0 m-0">
                                <li class="flex align-items-center mb-3">
                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
                                    <span class="font-medium">Darrel Steward</span>
                                    <ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                                    <span class="text-secondary font-medium">15%</span>
                                </li>
                                <li class="flex align-items-center mb-3">
                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
                                    <span class="font-medium">Albert Flores</span>
                                    <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                                    <span class="text-secondary font-medium">85%</span>
                                </li>
                                <li class="flex align-items-center mb-3">
                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
                                    <span class="font-medium">Kathryn Murphy</span>
                                    <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                                    <span class="text-secondary font-medium">50%</span>
                                </li>
                                <li class="flex align-items-center mb-3">
                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
                                    <span class="font-medium">Cody Fisher</span>
                                    <ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                                    <span class="text-secondary font-medium">75%</span>
                                </li>
                                <li class="flex align-items-center mb-3">
                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
                                    <span class="font-medium">Brandon Atkinson</span>
                                    <ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                                    <span class="text-secondary font-medium">60%</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="flex flex-column w-full gap-5 justify-content-start xl:w-24rem z-1">
                        <div class="box p-4">
                            <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
                                <img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
                            </div>
                            <div class="flex align-items-center mb-4">
                                <div class="flex flex-column">
                                    <span class="block font-semibold mb-1">Brown Watch</span>
                                    <span class="text-secondary text-sm">Premium Quality</span>
                                </div>
                                <span class="font-medium text-xl ml-auto">$12.45</span>
                            </div>
                            <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
                        </div>
                        <div class="box p-4">
                            <Tree :value="nodes" class="bg-transparent border-none p-0" />
                        </div>
                        <div class="box p-4">
                            <div class="flex align-items-center">
                                <Chip label="Vue" class="mr-2 font-medium" removable />
                                <span class="font-medium">Typescript</span>
                                <InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
                            </div>
                            <div class="mt-5">
                                <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
                            </div>
                        </div>
                        <div class="box p-4 block xl:hidden">
                            <div class="flex justify-content-center">
                                <Slider v-model="rangeValues" range class="w-full" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-column gap-5 flex-column md:flex-row xl:flex-column justify-content-between xl:justify-content-start z-1 w-full md:w-auto">
                    <div class="flex flex-column gap-5 xl:mt-5 w-full">
                        <div class="box p-4 hidden xl:block">
                            <div class="flex justify-content-center w-full">
                                <Slider v-model="rangeValues" range class="w-full" />
                            </div>
                        </div>
                        <div class="box p-4 w-full">
                            <ul class="list-none p-0 m-0">
                                <li class="flex mb-3">
                                    <span class="mr-3">
                                        <img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
                                    </span>
                                    <div class="flex flex-column">
                                        <span class="font-bold mb-2">Amanda Williams</span>
                                        <p class="m-0 text-secondary">Webmaster</p>
                                    </div>
                                </li>
                                <li class="flex">
                                    <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
                                        <i class="pi pi-home text-xl mr-3"></i>
                                        <span class="flex flex-column">
                                            <span class="font-bold mb-1">Dashboard</span>
                                            <span class="m-0 text-secondary">Control Panel</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="flex">
                                    <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
                                        <i class="pi pi-envelope text-xl mr-3"></i>
                                        <span class="flex flex-column">
                                            <span class="font-bold mb-1">Inbox</span>
                                            <span class="m-0 text-secondary">View Messages</span>
                                        </span>
                                        <Badge value="3" class="ml-auto"></Badge>
                                    </a>
                                </li>
                                <li class="flex">
                                    <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
                                        <i class="pi pi-cog text-xl mr-3"></i>
                                        <span class="flex flex-column">
                                            <span class="font-bold mb-1">Profile</span>
                                            <span class="m-0 text-secondary">Account Settings</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="box p-4 md:w-6 xl:w-full">
                        <Calendar v-model="dateValue" :inline="true" :showWeek="true" class="w-full" />
                    </div>
                </div>
            </div>

            <div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>
            <div class="components-strip-bottom absolute w-full md:w-6 h-8rem bottom-0 right-0"></div>
        </div>
    </section>
</template>

<script>
import { NodeService } from '@/service/NodeService';
export default {
    data() {
        return {
            value1: 240,
            value2: 356,
            category: 'C',
            chartData: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'Income',
                        data: [40, 59, 40, 50, 56, 40, 70],
                        fill: true,
                        borderColor: '#03C4E8',
                        tension: 0.4,
                        backgroundColor: 'rgba(3, 196, 232, .2)'
                    }
                ]
            },
            chartOptions: {
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        ticks: {
                            display: false
                        },
                        min: 0,
                        max: 100
                    },
                    x: {
                        ticks: {
                            display: false
                        }
                    }
                }
            },
            pbValue1: 15,
            pbValue2: 85,
            pbValue3: 50,
            pbValue4: 75,
            pbValue5: 60,
            activeTabIndex: 0,
            radioValue: 'C',
            nodes: null,
            switchValue: true,
            selectButtonValue: { name: 'Prime', value: 1 },
            dateValue: null,
            rangeValues: [20, 80],
            items: [
                { label: 'Home', icon: 'pi pi-fw pi-home' },
                { label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
                { label: 'Settings', icon: 'pi pi-fw pi-cog' }
            ],
            selectButtonOptions: [
                { name: 'Prime', value: 1 },
                { name: 'Vue', value: 2 },
                { name: 'Themes', value: 3 }
            ]
        };
    },
    mounted() {
        NodeService.getTreeNodes().then((data) => (this.nodes = data));
    },
    methods: {
        setCategory(category) {
            this.category = category;
        }
    }
};
</script>