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

Convert p-link to px-link

pull/4186/head
Tuğçe Küçükoğlu 2023-07-10 17:42:43 +03:00
parent 6793412a5c
commit 10fb57cc1a
8 changed files with 77 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/styles/layout/_core.scss
View File

@ -74,3 +74,26 @@ input[type="number"] {
.p-toast.p-toast-top-left { .p-toast.p-toast-top-left {
top: 7rem; top: 7rem;
} }
.px-link {
font-size: 1rem;
font-family: var(--font-family);
border-radius: var(--border-radius);
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.px-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: var(--focus-ring);
}
.px-link:disabled {
cursor: default;
}

4
assets/styles/layout/_doc.scss
View File

@ -160,7 +160,7 @@
> .navbar-item-content { > .navbar-item-content {
display: flex; display: flex;
.p-link { .px-link {
padding: 0.25rem 1rem 0.25rem 1rem; padding: 0.25rem 1rem 0.25rem 1rem;
color: var(--text-color); color: var(--text-color);
white-space: nowrap; white-space: nowrap;
@ -178,7 +178,7 @@
> .navbar-item-content { > .navbar-item-content {
border-color: var(--primary-color); border-color: var(--primary-color);
.p-link { .px-link {
font-weight: 700; font-weight: 700;
color: var(--primary-color); color: var(--primary-color);
} }

4
components/doc/DocSectionNav.vue
View File

@ -2,14 +2,14 @@
<ul ref="nav" class="doc-section-nav"> <ul ref="nav" class="doc-section-nav">
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]"> <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
<div class="navbar-item-content"> <div class="navbar-item-content">
<button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button> <button class="px-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
</div> </div>
<template v-if="doc.children"> <template v-if="doc.children">
<ul> <ul>
<li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]"> <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
<div class="navbar-item-content"> <div class="navbar-item-content">
<button class="p-link" @click="onButtonClick(child)"> <button class="px-link" @click="onButtonClick(child)">
{{ child.label }} {{ child.label }}
</button> </button>
</div> </div>

80
layouts/AppConfigurator.vue
View File

@ -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 h-3rem" @click="changeTheme('bootstrap4-light-blue')"> <button class="px-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 h-3rem" @click="changeTheme('bootstrap4-light-purple')"> <button class="px-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 h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)"> <button class="px-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 h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)"> <button class="px-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 h-3rem" @click="changeTheme('md-light-indigo')"> <button class="px-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 h-3rem" @click="changeTheme('md-light-deeppurple')"> <button class="px-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 h-3rem" @click="changeTheme('md-dark-indigo', true)"> <button class="px-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 h-3rem" @click="changeTheme('md-dark-purple', true)"> <button class="px-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 h-3rem" @click="changeTheme('md-light-indigo')"> <button class="px-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 h-3rem" @click="changeTheme('mdc-light-deeppurple')"> <button class="px-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 h-3rem" @click="changeTheme('mdc-dark-indigo', true)"> <button class="px-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 h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)"> <button class="px-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 h-3rem" @click="changeTheme('tailwind-light')"> <button class="px-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 h-3rem" @click="changeTheme('fluent-light')"> <button class="px-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 h-3rem" @click="changeTheme('lara-light-indigo')"> <button class="px-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 h-3rem" @click="changeTheme('lara-light-blue')"> <button class="px-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 h-3rem" @click="changeTheme('lara-light-purple')"> <button class="px-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 h-3rem" @click="changeTheme('lara-light-teal')"> <button class="px-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 h-3rem" @click="changeTheme('lara-dark-indigo', true)"> <button class="px-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 h-3rem" @click="changeTheme('lara-dark-blue', true)"> <button class="px-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 h-3rem" @click="changeTheme('lara-dark-purple', true)"> <button class="px-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 h-3rem" @click="changeTheme('lara-dark-teal', true)"> <button class="px-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 h-3rem" @click="changeTheme('soho-light')"> <button class="px-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 h-3rem" @click="changeTheme('soho-dark', true)"> <button class="px-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 h-3rem" @click="changeTheme('viva-light')"> <button class="px-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 h-3rem" @click="changeTheme('viva-dark', true)"> <button class="px-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 h-3rem" @click="changeTheme('mira')"> <button class="px-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 h-3rem" @click="changeTheme('nano')"> <button class="px-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 h-3rem" @click="changeTheme('saga-blue')"> <button class="px-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 h-3rem" @click="changeTheme('saga-green')"> <button class="px-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 h-3rem" @click="changeTheme('saga-orange')"> <button class="px-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 h-3rem" @click="changeTheme('saga-purple')"> <button class="px-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 h-3rem" @click="changeTheme('vela-blue', true)"> <button class="px-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 h-3rem" @click="changeTheme('vela-green', true)"> <button class="px-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 h-3rem" @click="changeTheme('vela-orange', true)"> <button class="px-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 h-3rem" @click="changeTheme('vela-purple', true)"> <button class="px-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 h-3rem" @click="changeTheme('arya-blue', true)"> <button class="px-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 h-3rem" @click="changeTheme('arya-green', true)"> <button class="px-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 h-3rem" @click="changeTheme('arya-orange', true)"> <button class="px-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 h-3rem" @click="changeTheme('arya-purple', true)"> <button class="px-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/AppMenuItem.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<li v-for="(menuitem, index) in menu" :key="`_root${index}`"> <li v-for="(menuitem, index) in menu" :key="`_root${index}`">
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="p-link"> <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="px-link">
<div class="menu-icon"> <div class="menu-icon">
<i :class="menuitem.icon"></i> <i :class="menuitem.icon"></i>
</div> </div>

8
layouts/AppTopBar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :ref="containerRef" class="layout-topbar"> <div :ref="containerRef" class="layout-topbar">
<div class="layout-topbar-inner"> <div class="layout-topbar-inner">
<button type="button" class="p-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu"> <button type="button" class="px-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
</button> </button>
@ -11,13 +11,13 @@
<li> <li>
<a <a
href="https://github.com/primefaces/primevue" href="https://github.com/primefaces/primevue"
class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary" class="flex px-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
> >
<i class="pi pi-github text-700"></i> <i class="pi pi-github text-700"></i>
</a> </a>
</li> </li>
<li> <li>
<a href="https://discord.gg/gzKFYnpmCY" class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"> <a href="https://discord.gg/gzKFYnpmCY" class="flex px-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
<i class="pi pi-discord text-700"></i> <i class="pi pi-discord text-700"></i>
</a> </a>
</li> </li>
@ -31,7 +31,7 @@
<button <button
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
type="button" type="button"
class="p-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary" class="px-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
> >
<span class="text-900"> {{ versions[0].version }}</span> <span class="text-900"> {{ versions[0].version }}</span>
<span class="ml-2 pi pi-angle-down text-600"></span> <span class="ml-2 pi pi-angle-down text-600"></span>

8
pages/landing/DesignerSection.vue
View File

@ -11,10 +11,10 @@
<div class="p-fluid"> <div class="p-fluid">
<span class="font-semibold block mb-3">Primary</span> <span class="font-semibold block mb-3">Primary</span>
<div> <div>
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button> <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button> <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button> <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
<button type="button" class="border-circle w-2rem h-2rem p-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button> <button type="button" class="border-circle w-2rem h-2rem px-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
</div> </div>
<span class="font-semibold block mt-4 mb-3">Font</span> <span class="font-semibold block mt-4 mb-3">Font</span>

2
pages/landing/ThemeSection.vue
View File

@ -6,7 +6,7 @@
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
<a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primevue.org">more...</a> <a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
</div> </div>
<div <div
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8" class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"