Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated demo pages

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-30 00:13:31 +03:00
parent 20eedb4b2b
commit 72ef6a60b6
52 changed files with 514 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/Dashboard.vue
View File

@@ -3,7 +3,7 @@ import { useLayout } from '@/layout/composables/layout';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref, watch } from 'vue';
const { getPrimary, isDarkTheme } = useLayout();
const { getPrimary, getSurface, isDarkTheme } = useLayout();
const products = ref(null);
const chartData = ref(null);
@@ -99,7 +99,7 @@ watch(isDarkTheme, () => {
chartOptions.value = setChartOptions();
});
watch(getPrimary, () => {
watch([getPrimary, getSurface], () => {
chartData.value = setChartData();
chartOptions.value = setChartOptions();
});
@@ -191,8 +191,8 @@ watch(getPrimary, () => {
</DataTable>
</div>
<div class="card">
<div class="flex justify-between items-center mb-8">
<div class="font-semibold text-xl mb-4">Best Selling Products</div>
<div class="flex justify-between items-center mb-6">
<div class="font-semibold text-xl">Best Selling Products</div>
<div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
<Menu ref="menu2" :popup="true" :model="items"></Menu>
@@ -281,7 +281,7 @@ watch(getPrimary, () => {
</div>
<div class="card">
<div class="flex items-center justify-between mb-6">
<div class="font-semibold text-xl mb-4">Notifications</div>
<div class="font-semibold text-xl">Notifications</div>
<div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
<Menu ref="menu1" :popup="true" :model="items"></Menu>
@@ -292,7 +292,7 @@ watch(getPrimary, () => {
<ul class="p-0 mx-0 mt-0 mb-6 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
<i class="pi pi-dollar !text-xl text-blue-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>Richard Jones
@@ -301,7 +301,7 @@ watch(getPrimary, () => {
</li>
<li class="flex items-center py-2">
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
<i class="pi pi-download text-xl text-orange-500"></i>
<i class="pi pi-download !text-xl text-orange-500"></i>
</div>
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
</li>
@@ -311,7 +311,7 @@ watch(getPrimary, () => {
<ul class="p-0 m-0 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar text-xl text-blue-500"></i>
<i class="pi pi-dollar !text-xl text-blue-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>Keyser Wick
@@ -320,7 +320,7 @@ watch(getPrimary, () => {
</li>
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0">
<i class="pi pi-question text-xl text-pink-500"></i>
<i class="pi pi-question !text-xl text-pink-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>Jane Davis

0
src/views/utilities/Documentation.vue → src/views/pages/Documentation.vue
View File

2
src/views/pages/Empty.vue
View File

@@ -1,6 +1,6 @@
<template>
<div className="card">
<h5>Empty Page</h5>
<div class="font-semibold text-xl mb-4">Empty Page</div>
<p>Use this page to start from scratch and place your custom content.</p>
</div>
</template>

37
src/views/pages/NotFound.vue
View File

@@ -1,17 +1,33 @@
<script setup></script>
<template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex items-center justify-center min-h-screen overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
fill="var(--primary-color)"
/>
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
</mask>
<g mask="url(#mask0_1413_1551)">
<path
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
fill="var(--primary-color)"
/>
</g>
</svg>
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<span class="text-blue-500 font-bold text-3xl">404</span>
<span class="text-primary font-bold text-3xl">404</span>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-cyan-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i>
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-table !text-2xl"></i>
</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
@@ -19,8 +35,8 @@
</span>
</router-link>
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-orange-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle !text-2xl"></i>
</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
@@ -28,14 +44,15 @@
</span>
</router-link>
<router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-center items-center bg-indigo-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock !text-2xl"></i>
</span>
<span class="ml-6 flex flex-col">
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span>
</router-link>
<Button as="router-link" label="Go to Dashboard" to="/" />
</div>
</div>
</div>

155
src/views/pages/TimelineDoc.vue
View File

@@ -1,155 +0,0 @@
<script setup>
import { ref } from 'vue';
const events = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<div class="card">
<h5>Left Align</h5>
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<h5>Right Align</h5>
<Timeline :value="events" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="events">
<template #opposite="slotProps">
<small class="p-text-secondary">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
</div>
<div class="card">
<h5>Custom Timeline</h5>
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
neque quas!
</p>
<Button label="Read more" text></Button>
</template>
</Card>
</template>
</Timeline>
</div>
<div class="card mt-4">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<h6>Bottom Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<h6>Alternate Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #opposite> &nbsp; </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
</div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>

10
src/views/pages/auth/Access.vue
View File

@@ -3,19 +3,17 @@
<template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-lock text-2xl"></i>
<div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
<i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
</div>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact admins.</span>
<span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
<Button as="router-link" label="Go to Dashboard" to="/" severity="warn" />
</div>
</div>
</div>

10
src/views/pages/auth/Error.vue
View File

@@ -3,19 +3,17 @@
<template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
<div class="gap-4 flex flex-col items-center">
<div class="flex justify-center items-center bg-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
<div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
</div>
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</span>
<span class="text-muted-color mb-8">Requested resource is not available.</span>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 text-center">
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
<Button as="router-link" label="Go to Dashboard" to="/" severity="info" />
</div>
</div>
</div>

41
src/views/pages/auth/Login.vue
View File

@@ -1,44 +1,53 @@
<script setup>
import { useLayout } from '@/layout/composables/layout';
import { computed, ref } from 'vue';
import { ref } from 'vue';
const { isDarkTheme } = useLayout();
const email = ref('');
const password = ref('');
const checked = ref(false);
const logoUrl = computed(() => {
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>
<template>
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
<div class="flex flex-col items-center justify-center">
<img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
<div class="text-center mb-8">
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div>
<span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span>
<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-16 shrink-0 mx-auto">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
fill="var(--primary-color)"
/>
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
</mask>
<g mask="url(#mask0_1413_1551)">
<path
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
fill="var(--primary-color)"
/>
</g>
</svg>
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome to PrimeLand!</div>
<span class="text-muted-color font-medium">Sign in to continue</span>
</div>
<div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="email" />
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid></Password>
<div class="flex items-center justify-between mb-8 gap-8">
<div class="flex items-center justify-between mt-2 mb-8 gap-8">
<div class="flex items-center">
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
<span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
</div>
<Button label="Sign In" class="w-full p-4 text-xl"></Button>
<Button label="Sign In" class="w-full" as="router-link" to="/"></Button>
</div>
</div>
</div>

30
src/views/uikit/ButtonDoc.vue
View File

@@ -28,10 +28,10 @@ const load = (index) => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-2">
<h5>Default</h5>
<div class="font-semibold text-xl">Default</div>
<div class="flex flex-wrap gap-2">
<Button label="Submit"></Button>
<Button label="Disabled" :disabled="true"></Button>
@@ -39,7 +39,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Severities</h5>
<div class="font-semibold text-xl">Severities</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
@@ -52,7 +52,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Text</h5>
<div class="font-semibold text-xl">Text</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
@@ -65,7 +65,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Outlined</h5>
<div class="font-semibold text-xl">Outlined</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
@@ -78,7 +78,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Button Group</h5>
<div class="font-semibold text-xl">Group</div>
<div class="flex flex-wrap gap-2">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
@@ -88,7 +88,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>SplitButton</h5>
<div class="font-semibold text-xl">SplitButton</div>
<div class="flex flex-wrap gap-2">
<SplitButton label="Save" :model="items"></SplitButton>
<SplitButton label="Save" :model="items" severity="secondary"></SplitButton>
@@ -101,7 +101,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Templating</h5>
<div class="font-semibold text-xl">Templating</div>
<div class="flex flex-wrap gap-2">
<Button type="button">
<img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
@@ -115,7 +115,7 @@ const load = (index) => {
</div>
<div class="md:w-1/2">
<div class="card flex flex-col gap-2">
<h5>Icons</h5>
<div class="font-semibold text-xl">Icons</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
<Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
@@ -123,7 +123,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Raised</h5>
<div class="font-semibold text-xl">Raised</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
@@ -136,7 +136,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded</h5>
<div class="font-semibold text-xl">Rounded</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
@@ -149,7 +149,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded Icons</h5>
<div class="font-semibold text-xl">Rounded Icons</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded />
<Button icon="pi pi-bookmark" severity="secondary" rounded />
@@ -161,7 +161,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded Text</h5>
<div class="font-semibold text-xl">Rounded Text</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" text raised rounded />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded />
@@ -173,7 +173,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded Outlined</h5>
<div class="font-semibold text-xl">Rounded Outlined</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded outlined />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined />
@@ -185,7 +185,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Loading</h5>
<div class="font-semibold text-xl">Loading</div>
<div class="flex flex-wrap gap-2">
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />

14
src/views/uikit/ChartDoc.vue
View File

@@ -242,40 +242,40 @@ watch(
</script>
<template>
<Fluid class="grid grid-cols-12 gap-4">
<Fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Linear Chart</h5>
<div class="font-semibold text-xl mb-4">Linear</div>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Bar Chart</h5>
<div class="font-semibold text-xl mb-4">Bar</div>
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Pie Chart</h5>
<div class="font-semibold text-xl mb-4">Pie</div>
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Doughnut Chart</h5>
<div class="font-semibold text-xl mb-4">Doughnut</div>
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Polar Area Chart</h5>
<div class="font-semibold text-xl mb-4">Polar Area</div>
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Radar Chart</h5>
<div class="font-semibold text-xl mb-4">Radar</div>
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
</div>
</div>

14
src/views/uikit/FileDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast();
const fileupload = ref();
@@ -15,17 +15,19 @@ const onUpload = () => {
</script>
<template>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-full lg:col-span-6">
<div class="card">
<h5>Advanced</h5>
<div class="font-semibold text-xl mb-4">Advanced</div>
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
</div>
</div>
<div class="col-span-full lg:col-span-6">
<div class="card">
<h5>Basic</h5>
<div class="font-semibold text-xl mb-4">Basic</div>
<div class="card flex flex-col gap-6 items-center justify-center">
<Toast />
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<FileUpload ref="fileupload" mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
<Button label="Upload" @click="upload" severity="secondary" />
</div>
</div>

16
src/views/uikit/FormLayout.vue
View File

@@ -12,10 +12,10 @@ const dropdownItem = ref(null);
<template>
<Fluid>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>Vertical</h5>
<div class="font-semibold text-xl">Vertical</div>
<div class="flex flex-col gap-2">
<label for="name1">Name</label>
<InputText id="name1" type="text" />
@@ -31,7 +31,7 @@ const dropdownItem = ref(null);
</div>
<div class="card flex flex-col gap-4">
<h5>Vertical Grid</h5>
<div class="font-semibold text-xl">Vertical Grid</div>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col grow basis-0 gap-2">
<label for="name2">Name</label>
@@ -46,7 +46,7 @@ const dropdownItem = ref(null);
</div>
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>Horizontal</h5>
<div class="font-semibold text-xl">Horizontal</div>
<div class="grid grid-cols-12 gap-2">
<label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-span-12 md:col-span-10">
@@ -62,7 +62,7 @@ const dropdownItem = ref(null);
</div>
<div class="card flex flex-col gap-4">
<h5>Inline</h5>
<div class="font-semibold text-xl">Inline</div>
<div class="flex flex-wrap items-start gap-4">
<div class="field">
<label for="firstname1" class="sr-only">Firstname</label>
@@ -76,7 +76,7 @@ const dropdownItem = ref(null);
</div>
</div>
<div class="card flex flex-col gap-4">
<h5>Help Text</h5>
<div class="font-semibold text-xl">Help Text</div>
<div class="flex flex-wrap gap-2">
<label for="username">Username</label>
<InputText id="username" type="text" />
@@ -86,9 +86,9 @@ const dropdownItem = ref(null);
</div>
</div>
<div class="flex mt-6">
<div class="flex mt-8">
<div class="card flex flex-col gap-4 w-full">
<h5>Advanced</h5>
<div class="font-semibold text-xl">Advanced</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-wrap gap-2 w-full">
<label for="firstname2">Firstname</label>

63
src/views/uikit/InputDoc.vue
View File

@@ -9,7 +9,6 @@ const selectedAutoValue = ref(null);
const autoFilteredValue = ref([]);
const calendarValue = ref(null);
const inputNumberValue = ref(null);
const chipsValue = ref(null);
const sliderValue = ref(50);
const ratingValue = ref(null);
const colorValue = ref('#1976D2');
@@ -47,10 +46,8 @@ const multiselectValues = ref([
const multiselectValue = ref(null);
const toggleValue = ref(false);
const selectButtonValue1 = ref(null);
const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue2 = ref(null);
const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue = ref(null);
const selectButtonValues = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const knobValue = ref(50);
const inputGroupValue = ref(false);
const treeSelectNodes = ref(null);
@@ -75,17 +72,17 @@ const searchCountry = (event) => {
</script>
<template>
<Fluid class="flex flex-col md:flex-row gap-6">
<Fluid class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<div class="font-semibold text-xl mb-4">InputText</div>
<div class="font-semibold text-xl">InputText</div>
<div class="flex flex-col md:flex-row gap-4">
<InputText type="text" placeholder="Default" />
<InputText type="text" placeholder="Disabled" :disabled="true" />
<InputText type="text" placeholder="Invalid" invalid />
</div>
<h5 class="mt-6">Icons</h5>
<div class="font-semibold text-xl">Icons</div>
<IconField>
<InputIcon class="pi pi-user" />
<InputText type="text" placeholder="Username" />
@@ -95,51 +92,48 @@ const searchCountry = (event) => {
<InputIcon class="pi pi-search" />
</IconField>
<h5 class="mt-6">Float Label</h5>
<div class="font-semibold text-xl">Float Label</div>
<FloatLabel>
<InputText id="username" type="text" v-model="floatValue" />
<label for="username">Username</label>
</FloatLabel>
<h5 class="mt-6">Textarea</h5>
<div class="font-semibold text-xl">Textarea</div>
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
<h5 class="mt-6">AutoComplete</h5>
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<div class="font-semibold text-xl">AutoComplete</div>
<AutoComplete placeholder="Search" :dropdown="true" display="chip" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<h5 class="mt-6">DatePicker</h5>
<div class="font-semibold text-xl">DatePicker</div>
<DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
<h5 class="mt-6">Spinner</h5>
<div class="font-semibold text-xl">InputNumber</div>
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
<h5 class="mt-6">Chips</h5>
<AutoComplete v-model="chipsValue" :typeahead="false" multiple />
</div>
<div class="card flex flex-col gap-4">
<h5>Slider</h5>
<div class="font-semibold text-xl">Slider</div>
<InputText v-model.number="sliderValue" />
<Slider v-model="sliderValue" />
<div class="flex flex-row mt-6">
<div class="flex flex-col gap-4 w-1/2">
<h5>Rating</h5>
<div class="font-semibold text-xl">Rating</div>
<Rating v-model="ratingValue" />
</div>
<div class="flex flex-col gap-4 w-1/2">
<h5>ColorPicker</h5>
<div class="font-semibold text-xl">ColorPicker</div>
<ColorPicker style="width: 2rem" v-model="colorValue" />
</div>
</div>
<h5 class="mt-6">Knob</h5>
<div class="font-semibold text-xl">Knob</div>
<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
</div>
</div>
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>RadioButton</h5>
<div class="font-semibold text-xl">RadioButton</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center">
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
@@ -155,7 +149,7 @@ const searchCountry = (event) => {
</div>
</div>
<h5 class="mt-6">Checkbox</h5>
<div class="font-semibold text-xl">Checkbox</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center">
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
@@ -171,18 +165,18 @@ const searchCountry = (event) => {
</div>
</div>
<h5 class="mt-6">Input Switch</h5>
<div class="font-semibold text-xl">ToggleSwitch</div>
<ToggleSwitch v-model="switchValue" />
</div>
<div class="card flex flex-col gap-4">
<h5>Listbox</h5>
<div class="font-semibold text-xl">Listbox</div>
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
<h5 class="mt-6">Select</h5>
<div class="font-semibold text-xl">Select</div>
<Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
<h5 class="mt-6">MultiSelect</h5>
<div class="font-semibold text-xl">MultiSelect</div>
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
<template #value="slotProps">
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code">
@@ -201,26 +195,23 @@ const searchCountry = (event) => {
</template>
</MultiSelect>
<h5 class="mt-6">TreeSelect</h5>
<div class="font-semibold text-xl">TreeSelect</div>
<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
</div>
<div class="card flex flex-col gap-4">
<h5>ToggleButton</h5>
<div class="font-semibold text-xl">ToggleButton</div>
<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
<h5 class="mt-6">SelectButton</h5>
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
<h5 class="mt-6">SelectButton - Multiple</h5>
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
<div class="font-semibold text-xl">SelectButton</div>
<SelectButton v-model="selectButtonValue" :options="selectButtonValues" optionLabel="name" />
</div>
</div>
</Fluid>
<Fluid class="flex mt-6">
<Fluid class="flex mt-8">
<div class="card flex flex-col gap-4 w-full">
<h5>Input Groups</h5>
<div class="font-semibold text-xl">InputGroup</div>
<div class="flex flex-col md:flex-row gap-4">
<InputGroup>
<InputGroupAddon>

28
src/views/uikit/ListDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const picklistValue = ref([
[
@@ -51,9 +51,9 @@ const getSeverity = (product) => {
</script>
<template>
<div class="flex flex-col gap-6">
<div class="flex flex-col">
<div class="card">
<h5>DataView</h5>
<div class="font-semibold text-xl">DataView</div>
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-end">
@@ -68,7 +68,7 @@ const getSeverity = (product) => {
<template #list="slotProps">
<div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface': index !== 0 }">
<div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
@@ -109,7 +109,7 @@ const getSeverity = (product) => {
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 lg:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
<div class="relative mx-auto">
@@ -153,10 +153,10 @@ const getSeverity = (product) => {
</DataView>
</div>
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-2/3">
<div class="card">
<h5>PickList</h5>
<div class="font-semibold text-xl mb-4">PickList</div>
<PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
<template #option="{ option }">
{{ option.name }}
@@ -167,14 +167,12 @@ const getSeverity = (product) => {
<div class="lg:w-1/3">
<div class="card">
<h5>OrderList</h5>
<div class="lg:flex lg:justify-center">
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
<template #option="{ option }">
{{ option.name }}
</template>
</OrderList>
</div>
<div class="font-semibold text-xl mb-4">OrderList</div>
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
<template #option="{ option }">
{{ option.name }}
</template>
</OrderList>
</div>
</div>
</div>

14
src/views/uikit/MediaDoc.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ProductService } from '@/service/ProductService';
import { PhotoService } from '@/service/PhotoService';
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const products = ref([]);
const images = ref([]);
@@ -65,7 +65,7 @@ const getSeverity = (status) => {
<template>
<div class="card">
<h5>Carousel</h5>
<div class="font-semibold text-xl mb-4">Carousel</div>
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
<template #item="slotProps">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
@@ -89,14 +89,12 @@ const getSeverity = (status) => {
</div>
<div class="card">
<h5>Image</h5>
<div class="flex justify-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<div class="font-semibold text-xl mb-4">Image</div>
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<div class="card">
<h5>Galleria</h5>
<div class="font-semibold text-xl mb-4">Galleria</div>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />

76
src/views/uikit/MenuDoc.vue
View File

@@ -423,7 +423,7 @@ const onContextRightClick = (event) => {
<template>
<div class="card">
<h5 class="mb-2">Menubar</h5>
<div class="font-semibold text-xl mb-4">Menubar</div>
<Menubar :model="nestedMenuitems">
<template #end>
<IconField iconPosition="left">
@@ -435,128 +435,78 @@ const onContextRightClick = (event) => {
</div>
<div class="card">
<h5 class="mb-2">Breadcrumb</h5>
<div class="font-semibold text-xl mb-4">Breadcrumb</div>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">Stepper</h5>
<div class="font-semibold text-xl mb-4">Steps</div>
<Stepper value="1">
<StepList>
<Step value="1">Header I</Step>
<Step value="2">Header II</Step>
<Step value="3">Header III</Step>
</StepList>
<StepPanels>
<StepPanel v-slot="{ activateCallback }" value="1">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
</div>
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="3">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
</StepPanels>
</Stepper>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">Tabs</h5>
<div class="font-semibold text-xl mb-4">TabMenu</div>
<Tabs value="0">
<TabList>
<Tab value="0">Header I</Tab>
<Tab value="1">Header II</Tab>
<Tab value="2">Header III</Tab>
</TabList>
<TabPanels>
<TabPanel value="0">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
</TabPanel>
<TabPanel value="1">
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel value="2">
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
minus.
</p>
</TabPanel>
</TabPanels>
</Tabs>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="flex flex-col md:flex-row gap-8 mt-6">
<div class="md:w-1/3">
<div class="card">
<h5 class="mb-2">Tiered Menu</h5>
<div class="font-semibold text-xl mb-4">Tiered Menu</div>
<TieredMenu :model="tieredMenuItems" />
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<h5 class="mb-2">Plain Menu</h5>
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<Menu :model="menuitems" />
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<h5 class="mb-2">Overlay Menu</h5>
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<Menu ref="menu" :model="overlayMenuItems" :popup="true" />
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
</div>
<div class="card" @contextmenu="onContextRightClick">
<h5 class="mb-2">ContextMenu</h5>
<div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display.
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">MegaMenu - Horizontal</h5>
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<MegaMenu :model="megamenuItems" />
<h5 class="mb-2 mt-8">MegaMenu - Vertical</h5>
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<MegaMenu :model="megamenuItems" orientation="vertical" />
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">PanelMenu</h5>
<div class="font-semibold text-xl mb-4">PanelMenu</div>
<PanelMenu :model="panelMenuitems" />
</div>
</div>

43
src/views/uikit/MessagesDoc.vue
View File

@@ -1,12 +1,11 @@
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast();
const message = ref([]);
const username = ref(null);
const email = ref(null);
const value = ref(null);
const count = ref(0);
const addMessage = (type) => {
@@ -39,34 +38,17 @@ const showError = () => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-4 items-start">
<div class="card md:w-1/2">
<h5 class="mb-2">Toast</h5>
<div class="font-semibold text-xl mb-4">Toast</div>
<div class="flex flex-wrap gap-2">
<Button @click="showSuccess()" label="Success" severity="success" />
<Button @click="showInfo()" label="Info" severity="info" />
<Button @click="showWarn()" label="Warn" severity="warning" />
<Button @click="showError()" label="Error" severity="danger" />
</div>
</div>
<div class="card md:w-1/2">
<h5 class="mb-2">Messages</h5>
<div class="flex flex-wrap gap-2 mb-4">
<Button label="Success" @click="addMessage('success')" severity="success" />
<Button label="Info" @click="addMessage('info')" severity="info" />
<Button label="Warn" @click="addMessage('warn')" severity="warning" />
<Button label="Error" @click="addMessage('error')" severity="danger" />
</div>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="card md:w-1/2">
<h5 class="mb-2">Inline</h5>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2">
<InputText v-model="username" placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
@@ -77,12 +59,19 @@ const showError = () => {
</div>
</div>
<div class="card md:w-1/2">
<h5 class="mb-2">Help Text</h5>
<div class="flex flex-col gap-2">
<label for="username">Username</label>
<InputText id="username" v-model="value" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>
</div>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div>
</div>
</template>

49
src/views/uikit/MiscDoc.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
const value = ref(0);
let interval = null;
@@ -29,7 +29,7 @@ onBeforeUnmount(() => {
<template>
<div class="card">
<h5>ProgressBar</h5>
<div class="font-semibold text-xl mb-4">ProgressBar</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2">
<ProgressBar :value="value"></ProgressBar>
@@ -40,11 +40,10 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-4">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<h4 class="mb-2">Badge</h4>
<h5 class="mb-2">Numbers</h5>
<div class="font-semibold text-xl mb-4">Badge</div>
<div class="flex gap-2">
<Badge :value="2"></Badge>
<Badge :value="8" severity="success"></Badge>
@@ -53,7 +52,7 @@ onBeforeUnmount(() => {
<Badge :value="3" severity="danger"></Badge>
</div>
<h5 class="my-4">Positioned Badge</h5>
<div class="font-semibold my-4">Overlay</div>
<div class="flex gap-6">
<OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" />
@@ -66,11 +65,13 @@ onBeforeUnmount(() => {
</OverlayBadge>
</div>
<h5 class="my-4">Inline Button Badge</h5>
<Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
<div class="font-semibold my-4">Button</div>
<div class="flex gap-2">
<Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
</div>
<h5 class="my-4">Sizes</h5>
<div class="font-semibold my-4">Sizes</div>
<div class="flex items-start gap-2">
<Badge :value="2"></Badge>
<Badge :value="4" size="large" severity="warn"></Badge>
@@ -79,8 +80,8 @@ onBeforeUnmount(() => {
</div>
<div class="card">
<h4>Avatar</h4>
<h5 class="my-4">Avatar Group</h5>
<div class="font-semibold text-xl mb-4">Avatar</div>
<div class="font-semibold mb-4">Group</div>
<AvatarGroup>
<Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
@@ -90,19 +91,19 @@ onBeforeUnmount(() => {
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup>
<h5 class="my-4">Label - Circle</h5>
<div class="font-semibold my-4">Label - Circle</div>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
<Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar>
<Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar>
<h5 class="my-4">Icon - Badge</h5>
<div class="font-semibold my-4">Icon - Badge</div>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
<div class="card">
<h4>ScrollTop</h4>
<div class="font-semibold text-xl mb-4">ScrollTop</div>
<ScrollPanel :style="{ width: '250px', height: '200px' }">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
@@ -117,8 +118,8 @@ onBeforeUnmount(() => {
</div>
<div class="md:w-1/2">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
<div class="font-semibold text-xl mb-4">Tag</div>
<div class="font-semibold mb-4">Default</div>
<div class="flex gap-2">
<Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag>
@@ -127,7 +128,7 @@ onBeforeUnmount(() => {
<Tag severity="danger" value="Danger"></Tag>
</div>
<h5>Pills</h5>
<div class="font-semibold my-4">Pills</div>
<div class="flex gap-2">
<Tag value="Primary" :rounded="true"></Tag>
<Tag severity="success" value="Success" :rounded="true"></Tag>
@@ -136,7 +137,7 @@ onBeforeUnmount(() => {
<Tag severity="danger" value="Danger" :rounded="true"></Tag>
</div>
<h5>Icons</h5>
<div class="font-semibold my-4">Icons</div>
<div class="flex gap-2">
<Tag icon="pi pi-user" value="Primary"></Tag>
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -147,8 +148,8 @@ onBeforeUnmount(() => {
</div>
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
<div class="font-semibold text-xl mb-4">Chip</div>
<div class="font-semibold mb-4">Basic</div>
<div class="flex items-center flex-col sm:flex-row">
<Chip label="Action" class="mr-2 mb-2"></Chip>
<Chip label="Comedy" class="mr-2 mb-2"></Chip>
@@ -156,7 +157,7 @@ onBeforeUnmount(() => {
<Chip label="Thriller" :removable="true" class="mb-2"></Chip>
</div>
<h5>Icon</h5>
<div class="font-semibold my-4">Icon</div>
<div class="flex items-center flex-col sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
@@ -164,7 +165,7 @@ onBeforeUnmount(() => {
<Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
</div>
<h5>Image</h5>
<div class="font-semibold my-4">Image</div>
<div class="flex items-center flex-col sm:flex-row">
<Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
@@ -173,7 +174,7 @@ onBeforeUnmount(() => {
</div>
<div class="card">
<h4>Skeleton</h4>
<div class="font-semibold text-xl mb-4">Skeleton</div>
<div class="rounded-border border border-surface p-6">
<div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>

47
src/views/uikit/OverlayDoc.vue
View File

@@ -1,8 +1,8 @@
<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { ProductService } from '@/service/ProductService';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';
const display = ref(false);
const displayConfirmation = ref(false);
@@ -77,31 +77,26 @@ const confirm = (event) => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-4">Dialog</h5>
<div class="font-semibold text-xl mb-4">Dialog</div>
<Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" />
<Button label="Save" @click="close" />
</template>
</Dialog>
<Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" />
<Button label="Show" style="width: auto" @click="open" />
</div>
<div class="card">
<h5 class="mb-4">Popover</h5>
<div class="font-semibold text-xl mb-4">Popover</div>
<div class="flex flex-wrap gap-2">
<Button type="button" label="Image" @click="toggle" severity="success" />
<Popover ref="op">
<img src="https://primefaces.org/cdn/primevue/images/nature/nature9.jpg" alt="Image" />
</Popover>
<Button type="button" label="DataTable" @click="toggleDataTable" severity="success" />
<Button type="button" label="Show" @click="toggleDataTable" />
<Popover ref="op2" id="overlay_panel" style="width: 450px">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
@@ -119,16 +114,16 @@ const confirm = (event) => {
</div>
<div class="card">
<h5 class="mb-4">Tooltip</h5>
<div class="font-semibold text-xl mb-4">Tooltip</div>
<div class="inline-flex gap-4">
<InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<Button type="button" label="Save" v-tooltip="'Click to proceed'" />
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-4">Drawer</h5>
<div class="font-semibold text-xl mb-4">Drawer</div>
<Drawer v-model:visible="visibleLeft" header="Drawer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -164,21 +159,21 @@ const confirm = (event) => {
</p>
</Drawer>
<Button icon="pi pi-arrow-right" severity="warn" @click="visibleLeft = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-left" severity="warn" @click="visibleRight = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-down" severity="warn" @click="visibleTop = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-up" severity="warn" @click="visibleBottom = true" style="margin-right: 0.25em" />
<Button icon="pi pi-external-link" severity="warn" @click="visibleFull = true" />
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right: 0.25em" />
<Button icon="pi pi-external-link" @click="visibleFull = true" />
</div>
<div class="card">
<h5 class="mb-4">ConfirmPopup</h5>
<div class="font-semibold text-xl mb-4">ConfirmPopup</div>
<ConfirmPopup></ConfirmPopup>
<Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
</div>
<div class="card">
<h5 class="mb-4">Confirmation</h5>
<div class="font-semibold text-xl mb-4">ConfirmDialog</div>
<Button label="Delete" icon="pi pi-trash" severity="danger" style="width: auto" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
<div class="flex items-center justify-center">
@@ -186,8 +181,8 @@ const confirm = (event) => {
<span>Are you sure you want to proceed?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" />
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
<Button label="No" icon="pi pi-times" @click="closeConfirmation" text severity="secondary" />
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" severity="danger" outlined autofocus />
</template>
</Dialog>
</div>

27
src/views/uikit/PanelsDoc.vue
View File

@@ -32,9 +32,9 @@ const toggle = () => {
</script>
<template>
<div class="flex flex-col gap-4">
<div class="flex flex-col">
<div class="card">
<h5>Toolbar</h5>
<div class="font-semibold text-xl mb-4">Toolbar</div>
<Toolbar>
<template #start>
<Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
@@ -55,10 +55,10 @@ const toggle = () => {
</Toolbar>
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<h5>Accordion</h5>
<div class="font-semibold text-xl mb-4">Accordion</div>
<Accordion value="0">
<AccordionPanel value="0">
<AccordionHeader>Header I</AccordionHeader>
@@ -93,7 +93,7 @@ const toggle = () => {
</Accordion>
</div>
<div class="card">
<h5>Tabs</h5>
<div class="font-semibold text-xl mb-4">Tabs</div>
<Tabs value="0">
<TabList>
<Tab value="0">Header I</Tab>
@@ -128,7 +128,7 @@ const toggle = () => {
</div>
<div class="md:w-1/2 mt-6 md:mt-0">
<div class="card">
<h5>Panel</h5>
<div class="font-semibold text-xl mb-4">Panel</div>
<Panel header="Header" :toggleable="true">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -138,7 +138,7 @@ const toggle = () => {
</Panel>
</div>
<div class="card">
<h5>Fieldset</h5>
<div class="font-semibold text-xl mb-4">Fieldset</div>
<Fieldset legend="Legend" :toggleable="true">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -151,7 +151,7 @@ const toggle = () => {
<Card>
<template v-slot:title>
<div class="flex items-center justify-between mb-0">
<h5>Card</h5>
<div class="font-semibold text-xl mb-4">Card</div>
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
</div>
<Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
@@ -168,8 +168,8 @@ const toggle = () => {
</div>
</div>
<div class="card mt-4">
<h5>Divider</h5>
<div class="card mt-8">
<div class="font-semibold text-xl mb-4">Divider</div>
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
<div class="flex flex-col gap-2">
@@ -185,8 +185,8 @@ const toggle = () => {
</div>
</div>
<div class="w-full md:w-2/12">
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
<Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
</div>
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
@@ -195,8 +195,7 @@ const toggle = () => {
</div>
<div class="card">
<h5>Splitter</h5>
<div class="font-semibold text-xl mb-4">Splitter</div>
<Splitter style="height: 300px" class="mb-8">
<SplitterPanel :size="30" :minSize="10">
<div className="h-full flex items-center justify-center">Panel 1</div>

12
src/views/uikit/TableDoc.vue
View File

@@ -1,8 +1,8 @@
<script setup>
import { ref, onBeforeMount, reactive } from 'vue';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { CustomerService } from '@/service/CustomerService';
import { ProductService } from '@/service/ProductService';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { onBeforeMount, reactive, ref } from 'vue';
const customers1 = ref(null);
const customers2 = ref(null);
@@ -143,7 +143,7 @@ const calculateCustomerTotal = (name) => {
<template>
<div class="card">
<h5>Filter Menu</h5>
<div class="font-semibold text-xl mb-4">Filtering</div>
<DataTable
:value="customers1"
:paginator="true"
@@ -269,7 +269,7 @@ const calculateCustomerTotal = (name) => {
</div>
<div class="card">
<h5>Frozen Columns</h5>
<div class="font-semibold text-xl mb-4">Frozen Columns</div>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
<DataTable :value="customers2" scrollable scrollHeight="400px" class="mt-6">
@@ -291,7 +291,7 @@ const calculateCustomerTotal = (name) => {
</div>
<div class="card">
<h5>Row Expand</h5>
<div class="font-semibold text-xl mb-4">Row Expansion</div>
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" tableStyle="min-width: 60rem">
<template #header>
<div class="flex flex-wrap justify-end gap-2">
@@ -351,7 +351,7 @@ const calculateCustomerTotal = (name) => {
</div>
<div class="card">
<h5>Subheader Grouping</h5>
<div class="font-semibold text-xl mb-4">Grouping</div>
<DataTable :value="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
<template #groupheader="slotProps">
<div class="flex items-center gap-2">

159
src/views/uikit/TimelineDoc.vue Normal file
View File

@@ -0,0 +1,159 @@
<script setup>
import { ref } from 'vue';
const events = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template>
<div class="grid grid-cols-12 gap-8">
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Left Align</div>
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Right Align</div>
<Timeline :value="events" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Alternate Align</div>
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Opposite Content</div>
<Timeline :value="events">
<template #opposite="slotProps">
<small class="text-muted-color">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Templating</div>
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
cupiditate neque quas!
</p>
<Button label="Read more" text></Button>
</template>
</Card>
</template>
</Timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Horizontal</div>
<div class="font-semibold mb-2">Top Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<div class="font-semibold mt-4 mb-2">Bottom Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<div class="font-semibold mt-4 mb-2">Alternate Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #opposite> &nbsp; </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>

7
src/views/uikit/TreeDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { onMounted, ref } from 'vue';
import { NodeService } from '@/service/NodeService';
import { onMounted, ref } from 'vue';
const treeValue = ref(null);
const selectedTreeValue = ref(null);
@@ -15,14 +15,13 @@ onMounted(() => {
<template>
<div class="card">
<h5 class="mb-4">Tree</h5>
<div class="font-semibold text-xl">Tree</div>
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
</div>
<div class="card">
<h5 class="mb-4">TreeTable</h5>
<div class="font-semibold text-xl mb-4">TreeTable</div>
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
<template #header> FileSystem </template>
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>

6
src/views/uikit/menu/ConfirmationDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-check mr-2 text-2xl" />
<p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
</div>
</template>

6
src/views/uikit/menu/PaymentDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-money-bill mr-2 text-2xl" />
<p class="m-0 text-lg">Payment Component Content via Child Route</p>
</div>
</template>

6
src/views/uikit/menu/PersonalDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-user mr-2 text-2xl" />
<p class="m-0 text-lg">Personal Component Content via Child Route</p>
</div>
</template>

6
src/views/uikit/menu/SeatDemo.vue
View File

@@ -1,6 +0,0 @@
<template>
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-ticket mr-2 text-2xl" />
<p class="m-0 text-lg">Seat Component Content via Child Route</p>
</div>
</template>

806
src/views/utilities/Blocks.vue
View File

@@ -1,806 +0,0 @@
<script setup>
import { ref } from 'vue';
const block1 = ref(` <div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</section>
</div>
<div class="col-span-12 md:col-span-6 overflow-hidden">
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>`);
const block2 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
<div class="mb-4 font-bold text-2xl">
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`);
const block3 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
</div>
</div>
</div>
</div>
</div>`);
const block4 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-700 dark:text-surface-100 text-center">
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
</div>
</div>`);
const block5 = ref(` <div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
<div class="font-bold mr-20">🔥 Hot Deals!</div>
<div class="items-center hidden lg:flex">
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex items-center ml-2 mr-20">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`);
const block6 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
<li>
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
</li>
<li>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
</li>
</ul>
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex items-center mt-4">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-4 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>`);
const block7 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-surface-500 dark:text-surface-300">since last week</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width:2.5rem;height:2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-surface-500 dark:text-surface-300">responded</span>
</div>
</div>
</div>
</div>`);
const block8 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
<div class="text-center mb-8">
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4">
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
<InputText id="email1" type="text" class="w-full mb-4" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
<InputText id="password1" type="password" class="w-full mb-4" />
<div class="flex items-center justify-between mb-12">
<div class="flex items-center">
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>`);
const block9 = ref(` <div class="bg-surface-0 dark:bg-surface-950">
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
<Chip label="Crime" class="mr-2"></Chip>
<Chip label="Drama" class="mr-2"></Chip>
<Chip label="Thriller"></Chip>
</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
A group of professional bank robbers start to feel the heat from police
when they unknowingly leave a clue at their latest heist.</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
</ul>
</div>`);
const block10 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
</div>`);
const checked = ref(false);
</script>
<template>
<div>
<BlockViewer header="Hero" :code="block1" free>
<div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</section>
</div>
<div class="col-span-12 md:col-span-6 overflow-hidden">
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
</div>
</div>
</BlockViewer>
<BlockViewer header="Feature" :code="block2" free>
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
<div class="mb-4 font-bold text-2xl">
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
</div>
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-desktop text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-lock text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-globe text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
</div>
<div class="col-span-12 md:col-span-4 mb-6 px-8">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-github text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
</div>
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
<i class="pi pi-shield text-4xl text-blue-500"></i>
</span>
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Pricing" :code="block3" free>
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full"></Button>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="p-4 h-full">
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<div class="flex items-center">
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface" />
<ul class="list-none p-0 m-0 grow">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Arcu vitae elementum</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Dui faucibus in ornare</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Morbi tincidunt augue</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Duis ultricies lacus sed</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Imperdiet proin</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Nisi scelerisque</span>
</li>
</ul>
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
</div>
</div>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Call to Action" :code="block4" free>
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
<div class="text-surface-700 dark:text-surface-100 text-center">
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
</div>
</div>
</BlockViewer>
<BlockViewer header="Banner" :code="block5" containerClass="bg-surface-0 dark:bg-surface-950 py-20" free>
<div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
<div class="font-bold mr-20">🔥 Hot Deals!</div>
<div class="items-center hidden lg:flex">
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
</div>
<a class="flex items-center ml-2 mr-20">
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
</a>
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width: 2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>
</BlockViewer>
<BlockViewer header="Page Heading" :code="block6" free>
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
<li>
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
</li>
<li>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
</li>
</ul>
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
<div>
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-users mr-2"></i>
<span>332 Active Users</span>
</div>
<div class="mr-8 flex items-center mt-4">
<i class="pi pi-globe mr-2"></i>
<span>9402 Sessions</span>
</div>
<div class="flex items-center mt-4">
<i class="pi pi-clock mr-2"></i>
<span>2.32m Avg. Duration</span>
</div>
</div>
</div>
<div class="mt-4 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Stats" :code="block7" free>
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-surface-500 dark:text-surface-300">since last week</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-surface-500 dark:text-surface-300">responded</span>
</div>
</div>
</div>
</div>
</BlockViewer>
<BlockViewer header="Sign-In" :code="block8" containerClass="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 flex items-center justify-center" free>
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
<div class="text-center mb-8">
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4" />
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>
<div>
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
<InputText id="email1" type="text" class="w-full mb-4" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
<InputText id="password1" type="password" class="w-full mb-4" />
<div class="flex items-center justify-between mb-12">
<div class="flex items-center">
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label>
</div>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>
</BlockViewer>
<BlockViewer header="Description List" :code="block9" containerClass="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20" free>
<div class="bg-surface-0 dark:bg-surface-950">
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
<Chip label="Crime" class="mr-2"></Chip>
<Chip label="Drama" class="mr-2"></Chip>
<Chip label="Thriller"></Chip>
</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.
</div>
<div class="w-6/12 md:w-2/12 flex justify-end">
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
</div>
</li>
</ul>
</div>
</BlockViewer>
<BlockViewer header="Card" :code="block10" containerClass="px-6 py-20 md:px-12 lg:px-20" free>
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
</div>
</BlockViewer>
</div>
</template>

91
src/views/utilities/Icons.vue
View File

@@ -1,91 +0,0 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
const filteredIcons = computed(() => {
if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
else return icons.value;
});
onMounted(() => {
fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let data = d.icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
</script>
<template>
<div class="card">
<h2>Icons</h2>
<p>
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
</p>
<h4>Download</h4>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<pre class="app-code"><code>npm install primeicons --save</code></pre>
<h4>Getting Started</h4>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
<i class="pi pi-times"></i>
<h4>Size</h4>
<p>Size of the icons can easily be changed using font-size property.</p>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check"></i>
<pre class="app-code"><code>&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="font-size: 2rem"></i>
<h4>Spinning Animation</h4>
<p>Special pi-spin class applies continuous rotation to an icon.</p>
<pre class="app-code"><code>&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<h4>List of Icons</h4>
<p>
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue tracker.
</p>
<InputText v-model="filter" class="w-full p-4 mt-4 mb-8" placeholder="Search an icon" />
<div class="grid grid-cols-12 gap-4 icons-list text-center">
<div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 pb-8" v-for="icon of filteredIcons" :key="icon.properties.name">
<i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
<div>pi-{{ icon.properties.name }}</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.icons-list {
i {
color: var(--text-color-secondary);
}
}
</style>