vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 01:42:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #108 - Enhance ARIA roles and attributes for the components

Browse source
This commit is contained in:
cagataycivici 2019-12-26 14:24:53 +03:00
parent 8ebfefd7fa
commit 1dbdf3c310
100 changed files with 590 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/assets/styles/app.scss
View file

@ -553,7 +553,7 @@ body {
p {
color: #484848;
font-size: 16px;
font-size: 14px;
line-height: 24px;
margin: 10px 0;
}
@ -564,7 +564,13 @@ body {
}
a {
color: #3294e0;
color: #638fb7;
font-weight: 700;
@include transition(color .2s);
&:hover {
color: #82a5c5;
}
}
.btn-viewsource {
@ -809,6 +815,16 @@ body {
}
}
a {
color: #638fb7;
font-weight: 700;
@include transition(color .2s);
&:hover {
color: #82a5c5;
}
}
.layout-config-content {
overflow: auto;
height: 100%;
@ -994,10 +1010,11 @@ body {
margin-bottom: 2em;
}
a {
color: #526F89;
color: #638fb7;
@include transition(color .2s);
&:hover {
color: #638FB7;
color: #82a5c5;
}
}
@ -1116,7 +1133,7 @@ body {
}
.p-grid > div {
padding: 1em .5em;
padding: 2em .5em;
}
p {

11
src/components/accordion/Accordion.vue
View file

@ -3,14 +3,16 @@
<slot></slot>
<div v-for="(tab, i) of tabs" :key="tab.header || i" class="p-accordion-tab">
<div :class="['p-accordion-header', {'p-highlight': tab.d_active, 'p-disabled': tab.disabled}]">
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'">
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'"
:aria-expanded="tab.d_active" :id="ariaId + i + '_header'" :aria-controls="ariaId + i + '_content'">
<span :class="['p-accordion-toggle-icon pi pi-fw', {'pi-caret-right': !tab.d_active, 'pi-caret-down': tab.d_active}]"></span>
<span class="p-accordion-header-text" v-if="tab.header">{{tab.header}}</span>
<AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
</a>
</div>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="tab.d_active">
<div class="p-toggleable-content" v-show="tab.d_active"
role="region" :id="ariaId + i + '_content' " :aria-labelledby="ariaId + i + '_header'">
<div class="p-accordion-content">
<AccordionTabSlot :tab="tab" type="default" v-if="tab.$scopedSlots.default" />
</div>
@ -21,6 +23,8 @@
</template>
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
const AccordionTabSlot = {
functional: true,
props: {
@ -79,6 +83,9 @@ export default {
computed: {
tabs() {
return this.d_children.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
},
ariaId() {
return UniqueComponentId();
}
},
components: {

1
src/components/autocomplete/AutoComplete.d.ts vendored
View file

@ -10,6 +10,7 @@ export declare class AutoComplete extends Vue {
multiple?: boolean;
minLength?: number;
delay?: number;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'select', e: {originalEvent: Event, value: any}): this;
$emit(eventName: 'unselect', e: {originalEvent: Event, value: any}): this;

19
src/components/autocomplete/AutoComplete.vue
View file

@ -1,21 +1,22 @@
<template>
<span :class="containerClass">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="inputValue" type="text" autoComplete="off" v-if="!multiple">
<span :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="inputValue" type="text" autoComplete="off" v-if="!multiple"
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
<li v-for="(item, i) of value" :key="i" class="p-autocomplete-token p-highlight">
<span class="p-autocomplete-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
<span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
</li>
<li class="p-autocomplete-input-token">
<input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners">
<input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners" role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
</li>
</ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-show="searching"></i>
<Button ref="dropdownButton" type="button" icon="pi pi-fw pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-autocomplete-panel" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<ul class="p-autocomplete-items p-autocomplete-list p-component">
<li v-for="(item, i) of suggestions" class="p-autocomplete-list-item" :key="i" @click="selectItem($event, item)">
<ul :id="listId" class="p-autocomplete-items p-autocomplete-list p-component" role="listbox">
<li v-for="(item, i) of suggestions" class="p-autocomplete-list-item" :key="i" @click="selectItem($event, item)" role="option">
<slot name="item" :item="item" :index="i">
{{getItemContent(item)}}
</slot>
@ -30,6 +31,7 @@
import ObjectUtils from '../utils/ObjectUtils';
import DomHandler from '../utils/DomHandler';
import Button from '../button/Button';
import UniqueComponentId from '../utils/UniqueComponentId';
export default {
inheritAttrs: false,
@ -66,6 +68,10 @@ export default {
delay: {
type: Number,
default: 300
},
ariaLabelledBy: {
type: String,
default: null
}
},
timeout: null,
@ -385,6 +391,9 @@ export default {
else {
return '';
}
},
listId() {
return UniqueComponentId() + '_list';
}
},
components: {

4
src/components/breadcrumb/Breadcrumb.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="p-breadcrumb p-component">
<nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
<ul>
<BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" />
<template v-for="(item, i) of model">
@ -7,7 +7,7 @@
<BreadcrumbItem :key="item.label + i" :item="item" />
</template>
</ul>
</div>
</nav>
</template>
<script>

2
src/components/breadcrumb/BreadcrumbItem.vue
View file

@ -1,5 +1,5 @@
<template>
<li :class="containerClass" role="menuitem">
<li :class="containerClass">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
<span v-if="item.icon" :class="item.icon"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>

1
src/components/calendar/Calendar.d.ts vendored
View file

@ -52,6 +52,7 @@ export declare class Calendar extends Vue {
showWeek?: boolean;
manualInput?: boolean;
locale?: LocaleSettings;
ariaLabelledBy?: string;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$emit(eventName: 'month-change', e: { month: number, year: number }): this;

6
src/components/calendar/Calendar.vue
View file

@ -1,6 +1,6 @@
<template>
<span :class="containerClass">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" v-model="inputFieldValue" :readonly="!manualInput" />
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" v-model="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy"/>
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" type="button" />
<transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible">
@ -310,6 +310,10 @@ export default {
weekHeader: 'Wk'
}
}
},
ariaLabelledBy: {
type: String,
default: null
}
},
oldViewDate: null,

1
src/components/checkbox/Checkbox.d.ts vendored
View file

@ -4,6 +4,7 @@ export declare class Checkbox extends Vue {
value?: null;
modelValue?: null;
binary?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;

7
src/components/checkbox/Checkbox.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="p-checkbox p-component" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)">
<input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy">
</div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
</div>
</div>
@ -17,7 +17,8 @@ export default {
props: {
value: null,
modelValue: null,
binary: Boolean
binary: Boolean,
ariaLabelledBy: null
},
model: {
prop: 'modelValue',

1
src/components/chips/Chips.d.ts vendored
View file

@ -3,6 +3,7 @@ import Vue, { VNode } from 'vue';
export declare class Chips extends Vue {
value?: any[];
max?: number;
ariaLabelledBy?: string;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: 'input', value: any[]): this;

5
src/components/chips/Chips.vue
View file

@ -8,7 +8,7 @@
</slot>
</li>
<li class="p-chips-input-token">
<input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" :disabled="$attrs.disabled || maxedOut">
<input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
</li>
</ul>
</div>
@ -18,7 +18,8 @@
export default {
props: {
value: Array,
max: Number
max: Number,
ariaLabelledBy: null
},
data() {
return {

8
src/components/contextmenu/ContextMenuSub.vue
View file

@ -2,15 +2,15 @@
<transition name="p-contextmenusub" @enter="onEnter">
<ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
@click.native="onItemClick($event, item)">
@click.native="onItemClick($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target"
@click="onItemClick($event, item)">
@click="onItemClick($event, item)" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
@ -18,7 +18,7 @@
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'"
@leaf-click="onLeafClick" :parentActive="item === activeItem" />
</li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li>
</template>
</ul>
</transition>

2
src/components/datatable/DataTable.vue
View file

@ -20,7 +20,7 @@
</template>
</DTPaginator>
<div class="p-datatable-wrapper" v-if="!scrollable">
<table ref="table">
<table ref="table" role="grid">
<DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"

2
src/components/datatable/HeaderCheckbox.vue
View file

@ -3,7 +3,7 @@
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="disabled">
</div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
</div>
</div>

2
src/components/datatable/RowCheckbox.vue
View file

@ -3,7 +3,7 @@
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="disabled">
</div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
</div>
</div>

2
src/components/datatable/RowRadioButton.vue
View file

@ -3,7 +3,7 @@
<div class="p-hidden-accessible">
<input ref="input" type="radio" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="disabled">
</div>
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
<span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
</div>
</div>

37
src/components/datatable/TableHeader.vue
View file

@ -2,11 +2,11 @@
<thead class="p-datatable-thead">
<tr v-if="!columnGroup">
<template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)"
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :tabindex="col.sortable ? '0' : '-1'" @keydown="onColumnKeyDown($event, col)"
:key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.colspan" :rowspan="col.rowspan">
:colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
<span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
<DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
@ -18,9 +18,9 @@
</tr>
<template v-else>
<tr v-for="(row,i) of columnGroup.rows" :key="i">
<th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
<th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.sortable ? '0' : '-1'" @keydown="onColumnKeyDown($event, col)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.colspan" :rowspan="col.rowspan">
:colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
<ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
@ -33,6 +33,7 @@
</template>
<script>
import DomHandler from '../utils/DomHandler';
import ColumnSlot from './ColumnSlot.vue';
import HeaderCheckbox from './HeaderCheckbox.vue';
@ -110,10 +111,11 @@ export default {
}
return [
'p-sortable-column-icon pi pi-fw',
{'pi-sort': !sorted},
{'pi-sort-up': sorted && sortOrder > 0},
{'pi-sort-down': sorted && sortOrder < 0},
'p-sortable-column-icon pi pi-fw', {
'pi-sort': !sorted,
'pi-sort-up': sorted && sortOrder > 0,
'pi-sort-down': sorted && sortOrder < 0
}
];
},
getMultiSortMetaIndex(column) {
@ -152,6 +154,25 @@ export default {
},
onHeaderCheckboxChange(event) {
this.$emit('checkbox-change', event);
},
onColumnKeyDown(event, col) {
if (event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
this.$emit('column-click', {originalEvent: event, column: col});
}
},
getAriaSort(column) {
if (column.sortable) {
const sortIcon = this.getSortableColumnIcon(column);
if (sortIcon[1]['pi-sort-down'])
return 'descending';
else if (sortIcon[1]['pi-sort-up'])
return 'ascending';
else
return 'none';
}
else {
return null;
}
}
},
components: {

1
src/components/dialog/Dialog.d.ts vendored
View file

@ -11,6 +11,7 @@ export declare class Dialog extends Vue {
showHeader?: boolean;
baseZIndex?: number;
autoZIndex?: boolean;
ariaCloseLabel?: string;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slots: {

17
src/components/dialog/Dialog.vue
View file

@ -1,12 +1,12 @@
<template>
<transition name="p-dialog" @enter="onEnter" @leave="onLeave" @appear="onAppear">
<div ref="container" :class="containerClass" v-if="visible">
<div ref="container" :class="containerClass" v-if="visible" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
<div class="p-dialog-titlebar" v-if="showHeader">
<slot name="header">
<span class="p-dialog-title" v-if="header">{{header}}</span>
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
</slot>
<div class="p-dialog-titlebar-icons">
<button class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" @click="close" v-if="closable">
<button class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel">
<span class="p-dialog-titlebar-close-icon pi pi-times"></span>
</button>
</div>
@ -22,6 +22,7 @@
</template>
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
import DomHandler from '../utils/DomHandler';
export default {
@ -47,6 +48,10 @@ export default {
autoZIndex: {
type: Boolean,
default: true
},
ariaCloseLabel: {
type: String,
default: 'close'
}
},
mask: null,
@ -154,6 +159,12 @@ export default {
return ['p-dialog p-component', {
'p-dialog-rtl': this.rtl
}];
},
ariaId() {
return UniqueComponentId();
},
ariaLabelledById() {
return this.header != null ? this.ariaId + '_header' : null;
}
}
}

1
src/components/dropdown/Dropdown.d.ts vendored
View file

@ -15,6 +15,7 @@ export declare class Dropdown extends Vue {
dataKey?: string;
showClear?: boolean;
tabindex?: string;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: string): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
$slot: {

15
src/components/dropdown/Dropdown.vue
View file

@ -1,12 +1,14 @@
<template>
<div ref="container" :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"/>
<input ref="focusInput" type="text" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div>
<input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput">
<input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput"
aria-haspopup="listbox" :aria-expanded="overlayVisible">
<label v-if="!editable" :class="labelClass">{{label}}</label>
<i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
<div class="p-dropdown-trigger">
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span>
</div>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
@ -16,9 +18,9 @@
<span class="p-dropdown-filter-icon pi pi-search"></span>
</div>
<div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-dropdown-items p-dropdown-list p-component">
<ul class="p-dropdown-items p-dropdown-list p-component" role="listbox">
<li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)">
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" role="option" :aria-selected="isSelected(option)">
<slot name="option" :option="option" :index="i">
{{getOptionLabel(option)}}
</slot>
@ -52,7 +54,8 @@ export default {
disabled: Boolean,
dataKey: null,
showClear: Boolean,
tabindex: String
tabindex: String,
ariaLabelledBy: null
},
data() {
return {

13
src/components/fieldset/Fieldset.vue
View file

@ -2,9 +2,10 @@
<fieldset :class="['p-fieldset p-component', {'p-fieldset-toggleable': toggleable}]">
<legend class="p-fieldset-legend p-unselectable-text">
<slot name="legend" v-if="!toggleable">
<span class="p-fieldset-legend-text" >{{legend}}</span>
<span class="p-fieldset-legend-text" :id="ariaId + '_header'">{{legend}}</span>
</slot>
<a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle">
<a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle"
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
<span :class="iconClass"></span>
<slot name="legend">
<span class="p-fieldset-legend-text">{{legend}}</span>
@ -12,7 +13,8 @@
</a>
</legend>
<transition name="p-fieldset-content-wrapper">
<div class="p-fieldset-content-wrapper" v-show="!d_collapsed">
<div class="p-fieldset-content-wrapper" v-show="!d_collapsed"
role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
<div class="p-fieldset-content">
<slot></slot>
</div>
@ -22,6 +24,8 @@
</template>
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
export default {
props: {
legend: String,
@ -49,6 +53,9 @@ export default {
'pi-minus': !this.d_collapsed,
'pi-plus': this.d_collapsed
}]
},
ariaId() {
return UniqueComponentId();
}
}
}

3
src/components/inputmask/InputMask.vue
View file

@ -23,7 +23,8 @@ export default {
unmask: {
type: Boolean,
default: false
}
},
ariaLabelledBy: null
},
methods: {
caret(first, last) {

1
src/components/inputswitch/InputSwitch.d.ts vendored
View file

@ -5,6 +5,7 @@ export declare class InputSwitch extends Vue {
inputId?: string;
name?: string;
disabled?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;

5
src/components/inputswitch/InputSwitch.vue
View file

@ -2,7 +2,7 @@
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" :disabled="disabled"
@focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)">
@focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)" role="switch" :aria-checked="value" :aria-labelledby="ariaLabelledBy">
</div>
<span class="p-inputswitch-slider"></span>
</div>
@ -14,7 +14,8 @@ export default {
value: Boolean,
inputId: String,
name: String,
disabled: Boolean
disabled: Boolean,
ariaLabelledBy: null
},
data() {
return {

1
src/components/listbox/Listbox.d.ts vendored
View file

@ -12,6 +12,7 @@ export declare class Listbox extends Vue {
multiple?: boolean;
metaKeySelection?: boolean;
filter?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
$slots: {

6
src/components/listbox/Listbox.vue
View file

@ -2,14 +2,14 @@
<div class="p-listbox p-inputtext p-component">
<div class="p-listbox-header" v-if="filter">
<div class="p-listbox-filter-container">
<input type="text" role="textbox" class="p-inputtext p-component" v-model="filterValue">
<input type="text" class="p-inputtext p-component" v-model="filterValue">
<span class="p-listbox-filter-icon pi pi-search"></span>
</div>
</div>
<div class="p-listbox-list-wrapper" :style="listStyle">
<ul class="p-listbox-list">
<ul class="p-listbox-list" role="listbox" aria-multiselectable="multiple">
<li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)">
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-selected="isSelected(option)">
<slot name="option" :option="option" :index="i">
{{getOptionLabel(option)}}
</slot>

19
src/components/megamenu/MegaMenu.vue
View file

@ -1,9 +1,10 @@
<template>
<div :class="containerClass">
<ul class="p-megamenu-root-list">
<ul class="p-megamenu-root-list" role="menubar">
<li v-for="(category,index) of model" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
@mouseenter="onCategoryMouseEnter($event, category)">
<a :href="category.url||'#'" class="p-menuitem-link" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)">
@mouseenter="onCategoryMouseEnter($event, category)" role="none">
<a :href="category.url||'#'" class="p-menuitem-link" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem">
<span v-if="category.icon" :class="getCategoryIcon(category)"></span>
<span class="p-menuitem-text">{{category.label}}</span>
<span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
@ -11,21 +12,21 @@
<div class="p-megamenu-panel" v-if="category.items">
<div class="p-grid">
<div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)">
<ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex">
<li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style">{{submenu.label}}</li>
<ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu">
<li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
<template v-for="(item, i) of submenu.items">
<li role="menuitem" :class="getSubmenuItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onLeafClick($event, item)">
<li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onLeafClick($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onLeafClick($event, item)">
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onLeafClick($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
</a>
</li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li>
</template>
</ul>
</div>

6
src/components/menu/Menuitem.vue
View file

@ -1,10 +1,10 @@
<template>
<li :class="containerClass" role="menuitem" :style="item.style" v-if="item.visible !== false">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
<li :class="containerClass" role="none" :style="item.style" v-if="item.visible !== false">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
<a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target" role="menuitem" >
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>

12
src/components/menubar/MenubarSub.vue
View file

@ -1,15 +1,15 @@
<template>
<ul :class="containerClass" role="menu">
<ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)">
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)">
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
@ -17,7 +17,7 @@
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
</li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li>
</template>
</ul>
</template>

2
src/components/message/Message.vue
View file

@ -1,6 +1,6 @@
<template>
<transition name="p-messages">
<div :class="containerClass" v-if="visible">
<div :class="containerClass" v-if="visible" role="alert">
<div class="p-messages-wrapper">
<span :class="iconClass"></span>
<div class="p-messages-text">

1
src/components/multiselect/MultiSelect.d.ts vendored
View file

@ -13,6 +13,7 @@ export declare class MultiSelect extends Vue {
tabindex?: string;
dataKey?: string;
filterPlaceholder?: string;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
$slots: {

14
src/components/multiselect/MultiSelect.vue
View file

@ -1,7 +1,8 @@
<template>
<div ref="container" :class="containerClass" @click="onClick">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"/>
<input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div>
<div class="p-multiselect-label-container">
<label :class="labelClass">
@ -16,11 +17,11 @@
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-multiselect-panel" v-if="overlayVisible">
<div class="p-multiselect-header">
<div class="p-checkbox p-component" @click="onToggleAll">
<div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
<div class="p-hidden-accessible">
<input type="checkbox" readonly @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
</div>
<div :class="['p-checkbox-box p-component', {'p-highlight': allSelected, 'p-focus': headerCheckboxFocused}]">
<div :class="['p-checkbox-box p-component', {'p-highlight': allSelected, 'p-focus': headerCheckboxFocused}]" role="checkbox" :aria-checked="allSelected">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': allSelected}]"></span>
</div>
</div>
@ -33,8 +34,8 @@
</button>
</div>
<div ref="itemsWrapper" class="p-multiselect-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-multiselect-items p-multiselect-list p-component">
<li v-for="(option, i) of visibleOptions" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
<ul class="p-multiselect-items p-multiselect-list p-component" role="listbox" aria-multiselectable="true">
<li v-for="(option, i) of visibleOptions" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)"
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'">
<div class="p-checkbox p-component">
<div :class="['p-checkbox-box p-component', {'p-highlight': isSelected(option)}]">
@ -72,7 +73,8 @@ export default {
filter: Boolean,
tabindex: String,
dataKey: null,
filterPlaceholder: String
filterPlaceholder: String,
ariaLabelledBy: null
},
data() {
return {

5
src/components/orderlist/OrderList.vue
View file

@ -10,10 +10,11 @@
<div class="p-orderlist-caption" v-if="$slots.header">
<slot name="header"></slot>
</div>
<transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle">
<transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of value">
<li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]"
@click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd">
@click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd"
role="option" :aria-selected="isSelected(item)">
<slot name="item" :item="item" :index="i"> </slot>
</li>
</template>

1
src/components/overlaypanel/OverlayPanel.d.ts vendored
View file

@ -6,6 +6,7 @@ export declare class OverlayPanel extends Vue {
appendTo?: string;
baseZIndex?: number;
autoZIndex?: boolean;
ariaCloseLabel?: string;
toggle(event: Event): void;
show(event: Event, target?: any): void;
hide(): void;

11
src/components/overlaypanel/OverlayPanel.vue
View file

@ -4,7 +4,7 @@
<div class="p-overlaypanel-content">
<slot></slot>
</div>
<button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon">
<button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel">
<span class="p-overlaypanel-close-icon pi pi-times"></span>
</button>
</div>
@ -24,7 +24,10 @@ export default {
type: Boolean,
default: false
},
appendTo: String,
appendTo: {
type: String,
default: null
},
baseZIndex: {
type: Number,
default: 0
@ -32,6 +35,10 @@ export default {
autoZIndex: {
type: Boolean,
default: true
},
ariaCloseLabel: {
type: String,
default: 'close'
}
},
data() {

14
src/components/panel/Panel.vue
View file

@ -2,14 +2,15 @@
<div class="p-panel p-component">
<div class="p-panel-titlebar">
<slot name="header">
<span class="p-panel-title" v-if="header">{{header}}</span>
<span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span>
</slot>
<a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle" @keydown.enter="toggle">
<a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle" @keydown.enter="toggle"
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
<span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
</a>
</div>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="!d_collapsed">
<div class="p-toggleable-content" v-show="!d_collapsed" role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
<div class="p-panel-content">
<slot></slot>
</div>
@ -19,6 +20,8 @@
</template>
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
export default {
props: {
header: String,
@ -35,6 +38,11 @@ export default {
this.d_collapsed = newValue;
}
},
computed: {
ariaId() {
return UniqueComponentId();
}
},
methods: {
toggle(event) {
this.d_collapsed = !this.d_collapsed;

21
src/components/panelmenu/PanelMenu.vue
View file

@ -3,14 +3,16 @@
<template v-for="(item, index) of model">
<div :key="item.label + '_' + index" :class="getPanelClass(item)" :style="item.style">
<div :class="getHeaderClass(item)" :style="item.style">
<a :href="item.url || '#'" class="p-panelmenu-header-link" @click="onItemClick($event, item)">
<a :href="item.url || '#'" class="p-panelmenu-header-link" @click="onItemClick($event, item)"
:aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
<span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
<span v-if="item.icon" :class="getPanelIcon(item)"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</div>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="item === activeItem">
<div class="p-toggleable-content" v-show="item === activeItem"
role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'">
<div class="p-panelmenu-content" v-if="item.items">
<PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" />
</div>
@ -23,6 +25,7 @@
<script>
import PanelMenuSub from './PanelMenuSub';
import UniqueComponentId from '../utils/UniqueComponentId';
export default {
props: {
@ -69,14 +72,20 @@ export default {
getPanelIcon(item) {
return ['p-menuitem-icon', item.icon];
},
getHeaderClass(item) {
return ['p-component p-panelmenu-header', {'p-highlight': (item === this.activeItem)}];
}
isActive(item) {
return item === this.activeItem;
},
computed: {
getHeaderClass(item) {
return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item)}];
}
},
components: {
'PanelMenuSub': PanelMenuSub
},
computed: {
ariaId() {
return UniqueComponentId();
}
}
}
</script>

15
src/components/panelmenu/PanelMenuSub.vue
View file

@ -1,12 +1,14 @@
<template>
<ul class="p-submenu-list">
<ul class="p-submenu-list" role="tree">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)">
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -62,8 +64,11 @@ export default {
getItemClass(item) {
return ['p-menuitem', item.className, {'p-disabled': item.disabled}];
},
isActive(item) {
return item === this.activeItem;
},
getSubmenuIcon(item) {
const active = (item === this.activeItem);
const active = this.isActive(item);
return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}];
}
}

8
src/components/picklist/PickList.vue
View file

@ -12,10 +12,10 @@
<div class="p-picklist-caption" v-if="$slots.sourceHeader">
<slot name="sourceHeader"></slot>
</div>
<transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle">
<transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of sourceList">
<li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]"
@click="onItemClick($event, item, i, 0)" @keydown="onItemKeyDown($event, item, i, 0)" @touchend="onItemTouchEnd">
@click="onItemClick($event, item, i, 0)" @keydown="onItemKeyDown($event, item, i, 0)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 0)">
<slot name="item" :item="item" :index="i"> </slot>
</li>
</template>
@ -33,10 +33,10 @@
<div class="p-picklist-caption" v-if="$slots.targetHeader">
<slot name="targetHeader"></slot>
</div>
<transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle">
<transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of targetList">
<li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]"
@click="onItemClick($event, item, i, 1)" @keydown="onItemKeyDown($event, item, i, 1)" @touchend="onItemTouchEnd">
@click="onItemClick($event, item, i, 1)" @keydown="onItemKeyDown($event, item, i, 1)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 1)">
<slot name="item" :item="item" :index="i"> </slot>
</li>
</template>

2
src/components/progressbar/ProgressBar.vue
View file

@ -1,5 +1,5 @@
<template>
<div role="progressbar" :class="containerClass" :aria-valuemin="0" :aria-valuenow="value" :aria-valuemax="100">
<div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
<div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle"></div>
<div v-if="determinate && value && showValue" class="p-progressbar-label">{{value + '%'}}</div>
<div v-if="indeterminate" class="p-progressbar-indeterminate-container">

2
src/components/progressspinner/ProgressSpinner.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="p-progress-spinner">
<div class="p-progress-spinner" role="alert" aria-busy="true">
<svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle">
<circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" />
</svg>

1
src/components/radiobutton/RadioButton.d.ts vendored
View file

@ -3,6 +3,7 @@ import Vue from 'vue';
export declare class RadioButton extends Vue {
value: any;
modelValue: any;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;

7
src/components/radiobutton/RadioButton.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="p-radiobutton p-component" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)">
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy">
</div>
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" :role="radio" :aria-checked="checked">
<span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
</div>
</div>
@ -16,7 +16,8 @@ export default {
inheritAttrs: false,
props: {
value: null,
modelValue: null
modelValue: null,
ariaLabelledBy: null
},
model: {
prop: 'modelValue',

1
src/components/selectbutton/SelectButton.d.ts vendored
View file

@ -9,6 +9,7 @@ export declare class SelectButton extends Vue {
multiple?: boolean;
disabled?: boolean;
dataKey?: string;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;

9
src/components/selectbutton/SelectButton.vue
View file

@ -1,8 +1,8 @@
<template>
<div :class="containerClass">
<div v-for="(option, i) of options" :key="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
<div :class="containerClass" role="group">
<div v-for="(option, i) of options" :key="getOptionLabel(option)" :aria-label="getOptionLabel(option)" role="button" :aria-pressed="isSelected(option)"
@click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option)"
:tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)"
:tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy"
:class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option), 'p-focus': (i === focusedIndex)}]">
<slot name="option" :option="option" :index="i">
<span class="p-button-text p-c">{{getOptionLabel(option)}}</span>
@ -23,7 +23,8 @@ export default {
optionDisabled: null,
multiple: Boolean,
disabled: Boolean,
dataKey: null
dataKey: null,
ariaLabelledBy: null
},
data() {
return {

1
src/components/sidebar/Sidebar.d.ts vendored
View file

@ -8,6 +8,7 @@ export declare class Sidebar extends Vue {
dismissable?: boolean;
showCloseIcon?: boolean;
modal?: boolean;
ariaCloseLabel?: string;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slots: {

8
src/components/sidebar/Sidebar.vue
View file

@ -1,7 +1,7 @@
<template>
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave">
<div :class="containerClass" v-if="visible" ref="container">
<button class="p-sidebar-close p-link" @click="hide">
<div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
<button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel">
<span class="p-sidebar-close-icon pi pi-times" />
</button>
<slot></slot>
@ -41,6 +41,10 @@ export default {
modal: {
type: Boolean,
default: true
},
ariaCloseLabel: {
type: String,
default: 'close'
}
},
mask: null,

1
src/components/slider/Slider.d.ts vendored
View file

@ -8,6 +8,7 @@ export declare class Slider extends Vue {
step?: number;
range?: boolean;
disabled?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', value: any): this;
$emit(eventName: 'slideend', e: {originalEvent: Event, values: any}): this;

13
src/components/slider/Slider.vue
View file

@ -1,9 +1,12 @@
<template>
<div :class="containerClass" @click="onBarClick" ref="container">
<span class="p-slider-range" :style="rangeStyle"></span>
<span v-if="!range" class="p-slider-handle" :style="handleStyle" @mousedown="onHandleMouseDown($event)" @keydown="onHandleKeyDown($event)" tabindex="0"></span>
<span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @mousedown="onHandleMouseDown($event, 0)" @keydown="onHandleKeyDown($event, 0)" tabindex="0"></span>
<span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @mousedown="onHandleMouseDown($event, 1)" @keydown="onHandleKeyDown($event, 1)" tabindex="0"></span>
<span v-if="!range" class="p-slider-handle" :style="handleStyle" @mousedown="onHandleMouseDown($event)" @keydown="onHandleKeyDown($event)" tabindex="0"
role="slider" :aria-valuemin="min" aria-valuenow="value" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
<span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @mousedown="onHandleMouseDown($event, 0)" @keydown="onHandleKeyDown($event, 0)" tabindex="0"
role="slider" :aria-valuemin="min" aria-valuenow="value ? value[0] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
<span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @mousedown="onHandleMouseDown($event, 1)" @keydown="onHandleKeyDown($event, 1)" tabindex="0"
role="slider" :aria-valuemin="min" aria-valuenow="value = value[1] : null" aria-valuemax="max" :aria-labelledby="ariaLabelledBy"></span>
</div>
</template>
@ -36,6 +39,10 @@ export default {
disabled: {
type: Boolean,
default: false
},
ariaLabelledBy: {
type: String,
default: null
}
},
dragging: false,

1
src/components/spinner/Spinner.d.ts vendored
View file

@ -5,5 +5,6 @@ export declare class Spinner extends Vue {
step?: number;
min?: number;
max?: number;
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
}

5
src/components/spinner/Spinner.vue
View file

@ -1,6 +1,6 @@
<template>
<span :class="containerClass">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="value">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="value" :aria-valumin="min" :aria-valuemax="max" :aria-valuenow="value" :aria-labelledby="ariaLabelledBy">
<button type="button" :class="upButtonClass" @mousedown="onButtonMouseDown($event, 1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave"
@keydown="onButtonKeyDown($event, 1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
<span class="p-spinner-button-icon pi pi-caret-up"></span>
@ -22,7 +22,8 @@ export default {
default: 1
},
min: Number,
max: Number
max: Number,
ariaLabelledBy: String
},
data() {
return {

17
src/components/splitbutton/SplitButton.vue
View file

@ -1,12 +1,13 @@
<template>
<div ref="container" class="p-splitbutton p-buttonset p-component">
<PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
:aria-expanded="overlayVisible" aria-haspopup="true" :aria-owns="ariaId + '_overlay'"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-menu p-menu-dynamic p-component" v-if="overlayVisible">
<ul class="p-menu-list p-reset">
<li role="menuitem" v-for="item of model" :key="item.label" :target="item.target" :style="item.style" :class="['p-menuitem', item.class]">
<a :href="item.url||'#'" class="p-menuitem-link" @click="itemClick($event, item)">
<div id="ariaId + '_overlay'" ref="overlay" class="p-menu p-menu-dynamic p-component" v-if="overlayVisible">
<ul class="p-menu-list p-reset" role="menu">
<li role="none" v-for="item of model" :key="item.label" :target="item.target" :style="item.style" :class="['p-menuitem', item.class]">
<a :href="item.url||'#'" class="p-menuitem-link" @click="itemClick($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
@ -20,6 +21,7 @@
<script>
import Button from '../button/Button';
import DomHandler from '../utils/DomHandler';
import UniqueComponentId from '../utils/UniqueComponentId';
export default {
props: {
@ -103,6 +105,11 @@ export default {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
},
},
computed: {
ariaId() {
return UniqueComponentId();
}
},
components: {

9
src/components/steps/Steps.vue
View file

@ -1,12 +1,12 @@
<template>
<div :class="containerClass">
<ul role="tablist">
<li v-for="(item,index) of model" :key="item.to" :class="getItemClass(item)" :style="item.style">
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)">
<li v-for="(item,index) of model" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</router-link>
<span v-else class="p-menuitem-link">
<span v-else class="p-menuitem-link" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</span>
@ -41,6 +41,9 @@ export default {
});
}
},
isActive(item) {
return this.activeRoute === item.to;
},
getItemClass(item) {
return ['p-steps-item', item.class, {
'p-highlight p-steps-current': (this.activeRoute === item.to),

9
src/components/tabmenu/TabMenu.vue
View file

@ -2,12 +2,12 @@
<div class="p-tabmenu p-component">
<ul class="p-tabmenu-nav p-reset" role="tablist">
<template v-for="(item,i) of model">
<li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
<li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" role="presentation">
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)">
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation">
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
@ -39,6 +39,9 @@ export default {
});
}
},
isActive(item) {
return this.activeRoute === item.to;
},
getItemClass(item) {
return ['p-tabmenuitem', item.class, {'p-highlight': this.activeRoute === item.to, 'p-disabled': item.disabled}];
},

2
src/components/tabview/TabView.vue
View file

@ -2,7 +2,7 @@
<div class="p-tabview p-component p-tabview-top">
<ul class="p-tabview-nav p-reset" role="tablist">
<li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="['p-unselectable-text', {'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'">
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active">
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
</a>

14
src/components/tieredmenu/TieredMenuSub.vue
View file

@ -1,15 +1,15 @@
<template>
<ul ref="element" :class="containerClass" role="menu">
<ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<li :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)" role="none">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)">
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)">
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
@ -17,7 +17,7 @@
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
</li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li>
</template>
</ul>
</template>

2
src/components/toast/ToastMessage.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="containerClass">
<div class="p-toast-item">
<div class="p-toast-item" role="alert" aria-live="assertive" aria-atomic="true">
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false">
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>

1
src/components/togglebutton/ToggleButton.d.ts vendored
View file

@ -10,6 +10,7 @@ export declare class ToggleButton extends Vue {
name?: string;
iconPos?: string;
disabled?: boolean;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;

5
src/components/togglebutton/ToggleButton.vue
View file

@ -2,7 +2,7 @@
<div :class="buttonClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" :disabled="disabled"
@focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)">
@focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)" role="button" :aria-pressed="value" :aria-labelledby="ariaLabelledBy">
</div>
<span v-if="hasIcon" :class="iconClass"></span>
<span class="p-button-text p-unselectable-text p-c">{{label}}</span>
@ -23,7 +23,8 @@ export default {
type: String,
default: 'left'
},
disabled: Boolean
disabled: Boolean,
ariaLabelledBy: String
},
data() {
return {

2
src/components/toolbar/Toolbar.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="p-toolbar p-component">
<div class="p-toolbar p-component" role="toolbar">
<div class="p-toolbar-group-left">
<slot name="left"></slot>
</div>

2
src/components/tree/TreeNode.vue
View file

@ -6,7 +6,7 @@
<span :class="toggleIcon"></span>
</span>
<div class="p-checkbox p-component" v-if="checkboxMode">
<div :class="checkboxClass">
<div :class="checkboxClass" role="checkbox" :aria-checked="checked">
<span :class="checkboxIcon"></span>
</div>
</div>

31
src/components/treetable/TreeTable.vue
View file

@ -23,7 +23,8 @@
<table ref="table">
<thead class="p-treetable-thead">
<tr>
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)">
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
:tabindex="col.sortable ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
<span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
<TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
@ -382,10 +383,11 @@ export default {
}
return [
'p-sortable-column-icon pi pi-fw',
{'pi-sort': !sorted},
{'pi-sort-up': sorted && sortOrder > 0},
{'pi-sort-down': sorted && sortOrder < 0},
'p-sortable-column-icon pi pi-fw', {
'pi-sort': !sorted,
'pi-sort-up': sorted && sortOrder > 0,
'pi-sort-down': sorted && sortOrder < 0
}
];
},
getMultiSortMetaIndex(column) {
@ -712,6 +714,25 @@ export default {
document.removeEventListener('document', this.documentColumnResizeEndListener);
this.documentColumnResizeEndListener = null;
}
},
onColumnKeyDown(event, col) {
if (event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
this.onColumnHeaderClick(event, col);
}
},
getAriaSort(column) {
if (column.sortable) {
const sortIcon = this.getSortableColumnIcon(column);
if (sortIcon[1]['pi-sort-down'])
return 'descending';
else if (sortIcon[1]['pi-sort-up'])
return 'ascending';
else
return 'none';
}
else {
return null;
}
}
},
computed: {

2
src/components/treetable/TreeTableRow.vue
View file

@ -4,7 +4,7 @@
<span class="p-treetable-toggler p-unselectable-text" @click="toggle" v-if="col.expander" :style="togglerStyle">
<i :class="togglerIcon"></i>
</span>
<div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.expander">
<div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.expander" role="checkbox" :aria-checked="checked">
<div class="p-hidden-accessible">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
</div>

1
src/components/tristatecheckbox/TriStateCheckbox.d.ts vendored
View file

@ -2,6 +2,7 @@ import Vue from 'vue';
export declare class TriStateCheckbox extends Vue {
value?: any;
ariaLabelledBy?: string;
$emit(eventName: 'click', event: Event): this;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', event: Event): this;

7
src/components/tristatecheckbox/TriStateCheckbox.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="p-checkbox p-component" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()">
<input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()" :aria-labelledby="ariaLabelledBy">
</div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="value === true">
<span :class="['p-checkbox-icon p-c', icon]"></span>
</div>
</div>
@ -13,7 +13,8 @@
export default {
inheritAttrs: false,
props: {
value: null
value: null,
ariaLabelledBy: String
},
data() {
return {

2
src/components/utils/UniqueComponentId.js
View file

@ -1,6 +1,6 @@
var lastId = 0;
export default function (prefix = 'pr_id_') {
export default function (prefix = 'pv_id_') {
lastId++;
return `${prefix}${lastId}`;
}

53
src/views/accordion/AccordionDemo.vue
View file

@ -11,38 +11,38 @@
<h3 class="first">Default</h3>
<Accordion>
<AccordionTab header="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II">
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III">
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
<h3>Multiple</h3>
<Accordion :multiple="true">
<AccordionTab header="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II">
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III">
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
<AccordionTab header="Godfather IV" :disabled="true">
</AccordionTab>
@ -57,19 +57,19 @@
<Accordion :multiple="true">
<AccordionTab header="Godfather I" :active="active1">
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab header="Godfather II" :active="active2">
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab header="Godfather III" :active="active3">
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
@ -80,18 +80,18 @@
<i class="pi pi-calendar"></i>
<span>Godfather I</span>
</template>
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</AccordionTab>
<AccordionTab>
<template slot="header">
<i class="pi pi-user"></i>
<span>Godfather II</span>
</template>
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</AccordionTab>
<AccordionTab>
<template slot="header">
@ -99,9 +99,9 @@
<span>Godfather III</span>
<i class="pi pi-cog"></i>
</template>
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
</div>
@ -137,4 +137,9 @@ export default {
margin: 0 .5em;
}
}
.p-accordion p {
line-height: 1.5;
margin: 0;
}
</style>

48
src/views/accordion/AccordionDoc.vue
View file

@ -276,38 +276,38 @@ export default {
&lt;h3&gt;Default&lt;/h3&gt;
&lt;Accordion&gt;
&lt;AccordionTab header="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather II"&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather III"&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;/Accordion&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;Accordion :multiple="true"&gt;
&lt;AccordionTab header="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather II"&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather III"&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather IV" :disabled="true"&gt;
&lt;/AccordionTab&gt;
@ -322,19 +322,19 @@ export default {
&lt;Accordion :multiple="true"&gt;
&lt;AccordionTab header="Godfather I" :active="active1"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather II" :active="active2"&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather III" :active="active3"&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;/Accordion&gt;
@ -345,18 +345,18 @@ export default {
&lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
&lt;span&gt;Godfather I&lt;/span&gt;
&lt;/template&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab&gt;
&lt;template slot="header"&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;span&gt;Godfather II&lt;/span&gt;
&lt;/template&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;AccordionTab&gt;
&lt;template slot="header"&gt;
@ -364,9 +364,9 @@ export default {
&lt;span&gt;Godfather III&lt;/span&gt;
&lt;i class="pi pi-cog"&gt;&lt;/i&gt;
&lt;/template&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/AccordionTab&gt;
&lt;/Accordion&gt;
</template>

6
src/views/autocomplete/AutoCompleteDoc.vue
View file

@ -135,6 +135,12 @@ export default {
<td>number</td>
<td>300</td>
<td>Delay between keystrokes to wait before sending a query.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

6
src/views/calendar/CalendarDoc.vue
View file

@ -401,6 +401,12 @@ export default {
<td>true</td>
<td>Wheter to allow prevents entering the date manually via typing.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>

6
src/views/checkbox/CheckboxDoc.vue
View file

@ -59,6 +59,12 @@ export default {
<td>boolean</td>
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

6
src/views/chips/ChipsDoc.vue
View file

@ -52,6 +52,12 @@ import Chips from 'primevue/chips';
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

2
src/views/contextmenu/ContextMenuDemo.vue
View file

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick">
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>

2
src/views/contextmenu/ContextMenuDoc.vue
View file

@ -308,7 +308,7 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt;
</template>
</CodeHighlight>

6
src/views/dialog/DialogDoc.vue
View file

@ -124,6 +124,12 @@ export default {
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
</tbody>
</table>

6
src/views/dropdown/DropdownDoc.vue
View file

@ -149,6 +149,12 @@ data() {
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

15
src/views/fieldset/FieldsetDemo.vue
View file

@ -10,18 +10,18 @@
<div class="content-section implementation">
<h3 class="first">Regular</h3>
<Fieldset legend="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Fieldset>
<h3>Toggleable</h3>
<Fieldset legend="Godfather I" :toggleable="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Fieldset>
</div>
@ -45,3 +45,10 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.p-fieldset p {
line-height: 1.5;
margin: 0;
}
</style>

8
src/views/fieldset/FieldsetDoc.vue
View file

@ -156,18 +156,18 @@ import Fieldset from 'primevue/fieldset';
<template v-pre>
&lt;h3&gt;Regular&lt;/h3&gt;
&lt;Fieldset legend="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/Fieldset&gt;
&lt;h3&gt;Toggleable&lt;/h3&gt;
&lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/Fieldset&gt;
</template>
</CodeHighlight>

6
src/views/inputswitch/InputSwitchDoc.vue
View file

@ -71,6 +71,12 @@ export default {
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

4
src/views/menu/MenuDemo.vue
View file

@ -12,8 +12,8 @@
<Menu :model="items" />
<h3>Overlay</h3>
<Button type="button" label="Toggle" @click="toggle" />
<Menu ref="menu" :model="items" :popup="true" />
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>
<MenuDoc />

4
src/views/menu/MenuDoc.vue
View file

@ -209,8 +209,8 @@ toggle(event) {
&lt;Menu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Menu ref="menu" :model="items" :popup="true" /&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /&gt;
&lt;Menu id="overlay_menu" ref="menu" :model="items" :popup="true" /&gt;
</template>
</CodeHighlight>

6
src/views/multiselect/MultiSelectDoc.vue
View file

@ -147,6 +147,12 @@ data() {
<td>string</td>
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

4
src/views/overlaypanel/OverlayPanelDemo.vue
View file

@ -8,9 +8,9 @@
</div>
<div class="content-section implementation">
<Button type="button" label="Toggle" @click="toggle" />
<Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel>
</div>

10
src/views/overlaypanel/OverlayPanelDoc.vue
View file

@ -73,6 +73,12 @@ toggle(event) {
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
</tbody>
</table>
@ -146,9 +152,9 @@ toggle(event) {
</a>
<CodeHighlight>
<template v-pre>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel"/&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"&gt;
&lt;OverlayPanel ref="op" id="overlay_panel"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
</template>

15
src/views/panel/PanelDemo.vue
View file

@ -10,18 +10,18 @@
<div class="content-section implementation">
<h3 class="first">Regular</h3>
<Panel header="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel>
<h3>Toggleable</h3>
<Panel header="Godfather I" :toggleable="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel>
</div>
@ -37,3 +37,10 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.p-panel p {
line-height: 1.5;
margin: 0;
}
</style>

8
src/views/panel/PanelDoc.vue
View file

@ -160,18 +160,18 @@ import Panel from 'primevue/panel';
<template v-pre>
&lt;h3&gt;Regular&lt;/h3&gt;
&lt;Panel header="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/Panel&gt;
&lt;h3&gt;Toggleable&lt;/h3&gt;
&lt;Panel header="Godfather I" :toggleable="true"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/Panel&gt;
</template>
</CodeHighlight>

6
src/views/radiobutton/RadioButtonDoc.vue
View file

@ -91,6 +91,12 @@ export default {
<td>blur</td>
<td>event: Browser event</td>
<td>Callback to invoke on blur.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

6
src/views/selectbutton/SelectButtonDoc.vue
View file

@ -109,6 +109,12 @@ export default {
<td>string</td>
<td>null</td>
<td>A property to uniquely match the value in options for better performance.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

6
src/views/sidebar/SidebarDoc.vue
View file

@ -95,6 +95,12 @@ import Sidebar from 'primevue/sidebar';
<td>boolean</td>
<td>true</td>
<td>Whether to a modal layer behind the sidebar.</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
</tbody>
</table>

6
src/views/slider/SliderDoc.vue
View file

@ -102,6 +102,12 @@ export default {
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

6
src/views/spinner/SpinnerDoc.vue
View file

@ -61,6 +61,12 @@ import Spinner from 'primevue/spinner';
<td>number</td>
<td>null</td>
<td>Maximum boundary value.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

53
src/views/tabview/TabViewDemo.vue
View file

@ -11,19 +11,19 @@
<h3 class="first">Default</h3>
<TabView>
<TabPanel header="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</TabPanel>
<TabPanel header="Godfather II">
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</TabPanel>
<TabPanel header="Godfather III">
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</TabPanel>
</TabView>
@ -36,38 +36,38 @@
<TabView>
<TabPanel header="Godfather I" :active.sync="active[0]">
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</TabPanel>
<TabPanel header="Godfather II" :active.sync="active[1]">
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</TabPanel>
<TabPanel header="Godfather III" :active.sync="active[2]">
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</TabPanel>
</TabView>
<h3>Disabled</h3>
<TabView>
<TabPanel header="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</TabPanel>
<TabPanel header="Godfather II">
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</TabPanel>
<TabPanel header="Godfather III">
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</TabPanel>
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
</TabView>
@ -79,18 +79,18 @@
<i class="pi pi-calendar"></i>
<span>Godfather I</span>
</template>
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</TabPanel>
<TabPanel>
<template slot="header">
<span>Godfather II</span>
<i class="pi pi-user"></i>
</template>
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
</TabPanel>
<TabPanel>
<template slot="header">
@ -98,9 +98,9 @@
<span>Godfather III</span>
<i class="pi pi-cog"></i>
</template>
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</TabPanel>
</TabView>
</div>
@ -147,4 +147,9 @@ export default {
.p-button {
margin-right: .25em;
}
.p-tabview p {
line-height: 1.5;
margin: 0;
}
</style>

48
src/views/tabview/TabViewDoc.vue
View file

@ -239,19 +239,19 @@ export default {
&lt;h3&gt;Default&lt;/h3&gt;
&lt;TabView&gt;
&lt;TabPanel header="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;gThe story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather II"&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather III"&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
@ -264,38 +264,38 @@ export default {
&lt;TabView&gt;
&lt;TabPanel header="Godfather I" :active.sync="active[0]"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather II" :active.sync="active[1]"&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather III" :active.sync="active[2]"&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;TabView&gt;
&lt;TabPanel header="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather II"&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather III"&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather IV" :disabled="true"&gt;&lt;/TabPanel&gt;
&lt;/TabView&gt;
@ -307,18 +307,18 @@ export default {
&lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
&lt;span&gt;Godfather I&lt;/span&gt;
&lt;/template&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;span&gt;Godfather II&lt;/span&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;/template&gt;
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
@ -326,9 +326,9 @@ export default {
&lt;span&gt;Godfather III&lt;/span&gt;
&lt;i class="pi pi-cog"&gt;&lt;/i&gt;
&lt;/template&gt;
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</template>

4
src/views/tieredmenu/TieredMenuDemo.vue
View file

@ -12,8 +12,8 @@
<TieredMenu :model="items" />
<h3>Overlay</h3>
<Button type="button" label="Toggle" @click="toggle" />
<TieredMenu ref="menu" :model="items" :popup="true" />
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div>
<TieredMenuDoc />

4
src/views/tieredmenu/TieredMenuDoc.vue
View file

@ -301,8 +301,8 @@ toggle(event) {
&lt;TieredMenu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" /&gt;
&lt;TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" /&gt;
</template>
</CodeHighlight>

6
src/views/togglebutton/ToggleButtonDoc.vue
View file

@ -96,6 +96,12 @@ export default {
<td>boolean</td>
<td>null</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>

6
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View file

@ -31,6 +31,12 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
<td>boolean</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>