vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migration of templates to TW

pull/5969/head
Cagatay Civici 2024-06-26 12:26:19 +03:00
parent 6d74929580
commit 5be4eb2d91
32 changed files with 7647 additions and 10842 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/showcase/assets/styles/layout/_templates.scss Normal file
View File

@ -0,0 +1,45 @@
// TEMPLATE FEATURES ANIMATION
.template-features-animation-card {
&:hover &-order {
div {
&:nth-child(3) {
animation: p-features-order-animation 2.5s ease-in-out;
color: var(--p-primary-400);
}
}
}
&-active &-order {
div {
&:nth-child(3) {
animation: p-features-order-animation 2.5s ease-in-out;
color: var(--p-primary-400);
}
}
}
}
@keyframes p-features-order-animation {
0% {
clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%,
100% 100%, 0% 100%);
}
20% {
clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%,
100% 100%, 0% 100%);
}
40% {
clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
}
60% {
clip-path: polygon(0 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 18% 0, 39% 0, 53% 0, 62% 0, 87% 0, 100% 0, 100% 100%, 0 100%);
}
}

2
apps/showcase/assets/styles/layout/layout.scss
View File

@ -14,5 +14,5 @@
@import './_docsearch';
@import './_responsive';
@import './_animation';
@import './_templates';
@import './landing/_landing';
@import './templates/_templates';

31
apps/showcase/assets/styles/layout/templates/_apollo.scss
View File

@ -1,31 +0,0 @@
.apollo {
.template {
&-hero {
&-pattern {
width: 96rem;
height: auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 6;
mix-blend-mode: overlay;
}
}
}
}
@media only screen and (max-width: 768px) {
.apollo {
.template {
&-hero {
&-pattern {
width: 90rem;
bottom: 20rem;
}
}
}
}
}

49
apps/showcase/assets/styles/layout/templates/_atlantis.scss
View File

@ -1,49 +0,0 @@
.atlantis {
.template {
&-hero {
&-pattern {
width: 50rem;
height: auto;
position: absolute;
bottom: -7rem;
left: -7rem;
z-index: 6;
}
&-dashboard1,
&-dashboard2{
border-radius: 1.12rem;
}
}
}
}
@media only screen and (max-width: 1200px) {
.atlantis {
.template{
&-hero {
&-pattern {
width: 45rem;
bottom: -5.75rem;
left: -9.5rem;
}
}
}
}
}
@media only screen and (max-width: 768px) {
.atlantis {
.template{
&-hero {
&-pattern {
width: 50rem;
bottom: 16.75rem;
left: -10.5rem;
}
}
}
}
}

60
apps/showcase/assets/styles/layout/templates/_avalon.scss
View File

@ -1,60 +0,0 @@
.avalon {
.template {
&-hero {
&-pattern {
width: 56rem;
height: auto;
position: absolute;
bottom: 0px;
left: -3.06;
z-index: 6;
}
&-rectangle{
opacity: 0.5;
}
&-light{
opacity: 0.75;
}
}
&-separator {
&-icon {
width: 7rem;
height: 3.5rem;
border-radius: 99px;
}
}
}
}
@media only screen and (max-width: 1200px) {
.avalon {
.template{
&-hero {
&-pattern {
width: 68rem;
height: auto;
bottom: -8rem;
left: -12rem;
}
}
}
}
}
@media only screen and (max-width: 768px) {
.avalon {
.template{
&-hero {
&-pattern {
width: 88rem;
height: auto;
bottom: 0rem;
left: -16rem;
}
}
}
}
}

45
apps/showcase/assets/styles/layout/templates/_diamond.scss
View File

@ -1,45 +0,0 @@
.diamond {
.template {
&-hero {
&-pattern {
width: 62.3125rem;
height: 44.8125rem;
position: absolute;
top: -3.62;
left: -3.06;
z-index: 6;
}
}
}
}
@media only screen and (max-width: 1200px) {
.diamond {
.template{
&-hero {
&-pattern {
width: 60rem;
height: auto;
bottom: -8rem;
left: -8rem;
}
}
}
}
}
@media only screen and (max-width: 768px) {
.diamond {
.template{
&-hero {
&-pattern {
width: 64rem;
height: auto;
bottom: 2rem;
left: -8rem;
}
}
}
}
}

33
apps/showcase/assets/styles/layout/templates/_freya.scss
View File

@ -1,33 +0,0 @@
.freya {
.template {
&-hero {
&-pattern {
height: auto;
width: 45rem;
position: absolute;
bottom: -9rem;
left: 0rem;
z-index: 6;
}
}
}
}
@media only screen and (max-width: 768px) {
.freya {
.template {
&-hero {
&-pattern {
width: 55rem;
height: auto;
bottom: -2rem;
left: 0;
}
}
}
}
}

47
apps/showcase/assets/styles/layout/templates/_poseidon.scss
View File

@ -1,47 +0,0 @@
.poseidon {
.template {
&-hero {
&-pattern {
width: 102.3125rem;
height: auto;
position: absolute;
bottom: 0rem;
left: -26rem;
z-index: 6;
}
&-dashboard1,
&-dashboard2{
width: 45rem;
}
}
}
}
@media only screen and (max-width: 1200px) {
.poseidon {
.template{
&-hero {
&-pattern {
height: auto;
bottom: 0rem;
left: -34rem;
}
}
}
}
}
@media only screen and (max-width: 768px) {
.poseidon {
.template{
&-hero {
&-pattern {
height: auto;
bottom: 21rem;
left: -35rem;
}
}
}
}
}

54
apps/showcase/assets/styles/layout/templates/_sakai.scss
View File

@ -1,54 +0,0 @@
.sakai {
.template {
&-hero {
&-pattern {
width: 72.3125rem;
height: auto;
position: absolute;
bottom: -1rem;
left: -1rem;
z-index: 6;
}
&-dashboard1,
&-dashboard2{
width: 42rem;
}
}
&-features-horizontal-card{
width: 30rem;
}
}
}
@media only screen and (max-width: 1200px) {
.sakai {
.template {
&-hero {
&-pattern {
width: 72.3125rem;
height: auto;
bottom: -1rem;
left: -2rem;
}
}
}
}
}
@media only screen and (max-width: 768px) {
.sakai {
.template {
&-hero {
&-pattern {
width: 64.3125rem;
height: auto;
bottom: 20rem;
left: -2rem;
}
}
}
}
}

1640
apps/showcase/assets/styles/layout/templates/_templates.scss
View File

File diff suppressed because it is too large Load Diff

39
apps/showcase/assets/styles/layout/templates/_ultima.scss
View File

@ -1,39 +0,0 @@
.ultima {
.template {
&-hero {
&-pattern {
width: 80rem;
height: auto;
position: absolute;
bottom: -26rem;
left: -22.5rem;
z-index: 6;
mix-blend-mode: overlay;
}
&-dashboard1,
&-dashboard2{
border-radius: 0.42857rem;
}
}
}
}
@media only screen and (max-width: 768px) {
.ultima {
.template {
&-hero {
&-pattern {
width: 90rem;
left: -25rem;
bottom: -10rem;
}
}
}
}
}

48
apps/showcase/assets/styles/layout/templates/_verona.scss
View File

@ -1,48 +0,0 @@
.verona {
.template {
&-hero {
&-pattern {
width: 110rem;
height: auto;
position: absolute;
bottom: -2rem;
left: -1rem;
z-index: 6;
}
}
}
}
@media only screen and (max-width: 1200px) {
.verona {
.template {
&-hero {
&-pattern {
width: 120rem;
left: -7.5rem;
bottom: -10rem;
}
}
}
}
}
@media only screen and (max-width: 768px) {
.verona {
.template {
&-hero {
&-pattern {
width: 124rem;
left: -8.5rem;
bottom: 0;
}
}
}
}
}

24
apps/showcase/components/template/TemplateConfiguration.vue
View File

@ -1,22 +1,20 @@
<template>
<div class="template-configuration-wrapper">
<div class="template-configuration">
<div class="template-configuration-screen">
<div class="template-configuration-screen-top">
<div class="template-configuration-screen-top-close template-configuration-screen-top-circle" />
<div class="template-configuration-screen-top-minimize template-configuration-screen-top-circle" />
<div class="template-configuration-screen-top-zoom template-configuration-screen-top-circle" />
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-3xl bg-surface-0 dark:bg-surface-900">
<div class="p-6 md:p-8 rounded-2xl lg:rounded-3xl border border-surface max-w-3xl w-full mx-auto">
<div class="rounded-lg lg:rounded-xl border border-surface overflow-hidden">
<div class="py-1 px-6 h-14 flex items-center gap-2">
<div v-for="(c, i) of ['#ED6B5D', '#F4BE50', '#61C554']" :key="i" class="w-3 h-3 rounded-full" :style="{ background: c }" />
</div>
<div class="template-configuration-screen-bottom">
<p>&gt; npm install <span class="text-gray-500">or yarn</span></p>
<p>&gt; npm run dev <span class="text-gray-500">or yarn dev</span></p>
<div class="p-6 bg-surface-900 dark:bg-surface-800 flex flex-col gap-4 relative">
<p class="m-0 text-surface-0 text-xs sm:text-sm">&gt; npm install <span class="text-gray-500">or yarn</span></p>
<p class="m-0 text-surface-0 text-xs sm:text-sm">&gt; npm run dev <span class="text-gray-500">or yarn dev</span></p>
<br />
<br />
<img class="template-configuration-screen-bottom-logo" src="https://primefaces.org/cdn/primevue/images/templates/vue-3d-logo.png" alt="Vue 3D Logo" />
<img class="w-28 lg:w-32 h-28 lg:h-32 absolute right-6 bottom-4" src="https://primefaces.org/cdn/primevue/images/templates/vue-3d-logo.png" alt="Vue 3D Logo" />
</div>
</div>
<h3 class="template-configuration-title">{{ title }}</h3>
<p class="template-configuration-description">{{ description }}</p>
<h3 class="text-lg lg:text-2xl text-surface-900 dark:text-surface-0 font-bold">{{ title }}</h3>
<p class="text-sm lg:text-base text-surface-600 dark:text-surface-400 mt-3 mb-0">{{ description }}</p>
</div>
</div>
</template>

55
apps/showcase/components/template/TemplateFeatures.vue
View File

@ -1,41 +1,38 @@
<template>
<div class="template-features">
<div v-if="displayType === 'vertical'" class="template-features-vertical-wrapper">
<div class="template-features-vertical">
<div class="template-features-vertical-col">
<template v-for="(data, j) of featuresData.slice(0, Math.ceil(featuresData.length / 2))" :key="j">
<div class="template-features-vertical-card">
<div class="template-features-vertical-card-image">
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
<!-- (0 ?featuresData.slice(i===0?(0, Math.ceil(featuresData.length / 2)):(featuresData.length / 2)):featuresData.slice(i===0?(0, Math.ceil(featuresData.length / 2)):(featuresData.length / 2))) -->
<div>
<div v-if="displayType === 'vertical'" class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
<div class="mx-auto max-w-3xl flex sm:flex-row flex-col items-start gap-6">
<div
v-for="(_, i) of Array(2).fill(null)"
:key="i"
class="flex flex-col gap-6 flex-1"
:class="{
'sm:pt-32': i === 1
}"
>
<template v-for="(data, j) of i === 0 ? featuresData.slice(0, Math.ceil(featuresData.length / 2)) : featuresData.slice(featuresData.length / 2)" :key="j">
<div class="w-full p-4 md:p-5 rounded-2xl border border-surface">
<div class="w-full bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden flex">
<img class="w-full h-auto rounded-lg" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
</div>
<h2>{{ data.title }}</h2>
<p>{{ data.description }}</p>
</div>
</template>
</div>
<div class="template-features-vertical-col">
<template v-for="(data, j) of featuresData.slice(Math.ceil(featuresData.length / 2))" :key="j">
<div class="template-features-vertical-card">
<div class="template-features-vertical-card-image">
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
</div>
<h2>{{ data.title }}</h2>
<p>{{ data.description }}</p>
<h2 class="mt-5 mb-0 text-lg text-surface-900 dark:text-surface-0 font-semibold">{{ data.title }}</h2>
<p class="mt-2 mb-0 text-muted-color text-sm">{{ data.description }}</p>
</div>
</template>
</div>
</div>
</div>
<div v-else class="template-features-horizontal-wrapper">
<div class="template-features-horizontal">
<div v-else class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
<div class="flex flex-wrap justify-center gap-6 mx-auto w-full max-w-5xl">
<template v-for="(data, index) in featuresData" :key="index">
<div class="template-features-horizontal-card">
<div class="template-features-horizontal-card-top">
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
<div class="p-5 rounded-2xl border border-surface flex-1 min-w-80 max-w-96">
<div class="flex w-full mb-5 bg-surface-100 dark:bg-surface-800 overflow-hidden rounded-lg">
<img class="w-full" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
</div>
<div class="template-features-horizontal-card-bottom">
<h5 class="template-features-horizontal-card-bottom-title">{{ data.title }}</h5>
<p class="template-features-horizontal-card-bottom-description">{{ data.description }}</p>
<div>
<h5 class="text-surface-900 dark:text-surface-0 font-semibold mb-2 text-lg">{{ data.title }}</h5>
<p class="m-0 text-muted-color text-sm">{{ data.description }}</p>
</div>
</div>
</template>

37
apps/showcase/components/template/TemplateFeaturesAnimation.vue
View File

@ -1,25 +1,30 @@
<template>
<div class="template-features-animation-wrapper">
<div v-if="title" class="template-features-animation-title">
<h2>{{ title }}</h2>
</div>
<div ref="animationRef" class="template-features-animation">
<div class="template-features-animation-left">
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
<h2 v-if="title" class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6 mb-12">{{ title }}</h2>
<div ref="animationRef" class="flex flex-col-reverse lg:flex-row items-start gap-10 w-full max-w-2xl lg:max-w-6xl mx-auto p-4 lg:p-7 rounded-3xl border border-surface">
<div class="flex flex-col gap-4 flex-1">
<template v-for="(data, index) in featuresData" :key="index">
<div
@click="handleClick(data.id)"
@mouseenter="enterCardArea(data.id)"
@mouseleave="leaveCardArea(data.id)"
:class="`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`"
:class="`template-features-animation-card group template-features-animation-left-card p-4 flex items-start gap-2 md:gap-4 xl:gap-6 cursor-pointer rounded-xl transition-all hover:bg-primary-50 dark:hover:bg-primary/15 ${
selectedID === data.id ? 'template-features-animation-card-active rounded-xl bg-primary-50 dark:bg-primary/15 transition-all' : ''
}`"
>
<div class="template-features-animation-left-card-order">
<div>{{ orderNumber(index) }}</div>
<div>{{ orderNumber(index) }}</div>
<div>{{ orderNumber(index) }}</div>
<div class="template-features-animation-card-order w-14 h-full -mt-1 relative transition-all">
<div class="text-[2.5rem] font-bold absolute top-0 left-0 text-primary-400 [-webkit-text-stroke:1.2px_var(--p-primary-400)]">{{ orderNumber(index) }}</div>
<div
class="text-[2.5rem] font-bold absolute top-0 left-0 transition-all dark:text-surface-900 group-hover:text-surface-50 dark:group-hover:text-surface-900"
:class="selectedID === data.id ? 'text-surface-50' : 'text-surface-0'"
>
{{ orderNumber(index) }}
</div>
<div class="template-features-animation-left-card-content">
<h5>{{ data.title }}</h5>
<p>
<div class="text-[2.5rem] font-bold absolute top-0 left-0 text-transparent">{{ orderNumber(index) }}</div>
</div>
<div class="flex-1">
<h5 class="text-lg lg:text-xl font-semibold m-0">{{ data.title }}</h5>
<p class="text-sm lg:text-base text-muted-color mt-1 mb-0 [&>a]:text-primary [&>a]:hover:underline">
<template v-if="data.slotType">
<slot :name="data.slotType" />
</template>
@ -31,7 +36,7 @@
</div>
</template>
</div>
<div class="template-features-animation-right">
<div class="flex-1 w-full lg:w-fit rounded-2xl bg-surface-100 dark:bg-surface-800 overflow-hidden flex sm:min-w-[30rem]">
<TemplateFeaturesAnimationInline
v-if="featuresData[selectedID - 1]?.type === 'inline-animation'"
:inlineFeaturesData="featuresData[selectedID - 1]?.inlineFeaturesData"
@ -40,7 +45,7 @@
:parentID="selectedID"
:inlineSeconds="animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length"
/>
<img v-else :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
<img v-else class="w-full h-auto object-cover flex" :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
</div>
</div>
</div>

17
apps/showcase/components/template/TemplateFeaturesAnimationInline.vue
View File

@ -1,14 +1,21 @@
<template>
<div ref="animationInlineRef" class="template-features-animation-right-inline">
<div class="template-features-animation-right-inline-tabs">
<div ref="animationInlineRef" class="w-full py-8 rounded-xl bg-surface-50 dark:bg-surface-800 relative flex flex-col items-center justify-center">
<div class="hidden sm:flex items-center gap-0.5 xl:gap-1 rounded-full border border-surface p-1 w-[90%] bg-surface-0 dark:bg-surface-900">
<template v-for="(data, index) in inlineFeaturesData" :key="index">
<button @click="handleBtnClick(data.id)" @mouseenter="enterCardArea(data.id)" @mouseleave="leaveCardArea" :class="`${!!(data.id === selectedID) && 'template-features-animation-right-inline-tabs-btnActive'}`">
<button
@click="handleBtnClick(data.id)"
@mouseenter="enterCardArea(data.id)"
@mouseleave="leaveCardArea"
:class="`flex-1 py-1 px-1 lg:px-2 rounded-full text-surface-900 dark:text-surface-0 border-none outline-none text-xs font-medium transition-all hover:bg-surface-200 dark:hover:bg-surface-700 cursor-pointer ${
data.id === selectedID ? 'bg-surface-200 dark:bg-surface-700' : 'bg-transparent'
}`"
>
{{ data.title }}
</button>
</template>
</div>
<div class="template-features-animation-right-inline-image">
<img :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
<div class="w-[90%] h-fit overflow-hidden relative flex mt-5 rounded-lg shadow-[0px_0px_48px_0px_rgba(0,0,0,0.08)]">
<img class="max-h-96 w-full h-auto object-cover object-top flex" :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
</div>
</div>
</template>

51
apps/showcase/components/template/TemplateHero.vue
View File

@ -1,32 +1,49 @@
<template>
<div class="template-hero">
<img v-if="!!templateHeroData.pattern" class="template-hero-pattern" :src="templateHeroData.pattern" alt="Template Hero Pattern" />
<TemplateHeroLight v-if="!!templateHeroData.light" />
<TemplateHeroRectangle v-if="!!templateHeroData.rectangle" />
<div class="template-hero-card">
<div class="template-hero-card-logo">
<div class="w-full h-[56rem] md:h-[32rem] xl:h-[36.25rem] bg-primary rounded-3xl overflow-hidden relative">
<slot name="pattern" />
<div class="absolute left-1/2 top-20 -translate-x-1/2 md:translate-x-0 md:top-1/2 md:-translate-y-1/2 md:left-10 lg:left-20 xl:left-36 z-20 w-[92%] max-w-lg md:w-[26rem] lg:w-[28rem] xl:w-[29rem] rounded-3xl p-7 lg:px-9 lg:py-7">
<div
class="absolute top-0 left-0 w-full h-full backdrop-blur-[2px] rounded-3xl border border-[rgba(255,255,255,0.24)] [background:linear-gradient(180deg,rgba(170,140,255,0.00)_0%,var(--p-primary-400)/0.8_100%),rgba(255,255,255,0.10)] shadow-[0px_2px_4px_0px_rgba(255,255,255,0.24)_inset,0px_48px_80px_0px_rgba(0,0,0,0.08),0px_-5px_13px_-2px_rgba(255,255,255,0.55)_inset]"
/>
<div class="z-10 relative">
<div class="h-8 lg:h-10 [&>svg]:h-full [&>svg]:w-auto select-none">
<slot name="logo" />
</div>
<p>{{ templateHeroData.description }}</p>
<div class="template-hero-card-buttons">
<a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1"> Live Demo </a>
<a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2">
<p class="text-primary-contrast mt-4 mb-0 lg:text-base text-sm">{{ templateHeroData.description }}</p>
<div class="flex items-center gap-4 mt-8">
<a :href="templateHeroData.liveHref" target="_blank" class="flex-1 py-3.5 bg-surface-900 border-surface-900 hover:bg-surface-700 text-surface-0 rounded-full text-center font-semibold transition-all leading-none">Live Demo</a>
<a
:href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'"
target="_blank"
class="flex-1 rounded-full text-center font-semibold w-full bg-primary-600 border-primary-600 hover:bg-primary-700 text-surface-0 py-3.5 transition-all leading-none"
>
{{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
</a>
</div>
<div class="template-hero-card-links">
<a :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
<div class="flex items-center gap-4 mt-6">
<a class="flex items-center gap-2 text-primary-contrast lg:text-base text-sm" :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
<i class="pi pi-github" />
<span>{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
<span class="hover:underline">{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
</a>
<a :href="templateHeroData.docHref" target="_blank">
<a class="flex items-center gap-2 text-primary-contrast lg:text-base text-sm" :href="templateHeroData.docHref" target="_blank">
<i class="pi pi-book" />
<span>Read Doc</span>
<span class="hover:underline">Read Doc</span>
</a>
</div>
</div>
<img v-if="!!templateHeroData.dashboard1" class="template-hero-dashboard1" :src="templateHeroData.dashboard1" alt="Template Dashboard Image 1" />
<img v-if="!!templateHeroData.dashboard2" class="template-hero-dashboard2" :src="templateHeroData.dashboard2" alt="Template Dashboard Image 2" />
</div>
<img
v-if="!!templateHeroData.dashboard1"
class="select-none flex z-20 absolute top-[28rem] left-52 md:top-8 md:left-[42rem] lg:left-[50rem] xl:left-[60rem] w-[37.875rem] shadow-[0px_0px_43.64997px_0px_rgba(0,0,0,0.12)] rounded-sm"
:src="templateHeroData.dashboard1"
alt="Template Dashboard Image 1"
/>
<img
v-if="!!templateHeroData.dashboard2"
class="select-none flex z-10 absolute top-[28rem] left-6 md:top-8 md:left-[32rem] lg:left-[36rem] xl:left-[42rem] w-[37.875rem] shadow-[0px_0px_43.64997px_0px_rgba(0,0,0,0.12)] rounded-sm"
:src="templateHeroData.dashboard2"
alt="Template Dashboard Image 2"
/>
</div>
</template>

58
apps/showcase/components/template/TemplateHeroLight.vue
View File

@ -1,58 +0,0 @@
<template>
<svg width="490" height="143" viewBox="0 0 490 143" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-light">
<g filter="url(#filter0_f_1970_42395)">
<g filter="url(#filter1_f_1970_42395)">
<rect x="43" y="43" width="404" height="10" rx="5" fill="var(--primary-100)" />
<rect x="38.5" y="38.5" width="413" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
</g>
<g filter="url(#filter2_f_1970_42395)">
<rect x="98" y="52" width="294" height="10" rx="5" fill="var(--primary-100)" />
<rect x="93.5" y="47.5" width="303" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
</g>
<g filter="url(#filter3_f_1970_42395)">
<rect x="144" y="60" width="202" height="10" rx="5" fill="var(--primary-100)" />
<rect x="139.5" y="55.5" width="211" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
</g>
<g filter="url(#filter4_f_1970_42395)">
<rect x="182" y="75" width="126" height="10" rx="5" fill="var(--primary-100)" />
<rect x="177.5" y="70.5" width="135" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
</g>
<g filter="url(#filter5_f_1970_42395)">
<rect x="212" y="90" width="66" height="10" rx="5" fill="var(--primary-100)" />
<rect x="207.5" y="85.5" width="75" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
</g>
</g>
<defs>
<filter id="filter0_f_1970_42395" x="0" y="0" width="490" height="143" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="17" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter1_f_1970_42395" x="14" y="14" width="462" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter2_f_1970_42395" x="69" y="23" width="352" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter3_f_1970_42395" x="115" y="31" width="260" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter4_f_1970_42395" x="153" y="46" width="184" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter5_f_1970_42395" x="183" y="61" width="124" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
</defs>
</svg>
</template>

18
apps/showcase/components/template/TemplateHeroRectangle.vue
View File

@ -1,18 +0,0 @@
<template>
<svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-rectangle">
<g :style="{ mixBlendMode: 'overlay' }" filter="url(#filter0_f_956_37561)">
<path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
</g>
<defs>
<filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
</filter>
<linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
<stop stopColor="var(--primary-50)" />
<stop offset="1" stopColor="var(--primary-50)" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</template>

26
apps/showcase/components/template/TemplateLicense.vue
View File

@ -1,29 +1,29 @@
<template>
<div class="template-license-wrapper">
<div class="template-license">
<div class="template-license-cards">
<div class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 lg:px-8 rounded-3xl bg-surface-0 dark:bg-surface-900">
<div class="template-license max-w-3xl mx-auto">
<div class="flex flex-wrap items-start justify-center gap-6">
<template v-for="(detail, index) in license.licenseDetails" :key="index">
<div class="template-license-card">
<span class="template-license-card-title">{{ detail.title }}</span>
<div class="template-license-card-pricing">
<span :class="{ 'template-license-card-pricing-discount-active': license.showDiscount }">{{ detail.price }}</span>
<div class="flex-1 border border-surface rounded-xl lg:rounded-2xl p-6 min-w-80">
<span class="text-surface-600 dark:text-surface-400 font-semibold">{{ detail.title }}</span>
<div class="text-surface-900 dark:text-surface-0 text-4xl font-semibold mt-4 mb-5">
<span :class="{ 'text-surface-600 dark:text-surface-400 line-through mr-4': license.showDiscount }">{{ detail.price }}</span>
<span v-if="license.showDiscount">{{ detail.discount }}</span>
</div>
<div class="template-license-card-included">
<div class="flex flex-col gap-2 mb-5">
<template v-for="(txt, i) in detail.included" :key="`text_${i}`">
<p>{{ txt }}</p>
<p class="text-muted-color m-0">{{ txt }}</p>
</template>
</div>
<a href="https://www.primefaces.org/layouts/licenses" target="_blank">
<button>License Details</button>
<Button label="License Details" severity="contrast" class="w-full" />
</a>
</div>
</template>
</div>
<p class="template-license-description">{{ license.description }}</p>
<p class="template-license-visit">
<p class="text-muted-color text-center mt-6 mb-0">{{ license.description }}</p>
<p class="text-muted-color text-center mt-6 mb-0">
Visit the
<a :href="license.documentLink" target="_blank"> official documentation </a> for more information.
<a :href="license.documentLink" target="_blank" class="text-primary cursor-pointer transition-all hover:underline"> official documentation </a> for more information.
</p>
</div>
</div>

12
apps/showcase/components/template/TemplateRelated.vue
View File

@ -1,16 +1,14 @@
<template>
<div class="template-related-wrapper">
<div class="template-related">
<h2 class="template-related-title">Related Layouts</h2>
<div class="template-related-slide">
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
<h2 class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6">Related Layouts</h2>
<div class="flex flex-wrap items-center justify-center w-fit mt-12 mx-auto gap-6 max-w-screen-lg">
<template v-for="(data, index) in relatedData" :key="index">
<a :href="data.href" target="_blank" class="template-related-slide-card">
<img :src="data.src" :alt="'Related Image ' + index" />
<a :href="data.href" target="_blank" class="flex-1 min-w-60 rounded-2xl border border-surface p-4 xl:p-5 flex ring-0 hover:ring-8 ring-surface-100 dark:ring-surface-800 transition-all">
<img class="w-full h-auto rounded-lg" :src="data.src" :alt="'Related Image ' + index" />
</a>
</template>
</div>
</div>
</div>
</template>
<script>

6
apps/showcase/components/template/TemplateSeparator.vue
View File

@ -1,7 +1,9 @@
<template>
<div class="template-separator">
<div class="template-separator-icon">
<div class="flex items-center w-full gap-6">
<Divider class="flex-1" />
<div class="w-12 h-12 overflow-hidden flex items-center justify-center border border-surface rounded-full bg-surface-0 dark:bg-surface-900">
<slot />
</div>
<Divider class="flex-1" />
</div>
</template>

5
apps/showcase/pages/templates/apollo/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="apollo template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -23,6 +23,9 @@
/>
</svg>
</template>
<template #pattern>
<img class="select-none absolute md:bottom-0 bottom-80 left-0 z-[6] md:w-[95rem] h-auto w-[90rem] opacity-60" src="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png" alt="Template Hero Pattern" />
</template>
</TemplateHero>
<ApolloSeparator />
<div class="hidden">

9
apps/showcase/pages/templates/atlantis/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="atlantis template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -37,6 +37,13 @@
/>
</svg>
</template>
<template #pattern>
<img
class="select-none absolute md:-bottom-28 bottom-36 -left-20 md:-left-28 z-[6] md:w-[50rem] h-auto w-[60rem] opacity-75"
src="https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png"
alt="Template Hero Pattern"
/>
</template>
</TemplateHero>
<AtlantisSeparator />
<TemplateLicense :license="license" />

11
apps/showcase/pages/templates/avalon/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="avalon template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
@ -14,6 +14,13 @@
<path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" :fill="fillColor" />
</svg>
</template>
<template #pattern>
<img
class="select-none absolute md:w-[60rem] h-auto md:bottom-0 bottom-40 -left-32 xl:-left-12 md:-left-32 z-[6] opacity-75"
src="https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png"
alt="Template Hero Pattern"
/>
</template>
</TemplateHero>
<AvalonSeparator />
<TemplateLicense :license="license" />
@ -225,7 +232,7 @@ export default {
},
templateHeroData: {
pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
rectangle: true,
rectangle: false,
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png',
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard2.png',
description: 'A modern and easy to use premium application template with highly customizable layout features. Based on a bootstrap styling, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',

5
apps/showcase/pages/templates/diamond/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="diamond template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -20,6 +20,9 @@
</defs>
</svg>
</template>
<template #pattern>
<img class="select-none absolute z-[6] w-[62rem] h-[44rem] -top-8 -left-36 md:-left-12" src="https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png" alt="Template Hero Pattern" />
</template>
</TemplateHero>
<DiamondSeparator />
<TemplateLicense :license="license" />

9
apps/showcase/pages/templates/freya/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="freya template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -23,6 +23,13 @@
/>
</svg>
</template>
<template #pattern>
<img
class="select-none absolute z-[6] w-[58rem] md:w-[50rem] h-auto top-12 md:top-32 -left-24 md:-left-12 opacity-75"
src="https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png"
alt="Template Hero Pattern"
/>
</template>
</TemplateHero>
<FreyaSeparator />
<TemplateLicense :license="license" />

24
apps/showcase/pages/templates/poseidon/index.vue
View File

File diff suppressed because one or more lines are too long

9
apps/showcase/pages/templates/sakai/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="sakai template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="140" height="40" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -28,6 +28,13 @@
</defs>
</svg>
</template>
<template #pattern>
<img
class="select-none absolute z-[6] opacity-60 w-[50rem] h-[18rem] md:w-[52rem] md:h-[20rem] lg:w-[64rem] lg:h-[28rem] bottom-[26rem] md:bottom-0 left-0"
src="https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png"
alt="Template Hero Pattern"
/>
</template>
</TemplateHero>
<SakaiSeparator />
<TemplateFeatures :featuresData="features1Data" displayType="horizontal" />

9
apps/showcase/pages/templates/ultima/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="ultima template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -27,6 +27,13 @@
</defs>
</svg>
</template>
<template #pattern>
<img
class="select-none absolute z-[6] opacity-75 w-[80rem] h-auto bottom-8 -left-64 md:-bottom-[26rem] md:-left-[22rem]"
src="https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png"
alt="Template Hero Pattern"
/>
</template>
</TemplateHero>
<UltimaSeparator />
<div class="hidden">

5
apps/showcase/pages/templates/verona/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div className="verona template">
<div class="flex flex-col gap-8">
<TemplateHero :templateHeroData="templateHeroData">
<template #logo>
<svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -33,6 +33,9 @@
</defs>
</svg>
</template>
<template #pattern>
<img class="select-none absolute z-[6] opacity-90 w-[110rem] h-auto bottom-80 left-0 md:-bottom-8 md:-left-4" src="https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png" alt="Template Hero Pattern" />
</template>
</TemplateHero>
<VeronaSeparator />
<TemplateLicense :license="license" />

15982
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff