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

Fixed material light theme switch, cosmetics on docs

pull/3774/head
Cagatay Civici 2023-03-20 13:04:29 +03:00
parent 2ce5ef2771
commit 31a271b1a4
5 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/styles/layout/_sidebar.scss
View File

@ -88,6 +88,11 @@
background-color: var(--highlight-bg); background-color: var(--highlight-bg);
color: var(--highlight-text-color); color: var(--highlight-text-color);
&:hover {
background-color: var(--highlight-bg);
color: var(--highlight-text-color);
}
> .menu-icon { > .menu-icon {
i { i {
color: var(--highlight-text-color); color: var(--highlight-text-color);

82
layouts/AppConfigurator.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config-sidebar w-full sm:w-30rem" position="right"> <Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config w-full sm:w-30rem" position="right">
<div class="p-2"> <div class="p-2">
<section class="mb-5"> <section class="mb-5">
<h3>Component Scale</h3> <h3>Component Scale</h3>
@ -35,25 +35,25 @@
<h4>Bootstrap</h4> <h4>Bootstrap</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('bootstrap4-light-blue')"> <button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Blue</span> <span class="white-space-nowrap">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('bootstrap4-light-purple')"> <button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Purple</span> <span class="white-space-nowrap">Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('bootstrap4-dark-blue', true)"> <button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Blue</span> <span class="white-space-nowrap">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('bootstrap4-dark-purple', true)"> <button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Purple</span> <span class="white-space-nowrap">Purple</span>
@ -63,25 +63,25 @@
<h4>Material Design</h4> <h4>Material Design</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('md-light-indigo', true)"> <button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('md-light-deeppurple', true)"> <button class="p-link h-3rem" @click="changeTheme('md-light-deeppurple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap">Deep Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('md-dark-indigo', true)"> <button class="p-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('md-dark-purple', true)"> <button class="p-link h-3rem" @click="changeTheme('md-dark-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap">Deep Purple</span>
@ -91,25 +91,25 @@
<h4>Material Design Compact</h4> <h4>Material Design Compact</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('md-light-indigo')"> <button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('mdc-light-deeppurple')"> <button class="p-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap">Deep Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('mdc-dark-indigo', true)"> <button class="p-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('mdc-dark-deeppurple', true)"> <button class="p-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap">Deep Purple</span>
@ -119,7 +119,7 @@
<h4>Tailwind</h4> <h4>Tailwind</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('tailwind-light')"> <button class="p-link h-3rem" @click="changeTheme('tailwind-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Tailwind Light</span> <span class="white-space-nowrap">Tailwind Light</span>
@ -129,7 +129,7 @@
<h4>Fluent UI</h4> <h4>Fluent UI</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('fluent-light')"> <button class="p-link h-3rem" @click="changeTheme('fluent-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Blue</span> <span class="white-space-nowrap">Blue</span>
@ -139,49 +139,49 @@
<h4>PrimeOne Design</h4> <h4>PrimeOne Design</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-light-indigo')"> <button class="p-link h-3rem" @click="changeTheme('lara-light-indigo')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Indigo</span> <span class="white-space-nowrap">Lara Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-light-blue')"> <button class="p-link h-3rem" @click="changeTheme('lara-light-blue')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Blue</span> <span class="white-space-nowrap">Lara Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-light-purple')"> <button class="p-link h-3rem" @click="changeTheme('lara-light-purple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Purple</span> <span class="white-space-nowrap">Lara Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-light-teal')"> <button class="p-link h-3rem" @click="changeTheme('lara-light-teal')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Teal</span> <span class="white-space-nowrap">Lara Teal</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-dark-indigo', true)"> <button class="p-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Indigo</span> <span class="white-space-nowrap">Lara Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-dark-blue', true)"> <button class="p-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Blue</span> <span class="white-space-nowrap">Lara Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-dark-purple', true)"> <button class="p-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Purple</span> <span class="white-space-nowrap">Lara Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('lara-dark-teal', true)"> <button class="p-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Lara Teal</span> <span class="white-space-nowrap">Lara Teal</span>
@ -191,37 +191,37 @@
<h4>Misc</h4> <h4>Misc</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('soho-light')"> <button class="p-link h-3rem" @click="changeTheme('soho-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Soho Light</span> <span class="white-space-nowrap">Soho Light</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('soho-dark', true)"> <button class="p-link h-3rem" @click="changeTheme('soho-dark', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Soho Dark</span> <span class="white-space-nowrap">Soho Dark</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('viva-light')"> <button class="p-link h-3rem" @click="changeTheme('viva-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Viva Light</span> <span class="white-space-nowrap">Viva Light</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('viva-dark', true)"> <button class="p-link h-3rem" @click="changeTheme('viva-dark', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Viva Dark</span> <span class="white-space-nowrap">Viva Dark</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('mira')"> <button class="p-link h-3rem" @click="changeTheme('mira')">
<img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Mira</span> <span class="white-space-nowrap">Mira</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('nano')"> <button class="p-link h-3rem" @click="changeTheme('nano')">
<img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Nano</span> <span class="white-space-nowrap">Nano</span>
@ -231,73 +231,73 @@
<h4>PrimeOne Design - Legacy</h4> <h4>PrimeOne Design - Legacy</h4>
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('saga-blue')"> <button class="p-link h-3rem" @click="changeTheme('saga-blue')">
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-blue.png" alt="Saga Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/saga-blue.png" alt="Saga Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Saga Blue</span> <span class="white-space-nowrap">Saga Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('saga-green')"> <button class="p-link h-3rem" @click="changeTheme('saga-green')">
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Saga Green</span> <span class="white-space-nowrap">Saga Green</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('saga-orange')"> <button class="p-link h-3rem" @click="changeTheme('saga-orange')">
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-orange.png" alt="Saga Orange" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/saga-orange.png" alt="Saga Orange" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Saga Orange</span> <span class="white-space-nowrap">Saga Orange</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('saga-purple')"> <button class="p-link h-3rem" @click="changeTheme('saga-purple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-purple.png" alt="Saga Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/saga-purple.png" alt="Saga Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Saga Purple</span> <span class="white-space-nowrap">Saga Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('vela-blue', true)"> <button class="p-link h-3rem" @click="changeTheme('vela-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-blue.png" alt="Vela Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/vela-blue.png" alt="Vela Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Vela Blue</span> <span class="white-space-nowrap">Vela Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('vela-green', true)"> <button class="p-link h-3rem" @click="changeTheme('vela-green', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-green.png" alt="Vela Green" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/vela-green.png" alt="Vela Green" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Vela Green</span> <span class="white-space-nowrap">Vela Green</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('vela-orange', true)"> <button class="p-link h-3rem" @click="changeTheme('vela-orange', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-orange.png" alt="Vela Orange" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/vela-orange.png" alt="Vela Orange" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Vela Orange</span> <span class="white-space-nowrap">Vela Orange</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('vela-purple', true)"> <button class="p-link h-3rem" @click="changeTheme('vela-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-purple.png" alt="Vela Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/vela-purple.png" alt="Vela Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Vela Purple</span> <span class="white-space-nowrap">Vela Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('arya-blue', true)"> <button class="p-link h-3rem" @click="changeTheme('arya-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-blue.png" alt="Arya Blue" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/arya-blue.png" alt="Arya Blue" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Arya Blue</span> <span class="white-space-nowrap">Arya Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('arya-green', true)"> <button class="p-link h-3rem" @click="changeTheme('arya-green', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-green.png" alt="Arya Green" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/arya-green.png" alt="Arya Green" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Arya Green</span> <span class="white-space-nowrap">Arya Green</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('arya-orange', true)"> <button class="p-link h-3rem" @click="changeTheme('arya-orange', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-orange.png" alt="Arya Orange" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/arya-orange.png" alt="Arya Orange" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Arya Orange</span> <span class="white-space-nowrap">Arya Orange</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="p-link" @click="changeTheme('arya-purple', true)"> <button class="p-link h-3rem" @click="changeTheme('arya-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" class="w-3rem border-round" />
</button> </button>
<span class="white-space-nowrap">Arya Purple</span> <span class="white-space-nowrap">Arya Purple</span>

2
layouts/AppTopBar.vue
View File

@ -22,7 +22,7 @@
</a> </a>
</li> </li>
<li> <li>
<button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300" @click="onConfigButtonClick"> <button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
<i class="pi pi-cog"></i> <i class="pi pi-cog"></i>
</button> </button>
</li> </li>

4
pages/support/index.vue
View File

@ -5,7 +5,7 @@
<div class="flex flex-column xl:flex-row mb-5 gap-5"> <div class="flex flex-column xl:flex-row mb-5 gap-5">
<div class="card xl:w-3 m-0 relative overflow-hidden"> <div class="card xl:w-3 m-0 relative overflow-hidden">
<i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i> <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
<div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div> <div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
<p class="m-0 line-height-3 relative text-lg text-800"> <p class="m-0 line-height-3 relative text-lg text-800">
<a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-semibold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-semibold hover:underline text-primary">Discord</a> are <a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-semibold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-semibold hover:underline text-primary">Discord</a> are
where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although
@ -13,7 +13,7 @@
</p> </p>
</div> </div>
<div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')"> <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
<div class="text-xl font-semibold mb-3">PRO Support</div> <div class="text-2xl font-semibold mb-3">PRO Support</div>
<p class="m-0 line-height-3 text-lg"> <p class="m-0 line-height-3 text-lg">
With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed to With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed to
post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your organization. post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your organization.

2
pages/uikit/index.vue
View File

@ -275,7 +275,7 @@
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">All updates will be totally free of charge for existing customers for an unlimited period.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
</div> </div>
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-12 lg:col-4 px-2 lg:px-5">
<div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800"> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff. Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
</p> </p>