Migrated to new design tokens of v4
This commit is contained in:
Cagatay Civici
@@ -6,6 +6,8 @@
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sakai Vue</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/@vetixy/circular-std@1.0.0/dist/index.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
min-height: 100vh;
|
||||
justify-content: space-between;
|
||||
padding: 7rem 2rem 2rem 4rem;
|
||||
transition: margin-left $transitionDuration;
|
||||
transition: margin-left var(--layout-section-transition-duration);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.layout-footer {
|
||||
transition: margin-left $transitionDuration;
|
||||
transition: margin-left var(--layout-section-transition-duration);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: $scale;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-family: 'CircularStd', sans-serif;
|
||||
color: var(--text-color);
|
||||
background-color: var(--surface-ground);
|
||||
margin: 0;
|
||||
|
||||
@@ -7,11 +7,16 @@
|
||||
user-select: none;
|
||||
top: 7rem;
|
||||
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);
|
||||
border-radius: $borderRadius;
|
||||
border-radius: var(--content-border-radius);
|
||||
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 {
|
||||
@@ -24,7 +29,7 @@
|
||||
font-size: 0.857rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--surface-900);
|
||||
color: var(--text-color);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
@@ -64,8 +69,10 @@
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: $borderRadius;
|
||||
transition: background-color $transitionDuration, box-shadow $transitionDuration;
|
||||
border-radius: var(--content-border-radius);
|
||||
transition:
|
||||
background-color var(--element-transition-duration),
|
||||
box-shadow var(--element-transition-duration);
|
||||
|
||||
.layout-menuitem-icon {
|
||||
margin-right: 0.5rem;
|
||||
@@ -74,7 +81,7 @@
|
||||
.layout-submenu-toggler {
|
||||
font-size: 75%;
|
||||
margin-left: auto;
|
||||
transition: transform $transitionDuration;
|
||||
transition: transform var(--element-transition-duration);
|
||||
}
|
||||
|
||||
&.active-route {
|
||||
@@ -93,7 +100,7 @@
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
border-radius: $borderRadius;
|
||||
border-radius: var(--content-border-radius);
|
||||
|
||||
li {
|
||||
a {
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
@mixin focused() {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: var(--focus-ring);
|
||||
outline-width: var(--focus-ring-width);
|
||||
outline-style: var(--focus-ring-style);
|
||||
outline-color: var(--focus-ring-color);
|
||||
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() {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: inset var(--focus-ring);
|
||||
outline-offset: -1px;
|
||||
box-shadow: inset var(--focus-ring-shadow);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@media screen and (min-width: 1960px) {
|
||||
.layout-main, .landing-wrapper {
|
||||
.layout-main,
|
||||
.landing-wrapper {
|
||||
width: 1504px;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
.layout-mask {
|
||||
display: block;
|
||||
animation: fadein $transitionDuration;
|
||||
animation: fadein var(--layout-section-transition-duration);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,15 +7,18 @@
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
background-color: var(--surface-card);
|
||||
transition: left $transitionDuration;
|
||||
transition: left var(--layout-section-transition-duration);
|
||||
display: flex;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--surface-900);
|
||||
color: var(--text-color);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
width: 300px;
|
||||
@@ -23,7 +26,7 @@
|
||||
|
||||
img {
|
||||
height: 2.5rem;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -41,7 +44,7 @@
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
cursor: pointer;
|
||||
transition: background-color $transitionDuration;
|
||||
transition: background-color var(--element-transition-duration);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
@@ -111,7 +114,10 @@
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
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;
|
||||
padding: 1rem;
|
||||
right: 2rem;
|
||||
@@ -122,7 +128,7 @@
|
||||
animation: scalein 0.15s linear;
|
||||
|
||||
&.layout-topbar-menu-mobile-active {
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-topbar-button {
|
||||
@@ -136,7 +142,7 @@
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -153,13 +159,15 @@
|
||||
top: calc(100% + 2px);
|
||||
right: 0;
|
||||
width: 16rem;
|
||||
padding: .75rem;
|
||||
background-color: var(--overlay-background);
|
||||
padding: 0.75rem;
|
||||
background-color: var(--surface-overlay);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--surface-border);
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -167,7 +175,7 @@
|
||||
}
|
||||
|
||||
.config-panel-label {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary-color);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
@@ -175,9 +183,9 @@
|
||||
|
||||
.config-panel-colors {
|
||||
> div {
|
||||
padding-top: .5rem;
|
||||
padding-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -205,4 +213,4 @@
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.5rem 0 1rem 0;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--surface-900);
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
@@ -35,16 +40,16 @@ h6 {
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #FFF8E1;
|
||||
padding: .25rem .4rem;
|
||||
border-radius: $borderRadius;
|
||||
background: #fff8e1;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border-radius: var(--content-border-radius);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0 2rem;
|
||||
border-left: 4px solid #90A4AE;
|
||||
border-left: 4px solid #90a4ae;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
/* Utils */
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
content: ' ';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: $borderRadius;
|
||||
border-radius: var(--content-border-radius);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -24,4 +23,4 @@
|
||||
&.p-toast-top-center {
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 */
|
||||
@@ -1,4 +1,6 @@
|
||||
@import './_variables';
|
||||
@import './variables/_common';
|
||||
@import './variables/_light';
|
||||
@import './variables/_dark';
|
||||
@import './_mixins';
|
||||
@import './_preloading';
|
||||
@import './_main';
|
||||
|
||||
21
src/assets/layout/variables/_common.scss
Normal file
21
src/assets/layout/variables/_common.scss
Normal 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
3
src/assets/layout/variables/_dark.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
:root[class*='app-dark'] {
|
||||
--surface-ground: var(--p-surface-950);
|
||||
}
|
||||
3
src/assets/layout/variables/_light.scss
Normal file
3
src/assets/layout/variables/_light.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--surface-ground: var(--p-surface-50);
|
||||
}
|
||||
@@ -221,10 +221,10 @@ function applyTheme(type, color) {
|
||||
|
||||
function onPresetChange(value) {
|
||||
setPreset(value);
|
||||
const preset = presetOptions[value];
|
||||
const presetValue = presets[value];
|
||||
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(() => {
|
||||
@@ -236,7 +236,7 @@ const selectedSurfaceColor = computed(() => {
|
||||
});
|
||||
|
||||
const preset = computed(() => {
|
||||
return layoutConfig.preset;
|
||||
return layoutConfig.preset.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -178,7 +178,7 @@ const model = ref([
|
||||
</template>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -88,7 +88,7 @@ const isOutsideClicked = (event) => {
|
||||
<button type="button" class="p-link layout-topbar-button" @click="toggleDarkMode">
|
||||
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
|
||||
</button>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<button
|
||||
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
||||
type="button" class="p-link layout-topbar-button">
|
||||
|
||||
@@ -18,7 +18,9 @@ app.use(router);
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
darkModeSelector: 'app-dark'
|
||||
options: {
|
||||
darkModeSelector: '.app-dark'
|
||||
}
|
||||
}
|
||||
});
|
||||
app.use(ToastService);
|
||||
|
||||
@@ -115,73 +115,73 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex 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">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
|
||||
</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="flex justify-content-between mb-3">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex 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">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last week</span>
|
||||
</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="flex justify-content-between mb-3">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex 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">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
|
||||
</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="flex justify-content-between mb-3">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex 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">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
<span class="text-surface-500 dark:text-surface-300">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Recent Sales</h5>
|
||||
<DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
|
||||
@@ -189,7 +189,7 @@ watch(
|
||||
<template #header> Image </template>
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
|
||||
width="50" class="shadow-2" />
|
||||
width="50" class="shadow" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
|
||||
@@ -207,7 +207,7 @@ watch(
|
||||
</DataTable>
|
||||
</div>
|
||||
<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>
|
||||
<div>
|
||||
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded"
|
||||
@@ -216,88 +216,88 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-600">Clothing</div>
|
||||
<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-surface-600 dark:text-surface-200">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px">
|
||||
<div class="mt-2 md:mt-0 flex items-center">
|
||||
<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>
|
||||
<span class="text-orange-500 ml-3 font-medium">%50</span>
|
||||
<span class="text-orange-500 ml-4 font-medium">%50</span>
|
||||
</div>
|
||||
</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>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
<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-surface-600 dark:text-surface-200">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px">
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<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>
|
||||
<span class="text-cyan-500 ml-3 font-medium">%16</span>
|
||||
<span class="text-cyan-500 ml-4 font-medium">%16</span>
|
||||
</div>
|
||||
</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>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
<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-surface-600 dark:text-surface-200">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px">
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<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>
|
||||
<span class="text-pink-500 ml-3 font-medium">%67</span>
|
||||
<span class="text-pink-500 ml-4 font-medium">%67</span>
|
||||
</div>
|
||||
</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>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-600">Office</div>
|
||||
<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-surface-600 dark:text-surface-200">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px">
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<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>
|
||||
<span class="text-green-500 ml-3 font-medium">%35</span>
|
||||
<span class="text-green-500 ml-4 font-medium">%35</span>
|
||||
</div>
|
||||
</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>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-600">Accessories</div>
|
||||
<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-surface-600 dark:text-surface-200">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px">
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<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>
|
||||
<span class="text-purple-500 ml-3 font-medium">%75</span>
|
||||
<span class="text-purple-500 ml-4 font-medium">%75</span>
|
||||
</div>
|
||||
</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>
|
||||
<span class="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-600">Clothing</div>
|
||||
<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-surface-600 dark:text-surface-200">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
|
||||
<div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style="height: 8px">
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<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>
|
||||
<span class="text-teal-500 ml-3 font-medium">%40</span>
|
||||
<span class="text-teal-500 ml-4 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Sales Overview</h5>
|
||||
<Chart type="line" :data="lineData" :options="lineOptions" />
|
||||
</div>
|
||||
<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>
|
||||
<div>
|
||||
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded"
|
||||
@@ -306,60 +306,60 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="block text-600 font-medium mb-3">TODAY</span>
|
||||
<ul class="p-0 mx-0 mt-0 mb-4 list-none">
|
||||
<li class="flex align-items-center py-2 border-bottom-1 surface-border">
|
||||
<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-6 list-none">
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<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>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Richard Jones
|
||||
<span class="text-700">has purchased a blue t-shirt for <span
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Richard Jones
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span
|
||||
class="text-blue-500">79$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex align-items-center py-2">
|
||||
<li class="flex items-center py-2">
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
</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">
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Keyser Wick
|
||||
<span class="text-700">has purchased a black jacket for <span
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Keyser Wick
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span
|
||||
class="text-blue-500">59$</span></span>
|
||||
</span>
|
||||
</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
|
||||
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>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Jane Davis
|
||||
<span class="text-700">has posted a new questions about your product.</span>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Jane Davis
|
||||
<span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</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%)">
|
||||
<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>
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -136,10 +136,10 @@ const initFilters = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<Toolbar class="mb-4">
|
||||
<Toolbar class="mb-6">
|
||||
<template v-slot:start>
|
||||
<div class="my-2">
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
|
||||
@@ -161,7 +161,7 @@ const initFilters = () => {
|
||||
:rowsPerPageOptions="[5, 10, 25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
|
||||
<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>
|
||||
<IconField iconPosition="left" class="block mt-2 md:mt-0">
|
||||
<InputIcon class="pi pi-search" />
|
||||
@@ -188,7 +188,7 @@ const initFilters = () => {
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Image</span>
|
||||
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
|
||||
class="shadow-2" width="100" />
|
||||
class="shadow" width="100" />
|
||||
</template>
|
||||
</Column>
|
||||
<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"
|
||||
:modal="true" class="p-fluid">
|
||||
<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">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus
|
||||
@@ -244,7 +244,7 @@ const initFilters = () => {
|
||||
</div>
|
||||
|
||||
<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"
|
||||
optionLabel="label" placeholder="Select a Status">
|
||||
<template #value="slotProps">
|
||||
@@ -264,24 +264,24 @@ const initFilters = () => {
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<label class="mb-4">Category</label>
|
||||
<div class="formgrid grid grid-cols-12 gap-4">
|
||||
<div class="field-radiobutton col-span-6">
|
||||
<RadioButton id="category1" name="category" value="Accessories"
|
||||
v-model="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<div class="field-radiobutton col-span-6">
|
||||
<RadioButton id="category2" name="category" value="Clothing"
|
||||
v-model="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<div class="field-radiobutton col-span-6">
|
||||
<RadioButton id="category3" name="category" value="Electronics"
|
||||
v-model="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<div class="field-radiobutton col-span-6">
|
||||
<RadioButton id="category4" name="category" value="Fitness"
|
||||
v-model="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
@@ -289,7 +289,7 @@ const initFilters = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formgrid grid">
|
||||
<div class="formgrid grid grid-cols-12 gap-4">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<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"
|
||||
:modal="true">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<div class="flex items-center justify-center">
|
||||
<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>
|
||||
</div>
|
||||
<template #footer>
|
||||
@@ -321,8 +321,8 @@ const initFilters = () => {
|
||||
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
|
||||
:modal="true">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<div class="flex items-center justify-center">
|
||||
<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>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
||||
@@ -16,367 +16,367 @@ const logoUrl = computed(() => {
|
||||
</script>
|
||||
|
||||
<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
|
||||
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">
|
||||
<a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
|
||||
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 items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
|
||||
class="mr-0 lg:mr-2" /><span
|
||||
class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
|
||||
<a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple
|
||||
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-surface-700 dark:text-surface-100 p-ripple" v-ripple
|
||||
v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
|
||||
<i class="pi pi-bars text-4xl"></i>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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"
|
||||
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"
|
||||
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 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%)">
|
||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem
|
||||
<div class="mx-6 md:mx-20 mt-0 md:mt-6">
|
||||
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem
|
||||
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>
|
||||
<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 class="flex justify-content-center md:justify-content-end">
|
||||
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
|
||||
<div class="flex justify-center md:justify-end">
|
||||
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 text-center mt-8 mb-4">
|
||||
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
||||
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
||||
<div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4 justify-center">
|
||||
<div class="col-span-12 text-center mt-20 mb-6">
|
||||
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Marvelous Features</h2>
|
||||
<span class="text-surface-600 dark:text-surface-200 text-2xl">Placerat in egestas erat...</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-yellow-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-yellow-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Easy to Use</h5>
|
||||
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-cyan-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-cyan-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Fresh Design</h5>
|
||||
<span class="text-600">Semper risus in hendrerit.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-indigo-200"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-indigo-200"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Well Documented</h5>
|
||||
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-bluegray-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-slate-200 mb-4"
|
||||
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>
|
||||
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
||||
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-orange-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-orange-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Clean Code</h5>
|
||||
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-pink-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-pink-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Dark Mode</h5>
|
||||
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-teal-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-teal-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Ready to Use</h5>
|
||||
<span class="text-600">Mauris sit amet massa vitae.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-blue-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-blue-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Modern Practices</h5>
|
||||
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
|
||||
</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
|
||||
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="flex align-items-center justify-content-center bg-purple-200 mb-3"
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-purple-200 mb-4"
|
||||
style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Privacy</h5>
|
||||
<span class="text-600">Neque egestas congue quisque.</span>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
|
||||
</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%)">
|
||||
<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>
|
||||
<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">
|
||||
“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>
|
||||
<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 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">
|
||||
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Powerful Everywhere</h2>
|
||||
<span class="text-surface-600 dark:text-surface-200 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid mt-8 pb-2 md:pb-8">
|
||||
<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="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
|
||||
<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">
|
||||
<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 class="col-12 lg:col-6 my-auto flex flex-column lg:align-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="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right">
|
||||
<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">
|
||||
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 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
|
||||
<h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||
<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
|
||||
sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid my-8 pt-2 md:pt-8">
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start"
|
||||
<div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
|
||||
<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 items-center justify-center bg-yellow-200 self-center lg:self-start"
|
||||
style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 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
|
||||
<h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||
<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.
|
||||
Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
|
||||
elementum nisi.</span>
|
||||
</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">
|
||||
<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 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">
|
||||
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-surface-600 dark:text-surface-200 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<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="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4">
|
||||
<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">
|
||||
<h3 class="text-900 text-center my-5">Free</h3>
|
||||
<img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
<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/12 h-10 mx-auto" alt="free" />
|
||||
<div class="my-8 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
<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>
|
||||
<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">
|
||||
<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 class="py-2">
|
||||
<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 class="py-2">
|
||||
<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 class="py-2">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 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="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
|
||||
<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">
|
||||
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||
<img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
<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/12 h-10 mx-auto" alt="startup" />
|
||||
<div class="my-8 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
<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>
|
||||
<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">
|
||||
<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 class="py-2">
|
||||
<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 class="py-2">
|
||||
<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 class="py-2">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 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="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
|
||||
<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">
|
||||
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||
<img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
<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/12 h-10 mx-auto" alt="enterprise" />
|
||||
<div class="my-8 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$999</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
<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>
|
||||
<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">
|
||||
<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 class="py-2">
|
||||
<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 class="py-2">
|
||||
<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 class="py-2">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -384,49 +384,49 @@ const logoUrl = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||
<div class="grid justify-content-between">
|
||||
<div class="col-12 md:col-2" style="margin-top: -1.5rem">
|
||||
<div class="py-6 px-6 mx-0 mt-20 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4 justify-between">
|
||||
<div class="col-span-12 md:col-span-2" style="margin-top: -1.5rem">
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-10 lg:col-7">
|
||||
<div class="grid text-center md:text-left">
|
||||
<div class="col-12 md:col-3">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor
|
||||
<div class="col-span-12 md:col-span-10 lg:col-span-7">
|
||||
<div class="grid grid-cols-12 gap-4 text-center md:text-left">
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor
|
||||
Relations</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">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 mb-2 text-surface-700 dark:text-surface-100">Careers</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
||||
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Resources</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img
|
||||
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
|
||||
<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>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">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 mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
||||
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Legal</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand 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="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,44 +2,44 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-column align-items-center justify-content-center">
|
||||
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div
|
||||
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<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">
|
||||
<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>
|
||||
<div class="text-600 mb-5">Requested resource is not available.</div>
|
||||
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
|
||||
<span class="flex justify-content-center align-items-center bg-cyan-400 border-round"
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
|
||||
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
|
||||
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center bg-cyan-400 rounded-border"
|
||||
style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="text-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 class="ml-4 flex flex-column">
|
||||
<span class="text-900 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="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link to="/" class="w-full flex align-items-center py-5 border-300 border-bottom-1">
|
||||
<span class="flex justify-content-center align-items-center bg-orange-400 border-round"
|
||||
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center bg-orange-400 rounded-border"
|
||||
style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
|
||||
<i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex flex-column">
|
||||
<span class="text-900 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||
<span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link to="/" class="w-full flex align-items-center mb-5 py-5 border-300 border-bottom-1">
|
||||
<span class="flex justify-content-center align-items-center bg-indigo-400 border-round"
|
||||
<router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center bg-indigo-400 rounded-border"
|
||||
style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
|
||||
<i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex flex-column">
|
||||
<span class="text-900 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="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
@@ -33,8 +33,8 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Left Align</h5>
|
||||
<Timeline :value="customEvents">
|
||||
@@ -44,7 +44,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Right Align</h5>
|
||||
<Timeline :value="customEvents" align="right">
|
||||
@@ -54,7 +54,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Alternate Align</h5>
|
||||
<Timeline :value="customEvents" align="alternate">
|
||||
@@ -64,7 +64,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Opposite Content</h5>
|
||||
<Timeline :value="customEvents">
|
||||
@@ -82,7 +82,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
<h5>Custom Timeline</h5>
|
||||
<Timeline :value="customEvents" align="alternate" class="customized-timeline">
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
@@ -95,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
{{ slotProps.item.date }}
|
||||
</template>
|
||||
<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>
|
||||
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!
|
||||
@@ -106,7 +106,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
<div class="card mt-3">
|
||||
<div class="card mt-4">
|
||||
<h5>Horizontal</h5>
|
||||
<h6>Top Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
|
||||
|
||||
@@ -2,23 +2,23 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-column align-items-center justify-content-center">
|
||||
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div
|
||||
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
||||
<div class="w-full 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">
|
||||
<div class="grid flex flex-column align-items-center">
|
||||
<div class="flex justify-content-center align-items-center bg-orange-500 border-circle"
|
||||
<div class="grid grid-cols-12 gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center bg-orange-500 rounded-full"
|
||||
style="width: 3.2rem; height: 3.2rem">
|
||||
<i class="text-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>
|
||||
<h1 class="text-900 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
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact
|
||||
admins.</span>
|
||||
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-5" width="80%" />
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
||||
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||
</div>
|
||||
|
||||
@@ -2,22 +2,22 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-column align-items-center justify-content-center">
|
||||
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div
|
||||
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full 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">
|
||||
<div class="grid flex flex-column align-items-center">
|
||||
<div class="flex justify-content-center align-items-center bg-pink-500 border-circle"
|
||||
<div class="grid grid-cols-12 gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center bg-pink-500 rounded-full"
|
||||
style="height: 3.2rem; width: 3.2rem">
|
||||
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
|
||||
</div>
|
||||
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-600 mb-5">Requested resource is not available.</span>
|
||||
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-5" width="80%" />
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</span>
|
||||
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
||||
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||
</div>
|
||||
|
||||
@@ -14,36 +14,36 @@ const logoUrl = computed(() => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-column align-items-center justify-content-center">
|
||||
<img :src="logoUrl" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
|
||||
class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div
|
||||
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
|
||||
<div class="text-center mb-5">
|
||||
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3" />
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
|
||||
<span class="text-600 font-medium">Sign in to continue</span>
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-30rem mb-5"
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8"
|
||||
style="padding: 1rem" v-model="email" />
|
||||
|
||||
<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"
|
||||
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 align-items-center">
|
||||
<div class="flex items-center justify-between mb-8 gap-8">
|
||||
<div class="flex items-center">
|
||||
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-right cursor-pointer"
|
||||
style="color: var(--primary-color)">Forgot password?</a>
|
||||
</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>
|
||||
|
||||
@@ -28,8 +28,8 @@ const load = (index) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<Button label="Submit" class="mr-2 mb-2"></Button>
|
||||
@@ -108,7 +108,7 @@ const load = (index) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Icons</h5>
|
||||
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
|
||||
|
||||
@@ -233,39 +233,39 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="grid grid-cols-12 gap-4 p-fluid">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Linear Chart</h5>
|
||||
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Bar Chart</h5>
|
||||
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Pie Chart</h5>
|
||||
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Doughnut Chart</h5>
|
||||
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Polar Area Chart</h5>
|
||||
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 xl:col-6">
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Radar Chart</h5>
|
||||
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
|
||||
</div>
|
||||
|
||||
@@ -9,8 +9,8 @@ const onUpload = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
|
||||
|
||||
@@ -44,44 +44,44 @@ const searchCountry = (event) => {
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Float Label</h5>
|
||||
<div class="grid p-fluid mt-3">
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="grid grid-cols-12 gap-4 p-fluid mt-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<InputText type="text" id="inputtext" v-model="value1" />
|
||||
<label for="inputtext">InputText</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete>
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<Calendar inputId="calendar" v-model="value3"></Calendar>
|
||||
<label for="calendar">Calendar</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<Chips inputId="chips" v-model="value4"></Chips>
|
||||
<label for="chips">Chips</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask>
|
||||
<label for="inputmask">InputMask</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<InputNumber id="inputnumber" v-model="value6"></InputNumber>
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
@@ -92,19 +92,19 @@ const searchCountry = (event) => {
|
||||
</FloatLabel>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect>
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="field col-span-12 md:col-span-4">
|
||||
<FloatLabel>
|
||||
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea>
|
||||
<label for="textarea">Textarea</label>
|
||||
|
||||
@@ -11,8 +11,8 @@ const dropdownItem = ref(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical</h5>
|
||||
<div class="field">
|
||||
@@ -31,7 +31,7 @@ const dropdownItem = ref(null);
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical Grid</h5>
|
||||
<div class="formgrid grid">
|
||||
<div class="formgrid grid grid-cols-12 gap-4">
|
||||
<div class="field col">
|
||||
<label for="name2">Name</label>
|
||||
<InputText id="name2" type="text" />
|
||||
@@ -44,18 +44,18 @@ const dropdownItem = ref(null);
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Horizontal</h5>
|
||||
<div class="field grid">
|
||||
<label for="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<div class="field grid grid-cols-12 gap-4">
|
||||
<label for="name3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<InputText id="name3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<label for="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<div class="field grid grid-cols-12 gap-4">
|
||||
<label for="email3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<InputText id="email3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,31 +86,31 @@ const dropdownItem = ref(null);
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<div class="p-fluid formgrid grid grid-cols-12 gap-4">
|
||||
<div class="field col-span-12 md:col-span-6">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<div class="field col-span-12 md:col-span-6">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<div class="field col-span-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<div class="field col-span-12 md:col-span-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<div class="field col-span-12 md:col-span-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<div class="field col-span-12 md:col-span-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
|
||||
@@ -76,31 +76,31 @@ const searchCountry = (event) => {
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>InputText</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Default"></InputText>
|
||||
<div class="grid grid-cols-12 gap-4 formgrid">
|
||||
<div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Default" fluid></InputText>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
|
||||
<div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Disabled" :disabled="true" fluid></InputText>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Invalid" invalid />
|
||||
<div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
|
||||
<InputText type="text" placeholder="Invalid" invalid fluid />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-6 lg:mb-0">
|
||||
<div class="grid grid-cols-12 gap-4 formgrid">
|
||||
<div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-user" />
|
||||
<InputText type="text" placeholder="Username" />
|
||||
</IconField>
|
||||
</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">
|
||||
<InputText type="text" placeholder="Search" />
|
||||
<InputIcon class="pi pi-search" />
|
||||
@@ -118,7 +118,8 @@ const searchCountry = (event) => {
|
||||
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
|
||||
|
||||
<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>
|
||||
<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
|
||||
@@ -131,21 +132,21 @@ const searchCountry = (event) => {
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<h5>Slider</h5>
|
||||
<InputText v-model.number="sliderValue" />
|
||||
<Slider v-model="sliderValue" />
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<h5>Rating</h5>
|
||||
<Rating v-model="ratingValue" />
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<h5>ColorPicker</h5>
|
||||
<ColorPicker style="width: 2rem" v-model="colorValue" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<h5>Knob</h5>
|
||||
<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
|
||||
</div>
|
||||
@@ -153,23 +154,23 @@ const searchCountry = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>RadioButton</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="field-radiobutton mb-0">
|
||||
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
|
||||
<label for="option1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="field-radiobutton mb-0">
|
||||
<RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
|
||||
<label for="option2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="field-radiobutton mb-0">
|
||||
<RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
|
||||
<label for="option3">New York</label>
|
||||
@@ -178,20 +179,20 @@ const searchCountry = (event) => {
|
||||
</div>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
|
||||
<label for="checkOption1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
|
||||
<label for="checkOption2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="field-checkbox mb-0">
|
||||
<Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
|
||||
<label for="checkOption3">New York</label>
|
||||
@@ -211,10 +212,13 @@ const searchCountry = (event) => {
|
||||
<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" />
|
||||
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast text-primary rounded-border mr-2"
|
||||
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>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
@@ -222,8 +226,9 @@ const searchCountry = (event) => {
|
||||
</template>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="flex align-items-center">
|
||||
<span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()" style="width: 18px; height: 12px" />
|
||||
<div class="flex items-center">
|
||||
<span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()"
|
||||
style="width: 18px; height: 12px" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -241,15 +246,16 @@ const searchCountry = (event) => {
|
||||
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
|
||||
|
||||
<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 class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Input Groups</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="grid grid-cols-12 gap-4 p-fluid">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
@@ -258,7 +264,7 @@ const searchCountry = (event) => {
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
@@ -272,14 +278,14 @@ const searchCountry = (event) => {
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="inputGroupValue" :binary="true" />
|
||||
|
||||
@@ -43,12 +43,12 @@ const searchCountry = (event) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid p-fluid">
|
||||
<div class="grid grid-cols-12 gap-4 p-fluid">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<h5>Invalid State</h5>
|
||||
<div class="p-fluid grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-fluid grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="field">
|
||||
<label for="inputtext">InputText</label>
|
||||
<InputText id="inputtext" type="text" v-model="value1" invalid />
|
||||
@@ -71,7 +71,7 @@ const searchCountry = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="field">
|
||||
<label for="inputmask">InputMask</label>
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
|
||||
|
||||
@@ -26,7 +26,7 @@ const orderlistValue = ref([
|
||||
]);
|
||||
|
||||
const dataviewValue = ref(null);
|
||||
const layout = ref('grid');
|
||||
const layout = ref('grid grid-cols-12 gap-4');
|
||||
const sortKey = ref(null);
|
||||
const sortOrder = ref(null);
|
||||
const sortField = ref(null);
|
||||
@@ -74,48 +74,48 @@ const getSeverity = (product) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>DataView</h5>
|
||||
<DataView :value="dataviewValue" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="grid grid-nogutter">
|
||||
<div class="col-6 text-left">
|
||||
<div class="grid grid-cols-12 gap-4 grid-nogutter">
|
||||
<div class="col-span-6 text-left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<div class="col-span-6 text-right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-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="md:w-10rem 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" />
|
||||
<div class="grid grid-cols-12 gap-4 grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
|
||||
<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-40 relative">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
||||
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
||||
<div>
|
||||
<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 class="surface-100 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)">
|
||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
|
||||
<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-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column md:align-items-end gap-5">
|
||||
<span class="text-xl font-semibold text-900">${{ item.price }}</span>
|
||||
<div class="flex flex-col md:items-end gap-8">
|
||||
<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">
|
||||
<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>
|
||||
@@ -125,32 +125,32 @@ const getSeverity = (product) => {
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 p-2">
|
||||
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
|
||||
<div class="surface-50 flex justify-content-center border-round p-3">
|
||||
<div class="grid grid-cols-12 gap-4 grid-nogutter">
|
||||
<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-6 border border-surface bg-surface-0 dark:bg-surface-900 rounded-border flex flex-col">
|
||||
<div class="bg-surface-50 dark:bg-surface-800 flex justify-center rounded-border p-4">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-row justify-content-between align-items-start gap-2">
|
||||
<div class="pt-6">
|
||||
<div class="flex flex-row justify-between items-start gap-2">
|
||||
<div>
|
||||
<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 class="surface-100 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)">
|
||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
|
||||
<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-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column gap-4 mt-4">
|
||||
<span class="text-2xl font-semibold text-900">${{ item.price }}</span>
|
||||
<div class="flex flex-col gap-6 mt-6">
|
||||
<span class="text-2xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,7 +163,7 @@ const getSeverity = (product) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="col-span-12 lg:col-span-8">
|
||||
<div class="card">
|
||||
<h5>PickList</h5>
|
||||
<PickList v-model="picklistValue" listStyle="height:250px" dataKey="code">
|
||||
@@ -176,7 +176,7 @@ const getSeverity = (product) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="card">
|
||||
<h5>OrderList</h5>
|
||||
<OrderList v-model="orderlistValue" listStyle="height:250px" dataKey="code" :rows="10">
|
||||
|
||||
@@ -67,21 +67,21 @@ const getSeverity = (status) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4 p-fluid">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Carousel</h5>
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
|
||||
<template #item="slotProps">
|
||||
<div class="border-1 surface-border border-round m-2 p-3">
|
||||
<div class="mb-3">
|
||||
<div class="border border-surface rounded-border m-2 p-4">
|
||||
<div class="mb-4">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
|
||||
<span>
|
||||
<Button icon="pi pi-heart" severity="secondary" outlined />
|
||||
@@ -94,16 +94,16 @@ const getSeverity = (status) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Galleria</h5>
|
||||
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7"
|
||||
|
||||
@@ -440,8 +440,8 @@ const onContextRightClick = (event) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4 p-fluid">
|
||||
<div class="col-span-12">
|
||||
<div class="card card-w-title">
|
||||
<h5>Menubar</h5>
|
||||
<Menubar :model="nestedMenuitems">
|
||||
@@ -455,14 +455,14 @@ const onContextRightClick = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card card-w-title">
|
||||
<h5>Breadcrumb</h5>
|
||||
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card card-w-title">
|
||||
<h5>Steps</h5>
|
||||
<p>Steps and TabMenu are integrated with the same child routes.</p>
|
||||
@@ -471,7 +471,7 @@ const onContextRightClick = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card card-w-title">
|
||||
<h5>TabMenu</h5>
|
||||
<p>Steps and TabMenu are integrated with the same child routes.</p>
|
||||
@@ -480,21 +480,21 @@ const onContextRightClick = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="card">
|
||||
<h5>Tiered Menu</h5>
|
||||
<TieredMenu :model="tieredMenuItems" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="card">
|
||||
<h5>Plain Menu</h5>
|
||||
<Menu :model="menuitems" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<div class="card">
|
||||
<h5>Overlay Menu</h5>
|
||||
|
||||
@@ -509,7 +509,7 @@ const onContextRightClick = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>MegaMenu - Horizontal</h5>
|
||||
<MegaMenu :model="megamenuItems" />
|
||||
@@ -519,7 +519,7 @@ const onContextRightClick = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>PanelMenu</h5>
|
||||
<PanelMenu :model="panelMenuitems" />
|
||||
|
||||
@@ -38,8 +38,8 @@ const showError = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Toast</h5>
|
||||
<Button @click="showSuccess()" label="Success" class="mr-2" severity="success" />
|
||||
@@ -49,7 +49,7 @@ const showError = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Messages</h5>
|
||||
<Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" />
|
||||
@@ -63,18 +63,18 @@ const showError = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="col-span-12 lg:col-span-8">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="field grid">
|
||||
<label for="username1" class="col-fixed w-9rem">Username</label>
|
||||
<div class="field grid grid-cols-12 gap-4">
|
||||
<label for="username1" class="col-fixed w-36">Username</label>
|
||||
<div class="col">
|
||||
<InputText id="username1" v-model="username" :required="true" invalid class="mr-2"></InputText>
|
||||
<InlineMessage>Username is required</InlineMessage>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<label for="email" class="col-fixed w-9rem">Email</label>
|
||||
<div class="field grid grid-cols-12 gap-4">
|
||||
<label for="email" class="col-fixed w-36">Email</label>
|
||||
<div class="col">
|
||||
<InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText>
|
||||
<InlineMessage />
|
||||
@@ -83,7 +83,7 @@ const showError = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="field p-fluid">
|
||||
|
||||
@@ -28,11 +28,11 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div class="grid">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col">
|
||||
<ProgressBar :value="value"></ProgressBar>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card">
|
||||
<h4>Badge</h4>
|
||||
<h5>Numbers</h5>
|
||||
@@ -55,8 +55,8 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<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-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></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-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>
|
||||
|
||||
<h5>Inline Button Badge</h5>
|
||||
@@ -74,7 +74,7 @@ onBeforeUnmount(() => {
|
||||
<div class="card">
|
||||
<h4>Avatar</h4>
|
||||
<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/asiyajavayant.png'" size="large" shape="circle"></Avatar>
|
||||
<Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
|
||||
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card">
|
||||
<h4>Tag</h4>
|
||||
<h5>Tags</h5>
|
||||
@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
|
||||
<div class="card">
|
||||
<h4>Chip</h4>
|
||||
<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="Comedy" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Mystery" class="mr-2 mb-2"></Chip>
|
||||
@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<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="Facebook" icon="pi pi-facebook" 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>
|
||||
|
||||
<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="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>
|
||||
@@ -159,8 +159,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
<div class="card">
|
||||
<h4>Skeleton</h4>
|
||||
<div class="border-round border-1 surface-border p-4">
|
||||
<div class="flex mb-3">
|
||||
<div class="rounded-border border border-surface p-6">
|
||||
<div class="flex mb-4">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||
@@ -169,7 +169,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -74,12 +74,12 @@ const confirm = (event) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Dialog</h5>
|
||||
<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
|
||||
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>
|
||||
@@ -102,10 +102,10 @@ const confirm = (event) => {
|
||||
<Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
|
||||
<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">
|
||||
<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;">
|
||||
<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>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
|
||||
@@ -119,13 +119,13 @@ const confirm = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Confirmation</h5>
|
||||
<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">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
@@ -135,7 +135,7 @@ const confirm = (event) => {
|
||||
</Dialog>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Sidebar</h5>
|
||||
<h5 class="font-bold text-xl">Sidebar</h5>
|
||||
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
|
||||
<h1 style="font-weight: normal">Left Sidebar</h1>
|
||||
</Sidebar>
|
||||
@@ -163,7 +163,7 @@ const confirm = (event) => {
|
||||
<Button icon="pi pi-external-link" class="p-button-warning" @click="visibleFull = true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="formgroup-inline">
|
||||
@@ -175,7 +175,7 @@ const confirm = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-span-12 lg:col-span-6">
|
||||
<div class="card">
|
||||
<h5>ConfirmPopup</h5>
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
|
||||
@@ -32,8 +32,8 @@ const toggle = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Toolbar</h5>
|
||||
<Toolbar>
|
||||
@@ -53,25 +53,25 @@ const toggle = () => {
|
||||
</Toolbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>AccordionPanel</h5>
|
||||
<Accordion :activeIndex="0">
|
||||
<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
|
||||
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>
|
||||
</AccordionTab>
|
||||
<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
|
||||
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>
|
||||
</AccordionTab>
|
||||
<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
|
||||
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>
|
||||
@@ -82,20 +82,20 @@ const toggle = () => {
|
||||
<h5>TabView</h5>
|
||||
<TabView>
|
||||
<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
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p></TabPanel
|
||||
>
|
||||
<TabPanel 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
|
||||
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel 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
|
||||
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>
|
||||
@@ -103,11 +103,11 @@ const toggle = () => {
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Panel</h5>
|
||||
<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
|
||||
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>
|
||||
@@ -116,7 +116,7 @@ const toggle = () => {
|
||||
<div class="card">
|
||||
<h5>Fieldset</h5>
|
||||
<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
|
||||
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>
|
||||
@@ -125,7 +125,7 @@ const toggle = () => {
|
||||
|
||||
<Card>
|
||||
<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>
|
||||
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
|
||||
</div>
|
||||
@@ -133,7 +133,7 @@ const toggle = () => {
|
||||
</template>
|
||||
|
||||
<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
|
||||
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>
|
||||
@@ -141,11 +141,11 @@ const toggle = () => {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Divider</h5>
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-5 flex items-center justify-center">
|
||||
<div class="p-fluid">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
@@ -159,13 +159,13 @@ const toggle = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<div class="col-span-2">
|
||||
<Divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</Divider>
|
||||
</div>
|
||||
<div class="col-5 align-items-center justify-content-center">
|
||||
<p class="line-height-3 m-0">
|
||||
<div class="col-span-5 items-center justify-center">
|
||||
<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
|
||||
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>
|
||||
@@ -174,7 +174,7 @@ const toggle = () => {
|
||||
<span class="p-tag">Badge</span>
|
||||
</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
|
||||
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>
|
||||
@@ -183,7 +183,7 @@ const toggle = () => {
|
||||
<Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
|
||||
</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
|
||||
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>
|
||||
@@ -192,21 +192,21 @@ const toggle = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<Splitter style="height: 300px" class="mb-8">
|
||||
<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 :size="70">
|
||||
<Splitter layout="vertical">
|
||||
<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 :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>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
|
||||
@@ -124,8 +124,8 @@ const calculateCustomerTotal = (name) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<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']"
|
||||
showGridlines>
|
||||
<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
|
||||
@click="clearFilter1()" />
|
||||
<IconField iconPosition="left">
|
||||
@@ -156,7 +156,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" style="min-width: 12rem">
|
||||
<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"
|
||||
:class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
@@ -178,7 +178,7 @@ const calculateCustomerTotal = (name) => {
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false"
|
||||
:filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="data.representative.name"
|
||||
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
|
||||
style="width: 32px" />
|
||||
@@ -186,7 +186,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</div>
|
||||
</template>
|
||||
<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"
|
||||
placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
@@ -242,8 +242,8 @@ const calculateCustomerTotal = (name) => {
|
||||
<ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Slider v-model="filterModel.value" :range="true" class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-between px-2">
|
||||
<Slider v-model="filterModel.value" :range="true" class="m-4"></Slider>
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
|
||||
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
|
||||
</div>
|
||||
@@ -263,19 +263,19 @@ const calculateCustomerTotal = (name) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id"
|
||||
offLabel="Freeze Id" style="width: 10rem" />
|
||||
|
||||
<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="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column>
|
||||
<Column field="country.name" header="Country" :style="{ width: '200px' }">
|
||||
<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"
|
||||
:class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
@@ -292,7 +292,7 @@ const calculateCustomerTotal = (name) => {
|
||||
<Column field="activity" header="Activity" style="min-width: 200px"></Column>
|
||||
<Column field="representative.name" header="Representative" style="min-width: 200px">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="data.representative.name"
|
||||
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
|
||||
style="width: 32px" />
|
||||
@@ -309,7 +309,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
|
||||
@@ -329,7 +329,7 @@ const calculateCustomerTotal = (name) => {
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
|
||||
class="shadow-2" width="100" />
|
||||
class="shadow" width="100" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true">
|
||||
@@ -354,7 +354,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</template>
|
||||
</Column>
|
||||
<template #expansion="slotProps">
|
||||
<div class="p-3">
|
||||
<div class="p-4">
|
||||
<h5>Orders for {{ slotProps.data.name }}</h5>
|
||||
<DataTable :value="slotProps.data.orders">
|
||||
<Column field="id" header="Id" :sortable="true">
|
||||
@@ -396,7 +396,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Subheader Grouping</h5>
|
||||
<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="country" header="Country" style="min-width: 200px">
|
||||
<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"
|
||||
:class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
@@ -421,7 +421,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</Column>
|
||||
<Column field="date" header="Date" style="min-width: 200px"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="slotProps.data.representative.name"
|
||||
:src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32"
|
||||
style="vertical-align: middle" />
|
||||
@@ -429,7 +429,7 @@ const calculateCustomerTotal = (name) => {
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
@@ -15,14 +15,14 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Tree</h5>
|
||||
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>TreeTable</h5>
|
||||
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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" />
|
||||
<p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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" />
|
||||
<p class="m-0 text-lg">Payment Component Content via Child Route</p>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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" />
|
||||
<p class="m-0 text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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" />
|
||||
<p class="m-0 text-lg">Seat Component Content via Child Route</p>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
<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
|
||||
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.
|
||||
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
|
||||
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>
|
||||
<pre class="app-code"><code> npm install </code></pre>
|
||||
|
||||
@@ -13,13 +20,16 @@
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<ul class="line-height-3">
|
||||
<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>
|
||||
<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/views</span>: Demo pages</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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<h5>PrimeVue Theme</h5>
|
||||
<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'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>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -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.
|
||||
</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="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<div class="grid grid-cols-12 gap-4 icons-list text-center">
|
||||
<div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 pb-8" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
|
||||
<div>pi-{{ icon.properties.name }}</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ['selector', '[class*="app-dark"]'],
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {}
|
||||
|
||||
Reference in New Issue
Block a user