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

Migrated to new design tokens of v4

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-25 17:37:08 +03:00
parent a7bec8d7a5
commit cafcd0449e
51 changed files with 1084 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -6,6 +6,8 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sakai Vue</title> <title>Sakai Vue</title>
<link href="https://cdn.jsdelivr.net/npm/@vetixy/circular-std@1.0.0/dist/index.min.css" rel="stylesheet">
</head> </head>
<body> <body>

2
src/assets/layout/_content.scss
View File

@@ -4,7 +4,7 @@
min-height: 100vh; min-height: 100vh;
justify-content: space-between; justify-content: space-between;
padding: 7rem 2rem 2rem 4rem; padding: 7rem 2rem 2rem 4rem;
transition: margin-left $transitionDuration; transition: margin-left var(--layout-section-transition-duration);
} }
.layout-main { .layout-main {

2
src/assets/layout/_footer.scss
View File

@@ -1,5 +1,5 @@
.layout-footer { .layout-footer {
transition: margin-left $transitionDuration; transition: margin-left var(--layout-section-transition-duration);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

4
src/assets/layout/_main.scss
View File

@@ -4,11 +4,11 @@
html { html {
height: 100%; height: 100%;
font-size: $scale; font-size: 14px;
} }
body { body {
font-family: var(--font-family); font-family: 'CircularStd', sans-serif;
color: var(--text-color); color: var(--text-color);
background-color: var(--surface-ground); background-color: var(--surface-ground);
margin: 0; margin: 0;

23
src/assets/layout/_menu.scss
View File

@@ -7,11 +7,16 @@
user-select: none; user-select: none;
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
transition: transform $transitionDuration, left $transitionDuration; transition:
transform var(--layout-section-transition-duration),
left var(--layout-section-transition-duration);
background-color: var(--surface-overlay); background-color: var(--surface-overlay);
border-radius: $borderRadius; border-radius: var(--content-border-radius);
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08); box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
} }
.layout-menu { .layout-menu {
@@ -24,7 +29,7 @@
font-size: 0.857rem; font-size: 0.857rem;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
color: var(--surface-900); color: var(--text-color);
margin: 0.75rem 0; margin: 0.75rem 0;
} }
@@ -64,8 +69,10 @@
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: $borderRadius; border-radius: var(--content-border-radius);
transition: background-color $transitionDuration, box-shadow $transitionDuration; transition:
background-color var(--element-transition-duration),
box-shadow var(--element-transition-duration);
.layout-menuitem-icon { .layout-menuitem-icon {
margin-right: 0.5rem; margin-right: 0.5rem;
@@ -74,7 +81,7 @@
.layout-submenu-toggler { .layout-submenu-toggler {
font-size: 75%; font-size: 75%;
margin-left: auto; margin-left: auto;
transition: transform $transitionDuration; transition: transform var(--element-transition-duration);
} }
&.active-route { &.active-route {
@@ -93,7 +100,7 @@
ul { ul {
overflow: hidden; overflow: hidden;
border-radius: $borderRadius; border-radius: var(--content-border-radius);
li { li {
a { a {

18
src/assets/layout/_mixins.scss
View File

@@ -1,13 +1,15 @@
@mixin focused() { @mixin focused() {
outline: 0 none; outline-width: var(--focus-ring-width);
outline-offset: 0; outline-style: var(--focus-ring-style);
transition: box-shadow .2s; outline-color: var(--focus-ring-color);
box-shadow: var(--focus-ring); outline-offset: var(--focus-ring-offset);
box-shadow: var(--focus-ring-shadow);
transition:
box-shadow var(--transition-duration),
outline-color var(--transition-duration);
} }
@mixin focused-inset() { @mixin focused-inset() {
outline: 0 none; outline-offset: -1px;
outline-offset: 0; box-shadow: inset var(--focus-ring-shadow);
transition: box-shadow .2s;
box-shadow: inset var(--focus-ring);
} }

6
src/assets/layout/_responsive.scss
View File

@@ -1,10 +1,10 @@
@media screen and (min-width: 1960px) { @media screen and (min-width: 1960px) {
.layout-main, .landing-wrapper { .layout-main,
.landing-wrapper {
width: 1504px; width: 1504px;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@@ -93,7 +93,7 @@
.layout-mask { .layout-mask {
display: block; display: block;
animation: fadein $transitionDuration; animation: fadein var(--layout-section-transition-duration);
} }
} }
} }

38
src/assets/layout/_topbar.scss
View File

@@ -7,15 +7,18 @@
width: 100%; width: 100%;
padding: 0 2rem; padding: 0 2rem;
background-color: var(--surface-card); background-color: var(--surface-card);
transition: left $transitionDuration; transition: left var(--layout-section-transition-duration);
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
.layout-topbar-logo { .layout-topbar-logo {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--surface-900); color: var(--text-color);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 500; font-weight: 500;
width: 300px; width: 300px;
@@ -23,7 +26,7 @@
img { img {
height: 2.5rem; height: 2.5rem;
margin-right: .5rem; margin-right: 0.5rem;
} }
&:focus { &:focus {
@@ -41,7 +44,7 @@
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
cursor: pointer; cursor: pointer;
transition: background-color $transitionDuration; transition: background-color var(--element-transition-duration);
&:hover { &:hover {
color: var(--text-color); color: var(--text-color);
@@ -111,7 +114,10 @@
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
background-color: var(--surface-overlay); background-color: var(--surface-overlay);
box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
border-radius: 12px; border-radius: 12px;
padding: 1rem; padding: 1rem;
right: 2rem; right: 2rem;
@@ -122,7 +128,7 @@
animation: scalein 0.15s linear; animation: scalein 0.15s linear;
&.layout-topbar-menu-mobile-active { &.layout-topbar-menu-mobile-active {
display: block display: block;
} }
.layout-topbar-button { .layout-topbar-button {
@@ -136,7 +142,7 @@
i { i {
font-size: 1rem; font-size: 1rem;
margin-right: .5rem; margin-right: 0.5rem;
} }
span { span {
@@ -153,12 +159,14 @@
top: calc(100% + 2px); top: calc(100% + 2px);
right: 0; right: 0;
width: 16rem; width: 16rem;
padding: .75rem; padding: 0.75rem;
background-color: var(--overlay-background); background-color: var(--surface-overlay);
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--border-color); border: 1px solid var(--surface-border);
transform-origin: top; transform-origin: top;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
.config-panel-content { .config-panel-content {
display: flex; display: flex;
@@ -167,7 +175,7 @@
} }
.config-panel-label { .config-panel-label {
font-size: .875rem; font-size: 0.875rem;
color: var(--text-secondary-color); color: var(--text-secondary-color);
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
@@ -175,9 +183,9 @@
.config-panel-colors { .config-panel-colors {
> div { > div {
padding-top: .5rem; padding-top: 0.5rem;
display: flex; display: flex;
gap: .5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;

21
src/assets/layout/_typography.scss
View File

@@ -1,9 +1,14 @@
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1.5rem 0 1rem 0; margin: 1.5rem 0 1rem 0;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 700;
line-height: 1.2; line-height: 1.5;
color: var(--surface-900); color: var(--text-color);
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@@ -35,16 +40,16 @@ h6 {
} }
mark { mark {
background: #FFF8E1; background: #fff8e1;
padding: .25rem .4rem; padding: 0.25rem 0.4rem;
border-radius: $borderRadius; border-radius: var(--content-border-radius);
font-family: monospace; font-family: monospace;
} }
blockquote { blockquote {
margin: 1rem 0; margin: 1rem 0;
padding: 0 2rem; padding: 0 2rem;
border-left: 4px solid #90A4AE; border-left: 4px solid #90a4ae;
} }
hr { hr {

5
src/assets/layout/_utils.scss
View File

@@ -1,17 +1,16 @@
/* Utils */ /* Utils */
.clearfix:after { .clearfix:after {
content: " "; content: ' ';
display: block; display: block;
clear: both; clear: both;
} }
.card { .card {
background: var(--surface-card); background: var(--surface-card);
border: 1px solid var(--surface-border);
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
border-radius: $borderRadius; border-radius: var(--content-border-radius);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

4
src/assets/layout/_variables.scss
View File

@@ -1,4 +0,0 @@
/* General */
$scale:14px; /* main font size */
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */

4
src/assets/layout/layout.scss
View File

@@ -1,4 +1,6 @@
@import './_variables'; @import './variables/_common';
@import './variables/_light';
@import './variables/_dark';
@import './_mixins'; @import './_mixins';
@import './_preloading'; @import './_preloading';
@import './_main'; @import './_main';

21
src/assets/layout/variables/_common.scss Normal file
View File

@@ -0,0 +1,21 @@
:root {
--primary-color: var(--p-primary-color);
--primary-contrast-color: var(--p-primary-contrast-color);
--text-color: var(--p-text-color);
--text-color-secondary: var(--p-text-muted-color);
--surface-border: var(--p-content-border-color);
--surface-card: var(--p-content-background);
--surface-hover: var(--p-content-hover-background);
--surface-overlay: var(--p-overlay-popover-background);
--transition-duration: var(--p-transition-duration);
--maskbg: var(--p-mask-background);
--card-shadow: var(--p-card-shadow);
--content-border-radius: var(--p-content-border-radius);
--layout-section-transition-duration: 0.2s;
--element-transition-duration: var(--p-transition-duration);
--focus-ring-width: var(--p-focus-ring-width);
--focus-ring-style: var(--p-focus-ring-style);
--focus-ring-color: var(--p-focus-ring-color);
--focus-ring-offset: var(--p-focus-ring-offset);
--focus-ring-shadow: var(--p-focus-ring-shadow);
}

3
src/assets/layout/variables/_dark.scss Normal file
View File

@@ -0,0 +1,3 @@
:root[class*='app-dark'] {
--surface-ground: var(--p-surface-950);
}

3
src/assets/layout/variables/_light.scss Normal file
View File

@@ -0,0 +1,3 @@
:root {
--surface-ground: var(--p-surface-50);
}

6
src/layout/AppConfigurator.vue
View File

@@ -221,10 +221,10 @@ function applyTheme(type, color) {
function onPresetChange(value) { function onPresetChange(value) {
setPreset(value); setPreset(value);
const preset = presetOptions[value]; const presetValue = presets[value];
const surfacePalette = surfaces.value.find((s) => s.name === selectedSurfaceColor.value)?.palette; const surfacePalette = surfaces.value.find((s) => s.name === selectedSurfaceColor.value)?.palette;
$t().preset(preset).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
} }
const selectedPrimaryColor = computed(() => { const selectedPrimaryColor = computed(() => {
@@ -236,7 +236,7 @@ const selectedSurfaceColor = computed(() => {
}); });
const preset = computed(() => { const preset = computed(() => {
return layoutConfig.preset; return layoutConfig.preset.value;
}); });
</script> </script>

2
src/layout/AppMenu.vue
View File

@@ -178,7 +178,7 @@ const model = ref([
</template> </template>
<li> <li>
<a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank"> <a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
<img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" /> <img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-4" />
</a> </a>
</li> </li>
</ul> </ul>

2
src/layout/AppTopbar.vue
View File

@@ -88,7 +88,7 @@ const isOutsideClicked = (event) => {
<button type="button" class="p-link layout-topbar-button" @click="toggleDarkMode"> <button type="button" class="p-link layout-topbar-button" @click="toggleDarkMode">
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i> <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
</button> </button>
<div> <div class="relative">
<button <button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }" v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button" class="p-link layout-topbar-button"> type="button" class="p-link layout-topbar-button">

4
src/main.js
View File

@@ -18,7 +18,9 @@ app.use(router);
app.use(PrimeVue, { app.use(PrimeVue, {
theme: { theme: {
preset: Aura, preset: Aura,
darkModeSelector: 'app-dark' options: {
darkModeSelector: '.app-dark'
}
} }
}); });
app.use(ToastService); app.use(ToastService);

176
src/views/Dashboard.vue
View File

@@ -115,73 +115,73 @@ watch(
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Orders</span> <span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<div class="text-900 font-medium text-xl">152</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" <div class="flex items-center justify-center bg-blue-100 rounded-border"
style="width: 2.5rem; height: 2.5rem"> style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i> <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">24 new </span> <span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span> <span class="text-surface-500 dark:text-surface-300">since last visit</span>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Revenue</span> <span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<div class="text-900 font-medium text-xl">$2.100</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" <div class="flex items-center justify-center bg-orange-100 rounded-border"
style="width: 2.5rem; height: 2.5rem"> style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i> <i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">%52+ </span> <span class="text-green-500 font-medium">%52+ </span>
<span class="text-500">since last week</span> <span class="text-surface-500 dark:text-surface-300">since last week</span>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Customers</span> <span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<div class="text-900 font-medium text-xl">28441</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" <div class="flex items-center justify-center bg-cyan-100 rounded-border"
style="width: 2.5rem; height: 2.5rem"> style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i> <i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">520 </span> <span class="text-green-500 font-medium">520 </span>
<span class="text-500">newly registered</span> <span class="text-surface-500 dark:text-surface-300">newly registered</span>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0"> <div class="card mb-0">
<div class="flex justify-content-between mb-3"> <div class="flex justify-between mb-4">
<div> <div>
<span class="block text-500 font-medium mb-3">Comments</span> <span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<div class="text-900 font-medium text-xl">152 Unread</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div> </div>
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" <div class="flex items-center justify-center bg-purple-100 rounded-border"
style="width: 2.5rem; height: 2.5rem"> style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i> <i class="pi pi-comment text-purple-500 text-xl"></i>
</div> </div>
</div> </div>
<span class="text-green-500 font-medium">85 </span> <span class="text-green-500 font-medium">85 </span>
<span class="text-500">responded</span> <span class="text-surface-500 dark:text-surface-300">responded</span>
</div> </div>
</div> </div>
<div class="col-12 xl:col-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<h5>Recent Sales</h5> <h5>Recent Sales</h5>
<DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll"> <DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
@@ -189,7 +189,7 @@ watch(
<template #header> Image </template> <template #header> Image </template>
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
width="50" class="shadow-2" /> width="50" class="shadow" />
</template> </template>
</Column> </Column>
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column> <Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
@@ -207,7 +207,7 @@ watch(
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-content-between align-items-center mb-5"> <div class="flex justify-between items-center mb-8">
<h5>Best Selling Products</h5> <h5>Best Selling Products</h5>
<div> <div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded"
@@ -216,88 +216,88 @@ watch(
</div> </div>
</div> </div>
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"> <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div> <div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span> <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
<div class="mt-1 text-600">Clothing</div> <div class="mt-1 text-surface-600 dark:text-surface-200">Clothing</div>
</div> </div>
<div class="mt-2 md:mt-0 flex align-items-center"> <div class="mt-2 md:mt-0 flex items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px"> <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-orange-500 h-full" style="width: 50%"></div> <div class="bg-orange-500 h-full" style="width: 50%"></div>
</div> </div>
<span class="text-orange-500 ml-3 font-medium">%50</span> <span class="text-orange-500 ml-4 font-medium">%50</span>
</div> </div>
</li> </li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"> <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div> <div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span> <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
<div class="mt-1 text-600">Accessories</div> <div class="mt-1 text-surface-600 dark:text-surface-200">Accessories</div>
</div> </div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"> <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px"> <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-cyan-500 h-full" style="width: 16%"></div> <div class="bg-cyan-500 h-full" style="width: 16%"></div>
</div> </div>
<span class="text-cyan-500 ml-3 font-medium">%16</span> <span class="text-cyan-500 ml-4 font-medium">%16</span>
</div> </div>
</li> </li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"> <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div> <div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span> <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
<div class="mt-1 text-600">Accessories</div> <div class="mt-1 text-surface-600 dark:text-surface-200">Accessories</div>
</div> </div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"> <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px"> <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-pink-500 h-full" style="width: 67%"></div> <div class="bg-pink-500 h-full" style="width: 67%"></div>
</div> </div>
<span class="text-pink-500 ml-3 font-medium">%67</span> <span class="text-pink-500 ml-4 font-medium">%67</span>
</div> </div>
</li> </li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"> <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div> <div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span> <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
<div class="mt-1 text-600">Office</div> <div class="mt-1 text-surface-600 dark:text-surface-200">Office</div>
</div> </div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"> <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px"> <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-green-500 h-full" style="width: 35%"></div> <div class="bg-green-500 h-full" style="width: 35%"></div>
</div> </div>
<span class="text-green-500 ml-3 font-medium">%35</span> <span class="text-green-500 ml-4 font-medium">%35</span>
</div> </div>
</li> </li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"> <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div> <div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span> <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
<div class="mt-1 text-600">Accessories</div> <div class="mt-1 text-surface-600 dark:text-surface-200">Accessories</div>
</div> </div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"> <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px"> <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-purple-500 h-full" style="width: 75%"></div> <div class="bg-purple-500 h-full" style="width: 75%"></div>
</div> </div>
<span class="text-purple-500 ml-3 font-medium">%75</span> <span class="text-purple-500 ml-4 font-medium">%75</span>
</div> </div>
</li> </li>
<li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"> <li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div> <div>
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span> <span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
<div class="mt-1 text-600">Clothing</div> <div class="mt-1 text-surface-600 dark:text-surface-200">Clothing</div>
</div> </div>
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"> <div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px"> <div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-teal-500 h-full" style="width: 40%"></div> <div class="bg-teal-500 h-full" style="width: 40%"></div>
</div> </div>
<span class="text-teal-500 ml-3 font-medium">%40</span> <span class="text-teal-500 ml-4 font-medium">%40</span>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-12 xl:col-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<h5>Sales Overview</h5> <h5>Sales Overview</h5>
<Chart type="line" :data="lineData" :options="lineOptions" /> <Chart type="line" :data="lineData" :options="lineOptions" />
</div> </div>
<div class="card"> <div class="card">
<div class="flex align-items-center justify-content-between mb-4"> <div class="flex items-center justify-between mb-6">
<h5>Notifications</h5> <h5>Notifications</h5>
<div> <div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded"
@@ -306,60 +306,60 @@ watch(
</div> </div>
</div> </div>
<span class="block text-600 font-medium mb-3">TODAY</span> <span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">TODAY</span>
<ul class="p-0 mx-0 mt-0 mb-4 list-none"> <ul class="p-0 mx-0 mt-0 mb-6 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border"> <li class="flex items-center py-2 border-b border-surface">
<div <div
class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0"> 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> </div>
<span class="text-900 line-height-3">Richard Jones <span class="text-surface-900 dark:text-surface-0 leading-normal">Richard Jones
<span class="text-700">has purchased a blue t-shirt for <span <span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span
class="text-blue-500">79$</span></span> class="text-blue-500">79$</span></span>
</span> </span>
</li> </li>
<li class="flex align-items-center py-2"> <li class="flex items-center py-2">
<div <div
class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0"> 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> </div>
<span class="text-700 line-height-3">Your request for withdrawal of <span <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> class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
</li> </li>
</ul> </ul>
<span class="block text-600 font-medium mb-3">YESTERDAY</span> <span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">YESTERDAY</span>
<ul class="p-0 m-0 list-none"> <ul class="p-0 m-0 list-none">
<li class="flex align-items-center py-2 border-bottom-1 surface-border"> <li class="flex items-center py-2 border-b border-surface">
<div <div
class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0"> 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> </div>
<span class="text-900 line-height-3">Keyser Wick <span class="text-surface-900 dark:text-surface-0 leading-normal">Keyser Wick
<span class="text-700">has purchased a black jacket for <span <span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span
class="text-blue-500">59$</span></span> class="text-blue-500">59$</span></span>
</span> </span>
</li> </li>
<li class="flex align-items-center py-2 border-bottom-1 surface-border"> <li class="flex items-center py-2 border-b border-surface">
<div <div
class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0"> 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> </div>
<span class="text-900 line-height-3">Jane Davis <span class="text-surface-900 dark:text-surface-0 leading-normal">Jane Davis
<span class="text-700">has posted a new questions about your product.</span> <span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3" <div class="px-6 py-8 shadow flex flex-col md:flex-row md:items-center justify-between mb-4"
style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1c80cf 47.88%, #ffffff 100.01%)"> style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1c80cf 47.88%, #ffffff 100.01%)">
<div> <div>
<div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div> <div class="text-blue-100 font-medium text-xl mt-2 mb-4">TAKE THE NEXT STEP</div>
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div> <div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
</div> </div>
<div class="mt-4 mr-auto md:mt-0 md:mr-0"> <div class="mt-6 mr-auto md:mt-0 md:mr-0">
<a href="https://www.primefaces.org/primeblocks-vue" <a href="https://www.primefaces.org/primeblocks-vue"
class="p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised"> Get class="p-button font-bold px-8 py-4 p-button-warning p-button-rounded p-button-raised"> Get
Started </a> Started </a>
</div> </div>
</div> </div>

36
src/views/pages/Crud.vue
View File

@@ -136,10 +136,10 @@ const initFilters = () => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<Toolbar class="mb-4"> <Toolbar class="mb-6">
<template v-slot:start> <template v-slot:start>
<div class="my-2"> <div class="my-2">
<Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" /> <Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
@@ -161,7 +161,7 @@ const initFilters = () => {
:rowsPerPageOptions="[5, 10, 25]" :rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"> currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
<template #header> <template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center"> <div class="flex flex-col md:flex-row md:justify-between md:items-center">
<h5 class="m-0">Manage Products</h5> <h5 class="m-0">Manage Products</h5>
<IconField iconPosition="left" class="block mt-2 md:mt-0"> <IconField iconPosition="left" class="block mt-2 md:mt-0">
<InputIcon class="pi pi-search" /> <InputIcon class="pi pi-search" />
@@ -188,7 +188,7 @@ const initFilters = () => {
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Image</span> <span class="p-column-title">Image</span>
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
class="shadow-2" width="100" /> class="shadow" width="100" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;"> <Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
@@ -231,7 +231,7 @@ const initFilters = () => {
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details"
:modal="true" class="p-fluid"> :modal="true" class="p-fluid">
<img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image" <img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image"
width="150" class="mt-0 mx-auto mb-5 block shadow-2" /> width="150" class="mt-0 mx-auto mb-8 block shadow" />
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus <InputText id="name" v-model.trim="product.name" required="true" autofocus
@@ -244,7 +244,7 @@ const initFilters = () => {
</div> </div>
<div class="field"> <div class="field">
<label for="inventoryStatus" class="mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-4">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" <Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses"
optionLabel="label" placeholder="Select a Status"> optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
@@ -264,24 +264,24 @@ const initFilters = () => {
</div> </div>
<div class="field"> <div class="field">
<label class="mb-3">Category</label> <label class="mb-4">Category</label>
<div class="formgrid grid"> <div class="formgrid grid grid-cols-12 gap-4">
<div class="field-radiobutton col-6"> <div class="field-radiobutton col-span-6">
<RadioButton id="category1" name="category" value="Accessories" <RadioButton id="category1" name="category" value="Accessories"
v-model="product.category" /> v-model="product.category" />
<label for="category1">Accessories</label> <label for="category1">Accessories</label>
</div> </div>
<div class="field-radiobutton col-6"> <div class="field-radiobutton col-span-6">
<RadioButton id="category2" name="category" value="Clothing" <RadioButton id="category2" name="category" value="Clothing"
v-model="product.category" /> v-model="product.category" />
<label for="category2">Clothing</label> <label for="category2">Clothing</label>
</div> </div>
<div class="field-radiobutton col-6"> <div class="field-radiobutton col-span-6">
<RadioButton id="category3" name="category" value="Electronics" <RadioButton id="category3" name="category" value="Electronics"
v-model="product.category" /> v-model="product.category" />
<label for="category3">Electronics</label> <label for="category3">Electronics</label>
</div> </div>
<div class="field-radiobutton col-6"> <div class="field-radiobutton col-span-6">
<RadioButton id="category4" name="category" value="Fitness" <RadioButton id="category4" name="category" value="Fitness"
v-model="product.category" /> v-model="product.category" />
<label for="category4">Fitness</label> <label for="category4">Fitness</label>
@@ -289,7 +289,7 @@ const initFilters = () => {
</div> </div>
</div> </div>
<div class="formgrid grid"> <div class="formgrid grid grid-cols-12 gap-4">
<div class="field col"> <div class="field col">
<label for="price">Price</label> <label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" <InputNumber id="price" v-model="product.price" mode="currency" currency="USD"
@@ -309,8 +309,8 @@ const initFilters = () => {
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true"> :modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{ product.name }}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{ product.name }}</b>?</span>
</div> </div>
<template #footer> <template #footer>
@@ -321,8 +321,8 @@ const initFilters = () => {
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true"> :modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>

332
src/views/pages/Landing.vue
View File

@@ -16,367 +16,367 @@ const logoUrl = computed(() => {
</script> </script>
<template> <template>
<div class="surface-0 flex justify-content-center"> <div class="bg-surface-0 dark:bg-surface-900 flex justify-center">
<div id="home" class="landing-wrapper overflow-hidden"> <div id="home" class="landing-wrapper overflow-hidden">
<div <div
class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3"> class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static mb-4">
<a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" <a class="flex items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
class="mr-0 lg:mr-2" /><span class="mr-0 lg:mr-2" /><span
class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a> class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> </a>
<a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple <a class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple" v-ripple
v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"> v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
<i class="pi pi-bars text-4xl"></i> <i class="pi pi-bars text-4xl"></i>
</a> </a>
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20"
style="top: 120px"> style="top: 120px">
<ul <ul
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer"> class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
<li> <li>
<a @click="smoothScroll('#hero')" <a @click="smoothScroll('#hero')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple> class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Home</span> <span>Home</span>
</a> </a>
</li> </li>
<li> <li>
<a @click="smoothScroll('#features')" <a @click="smoothScroll('#features')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple> class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Features</span> <span>Features</span>
</a> </a>
</li> </li>
<li> <li>
<a @click="smoothScroll('#highlights')" <a @click="smoothScroll('#highlights')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple> class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Highlights</span> <span>Highlights</span>
</a> </a>
</li> </li>
<li> <li>
<a @click="smoothScroll('#pricing')" <a @click="smoothScroll('#pricing')"
class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple> class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
<span>Pricing</span> <span>Pricing</span>
</a> </a>
</li> </li>
</ul> </ul>
<div <div
class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0"> class="flex justify-between lg:block border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0">
<Button label="Login" <Button label="Login"
class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button> class="p-button-text p-button-rounded border-0 font-light leading-tight text-blue-500"></Button>
<Button label="Register" <Button label="Register"
class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button> class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
</div> </div>
</div> </div>
</div> </div>
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden" <div id="hero" class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"> style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)">
<div class="mx-4 md:mx-8 mt-0 md:mt-4"> <div class="mx-6 md:mx-20 mt-0 md:mt-6">
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem
integer</span>eget magna fermentum</h1> integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed
cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p> cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
<Button label="Get Started" <Button label="Get Started"
class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button> class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
</div> </div>
<div class="flex justify-content-center md:justify-content-end"> <div class="flex justify-center md:justify-end">
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" /> <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
</div> </div>
</div> </div>
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8"> <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
<div class="grid justify-content-center"> <div class="grid grid-cols-12 gap-4 justify-center">
<div class="col-12 text-center mt-8 mb-4"> <div class="col-span-12 text-center mt-20 mb-6">
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2> <h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Marvelous Features</h2>
<span class="text-600 text-2xl">Placerat in egestas erat...</span> <span class="text-surface-600 dark:text-surface-200 text-2xl">Placerat in egestas erat...</span>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" <div class="flex items-center justify-center bg-yellow-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i> <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Easy to Use</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
<span class="text-600">Posuere morbi leo urna molestie.</span> <span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" <div class="flex items-center justify-center bg-cyan-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i> <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Fresh Design</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
<span class="text-600">Semper risus in hendrerit.</span> <span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-indigo-200" <div class="flex items-center justify-center bg-indigo-200"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i> <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Well Documented</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5>
<span class="text-600">Non arcu risus quis varius quam quisque.</span> <span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" <div class="flex items-center justify-center bg-slate-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i> <i class="pi pi-fw pi-id-card text-2xl text-slate-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Responsive Layout</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5>
<span class="text-600">Nulla malesuada pellentesque elit.</span> <span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" <div class="flex items-center justify-center bg-orange-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i> <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Clean Code</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5>
<span class="text-600">Condimentum lacinia quis vel eros.</span> <span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" <div class="flex items-center justify-center bg-pink-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i> <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Dark Mode</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5>
<span class="text-600">Convallis tellus id interdum velit laoreet.</span> <span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" <div class="flex items-center justify-center bg-teal-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i> <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Ready to Use</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5>
<span class="text-600">Mauris sit amet massa vitae.</span> <span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" <div class="flex items-center justify-center bg-blue-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i> <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Modern Practices</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5>
<span class="text-600">Elementum nibh tellus molestie nunc non.</span> <span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0"> <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 lg:mt-0">
<div <div
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))"> style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
<div class="p-3 surface-card h-full" style="border-radius: 8px"> <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" <div class="flex items-center justify-center bg-purple-200 mb-4"
style="width: 3.5rem; height: 3.5rem; border-radius: 10px"> style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i> <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
</div> </div>
<h5 class="mb-2 text-900">Privacy</h5> <h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5>
<span class="text-600">Neque egestas congue quisque.</span> <span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 mt-8 mb-8 p-2 md:p-8" <div class="col-span-12 mt-20 mb-20 p-2 md:p-20"
style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)"> style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
<div <div
class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0"> class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0">
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3> <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
<span class="text-gray-600 text-2xl">Peak Interactive</span> <span class="text-gray-600 text-2xl">Peak Interactive</span>
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6"
style="max-width: 800px"> style="max-width: 800px">
“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat “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 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.” officia deserunt mollit anim id est laborum.”
</p> </p>
<img src="/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" /> <img src="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8"> <div id="highlights" class="py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20">
<div class="text-center"> <div class="text-center">
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2> <h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Powerful Everywhere</h2>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span> <span class="text-surface-600 dark:text-surface-200 text-2xl">Amet consectetur adipiscing elit...</span>
</div> </div>
<div class="grid mt-8 pb-2 md:pb-8"> <div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" <div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none"
style="border-radius: 8px"> style="border-radius: 8px">
<img src="/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" /> <img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
</div> </div>
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right"> <div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right">
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end" <div class="flex items-center justify-center bg-purple-200 self-center lg:self-end"
style="width: 4.2rem; height: 4.2rem; border-radius: 10px"> style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i> <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
</div> </div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2> <h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Congue Quisque Egestas</h2>
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Lectus arcu <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px">Lectus arcu
bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna
sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span> sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
</div> </div>
</div> </div>
<div class="grid my-8 pt-2 md:pt-8"> <div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start"> <div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start">
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" <div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start"
style="width: 4.2rem; height: 4.2rem; border-radius: 10px"> style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i> <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
</div> </div>
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2> <h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Celerisque Eu Ultrices</h2>
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">Adipiscing <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px">Adipiscing
commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero.
Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
elementum nisi.</span> elementum nisi.</span>
</div> </div>
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" <div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0"
style="border-radius: 8px"> style="border-radius: 8px">
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" /> <img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
</div> </div>
</div> </div>
</div> </div>
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4"> <div id="pricing" class="py-6 px-6 lg:px-20 my-2 md:my-6">
<div class="text-center"> <div class="text-center">
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2> <h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Matchless Pricing</h2>
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span> <span class="text-surface-600 dark:text-surface-200 text-2xl">Amet consectetur adipiscing elit...</span>
</div> </div>
<div class="grid justify-content-between mt-8 md:mt-0"> <div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
<div class="col-12 lg:col-4 p-0 md:p-3"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all"
style="border-radius: 10px"> style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Free</h3> <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Free</h3>
<img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" /> <img src="/demo/images/landing/free.svg" class="w-10/12 h-10 mx-auto" alt="free" />
<div class="my-5 text-center"> <div class="my-8 text-center">
<span class="text-5xl font-bold mr-2 text-900">$0</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
<span class="text-600">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
<Button label="Get Started" <Button label="Get Started"
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button> class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
</div> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span> <span class="text-xl leading-normal">Responsive Layout</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span> <span class="text-xl leading-normal">Unlimited Push Messages</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span> <span class="text-xl leading-normal">50 Support Ticket</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span> <span class="text-xl leading-normal">Free Shipping</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all"
style="border-radius: 10px"> style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Startup</h3> <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Startup</h3>
<img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" /> <img src="/demo/images/landing/startup.svg" class="w-10/12 h-10 mx-auto" alt="startup" />
<div class="my-5 text-center"> <div class="my-8 text-center">
<span class="text-5xl font-bold mr-2 text-900">$1</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
<span class="text-600">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
<Button label="Try Free" <Button label="Try Free"
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button> class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
</div> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span> <span class="text-xl leading-normal">Responsive Layout</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span> <span class="text-xl leading-normal">Unlimited Push Messages</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span> <span class="text-xl leading-normal">50 Support Ticket</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span> <span class="text-xl leading-normal">Free Shipping</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0"> <div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" <div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all"
style="border-radius: 10px"> style="border-radius: 10px">
<h3 class="text-900 text-center my-5">Enterprise</h3> <h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Enterprise</h3>
<img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" /> <img src="/demo/images/landing/enterprise.svg" class="w-10/12 h-10 mx-auto" alt="enterprise" />
<div class="my-5 text-center"> <div class="my-8 text-center">
<span class="text-5xl font-bold mr-2 text-900">$999</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$999</span>
<span class="text-600">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
<Button label="Get a Quote" <Button label="Get a Quote"
class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button> class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
</div> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Responsive Layout</span> <span class="text-xl leading-normal">Responsive Layout</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Unlimited Push Messages</span> <span class="text-xl leading-normal">Unlimited Push Messages</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">50 Support Ticket</span> <span class="text-xl leading-normal">50 Support Ticket</span>
</li> </li>
<li class="py-2"> <li class="py-2">
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i> <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
<span class="text-xl line-height-3">Free Shipping</span> <span class="text-xl leading-normal">Free Shipping</span>
</li> </li>
</ul> </ul>
</div> </div>
@@ -384,49 +384,49 @@ const logoUrl = computed(() => {
</div> </div>
</div> </div>
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8"> <div class="py-6 px-6 mx-0 mt-20 lg:mx-20">
<div class="grid justify-content-between"> <div class="grid grid-cols-12 gap-4 justify-between">
<div class="col-12 md:col-2" style="margin-top: -1.5rem"> <div class="col-span-12 md:col-span-2" style="margin-top: -1.5rem">
<a @click="smoothScroll('#home')" <a @click="smoothScroll('#home')"
class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer"> class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
<img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" /> <img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
<h4 class="font-medium text-3xl text-900">SAKAI</h4> <h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
</a> </a>
</div> </div>
<div class="col-12 md:col-10 lg:col-7"> <div class="col-span-12 md:col-span-10 lg:col-span-7">
<div class="grid text-center md:text-left"> <div class="grid grid-cols-12 gap-4 text-center md:text-left">
<div class="col-12 md:col-3"> <div class="col-span-12 md:col-span-3">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4> <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor
Relations</a> Relations</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
</div> </div>
<div class="col-12 md:col-3 mt-4 md:mt-0"> <div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4> <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Resources</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a>
</div> </div>
<div class="col-12 md:col-3 mt-4 md:mt-0"> <div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4> <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img
src="/demo/images/landing/new-badge.svg" class="ml-2" /></a> src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
</div> </div>
<div class="col-12 md:col-3 mt-4 md:mt-0"> <div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4> <h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Legal</h4>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a>
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a> <a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a>
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a> <a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>
</div> </div>
</div> </div>
</div> </div>

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

@@ -2,44 +2,44 @@
<template> <template>
<div <div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> 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-column align-items-center justify-content-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" /> <img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div <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%)"> style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" <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"> style="border-radius: 53px">
<span class="text-blue-500 font-bold text-3xl">404</span> <span class="text-blue-500 font-bold text-3xl">404</span>
<h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
<div class="text-600 mb-5">Requested resource is not available.</div> <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1"> <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-content-center align-items-center bg-cyan-400 border-round" <span class="flex justify-center items-center bg-cyan-400 rounded-border"
style="height: 3.5rem; width: 3.5rem"> style="height: 3.5rem; width: 3.5rem">
<i class="text-50 pi pi-fw pi-table text-2xl"></i> <i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i>
</span> </span>
<span class="ml-4 flex flex-column"> <span class="ml-6 flex flex-col">
<span class="text-900 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
<span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span> <span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
</span> </span>
</router-link> </router-link>
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1"> <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
<span class="flex justify-content-center align-items-center bg-orange-400 border-round" <span class="flex justify-center items-center bg-orange-400 rounded-border"
style="height: 3.5rem; width: 3.5rem"> style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i> <i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
</span> </span>
<span class="ml-4 flex flex-column"> <span class="ml-6 flex flex-col">
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span> <span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
</span> </span>
</router-link> </router-link>
<router-link to="/" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1"> <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-content-center align-items-center bg-indigo-400 border-round" <span class="flex justify-center items-center bg-indigo-400 rounded-border"
style="height: 3.5rem; width: 3.5rem"> style="height: 3.5rem; width: 3.5rem">
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i> <i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
</span> </span>
<span class="ml-4 flex flex-column"> <span class="ml-6 flex flex-col">
<span class="text-900 lg:text-xl font-medium mb-0">Permission Manager</span> <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
<span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span> <span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
</span> </span>
</router-link> </router-link>
</div> </div>

16
src/views/pages/Timeline.vue
View File

@@ -33,8 +33,8 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Left Align</h5> <h5>Left Align</h5>
<Timeline :value="customEvents"> <Timeline :value="customEvents">
@@ -44,7 +44,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</Timeline> </Timeline>
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Right Align</h5> <h5>Right Align</h5>
<Timeline :value="customEvents" align="right"> <Timeline :value="customEvents" align="right">
@@ -54,7 +54,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</Timeline> </Timeline>
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Alternate Align</h5> <h5>Alternate Align</h5>
<Timeline :value="customEvents" align="alternate"> <Timeline :value="customEvents" align="alternate">
@@ -64,7 +64,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</Timeline> </Timeline>
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-span-6">
<div class="card"> <div class="card">
<h5>Opposite Content</h5> <h5>Opposite Content</h5>
<Timeline :value="customEvents"> <Timeline :value="customEvents">
@@ -82,7 +82,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
<h5>Custom Timeline</h5> <h5>Custom Timeline</h5>
<Timeline :value="customEvents" align="alternate" class="customized-timeline"> <Timeline :value="customEvents" align="alternate" class="customized-timeline">
<template #marker="slotProps"> <template #marker="slotProps">
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-2" :style="{ backgroundColor: slotProps.item.color }"> <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i> <i :class="slotProps.item.icon"></i>
</span> </span>
</template> </template>
@@ -95,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
{{ slotProps.item.date }} {{ slotProps.item.date }}
</template> </template>
<template #content> <template #content>
<img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" /> <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow mb-4" />
<p> <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 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! neque quas!
@@ -106,7 +106,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</template> </template>
</Timeline> </Timeline>
</div> </div>
<div class="card mt-3"> <div class="card mt-4">
<h5>Horizontal</h5> <h5>Horizontal</h5>
<h6>Top Align</h6> <h6>Top Align</h6>
<Timeline :value="horizontalEvents" layout="horizontal" align="top"> <Timeline :value="horizontalEvents" layout="horizontal" align="top">

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

@@ -2,23 +2,23 @@
<template> <template>
<div <div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> 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-column align-items-center justify-content-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" /> <img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div <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%)"> 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 surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" <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"> style="border-radius: 53px">
<div class="grid flex flex-column align-items-center"> <div class="grid grid-cols-12 gap-4 flex flex-col items-center">
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle" <div class="flex justify-center items-center bg-orange-500 rounded-full"
style="width: 3.2rem; height: 3.2rem"> style="width: 3.2rem; height: 3.2rem">
<i class="text-50 pi pi-fw pi-lock text-2xl"></i> <i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-lock text-2xl"></i>
</div> </div>
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
<span class="text-600 mb-5">You do not have the necessary permisions. Please contact <span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact
admins.</span> admins.</span>
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%" /> <img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
<div class="col-12 mt-5 text-center"> <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> <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> <router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
</div> </div>

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

@@ -2,22 +2,22 @@
<template> <template>
<div <div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> 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-column align-items-center justify-content-center"> <div class="flex flex-col items-center justify-center">
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" /> <img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div <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%)"> 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 surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" <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"> style="border-radius: 53px">
<div class="grid flex flex-column align-items-center"> <div class="grid grid-cols-12 gap-4 flex flex-col items-center">
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle" <div class="flex justify-center items-center bg-pink-500 rounded-full"
style="height: 3.2rem; width: 3.2rem"> style="height: 3.2rem; width: 3.2rem">
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i> <i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
</div> </div>
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1> <h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
<span class="text-600 mb-5">Requested resource is not available.</span> <span class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</span>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%" /> <img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<div class="col-12 mt-5 text-center"> <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> <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> <router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
</div> </div>

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

@@ -14,36 +14,36 @@ const logoUrl = computed(() => {
<template> <template>
<div <div
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"> 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-column align-items-center justify-content-center"> <div class="flex flex-col items-center justify-center">
<img :src="logoUrl" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" /> <img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
<div <div
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)"> 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 surface-card py-8 px-5 sm:px-8" style="border-radius: 53px"> <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-5"> <div class="text-center mb-8">
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3" /> <img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div> <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div>
<span class="text-600 font-medium">Sign in to continue</span> <span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span>
</div> </div>
<div> <div>
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label> <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-5" <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8"
style="padding: 1rem" v-model="email" /> style="padding: 1rem" v-model="email" />
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label> <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" <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
class="w-full mb-3" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password> class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
<div class="flex align-items-center justify-content-between mb-5 gap-5"> <div class="flex items-center justify-between mb-8 gap-8">
<div class="flex align-items-center"> <div class="flex items-center">
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox> <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
<label for="rememberme1">Remember me</label> <label for="rememberme1">Remember me</label>
</div> </div>
<a class="font-medium no-underline ml-2 text-right cursor-pointer" <a class="font-medium no-underline ml-2 text-right cursor-pointer"
style="color: var(--primary-color)">Forgot password?</a> style="color: var(--primary-color)">Forgot password?</a>
</div> </div>
<Button label="Sign In" class="w-full p-3 text-xl"></Button> <Button label="Sign In" class="w-full p-4 text-xl"></Button>
</div> </div>
</div> </div>
</div> </div>

6
src/views/uikit/Button.vue
View File

@@ -28,8 +28,8 @@ const load = (index) => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>Default</h5> <h5>Default</h5>
<Button label="Submit" class="mr-2 mb-2"></Button> <Button label="Submit" class="mr-2 mb-2"></Button>
@@ -108,7 +108,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>Icons</h5> <h5>Icons</h5>
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button> <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>

22
src/views/uikit/Chart.vue
View File

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

4
src/views/uikit/File.vue
View File

@@ -9,8 +9,8 @@ const onUpload = () => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload /> <FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />

22
src/views/uikit/FloatLabel.vue
View File

@@ -44,44 +44,44 @@ const searchCountry = (event) => {
<template> <template>
<div class="card"> <div class="card">
<h5>Float Label</h5> <h5>Float Label</h5>
<div class="grid p-fluid mt-3"> <div class="grid grid-cols-12 gap-4 p-fluid mt-4">
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<InputText type="text" id="inputtext" v-model="value1" /> <InputText type="text" id="inputtext" v-model="value1" />
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete> <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete>
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<Calendar inputId="calendar" v-model="value3"></Calendar> <Calendar inputId="calendar" v-model="value3"></Calendar>
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<Chips inputId="chips" v-model="value4"></Chips> <Chips inputId="chips" v-model="value4"></Chips>
<label for="chips">Chips</label> <label for="chips">Chips</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask> <InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask>
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<InputNumber id="inputnumber" v-model="value6"></InputNumber> <InputNumber id="inputnumber" v-model="value6"></InputNumber>
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<InputGroup> <InputGroup>
<InputGroupAddon> <InputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@@ -92,19 +92,19 @@ const searchCountry = (event) => {
</FloatLabel> </FloatLabel>
</InputGroup> </InputGroup>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown> <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect> <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect>
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</FloatLabel> </FloatLabel>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-span-12 md:col-span-4">
<FloatLabel> <FloatLabel>
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea> <Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea>
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>

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

@@ -11,8 +11,8 @@ const dropdownItem = ref(null);
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="field"> <div class="field">
@@ -31,7 +31,7 @@ const dropdownItem = ref(null);
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Vertical Grid</h5> <h5>Vertical Grid</h5>
<div class="formgrid grid"> <div class="formgrid grid grid-cols-12 gap-4">
<div class="field col"> <div class="field col">
<label for="name2">Name</label> <label for="name2">Name</label>
<InputText id="name2" type="text" /> <InputText id="name2" type="text" />
@@ -44,18 +44,18 @@ const dropdownItem = ref(null);
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Horizontal</h5> <h5>Horizontal</h5>
<div class="field grid"> <div class="field grid grid-cols-12 gap-4">
<label for="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label> <label for="name3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-12 md:col-10"> <div class="col-span-12 md:col-span-10">
<InputText id="name3" type="text" /> <InputText id="name3" type="text" />
</div> </div>
</div> </div>
<div class="field grid"> <div class="field grid grid-cols-12 gap-4">
<label for="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label> <label for="email3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
<div class="col-12 md:col-10"> <div class="col-span-12 md:col-span-10">
<InputText id="email3" type="text" /> <InputText id="email3" type="text" />
</div> </div>
</div> </div>
@@ -86,31 +86,31 @@ const dropdownItem = ref(null);
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid formgrid grid"> <div class="p-fluid formgrid grid grid-cols-12 gap-4">
<div class="field col-12 md:col-6"> <div class="field col-span-12 md:col-span-6">
<label for="firstname2">Firstname</label> <label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" /> <InputText id="firstname2" type="text" />
</div> </div>
<div class="field col-12 md:col-6"> <div class="field col-span-12 md:col-span-6">
<label for="lastname2">Lastname</label> <label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" /> <InputText id="lastname2" type="text" />
</div> </div>
<div class="field col-12"> <div class="field col-span-12">
<label for="address">Address</label> <label for="address">Address</label>
<Textarea id="address" rows="4" /> <Textarea id="address" rows="4" />
</div> </div>
<div class="field col-12 md:col-6"> <div class="field col-span-12 md:col-span-6">
<label for="city">City</label> <label for="city">City</label>
<InputText id="city" type="text" /> <InputText id="city" type="text" />
</div> </div>
<div class="field col-12 md:col-3"> <div class="field col-span-12 md:col-span-3">
<label for="state">State</label> <label for="state">State</label>
<Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown> <Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown>
</div> </div>
<div class="field col-12 md:col-3"> <div class="field col-span-12 md:col-span-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<InputText id="zip" type="text" /> <InputText id="zip" type="text" />
</div> </div>

84
src/views/uikit/Input.vue
View File

@@ -76,31 +76,31 @@ const searchCountry = (event) => {
}; };
</script> </script>
<template> <template>
<div class="grid p-fluid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>InputText</h5> <h5>InputText</h5>
<div class="grid formgrid"> <div class="grid grid-cols-12 gap-4 formgrid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0"> <div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
<InputText type="text" placeholder="Default"></InputText> <InputText type="text" placeholder="Default" fluid></InputText>
</div> </div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0"> <div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
<InputText type="text" placeholder="Disabled" :disabled="true"></InputText> <InputText type="text" placeholder="Disabled" :disabled="true" fluid></InputText>
</div> </div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0"> <div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
<InputText type="text" placeholder="Invalid" invalid /> <InputText type="text" placeholder="Invalid" invalid fluid />
</div> </div>
</div> </div>
<h5>Icons</h5> <h5>Icons</h5>
<div class="grid formgrid"> <div class="grid grid-cols-12 gap-4 formgrid">
<div class="col-12 mb-2 lg:col-6 lg:mb-0"> <div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
<IconField> <IconField>
<InputIcon class="pi pi-user" /> <InputIcon class="pi pi-user" />
<InputText type="text" placeholder="Username" /> <InputText type="text" placeholder="Username" />
</IconField> </IconField>
</div> </div>
<div class="col-12 mb-2 lg:col-6 lg:mb-0"> <div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
<IconField iconPosition="left"> <IconField iconPosition="left">
<InputText type="text" placeholder="Search" /> <InputText type="text" placeholder="Search" />
<InputIcon class="pi pi-search" /> <InputIcon class="pi pi-search" />
@@ -118,7 +118,8 @@ const searchCountry = (event) => {
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" /> <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
<h5>AutoComplete</h5> <h5>AutoComplete</h5>
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" /> <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue"
:suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<h5>Calendar</h5> <h5>Calendar</h5>
<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar> <Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
@@ -131,21 +132,21 @@ const searchCountry = (event) => {
</div> </div>
<div class="card"> <div class="card">
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<h5>Slider</h5> <h5>Slider</h5>
<InputText v-model.number="sliderValue" /> <InputText v-model.number="sliderValue" />
<Slider v-model="sliderValue" /> <Slider v-model="sliderValue" />
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<h5>Rating</h5> <h5>Rating</h5>
<Rating v-model="ratingValue" /> <Rating v-model="ratingValue" />
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<h5>ColorPicker</h5> <h5>ColorPicker</h5>
<ColorPicker style="width: 2rem" v-model="colorValue" /> <ColorPicker style="width: 2rem" v-model="colorValue" />
</div> </div>
<div class="col-12"> <div class="col-span-12">
<h5>Knob</h5> <h5>Knob</h5>
<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" /> <Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
</div> </div>
@@ -153,23 +154,23 @@ const searchCountry = (event) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>RadioButton</h5> <h5>RadioButton</h5>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="field-radiobutton mb-0"> <div class="field-radiobutton mb-0">
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" /> <RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
<label for="option1">Chicago</label> <label for="option1">Chicago</label>
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="field-radiobutton mb-0"> <div class="field-radiobutton mb-0">
<RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" /> <RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
<label for="option2">Los Angeles</label> <label for="option2">Los Angeles</label>
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="field-radiobutton mb-0"> <div class="field-radiobutton mb-0">
<RadioButton id="option3" name="option" value="New York" v-model="radioValue" /> <RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
<label for="option3">New York</label> <label for="option3">New York</label>
@@ -178,20 +179,20 @@ const searchCountry = (event) => {
</div> </div>
<h5>Checkbox</h5> <h5>Checkbox</h5>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="field-checkbox mb-0"> <div class="field-checkbox mb-0">
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" /> <Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
<label for="checkOption1">Chicago</label> <label for="checkOption1">Chicago</label>
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="field-checkbox mb-0"> <div class="field-checkbox mb-0">
<Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" /> <Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
<label for="checkOption2">Los Angeles</label> <label for="checkOption2">Los Angeles</label>
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="field-checkbox mb-0"> <div class="field-checkbox mb-0">
<Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" /> <Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
<label for="checkOption3">New York</label> <label for="checkOption3">New York</label>
@@ -211,10 +212,13 @@ const searchCountry = (event) => {
<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" /> <Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
<h5>MultiSelect</h5> <h5>MultiSelect</h5>
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"> <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name"
placeholder="Select Countries" :filter="true">
<template #value="slotProps"> <template #value="slotProps">
<div class="inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round mr-2" v-for="option of slotProps.value" :key="option.code"> <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast text-primary rounded-border mr-2"
<span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" /> v-for="option of slotProps.value" :key="option.code">
<span :class="'mr-2 flag flag-' + option.code.toLowerCase()"
style="width: 18px; height: 12px" />
<div>{{ option.name }}</div> <div>{{ option.name }}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> <template v-if="!slotProps.value || slotProps.value.length === 0">
@@ -222,8 +226,9 @@ const searchCountry = (event) => {
</template> </template>
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center"> <div class="flex items-center">
<span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()" style="width: 18px; height: 12px" /> <span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()"
style="width: 18px; height: 12px" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>
@@ -241,15 +246,16 @@ const searchCountry = (event) => {
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" /> <SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
<h5>SelectButton - Multiple</h5> <h5>SelectButton - Multiple</h5>
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" /> <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name"
:multiple="true" />
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Input Groups</h5> <h5>Input Groups</h5>
<div class="grid p-fluid"> <div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<InputGroup> <InputGroup>
<InputGroupAddon> <InputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@@ -258,7 +264,7 @@ const searchCountry = (event) => {
</InputGroup> </InputGroup>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<InputGroup> <InputGroup>
<InputGroupAddon> <InputGroupAddon>
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
@@ -272,14 +278,14 @@ const searchCountry = (event) => {
</InputGroup> </InputGroup>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<InputGroup> <InputGroup>
<Button label="Search" /> <Button label="Search" />
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
</InputGroup> </InputGroup>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<InputGroup> <InputGroup>
<InputGroupAddon> <InputGroupAddon>
<Checkbox v-model="inputGroupValue" :binary="true" /> <Checkbox v-model="inputGroupValue" :binary="true" />

8
src/views/uikit/InvalidState.vue
View File

@@ -43,12 +43,12 @@ const searchCountry = (event) => {
</script> </script>
<template> <template>
<div class="grid p-fluid"> <div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<h5>Invalid State</h5> <h5>Invalid State</h5>
<div class="p-fluid grid"> <div class="p-fluid grid grid-cols-12 gap-4">
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="field"> <div class="field">
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
<InputText id="inputtext" type="text" v-model="value1" invalid /> <InputText id="inputtext" type="text" v-model="value1" invalid />
@@ -71,7 +71,7 @@ const searchCountry = (event) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="field"> <div class="field">
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />

72
src/views/uikit/List.vue
View File

@@ -26,7 +26,7 @@ const orderlistValue = ref([
]); ]);
const dataviewValue = ref(null); const dataviewValue = ref(null);
const layout = ref('grid'); const layout = ref('grid grid-cols-12 gap-4');
const sortKey = ref(null); const sortKey = ref(null);
const sortOrder = ref(null); const sortOrder = ref(null);
const sortField = ref(null); const sortField = ref(null);
@@ -74,48 +74,48 @@ const getSeverity = (product) => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>DataView</h5> <h5>DataView</h5>
<DataView :value="dataviewValue" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="dataviewValue" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<div class="grid grid-nogutter"> <div class="grid grid-cols-12 gap-4 grid-nogutter">
<div class="col-6 text-left"> <div class="col-span-6 text-left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" /> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</div> </div>
<div class="col-6 text-right"> <div class="col-span-6 text-right">
<DataViewLayoutOptions v-model="layout" /> <DataViewLayoutOptions v-model="layout" />
</div> </div>
</div> </div>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-cols-12 gap-4 grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }"> <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative"> <div class="md:w-40 relative">
<img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" /> <img class="block xl:block mx-auto rounded-border w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4"> <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2"> <div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary text-sm">{{ item.category }}</span> <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div> <div class="text-lg font-medium text-surface-900 dark:text-surface-0 mt-2">{{ item.name }}</div>
</div> </div>
<div class="surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 dark:bg-surface-900 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<span class="text-900 font-medium text-sm">{{ item.rating }}</span> <span class="text-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i> <i class="pi pi-star-fill text-yellow-500"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-column md:align-items-end gap-5"> <div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-900">${{ item.price }}</span> <span class="text-xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
</div> </div>
</div> </div>
</div> </div>
@@ -125,32 +125,32 @@ const getSeverity = (product) => {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-cols-12 gap-4 grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 p-2"> <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column"> <div class="p-6 border border-surface bg-surface-0 dark:bg-surface-900 rounded-border flex flex-col">
<div class="surface-50 flex justify-content-center border-round p-3"> <div class="bg-surface-50 dark:bg-surface-800 flex justify-center rounded-border p-4">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" /> <img class="rounded-border w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag> <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div> </div>
</div> </div>
<div class="pt-4"> <div class="pt-6">
<div class="flex flex-row justify-content-between align-items-start gap-2"> <div class="flex flex-row justify-between items-start gap-2">
<div> <div>
<span class="font-medium text-secondary text-sm">{{ item.category }}</span> <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div> <div class="text-lg font-medium text-surface-900 dark:text-surface-0 mt-1">{{ item.name }}</div>
</div> </div>
<div class="surface-100 p-1" style="border-radius: 30px"> <div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"> <div class="bg-surface-0 dark:bg-surface-900 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<span class="text-900 font-medium text-sm">{{ item.rating }}</span> <span class="text-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i> <i class="pi pi-star-fill text-yellow-500"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-column gap-4 mt-4"> <div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold text-900">${{ item.price }}</span> <span class="text-2xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
<div class="flex gap-2"> <div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button> <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
<Button icon="pi pi-heart" outlined></Button> <Button icon="pi pi-heart" outlined></Button>
</div> </div>
</div> </div>
@@ -163,7 +163,7 @@ const getSeverity = (product) => {
</div> </div>
</div> </div>
<div class="col-12 lg:col-8"> <div class="col-span-12 lg:col-span-8">
<div class="card"> <div class="card">
<h5>PickList</h5> <h5>PickList</h5>
<PickList v-model="picklistValue" listStyle="height:250px" dataKey="code"> <PickList v-model="picklistValue" listStyle="height:250px" dataKey="code">
@@ -176,7 +176,7 @@ const getSeverity = (product) => {
</div> </div>
</div> </div>
<div class="col-12 lg:col-4"> <div class="col-span-12 lg:col-span-4">
<div class="card"> <div class="card">
<h5>OrderList</h5> <h5>OrderList</h5>
<OrderList v-model="orderlistValue" listStyle="height:250px" dataKey="code" :rows="10"> <OrderList v-model="orderlistValue" listStyle="height:250px" dataKey="code" :rows="10">

20
src/views/uikit/Media.vue
View File

@@ -67,21 +67,21 @@ const getSeverity = (status) => {
</script> </script>
<template> <template>
<div class="grid p-fluid"> <div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Carousel</h5> <h5>Carousel</h5>
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions"> <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
<template #item="slotProps"> <template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3"> <div class="border border-surface rounded-border m-2 p-4">
<div class="mb-3"> <div class="mb-4">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded-border" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" /> <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div> </div>
</div> </div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div> <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center"> <div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div> <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span> <span>
<Button icon="pi pi-heart" severity="secondary" outlined /> <Button icon="pi pi-heart" severity="secondary" outlined />
@@ -94,16 +94,16 @@ const getSeverity = (status) => {
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<div class="flex justify-content-center"> <div class="flex justify-center">
<Image :src="'/demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview /> <Image :src="'/demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
</div> </div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Galleria</h5> <h5>Galleria</h5>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7"

20
src/views/uikit/Menu.vue
View File

@@ -440,8 +440,8 @@ const onContextRightClick = (event) => {
</script> </script>
<template> <template>
<div class="grid p-fluid"> <div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-12"> <div class="col-span-12">
<div class="card card-w-title"> <div class="card card-w-title">
<h5>Menubar</h5> <h5>Menubar</h5>
<Menubar :model="nestedMenuitems"> <Menubar :model="nestedMenuitems">
@@ -455,14 +455,14 @@ const onContextRightClick = (event) => {
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card card-w-title"> <div class="card card-w-title">
<h5>Breadcrumb</h5> <h5>Breadcrumb</h5>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" /> <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card card-w-title"> <div class="card card-w-title">
<h5>Steps</h5> <h5>Steps</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p> <p>Steps and TabMenu are integrated with the same child routes.</p>
@@ -471,7 +471,7 @@ const onContextRightClick = (event) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card card-w-title"> <div class="card card-w-title">
<h5>TabMenu</h5> <h5>TabMenu</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p> <p>Steps and TabMenu are integrated with the same child routes.</p>
@@ -480,21 +480,21 @@ const onContextRightClick = (event) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="card"> <div class="card">
<h5>Tiered Menu</h5> <h5>Tiered Menu</h5>
<TieredMenu :model="tieredMenuItems" /> <TieredMenu :model="tieredMenuItems" />
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="card"> <div class="card">
<h5>Plain Menu</h5> <h5>Plain Menu</h5>
<Menu :model="menuitems" /> <Menu :model="menuitems" />
</div> </div>
</div> </div>
<div class="col-12 md:col-4"> <div class="col-span-12 md:col-span-4">
<div class="card"> <div class="card">
<h5>Overlay Menu</h5> <h5>Overlay Menu</h5>
@@ -509,7 +509,7 @@ const onContextRightClick = (event) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>MegaMenu - Horizontal</h5> <h5>MegaMenu - Horizontal</h5>
<MegaMenu :model="megamenuItems" /> <MegaMenu :model="megamenuItems" />
@@ -519,7 +519,7 @@ const onContextRightClick = (event) => {
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>PanelMenu</h5> <h5>PanelMenu</h5>
<PanelMenu :model="panelMenuitems" /> <PanelMenu :model="panelMenuitems" />

18
src/views/uikit/Messages.vue
View File

@@ -38,8 +38,8 @@ const showError = () => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card"> <div class="card">
<h5>Toast</h5> <h5>Toast</h5>
<Button @click="showSuccess()" label="Success" class="mr-2" severity="success" /> <Button @click="showSuccess()" label="Success" class="mr-2" severity="success" />
@@ -49,7 +49,7 @@ const showError = () => {
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card"> <div class="card">
<h5>Messages</h5> <h5>Messages</h5>
<Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" /> <Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" />
@@ -63,18 +63,18 @@ const showError = () => {
</div> </div>
</div> </div>
<div class="col-12 lg:col-8"> <div class="col-span-12 lg:col-span-8">
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="field grid"> <div class="field grid grid-cols-12 gap-4">
<label for="username1" class="col-fixed w-9rem">Username</label> <label for="username1" class="col-fixed w-36">Username</label>
<div class="col"> <div class="col">
<InputText id="username1" v-model="username" :required="true" invalid class="mr-2"></InputText> <InputText id="username1" v-model="username" :required="true" invalid class="mr-2"></InputText>
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
</div> </div>
<div class="field grid"> <div class="field grid grid-cols-12 gap-4">
<label for="email" class="col-fixed w-9rem">Email</label> <label for="email" class="col-fixed w-36">Email</label>
<div class="col"> <div class="col">
<InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText> <InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText>
<InlineMessage /> <InlineMessage />
@@ -83,7 +83,7 @@ const showError = () => {
</div> </div>
</div> </div>
<div class="col-12 lg:col-4"> <div class="col-span-12 lg:col-span-4">
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="field p-fluid"> <div class="field p-fluid">

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

@@ -28,11 +28,11 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>ProgressBar</h5> <h5>ProgressBar</h5>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col"> <div class="col">
<ProgressBar :value="value"></ProgressBar> <ProgressBar :value="value"></ProgressBar>
</div> </div>
@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card"> <div class="card">
<h4>Badge</h4> <h4>Badge</h4>
<h5>Numbers</h5> <h5>Numbers</h5>
@@ -55,8 +55,8 @@ onBeforeUnmount(() => {
</div> </div>
<h5>Positioned Badge</h5> <h5>Positioned Badge</h5>
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i> <i class="pi pi-bell mr-6 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i> <i class="pi pi-calendar mr-6 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i> <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Inline Button Badge</h5> <h5>Inline Button Badge</h5>
@@ -74,7 +74,7 @@ onBeforeUnmount(() => {
<div class="card"> <div class="card">
<h4>Avatar</h4> <h4>Avatar</h4>
<h5>Avatar Group</h5> <h5>Avatar Group</h5>
<AvatarGroup class="mb-3"> <AvatarGroup class="mb-4">
<Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar> <Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar> <Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar> <Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
</ScrollPanel> </ScrollPanel>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card"> <div class="card">
<h4>Tag</h4> <h4>Tag</h4>
<h5>Tags</h5> <h5>Tags</h5>
@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
<div class="card"> <div class="card">
<h4>Chip</h4> <h4>Chip</h4>
<h5>Basic</h5> <h5>Basic</h5>
<div class="flex align-items-center flex-column sm:flex-row"> <div class="flex items-center flex-col sm:flex-row">
<Chip label="Action" class="mr-2 mb-2"></Chip> <Chip label="Action" class="mr-2 mb-2"></Chip>
<Chip label="Comedy" class="mr-2 mb-2"></Chip> <Chip label="Comedy" class="mr-2 mb-2"></Chip>
<Chip label="Mystery" class="mr-2 mb-2"></Chip> <Chip label="Mystery" class="mr-2 mb-2"></Chip>
@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
</div> </div>
<h5>Icon</h5> <h5>Icon</h5>
<div class="flex align-items-center flex-column sm:flex-row"> <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="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip> <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip> <Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip>
@@ -150,7 +150,7 @@ onBeforeUnmount(() => {
</div> </div>
<h5>Image</h5> <h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row"> <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="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> <Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip> <Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
@@ -159,8 +159,8 @@ onBeforeUnmount(() => {
<div class="card"> <div class="card">
<h4>Skeleton</h4> <h4>Skeleton</h4>
<div class="border-round border-1 surface-border p-4"> <div class="rounded-border border border-surface p-6">
<div class="flex mb-3"> <div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton> <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div> <div>
<Skeleton width="10rem" class="mb-2"></Skeleton> <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -169,7 +169,7 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
<Skeleton width="100%" height="150px"></Skeleton> <Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-between mt-3"> <div class="flex justify-between mt-4">
<Skeleton width="4rem" height="2rem"></Skeleton> <Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton> <Skeleton width="4rem" height="2rem"></Skeleton>
</div> </div>

22
src/views/uikit/Overlay.vue
View File

@@ -74,12 +74,12 @@ const confirm = (event) => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Dialog</h5> <h5>Dialog</h5>
<Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true"> <Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
<p class="line-height-3 m-0"> <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 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. 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> </p>
@@ -102,10 +102,10 @@ const confirm = (event) => {
<Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" /> <Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
<OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"> <OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"> <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
<Column field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"></Column> <Column field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"> </Column>
<Column header="Image" headerStyle="min-width:5rem;"> <Column header="Image" headerStyle="min-width:5rem;">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;"> <Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
@@ -119,13 +119,13 @@ const confirm = (event) => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Confirmation</h5> <h5>Confirmation</h5>
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" style="width: auto" @click="openConfirmation" /> <Button label="Delete" icon="pi pi-trash" class="p-button-danger" style="width: auto" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true"> <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
<div class="flex align-items-center justify-content-center"> <div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<template #footer> <template #footer>
@@ -135,7 +135,7 @@ const confirm = (event) => {
</Dialog> </Dialog>
</div> </div>
<div class="card"> <div class="card">
<h5>Sidebar</h5> <h5 class="font-bold text-xl">Sidebar</h5>
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000"> <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h1 style="font-weight: normal">Left Sidebar</h1> <h1 style="font-weight: normal">Left Sidebar</h1>
</Sidebar> </Sidebar>
@@ -163,7 +163,7 @@ const confirm = (event) => {
<Button icon="pi pi-external-link" class="p-button-warning" @click="visibleFull = true" /> <Button icon="pi pi-external-link" class="p-button-warning" @click="visibleFull = true" />
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card"> <div class="card">
<h5>Tooltip</h5> <h5>Tooltip</h5>
<div class="formgroup-inline"> <div class="formgroup-inline">
@@ -175,7 +175,7 @@ const confirm = (event) => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-span-12 lg:col-span-6">
<div class="card"> <div class="card">
<h5>ConfirmPopup</h5> <h5>ConfirmPopup</h5>
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>

54
src/views/uikit/Panels.vue
View File

@@ -32,8 +32,8 @@ const toggle = () => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Toolbar</h5> <h5>Toolbar</h5>
<Toolbar> <Toolbar>
@@ -53,25 +53,25 @@ const toggle = () => {
</Toolbar> </Toolbar>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>AccordionPanel</h5> <h5>AccordionPanel</h5>
<Accordion :activeIndex="0"> <Accordion :activeIndex="0">
<AccordionTab header="Header I"> <AccordionTab header="Header I">
<p class="line-height-3 m-0"> <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 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 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. laborum.
</p> </p>
</AccordionTab> </AccordionTab>
<AccordionTab header="Header II"> <AccordionTab header="Header II">
<p class="line-height-3 m-0"> <p class="leading-normal 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 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. 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> </p>
</AccordionTab> </AccordionTab>
<AccordionTab header="Header III"> <AccordionTab header="Header III">
<p class="line-height-3 m-0"> <p class="leading-normal 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 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. 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> </p>
@@ -82,20 +82,20 @@ const toggle = () => {
<h5>TabView</h5> <h5>TabView</h5>
<TabView> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p class="line-height-3 m-0"> <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 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 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. laborum.
</p></TabPanel </p></TabPanel
> >
<TabPanel header="Header II"> <TabPanel header="Header II">
<p class="line-height-3 m-0"> <p class="leading-normal 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 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. 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> </p>
</TabPanel> </TabPanel>
<TabPanel header="Header III"> <TabPanel header="Header III">
<p class="line-height-3 m-0"> <p class="leading-normal 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 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. 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> </p>
@@ -103,11 +103,11 @@ const toggle = () => {
</TabView> </TabView>
</div> </div>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-span-12 md:col-span-6">
<div class="card"> <div class="card">
<h5>Panel</h5> <h5>Panel</h5>
<Panel header="Header" :toggleable="true"> <Panel header="Header" :toggleable="true">
<p class="line-height-3 m-0"> <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 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. 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> </p>
@@ -116,7 +116,7 @@ const toggle = () => {
<div class="card"> <div class="card">
<h5>Fieldset</h5> <h5>Fieldset</h5>
<Fieldset legend="Legend" :toggleable="true"> <Fieldset legend="Legend" :toggleable="true">
<p class="line-height-3 m-0"> <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 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. 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> </p>
@@ -125,7 +125,7 @@ const toggle = () => {
<Card> <Card>
<template v-slot:title> <template v-slot:title>
<div class="flex align-items-center justify-content-between mb-0"> <div class="flex items-center justify-between mb-0">
<h5>Card</h5> <h5>Card</h5>
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" /> <Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
</div> </div>
@@ -133,7 +133,7 @@ const toggle = () => {
</template> </template>
<template v-slot:content> <template v-slot:content>
<p class="line-height-3 m-0"> <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 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. 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> </p>
@@ -141,11 +141,11 @@ const toggle = () => {
</Card> </Card>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Divider</h5> <h5>Divider</h5>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-5 flex align-items-center justify-content-center"> <div class="col-span-5 flex items-center justify-center">
<div class="p-fluid"> <div class="p-fluid">
<div class="field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
@@ -159,13 +159,13 @@ const toggle = () => {
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-span-2">
<Divider layout="vertical"> <Divider layout="vertical">
<b>OR</b> <b>OR</b>
</Divider> </Divider>
</div> </div>
<div class="col-5 align-items-center justify-content-center"> <div class="col-span-5 items-center justify-center">
<p class="line-height-3 m-0"> <p class="leading-normal 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 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. 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> </p>
@@ -174,7 +174,7 @@ const toggle = () => {
<span class="p-tag">Badge</span> <span class="p-tag">Badge</span>
</Divider> </Divider>
<p class="line-height-3 m-0"> <p class="leading-normal 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 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. 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> </p>
@@ -183,7 +183,7 @@ const toggle = () => {
<Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button> <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
</Divider> </Divider>
<p class="line-height-3 m-0"> <p class="leading-normal m-0">
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
</p> </p>
@@ -192,21 +192,21 @@ const toggle = () => {
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Splitter</h5> <h5>Splitter</h5>
<Splitter style="height: 300px" class="mb-5"> <Splitter style="height: 300px" class="mb-8">
<SplitterPanel :size="30" :minSize="10"> <SplitterPanel :size="30" :minSize="10">
<div className="h-full flex align-items-center justify-content-center">Panel 1</div> <div className="h-full flex items-center justify-center">Panel 1</div>
</SplitterPanel> </SplitterPanel>
<SplitterPanel :size="70"> <SplitterPanel :size="70">
<Splitter layout="vertical"> <Splitter layout="vertical">
<SplitterPanel :size="15"> <SplitterPanel :size="15">
<div className="h-full flex align-items-center justify-content-center">Panel 2</div> <div className="h-full flex items-center justify-center">Panel 2</div>
</SplitterPanel> </SplitterPanel>
<SplitterPanel :size="50"> <SplitterPanel :size="50">
<div className="h-full flex align-items-center justify-content-center">Panel 3</div> <div className="h-full flex items-center justify-center">Panel 3</div>
</SplitterPanel> </SplitterPanel>
</Splitter> </Splitter>
</SplitterPanel> </SplitterPanel>

38
src/views/uikit/Table.vue
View File

@@ -124,8 +124,8 @@ const calculateCustomerTotal = (name) => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Filter Menu</h5> <h5>Filter Menu</h5>
<DataTable :value="customer1" :paginator="true" :rows="10" dataKey="id" :rowHover="true" <DataTable :value="customer1" :paginator="true" :rows="10" dataKey="id" :rowHover="true"
@@ -133,7 +133,7 @@ const calculateCustomerTotal = (name) => {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
showGridlines> showGridlines>
<template #header> <template #header>
<div class="flex justify-content-between flex-column sm:flex-row"> <div class="flex justify-between flex-col sm:flex-row">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined
@click="clearFilter1()" /> @click="clearFilter1()" />
<IconField iconPosition="left"> <IconField iconPosition="left">
@@ -156,7 +156,7 @@ const calculateCustomerTotal = (name) => {
</Column> </Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem"> <Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" <img alt="flag" src="/demo/images/flag/flag_placeholder.png"
:class="`flag flag-${data.country.code}`" style="width: 24px" /> :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span> <span>{{ data.country.name }}</span>
@@ -178,7 +178,7 @@ const calculateCustomerTotal = (name) => {
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" <Column header="Agent" filterField="representative" :showFilterMatchModes="false"
:filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem"> :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img :alt="data.representative.name" <img :alt="data.representative.name"
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
style="width: 32px" /> style="width: 32px" />
@@ -186,7 +186,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<div class="mb-3 text-bold">Agent Picker</div> <div class="mb-4 text-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name"
placeholder="Any" class="p-column-filter"> placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
@@ -242,8 +242,8 @@ const calculateCustomerTotal = (name) => {
<ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar> <ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<Slider v-model="filterModel.value" :range="true" class="m-3"></Slider> <Slider v-model="filterModel.value" :range="true" class="m-4"></Slider>
<div class="flex align-items-center justify-content-between px-2"> <div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span> <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span> <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div> </div>
@@ -263,19 +263,19 @@ const calculateCustomerTotal = (name) => {
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" <ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id"
offLabel="Freeze Id" style="width: 10rem" /> offLabel="Freeze Id" style="width: 10rem" />
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" <DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2"
scrollDirection="both" class="mt-3"> scrollDirection="both" class="mt-4">
<Column field="name" header="Name" style="min-width: 200px" frozen></Column> <Column field="name" header="Name" style="min-width: 200px" frozen></Column>
<Column field="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column> <Column field="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column>
<Column field="country.name" header="Country" :style="{ width: '200px' }"> <Column field="country.name" header="Country" :style="{ width: '200px' }">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" <img alt="flag" src="/demo/images/flag/flag_placeholder.png"
:class="`flag flag-${data.country.code}`" style="width: 24px" /> :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span> <span>{{ data.country.name }}</span>
@@ -292,7 +292,7 @@ const calculateCustomerTotal = (name) => {
<Column field="activity" header="Activity" style="min-width: 200px"></Column> <Column field="activity" header="Activity" style="min-width: 200px"></Column>
<Column field="representative.name" header="Representative" style="min-width: 200px"> <Column field="representative.name" header="Representative" style="min-width: 200px">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img :alt="data.representative.name" <img :alt="data.representative.name"
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
style="width: 32px" /> style="width: 32px" />
@@ -309,7 +309,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Row Expand</h5> <h5>Row Expand</h5>
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
@@ -329,7 +329,7 @@ const calculateCustomerTotal = (name) => {
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
class="shadow-2" width="100" /> class="shadow" width="100" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true"> <Column field="price" header="Price" :sortable="true">
@@ -354,7 +354,7 @@ const calculateCustomerTotal = (name) => {
</template> </template>
</Column> </Column>
<template #expansion="slotProps"> <template #expansion="slotProps">
<div class="p-3"> <div class="p-4">
<h5>Orders for {{ slotProps.data.name }}</h5> <h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders"> <DataTable :value="slotProps.data.orders">
<Column field="id" header="Id" :sortable="true"> <Column field="id" header="Id" :sortable="true">
@@ -396,7 +396,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Subheader Grouping</h5> <h5>Subheader Grouping</h5>
<DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name" <DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name"
@@ -405,7 +405,7 @@ const calculateCustomerTotal = (name) => {
<Column field="name" header="Name" style="min-width: 200px"></Column> <Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px"> <Column field="country" header="Country" style="min-width: 200px">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" <img alt="flag" src="/demo/images/flag/flag_placeholder.png"
:class="`flag flag-${data.country.code}`" style="width: 24px" /> :class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span> <span>{{ data.country.name }}</span>
@@ -421,7 +421,7 @@ const calculateCustomerTotal = (name) => {
</Column> </Column>
<Column field="date" header="Date" style="min-width: 200px"></Column> <Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img :alt="slotProps.data.representative.name" <img :alt="slotProps.data.representative.name"
:src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32"
style="vertical-align: middle" /> style="vertical-align: middle" />
@@ -429,7 +429,7 @@ const calculateCustomerTotal = (name) => {
</div> </div>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td style="text-align: right" class="text-bold pr-6">Total Customers: {{ <td style="text-align: right" class="text-bold pr-12">Total Customers: {{
calculateCustomerTotal(slotProps.data.representative.name) }}</td> calculateCustomerTotal(slotProps.data.representative.name) }}</td>
</template> </template>
</DataTable> </DataTable>

6
src/views/uikit/Tree.vue
View File

@@ -15,14 +15,14 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>Tree</h5> <h5>Tree</h5>
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree> <Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-span-12">
<div class="card"> <div class="card">
<h5>TreeTable</h5> <h5>TreeTable</h5>
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue"> <TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">

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

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load Diff

43
src/views/utilities/Documentation.vue
View File

@@ -1,11 +1,18 @@
<template> <template>
<div class="card"> <div class="card">
<h3>Documentation</h3> <h3>Documentation</h3>
<p class="bg-primary border-round p-3">This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" class="font-bold bg-primary hover:underline">sakai-nuxt</a> repository instead.</p> <p class="bg-primary text-primary-contrast rounded-border p-4">
This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt"
class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p> <p>
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue"
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn. class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a
<strong>Vite-powered</strong> Vue
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue"
class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies
with npm or yarn.
</p> </p>
<pre class="app-code"><code> npm install </code></pre> <pre class="app-code"><code> npm install </code></pre>
@@ -13,13 +20,16 @@
<pre class="app-code"><code> yarn </code></pre> <pre class="app-code"><code> yarn </code></pre>
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p> <p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to
view the application. That is it, you may now start with the development of your application using the Sakai
template.</p>
<pre class="app-code"><code> npm run dev </code></pre> <pre class="app-code"><code> npm run dev </code></pre>
<h5>Structure</h5> <h5>Structure</h5>
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p> <p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what
<ul class="line-height-3"> is not necessary for your application.</p>
<ul class="leading-normal">
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li> <li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li> <li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
<li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li> <li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
@@ -32,29 +42,16 @@
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p> <p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
<h5>Integration with Existing Vite Applications</h5> <h5>Integration with Existing Vite Applications</h5>
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p> <p>Only the folders that are related to the layout needs to move in to your project. We've created a short
tutorial with details.</p>
<div class="video-container"> <div class="video-container">
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe> <iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE"
frameborder="0" allowfullscreen></iframe>
</div> </div>
<h5>PrimeVue Theme</h5> <h5>PrimeVue Theme</h5>
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p> <p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
<h5>SASS Variables</h5>
<p>In case you&apos;d like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes will be reflected instantly at your browser.</p>
<h6>src/layout/_variables.scss</h6>
<pre class="app-code">
/* General */
<br />
$scale:14px; /* main font size */
<br />
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
<br />
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
</pre>
</div> </div>
</template> </template>

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

@@ -71,10 +71,10 @@ onMounted(() => {
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. 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> </p>
<InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" /> <InputText v-model="filter" class="w-full p-4 mt-4 mb-8" placeholder="Search an icon" />
<div class="grid icons-list text-center"> <div class="grid grid-cols-12 gap-4 icons-list text-center">
<div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name"> <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> <i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
<div>pi-{{ icon.properties.name }}</div> <div>pi-{{ icon.properties.name }}</div>
</div> </div>

1
tailwind.config.js
View File

@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: ['selector', '[class*="app-dark"]'],
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
extend: {} extend: {}