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

Revert "Brute migration of landing and doc" 

This reverts commit 72651f4ac7.
pull/5806/head
Cagatay Civici 2024-05-18 11:25:01 +03:00
parent 97c8fb3bd9
commit ad01e1f232
11 changed files with 341 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/doc/DocApiTable.vue
View File

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div v-if="!data[0].data" class="doc-tablewrapper mt-4"> <div v-if="!data[0].data" class="doc-tablewrapper mt-3">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>

14
components/doc/DocSectionCode.vue
View File

@ -1,32 +1,32 @@
<template> <template>
<div v-if="!embedded" class="doc-section-code"> <div v-if="!embedded" class="doc-section-code">
<div class="doc-section-code-buttons animate-scalein animation-duration-300"> <div class="doc-section-code-buttons scalein animation-duration-300">
<template v-if="codeMode !== 'basic' && !hideToggleCode"> <template v-if="codeMode !== 'basic' && !hideToggleCode">
<button :class="['py-0 pl-2 pr-2 rounded-md h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button> <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 pl-2 pr-2 rounded-md h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button> <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
</template> </template>
<template v-if="!hideToggleCode"> <template v-if="!hideToggleCode">
<button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-8 w-8 p-0 inline-flex items-center justify-center"> <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-code"></i> <i class="pi pi-code"></i>
</button> </button>
</template> </template>
<template v-if="!hideToggleCode && code.data"> <template v-if="!hideToggleCode && code.data">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-8 w-8 p-0 inline-flex items-center justify-center"> <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-database"></i> <i class="pi pi-database"></i>
</button> </button>
</template> </template>
<template v-if="!hideStackBlitz"> <template v-if="!hideStackBlitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showStackblitz"> <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'"> <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
<path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" /> <path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
</svg> </svg>
</button> </button>
</template> </template>
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center"> <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-copy"></i> <i class="pi pi-copy"></i>
</button> </button>
</div> </div>

2
components/doc/DocSections.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<template v-for="(doc, i) of docs" :key="doc.label + '_' + i"> <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
<section class="pt-6 pb-6"> <section class="py-4">
<template v-if="doc.children"> <template v-if="doc.children">
<div :id="doc.id"> <div :id="doc.id">
<DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge"> <DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge">

352
components/landing/BlockSection.vue
View File

@ -1,37 +1,37 @@
<template> <template>
<section id="blocks-section" class="landing-blocks pt-20 line-clamp-1"> <section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
<div class="section-header">Blocks</div> <div class="section-header">Blocks</div>
<p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p> <p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
<div class="flex justify-center mt-6"> <div class="flex justify-content-center mt-4">
<a href="https://blocks.primevue.org" class="font-semibold p-4 rounded-md flex items-center linkbox active z-20"> <a href="https://blocks.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
<span>Explore All</span> <span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i> <i class="pi pi-arrow-right ml-2"></i>
</a> </a>
</div> </div>
<section :class="['prime-blocks flex justify-center items-center flex-col z-1', { 'blocks-animation': setAnimation }]"> <section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': setAnimation }]">
<div class="flex"> <div class="flex">
<div class="prime-block flex self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar w-1/12 p-4"> <div class="block-sidebar w-1 p-3">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-8"> <div class="sidebar-menu mt-5">
<div class="bar w-2/3 mt-4 mb-4"></div> <div class="bar w-8 my-3"></div>
<div class="bar w-3/4 mt-4 mb-4"></div> <div class="bar w-9 my-3"></div>
<div class="bar w-7/12 mt-4 mb-4"></div> <div class="bar w-7 my-3"></div>
<div class="bar w-1/2 mt-4 mb-4"></div> <div class="bar w-6 my-3"></div>
<div class="bar w-3/4 mt-4 mb-4"></div> <div class="bar w-9 my-3"></div>
</div> </div>
</div> </div>
<div class="block-content flex-1 p-6 flex flex-col"> <div class="block-content flex-1 p-4 flex flex-column">
<div class="bar w-1/12"></div> <div class="bar w-1"></div>
<div class="block-main mt-6 h-full flex justify-center items-center flex-col"> <div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div class="block-item w-24"> <div class="block-item w-6rem">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div> <div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-16 mt-4"></div> <div class="bar w-4rem mt-3"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -40,22 +40,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="block-item block-item-active animation-1 ml-4 mr-4 w-24"> <div class="block-item block-item-active animation-1 mx-3 w-6rem">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div> <div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-16 mt-4"></div> <div class="bar w-4rem mt-3"></div>
</div> </div>
<div> <div>
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block-item w-24"> <div class="block-item w-6rem">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div> <div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-16 mt-4"></div> <div class="bar w-4rem mt-3"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
@ -63,34 +63,34 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-between mt-4"> <div class="flex justify-content-between mt-3">
<div class="block-item w-24"> <div class="block-item w-6rem">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div> <div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-16 mt-4"></div> <div class="bar w-4rem mt-3"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block-item ml-4 mr-4 w-24"> <div class="block-item mx-3 w-6rem">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div> <div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-16 mt-4"></div> <div class="bar w-4rem mt-3"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block-item w-24"> <div class="block-item w-6rem">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div> <div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-16 mt-4"></div> <div class="bar w-4rem mt-3"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
@ -102,139 +102,139 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex -ml-20"> <div class="flex -ml-8">
<div class="prime-block p-1 flex self-stretch flex-col"> <div class="prime-block p-1 flex align-self-stretch flex-column">
<div class="block-header pt-4 pb-4 pl-6 pr-6 flex justify-between items-center"> <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
<div class="logo pr-8"> <div class="logo pr-5">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="flex-auto sidebar-menu flex"> <div class="flex-auto sidebar-menu flex">
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
</div> </div>
<div class="circle circle-highlight"></div> <div class="circle circle-highlight"></div>
</div> </div>
<div class="block-content flex-1 p-6 flex flex-col"> <div class="block-content flex-1 p-4 flex flex-column">
<div class="bar w-1/12"></div> <div class="bar w-1"></div>
<div class="block-main mt-6 h-full flex justify-center items-center flex-col"> <div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div class="block-item w-16"> <div class="block-item w-4rem">
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
<span class="text mt-2 mb-2">26 %</span> <span class="text my-2">26 %</span>
<div class="box box-orange"></div> <div class="box box-orange"></div>
</div> </div>
<div class="block-item block-item-active animation-2 ml-4 mr-4 w-16"> <div class="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
<div class="bar w-4"></div> <div class="bar w-1rem"></div>
<span class="text mt-2 mb-2">6 %</span> <span class="text my-2">6 %</span>
<div class="box box-pink"></div> <div class="box box-pink"></div>
</div> </div>
<div class="block-item mr-4 w-16"> <div class="block-item mr-3 w-4rem">
<div class="bar w-16"></div> <div class="bar w-4rem"></div>
<span class="text mt-2 mb-2">62 %</span> <span class="text my-2">62 %</span>
<div class="box box-green"></div> <div class="box box-green"></div>
</div> </div>
<div class="block-item w-16"> <div class="block-item w-4rem">
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
<span class="text mt-2 mb-2">39 %</span> <span class="text my-2">39 %</span>
<div class="box box-blue"></div> <div class="box box-blue"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="prime-block flex self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar p-4"> <div class="block-sidebar p-3">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-8"> <div class="sidebar-menu mt-5">
<div class="circle mt-4 mb-4"></div> <div class="circle my-3"></div>
<div class="circle mt-4 mb-4"></div> <div class="circle my-3"></div>
<div class="circle mt-4 mb-4"></div> <div class="circle my-3"></div>
</div> </div>
</div> </div>
<div class="block-sidebar-list pl-6 pr-6"> <div class="block-sidebar-list px-4">
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
<div class="bar w-12 mt-4 mb-4"></div> <div class="bar w-3rem my-3"></div>
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
<div class="bar w-4 mt-4 mb-4"></div> <div class="bar w-1rem my-3"></div>
<div class="bar w-12 mt-4 mb-4"></div> <div class="bar w-3rem my-3"></div>
<div class="bar w-12 mt-4 mb-4"></div> <div class="bar w-3rem my-3"></div>
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
</div> </div>
<div class="block-content flex-1 mt-8 mb-8 ml-6 mr-6 flex flex-col"> <div class="block-content flex-1 my-5 mx-4 flex flex-column">
<div class="block-main h-full flex justify-center items-center flex-col pl-2 pr-2"> <div class="block-main h-full flex justify-content-center align-items-center flex-column px-2">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div class="block-item w-1/4 flex justify-between flex-col"> <div class="block-item w-3 flex justify-content-between flex-column">
<div class="bar w-full"></div> <div class="bar w-full"></div>
<div class="flex items-center mt-4"> <div class="flex align-items-center mt-3">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
</div> </div>
<div class="bar bar-button w-16 mt-6"></div> <div class="bar bar-button w-4rem mt-4"></div>
</div> </div>
<div class="block-item block-item-active animation-3 ml-4 mr-4 w-1/4 flex justify-between flex-col"> <div class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
<div class="bar w-full"></div> <div class="bar w-full"></div>
<div class="flex items-center mt-4"> <div class="flex align-items-center mt-3">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
</div> </div>
<div class="flex items-center mt-4"> <div class="flex align-items-center mt-3">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-12"></div> <div class="bar w-3rem"></div>
</div> </div>
<div class="bar bar-button w-16 mt-6"></div> <div class="bar bar-button w-4rem mt-4"></div>
</div> </div>
<div class="block-item w-1/4 flex justify-between flex-col"> <div class="block-item w-3 flex justify-content-between flex-column">
<div class="bar w-full"></div> <div class="bar w-full"></div>
<div class="flex items-center mt-4"> <div class="flex align-items-center mt-3">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
</div> </div>
<div class="flex items-center mt-4"> <div class="flex align-items-center mt-3">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
</div> </div>
<div class="flex items-center mt-4"> <div class="flex align-items-center mt-3">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-8"></div> <div class="bar w-2rem"></div>
</div> </div>
<div class="bar bar-button w-16 mt-6"></div> <div class="bar bar-button w-4rem mt-4"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex -mr-20"> <div class="flex -mr-8">
<div class="prime-block flex self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar w-1/12 p-4"> <div class="block-sidebar w-1 p-3">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-8"> <div class="sidebar-menu mt-5">
<div class="bar w-2/3 mt-4 mb-4"></div> <div class="bar w-8 my-3"></div>
<div class="bar w-3/4 mt-4 mb-4"></div> <div class="bar w-9 my-3"></div>
<div class="bar w-7/12 mt-4 mb-4"></div> <div class="bar w-7 my-3"></div>
<div class="bar w-1/2 mt-4 mb-4"></div> <div class="bar w-6 my-3"></div>
<div class="bar w-3/4 mt-4 mb-4"></div> <div class="bar w-9 my-3"></div>
</div> </div>
</div> </div>
<div class="block-content flex-1 p-6 flex flex-col"> <div class="block-content flex-1 p-4 flex flex-column">
<div class="block-main h-full flex justify-center items-center flex-col"> <div class="block-main h-full flex justify-content-center align-items-center flex-column">
<div class="bar w-1/4 mb-4"></div> <div class="bar w-3 mb-3"></div>
<div class="bar w-1/3 mb-8"></div> <div class="bar w-4 mb-5"></div>
<div class="flex justify-between"> <div class="flex justify-content-between">
<div class="block-item w-24 p-0"> <div class="block-item w-6rem p-0">
<div class="block-image"></div> <div class="block-image"></div>
<div class="p-2"> <div class="p-2">
<div> <div>
<div class="bar w-16 mt-2 mb-2"></div> <div class="bar w-4rem my-2"></div>
<div class="bar w-8 mb-2"></div> <div class="bar w-2rem mb-2"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -243,12 +243,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="block-item block-item-active ml-4 mr-4 animation-1 w-24 p-0"> <div class="block-item block-item-active mx-3 animation-1 w-6rem p-0">
<div class="block-image"></div> <div class="block-image"></div>
<div class="p-2"> <div class="p-2">
<div> <div>
<div class="bar w-16 mt-2 mb-2"></div> <div class="bar w-4rem my-2"></div>
<div class="bar w-8 mb-2"></div> <div class="bar w-2rem mb-2"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -257,12 +257,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="block-item w-24 p-0"> <div class="block-item w-6rem p-0">
<div class="block-image"></div> <div class="block-image"></div>
<div class="p-2"> <div class="p-2">
<div> <div>
<div class="bar w-16 mt-2 mb-2"></div> <div class="bar w-4rem my-2"></div>
<div class="bar w-8 mb-2"></div> <div class="bar w-2rem mb-2"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -275,95 +275,95 @@
</div> </div>
</div> </div>
</div> </div>
<div class="prime-block flex self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar p-4"> <div class="block-sidebar p-3">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-8"> <div class="sidebar-menu mt-5">
<div class="circle mt-4 mb-4"></div> <div class="circle my-3"></div>
<div class="circle mt-4 mb-4"></div> <div class="circle my-3"></div>
<div class="circle mt-4 mb-4"></div> <div class="circle my-3"></div>
</div> </div>
</div> </div>
<div class="block-sidebar-list pl-6 pr-6"> <div class="block-sidebar-list px-4">
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
<div class="bar w-12 mt-4 mb-4"></div> <div class="bar w-3rem my-3"></div>
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
<div class="bar w-4 mt-4 mb-4"></div> <div class="bar w-1rem my-3"></div>
<div class="bar w-12 mt-4 mb-4"></div> <div class="bar w-3rem my-3"></div>
<div class="bar w-12 mt-4 mb-4"></div> <div class="bar w-3rem my-3"></div>
<div class="bar w-8 mt-4 mb-4"></div> <div class="bar w-2rem my-3"></div>
</div> </div>
<div class="block-content flex-1 mt-8 mb-8 ml-6 mr-6 flex flex-col"> <div class="block-content flex-1 my-5 mx-4 flex flex-column">
<div class="block-main h-full flex justify-center items-center flex-col pl-2 pr-2"> <div class="block-main h-full flex justify-content-center align-items-center flex-column px-2">
<div class="flex justify-between"> <div class="flex justify-content-between">
<div class="block-item block-item-table block-item-active animation-1 flex"> <div class="block-item block-item-table block-item-active animation-1 flex">
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
</div> </div>
<div class="block-item block-item-col flex"> <div class="block-item block-item-col flex">
<div class="flex"> <div class="flex">
<div class="circle circle-small circle-highlight -mr-1"></div> <div class="circle circle-small circle-highlight -mr-1"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
<div class="block-item block-item-col flex"> <div class="block-item block-item-col flex">
<div class="flex"> <div class="flex">
<div class="circle circle-small circle-highlight -mr-1"></div> <div class="circle circle-small circle-highlight -mr-1"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
<div class="block-item block-item-col flex"> <div class="block-item block-item-col flex">
<div class="flex"> <div class="flex">
<div class="circle circle-small circle-highlight -mr-1"></div> <div class="circle circle-small circle-highlight -mr-1"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
<div class="bar w-12 ml-4 mr-4"></div> <div class="bar w-3rem mx-3"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="prime-block p-1 flex self-stretch flex-col"> <div class="prime-block p-1 flex align-self-stretch flex-column">
<div class="block-header pt-4 pb-4 pl-6 pr-6 flex justify-between items-center"> <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
<div class="logo pr-8"> <div class="logo pr-5">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="flex-auto sidebar-menu flex"> <div class="flex-auto sidebar-menu flex">
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
<div class="bar w-8 ml-2 mr-2"></div> <div class="bar w-2rem mx-2"></div>
</div> </div>
<div class="circle"></div> <div class="circle"></div>
</div> </div>
<div class="block-content flex-1 p-6 flex flex-col"> <div class="block-content flex-1 p-4 flex flex-column">
<div class="block-main h-full flex justify-center items-center flex-col"> <div class="block-main h-full flex justify-content-center align-items-center flex-column">
<div class="block-item block-item-active animation-2 ml-4 mr-4 w-32 text-center flex flex-col items-center overflow-visible"> <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
<div class="-mt-6"> <div class="-mt-4">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" />
</div> </div>
<div class="bar w-8 mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-24 mt-2"></div> <div class="bar w-6rem mt-2"></div>
<div class="bar w-16 mt-2"></div> <div class="bar w-4rem mt-2"></div>
<div class="flex"> <div class="flex">
<div class="bar bar-highlight bar-button w-16 mr-2 mt-6"></div> <div class="bar bar-highlight bar-button w-4rem mr-2 mt-4"></div>
<div class="bar bar-button w-16 mr-2 mt-6"></div> <div class="bar bar-button w-4rem mr-2 mt-4"></div>
</div> </div>
</div> </div>
</div> </div>

70
components/landing/FeaturesSection.vue
View File

@ -1,63 +1,63 @@
<template> <template>
<section class="landing-features pt-20 pb-20"> <section class="landing-features py-8">
<div class="section-header">Features</div> <div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p> <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
<div class="mt-16 pl-8 pr-8 lg:pl-20 lg:pr-20"> <div class="mt-7 px-5 lg:px-8">
<div class="features-container"> <div class="features-container">
<div class="flex flex-wrap -mr-2 -ml-2 -mt-2"> <div class="grid">
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">80+ UI Components</div> <div class="font-semibold mb-3 text-lg">80+ UI Components</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p> <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Styled or Unstyled</div> <div class="font-semibold mb-3 text-lg">Styled or Unstyled</div>
<p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p> <p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Community</div> <div class="font-semibold mb-3 text-lg">Community</div>
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p> <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Accessibility</div> <div class="font-semibold mb-3 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p> <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Enterprise Support</div> <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p> <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Mobile</div> <div class="font-semibold mb-3 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p> <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Blocks</div> <div class="font-semibold mb-3 text-lg">Blocks</div>
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p> <p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
</div> </div>
</div> </div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-4 text-lg">Typescript</div> <div class="font-semibold mb-3 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p> <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div> </div>
</div> </div>

90
components/landing/FooterSection.vue
View File

@ -1,76 +1,76 @@
<template> <template>
<section class="landing-footer pt-20 pl-8 pr-8 lg:pl-20 lg:pr-20"> <section class="landing-footer pt-8 px-5 lg:px-8">
<div class="landing-footer-container"> <div class="landing-footer-container">
<div class="flex flex-wrap z-10"> <div class="flex flex-wrap z-1">
<div class="w-1/2 lg:w-1/4 flex"> <div class="w-6 lg:w-3 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-8">General</li> <li class="font-bold mb-5">General</li>
<li class="mb-6"> <li class="mb-4">
<PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Get Started</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Examples</a> <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-1/2 lg:w-1/4 flex"> <div class="w-6 lg:w-3 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-8">Support</li> <li class="font-bold mb-5">Support</li>
<li class="mb-6"> <li class="mb-4">
<a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a> <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a> <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">PRO Support</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</PrimeVueNuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-1/2 lg:w-1/4 flex"> <div class="w-6 lg:w-3 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-8 lg:mt-0 mb-8">Theming</li> <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
<li class="mb-6"> <li class="mb-4">
<PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Styled Mode</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</PrimeVueNuxtLink>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</PrimeVueNuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-1/2 lg:w-1/4 flex"> <div class="w-6 lg:w-3 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-8 lg:mt-0 mb-8">Resources</li> <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
<li class="mb-6"> <li class="mb-4">
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer" <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer"
>PrimeTV</a >PrimeTV</a
> >
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a> <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Store</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a> <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a> <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a> <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a> <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
</li> </li>
<li class="mb-6"> <li class="mb-4">
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Contact Us</a> <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Contact Us</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<hr class="section-divider mt-20" /> <hr class="section-divider mt-8" />
<div class="flex flex-wrap justify-between pt-12 pb-12 gap-8"> <div class="flex flex-wrap justify-content-between py-6 gap-5">
<span> <span>
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 120px"> <svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 120px">
<path <path
@ -115,17 +115,17 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)" />
</svg> </svg>
</span> </span>
<div class="flex items-center gap-2"> <div class="flex align-items-center gap-2">
<a href="https://twitter.com/primevue" class="linkbox block w-12 h-12 flex items-center justify-center"> <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
<i class="pi pi-twitter"></i> <i class="pi pi-twitter"></i>
</a> </a>
<a href="https://github.com/primefaces/primevue" class="linkbox block w-12 h-12 flex items-center justify-center"> <a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
<i class="pi pi-github"></i> <i class="pi pi-github"></i>
</a> </a>
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-12 h-12 flex items-center justify-center"> <a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
<i class="pi pi-discord"></i> <i class="pi pi-discord"></i>
</a> </a>
<a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-12 h-12 flex items-center justify-center"> <a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
<i class="pi pi-comments"></i> <i class="pi pi-comments"></i>
</a> </a>
</div> </div>

92
components/landing/HeroSection.vue
View File

@ -1,36 +1,36 @@
<template> <template>
<section class="landing-hero pt-20 pb-20 pl-8 pr-8 lg:pl-20 lg:pr-20"> <section class="landing-hero py-8 px-5 lg:px-8">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full xl:w-1/2 flex flex-col justify-center lg:pr-20 items-center xl:items-stretch"> <div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
<h1 class="text-5xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1> <h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-8"> <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier. Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
</p> </p>
<div class="flex items-center gap-4"> <div class="flex align-items-center gap-3">
<PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold pt-4 pb-4 pl-6 pr-6"> <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-3 px-4">
<span>Get Started</span> <span>Get Started</span>
<i class="pi pi-arrow-right ml-4"></i> <i class="pi pi-arrow-right ml-3"></i>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
<a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold pt-4 pb-4 pl-6 pr-6"> <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-3 px-4">
<span>Give a Star</span> <span>Give a Star</span>
<i class="pi pi-star-fill ml-4 text-yellow-500"></i> <i class="pi pi-star-fill ml-3 text-yellow-500"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="w-full xl:w-1/2 pt-16 xl:pt-0 hidden md:block"> <div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
<div class="flex"> <div class="flex">
<div class="flex flex-col w-1/2 gap-8 pt-20 pr-4"> <div class="flex flex-column w-6 gap-5 pt-8 pr-3">
<div class="box p-6 animate-fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<div class="flex gap-2"> <div class="flex gap-2">
<div class="w-24 flex-shrink-0"> <div class="w-6rem flex-shrink-0">
<span class="text-secondary font-medium block mb-4">Amount</span> <span class="text-secondary font-medium block mb-3">Amount</span>
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" /> <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
</div> </div>
<div class="flex-auto" style="width: 1%"> <div class="flex-auto" style="width: 1%">
<span class="text-secondary font-semibold block mb-4">Beneficiary</span> <span class="text-secondary font-semibold block mb-3">Beneficiary</span>
<Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full"> <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex items-center gap-2"> <div class="flex align-items-center gap-2">
<img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" /> <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" />
<span>{{ slotProps.option.name }}</span> <span>{{ slotProps.option.name }}</span>
</div> </div>
@ -38,44 +38,44 @@
</Select> </Select>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-8 mb-4">Account</span> <span class="text-secondary font-medium block mt-5 mb-3">Account</span>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-3">
<div class="flex items-center"> <div class="flex align-items-center">
<RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" /> <RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" />
<label for="category1" class="ml-2 font-medium">Savings</label> <label for="category1" class="ml-2 font-medium">Savings</label>
</div> </div>
<div class="flex items-center"> <div class="flex align-items-center">
<RadioButton v-model="radioValue" inputId="category2" value="C" name="radiovalue" @change="setCategory('C')" /> <RadioButton v-model="radioValue" inputId="category2" value="C" name="radiovalue" @change="setCategory('C')" />
<label for="category2" class="ml-2 font-medium">Checking</label> <label for="category2" class="ml-2 font-medium">Checking</label>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-8 mb-4">Date</span> <span class="text-secondary font-medium block mt-5 mb-3">Date</span>
<DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" /> <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
</div> </div>
<div class="box p-6 animate-fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<Chart type="line" :data="chartData" :options="chartOptions" /> <Chart type="line" :data="chartData" :options="chartOptions" />
</div> </div>
<div class="box p-6 animate-fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<div class="flex items-center"> <div class="flex align-items-center">
<Chip label="Vue" class="mr-2 font-medium" /> <Chip label="Vue" class="mr-2 font-medium" />
<Chip label="Typescript" class="mr-2 font-medium" /> <Chip label="Typescript" class="mr-2 font-medium" />
<ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch> <ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch>
</div> </div>
<div class="mt-8 flex justify-center"> <div class="mt-5 flex justify-content-center">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" /> <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
</div> </div>
<div class="mt-8 pt-1 pb-2"> <div class="mt-5 pt-1 pb-2">
<Slider v-model="rangeValues" range class="w-full" /> <Slider v-model="rangeValues" range class="w-full" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col w-1/2 gap-8 pl-4"> <div class="flex flex-column w-6 gap-5 pl-3">
<div class="box p-6 animate-fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<div class="bg-card mb-6 w-full text-center p-8" style="border-radius: '10px'"> <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
<img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan-noir.png" alt="Watch" class="w-40" /> <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan-noir.png" alt="Watch" class="w-10rem" />
</div> </div>
<div class="flex items-center mb-6"> <div class="flex align-items-center mb-4">
<div class="flex flex-col"> <div class="flex flex-column">
<span class="block font-semibold mb-1">Sneaker</span> <span class="block font-semibold mb-1">Sneaker</span>
<span class="text-secondary text-sm">Premium Quality</span> <span class="text-secondary text-sm">Premium Quality</span>
</div> </div>
@ -83,30 +83,30 @@
</div> </div>
<Button label="Add to Cart" icon="pi pi-shopping-cart" severity="secondary" class="w-full"></Button> <Button label="Add to Cart" icon="pi pi-shopping-cart" severity="secondary" class="w-full"></Button>
</div> </div>
<div class="box p-6 animate-fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="flex items-center mb-4"> <li class="flex align-items-center mb-3">
<span class="mr-4"> <span class="mr-3">
<Avatar label="AW" class="w-12 h-12" /> <Avatar label="AW" class="w-3rem h-3rem" />
</span> </span>
<div class="flex flex-col"> <div class="flex flex-column">
<span class="font-bold mb-1">Amanda Williams</span> <span class="font-bold mb-1">Amanda Williams</span>
<span class="text-secondary text-sm">Administrator</span> <span class="text-secondary text-sm">Administrator</span>
</div> </div>
</li> </li>
<li class="flex"> <li class="flex">
<a class="flex items-center p-4 rounded-md w-full hover:surface-hover transition-colors duration-150 cursor-pointer" style="border-radius: '10px'"> <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-home text-xl mr-4"></i> <i class="pi pi-home text-xl mr-3"></i>
<span class="flex flex-col"> <span class="flex flex-column">
<span class="font-bold mb-1">Dashboard</span> <span class="font-bold mb-1">Dashboard</span>
<span class="m-0 text-secondary text-sm">Control Panel</span> <span class="m-0 text-secondary text-sm">Control Panel</span>
</span> </span>
</a> </a>
</li> </li>
<li class="flex"> <li class="flex">
<a class="flex items-center p-4 rounded-md w-full hover:surface-hover transition-colors duration-150 cursor-pointer" style="border-radius: '10px'"> <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-envelope text-xl mr-4"></i> <i class="pi pi-envelope text-xl mr-3"></i>
<span class="flex flex-col"> <span class="flex flex-column">
<span class="font-bold mb-1">Inbox</span> <span class="font-bold mb-1">Inbox</span>
<span class="m-0 text-secondary text-sm">View Messages</span> <span class="m-0 text-secondary text-sm">View Messages</span>
</span> </span>
@ -115,9 +115,9 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="box p-6 animate-fadein animation-duration-500"> <div class="box p-4 fadein animation-duration-500">
<div class="flex justify-between items-center mb-8"> <div class="flex justify-content-between align-items-center mb-5">
<span class="inline-flex items-center"> <span class="inline-flex align-items-center">
<Checkbox id="cbox" v-model="checked" :binary="true" /> <Checkbox id="cbox" v-model="checked" :binary="true" />
<label for="cbox" class="ml-2">Confirm</label> <label for="cbox" class="ml-2">Confirm</label>
</span> </span>

32
components/landing/TemplateSection.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<section class="landing-templates theme-dark pt-20 pb-20"> <section class="landing-templates theme-dark py-8">
<div class="section-header relative z-30">Templates</div> <div class="section-header relative z-3">Templates</div>
<p class="section-detail relative z-30">Professionally designed highly customizable application templates to get started in style.</p> <p class="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p>
<div class="flex justify-center mt-6 relative z-30"> <div class="flex justify-content-center mt-4 relative z-3">
<a href="https://www.primefaces.org/store" class="font-semibold p-4 rounded-md flex items-center linkbox active"> <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
<span>Explore All</span> <span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i> <i class="pi pi-arrow-right ml-2"></i>
</a> </a>
</div> </div>
<section :class="['templates flex justify-center items-center flex-col mt-7', { 'templates-animation': setAnimation }]"> <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]">
<div class="flex md:flex-row flex-col gap-6 lg:gap-0"> <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
<div class="template-block block-5 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('verona') }"> <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('verona') }">
<a class="templates-btn" target="_blank" href="https://verona.primevue.org">Verona Preview</a> <a class="templates-btn" target="_blank" href="https://verona.primevue.org">Verona Preview</a>
</div> </div>
<div class="template-block block-2 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('freya') }"> <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
<a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a> <a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a>
</div> </div>
</div> </div>
<div class="flex mt-6 mb-6 md:flex-row flex-col gap-6 lg:gap-0"> <div class="flex my-4 md:flex-row flex-column gap-4 lg:gap-0">
<div class="template-block block-3 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('atlantis') }"> <div class="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }">
<a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a> <a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a>
</div> </div>
<div class="template-block block-middle border-0 border-none box-shadow-none mr-2 hidden lg:flex justify-center items-center flex-col"> <div class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column">
<img class="img-1" :src="templateImg()" height="110" /> <img class="img-1" :src="templateImg()" height="110" />
</div> </div>
<div class="template-block block-4 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('apollo') }"> <div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }">
<a class="templates-btn" target="_blank" href="https://apollo.primevue.org">Apollo Preview</a> <a class="templates-btn" target="_blank" href="https://apollo.primevue.org">Apollo Preview</a>
</div> </div>
</div> </div>
<div class="flex md:flex-row flex-col gap-6 lg:gap-0"> <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
<div class="template-block block-1 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('diamond') }"> <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
<a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a> <a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a>
</div> </div>
<div class="template-block block-6 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('ultima') }"> <div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
<a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a> <a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a>
</div> </div>
</div> </div>

12
components/landing/ThemeSection.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<section class="landing-themes pt-20 pb-20"> <section class="landing-themes py-8">
<div class="section-header">Components</div> <div class="section-header">Components</div>
<p class="section-detail">The most complete UI component library for Vue.js based on a design-agnostic infrastructure.</p> <p class="section-detail">The most complete UI component library for Vue.js based on a design-agnostic infrastructure.</p>
<div class="themes-main flex mt-16 justify-center pl-8 pr-8 lg:pl-20 lg:pr-20"> <div class="themes-main flex mt-7 justify-content-center px-5 lg:px-8">
<div class="box line-clamp-1 z-10 p-8 table-container"> <div class="box overflow-hidden z-1 p-5 table-container">
<DataTable <DataTable
v-model:selection="selectedCustomers" v-model:selection="selectedCustomers"
v-model:filters="filters" v-model:filters="filters"
@ -19,9 +19,9 @@
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
> >
<template #header> <template #header>
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center"> <div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
<h5 class="m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<IconField class="mt-4 sm:mt-0 w-full sm:w-auto"> <IconField class="mt-3 sm:mt-0 w-full sm:w-auto">
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -45,7 +45,7 @@
</Column> </Column>
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem"> <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex items-center gap-2"> <div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" /> <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" />
<span>{{ data.representative.name }}</span> <span>{{ data.representative.name }}</span>
</div> </div>

14
components/landing/UsersSection.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<section class="landing-users pt-20 pb-20 pl-4 pr-4 lg:pl-20 lg:pr-20"> <section class="landing-users py-8 px-3 lg:px-8">
<div class="section-header">Who Uses</div> <div class="section-header">Who Uses</div>
<p class="section-detail"> <p class="section-detail">
PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself. PrimeTek libraries have reached over <span class="font-semibold animated-text relative white-space-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
</p> </p>
<div class="flex justify-center items-center mt-6"> <div class="flex justify-content-center align-items-center mt-4">
<span class="ml-2"> </span> <span class="ml-2"> </span>
</div> </div>
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-2/3 mt-12 users-container"> <div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container">
<div class="fade-left h-24 w-24 block absolute -top-0 -left-0 z-20"></div> <div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div>
<div class="marquee-wrapper line-clamp-1 flex"> <div class="marquee-wrapper overflow-hidden flex">
<div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`"> <div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`">
<template v-for="user of x.slicedUsers" :key="user"> <template v-for="user of x.slicedUsers" :key="user">
<div class="w-full"> <div class="w-full">
@ -18,7 +18,7 @@
</template> </template>
</div> </div>
</div> </div>
<div class="fade-right h-24 w-24 block absolute -top-0 -right-0 z-20"></div> <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
</div> </div>
</section> </section>
</template> </template>

2
tailwind.config.js
View File

@ -1,7 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: 'class', darkMode: 'class',
content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './pages/**/*.{js,vue,ts}', './error.vue'], content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
theme: { theme: {
extend: { extend: {
colors: { colors: {