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

Refactor #5681

pull/5701/head
tugcekucukoglu 2024-05-06 18:23:01 +03:00
parent 3cc675e50f
commit e1367fd494
89 changed files with 376 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/autocomplete/AutoComplete.d.ts vendored
View File

@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
pcInput?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
/**
* Used to pass attributes to the input multiple's DOM element.
*/
@ -160,7 +160,7 @@ export interface AutoCompletePassThroughOptions {
* Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions}
*/
chipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
pcChipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the chip icon's DOM element.
*/

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

@ -55,9 +55,9 @@
:aria-posinset="i + 1"
v-bind="ptm('token')"
>
<slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
<slot name="chip" :class="cx('pcChipLabel')" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('chipLabel')">
<Chip :class="cx('pcChipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChipLabel')">
<template #removeicon>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
</template>

2
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -245,7 +245,7 @@ const classes = {
'p-focus': instance.focusedMultipleOptionIndex === i
}
],
chipLabel: 'p-autocomplete-chip-label',
pcChipLabel: 'p-autocomplete-chip-label',
chipIcon: 'p-autocomplete-chip-icon',
inputChip: 'p-autocomplete-input-chip',
loader: 'p-autocomplete-loader',

4
components/lib/button/Button.d.ts vendored
View File

@ -62,9 +62,9 @@ export interface ButtonPassThroughOptions<T = any> {
*/
label?: ButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the badge's DOM element.
* Used to pass attributes to the Badge component.
*/
badge?: ButtonPassThroughOptionType<T>;
pcBadge?: ButtonPassThroughOptionType<T>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -9,7 +9,7 @@
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
</slot>
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
<Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('pcBadge')"></Badge>
</slot>
</button>
</template>

4
components/lib/carousel/Carousel.d.ts vendored
View File

@ -88,7 +88,7 @@ export interface CarouselPassThroughOptions {
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
pcPreviousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the viewport's DOM element.
*/
@ -109,7 +109,7 @@ export interface CarouselPassThroughOptions {
* Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
pcNextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the indicator list's DOM element.
*/

12
components/lib/carousel/Carousel.vue
View File

@ -7,18 +7,18 @@
<div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')">
<Button
v-if="showNavigators"
:class="cx('previousButton')"
:class="cx('pcPreviousButton')"
:disabled="backwardIsDisabled"
:aria-label="ariaPrevButtonLabel"
:unstyled="unstyled"
@click="navBackward"
v-bind="prevButtonProps"
:pt="ptm('previousButton')"
:pt="ptm('pcPreviousButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<slot name="previousicon">
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('previousButton')['icon']" />
<component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('pcPreviousButton')['icon']" />
</slot>
</template>
</Button>
@ -61,18 +61,18 @@
</div>
<Button
v-if="showNavigators"
:class="cx('nextButton')"
:class="cx('pcNextButton')"
:disabled="forwardIsDisabled"
:aria-label="ariaNextButtonLabel"
:unstyled="unstyled"
@click="navForward"
v-bind="nextButtonProps"
:pt="ptm('nextButton')"
:pt="ptm('pcNextButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<slot name="nexticon">
<component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('nextButton')['icon']" />
<component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('pcNextButton')['icon']" />
</slot>
</template>
</Button>

4
components/lib/carousel/style/CarouselStyle.js
View File

@ -102,7 +102,7 @@ const classes = {
header: 'p-carousel-header',
contentContainer: 'p-carousel-content-container',
content: 'p-carousel-content',
previousButton: ({ instance }) => [
pcPreviousButton: ({ instance }) => [
'p-carousel-prev-button',
{
'p-disabled': instance.backwardIsDisabled
@ -126,7 +126,7 @@ const classes = {
'p-carousel-item-end': instance.lastIndex() === index
}
],
nextButton: ({ instance }) => [
pcNextButton: ({ instance }) => [
'p-carousel-next-button',
{
'p-disabled': instance.forwardIsDisabled

28
components/lib/column/Column.d.ts vendored
View File

@ -161,7 +161,7 @@ export interface ColumnPassThroughOptions {
/**
* Used to pass attributes to the header checkbox's DOM element.
*/
headerCheckbox?: CheckboxPassThroughOptionType;
pcHeaderCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the column filter's DOM element.
*/
@ -173,7 +173,7 @@ export interface ColumnPassThroughOptions {
/**
* Used to pass attributes to the column filter button's DOM element.
*/
columnFilterButton?: ColumnPassThroughOptionType;
pcColumnFilterButton?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the filter menu icon's DOM element.
*/
@ -181,7 +181,7 @@ export interface ColumnPassThroughOptions {
/**
* Used to pass attributes to the column filter clear button's DOM element.
*/
columnFilterClearButton?: ColumnPassThroughOptionType;
pcColumnFilterClearButton?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the filter clear icon's DOM element.
*/
@ -210,7 +210,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Select component.
* @see {@link SelectPassThroughOptionType}
*/
filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
pcFilterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter rule list' DOM element.
*/
@ -223,7 +223,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Select component.
* @see {@link SelectPassThroughOptionType}
*/
filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
pcFilterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter remove button container's DOM element.
*/
@ -232,7 +232,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
filterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
pcFilterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter add button container's DOM element.
*/
@ -241,7 +241,7 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
pcFilterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter buttonbar's DOM element.
*/
@ -250,12 +250,12 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
filterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
pcFilterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
pcFilterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the row toggler button's DOM element.
*/
@ -275,23 +275,23 @@ export interface ColumnPassThroughOptions {
/**
* Used to pass attributes to the radiobutton's DOM element.
*/
rowRadioButton?: RadioButtonPassThroughOptionType;
pcRowRadiobutton?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the checkbox's DOM element.
*/
rowCheckbox?: CheckboxPassThroughOptionType;
pcRowCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the row editor init button's DOM element.
*/
rowEditorInit?: ColumnPassThroughOptionType;
pcRowEditorInit?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the row editor save button's DOM element.
*/
rowEditorSave?: ColumnPassThroughOptionType;
pcRowEditorSave?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the row editor cancel button's DOM element.
*/
rowEditorCancel?: ColumnPassThroughOptionType;
pcRowEditorCancel?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the footer cell's DOM element.
*/

4
components/lib/confirmdialog/ConfirmDialog.d.ts vendored
View File

@ -109,12 +109,12 @@ export interface ConfirmDialogPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
pcRejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
pcAcceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -29,25 +29,25 @@
</template>
<template v-if="!$slots.container" #footer>
<Button
:class="[cx('rejectButton'), confirmation.rejectClass]"
:class="[cx('pcRejectButton'), confirmation.rejectClass]"
:autofocus="autoFocusReject"
:unstyled="unstyled"
:text="confirmation.rejectProps?.text || false"
@click="reject()"
v-bind="confirmation.rejectProps"
:label="rejectLabel"
:pt="ptm('rejectButton')"
:pt="ptm('pcRejectButton')"
>
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot>
</template>
</Button>
<Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('acceptButton')">
<Button :label="acceptLabel" :class="[cx('pcAcceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('pcAcceptButton')">
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot>
</template>
</Button>

4
components/lib/confirmdialog/style/ConfirmDialogStyle.js
View File

@ -16,8 +16,8 @@ const classes = {
root: 'p-confirmdialog',
icon: 'p-confirmdialog-icon',
message: 'p-confirmdialog-message',
rejectButton: 'p-confirmdialog-reject-button',
acceptButton: 'p-confirmdialog-accept-button'
pcRejectButton: 'p-confirmdialog-reject-button',
pcAcceptButton: 'p-confirmdialog-accept-button'
};
export default BaseStyle.extend({

4
components/lib/confirmpopup/ConfirmPopup.d.ts vendored
View File

@ -91,12 +91,12 @@ export interface ConfirmPopupPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
rejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
pcRejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
acceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
pcAcceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -16,7 +16,7 @@
<component v-else :is="$slots.message" :message="confirmation"></component>
<div :class="cx('footer')" v-bind="ptm('footer')">
<Button
:class="[cx('rejectButton'), confirmation.rejectClass]"
:class="[cx('pcRejectButton'), confirmation.rejectClass]"
:autofocus="autoFocusReject"
:unstyled="unstyled"
:size="confirmation.rejectProps?.size || 'small'"
@ -25,16 +25,16 @@
@keydown="onRejectKeydown"
v-bind="confirmation.rejectProps"
:label="rejectLabel"
:pt="ptm('rejectButton')"
:pt="ptm('pcRejectButton')"
>
<template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
<slot name="rejecticon">
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
<span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
</slot>
</template>
</Button>
<Button
:class="[cx('acceptButton'), confirmation.acceptClass]"
:class="[cx('pcAcceptButton'), confirmation.acceptClass]"
:autofocus="autoFocusAccept"
:unstyled="unstyled"
:size="confirmation.acceptProps?.size || 'small'"
@ -42,11 +42,11 @@
@keydown="onAcceptKeydown"
v-bind="confirmation.acceptProps"
:label="acceptLabel"
:pt="ptm('acceptButton')"
:pt="ptm('pcAcceptButton')"
>
<template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
<slot name="accepticon">
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
<span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
</slot>
</template>
</Button>

4
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -121,8 +121,8 @@ const classes = {
icon: 'p-confirmpopup-icon',
message: 'p-confirmpopup-message',
footer: 'p-confirmpopup-footer',
rejectButton: 'p-confirmpopup-reject-button',
acceptButton: 'p-confirmpopup-accept-button'
pcRejectButton: 'p-confirmpopup-reject-button',
pcAcceptButton: 'p-confirmpopup-accept-button'
};
export default BaseStyle.extend({

18
components/lib/datatable/BodyCell.vue
View File

@ -85,41 +85,41 @@
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<Button
v-if="!d_editing"
:class="cx('rowEditorInit')"
:class="cx('pcRowEditorInit')"
:aria-label="initButtonAriaLabel"
:unstyled="unstyled"
@click="onRowEditInit"
v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }"
v-bind="{ ...getColumnPT('pcRowEditorInit'), ...editButtonProps.init }"
data-pc-group-section="rowactionbutton"
>
<template #icon="slotProps">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorInit')['icon']" />
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorInit')['icon']" />
</template>
</Button>
<Button
v-if="d_editing"
:class="cx('rowEditorSave')"
:class="cx('pcRowEditorSave')"
:aria-label="saveButtonAriaLabel"
:unstyled="unstyled"
@click="onRowEditSave"
v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }"
v-bind="{ ...getColumnPT('pcRowEditorSave'), ...editButtonProps.save }"
data-pc-group-section="rowactionbutton"
>
<template #icon="slotProps">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorSave')['icon']" />
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorSave')['icon']" />
</template>
</Button>
<Button
v-if="d_editing"
:class="cx('rowEditorCancel')"
:class="cx('pcRowEditorCancel')"
:aria-label="cancelButtonAriaLabel"
:unstyled="unstyled"
@click="onRowEditCancel"
v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }"
v-bind="{ ...getColumnPT('pcRowEditorCancel'), ...editButtonProps.cancel }"
data-pc-group-section="rowactionbutton"
>
<template #icon="slotProps">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorCancel')['icon']" />
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorCancel')['icon']" />
</template>
</Button>
</template>

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

@ -10,11 +10,11 @@
aria-haspopup="true"
:aria-expanded="overlayVisible"
:aria-controls="overlayId"
:class="cx('columnFilterButton')"
:class="cx('pcColumnFilterButton')"
:unstyled="unstyled"
@click="toggleMenu($event)"
@keydown="onToggleButtonKeyDown($event)"
v-bind="{ ...getColumnPT('columnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
v-bind="{ ...getColumnPT('pcColumnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
>
<template #icon="slotProps">
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
@ -22,10 +22,10 @@
</Button>
<Button
v-if="showClearButton && display === 'row' && hasRowFilter()"
:class="cx('columnFilterClearButton')"
:class="cx('pcColumnFilterClearButton')"
:unstyled="unstyled"
@click="clearFilter()"
v-bind="{ ...getColumnPT('columnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
v-bind="{ ...getColumnPT('pcColumnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
>
<template #icon="slotProps">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
@ -73,12 +73,12 @@
:options="operatorOptions"
:modelValue="operator"
:aria-label="filterOperatorAriaLabel"
:class="cx('filterOperatorDropdown')"
:class="cx('pcFilterOperatorDropdown')"
optionLabel="label"
optionValue="value"
@update:modelValue="onOperatorChange($event)"
:unstyled="unstyled"
:pt="getColumnPT('filterOperatorDropdown')"
:pt="getColumnPT('pcFilterOperatorDropdown')"
></Select>
</div>
<div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')">
@ -87,37 +87,46 @@
v-if="isShowMatchModes"
:options="matchModes"
:modelValue="fieldConstraint.matchMode"
:class="cx('filterConstraintDropdown')"
:class="cx('pcFilterConstraintDropdown')"
optionLabel="label"
optionValue="value"
:aria-label="filterRuleAriaLabel"
@update:modelValue="onMenuMatchModeChange($event, i)"
:unstyled="unstyled"
:pt="getColumnPT('filterConstraintDropdown')"
:pt="getColumnPT('pcFilterConstraintDropdown')"
></Select>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')">
<Button
v-if="showRemoveIcon"
type="button"
:class="cx('filterRemoveRuleButton')"
:class="cx('pcFilterRemoveRuleButton')"
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:unstyled="unstyled"
v-bind="filterButtonProps.popover.removeRule"
:pt="getColumnPT('filterRemoveRuleButton')"
:pt="getColumnPT('pcFilterRemoveRuleButton')"
>
<template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveRuleButton')['icon']" />
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterRemoveRuleButton')['icon']" />
</template>
</Button>
</div>
</div>
</div>
<div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')">
<Button type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddButton')" @click="addConstraint()" :unstyled="unstyled" v-bind="filterButtonProps.popover.addRule" :pt="getColumnPT('filterAddButton')">
<Button
type="button"
:label="addRuleButtonLabel"
iconPos="left"
:class="cx('pcFilterAddButton')"
@click="addConstraint()"
:unstyled="unstyled"
v-bind="filterButtonProps.popover.addRule"
:pt="getColumnPT('pcFilterAddButton')"
>
<template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddButton')['icon']" />
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterAddButton')['icon']" />
</template>
</Button>
</div>
@ -125,24 +134,24 @@
<Button
v-if="!filterClearTemplate && showClearButton"
type="button"
:class="cx('filterClearButton')"
:class="cx('pcFilterClearButton')"
:label="clearButtonLabel"
@click="clearFilter"
:unstyled="unstyled"
v-bind="filterButtonProps.popover.clear"
:pt="getColumnPT('filterClearButton')"
:pt="getColumnPT('pcFilterClearButton')"
></Button>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<Button
v-if="!filterApplyTemplate"
type="button"
:class="cx('filterApplyButton')"
:class="cx('pcFilterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
v-bind="filterButtonProps.popover.apply"
:pt="getColumnPT('filterApplyButton')"
:pt="getColumnPT('pcFilterApplyButton')"
></Button>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>

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

@ -21,11 +21,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'top' })"
:class="cx('pcPaginator', { position: 'top' })"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
:pt="ptm('paginator')"
:pt="ptm('pcPaginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -240,11 +240,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'bottom' })"
:class="cx('pcPaginator', { position: 'bottom' })"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
:pt="ptm('paginator')"
:pt="ptm('pcPaginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>

4
components/lib/datatable/HeaderCheckbox.vue
View File

@ -1,8 +1,8 @@
<template>
<Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('headerCheckbox')">
<Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('pcHeaderCheckbox')">
<template #icon="slotProps">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('headerCheckbox.icon')" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcHeaderCheckbox.icon')" />
</template>
</Checkbox>
</template>

4
components/lib/datatable/RowCheckbox.vue
View File

@ -1,8 +1,8 @@
<template>
<Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowCheckbox')">
<Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowCheckbox')">
<template #icon="slotProps">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('rowCheckbox.icon')" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcRowCheckbox.icon')" />
</template>
</Checkbox>
</template>

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

@ -1,5 +1,5 @@
<template>
<RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowRadiobutton')" />
<RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowRadiobutton')" />
</template>
<script>

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

@ -598,7 +598,7 @@ const classes = {
overlay: 'p-datatable-mask p-component-overlay',
loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header',
paginator: ({ position }) => 'p-datatable-paginator-' + position,
pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,
tableContainer: 'p-datatable-table-container',
table: ({ props }) => [
'p-datatable-table',
@ -638,8 +638,8 @@ const classes = {
}
],
filterElementContainer: 'p-datatable-filter-element-container',
columnFilterButton: 'p-datatable-column-filter-button',
columnFilterClearButton: 'p-datatable-column-filter-clear-button',
pcColumnFilterButton: 'p-datatable-column-filter-button',
pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',
filterOverlay: ({ instance, props }) => [
'p-datatable-filter-overlay p-component',
{
@ -656,15 +656,15 @@ const classes = {
],
filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
filterOperator: 'p-datatable-filter-operator',
filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
pcFilterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
filterRuleList: 'p-datatable-filter-rule-list',
filterRule: 'p-datatable-filter-rule',
filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
filterAddButton: 'p-column-filter-add-button',
pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
pcFilterAddButton: 'p-column-filter-add-button',
filterButtonbar: 'p-datatable-filter-buttonbar',
filterClearButton: 'p-datatable-filter-clear-button',
filterApplyButton: 'p-datatable-filter-apply-button',
pcFilterClearButton: 'p-datatable-filter-clear-button',
pcFilterApplyButton: 'p-datatable-filter-apply-button',
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowGroupHeader: 'p-datatable-row-group-header',
rowToggleButton: 'p-datatable-row-toggle-button',
@ -701,9 +701,9 @@ const classes = {
}
],
reorderableRowHandle: 'p-datatable-reorderable-row-handle',
rowEditorInit: 'p-datatable-row-editor-init',
rowEditorSave: 'p-datatable-row-editor-save',
rowEditorCancel: 'p-datatable-row-editor-cancel',
pcRowEditorInit: 'p-datatable-row-editor-init',
pcRowEditorSave: 'p-datatable-row-editor-save',
pcRowEditorCancel: 'p-datatable-row-editor-cancel',
tfoot: 'p-datatable-tfoot',
footerCell: ({ instance }) => [
{

2
components/lib/dataview/DataView.d.ts vendored
View File

@ -99,7 +99,7 @@ export interface DataViewPassThroughOptions {
* Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
pcPaginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/

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

@ -12,11 +12,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'top' })"
:class="cx('pcPaginator', { position: 'top' })"
:alwaysShow="alwaysShowPaginator"
@page="onPage($event)"
:unstyled="unstyled"
:pt="ptm('paginator')"
:pt="ptm('pcPaginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -45,11 +45,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'bottom' })"
:class="cx('pcPaginator', { position: 'bottom' })"
:alwaysShow="alwaysShowPaginator"
@page="onPage($event)"
:unstyled="unstyled"
:pt="ptm('paginator')"
:pt="ptm('pcPaginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>

2
components/lib/dataview/style/DataViewStyle.js
View File

@ -42,7 +42,7 @@ const classes = {
}
],
header: 'p-dataview-header',
paginator: ({ position }) => 'p-dataview-paginator-' + position,
pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,
content: 'p-dataview-content',
emptyMessage: 'p-dataview-empty-message', // TODO: remove?
footer: 'p-dataview-footer'

20
components/lib/datepicker/DatePicker.d.ts vendored
View File

@ -138,7 +138,7 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
pcInput?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the dropdown's DOM element.
*/
@ -163,7 +163,7 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
previousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
pcPreviousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the title's DOM element.
*/
@ -188,7 +188,7 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the next button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
nextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
pcNextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the container's DOM element.
*/
@ -313,16 +313,26 @@ export interface DatePickerPassThroughOptions {
* Used to pass attributes to the buttonbar's DOM element.
*/
buttonbar?: DatePickerPassThroughOptionType;
/**
* Used to pass attributes to the increment button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
pcIncrementButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the decrement button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
pcDecrementButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the today button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
todayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
pcTodayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the clear button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
clearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
pcClearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the aria selected day's DOM element.
*/

72
components/lib/datepicker/DatePicker.vue
View File

@ -5,7 +5,7 @@
:ref="inputRef"
:id="inputId"
role="combobox"
:class="[inputClass, cx('input')]"
:class="[inputClass, cx('pcInput')]"
:style="inputStyle"
:value="inputFieldValue"
:placeholder="placeholder"
@ -28,7 +28,7 @@
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
:pt="ptm('input')"
:pt="ptm('pcInput')"
/>
<slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
<button
@ -78,19 +78,19 @@
<Button
v-show="showOtherMonths ? groupIndex === 0 : false"
:ref="previousButtonRef"
:class="cx('previousButton')"
:class="cx('pcPreviousButton')"
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
:unstyled="unstyled"
@click="onPrevButtonClick"
@keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps"
:pt="ptm('previousButton')"
:pt="ptm('pcPreviousButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<slot name="previousicon">
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
<component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('pcPreviousButton')['icon']" />
</slot>
</template>
</Button>
@ -158,19 +158,19 @@
<Button
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
:ref="nextButtonRef"
:class="cx('nextButton')"
:class="cx('pcNextButton')"
:disabled="disabled"
:aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
:unstyled="unstyled"
@click="onNextButtonClick"
@keydown="onContainerButtonKeydown"
v-bind="navigatorButtonProps"
:pt="ptm('nextButton')"
:pt="ptm('pcNextButton')"
data-pc-group-section="navigator"
>
<template #icon="slotProps">
<slot name="nexticon">
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
<component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('pcNextButton')['icon']" />
</slot>
</template>
</Button>
@ -311,7 +311,7 @@
<div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
<div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
<Button
:class="cx('incrementButton')"
:class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.nextHour"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, 1)"
@ -323,18 +323,18 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
:pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
<Button
:class="cx('decrementButton')"
:class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.prevHour"
:unstyled="unstyled"
@mousedown="onTimePickerElementMouseDown($event, 0, -1)"
@ -346,12 +346,12 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
:pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
@ -361,7 +361,7 @@
</div>
<div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
<Button
:class="cx('incrementButton')"
:class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.nextMinute"
:disabled="disabled"
:unstyled="unstyled"
@ -374,18 +374,18 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
:pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
<Button
:class="cx('decrementButton')"
:class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.prevMinute"
:disabled="disabled"
@mousedown="onTimePickerElementMouseDown($event, 1, -1)"
@ -397,12 +397,12 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
:pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
@ -412,7 +412,7 @@
</div>
<div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
<Button
:class="cx('incrementButton')"
:class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.nextSecond"
:disabled="disabled"
:unstyled="unstyled"
@ -425,18 +425,18 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
:pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="incrementicon">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
<Button
:class="cx('decrementButton')"
:class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.prevSecond"
:disabled="disabled"
:unstyled="unstyled"
@ -449,12 +449,12 @@
@keyup.enter="onTimePickerElementMouseUp($event)"
@keyup.space="onTimePickerElementMouseUp($event)"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
:pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="decrementicon">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
@ -464,36 +464,36 @@
</div>
<div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
<Button
:class="cx('incrementButton')"
:class="cx('pcIncrementButton')"
:aria-label="$primevue.config.locale.am"
:disabled="disabled"
:unstyled="unstyled"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
v-bind="timepickerButtonProps"
:pt="ptm('incrementButton')"
:pt="ptm('pcIncrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="incrementicon" :class="cx('incrementIcon')">
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
<span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
<Button
:class="cx('decrementButton')"
:class="cx('pcDecrementButton')"
:aria-label="$primevue.config.locale.pm"
:disabled="disabled"
@click="toggleAMPM($event)"
@keydown="onContainerButtonKeydown"
v-bind="timepickerButtonProps"
:pt="ptm('decrementButton')"
:pt="ptm('pcDecrementButton')"
data-pc-group-section="timepickerbutton"
>
<template #icon="slotProps">
<slot name="decrementicon" :class="cx('decrementIcon')">
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
<component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
</slot>
</template>
</Button>
@ -503,21 +503,21 @@
<Button
:label="todayLabel"
@click="onTodayButtonClick($event)"
:class="cx('todayButton')"
:class="cx('pcTodayButton')"
:unstyled="unstyled"
@keydown="onContainerButtonKeydown"
v-bind="todayButtonProps"
:pt="ptm('todayButton')"
:pt="ptm('pcTodayButton')"
data-pc-group-section="button"
/>
<Button
:label="clearLabel"
@click="onClearButtonClick($event)"
:class="cx('clearButton')"
:class="cx('pcClearButton')"
:unstyled="unstyled"
@keydown="onContainerButtonKeydown"
v-bind="clearButtonProps"
:pt="ptm('clearButton')"
:pt="ptm('pcClearButton')"
data-pc-group-section="button"
/>
</div>

14
components/lib/datepicker/style/DatePickerStyle.js
View File

@ -350,7 +350,7 @@ const classes = {
'p-focus': state.focused || state.overlayVisible
}
],
input: 'p-datepicker-input',
pcInput: 'p-datepicker-input',
dropdown: 'p-datepicker-dropdown',
inputIconContainer: 'p-datepicker-input-icon-container',
inputIcon: 'p-datepicker-input-icon',
@ -366,12 +366,12 @@ const classes = {
calendarContainer: 'p-datepicker-calendar-container',
calendar: 'p-datepicker-calendar',
header: 'p-datepicker-header',
previousButton: 'p-datepicker-prev-button',
pcPreviousButton: 'p-datepicker-prev-button',
title: 'p-datepicker-title',
viewMonth: 'p-datepicker-view-month p-link',
viewYear: 'p-datepicker-view-year p-link',
decade: 'p-datepicker-decade',
nextButton: 'p-datepicker-next-button',
pcNextButton: 'p-datepicker-next-button',
dayView: 'p-datepicker-day-view',
weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber',
@ -386,15 +386,15 @@ const classes = {
year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
timePicker: 'p-datepicker-time-picker',
hourPicker: 'p-datepicker-hour-picker',
incrementButton: 'p-datepicker-increment-button',
decrementButton: 'p-datepicker-decrement-button',
pcIncrementButton: 'p-datepicker-increment-button',
pcDecrementButton: 'p-datepicker-decrement-button',
separator: 'p-datepicker-separator',
minutePicker: 'p-datepicker-minute-picker',
secondPicker: 'p-datepicker-second-picker',
ampmPicker: 'p-datepicker-ampm-picker',
buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-datepicker-today-button',
clearButton: 'p-datepicker-clear-button'
pcTodayButton: 'p-datepicker-today-button',
pcClearButton: 'p-datepicker-clear-button'
};
export default BaseStyle.extend({

4
components/lib/dialog/Dialog.d.ts vendored
View File

@ -82,12 +82,12 @@ export interface DialogPassThroughOptions<T = any> {
* Used to pass attributes to the maximize Button component.
* @see {@link ButtonPassThroughOptions}
*/
maximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
pcMaximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the close Button component.
* @see {@link ButtonPassThroughOptions}
*/
closeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
pcCloseButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/

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

@ -14,17 +14,17 @@
v-if="maximizable"
:ref="maximizableRef"
:autofocus="focusableMax"
:class="cx('maximizeButton')"
:class="cx('pcMaximizeButton')"
@click="maximize"
:tabindex="maximizable ? '0' : '-1'"
:unstyled="unstyled"
v-bind="maximizeButtonProps"
:pt="ptm('maximizeButton')"
:pt="ptm('pcMaximizeButton')"
data-pc-group-section="headericon"
>
<template #icon="slotProps">
<slot name="maximizeicon" :maximized="maximized">
<component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizeButton')['icon']" />
<component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('pcMaximizeButton')['icon']" />
</slot>
</template>
</Button>
@ -32,17 +32,17 @@
v-if="closable"
:ref="closeButtonRef"
:autofocus="focusableClose"
:class="cx('closeButton')"
:class="cx('pcCloseButton')"
@click="close"
:aria-label="closeAriaLabel"
:unstyled="unstyled"
v-bind="closeButtonProps"
:pt="ptm('closeButton')"
:pt="ptm('pcCloseButton')"
data-pc-group-section="headericon"
>
<template #icon="slotProps">
<slot name="closeicon" :class="cx('closeButtonIcon')">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
</slot>
</template>
</Button>

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

@ -174,8 +174,8 @@ const classes = {
header: 'p-dialog-header',
title: 'p-dialog-title',
headerActions: 'p-dialog-header-actions',
maximizeButton: 'p-dialog-maximize-button',
closeButton: 'p-dialog-close-button',
pcMaximizeButton: 'p-dialog-maximize-button',
pcCloseButton: 'p-dialog-close-button',
content: 'p-dialog-content',
footer: 'p-dialog-footer'
};

4
components/lib/drawer/Drawer.d.ts vendored
View File

@ -79,10 +79,10 @@ export interface DrawerPassThroughOptions {
*/
title?: DrawerPassThroughOptionType;
/**
* Used to pass attributes to the previous button's DOM element.
* Used to pass attributes to the close button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
toggler?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>;
pcCloseButton?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/

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

@ -13,17 +13,17 @@
v-if="showCloseIcon"
:ref="closeButtonRef"
type="button"
:class="cx('closeButton')"
:class="cx('pcCloseButton')"
:aria-label="closeAriaLabel"
:unstyled="unstyled"
@click="hide"
v-bind="closeButtonProps"
:pt="ptm('closeButton')"
:pt="ptm('pcCloseButton')"
data-pc-group-section="iconcontainer"
>
<template #icon="slotProps">
<slot name="closeicon" :class="cx('closeIcon')">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
</slot>
</template>
</Button>

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

@ -187,7 +187,7 @@ const classes = {
],
header: 'p-drawer-header',
title: 'p-drawer-title',
closeButton: 'p-drawer-close-button',
pcCloseButton: 'p-drawer-close-button',
content: 'p-drawer-content'
};

6
components/lib/fileupload/FileContent.vue
View File

@ -5,12 +5,12 @@
<div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
<span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
</div>
<Badge :value="badgeValue" :class="cx('fileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('fileBadge')" />
<Badge :value="badgeValue" :class="cx('pcFileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcFileBadge')" />
<div :class="cx('fileActions')" v-bind="ptm('fileActions')">
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('fileRemoveButton')" :unstyled="unstyled" :pt="ptm('fileRemoveButton')">
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('pcFileRemoveButton')" :unstyled="unstyled" :pt="ptm('pcFileRemoveButton')">
<template #icon="iconProps">
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('fileRemoveButton')['icon']" />
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('pcFileRemoveButton')['icon']" />
</template>
</Button>
</div>

33
components/lib/fileupload/FileUpload.d.ts vendored
View File

@ -13,6 +13,7 @@ import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { MessagePassThroughOptions } from '../message';
import { PassThroughOptions } from '../passthrough';
import { ProgressBarPassThroughOptions } from '../progressbar';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined;
@ -207,33 +208,34 @@ export interface FileUploadPassThroughOptions {
*/
header?: FileUploadPassThroughOptionType;
/**
* Used to pass attributes to the choose button's DOM element.
* Used to pass attributes to the choose Button component.
* @see {@link ButtonPassThroughOptions}
*/
chooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
pcChooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the upload button's DOM element.
* Used to pass attributes to the upload Button component.
* @see {@link ButtonPassThroughOptions}
*/
uploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
pcUploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the cancel button's DOM element.
* Used to pass attributes to the cancel Button component.
* @see {@link ButtonPassThroughOptions}
*/
cancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
pcCancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the content's DOM element.
*/
content?: FileUploadPassThroughOptionType;
/**
* Used to pass attributes to the progressbar's DOM element.
* Used to pass attributes to the ProgressBar component.
* @see {@link ProgressbarPassThroughOptions}
*/
progressbar?: FileUploadPassThroughOptionType;
pcProgressbar?: ProgressBarPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the messages' DOM element.
* Used to pass attributes to the message's DOM element.
* @see {@link MessagePassThroughOptions}
*/
message?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
pcMessage?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the file's DOM element.
*/
@ -258,7 +260,7 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the Badge component.
* @see {@link BadgePassThroughOptions}
*/
fileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
pcFileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the file actions' DOM element.
*/
@ -267,16 +269,21 @@ export interface FileUploadPassThroughOptions {
* Used to pass attributes to the file remove button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
fileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
pcFileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the empty's DOM element.
*/
empty?: FileUploadPassThroughOptionType;
/**
* Used to pass attributes to the messages' DOM element.
* @see {@link MessagePassThroughOptions}
*/
pcMessages?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to pass attributes to the basic mode's button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
button?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
pcButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -3,24 +3,24 @@
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
<div :class="cx('header')" v-bind="ptm('header')">
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
<Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('chooseButton')">
<Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('pcChooseButton')">
<template #icon="iconProps">
<slot name="chooseicon">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" />
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcChooseButton')['icon']" />
</slot>
</template>
</Button>
<Button v-if="showUploadButton" :class="cx('uploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
<Button v-if="showUploadButton" :class="cx('pcUploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('pcUploadButton')">
<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" />
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcUploadButton')['icon']" data-pc-section="uploadbuttonicon" />
</slot>
</template>
</Button>
<Button v-if="showCancelButton" :class="cx('cancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
<Button v-if="showCancelButton" :class="cx('pcCancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('pcCancelButton')">
<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" />
<component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('pcCancelButton')['icon']" data-pc-section="cancelbuttonicon" />
</slot>
</template>
</Button>
@ -29,12 +29,12 @@
<div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
<template v-if="hasFiles">
<ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
<ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('pcProgressbar')" />
<div v-if="hasFiles" :class="cx('fileList')">
<FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</div>
</template>
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</Message>
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessage')">{{ msg }}</Message>
<div v-if="hasUploadedFiles" :class="cx('fileList')">
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</div>
@ -45,14 +45,14 @@
</div>
</div>
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')">
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</Message>
<Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('button')">
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessages')">{{ msg }}</Message>
<Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('pcButton')">
<template #icon="iconProps">
<slot v-if="!hasFiles || auto" name="uploadicon">
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
</slot>
<slot v-else name="chooseicon" :class="cx('chooseIcon')">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
<slot v-else name="chooseicon">
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
</slot>
</template>
</Button>
@ -372,7 +372,7 @@ export default {
return this.mode === 'basic';
},
chooseButtonClass() {
return [this.cx('chooseButton'), this.class];
return [this.cx('pcChooseButton'), this.class];
},
basicChooseButtonLabel() {
return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;

10
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -81,9 +81,9 @@ const theme = ({ dt }) => `
const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
header: 'p-fileupload-header',
chooseButton: 'p-fileupload-choose-button',
uploadButton: 'p-fileupload-upload-button',
clearButton: 'p-fileupload-clear-button',
pcChooseButton: 'p-fileupload-choose-button',
pcUploadButton: 'p-fileupload-upload-button',
pcCancelButton: 'p-fileupload-cancel-button',
content: 'p-fileupload-content',
fileList: 'p-fileupload-file-list',
file: 'p-fileupload-file',
@ -91,9 +91,9 @@ const classes = {
fileInfo: 'p-fileupload-file-info',
fileName: 'p-fileupload-file-name',
fileSize: 'p-fileupload-file-size',
fileBadge: 'p-fileupload-file-badge',
pcFileBadge: 'p-fileupload-file-badge',
fileActions: 'p-fileupload-file-actions',
fileRemoveButton: 'p-fileupload-file-remove-button'
pcFileRemoveButton: 'p-fileupload-file-remove-button'
};
export default BaseStyle.extend({

2
components/lib/inputchips/InputChips.d.ts vendored
View File

@ -102,7 +102,7 @@ export interface InputChipsPassThroughOptions {
* Used to pass attributes to the Chip component.
* @see {@link ChipPassThroughOptions}
*/
chipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
pcChipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the chip icon's DOM element.
*/

4
components/lib/inputchips/InputChips.vue
View File

@ -28,9 +28,9 @@
v-bind="ptm('chip')"
:data-p-focused="focusedIndex === i"
>
<slot name="chip" :class="cx('chipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
<slot name="chip" :class="cx('pcChipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('chipLabel')">
<Chip :class="cx('pcChipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('pcChipLabel')">
<template #removeicon>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
</template>

2
components/lib/inputchips/style/InputChipsStyle.js
View File

@ -102,7 +102,7 @@ const classes = {
}
],
chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }],
chipLabel: 'p-inputchips-chip-label',
pcChipLabel: 'p-inputchips-chip-label',
chipIcon: 'p-inputchips-chip-icon',
inputItem: 'p-inputchips-input-item'
};

2
components/lib/inputnumber/InputNumber.d.ts vendored
View File

@ -104,7 +104,7 @@ export interface InputNumberPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
pcInput?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the button group's DOM element.
*/

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

@ -4,7 +4,7 @@
ref="input"
:id="inputId"
role="spinbutton"
:class="[cx('input'), inputClass]"
:class="[cx('pcInput'), inputClass]"
:style="inputStyle"
:value="formattedValue"
:aria-valuemin="min"
@ -25,7 +25,7 @@
@click="onInputClick"
@focus="onInputFocus"
@blur="onInputBlur"
:pt="ptm('input')"
:pt="ptm('pcInput')"
:unstyled="unstyled"
/>
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">

2
components/lib/inputnumber/style/InputNumberStyle.js
View File

@ -159,7 +159,7 @@ const classes = {
'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical'
}
],
input: 'p-inputnumber-input',
pcInput: 'p-inputnumber-input',
buttonGroup: 'p-inputnumber-button-group',
incrementButton: ({ instance, props }) => [
'p-inputnumber-button p-inputnumber-increment-button',

2
components/lib/inputotp/InputOtp.d.ts vendored
View File

@ -68,7 +68,7 @@ export interface InputOtpPassThroughOptions {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
pcInput?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

4
components/lib/inputotp/InputOtp.vue
View File

@ -5,7 +5,7 @@
<OtpInputText
:value="tokens[i - 1]"
:type="inputType"
:class="cx('input')"
:class="cx('pcInput')"
:inputmode="inputMode"
:variant="variant"
:readonly="readonly"
@ -18,7 +18,7 @@
@blur="onBlur($event)"
@paste="onPaste($event)"
@keydown="onKeyDown($event)"
:pt="ptm('input')"
:pt="ptm('pcInput')"
/>
</slot>
</template>

2
components/lib/inputotp/style/InputOtpStyle.js
View File

@ -15,7 +15,7 @@ const theme = ({ dt }) => `
const classes = {
root: 'p-inputotp p-component',
input: 'p-inputotp-input'
pcInput: 'p-inputotp-input'
};
export default BaseStyle.extend({

2
components/lib/listbox/Listbox.d.ts vendored
View File

@ -130,7 +130,7 @@ export interface ListboxPassThroughOptions<T = any> {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
filter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
pcFilter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/

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

@ -19,7 +19,7 @@
<InputText
v-model="filterValue"
type="text"
:class="cx('filter')"
:class="cx('pcFilter')"
:placeholder="filterPlaceholder"
role="searchbox"
autocomplete="off"
@ -32,7 +32,7 @@
@input="onFilterChange"
@blur="onFilterBlur"
@keydown="onFilterKeyDown"
:pt="ptm('filter')"
:pt="ptm('pcFilter')"
/>
<slot name="filtericon" :class="cx('filterIcon')">

2
components/lib/listbox/style/ListboxStyle.js
View File

@ -126,7 +126,7 @@ const classes = {
],
header: 'p-listbox-header',
filterContainer: 'p-listbox-filter-container',
filter: 'p-listbox-filter',
pcFilter: 'p-listbox-filter',
filterIcon: 'p-listbox-filter-icon',
listContainer: 'p-listbox-list-container',
list: 'p-listbox-list',

8
components/lib/multiselect/MultiSelect.d.ts vendored
View File

@ -137,7 +137,7 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions}
*/
chipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
pcChipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the chip icon's DOM element.
*/
@ -161,7 +161,7 @@ export interface MultiSelectPassThroughOptions {
/**
* Used to pass attributes to the header checkbox's DOM element.
*/
headerCheckbox?: MultiSelectPassThroughOptionType;
pcHeaderCheckbox?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the filter container's DOM element.
*/
@ -170,7 +170,7 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
filter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
pcFilter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/
@ -203,7 +203,7 @@ export interface MultiSelectPassThroughOptions {
/**
* Used to pass attributes to the option checkbox's DOM element.
*/
optionCheckbox?: MultiSelectPassThroughOptionType;
pcOptionCheckbox?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the emptyMessage's DOM element.
*/

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

@ -33,7 +33,7 @@
<span v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('chip')" v-bind="ptm('chip')">
<slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
<!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('chipLabel')">
<Chip :class="cx('pcChipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('pcChipLabel')">
<template #removeicon>
<slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
</template>
@ -79,11 +79,11 @@
:aria-label="toggleAllAriaLabel"
@change="onToggleAll"
:unstyled="unstyled"
:pt="getHeaderCheckboxPTOptions('headerCheckbox')"
:pt="getHeaderCheckboxPTOptions('pcHeaderCheckbox')"
>
<template #icon="slotProps">
<component v-if="$slots.headercheckboxicon" :is="$slots.headercheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox.icon')" />
<component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('pcHeaderCheckbox.icon')" />
</template>
</Checkbox>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
@ -92,7 +92,7 @@
:value="filterValue"
@vue:mounted="onFilterUpdated"
@vue:updated="onFilterUpdated"
:class="cx('filter')"
:class="cx('pcFilter')"
:placeholder="filterPlaceholder"
:invalid="invalid"
:disabled="disabled"
@ -105,7 +105,7 @@
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@input="onFilterChange"
:pt="ptm('filter')"
:pt="ptm('pcFilter')"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
@ -149,14 +149,14 @@
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox')">
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox')">
<template #icon="slotProps">
<component v-if="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :is="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component
v-else-if="slotProps.checked"
:is="checkboxIcon ? 'span' : 'CheckIcon'"
:class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox.icon')"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox.icon')"
/>
</template>
</Checkbox>

4
components/lib/multiselect/style/MultiSelectStyle.js
View File

@ -230,7 +230,7 @@ const classes = {
}
],
chip: 'p-multiselect-chip',
chipLabel: 'p-multiselect-chip-label',
pcChipLabel: 'p-multiselect-chip-label',
chipIcon: 'p-multiselect-chip-icon',
dropdown: 'p-multiselect-dropdown',
loadingIcon: 'p-multiselect-loading-icon',
@ -243,7 +243,7 @@ const classes = {
],
header: 'p-multiselect-header',
filterContainer: 'p-multiselect-filter-container',
filter: 'p-multiselect-filter',
pcFilter: 'p-multiselect-filter',
filterIcon: 'p-multiselect-filter-icon',
listContainer: 'p-multiselect-list-container',
list: 'p-multiselect-list',

10
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -113,22 +113,22 @@ export interface OrderListPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
pcMoveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
pcMoveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
pcMoveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
pcMoveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the container's DOM element.
*/
@ -137,7 +137,7 @@ export interface OrderListPassThroughOptions {
* Used to pass attributes to the Listbox component.
* @see {@link ListboxPassThroughOptions}
*/
list?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
pcList?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -2,31 +2,31 @@
<div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('moveUpButton')" :unstyled="unstyled">
<Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcMoveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
<AngleUpIcon v-bind="ptm('pcMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</Button>
<Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('moveTopButton')" :unstyled="unstyled">
<Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcMoveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
<AngleDoubleUpIcon v-bind="ptm('pcMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</Button>
<Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('moveDownButton')" :unstyled="unstyled">
<Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcMoveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
<AngleDownIcon v-bind="ptm('pcMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</Button>
<Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
<Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcMoveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />
<AngleDoubleDownIcon v-bind="ptm('pcMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot>
</template>
</Button>
@ -49,7 +49,7 @@
:disabled="disabled"
:ariaLabel="ariaLabel"
:ariaLabelledby="ariaLabelledby"
:pt="ptm('list')"
:pt="ptm('pcList')"
:unstyled="unstyled"
@focus="onListFocus"
@blur="onListBlur"

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

@ -5,10 +5,10 @@
optionLabel="label"
optionValue="value"
@update:modelValue="onChange($event)"
:class="cx('jumpToPageDropdown')"
:class="cx('pcJumpToPageDropdown')"
:disabled="disabled"
:unstyled="unstyled"
:pt="ptm('jumpToPageDropdown')"
:pt="ptm('pcJumpToPageDropdown')"
data-pc-group-section="pagedropdown"
>
<template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">

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

@ -1,5 +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')"></JTPInput>
<JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('pcJumpToPageInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('pcJumpToPageInput')"></JTPInput>
</template>
<script>

6
components/lib/paginator/Paginator.d.ts vendored
View File

@ -125,17 +125,17 @@ export interface PaginatorPassThroughOptions<T = any> {
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptions}
*/
rowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
pcRowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Dropdown component.
* @see {@link DropdownPassThroughOptions}
*/
jumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
pcJumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Dropdown component.
* @see {@link InputNumberPassThroughOptions}
*/
jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
pcJumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content end's DOM element.
*/

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

@ -5,10 +5,10 @@
optionLabel="label"
optionValue="value"
@update:modelValue="onChange($event)"
:class="cx('rowPerPageDropdown')"
:class="cx('pcRowPerPageDropdown')"
:disabled="disabled"
:unstyled="unstyled"
:pt="ptm('rowPerPageDropdown')"
:pt="ptm('pcRowPerPageDropdown')"
data-pc-group-section="pagedropdown"
>
<template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">

6
components/lib/paginator/style/PaginatorStyle.js
View File

@ -130,9 +130,9 @@ const classes = {
}
],
current: 'p-paginator-current',
rowPerPageDropdown: 'p-paginator-rpp-dropdown',
jumpToPageDropdown: 'p-paginator-jtp-dropdown',
jumpToPageInput: 'p-paginator-jtp-input'
pcRowPerPageDropdown: 'p-paginator-rpp-dropdown',
pcJumpToPageDropdown: 'p-paginator-jtp-dropdown',
pcJumpToPageInput: 'p-paginator-jtp-input'
};
export default BaseStyle.extend({

2
components/lib/panel/Panel.d.ts vendored
View File

@ -101,7 +101,7 @@ export interface PanelPassThroughOptions {
* Used to pass attributes to the toggle button button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
toggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
pcToggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the content container's DOM element.
*/

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

@ -9,7 +9,7 @@
<Button
v-if="toggleable"
:id="id + '_header'"
:class="cx('toggleButton')"
:class="cx('pcToggleButton')"
:aria-label="buttonAriaLabel"
:aria-controls="id + '_content'"
:aria-expanded="!d_collapsed"
@ -17,12 +17,12 @@
@click="toggle"
@keydown="onKeyDown"
v-bind="toggleButtonProps"
:pt="ptm('toggleButton')"
:pt="ptm('pcToggleButton')"
>
<template #icon="slotProps">
<!--TODO: togglericon deprecated since v4.0-->
<slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggleButton')['icon']" />
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('pcToggleButton')['icon']" />
</slot>
</template>
</Button>

2
components/lib/panel/style/PanelStyle.js
View File

@ -43,7 +43,7 @@ const classes = {
header: 'p-panel-header',
title: 'p-panel-title',
headerActions: 'p-panel-header-actions',
toggleButton: 'p-panel-toggle-button',
pcToggleButton: 'p-panel-toggle-button',
contentContainer: 'p-panel-content-container',
content: 'p-panel-content',
footer: 'p-panel-footer'

2
components/lib/password/Password.d.ts vendored
View File

@ -74,7 +74,7 @@ export interface PasswordPassThroughOptions {
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
ptInput?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the mask icon's DOM element.
*/

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

@ -4,7 +4,7 @@
ref="input"
:id="inputId"
:type="inputType"
:class="[cx('input'), inputClass]"
:class="[cx('ptInput'), inputClass]"
:style="inputStyle"
:value="modelValue"
:aria-labelledby="ariaLabelledby"
@ -23,7 +23,7 @@
@keyup="onKeyUp"
@invalid="onInvalid"
v-bind="inputProps"
:pt="ptm('input')"
:pt="ptm('ptInput')"
:unstyled="unstyled"
/>
<!-- TODO: hide* and show* deprecated since v4.0-->

2
components/lib/password/style/PasswordStyle.js
View File

@ -81,7 +81,7 @@ const classes = {
'p-inputwrapper-focus': instance.focused
}
],
input: 'p-password-input',
ptInput: 'p-password-input',
maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
overlay: ({ instance }) => [

21
components/lib/picklist/PickList.d.ts vendored
View File

@ -10,6 +10,7 @@
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ListboxPassThroughOptions } from '../listbox';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -155,19 +156,23 @@ export interface PickListPassThroughOptions {
/**
* Used to pass attributes to the Button component.
*/
sourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcSourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
sourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcSourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
sourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcSourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcSourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Listbox component.
*/
pcList?: ListboxPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the source list containerr's DOM element.
*/
@ -215,19 +220,19 @@ export interface PickListPassThroughOptions {
/**
* Used to pass attributes to the Button component.
*/
targetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcTargetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
targetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcTargetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
targetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcTargetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
*/
targetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
pcTargetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -2,31 +2,31 @@
<div :class="cx('root')" v-bind="ptmi('root')">
<div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
<slot name="sourcecontrolsstart"></slot>
<Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled">
<Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcSourceMoveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
<AngleUpIcon v-bind="ptm('pcSourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</Button>
<Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled">
<Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcSourceMoveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
<AngleDoubleUpIcon v-bind="ptm('pcSourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</Button>
<Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled">
<Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcSourceMoveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
<AngleDownIcon v-bind="ptm('pcSourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</Button>
<Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled">
<Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcSourceMoveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
<AngleDoubleDownIcon v-bind="ptm('pcSourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot>
</template>
</Button>
@ -48,7 +48,7 @@
:focusOnHover="focusOnHover"
:stripedRows="stripedRows"
:disabled="disabled"
:pt="ptm('list')"
:pt="ptm('pcList')"
:unstyled="unstyled"
@focus="onListFocus($event, 'sourceList')"
@blur="onListBlur($event, 'sourceList')"
@ -112,7 +112,7 @@
:focusOnHover="focusOnHover"
:stripedRows="stripedRows"
:disabled="disabled"
:pt="ptm('list')"
:pt="ptm('pcList')"
:unstyled="unstyled"
@focus="onListFocus($event, 'targetList')"
@blur="onListBlur($event, 'targetList')"
@ -130,31 +130,31 @@
</div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
<slot name="targetcontrolsstart"></slot>
<Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled">
<Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcTargetMoveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" data-pc-section="moveupicon" />
<AngleUpIcon v-bind="ptm('pcTargetMoveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</Button>
<Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled">
<Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcTargetMoveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" data-pc-section="movetopicon" />
<AngleDoubleUpIcon v-bind="ptm('pcTargetMoveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</Button>
<Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled">
<Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcTargetMoveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" data-pc-section="movedownicon" />
<AngleDownIcon v-bind="ptm('pcTargetMoveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</Button>
<Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled">
<Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcTargetMoveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
<AngleDoubleDownIcon v-bind="ptm('pcTargetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot>
</template>
</Button>
@ -635,6 +635,7 @@ export default {
},
components: {
Listbox,
Button,
AngleRightIcon,
AngleLeftIcon,
AngleDownIcon,

4
components/lib/select/Select.d.ts vendored
View File

@ -115,9 +115,9 @@ export interface SelectPassThroughOptions<T = any> {
*/
filterContainer?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter's DOM element.
* Used to pass attributes to the InputText component.
*/
filter?: SelectPassThroughOptionType<T>;
pcFilter?: SelectPassThroughOptionType<T>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/

4
components/lib/select/Select.vue
View File

@ -83,7 +83,7 @@
:value="filterValue"
@vue:mounted="onFilterUpdated"
@vue:updated="onFilterUpdated"
:class="cx('filter')"
:class="cx('pcFilter')"
:placeholder="filterPlaceholder"
:invalid="invalid"
:variant="variant"
@ -95,7 +95,7 @@
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@input="onFilterChange"
:pt="ptm('filter')"
:pt="ptm('pcFilter')"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />

2
components/lib/select/style/SelectStyle.js
View File

@ -246,7 +246,7 @@ const classes = {
],
header: 'p-select-header',
filterContainer: 'p-select-filter-container',
filter: 'p-select-filter',
pcFilter: 'p-select-filter',
filterIcon: 'p-select-filter-icon',
listContainer: 'p-select-list-container',
list: 'p-select-list',

4
components/lib/selectbutton/SelectButton.d.ts vendored
View File

@ -58,6 +58,10 @@ export interface SelectButtonPassThroughOptions {
* Used to pass attributes to the root's DOM element.
*/
root?: SelectButtonPassThroughOptionType;
/**
* Used to pass attributes to the ToggleButton component.
*/
pcButton?: SelectButtonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -8,11 +8,11 @@
:disabled="disabled || isOptionDisabled(option)"
:unstyled="unstyled"
@change="onOptionSelect($event, option, index)"
:pt="ptm('button')"
:pt="ptm('pcButton')"
>
<template v-if="$slots.option" #default>
<slot name="option" :option="option" :index="index">
<span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span>
<span v-bind="ptm('pcButton')['label']">{{ getOptionLabel(option) }}</span>
</slot>
</template>
</ToggleButton>

2
components/lib/speeddial/SpeedDial.d.ts vendored
View File

@ -77,7 +77,7 @@ export interface SpeedDialPassThroughOptions {
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
pcButton?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the list's DOM element.
*/

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

@ -2,7 +2,7 @@
<div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptmi('root')">
<slot name="button" :visible="d_visible" :onClick="onClick" :toggleCallback="onClick">
<Button
:class="[cx('button'), buttonClass]"
:class="[cx('pcButton'), buttonClass]"
:disabled="disabled"
:aria-expanded="d_visible"
:aria-haspopup="true"
@ -13,12 +13,12 @@
@click="onClick($event)"
@keydown="onTogglerKeydown"
v-bind="buttonProps"
:pt="ptm('button')"
:pt="ptm('pcButton')"
>
<template #icon="slotProps">
<slot name="icon" :visible="d_visible">
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="[hideIcon, cx('buttonIcon'), slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="icon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="[d_visible && !!hideIcon ? hideIcon : showIcon, slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="icon" />
<component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="[hideIcon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="icon" />
<component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="[d_visible && !!hideIcon ? hideIcon : showIcon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="icon" />
</slot>
</template>
</Button>
@ -40,16 +40,16 @@
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
:tabindex="-1"
role="menuitem"
:class="cx('action', { item })"
:class="cx('pcAction', { item })"
:aria-label="item.label"
:disabled="disabled"
:unstyled="unstyled"
@click="onItemClick($event, item)"
v-bind="actionButtonProps"
:pt="getPTOptions(`${id}_${index}`, 'action')"
:pt="getPTOptions(`${id}_${index}`, 'pcAction')"
>
<template v-if="item.icon" #icon="slotProps">
<span :class="[cx('actionIcon'), item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
<span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
</template>
</Button>
</template>

2
components/lib/speeddial/style/SpeedDialStyle.js
View File

@ -99,7 +99,7 @@ const classes = {
'p-disabled': props.disabled
}
],
button: ({ props }) => [
pcButton: ({ props }) => [
'p-speeddial-button',
{
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon

9
components/lib/splitbutton/SplitButton.d.ts vendored
View File

@ -71,19 +71,20 @@ export interface SplitButtonPassThroughOptions {
*/
root?: SplitButtonPassThroughOptionType;
/**
* Used to pass attributes to the button's DOM element.
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
button?: SplitButtonPassThroughOptionType;
pcButton?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
dropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
pcDropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the TieredMenu component.
* @see {@link TieredMenuPassThroughOptions}
*/
menu?: TieredMenuPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
ptMenu?: TieredMenuPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

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

@ -2,7 +2,7 @@
<div :class="containerClass" :style="style" v-bind="ptmi('root')" :data-p-severity="severity">
<PVSButton
type="button"
:class="cx('button')"
:class="cx('pcButton')"
:label="label"
:disabled="disabled"
:severity="severity"
@ -12,12 +12,12 @@
:aria-label="label"
@click="onDefaultButtonClick"
v-bind="buttonProps"
:pt="ptm('button')"
:pt="ptm('pcButton')"
:unstyled="unstyled"
>
<template v-if="$slots.icon" #icon="slotProps">
<slot name="icon" :class="slotProps.class">
<span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="buttonicon" />
<span :class="[icon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="buttonicon" />
</slot>
</template>
<template #default>
@ -27,7 +27,7 @@
<PVSButton
ref="button"
type="button"
:class="cx('dropdown')"
:class="cx('pcDropdown')"
:disabled="disabled"
aria-haspopup="true"
:aria-expanded="isExpanded"
@ -40,16 +40,16 @@
:size="size"
:unstyled="unstyled"
v-bind="menuButtonProps"
:pt="ptm('dropdown')"
:pt="ptm('pcDropdown')"
>
<template #icon="slotProps">
<!--TODO: menubuttonicon and menuButtonIcon deprecated since v4.0-->
<slot :name="$slots.dropdownicon ? 'dropdownicon' : 'menubuttonicon'" :class="slotProps.class">
<component :is="menuButtonIcon || dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon || menuButtonIcon, slotProps.class]" v-bind="ptm('dropdown')['icon']" data-pc-section="menubuttonicon" />
<component :is="menuButtonIcon || dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon || menuButtonIcon, slotProps.class]" v-bind="ptm('pcDropdown')['icon']" data-pc-section="menubuttonicon" />
</slot>
</template>
</PVSButton>
<PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('menu')">
<PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('ptMenu')">
<template v-if="$slots.menuitemicon" #itemicon="slotProps">
<slot name="menuitemicon" :item="slotProps.item" :class="slotProps.class" />
</template>

4
components/lib/splitbutton/style/SplitButtonStyle.js
View File

@ -70,8 +70,8 @@ const theme = ({ dt }) => `
const classes = {
root: 'p-splitbutton p-component',
button: 'p-splitbutton-button',
dropdown: 'p-splitbutton-dropdown'
pcButton: 'p-splitbutton-button',
pcDropdown: 'p-splitbutton-dropdown'
};
export default BaseStyle.extend({

2
components/lib/tree/Tree.d.ts vendored
View File

@ -112,7 +112,7 @@ export interface TreePassThroughOptions<T = any> {
* Used to pass attributes to the input's DOM element.
* @see {@link InputTextPassThroughOptions}
*/
filterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
pcFilterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the filter icon's DOM element.
*/

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

@ -9,7 +9,7 @@
</div>
</template>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<InputText v-model="filterValue" autocomplete="off" :class="cx('filterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('filterInput')" />
<InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
<!--TODO: searchicon deprecated since v4.0-->
<slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
<SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />

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

@ -191,7 +191,7 @@ const classes = {
mask: 'p-tree-mask p-component-overlay',
loadingIcon: 'p-tree-loading-icon',
filterContainer: 'p-tree-filter-container',
filterInput: 'p-tree-filter-input',
pcFilterInput: 'p-tree-filter-input',
filterIcon: 'p-tree-filter-icon',
wrapper: 'p-tree-root', //TODO: discuss
rootChildren: 'p-tree-root-children',

4
components/lib/treeselect/TreeSelect.d.ts vendored
View File

@ -88,7 +88,7 @@ export interface TreeSelectPassThroughOptions {
* Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions}
*/
chipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
pcChipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the dropdown's DOM element.
*/
@ -109,7 +109,7 @@ export interface TreeSelectPassThroughOptions {
* Used to pass attributes to Tree component.
* @see {@link TreePassThroughOptions}
*/
tree?: TreePassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
pcTree?: TreePassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the empty message's DOM element.
*/

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

@ -30,7 +30,7 @@
</template>
<template v-else-if="display === 'chip'">
<div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')">
<Chip :class="cx('chipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('chipLabel')" />
<Chip :class="cx('pcChipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChipLabel')" />
</div>
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
</template>
@ -75,7 +75,7 @@
@node-unselect="onNodeUnselect"
:level="0"
:unstyled="unstyled"
:pt="ptm('tree')"
:pt="ptm('pcTree')"
>
<template v-if="$slots.itemtogglericon" #togglericon="iconProps">
<slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />

2
components/lib/treeselect/style/TreeSelectStyle.js
View File

@ -141,7 +141,7 @@ const classes = {
}
],
chip: 'p-treeselect-chip',
chipLabel: 'p-treeselect-chip-label',
pcChipLabel: 'p-treeselect-chip-label',
dropdown: 'p-treeselect-dropdown',
dropdownIcon: 'p-treeselect-dropdown-icon',
panel: ({ instance }) => [

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

@ -19,12 +19,12 @@
v-if="checkboxSelectionMode && columnProp('expander')"
:modelValue="checked"
:binary="true"
:class="cx('nodeCheckbox')"
:class="cx('pcNodeCheckbox')"
@change="toggleCheckbox"
:tabindex="-1"
:indeterminate="partialChecked"
:unstyled="unstyled"
:pt="getColumnCheckboxPT('nodeCheckbox')"
:pt="getColumnCheckboxPT('pcNodeCheckbox')"
:data-p-partialchecked="partialChecked"
>
<template #icon="slotProps">

2
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -236,7 +236,7 @@ export interface TreeTablePassThroughOptions {
* Used to pass attributes to the Paginator component.
* @see {@link PaginatorPassThroughOptionType}
*/
paginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>;
pcPaginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the table container's DOM element.
*/

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

@ -20,11 +20,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'top' })"
:class="cx('pcPaginator', { position: 'top' })"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
:pt="ptm('paginator')"
:pt="ptm('pcPaginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
@ -129,11 +129,11 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator', { position: 'bottom' })"
:class="cx('pcPaginator', { position: 'bottom' })"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
:pt="ptm('paginator')"
:pt="ptm('pcPaginator')"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>

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

@ -505,7 +505,7 @@ const classes = {
],
nodeToggleButton: 'p-treetable-node-toggle-button',
nodeToggleIcon: 'p-treetable-node-toggle-icon',
nodeCheckbox: 'p-treetable-node-checkbox',
pcNodeCheckbox: 'p-treetable-node-checkbox',
emptyMessage: 'p-treetable-empty-message',
tfoot: 'p-treetable-tfoot',
footerCell: ({ instance }) => [