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

Fixed #5727 - Removed utility classes

pull/5756/head
Cagatay Civici 2024-05-13 17:02:20 +03:00
parent caa55a3f9f
commit 45c4fe79bb
32 changed files with 93 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,8 @@
--primary-color: var(--p-primary-color); --primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color); --primary-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color); --primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0); --text-color: var(--p-text-color);
--text-secondary-color: var(--p-surface-400); --text-secondary-color: var(--p-text-muted-color);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%); --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
--glow-blend: hard-light, color-dodge; --glow-blend: hard-light, color-dodge;
--topbar-sticky-background:rgba(0,0,0,.3); --topbar-sticky-background:rgba(0,0,0,.3);

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

@ -3,8 +3,8 @@
--primary-color: var(--p-primary-color); --primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color); --primary-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color); --primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-700); --text-color: var(--p-text-color);
--text-secondary-color: var(--p-surface-500); --text-secondary-color: var(--p-text-muted-color);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png); --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
--glow-blend: hard-light, multiply; --glow-blend: hard-light, multiply;
--topbar-sticky-background:rgba(255,255,255,.7); --topbar-sticky-background:rgba(255,255,255,.7);

2
components/lib/badgedirective/BadgeDirective.spec.js
View File

@ -4,7 +4,7 @@ import BadgeDirective from './BadgeDirective';
describe('directive badge should exist', () => { describe('directive badge should exist', () => {
it('positioned badge', () => { it('positioned badge', () => {
const wrapper = mount({ const wrapper = mount({
template: '<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>', template: '<i class="pi pi-bell mr-4" style="font-size: 2rem" v-badge="2"></i>',
directives: { directives: {
badge: BadgeDirective badge: BadgeDirective
} }

119
components/lib/base/style/BaseStyle.js
View File

@ -3,72 +3,14 @@ import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils'; import { ObjectUtils } from 'primevue/utils';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-component, * {
.p-component * {
box-sizing: border-box; box-sizing: border-box;
} }
.p-hidden-space {
visibility: hidden;
}
.p-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.p-disabled,
.p-disabled * {
cursor: default;
pointer-events: none;
user-select: none;
}
.p-component-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: ${dt('mask.color')};
}
.p-unselectable-text { .p-unselectable-text {
user-select: none; user-select: none;
} }
.p-sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.p-link {
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-link:disabled {
cursor: default;
}
/* Non vue overlay animations */ /* Non vue overlay animations */
.p-connected-overlay { .p-connected-overlay {
opacity: 0; opacity: 0;
@ -128,31 +70,16 @@ const theme = ({ dt }) => `
transition: max-height 1s ease-in-out; transition: max-height 1s ease-in-out;
} }
* { .p-disabled,
box-sizing: border-box; .p-disabled * {
} cursor: default;
pointer-events: none;
.p-component { user-select: none;
font-size: 1rem;
font-weight: normal;
}
.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
transition-duration: ${dt('transition.duration')};
} }
.p-disabled, .p-disabled,
.p-component:disabled { .p-component:disabled {
opacity: 0.6; opacity: ${dt('disabled.opacity')};
}
.p-error {
color: #f87171;
}
.p-text-secondary {
color: ${dt('text.muted.color')};
} }
.pi { .pi {
@ -164,28 +91,26 @@ const theme = ({ dt }) => `
height: ${dt('icon.size')}; height: ${dt('icon.size')};
} }
.p-link { .p-overlay-mask {
font-family: inherit; background-color: rgba(0, 0, 0, 0.4);
font-feature-settings: inherit; transition-duration: ${dt('transition.duration')};
font-size: 1rem; position: fixed;
border-radius: 6px; top: 0;
outline-color: transparent; left: 0;
} width: 100%;
.p-link:focus-visible { height: 100%;
outline: 1px solid ${dt('focus.ring.color')}; color: ${dt('mask.color')};
outline-offset: 2px;
box-shadow: none;
} }
.p-component-overlay-enter { .p-overlay-mask-enter {
animation: p-component-overlay-enter-animation 150ms forwards; animation: p-overlay-mask-enter-animation 150ms forwards;
} }
.p-component-overlay-leave { .p-overlay-mask-leave {
animation: p-component-overlay-leave-animation 150ms forwards; animation: p-overlay-mask-leave-animation 150ms forwards;
} }
@keyframes p-component-overlay-enter-animation { @keyframes p-overlay-mask-enter-animation {
from { from {
background: transparent; background: transparent;
} }
@ -193,7 +118,7 @@ const theme = ({ dt }) => `
background: ${dt('mask.background')}; background: ${dt('mask.background')};
} }
} }
@keyframes p-component-overlay-leave-animation { @keyframes p-overlay-mask-leave-animation {
from { from {
background: ${dt('mask.background')}; background: ${dt('mask.background')};
} }

4
components/lib/blockui/BlockUI.vue
View File

@ -32,7 +32,7 @@ export default {
}, },
methods: { methods: {
block() { block() {
let styleClass = 'p-blockui-mask p-component-overlay p-component-overlay-enter'; let styleClass = 'p-blockui-mask p-overlay-mask p-overlay-mask-enter';
if (this.fullScreen) { if (this.fullScreen) {
styleClass += ' p-blockui-mask-document'; styleClass += ' p-blockui-mask-document';
@ -75,7 +75,7 @@ export default {
this.$emit('block'); this.$emit('block');
}, },
unblock() { unblock() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
if (DomHandler.hasCSSAnimation(this.mask) > 0) { if (DomHandler.hasCSSAnimation(this.mask) > 0) {
this.mask.addEventListener('animationend', () => { this.mask.addEventListener('animationend', () => {

4
components/lib/blockui/style/BlockUIStyle.js
View File

@ -9,11 +9,11 @@ const theme = ({ dt }) => `
border-radius: ${dt('blockui.border.radius')}; border-radius: ${dt('blockui.border.radius')};
} }
.p-blockui-mask.p-component-overlay { .p-blockui-mask.p-overlay-mask {
position: absolute; position: absolute;
} }
.p-blockui-mask-document.p-component-overlay { .p-blockui-mask-document.p-overlay-mask {
position: fixed; position: fixed;
} }
`; `;

2
components/lib/datatable/style/DataTableStyle.js
View File

@ -589,7 +589,7 @@ const classes = {
'p-datatable-lg': props.size === 'large' 'p-datatable-lg': props.size === 'large'
} }
], ],
mask: 'p-datatable-mask p-component-overlay', mask: 'p-datatable-mask p-overlay-mask',
loadingIcon: 'p-datatable-loading-icon', loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header', header: 'p-datatable-header',
pcPaginator: ({ position }) => 'p-datatable-paginator-' + position, pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,

2
components/lib/dialog/Dialog.vue
View File

@ -154,7 +154,7 @@ export default {
}, },
onBeforeLeave() { onBeforeLeave() {
if (this.modal) { if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
} }
}, },
onLeave() { onLeave() {

2
components/lib/dialog/style/DialogStyle.js
View File

@ -158,7 +158,7 @@ const classes = {
return [ return [
'p-dialog-mask', 'p-dialog-mask',
{ {
'p-component-overlay p-component-overlay-enter': props.modal 'p-overlay-mask p-overlay-mask-enter': props.modal
}, },
pos ? `p-dialog-${pos}` : '' pos ? `p-dialog-${pos}` : ''
]; ];

2
components/lib/drawer/Drawer.vue
View File

@ -100,7 +100,7 @@ export default {
}, },
onBeforeLeave() { onBeforeLeave() {
if (this.modal) { if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
} }
}, },
onLeave() { onLeave() {

2
components/lib/drawer/style/DrawerStyle.js
View File

@ -136,7 +136,7 @@ const classes = {
return [ return [
'p-drawer-mask', 'p-drawer-mask',
{ {
'p-component-overlay p-component-overlay-enter': props.modal, 'p-overlay-mask p-overlay-mask-enter': props.modal,
'p-drawer-open': instance.containerVisible, 'p-drawer-open': instance.containerVisible,
'p-drawer-full': instance.fullScreen 'p-drawer-full': instance.fullScreen
}, },

2
components/lib/galleria/Galleria.vue
View File

@ -55,7 +55,7 @@ export default {
this.focus(); this.focus();
}, },
onBeforeLeave() { onBeforeLeave() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);

2
components/lib/galleria/style/GalleriaStyle.js
View File

@ -415,7 +415,7 @@ const theme = ({ dt }) => `
`; `;
const classes = { const classes = {
mask: 'p-galleria-mask p-component-overlay p-component-overlay-enter', mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
root: ({ instance }) => { root: ({ instance }) => {
const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition); const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition); const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);

2
components/lib/image/Image.vue
View File

@ -158,7 +158,7 @@ export default {
this.$emit('show'); this.$emit('show');
}, },
onBeforeLeave() { onBeforeLeave() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
}, },
onLeave() { onLeave() {
DomHandler.unblockBodyScroll(); DomHandler.unblockBodyScroll();

2
components/lib/image/style/ImageStyle.js
View File

@ -131,7 +131,7 @@ const classes = {
], ],
previewMask: 'p-image-preview-mask', previewMask: 'p-image-preview-mask',
previewIcon: 'p-image-preview-icon', previewIcon: 'p-image-preview-icon',
mask: 'p-image-mask p-component-overlay p-component-overlay-enter', mask: 'p-image-mask p-overlay-mask p-overlay-mask-enter',
toolbar: 'p-image-toolbar', toolbar: 'p-image-toolbar',
rotateRightButton: 'p-image-action p-image-rotate-right-button', rotateRightButton: 'p-image-action p-image-rotate-right-button',
rotateLeftButton: 'p-image-action p-image-rotate-left-button', rotateLeftButton: 'p-image-action p-image-rotate-left-button',

1
components/lib/themes/aura/index.js
View File

@ -127,6 +127,7 @@ export default {
offset: '2px', offset: '2px',
shadow: 'none' shadow: 'none'
}, },
disabledOpacity: '0.6',
iconSize: '1rem', iconSize: '1rem',
anchorGutter: '2px', anchorGutter: '2px',
primary: { primary: {

1
components/lib/themes/lara/index.js
View File

@ -126,6 +126,7 @@ export default {
color: 'transparent', color: 'transparent',
offset: '0' offset: '0'
}, },
disabledOpacity: '0.6',
iconSize: '1rem', iconSize: '1rem',
anchorGutter: '2px', anchorGutter: '2px',
primary: { primary: {

3
components/lib/timeline/Timeline.spec.js
View File

@ -52,7 +52,7 @@ describe('customized timeline', () => {
slots: { slots: {
opposite: ` opposite: `
<template #opposite="slotProps"> <template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small> <small>{{slotProps.item.date}}</small>
</template> </template>
`, `,
marker: ` marker: `
@ -77,7 +77,6 @@ describe('customized timeline', () => {
it('should have templating', () => { it('should have templating', () => {
const firstItem = wrapper.findAll('.p-timeline-event')[0]; const firstItem = wrapper.findAll('.p-timeline-event')[0];
expect(firstItem.find('.p-text-secondary').text()).toBe('15/10/2020 10:30');
expect(firstItem.find('.custom-marker').attributes().style.backgroundColor).not.toBe(''); expect(firstItem.find('.custom-marker').attributes().style.backgroundColor).not.toBe('');
}); });
}); });

2
components/lib/tree/style/TreeStyle.js
View File

@ -160,7 +160,7 @@ const classes = {
'p-tree-flex-scrollable': props.scrollHeight === 'flex' 'p-tree-flex-scrollable': props.scrollHeight === 'flex'
} }
], ],
mask: 'p-tree-mask p-component-overlay', mask: 'p-tree-mask p-overlay-mask',
loadingIcon: 'p-tree-loading-icon', loadingIcon: 'p-tree-loading-icon',
pcFilterInput: 'p-tree-filter-input', pcFilterInput: 'p-tree-filter-input',
wrapper: 'p-tree-root', //TODO: discuss wrapper: 'p-tree-root', //TODO: discuss

2
components/lib/treetable/style/TreeTableStyle.js
View File

@ -437,7 +437,7 @@ const classes = {
} }
], ],
loading: 'p-treetable-loading', //TODO: required? loading: 'p-treetable-loading', //TODO: required?
mask: 'p-treetable-mask p-component-overlay', mask: 'p-treetable-mask p-overlay-mask',
loadingIcon: 'p-treetable-loading-icon', loadingIcon: 'p-treetable-loading-icon',
header: 'p-treetable-header', header: 'p-treetable-header',
paginator: ({ position }) => 'p-treetable-paginator-' + position, paginator: ({ position }) => 'p-treetable-paginator-' + position,

2
components/lib/virtualscroller/VirtualScroller.vue
View File

@ -657,7 +657,7 @@ export default {
return [ return [
'p-virtualscroller-loader', 'p-virtualscroller-loader',
{ {
'p-component-overlay': !this.$slots.loader 'p-overlay-mask': !this.$slots.loader
} }
]; ];
}, },

2
components/lib/virtualscroller/style/VirtualScrollerStyle.js
View File

@ -38,7 +38,7 @@ const css = `
height: 100%; height: 100%;
} }
.p-virtualscroller-loader.p-component-overlay { .p-virtualscroller-loader.p-overlay-mask {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

6
doc/datatable/samples/ProductsDoc.vue
View File

@ -79,7 +79,7 @@
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
<small v-if="submitted && !product.name" class="p-error">Name is required.</small> <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
</div> </div>
<div class="field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
@ -318,7 +318,7 @@ export default {
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
</div> </div>
<div class="field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
@ -609,7 +609,7 @@ export default {
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
</div> </div>
<div class="field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>

8
doc/dialog/BasicDoc.vue
View File

@ -6,7 +6,7 @@
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -34,7 +34,7 @@ export default {
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -54,7 +54,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -86,7 +86,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />

8
doc/dialog/PositionDoc.vue
View File

@ -19,7 +19,7 @@
</div> </div>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -61,7 +61,7 @@ export default {
</div> </div>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -95,7 +95,7 @@ export default {
</div> </div>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -148,7 +148,7 @@ export default {
</div> </div>
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />

8
doc/dialog/TemplateDoc.vue
View File

@ -12,7 +12,7 @@
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -46,7 +46,7 @@ export default {
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -72,7 +72,7 @@ export default {
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -110,7 +110,7 @@ export default {
<span class="font-bold white-space-nowrap">Amy Elsner</span> <span class="font-bold white-space-nowrap">Amy Elsner</span>
</div> </div>
</template> </template>
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />

8
doc/dialog/WithoutModalDoc.vue
View File

@ -6,7 +6,7 @@
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -34,7 +34,7 @@ export default {
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -54,7 +54,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />
@ -86,7 +86,7 @@ export default {
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" /> <Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }"> <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span> <span class="text-color-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3"> <div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label> <label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" /> <InputText id="username" class="flex-auto" autocomplete="off" />

4
doc/guides/accessibility/WAIAriaDoc.vue
View File

@ -46,14 +46,14 @@
<div class="doc-section-description mt-3"> <div class="doc-section-description mt-3">
<p> <p>
However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
<i>p-sr-only</i> <i>p-hidden-accessible</i>
that hides the elements from the user but not from the screen reader. that hides the elements from the user but not from the screen reader.
</p> </p>
</div> </div>
<pre v-code><code> <pre v-code><code>
&lt;label for="chkbox"&gt;Remember Me&lt;/label&gt; &lt;label for="chkbox"&gt;Remember Me&lt;/label&gt;
&lt;div class="fancy-checkbox" @click="toggle"&gt; &lt;div class="fancy-checkbox" @click="toggle"&gt;
&lt;input class="p-sr-only" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals" &lt;input class="p-hidden-accessible" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
@keydown="onKeyDown(event)"&gt; @keydown="onKeyDown(event)"&gt;
&lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt; &lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
&lt;/div&gt; &lt;/div&gt;

24
doc/inlinemessage/FormDoc.vue
View File

@ -4,13 +4,11 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <InputText placeholder="Username" aria-label="username" invalid />
<InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <InputText placeholder="Email" aria-label="email" invalid />
<InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>
@ -24,13 +22,11 @@ export default {
code: { code: {
basic: ` basic: `
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <InputText placeholder="Username" aria-label="username" invalid />
<InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <InputText placeholder="Email" aria-label="email" invalid />
<InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
`, `,
@ -38,13 +34,11 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <InputText placeholder="Username" aria-label="username" invalid />
<InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <InputText placeholder="Email" aria-label="email" invalid />
<InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>
@ -57,13 +51,11 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-wrap align-items-center mb-3 gap-2"> <div class="flex flex-wrap align-items-center mb-3 gap-2">
<label for="username" class="p-sr-only">Username</label> <InputText placeholder="Username" aria-label="username" invalid />
<InputText id="username" placeholder="Username" invalid />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="flex flex-wrap align-items-center gap-2"> <div class="flex flex-wrap align-items-center gap-2">
<label for="email" class="p-sr-only">email</label> <InputText placeholder="Email" aria-label="email" invalid />
<InputText id="email" placeholder="Email" invalid />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>

18
doc/menu/TemplateDoc.vue
View File

@ -34,9 +34,9 @@
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround"> <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-column"> <span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span> <span class="text-sm">Admin</span>
</span> </span>
@ -118,9 +118,9 @@ export default {
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround"> <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
<Avatar image="/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-column"> <span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span> <span class="text-sm">Admin</span>
</span> </span>
@ -159,9 +159,9 @@ export default {
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround"> <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-column"> <span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span> <span class="text-sm">Admin</span>
</span> </span>
@ -254,9 +254,9 @@ export default {
</a> </a>
</template> </template>
<template #end> <template #end>
<button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround"> <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-column"> <span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span> <span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span> <span class="text-sm">Admin</span>
</span> </span>

8
doc/panel/TemplateDoc.vue
View File

@ -16,7 +16,7 @@
<Button icon="pi pi-user" rounded text></Button> <Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button> <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div> </div>
<span class="p-text-secondary">Updated 2 hours ago</span> <span class="text-color-secondary">Updated 2 hours ago</span>
</div> </div>
</template> </template>
<template #icons> <template #icons>
@ -68,7 +68,7 @@ export default {
<Button icon="pi pi-user" rounded text></Button> <Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button> <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div> </div>
<span class="p-text-secondary">Updated 2 hours ago</span> <span class="text-color-secondary">Updated 2 hours ago</span>
</div> </div>
</template> </template>
<template #icons> <template #icons>
@ -98,7 +98,7 @@ export default {
<Button icon="pi pi-user" rounded text></Button> <Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button> <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div> </div>
<span class="p-text-secondary">Updated 2 hours ago</span> <span class="text-color-secondary">Updated 2 hours ago</span>
</div> </div>
</template> </template>
<template #icons> <template #icons>
@ -164,7 +164,7 @@ export default {
<Button icon="pi pi-user" rounded text></Button> <Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button> <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div> </div>
<span class="p-text-secondary">Updated 2 hours ago</span> <span class="text-color-secondary">Updated 2 hours ago</span>
</div> </div>
</template> </template>
<template #icons> <template #icons>

8
doc/timeline/OppositeDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card"> <div class="card">
<Timeline :value="events"> <Timeline :value="events">
<template #opposite="slotProps"> <template #opposite="slotProps">
<small class="p-text-secondary">{{ slotProps.item.date }}</small> <small class="text-color-secondary">{{ slotProps.item.date }}</small>
</template> </template>
<template #content="slotProps"> <template #content="slotProps">
{{ slotProps.item.status }} {{ slotProps.item.status }}
@ -29,7 +29,7 @@ export default {
basic: ` basic: `
<Timeline :value="events"> <Timeline :value="events">
<template #opposite="slotProps"> <template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small> <small class="text-color-secondary">{{slotProps.item.date}}</small>
</template> </template>
<template #content="slotProps"> <template #content="slotProps">
{{slotProps.item.status}} {{slotProps.item.status}}
@ -41,7 +41,7 @@ export default {
<div class="card"> <div class="card">
<Timeline :value="events"> <Timeline :value="events">
<template #opposite="slotProps"> <template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small> <small class="text-color-secondary">{{slotProps.item.date}}</small>
</template> </template>
<template #content="slotProps"> <template #content="slotProps">
{{slotProps.item.status}} {{slotProps.item.status}}
@ -70,7 +70,7 @@ export default {
<div class="card"> <div class="card">
<Timeline :value="events"> <Timeline :value="events">
<template #opposite="slotProps"> <template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small> <small class="text-color-secondary">{{slotProps.item.date}}</small>
</template> </template>
<template #content="slotProps"> <template #content="slotProps">
{{slotProps.item.status}} {{slotProps.item.status}}