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

Merge branch 'v4' of https://github.com/primefaces/primevue into v4

pull/5756/head
Mert Sincan 2024-05-13 15:15:50 +01:00
parent b76590c81a 59637a9671
commit d06ef16b81
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-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400);
--text-color: var(--p-text-color);
--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-blend: hard-light, color-dodge;
--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-inverse-color:var(--p-primary-inverse-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-700);
--text-secondary-color: var(--p-surface-500);
--text-color: var(--p-text-color);
--text-secondary-color: var(--p-text-muted-color);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
--glow-blend: hard-light, multiply;
--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', () => {
it('positioned badge', () => {
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: {
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';
const theme = ({ dt }) => `
.p-component,
.p-component * {
* {
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 {
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 */
.p-connected-overlay {
opacity: 0;
@ -128,31 +70,16 @@ const theme = ({ dt }) => `
transition: max-height 1s ease-in-out;
}
* {
box-sizing: border-box;
}
.p-component {
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 * {
cursor: default;
pointer-events: none;
user-select: none;
}
.p-disabled,
.p-component:disabled {
opacity: 0.6;
}
.p-error {
color: #f87171;
}
.p-text-secondary {
color: ${dt('text.muted.color')};
opacity: ${dt('disabled.opacity')};
}
.pi {
@ -164,28 +91,26 @@ const theme = ({ dt }) => `
height: ${dt('icon.size')};
}
.p-link {
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
border-radius: 6px;
outline-color: transparent;
}
.p-link:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
box-shadow: none;
.p-overlay-mask {
background-color: rgba(0, 0, 0, 0.4);
transition-duration: ${dt('transition.duration')};
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: ${dt('mask.color')};
}
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
.p-overlay-mask-enter {
animation: p-overlay-mask-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
.p-overlay-mask-leave {
animation: p-overlay-mask-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
@keyframes p-overlay-mask-enter-animation {
from {
background: transparent;
}
@ -193,7 +118,7 @@ const theme = ({ dt }) => `
background: ${dt('mask.background')};
}
}
@keyframes p-component-overlay-leave-animation {
@keyframes p-overlay-mask-leave-animation {
from {
background: ${dt('mask.background')};
}

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

@ -32,7 +32,7 @@ export default {
},
methods: {
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) {
styleClass += ' p-blockui-mask-document';
@ -75,7 +75,7 @@ export default {
this.$emit('block');
},
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) {
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')};
}
.p-blockui-mask.p-component-overlay {
.p-blockui-mask.p-overlay-mask {
position: absolute;
}
.p-blockui-mask-document.p-component-overlay {
.p-blockui-mask-document.p-overlay-mask {
position: fixed;
}
`;

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

@ -589,7 +589,7 @@ const classes = {
'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',
header: 'p-datatable-header',
pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,

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

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

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

@ -158,7 +158,7 @@ const classes = {
return [
'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}` : ''
];

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

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

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

@ -136,7 +136,7 @@ const classes = {
return [
'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-full': instance.fullScreen
},

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

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

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

@ -415,7 +415,7 @@ const theme = ({ dt }) => `
`;
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 }) => {
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);

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

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

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

@ -131,7 +131,7 @@ const classes = {
],
previewMask: 'p-image-preview-mask',
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',
rotateRightButton: 'p-image-action p-image-rotate-right-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',
shadow: 'none'
},
disabledOpacity: '0.6',
iconSize: '1rem',
anchorGutter: '2px',
primary: {

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

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

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

@ -52,7 +52,7 @@ describe('customized timeline', () => {
slots: {
opposite: `
<template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small>
<small>{{slotProps.item.date}}</small>
</template>
`,
marker: `
@ -77,7 +77,6 @@ describe('customized timeline', () => {
it('should have templating', () => {
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('');
});
});

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

@ -160,7 +160,7 @@ const classes = {
'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',
pcFilterInput: 'p-tree-filter-input',
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?
mask: 'p-treetable-mask p-component-overlay',
mask: 'p-treetable-mask p-overlay-mask',
loadingIcon: 'p-treetable-loading-icon',
header: 'p-treetable-header',
paginator: ({ position }) => 'p-treetable-paginator-' + position,

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

@ -657,7 +657,7 @@ export default {
return [
'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%;
}
.p-virtualscroller-loader.p-component-overlay {
.p-virtualscroller-loader.p-overlay-mask {
display: flex;
align-items: center;
justify-content: center;

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

@ -79,7 +79,7 @@
<div class="field">
<label for="name">Name</label>
<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 class="field">
<label for="description">Description</label>
@ -318,7 +318,7 @@ export default {
<div class="field">
<label for="name">Name</label>
<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 class="field">
<label for="description">Description</label>
@ -609,7 +609,7 @@ export default {
<div class="field">
<label for="name">Name</label>
<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 class="field">
<label for="description">Description</label>

8
doc/dialog/BasicDoc.vue
View File

@ -6,7 +6,7 @@
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -34,7 +34,7 @@ export default {
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -54,7 +54,7 @@ export default {
<div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -86,7 +86,7 @@ export default {
<div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />

8
doc/dialog/PositionDoc.vue
View File

@ -19,7 +19,7 @@
</div>
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -61,7 +61,7 @@ export default {
</div>
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -95,7 +95,7 @@ export default {
</div>
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -148,7 +148,7 @@ export default {
</div>
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<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>
</div>
</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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -46,7 +46,7 @@ export default {
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -72,7 +72,7 @@ export default {
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -110,7 +110,7 @@ export default {
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</div>
</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">
<label for="username" class="font-semibold w-6rem">Username</label>
<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" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -34,7 +34,7 @@ export default {
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -54,7 +54,7 @@ export default {
<div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
@ -86,7 +86,7 @@ export default {
<div class="card flex justify-content-center">
<Button label="Show" @click="visible = true" />
<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">
<label for="username" class="font-semibold w-6rem">Username</label>
<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">
<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
<i>p-sr-only</i>
<i>p-hidden-accessible</i>
that hides the elements from the user but not from the screen reader.
</p>
</div>
<pre v-code><code>
&lt;label for="chkbox"&gt;Remember Me&lt;/label&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;
&lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
&lt;/div&gt;

24
doc/inlinemessage/FormDoc.vue
View File

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

18
doc/menu/TemplateDoc.vue
View File

@ -34,9 +34,9 @@
</a>
</template>
<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" />
<span class="inline-flex flex-column">
<span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span>
</span>
@ -118,9 +118,9 @@ export default {
</a>
</template>
<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">
<Avatar image="/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
<span class="inline-flex flex-column">
<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" />
<span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span>
</span>
@ -159,9 +159,9 @@ export default {
</a>
</template>
<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" />
<span class="inline-flex flex-column">
<span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</span>
</span>
@ -254,9 +254,9 @@ export default {
</a>
</template>
<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" />
<span class="inline-flex flex-column">
<span class="inline-flex flex-column align-items-start">
<span class="font-bold">Amy Elsner</span>
<span class="text-sm">Admin</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-bookmark" severity="secondary" rounded text></Button>
</div>
<span class="p-text-secondary">Updated 2 hours ago</span>
<span class="text-color-secondary">Updated 2 hours ago</span>
</div>
</template>
<template #icons>
@ -68,7 +68,7 @@ export default {
<Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div>
<span class="p-text-secondary">Updated 2 hours ago</span>
<span class="text-color-secondary">Updated 2 hours ago</span>
</div>
</template>
<template #icons>
@ -98,7 +98,7 @@ export default {
<Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div>
<span class="p-text-secondary">Updated 2 hours ago</span>
<span class="text-color-secondary">Updated 2 hours ago</span>
</div>
</template>
<template #icons>
@ -164,7 +164,7 @@ export default {
<Button icon="pi pi-user" rounded text></Button>
<Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
</div>
<span class="p-text-secondary">Updated 2 hours ago</span>
<span class="text-color-secondary">Updated 2 hours ago</span>
</div>
</template>
<template #icons>

8
doc/timeline/OppositeDoc.vue
View File

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