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

Merge branch 'prod'

pull/7063/merge
Cagatay Civici 2025-02-14 21:34:49 +03:00
parent 934350b4be 0c286f3795
commit 18d8a80a9b
13 changed files with 215 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/assets/data/news.json
View File

@ -1,7 +1,7 @@
{
"id": 74,
"content": "Introducing the Genesis Template! 🎉",
"linkText": "View Demo",
"linkHref": "https://genesis.primevue.org",
"id": 75,
"content": "PrimeBlocks Q1 2025 Update is here with 500+ Components! 🎉",
"linkText": "Discover Now",
"linkHref": "https://primeblocks.org",
"target": "_blank"
}

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

@ -76,7 +76,7 @@ export default {
cancelInterval: false,
hoveredID: null,
visible: false,
animationSeconds: 5000
animationSeconds: 8000
};
},
mounted() {

68
apps/showcase/components/template/logo/PoseidonLogo.vue
View File

File diff suppressed because one or more lines are too long

182
apps/showcase/pages/roadmap/index.vue
View File

@ -8,7 +8,7 @@
<div class="doc-intro">
<h1>Roadmap</h1>
<p>
At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2024 with the community. These are planned to be implemented in parallel to the regular
At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2025 with the community. These are planned to be implemented in parallel to the regular
maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support.
</p>
</div>
@ -28,70 +28,56 @@
<div class="shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
<p class="mt-0 mb-4 leading-normal">POC work for new theming.</p>
<h2 class="text-lg font-bold mt-0 mb-2">New Theme Editor</h2>
<p class="mt-0 mb-4 leading-normal">Advanced visual theme designer with support for the entire design token set, Figma to code and cloud storage.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
<div class="bg-blue-500 rounded" style="width: 95%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
<p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
<h2 class="text-lg font-bold mt-0 mb-2">@primeuix/themes</h2>
<p class="mt-0 mb-4 leading-normal">Migrate to the new theming package that is shared between all Prime UI libraries.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
<div class="bg-blue-500 rounded" style="width: 95%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
<p class="mt-0 mb-4 leading-normal">Meter, Drawer, Content for Stepper.</p>
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind v4</h2>
<p class="mt-0 mb-4 leading-normal">Update styled mode integration to support Tailwind v4.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
<p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
<div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">V4</h2>
<p class="mt-0 mb-4 leading-normal">Next-Gen version with the new design token based theming.</p>
<h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utilities</h2>
<p class="mt-0 mb-4 leading-normal">Drag and Drop utilities implemented as Vue directives.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Event Calendar</h2>
<p class="mt-0 mb-4 leading-normal">Calendar component to schedule and manage events. First component of the PrimeVue+ Suite.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Form Library</h2>
<p class="mt-0 mb-4 leading-normal">Built-in form library with validations.</p>
<h2 class="text-lg font-bold mt-0 mb-2">PrimeVue+</h2>
<p class="mt-0 mb-4 leading-normal">Advanced UI suite with complex enterprise grade components including Data Grid, Text Editor, Charts, TimeLine, PDF Viewer...</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
<p class="mt-0 mb-4 leading-normal">Simplified usage in unstyled mode.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">RTL Support</h2>
<p class="mt-0 mb-4 leading-normal">Right-to-left layout option for components.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">PrimeVue+ Suite -> 2025</h2>
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Plot Charts, Graphs, PDF Viewer, Event Calendar, Timeline, Html Editor.</p>
<h2 class="text-lg font-bold mt-0 mb-2">PrimeVue+</h2>
<p class="mt-0 mb-4 leading-normal">Advanced UI suite with complex enterprise grade components including Data Grid, Text Editor, Charts, TimeLine, PDF Viewer...</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div>
@ -100,58 +86,23 @@
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 1</h2>
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
<div class="bg-surface-200 rounded">
<div class="bg-indigo-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 2</h2>
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
<div class="bg-surface-200 rounded">
<div class="bg-indigo-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
<p class="mt-0 mb-4 leading-normal">Build a Figma plugin to generate themes from UI Kit.</p>
<div class="bg-surface-200 rounded">
<h2 class="text-lg font-bold mt-0 mb-2">Updates to Sync PrimeVue Design Tokens</h2>
<p class="mt-0 mb-4 leading-normal">Continuous updates to sync the design tokens in Figma with the theme code.</p>
<div class="bg-surface-200 rounded invisible">
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
<p class="mt-0 mb-4 leading-normal">Interactive component viewer to explore tokens and pt sections.</p>
<div class="bg-surface-200 rounded">
<div class="bg-teal-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="shrink-0 p-4 bg-violet-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">TEMPLATES</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">V4 Update</h2>
<p class="mt-0 mb-4 leading-normal">Update all templates to PrimeVue v4, replace PrimeFlex demos with Tailwind.</p>
<h2 class="text-lg font-bold mt-0 mb-2">Poseidon Remaster</h2>
<p class="mt-0 mb-4 leading-normal">Remastered version of Poseidon with a brand new design</p>
<div class="bg-surface-200 rounded">
<div class="bg-violet-500 rounded" style="width: 100%; height: 4px"></div>
</div>
@ -159,57 +110,66 @@
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Genesis</h2>
<p class="mt-0 mb-4 leading-normal">Brand new multi-purpose template.</p>
<h2 class="text-lg font-bold mt-0 mb-2">Avalon Remaster</h2>
<p class="mt-0 mb-4 leading-normal">Redesigned version of Avalon with a fresh look and feel.</p>
<div class="bg-surface-200 rounded">
<div class="bg-teal-500 rounded" style="width: 50%; height: 4px"></div>
<div class="bg-violet-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Demo Content</h2>
<p class="mt-0 mb-4 leading-normal">Update the included shared demo pages such as Mail, Chat, File Manager, CMS and more.</p>
<div class="bg-surface-200 rounded">
<div class="bg-violet-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Sakai PRO</h2>
<p class="mt-0 mb-4 leading-normal">Advanced version of the free Sakai template with additional features.</p>
<div class="bg-surface-200 rounded">
<div class="bg-violet-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
<p class="mt-0 mb-4 leading-normal">Migrate Blocks to v4 and Tailwind CSS.</p>
<div class="bg-surface-200 rounded">
<div class="bg-orange-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
<p class="mt-0 mb-4 leading-normal">Implement an app to access the blocks instead of an offline download.</p>
<h2 class="text-lg font-bold mt-0 mb-2">Remastered Marketing Blocks with 30+ New blocks</h2>
<p class="mt-0 mb-4 leading-normal">Enhanced all marketing blocks and include 30 new blocks.</p>
<div class="bg-surface-200 rounded">
<div class="bg-orange-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Aura Theme</h2>
<p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Remastered Application and E-Commerce Blocks</h2>
<p class="mt-0 mb-4 leading-normal">Improve application and e-commerce blocks and include new blocks.</p>
<div class="bg-surface-200 rounded">
<div class="bg-pink-500 rounded" style="width: 100%; height: 4px"></div>
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
<p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
<div class="bg-surface-200 rounded">
<div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Blocks</h2>
<p class="mt-0 mb-4 leading-normal">Add all-new blocks.</p>
<div class="bg-surface-200 rounded">
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Blocks</h2>
<p class="mt-0 mb-4 leading-normal">Add all-new blocks.</p>
<div class="bg-surface-200 rounded">
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>

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

@ -200,7 +200,7 @@ export default {
template and requires a separate purchase.`,
description4: `
Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/file/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/">preview the Figma file</a>
<a href="https://www.figma.com/file/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/" target="_blank" rel="noopener noreferrer">preview the Figma file</a>
before the purchase. Note that PrimeVue UI components are excluded from the Apollo Figma file as they are available in
<PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}

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

@ -171,7 +171,7 @@ export default {
template and requires a separate purchase.`,
description4: `
Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/file/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
<a href="https://www.figma.com/file/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1" target="_blank" rel="noopener noreferrer">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
Atlantis Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},

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

@ -201,7 +201,7 @@ export default {
template and requires a separate purchase.`,
description4: `
Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/file/LuzEn29BAxr03T2vMQ5A1y/Preview-%7C-Avalon-1.0.0?type=design&mode=design&t=ME7xK2sAYOLoKCrT-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
<a href="https://www.figma.com/file/LuzEn29BAxr03T2vMQ5A1y/Preview-%7C-Avalon-1.0.0?type=design&mode=design&t=ME7xK2sAYOLoKCrT-1" target="_blank" rel="noopener noreferrer">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
Avalon Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},

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

@ -177,7 +177,7 @@ export default {
template and requires a separate purchase.`,
description4: `
Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/design/3BgdXCQjva5nUEO8OidU1B/Preview-%7C-Diamond?node-id=0-1&t=KdfljgRtYLzFPfKL-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Diamond Figma file as they
<a href="https://www.figma.com/design/3BgdXCQjva5nUEO8OidU1B/Preview-%7C-Diamond?node-id=0-1&t=KdfljgRtYLzFPfKL-1 target="_blank" rel="noopener noreferrer"">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Diamond Figma file as they
are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},

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

@ -171,7 +171,7 @@ export default {
template and requires a separate purchase.`,
description4: `
Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/file/eYBoRNff6GPTlrgYZaMStp/Preview-%7C-Freya-2022?node-id=0%3A1&t=MGAABDlOnz4QBcEk-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma
<a href="https://www.figma.com/file/eYBoRNff6GPTlrgYZaMStp/Preview-%7C-Freya-2022?node-id=0%3A1&t=MGAABDlOnz4QBcEk-1" target="_blank" rel="noopener noreferrer">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma
file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},

2
apps/showcase/pages/templates/genesis/index.vue
View File

@ -162,7 +162,7 @@ export default {
<a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the template and requires a separate purchase.`,
description4: `
Genesis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/design/bGujrJyznnSatJFMtkXbTN/Preview-%7C-Genesis?node-id=0-1&t=etuXAwkUAEuhJ3p0-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are
<a href="https://www.figma.com/design/bGujrJyznnSatJFMtkXbTN/Preview-%7C-Genesis?node-id=0-1&t=etuXAwkUAEuhJ3p0-1" target="_blank" rel="noopener noreferrer">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are
excluded from the Genesis Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},

68
apps/showcase/pages/templates/index.vue
View File

@ -26,6 +26,36 @@
<h2>Admin Templates</h2>
<div class="templates-page grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://sakai.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
</a>
<div class="flex gap-4 mt-4">
<a href="https://sakai.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
<span class="p-button-label">Preview</span>
</a>
<PrimeVueNuxtLink to="/templates/sakai" class="p-button p-button-outlined flex-1">
<span class="p-button-label">Learn More</span>
</PrimeVueNuxtLink>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://poseidon.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue-nextgen.jpg" class="w-full" />
</a>
<div class="flex gap-4 mt-4">
<a href="https://poseidon.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
<span class="p-button-label">Preview</span>
</a>
<PrimeVueNuxtLink to="/templates/poseidon" class="p-button p-button-outlined flex-1">
<span class="p-button-label">Learn More</span>
</PrimeVueNuxtLink>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank">
@ -43,14 +73,14 @@
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://sakai.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
<a href="https://diamond.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-remastered-vue.jpg" class="w-full" />
</a>
<div class="flex gap-4 mt-4">
<a href="https://sakai.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
<a href="https://diamond.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
<span class="p-button-label">Preview</span>
</a>
<PrimeVueNuxtLink to="/templates/sakai" class="p-button p-button-outlined flex-1">
<PrimeVueNuxtLink to="/templates/diamond" class="p-button p-button-outlined flex-1">
<span class="p-button-label">Learn More</span>
</PrimeVueNuxtLink>
</div>
@ -101,21 +131,6 @@
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://diamond.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-remastered-vue.jpg" class="w-full" />
</a>
<div class="flex gap-4 mt-4">
<a href="https://diamond.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
<span class="p-button-label">Preview</span>
</a>
<PrimeVueNuxtLink to="/templates/diamond" class="p-button p-button-outlined flex-1">
<span class="p-button-label">Learn More</span>
</PrimeVueNuxtLink>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://verona.primevue.org" rel="noopener noreferrer" target="_blank">
@ -131,21 +146,6 @@
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://poseidon.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
</a>
<div class="flex gap-4 mt-4">
<a href="https://poseidon.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
<span class="p-button-label">Preview</span>
</a>
<PrimeVueNuxtLink to="/templates/poseidon" class="p-button p-button-outlined flex-1">
<span class="p-button-label">Learn More</span>
</PrimeVueNuxtLink>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0">
<a href="https://avalon.primevue.org" rel="noopener noreferrer" target="_blank">

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

@ -26,9 +26,10 @@ export default {
templateHeroData: {
logo: markRaw(PoseidonLogo),
pattern: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/hero-background.png',
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard1.png',
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard2.png',
description: 'A modern and easy to use premium application template with various color schemes.Based on flat design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-hero-1.jpg',
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-hero-2.jpg',
description:
'Experience a modern, user-friendly premium application template featuring a variety of color schemes. Based on flat design principles, it is fully responsive and touch-optimized, built with SASS, CSS3, and HTML5.',
liveHref: 'https://poseidon.primevue.org',
docHref: 'https://poseidon.primevue.org/documentation',
pattern: {
@ -69,39 +70,65 @@ export default {
featuresData: [
{
id: 1,
title: 'Light / Dark / Dim Modes',
description: 'Poseidon offers you 3 uniquely designed layout modes to choose from; Light, Dim, and Dark.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-darkmode.png'
title: 'Light / Dark Modes',
description: 'Poseidon offers light and dark color schemes with alternative color palettes.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-lightdark.png'
},
{
id: 2,
title: 'Component Themes',
description: 'Poseidon offers 12 built-in component themes with dark, light and dim options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-component-themes.png'
description: 'Poseidon offers 17 fully customizable built-in themes featuring two different presets; Aura and Lara.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-component.png'
},
{
id: 3,
title: '3 Menu Orientations',
description: 'Poseidon has 3 menu layouts to choose from; Static, Overlay and Horizontal.',
title: '7 Menu Orientations',
description: 'Poseidon has 7 menu layouts to choose from; Static, Overlay, Horizontal, Compact, Slim, Reveal and Drawer.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-orientations.png',
type: 'inline-animation',
inlineFeaturesData: [
{
id: 1,
title: 'Static',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Static.png'
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-static.png'
},
{
id: 2,
title: 'Overlay',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Overlay.png'
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-overlay.png'
},
{
id: 3,
title: 'Horizontal',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Horizontal.png'
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-horizontal.png'
},
{
id: 4,
title: 'Drawer',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-drawer.png'
},
{
id: 5,
title: 'Slim',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-slim.png'
},
{
id: 6,
title: 'Compact',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-compact.png'
},
{
id: 7,
title: 'Reveal',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-reveal.png'
}
]
},
{
id: 4,
title: 'Application Themes',
description: 'The application layout and components seamlessly complements your brand color.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-layout.png'
}
]
}
@ -121,9 +148,9 @@ export default {
featuresData: [
{
id: 1,
title: 'PrimeFlex CSS Utilities',
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-utilities.png'
title: 'Tailwind CSS',
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-tailwind.png'
},
{
id: 2,
@ -136,6 +163,13 @@ export default {
title: 'PrimeIcons',
description: 'Poseidon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-icons.png'
},
{
id: 4,
title: 'Figma File',
description:
'Poseidon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can <a href="https://www.figma.com/design/eMNbyxsMp3H0PQbMyyGK77/Preview-%7C-Poseidon?node-id=0-1&t=wJRSplRnKvjqju9S-1" target="_blank" rel="noopener noreferrer">preview the Figma file</a> the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Poseidon Figma file as they are available in PrimeOne for Figma only.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-figma.png'
}
]
},
@ -151,8 +185,8 @@ export default {
featuresData: [
{
title: 'Fully Responsive',
description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-features2-responsive.png'
description: 'Poseidon is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-responsive.png'
},
{
title: 'Support',
@ -161,12 +195,6 @@ export default {
<a href="https://github.com/orgs/primefaces/discussions/categories/primevue-templates" class="doc-link">Forum</a>.`,
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
},
{
title: 'Top Notch Quality',
description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
},
{
title: 'Cross Browser Compatible',
description: 'First class support for Firefox, Safari, Chrome and Edge.',
@ -182,7 +210,12 @@ export default {
{
title: 'Mobile Experience',
description: 'Touch optimized enhanced mobile experience with responsive design.',
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-mobile.png'
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-mobile.png'
},
{
title: 'Ready to Use Pages',
description: 'Landing, dashboards, user management, mail, chat, authentication and many more to discover.',
src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/nextgen/poseidon-pages.png'
}
],
displayType: 'vertical'

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

@ -161,7 +161,7 @@ export default {
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
template and requires a separate purchase.`,
description4: `Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
<a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they
<a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750" target="_blank" rel="noopener noreferrer">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they
are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},