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

Merge aura branch, adds new theme and minor showcase cosmetics

pull/5110/head
Cagatay Civici 2024-01-17 22:56:22 +03:00
parent 5387c214eb
commit 60193987ef
68 changed files with 139835 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/styles/layout/_config.scss
View File

@ -5,16 +5,6 @@
.p-selectbutton {
.p-button {
padding: 0.5rem 1rem;
&:first-child {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
&:last-child {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
}
}

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

@ -40,31 +40,31 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
font-size: 2rem;
font-size: 1.75rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
h3 {
font-size: 1.125rem;
}
h5 {
h4 {
font-size: 1rem;
}
h6 {
h5 {
font-size: .875rem;
}
h6 {
font-size: .75rem;
}
p {
line-height: 1.75;
line-height: 1.5;
margin: 0 0 1rem 0;
}

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

@ -78,7 +78,7 @@
p {
font-size: 1.125rem;
color: var(--surface-900);
color: var(--text-color);
margin: 0;
a {
@ -119,8 +119,8 @@
.doc-section-description {
> p {
font-size: 1.125rem;
color: var(--surface-900);
font-size: 1rem;
color: var(--text-color);
i {
border-radius: 6px;

4
assets/styles/layout/variables/main/_dark.scss
View File

@ -12,6 +12,6 @@
--demo-code-button-color: var(--surface-500);
--demo-code-button-hover-bg: rgba(255,255,255,.1);
--demo-code-button-hover-color: var(--surface-700);
--doc-highlight-text-bg: var(--highlight-bg);
--doc-highlight-text-color: var(--highlight-text-color);
--doc-highlight-text-bg: var(--surface-800);
--doc-highlight-text-color: var(--surface-400);
}

6
assets/styles/layout/variables/main/_light.scss
View File

@ -4,7 +4,7 @@
--topbar-sticky-bg:rgba(255,255,255,.7);
--card-border: 1px solid var(--surface-border);
--card-bg: var(--surface-card);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
--glow-blend: hard-light, multiply;
--topbar-border: rgba(0,0,0,.05);
--mobile-menu-bg: var(--surface-overlay);
@ -12,6 +12,6 @@
--demo-code-button-color: var(--surface-300);
--demo-code-button-hover-bg: rgba(255,255,255,.1);
--demo-code-button-hover-color: var(--surface-100);
--doc-highlight-text-bg: var(--primary-100);
--doc-highlight-text-color: var(--primary-900);
--doc-highlight-text-bg: var(--surface-200);
--doc-highlight-text-color: var(--surface-700);
}

4
components/lib/utils/DomHandler.js
View File

@ -310,6 +310,7 @@ export default {
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight;
element.style.transformOrigin = 'bottom';
element.style.marginTop = 'calc(var(--p-anchor-gutter) * -1)';
if (top < 0) {
top = windowScrollTop;
@ -317,6 +318,7 @@ export default {
} else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
element.style.marginTop = 'calc(var(--p-anchor-gutter))';
}
if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
@ -395,7 +397,7 @@ export default {
getParentNode(element) {
let parent = element?.parentNode;
if (parent && parent instanceof ShadowRoot && parent.host) {
if (parent && parent.host) {
parent = parent.host;
}

8
doc/carousel/VerticalDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
@ -35,7 +35,7 @@ export default {
products: null,
code: {
basic: `
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
@ -57,7 +57,7 @@ export default {
options: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
@ -113,7 +113,7 @@ export default {
composition: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">

145
layouts/AppConfigurator.vue
View File

@ -4,10 +4,10 @@
<section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Scale</span>
<div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
<Button icon="pi pi-minus" @click="decrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[0]" />
<Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="scale === scales[0]" />
<i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === scale }]" />
<Button icon="pi pi-plus" @click="incrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" />
<Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="scale === scales[scales.length - 1]" />
</div>
</section>
@ -28,6 +28,126 @@
<section class="py-4 border-bottom-1 surface-border">
<div class="text-xl font-semibold mb-3">Themes</div>
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="aura Light Teal" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Aura</span>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'green')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'blue')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'purple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'amber')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'teal'), 'hover:border-500 surface-border': !isThemeActive('aura', 'teal') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'teal')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'pink')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'noir')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'lime')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
</button>
<span class="w-3"></span>
<span class="w-3"></span>
</div>
<section class="pt-4 flex align-items-center justify-content-between">
<span class="text-sm">Focus Ring Color</span>
<SelectButton v-model="focusRingColor" :options="focusRingColors" @change="onFocusRingColorChange" optionLabel="label" optionValue="value" :allowEmpty="false" />
</section>
</section>
<section class="py-4 border-bottom-1 surface-border">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Lara</span>
@ -296,6 +416,11 @@ export default {
{ label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' }
],
focusRingColor: 'current',
focusRingColors: [
{ label: 'Current', value: 'current' },
{ label: 'Primary', value: 'primary' }
],
compactMaterial: false,
lightOnlyThemes: ['fluent-light', 'mira', 'nano']
};
@ -391,6 +516,22 @@ export default {
}
return this.$appState.theme === themeName;
},
onFocusRingColorChange(event) {
let root = document.documentElement;
if (event.value === 'current') {
if (this.$appState.darkTheme)
root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
else
root.style.setProperty('--p-focus-ring-color', 'var(--surface-400)');
}
else if (event.value === 'primary') {
if (this.$appState.darkTheme)
root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
else
root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
}
}
},
computed: {

BIN
public/themes/aura-dark-amber/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-amber/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-amber/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-blue/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-blue/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-cyan/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-cyan/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-cyan/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-green/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-green/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-green/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-indigo/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-indigo/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-indigo/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-lime/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-lime/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-lime/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-noir/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-noir/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-noir/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-pink/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-pink/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-pink/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-purple/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-purple/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-purple/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-dark-teal/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-dark-teal/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6982
public/themes/aura-dark-teal/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-amber/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-amber/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-amber/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-blue/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-blue/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-cyan/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-cyan/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-cyan/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-green/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-green/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-green/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-indigo/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-indigo/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-indigo/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-lime/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-lime/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-lime/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-noir/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-noir/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6992
public/themes/aura-light-noir/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-pink/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-pink/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-pink/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-purple/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-purple/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-purple/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/themes/aura-light-teal/fonts/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
public/themes/aura-light-teal/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

6984
public/themes/aura-light-teal/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff