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

Fixed #5179 - Improve `data-pc-` structure in components

pull/5182/head
mertsincan 2024-01-30 14:35:32 +00:00
parent 3b72308226
commit 4836654f7b
85 changed files with 128 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/lib/autocomplete/AutoComplete.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="autocomplete">
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')">
<input
v-if="!multiple"
ref="focusInput"
@ -91,19 +91,7 @@
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
</slot>
<Button
v-if="dropdown"
ref="dropdownButton"
type="button"
tabindex="-1"
:class="[cx('dropdownButton'), dropdownClass]"
:disabled="disabled"
aria-hidden="true"
@click="onDropdownClick"
:unstyled="unstyled"
:pt="ptm('dropdownButton')"
data-pc-section="dropdownbutton"
>
<Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="[cx('dropdownButton'), dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :unstyled="unstyled" :pt="ptm('dropdownButton')">
<template #icon>
<slot name="dropdownicon" :class="dropdownIcon">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="dropdownicon" />

2
components/lib/avatar/Avatar.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar">
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
<slot>
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />

2
components/lib/avatargroup/AvatarGroup.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="avatargroup">
<div :class="cx('root')" v-bind="ptm('root')">
<slot></slot>
</div>
</template>

2
components/lib/badge/Badge.vue
View File

@ -1,5 +1,5 @@
<template>
<span :class="cx('root')" v-bind="ptm('root')" data-pc-name="badge">
<span :class="cx('root')" v-bind="ptm('root')">
<slot>{{ value }}</slot>
</span>
</template>

20
components/lib/basecomponent/BaseComponent.vue
View File

@ -117,18 +117,28 @@ export default {
: ObjectUtils.getItemValue(options, params);
},
_getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
const datasetPrefix = 'data-pc-';
const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
const { mergeSections = true, mergeProps: useMergeProps = false } = this._getPropValue('ptOptions') || this.$config?.ptOptions || {};
const global = searchInDefaultPT ? (searchOut ? this._useGlobalPT(this._getPTClassValue, key, params) : this._useDefaultPT(this._getPTClassValue, key, params)) : undefined;
const self = searchOut ? undefined : this._usePT(this._getPT(obj, this.$name), this._getPTClassValue, key, { ...params, global: global || {} });
const datasets = key !== 'transition' && {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
};
const datasets = this._getPTDatasets(key);
return mergeSections || (!mergeSections && self) ? (useMergeProps ? this._mergeProps(useMergeProps, global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
},
_getPTDatasets(key = '') {
const datasetPrefix = 'data-pc-';
const isExtended = key === 'root' && ObjectUtils.isNotEmpty(this.pt?.['data-pc-section']);
return (
key !== 'transition' && {
...(key === 'root' && {
[`${datasetPrefix}name`]: ObjectUtils.toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
...(isExtended && { [`${datasetPrefix}extend`]: ObjectUtils.toFlatCase(this.$.type.name) })
}),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
}
);
},
_getPTClassValue(...args) {
const value = this._getOptionValue(...args);

12
components/lib/basedirective/BaseDirective.js
View File

@ -22,16 +22,20 @@ const BaseDirective = {
return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
};
const datasetPrefix = 'data-pc-';
const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {};
const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT(), getValue, key, params) : undefined;
const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
const datasets = {
const datasets = BaseDirective._getPTDatasets(instance, key);
return mergeSections || (!mergeSections && self) ? (useMergeProps ? BaseDirective._mergeProps(instance, useMergeProps, global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
},
_getPTDatasets(instance = {}, key = '') {
const datasetPrefix = 'data-pc-';
return {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
};
return mergeSections || (!mergeSections && self) ? (useMergeProps ? BaseDirective._mergeProps(instance, useMergeProps, global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
},
_getPT: (pt, key = '', callback) => {
const getValue = (value) => {

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

@ -37,7 +37,6 @@ export default {
styleClass += ' p-blockui-document';
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'mask',
style: {
position: 'fixed',
top: '0',
@ -54,7 +53,6 @@ export default {
document.activeElement.blur();
} else {
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'mask',
style: {
position: 'absolute',
top: '0',

2
components/lib/breadcrumb/Breadcrumb.vue
View File

@ -1,5 +1,5 @@
<template>
<nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
<nav :class="cx('root')" v-bind="ptm('root')">
<ol :class="cx('menu')" v-bind="ptm('menu')">
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
<template v-for="(item, i) of model" :key="item.label + '_' + i">

2
components/lib/button/Button.vue
View File

@ -1,5 +1,5 @@
<template>
<button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" data-pc-name="button" :data-pc-severity="severity">
<button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" :data-pc-severity="severity">
<slot>
<slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />

6
components/lib/calendar/Calendar.vue
View File

@ -1,5 +1,5 @@
<template>
<span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="calendar">
<span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
<input
v-if="!inline"
:ref="inputRef"
@ -39,7 +39,6 @@
:aria-controls="panelId"
:unstyled="unstyled"
:pt="ptm('dropdownButton')"
data-pc-section="dropdownbutton"
>
<template #icon>
<slot name="dropdownicon" :class="icon">
@ -486,7 +485,6 @@
@keydown="onContainerButtonKeydown"
:unstyled="unstyled"
:pt="ptm('todayButton')"
data-pc-section="todaybutton"
data-pc-group-section="button"
/>
<CalendarButton
@ -497,7 +495,6 @@
@keydown="onContainerButtonKeydown"
:unstyled="unstyled"
:pt="ptm('clearButton')"
data-pc-section="clearbutton"
data-pc-group-section="button"
/>
</div>
@ -1691,7 +1688,6 @@ export default {
let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter';
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'datepickermask',
class: !this.isUnstyled && styleClass,
'p-bind': this.ptm('datepickermask')
});

2
components/lib/card/Card.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="card">
<div :class="cx('root')" v-bind="ptm('root')">
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>

2
components/lib/cascadeselect/CascadeSelect.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')" data-pc-name="cascadeselect">
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="focusInput"

2
components/lib/chart/Chart.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="chart">
<div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
<canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
</div>
</template>

2
components/lib/checkbox/Checkbox.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="checkbox" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

2
components/lib/chip/Chip.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')" data-pc-name="chip">
<div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')">
<slot>
<img v-if="image" :src="image" v-bind="ptm('image')" />
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />

2
components/lib/chips/Chips.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chips">
<div :class="cx('root')" v-bind="ptm('root')">
<ul
ref="container"
:class="cx('container')"

8
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -28,17 +28,17 @@
<component v-else :is="$slots.message" :message="confirmation"></component>
</template>
<template v-if="!$slots.container" #footer>
<CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')" data-pc-name="rejectbutton">
<CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-name="rejectbuttonicon" />
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot>
</template>
</CDButton>
<CDButton :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')" data-pc-name="acceptbutton">
<CDButton :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-name="acceptbuttonicon" />
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot>
</template>
</CDButton>

26
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -15,35 +15,17 @@
</template>
<component v-else :is="$slots.message" :message="confirmation"></component>
<div :class="cx('footer')" v-bind="ptm('footer')">
<CPButton
:label="rejectLabel"
@click="reject()"
@keydown="onRejectKeydown"
:autofocus="autoFocusReject"
:class="[cx('rejectButton'), confirmation.rejectClass]"
:unstyled="unstyled"
:pt="ptm('rejectButton')"
data-pc-name="rejectbutton"
>
<CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="[cx('rejectButton'), confirmation.rejectClass]" :unstyled="unstyled" :pt="ptm('rejectButton')">
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-name="rejectbuttonicon" />
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot>
</template>
</CPButton>
<CPButton
:label="acceptLabel"
@click="accept()"
@keydown="onAcceptKeydown"
:autofocus="autoFocusAccept"
:class="[cx('acceptButton'), confirmation.acceptClass]"
:unstyled="unstyled"
:pt="ptm('acceptButton')"
data-pc-name="acceptbutton"
>
<CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="[cx('acceptButton'), confirmation.acceptClass]" :unstyled="unstyled" :pt="ptm('acceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-name="acceptbuttonicon" />
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot>
</template>
</CPButton>

2
components/lib/contextmenu/ContextMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<Portal :appendTo="appendTo">
<transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="contextmenu">
<div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
<ContextMenuSub
:ref="listRef"
:id="id + '_list'"

17
components/lib/datatable/ColumnFilter.vue
View File

@ -69,7 +69,6 @@
@update:modelValue="onOperatorChange($event)"
:unstyled="unstyled"
:pt="getColumnPT('filterOperatorDropdown')"
data-pc-section="filteroperatordropdown"
></CFDropdown>
</div>
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
@ -85,7 +84,6 @@
@update:modelValue="onMenuMatchModeChange($event, i)"
:unstyled="unstyled"
:pt="getColumnPT('filterMatchModeDropdown')"
data-pc-section="filtermatchmodedropdown"
></CFDropdown>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')">
@ -100,7 +98,6 @@
severity="danger"
size="small"
:pt="getColumnPT('filterRemoveButton')"
data-pc-section="filterremovebutton"
>
<template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
@ -121,7 +118,6 @@
severity="info"
size="small"
:pt="getColumnPT('filterAddRuleButton')"
data-pc-section="filteraddrulebutton"
>
<template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
@ -139,21 +135,10 @@
size="small"
outlined
:pt="getColumnPT('filterClearButton')"
data-pc-section="filterclearbutton"
></CFButton>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton
v-if="!filterApplyTemplate"
type="button"
:class="cx('filterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
size="small"
:pt="getColumnPT('filterApplyButton')"
data-pc-section="filterapplybutton"
></CFButton>
<CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>
</div>

2
components/lib/datatable/DataTable.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')" data-pc-name="datatable">
<div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
<slot></slot>
<div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
<slot v-if="$slots.loading" name="loading"></slot>

2
components/lib/datatable/HeaderCell.vue
View File

@ -27,7 +27,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" data-pc-section="sorticon" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox

2
components/lib/dataview/DataView.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="dataview">
<div :class="cx('root')" v-bind="ptm('root')">
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>

2
components/lib/divider/Divider.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="sx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')" data-pc-name="divider">
<div :class="cx('root')" :style="sx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
<div v-if="$slots.default" :class="cx('content')" v-bind="ptm('content')">
<slot></slot>
</div>

2
components/lib/dock/Dock.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="dock">
<div :class="containerClass" :style="style" v-bind="ptm('root')">
<DockSub :model="model" :templates="$slots" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt" :unstyled="unstyled"></DockSub>
</div>
</template>

2
components/lib/dropdown/Dropdown.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="dropdown">
<div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')">
<input
v-if="editable"
ref="focusInput"

2
components/lib/editor/Editor.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
<div :class="cx('root')" v-bind="ptm('root')">
<div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
<slot name="toolbar">
<span class="ql-formats" v-bind="ptm('formats')">

2
components/lib/fieldset/Fieldset.vue
View File

@ -1,5 +1,5 @@
<template>
<fieldset :class="cx('root')" v-bind="ptm('root')" data-pc-name="fieldset">
<fieldset :class="cx('root')" v-bind="ptm('root')">
<legend :class="cx('legend')" v-bind="ptm('legend')">
<slot v-if="!toggleable" name="legend">
<span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>

8
components/lib/fileupload/FileUpload.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="isAdvanced" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
<div v-if="isAdvanced" :class="cx('root')" v-bind="ptm('root')">
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
<div :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
@ -9,14 +9,14 @@
</slot>
<span :class="cx('chooseButtonLabel')" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
</span>
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')" data-pc-section="uploadbutton">
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
<template #icon="iconProps">
<slot name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" />
</slot>
</template>
</FileUploadButton>
<FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')" data-pc-section="cancelbutton">
<FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
<template #icon="iconProps">
<slot name="cancelicon">
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" data-pc-section="cancelbuttonicon" />
@ -37,7 +37,7 @@
</div>
</div>
</div>
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')">
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
<span v-ripple :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
<slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">

2
components/lib/floatlabel/FloatLabel.vue
View File

@ -1,5 +1,5 @@
<template>
<span :class="cx('root')" v-bind="ptm('root')" data-pc-name="floatlabel">
<span :class="cx('root')" v-bind="ptm('root')">
<slot />
</span>
</template>

1
components/lib/galleria/GalleriaContent.vue
View File

@ -8,7 +8,6 @@
:aria-label="$attrs.ariaLabel"
:aria-roledescription="$attrs.ariaRoledescription"
v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }"
data-pc-name="galleria"
>
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="getPTOptions('closeButton')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />

2
components/lib/iconfield/IconField.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="iconfield">
<div :class="cx('root')" v-bind="ptm('root')">
<slot />
</div>
</template>

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

@ -1,5 +1,5 @@
<template>
<span :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="image">
<span :class="containerClass" :style="style" v-bind="ptm('root')">
<slot name="image" :onError="onError" :errorCallback="onError">
<img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
</slot>

2
components/lib/inplace/Inplace.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptm('root')" data-pc-name="inplace">
<div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptm('root')">
<div v-if="!d_active" ref="display" :class="cx('display')" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
<slot name="display"></slot>
</div>

2
components/lib/inputgroup/InputGroup.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroup">
<div :class="cx('root')" v-bind="ptm('root')">
<slot />
</div>
</template>

2
components/lib/inputgroupaddon/InputGroupAddon.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroupaddon">
<div :class="cx('root')" v-bind="ptm('root')">
<slot />
</div>
</template>

2
components/lib/inputmask/InputMask.vue
View File

@ -1,5 +1,5 @@
<template>
<input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" data-pc-name="inputmask" />
<input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" />
</template>
<script>

29
components/lib/inputnumber/InputNumber.vue
View File

@ -1,5 +1,5 @@
<template>
<span :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputnumber">
<span :class="cx('root')" v-bind="ptm('root')">
<INInputText
ref="input"
:id="inputId"
@ -25,37 +25,16 @@
v-bind="inputProps"
:pt="ptm('input')"
:unstyled="unstyled"
data-pc-section="input"
/>
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
<INButton
:class="[cx('incrementButton'), incrementButtonClass]"
v-on="upButtonListeners"
:disabled="disabled"
:tabindex="-1"
aria-hidden="true"
v-bind="incrementButtonProps"
:pt="ptm('incrementButton')"
:unstyled="unstyled"
data-pc-section="incrementbutton"
>
<INButton :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" :pt="ptm('incrementButton')" :unstyled="unstyled">
<template #icon>
<slot name="incrementbuttonicon">
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" data-pc-section="incrementbuttonicon" />
</slot>
</template>
</INButton>
<INButton
:class="[cx('decrementButton'), decrementButtonClass]"
v-on="downButtonListeners"
:disabled="disabled"
:tabindex="-1"
aria-hidden="true"
v-bind="decrementButtonProps"
:pt="ptm('decrementButton')"
:unstyled="unstyled"
data-pc-section="decrementbutton"
>
<INButton :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" :pt="ptm('decrementButton')" :unstyled="unstyled">
<template #icon>
<slot name="decrementbuttonicon">
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" data-pc-section="decrementbuttonicon" />
@ -73,7 +52,6 @@
v-bind="incrementButtonProps"
:pt="ptm('incrementButton')"
:unstyled="unstyled"
data-pc-section="incrementbutton"
>
<template #icon>
<slot name="incrementbuttonicon">
@ -91,7 +69,6 @@
v-bind="decrementButtonProps"
:pt="ptm('decrementButton')"
:unstyled="unstyled"
data-pc-section="decrementbutton"
>
<template #icon>
<slot name="decrementbuttonicon">

2
components/lib/inputswitch/InputSwitch.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" data-pc-name="inputswitch" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

2
components/lib/inputtext/InputText.vue
View File

@ -1,5 +1,5 @@
<template>
<input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="getPTOptions('root')" data-pc-name="inputtext" />
<input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="getPTOptions('root')" />
</template>
<script>

2
components/lib/knob/Knob.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="knob">
<div :class="cx('root')" v-bind="ptm('root')">
<svg
viewBox="0 0 100 100"
role="slider"

2
components/lib/listbox/Listbox.vue
View File

@ -1,5 +1,5 @@
<template>
<div :id="id" :class="cx('root')" @focusout="onFocusout" v-bind="ptm('root')" data-pc-name="listbox">
<div :id="id" :class="cx('root')" @focusout="onFocusout" v-bind="ptm('root')">
<span
ref="firstHiddenFocusableElement"
role="presentation"

2
components/lib/megamenu/MegaMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="megamenu">
<div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptm('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>

2
components/lib/menu/Menu.vue
View File

@ -1,7 +1,7 @@
<template>
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="menu">
<div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>

2
components/lib/message/Message.vue
View File

@ -1,6 +1,6 @@
<template>
<transition name="p-message" appear v-bind="ptm('transition')">
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')" data-pc-name="message">
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
<slot v-if="$slots.container" name="container" :onClose="close" :closeCallback="close"></slot>
<div v-else :class="cx('wrapper')" v-bind="ptm('wrapper')">
<slot name="messageicon" class="p-message-icon">

2
components/lib/metergroup/MeterGroup.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptm('root')" data-pc-name="metergroup">
<div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptm('root')">
<slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
<MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
</slot>

2
components/lib/multiselect/MultiSelect.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="multiselect">
<div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="focusInput"

8
components/lib/orderlist/OrderList.vue
View File

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled" data-pc-section="moveupbutton">
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled" data-pc-section="movetopbutton">
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled" data-pc-section="movedownbutton">
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled" data-pc-section="movebottombutton">
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />

1
components/lib/paginator/JumpToPageDropdown.vue
View File

@ -9,7 +9,6 @@
:disabled="disabled"
:unstyled="unstyled"
:pt="ptm('jumpToPageDropdown')"
data-pc-section="jumptopagedropdown"
data-pc-group-section="pagedropdown"
>
<template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">

12
components/lib/paginator/JumpToPageInput.vue
View File

@ -1,15 +1,5 @@
<template>
<JTPInput
ref="jtpInput"
:modelValue="d_page"
:class="cx('jumpToPageInput')"
:aria-label="inputArialabel"
:disabled="disabled"
@update:modelValue="onChange"
:unstyled="unstyled"
:pt="ptm('jumpToPageInput')"
data-pc-section="jumptopageinput"
></JTPInput>
<JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('jumpToPageInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('jumpToPageInput')"></JTPInput>
</template>
<script>

2
components/lib/paginator/Paginator.vue
View File

@ -1,6 +1,6 @@
<template>
<nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptm('paginatorWrapper')">
<div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')" data-pc-name="paginator">
<div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start" :state="currentState"></slot>
</div>

1
components/lib/paginator/RowsPerPageDropdown.vue
View File

@ -9,7 +9,6 @@
:disabled="disabled"
:unstyled="unstyled"
:pt="ptm('rowPerPageDropdown')"
data-pc-section="rowperpagedropdown"
data-pc-group-section="pagedropdown"
>
<template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">

2
components/lib/panel/Panel.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="panel">
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('header')" v-bind="ptm('header')">
<slot :id="ariaId + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>

2
components/lib/panelmenu/PanelMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<div :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="panelmenu">
<div :id="id" :class="cx('root')" v-bind="ptm('root')">
<template v-for="(item, index) of model" :key="getPanelKey(index)">
<div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="[cx('panel'), getItemProp(item, 'class')]" v-bind="ptm('panel')">
<div

2
components/lib/password/Password.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="password">
<div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
<PInputText
ref="input"
:id="inputId"

60
components/lib/picklist/PickList.vue
View File

@ -2,37 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')">
<div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
<slot name="sourcecontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled" data-pc-section="sourcemoveupbutton">
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled" data-pc-section="sourcemovetopbutton">
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled" data-pc-section="sourcemovedownbutton">
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</PLButton>
<PLButton
:aria-label="moveBottomAriaLabel"
:disabled="moveDisabled(0)"
type="button"
@click="moveBottom($event, 0)"
v-bind="moveBottomButtonProps"
:pt="ptm('sourceMoveBottomButton')"
:unstyled="unstyled"
data-pc-section="sourcemovebottombutton"
>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
@ -85,46 +76,28 @@
</div>
<div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls">
<slot name="movecontrolsstart"></slot>
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')" :unstyled="unstyled" data-pc-section="movetotargetbuton">
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" data-pc-section="movetotargeticon" />
</slot>
</template>
</PLButton>
<PLButton
:aria-label="moveAllToTargetAriaLabel"
type="button"
@click="moveAllToTarget"
:disabled="moveAllDisabled('sourceList')"
v-bind="moveAllToTargetProps"
:pt="ptm('moveAllToTargetButton')"
:unstyled="unstyled"
data-pc-section="movealltotargetbuton"
>
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps" :pt="ptm('moveAllToTargetButton')" :unstyled="unstyled">
<template #icon>
<slot name="movealltotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" data-pc-section="movealltotargeticon" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')" :unstyled="unstyled" data-pc-section="movetosourcebuton">
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" data-pc-section="movetosourceicon" />
</slot>
</template>
</PLButton>
<PLButton
:aria-label="moveAllToSourceAriaLabel"
type="button"
@click="moveAllToSource"
:disabled="moveAllDisabled('targetList')"
v-bind="moveAllToSourceProps"
:pt="ptm('moveAllToSourceButton')"
data-pc-section="movealltosourcebuton"
:unstyled="unstyled"
>
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveAllDisabled('targetList')" v-bind="moveAllToSourceProps" :pt="ptm('moveAllToSourceButton')" :unstyled="unstyled">
<template #icon>
<slot name="movealltosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" data-pc-section="movealltosourceicon" />
@ -178,37 +151,28 @@
</div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
<slot name="targetcontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled" data-pc-section="targetmoveupbutton">
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled" data-pc-section="targetmovetopbutton">
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled" data-pc-section="targetmovedownbutton">
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</PLButton>
<PLButton
:aria-label="moveBottomAriaLabel"
:disabled="moveDisabled(1)"
type="button"
@click="moveBottom($event, 1)"
v-bind="moveBottomButtonProps"
:pt="ptm('targetMoveBottomButton')"
:unstyled="unstyled"
data-pc-section="targetmovebottombutton"
>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />

2
components/lib/progressbar/ProgressBar.vue
View File

@ -1,5 +1,5 @@
<template>
<div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')" data-pc-name="progressbar">
<div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
<div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')">
<div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')">
<slot>{{ value + '%' }}</slot>

2
components/lib/progressspinner/ProgressSpinner.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" role="progressbar" v-bind="ptm('root')" data-pc-name="progressspinner">
<div :class="cx('root')" role="progressbar" v-bind="ptm('root')">
<svg :class="cx('spinner')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
<circle :class="cx('circle')" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
</svg>

2
components/lib/radiobutton/RadioButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="radio"

2
components/lib/rating/Rating.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="rating">
<div :class="cx('root')" v-bind="ptm('root')">
<div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="getPTOptions('cancelItem', 0)" :data-p-focused="focusedOptionIndex === 0">
<span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
<input

2
components/lib/scrollpanel/ScrollPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="scrollpanel">
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('wrapper')" v-bind="ptm('wrapper')">
<div ref="content" :id="contentId" :class="cx('content')" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
<slot></slot>

2
components/lib/scrolltop/ScrollTop.vue
View File

@ -1,6 +1,6 @@
<template>
<transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')" data-pc-name="scrolltop">
<button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')">
<slot name="icon" :class="cx('icon')">
<component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
</slot>

2
components/lib/selectbutton/SelectButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="selectbutton">
<div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
<div
v-for="(option, i) of options"
:key="getOptionRenderKey(option)"

2
components/lib/skeleton/Skeleton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptm('root')" data-pc-name="skeleton"></div>
<div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptm('root')"></div>
</template>
<script>

2
components/lib/slider/Slider.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" @click="onBarClick" v-bind="ptm('root')" :data-p-sliding="false" data-pc-name="slider">
<div :class="cx('root')" @click="onBarClick" v-bind="ptm('root')" :data-p-sliding="false">
<span :class="cx('range')" :style="[sx('range'), rangeStyle]" v-bind="ptm('range')"></span>
<span
v-if="!range"

2
components/lib/speeddial/SpeedDial.vue
View File

@ -1,5 +1,5 @@
<template>
<div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptm('root')" data-pc-name="speeddial">
<div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptm('root')">
<slot name="button" :onClick="onClick" :toggleCallback="onClick">
<SDButton
type="button"

4
components/lib/splitbutton/SplitButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
<div :class="containerClass" :style="style" v-bind="ptm('root')" :data-pc-severity="severity">
<slot>
<PVSButton
type="button"
@ -15,7 +15,6 @@
v-bind="buttonProps"
:pt="ptm('button')"
:unstyled="unstyled"
data-pc-section="button"
>
<template #icon="slotProps">
<slot name="icon" :class="slotProps.class">
@ -44,7 +43,6 @@
v-bind="menuButtonProps"
:pt="ptm('menuButton')"
:unstyled="unstyled"
data-pc-section="menubutton"
>
<template #icon="slotProps">
<slot name="menubuttonicon" :class="slotProps.class">

2
components/lib/splitter/Splitter.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptm('root', getPTOptions())" data-pc-name="splitter">
<div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptm('root', getPTOptions())">
<template v-for="(panel, i) of panels" :key="i">
<component :is="panel" tabindex="-1"></component>
<div

2
components/lib/splitterpanel/SplitterPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)" data-pc-name="splitterpanel">
<div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)">
<slot></slot>
</div>
</template>

2
components/lib/steps/Steps.vue
View File

@ -1,5 +1,5 @@
<template>
<nav :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="steps">
<nav :id="id" :class="cx('root')" v-bind="ptm('root')">
<ol ref="list" :class="cx('menu')" v-bind="ptm('menu')">
<template v-for="(item, index) of model" :key="label(item) + '_' + index.toString()">
<li

2
components/lib/tabmenu/TabMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tabmenu">
<div :class="cx('root')" v-bind="ptm('root')">
<ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
<template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
<li

2
components/lib/tabview/TabView.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" role="tablist" v-bind="ptm('root')" data-pc-name="tabview">
<div :class="cx('root')" role="tablist" v-bind="ptm('root')">
<div :class="cx('navContainer')" v-bind="ptm('navContainer')">
<button
v-if="scrollable && !isPrevButtonDisabled"

2
components/lib/tag/Tag.vue
View File

@ -1,5 +1,5 @@
<template>
<span :class="cx('root')" v-bind="ptm('root')" data-pc-name="tag">
<span :class="cx('root')" v-bind="ptm('root')">
<component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
<slot v-if="value || $slots.default">

2
components/lib/terminal/Terminal.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" @click="onClick" v-bind="ptm('root')" data-pc-name="terminal">
<div :class="cx('root')" @click="onClick" v-bind="ptm('root')">
<div v-if="welcomeMessage" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div>
<div :class="cx('content')" v-bind="ptm('content')">
<div v-for="(command, i) of commands" :key="command.text + i.toString()" v-bind="ptm('commands')">

2
components/lib/textarea/Textarea.vue
View File

@ -1,5 +1,5 @@
<template>
<textarea :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root', ptmParams)" data-pc-name="textarea"></textarea>
<textarea :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root', ptmParams)"></textarea>
</template>
<script>

2
components/lib/tieredmenu/TieredMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="tieredmenu">
<div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>

2
components/lib/timeline/Timeline.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="timeline">
<div :class="cx('root')" v-bind="ptm('root')">
<div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
<div :class="cx('opposite', { index })" v-bind="getPTOptions('opposite', index)">
<slot name="opposite" :item="item" :index="index"></slot>

2
components/lib/togglebutton/ToggleButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

2
components/lib/toolbar/Toolbar.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="toolbar">
<div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
<div :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>

2
components/lib/tree/Tree.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tree">
<div :class="cx('root')" v-bind="ptm('root')">
<template v-if="loading && loadingMode === 'mask'">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
<slot name="loadingicon" :class="cx('loadingIcon')">

3
components/lib/treeselect/TreeSelect.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')" data-pc-name="treeselect">
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="focusInput"
@ -75,7 +75,6 @@
:level="0"
:unstyled="unstyled"
:pt="ptm('tree')"
data-pc-section="tree"
>
<template v-if="$slots.itemtogglericon" #togglericon="iconProps">
<slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />

2
components/lib/treetable/HeaderCell.vue
View File

@ -17,7 +17,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
</th>

4
components/lib/treetable/TreeTable.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')" data-pc-name="treetable">
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
<slot></slot>
<div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
@ -25,7 +25,6 @@
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
:pt="ptm('paginator')"
data-pc-section="paginator"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -135,7 +134,6 @@
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
:pt="ptm('paginator')"
data-pc-section="paginator"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>

2
components/lib/tristatecheckbox/TriStateCheckbox.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="tristatecheckbox" :data-p-highlight="active" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

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

@ -1,6 +1,6 @@
<template>
<template v-if="!disabled">
<div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')" data-pc-name="virtualscroller">
<div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')">
<slot
name="content"
:styleClass="contentClass"